feat: 修改连接桩隐藏显示逻辑

apps/designer/src/models/appModel.ts

@@ -27,9 +27,9 @@ export default function appModel() {
     backgroundColor: "transparent",
     width: 1200,
     height: 800,
-    grid: true,
+    grid: false,
     gridSize: 15,
-    jumpover: true,
+    jumpover: false,
     printLine: false,
     watermark: false,
     watermarkText: ""

apps/designer/src/models/graphModel.ts

@@ -7,22 +7,61 @@ import { Clipboard } from '@antv/x6-plugin-clipboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import { History } from '@antv/x6-plugin-history'
 import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { useModel } from 'umi'
 export default function GraphModel() {
   const [graph, setGraph] = useState<Graph>();
   const [dnd, setDnd] = useState<Dnd>();
 
+  const pageNodeRef = useRef<Node>();
   const dndRef = useRef(dnd);
   const graphRef = useRef(graph);
+  const { pageState } = useModel('appModel');
 
+  /**初始化页面节点 */
+  const initPageNode = () => {
+    const graph = graphRef.current;
+    const background = pageState.backgroundColor === 'transparent' ? '#fff' : pageState.backgroundColor;
+    pageNodeRef.current = graph?.addNode({
+      shape: 'rect',
+      width: pageState.width,
+      height: pageState.height,
+      zIndex: -1,
+      attrs: {
+        body: {
+          strokeWidth: 0,
+          fill: background,
+          filter: {
+            name: 'dropShadow',
+            args: {
+              dx: 2,
+              dy: 2,
+              blur: 4,
+              color: 'rgba(0, 0, 0, .1)',
+            }
+          },
+        },
+      },
+      data: {
+        isPage: true
+      }
+    });
+  }
+
+  const enabledTransform = (node: Node) => {
+    const data = node.getData<{ isPage: boolean }>();
+    return !data?.isPage;
+  }
   /**初始化画布 */
   const initGraph = (instance: Graph) => {
     // 添加插件
     instance
     .use(
       new Transform({
-        resizing: true,
+        resizing: {
+          enabled: enabledTransform
+        },
         rotating: {
-          enabled: true,
+          enabled: enabledTransform,
           grid: 1
         },
       }),
@@ -35,31 +74,39 @@ export default function GraphModel() {
     .use(new Snapline())
     .use(new Keyboard())
     .use(new Clipboard())
-    .use(new History())
+    .use(new History());
 
     // 控制连接桩显示/隐藏
     const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
+      console.log(ports)
       for (let i = 0, len = ports.length; i < len; i += 1) {
         ports[i].style.visibility = show ? 'visible' : 'hidden'
       }
     }
-    instance.on('node:mouseenter', () => {
-      const container = document.getElementById('graph-container')!
+    instance.on('node:mouseenter', ({_e, node}:{_e: React.MouseEvent<HTMLDivElement, MouseEvent>, node: Node.Metadata}) => {
+      if(node.data?.isPage) return;
+
+      const container = document.querySelector(`[data-cell-id="${node.id}"]`)!;
+      if(!container) return;
       const ports = container.querySelectorAll(
         '.x6-port-body',
-      ) as NodeListOf<SVGElement>
-      showPorts(ports, true)
+      ) as NodeListOf<SVGElement>;
+      showPorts(ports, true);
     })
-    instance.on('node:mouseleave', () => {
-      const container = document.getElementById('graph-container')!
+    instance.on('node:mouseleave', ({_e, node}:{_e: React.MouseEvent<HTMLDivElement, MouseEvent>, node: Node.Metadata}) => {
+      if(node.data?.isPage) return;
+
+      const container = document.querySelector('#graph-container')!;
+      if(!container) return;
       const ports = container.querySelectorAll(
         '.x6-port-body',
-      ) as NodeListOf<SVGElement>
-      showPorts(ports, false)
+      ) as NodeListOf<SVGElement>;
+      showPorts(ports, false);
     })
 
     setGraph(instance);
     graphRef.current = instance;
+    initPageNode();
   }
 
   /**初始化拖拽 */
@@ -73,8 +120,7 @@ export default function GraphModel() {
     if(!dndRef.current || !graphRef.current) return;
 
     // 往画布添加节点
-    const n = graphRef.current.createNode(node)
-
+    const n = graphRef.current.createNode(node);
     dndRef.current.start(n, e.nativeEvent as any)
   };
 

apps/designer/src/pages/flow/components/Config/PageStyle.tsx

@@ -207,7 +207,7 @@ export default function PageStyle() {
         <Checkbox className="mb-8px" checked={pageState.watermark} onChange={(e) => onChangePageSettings('watermark', e.target.checked)} >
           <span className="font-bold">显示水印</span>
         </Checkbox>
-        <Input value={pageState.watermarkText} disabled={!pageState.watermark} placeholder="不超过15字，回车保存" maxLength={15} />
+        <Input value={pageState.watermarkText} placeholder="不超过15字，回车保存" maxLength={15} />
       </section>
     </div>
   );

apps/designer/src/pages/flow/components/Content/index.tsx

@@ -13,30 +13,40 @@ export default function Content() {
     const graph = new Graph({
       container: document.getElementById("graph-container")!,
       autoResize: true,
-      width: 800,
-      height: 800,
-      grid: {
-        visible: true,
-        type: "mesh",
-        args: {
-          color: "#ddd", // 网格线颜色
-          thickness: 1, // 网格线宽度
-        },
-      },
+      width: 2000,
+      height: 2000,
       mousewheel: {
         enabled: true,
         zoomAtMousePosition: true,
         modifiers: 'ctrl',
-        minScale: 0.5,
-        maxScale: 3,
+        minScale: 0.2,
+        maxScale: 2,
+      },
+      // 查找父节点
+      embedding: {
+        enabled: true,
+        findParent({ node }) {
+          const bbox = node.getBBox()
+          return this.getNodes().filter((node) => {
+            const data = node.getData<{ isPage: boolean }>()
+            if (data && data.isPage) {
+              const targetBBox = node.getBBox()
+              return bbox.isIntersectWithRect(targetBBox)
+            }
+            return false
+          })
+        },
       },
       background: {
         color: '#eaecee',
       },
       interacting: {
         edgeLabelMovable: true,
-        nodeMovable: true,
         edgeMovable: true,
+        nodeMovable: (view) => {
+          const data = view.cell.getData<{ isPage: boolean }>()
+          return !data || !data.isPage
+        },
       },
       connecting: {
         router: 'manhattan',
@@ -78,7 +88,7 @@ export default function Content() {
           name: 'stroke',
           args: {
             attrs: {
-              fill: '#ff0',
+              fill: '#f00',
               stroke: '#5F95FF',
             },
           },