sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts

   1 /**\r
   2  * Copyright (c) 2017 ZTE Corporation.\r
   3  * All rights reserved. This program and the accompanying materials\r
   4  * are made available under the terms of the Eclipse Public License v1.0\r
   5  * and the Apache License 2.0 which both accompany this distribution,\r
   6  * and are available at http://www.eclipse.org/legal/epl-v10.html\r
   7  * and http://www.apache.org/licenses/LICENSE-2.0\r
   8  *\r
   9  * Contributors:\r
  10  *     ZTE - initial API and implementation and/or initial documentation\r
  11  */\r
  12 \r
  13 import { Injectable } from '@angular/core';\r
  14 import * as jsp from 'jsplumb';\r
  15 import { WorkflowService } from "./workflow.service";\r
  16 \r
  17 /**\r
  18  * JsPlumbService\r
  19  * provides all of the operations about jsplumb plugin.\r
  20  */\r
  21 @Injectable()\r
  22 export class JsPlumbService {\r
  23     public jsplumbInstance;\r
  24 \r
  25     constructor(private workflowService: WorkflowService) {\r
  26         this.initJsPlumbInstance();\r
  27     }\r
  28 \r
  29 \r
  30     public initJsPlumbInstance() {\r
  31         this.jsplumbInstance = jsp.jsPlumb.getInstance({\r
  32             Container: 'canvas'\r
  33         });\r
  34 \r
  35         this.jsplumbInstance.importDefaults({\r
  36             Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],\r
  37             Connector: [\r
  38                 'Flowchart',\r
  39                 { cornerRadius: 0, stub: 0, gap: 3 },\r
  40             ],\r
  41             ConnectionOverlays: [\r
  42                 [\r
  43                     'Arrow',\r
  44                     { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },\r
  45                 ],\r
  46                 ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],\r
  47             ],\r
  48             Endpoint: 'Blank',\r
  49             PaintStyle: {\r
  50                 strokeWidth: 4,\r
  51                 stroke: 'black',\r
  52             },\r
  53             HoverPaintStyle: {\r
  54                 strokeWidth: 4,\r
  55                 stroke: 'blue',\r
  56             },\r
  57         });\r
  58 \r
  59         // add connection to model data while a new connection is build\r
  60         this.jsplumbInstance.bind('connection', info => {\r
  61             this.workflowService.addSequenceFlow(info.connection.sourceId, info.connection.targetId);\r
  62 \r
  63             info.connection.bind('click', connection => {\r
  64                 this.jsplumbInstance.select({ connections: [connection] }).delete();\r
  65                 this.workflowService.deleteSequenceFlow(connection.sourceId, connection.targetId);\r
  66             });\r
  67         });\r
  68 \r
  69     }\r
  70 \r
  71     public initNode(selectorString: string) {\r
  72         const selector = this.jsplumbInstance.getSelector(selectorString);\r
  73 \r
  74         this.jsplumbInstance.draggable(selector, {\r
  75             // stop(event) {\r
  76             //     node.position.left = event.pos[0];\r
  77             //     node.position.top = event.pos[1];\r
  78             // },\r
  79         });\r
  80 \r
  81         this.jsplumbInstance.makeTarget(selector, {\r
  82             detachable: false,\r
  83             isTarget: true,\r
  84             maxConnections: -1,\r
  85         });\r
  86 \r
  87         this.jsplumbInstance.makeSource(selector, {\r
  88             filter: '.anchor, .anchor *',\r
  89             detachable: false,\r
  90             isSource: true,\r
  91             maxConnections: -1,\r
  92         });\r
  93 \r
  94     }\r
  95 \r
  96     public remove(nodeId: string) {\r
  97         this.jsplumbInstance.remove(nodeId);\r
  98     }\r
  99 \r
 100     public buttonDraggable() {\r
 101         const selector = this.jsplumbInstance.getSelector('.toolbar .item');\r
 102         this.jsplumbInstance.draggable(selector,\r
 103             {\r
 104                 scope: 'btn',\r
 105                 clone: true,\r
 106             });\r
 107     }\r
 108 \r
 109     public buttonDroppable() {\r
 110         console.log('buttonDroppable');\r
 111         const selector = this.jsplumbInstance.getSelector('.canvas');\r
 112         this.jsplumbInstance.droppable(selector, {\r
 113             scope: 'btn',\r
 114             drop: event => {\r
 115                 const el = this.jsplumbInstance.getSelector(event.drag.el);\r
 116                 const type = el.attributes.nodeType.value;\r
 117                 const left = event.e.clientX - event.drop.position[0];\r
 118                 const top = event.e.clientY - event.drop.position[1];\r
 119 \r
 120                 this.workflowService.addNode(type, type, top, left);\r
 121             },\r
 122         });\r
 123     }\r
 124 \r
 125 }\r