cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/fabric-chart/src/fabric-chart/FabricLines.vue

@@ -1,546 +0,0 @@
-<template>
-  <div class="line">
-    <MouseRightClick v-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-    <DropPopup v-if="isDropVisible" :val="dropVal" :dropPos="dropPos" />
-  </div>
-</template>
-
-<script>
-import MouseRightClick from '../components/MouseRightClick';
-import FabricCommon from '../mixins/fabricCommon';
-import { isObject } from '../mixins/type';
-import DropPopup from '../components/DropPopup';
-import eventCommon from '../mixins/eventCommon';
-
-const rightClickNode = [
-  { name: '修改', type: 'edit' },
-  { name: '删除', type: 'delete' }
-];
-export default {
-  name: 'fabric-lines',
-  mixins: [FabricCommon, eventCommon],
-  props: {
-    linesObj: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      isRightVisible: false,
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      lines: [],
-      textMarginLeft: 5
-    };
-  },
-  computed: {
-    eventStyle() {
-      return this.linesObj?.eventStyle || { selectable: true, evented: true };
-    }
-  },
-
-  watch: {
-    // linesObj: {
-    //   handler(value) {
-    //     if (value) {
-    //       if (this.lines.length) {
-    //         this.removeLines();
-    //       }
-    //       this.getLineList(this.linesObj.list);
-    //       this.createLine();
-    //     }
-    //   },
-    //   deep: true
-    // },
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-
-  methods: {
-    init() {
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-      this.eventStyle.evented && this.createEvent();
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          const { originX, endX, endYTop } = this.$propItems();
-          if (!(x < originX || x > endX || y < 0 || y > endYTop)) {
-            this.activeEvent = event;
-            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-          }
-        }
-      });
-    },
-    /**
-     * 右键监听事件
-     */
-    addEventListenerContextmenu(event) {
-      event.preventDefault();
-      const x = event.offsetX;
-      const y = event.offsetY;
-      const { originX, endX, endYTop } = this.$propItems();
-      if (!(x < originX || x > endX || y < 0 || y > endYTop)) {
-        this.openRightModal(this.activeEvent);
-      }
-      return false;
-    },
-    // 打开右键菜单
-    openRightModal(event) {
-      this.rightPos = {
-        clientX: event.e.clientX || event.e.pageX,
-        clientY: event.e.clientY || event.e.pageY
-      };
-      this.isRightVisible = false;
-      const target = event.target;
-      const id = target ? target.id : '';
-      this.$nextTick(() => {
-        if (id && id.includes('_lineGroup_')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        }
-      });
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type }) {
-      this.isRightVisible = false;
-      const line = this._currentPoint;
-      this._currentPoint = '';
-      const { lineObj } = this.updateData(line, true);
-      // editLine:编辑 deleteLine:删除
-      this.$emit(`${type}Line`, lineObj);
-    },
-    // 递归返回一维数据
-    getLineList(list) {
-      list.forEach(item => {
-        if (item?.children?.length) {
-          this.getLineList(item.children);
-        } else {
-          const obj = JSON.parse(JSON.stringify(item));
-          this.lines.push(obj);
-        }
-      });
-    },
-    createLine() {
-      this.lines.forEach((line, i) => {
-        this.drawLineData(line, i);
-      });
-    },
-    drawLineData(line, i) {
-      const lineList = line.lineList || [];
-      const { originX, endX, xScaleList, yCellHeightTop } = this.propItems;
-      const spaceHeight = Math.round(yCellHeightTop / 6);
-      const minMinute = Math.min(...xScaleList);
-      const maxMinute = Math.max(...xScaleList);
-      const lineItemList = [];
-      const y1 = i * yCellHeightTop;
-      const y2 = yCellHeightTop * (i + 1);
-      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
-      const textList = [];
-      lineList.forEach((item, j) => {
-        if (!item[0] || isObject(item[0])) return;
-        const startMinute = new Date(item[0]).getTime();
-        const endMinute = item[1] ? new Date(item[1]).getTime() : '';
-        let x1 = this.cumputedX(item[0]);
-        let x2 = this.cumputedX(item[1]);
-        // 数字文字
-        const textObj = item[3] || {};
-        const textContent = textObj.content || '';
-
-        // 左边手柄竖线
-        let leftLine;
-        if (x1 && x1 >= originX && x1 <= endX) {
-          leftLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left' });
-          lineItemList.push(leftLine);
-        } else if (x1 < originX) {
-          x1 = originX;
-        } else {
-          x1 = endX;
-        }
-
-        if (item[1] && x2 > endX) {
-          x2 = endX;
-        }
-        if (item[1] && x2 < originX) {
-          x2 = originX;
-        }
-
-        // 中间横线
-        let centerLine;
-        if (item[1] && !(endMinute >= maxMinute && startMinute >= maxMinute) && !(endMinute <= minMinute && startMinute <= minMinute)) {
-          centerLine = this.drawLine([x1, y1 + yCellHeightTop / 2, x2, y1 + yCellHeightTop / 2], {
-            ...this.linesObj.dataLineStyle,
-            selectable: false,
-            evented: false,
-            id: '_lineGroup_' + new Date().getTime(),
-            rowIndex: i
-          });
-          lineItemList.push(centerLine);
-
-          // 添加透明矩形，便于选择横线右键删除
-          const centerRect = new this.fabric.Rect({
-            id: '_lineGroup_' + new Date().getTime(),
-            fill: 'transparent',
-            width: x2 - x1 - 20,
-            height: y2 - 2 * spaceHeight - y1,
-            left: x1 + (x2 - x1) / 2,
-            top: y1 + (y2 - y1) / 2,
-            selectable: true,
-            evented: true,
-            rowIndex: i,
-            colIndex: j,
-            originX: 'center',
-            originY: 'center'
-          });
-          centerRect.lockMovementX = centerRect.lockMovementY = true;
-          centerRect.hasControls = centerRect.hasBorders = false;
-          this.hoverEvent(centerRect, { textObj, startTime: item[0], endTime: item[1] });
-          lineItemList.push(centerRect);
-          leftLine && leftLine.bringToFront();
-        }
-
-        // 右边手柄竖线
-        let rightLine;
-        if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
-          rightLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right' });
-          lineItemList.push(rightLine);
-        }
-
-        // 文字内容
-        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
-        let textLimitRight;
-        let text =
-          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
-            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, x1, x2)
-            : null;
-        // 文字内容居右侧竖线且超出当前线段右边界则移除
-        if (text) {
-          textLimitRight = lineList[j + 1]?.[0] && this.cumputedX(lineList[j + 1][0]) <= endX ? this.cumputedX(lineList[j + 1][0]) : endX;
-          if (text.originX === 'left' && text.left + text.width + 2 >= textLimitRight) {
-            textLimitRight !== endX && textArr.push(textContent);
-            this.canvas.remove(text);
-            text = null;
-          } else {
-            textArr = [];
-            this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
-            textList.push(text);
-          }
-        }
-
-        // 设置拖动限制值
-        let leftLimit = {};
-        leftLimit.x2 = x2 ? x2 : endX;
-        leftLimit.x1 = originX;
-        if (lineList[j - 1]) {
-          const [preItem0, preItem1] = lineList[j - 1];
-          if (preItem1) {
-            const preEndMinute = new Date(preItem1).getTime();
-            if (preEndMinute >= minMinute && preEndMinute < maxMinute) leftLimit.x1 = this.cumputedX(preItem1);
-          } else {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute >= minMinute && preStartMinute < maxMinute) leftLimit.x1 = this.cumputedX(preItem0);
-          }
-        }
-        let rightLimt = {};
-        rightLimt.x1 = x2 ? x1 : originX;
-        rightLimt.x2 = endX;
-        if (lineList[j + 1]) {
-          const [preItem0] = lineList[j + 1];
-          if (preItem0) {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimt.x2 = this.cumputedX(preItem0);
-          }
-        }
-
-        this.lineEvent({
-          line: leftLine,
-          line1: centerLine,
-          text,
-          textObj,
-          limitX: leftLimit,
-          startTime: item[0],
-          endTime: item[1],
-          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
-          textLimitRight
-        });
-        this.lineEvent({ line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1], preText: null, textLimitRight: rightLimt.x2 });
-      });
-      this.canvas.add(...lineItemList, ...textList);
-      this.canvas.requestRenderAll();
-    },
-    drawLineText(textArr, top, i, j, centerLine, x1, x2) {
-      // const value = textArr.map(v => {
-      //   const channel = v.channel ? `(${v.channel})` : '';
-      //   const consistence = v.consistence ? `(${v.consistence})` : '';
-      //   const total = v.total ? `(${v.total})` : '';
-      //   return `${v.currentSpeed || ''}${channel}${consistence}${total}`
-      // }).join('—');
-      const value = textArr.filter(v => v !== '').join('—');
-
-      if (value === '') return null;
-      const text = new this.fabric.Text(value, {
-        top,
-        evented: true,
-        selectable: true,
-        lockMovementX: true,
-        lockMovementY: true,
-        backgroundColor: '#fff',
-        originY: 'center',
-        id: '_lineGroup_' + new Date().getTime(),
-        rowIndex: i,
-        colIndex: j,
-        ...(this.linesObj.dataTextStyle || {})
-      });
-      const limitWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
-      const originX = !centerLine || (x2 && x2 - x1 <= limitWidth) ? 'left' : 'center';
-      const left = x2 && x2 - x1 > limitWidth ? (x1 + x2) / 2 : this.textMarginLeft + (x2 && x2 - x1 <= limitWidth ? x2 : x1);
-      text.set({
-        originX,
-        left
-      });
-      text.hasControls = text.hasBorders = false;
-      return text;
-    },
-    /**
-     * @description: 画-|-样式的组
-     * @param {*} x1 // |-|中左侧线的x轴坐标
-     * @param {*} x2 // |-|中右侧线的x轴坐标
-     * @param {*} y1 // |-|中竖线的顶部y轴坐标
-     * @param {*} y2 // |-|中竖线的底部y轴坐标
-     * @param {*} position // 定位当前线是左侧线还是右侧线
-     * @return {*}
-     */
-
-    drawGroup(x1, x2, y1, y2, i, j, others) {
-      const id = '_lineGroup_' + Date.now();
-      let point;
-      let left;
-      if (others.position === 'left') {
-        point = [x1, y1, x1, y2];
-        left = x1 - this.propItems.xCellWidth / 2;
-      } else {
-        point = [x2, y1, x2, y2];
-        left = x2 - this.propItems.xCellWidth / 2;
-      }
-      const line = this.drawLine(point, {
-        ...this.linesObj.dataLineStyle,
-        selectable: false,
-        evented: false
-      });
-      const rect = new this.fabric.Rect({
-        width: this.propItems.xCellWidth,
-        height: y2 - y1,
-        fill: 'transparent',
-        left,
-        top: y1,
-        selectable: false,
-        evented: false
-      });
-
-      return new this.fabric.Group([line, rect], {
-        selectable: true,
-        evented: true,
-        originX: 'center',
-        originY: 'center',
-        id,
-        rowIndex: i,
-        colIndex: j,
-        ...this.eventStyle,
-        ...others,
-        lockMovementY: true // 锁定Y轴，即只能x轴方向移动
-      });
-    },
-    hoverEvent(point, attr) {
-      const { textObj, startTime, endTime } = attr;
-      startTime && (point.startTime = startTime);
-      endTime && (point.endTime = endTime);
-      textObj && (point.textObj = textObj);
-      point.on('mouseover', () => {
-        this.showDrapPopup(point);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-    },
-    lineEvent(attr) {
-      const { line, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight } = attr;
-      if (line) {
-        line.hasControls = line.hasBorders = false;
-        line1 && (line.line1 = line1);
-        line2 && (line.line2 = line2);
-        text && (line.text = text);
-        line.limitX = limitX;
-        preText && (line.preText = preText);
-        textLimitRight && (line.textLimitRight = textLimitRight);
-        this.hoverEvent(line, { textObj, startTime, endTime });
-        // 移动中 实时更新相关联的线的坐标
-        line.on('moving', () => {
-          this.lineMoveLimit(line);
-          this.lineMoveUpdateLine(line);
-          this.textUpdatePositionX(line);
-          this.canvas.renderAll();
-          this.showDrapPopup(line);
-        });
-        line.on('moved', () => {
-          // const objBoundingBox = line.getBoundingRect();
-          if (line && line.id.includes('_lineGroup_')) {
-            this.isDropVisible = false;
-            const { lineObj } = this.updateData(line);
-            this.updateLine(line.rowIndex);
-            this.$emit('lineChange', { ponits: { x: line.left, y: line.top }, value: lineObj });
-          }
-        });
-      }
-    },
-    showDrapPopup(line) {
-      this.isDropVisible = true;
-      const { yCellHeightTop } = this.propItems;
-      this.dropPos = {
-        left: line.left,
-        top: line.top,
-        margin: { top: yCellHeightTop / 2 }
-      };
-      let startTime, endTime, obj;
-      if (line.limitX) {
-        const { position } = line;
-        const { lineObj, x } = this.updateData(line);
-        obj = lineObj;
-        startTime = position === 'left' ? x : line.startTime || '';
-        endTime = position === 'left' ? line.endTime || '' : x;
-      } else {
-        obj = this.updateData(line, true).lineObj;
-        startTime = line.startTime || '';
-        endTime = line.endTime || '';
-      }
-      this.dropVal = {
-        title: obj.title || '',
-        list: [
-          { id: '1', name: '开始时间', value: startTime },
-          { id: '2', name: '结束时间', value: endTime },
-          { id: '3', name: '流速', value: line.textObj?.currentSpeed || '' },
-          { id: '4', name: '浓度', value: line.textObj?.consistence || '' },
-          { id: '5', name: '总量', value: line.textObj?.total || '' }
-        ]
-      };
-    },
-    // 移动手柄竖线后，需要更新this.lines，便于后面重新渲染时重新计算其左右限制坐标点
-    updateData(line, isHover) {
-      if (!line) return;
-      const { rowIndex, colIndex, position, left } = line;
-      const linesRow = this.lines[rowIndex];
-      // isHover，只是鼠标移上去显示提示信息而不需要重新计算x值
-      if (isHover) {
-        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex } };
-      }
-      const x = this.getXValue(left);
-      if (position === 'left') {
-        linesRow.lineList[colIndex][0] = x;
-      } else {
-        linesRow.lineList[colIndex][1] = x;
-      }
-      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x }, x };
-    },
-    // 直线数组更新后 移除旧的直线并绘制新的直线，处理拖动限制不能更新的问题
-    updateLine(rowIndex) {
-      this.canvas.forEachObject(obj => {
-        if (obj.rowIndex === rowIndex) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.drawLineData(this.lines[rowIndex], rowIndex);
-    },
-    // 移除头部表格所有线条数字数据
-    removeLines() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('_lineGroup_')) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.lines = [];
-    },
-    drawLine(lines, others) {
-      const line = new this.fabric.Line(lines, {
-        objectCaching: false,
-        ...others
-      });
-      return line;
-    },
-    lineMoveLimit(line) {
-      line.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
-      if (line.left < line.limitX.x1) {
-        line.set('left', line.limitX.x1);
-      }
-      if (line.left > line.limitX.x2) {
-        line.set('left', line.limitX.x2);
-      }
-    },
-    lineMoveUpdateLine(line) {
-      if (line.line1) {
-        line.line1.setCoords();
-        line.line1.set({ x1: line.left });
-      }
-      if (line.line2) {
-        line.line2.setCoords();
-        line.line2.set({ x2: line.left });
-      }
-    },
-    textUpdatePositionX(line) {
-      const text = line.text || null;
-      if (text) {
-        // 如果line2存在说明当前拖动的是右边手柄，line1存在则是左边手柄，都不存在说明不存在中间线
-        const centerLine = line.line1 || line.line2 || null;
-        const left = line.left;
-        const limitWidth = text.width + 2;
-        let originX = text.originX;
-        let v;
-        if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
-          v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
-          originX = 'center';
-        } else {
-          v = this.textMarginLeft + (centerLine ? centerLine.x2 : left);
-          originX = 'left';
-          // 移动到最右边界时候文字超出当前线段可拖动的右边界的情况
-          if (line.textLimitRight && v + limitWidth > line.textLimitRight) {
-            v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
-          }
-        }
-        text.setCoords();
-        text.set({ left: v, originX });
-      }
-      // 拖动左侧竖线时需要更改上一线段文字的位置，以防止文字被遮挡
-      const preText = line.preText || null;
-      if (!preText) return;
-      const limitWidth = preText.width + 2;
-      if (preText.originX === 'left' && preText.left + limitWidth > line.left) {
-        const v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
-        preText.setCoords();
-        preText.set({ left: v });
-      }
-    },
-    repaintLine() {
-      if (this.lines.length) {
-        this.removeLines();
-      }
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-    }
-  },
-  beforeDestroy() {}
-};
-</script>