axwen-test31 2.0.0

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

@@ -0,0 +1,78 @@
+var DEFAULT_TRIGGER = 'ctrl';
+var ALLOW_EVENTS = ['ctrl'];
+var DEFAULT_COMBINED_KEY = 'A';
+export default {
+    getDefaultCfg: function getDefaultCfg() {
+        return {
+            trigger: DEFAULT_TRIGGER,
+            combinedKey: DEFAULT_COMBINED_KEY,
+            functionName: 'selectAll',
+            functionParams: []
+        };
+    },
+    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'
+        };
+    },
+    onKeyDown: function onKeyDown(e) {
+        var code = e.key;
+
+        if (!code) {
+            return;
+        }
+
+        var triggerLowerCase = this.trigger.toLowerCase();
+        var codeLowerCase = code.toLowerCase(); // 按住 control 键时，允许用户设置 trigger 为 ctrl
+
+        if (!this.triggerKeydown) {
+            if (e.ctrlKey) {
+                this.triggerKeydown = true;
+            } else {
+                this.triggerKeydown = false;
+            }
+        }
+
+        var graph = this.graph;
+        if (!!graph.get('inCanvas') === false) return
+
+        // if (!graph[this.functionName]) {
+        //     return {};
+        // } // 未配置 combinedKey，直接 fitView
+
+
+        // if (this.triggerKeydown && !this.combinedKey) {
+        //     if (this.functionParams && this.functionParams.length) graph[this.functionName].apply(graph, this.functionParams); else graph[this.functionName]();
+        //     return;
+        // }
+
+        var combinedKeyLowerCase = this.combinedKey.toLowerCase();
+
+        if (this.triggerKeydown) {
+            if (codeLowerCase === combinedKeyLowerCase) {
+                graph.getNodes().forEach(function (node) {
+                    let nodeModel = node.getModel()
+                    let filterKey = ['start', 'end']
+                    if (!(filterKey.includes(nodeModel.menuKey || nodeModel.id))) {
+                        graph.setItemState(node, 'active', true);
+                    }
+                });
+                e.preventDefault();
+            }
+        }
+    },
+    onKeyUp: function onKeyUp() {
+        this.triggerKeydown = false;
+    },
+}

package/src/views/market/market-event-edit-pro/g6-config/behavior/template-use.js

@@ -0,0 +1,51 @@
+// existNodes - 画布已有组件；canvas - 应用模板中的组件
+export const use = function({existNodes,graph,canvas}){
+    let { nodes, edges } = canvas
+    let startNode = existNodes.find((node) => node.menuKey === 'start' || node.id === 'start')
+    let endNode = existNodes.find((node) => node.menuKey === 'end' || node.id === 'end')
+    let templateStartNode = nodes.find((node) => node.menuKey === 'start')
+    let newShearPlate = {
+        nodes: [],
+        edges: [],
+        models: []
+    }
+    const selectNodes = graph.findAllByState('node', 'active')
+    selectNodes.forEach((node) => {
+        graph.setItemState(node, 'active', false)
+    })
+    nodes.forEach((node) => {
+        if (['start', 'end'].includes(node.menuKey)) return
+        const { x, y } = node
+        const offsetX = x - templateStartNode.x
+        const offsetY = y - templateStartNode.y
+        const newNode = graph.addItem('node', {
+            ...node,
+            x: Math.floor(startNode.x + offsetX),
+            y: Math.floor(startNode.y + offsetY)
+        })
+        graph.collectOperatedItems('node',{
+            ...newNode.getModel()
+        })
+        graph.setItemState(newNode, 'active', true)
+        newShearPlate.nodes.push(newNode)
+        newShearPlate.models.push(newNode.getModel())
+    })
+    edges.forEach((edge) => {
+        let sourceNode = nodes.find((node) => node.id === edge.source)
+        let targetNode = nodes.find((node) => node.id === edge.target)
+        let sourceId = sourceNode.menuKey === 'start' ? startNode.id : edge.source
+        let targetId = targetNode.menuKey === 'end' ? endNode.id : edge.target
+        let addedEdge = null
+        addedEdge = graph.addItem('edge', {
+            source: sourceId,
+            target: targetId,
+            undeleteable: true
+        })
+        if (addedEdge) {
+            graph.collectOperatedItems('edge',{
+                ...addedEdge.getModel()
+            })
+            newShearPlate.edges.push(addedEdge)
+        }
+    })
+}

package/src/views/market/market-event-edit-pro/g6-config/behavior/zoom-canvas.js

@@ -0,0 +1,66 @@
+var DELTA = 0.05;
+module.exports = {
+  getDefaultCfg: function getDefaultCfg() {
+    return {
+      sensitivity: 2,
+      minZoom: 0.1,
+      maxZoom: 10
+    };
+  },
+  getEvents: function getEvents() {
+    return {
+      wheel: 'onWheel',
+      keyup: 'onKeyUp',
+      keydown: 'onKeyDown'
+    };
+  },
+  onWheel: function onWheel(e) {
+    e.preventDefault();
+    if(!this.keydown) {
+      return;
+    }
+    if (!this.shouldUpdate.call(this, e)) {
+      return;
+    }
+
+    var graph = this.graph;
+    var canvas = graph.get('canvas');
+    var point = canvas.getPointByClient(e.clientX, e.clientY);
+    var pixelRatio = canvas.get('pixelRatio');
+    var sensitivity = graph.get('sensitivity') || this.get('sensitivity');
+    var ratio = graph.getZoom(); // 兼容IE、Firefox及Chrome
+
+    if (e.wheelDelta < 0) {
+      ratio = 1 - DELTA * sensitivity;
+    } else {
+      ratio = 1 + DELTA * sensitivity;
+    }
+
+    var zoom = ratio * graph.getZoom();
+    var maxZoom = graph.get('maxZoom') || this.get('maxZoom')
+    var minZoom = graph.get('minZoom') || this.get('minZoom')
+
+    if (zoom > maxZoom || zoom < minZoom) {
+      return;
+    }
+
+    graph.zoom(ratio, {
+      x: point.x / pixelRatio,
+      y: point.y / pixelRatio
+    });
+    graph.paint();
+    graph.emit('wheelzoom', e);
+    // 缩略图默认关闭/展示
+    this.graph.getPluginByName('zoomToolBar')?.run('_getGroupCenterPoint')
+  },
+  onKeyDown(e) {
+      if (e.ctrlKey) {
+        this.keydown = true
+      }
+  },
+  onKeyUp(e) {
+    if (!e.ctrlKey) {
+      this.keydown = false;
+    }
+  }
+};

package/src/views/market/market-event-edit-pro/g6-config/common.js

@@ -0,0 +1,84 @@
+
+import { Message } from 'element-ui';
+// 折叠分支  
+export const collapseSplitBranch = (mainSplitNode, graph) => {
+    const mainSplitNodeModel = mainSplitNode.getModel()
+    const mainSplitNodeOutEdges = mainSplitNode.getOutEdges()
+    try {
+        if (mainSplitNodeOutEdges.some((sEdge) => {
+            const edgeTargetNode = sEdge.getTarget()
+            const outEdges = edgeTargetNode.getOutEdges()
+            return outEdges.length === 0
+        })) {
+            Message.error(mainSplitNodeModel.label + '子组件存在未结束连线!')
+            throw Error()
+        } else { }
+        mainSplitNodeOutEdges.forEach(edge => {
+            let edgeTargetNode = edge.getTarget()
+            let edgeTargetNodeModel = edgeTargetNode.getModel()
+
+            // 二级响应分支
+            const outEdges = edgeTargetNode.getOutEdges()
+            if (outEdges.length > 0) {
+                mainSplitNodeModel.collapsed = true
+                outEdges.forEach(outEdge => {
+                    const outEdgeTargetNode = outEdge.getTarget()
+                    if (!outEdgeTargetNode) return
+                    edgeTargetNode.hide()
+                    edge.hide()
+                    outEdge.hide()
+                    const outEdgeTargetNodeModel = outEdgeTargetNode.getModel()
+                    const outEdgeTargetNodeInEdges = outEdgeTargetNode.getInEdges()
+                    if (!(outEdgeTargetNodeInEdges.some(sEdge => {
+                        const sEdgeTargetNode = sEdge.getTarget()
+                        const sEdgeTargetNodeModel = sEdgeTargetNode.getModel()
+                        return sEdgeTargetNodeModel.id === mainSplitNodeModel.id
+                    }))) {
+                        const newEdge = graph.addItem('edge', {
+                            source: mainSplitNodeModel.id,
+                            target: outEdgeTargetNodeModel.id,
+                        })
+
+                        graph.setItemState(newEdge, 'collapse', mainSplitNodeModel.collapsed)
+                    }
+                })
+            }
+        })
+
+    } catch (e) {
+        console.log(e,'err-collapseSplitBranch-function')
+    }
+}
+
+// 展开分支
+export const expandSplitBranch  = (mainSplitNode, graph) => {
+    const mainSplitNodeModel = mainSplitNode.getModel()
+    const mainSplitNodeOutEdges = mainSplitNode.getOutEdges()
+    if(!mainSplitNodeModel.collapsed) return
+    mainSplitNodeOutEdges.forEach(edge => {
+        const edgeTargetNode = edge.getTarget()
+        const edgeTargetNodeModel = edgeTargetNode.getModel()
+        if ((edgeTargetNodeModel.menuKey || edgeTargetNodeModel.id).endsWith('Branch')) {
+            edge.show()
+            edgeTargetNode.show()
+            const outEdges = edgeTargetNode.getOutEdges()
+            outEdges.forEach(outEdge => {
+                outEdge.show()
+                const outEdgeTargetNode = outEdge.getTarget()
+
+                if (mainSplitNodeModel.menuKey === 'evtRespFlow') {
+                    const respOutEdges = outEdgeTargetNode.getOutEdges()
+                    respOutEdges.forEach(respEdges => {
+                        const resMainSplitNode = respEdges.getSource()
+                        resMainSplitNode.show()
+                        respEdges.show()
+                    })
+                }
+            })
+            mainSplitNodeModel.collapsed = false
+            graph.setItemState(edge, 'collapse', mainSplitNodeModel.collapsed)
+        } else {
+            graph.removeItem(edge)
+        }
+    })
+}

package/src/views/market/market-event-edit-pro/g6-config/flow-line-readonly.js

@@ -0,0 +1,59 @@
+import G6Pro from '@g6-pro'
+const borderColor = '#aaa'
+const activeColor = '#579ff8'
+
+const flowLineOptions = {
+    itemType: 'edge',
+    draw: function draw(cfg, group) {
+        const startPoint = cfg.startPoint;
+        const endPoint = cfg.endPoint;
+        const Ydiff = endPoint.y - startPoint.y;
+        // const slope = Ydiff !== 0 ? Math.min(500 / Math.abs(Ydiff), 20) : 0;
+        const slope =Ydiff !== 0 ? 30 : 0;
+        const cpOffset = slope > 15 ? 0:16;
+        const offset = Ydiff < 0 ? cpOffset : -cpOffset;
+        const line1EndPoint = {
+            x:startPoint.x+ slope,
+            y:endPoint.y+ offset,
+        }
+        const line2StartPoint = {
+            x: line1EndPoint.x + cpOffset,
+            y: endPoint.y,
+        }
+        // 控制点坐标
+        let x =  ((line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y)) /(line1EndPoint.y - startPoint.y) + startPoint.x;
+        const controlPoint = {
+            x:x,
+            y: endPoint.y,
+        };
+        let path = [
+            ['M', startPoint.x, startPoint.y],
+            ['L', line1EndPoint.x, startPoint.y],
+            ['L', line1EndPoint.x, line1EndPoint.y],
+            ['Q', controlPoint.x, controlPoint.y, line2StartPoint.x, line2StartPoint.y],
+            ['L', endPoint.x, endPoint.y,]
+        ];
+        if (Math.abs(Ydiff) <= 5) {
+            path = [
+                ['M', startPoint.x, startPoint.y],
+                ['L', endPoint.x, endPoint.y],
+            ];
+        }
+        const endArrow = cfg?.style && cfg.style.endArrow ? cfg.style.endArrow : false;
+        const line = group.addShape('path',{
+            attrs:{
+                path,
+                // stroke:colorMapcfg.data && cfg.data.type,
+                stroke:  '#aab',
+                linewidth:1.2,
+                endArrow,
+                name: 'path-shape',
+            }
+        });
+        return line;
+    }
+}
+
+export default function(){
+    G6Pro.registerEdge('fund-polyline',flowLineOptions)
+}

package/src/views/market/market-event-edit-pro/g6-config/flow-line.js

@@ -0,0 +1,306 @@
+import G6Pro from '@g6-pro'
+const borderColor = '#aaa'
+const activeColor = '#579ff8'
+
+const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
+    return [
+        ['M', x - r, y],
+        ['a', r, r, 0, 1, 0, r * 2, 0],
+        ['a', r, r, 0, 1, 0, -r * 2, 0],
+        ['M', x - r + 4, y],
+        ['L', x - r + 2 * r - 4, y],
+    ];
+};
+
+const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
+    return [
+        ['M', x - r, y],
+        ['a', r, r, 0, 1, 0, r * 2, 0],
+        ['a', r, r, 0, 1, 0, -r * 2, 0],
+        ['M', x - r + 4, y],
+        ['L', x - r + 2 * r - 4, y],
+        ['M', x - r + r, y - r + 4],
+        ['L', x, y + r - 4],
+    ];
+};
+
+const nodeBasicMethod = {
+    afterDraw: (cfg, group) => {
+        /* 操作 marker 的背景色显示隐藏 */
+        const icon = group.find((element) => element.get('name') === 'collapseIcon');
+        if (icon) {
+            const bg = group.find((element) => element.get('name') === 'collapseIconBg');
+            icon.on('mouseenter', () => {
+                bg.attr('opacity', 1);
+                graph.get('canvas').draw();
+            });
+            icon.on('mouseleave', () => {
+                bg.attr('opacity', 0);
+                graph.get('canvas').draw();
+            });
+        }
+    },
+};
+
+const flowLine =  {
+    getPath(cfg){
+        let start = cfg.startPoint
+        let end = cfg.endPoint
+        let path = []
+        const sourceOffset = cfg.sourceOffset || { x: 32, y: 0 }
+        const targetOffset = cfg.targetOffset || { x: -32, y: 0 }
+        const hgap = Math.abs(end.x - start.x)
+        const vgap = Math.abs(end.y - start.y)
+        const isStart = cfg.sourceNode.getModel().menuKey === 'start'
+        start = {
+            x: start.x + sourceOffset.x,
+            y: start.y + sourceOffset.y
+        }
+        end = {
+            x: end.x + targetOffset.x,
+            y: end.y + targetOffset.y
+        }
+         if (vgap / hgap > 3 && hgap < 50) {
+            path = [
+                [ 'M', start.x,, start.y ],
+                [ 'L', end.x, end.y ]
+            ]
+        } else {
+            if (end.x > start.x) {
+                path = [
+                    // ['M', isStart ? start.x - 10 : start.x, start.y],
+                    ['M', start.x, start.y],
+                    ['C', start.x + hgap / 2, start.y, end.x - hgap / 2, end.y, end.x, end.y]
+                ]
+            } else {
+                path = [
+                    ['M', start.x, start.y],
+                    ['L', start.x + 20, start.y],
+                    ['L', start.x + 20, (start.y + end.y) / 2],
+                    ['L', end.x - 20, (start.y + end.y) / 2],
+                    ['L', end.x - 20, end.y],
+                    ['L', end.x, end.y]
+                ]
+            }
+        }
+        return {start,end,path}
+    },
+    draw (cfg, group) {
+        const vm = group.get('canvas').get('_vm')
+        const graph = vm.graph
+        // const d = 3
+        const isFlowLine = ['evtRespFlow', 'chnlRespFlow', 'custFlow', 'labelFlow', 'randomFlow'].includes(cfg.sourceNode.getModel().menuKey)
+        const isBranchLine = isFlowLine
+        const color = isFlowLine ? '#AFDAC9' : cfg.color || borderColor
+        // 不允许删除
+        let undeleteable = cfg.undeleteable || isBranchLine
+
+        // 客户的线不允许删除
+        if (cfg.targetNode && cfg.targetNode.getModel && ['cst'].includes(cfg.targetNode.getModel().menuKey)) {
+            undeleteable = true
+        }
+        let clickLineShowDialog = false
+        if (!(cfg.sourceNode.getModel()?.menuKey?.endsWith('Flow')) && !(cfg.sourceNode.getModel().menuKey === 'start') && !(cfg.label === '') && cfg.showEdgeLabel) {
+            clickLineShowDialog = true
+        }
+        const {start,end,path} = this.getPath(cfg)
+        const shape = group.addShape('path', {
+            attrs: {
+                stroke: color,
+                path,
+                cursor: 'pointer',
+                endArrow: {
+                    path: 'M 3,0 L -3,-5 L -3,5 Z',
+                    d:3
+                    // path: `M ${d},0 L -${d},-${d + 2} L -${d},${d + 2} Z`,
+                    // d
+                },
+                lineWidth: 1
+            },
+            name: 'lineArrow',
+            color,
+            isHoverShape: true
+        }) 
+        group.addShape('path', {
+            attrs: {
+                stroke: 'rgba(0, 0, 0, 0)',
+                path,
+                cursor: 'pointer',
+                lineWidth: 10
+            },
+            name: 'lineShape',
+            clickLineShowDialog: clickLineShowDialog
+        })
+        const graphMode = graph?.get('mode')
+        const isViewMode = graphMode === 'view'
+       if (cfg?.sourceNode?.getModel()?.menuKey?.endsWith('Flow') && !isViewMode) {
+            group.addShape('circle', {
+                attrs: {
+                    x: start.x,
+                    y: start.y,
+                    r: 13,
+                    fill: 'rgba(47, 84, 235, 0.05)',
+                    opacity: 0,
+                    zIndex: -2,
+                },
+                name: 'collapseIconBg',
+            });
+            group.addShape('marker', {
+                attrs: {
+                    x: start.x,
+                    y: start.y,
+                    r: 7,
+                    // symbol: cfg.sourceNode.getModel().form.data.length === 0 ? EXPAND_ICON : COLLAPSE_ICON,
+                    symbol: COLLAPSE_ICON,
+                    stroke: 'rgba(0,0,0,0.25)',
+                    // fill: 'rgba(0,0,0,0)',
+                    fill: 'rgba(255,255,255,1)',
+                    lineWidth: 1,
+                    cursor: 'pointer',
+                },
+                name: 'collapseIcon',
+            });
+            cfg.sourceNode.getModel().form.isCollapse = false
+        } else {
+            group.addShape('circle', {
+                attrs: {
+                    // x: cfg.sourceNode.getModel().menuKey === 'start' ? start.x - 10 : start.x,
+                    x: start.x,
+                    y: start.y,
+                    r: 4,
+                    fill: '#fff',
+                    stroke: color
+                },
+                name: 'startCircle',
+                color,
+                isHoverShape: true
+            })
+        }
+        if (!undeleteable) {
+            this.drawDeleteBtn(cfg, group, start, end)
+        }
+        cfg.showEdgeLabel && this.drawLabel(cfg, group, start, end)
+        return shape
+    },
+    afterDraw(cfg, group) {
+        nodeBasicMethod.afterDraw(cfg, group)
+    },
+    update(cfg, item){
+        const {start,end,path} = this.getPath(cfg)
+        const group = item.getContainer()
+        const children = group.get('children') || []
+        let lineArrow, lineShape, startCircle, lineDelete, label, collapseIconBg, collapseIcon;
+        children.forEach((element) => {
+            const name = element.get('name')
+            switch (name) {
+                case 'lineArrow':
+                    lineArrow = element
+                    break
+                case 'lineShape':
+                    lineShape = element
+                    break
+                case 'startCircle':
+                    startCircle = element
+                    break
+                case 'lineDelete':
+                    lineDelete = element
+                    break
+                case 'label':
+                    label = element
+                    break
+                case 'collapseIconBg':
+                    collapseIconBg = element
+                    break
+                case 'collapseIcon':
+                    collapseIcon = element
+                    break
+                default:
+                    break
+            }
+        })
+        lineShape && lineShape.attr('path',path)
+        lineArrow && lineArrow.attr('path',path)
+        if(startCircle){
+            startCircle.attr('x',start.x)
+            startCircle.attr('y',start.y)
+        }
+        if(lineDelete){
+            lineDelete.attr('x', (end.x + start.x) / 2 - 8)
+            lineDelete.attr('y', (end.y + start.y) / 2 - 8)
+        }
+        if(label){
+            label.attr('x', (end.x + start.x) / 2 - 28)
+            label.attr('y',(end.y + start.y) / 2 - 8)
+        }
+        if(collapseIconBg){
+            collapseIconBg.attr('x',start.x)
+            collapseIconBg.attr('y',start.y)
+        }
+        if(collapseIcon){
+            collapseIcon.attr('x',start.x)
+            collapseIcon.attr('y',start.y)
+        }
+    },
+    drawDeleteBtn(cfg, group, start, end) {
+        const btn = group.addShape('dom', {
+            attrs: {
+                x: (end.x + start.x) / 2 - 8,
+                y: (end.y + start.y) / 2 - 8,
+                width: 16,
+                height: 16,
+                html: `<i class="el-icon-error event-delete"></i>`,
+                fill: '#6cf'
+            },
+            name: 'lineDelete',
+            isDeleteBtn: true
+        })
+        btn.hide()
+    },
+    drawLabel(cfg, group, start, end) {
+        const label = cfg.label || 0
+        // 分流与分流分支之间不需要数字
+        if (cfg.sourceNode.getModel()?.menuKey?.endsWith('Flow') || cfg.sourceNode.getModel().menuKey === 'start') {
+            return
+        }
+        group.addShape('dom', {
+            attrs: {
+                x: (end.x + start.x) / 2 - 28,
+                y: (end.y + start.y) / 2 - 8,
+                width: 56,
+                height: 16,
+                html: `<span class="graph-edge-label">${label}</span>`,
+                fill: '#6cf'
+            },
+            isLabel: !(label === '') //label为空展示不出数字，也不用点击
+        })
+    },
+    setState(name, value, node) {
+        const group = node.getContainer()
+        const shapes = group.get('children')
+        const mode = value ? 'show' : 'hide'
+        switch (name) {
+            // 设置悬浮状态
+            case 'hover':
+                shapes.forEach(shape => {
+                    if (shape._cfg.isDeleteBtn) {
+                        shape[mode]()
+                    }
+                    if (shape._cfg.isHoverShape) {
+                        shape.attr('stroke', mode === 'show' ? activeColor : shape._cfg.color)
+                    }
+                })
+                break
+            case 'collapse':
+                const marker = node.get('group').find((element) => element.get('name') === 'collapseIcon');
+                const icon = value ? EXPAND_ICON : COLLAPSE_ICON
+                marker.attr('symbol', icon)
+                break
+            default:
+                break
+        }
+    }
+}
+
+export const registerEdge = function(){
+    G6Pro.registerEdge('flow-line',flowLine)
+}