From 38dfd59a8b5d05266e5567f79dcf30fd10ef7c54 Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Wed, 10 Jan 2018 15:05:39 +0800 Subject: split element by type split elements by type in toolbar Issue-ID: SDC-895 Change-Id: I0254c9c5f938df80942d60ffefe4b8577c788233 Signed-off-by: Lvbo163 --- .../components/container/container.component.css | 26 ++++ .../components/container/container.component.html | 22 +++ .../components/container/container.component.ts | 164 +++++++++++++++++++++ 3 files changed, 212 insertions(+) create mode 100644 sdc-workflow-designer-ui/src/app/components/container/container.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/container/container.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/container/container.component.ts (limited to 'sdc-workflow-designer-ui/src/app/components/container') diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.css b/sdc-workflow-designer-ui/src/app/components/container/container.component.css new file mode 100644 index 00000000..bc889652 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.css @@ -0,0 +1,26 @@ +/** + * 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 + */ + +.canvas { + -webkit-overflow-scrolling: touch; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + height: 100%; + position: relative; + overflow: scroll; + z-index: 0; + background-color: white; +} diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.html b/sdc-workflow-designer-ui/src/app/components/container/container.component.html new file mode 100644 index 00000000..0d9c5222 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.html @@ -0,0 +1,22 @@ + + +
+
+ +
+ + + + 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); + } + +} -- cgit 1.2.3-korg