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 \r
  16 /**\r
  17  * JsPlumbService\r
  18  * provides all of the operations about jsplumb plugin.\r
  19  */\r
  20 @Injectable()\r
  21 export class JsPlumbService {\r
  22     private jsplumbInstance;\r
  23 \r
  24     constructor() {\r
  25 \r
  26     }\r
  27 \r
  28 \r
  29     public initJsPlumbInstance() {\r
  30         this.jsplumbInstance = jsp.jsPlumb.getInstance({\r
  31             Container: 'container'\r
  32         });\r
  33 \r
  34         this.jsplumbInstance.importDefaults({\r
  35             Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],\r
  36             Connector: [\r
  37                 'Flowchart',\r
  38                 { cornerRadius: 0, stub: 0, gap: 3 },\r
  39             ],\r
  40             ConnectionOverlays: [\r
  41                 [\r
  42                     'Arrow',\r
  43                     { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },\r
  44                 ],\r
  45                 ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],\r
  46             ],\r
  47             Endpoint: 'Blank',\r
  48             PaintStyle: {\r
  49                 strokeWidth: 4,\r
  50                 stroke: 'black',\r
  51             },\r
  52             HoverPaintStyle: {\r
  53                 strokeWidth: 4,\r
  54                 stroke: 'blue',\r
  55             },\r
  56         });\r
  57 \r
  58         // add connection to model data while a new connection is build\r
  59         this.jsplumbInstance.bind('connection', info => {\r
  60             this.jsplumbInstance.bind('connection', info => {\r
  61 \r
  62                                 info.connection.bind('click', connection => {\r
  63                                         this.jsplumbInstance.select({ connections: [connection] }).delete();\r
  64                                 });\r
  65                         });\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     }
  95 }\r