feat: added support for picking rotated text (#1749) (#1772)

antvis · Sep 13, 2024 · 681327e · 681327e
1 parent 61ef85b
commit 681327e
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 4 deletions.
diff --git a/.changeset/healthy-boxes-train.md b/.changeset/healthy-boxes-train.md
@@ -2,4 +2,4 @@
 '@antv/g-plugin-device-renderer': patch
 ---
 
-fix: webgl renderer has logical exception when updating attributes
+fix: webgl renderer has logical exception when updating attributes (#1768)
diff --git a/.changeset/plenty-trees-drive.md b/.changeset/plenty-trees-drive.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-canvas-picker': patch
+---
+
+feat: added support for picking rotated text (#1749)
diff --git a/demo/issues/issue-1743.html b/demo/issues/issue-1743.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no"
     />
-    <title>Camera</title>
+    <title>issue-1743</title>
     <style>
       * {
         box-sizing: border-box;

diff --git a/demo/issues/issue-1749.html b/demo/issues/issue-1749.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no"
+    />
+    <title>issue-1749</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        height: 100vh;
+        padding: 100px;
+      }
+
+      #container {
+        /* border: 1px solid #ddd; */
+        background-color: #ddd;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container"></div>
+    <script
+      src="../../packages/g/dist/index.umd.min.js"
+      type="application/javascript"
+    ></script>
+    <script
+      src="../../packages/g-canvas/dist/index.umd.min.js"
+      type="application/javascript"
+    ></script>
+    <script>
+      const { Canvas, CanvasEvent, Rect, Text, Path, Canvas2D } = window.G;
+
+      const canvasRenderer = new Canvas2D.Renderer();
+
+      const canvas = new Canvas({
+        container: 'container',
+        width: 600,
+        height: 500,
+        renderer: canvasRenderer,
+      });
+
+      const test = (shape, property) => {
+        shape.addEventListener('pointerenter', () => {
+          shape.style[property] = 'red';
+        });
+        shape.addEventListener('pointerleave', () => {
+          shape.style[property] = 'black';
+        });
+      };
+
+      const text = new Text({
+        style: {
+          text: 'test123213',
+          fontSize: 20,
+          x: 300,
+          y: 100,
+          anchor: '0.5 0.5',
+          transform: 'rotate(45)',
+        },
+      });
+
+      const path = new Path({
+        style: {
+          d: 'M 100,100 L 150,100 L 150,150 Z',
+          fill: 'black',
+          transform: 'rotate(45)',
+        },
+      });
+
+      test(text, 'fill');
+      test(path, 'fill');
+
+      canvas.addEventListener(CanvasEvent.READY, () => {
+        canvas.appendChild(text);
+        canvas.appendChild(path);
+
+        const { x, y, width, height } = text.getBBox();
+        const rect = new Rect({
+          style: {
+            x,
+            y,
+            width,
+            height,
+            stroke: 'black',
+            // transform: 'rotate(45)',
+          },
+        });
+        test(rect, 'stroke');
+
+        canvas.appendChild(rect);
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/g-plugin-canvas-picker/src/Text.ts b/packages/g-plugin-canvas-picker/src/Text.ts
@@ -0,0 +1,21 @@
+import type { DisplayObject, Point, TextStyleProps } from '@antv/g-lite';
+
+export function isPointInPath(
+  displayObject: DisplayObject<TextStyleProps>,
+  position: Point,
+  isClipPath: boolean,
+  isPointInPath: (
+    displayObject: DisplayObject<TextStyleProps>,
+    position: Point,
+  ) => boolean,
+): boolean {
+  const bounds = displayObject.getGeometryBounds();
+
+  // @see https://stackoverflow.com/questions/28706989/how-do-i-check-if-a-mouse-click-is-inside-a-rotated-text-on-the-html5-canvas-in
+  return (
+    position.x >= bounds.min[0] &&
+    position.y >= bounds.min[1] &&
+    position.x <= bounds.max[0] &&
+    position.y <= bounds.max[1]
+  );
+}
diff --git a/packages/g-plugin-canvas-picker/src/index.ts b/packages/g-plugin-canvas-picker/src/index.ts
@@ -9,11 +9,11 @@ import { isPointInPath as PolygonPicker } from './Polygon';
 import { isPointInPath as PolylinePicker } from './Polyline';
 import { isPointInPath as RectPicker } from './Rect';
 import { isPointInPath as ImagePicker } from './Image';
+import { isPointInPath as TextPicker } from './Text';
 
 export class Plugin extends AbstractRendererPlugin {
   name = 'canvas-picker';
   init(): void {
-    const trueFunc = () => true;
     const pointInPathPickerFactory: Record<Shape, PointInPathPicker<any>> = {
       [Shape.CIRCLE]: CirclePicker,
       [Shape.ELLIPSE]: EllipsePicker,
@@ -22,7 +22,7 @@ export class Plugin extends AbstractRendererPlugin {
       [Shape.POLYLINE]: PolylinePicker,
       [Shape.POLYGON]: PolygonPicker,
       [Shape.PATH]: PathPicker,
-      [Shape.TEXT]: trueFunc,
+      [Shape.TEXT]: TextPicker,
       [Shape.GROUP]: null,
       [Shape.IMAGE]: ImagePicker,
       [Shape.HTML]: null,