liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+import '@antv/x6/dist/x6.css';
+interface ILiteFlowEditorProps {
+    /**
+     * 样式类
+     */
+    className?: string;
+    /**
+     * 生成图示例事件
+     * @param graph 图实例
+     * @returns
+     */
+    onReady?: (graph: Graph) => void;
+    /**
+     * 工具栏组件
+     */
+    widgets?: React.FC<any>[];
+    /**
+     * 更多子节点
+     */
+    children?: React.ReactNode;
+    /**
+     * 用户
+    */
+    user?: Record<string, any>;
+    /**
+     * 回显数据
+    */
+    chainObject?: any;
+    /**
+     * 其他可扩展属性
+     */
+    [key: string]: any;
+}
+declare const LiteFlowEditor: React.ForwardRefExoticComponent<Omit<ILiteFlowEditorProps, "ref"> & React.RefAttributes<React.FC<{}>>>;
+export default LiteFlowEditor;

package/dist/LiteFlowEditor/index.js

@@ -0,0 +1,299 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import createFlowGraph from "./panels/flowGraph/createFlowGraph";
+import FlowGraphContextMenu from "./panels/flowGraph/contextMenu";
+import FlowGraphContextPad from "./panels/flowGraph/contextPad";
+import GraphContext from "./context/GraphContext";
+import Layout from "./panels/layout";
+import SideBar from "./panels/sideBar";
+import ToolBar from "./panels/toolBar";
+import SettingBar from "./panels/settingBar";
+import Breadcrumb from "./panels/breadcrumb";
+import styles from "./index.module.less";
+import '@antv/x6/dist/x6.css';
+import { forceLayout } from "./common/layout";
+import { useModel } from "./hooks";
+import { history } from "./hooks/useHistory";
+import ELBuilder from "./model/builder";
+import { setModel } from "./hooks/useModel";
+import { MIN_ZOOM } from "./constant";
+import { checkerList } from "./model-checker/checkers";
+import { ModelCheckEngine } from "./model-checker";
+import { useScriptContext } from "./context/ScriptContext";
+import { I18nextProvider } from 'react-i18next';
+import i18n from "./i18n";
+var defaultMenuInfo = {
+  x: 0,
+  y: 0,
+  scene: 'blank',
+  visible: false
+};
+var defaultPadInfo = {
+  x: 0,
+  y: 0,
+  scene: 'append',
+  visible: false
+};
+var LiteFlowEditor = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _chainObject$isEdit;
+  var className = props.className,
+    onReady = props.onReady,
+    widgets = props.widgets,
+    children = props.children,
+    chainObject = props.chainObject,
+    edit = props.edit;
+  var _useState = useState((_chainObject$isEdit = chainObject === null || chainObject === void 0 ? void 0 : chainObject.isEdit) !== null && _chainObject$isEdit !== void 0 ? _chainObject$isEdit : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEdit = _useState2[0],
+    setIsEdit = _useState2[1];
+  var hasInitRef = useRef(false);
+  // 保存当前节点 ID 集合
+  var nodeIdSetRef = useRef(new Set());
+  var isEditRef = useRef(isEdit);
+  var _useScriptContext = useScriptContext(),
+    language = _useScriptContext.language;
+  var engine = new ModelCheckEngine();
+  checkerList.forEach(function (item) {
+    engine.register(new item.checker(), item.isActive);
+  });
+  var wrapperRef = useRef(null);
+  var graphRef = useRef(null);
+  var miniMapRef = useRef(null);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flowGraph = _useState4[0],
+    setFlowGraph = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkList = _useState6[0],
+    setCheckList = _useState6[1];
+  var _useState7 = useState(defaultMenuInfo),
+    _useState8 = _slicedToArray(_useState7, 2),
+    contextMenuInfo = _useState8[0],
+    setContextMenuInfo = _useState8[1];
+  var _useState9 = useState(defaultPadInfo),
+    _useState10 = _slicedToArray(_useState9, 2),
+    contextPadInfo = _useState10[0],
+    setContextPadInfo = _useState10[1];
+  useEffect(function () {
+    i18n.changeLanguage(language);
+  }, [language]);
+  var currentEditor = {
+    getGraphInstance: function getGraphInstance() {
+      return flowGraph;
+    },
+    toJSON: function toJSON() {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useModel().toJSON();
+    },
+    fromJSON: function fromJSON(data) {
+      var model = ELBuilder.build(data || {});
+      setModel(model);
+      history.cleanHistory();
+      flowGraph === null || flowGraph === void 0 || flowGraph.zoomToFit({
+        minScale: MIN_ZOOM,
+        maxScale: 1
+      });
+    }
+  };
+  useEffect(function () {
+    isEditRef.current = isEdit;
+  }, [isEdit]);
+  var getModelCheckList = function getModelCheckList() {
+    if (!(graphRef.current && miniMapRef.current)) return;
+    var model = useModel();
+    var dslData = model.toJSON();
+    if (Object.keys(dslData).length === 0) {
+      setCheckList([{
+        message: i18n.t('check_list_tips_4'),
+        model: dslData
+      }]);
+      return;
+    }
+    var modelJSON = model.toCells();
+    var nodeList = modelJSON.filter(function (item) {
+      var _item$attrs;
+      return item.isNode() && ((_item$attrs = item.attrs) === null || _item$attrs === void 0 ? void 0 : _item$attrs.label.text);
+    }).slice(2);
+    var allIssues = nodeList.flatMap(function (item) {
+      var ctx = {
+        model: item.data.model,
+        dslData: dslData
+      };
+      return engine.runChecks(ctx);
+    });
+    setCheckList(allIssues);
+  };
+  useImperativeHandle(ref, function () {
+    return currentEditor;
+  });
+  useEffect(function () {
+    var _chainObject$hasPermi;
+    localStorage.setItem('hasPermission', (_chainObject$hasPermi = chainObject === null || chainObject === void 0 ? void 0 : chainObject.hasPermission) !== null && _chainObject$hasPermi !== void 0 ? _chainObject$hasPermi : false);
+    if (graphRef.current && miniMapRef.current) {
+      var _flowGraph = createFlowGraph(graphRef.current, miniMapRef.current);
+      onReady === null || onReady === void 0 || onReady(_flowGraph);
+      setFlowGraph(_flowGraph);
+      history.init(_flowGraph);
+    }
+  }, []);
+  useEffect(function () {
+    if (!flowGraph) return;
+
+    // 初始化
+    var getCurrentNodeSet = function getCurrentNodeSet() {
+      return new Set(flowGraph.getNodes().map(function (n) {
+        return n.id;
+      }));
+    };
+    nodeIdSetRef.current = getCurrentNodeSet();
+    var checkNodeDiff = function checkNodeDiff() {
+      var prev = nodeIdSetRef.current;
+      var cur = getCurrentNodeSet();
+      var added = [];
+      cur.forEach(function (id) {
+        if (!prev.has(id)) {
+          added.push(id);
+        }
+      });
+      var removed = [];
+      prev.forEach(function (id) {
+        if (!cur.has(id)) {
+          removed.push(id);
+        }
+      });
+      if ((added.length || removed.length) && !isEditRef.current && hasInitRef.current) {
+        setIsEdit(true);
+        isEditRef.current = true;
+        console.log('[LiteFlowEditor] 节点变化 -> 新增:', added, ' 删除:', removed);
+        edit(); // 只在新增或删除节点时触发
+      } else if (!hasInitRef.current) {
+        hasInitRef.current = true;
+      }
+
+      // 更新缓存集合
+      nodeIdSetRef.current = cur;
+    };
+    flowGraph.on('model:change', checkNodeDiff);
+    return function () {
+      flowGraph.off('model:change', checkNodeDiff);
+    };
+  }, [flowGraph, edit]);
+
+  // resize flowGraph's size when window size changes
+  useEffect(function () {
+    var handler = function handler() {
+      requestAnimationFrame(function () {
+        if (flowGraph && wrapperRef && wrapperRef.current) {
+          var width = wrapperRef.current.clientWidth;
+          var height = wrapperRef.current.clientHeight;
+          flowGraph.resize(width, height);
+        }
+      });
+    };
+    window.addEventListener('resize', handler);
+    return function () {
+      window.removeEventListener('resize', handler);
+    };
+  }, [flowGraph, wrapperRef]);
+
+  // NOTE: listen toggling context menu event
+  useEffect(function () {
+    var showHandler = function showHandler(info) {
+      flowGraph === null || flowGraph === void 0 || flowGraph.lockScroller();
+      setContextMenuInfo(_objectSpread(_objectSpread({}, info), {}, {
+        visible: true
+      }));
+    };
+    var hideHandler = function hideHandler() {
+      flowGraph === null || flowGraph === void 0 || flowGraph.unlockScroller();
+      setContextMenuInfo(_objectSpread(_objectSpread({}, contextMenuInfo), {}, {
+        visible: false
+      }));
+    };
+    var showContextPad = function showContextPad(info) {
+      flowGraph === null || flowGraph === void 0 || flowGraph.lockScroller();
+      setContextPadInfo(_objectSpread(_objectSpread({}, info), {}, {
+        visible: true
+      }));
+    };
+    var hideContextPad = function hideContextPad() {
+      flowGraph === null || flowGraph === void 0 || flowGraph.unlockScroller();
+      setContextPadInfo(_objectSpread(_objectSpread({}, contextPadInfo), {}, {
+        visible: false
+      }));
+    };
+    var handleModelChange = function handleModelChange() {
+      if (flowGraph) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var model = useModel();
+        var modelJSON = model.toCells();
+        flowGraph.startBatch('update');
+        flowGraph.resetCells(modelJSON);
+        forceLayout(flowGraph);
+        flowGraph.stopBatch('update');
+        flowGraph.trigger('model:changed');
+      }
+    };
+    if (flowGraph) {
+      flowGraph.on('graph:showContextMenu', showHandler);
+      flowGraph.on('graph:hideContextMenu', hideHandler);
+      flowGraph.on('graph:showContextPad', showContextPad);
+      flowGraph.on('graph:hideContextPad', hideContextPad);
+      flowGraph.on('model:change', handleModelChange);
+      flowGraph.on('node:change:*', getModelCheckList);
+    }
+    return function () {
+      if (flowGraph) {
+        flowGraph.off('graph:showContextMenu', showHandler);
+        flowGraph.off('graph:hideContextMenu', hideHandler);
+        flowGraph.off('graph:showContextPad', showContextPad);
+        flowGraph.off('graph:hideContextPad', hideContextPad);
+        flowGraph.off('model:change', handleModelChange);
+        flowGraph.off('node:change:*', getModelCheckList);
+      }
+    };
+  }, [flowGraph]);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(I18nextProvider, {
+      i18n: i18n
+    }, /*#__PURE__*/React.createElement(GraphContext.Provider, {
+      // @ts-ignore
+      value: {
+        graph: flowGraph,
+        graphWrapper: wrapperRef,
+        model: null,
+        currentEditor: currentEditor,
+        chainObject: chainObject,
+        checkList: checkList
+      }
+    }, /*#__PURE__*/React.createElement(Layout, {
+      flowGraph: flowGraph,
+      SideBar: SideBar,
+      ToolBar: ToolBar,
+      SettingBar: SettingBar,
+      widgets: widgets
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.liteflowEditorContainer, className),
+      ref: wrapperRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorGraph,
+      ref: graphRef
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorMiniMap,
+      ref: miniMapRef
+    }), flowGraph && /*#__PURE__*/React.createElement(Breadcrumb, {
+      flowGraph: flowGraph
+    }), flowGraph && /*#__PURE__*/React.createElement(FlowGraphContextMenu, _extends({}, contextMenuInfo, {
+      flowGraph: flowGraph
+    })), flowGraph && /*#__PURE__*/React.createElement(FlowGraphContextPad, _extends({}, contextPadInfo, {
+      flowGraph: flowGraph
+    })), children))))
+  );
+});
+export default LiteFlowEditor;

package/dist/LiteFlowEditor/index.module.less

@@ -0,0 +1,127 @@
+.liteflowEditorContainer {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  .liteflowEditorGraph {
+    width: 100%;
+    height: 100%;
+
+    :global {
+      .liteflow-edge-add-button {
+        display: none;
+        pointer-events: all !important;
+        margin: 0;
+        border: dashed 1px #feb663;
+        color: #feb663;
+      }
+      .x6-edge:hover .liteflow-edge-add-button {
+        display: block;
+      }
+    }
+  }
+
+  .liteflowEditorMiniMap {
+    position: absolute;
+    right: 40px;
+    bottom: 40px;
+
+    :global {
+      .x6-widget-minimap-viewport {
+        border: 1px solid #e0e0e0;
+      }
+    }
+  }
+}
+
+// add global for x6
+:global {
+  .x6-widget-transform {
+    border-color: rgba(0, 0, 0, 0.3);
+    border-style: dashed;
+    background-color: rgba(0, 0, 0, 0.14);
+    border-radius: 0;
+    padding: 6px;
+    margin: -7px 0 0 -7px;
+    .x6-widget-transform-resize {
+      width: 6px;
+      height: 6px;
+      border-radius: 0;
+      border-color: rgba(0, 0, 0, 0.3);
+      // border: 0 none;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+    }
+    .x6-widget-transform-cursor-nw {
+      top: -6px;
+      left: -6px;
+    }
+    .x6-widget-transform-cursor-n {
+      margin-left: -3px;
+      top: -6px;
+    }
+    .x6-widget-transform-cursor-ne {
+      top: -6px;
+      right: -6px;
+    }
+    .x6-widget-transform-cursor-e {
+      margin-top: -3px;
+      right: -6px;
+    }
+    .x6-widget-transform-cursor-se {
+      right: -6px;
+      bottom: -6px;
+    }
+    .x6-widget-transform-cursor-s {
+      margin-left: -3px;
+      bottom: -6px;
+    }
+    .x6-widget-transform-cursor-sw {
+      left: -6px;
+      bottom: -6px;
+    }
+    .x6-widget-transform-cursor-w {
+      left: -6px;
+      margin-top: -3px;
+    }
+  }
+  .x6-widget-dnd.dragging {
+    pointer-events: none;
+  }
+  .x6-edge path:nth-child(2) {
+    stroke: #c1c1c1;
+    stroke-width: 1px;
+  }
+  .x6-edge:hover,
+  .x6-edge.edge-moving,
+  .x6-edge.x6-edge-selected {
+    path:nth-child(2) {
+      stroke: #feb663;
+      stroke-width: 3px;
+    }
+  }
+  // .x6-node {
+  //   .x6-port-body {
+  //     visibility: hidden;
+  //   }
+  //   &:hover {
+  //     .x6-port-body {
+  //       visibility: visible;
+  //     }
+  //   }
+  // }
+  .x6-node {
+    & > text {
+      pointer-events: none;
+    }
+  }
+  .react-json-view {
+    .collapsed-icon,
+    .expanded-icon {
+      svg {
+        vertical-align: middle !important;
+      }
+    }
+  }
+}

package/dist/LiteFlowEditor/mock/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string, any>;
+export default _default;