cnhis-design-vue 2.1.100 → 2.1.101

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

@@ -152,12 +152,7 @@ export default {
       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);
+      this.$emit(`${type}Other`, this.getOtherParams(text, false));
     },
     removeOther() {
       this.canvas.forEachObject(obj => {
@@ -232,11 +227,13 @@ export default {
       }
     },
     drawTextDataGroupColList(colList) {
-      const { originY } = this.propItems;
+      const { originY, endX } = this.propItems;
       let textList = [];
       colList.forEach((item, index) => {
         const baseTop = originY + (item.marginTop || 10);
         if (this.isLimit(item.scalevalue)) {
+          const textItemPoints = [];
+          const left = this.cumputedX(item.scalevalue);
           item.dataList.forEach((v, i) => {
             const top = baseTop + i * (item.lineHeight || 15);
             const text = new this.fabric.Text(String(v.value), {
@@ -245,9 +242,8 @@ export default {
               ...item.style,
               originX: 'left',
               originY: 'center',
-              left: this.cumputedX(item.scalevalue),
+              left,
               top,
-              lockMovementX: true,
               lockMovementY: true,
               dataIndex: index,
               index: i,
@@ -255,12 +251,23 @@ export default {
               id: `${index}_${i}_other_${Date.now()}`,
               name: v.value,
               objectCaching: false,
+              origin: {
+                time: item.scalevalue,
+                ...v
+              },
               ...this.eventStyle
             });
-            text.hasControls = text.hasBorders = false;
-            this.setPopup(text);
+            textItemPoints.push(text);
+            this.pointOtherEvent(text);
             textList.push(text);
           });
+          const maxTextWidth = Math.max(...textItemPoints.map(obj => obj.width));
+          const isOverstep = left > endX - maxTextWidth;
+          textItemPoints.forEach((point, _, arr) => {
+            point.maxTextWidth = maxTextWidth;
+            point.siblingPoints = arr.filter(_point => _point.index !== point.index);
+            if (isOverstep) point.setCoords().set('originX', 'right');
+          });
         }
       });
       this.canvas.add(...textList);
@@ -296,6 +303,7 @@ export default {
         this.setMovingEvent(title, originOptions);
         textList.push(title);
         const { icon: _icon = { type: 'circle' }, dataList } = item || {};
+        let prevPoint;
         for (let i = 0, len = dataList.length; i < len; i++) {
           const v = dataList[i];
           if (this.isLimit(v.time)) {
@@ -305,7 +313,8 @@ export default {
               dataIndex: index,
               index: i,
               type: 'list',
-              objectCaching: false
+              objectCaching: false,
+              origin: v
             };
             const left = this.cumputedX(v.time);
             title.dataList.push(left);
@@ -327,20 +336,33 @@ export default {
             });
             const groupObj = new this.fabric.Group([icon, text], {
               id: `${index}_${i}_other_${Date.now()}`,
-              lockMovementX: true,
               lockMovementY: true,
               ...commonOptions,
               ...this.eventStyle,
-              realLeft: left
+              realLeft: left,
+              iconHalfWidth: icon.width / 2
             });
-            groupObj.hasControls = groupObj.hasBorders = false;
-            this.setPopup(groupObj);
+            if (prevPoint) {
+              prevPoint.nextPoint = groupObj;
+              groupObj.prevPoint = prevPoint;
+            }
+            prevPoint = groupObj;
+            this.pointOtherEvent(groupObj);
             textList.push(groupObj);
           }
         }
       }
       this.canvas.add(...textList);
     },
+    emitMouseoverTarget(point) {
+      if (point) {
+        Bus.$emit('mouseoverTarget', true);
+        this.showDrapPopup(point, true);
+      } else {
+        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+        this.isDropVisible = false;
+      }
+    },
     setMovingEvent(point) {
       const { originX, originY, endX, endY } = this.propItems;
       const isLimit = () => point.left >= originX && point.left <= endX && point.top >= originY && point.top <= endY;
@@ -355,11 +377,9 @@ export default {
             point.isClone = true;
           });
         if (isLimit()) {
-          Bus.$emit('mouseoverTarget', true);
-          this.showDrapPopup(point, true);
+          this.emitMouseoverTarget(point);
         } else {
-          !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-          this.isDropVisible = false;
+          this.emitMouseoverTarget();
         }
       });
       point.on('moved', () => {
@@ -367,35 +387,60 @@ export default {
         point.isClone = false;
         this.removeOther();
         this.drawTextDataGroup(this.templateData.other);
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
+        this.emitMouseoverTarget();
         if (isLimit()) {
-          const { type, dataIndex, left, dataList } = point;
-          const time = this.getXValue(left);
+          const { left, dataList } = point;
           const index = dataList.findIndex(_left => _left > left);
           // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
           setTimeout(() => {
-            this.$emit('addOhter', {
-              type,
-              dataIndex,
-              index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index,
-              data: {
-                time
-              }
-            });
+            this.$emit('addOhter', { ...this.getOtherParams(point), index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index });
           });
         }
       });
     },
+    pointOtherEvent(point) {
+      point.hasControls = point.hasBorders = false;
+      this.setPopup(point);
+      // 移动中 实时更新相关联的线的坐标
+      if (this.eventStyle.evented) {
+        const { endX, originX } = this.propItems;
+        point.on('moving', () => {
+          point.setCoords();
+          const { prevPoint, nextPoint } = point;
+          const limitLeft = prevPoint?.left || originX;
+          const limitRight = nextPoint?.left || endX;
+          if (point.left > limitRight) point.set('left', limitRight);
+          if (point.left < limitLeft) point.set('left', limitLeft);
+          if (point.realLeft && point.iconHalfWidth) point.realLeft = point.left + point.iconHalfWidth;
+          if (point.maxTextWidth) {
+            const isOverstep = point.left + point.maxTextWidth > limitRight;
+            const originX = isOverstep ? 'right' : 'left';
+            point.setCoords().set({ originX });
+            point.siblingPoints.forEach(_point => _point.setCoords().set({ originX, left: point.left }));
+          }
+          this.showDrapPopup(point);
+        });
+        point.on('moved', () => {
+          this.isDropVisible = false;
+          this.$emit('otherChange', this.getOtherParams(point));
+        });
+      }
+    },
+    getOtherParams(point, isChange = true) {
+      const { type, dataIndex, left, realLeft, origin, index } = point;
+      return {
+        type,
+        dataIndex,
+        index,
+        data: {
+          ...origin,
+          ...(isChange ? { time: this.getXValue(realLeft ?? left) } : {})
+        }
+      };
+    },
     setPopup(point) {
-      point.on('mouseover', () => {
-        Bus.$emit('mouseoverTarget', true);
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
-      });
+      point.on('mouseover', () => this.emitMouseoverTarget(point));
+      point.on('mouseout', () => this.emitMouseoverTarget());
     },
     // 判断当前时间是否超出网格区域
     isLimit(value) {
@@ -653,8 +698,5 @@ export default {
       }
     }
   }
-  // render(h) {
-  //   return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  // }
 };
 </script>

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

@@ -150,7 +150,7 @@ export default {
       return new this.fabric.Circle({
         objectCaching: false,
         strokeWidth: 1,
-        radius: data.width / 2,
+        radius: data.width ? data.width / 2 : data.radius,
         scale: 1,
         fill: '#fff',
         ...data