Release (#1647)

* fix: remove defXY and cx/cy should not affect transform #1624 (#1627)

* fix: remove defXY and cx/cy should not affect transform #1624

* fix: patterns

* fix: remove anchor

* fix: annotation plugin

* chore: commit changeset

* fix: x/y in rect can be omitted

* chore: commit changeset

* chore: version

* chore: version

* chore: bump version

* fix: insert event will trigger by default

* chore: commit changeset

* fix: lazy update geometry

* fix: lazy calculate geometry

* chore: bump version

* fix: refactor parse transform

* fix: transform origin

* chore: bump

* chore: stash

* chore: bump test version

* chore: fix testcases

* chore: update snapshots

* chore: commit changeset

* chore: commit changeset (#1646)

* chore(release): bump version (#1645)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.vscode/settings.json

@@ -1,9 +1,14 @@
 {
   "editor.formatOnSave": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "svg.preview.background": "dark-transparent"
 }

__tests__/demos/2d/circle.ts

@@ -16,42 +16,44 @@ export async function circle(context) {
 
   const circle2 = circle1.cloneNode();
   circle2.style.stroke = 'green';
-  circle2.style.lineWidth = '2px';
-  circle2.setPosition(30, 10);
+  circle2.style.lineWidth = 2;
+  circle2.style.transform = 'translate(20px, 0)';
   canvas.appendChild(circle2);
 
   // transparent
   const circle3 = circle2.cloneNode();
   circle3.style.fill = 'transparent';
-  circle3.setPosition(50, 10);
+  circle3.setPosition(40, 0);
   canvas.appendChild(circle3);
 
   // none fill
   const circle4 = circle2.cloneNode();
   circle4.style.fill = 'none';
-  circle4.setPosition(70, 10);
+  circle4.setPosition(60, 0);
   canvas.appendChild(circle4);
 
   // dashed
   const circle5 = circle2.cloneNode();
   circle5.style.lineDash = [2, 2];
-  circle5.setPosition(90, 10);
+  circle5.setPosition(80, 0);
   canvas.appendChild(circle5);
 
   // dashed with offset
   const circle6 = circle2.cloneNode();
   circle6.style.lineDash = [2, 2];
   circle6.style.lineDashOffset = 2;
-  circle6.setPosition(110, 10);
+  circle6.setPosition(100, 0);
   canvas.appendChild(circle6);
 
   const circle7 = circle1.cloneNode();
   circle7.style.opacity = 0.5;
-  circle7.setPosition(130, 10);
+  circle7.setPosition(120, 0);
   canvas.appendChild(circle7);
 
   // with shadow
   const circle8 = circle1.cloneNode();
+  circle8.style.cx = 0;
+  circle8.style.cy = 0;
   circle8.style.r = 20;
   circle8.style.shadowBlur = 10;
   circle8.style.shadowColor = 'blue';
@@ -60,19 +62,23 @@ export async function circle(context) {
 
   // with gradient
   const circle9 = circle1.cloneNode();
+  circle9.style.cx = 20;
+  circle9.style.cy = 20;
   circle9.style.r = 20;
   circle9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
-  circle9.setPosition(60, 60);
+  circle9.setPosition(40, 40);
   canvas.appendChild(circle9);
   const circle10 = circle1.cloneNode();
+  circle10.style.cx = 20;
+  circle10.style.cy = 20;
   circle10.style.r = 20;
   circle10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
-  circle10.setPosition(100, 60);
+  circle10.setPosition(80, 40);
   canvas.appendChild(circle10);
 
   // transform
   const circle11 = circle1.cloneNode();
-  circle11.scaleLocal(2);
-  circle11.setPosition(140, 60);
+  circle11.style.transformOrigin = 'center';
+  circle11.style.transform = 'translate(130, 50) scale(2)';
   canvas.appendChild(circle11);
 }

__tests__/demos/2d/clippath.ts

@@ -0,0 +1,136 @@
+import { Circle, Rect, Path, Group } from '../../../packages/g';
+import { Sector } from '../../../packages/g-components';
+
+export async function clipPath(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  // in user space
+  const clipPathCircle = new Circle({
+    style: {
+      cx: 150,
+      cy: 150,
+      r: 35,
+      fill: 'blue',
+      transformOrigin: 'center',
+    },
+  });
+
+  const rect1 = new Rect({
+    style: {
+      x: 0,
+      y: 0,
+      width: 45,
+      height: 45,
+      stroke: 'white',
+      lineWidth: 2,
+      fill: 'red',
+      clipPath: clipPathCircle,
+      cursor: 'pointer',
+      // transform: 'translate(200px, 200px)',
+    },
+  });
+  const rect2 = rect1.cloneNode();
+  rect2.style.y = 55;
+  const rect3 = rect1.cloneNode();
+  rect3.style.x = 55;
+  rect3.style.y = 55;
+  const rect4 = rect1.cloneNode();
+  rect4.style.x = 55;
+  rect4.style.y = 0;
+
+  const clipPathRect = new Rect({
+    style: {
+      x: 125,
+      y: 125,
+      width: 50,
+      height: 50,
+    },
+  });
+  const clipPath = new Path({
+    style: {
+      stroke: 'black',
+      lineWidth: 2,
+      d: 'M 10,10 L -10,0 L 10,-10 Z',
+    },
+  });
+
+  const g = new Group();
+  const group = new Group({
+    style: {
+      transform: 'translate(100, 100)',
+    },
+  });
+  g.appendChild(clipPathCircle);
+  group.appendChild(rect1);
+  group.appendChild(rect2);
+  group.appendChild(rect3);
+  group.appendChild(rect4);
+  g.appendChild(group);
+
+  canvas.appendChild(g);
+
+  // 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,
+        endAngle: -270,
+      },
+    });
+    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: {
+          d: '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);
+}