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             info.connection.bind('click', connection => {\r
  62                 this.jsplumbInstance.select({ connections: [connection] }).delete();\r
  63             });\r
  64         });\r
  65 \r
  66     }\r
  67 \r
  68     public initNode(selectorString: string) {\r
  69         const selector = this.jsplumbInstance.getSelector(selectorString);\r
  70 \r
  71         this.jsplumbInstance.draggable(selector, {\r
  72             // stop(event) {\r
  73             //     node.position.left = event.pos[0];\r
  74             //     node.position.top = event.pos[1];\r
  75             // },\r
  76         });\r
  77 \r
  78         this.jsplumbInstance.makeTarget(selector, {\r
  79             detachable: false,\r
  80             isTarget: true,\r
  81             maxConnections: -1,\r
  82         });\r
  83 \r
  84         this.jsplumbInstance.makeSource(selector, {\r
  85             filter: '.anchor, .anchor *',\r
  86             detachable: false,\r
  87             isSource: true,\r
  88             maxConnections: -1,\r
  89         });\r
  90 \r
  91     }\r
  92 \r
  93     public remove(nodeId: string) {\r
  94         this.jsplumbInstance.remove(nodeId);\r
  95     }\r
  96 \r
  97     public buttonDraggable() {\r
  98         const selector = this.jsplumbInstance.getSelector('.toolbar .item');\r
  99         this.jsplumbInstance.draggable(selector,\r
 100             {\r
 101                 scope: 'btn',\r
 102                 clone: true,\r
 103             });\r
 104     }\r
 105 \r
 106     public buttonDroppable() {\r
 107         console.log('buttonDroppable');\r
 108         const selector = this.jsplumbInstance.getSelector('.canvas');\r
 109         this.jsplumbInstance.droppable(selector, {\r
 110             scope: 'btn',\r
 111             drop: event => {\r
 112                 const el = this.jsplumbInstance.getSelector(event.drag.el);\r
 113                 const type = el.attributes.nodeType.value;\r
 114                 const left = event.e.clientX - event.drop.position[0];\r
 115                 const top = event.e.clientY - event.drop.position[1];\r
 116 \r
 117                 this.workflowService.addNode(type, type, top, left);\r
 118             },\r
 119         });\r
 120     }\r
 121 \r
 122 }\r