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

__tests__/demos/2d/circle.ts

@@ -17,41 +17,43 @@ export async function circle(context) {
   const circle2 = circle1.cloneNode();
   circle2.style.stroke = 'green';
   circle2.style.lineWidth = '2px';
-  circle2.setPosition(30, 10);
+  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,22 @@ 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.transform = 'scale(2) translate(130, 50)';
   canvas.appendChild(circle11);
 }

__tests__/demos/2d/clippath.ts

@@ -0,0 +1,82 @@
+import { Circle, Rect, Path, Group } from '../../../packages/g';
+
+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',
+    },
+  });
+
+  const rect1 = new Rect({
+    style: {
+      x: 0,
+      y: 0,
+      width: 45,
+      height: 45,
+      stroke: 'white',
+      strokeWidth: 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,
+      path: 'M 10,10 L -10,0 L 10,-10 Z',
+      anchor: [0.5, 0.5],
+    },
+  });
+
+  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);
+
+  // g.style.x = 200;
+  // g.style.y = 200;
+
+  clipPathCircle.animate(
+    [{ transform: 'scale(1)' }, { transform: 'scale(2)' }],
+    {
+      duration: 1500,
+      iterations: Infinity,
+    },
+  );
+}

__tests__/demos/2d/ellipse.ts

@@ -18,60 +18,62 @@ export async function ellipse(context) {
   const ellipse2 = ellipse1.cloneNode();
   ellipse2.style.stroke = 'green';
   ellipse2.style.lineWidth = '2px';
-  ellipse2.setPosition(40, 20);
+  ellipse2.setPosition(20, 0);
   canvas.appendChild(ellipse2);
 
   // transparent
   const ellipse3 = ellipse2.cloneNode();
   ellipse3.style.fill = 'transparent';
-  ellipse3.setPosition(60, 20);
+  ellipse3.setPosition(40, 0);
   canvas.appendChild(ellipse3);
 
   // none fill
   const ellipse4 = ellipse2.cloneNode();
   ellipse4.style.fill = 'none';
-  ellipse4.setPosition(80, 20);
+  ellipse4.setPosition(60, 0);
   canvas.appendChild(ellipse4);
 
   // dashed
   const ellipse5 = ellipse2.cloneNode();
   ellipse5.style.lineDash = [2, 2];
-  ellipse5.setPosition(100, 20);
+  ellipse5.setPosition(80, 0);
   canvas.appendChild(ellipse5);
 
   // dashed with offset
   const ellipse6 = ellipse2.cloneNode();
   ellipse6.style.lineDash = [2, 2];
   ellipse6.style.lineDashOffset = 2;
-  ellipse6.setPosition(120, 20);
+  ellipse6.setPosition(100, 0);
   canvas.appendChild(ellipse6);
 
   const ellipse7 = ellipse1.cloneNode();
   ellipse7.style.opacity = 0.5;
-  ellipse7.setPosition(140, 20);
+  ellipse7.setPosition(120, 0);
   canvas.appendChild(ellipse7);
 
   // with shadow
   const ellipse8 = ellipse1.cloneNode();
   ellipse8.style.shadowBlur = 10;
   ellipse8.style.shadowColor = 'blue';
-  ellipse8.setPosition(20, 60);
+  ellipse8.setPosition(0, 40);
   canvas.appendChild(ellipse8);
 
   // with gradient
   const ellipse9 = ellipse1.cloneNode();
   ellipse9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
-  ellipse9.setPosition(60, 60);
+  ellipse9.setPosition(40, 40);
   canvas.appendChild(ellipse9);
 
   const ellipse10 = ellipse1.cloneNode();
   ellipse10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
-  ellipse10.setPosition(100, 60);
+  ellipse10.setPosition(80, 40);
   canvas.appendChild(ellipse10);
 
   // transform
   const ellipse11 = ellipse1.cloneNode();
-  ellipse11.scaleLocal(2);
-  ellipse11.setPosition(140, 100);
+  ellipse11.style.cx = 0;
+  ellipse11.style.cy = 0;
+  ellipse11.style.transformOrigin = '0 0';
+  ellipse11.style.transform = 'scale(2) translate(140, 100)';
   canvas.appendChild(ellipse11);
 }

__tests__/demos/2d/gradient.ts

@@ -0,0 +1,125 @@
+import { Rect, HTML, Line } from '../../../packages/g';
+
+export async function gradient(context) {
+  const { canvas } = context;
+  await canvas.ready;
+  // single linear gradient
+  const rect1 = new Rect({
+    style: {
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 100,
+      fill: 'linear-gradient(0deg, blue, green 40%, red)',
+    },
+  });
+
+  // multi linear gradients
+  const rect2 = new Rect({
+    style: {
+      x: 50,
+      y: 250,
+      width: 200,
+      height: 100,
+      fill: `linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+              linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+              linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)`,
+    },
+  });
+
+  // single radial gradient
+  const rect3 = new Rect({
+    style: {
+      x: 350,
+      y: 50,
+      width: 200,
+      height: 100,
+      fill: 'radial-gradient(circle at center, red, blue, green 100%)',
+    },
+  });
+
+  // hard stop
+  const rect4 = new Rect({
+    style: {
+      x: 350,
+      y: 250,
+      width: 200,
+      height: 100,
+      fill: 'radial-gradient(red 50%, blue 50%)',
+    },
+  });
+
+  const line1 = new Line({
+    style: {
+      x1: 50,
+      y1: 180,
+      x2: 250,
+      y2: 180,
+      strokeWidth: 10,
+      stroke: 'linear-gradient(0deg, blue, green 40%, red)',
+    },
+  });
+  const line2 = new Line({
+    style: {
+      x1: 350,
+      y1: 180,
+      x2: 550,
+      y2: 180,
+      strokeWidth: 10,
+      stroke: 'radial-gradient(circle at center, red, blue, green 100%)',
+    },
+  });
+
+  canvas.appendChild(line1);
+  canvas.appendChild(line2);
+
+  canvas.appendChild(rect1);
+  canvas.appendChild(rect2);
+  canvas.appendChild(rect3);
+  canvas.appendChild(rect4);
+
+  canvas.appendChild(
+    new HTML({
+      style: {
+        x: 100,
+        y: 20,
+        height: 30,
+        width: 200,
+        innerHTML: 'linear gradient',
+      },
+    }),
+  );
+  canvas.appendChild(
+    new HTML({
+      style: {
+        x: 60,
+        y: 220,
+        height: 30,
+        width: 200,
+        innerHTML: 'multiple linear gradients',
+      },
+    }),
+  );
+  canvas.appendChild(
+    new HTML({
+      style: {
+        x: 350,
+        y: 20,
+        height: 30,
+        width: 200,
+        innerHTML: 'radial gradient',
+      },
+    }),
+  );
+  canvas.appendChild(
+    new HTML({
+      style: {
+        x: 350,
+        y: 220,
+        height: 30,
+        width: 200,
+        innerHTML: 'hard color stop',
+      },
+    }),
+  );
+}

__tests__/demos/2d/image.ts

@@ -6,12 +6,25 @@ export async function image(context) {
 
   const image1 = new Image({
     style: {
-      x: 200,
-      y: 100,
+      x: 0,
+      y: 0,
       width: 200,
       height: 200,
       img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
     },
   });
   canvas.appendChild(image1);
+
+  // Use `keepAspectRatio` so that the image will not be stretched
+  const image2 = new Image({
+    style: {
+      x: 200,
+      y: 100,
+      width: 100,
+      keepAspectRatio: true,
+      img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      cursor: 'pointer',
+    },
+  });
+  canvas.appendChild(image2);
 }