diff options
author | 2018-01-10 15:05:39 +0800 | |
---|---|---|
committer | 2018-01-10 15:05:39 +0800 | |
commit | 38dfd59a8b5d05266e5567f79dcf30fd10ef7c54 (patch) | |
tree | 043a724663d3324ce80cc546a241898e99796897 /sdc-workflow-designer-ui/src/app/directive | |
parent | eb2d1c385e5c3d96e770b776f74ddbde9f2b133f (diff) |
split element by type
split elements by type in toolbar
Issue-ID: SDC-895
Change-Id: I0254c9c5f938df80942d60ffefe4b8577c788233
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/directive')
-rw-r--r-- | sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts | 134 | ||||
-rw-r--r-- | sdc-workflow-designer-ui/src/app/directive/resizeable/resizable.directive.ts | 42 |
2 files changed, 42 insertions, 134 deletions
diff --git a/sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts b/sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts deleted file mode 100644 index 395cf040..00000000 --- a/sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts +++ /dev/null @@ -1,134 +0,0 @@ -/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- * ZTE - initial API and implementation and/or initial documentation
- */
-
-import { AfterViewInit, Directive, ElementRef } from '@angular/core';
-import { JsPlumbService } from "../../services/jsplumb.service";
-
-@Directive({
- selector: '[b4tDragSelect]'
-})
-export class DragSelectDirective implements AfterViewInit {
- private selectBox: any;
- public selecting = false;
-
- public relatvieX: number;
- public relatvieY: number;
-
- public startX: number;
- public startY: number;
- public endX: number;
- public endY: number;
-
- public left: number = 0;
- public top: number = 0;
- public width: number = 0;
- public height: number = 0;
-
- constructor(private el: ElementRef, private jsPlumbService: JsPlumbService) { }
-
- public ngAfterViewInit(): void {
- this.selectBox = document.createElement('div');
- const selectArea = this.el.nativeElement.appendChild(this.selectBox);
- this.el.nativeElement.addEventListener("mousedown", (event: MouseEvent) => this.mouseDown(event));
- this.el.nativeElement.addEventListener("mousemove", (event: MouseEvent) => this.mouseMove(event));
- this.el.nativeElement.addEventListener("mouseup", (event: MouseEvent) => this.mouseUp(event));
- }
-
- public mouseDown(event: MouseEvent) {
- this.relatvieX = event.clientX - event.offsetX;
- this.relatvieY = event.clientY - event.offsetY;
-
- this.width = 0;
- this.height = 0;
- this.startX = event.clientX;
- this.startY = event.clientY;
- this.endX = this.startX;
- this.endY = this.startY;
- this.selecting = true;
- this.updateSelectArea();
- }
-
- public mouseMove(event: MouseEvent) {
- this.endX = event.clientX;
- this.endY = event.clientY;
-
- this.updateSelectArea();
- }
-
- public mouseUp(event: MouseEvent) {
- this.selecting = false;
- this.updateSelectArea();
- }
-
- private updateSelectArea() {
- if (this.selecting) {
- this.selectBox.className = 'selecting';
- } else {
- this.selectBox.className = '';
- return;
- }
-
- this.getAllSelectedNodes();
-
- const leftTmp = this.startX >= this.endX ? this.endX : this.startX;
- const topTmp = this.startY >= this.endY ? this.endY : this.startY;
-
- this.left = leftTmp - this.relatvieX;
- this.top = topTmp - this.relatvieY;
-
- this.width = Math.abs(this.startX - this.endX);
- this.height = Math.abs(this.endY - this.startY);
-
- this.selectBox.style.top = this.top + 'px';
- this.selectBox.style.left = this.left + 'px';
- this.selectBox.style.width = this.width + 'px';
- this.selectBox.style.height = this.height + 'px';
- }
-
- public getAllSelectedNodes() {
- if(!this.selecting) {
- return;
- }
- const selectedNodes = [];
-
- const nodes = this.el.nativeElement.querySelectorAll('div.node');
- nodes.forEach(node => {
- if(this.checkNodeSelected(node)) {
- selectedNodes.push(node);
- }
- });
-
- this.jsPlumbService.jsplumbInstance.clearDragSelection();
- this.jsPlumbService.jsplumbInstance.addToDragSelection(selectedNodes);
-
- }
-
- private checkNodeSelected(node: any): boolean {
- const nodeLeft = node.offsetLeft;
- const nodeTop = node.offsetTop;
- const nodeRigth = nodeLeft + node.clientWidth;
- const nodeBottom = nodeTop + node.clientHeight;
-
- const selectedRight = this.left + this.width;
- const selectedBottom = this.top + this.height;
-
- return this.between(nodeLeft, this.left, selectedRight)
- && this.between(nodeRigth, this.left, selectedRight)
- && this.between(nodeTop, this.top, selectedBottom)
- && this.between(nodeBottom, this.top, selectedBottom);
- }
-
- private between(value, min, max): boolean {
- return min <= value && value <= max;
- }
-
-}
diff --git a/sdc-workflow-designer-ui/src/app/directive/resizeable/resizable.directive.ts b/sdc-workflow-designer-ui/src/app/directive/resizeable/resizable.directive.ts new file mode 100644 index 00000000..f591fe6f --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/directive/resizeable/resizable.directive.ts @@ -0,0 +1,42 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+import * as $ from 'jquery';
+
+import { JsPlumbService } from '../../services/jsplumb.service';
+import { ModelService } from '../../services/model.service';
+
+@Directive({ selector: '[b4tResizable]' })
+export class ResizableDirective implements AfterViewInit {
+
+ constructor(private el: ElementRef,
+ private jsPlumbService: JsPlumbService,
+ private planModelService: ModelService) {
+ }
+
+ public ngAfterViewInit() {
+ console.log('init resizble.');
+
+ $(this.el.nativeElement).resizable({
+ handles: 'all',
+ resize: (event, ui) => {
+ const element = ui.helper[0];
+ this.planModelService.updatePosition(element.id,
+ element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight - 12);
+ this.jsPlumbService.resizeParent(element, element.parentNode);
+ const node = this.planModelService.getNodeMap().get(element.id);
+ this.jsPlumbService.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
+ },
+ });
+ }
+}
|