Release (#1599)

* fix: rendering circle in webgpu (#1596) * fix: rendering circle in webgpu * chore: commit changeset * chore: update lockfile (#1597) * chore(release): bump version (#1598) 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>
antvis · Nov 21, 2023 · 97d9d73 · 97d9d73
1 parent 8d854c7
commit 97d9d73
Show file tree

Hide file tree

Showing 74 changed files with 19,999 additions and 1,109 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -145,14 +145,13 @@ pnpm build
 pnpm test
 ```
 
-### 启动官网
+### 启动开发示例
 
-构建并启动官网：
+构建并启动 vite 示例：
 
 ```bash
 pnpm build
-pnpm link-site
-pnpm start
+pnpm dev
 ```
 
 ## 受以下项目启发

diff --git a/README.md b/README.md
@@ -150,14 +150,13 @@ pnpm build
 pnpm test
 ```
 
-### Start site
+### Run demos
 
-Preview our site:
+Preview our dev demos:
 
 ```bash
 pnpm build
-pnpm link-site
-pnpm start
+pnpm dev
 ```
 
 ## Inspired by

diff --git a/__tests__/demos/2d/circle.ts b/__tests__/demos/2d/circle.ts
@@ -27,48 +27,48 @@ export async function circle(context) {
   canvas.appendChild(circle3);
 
   // none fill
-  const circle4 = circle2.cloneNode();
-  circle4.style.fill = 'none';
-  circle4.setPosition(70, 10);
-  canvas.appendChild(circle4);
+  // const circle4 = circle2.cloneNode();
+  // circle4.style.fill = 'none';
+  // circle4.setPosition(70, 10);
+  // canvas.appendChild(circle4);
 
-  // dashed
-  const circle5 = circle2.cloneNode();
-  circle5.style.lineDash = [2, 2];
-  circle5.setPosition(90, 10);
-  canvas.appendChild(circle5);
+  // // dashed
+  // const circle5 = circle2.cloneNode();
+  // circle5.style.lineDash = [2, 2];
+  // circle5.setPosition(90, 10);
+  // canvas.appendChild(circle5);
 
-  // dashed with offset
-  const circle6 = circle2.cloneNode();
-  circle6.style.lineDash = [2, 2];
-  circle6.style.lineDashOffset = 2;
-  circle6.setPosition(110, 10);
-  canvas.appendChild(circle6);
+  // // dashed with offset
+  // const circle6 = circle2.cloneNode();
+  // circle6.style.lineDash = [2, 2];
+  // circle6.style.lineDashOffset = 2;
+  // circle6.setPosition(110, 10);
+  // canvas.appendChild(circle6);
 
-  const circle7 = circle1.cloneNode();
-  circle7.style.opacity = 0.5;
-  circle7.setPosition(130, 10);
-  canvas.appendChild(circle7);
+  // const circle7 = circle1.cloneNode();
+  // circle7.style.opacity = 0.5;
+  // circle7.setPosition(130, 10);
+  // canvas.appendChild(circle7);
 
-  // with shadow
-  const circle8 = circle1.cloneNode();
-  circle8.style.r = 20;
-  circle8.style.shadowBlur = 10;
-  circle8.style.shadowColor = 'blue';
-  circle8.setPosition(20, 60);
-  canvas.appendChild(circle8);
+  // // with shadow
+  // const circle8 = circle1.cloneNode();
+  // circle8.style.r = 20;
+  // circle8.style.shadowBlur = 10;
+  // circle8.style.shadowColor = 'blue';
+  // circle8.setPosition(20, 60);
+  // canvas.appendChild(circle8);
 
-  // with gradient
-  const circle9 = circle1.cloneNode();
-  circle9.style.r = 20;
-  circle9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
-  circle9.setPosition(60, 60);
-  canvas.appendChild(circle9);
-  const circle10 = circle1.cloneNode();
-  circle10.style.r = 20;
-  circle10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
-  circle10.setPosition(100, 60);
-  canvas.appendChild(circle10);
+  // // with gradient
+  // const circle9 = circle1.cloneNode();
+  // circle9.style.r = 20;
+  // circle9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
+  // circle9.setPosition(60, 60);
+  // canvas.appendChild(circle9);
+  // const circle10 = circle1.cloneNode();
+  // circle10.style.r = 20;
+  // circle10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
+  // circle10.setPosition(100, 60);
+  // canvas.appendChild(circle10);
 
   // transform
   const circle11 = circle1.cloneNode();

diff --git a/__tests__/demos/2d/ellipse.ts b/__tests__/demos/2d/ellipse.ts
@@ -27,47 +27,47 @@ export async function ellipse(context) {
   ellipse3.setPosition(60, 20);
   canvas.appendChild(ellipse3);
 
-  // none fill
-  const ellipse4 = ellipse2.cloneNode();
-  ellipse4.style.fill = 'none';
-  ellipse4.setPosition(80, 20);
-  canvas.appendChild(ellipse4);
+  // // none fill
+  // const ellipse4 = ellipse2.cloneNode();
+  // ellipse4.style.fill = 'none';
+  // ellipse4.setPosition(80, 20);
+  // canvas.appendChild(ellipse4);
 
-  // dashed
-  const ellipse5 = ellipse2.cloneNode();
-  ellipse5.style.lineDash = [2, 2];
-  ellipse5.setPosition(100, 20);
-  canvas.appendChild(ellipse5);
+  // // dashed
+  // const ellipse5 = ellipse2.cloneNode();
+  // ellipse5.style.lineDash = [2, 2];
+  // ellipse5.setPosition(100, 20);
+  // canvas.appendChild(ellipse5);
 
-  // dashed with offset
-  const ellipse6 = ellipse2.cloneNode();
-  ellipse6.style.lineDash = [2, 2];
-  ellipse6.style.lineDashOffset = 2;
-  ellipse6.setPosition(120, 20);
-  canvas.appendChild(ellipse6);
+  // // dashed with offset
+  // const ellipse6 = ellipse2.cloneNode();
+  // ellipse6.style.lineDash = [2, 2];
+  // ellipse6.style.lineDashOffset = 2;
+  // ellipse6.setPosition(120, 20);
+  // canvas.appendChild(ellipse6);
 
-  const ellipse7 = ellipse1.cloneNode();
-  ellipse7.style.opacity = 0.5;
-  ellipse7.setPosition(140, 20);
-  canvas.appendChild(ellipse7);
+  // const ellipse7 = ellipse1.cloneNode();
+  // ellipse7.style.opacity = 0.5;
+  // ellipse7.setPosition(140, 20);
+  // canvas.appendChild(ellipse7);
 
-  // with shadow
-  const ellipse8 = ellipse1.cloneNode();
-  ellipse8.style.shadowBlur = 10;
-  ellipse8.style.shadowColor = 'blue';
-  ellipse8.setPosition(20, 60);
-  canvas.appendChild(ellipse8);
+  // // with shadow
+  // const ellipse8 = ellipse1.cloneNode();
+  // ellipse8.style.shadowBlur = 10;
+  // ellipse8.style.shadowColor = 'blue';
+  // ellipse8.setPosition(20, 60);
+  // 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);
-  canvas.appendChild(ellipse9);
+  // // with gradient
+  // const ellipse9 = ellipse1.cloneNode();
+  // ellipse9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
+  // ellipse9.setPosition(60, 60);
+  // canvas.appendChild(ellipse9);
 
-  const ellipse10 = ellipse1.cloneNode();
-  ellipse10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
-  ellipse10.setPosition(100, 60);
-  canvas.appendChild(ellipse10);
+  // const ellipse10 = ellipse1.cloneNode();
+  // ellipse10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
+  // ellipse10.setPosition(100, 60);
+  // canvas.appendChild(ellipse10);
 
   // transform
   const ellipse11 = ellipse1.cloneNode();

diff --git a/__tests__/demos/2d/image-non-transparent-pixel.ts b/__tests__/demos/2d/image-non-transparent-pixel.ts
@@ -0,0 +1,19 @@
+import { Image } from '../../../packages/g';
+
+export async function imageNonTransparentPixel(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const image1 = new Image({
+    style: {
+      x: 200,
+      y: 100,
+      width: 200,
+      height: 200,
+      img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      pointerEvents: 'non-transparent-pixel',
+      cursor: 'pointer',
+    },
+  });
+  canvas.appendChild(image1);
+}
diff --git a/__tests__/demos/2d/image.ts b/__tests__/demos/2d/image.ts
@@ -0,0 +1,17 @@
+import { Image } from '../../../packages/g';
+
+export async function image(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const image1 = new Image({
+    style: {
+      x: 200,
+      y: 100,
+      width: 200,
+      height: 200,
+      img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+    },
+  });
+  canvas.appendChild(image1);
+}
diff --git a/__tests__/demos/2d/index.ts b/__tests__/demos/2d/index.ts
@@ -1,2 +1,7 @@
 export { circle } from './circle';
 export { ellipse } from './ellipse';
+export { rect } from './rect';
+export { image } from './image';
+export { imageNonTransparentPixel } from './image-non-transparent-pixel';
+export { line } from './line';
+export { polyline } from './polyline';
diff --git a/__tests__/demos/2d/line.ts b/__tests__/demos/2d/line.ts
@@ -0,0 +1,18 @@
+import { Line } from '../../../packages/g';
+
+export async function line(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const line = new Line({
+    style: {
+      x1: 10,
+      y1: 10,
+      x2: 10,
+      y2: 30,
+      stroke: 'red',
+      lineWidth: 6,
+    },
+  });
+  canvas.appendChild(line);
+}
diff --git a/__tests__/demos/2d/polyline.ts b/__tests__/demos/2d/polyline.ts
@@ -0,0 +1,19 @@
+import { Polyline } from '../../../packages/g';
+
+export async function polyline(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const polyline = new Polyline({
+    style: {
+      points: [
+        [10, 10],
+        [10, 30],
+        [30, 30],
+      ],
+      stroke: 'red',
+      lineWidth: 6,
+    },
+  });
+  canvas.appendChild(polyline);
+}
diff --git a/__tests__/demos/2d/rect.ts b/__tests__/demos/2d/rect.ts
@@ -0,0 +1,81 @@
+import { Rect } from '../../../packages/g';
+
+export async function rect(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const rect1 = new Rect({
+    style: {
+      x: 10,
+      y: 10,
+      width: 20,
+      height: 20,
+      fill: 'red',
+    },
+  });
+  canvas.appendChild(rect1);
+
+  const rect2 = rect1.cloneNode();
+  rect2.style.stroke = 'green';
+  rect2.style.lineWidth = '2px';
+  rect2.translate(30, 0);
+  canvas.appendChild(rect2);
+
+  const rect3 = rect2.cloneNode();
+  rect3.style.fill = 'transparent';
+  rect3.translate(30, 0);
+  canvas.appendChild(rect3);
+
+  // // none fill
+  // const rect4 = rect2.cloneNode();
+  // rect4.style.fill = 'none';
+  // rect4.translate(60, 0);
+  // canvas.appendChild(rect4);
+
+  // // dashed
+  // const rect5 = rect2.cloneNode();
+  // rect5.style.lineDash = [2, 2];
+  // rect5.translate(90, 0);
+  // canvas.appendChild(rect5);
+
+  // const rect6 = rect2.cloneNode();
+  // rect6.style.opacity = 0.5;
+  // rect6.translate(120, 0);
+  // canvas.appendChild(rect6);
+
+  // // with shadow
+  // const rect7 = rect2.cloneNode();
+  // rect7.style.shadowBlur = 10;
+  // rect7.style.shadowColor = 'blue';
+  // rect7.setPosition(10, 60);
+  // canvas.appendChild(rect7);
+
+  // // with gradient
+  // const rect8 = rect2.cloneNode();
+  // rect8.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
+  // rect8.setPosition(40, 60);
+  // canvas.appendChild(rect8);
+  // const rect9 = rect2.cloneNode();
+  // rect9.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
+  // rect9.setPosition(70, 60);
+  // canvas.appendChild(rect9);
+
+  // // rounded rect
+  // const rect10 = rect2.cloneNode();
+  // rect10.style.radius = 5;
+  // rect10.setPosition(100, 60);
+  // canvas.appendChild(rect10);
+
+  // // rotated rect
+  // const rect11 = rect2.cloneNode();
+  // rect11.setPosition(150, 60);
+  // rect11.rotateLocal(45);
+  // canvas.appendChild(rect11);
+
+  // // with transform-origin
+  // const rect12 = rect2.cloneNode();
+  // rect12.style.transformOrigin = 'center';
+  // rect12.setPosition(150, 60);
+  // rect12.rotateLocal(45);
+  // canvas.appendChild(rect12);
+}
diff --git a/__tests__/demos/3d/cube.ts b/__tests__/demos/3d/cube.ts
@@ -2,11 +2,8 @@ import {
   MeshBasicMaterial,
   CubeGeometry,
   Mesh,
-  Format,
-  TextureDimension,
-  TextureUsage,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d/esm';
+} from '../../../packages/g-plugin-3d';
 import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
 
 export async function cube(context) {