工作流插件参与进入项目本体

2020-10-24 17:04:04 +08:00
parent cebb9b3002
commit 84e35753cf
97 changed files with 6198 additions and 14 deletions
@@ -0,0 +1,147 @@
+import editorStyle from "../util/defaultStyle";
+
+export default function(G6){
+  G6.registerBehavior('dragNode', {
+    getDefaultCfg() {
+      return {
+        updateEdge: true,
+        delegate: true,
+        delegateStyle: {},
+        align: true,
+      };
+    },
+    getEvents() {
+      return {
+        'node:dragstart': 'onDragStart',
+        'node:drag': 'onDrag',
+        'node:dragend': 'onDragEnd'
+      };
+    },
+    onDragStart(e) {
+      if (!this.shouldBegin.call(this, e)) {
+        return;
+      }
+      this.target = e.item;
+      this.origin = {
+        x: e.x,
+        y: e.y
+      };
+    },
+    onDrag(e) {
+      if (!this.origin) {
+        return;
+      }
+      if (!this.get('shouldUpdate').call(this, e)) {
+        return;
+      }
+      const origin = this.origin;
+      const groupId = this.target.get('groupId');
+      const model = this.target.get('model');
+      if (!this.point) {
+        this.point = {
+          x: model.x,
+          y: model.y
+        };
+      }
+      if (groupId) {
+        const subProcessNode = this.graph.findById(groupId);
+        const subProcessBBox = subProcessNode.getBBox();
+        const x = e.x - origin.x + this.point.x + subProcessBBox.x + subProcessBBox.width / 2;
+        const y = e.y - origin.y + this.point.y + subProcessBBox.y + subProcessBBox.height / 2;
+        this.origin = { x: e.x, y: e.y };
+        this.point = {
+          x: x - subProcessBBox.x - subProcessBBox.width / 2,
+          y: y - subProcessBBox.y - subProcessBBox.height / 2
+        };
+        if (this.delegate) {
+          this._updateDelegate(this.target, x, y);
+        }
+      } else {
+        const x = e.x - origin.x + this.point.x;
+        const y = e.y - origin.y + this.point.y;
+        this.origin = { x: e.x, y: e.y };
+        this.point = { x, y };
+        if (this.delegate) {
+          this._updateDelegate(this.target, x, y);
+        }
+      }
+    },
+    onDragEnd(e) {
+      if (!this.shouldEnd.call(this, e)) {
+        return;
+      }
+      if (!this.origin) {
+        return;
+      }
+      const delegateShape = e.item.get('delegateShape');
+      const groupId = this.target.get('groupId');
+      if (groupId) {
+        if (delegateShape) {
+          const subProcessNode = this.graph.findById(groupId);
+          const subProcessBBox = subProcessNode.getBBox();
+          const bbox = delegateShape.getBBox();
+          const x = bbox.x + bbox.width / 2 - subProcessBBox.x - subProcessBBox.width / 2;
+          const y = bbox.y + bbox.height / 2 - subProcessBBox.y - subProcessBBox.height / 2;
+          delegateShape.remove();
+          this.target.set('delegateShape', null);
+          const group = subProcessNode.getContainer();
+          const id = this.target.get('id');
+          const resultModel = group.updateNodeModel(subProcessNode, id, { x, y });
+          this._updateItem(subProcessNode, resultModel);
+        }
+      } else {
+        if (delegateShape) {
+          const bbox = delegateShape.getBBox();
+          const x = bbox.x + bbox.width / 2;
+          const y = bbox.y + bbox.height / 2;
+          delegateShape.remove();
+          this.target.set('delegateShape', null);
+          this._updateItem(this.target, { x, y });
+        }
+      }
+      this.point = null;
+      this.origin = null;
+      this.graph.emit('afternodedragend', this.target);
+    },
+    _updateItem(item, point) {
+      if(this.graph.executeCommand) {
+        this.graph.executeCommand('update', {
+          itemId: item.get('id'),
+          updateModel: point
+        });
+      }else {
+        if (this.get('updateEdge')) {
+          this.graph.updateItem(item, point);
+        } else {
+          item.updatePosition(point);
+          this.graph.paint();
+        }
+      }
+    },
+    _updateDelegate(item, x, y) {
+      const self = this;
+      let shape = item.get('delegateShape');
+      const bbox = item.get('keyShape').getBBox();
+      if (!shape) {
+        const parent = self.graph.get('group');
+        const attrs = editorStyle.nodeDelegationStyle;
+        // model上的x, y是相对于图形中心的，delegateShape是g实例，x,y是绝对坐标
+        shape = parent.addShape('rect', {
+          attrs: {
+            width: bbox.width,
+            height: bbox.height,
+            x: x - bbox.width / 2,
+            y: y - bbox.height / 2,
+            nodeId:item.get('id'),
+            ...attrs
+          }
+        });
+        shape.set('capture', false);
+        item.set('delegateShape', shape);
+      }
+      shape.attr({ x: x - bbox.width / 2, y: y - bbox.height / 2 });
+      this.graph.paint();
+      this.graph.emit('afternodedrag',shape);
+    },
+  });
+}