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

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount,
// nextTick,
computed, ref, watch } from 'vue';
// import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import Dropdown from '../dropdown';
import Menu, { MenuItem } from '../menu';
import { OperationType } from './utils/types';
import Icon from '../icon';
import classNames from '../_util/classNames';
export 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
    }
  };
};
var StgyFlowLink = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'WdStgyFlowLink',
  props: linkProps(),
  // emits: ['handle-link-label'],
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('stgy-flow-line', props),
      prefixCls = _useConfigInject.prefixCls,
      configProvider = _useConfigInject.configProvider;
    var state = reactive({
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      currentPointList: [],
      currentPathPointList: null,
      label: {
        text: '添',
        top: null,
        left: null
        // right: null,
      },

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

    var _toRefs = 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 = 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 = ref();
    onMounted(function () {
      canvasCtx.value = canvasRef.value.getContext('2d');
      draw();
      // nextTick(() => {
      //   initDesc();
      // });
      graph.value.add('mousemove', rootMousemove);
      graph.value.add('mousedown', rootMousedown);
    });
    onBeforeUnmount(function () {
      graph.value.remove('mousemove', rootMousemove);
      graph.value.remove('mousedown', rootMousedown);
    });
    // 开始节点是否为合并节点
    var isMergeNodeStart = 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 = 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 = computed(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#FF9917' : '#e8a33c';
    });
    var defaultColor = computed(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#C7CBD6' : '#9094a9';
    });
    var dragColor = computed(function () {
      return (configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode) === 'light' ? '#2469F2' : '#3578fd';
    });
    var lineColor = 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 = computed(function () {
      return _extends({
        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 = 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 = computed(function () {
      // 取消合并后重置【添】状态
      return (
        // (!link.value.meta?.canAdd &&
        //   isNodeInMerge({
        //     nodeId: link.value.end.id,
        //     modelPathList: modelPathList.value,
        //     nodeList: nodeList.value,
        //   })) ||
        merge.value
      );
    });
    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, _toConsumableArray(point));
        } else {
          ctx.lineTo.apply(ctx, _toConsumableArray(point));
          ctx.stroke();
        }
      });
      ctx.save();
    };
    var initDesc = function initDesc() {
      var _currentPointList$val2;
      // 开始点的位置
      var _currentPointList$val = _slicedToArray(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, _toConsumableArray(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, _toConsumableArray(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 = _slicedToArray(_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: 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 = _createVNode(_Fragment, null, [_createVNode(Dropdown, {
          "trigger": 'click',
          "getPopupContainer": getMenuPopupContainer.value,
          "disabled": appendDisabled.value,
          "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, {
                    "key": menu.value
                  }, {
                    default: function _default() {
                      return [menu.name];
                    }
                  });
                })];
              }
            });
          },
          default: function _default() {
            var _classNames;
            return _createVNode("div", {
              "style": style,
              "class": classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "__label-box"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "__label-disabled"), appendDisabled.value), _classNames))
            }, [_createVNode("div", {
              "class": "".concat(prefixCls.value, "__label")
            }, [_createVNode(Icon, {
              "icon-class": "wd-icon-special_append"
            }, null)])]);
          }
        })]);
      }
      return _createVNode(_Fragment, null, [_createVNode("canvas", {
        "ref": canvasRef,
        "class": "".concat(prefixCls.value)
      }, null), addNode]);
    };
  }
});
export default StgyFlowLink;