cnhis-design-vue 0.1.32 → 0.1.36

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

@@ -1,5 +1,6 @@
 <template>
   <div class="text-group">
+    <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>
@@ -9,42 +10,52 @@ import fabricCommon from '../mixins/fabricCommon';
 import draw from '../mixins/draw';
 import defaultVaule from '../const/defaultVaule';
 import DropPopup from '../components/DropPopup';
+import MouseRightClick from '../components/MouseRightClick';
+import polylineCommon from '../mixins/polylineCommon';
 
+const rightClickNode = [
+  { name: '修改', type: 'edit' },
+  { name: '删除', type: 'delete' }
+];
 export default {
   name: 'fabric-text-group',
   components: {
-    DropPopup
+    DropPopup,
+    MouseRightClick
   },
-  mixins: [fabricCommon, draw],
+  mixins: [fabricCommon, draw, polylineCommon],
   props: {
     templateData: {
       type: Object,
       required: true
     },
-    // bottom: {
-    //   type: Object,
-    //   default: () => {}
-    // }
+    other: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    other: {
+      handler(value) {
+        if (value) {
+          this.removeOther();
+          this.drawTextDataGroup(value);
+          this.canvas.renderAll();
+        }
+      },
+      deep: true
+    }
   },
-  // watch: {
-  //   bottom: {
-  //     handler(value) {
-  //       if (value) {
-  //         if (value) {
-  //           this.removeMark();
-  //           this.drawBottomTextDataGroup(value);
-  //         }
-  //       }
-  //     },
-  //     deep: true
-  //   }
-  // },
   data() {
     return {
       leftStartX: 0,
       isDropVisible: false,
       dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 }
+      dropPos: { clientX: 0, clientY: 0 },
+      isRightVisible: false,
+      rightPos: { clientX: 0, clientY: 0 },
+      rightClickNode: [],
+      activeEvent: null, // 当前可右键活动的对象
     };
   },
   mounted() {
@@ -69,13 +80,64 @@ export default {
       // 左侧边框线
       this.canvas.add(this.drawLine([0, 0, 0, this.propItems.canvasHeight], { ...this.girdLineStyle }));
 
-      this.topTreeTextGroup(this.propItems.treeList);
-      this.drawLeftScaleGroup(this.templateData);
-      this.drawTextDataGroup(this.templateData.other);
-      this.drawBottomTextDataGroup(this.templateData.bottom);
-
+      this.propItems.treeList.length > 0 && this.topTreeTextGroup(this.propItems.treeList);
+      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
+      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
+      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
+      this.createEvent();
       this.canvas.renderAll();
     },
+    createEvent() {
+      this.canvas.on('mouse:up', event => {
+        if (event.button === 3) {
+          const { x, y } = event.pointer;
+          const { originX, originY, endX, endY } = this.$propItems();
+          if (!(x < originX || x > endX || y < originY || y > endY)) {
+            this.activeEvent = event;
+            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+          }
+        }
+      });
+    },
+    // 打开右键菜单
+    openRightModal(event) {
+      if (!this.propItems.eventStyle.evented) {
+        return;
+      }
+      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('_other')) {
+          this._currentPoint = target || '';
+          this.rightClickNode = Object.freeze(rightClickNode.slice());
+          this.isRightVisible = true;
+        }
+      });
+    },
+    // 关闭右键菜单，打开添加节点弹窗表单
+    handleRightClick({ type }) {
+      this.isRightVisible = false;
+      const text = this._currentPoint;
+      this._currentPoint = '';
+      const obj = {
+        type: text.type,
+        index: text.index,
+        dataIndex: text.dataIndex
+      }
+      this.$emit(`${type}Other`, obj);
+    },
+    removeOther() {
+      this.canvas.forEachObject(obj => {
+        if (obj.id && obj.id.includes('_other')) {
+          this.canvas.remove(obj);
+        }
+      });
+    },
     topTreeTextGroup(list) {
       list.forEach(item => {
         if (item.children && Array.isArray(item.children) && item.children.length > 0) {
@@ -106,21 +168,30 @@ export default {
       }
     },
     drawTextDataGroupColList(colList) {
+      const { originY, eventStyle } = this.propItems;
       let textList = [];
       colList.forEach((item, index) => {
-        const baseTop = this.propItems.originY + (item.marginTop || 10);
+        const baseTop = originY + (item.marginTop || 10);
         if (this.isLimit(item.scalevalue)) {
           item.dataList.forEach((v, i) => {
             const top = baseTop + i * (item.lineHeight || 15);
-            const text = new this.fabric.Text(String(v), {
+            const text = new this.fabric.Text(String(v.value), {
               ...defaultVaule.style,
               ...defaultVaule.textStyle,
               ...item.style,
               originX: 'left',
               originY: 'center',
               left: this.cumputedX(item.scalevalue),
-              top
+              top,
+              lockMovementX: true,
+              lockMovementY: true,
+              dataIndex: index,
+              index: i,
+              type: 'colList',
+              id: `${index}_${i}_other_${Date.now()}`,
+              ...eventStyle
             });
+            text.hasControls = text.hasBorders = false;
             textList.push(text);
           });
         }
@@ -129,13 +200,13 @@ export default {
     },
     drawTextDataGroupList(list) {
       let textList = [];
-      const { originX, originY } = this.propItems;
+      const { originX, originY, eventStyle } = this.propItems;
       let top = originY + 10;
-      list.forEach((item, i) => {
+      list.forEach((item, index) => {
         const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || 3;
         const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
         
-        if (list[i - 1]) {
+        if (list[index - 1]) {
           top += item.lineHeight || 15;
         }
 
@@ -146,20 +217,29 @@ export default {
           originX: 'right',
           originY: 'center',
           left,
-          top
+          top,
+          id: `${index}_other_${Date.now()}`,
         });
         textList.push(title);
-        item.dataList.forEach(v => {
-          if (this.isLimit(v[0])) {
-            const text = new this.fabric.Text(String(v[1]), {
+        item.dataList.forEach((v, i) => {
+          if (this.isLimit(v.time)) {
+            const text = new this.fabric.Text(String(v.value), {
               ...defaultVaule.style,
               ...defaultVaule.textStyle,
               ...item.style,
               originX: 'center',
               originY: 'center',
-              left: this.cumputedX(v[0]),
-              top
+              left: this.cumputedX(v.time),
+              top,
+              lockMovementX: true,
+              lockMovementY: true,
+              dataIndex: index,
+              index: i,
+              type: 'list',
+              id: `${index}_${i}_other_${Date.now()}`,
+              ...eventStyle
             });
+            text.hasControls = text.hasBorders = false;
             textList.push(text);
           }
         });
@@ -187,7 +267,7 @@ export default {
         return;
       }
       const { originX, endY, canvasHeight, eventStyle } = this.propItems;
-      let textList = [];
+      const textList = [];
       const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || 3;
       const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
       const title = new this.fabric.Text(String(obj.title), {
@@ -195,38 +275,48 @@ export default {
         ...defaultVaule.textStyle,
         ...obj.style,
         originX: 'right',
-        originY: 'bottom',
+        originY: 'center',
         left,
-        top: canvasHeight - 20,
+        top: endY + (canvasHeight - endY) / 2,
         type: 'mark'
       });
       textList.push(title);
-      const baseY = endY + 10; // 目前固定10像素的下边距
-      const baseYLimit = endY - 10; // 目前固定10像素的上边距
+      const baseY = endY + 2; // 目前固定10像素的下边距
+      const baseYLimit = endY - 2; // 目前固定10像素的上边距
+      const lineHeight = (obj.iconStyle?.height && obj.iconStyle.height + 2) || 14; // 标志点的line-height值
       obj.list.forEach((item, index) => {
-        let limitIndex = -1;
+        let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
+        let y = baseY;
         const x = this.cumputedX(item[0]);
         if (this.isLimit(item[0])) {
           item[1].forEach(async (v, i) => {
-            let y = baseY + i * 14; // 目前固定14像素的line-height
-            if (y + 7 > endY + obj.height) {
-              limitIndex++;
-              y = baseYLimit - limitIndex * 14;
+            if (!~limitIndex) {
+              y += i === 0 ? lineHeight / 2 : lineHeight;
+              if (y >= canvasHeight - lineHeight / 2) {
+                limitIndex++;
+                if (limitIndex === 0) {
+                  y = baseYLimit;
+                  y -= lineHeight / 2;
+                }
+              }
+            } else {
+              y -= lineHeight;
             }
+            const common = {
+              left: x,
+              top: y,
+              originX: 'center',
+              originY: 'center',
+              data: v.data || {},
+              other: v.other || {},
+              time: item[0],
+              name: v.name,
+              type: 'mark',
+            };
             if (this.isObject(v) && !v.value) {
               const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
                 ...defaultVaule.style,
-                left: x,
-                top: y,
-                originX: 'center',
-                // lockMovementY: true, // 锁定Y轴，即只能x轴方向移动
-                data: v.data || {},
-                other: v.other || {},
-                time: item[0],
-                name: v.name,
-                // listIndex: index,
-                // index: i,
-                type: 'mark',
+                ...common,
                 ...eventStyle
               });
               let ele;
@@ -245,17 +335,7 @@ export default {
               const text = new this.fabric.Text(String(v.value), {
                 ...defaultVaule.textStyle,
                 ...obj.style,
-                originX: 'center',
-                left: x,
-                top: y,
-                // lockMovementY: true, // 锁定Y轴，即只能x轴方向移动
-                time: item[0],
-                name: v.name,
-                data: v.data || {},
-                other: v.other || {},
-                // listIndex: index,
-                // index: i,
-                type: 'mark',
+                ...common,
                 ...eventStyle
               });
               text.hasControls = text.hasBorders = false;
@@ -286,8 +366,6 @@ export default {
           data: point.data,
           oldVal: point.time,
           newVal: this.getXValue(point.left),
-          // listIndex: point.listIndex,
-          // index: point.index
         };
         this.$emit('markChange', value);
       });
@@ -338,7 +416,6 @@ export default {
       if (point.top < originY) {
         point.set('top', originY);
       }
-      point.setCoords();
     },
     showDrapPopup(point) {
       // 第二个参数表示需要展示提供的viewTime时间
@@ -354,13 +431,13 @@ export default {
       };
     },
 
-    drawLeftScaleGroup(templateData) {
-      this.drawLeftTitle(templateData);
-      const { canvasHeight, originX, originY } = this.propItems;
+    drawLeftScaleGroup(dataLeft) {
+      this.drawLeftTitle(dataLeft);
+      const { canvasHeight, originX, originY, treeTableminCellWidth } = this.propItems;
       let rect = new this.fabric.Rect({
-        left: templateData.top.treeTableminCellWidth,
+        left: treeTableminCellWidth,
         top: originY,
-        width: originX - templateData.top.treeTableminCellWidth,
+        width: originX - treeTableminCellWidth,
         height: canvasHeight - originY,
         ...defaultVaule.rectStyle,
         ...defaultVaule.style,
@@ -370,12 +447,12 @@ export default {
       rect.sendToBack(); // 向下跳底层
       this.canvas.add(rect);
     },
-    drawLeftTitle(templateData) {
-      if (templateData.left.title) {
+    drawLeftTitle(dataLeft) {
+      if (dataLeft.title) {
         this.canvas.add(
           this.drawTextGroup(
-            { width: templateData.top.treeTableminCellWidth, height: this.propItems.canvasHeight - this.propItems.originY },
-            { text: String(templateData.left.title.split('').join('\n')), ...defaultVaule.textStyle, ...templateData.left.titleStyle },
+            { width: this.propItems.treeTableminCellWidth, height: this.propItems.canvasHeight - this.propItems.originY },
+            { text: String(dataLeft.title.split('').join('\n')), ...defaultVaule.textStyle, ...dataLeft.titleStyle },
             { left: 0, top: this.propItems.originY }
           )
         );

package/packages/fabric-chart/src/mixins/fabricCommon.js

@@ -41,11 +41,10 @@ export default {
       } else if (left === originX) {
         time = xScaleList[0];
       } else {
-        const index = xScaleCellList.findIndex(v => v.x >= left);
-        if (index > -1) {
-          const obj = xScaleCellList[index - 1];
-          time = obj.time + (left - obj.x) * obj.xScaleTime;
-        }
+        let index = xScaleCellList.findIndex(v => v.x >= left);
+        !~index && (index = xScaleCellList.length);
+        const obj = xScaleCellList[index - 1];
+        time = obj.time + (left - obj.x) * obj.xScaleTime;
       }
       let d = new Date(time);
       const month = `00${d.getMonth() + 1}`.slice(-2);

package/packages/fabric-chart/src/mixins/polylineCommon.js

@@ -12,7 +12,7 @@ export default {
   methods: {
     // 折线点移动限制 目前仅限制不能移动出画布
     pointMoveLimit(point) {
-      point.setCoords();
+      point.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
       // const objBoundingBox = point.getBoundingRect(); // 此方式会导致结果不精准，应该用point的top值判断
       const leftLimit = point.prevPoint ? point.prevPoint.get('left') : this.propItems.originX;
       const rightLimit = point.nextPoint ? point.nextPoint.get('left') : this.propItems.endX;
@@ -28,7 +28,9 @@ export default {
       if (point.left > rightLimit) {
         point.set('left', rightLimit);
       }
-      point.setCoords();
+    },
+    getContainer() {
+      return this.$el;
     },
     /**
      * 右键监听事件