axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/g6-config/behavior/brush-select.js

@@ -0,0 +1,266 @@
+const min = Math.min;
+const max = Math.max;
+const abs = Math.abs;
+const DEFAULT_TRIGGER = 'drag';
+// const ALLOW_EVENTS = ['drag', 'shift', 'ctrl', 'alt', 'control'];
+const ALLOW_EVENTS = ['ctrl'];
+// 2023.4.25交互：点击左键拉取区域进行框选
+// 冲突键位 按下冲突键位后进行框选应失效
+const  NOT_ALLOW_EVENTS = [32] //32 空格键
+export default {
+  getDefaultCfg() {
+    return {
+      brushStyle: {
+        fill: '#EEF6FF',
+        fillOpacity: 0.4,
+        stroke: '#DDEEFE',
+        lineWidth: 1
+      },
+      onSelect() {},
+      onDeselect() {},
+      selectedState: 'active',
+      trigger: DEFAULT_TRIGGER,
+      includeEdges: true,
+      selectedEdges: [],
+      selectedNodes: []
+    };
+  },
+  getEvents() {
+    return {
+      mousedown: 'onMouseDown',
+      mousemove: 'onMouseMove',
+      mouseup: 'onMouseUp',
+      keyup: 'onKeyUp',
+      keydown: 'onKeyDown'
+    };
+  },
+  onMouseDown(e) {
+    // 按在node上面拖动时候不应该是框选
+    const { item, event } = e
+
+    if (item) {
+      return;
+    }
+
+    if (event) {
+      const leftClick = event.button
+      if (leftClick !== 0) {
+        return
+      }
+    }
+
+    if (this.trigger !== 'drag' && !this.keydown) {
+      return;
+    }
+
+    // 冲突键位按下后进行鼠标框选无效
+    if(this.keydown) {
+      return
+    }
+
+    if (this.selectedNodes && this.selectedNodes.length !== 0) {
+      this.clearStates();
+    }
+
+    let brush = this.brush;
+
+    if (!brush) {
+      brush = this._createBrush();
+    }
+
+    this.originPoint = {
+      x: e.canvasX,
+      y: e.canvasY
+    };
+    brush.attr({
+      width: 0,
+      height: 0
+    });
+    brush.show();
+    this.dragging = true;
+  },
+  onMouseMove: function onMouseMove(e) {
+    if (!this.dragging) {
+      return;
+    }
+
+    if (this.trigger !== 'drag' && !this.keydown) {
+      return;
+    }
+
+    // 冲突键位按下后进行鼠标框选无效
+    if(this.keydown) {
+      return
+    }
+
+    this._updateBrush(e);
+
+    this.graph.paint();
+  },
+  onMouseUp(e) {
+    if (!this.brush && !this.dragging) {
+      return;
+    }
+
+    if (this.trigger !== 'drag' && !this.keydown) {
+      return;
+    }
+
+    // 冲突键位按下后进行鼠标框选无效
+    if(this.keydown) {
+      return
+    }
+
+    this.brush.remove(true); // remove and destroy
+
+    this.brush = null;
+    this._getSelectedNodes(e);
+    this.dragging = false;
+  },
+  clearStates() {
+    const graph = this.graph;
+    const autoPaint = graph.get('autoPaint');
+    const selectedState = this.selectedState;
+    const nodes = graph.findAllByState('node', selectedState);
+    const edges = graph.findAllByState('edge', 'hover');
+    if (this.keydown) {
+      return
+    }
+    if(nodes.length === 0 && edges.length === 0){
+      return
+    }
+    graph.setAutoPaint(false);
+    nodes.forEach(function (node) {
+      return graph.setItemState(node, selectedState, false);
+    });
+    edges.forEach(function (edge) {
+      return graph.setItemState(edge, 'hover', false);
+    });
+    this.selectedNodes = [];
+    this.selectedEdges = [];
+    this.onDeselect && this.onDeselect(this.selectedNodes, this.selectedEdges);
+    graph.emit('nodeselectchange', {
+      targets: {
+        nodes: [],
+        edges: []
+      },
+      select: false
+    });
+    graph.paint();
+    graph.setAutoPaint(autoPaint);
+  },
+  _getSelectedNodes(e) {
+    const graph = this.graph;
+    const state = this.selectedState;
+    const originPoint = this.originPoint;
+    const p1 = {
+      x: e.x,
+      y: e.y
+    };
+    const p2 = graph.getPointByCanvas(originPoint.x, originPoint.y);
+    const left = min(p1.x, p2.x);
+    const right = max(p1.x, p2.x);
+    const top = min(p1.y, p2.y);
+    const bottom = max(p1.y, p2.y);
+    const selectedNodes = [];
+    const shouldUpdate = this.shouldUpdate;
+    const selectedIds = [];
+    const selectedEdges = [];
+    const includeEdges = this.includeEdges
+    graph.getNodes().forEach(function (node) {
+      const bbox = node.getBBox();
+      if (bbox.centerX >= left && bbox.centerX <= right && bbox.centerY >= top && bbox.centerY <= bottom) {
+        if (shouldUpdate(node, 'select')) {
+          selectedNodes.push(node);
+          const model = node.getModel();
+          selectedIds.push(model.id);
+          if (includeEdges) {
+            // 选中边，边的source和target都在选中的节点中时才选中
+              const edges = node.getEdges();
+              edges.forEach(function (edge) {
+                const model = edge.getModel();
+                const source = model.source,
+                    target = model.target;
+
+                if (selectedIds.includes(source) && selectedIds.includes(target) && shouldUpdate(edge, 'select')) {
+                  selectedEdges.push(edge);
+                  graph.setItemState(edge, 'hover', true);
+                }
+              });
+          }
+          graph.setItemState(node, state, true);
+        }
+      }
+    });
+
+
+    this.selectedEdges = selectedEdges;
+    this.selectedNodes = selectedNodes;
+    this.onSelect && this.onSelect(selectedNodes, selectedEdges);
+    graph.emit('nodeselectchange', {
+      targets: {
+        nodes: selectedNodes,
+        edges: selectedEdges
+      },
+      select: true
+    });
+  },
+  _createBrush() {
+    const self = this;
+    const brush = self.graph.get('canvas').addShape('rect', {
+      attrs: self.brushStyle,
+      capture: false
+    });
+    this.brush = brush;
+    return brush;
+  },
+  _updateBrush: function _updateBrush(e) {
+    const originPoint = this.originPoint;
+    this.brush.attr({
+      width: abs(e.canvasX - originPoint.x),
+      height: abs(e.canvasY - originPoint.y),
+      x: min(e.canvasX, originPoint.x),
+      y: min(e.canvasY, originPoint.y)
+    });
+  },
+  onKeyDown(e) {
+    // const code = e.key;
+
+    // if (!code) {
+    //   return
+    // }
+
+    // if (code.toLowerCase() === this.trigger.toLowerCase() || code.toLowerCase() === 'control') {
+    //   this.keydown = true
+    // } else {
+    //   this.keydown = false
+    // }
+      // if (e.ctrlKey) {
+        // this.keydown = true
+      // }
+      let code = e.keyCode || e.which;
+      if (!code) {
+        return;
+      }
+      if (NOT_ALLOW_EVENTS.indexOf(code) > -1) {
+          this.keydown = true;
+      }
+  },
+  onKeyUp(e) {
+    // if (!e.ctrlKey) {
+    //   if (this.brush) {
+    //     this.brush.remove(true)
+    //     this.brush = null
+    //     this.dragging = false
+    //   }
+    //   this.keydown = false;
+    // }
+    let code = e.keyCode || e.which;
+    if (!code) {
+      return;
+    }
+    if (NOT_ALLOW_EVENTS.indexOf(code) > -1) {
+        this.keydown = false;
+    }
+  }
+};

package/src/views/market/market-event-edit-pro/g6-config/behavior/click-select.js

@@ -0,0 +1,104 @@
+import { Util } from "@antv/g6";
+
+var DEFAULT_TRIGGER = 'ctrl';
+var ALLOW_EVENTS = ['ctrl'];
+export default {
+  getDefaultCfg: function getDefaultCfg() {
+    return {
+      multiple: true,
+      trigger: DEFAULT_TRIGGER
+    };
+  },
+  getEvents: function getEvents() {
+    if (!this.multiple) {
+      return {
+        'node:click': 'onClick',
+        'canvas:click': 'onCanvasClick'
+      };
+    }
+
+    return {
+      'node:click': 'onClick',
+      'canvas:click': 'onCanvasClick',
+      keyup: 'onKeyUp',
+      keydown: 'onKeyDown'
+    };
+  },
+  onClick: function onClick(e) {
+    const self = this;
+    const item = e.item;
+    const graph = self.graph;
+    const autoPaint = graph.get('autoPaint');
+    graph.setAutoPaint(false);
+
+    if (!self.keydown || !self.multiple) {
+      const selected = graph.findAllByState('node', 'active');
+      Util.each(selected, function (node) {
+        if (node !== item) {
+          graph.setItemState(node, 'active', false);
+        }
+      });
+    }
+    if (item.hasState('active')) {
+      if (self.shouldUpdate.call(self, e)) {
+        graph.setItemState(item, 'active', false);
+      }
+
+      graph.emit('nodeselectchange', {
+        target: item,
+        select: false
+      });
+    } else {
+      if (self.shouldUpdate.call(self, e)) {
+        graph.setItemState(item, 'active', true);
+      }
+
+      graph.emit('nodeselectchange', {
+        target: item,
+        select: true
+      });
+    }
+    graph.setAutoPaint(autoPaint);
+    graph.paint();
+  },
+  onCanvasClick: function onCanvasClick() {
+    const graph = this.graph;
+    const autoPaint = graph.get('autoPaint');
+    const selected = graph.findAllByState('node', 'active');
+    const selectedEdges = graph.findAllByState('edge', 'hover');
+    if (this.keydown) {
+      return
+    }
+    if(selected.length === 0 && selectedEdges.length === 0){
+      return
+    }
+    graph.setAutoPaint(false);
+   
+    Util.each(selected, function (node) {
+      graph.setItemState(node, 'active', false);
+    });
+    Util.each(selectedEdges, function (edge) {
+      return graph.setItemState(edge, 'hover', false);
+    });
+    graph.paint();
+    graph.setAutoPaint(autoPaint);
+  },
+  onKeyDown: function onKeyDown(e) {
+    const code = e.key
+    if (!code) {
+      return
+    }
+    if (code === 'Control') {
+      this.keydown = true;
+    }
+  },
+  onKeyUp: function onKeyUp(e) {
+    const code = e.key
+    if (!code) {
+      return
+    }
+    if (code === 'Control') {
+      this.keydown = false;
+    }
+  }
+};

package/src/views/market/market-event-edit-pro/g6-config/behavior/copy-paste.js

@@ -0,0 +1,317 @@
+import { deepClone } from '@/utils/index';
+import { getEventPath } from '@/utils/dom';
+import { getMenuNameByKey } from '@/views/market/market-event-edit-pro/util';
+import {paste} from './paste.js'
+var DEFAULT_TRIGGER = 'ctrl';
+var ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control'];
+var DEFAULT_COMBINED_KEY = 'C';
+var COPY_KEY = 'C'
+var PASTE_KEY = 'V'
+export default {
+    getDefaultCfg: function getDefaultCfg() {
+        return {
+            trigger: DEFAULT_TRIGGER,
+            combinedKey: DEFAULT_COMBINED_KEY,
+            functionName: 'selectAll',
+            functionParams: [],
+            status: false,    //鼠标状态
+            time: 0,          //总粘贴次数
+            noFocustime: 0,    //无焦点粘贴次数
+            data: {
+                nodes: [],
+                edges: [],
+                models: []
+            },
+            position: null
+        };
+    },
+    getEvents: function getEvents() {
+        // 检测输入是否合法
+        if (!(ALLOW_EVENTS.indexOf(this.trigger.toLowerCase()) > -1)) {
+            this.trigger = DEFAULT_TRIGGER;
+            console.warn("Behavior shortcuts-fit-view \u7684 trigger \u53C2\u6570 '" + this.trigger + "' \u4E0D\u5408\u6CD5\uFF0C\u8BF7\u8F93\u5165 'drag'\u3001'shift'\u3001'ctrl' \u6216 'alt'");
+        }
+
+        if (this.combinedKey === this.trigger) {
+            this.combinedKey = undefined;
+        }
+
+        return {
+            keyup: 'onKeyUp',
+            keydown: 'onKeyDown',
+            'node:click': 'handleNodeClick',
+            'canvas:click': 'handleCanvasClick',
+            'canvas:mouseleave': 'onOutOfRange',
+            afterUndo: 'afterUndo',
+            afterRedo: 'afterRedo',
+            stackChange: 'resetStack'
+        };
+    },
+    afterUndo (data) {
+        const graph = this.graph
+        const shearPlateStack = graph.get('shearPlateStack')
+        const shiftItem = shearPlateStack.undoStack.shift()
+        shiftItem.before.nodes.forEach(n => {
+            graph.setItemState(n, 'active', true)
+        })
+        shearPlateStack.redoStack.unshift(shiftItem)
+        graph.set('shearPlate', shiftItem.before)
+        graph.set('shearPlateStack', shearPlateStack)
+    },
+    afterRedo (data) {
+        const graph = this.graph
+        const shearPlateStack = graph.get('shearPlateStack')
+        const shiftItem = shearPlateStack.redoStack.shift()
+        shiftItem.before.nodes = []
+        shiftItem.before.edges = []
+        shiftItem.before.models.forEach(m => {
+            const findNode = graph.findById(m.id)
+            shiftItem.before.nodes.push(findNode)
+
+            const inEdges = findNode?.getInEdges()
+            if (inEdges.length > 0) {
+                inEdges.forEach(edge => {
+                    shiftItem.before.edges.push(edge)
+                })
+            }
+        })
+        const selectNodes = graph.findAllByState('node', 'active')
+        selectNodes.forEach(sNode => {
+            graph.setItemState(sNode, 'active', false)
+        })
+        shiftItem.after.nodes = []
+        shiftItem.after.edges = []
+        shiftItem.after.modells = []
+        data.nodes.forEach(m => {
+            if ((m.menuKey || m.id).indexOf('Branch') === -1) {
+                shiftItem.after.models.push(m)
+                const findNode = graph.findById(m.id)
+                shiftItem.after.nodes.push(findNode)
+                graph.setItemState(findNode, 'active', true)
+            }
+        })
+        // data.edges 为model值，非edge实例
+        // data.edges直接存入shearPlate会造成paste方法遍历edges数组时无法对数组项直接使用edge实例上的方法
+        // shiftItem.after.edges = data.edges
+        shiftItem.after.edges = data.edges.map(item => {
+            const {sourceNode} = item
+            const {menuKey} = sourceNode?.getModel() ||{}
+            return !menuKey.includes('Flow') && graph.find('edge', (e) => {
+                const { source,target } = e._cfg.model
+                return item.source === source && item.target === target
+            });
+        })
+        shearPlateStack.undoStack.unshift(shiftItem)
+        graph.set('shearPlate', shiftItem.after)
+        graph.set('shearPlateStack', shearPlateStack)
+    },
+    resetStack(data) {
+        const graph = this.graph
+        const { undoStack, redoStack } = data
+        if (undoStack.length === 0 && redoStack.length === 0) {
+            graph.set('shearPlate', {
+                nodes: [],
+                edges: [],
+                models: []
+            })
+            graph.set('shearPlateStack', {
+                undoStack: [],
+                redoStack: []
+            })
+        }
+    },
+    onKeyDown: function onKeyDown(e) {
+        let code = e.key
+
+        if (!code) {
+            return
+        }
+
+        let triggerLowerCase = this.trigger.toLowerCase()
+        let codeLowerCase = code.toLowerCase(); // 按住 control 键时，允许用户设置 trigger 为 ctrl
+
+        if (!this.triggerKeydown) {
+            if (e.ctrlKey) {
+                this.triggerKeydown = true
+            } else {
+                this.triggerKeydown = false
+            }
+        }
+
+        const graph = this.graph
+        if (!!graph.get('inCanvas') === false) return
+
+        // var combinedKeyLowerCase = this.combinedKey.toLowerCase();
+        let copyKeyLowerCase = COPY_KEY.toLowerCase()
+        let pasteKeyLowerCase = PASTE_KEY.toLowerCase()
+        // let data = this.get('data')
+        let status = this.get('status')
+        let position = this.get('position')
+        if (this.triggerKeydown) {
+            if (codeLowerCase === copyKeyLowerCase) {
+                let data = {
+                    nodes: [],
+                    edges: [],
+                    models: []
+                }
+                let activeNodes = graph.findAllByState('node', 'active')
+                if (activeNodes.length === 0) return
+                activeNodes.forEach(node => {
+                    const model = node.getModel()
+                    const inEdges = node.getInEdges()
+                    let filterKey = ['start', 'end']
+                    if (!filterKey.includes(model.menuKey || model.id)){
+                        if ((model.menuKey || model.id).indexOf('Branch') === -1) {
+                            data.nodes.push(node)
+                            data.models.push(model)
+                            if (inEdges.length > 0) {
+                                inEdges.forEach(edge => {
+                                    data.edges.push(edge)
+                                })
+                            }
+                        }
+                    }
+                });
+                status = true
+                // 修改-复制渠道组件menuKey被修改问题
+                if(['sms', 'ebankApp', 'appPush', 'teleSalesPlat', 'intligCall', 'manager'].includes(data.models[0]?.channelGroup) || ['sms', 'ebankApp', 'appPush', 'teleSalesPlat', 'intligCall', 'manager'].includes(data.models[0]?.uniqueKey)){
+                    data.models[0].menuKey = data.models[0].channelGroup || data.models[0].uniqueKey
+                    data.nodes[0]._cfg.model.menuKey = data.models[0].channelGroup || data.models[0].uniqueKey
+                  }
+                graph.set('shearPlate', data)
+                e.preventDefault()
+            } else if (codeLowerCase === pasteKeyLowerCase) {
+                // 引入粘贴方法
+                paste({
+                    graph,
+                    position:this.get('position'),
+                    e
+                })
+            }
+        }
+
+    },
+    onKeyUp: function onKeyUp(e) {
+        this.set('position', null)
+        if (!e.ctrlKey) {
+            this.triggerKeydown = false;
+        }
+    },
+    handleNodeClick() {
+        this.set('position', null)
+    },
+    onOutOfRange(e) {
+        const graph = this.graph
+        const canvasElement = this.graph.get('canvas').get('el');
+        const { event } = e
+        const  path = getEventPath(event)
+        const inCanvas = path.slice(1).some(path => path === canvasElement)
+        graph.set('inCanvas', inCanvas)
+    },
+    handleCanvasClick (e) {
+        if (!e) return
+        // const status = this.get('status')
+        // let position = this.get('position')
+        const graph = this.graph
+        const position = graph.getPointByClient(e.clientX, e.clientY)
+        this.set('position', position)
+    },
+    drawFlowBranch (node, now, branchs) {
+        let graph = this.graph
+        let nodeModel = node.getModel()
+        // let id = 'node' + new Date().getTime()
+        let form = nodeModel.form
+        let isEvtFlow = nodeModel.menuKey === 'evtRespFlow'
+        form.data && form.data.forEach((item, order) => {
+            if (item.name === '其他') {
+                order = -1
+            }
+            const branchForm = branchs.find(e => e.rowId === item.id)
+            const newBranchNode = graph.addItem('node', {
+                x: node.getBBox().x + 200,
+                y: isEvtFlow ? node.getBBox().y + (order - 1) * 100 : node.getBBox().y + (order - 1) * 50,
+                id: item.id + now,
+                menuKey: nodeModel.menuKey + 'Branch',
+                label: item.name,
+                cstonly: node._cfg.cstonly,
+                form: {
+                    ...branchForm,
+                    name: item.name,
+                    rowId: item.id + now,
+                    parentId: nodeModel.id
+                }
+            })
+            const oldNode = graph.findById(item.id)
+            console.log(oldNode)
+            graph.setItemState(oldNode, 'active', false)
+            graph.setItemState(newBranchNode, 'active', true)
+            graph.collectOperatedItems('node',{
+                ...newBranchNode.getModel()
+            })
+            // 分支与源分流添加一条线
+            const addedEdge = graph.addItem('edge', {
+                source: node._cfg.id,
+                target: item.id + now,
+                undeleteable: true,
+                sourceOffset: { x: 32, y: 0 },
+                targetOffset: { x: -80, y: 0 }
+            })
+            graph.collectOperatedItems('edge',{
+                ...addedEdge.getModel()
+            })
+
+            let isEvtRespFlow = newBranchNode._cfg.model.menuKey === 'evtRespFlowBranch'
+            if (isEvtRespFlow) {
+                if (!oldNode) {
+                    return
+                }
+                const outEdges = oldNode.getOutEdges()
+                outEdges.forEach(edge => {
+                    const target = edge.getTarget()
+                    this.drawEvtRespBranch(newBranchNode, target, now)
+                })
+            }
+
+            item.id = item.id + now
+        })
+    },
+    drawEvtRespBranch (node, target, now) {
+        let graph = this.graph
+        let nodeModel = node.getModel()
+        const targetModel = target.getModel()
+        let id = targetModel.id + now
+        let isResp = targetModel.menuKey.indexOf('NoResp') === -1 ? true : false
+        // 向画布添加节点
+        const addedNode = graph.addItem('node', {
+            x: node.getBBox().x + 250,
+            y: isResp ? node.getBBox().y + -10 : node.getBBox().y + 50,
+            id,
+            menuKey: targetModel.menuKey,
+            // label: isResp ? '响应' : '未响应',
+            label: targetModel.label,
+            cstonly: this.cstonly,
+            form: {
+                ...targetModel.form,
+                rowId: id,
+                // name: isResp ? '响应' : '未响应',
+                parentId: nodeModel.id
+            }
+        })
+        graph.setItemState(target, 'acitve', false)
+        graph.setItemState(addedNode, 'acitve', true)
+        graph.collectOperatedItems('node',{
+            ...addedNode.getModel()
+        })
+        // 响应分支与源分支添加一条线
+        const addedEdge = graph.addItem('edge', {
+            source: node._cfg.id,
+            undeleteable: true,
+            target: id,
+            sourceOffset: { x: 80, y: 0 },
+            targetOffset: { x: -50, y: 0 }
+        })
+        graph.collectOperatedItems('edge',{
+            ...addedEdge.getModel()
+        })
+    }
+}