Release (#1812)

* fix: `markerStartOffset`/`markerEndOffset` of the path (#1808) * fix: `markerStartOffset` of the path in the svg renderer is drawn abnormally * fix: `markerEndOffset` of the path in the svg/canvas renderer is drawn abnormally * docs: 更新文档 * Version Packages (#1811) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: revert demo style --------- 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 1, 2024 · 17de8f9 · 17de8f9
1 parent fdb1819
commit 17de8f9
Show file tree

Hide file tree

Showing 113 changed files with 804 additions and 267 deletions.
diff --git a/__tests__/demos/bugfix/1760.ts b/__tests__/demos/bugfix/1760.ts
@@ -0,0 +1,61 @@
+import { Canvas, Path, Line } from '@antv/g';
+
+/**
+ * @see https://github.com/antvis/G/issues/1760
+ * @see https://github.com/antvis/G/issues/1790
+ * @see https://github.com/antvis/G/pull/1808
+ */
+export async function issue_1760(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const arrowMarker = new Path({
+    style: {
+      d: 'M 10,10 L -10,0 L 10,-10 Z',
+      stroke: '#1890FF',
+      transformOrigin: 'center',
+    },
+  });
+  const arrowMarker1 = new Path({
+    style: {
+      d: 'M 10,10 L -10,0 L 10,-10 Z',
+      stroke: '#ff90FF',
+      transformOrigin: 'center',
+    },
+  });
+
+  const path = new Path({
+    style: {
+      lineWidth: 1,
+      stroke: '#54BECC',
+      // d: 'M 0,40 L 100,100',
+      // d: 'M 10,100 L 100,100',
+      d: 'M 10,100 Q 100,100 150,150',
+      // d: 'M 10,100 C 100,100 150,150 180,200',
+      // d: 'M 10,100 A 30 50 0 0 1 162.55 162.45',
+      // d: 'M 10,100 A 30 50 0 0 0 162.55 162.45',
+      markerStart: arrowMarker,
+      markerStartOffset: 30,
+      markerEnd: arrowMarker1,
+      markerEndOffset: 30,
+    },
+  });
+
+  const line = new Line({
+    style: {
+      x1: 10,
+      y1: 150,
+      x2: 100,
+      y2: 150,
+      lineWidth: 1,
+      stroke: '#54BECC',
+      markerStart: arrowMarker,
+      markerStartOffset: 30,
+      markerEnd: arrowMarker,
+      markerEndOffset: 30,
+    },
+  });
+
+  canvas.appendChild(path);
+  canvas.appendChild(line);
+}
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
@@ -7,3 +7,4 @@ export { shadowroot_offset } from './1677';
 export { gradient_text } from './1572';
 export { zoom } from './1667';
 export { test_pick } from './1747';
+export { issue_1760 } from './1760';
diff --git a/__tests__/demos/perf/image.ts b/__tests__/demos/perf/image.ts
@@ -1,30 +1,47 @@
 import { Canvas, Image as GImage } from '@antv/g';
+import * as lil from 'lil-gui';
 
-export async function image(context: { canvas: Canvas }) {
-  const { canvas } = context;
+export async function image(context: { canvas: Canvas; gui: lil.GUI }) {
+  const { canvas, gui } = context;
   await canvas.ready;
   console.log(canvas);
 
+  let image = new GImage({
+    style: {
+      x: 0,
+      y: 0,
+      // width: 100,
+      // height: 400,
+      // src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      // src: 'http://mmtcdp.stable.alipay.net/cto_designhubcore/afts/img/g1a5QYkvbcMAAAAAAAAAAAAADgLVAQBr/original',
+      src: 'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original',
+    },
+  });
+  canvas.appendChild(image);
+
+  // ---
   const $dom = canvas.getContextService().getDomElement() as HTMLCanvasElement;
+  let currentZoom = 1;
+  let isDragging = false;
+  let lastX, lastY;
+
   $dom.style.border = '1px solid gray';
 
-  // ---
   $dom.addEventListener('wheel', (event) => {
     event.preventDefault();
 
     const { deltaX, deltaY } = event;
-    const d = -(deltaX ?? deltaY);
+    const d = -(deltaX || deltaY);
 
     const ratio = 1 + (Math.min(Math.max(d, -50), 50) * 1) / 100;
     const zoom = canvas.getCamera().getZoom();
+    currentZoom = zoom * ratio;
 
     canvas
       .getCamera()
-      .setZoomByViewportPoint(zoom * ratio, [event.offsetX, event.offsetY]);
+      .setZoomByViewportPoint(currentZoom, [event.offsetX, event.offsetY]);
   });
 
-  let isDragging = false;
-  let lastX, lastY;
   $dom.addEventListener('mousedown', (e) => {
     isDragging = true;
     lastX = e.clientX;
@@ -34,7 +51,7 @@ export async function image(context: { canvas: Canvas }) {
     if (isDragging) {
       const dx = e.clientX - lastX;
       const dy = e.clientY - lastY;
-      canvas.getCamera().pan(-dx, -dy);
+      canvas.getCamera().pan(-dx / currentZoom, -dy / currentZoom);
       lastX = e.clientX;
       lastY = e.clientY;
     }
@@ -45,15 +62,13 @@ export async function image(context: { canvas: Canvas }) {
 
   // ---
 
-  let image = new GImage({
-    style: {
-      x: 0,
-      y: 0,
-      // width: 100,
-      // height: 400,
-      // src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-      src: 'http://mmtcdp.stable.alipay.net/cto_designhubcore/afts/img/g1a5QYkvbcMAAAAAAAAAAAAADgLVAQBr/original',
-    },
-  });
-  canvas.appendChild(image);
+  // GUI
+  gui
+    .add(
+      { enableLargeImageOptimization: false },
+      'enableLargeImageOptimization',
+    )
+    .onChange((result) => {
+      canvas.context.config.enableLargeImageOptimization = result;
+    });
 }
diff --git a/__tests__/index.html b/__tests__/index.html
@@ -1,10 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>G: Preview</title>
     <style>
+      /* html {
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        margin: 0;
+        padding: 8px;
+      } */
+
       .lil-gui.root {
         position: absolute;
         top: 0;

diff --git a/__tests__/main.ts b/__tests__/main.ts
@@ -1,3 +1,4 @@
+// import Stats from 'stats.js';
 import * as lil from 'lil-gui';
 import '@antv/g-camera-api';
 import { Canvas, CanvasEvent, runtime } from '@antv/g';
@@ -58,7 +59,7 @@ const renderOptions = (keyword = '') => {
 
 // Select for chart.
 const selectChart = document.createElement('select') as HTMLSelectElement;
-selectChart.style.margin = '1em';
+selectChart.style.margin = '1em 1em 1em 96px';
 renderOptions();
 selectChart.onchange = () => {
   const { value } = selectChart;
@@ -225,12 +226,25 @@ function createSpecRender(object) {
       // @ts-ignore
       window.__g_instances__ = [canvas];
 
+      // stats
+      // const stats = new Stats();
+      // stats.showPanel(0);
+      // const $stats = stats.dom;
+      // $stats.style.position = 'absolute';
+      // $stats.style.left = '4px';
+      // $stats.style.top = '4px';
+      // app.appendChild($stats);
+
       // GUI
       const gui = new lil.GUI({ autoPlace: false });
       $div.appendChild(gui.domElement);
 
       await generate({ canvas, renderer, container: $div, gui });
 
+      // canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+      //   stats.update();
+      // });
+
       if (
         selectRenderer.value === 'canvas' &&
         renderer.getConfig().enableDirtyRectangleRendering &&

diff --git a/__tests__/tsconfig.json b/__tests__/tsconfig.json
diff --git a/babel.config.mjs b/babel.config.mjs
@@ -1,6 +1,11 @@
 // See https://babeljs.io/docs/en/configuration
 
 export default {
+  /**
+   * @see https://babeljs.io/docs/options#targets
+   * default is es5
+   */
+  // targets: '',
   assumptions: {
     privateFieldsAsProperties: true,
     setPublicClassFields: true,

diff --git a/demo/issues/issue-1760.html b/demo/issues/issue-1760.html
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "simplex-noise": "^3.0.0",
     "sinon": "^11.1.2",
+    "stats.js": "^0.17.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.6.2",
     "vite": "^3.2.7",

diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-camera-api
 
+## 2.0.18
+
+### Patch Changes
+
+-   Updated dependencies [4aa12e8c]
+    -   @antv/g-lite@2.1.4
+
 ## 2.0.17
 
 ### Patch Changes

diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",

diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-canvas
 
+## 2.0.20
+
+### Patch Changes
+
+-   Updated dependencies [4aa12e8c]
+    -   @antv/g-lite@2.1.4
+    -   @antv/g-plugin-canvas-path-generator@2.0.15
+    -   @antv/g-plugin-canvas-picker@2.0.17
+    -   @antv/g-plugin-canvas-renderer@2.1.4
+    -   @antv/g-plugin-dom-interaction@2.1.4
+    -   @antv/g-plugin-html-renderer@2.1.4
+    -   @antv/g-plugin-image-loader@2.0.15
+
 ## 2.0.19
 
 ### Patch Changes

diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",