Dev/0.14.0

.github/workflows/bug-server.yml

@@ -5,7 +5,7 @@ on:
   push:
     branches: ['main']
   pull_request:
-    branches: ['main', 'develop']
+    branches: ['main', 'develop', 'dev/**']
 
 jobs:
   build:
@@ -27,7 +27,7 @@ jobs:
 
       - name: Print All Github Environment Variables
         run: env
-        
+
       - name: Update rush
         run: node common/scripts/install-run-rush.js update --bypass-policy
 

.github/workflows/unit-test.yml

@@ -5,7 +5,7 @@ name: Unit test CI
 
 on:
   pull_request:
-    branches: ['main', 'develop']
+    branches: ['main', 'develop', 'dev/**']
 
 jobs:
   build:

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-06-10-02.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: add `verticalMinSize` and `containerAlign` for line type axis, `verticalMinSize` is used to set the minumum vertical size of axis, and `containerAlign` is to set the all labels's alignment in axis container, support https://github.com/VisActor/VChart/issues/380",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-07-14-20.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: the axis label's textAlign and textBaseline should auto adjust when angle is set, releate https://github.com/VisActor/VChart/issues/439",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-07-15-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: panel only works for line axis",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-08-15-25.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: line axis states should set default value",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-label_avoid_mark_2023-08-03-02-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat(component): label component support avoidMarks",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/refactor-global-window-rename_2023-07-24-11-31.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "refactor: rename global and window to vglobal and vwindow",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender/feat-connected-line-area_2023-08-01-12-30.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "feat: add connect type to line and area",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

common/changes/@visactor/vrender/feat-layout_2023-08-04-07-38.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "feat: support flex layout",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

common/changes/@visactor/vrender/feat-onAnimateBind_2023-08-07-08-26.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "feat: support animate-bind event",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

common/changes/@visactor/vrender/feat-text-wordBreak_2023-08-07-07-54.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "feat: support text word-break",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

common/changes/@visactor/vrender/feat-vertical-text_2023-08-03-11-21.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "feat: support for vertical layout of text graphic",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

common/changes/@visactor/vrender/refactor-global-window-rename_2023-07-24-11-31.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender",
+      "comment": "refactor: rename global and window to vglobal and vwindow",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender"
+}

docs/demos/src/contribution/env-canvas/window-contribution.ts

@@ -8,7 +8,7 @@ import type {
   ICanvas,
   IDomRectLike
 } from '@visactor/vrender';
-import { Generator, Global, BaseWindowHandlerContribution } from '@visactor/vrender';
+import { Generator, VGlobal, BaseWindowHandlerContribution } from '@visactor/vrender';
 import { NodeCanvas } from './canvas';
 import type { IBoundsLike } from '@visactor/vutils';
 
@@ -21,7 +21,7 @@ export class NodeWindowHandlerContribution extends BaseWindowHandlerContribution
     return null;
   }
 
-  constructor(@inject(Global) private readonly global: IGlobal) {
+  constructor(@inject(VGlobal) private readonly global: IGlobal) {
     super();
   }
 

docs/demos/src/core/stage.ts

@@ -1,7 +1,7 @@
 import { createStage, container } from '@visactor/vrender';
 
 export function createAStage() {
-  console.log(container.get(Symbol.for('Global')));
+  console.log(container.get(Symbol.for('VGlobal')));
   const stage = createStage({});
   console.log(stage);
   // const stage = new Stage({

docs/demos/src/pages/area.ts

@@ -7,7 +7,7 @@ const subP1 = [
   [40, 60],
   [60, 20],
   [70, 30]
-].map(item => ({ x: item[0], y: item[1], y1: 120, defined: item[0] !== 70 }));
+].map(item => ({ x: item[0], y: item[1], y1: 120, defined: item[0] !== 20 }));
 
 const subP2 = [
   [80, 80],
@@ -28,33 +28,40 @@ const points = [
   [160, 40],
   [200, 20],
   [240, 50]
-].map(item => ({ x: item[0], y: item[1], y1: 120, defined: item[0] !== 70 }));
+].map(item => ({ x: item[0], y: item[1], y1: 120, defined: item[0] !== 40 && item[0] !== 70 }));
 
 export const page = () => {
   const graphics: IGraphic[] = [];
-  // ['linear', 'step', 'stepBefore', 'stepAfter', 'basis', 'monotoneX', 'monotoneY'].forEach((type, i) => {
-  //   graphics.push(
-  //     createArea({
-  //       points,
-  //       curveType: type as any,
-  //       x: ((i * 300) % 900) + 100,
-  //       y: Math.floor((i * 300) / 900) * 200,
-  //       stroke: ['black', false],
-  //       fill: {
-  //         gradient: 'linear',
-  //         x0: 0,
-  //         y0: 0,
-  //         x1: 1,
-  //         y1: 0,
-  //         stops: [
-  //           { offset: 0, color: 'green' },
-  //           { offset: 0.5, color: 'orange' },
-  //           { offset: 1, color: 'red' }
-  //         ]
-  //       }
-  //     })
-  //   );
-  // });
+  ['linear', 'step', 'stepBefore', 'stepAfter', 'basis', 'monotoneX', 'monotoneY'].forEach((type, i) => {
+    graphics.push(
+      createArea({
+        points,
+        curveType: type as any,
+        x: ((i * 300) % 900) + 100,
+        y: Math.floor((i * 300) / 900) * 200,
+        stroke: ['black', false],
+        fill: {
+          gradient: 'linear',
+          x0: 0,
+          y0: 0,
+          x1: 1,
+          y1: 0,
+          stops: [
+            { offset: 0, color: 'green' },
+            { offset: 0.5, color: 'orange' },
+            { offset: 1, color: 'red' }
+          ]
+        },
+        clipRange: 0.3,
+        connectedType: 'connect',
+        connectedX: null,
+        connectedY: 100,
+        connectedStyle: {
+          fill: 'grey'
+        }
+      })
+    );
+  });
 
   ['linear', 'step', 'stepBefore', 'stepAfter', 'basis', 'monotoneX', 'monotoneY'].forEach((type, i) => {
     i += 7;
@@ -65,7 +72,16 @@ export const page = () => {
         x: ((i * 300) % 900) + 100,
         y: Math.floor((i * 300) / 900) * 200,
         segments: [
-          { points: subP1, fill: colorPools[3], stroke: ['red', false], lineWidth: 10 },
+          {
+            points: subP1,
+            fill: colorPools[3],
+            stroke: ['red', false],
+            lineWidth: 10,
+            connectedType: 'connect',
+            connectedStyle: {
+              fill: 'grey'
+            }
+          },
           {
             points: subP2,
             stroke: ['red', false],
@@ -74,12 +90,17 @@ export const page = () => {
             textureColor: 'grey'
           }
         ],
+        connectedType: 'connect',
         fill: true,
         stroke: true
       })
     );
   });
 
+  graphics.forEach(item => {
+    item.animate().to({ clipRange: 0 }, 0, 'linear').to({ clipRange: 1 }, 10000, 'linear');
+  });
+
   const stage = createStage({
     canvas: document.getElementById('main'),
     autoRender: true

docs/demos/src/pages/flex.ts

@@ -0,0 +1,42 @@
+import { createStage, createGroup, createRect, container, IGraphic, global } from '@visactor/vrender';
+
+// container.load(roughModule);
+
+export const page = () => {
+  const group = createGroup({
+    x: 100,
+    y: 100,
+    background: 'red',
+    width: 300,
+    height: 400,
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    alignContent: 'center'
+  });
+
+  // 添加10个rect
+  new Array(10).fill(0).forEach(() => {
+    group.add(
+      createRect({
+        x: 10,
+        y: 10,
+        width: 70,
+        height: 60,
+        fill: 'green',
+        boundsPadding: [0, 6, 6, 0]
+      })
+    );
+  });
+
+  const stage = createStage({
+    canvas: 'main',
+    width: 1200,
+    height: 600,
+    enableLayout: true
+  });
+
+  stage.defaultLayer.add(group);
+
+  stage.render(undefined, { renderStyle: 'rough' });
+};

docs/demos/src/pages/index.ts

@@ -155,5 +155,9 @@ export const pages = [
   {
     title: 'animate-3d',
     path: 'animate-3d'
+  },
+  {
+    title: 'flex布局',
+    path: 'flex'
   }
 ];