Merge pull request #891 from VisActor/fix/rect-split

Fix/rect split

common/changes/@visactor/vrender-core/fix-rect-split_2024-01-12-02-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix `splitRect` when rect has `x1` or `y1`\n\n",
+      "type": "none",
+      "packageName": "@visactor/vrender-core"
+    }
+  ],
+  "packageName": "@visactor/vrender-core",
+  "email": "[email protected]"
+}

common/changes/@visactor/vrender/fix-rect-split_2024-01-12-02-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix `splitRect` when rect has `x1` or `y1`\n\n",
+      "type": "none",
+      "packageName": "@visactor/vrender"
+    }
+  ],
+  "packageName": "@visactor/vrender",
+  "email": "[email protected]"
+}

packages/vrender-core/src/common/rect-utils.ts

@@ -0,0 +1,29 @@
+import { isNil } from '@visactor/vutils';
+import type { IRectGraphicAttribute } from '../interface/graphic/rect';
+
+export const normalizeRectAttributes = (attribute: IRectGraphicAttribute) => {
+  if (!attribute) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  let width = isNil(attribute.width) ? attribute.x1 - attribute.x : attribute.width;
+  let height = isNil(attribute.height) ? attribute.y1 - attribute.y : attribute.height;
+  let x = 0;
+  let y = 0;
+
+  if (width < 0) {
+    x = width;
+    width = -width;
+  } else if (Number.isNaN(width)) {
+    width = 0;
+  }
+
+  if (height < 0) {
+    y = height;
+    height = -height;
+  } else if (Number.isNaN(height)) {
+    height = 0;
+  }
+
+  return { x, y, width, height };
+};

packages/vrender-core/src/common/split-path.ts

@@ -12,6 +12,7 @@ import type { IPointLike } from '@visactor/vutils';
 import { isNumber, Bounds, getIntersectPoint } from '@visactor/vutils';
 import type { ILine, IRect, IArc, ICircle, IArea, IPolygon, IPath } from '../interface';
 import { bezierCurversToPath, pathToBezierCurves } from './morphing-utils';
+import { normalizeRectAttributes } from './rect-utils';
 /**
  * split a rect to grids
  */
@@ -59,10 +60,10 @@ export function splitToGrids(width: number, height: number, count: number) {
 }
 
 export const splitRect = (rect: IRect, count: number) => {
+  const { width, height } = normalizeRectAttributes(rect.attribute);
+
   const x = 0;
   const y = 0;
-  const width = rect.getComputedAttribute('width');
-  const height = rect.getComputedAttribute('height');
   const grids = splitToGrids(width, height, count);
   const res = [];
   const gridHeight = height / grids.length;

packages/vrender-core/src/graphic/rect.ts

@@ -6,6 +6,7 @@ import { parsePadding } from '../common/utils';
 import { getTheme } from './theme';
 import { application } from '../application';
 import { RECT_NUMBER_TYPE } from './constants';
+import { normalizeRectAttributes } from '../common/rect-utils';
 
 const RECT_UPDATE_TAG_KEY = ['width', 'x1', 'y1', 'height', 'cornerRadius', ...GRAPHIC_UPDATE_TAG_KEY];
 
@@ -69,20 +70,7 @@ export class Rect extends Graphic<IRectGraphicAttribute> implements IRect {
   toCustomPath(): ICustomPath2D {
     // throw new Error('暂不支持');
     const attribute = this.attribute;
-    let width = isNil(attribute.width) ? attribute.x1 - attribute.x : attribute.width;
-    let height = isNil(attribute.height) ? attribute.y1 - attribute.y : attribute.height;
-    let x = 0;
-    let y = 0;
-
-    if (width < 0) {
-      x = width;
-      width = -width;
-    }
-
-    if (height < 0) {
-      y = height;
-      height = -height;
-    }
+    const { x, y, width, height } = normalizeRectAttributes(attribute);
 
     const path = new CustomPath2D();
     path.moveTo(x, y);

packages/vrender/__tests__/common/split-path.test.ts

@@ -168,6 +168,90 @@ it('splitRect()', () => {
   ]);
 });
 
+it('splitRect() of x1', () => {
+  const rect = createRect({
+    x: 100,
+    y: 100,
+    x1: 300,
+    height: 100
+  });
+
+  expect(splitRect(rect, 5)).toEqual([
+    {
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 50,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 150,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 0,
+      y: 50,
+      width: 200,
+      height: 50
+    }
+  ]);
+});
+
+it('splitRect() of x1 and y1', () => {
+  const rect = createRect({
+    x: 100,
+    y: 100,
+    x1: 300,
+    y1: 200
+  });
+
+  expect(splitRect(rect, 5)).toEqual([
+    {
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 50,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 150,
+      y: 0,
+      width: 50,
+      height: 50
+    },
+    {
+      x: 0,
+      y: 50,
+      width: 200,
+      height: 50
+    }
+  ]);
+});
+
 it('splitArc()', () => {
   const arc = createArc({
     x: 100,