Fix 1458 (#1583)

* fix: avoid generating redundant dom structure for document element #1578 (#1580) * chore: commit changeset * fix: isBillboard should work on Path * chore: commit changeset * feat: add keep aspect ratio in image #1577 * chore: commit changeset
antvis · Nov 16, 2023 · 4fdee19 · 4fdee19
1 parent d3771f1
commit 4fdee19
Show file tree

Hide file tree

Showing 40 changed files with 814 additions and 127 deletions.
diff --git a/.changeset/beige-carrots-press.md b/.changeset/beige-carrots-press.md
@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-image-loader': patch
+'@antv/g-lite': patch
+---
+
+Keep aspect ration in image.
diff --git a/.changeset/chilly-carrots-drive.md b/.changeset/chilly-carrots-drive.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-svg-renderer': patch
+---
+
+Avoid generating redundant dom structure for document element.
diff --git a/.changeset/twenty-tables-mate.md b/.changeset/twenty-tables-mate.md
@@ -0,0 +1,11 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-plugin-svg-renderer': patch
+'@antv/g-mobile-webgl': patch
+'@antv/g-plugin-3d': patch
+'@antv/g-webgpu': patch
+'@antv/g-webgl': patch
+'@antv/g-lite': patch
+---
+
+Fix picking error when isBillboard enabled.
diff --git a/packages/g-lite/src/display-objects/Circle.ts b/packages/g-lite/src/display-objects/Circle.ts
@@ -6,18 +6,38 @@ import { Shape } from '../types';
 import { DisplayObject } from './DisplayObject';
 
 export interface CircleStyleProps extends BaseStyleProps {
+  /**
+   * X coordinate of the center of the circle.
+   */
   cx?: number | string | null;
+  /**
+   * Y coordinate of the center of the circle.
+   */
   cy?: number | string | null;
+  /**
+   * Z coordinate of the center of the circle.
+   */
   cz?: number | string | null;
+  /**
+   * Radius of the circle.
+   */
   r: number | string | null;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 export interface ParsedCircleStyleProps extends ParsedBaseStyleProps {
   cx: number;
   cy: number;
   cz?: number;
   r: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
 }
 export class Circle extends DisplayObject<
   CircleStyleProps,

diff --git a/packages/g-lite/src/display-objects/Image.ts b/packages/g-lite/src/display-objects/Image.ts
@@ -12,9 +12,22 @@ export interface ImageStyleProps extends BaseStyleProps {
   src?: string | HTMLImageElement;
   width?: number | string;
   height?: number | string;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
-  billboardRotation?: number;
+  /**
+   * When isBillboard enabled, whether the circle is size attenuation.
+   */
   isSizeAttenuation?: boolean;
+  /**
+   * When isBillboard enabled, the rotation.
+   */
+  billboardRotation?: number;
+  /**
+   * Whether to keep the aspect ratio of the image, under such circumstances, either the width or height can be omitted.
+   */
+  keepAspectRatio?: boolean;
 }
 export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   x: number;
@@ -27,6 +40,7 @@ export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   isBillboard?: boolean;
   billboardRotation?: number;
   isSizeAttenuation?: boolean;
+  keepAspectRatio?: boolean;
 }
 export class Image extends DisplayObject<
   ImageStyleProps,

diff --git a/packages/g-lite/src/display-objects/Line.ts b/packages/g-lite/src/display-objects/Line.ts
@@ -7,13 +7,38 @@ import { Shape } from '../types';
 import { DisplayObject, isDisplayObject } from './DisplayObject';
 
 export interface LineStyleProps extends BaseStyleProps {
+  /**
+   * X coordinate of the start of the line.
+   */
   x1: number;
+  /**
+   * Y coordinate of the start of the line.
+   */
   y1: number;
+  /**
+   * X coordinate of the end of the line.
+   */
   x2: number;
+  /**
+   * Y coordinate of the end of the line.
+   */
   y2: number;
+  /**
+   * Z coordinate of the start of the line.
+   */
   z1?: number;
+  /**
+   * Z coordinate of the end of the line.
+   */
   z2?: number;
+  /**
+   * Whether the line is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the line is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
   /**
    * marker will be positioned at x1/y1
    */
@@ -44,6 +69,7 @@ export interface ParsedLineStyleProps extends ParsedBaseStyleProps {
   defX: number;
   defY: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
   markerStart?: DisplayObject | null;
   markerEnd?: DisplayObject | null;
   markerStartOffset?: number;
@@ -70,7 +96,6 @@ export class Line extends DisplayObject<LineStyleProps, ParsedLineStyleProps> {
         y2: 0,
         z1: 0,
         z2: 0,
-        isBillboard: false,
         ...style,
       },
       ...rest,

diff --git a/packages/g-lite/src/display-objects/Path.ts b/packages/g-lite/src/display-objects/Path.ts
@@ -41,7 +41,14 @@ export interface PathStyleProps extends BaseStyleProps {
    */
   markerEndOffset?: number;
 
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 
 export interface PathSegmentBBox {
@@ -108,6 +115,7 @@ export interface ParsedPathStyleProps extends ParsedBaseStyleProps {
   markerStartOffset?: number;
   markerEndOffset?: number;
   isBillboard?: boolean;
+  isSizeAttenuation?: boolean;
 }
 export class Path extends DisplayObject<PathStyleProps, ParsedPathStyleProps> {
   private markerStartAngle = 0;

diff --git a/packages/g-lite/src/display-objects/Polyline.ts b/packages/g-lite/src/display-objects/Polyline.ts
@@ -31,7 +31,14 @@ export interface PolylineStyleProps extends BaseStyleProps {
    * offset relative to original position
    */
   markerEndOffset?: number;
+  /**
+   * Whether the circle is billboard.
+   */
   isBillboard?: boolean;
+  /**
+   * Whether the circle is size attenuation.
+   */
+  isSizeAttenuation?: boolean;
 }
 export interface ParsedPolylineStyleProps extends ParsedBaseStyleProps {
   points: {

diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json
@@ -45,7 +45,7 @@
     "@antv/g-plugin-html-renderer": "workspace:*",
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/g-plugin-mobile-interaction": "workspace:*",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@antv/util": "^3.3.4",
     "tslib": "^2.5.3"
   },

diff --git a/packages/g-plugin-3d/package.json b/packages/g-plugin-3d/package.json
@@ -41,7 +41,7 @@
     "@antv/g-lite": "workspace:*",
     "@antv/g-plugin-device-renderer": "workspace:*",
     "@antv/g-shader-components": "workspace:*",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "gl-matrix": "^3.4.3",
     "tslib": "^2.5.3"
   },

diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json
@@ -43,7 +43,7 @@
     "@antv/g-plugin-image-loader": "workspace:*",
     "@antv/g-shader-components": "workspace:*",
     "@antv/util": "^3.3.4",
-    "@antv/g-device-api": "^1.3.0",
+    "@antv/g-device-api": "^1.3.6",
     "@webgpu/types": "^0.1.6",
     "earcut": "^2.2.3",
     "eventemitter3": "^5.0.1",

diff --git a/packages/g-plugin-device-renderer/src/PickingPlugin.ts b/packages/g-plugin-device-renderer/src/PickingPlugin.ts
@@ -359,7 +359,7 @@ export class PickingPlugin implements RenderingPlugin {
       },
       {
         name: SceneUniform.VIEWPORT,
-        value: [canvasWidth, canvasHeight],
+        value: [width, height],
       },
       {
         name: SceneUniform.IS_ORTHO,

diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts
@@ -179,6 +179,8 @@ export class InstancedLineDrawcall extends Instanced {
           markerStartOffset,
           markerEndOffset,
           isBillboard,
+          // @ts-ignore
+          isSizeAttenuation,
         } = (object as Polyline).parsedStyle;
         parsedLineStyleProps = {
           x1: points[0][0],
@@ -193,6 +195,7 @@ export class InstancedLineDrawcall extends Instanced {
           lineDash,
           lineDashOffset,
           isBillboard,
+          isSizeAttenuation,
           markerStart,
           markerEnd,
           markerStartOffset,
@@ -212,6 +215,7 @@ export class InstancedLineDrawcall extends Instanced {
           markerStartOffset,
           markerEndOffset,
           isBillboard,
+          isSizeAttenuation,
         } = (object as Path).parsedStyle;
         let mSegmentCount = 0;
         let mCommandIndex = 0;
@@ -239,6 +243,7 @@ export class InstancedLineDrawcall extends Instanced {
           lineDash,
           lineDashOffset,
           isBillboard,
+          isSizeAttenuation,
           markerStart,
           markerEnd,
           markerStartOffset,
@@ -247,8 +252,19 @@ export class InstancedLineDrawcall extends Instanced {
         totalLength = (object as Path).getTotalLength();
       }
 
-      const { x1, y1, x2, y2, z1, z2, defX, defY, lineCap, isBillboard } =
-        parsedLineStyleProps;
+      const {
+        x1,
+        y1,
+        x2,
+        y2,
+        z1,
+        z2,
+        defX,
+        defY,
+        lineCap,
+        isBillboard,
+        isSizeAttenuation,
+      } = parsedLineStyleProps;
 
       const { startOffsetX, startOffsetY, endOffsetX, endOffsetY } =
         this.calcOffset(parsedLineStyleProps);
@@ -263,8 +279,8 @@ export class InstancedLineDrawcall extends Instanced {
         dashOffset,
         dashSegmentPercent,
         dashRatioInEachSegment,
-        // isBillboard
-        isBillboard ? 1 : 0,
+        // isSizeAttenuation
+        isBillboard || isSizeAttenuation ? 1 : 0,
       );
 
       interleaved.push(
@@ -399,6 +415,8 @@ export class InstancedLineDrawcall extends Instanced {
             markerStartOffset,
             markerEndOffset,
             isBillboard,
+            // @ts-ignore
+            isSizeAttenuation,
           } = (object as Polyline).parsedStyle;
           parsedLineStyleProps = {
             x1: points[0][0],
@@ -410,6 +428,7 @@ export class InstancedLineDrawcall extends Instanced {
             defX,
             defY,
             lineCap,
+            isSizeAttenuation,
             isBillboard,
             markerStart,
             markerEnd,
@@ -427,6 +446,7 @@ export class InstancedLineDrawcall extends Instanced {
             markerStartOffset,
             markerEndOffset,
             isBillboard,
+            isSizeAttenuation,
           } = (object as Path).parsedStyle;
           parsedLineStyleProps = {
             x1: absolutePath[0][1],
@@ -439,6 +459,7 @@ export class InstancedLineDrawcall extends Instanced {
             defY,
             lineCap,
             isBillboard,
+            isSizeAttenuation,
             markerStart,
             markerEnd,
             markerStartOffset,
@@ -468,6 +489,7 @@ export class InstancedLineDrawcall extends Instanced {
     } else if (
       name === 'lineDashOffset' ||
       name === 'lineDash' ||
+      name === 'isSizeAttenuation' ||
       name === 'isBillboard'
     ) {
       const packed: number[] = [];
@@ -479,8 +501,10 @@ export class InstancedLineDrawcall extends Instanced {
         packed.push(
           dashOffset,
           dashSegmentPercent,
-          dashRatioInEachSegment, // isBillboard
-          object.parsedStyle.isBillboard ? 1 : 0,
+          dashRatioInEachSegment,
+          object.parsedStyle.isBillboard || object.parsedStyle.isSizeAttenuation
+            ? 1
+            : 0, // isSizeAttenuation
         );
       });