wetrade-design/es/stgy-flow/index.js

一款多语言支持Vue3的UI框架

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue';
import { withInstall } from '../_util/type';
import Graph from './utils/graph';
import { getOffset, vector //arrayReplace
} from './utils';
import useConfigInject from '../_util/hooks/useConfigInject';
import GraphNode from './Node';
import GraphLine from './Link';
import { insertNode, appendNode, deleteNode, shrinkOrExpandNode, initShrinkNode, mergeNode, cancelMerge, lightenPath, changeNodeHeight, checkMergeNodeList, findNodeByCoordinate, appendDragNode, deleteDragNodeAndLink, updateDragNode, disabledNodeDrag, editMerge } from './utils/tool';
import classNames from '../_util/classNames';
import ScrollBar from '../scrollbar';
import { QuotationColor } from '../_util/enum';
import raf from '../_util/raf';
// import { TreeNodeType } from './utils/types';
export var stgyFlowProps = function stgyFlowProps() {
  return {
    relationMark: {
      type: String,
      default: 'id'
    },
    startMark: {
      type: String,
      default: 'startId'
    },
    endMark: {
      type: String,
      default: 'endId'
    },
    draggable: {
      type: Boolean,
      default: false
    },
    // linkAddable: {
    //   type: Boolean,
    //   default: true,
    // },
    linkEditable: {
      type: Boolean,
      default: true
    },
    // hasMarkLine: {
    //   type: Boolean,
    //   default: true,
    // },
    linkDesc: {
      type: Object,
      default: function _default() {}
    },
    linkStyle: {
      type: Object,
      default: function _default() {
        return {
          hover: '#FF0000',
          color: '#666666',
          textColor: '#666666',
          textHover: '#FF0000',
          font: '14px Arial',
          dotted: false,
          lineDash: [4, 4],
          background: 'rgba(255,255,255,0.6)'
        };
      }
    },
    linkBaseStyle: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    markLineColor: {
      type: String,
      default: '#55abfc'
    },
    origin: {
      type: Array,
      default: function _default() {
        return [0, 0];
      }
    },
    nodeList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    linkList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    modelPathList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    graphMenu: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    nodeMenu: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    linkMenu: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    selectedNodeId: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    selectedActiveId: {
      type: Number,
      default: -1
    },
    linkPadding: {
      type: Number,
      default: 50
    },
    enterIntercept: {
      type: Function,
      default: function _default() {
        return true;
      }
    },
    outputIntercept: {
      type: Function,
      default: function _default() {
        return true;
      }
    },
    merge: {
      type: Boolean,
      default: false
    },
    menus: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    quotationColor: {
      type: Number,
      default: QuotationColor.RED_UP_GREEN_DOWN
    }
  };
};
var StgyFlow = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyFlow',
  props: stgyFlowProps(),
  emits: ['node-select', 'node-delete', 'node-insert', 'link-select', 'menu-click', 'node-append', 'node-append-before', 'node-click'],
  slots: ['node-header', 'node-content'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      emit = _ref.emit,
      expose = _ref.expose;
    var _useConfigInject = useConfigInject('stgy-flow', props),
      prefixCls = _useConfigInject.prefixCls;
    var _toRefs = toRefs(props),
      relationMark = _toRefs.relationMark,
      startMark = _toRefs.startMark,
      endMark = _toRefs.endMark,
      origin = _toRefs.origin,
      outputIntercept = _toRefs.outputIntercept,
      draggable = _toRefs.draggable,
      linkEditable = _toRefs.linkEditable,
      nodeList = _toRefs.nodeList,
      linkList = _toRefs.linkList,
      linkPadding = _toRefs.linkPadding,
      linkBaseStyle = _toRefs.linkBaseStyle,
      linkDesc = _toRefs.linkDesc,
      linkStyle = _toRefs.linkStyle,
      selectedNodeId = _toRefs.selectedNodeId,
      selectedActiveId = _toRefs.selectedActiveId,
      merge = _toRefs.merge,
      modelPathList = _toRefs.modelPathList,
      menus = _toRefs.menus,
      readonly = _toRefs.readonly,
      quotationColor = _toRefs.quotationColor;
    var state = reactive({
      graph: new Graph({
        relationMark: relationMark.value,
        startMark: startMark.value,
        endMark: endMark.value,
        origin: origin.value
      }),
      menuConf: {
        visible: false,
        position: [0, 0],
        source: null,
        list: []
      },
      moveNodeConf: {
        isMove: false,
        sourceNode: null,
        offset: null,
        verticalList: [],
        horizontalList: [],
        markLine: [],
        startNode: null,
        targetNode: null,
        direction: null,
        disabledDrag: false,
        disabledDragging: false // 是否禁用拖动过程
      },

      moveAllConf: {
        isMove: false,
        downPosition: [0, 0],
        origin: []
      },
      temEdgeConf: {
        visible: false,
        link: null
      },
      loaded: false,
      clientWidth: 0,
      clientHeight: 0,
      flowRef: null,
      scrollRef: null,
      renderNodeList: []
    });
    var _toRefs2 = toRefs(state),
      graph = _toRefs2.graph,
      menuConf = _toRefs2.menuConf,
      moveNodeConf = _toRefs2.moveNodeConf,
      moveAllConf = _toRefs2.moveAllConf,
      temEdgeConf = _toRefs2.temEdgeConf,
      scrollRef = _toRefs2.scrollRef,
      renderNodeList = _toRefs2.renderNodeList;
    var flowRef = ref();
    onMounted(function () {
      document.addEventListener('mousedown', docMousedown);
      document.addEventListener('mousemove', docMousemove);
      nextTick(function () {
        handlerShrinkNode();
      });
    });
    onBeforeUnmount(function () {
      document.removeEventListener('mousedown', docMousedown);
      document.removeEventListener('mousemove', docMousemove);
    });
    watch(function () {
      return graph.value.mouseOnLink;
    }, function () {
      if (readonly.value) return;
      if (graph.value.mouseOnLink) {
        document.body.style.cursor = 'pointer';
      } else {
        document.body.style.cursor = '';
      }
    });
    watch(function () {
      return origin.value;
    }, function () {
      graph.value.origin = origin.value;
    });
    watch(function () {
      return nodeList.value;
    }, function () {
      handlerShrinkNode();
      updateContainerRect();
    }, {
      deep: true
    });
    watch(function () {
      return linkList.value;
    }, function () {
      graph.value.initLink(linkList.value);
    }, {
      deep: true
    });
    watch(function () {
      return modelPathList.value;
    }, function () {
      handlerShrinkNode();
    }, {
      deep: true
    });
    var cacheWidth = 200;
    var cacheHeight = 100;
    var updateContainerRect = function updateContainerRect() {
      var _renderNodeList$value;
      var rect = (_renderNodeList$value = renderNodeList.value) === null || _renderNodeList$value === void 0 ? void 0 : _renderNodeList$value.reduce(function (prev, item) {
        var _item$coordinate = item === null || item === void 0 ? void 0 : item.coordinate,
          _item$coordinate2 = _slicedToArray(_item$coordinate, 2),
          x = _item$coordinate2[0],
          y = _item$coordinate2[1];
        var w = x + item.width || 0;
        if (w > prev.width) {
          prev.width = w;
        }
        var h = y + item.height || 0;
        if (h > prev.height) {
          prev.height = h;
        }
        return prev;
      }, {
        width: 0,
        height: 0
      });
      var d = document.querySelector(".".concat(prefixCls.value));
      if (d) {
        d.style.width = "".concat(rect.width + cacheWidth, "px");
        d.style.height = "".concat(rect.height + cacheHeight, "px");
      }
    };
    var docMousedown = function docMousedown(evt) {
      if (linkEditable.value) {
        graph.value.dispatch({
          type: 'mousedown',
          evt: evt
        }, true);
      }
    };
    var offsetX = 0;
    var offsetY = 0;
    var offsetLeft = 0;
    var offsetTop = 0;
    var draggableEl = null;
    var dragFlag = false;
    var nodeMousedown = function nodeMousedown(evt, node) {
      evt.preventDefault();
      dragFlag = false;
      var boxEl = evt.target.closest(".".concat(prefixCls.value, "-node"));
      var el = boxEl.children[0];
      offsetX = evt.clientX - el.getBoundingClientRect().left;
      offsetY = evt.clientY - el.getBoundingClientRect().top;
      moveNodeConf.value.disabledDrag = disabledNodeDrag({
        sourceNode: node,
        linkList: linkList.value,
        nodeList: nodeList.value,
        modelPathList: modelPathList.value,
        draggable: draggable.value
      });
      if (!moveNodeConf.value.disabledDrag) {
        draggableEl = el.cloneNode(true);
        window.requestAnimationFrame(function () {
          var _flowRef$value;
          draggableEl.style.position = 'absolute';
          draggableEl.style.zIndex = '10';
          draggableEl.style.opacity = '0';
          draggableEl.style.width = el.offsetWidth + 'px';
          draggableEl.style.height = el.offsetHeight + 'px';
          draggableEl && ((_flowRef$value = flowRef.value) === null || _flowRef$value === void 0 ? void 0 : _flowRef$value.appendChild(draggableEl));
        });
      }
      moveNodeConf.value.sourceNode = node;
      document.addEventListener('mousemove', docNodeMove);
      document.addEventListener('mouseup', doceNodeUp);
    };
    var docMousemove = function docMousemove(evt) {
      if (linkEditable.value) {
        graph.value.dispatch({
          type: 'mousemove',
          evt: evt
        }, true);
      }
    };
    var docNodeMove = function docNodeMove(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      if (moveNodeConf.value.disabledDrag) return;
      dragFlag = true;
      var scrollWrap = scrollRef.value.wrapRef;
      var boxLeft = scrollWrap.getBoundingClientRect().left;
      var boxTop = scrollWrap.getBoundingClientRect().top;
      offsetLeft = evt.clientX - offsetX - boxLeft + scrollWrap.scrollLeft;
      offsetTop = evt.clientY - offsetY - boxTop + scrollWrap.scrollTop;
      window.requestAnimationFrame(function () {
        if (!draggableEl) return;
        draggableEl.style.left = offsetLeft + 'px';
        draggableEl.style.top = offsetTop + 'px';
        draggableEl.style.opacity = '1';
        onDrag({
          // offset: [offsetLeft + offsetX, offsetTop + offsetY], // 鼠标位置
          offset: [offsetLeft, offsetTop],
          sourceNode: moveNodeConf.value.sourceNode
        });
      });
    };
    var doceNodeUp = function doceNodeUp(evt) {
      var _flowRef$value2;
      evt.preventDefault();
      draggableEl && ((_flowRef$value2 = flowRef.value) === null || _flowRef$value2 === void 0 ? void 0 : _flowRef$value2.removeChild(draggableEl));
      draggableEl = null;
      dragFlag && onDragEnd();
      document.removeEventListener('mousemove', docNodeMove);
      document.removeEventListener('mouseup', doceNodeUp);
    };
    // 鼠标松开时添加连线
    var nodeMouseup = function nodeMouseup() {
      if (!merge.value && !dragFlag) {
        emit('node-click', moveNodeConf.value.sourceNode);
      }
    };
    var nodeIntercept = function nodeIntercept(node) {
      return function () {
        return outputIntercept.value(node, graph.value);
      };
    };
    var menuItemSelect = function menuItemSelect() {
      menuConf.value.visible = false;
    };
    var selectAllMaskMouseDown = function selectAllMaskMouseDown(evt) {
      moveAllConf.value.isMove = true;
      moveAllConf.value.origin = _toConsumableArray(graph.value.origin);
      moveAllConf.value.downPosition = [evt.clientX, evt.clientY];
    };
    var toJSON = function toJSON() {
      return graph.value.toJSON();
    };
    var getMouseCoordinate = function getMouseCoordinate(clientX, clientY) {
      var offset = getOffset({
        clientX: clientX,
        clientY: clientY
      }, flowRef.value);
      return vector(offset).minus(graph.value.origin).end;
    };
    var addNode = function addNode(options) {
      return graph.value.addNode(options);
    };
    var nodeDelete = function nodeDelete(node) {
      // deleteNode({
      //   nodeId: node.id,
      //   modelPathList: modelPathList.value,
      //   nodeList: nodeList.value,
      //   linkList: linkList.value,
      // });
      emit('node-delete', node);
    };
    var nodeShrink = function nodeShrink(node) {
      shrinkOrExpandNode({
        nodeId: node.id,
        nodeList: nodeList.value,
        modelPathList: modelPathList.value
      });
      handlerShrinkNode();
    };
    var handlerShrinkNode = function handlerShrinkNode() {
      renderNodeList.value = initShrinkNode({
        modelPathList: modelPathList.value,
        nodeList: nodeList.value
      });
      graph.value.initNode(renderNodeList.value);
      graph.value.initLink(linkList.value);
    };
    var nodeSelect = function nodeSelect(_ref2) {
      var nodeId = _ref2.nodeId,
        isLastNode = _ref2.isLastNode;
      emit('node-select', {
        nodeId: nodeId,
        isLastNode: isLastNode
      });
    };
    var linkSelect = function linkSelect(activeId) {
      emit('link-select', activeId);
    };
    var menuClick = function menuClick(_ref3) {
      var type = _ref3.type,
        key = _ref3.key,
        node = _ref3.node,
        link = _ref3.link;
      emit('menu-click', {
        type: type,
        key: key,
        node: node,
        link: link
      });
    };
    var updateNodeData = function updateNodeData(node, newNode) {
      _extends(node, newNode);
    };
    var rafRef = ref(null);
    var onDrag = function onDrag(_ref4) {
      var sourceNode = _ref4.sourceNode,
        offset = _ref4.offset;
      raf.cancel(rafRef.value);
      rafRef.value = raf(function () {
        var _findNodeByCoordinate = findNodeByCoordinate({
            nodeList: nodeList.value,
            modelPathList: modelPathList.value,
            offset: offset
          }),
          node = _findNodeByCoordinate.node,
          direction = _findNodeByCoordinate.direction;
        var _appendDragNode = appendDragNode({
            sourceNode: sourceNode,
            direction: direction,
            targetNode: node,
            nodeList: nodeList.value,
            modelPathList: modelPathList.value,
            linkList: linkList.value
          }),
          disabled = _appendDragNode.disabled,
          startNode = _appendDragNode.startNode;
        moveNodeConf.value.startNode = startNode;
        moveNodeConf.value.targetNode = node;
        moveNodeConf.value.direction = direction;
        moveNodeConf.value.disabledDragging = disabled;
      }, 5);
    };
    var onDragEnd = function onDragEnd() {
      var _moveNodeConf$value;
      raf.cancel(rafRef.value);
      rafRef.value = null;
      deleteDragNodeAndLink({
        nodeList: nodeList.value,
        linkList: linkList.value,
        modelPathList: modelPathList.value
      });
      updateDragNode({
        sourceNode: moveNodeConf.value.sourceNode,
        startNode: (_moveNodeConf$value = moveNodeConf.value) === null || _moveNodeConf$value === void 0 ? void 0 : _moveNodeConf$value.startNode,
        targetNode: moveNodeConf.value.targetNode,
        nodeList: nodeList.value,
        linkList: linkList.value,
        modelPathList: modelPathList.value,
        direction: moveNodeConf.value.direction,
        disabled: moveNodeConf.value.disabledDragging
      });
      moveNodeConf.value.sourceNode = null;
      moveNodeConf.value.targetNode = null;
    };
    // 导出方法
    expose({
      menuItemSelect: menuItemSelect,
      selectAllMaskMouseDown: selectAllMaskMouseDown,
      toJSON: toJSON,
      getMouseCoordinate: getMouseCoordinate,
      addNode: addNode,
      mergeNode: mergeNode,
      cancelMerge: cancelMerge,
      insertNode: insertNode,
      deleteNode: deleteNode,
      appendNode: appendNode,
      shrinkOrExpandNode: shrinkOrExpandNode,
      lightenPath: lightenPath,
      changeNodeHeight: changeNodeHeight,
      checkMergeNodeList: checkMergeNodeList,
      editMerge: editMerge
    });
    return function () {
      var _graph$value$linkList, _graph$value$nodeList, _classNames;
      // 绘制连线
      // const flowLine = () => {
      //   return line;
      // };
      var flowLine = [];
      if (((_graph$value$linkList = graph.value.linkList) === null || _graph$value$linkList === void 0 ? void 0 : _graph$value$linkList.length) > 0) {
        graph.value.linkList.forEach(function (link, idx) {
          flowLine.push(_createVNode(_Fragment, null, [_createVNode(GraphLine, {
            "index": idx,
            "padding": linkPadding.value,
            "graph": graph.value,
            "link": link,
            "merge": merge.value,
            "key": link.key,
            "selectedActiveId": selectedActiveId.value,
            "link-base-style": linkBaseStyle.value,
            "link-desc": linkDesc,
            "link-style": linkStyle,
            "linkSelect": linkSelect,
            "menus": menus.value,
            "menuClick": menuClick,
            "readonly": readonly.value,
            "getMenuPopupContainer": function getMenuPopupContainer() {
              return flowRef.value;
            },
            "nodeList": nodeList.value,
            "modelPathList": modelPathList.value
          }, null)]));
        });
      }
      // 获取节点
      // const flowNode = () => {
      //   return node;
      // };
      var flowNode = [];
      if (((_graph$value$nodeList = graph.value.nodeList) === null || _graph$value$nodeList === void 0 ? void 0 : _graph$value$nodeList.length) > 0) {
        graph.value.nodeList.forEach(function (node, idx) {
          var _node$meta, _node$meta2, _node$meta2$extParam;
          flowNode.push(_createVNode(_Fragment, null, [_createVNode(GraphNode, {
            "index": idx,
            "node": node,
            "link-list": linkList.value,
            "graph": graph.value,
            "key": node.id,
            "is-move": node === moveNodeConf.value.sourceNode,
            "is-tem-edge": temEdgeConf.value.visible,
            "node-intercept": nodeIntercept(node),
            "node-drop": draggable.value,
            "class-name": (_node$meta = node.meta) === null || _node$meta === void 0 ? void 0 : _node$meta.className,
            "merge": merge.value,
            "selected-node-id": selectedNodeId.value,
            "nodeList": nodeList.value,
            "modelPathList": modelPathList.value,
            "nodeMousedown": nodeMousedown,
            "nodeMouseup": nodeMouseup,
            "nodeSelect": nodeSelect,
            "nodeShrink": nodeShrink,
            "nodeDelete": nodeDelete,
            "onDrag": onDrag,
            "onDragEnd": onDragEnd,
            "menuClick": menuClick,
            "menus": menus.value,
            "readonly": readonly.value,
            "scrollRef": scrollRef.value,
            "dragging": (_node$meta2 = node.meta) === null || _node$meta2 === void 0 ? void 0 : (_node$meta2$extParam = _node$meta2.extParam) === null || _node$meta2$extParam === void 0 ? void 0 : _node$meta2$extParam.isDragging,
            "getMenuPopupContainer": function getMenuPopupContainer() {
              return flowRef.value;
            }
          }, {
            header: function header() {
              var _slots$nodeHeader;
              return slots === null || slots === void 0 ? void 0 : (_slots$nodeHeader = slots.nodeHeader) === null || _slots$nodeHeader === void 0 ? void 0 : _slots$nodeHeader.call(slots, node);
            },
            content: function content() {
              var _slots$nodeContent;
              return slots === null || slots === void 0 ? void 0 : (_slots$nodeContent = slots.nodeContent) === null || _slots$nodeContent === void 0 ? void 0 : _slots$nodeContent.call(slots, node);
            },
            tools: function tools() {
              var _slots$nodeToolsProps;
              return slots === null || slots === void 0 ? void 0 : (_slots$nodeToolsProps = slots.nodeToolsProps) === null || _slots$nodeToolsProps === void 0 ? void 0 : _slots$nodeToolsProps.call(slots, {
                node: node,
                updateNodeData: updateNodeData
              });
            }
          })]));
        });
      }
      return _createVNode(ScrollBar, {
        "ref": scrollRef,
        "view-class": "".concat(prefixCls.value, "-view")
      }, {
        default: function _default() {
          return [_createVNode("div", {
            "class": classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-readonly"), readonly.value), _defineProperty(_classNames, "".concat(prefixCls.value, "-gu"), quotationColor.value === QuotationColor.GREEN_UP_RED_DOWN), _defineProperty(_classNames, "".concat(prefixCls.value, "-merge"), merge.value), _classNames)),
            "ref": flowRef
          }, [flowLine, flowNode])];
        }
      });
    };
  }
});
export default withInstall(StgyFlow);