Fix/marker visible

common/changes/@visactor/vrender-components/develop_2024-01-04-08-08.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix(marker): fix problem of no render when set visible attr. fix@Visactor/Vchart#1901",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

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

@@ -19,7 +19,8 @@ export function run() {
     itemRefX: 10,
     itemRefY: 0,
     itemRefAngle: 0,
-    decorativeLineVisible: false
+    decorativeLineVisible: false,
+    visible: true
   };
 
   const styleAttr = {
@@ -108,6 +109,7 @@ export function run() {
         image: `${window.location.origin}/__tests__/browser/sources/shape_logo.png`
       }
     },
+    visible: guiObject.visible,
     clipInRange: false
     // limitRect: {
     //   x: 50,
@@ -195,6 +197,9 @@ export function run() {
       })
     );
   });
+  gui.add(guiObject, 'visible').onChange(value => {
+    markPoints.forEach(markPoint => markPoint.setAttribute('visible', value, true));
+  });
 
   gui.add(guiObject, 'itemOffsetX').onChange(value => {
     markPoints.forEach(markPoint =>

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

@@ -1,6 +1,6 @@
 import type { IGroup, INode, IPolygon } from '@visactor/vrender-core';
 import { graphicCreator } from '@visactor/vrender-core';
-import { merge } from '@visactor/vutils';
+import { isValidNumber, merge } from '@visactor/vutils';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
 import { Marker } from './base';
@@ -9,6 +9,7 @@ import type { MarkAreaAttrs } from './type';
 import { limitShapeInBounds } from '../util/limit-shape';
 import type { ComponentOptions } from '../interface';
 import { loadMarkAreaComponent } from './register';
+import type { Point } from '../core/type';
 
 loadMarkAreaComponent();
 export class MarkArea extends Marker<MarkAreaAttrs> {
@@ -128,6 +129,13 @@ export class MarkArea extends Marker<MarkAreaAttrs> {
     if (!points || points.length < 3) {
       return false;
     }
-    return true;
+    let validFlag = true;
+    points.forEach((point: Point) => {
+      if (!isValidNumber((point as Point).x) || !isValidNumber((point as Point).y)) {
+        validFlag = false;
+        return;
+      }
+    });
+    return validFlag;
   }
 }

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

@@ -16,6 +16,13 @@ export abstract class Marker<T extends MarkerAttrs> extends AbstractComponent<Re
   protected abstract updateMarker(): any;
   protected abstract isValidPoints(): any;
 
+  setAttribute(key: keyof T, value: any, forceUpdateTag?: boolean | undefined): void {
+    super.setAttribute(key, value, forceUpdateTag);
+    if (key === 'visible') {
+      this.render();
+    }
+  }
+
   private _initContainer() {
     const { limitRect = {} as T['limitRect'], clipInRange } = this.attribute;
     let group;
@@ -69,19 +76,17 @@ export abstract class Marker<T extends MarkerAttrs> extends AbstractComponent<Re
       this.setAttribute('childrenPickable', false);
     }
 
-    if (markerVisible) {
-      if (!this._container && this.isValidPoints()) {
+    if (markerVisible && this.isValidPoints()) {
+      if (!this._container) {
         this._initContainer();
         this.initMarker(this._container);
       } else {
-        if (!this.isValidPoints()) {
-          this._container = null;
-          this.removeAllChild();
-        } else {
-          this._updateContainer();
-          this.updateMarker();
-        }
+        this._updateContainer();
+        this.updateMarker();
       }
+    } else {
+      this._container = null;
+      this.removeAllChild();
     }
   }
 }

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

@@ -1,14 +1,16 @@
 import type { IGroup, INode } from '@visactor/vrender-core';
-import { merge } from '@visactor/vutils';
+import { isValidNumber, merge } from '@visactor/vutils';
 import { Segment } from '../segment';
 import type { TagAttributes } from '../tag';
+// eslint-disable-next-line no-duplicate-imports
 import { Tag } from '../tag';
 import { Marker } from './base';
 import { DEFAULT_MARK_LINE_THEME, DEFAULT_MARK_LINE_TEXT_STYLE_MAP } from './config';
 import type { MarkLineAttrs } from './type';
 import { limitShapeInBounds } from '../util/limit-shape';
 import type { ComponentOptions } from '../interface';
 import { loadMarkLineComponent } from './register';
+import type { Point } from '../core/type';
 
 loadMarkLineComponent();
 export class MarkLine extends Marker<MarkLineAttrs> {
@@ -125,6 +127,20 @@ export class MarkLine extends Marker<MarkLineAttrs> {
     if (!points || points.length < 2) {
       return false;
     }
-    return true;
+    let validFlag = true;
+    points.forEach((point: Point | Point[]) => {
+      if ((point as any).length) {
+        (point as Point[]).forEach((p: Point) => {
+          if (!isValidNumber((p as Point).x) || !isValidNumber((p as Point).y)) {
+            validFlag = false;
+            return;
+          }
+        });
+      } else if (!isValidNumber((point as Point).x) || !isValidNumber((point as Point).y)) {
+        validFlag = false;
+        return;
+      }
+    });
+    return validFlag;
   }
 }

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

@@ -13,7 +13,7 @@ import type {
 import { graphicCreator } from '@visactor/vrender-core';
 import type { IPointLike } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
-import { merge } from '@visactor/vutils';
+import { isValidNumber, merge } from '@visactor/vutils';
 import { Segment } from '../segment';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
@@ -294,6 +294,10 @@ export class MarkPoint extends Marker<MarkPointAttrs> {
   }
 
   protected isValidPoints() {
-    return true;
+    const { position } = this.attribute as MarkPointAttrs;
+    if (isValidNumber(position.x) && isValidNumber(position.y)) {
+      return true;
+    }
+    return false;
   }
 }