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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.nodeProps = exports.default = exports.StgyGraphShrink = exports.StgyGraphInsert = exports.StgyGraphAppend = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _useConfigInject5 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _classNames4 = _interopRequireDefault(require("../_util/classNames"));
var _types = require("./utils/types");
var _icon = _interopRequireDefault(require("../icon"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _menu = _interopRequireWildcard(require("../menu"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var nodeProps = function nodeProps() {
  return {
    nodeDelete: Function,
    nodeShrink: Function,
    nodeAppend: Function,
    nodeInsert: Function,
    nodeClick: Function,
    menuClick: Function,
    nodeMousedown: Function,
    nodeMouseup: Function,
    getMenuPopupContainer: {
      type: Function
    }
  };
};
exports.nodeProps = nodeProps;
var StgyGraphNode = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphNode',
  props: nodeProps(),
  emits: [],
  slots: ['header', 'content', 'tools'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots;
    var _useConfigInject = (0, _useConfigInject5.default)('stgy-graph-node', props),
      prefixCls = _useConfigInject.prefixCls;
    var _getCurrentInstance = (0, _vue.getCurrentInstance)(),
      $props = _getCurrentInstance.appContext.config.globalProperties.$props;
    var _toRefs = (0, _vue.toRefs)($props),
      node = _toRefs.node,
      readonly = _toRefs.readonly,
      selectedNodeId = _toRefs.selectedNodeId,
      miniStartNode = _toRefs.miniStartNode;
    var state = (0, _vue.reactive)({
      nodeRef: null
    });
    var _toRefs2 = (0, _vue.toRefs)(state),
      nodeRef = _toRefs2.nodeRef;
    var dragging = (0, _vue.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 = (0, _vue.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 = (0, _vue.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 = (0, _vue.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) === _types.TreeNodeType.TOOLS;
    });
    var nodeClassNames = (0, _vue.computed)(function () {
      var _node$value2, _node$value2$meta, _node$value3, _node$value3$meta, _classNameObj;
      var classNameObj = (_classNameObj = {}, (0, _defineProperty2.default)(_classNameObj, "".concat(prefixCls.value), true), (0, _defineProperty2.default)(_classNameObj, 'selected-node', selectedNodeId.value.includes(node.value.id)), (0, _defineProperty2.default)(_classNameObj, 'lighten-node', isHighLight.value), (0, _defineProperty2.default)(_classNameObj, 'dragging-node', dragging.value), (0, _defineProperty2.default)(_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'), (0, _defineProperty2.default)(_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 = (0, _vue.computed)(function () {
      var _node$value4 = node.value,
        width = _node$value4.width,
        height = _node$value4.height;
      return {
        width: width + 'px',
        height: height + 'px'
      };
    });
    var deleteNodeStyle = (0, _vue.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) !== _types.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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
          "onMousedown": (0, _vue.withModifiers)(nodeDeleteDown, ['left', 'prevent', 'stop']),
          "onMouseup": (0, _vue.withModifiers)(nodeDelete, ['left', 'prevent', 'stop']),
          "style": deleteNodeStyle.value,
          "class": "node-delete"
        }, [(0, _vue.createVNode)(_icon.default, {
          "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) === _types.TreeNodeType.TOOLS) {
        var renderToolsNode = slots === null || slots === void 0 ? void 0 : slots.tools;
        if (renderToolsNode) {
          renderNode = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
            "onMousedown": (0, _vue.withModifiers)(nodeMousedown, ['left']),
            "onMouseup": (0, _vue.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 = (0, _vue.createVNode)(_vue.Fragment, null, [((_node$value7 = node.value) === null || _node$value7 === void 0 ? void 0 : _node$value7.width) > 0 && (0, _vue.createVNode)("div", {
          "class": (0, _classNames4.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-wrap"), true), (0, _defineProperty2.default)(_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'), (0, _defineProperty2.default)(_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'), (0, _defineProperty2.default)(_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": (0, _vue.withModifiers)(nodeMousedown, ['left']),
          "onMouseup": (0, _vue.withModifiers)(nodeMouseup, ['left'])
        }, [(0, _vue.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) && (0, _vue.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 (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
          "data-id": node.value.id,
          "style": dragStyle,
          "class": "".concat(prefixCls.value, "-dragging")
        }, null)]);
      } else {
        return (0, _vue.createVNode)("div", {
          "ref": nodeRef,
          "tabindex": "-1",
          "class": nodeClassNames.value,
          "style": style.value,
          "data-id": node.value.id
        }, [renderNode]);
      }
    };
  }
});
var _default2 = StgyGraphNode; // 【添】
exports.default = _default2;
var StgyGraphAppend = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphAppend',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject2 = (0, _useConfigInject5.default)('stgy-graph-node', props),
      prefixCls = _useConfigInject2.prefixCls;
    var _getCurrentInstance2 = (0, _vue.getCurrentInstance)(),
      $props = _getCurrentInstance2.appContext.config.globalProperties.$props;
    var _toRefs3 = (0, _vue.toRefs)($props),
      node = _toRefs3.node,
      menus = _toRefs3.menus;
    var handleMenuClick = function handleMenuClick(key) {
      props === null || props === void 0 ? void 0 : props.menuClick({
        operationType: _types.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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_dropdown.default, {
        "trigger": 'click',
        "getPopupContainer": props.getMenuPopupContainer,
        "destroyPopupOnHide": true
      }, {
        overlay: function overlay() {
          return (0, _vue.createVNode)(_menu.default, {
            "onClick": function onClick(_ref2) {
              var key = _ref2.key;
              handleMenuClick(key);
            }
          }, {
            default: function _default() {
              return [menus.value.map(function (menu) {
                return (0, _vue.createVNode)(_menu.MenuItem, {
                  "disabled": menu.disabled,
                  "key": menu.value
                }, {
                  default: function _default() {
                    return [menu.name];
                  }
                });
              })];
            }
          });
        },
        default: function _default() {
          return (0, _vue.createVNode)("div", {
            "onClick": nodeAppend,
            "class": "".concat(prefixCls.value, "-append")
          }, [(0, _vue.createVNode)(_icon.default, {
            "icon-class": "wd-icon-special_append"
          }, null)]);
        }
      })]);
      return (0, _vue.createVNode)(_vue.Fragment, null, [appendNode]);
    };
  }
});
// 【+】
exports.StgyGraphAppend = StgyGraphAppend;
var StgyGraphInsert = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphInsert',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject3 = (0, _useConfigInject5.default)('stgy-graph-node', props),
      prefixCls = _useConfigInject3.prefixCls;
    var _getCurrentInstance3 = (0, _vue.getCurrentInstance)(),
      $props = _getCurrentInstance3.appContext.config.globalProperties.$props;
    var _toRefs4 = (0, _vue.toRefs)($props),
      node = _toRefs4.node,
      menus = _toRefs4.menus;
    var handleMenuClick = function handleMenuClick(key) {
      props === null || props === void 0 ? void 0 : props.menuClick({
        operationType: _types.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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_dropdown.default, {
        "trigger": 'click',
        "getPopupContainer": props.getMenuPopupContainer,
        "destroyPopupOnHide": true
      }, {
        overlay: function overlay() {
          return (0, _vue.createVNode)(_menu.default, {
            "onClick": function onClick(_ref3) {
              var key = _ref3.key;
              handleMenuClick(key);
            }
          }, {
            default: function _default() {
              return [menus.value.map(function (menu) {
                return (0, _vue.createVNode)(_menu.MenuItem, {
                  "disabled": menu.disabled,
                  "key": menu.value
                }, {
                  default: function _default() {
                    return [menu.name];
                  }
                });
              })];
            }
          });
        },
        default: function _default() {
          return (0, _vue.createVNode)("div", {
            "onClick": nodeInsert,
            "class": (0, _classNames4.default)((0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-insert"), true))
          }, [(0, _vue.createVNode)(_icon.default, {
            "class": "icon-plus",
            "icon-class": "wd-icon-tips_plus_circle"
          }, null)]);
        }
      })]);
      return (0, _vue.createVNode)(_vue.Fragment, null, [insertNode]);
    };
  }
});
// 【展开收起】
exports.StgyGraphInsert = StgyGraphInsert;
var StgyGraphShrink = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyGraphShrink',
  props: nodeProps(),
  setup: function setup(props) {
    var _useConfigInject4 = (0, _useConfigInject5.default)('stgy-graph-node', props),
      prefixCls = _useConfigInject4.prefixCls;
    var _getCurrentInstance4 = (0, _vue.getCurrentInstance)(),
      $props = _getCurrentInstance4.appContext.config.globalProperties.$props;
    var _toRefs5 = (0, _vue.toRefs)($props),
      node = _toRefs5.node;
    // 收起节点的收起数量
    var shrinkNum = (0, _vue.computed)(function () {
      return node.value.meta.extParam.shrinkNum;
    });
    // 节点是否为展开收起
    var isOpen = (0, _vue.computed)(function () {
      return node.value.meta.extParam.isOpen;
    });
    // 是否为合并节点
    var isMergeNode = (0, _vue.computed)(function () {
      return node.value.meta.extParam.isMergeNode;
    });
    // 展开收起禁用
    var shrinkDisabled = (0, _vue.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 = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
        "class": (0, _classNames4.default)("".concat(prefixCls.value, "-shrink"), (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls.value, "-shrink__disabled"), shrinkDisabled.value), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls.value, "-shrink__collaspe"), !isOpen.value), (0, _defineProperty2.default)(_classNames3, "".concat(prefixCls.value, "-shrink__merge-collaspe"), isMergeNode.value && isOpen.value === false), _classNames3)),
        "onClick": (0, _vue.withModifiers)(nodeShrink, ['left', 'prevent', 'stop'])
      }, [isOpen.value ? (0, _vue.createVNode)(_icon.default, {
        "icon-class": "wd-icon-tips_minus_circle",
        "class": "".concat(prefixCls.value, "-shrink__icon")
      }, null) : (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls.value, "-shrink__expand")
      }, [shrinkNum.value > 99 ? (0, _vue.createVNode)(_icon.default, {
        "icon-class": "wd-icon-interactive_more",
        "class": "".concat(prefixCls.value, "-shrink__icon")
      }, null) : shrinkNum.value])])]);
      return (0, _vue.createVNode)(_vue.Fragment, null, [shrinkNode]);
    };
  }
});
exports.StgyGraphShrink = StgyGraphShrink;