wetrade-design/es/stgy-graph/Node.js

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { defineComponent, reactive, toRefs, computed, withModifiers, getCurrentInstance } from 'vue';
import useConfigInject from '../_util/hooks/useConfigInject';
import classNames from '../_util/classNames';
import { OperationType, TreeNodeType } from './utils/types';
import Icon from '../icon';
import Dropdown from '../dropdown';
import Menu, { MenuItem } from '../menu';
export var nodeProps = function nodeProps() {
  return {
    nodeDelete: Function,
    nodeShrink: Function,
    nodeAppend: Function,
    nodeInsert: Function,
    nodeClick: Function,
    menuClick: Function,
    nodeMousedown: Function,
    nodeMouseup: Function,
    getMenuPopupContainer: {
      type: Function
    }
  };
};
var StgyGraphNode = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphNode',
  props: nodeProps(),
  emits: [],
  slots: ['header', 'content', 'tools'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots;
    var _useConfigInject = useConfigInject('stgy-graph-node', props),
      prefixCls = _useConfigInject.prefixCls;
    var _getCurrentInstance = getCurrentInstance(),
      $props = _getCurrentInstance.appContext.config.globalProperties.$props;
    var _toRefs = toRefs($props),
      node = _toRefs.node,
      readonly = _toRefs.readonly,
      selectedNodeId = _toRefs.selectedNodeId,
      miniStartNode = _toRefs.miniStartNode;
    var state = reactive({
      nodeRef: null
    });
    var _toRefs2 = toRefs(state),
      nodeRef = _toRefs2.nodeRef;
    var dragging = computed(function () {
      var _node$value$meta, _node$value$meta$extP;
      return (_node$value$meta = node.value.meta) === null || _node$value$meta === void 0 ? void 0 : (_node$value$meta$extP = _node$value$meta.extParam) === null || _node$value$meta$extP === void 0 ? void 0 : _node$value$meta$extP.isDragging;
    });
    // 是否为高亮节点
    var isHighLight = computed(function () {
      var _node$value$meta2, _node$value$meta2$ext;
      return (_node$value$meta2 = node.value.meta) === null || _node$value$meta2 === void 0 ? void 0 : (_node$value$meta2$ext = _node$value$meta2.extParam) === null || _node$value$meta2$ext === void 0 ? void 0 : _node$value$meta2$ext.isHighLight;
    });
    // 是否为拖拽节点
    var isDragElement = computed(function () {
      var _node$value$meta3, _node$value$meta3$ext;
      return (_node$value$meta3 = node.value.meta) === null || _node$value$meta3 === void 0 ? void 0 : (_node$value$meta3$ext = _node$value$meta3.extParam) === null || _node$value$meta3$ext === void 0 ? void 0 : _node$value$meta3$ext.isDragElement;
    });
    var isToolsNode = computed(function () {
      var _node$value, _node$value$meta4;
      return ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : (_node$value$meta4 = _node$value.meta) === null || _node$value$meta4 === void 0 ? void 0 : _node$value$meta4.type) === TreeNodeType.TOOLS;
    });
    var nodeClassNames = computed(function () {
      var _node$value2, _node$value2$meta, _node$value3, _node$value3$meta, _classNameObj;
      var classNameObj = (_classNameObj = {}, _defineProperty(_classNameObj, "".concat(prefixCls.value), true), _defineProperty(_classNameObj, 'selected-node', selectedNodeId.value.includes(node.value.id)), _defineProperty(_classNameObj, 'lighten-node', isHighLight.value), _defineProperty(_classNameObj, 'dragging-node', dragging.value), _defineProperty(_classNameObj, 'start-node', ((_node$value2 = node.value) === null || _node$value2 === void 0 ? void 0 : (_node$value2$meta = _node$value2.meta) === null || _node$value2$meta === void 0 ? void 0 : _node$value2$meta.configKey) === 'start_node'), _defineProperty(_classNameObj, 'start-node-mini', ((_node$value3 = node.value) === null || _node$value3 === void 0 ? void 0 : (_node$value3$meta = _node$value3.meta) === null || _node$value3$meta === void 0 ? void 0 : _node$value3$meta.configKey) === 'start_node' && miniStartNode.value), _classNameObj);
      return classNameObj;
    });
    var style = computed(function () {
      var _node$value4 = node.value,
        width = _node$value4.width,
        height = _node$value4.height;
      return {
        width: width + 'px',
        height: height + 'px'
      };
    });
    var deleteNodeStyle = computed(function () {
      var width = node.value.width;
      return {
        position: 'absolute',
        top: "".concat(isToolsNode.value ? 7 : 8, "px"),
        left: width - 18 - 12 + 'px'
      };
    });
    var nodeDelete = function nodeDelete() {
      props === null || props === void 0 ? void 0 : props.nodeDelete(node.value);
    };
    var nodeMousedown = function nodeMousedown(evt) {
      props.nodeMousedown(evt, node.value);
    };
    var nodeMouseup = function nodeMouseup() {
      props.nodeMouseup(node.value);
    };
    var nodeDeleteDown = function nodeDeleteDown() {
      // 占位
    };
    return function () {
      var _node$value5, _node$value5$meta, _node$value$meta5, _node$value6, _node$value6$meta;
      // 删除按钮
      var deleteNode = null;
      if (((_node$value5 = node.value) === null || _node$value5 === void 0 ? void 0 : (_node$value5$meta = _node$value5.meta) === null || _node$value5$meta === void 0 ? void 0 : _node$value5$meta.type) !== TreeNodeType.TOOLS && ((_node$value$meta5 = node.value.meta) === null || _node$value$meta5 === void 0 ? void 0 : _node$value$meta5.configKey) !== 'start_node' && !readonly.value) {
        deleteNode = _createVNode(_Fragment, null, [_createVNode("div", {
          "onMousedown": withModifiers(nodeDeleteDown, ['left', 'prevent', 'stop']),
          "onMouseup": withModifiers(nodeDelete, ['left', 'prevent', 'stop']),
          "style": deleteNodeStyle.value,
          "class": "node-delete"
        }, [_createVNode(Icon, {
          "class": "icon-delete ".concat(isToolsNode.value ? 'icon-tools-delete' : ''),
          "icon-class": "wd-icon-tips_close_circle"
        }, null)])]);
      }
      // 内容渲染
      var renderNode = null;
      if (((_node$value6 = node.value) === null || _node$value6 === void 0 ? void 0 : (_node$value6$meta = _node$value6.meta) === null || _node$value6$meta === void 0 ? void 0 : _node$value6$meta.type) === TreeNodeType.TOOLS) {
        var renderToolsNode = slots === null || slots === void 0 ? void 0 : slots.tools;
        if (renderToolsNode) {
          renderNode = _createVNode(_Fragment, null, [_createVNode("div", {
            "onMousedown": withModifiers(nodeMousedown, ['left']),
            "onMouseup": withModifiers(nodeMouseup, ['left'])
          }, [renderToolsNode()])]);
        }
      } else {
        var _node$value7, _node$value8, _node$value8$meta, _node$value9, _node$value9$meta, _node$value10, _node$value10$meta, _node$value10$meta$ex, _classNames, _slots$header, _slots$content;
        renderNode = _createVNode(_Fragment, null, [((_node$value7 = node.value) === null || _node$value7 === void 0 ? void 0 : _node$value7.width) > 0 && _createVNode("div", {
          "class": classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap-buy"), ((_node$value8 = node.value) === null || _node$value8 === void 0 ? void 0 : (_node$value8$meta = _node$value8.meta) === null || _node$value8$meta === void 0 ? void 0 : _node$value8$meta.configKey) === 'buy'), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap-sell"), ((_node$value9 = node.value) === null || _node$value9 === void 0 ? void 0 : (_node$value9$meta = _node$value9.meta) === null || _node$value9$meta === void 0 ? void 0 : _node$value9$meta.configKey) === 'sell'), _defineProperty(_classNames, "".concat(prefixCls.value, "-wrap-error"), (_node$value10 = node.value) === null || _node$value10 === void 0 ? void 0 : (_node$value10$meta = _node$value10.meta) === null || _node$value10$meta === void 0 ? void 0 : (_node$value10$meta$ex = _node$value10$meta.extParam) === null || _node$value10$meta$ex === void 0 ? void 0 : _node$value10$meta$ex.errorStatus), _classNames)),
          "onMousedown": withModifiers(nodeMousedown, ['left']),
          "onMouseup": withModifiers(nodeMouseup, ['left'])
        }, [_createVNode("div", {
          "class": "".concat(prefixCls.value, "-wrap-header")
        }, [slots === null || slots === void 0 ? void 0 : (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots)]), (slots === null || slots === void 0 ? void 0 : slots.content) && _createVNode("div", {
          "class": "".concat(prefixCls.value, "-wrap-bottom")
        }, [slots === null || slots === void 0 ? void 0 : (_slots$content = slots.content) === null || _slots$content === void 0 ? void 0 : _slots$content.call(slots)]), deleteNode])]);
      }
      if (isDragElement.value) {
        var dragStyle = {
          width: node.value.width + 'px',
          height: node.value.height + 'px'
        };
        return _createVNode(_Fragment, null, [_createVNode("div", {
          "data-id": node.value.id,
          "style": dragStyle,
          "class": "".concat(prefixCls.value, "-dragging")
        }, null)]);
      } else {
        return _createVNode("div", {
          "ref": nodeRef,
          "tabindex": "-1",
          "class": nodeClassNames.value,
          "style": style.value,
          "data-id": node.value.id
        }, [renderNode]);
      }
    };
  }
});
export default StgyGraphNode;
// 【添】
export var StgyGraphAppend = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphAppend',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject2 = useConfigInject('stgy-graph-node', props),
      prefixCls = _useConfigInject2.prefixCls;
    var _getCurrentInstance2 = getCurrentInstance(),
      $props = _getCurrentInstance2.appContext.config.globalProperties.$props;
    var _toRefs3 = toRefs($props),
      node = _toRefs3.node,
      menus = _toRefs3.menus;
    var handleMenuClick = function handleMenuClick(key) {
      props === null || props === void 0 ? void 0 : props.menuClick({
        operationType: OperationType.APPEND,
        nodeType: key,
        node: node.value
      });
    };
    var nodeAppend = function nodeAppend() {
      props === null || props === void 0 ? void 0 : props.nodeAppend(node.value);
    };
    return function () {
      // 添加按钮
      var appendNode = null;
      appendNode = _createVNode(_Fragment, null, [_createVNode(Dropdown, {
        "trigger": 'click',
        "getPopupContainer": props.getMenuPopupContainer,
        "destroyPopupOnHide": true
      }, {
        overlay: function overlay() {
          return _createVNode(Menu, {
            "onClick": function onClick(_ref2) {
              var key = _ref2.key;
              handleMenuClick(key);
            }
          }, {
            default: function _default() {
              return [menus.value.map(function (menu) {
                return _createVNode(MenuItem, {
                  "disabled": menu.disabled,
                  "key": menu.value
                }, {
                  default: function _default() {
                    return [menu.name];
                  }
                });
              })];
            }
          });
        },
        default: function _default() {
          return _createVNode("div", {
            "onClick": nodeAppend,
            "class": "".concat(prefixCls.value, "-append")
          }, [_createVNode(Icon, {
            "icon-class": "wd-icon-special_append"
          }, null)]);
        }
      })]);
      return _createVNode(_Fragment, null, [appendNode]);
    };
  }
});
// 【+】
export var StgyGraphInsert = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphInsert',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject3 = useConfigInject('stgy-graph-node', props),
      prefixCls = _useConfigInject3.prefixCls;
    var _getCurrentInstance3 = getCurrentInstance(),
      $props = _getCurrentInstance3.appContext.config.globalProperties.$props;
    var _toRefs4 = toRefs($props),
      node = _toRefs4.node,
      menus = _toRefs4.menus;
    var handleMenuClick = function handleMenuClick(key) {
      props === null || props === void 0 ? void 0 : props.menuClick({
        operationType: OperationType.INSERT,
        nodeType: key,
        node: node.value
      });
    };
    var nodeInsert = function nodeInsert() {
      props === null || props === void 0 ? void 0 : props.nodeInsert(node.value);
    };
    return function () {
      // 插入按钮
      var insertNode = null;
      insertNode = _createVNode(_Fragment, null, [_createVNode(Dropdown, {
        "trigger": 'click',
        "getPopupContainer": props.getMenuPopupContainer,
        "destroyPopupOnHide": true
      }, {
        overlay: function overlay() {
          return _createVNode(Menu, {
            "onClick": function onClick(_ref3) {
              var key = _ref3.key;
              handleMenuClick(key);
            }
          }, {
            default: function _default() {
              return [menus.value.map(function (menu) {
                return _createVNode(MenuItem, {
                  "disabled": menu.disabled,
                  "key": menu.value
                }, {
                  default: function _default() {
                    return [menu.name];
                  }
                });
              })];
            }
          });
        },
        default: function _default() {
          return _createVNode("div", {
            "onClick": nodeInsert,
            "class": classNames(_defineProperty({}, "".concat(prefixCls.value, "-insert"), true))
          }, [_createVNode(Icon, {
            "class": "icon-plus",
            "icon-class": "wd-icon-tips_plus_circle"
          }, null)]);
        }
      })]);
      return _createVNode(_Fragment, null, [insertNode]);
    };
  }
});
// 【展开收起】
export var StgyGraphShrink = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphShrink',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject4 = useConfigInject('stgy-graph-node', props),
      prefixCls = _useConfigInject4.prefixCls;
    var _getCurrentInstance4 = getCurrentInstance(),
      $props = _getCurrentInstance4.appContext.config.globalProperties.$props;
    var _toRefs5 = toRefs($props),
      node = _toRefs5.node;
    // 收起节点的收起数量
    var shrinkNum = computed(function () {
      return node.value.meta.extParam.shrinkNum;
    });
    // 节点是否为展开收起
    var isOpen = computed(function () {
      return node.value.meta.extParam.isOpen;
    });
    // 是否为合并节点
    var isMergeNode = computed(function () {
      return node.value.meta.extParam.isMergeNode;
    });
    // 展开收起禁用
    var shrinkDisabled = computed(function () {
      return node.value.meta.extParam.shrinkDisabled;
    });
    var nodeShrink = function nodeShrink() {
      if (shrinkDisabled.value) {
        return;
      }
      props === null || props === void 0 ? void 0 : props.nodeShrink(node.value);
    };
    return function () {
      var _classNames3;
      // 展开收起按钮
      var shrinkNode = null;
      shrinkNode = _createVNode(_Fragment, null, [_createVNode("div", {
        "class": classNames("".concat(prefixCls.value, "-shrink"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls.value, "-shrink__disabled"), shrinkDisabled.value), _defineProperty(_classNames3, "".concat(prefixCls.value, "-shrink__collaspe"), !isOpen.value), _defineProperty(_classNames3, "".concat(prefixCls.value, "-shrink__merge-collaspe"), isMergeNode.value && isOpen.value === false), _classNames3)),
        "onClick": withModifiers(nodeShrink, ['left', 'prevent', 'stop'])
      }, [isOpen.value ? _createVNode(Icon, {
        "icon-class": "wd-icon-tips_minus_circle",
        "class": "".concat(prefixCls.value, "-shrink__icon")
      }, null) : _createVNode("div", {
        "class": "".concat(prefixCls.value, "-shrink__expand")
      }, [shrinkNum.value > 99 ? _createVNode(Icon, {
        "icon-class": "wd-icon-interactive_more",
        "class": "".concat(prefixCls.value, "-shrink__icon")
      }, null) : shrinkNum.value])])]);
      return _createVNode(_Fragment, null, [shrinkNode]);
    };
  }
});