iMove 基于 X6 + form-render 背后的思考

// 同步代码export default function(ctx) {  const data = ctx.getPipe();  return doSomething(data);}
// 异步代码// 写法1 使用promiseexport default function(ctx) {  return new Promise(resolve => {    setTimeout(() => resolve(), 2000);  });}// 写法2 使用async awaitexport default async function(ctx) {  const data = await fetchData();  return data;}

import React, {useEffect} from 'react';import logic from './logic';
const App = () => {  // 引入方法  useEffect(() => {    // 事件监听——在节点代码中，通过`ctx.emit('a')`执行a事件，以下是监听此事件的函数    logic.on('a', (data) => {        });    // 执行一条流程——触发执行“开始节点”逻辑触发名称为b的那条流程    logic.invoke('b');  }, []);    return <div>xxx</div>};
export default App;

$ npm install -g @imove/cli

$ cd yourProject $ imove --init # 或 imove -i

$ imove --dev # 或 imove -d

import {Graph} from '@antv/X6';const flowChart = new Graph({  // 渲染指定 dom 节点  container: document.getElementById('flowChart'),  // 节点是否可旋转  rotating: false,  // 节点是否可调整大小  resizing: true,  // 剪切板，支持跨画布的复制/粘贴（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/clipboard）  clipboard: {    enabled: true,    useLocalStorage: true,  },  // 节点连线规则配置（详细文档：https://X6.antv.vision/zh/docs/api/graph/interaction#connecting）  connecting: {    snap: true,    dangling: true,    highlight: true,    anchor: 'center',    connectionPoint: 'anchor',    router: { name: 'manhattan' }  },  // 画布背景，支持颜色/图片/水印等（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/background）  background: {    color: '#f8f9fa',  },  // 网格配置（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/grid）  grid: {    visible: true,  },  // 点选/框选配置（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/selection）  selecting: {    enabled: true,    multiple: true,    rubberband: true,    movable: true,    strict: true,    showNodeSelectionBox: true  },  // 对齐线配置，辅助移动节点排版（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/snapline）  snapline: {    enabled: true,    clean: 100,  },  // 撤销/重做能力（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/history）  history: {    enabled: true,  },  // 使画布具备滚动、平移、居中、缩放等能力（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/scroller）  scroller: {    enabled: true,  },  // 鼠标滚轮缩放（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/mousewheel）  mousewheel: {    enabled: true,    minScale: MIN_ZOOM,    maxScale: MAX_ZOOM,    modifiers: ['ctrl', 'meta'],  },});

const flowChart = new Graph({  // 键盘快捷键能力（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/keyboard）  keyboard: {    enabled: true,    global: false,  }});

import { Cell, Edge, Graph, Node } from '@antv/X6';interface Shortcut {  keys: string | string[];  handler: (flowChart: Graph) => void;}const shortcuts: { [key: string]: Shortcut } = {  // 复制  copy: {    keys: 'meta + c',    handler(flowChart: Graph) {      const cells = flowChart.getSelectedCells();      if (cells.length > 0) {        flowChart.copy(cells);        message.success('复制成功');      }      return false;    },  },  // 粘贴  paste: {    keys: 'meta + v',    handler(flowChart: Graph) {      if (!flowChart.isClipboardEmpty()) {        const cells = flowChart.paste({ offset: 32 });        flowChart.cleanSelection();        flowChart.select(cells);      }      return false;    },  },  // many funcions can be defined here  save: {}, // 保存  undo: {}, // 撤销  redo: {}, // 重做  zoomIn: {}, // 放大  zoomOut: {}, // 缩小  delete: {}, // 删除  selectAll: {}, // 全选  bold: {}, // 加粗  italic: {}, // 斜体  underline: {}, // 下划线  bringToTop: {}, // 置于顶层  bringToBack: {} // 置于底层};export default shortcuts;

const shortcuts: { [key: string]: Shortcut } = {  zoomIn: {    keys: 'meta + shift + +',    handler(flowChart: Graph) {      const nextZoom = (flowChart.zoom() + ZOOM_STEP).toPrecision(2);      flowChart.zoomTo(Number(nextZoom), { maxScale: MAX_ZOOM });      return false;    },  },  zoomOut: {    keys: 'meta + shift + -',    handler(flowChart: Graph) {      const nextZoom = (flowChart.zoom() - ZOOM_STEP).toPrecision(2);      flowChart.zoomTo(Number(nextZoom), { minScale: MIN_ZOOM });      return false;    },  }}

shortcuts.forEach(shortcur => {  const { key, handler } = shortcut;  graph.bindKey(key, () => handler(graph));});

const registerEvents = (flowChart: Graph): void => {  // 监听节点双击事件，用于打开代码编辑界面  flowChart.on('node:dblclick', () => {  });    // 监听画布右键菜单  flowChart.on('blank:contextmenu', (args) => {  });    // 监听节点右键菜单  flowChart.on('node:contextmenu', (args) => {  });};

// 注册快捷键const registerShortcuts = (flowChart: Graph): void => {  Object.values(shortcuts).forEach((shortcut) => {    const { keys, handler } = shortcut;    flowChart.bindKey(keys, () => handler(flowChart));  });};const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivElement): Graph => {  const flowChart = new Graph({     // many configuration  })    registerEvents(flowChart); // 注册绑定事件  registerShortcuts(flowChart); // 注册快捷键  registerServerStorage(flowChart); // 注册服务端存储    return flowChart;};
export default createFlowChart;

// 导出DSLconst onExportDSL = () => {  const dsl = JSON.stringify(flowChart.toJSON(), null, 2);  const blob = new Blob([dsl], { type: 'text/plain' });  DataUri.downloadBlob(blob, 'imove.dsl.json');};
// 导出代码const onExportCode = () => {  const zip = new JSZip();  const dsl = flowChart.toJSON();  const output = compileForProject(dsl);  Helper.recursiveZip(zip, output);
  zip.generateAsync({ type: 'blob' }).then((blob) => {    DataUri.downloadBlob(blob, 'logic.zip');  });};
// 导出流程图const onExportFlowChart = () => {  flowChart.toPNG((dataUri: string) => {    DataUri.downloadDataUri(dataUri, 'flowChart.png');  }, { padding: 50, ratio: '3.0' });};

// 添加起点const source = graph.addNode({  id: 'node1',  x: 40,  y: 40,  width: 80,  height: 40,  label: 'Hello',});// 添加终点const target = graph.addNode({  id: 'node2',  x: 160,  y: 180,  width: 80,  height: 40,  label: 'World',});// 连线graph.addEdge({ source, target });

import { Addon, Graph } from '@antv/X6';const { Dnd } = Addon;// 创建主画布const graph = new Graph({  id: document.getElementById('flowchart'),  grid: true,  snapline: { enabled: true }});// 创建 Dnd 实例const dnd = new Dnd({  target: graph,  scaled: false,  animation: true});// 创建侧边栏const sideBar = new Graph({  id: document.getElementById('sideBar'),  interacting: false});// 侧边栏添加内置节点1sideBar.addNode({  id: 'node1',  x: 80,  y: 80,  width: 80,  height: 40,  label: 'Hello',});// 侧边栏添加内置节点2sideBar.addNode({  id: 'node2',  x: 80,  y: 140,  width: 80,  height: 40,  label: 'iMove',});// 监听 mousedown 事件，调用 dnd.start 处理拖拽sideBar.on("cell:mousedown", (args) => {  const { node, e } = args;  dnd.start(node.clone(), e);});

// 设置字号cell.setAttrs({ label: { fontSize: 14 } };// 设置字重cell.setAttrs({ label: { fontWeight: 'bold' } });// 设置斜体cell.setAttrs({ label: { fontStyle: 'italic' } });// 设置文字颜色cell.setAttrs({ label: { fill: 'red' } });// 设置背景颜色cell.setAttrs({ body: { fill: 'green' } });// …………

export default async function() {  return fetch('/api/isLogin')    .then(res => res.json())    .then(res => {        const {success, data: {isLogin} = {}} = res;        return success && isLogin;    }).catch(err => {        console.log('fetch /api/isLogin failed, the err is:', err);        return false;    });}

export default async function() {  return fetch('/api/profile')    .then(res => res.json())    .then(res => {        const {success, data} = res;        return {success, data};    }).catch(err => {        console.log('fetch /api/isLogin failed, the err is:', err);        return {success: false};    });}

export default async function(ctx) {  // 获取上游数据  const pipe = ctx.getPipe() || {};  return pipe.success;}

const processData = (data) => {  // TODO: 数据加工处理  return data;};export default async function(ctx) {  // 这里获取到的上游数据，不是"接口成功"这个分支节点的返回值，而是"请求profile接口"这个节点的返回值  const pipe = ctx.getPipe() || {};    // 触发updateUI这个方法更新界面，传入的值为profileData  ctx.emit('updateUI', {profileData: processData(pipe.data)});}

{  "id": "5d034984-e0d5-4636-a5ab-862f1270d9e0",  "shape": "edge",  "source": {    "cell": "1b44f69a-1463-4f0e-b8fc-7de848517b4e",    "port": "bottom"  },  "target": {    "cell": "c18fa75c-2aad-40e9-b2d2-f3c408933d53",    "port": "top"  }}

flowChart.on('edge:connected', (args) => {  const edge = args.edge as Edge;  const sourceNode = edge.getSourceNode() as Node;
  if (sourceNode && sourceNode.shape === 'imove-branch') {    const portId = edge.getSourcePortId();
    if (portId === 'right' || portId === 'bottom') {      edge.setLabelAt(0, sourceNode.getPortProp(portId, 'attrs/text/text'));      sourceNode.setPortProp(portId, 'attrs/text/text', '');    }  }});

flowChart.on('edge:selected', (args) => {  args.edge.attr('line/stroke', '#feb663');  args.edge.attr('line/strokeWidth', '3px');});

分支节点{    "shape": "imove-branch",    "data": {        "ports": {            "right": {                "condition": "true"            },            "bottom": {                "condition": "false"            }        },        "code": "export default async function(ctx) {\n  return true;\n}"    },    "id": "a6da6684-96c8-4595-bec6-a94122b61e30"}连线{      "shape": "edge",      "id": "cbcbd0ea-4a2a-4d2a-8135-7b4b7d7ec50d",      "source": {        "cell": "de868d18-9ec0-4dac-abbe-5cb9e3c20e2f",        "port": "right"      },      "target": {        "cell": "a6da6684-96c8-4595-bec6-a94122b61e30",        "port": "left"      }}

// 找到下一个节点const getNextNode = (curNode: Cell.Properties, dsl: DSL) => {  const nodes = dsl.cells.filter((cell) => cell.shape !== 'edge');  const edges = dsl.cells.filter((cell) => cell.shape === 'edge');  const foundEdge = edges.find((edge) => edge.source.cell === curNode.id);    if (foundEdge) {    return nodes.find((node) => node.id === foundEdge.target.cell);  }};

const Element = ({ text, name, schema, icon }) => {  // ......    const { selected, flatten, onFlattenChange } = useStore();    const handleElementClick = () => {    const { newId, newFlatten } = addItem({ selected, name, schema, flatten });    onFlattenChange(newFlatten);    setGlobal({ selected: newId });  };  return (    <div ref={dragRef}>      <WidgetUI text={text} icon={icon} onClick={handleElementClick} />    </div>  );};

// 点击左侧菜单添加表单结构项export const addItem = ({ selected, name, schema, flatten }) => {  // ......  let _name = name + '_' + nanoid(6);  const idArr = selected.split('/');  idArr.pop();  idArr.push(_name);  newId = idArr.join('/');  const newFlatten = { ...flatten };    try {    // 拿到选中的节点    const item = newFlatten[selected];    // 拿到选中节点的父节点children属性    const siblings = newFlatten[item.parent].children;    // 找到选中节点在children数组中的位置    const idx = siblings.findIndex(x => x === selected);    // 将选中节点后插入新的表单项    siblings.splice(idx + 1, 0, newId);    const newItem = {      parent: item.parent,      schema: { ...schema, $id: newId },      data: undefined,      children: [],    };    newFlatten[newId] = newItem;  } catch (error) {    console.error(error);  }  return { newId, newFlatten };};