fix: remove anchor

.changeset/pre.json

@@ -52,5 +52,5 @@
     "@antv/g-webgpu": "1.9.36",
     "@antv/react-g": "1.10.25"
   },
-  "changesets": []
+  "changesets": ["wicked-hairs-rescue"]
 }

.changeset/wicked-hairs-rescue.md

@@ -0,0 +1,11 @@
+---
+'@antv/g-plugin-canvaskit-renderer': minor
+'@antv/g-plugin-canvas-renderer': minor
+'@antv/g-plugin-device-renderer': minor
+'@antv/g-plugin-image-loader': minor
+'@antv/g-plugin-svg-renderer': minor
+'@antv/g-plugin-annotation': minor
+'@antv/g-lite': minor
+---
+
+X/y won't affect transform now.

__tests__/demos/2d/clippath.ts

@@ -1,4 +1,5 @@
 import { Circle, Rect, Path, Group } from '../../../packages/g';
+import { Sector } from '../../../packages/g-components';
 
 export async function clipPath(context) {
   const { canvas } = context;
@@ -50,7 +51,6 @@ export async function clipPath(context) {
       stroke: 'black',
       lineWidth: 2,
       path: 'M 10,10 L -10,0 L 10,-10 Z',
-      anchor: [0.5, 0.5],
     },
   });
 
@@ -69,14 +69,66 @@ export async function clipPath(context) {
 
   canvas.appendChild(g);
 
-  // g.style.x = 200;
-  // g.style.y = 200;
-
   clipPathCircle.animate(
     [{ transform: 'scale(1)' }, { transform: 'scale(2)' }],
     {
       duration: 1500,
       iterations: Infinity,
     },
   );
+
+  {
+    const sector = new Sector({
+      style: {
+        x: 350,
+        y: 100,
+        lineWidth: 1,
+        sr: 100,
+        startAngle: -90,
+        fill: 'yellow',
+        opacity: 0.5,
+      },
+    });
+    const group = new Group({
+      style: {
+        clipPath: sector,
+      },
+    });
+    const circle1 = new Circle({
+      style: {
+        fill: 'red',
+        cx: 300,
+        cy: 100,
+        r: 20,
+      },
+    });
+    const circle2 = new Circle({
+      style: {
+        fill: 'red',
+        cx: 350,
+        cy: 100,
+        r: 20,
+      },
+    });
+    canvas.appendChild(group);
+    group.appendChild(circle1);
+    group.appendChild(circle2);
+    canvas.appendChild(sector);
+
+    sector.animate(
+      [
+        {
+          endAngle: -90,
+        },
+        {
+          endAngle: 270,
+        },
+      ],
+      {
+        duration: 1000,
+        iterations: Infinity,
+        fill: 'both',
+      },
+    );
+  }
 }

__tests__/demos/2d/custom-element.ts

@@ -0,0 +1,71 @@
+import { Path, Polyline, Line } from '../../../packages/g';
+import { Arrow } from '../../../packages/g-components';
+
+export async function customElement(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  // create an arrow
+  const lineArrow = new Arrow({
+    id: 'lineArrow',
+    style: {
+      body: new Line({
+        style: {
+          x1: 200,
+          y1: 100,
+          x2: 0,
+          y2: 0,
+        },
+      }),
+      startHead: true,
+      stroke: '#1890FF',
+      lineWidth: 10,
+      cursor: 'pointer',
+      increasedLineWidthForHitTesting: 40,
+    },
+  });
+  lineArrow.translate(200, 100);
+
+  const polylineArrow = new Arrow({
+    id: 'polylineArrow',
+    style: {
+      body: new Polyline({
+        style: {
+          points: [
+            [0, 0],
+            [50, 0],
+            [50, 50],
+            [100, 50],
+            [100, 100],
+            [150, 100],
+          ],
+        },
+      }),
+      startHead: true,
+      stroke: '#1890FF',
+      lineWidth: 10,
+      cursor: 'pointer',
+    },
+  });
+  polylineArrow.translate(200, 200);
+
+  const pathArrow = new Arrow({
+    id: 'pathArrow',
+    style: {
+      body: new Path({
+        style: {
+          path: 'M 100,300' + 'l 50,-25' + 'a25,25 -30 0,1 50,-80',
+        },
+      }),
+      startHead: true,
+      stroke: '#1890FF',
+      lineWidth: 10,
+      cursor: 'pointer',
+    },
+  });
+  pathArrow.translate(100, 150);
+
+  canvas.appendChild(lineArrow);
+  canvas.appendChild(polylineArrow);
+  canvas.appendChild(pathArrow);
+}

__tests__/demos/2d/index.ts

@@ -9,6 +9,9 @@ export { path } from './path';
 export { text } from './text';
 export { gradient } from './gradient';
 export { transform } from './transform';
+export { transformText } from './transform-text';
 export { clipPath } from './clippath';
+export { customElement } from './custom-element';
+export { marker } from './marker';
 export { pattern } from './pattern';
 export { pattern2 } from './pattern2';

__tests__/demos/2d/marker.ts

@@ -0,0 +1,199 @@
+import {
+  CanvasEvent,
+  Path,
+  Circle,
+  Line,
+  Rect,
+  Image,
+} from '../../../packages/g';
+
+export async function marker(context) {
+  const { canvas, container } = context;
+  await canvas.ready;
+
+  // display dirty rectangle
+  const $dirtyRectangle = document.createElement('div');
+  $dirtyRectangle.style.cssText = `
+  position: absolute;
+  pointer-events: none;
+  background: rgba(255, 0, 0, 0.5);
+  `;
+  container.appendChild($dirtyRectangle);
+
+  canvas.addEventListener(CanvasEvent.DIRTY_RECTANGLE, (e) => {
+    const { dirtyRect } = e.detail;
+    const { x, y, width, height } = dirtyRect;
+    const dpr = window.devicePixelRatio;
+
+    console.log(x, y, width, height);
+
+    // convert from canvas coords to viewport
+    $dirtyRectangle.style.left = `${x / dpr}px`;
+    $dirtyRectangle.style.top = `${y / dpr}px`;
+    $dirtyRectangle.style.width = `${width / dpr}px`;
+    $dirtyRectangle.style.height = `${height / dpr}px`;
+  });
+
+  /**
+   * Arrow with triangle marker
+   */
+  const arrowMarker = new Path({
+    style: {
+      path: 'M 10,10 L -10,0 L 10,-10 Z',
+      stroke: '#1890FF',
+      transformOrigin: 'center',
+    },
+  });
+  const handle1 = new Circle({
+    id: 'handle1',
+    style: {
+      draggable: true,
+      cursor: 'move',
+      fill: '#DEE9FF',
+      stroke: '#5B8FF9',
+      r: 10,
+      cx: 100,
+      cy: 50,
+    },
+  });
+  const handle2 = handle1.cloneNode();
+  handle2.id = 'handle2';
+  handle2.style.cx = 300;
+  handle2.style.cy = 50;
+  const arrow1 = new Line({
+    style: {
+      x1: 100,
+      y1: 50,
+      x2: 300,
+      y2: 50,
+      stroke: '#F6BD16',
+      lineWidth: 6,
+      markerEnd: arrowMarker,
+      markerEndOffset: 28,
+    },
+  });
+
+  /**
+   * Arrow with rect marker
+   */
+  const rectMarker = new Rect({
+    style: {
+      x: -10,
+      y: -10,
+      width: 20,
+      height: 20,
+      fill: '#F6BD16',
+      transform: 'rotate(45deg)',
+      transformOrigin: 'center',
+    },
+  });
+  const handle3 = handle1.cloneNode();
+  handle3.id = 'handle3';
+  handle3.style.cx = 100;
+  handle3.style.cy = 150;
+  const handle4 = handle1.cloneNode();
+  handle4.id = 'handle4';
+  handle4.style.cx = 300;
+  handle4.style.cy = 150;
+  const arrow2 = new Line({
+    style: {
+      x1: 100,
+      y1: 150,
+      x2: 300,
+      y2: 150,
+      stroke: '#F6BD16',
+      lineWidth: 6,
+      markerEnd: rectMarker,
+      markerEndOffset: 28,
+    },
+  });
+
+  /**
+   * Arrow with image marker
+   */
+  const imageMarker = new Image({
+    style: {
+      x: -25,
+      y: -25,
+      width: 50,
+      height: 50,
+      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      transformOrigin: 'center',
+      transform: 'rotate(90deg)',
+    },
+  });
+  const handle5 = handle1.cloneNode();
+  handle5.id = 'handle5';
+  handle5.style.cx = 100;
+  handle5.style.cy = 250;
+  const handle6 = handle1.cloneNode();
+  handle6.id = 'handle6';
+  handle6.style.cx = 300;
+  handle6.style.cy = 250;
+  const arrow3 = new Line({
+    style: {
+      x1: 100,
+      y1: 250,
+      x2: 300,
+      y2: 250,
+      stroke: '#F6BD16',
+      lineWidth: 6,
+      markerEnd: imageMarker,
+      markerEndOffset: 40,
+    },
+  });
+
+  canvas.appendChild(arrow1);
+  canvas.appendChild(handle1);
+  canvas.appendChild(handle2);
+
+  canvas.appendChild(arrow2);
+  canvas.appendChild(handle3);
+  canvas.appendChild(handle4);
+
+  canvas.appendChild(arrow3);
+  canvas.appendChild(handle5);
+  canvas.appendChild(handle6);
+
+  let shiftX = 0;
+  let shiftY = 0;
+  function moveAt(target, canvasX, canvasY) {
+    const newPosX = canvasX - shiftX;
+    const newPosY = canvasY - shiftY;
+
+    // re-define arrow
+    if (target.id === 'handle1') {
+      arrow1.style.x1 = newPosX;
+      arrow1.style.y1 = newPosY;
+    } else if (target.id === 'handle2') {
+      arrow1.style.x2 = newPosX;
+      arrow1.style.y2 = newPosY;
+    } else if (target.id === 'handle3') {
+      arrow2.style.x1 = newPosX;
+      arrow2.style.y1 = newPosY;
+    } else if (target.id === 'handle4') {
+      arrow2.style.x2 = newPosX;
+      arrow2.style.y2 = newPosY;
+    } else if (target.id === 'handle5') {
+      arrow3.style.x1 = newPosX;
+      arrow3.style.y1 = newPosY;
+    } else if (target.id === 'handle6') {
+      arrow3.style.x2 = newPosX;
+      arrow3.style.y2 = newPosY;
+    }
+  }
+
+  canvas.addEventListener('dragstart', function (e) {
+    shiftX = e.canvasX - e.target.style.cx;
+    shiftY = e.canvasY - e.target.style.cy;
+
+    moveAt(e.target, e.canvasX, e.canvasY);
+    e.target.style.cx = e.canvasX;
+    e.target.style.cy = e.canvasY;
+  });
+  canvas.addEventListener('drag', function (e) {
+    moveAt(e.target, e.canvasX, e.canvasY);
+    e.target.style.cx = e.canvasX;
+    e.target.style.cy = e.canvasY;
+  });
+}