1 files changed, 164 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.ts b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts
new file mode 100644
index 00000000..f35c2482
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts
@@ -0,0 +1,164 @@
+/**
+ * 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 { AfterViewChecked, AfterViewInit, Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild } from '@angular/core';
+
+import { SequenceFlow } from '../../model/workflow/sequence-flow';
+import { WorkflowElement } from '../../model/workflow/workflow-element';
+import { WorkflowNode } from '../../model/workflow/workflow-node';
+import { BroadcastService } from '../../services/broadcast.service';
+import { JsPlumbService } from '../../services/jsplumb.service';
+import { ModelService } from '../../services/model.service';
+
+/**
+ * main canvas, it contains two parts: canvas and node property component
+ * bpmn task nodes can be dropped into this canvas, and then the workflow can be edit
+ */
+@Component({
+    selector: 'b4t-container',
+    templateUrl: 'container.component.html',
+    styleUrls: ['./container.component.css']
+})
+export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnInit, OnDestroy {
+    public allNotes: WorkflowNode[];
+    @ViewChild('nodeSelector') nodeSelector: ElementRef;
+    @ViewChild('mainContainer') mainContainer: ElementRef;
+
+    private isSelecting = false;
+    private selectedElements: WorkflowElement[] = [];
+    private showProperties = false;
+    private needInitSequence = false;
+
+    constructor(private broadcastService: BroadcastService, private jsPlumbService: JsPlumbService,
+        public modelService: ModelService) {
+    }
+
+    @HostListener('window:keyup.delete', ['$event']) ondelete(event: KeyboardEvent) {
+        if (this.showProperties || 0 >= this.selectedElements.length) {
+            return;
+        }
+        this.selectedElements.forEach(element => {
+            if (this.modelService.isNode(element)) {
+                let selectNode = element as WorkflowNode;
+                const parentId = this.jsPlumbService.getParentNodeId(selectNode.id);
+                this.jsPlumbService.remove(selectNode);
+                this.modelService.deleteNode(parentId, selectNode.id);
+            } else {
+                let sequenceFlow = element as SequenceFlow;
+                this.modelService.deleteConnection(sequenceFlow.sourceRef, sequenceFlow.targetRef);
+                this.jsPlumbService.deleteConnect(sequenceFlow.sourceRef, sequenceFlow.targetRef);
+            }
+        });
+        this.selectedElements = [];
+    }
+
+    @HostListener('document:mouseup', ['$event']) onmouseup() {
+        if (this.isSelecting) {
+            this.nodeSelector.nativeElement.style.display = 'none';
+            this.mainContainer.nativeElement.onmousemove = null;
+            this.isSelecting = false;
+            this.broadcastService.broadcast(this.broadcastService.showProperty, null);
+            this.broadcastService.broadcast(this.broadcastService.selectedElement, this.selectedElements);
+        }
+    }
+
+    public ngOnInit() {
+        this.jsPlumbService.initJsPlumbInstance(this.modelService.rootNodeId);
+        this.broadcastService.planModel$.subscribe(() => {
+            this.needInitSequence = true;
+        });
+        this.broadcastService.showProperty$.subscribe(element=>{
+            this.showProperties = null !== element;
+        });
+    }
+
+    public ngAfterViewInit() {
+        this.jsPlumbService.canvasDroppable();
+        this.broadcastService.selectedElement$.subscribe(elements => {
+            if (elements) {
+                this.selectedElements = elements;
+            } else {
+                this.selectedElements = [];
+            }
+        });
+    }
+
+    public ngAfterViewChecked() {
+        if (this.needInitSequence) {
+            this.needInitSequence = false;
+            // Add the connection
+            this.jsPlumbService.connectChildrenNodes(this.modelService.rootNodeId);
+        }
+    }
+
+    public ngOnDestroy() {
+        if (this.mainContainer.nativeElement.onmousemove) {
+            this.mainContainer.nativeElement.document.onmousemove = null;
+        }
+    }
+
+    public canvasMouseDown(event) {
+        this.selectedElements = [];
+        this.isSelecting = true;
+        let posx = event.clientX + this.mainContainer.nativeElement.scrollLeft;
+        posx = 220 > posx ? 0 : posx - 220;
+        let posy = event.clientY + this.mainContainer.nativeElement.scrollTop;
+        posy = 60 > posy ? 0 : posy - 60;
+        let element = this.nodeSelector.nativeElement;
+        element.style.left = posx + "px";
+        element.style.top = posy + "px";
+        element.style.width = '0px';
+        element.style.height = '0px';
+        element.style.display = 'block';
+        let curThis = this;
+        this.mainContainer.nativeElement.onmousemove = function (moveEvent) {
+            let movePosx = moveEvent.clientX + curThis.mainContainer.nativeElement.scrollLeft;
+            movePosx = 220 > movePosx ? 0 : movePosx - 220;
+            let movePosy = moveEvent.clientY + curThis.mainContainer.nativeElement.scrollTop;
+            movePosy = 60 > movePosy ? 0 : movePosy - 60;
+            const left = Math.min(movePosx, posx);
+            const top = Math.min(movePosy, posy);
+            const width = Math.abs(posx - movePosx);
+            const height = Math.abs(posy - movePosy);
+            element.style.left = left + "px";
+            element.style.top = top + "px";
+            element.style.width = width + "px";
+            element.style.height = height + "px";
+            curThis.selectNodes(left, top, width, height);
+        };
+    }
+
+    private selectNodes(left: number, top: number, width: number, height: number) {
+        this.selectedElements = [];
+        const allNodes = this.modelService.getNodes();
+        allNodes.forEach(node => {
+            const np = node.position;
+            let selected = false;
+            if (left < np.left) {
+                if ((top < np.top && left + width > np.left && top + height > np.top)
+                    || (top >= np.top && top < np.top + np.height && left + width > np.left)) {
+                    selected = true;
+                }
+            } else if (left < np.left + np.width) {
+                if ((top < np.top && top + height > np.top)
+                    || (top >= np.top && top < np.top + np.height)) {
+                    selected = true;
+                }
+            }
+            if (selected) {
+                this.selectedElements.push(node);
+            }
+        });
+        this.broadcastService.broadcast(this.broadcastService.selectedElement, this.selectedElements);
+    }
+
+}