From bb91af99ee72160a29ffd84c3c5a0c65326c1209 Mon Sep 17 00:00:00 2001
From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Tue, 12 Sep 2017 21:09:38 +0800
Subject: support drag muilt element

support select multi element by mouse drag and drag multi element.

Issue-ID: SDC-316

Change-Id: I7111b705f2e490b84f030fc4832217808c3783dc
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
---
 .../directive/drag-select/drag-select.directive.ts | 134 +++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts

(limited to 'sdc-workflow-designer-ui/src/app/directive')

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
new file mode 100644
index 00000000..395cf040
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/directive/drag-select/drag-select.directive.ts
@@ -0,0 +1,134 @@
+/**
+ * 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;
+    }
+
+}
-- 
cgit 1.2.3-korg