wetrade-design/lib/stgy-flow/Link.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.linkProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _menu = _interopRequireWildcard(require("../menu"));
var _types = require("./utils/types");
var _icon = _interopRequireDefault(require("../icon"));
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
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; }
// import { withInstall } from '../_util/type';

var linkProps = function linkProps() {
  return {
    padding: {
      type: Number,
      default: 50 // 画布内的x起点
    },

    linkDesc: {
      type: Object,
      default: function _default() {}
    },
    linkStyle: {
      type: Object,
      default: function _default() {}
    },
    nodeList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    modelPathList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    linkBaseStyle: Object,
    index: Number,
    graph: Object,
    link: Object,
    merge: Boolean,
    selectedActiveId: Number,
    linkSelect: Function,
    // handleLabelClick: Function as PropType<(payload: MouseEvent) => void>,
    menus: Array,
    menuClick: Function,
    readonly: Boolean,
    lightenLinkIds: Array,
    getMenuPopupContainer: {
      type: Function
    }
  };
};
exports.linkProps = linkProps;
var StgyFlowLink = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyFlowLink',
  props: linkProps(),
  // emits: ['handle-link-label'],
  setup: function setup(props) {
    var _useConfigInject = (0, _useConfigInject2.default)('stgy-flow-line', props),
      prefixCls = _useConfigInject.prefixCls,
      configProvider = _useConfigInject.configProvider;
    var state = (0, _vue.reactive)({
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      currentPointList: [],
      currentPathPointList: null,
      label: {
        text: '添',
        top: null,
        left: null
        // right: null,
      },

      canvasCtx: null // 画布上下文
    });

    var _toRefs = (0, _vue.toRefs)(state),
      top = _toRefs.top,
      right = _toRefs.right,
      bottom = _toRefs.bottom,
      left = _toRefs.left,
      currentPointList = _toRefs.currentPointList,
      currentPathPointList = _toRefs.currentPathPointList,
      label = _toRefs.label,
      canvasCtx = _toRefs.canvasCtx;
    var _toRefs2 = (0, _vue.toRefs)(props),
      padding = _toRefs2.padding,
      linkBaseStyle = _toRefs2.linkBaseStyle,
      graph = _toRefs2.graph,
      link = _toRefs2.link,
      selectedActiveId = _toRefs2.selectedActiveId,
      menus = _toRefs2.menus,
      readonly = _toRefs2.readonly,
      getMenuPopupContainer = _toRefs2.getMenuPopupContainer,
      merge = _toRefs2.merge,
      nodeList = _toRefs2.nodeList;
    var canvasRef = (0, _vue.ref)();
    (0, _vue.onMounted)(function () {
      canvasCtx.value = canvasRef.value.getContext('2d');
      draw();
      // nextTick(() => {
      //   initDesc();
      // });
      graph.value.add('mousemove', rootMousemove);
      graph.value.add('mousedown', rootMousedown);
    });
    (0, _vue.onBeforeUnmount)(function () {
      graph.value.remove('mousemove', rootMousemove);
      graph.value.remove('mousedown', rootMousedown);
    });
    // 开始节点是否为合并节点
    var isMergeNodeStart = (0, _vue.computed)(function () {
      var _node$meta, _node$meta$extParam;
      var startId = link.value.start.id;
      var node = nodeList.value.find(function (node) {
        return node.id === startId;
      });
      return node === null || node === void 0 ? void 0 : (_node$meta = node.meta) === null || _node$meta === void 0 ? void 0 : (_node$meta$extParam = _node$meta.extParam) === null || _node$meta$extParam === void 0 ? void 0 : _node$meta$extParam.isMergeNode;
    });
    var isActive = (0, _vue.computed)(function () {
      var _link$value$meta, _link$value$meta2;
      return selectedActiveId.value !== -1 && selectedActiveId.value === ((_link$value$meta = link.value.meta) === null || _link$value$meta === void 0 ? void 0 : _link$value$meta.activeId) || ((_link$value$meta2 = link.value.meta) === null || _link$value$meta2 === void 0 ? void 0 : _link$value$meta2.isHighLight);
    });
    var activeColor = (0, _vue.computed)(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#FF9917' : '#e8a33c';
    });
    var defaultColor = (0, _vue.computed)(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#C7CBD6' : '#9094a9';
    });
    var dragColor = (0, _vue.computed)(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#2469F2' : '#3578fd';
    });
    var lineColor = (0, _vue.computed)(function () {
      var _link$value, _link$value$meta3;
      if ((_link$value = link.value) !== null && _link$value !== void 0 && (_link$value$meta3 = _link$value.meta) !== null && _link$value$meta3 !== void 0 && _link$value$meta3.isDragElement) {
        return dragColor.value;
      } else {
        return isActive.value ? activeColor.value : defaultColor.value;
      }
    });
    var styles = (0, _vue.computed)(function () {
      return (0, _extends2.default)({
        hover: '#FF0000',
        color: lineColor.value,
        textColor: '#666666',
        textHover: '#FF0000',
        font: '14px Arial',
        dotted: false,
        lineDash: [4, 4],
        background: 'rgba(255,255,255)'
      }, linkBaseStyle.value);
    });
    var inPath = (0, _vue.computed)({
      get: function get() {
        var _link$value2;
        return graph.value.mouseOnLink === ((_link$value2 = link.value) === null || _link$value2 === void 0 ? void 0 : _link$value2.id);
      },
      set: function set(bol) {
        // 鼠标移入线段
        if (bol && !graph.value.mouseonNode) {
          var _link$value3;
          // 鼠标移入线段 && 鼠标未移入节点
          // 标记
          graph.value.mouseOnLink = (_link$value3 = link.value) === null || _link$value3 === void 0 ? void 0 : _link$value3.id;
          // canvasRef.value.style.zIndex = '1';
        } else if (inPath.value) {
          graph.value.mouseOnLink = null;
          // canvasRef.value.style.zIndex = '0';
        }
      }
    });

    var appendDisabled = (0, _vue.computed)(function () {
      // 取消合并后重置【添】状态
      return (
        // (!link.value.meta?.canAdd &&
        //   isNodeInMerge({
        //     nodeId: link.value.end.id,
        //     modelPathList: modelPathList.value,
        //     nodeList: nodeList.value,
        //   })) ||
        merge.value
      );
    });
    (0, _vue.watch)(function () {
      return [isActive.value, configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode];
    }, function () {
      initLine();
    });
    // 获取设备像素比
    var devicePixelRatio = function devicePixelRatio() {
      if (typeof window == 'undefined') return 1;
      return window.devicePixelRatio || 1;
    };
    var draw = function draw() {
      var _link$value$pathPoint = link.value.pathPointList,
        pointList = _link$value$pathPoint.pointList,
        minX = _link$value$pathPoint.minX,
        minY = _link$value$pathPoint.minY,
        maxX = _link$value$pathPoint.maxX,
        maxY = _link$value$pathPoint.maxY;
      currentPathPointList.value = link.value.pathPointList;
      top.value = minY - padding.value;
      right.value = maxX + padding.value;
      bottom.value = maxY + padding.value;
      left.value = minX - padding.value;
      var offset = 0.5;
      currentPointList.value = pointList.map(function (point) {
        return [Math.floor(point[0] - left.value) + offset, Math.floor(point[1] - top.value) + offset];
      });
      changeStyle();
      initLine();
      changeCanvaszIndex();
    };
    // 修改画布层级
    var changeCanvaszIndex = function changeCanvaszIndex() {
      var _link$value4, _link$value4$meta;
      if ((_link$value4 = link.value) !== null && _link$value4 !== void 0 && (_link$value4$meta = _link$value4.meta) !== null && _link$value4$meta !== void 0 && _link$value4$meta.isHighLight) {
        canvasRef.value.style.zIndex = '1';
      } else {
        canvasRef.value.style.zIndex = '0';
      }
    };
    var changeStyle = function changeStyle() {
      var dpr = devicePixelRatio();
      canvasRef.value.width = (right.value - left.value) * dpr;
      canvasRef.value.height = (bottom.value - top.value) * dpr;
      canvasRef.value.style.width = right.value - left.value + 'px';
      canvasRef.value.style.height = bottom.value - top.value + 'px';
      canvasRef.value.style.top = top.value + 'px';
      canvasRef.value.style.left = left.value + 'px';
      canvasCtx.value.scale(dpr, dpr);
    };
    var initLine = function initLine() {
      var ctx = canvasCtx.value;
      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
      var color = styles.value.color;
      drawLine(color);
      drawArrow(color);
      initDesc();
    };
    var drawLine = function drawLine(strokeStyle) {
      var lineWidth = 1;
      var ctx = canvasCtx.value;
      ctx.beginPath();
      if (styles.value.dotted) {
        ctx.setLineDash(styles.value.lineDash);
      }
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = strokeStyle;
      currentPointList.value.forEach(function (point, idx) {
        if (idx === 0) {
          ctx.moveTo.apply(ctx, (0, _toConsumableArray2.default)(point));
        } else {
          ctx.lineTo.apply(ctx, (0, _toConsumableArray2.default)(point));
          ctx.stroke();
        }
      });
      ctx.save();
    };
    var initDesc = function initDesc() {
      var _currentPointList$val2;
      // 开始点的位置
      var _currentPointList$val = (0, _slicedToArray2.default)(currentPointList.value[currentPointList.value.length - 2], 1),
        startX = _currentPointList$val[0];
      // 结束点的位置
      var y = (_currentPointList$val2 = currentPointList.value[currentPointList.value.length - 1]) === null || _currentPointList$val2 === void 0 ? void 0 : _currentPointList$val2[1];
      var distance = 8;
      label.value.top = top.value + y + 'px';
      label.value.left = left.value + startX + distance + 'px';
    };
    var drawArrow = function drawArrow(fillStyle) {
      var _link$value5, _link$value5$meta;
      var size = 4;
      var len = currentPointList.value.length;
      if (len < 2) return;
      var start = currentPointList.value[0];
      var end = currentPointList.value[len - 1];
      var ctx = canvasCtx.value;
      if (((_link$value5 = link.value) === null || _link$value5 === void 0 ? void 0 : (_link$value5$meta = _link$value5.meta) === null || _link$value5$meta === void 0 ? void 0 : _link$value5$meta.activeId) === -1) {
        // 移动中心点
        ctx.translate.apply(ctx, (0, _toConsumableArray2.default)(end));
        ctx.beginPath();
        ctx.arc(-size + 0.5, 0, 3, 0, Math.PI * 2, true);
        ctx.fillStyle = fillStyle;
        ctx.fill();
        ctx.restore();
        ctx.save();
      }
      if (isMergeNodeStart.value) return;
      ctx.translate.apply(ctx, (0, _toConsumableArray2.default)(start));
      ctx.beginPath();
      ctx.arc(size / 2 + 0.5, 0, 3, 0, Math.PI * 2, true);
      ctx.fillStyle = fillStyle;
      ctx.fill();
      ctx.restore();
    };
    var getCoordinates = function getCoordinates(evt) {
      // 鼠标的 x轴 y轴 坐标
      var clientX = evt.clientX,
        clientY = evt.clientY;
      // link 所在的top left
      var _canvasRef$value$getB = canvasRef.value.getBoundingClientRect(),
        top = _canvasRef$value$getB.top,
        left = _canvasRef$value$getB.left;
      // 鼠标x - left值；鼠标y - top值
      return [clientX - left, clientY - top];
    };
    var isPointInStroke = function isPointInStroke(evt) {
      if (evt.target !== canvasRef.value) return false;
      var _getCoordinates = getCoordinates(evt),
        _getCoordinates2 = (0, _slicedToArray2.default)(_getCoordinates, 2),
        x = _getCoordinates2[0],
        y = _getCoordinates2[1];
      return link.value.isPointInLink([left.value + x, top.value + y], currentPathPointList.value);
    };
    var rootMousemove = function rootMousemove(_ref) {
      var evt = _ref.evt;
      inPath.value = isPointInStroke(evt);
      // return inPath.value;
    };

    var rootMousedown = function rootMousedown() {
      var _link$value6, _link$value6$meta, _link$value7, _link$value7$meta;
      // inPath.value = isPointInStroke(evt);
      // return inPath.value;
      var activeId = (_link$value6 = link.value) === null || _link$value6 === void 0 ? void 0 : (_link$value6$meta = _link$value6.meta) === null || _link$value6$meta === void 0 ? void 0 : _link$value6$meta.activeId;
      if (inPath.value && ((_link$value7 = link.value) === null || _link$value7 === void 0 ? void 0 : (_link$value7$meta = _link$value7.meta) === null || _link$value7$meta === void 0 ? void 0 : _link$value7$meta.activeId) !== -1 && !merge.value) {
        props.linkSelect(activeId);
      }
    };
    var handleMenuClick = function handleMenuClick(key) {
      props.menuClick({
        type: _types.OperationType.APPEND,
        key: key,
        link: link.value
      });
    };
    return function () {
      var _link$value$meta4, _link$value$meta5;
      // 添加节点
      var addNode = null;
      if (((_link$value$meta4 = link.value.meta) === null || _link$value$meta4 === void 0 ? void 0 : _link$value$meta4.activeId) === -1 && !readonly.value && !((_link$value$meta5 = link.value.meta) !== null && _link$value$meta5 !== void 0 && _link$value$meta5.isDragElement)) {
        var style = {
          top: label.value.top,
          // right: label.value.right,
          left: label.value.left
        };
        addNode = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_dropdown.default, {
          "trigger": 'click',
          "getPopupContainer": getMenuPopupContainer.value,
          "disabled": appendDisabled.value,
          "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, {
                    "key": menu.value
                  }, {
                    default: function _default() {
                      return [menu.name];
                    }
                  });
                })];
              }
            });
          },
          default: function _default() {
            var _classNames;
            return (0, _vue.createVNode)("div", {
              "style": style,
              "class": (0, _classNames2.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "__label-box"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "__label-disabled"), appendDisabled.value), _classNames))
            }, [(0, _vue.createVNode)("div", {
              "class": "".concat(prefixCls.value, "__label")
            }, [(0, _vue.createVNode)(_icon.default, {
              "icon-class": "wd-icon-special_append"
            }, null)])]);
          }
        })]);
      }
      return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("canvas", {
        "ref": canvasRef,
        "class": "".concat(prefixCls.value)
      }, null), addNode]);
    };
  }
});
var _default2 = StgyFlowLink;
exports.default = _default2;