|  |  | 
 |  |  | import React, { useRef, useEffect } from "react"; | 
 |  |  | import { Graph, Shape } from "@antv/x6"; | 
 |  |  |  | 
 |  |  | const commonGraphPorts = { | 
 |  |  |     groups: { | 
 |  |  | 
 |  |  |             position: 'top', | 
 |  |  |             attrs: { | 
 |  |  |                 circle: { | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#8f8f8f', | 
 |  |  |                     r: 5, | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#5F95FF', | 
 |  |  |                     strokeWidth: 1, | 
 |  |  |                     fill: '#fff', | 
 |  |  |                     style: { | 
 |  |  |                         visibility: 'hidden', | 
 |  |  |                     }, | 
 |  |  |                 }, | 
 |  |  |             }, | 
 |  |  |         }, | 
 |  |  | 
 |  |  |             position: 'bottom', | 
 |  |  |             attrs: { | 
 |  |  |                 circle: { | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#8f8f8f', | 
 |  |  |                     r: 5, | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#5F95FF', | 
 |  |  |                     strokeWidth: 1, | 
 |  |  |                     fill: '#fff', | 
 |  |  |                     style: { | 
 |  |  |                         visibility: 'hidden', | 
 |  |  |                     }, | 
 |  |  |                 }, | 
 |  |  |             }, | 
 |  |  |         }, | 
 |  |  | 
 |  |  |             position: 'left', | 
 |  |  |             attrs: { | 
 |  |  |                 circle: { | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#8f8f8f', | 
 |  |  |                     r: 5, | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#5F95FF', | 
 |  |  |                     strokeWidth: 1, | 
 |  |  |                     fill: '#fff', | 
 |  |  |                     style: { | 
 |  |  |                         visibility: 'hidden', | 
 |  |  |                     }, | 
 |  |  |                 }, | 
 |  |  |             }, | 
 |  |  |         }, | 
 |  |  | 
 |  |  |             position: 'right', | 
 |  |  |             attrs: { | 
 |  |  |                 circle: { | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#8f8f8f', | 
 |  |  |                     r: 5, | 
 |  |  |                     magnet: true, | 
 |  |  |                     stroke: '#5F95FF', | 
 |  |  |                     strokeWidth: 1, | 
 |  |  |                     fill: '#fff', | 
 |  |  |                     style: { | 
 |  |  |                         visibility: 'hidden', | 
 |  |  |                     }, | 
 |  |  |                 }, | 
 |  |  |             }, | 
 |  |  |         }, | 
 |  |  | 
 |  |  |     }, | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export { commonGraphPorts, commonGraphAttrs } | 
 |  |  | const initGraphConnecting = { | 
 |  |  |     // router: 'manhattan', | 
 |  |  |     connector: { | 
 |  |  |         name: 'rounded', | 
 |  |  |         args: { | 
 |  |  |             radius: 8, | 
 |  |  |         }, | 
 |  |  |     }, | 
 |  |  |     anchor: 'center', | 
 |  |  |     connectionPoint: 'anchor', | 
 |  |  |     allowBlank: false, | 
 |  |  |     snap: { | 
 |  |  |         radius: 20, | 
 |  |  |     }, | 
 |  |  |     createEdge() { | 
 |  |  |         return new Shape.Edge({ | 
 |  |  |             attrs: { | 
 |  |  |                 line: { | 
 |  |  |                     stroke: '#A2B1C3', | 
 |  |  |                     strokeWidth: 2, | 
 |  |  |                     targetMarker: { | 
 |  |  |                         name: 'block', | 
 |  |  |                         width: 12, | 
 |  |  |                         height: 8, | 
 |  |  |                     }, | 
 |  |  |                 }, | 
 |  |  |             }, | 
 |  |  |             zIndex: 0, | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     validateConnection({ targetMagnet }) { | 
 |  |  |         return !!targetMagnet | 
 |  |  |     }, | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const initNodeData = { | 
 |  |  |     codeContent: null, | 
 |  |  |     root: false,//默认不是根节点 | 
 |  |  |     isLogic: false,//默认不是逻辑判断 | 
 |  |  |     logicBool: false,//逻辑判断默认值 | 
 |  |  |     searchLogicId: 1,//默认逻辑id | 
 |  |  |     searchLogicBool: true,//默认逻辑id方向 | 
 |  |  |     searchIndex: 0,//默认执行优先级 | 
 |  |  |     type: "none", //组件类型 | 
 |  |  |     execClass: null,//执行类 | 
 |  |  |     execApi: null,//执行接口 | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export { commonGraphPorts, commonGraphAttrs, initGraphConnecting, initNodeData } |