core 项目结构解读

package.json

 {
   "private": true,
-  "name": "@antv/x6-app-dag",
+  "name": "x6-app-dag",
   "version": "1.1.6",
   "scripts": {
     "start": "umi dev",
@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@ant-design/pro-layout": "^5.0.12",
+    "@umijs/plugin-qiankun": "^2.35.2",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.19",
     "lint-staged": "^10.5.3",

src/pages/common/graph-common/node-popover/index.tsx

@@ -48,6 +48,7 @@ const PopoverContent = ({ status }: { status: StatusObj }) => (
     {!status.name && <LoadingOutlined />}
     {Object.entries(nodeAtts).map(([key, text]) => {
       const value = status[key as keyof StatusObj]
+      console.log('===============', value)
       if (value) {
         return (
           <li key={key} className={css.item}>

src/pages/common/graph-common/shape/edge.ts

@@ -35,6 +35,16 @@ export class X6DemoGroupEdge extends GuideEdge {
 
 X6DemoGroupEdge.config({
   shape: 'X6DemoGroupEdge',
+  attrs: {
+    line: {
+      stroke: '#808080',
+      strokeWidth: 1,
+      targetMarker: {
+        stroke: 'none',
+        fill: 'none',
+      },
+    },
+  },
 })
 
 Edge.registry.register({

src/pages/common/graph-common/shape/node.ts

-import { Dom, Node } from '@antv/x6'
-import { ReactShape } from '@antv/x6-react-shape'
-import { NODE_WIDTH, NODE_HEIGHT } from '@/constants/graph'
-
-export class BaseNode extends ReactShape {
-  // eslint-disable-next-line class-methods-use-this
-  isGroup() {
-    return false
-  }
+import BaseNode from './nodes/BaseNode'
+import X6DemoNode from './nodes/X6DemoNode'
+import X6DemoGroupNode from './nodes/X6DemoGroupNode'
+
+export {
+  BaseNode,
+  X6DemoNode,
+  X6DemoGroupNode
 }
-
-export class X6DemoNode extends BaseNode {
-  getInPorts() {
-    return this.getPortsByGroup('in')
-  }
-
-  getOutPorts() {
-    return this.getPortsByGroup('out')
-  }
-}
-
-Node.registry.register('ais-rect-port', X6DemoNode as any)
-
-X6DemoNode.config({
-  width: NODE_WIDTH,
-  height: NODE_HEIGHT,
-  shape: 'ais-rect-port',
-  ports: {
-    groups: {
-      in: {
-        position: { name: 'top' },
-        zIndex: 2,
-      },
-      out: {
-        position: { name: 'bottom' },
-        zIndex: 2,
-      },
-    },
-  },
-  attrs: {
-    body: {
-      magnet: false,
-      fill: 'none',
-      stroke: 'none',
-      refWidth: '100%',
-      refHeight: '100%',
-      zIndex: 1,
-    },
-  },
-  portMarkup: [
-    {
-      tagName: 'foreignObject',
-      selector: 'fo',
-      attrs: {
-        width: 6,
-        height: 6,
-        x: -3,
-        y: -3,
-        zIndex: 10,
-        // magnet决定是否可交互
-        magnet: 'true',
-      },
-      children: [
-        {
-          ns: Dom.ns.xhtml,
-          tagName: 'body',
-          selector: 'foBody',
-          attrs: {
-            xmlns: Dom.ns.xhtml,
-          },
-          style: {
-            width: '100%',
-            height: '100%',
-          },
-          children: [
-            {
-              tagName: 'span',
-              selector: 'content',
-              style: {
-                width: '100%',
-                height: '100%',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-})
-
-export class X6DemoGroupNode extends BaseNode {
-  // eslint-disable-next-line class-methods-use-this
-  isGroup() {
-    return true
-  }
-}
-
-X6DemoGroupNode.config({
-  ports: {
-    groups: {
-      in: {
-        position: { name: 'top' },
-        zIndex: 2,
-      },
-      out: {
-        position: { name: 'bottom' },
-        zIndex: 2,
-      },
-    },
-  },
-  portMarkup: [
-    {
-      tagName: 'foreignObject',
-      selector: 'fo',
-      attrs: {
-        width: 6,
-        height: 6,
-        x: -3,
-        y: -3,
-        zIndex: 10,
-        // magnet决定是否可交互
-        magnet: 'true',
-      },
-      children: [
-        {
-          ns: Dom.ns.xhtml,
-          tagName: 'body',
-          selector: 'foBody',
-          attrs: {
-            xmlns: Dom.ns.xhtml,
-          },
-          style: {
-            width: '100%',
-            height: '100%',
-          },
-          children: [
-            {
-              tagName: 'span',
-              selector: 'content',
-              style: {
-                width: '100%',
-                height: '100%',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-})

src/pages/common/graph-common/shape/nodes/BaseNode.ts

+import { ReactShape } from '@antv/x6-react-shape'
+
+export default class BaseNode extends ReactShape {
+  isGroup() {
+    return false
+  }
+}

src/pages/common/graph-common/shape/nodes/X6DemoGroupNode.ts

+import BaseNode from './BaseNode'
+import { Dom } from '@antv/x6'
+
+export default class X6DemoGroupNode extends BaseNode {
+  // eslint-disable-next-line class-methods-use-this
+  isGroup() {
+    return true
+  }
+}
+
+X6DemoGroupNode.config({
+  ports: {
+    groups: {
+      in: {
+        position: { name: 'top' },
+        zIndex: 2,
+      },
+      out: {
+        position: { name: 'bottom' },
+        zIndex: 2,
+      },
+    },
+  },
+  portMarkup: [
+    {
+      tagName: 'foreignObject',
+      selector: 'fo',
+      attrs: {
+        width: 6,
+        height: 6,
+        x: -3,
+        y: -3,
+        zIndex: 10,
+        // magnet决定是否可交互
+        magnet: 'true',
+      },
+      children: [
+        {
+          ns: Dom.ns.xhtml,
+          tagName: 'body',
+          selector: 'foBody',
+          attrs: {
+            xmlns: Dom.ns.xhtml,
+          },
+          style: {
+            width: '100%',
+            height: '100%',
+          },
+          children: [
+            {
+              tagName: 'span',
+              selector: 'content',
+              style: {
+                width: '100%',
+                height: '100%',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})

src/pages/common/graph-common/shape/nodes/X6DemoNode.ts

+import BaseNode from './BaseNode'
+import { NODE_HEIGHT, NODE_WIDTH } from '@/constants/graph'
+import { Dom, Node } from '@antv/x6'
+
+export default class X6DemoNode extends BaseNode {
+  getInPorts() {
+    return this.getPortsByGroup('in')
+  }
+
+  getOutPorts() {
+    return this.getPortsByGroup('out')
+  }
+}
+
+X6DemoNode.config({
+  width: NODE_WIDTH,
+  height: NODE_HEIGHT,
+  shape: 'base-rect-port',
+  ports: {
+    groups: {
+      in: {
+        position: { name: 'top' },
+        zIndex: 2,
+      },
+      out: {
+        position: { name: 'bottom' },
+        zIndex: 2,
+      },
+    },
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1,
+    },
+  },
+  portMarkup: [
+    {
+      tagName: 'foreignObject',
+      selector: 'fo',
+      attrs: {
+        width: 6,
+        height: 6,
+        x: -3,
+        y: -3,
+        zIndex: 10,
+        // magnet决定是否可交互
+        magnet: 'true',
+      },
+      children: [
+        {
+          ns: Dom.ns.xhtml,
+          tagName: 'body',
+          selector: 'foBody',
+          attrs: {
+            xmlns: Dom.ns.xhtml,
+          },
+          style: {
+            width: '100%',
+            height: '100%',
+          },
+          children: [
+            {
+              tagName: 'span',
+              selector: 'content',
+              style: {
+                width: '100%',
+                height: '100%',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})
+
+Node.registry.register('base-rect-port', X6DemoNode as any)

src/services/graph.ts → src/pages/common/graph-utils/graph.ts

 import random from 'lodash/random'
 
 interface NodeParams {
+  id?: string
   name: string
   x: number
   y: number
@@ -50,25 +51,19 @@ export const copyNode = ({ name, x, y }: NodeParams) => {
   }
 }
 
-export const addNode = ({ name, x, y }: NodeParams) => {
-  const id = `${Date.now()}`
+export const addNode = ({ id, name, x, y }: NodeParams) => {
+  const timestamp = `${Date.now()}`
   return {
-    id,
+    id: id ? `${id}-${timestamp}` : `${timestamp}`,
     name,
-    inPorts: [
-      {
-        sequence: 1,
-        description: '输入',
-        id: id + '_in_1',
-      }
-    ],
-    outPorts: [
-      {
-        sequence: 1,
-        description: '输出',
-        id: id + '_out_1',
-      }
-    ],
+    inPorts: [{
+      id: id ? `${id}-IN-${timestamp}` : `in-${timestamp}`,
+      sequence: 1
+    }],
+    outPorts: [{
+      id: id ? `${id}-OUT-${timestamp}` : `out-${timestamp}`,
+      sequence: 1
+    }],
     positionX: x,
     positionY: y,
   }

src/pages/common/hooks/useCreateNode.ts

 import { useMemo } from 'react'
-import {} from '../components-type'
+import {} from '../graph-common/node-types'
 
 interface NodeParams {
   name: string

src/pages/component-config-panel/form/experiment-config.tsx

@@ -34,24 +34,8 @@ export const ExperimentForm: React.FC<Props> = ({ experimentId, name }) => {
       onValuesChange={onValuesChange}
       requiredMark={false}
     >
-      <Form.Item name="experimentName" label="实验名称">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label={name}>
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field C">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field D">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="RadioDemo">
-        <Radio.Group>
-          <Radio.Button value="optional">Optional</Radio.Button>
-          <Radio.Button value={true}>Required</Radio.Button>
-          <Radio.Button value={false}>Hidden</Radio.Button>
-        </Radio.Group>
+      <Form.Item name="experimentName" label="策略名称">
+        <Input placeholder="请输入策略名称" />
       </Form.Item>
     </Form>
   )

src/pages/component-config-panel/form/node-config.tsx

@@ -34,18 +34,10 @@ export const NodeFormDemo: React.FC<Props> = ({
       onValuesChange={onValuesChange}
       requiredMark={false}
     >
-      <Form.Item label="节点名称" name="name">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label={name}>
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field C">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field D">
+      <Form.Item label="组件名称" name="name">
         <Input placeholder="input placeholder" />
       </Form.Item>
+
     </Form>
   )
 }

src/pages/component-config-panel/index.less

 @border-color: #e9e9e9;
 
+.confPanel {
+  width: 290px;
+  min-width: 290px;
+}
+
 .setting {
   height: 100%;
   :global {

src/pages/component-config-panel/index.tsx

@@ -45,9 +45,9 @@ export const ComponentConfigPanel: React.FC<Props> = (props) => {
               )}
             </div>
           </Tabs.TabPane>
-          <Tabs.TabPane tab="全局参数" key="params">
-            <div className={css.form} />
-          </Tabs.TabPane>
+          {/*<Tabs.TabPane tab="全局参数" key="params">*/}
+          {/*  <div className={css.form} />*/}
+          {/*</Tabs.TabPane>*/}
         </Tabs>
       </div>
     </div>

src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/componentTreeNodes.ts

@@ -4,7 +4,7 @@ import {
   SCENE_DISPLAY,
   SIGN_OPERATION,
   MOTION_OPERATION
-} from '@/pages/common/components-type'
+} from '@/pages/common/graph-common/node-types'
 
 
 export const componentsData = [

src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.less

@@ -11,7 +11,7 @@
     background-image: linear-gradient(#fff 50%, #f7f9fb 50%);
     background-size: 100% 60px;
 
-    .treeFolder:global(.@{ant-prefix}-tree-treenode) {
+    :global(.@{ant-prefix}-tree-treenode) {
       align-items: center;
       height: 30px;
       padding: 0;
@@ -48,7 +48,7 @@
       }
     }
 
-    .treeNode:global(.@{ant-prefix}-tree-treenode) {
+    :global(.@{ant-prefix}-tree-treenode) {
       height: 30px;
       line-height: 30px;
 

src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.tsx

@@ -15,39 +15,26 @@ const FolderIcon = ({ expanded }: { expanded: boolean }) => {
 export const CategoryTree = () => {
   const { componentApplications } = useModel('guide-algo-component')
 
-  const renderTree = useCallback(
-    (treeList: any[] = [], searchKey: string = '') => {
-      return treeList.map((item) => {
-        const { isDir, id, children } = item
-        const key = id.toString();
-        const title = <NodeTitle node={item} searchKey={searchKey} />
-
-        if (isDir) {
-          return (
-            <TreeNode
-              icon={FolderIcon}
-              key={key}
-              title={title}
-              className={styles.treeFolder}
-            >
-              {renderTree(children, searchKey)}
-            </TreeNode>
-          )
+  const renderTree = useCallback((treeList: any[] = [], searchKey?: string): any => {
+    return treeList.map((item) => {
+      const { isDir, id, children } = item
+      const key = id.toString();
+      const title = <NodeTitle node={item} searchKey={searchKey} />
+      if (isDir) {
+        return  {
+          key,
+          title,
+          icon: FolderIcon,
+          children: renderTree(children, searchKey)
         }
-
-        return (
-          <TreeNode
-            isLeaf={true}
-            key={key}
-            icon={<span />}
-            title={title}
-            className={styles.treeNode}
-          />
-        )
-      })
-    },
-    [],
-  )
+      }
+      return {
+        key,
+        title,
+        icon: <span />,
+      }
+    })
+  }, [],)
 
   const applicationsTreeData = useMemo(() => {
     // 根据模板生成应用组件数据格式
@@ -55,8 +42,6 @@ export const CategoryTree = () => {
     return componentApplications?.map(applicationTemplate);
   }, [componentApplications])
 
-  // console.log('componentsData', componentsData, renderTree(componentsData))
-
   return (
     <div className={styles.list}>
       <DirectoryTree
@@ -64,9 +49,8 @@ export const CategoryTree = () => {
         selectable={false}
         defaultExpandAll
         className={styles.tree}
-      >
-        {renderTree(componentsData)}
-      </DirectoryTree>
+        treeData={renderTree(componentsData)}
+      />
     </div>
   )
 }

src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.less

@@ -64,6 +64,7 @@
   display: flex;
   justify-content: space-between;
   padding-right: 8px;
+  padding-left: 15px;
 
   .label {
     display: inline-block;

src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.tsx

-import React, { useCallback, useState, useRef } from 'react'
+import React, { useRef } from 'react'
 import { toLower, unescape } from 'lodash-es'
-import { Popover, Tag } from 'antd'
+import { Tag } from 'antd'
 import { DragSource, ConnectDragPreview, ConnectDragSource } from 'react-dnd'
-import { DatabaseFilled, ReadOutlined } from '@ant-design/icons'
+import { DatabaseFilled } from '@ant-design/icons'
 import marked from 'marked'
 import { useSafeSetHTML } from '@/pages/common/hooks/useSafeSetHtml'
 import { DRAGGABLE_ALGO_COMPONENT } from '@/constants/graph'
-import {COMPONENTS_TYPE} from './componentTreeNodes'
+import { COMPONENTS_TYPE } from '@/pages/common/graph-common/node-types'
 import styles from './node-title.less'
 
 marked.setOptions({
@@ -48,7 +48,7 @@ const Document = (props: { node: any }) => {
 
 interface Props {
   node: any
-  searchKey: string
+  searchKey?: string
   isDragging: boolean
   connectDragSource: ConnectDragSource
   connectDragPreview: ConnectDragPreview

src/pages/components/canvas-action/index.tsx

-import React from 'react'
+import React, { FC } from 'react'
 import CN from 'classnames'
 import commonStyle from '@/common/style.less'
 import styles from './style.less'
 import { Button } from 'antd'
+import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
 
-const Index = () => {
+interface CanvasActionProps {
+  expGraph: any
+}
+const Index: FC<CanvasActionProps> = (props) => {
+  const {expGraph} = props
+
+  const handleSave = () => {
+    console.log('expGraph', expGraph)
+    console.log('expGraph', expGraph?.graph?.toJSON())
+
+  }
   return (
     <div className={CN(commonStyle.pos_end, styles.canvas_action)}>
-      <Button size="small">sss</Button>
-      <Button size="small">sssss</Button>
-      <Button size="small">sssss</Button>
-      <Button size="small">sssss</Button>
+      <Button onClick={handleSave} className={styles.button_style} size="small">保存为应用</Button>
+      <Button onClick={handleSave} className={styles.button_style} size="small">取消</Button>
+      <Button onClick={handleSave} className={styles.button_style} size="small">保存</Button>
+      <Button onClick={handleSave} className={styles.button_style} size="small" type="primary">启用</Button>
     </div>
   )
 }

src/pages/components/canvas-action/style.less

 .canvas_action{
-  padding-right: 10px;
+
+}
+.button_style{
+  margin-right: 15px;
+  width: 100px;
 }

src/pages/dag-canvas/canvas-content.tsx

@@ -31,7 +31,6 @@ export const CanvasContent: React.FC<Props> = (props) => {
   const [, dropRef] = useDrop({
     accept: [DRAGGABLE_ALGO_COMPONENT, DRAGGABLE_MODEL],
     drop: (item: any, monitor) => {
-      console.log('drop', item, monitor)
       const currentMouseOffset = monitor.getClientOffset()
       const sourceMouseOffset = monitor.getInitialClientOffset()
       const sourceElementOffset = monitor.getInitialSourceClientOffset()
@@ -76,8 +75,6 @@ export const CanvasContent: React.FC<Props> = (props) => {
     [expGraph],
   )
 
-
-  console.log('expGraph', expGraph)
   return (
     <div
       ref={(elem) => {

src/pages/dag-canvas/canvas-toolbar.tsx

@@ -10,7 +10,7 @@ import {
 import { useObservableState } from '@/common/hooks/useObservableState'
 import { RxInput } from '@/component/rx-component/rx-input'
 import { showModal } from '@/component/modal'
-import { addNodeGroup } from '@/services/graph'
+import { addNodeGroup } from '@/pages/common/graph-utils/graph'
 import { BehaviorSubject } from 'rxjs'
 import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
 import { formatGroupInfoToNodeMeta } from '@/pages/rx-models/graph-util'
@@ -50,9 +50,6 @@ export const CanvasToolbar: React.FC<Props> = (props) => {
           expGraph.toggleSelectionEnabled()
           setSelectionEnabled((enabled) => !enabled)
           break
-        // case Operations.RUN_SELECTED:
-        //   expGraph.runGraph()
-        //   break
         case Operations.NEW_GROUP: {
           const value$ = new BehaviorSubject('')
           const modal = showModal({
@@ -155,16 +152,8 @@ export const CanvasToolbar: React.FC<Props> = (props) => {
             icon={<UngroupOutlined />}
           />
         </Group>
-        {/*<Group>*/}
-        {/*  <Item*/}
-        {/*    name={Operations.RUN_SELECTED}*/}
-        {/*    disabled={!activeNodeInstance}*/}
-        {/*    tooltip="执行选择节点"*/}
-        {/*    icon={<PlaySquareOutlined />}*/}
-        {/*  />*/}
-        {/*</Group>*/}
       </Toolbar>
-      <CanvasAction/>
+      <CanvasAction expGraph={expGraph}/>
     </div>
   )
 }

src/pages/dag-canvas/elements/context-menu/node-context-menu/index.tsx

@@ -37,10 +37,6 @@ export const NodeContextMenu: React.FC<Props> = (props) => {
     await expGraph.requestDeleteNodes([data.node.id])
   }, [expGraph, activeNodeInstance])
 
-  const onGraphRun = useCallback(async () => {
-    await expGraph.runGraph()
-  }, [expGraph])
-
   const { x: left, y: top } = graphPointToOffsetPoint(
     expGraph.graph!,
     data,
@@ -58,11 +54,6 @@ export const NodeContextMenu: React.FC<Props> = (props) => {
         <Menu.Item onClick={onNodeDel} icon={<DeleteOutlined />} text="删除" />
         {/*<Menu.Item disabled={true} icon={<EditOutlined />} text="重命名" />*/}
         {/*<Menu.Divider />*/}
-        {/*<Menu.Item*/}
-        {/*  onClick={onGraphRun}*/}
-        {/*  icon={<PlaySquareOutlined />}*/}
-        {/*  text="执行"*/}
-        {/*/>*/}
       </Menu>
     </div>
   )

src/pages/dag-canvas/elements/node-element.tsx

@@ -8,7 +8,6 @@ import { useObservableState } from '@/common/hooks/useObservableState'
 import { ANT_PREFIX } from '@/constants/global'
 import { NExecutionStatus } from '@/pages/rx-models/typing'
 import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { NodeStatus } from '@/pages/common/graph-common/node-status'
 import { NodePopover } from '../../common/graph-common/node-popover'
 import styles from './node-element.less'
 
@@ -45,12 +44,6 @@ export const NodeElement: React.FC<Props> = (props) => {
           </div>
           <div className={styles.notation}>
             <div className={styles.name}>{name}</div>
-            {nodeStatus.jobStatus && (
-              <NodeStatus
-                className={styles.statusIcon}
-                status={nodeStatus.jobStatus as any}
-              />
-            )}
           </div>
         </div>
       </NodePopover>

src/pages/dag-canvas/elements/node-group.tsx

@@ -7,9 +7,9 @@ import { calcNodeScale } from '@/pages/rx-models/graph-util'
 import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
 import { NExperimentGraph } from '@/pages/rx-models/typing'
 import {
-  X6DemoGroupNode,
-  X6DemoNode,
+    X6DemoNode,
 } from '@/pages/common/graph-common/shape/node'
+import X6DemoGroupNode from '@/pages/common/graph-common/shape/nodes/X6DemoGroupNode'
 import { X6DemoGroupEdge } from '../../common/graph-common/shape/edge'
 import styles from './node-group.less'
 

src/pages/index.less

@@ -33,19 +33,12 @@
 
   .editPanel {
     display: flex;
-    flex-grow: 1;
-    align-items: stretch;
-    justify-content: space-between;
+    flex: 1;
     overflow: hidden;
 
     .dagCanvas {
       flex-grow: 1;
       border-right: @border;
     }
-
-    .confPanel {
-      width: 290px;
-      min-width: 290px;
-    }
   }
 }

src/pages/index.tsx

@@ -33,11 +33,11 @@ const DagDemo: React.FC<Props> = (props) => {
                 experimentId={experimentId}
                 className={styles.dagCanvas}
               />
-              <ComponentConfigPanel
-                experimentId={experimentId}
-                className={styles.confPanel}
-              />
             </div>
+            <ComponentConfigPanel
+              experimentId={experimentId}
+              className={styles.confPanel}
+            />
           </DndProvider>
         </div>
       </Content>

src/pages/rx-models/experiment-graph.tsx

@@ -10,11 +10,9 @@ import produce from 'immer'
 import { ConfigProvider, message, Tooltip } from 'antd'
 import { RERENDER_EVENT } from '@/constants/graph'
 import { GraphCore, ConnectionRemovedArgs } from './graph-core'
-import {
-  BaseNode,
-  X6DemoGroupNode,
-  X6DemoNode,
-} from '../common/graph-common/shape/node'
+import { X6DemoNode } from '../common/graph-common/shape/node'
+import X6DemoGroupNode from '../common/graph-common/shape/nodes/X6DemoGroupNode'
+import BaseNode from '../common/graph-common/shape/nodes/BaseNode'
 import {
   BaseEdge,
   GuideEdge,
@@ -28,8 +26,8 @@ import {
   formatGraphData,
   formatNodeInfoToNodeMeta,
 } from './graph-util'
-import { queryGraph, addNode, copyNode } from '@/services/graph'
-import { queryGraphStatus, runGraph, stopGraphRun } from '@/services/status'
+import { queryGraph, addNode, copyNode } from '@/pages/common/graph-utils/graph'
+import { queryGraphStatus } from '@/services/status'
 
 export function parseStatus(data: NExecutionStatus.ExecutionStatus) {
   const { execInfo, instStatus } = data
@@ -105,6 +103,15 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
     super({
       history: true,
       frozen: true,
+      grid: {
+        size: 10,
+        visible: true,
+        type: 'dot', // 'dot' | 'fixedDot' | 'mesh'
+        args: {
+          color: '#a0a0a0', // 网格线/点颜色
+          thickness: 1,     // 网格线宽度/网格点大小
+        },
+      },
       selecting: {
         enabled: true,
         rubberband: false,
@@ -181,7 +188,7 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
           const portId = targetMagnet.getAttribute('port')!
           const node = targetView!.cell as X6DemoNode
           const port = node.getPort(portId)
-          return !(port && port.connected)
+          return !!(port)
         },
       },
       scroller: {
@@ -370,6 +377,7 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
       .subscribe((graphData) => {
         if (!this.graph) {
           const { nodes, edges } = formatGraphData(graphData)
+          console.log('=======', nodes, edges)
           super.render({
             wrapper,
             container,
@@ -395,10 +403,11 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
     const { data } = nodeMeta
     const { type, includedNodes = [] } = data as any
     if (type === 'node') {
+      console.log('renderNode >>>>>>', nodeMeta)
       const node = this.graph!.addNode(
         new X6DemoNode({
           ...nodeMeta,
-          shape: 'ais-rect-port',
+          shape: 'base-rect-port',
           component: <NodeElement experimentId={experimentId} />,
         }),
       ) as BaseNode
@@ -635,37 +644,6 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
     }
   }
 
-  // 运行画布或节点
-  runGraph = async () => {
-    try {
-      // eslint-disable-next-line: no-this-assignment
-      const { experimentId, nodeMetas = [] } = this
-      await runGraph(nodeMetas)
-      this.running$.next(true)
-      this.clearContextMenuInfo()
-      this.loadExecutionStatus(experimentId) // 发起执行状态查询
-      return { success: true }
-    } catch (e) {
-      console.error(`执行失败`, e)
-      return { success: false }
-    }
-  }
-
-  // 停止实验的执行
-  stopRunGraph = async () => {
-    try {
-      const { experimentId } = this
-      const stopRes = await stopGraphRun()
-      this.running$.next(false)
-      this.clearContextMenuInfo()
-      this.loadExecutionStatus(experimentId) // 发起执行状态查询
-      return stopRes
-    } catch (e) {
-      console.error(`停止失败`, e)
-      return { success: false }
-    }
-  }
-
   // 设置自定义算法组件节点
   setActiveAlgoData = (data: any) => {
     if (!data) {
@@ -687,8 +665,10 @@ class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
     if (graph) {
       const { nodeMeta, clientX, clientY } = param
       const pos = graph.clientToLocal(clientX, clientY)
+      console.log('nodeMeta',nodeMeta)
       const nodeRes = await addNode({ ...nodeMeta, ...pos })
       this.updateExperimentGraph([nodeRes])
+      console.log('requestAddNode nodeRes', nodeRes)
       const newNode = formatNodeInfoToNodeMeta(nodeRes as any);
       console.log('newNode', newNode)
       this.addNode(newNode)

src/pages/rx-models/graph-core.ts

@@ -359,10 +359,12 @@ export class GraphCore<
   }
 
   renderNode(nodeMeta: any): N | undefined {
+    console.log('renderNode => ', nodeMeta)
     return this.graph!.addNode(nodeMeta) as N
   }
 
   renderEdge(edgeMeta: any): E | undefined {
+    console.log('renderEdge => ', edgeMeta)
     return this.graph!.addEdge(edgeMeta) as E
   }
 
@@ -408,7 +410,7 @@ export class GraphCore<
 
   onConnectNode(args: any) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphCore] connect node:', args)
+      console.log('[GraphCore] connect nodes:', args)
     }
   }
 
@@ -420,7 +422,7 @@ export class GraphCore<
 
   onMoveNodeStart(args: any) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphCore] move node start:', args)
+      console.log('[GraphCore] move nodes start:', args)
     }
   }
 
@@ -433,14 +435,14 @@ export class GraphCore<
   // 按下删除键的回调，默认参数为当前选中的节点和边
   onDeleteNodeOrEdge(args: { nodes: N[]; edges: E[] }) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphCore] delete node or edge:', args)
+      console.log('[GraphCore] delete nodes or edge:', args)
     }
   }
 
   // 校验节点是否可复制，为 true 则可被用于复制
   validateNodeCopyable(node: N) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphCore] validate node copyable:', node)
+      console.log('[GraphCore] validate nodes copyable:', node)
     }
     return true
   }
@@ -448,7 +450,7 @@ export class GraphCore<
   // 按下粘贴键的回调，默认参数为待复制的节点
   onCopyNode(copyNode: N) {
     if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphCore] copy node:', copyNode)
+      console.log('[GraphCore] copy nodes:', copyNode)
     }
   }
 

src/pages/rx-models/graph-util.tsx

@@ -7,7 +7,7 @@ import {
   NODE_HEIGHT,
 } from '@/constants/graph'
 import { NExperimentGraph } from '@/pages/rx-models/typing'
-import { BaseNode } from '../common/graph-common/shape/node'
+import BaseNode from '../common/graph-common/shape/nodes/BaseNode'
 import '../common/graph-common/connector'
 
 // group 范围适应内部节点变化

src/pages/rx-models/typing.d.ts

@@ -48,7 +48,7 @@ export namespace NExperimentGraph {
   export interface Port {
     sequence: number
     id: string
-    description: string
+    description?: string
   }
 
   export interface OutPort extends Port {}

src/services/status.ts

@@ -52,33 +52,6 @@ let state = {
   } as any,
 }
 
-export const runGraph = async (nodes: any[]) => {
-  const newState = getStatus()
-  newState.data.instStatus = {}
-  newState.data.execInfo = {}
-  nodes.forEach((node) => {
-    newState.data.instStatus[node.id] = 'default'
-    newState.data.execInfo[node.id] = {
-      jobStatus: 'default',
-      defName: node.name,
-      startTime: '2020-10-19 13:28:55',
-      endTime: '2020-10-19 13:32:02',
-      name: node.name,
-      id: 10571196,
-    }
-  })
-  state.running = true
-  state.idx = 0
-  state.statusRes = newState
-  return { success: true }
-}
-
-export const stopGraphRun = () => {
-  state.running = false
-  state.idx = 0
-  return { success: true }
-}
-
 const getStatus = () => cloneDeep(state.statusRes)
 
 export const queryGraphStatus = async () => {