Merge pull request #1226 from VisActor/fix/marker-position-and-ref

Fix/marker position and ref

common/changes/@visactor/vrender-components/fix-marker-position-and-ref_2024-05-26-09-16.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix(marker): fix marker position and ref bad case. fix@visactor/vchart#2721",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

packages/vrender-components/__tests__/browser/examples/mark-line.ts

@@ -120,6 +120,12 @@ export function run() {
       refY: guiObject.labelRefY,
       refAngle: degreeToRadian(guiObject.labelRefAngle)
     },
+    limitRect: {
+      x: 180,
+      y: 250,
+      width: 30,
+      height: 3000
+    },
     clipInRange: false,
     interactive: true
     // limitRect: {
@@ -136,7 +142,7 @@ export function run() {
         y: 350
       },
       {
-        x: 200,
+        x: 300,
         y: 250
       }
     ],
@@ -204,12 +210,20 @@ export function run() {
   gui
     .add(guiObject, 'labelPos', [
       'start',
-      'middle',
-      'end',
+      'startTop',
+      'startBottom',
+      'insideStart',
       'insideStartTop',
       'insideStartBottom',
+
+      'middle',
       'insideMiddleTop',
       'insideMiddleBottom',
+
+      'end',
+      'endTop',
+      'endBottom',
+      'insideEnd',
       'insideEndTop',
       'insideEndBottom'
     ])

packages/vrender-components/__tests__/browser/examples/mark-point.ts

@@ -16,15 +16,22 @@ export function run() {
     itemLineVisible: true,
     // itemType: 'text',
     itemPos: 'middle',
-    itemOffsetX: 100,
-    itemOffsetY: 100,
+    // itemOffsetX: 100,
+    // itemOffsetY: 100,
+    offsetLen: 150,
+    angleOfOffset: 0,
     itemAutoRotate: false,
     itemRefX: 10,
     itemRefY: 0,
     itemRefAngle: 0,
     decorativeLineVisible: false,
     visible: true,
-    arcRatio: 0.8
+    arcRatio: 0.8,
+    startSymbolRefX: 30,
+    startSymbolRefY: 0,
+    endSymbolRefX: 30,
+    endSymbolRefY: 0,
+    targetSymbolOffset: 0
   };
 
   const styleAttr = {
@@ -112,13 +119,17 @@ export function run() {
         visible: guiObject.decorativeLineVisible
       },
       startSymbol: {
-        visible: true,
-        symbolType: 'triangle'
+        visible: false,
+        symbolType: 'triangle',
+        refX: guiObject.startSymbolRefX,
+        refY: guiObject.startSymbolRefY
       },
       endSymbol: {
-        visible: true,
+        visible: false,
         symbolType: 'triangle',
         size: 10,
+        refX: guiObject.endSymbolRefX,
+        refY: guiObject.endSymbolRefY,
         style: {
           fill: 'blue'
         }
@@ -131,8 +142,8 @@ export function run() {
       }
     },
     itemContent: {
-      offsetX: guiObject.itemOffsetX,
-      offsetY: guiObject.itemOffsetY,
+      offsetX: Math.cos((guiObject.angleOfOffset / 180) * Math.PI) * guiObject.offsetLen,
+      offsetY: Math.sin((guiObject.angleOfOffset / 180) * Math.PI) * guiObject.offsetLen,
       refX: guiObject.itemRefX,
       refY: guiObject.itemRefY,
       refAngle: guiObject.itemRefAngle,
@@ -221,7 +232,7 @@ export function run() {
     },
     targetSymbol: {
       visible: true,
-      offset: 10
+      offset: guiObject.targetSymbolOffset
       // style: {
       //   size: 30,
       //   // fill: 'red',
@@ -254,8 +265,8 @@ export function run() {
 
   const markPoint2 = new MarkPoint({
     position: {
-      x: 200,
-      y: 200
+      x: 250,
+      y: 250
     },
     ...(styleAttr as any),
     itemContent: {
@@ -329,22 +340,40 @@ export function run() {
     markPoints.forEach(markPoint => markPoint.setAttribute('visible', value, true));
   });
 
-  gui.add(guiObject, 'itemOffsetX').onChange(value => {
+  // gui.add(guiObject, 'itemOffsetX').onChange(value => {
+  //   markPoints.forEach(markPoint =>
+  //     markPoint.setAttribute('itemContent', {
+  //       offsetX: value
+  //     })
+  //   );
+  //   console.log('markpoints', markPoints);
+  // });
+
+  // gui.add(guiObject, 'itemOffsetY').onChange(value => {
+  //   markPoints.forEach(markPoint =>
+  //     markPoint.setAttribute('itemContent', {
+  //       offsetY: value
+  //     })
+  //   );
+  //   console.log('markpoints', markPoints);
+  // });
+
+  gui.add(guiObject, 'offsetLen').onChange(value => {
     markPoints.forEach(markPoint =>
       markPoint.setAttribute('itemContent', {
-        offsetX: value
+        offsetX: value * Math.cos((guiObject.angleOfOffset / 180) * Math.PI),
+        offsetY: value * Math.sin((guiObject.angleOfOffset / 180) * Math.PI)
       })
     );
-    console.log('markpoints', markPoints);
   });
 
-  gui.add(guiObject, 'itemOffsetY').onChange(value => {
+  gui.add(guiObject, 'angleOfOffset', 0, 360).onChange(value => {
     markPoints.forEach(markPoint =>
       markPoint.setAttribute('itemContent', {
-        offsetY: value
+        offsetX: guiObject.offsetLen * Math.cos((value / 180) * Math.PI),
+        offsetY: guiObject.offsetLen * Math.sin((value / 180) * Math.PI)
       })
     );
-    console.log('markpoints', markPoints);
   });
 
   gui.add(guiObject, 'itemAutoRotate').onChange(value => {
@@ -371,6 +400,46 @@ export function run() {
     );
   });
 
+  gui.add(guiObject, 'startSymbolRefX').onChange(value => {
+    markPoints.forEach(markPoint =>
+      markPoint.setAttribute('itemLine', {
+        startSymbol: {
+          refX: value
+        }
+      })
+    );
+  });
+
+  gui.add(guiObject, 'startSymbolRefY').onChange(value => {
+    markPoints.forEach(markPoint =>
+      markPoint.setAttribute('itemLine', {
+        startSymbol: {
+          refY: value
+        }
+      })
+    );
+  });
+
+  gui.add(guiObject, 'endSymbolRefX').onChange(value => {
+    markPoints.forEach(markPoint =>
+      markPoint.setAttribute('itemLine', {
+        endSymbol: {
+          refX: value
+        }
+      })
+    );
+  });
+
+  gui.add(guiObject, 'endSymbolRefY').onChange(value => {
+    markPoints.forEach(markPoint =>
+      markPoint.setAttribute('itemLine', {
+        endSymbol: {
+          refY: value
+        }
+      })
+    );
+  });
+
   gui.add(guiObject, 'itemRefAngle').onChange(value => {
     markPoints.forEach(markPoint =>
       markPoint.setAttribute('itemContent', {
@@ -396,4 +465,12 @@ export function run() {
       })
     );
   });
+
+  gui.add(guiObject, 'targetSymbolOffset').onChange(value => {
+    markPoints.forEach(markPoint =>
+      markPoint.setAttribute('targetSymbol', {
+        offset: value
+      })
+    );
+  });
 }

packages/vrender-components/src/marker/common-line.ts

@@ -40,7 +40,9 @@ export abstract class MarkCommonLine<LineAttr, LabelPosition> extends Marker<
     const { label = {}, limitRect } = this.attribute;
     const { position, confine, autoRotate } = label;
     const labelPoint = this.getPointAttrByPosition(position);
-    const labelAngle = this._line.getEndAngle() || 0;
+    const labelAngle = position.toString().toLocaleLowerCase().includes('start')
+      ? this._line.getStartAngle() || 0
+      : this._line.getEndAngle() || 0;
     this._label.setAttributes({
       ...labelPoint.position,
       angle: autoRotate ? this.getRotateByAngle(labelPoint.angle) : 0,

packages/vrender-components/src/marker/config.ts

@@ -1,6 +1,7 @@
 import type { TextAlignType, TextBaselineType } from '@visactor/vrender-core';
 import { IMarkAreaLabelPosition, IMarkLineLabelPosition, IMarkCommonArcLabelPosition } from './type';
 
+export const FUZZY_EQUAL_DELTA = 0.001;
 export const DEFAULT_MARK_LINE_THEME = {
   interactive: true,
   startSymbol: {
@@ -55,15 +56,27 @@ export const DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP: {
 } = {
   postiveXAxis: {
     start: {
+      textAlign: 'left',
+      textBaseline: 'middle'
+    },
+    startTop: {
+      textAlign: 'left',
+      textBaseline: 'bottom'
+    },
+    startBottom: {
+      textAlign: 'left',
+      textBaseline: 'top'
+    },
+    insideStart: {
       textAlign: 'right',
       textBaseline: 'middle'
     },
     insideStartTop: {
-      textAlign: 'left',
+      textAlign: 'right',
       textBaseline: 'bottom'
     },
     insideStartBottom: {
-      textAlign: 'left',
+      textAlign: 'right',
       textBaseline: 'top'
     },
 
@@ -84,6 +97,18 @@ export const DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP: {
       textAlign: 'left',
       textBaseline: 'middle'
     },
+    endTop: {
+      textAlign: 'left',
+      textBaseline: 'bottom'
+    },
+    endBottom: {
+      textAlign: 'left',
+      textBaseline: 'top'
+    },
+    insideEnd: {
+      textAlign: 'right',
+      textBaseline: 'middle'
+    },
     insideEndTop: {
       textAlign: 'right',
       textBaseline: 'bottom'
@@ -95,15 +120,27 @@ export const DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP: {
   },
   negativeXAxis: {
     start: {
+      textAlign: 'right',
+      textBaseline: 'middle'
+    },
+    startTop: {
+      textAlign: 'right',
+      textBaseline: 'bottom'
+    },
+    startBottom: {
+      textAlign: 'right',
+      textBaseline: 'top'
+    },
+    insideStart: {
       textAlign: 'left',
       textBaseline: 'middle'
     },
     insideStartTop: {
-      textAlign: 'right',
+      textAlign: 'left',
       textBaseline: 'bottom'
     },
     insideStartBottom: {
-      textAlign: 'right',
+      textAlign: 'left',
       textBaseline: 'top'
     },
 
@@ -124,6 +161,18 @@ export const DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP: {
       textAlign: 'right',
       textBaseline: 'middle'
     },
+    endTop: {
+      textAlign: 'right',
+      textBaseline: 'bottom'
+    },
+    endBottom: {
+      textAlign: 'right',
+      textBaseline: 'top'
+    },
+    insideEnd: {
+      textAlign: 'left',
+      textBaseline: 'middle'
+    },
     insideEndTop: {
       textAlign: 'left',
       textBaseline: 'bottom'