feat: support outerBorder / innerBorder for polygon graphic

packages/vrender-core/__tests__/unit/common/polygon.test.ts

@@ -1,4 +1,4 @@
-import { drawPolygon, drawRoundedPolygon } from '../../../src/common/polygon';
+import { drawPolygon, drawRoundedPolygon, offsetPolygonPoints } from '../../../src/common/polygon';
 
 type Call = { method: string; args: any[] };
 
@@ -42,7 +42,16 @@ describe('common/polygon', () => {
 
   test('drawRoundedPolygon falls back to drawPolygon when points length < 3', () => {
     const path = new MockPath();
-    drawRoundedPolygon(path as any, [{ x: 0, y: 0 }, { x: 10, y: 0 }], 0, 0, 2);
+    drawRoundedPolygon(
+      path as any,
+      [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 }
+      ],
+      0,
+      0,
+      2
+    );
     expect(path.calls[0].method).toBe('moveTo');
     expect(path.calls.some(c => c.method === 'arcTo')).toBe(false);
   });
@@ -81,4 +90,55 @@ describe('common/polygon', () => {
     expect(last.method).toBe('lineTo');
     expect(last.args).toEqual([points[3].x + 3, points[3].y + 4]);
   });
+
+  test('offsetPolygonPoints keeps collinear vertices on the offset edge', () => {
+    const result = offsetPolygonPoints(
+      [
+        { x: 0, y: 0 },
+        { x: 50, y: 0 },
+        { x: 100, y: 0 },
+        { x: 100, y: 100 },
+        { x: 0, y: 100 }
+      ],
+      10
+    );
+
+    expect(result[1]).toEqual({ x: 50, y: -10 });
+  });
+
+  test('offsetPolygonPoints skips duplicate edges when finding adjacent offset lines', () => {
+    const result = offsetPolygonPoints(
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 0 },
+        { x: 100, y: 0 },
+        { x: 100, y: 100 },
+        { x: 0, y: 100 }
+      ],
+      10
+    );
+
+    expect(result[0].x).toBeCloseTo(-10);
+    expect(result[0].y).toBeCloseTo(-10);
+    expect(result[1].x).toBeCloseTo(-10);
+    expect(result[1].y).toBeCloseTo(-10);
+    expect(result.every(point => Number.isFinite(point.x) && Number.isFinite(point.y))).toBe(true);
+  });
+
+  test('offsetPolygonPoints does not use the closing edge for an open polygon', () => {
+    const result = offsetPolygonPoints(
+      [
+        { x: 0, y: 0 },
+        { x: 100, y: 0 },
+        { x: 100, y: 100 }
+      ],
+      10,
+      false
+    );
+
+    expect(result[0]).toEqual({ x: 0, y: -10 });
+    expect(result[1].x).toBeCloseTo(110);
+    expect(result[1].y).toBeCloseTo(-10);
+    expect(result[2]).toEqual({ x: 110, y: 100 });
+  });
 });

packages/vrender-core/__tests__/unit/graphic/polygon-outer-border-bounds.test.ts

@@ -0,0 +1,198 @@
+import { AABBBounds } from '@visactor/vutils';
+import { application } from '../../../src/application';
+import { offsetPolygonPoints } from '../../../src/common/polygon';
+import { Group } from '../../../src/graphic/group';
+import { Polygon } from '../../../src/graphic/polygon';
+import { DefaultGraphicService } from '../../../src/graphic/graphic-service/graphic-service';
+import { updateBoundsOfPolygonOuterBorder } from '../../../src/graphic/graphic-service/polygon-outer-border-bounds';
+
+describe('polygon outer border bounds', () => {
+  test('contains the actual offset outline for non-right-angle vertices', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 120, y: 0 },
+      { x: 90, y: 60 },
+      { x: 30, y: 60 }
+    ];
+    const bounds = new AABBBounds();
+    points.forEach(point => bounds.add(point.x, point.y));
+
+    updateBoundsOfPolygonOuterBorder(
+      {
+        points,
+        outerBorder: { stroke: '#f00', distance: 3, lineWidth: 1 }
+      },
+      {
+        points: [],
+        closePath: true,
+        shadowBlur: 0,
+        scaleX: 1,
+        scaleY: 1,
+        keepStrokeScale: false,
+        outerBorder: {
+          distance: 0,
+          lineWidth: 1,
+          lineJoin: 'miter',
+          strokeBoundsBuffer: 0
+        }
+      } as any,
+      bounds,
+      {
+        globalTransMatrix: { a: 1, b: 0, c: 0, d: 1 }
+      } as any
+    );
+
+    offsetPolygonPoints(points, 3).forEach(point => {
+      expect(point.x).toBeGreaterThanOrEqual(bounds.x1);
+      expect(point.x).toBeLessThanOrEqual(bounds.x2);
+      expect(point.y).toBeGreaterThanOrEqual(bounds.y1);
+      expect(point.y).toBeLessThanOrEqual(bounds.y2);
+    });
+    expect(bounds.x1).toBeLessThan(-4.8);
+    expect(bounds.x2).toBeGreaterThan(124.8);
+  });
+
+  test('contains a non-scaling outer border after a shrinking transform', () => {
+    const previousGraphicService = application.graphicService;
+    application.graphicService = new DefaultGraphicService();
+
+    try {
+      const polygon = new Polygon({
+        points: [
+          { x: 0, y: 0 },
+          { x: 100, y: 0 },
+          { x: 100, y: 100 },
+          { x: 0, y: 100 }
+        ],
+        scaleX: 0.5,
+        scaleY: 0.5,
+        keepStrokeScale: false,
+        outerBorder: {
+          stroke: '#f00',
+          distance: 10,
+          lineWidth: 0,
+          strokeBoundsBuffer: 0
+        }
+      });
+
+      expect(polygon.AABBBounds.x1).toBeLessThanOrEqual(-10);
+      expect(polygon.AABBBounds.y1).toBeLessThanOrEqual(-10);
+      expect(polygon.AABBBounds.x2).toBeGreaterThanOrEqual(60);
+      expect(polygon.AABBBounds.y2).toBeGreaterThanOrEqual(60);
+    } finally {
+      application.graphicService = previousGraphicService;
+    }
+  });
+
+  test('contains a non-scaling border width and distance under a shrinking parent', () => {
+    const previousGraphicService = application.graphicService;
+    application.graphicService = new DefaultGraphicService();
+
+    try {
+      const group = new Group({ scaleX: 0.5, scaleY: 0.5 });
+      const polygon = new Polygon({
+        points: [
+          { x: 0, y: 0 },
+          { x: 100, y: 0 },
+          { x: 100, y: 100 },
+          { x: 0, y: 100 }
+        ],
+        keepStrokeScale: false,
+        outerBorder: {
+          stroke: '#f00',
+          distance: 10,
+          lineWidth: 2,
+          lineJoin: 'round',
+          strokeBoundsBuffer: 0
+        }
+      });
+      group.appendChild(polygon);
+
+      expect(polygon.globalAABBBounds.x1).toBeLessThanOrEqual(-11);
+      expect(polygon.globalAABBBounds.y1).toBeLessThanOrEqual(-11);
+      expect(polygon.globalAABBBounds.x2).toBeGreaterThanOrEqual(61);
+      expect(polygon.globalAABBBounds.y2).toBeGreaterThanOrEqual(61);
+
+      group.setAttributes({ scaleX: 0.25, scaleY: 0.25 });
+      expect(polygon.globalAABBBounds.x1).toBeLessThanOrEqual(-11);
+      expect(polygon.globalAABBBounds.y1).toBeLessThanOrEqual(-11);
+      expect(polygon.globalAABBBounds.x2).toBeGreaterThanOrEqual(36);
+      expect(polygon.globalAABBBounds.y2).toBeGreaterThanOrEqual(36);
+    } finally {
+      application.graphicService = previousGraphicService;
+    }
+  });
+
+  test('updates bounds when a state changes the outer border distance', () => {
+    const previousGraphicService = application.graphicService;
+    application.graphicService = new DefaultGraphicService();
+
+    try {
+      const polygon = new Polygon({
+        points: [
+          { x: 0, y: 0 },
+          { x: 100, y: 0 },
+          { x: 100, y: 100 },
+          { x: 0, y: 100 }
+        ],
+        outerBorder: {
+          stroke: '#f00',
+          distance: 10,
+          lineWidth: 0,
+          strokeBoundsBuffer: 0
+        }
+      });
+
+      expect(polygon.AABBBounds.x1).toBeLessThanOrEqual(-10);
+
+      polygon.states = {
+        hover: {
+          outerBorder: {
+            stroke: '#f00',
+            distance: 20,
+            lineWidth: 0,
+            strokeBoundsBuffer: 0
+          }
+        }
+      } as any;
+      polygon.useStates(['hover'], false);
+
+      expect(polygon.AABBBounds.x1).toBeLessThanOrEqual(-20);
+    } finally {
+      application.graphicService = previousGraphicService;
+    }
+  });
+
+  test('scales the outer border width when keepStrokeScale is true', () => {
+    const previousGraphicService = application.graphicService;
+    application.graphicService = new DefaultGraphicService();
+
+    try {
+      const polygon = new Polygon({
+        points: [
+          { x: 0, y: 0 },
+          { x: 100, y: 0 },
+          { x: 100, y: 100 },
+          { x: 0, y: 100 }
+        ],
+        scaleX: 0.5,
+        scaleY: 0.5,
+        keepStrokeScale: true,
+        outerBorder: {
+          stroke: '#f00',
+          distance: 0,
+          lineWidth: 10,
+          lineJoin: 'round',
+          strokeBoundsBuffer: 0
+        }
+      });
+
+      expect(polygon.AABBBounds.x1).toBeCloseTo(-2.5);
+      expect(polygon.AABBBounds.y1).toBeCloseTo(-2.5);
+      expect(polygon.AABBBounds.x2).toBeCloseTo(52.5);
+      expect(polygon.AABBBounds.y2).toBeCloseTo(52.5);
+    } finally {
+      application.graphicService = previousGraphicService;
+    }
+  });
+});