feat: symbol support more type and support svg format, closed #110 #313

docs/demos/package.json

@@ -28,6 +28,7 @@
     "@antv/g": "^5.7.4"
   },
   "dependencies": {
-    "@visactor/vrender": "workspace:0.14.1"
+    "@visactor/vrender": "workspace:0.14.1",
+    "fast-xml-parser": "4.2.7"
   }
 }

packages/vrender/package.json

@@ -27,7 +27,8 @@
     "@visactor/vutils": "~0.15.3",
     "color-convert": "2.0.1",
     "inversify": "6.0.1",
-    "core-js": "3.31.1"
+    "core-js": "3.31.1",
+    "fast-xml-parser": "4.2.7"
   },
   "devDependencies": {
     "@internal/bundler": "workspace:*",

packages/vrender/src/graphic/builtin-symbol/arrow2-down.ts

@@ -0,0 +1,38 @@
+import type { IBounds } from '@visactor/vutils';
+import type { IContext2d, SymbolType, ISymbolClass } from '../../interface';
+
+export function arrow2Down(ctx: IContext2d, r: number, transX: number, transY: number) {
+  const r2 = r * 2;
+  ctx.moveTo(transX - r2, transY - r);
+  ctx.lineTo(transX, transY + r);
+  ctx.lineTo(transX + r2, transY - r);
+
+  return true;
+}
+
+// 以中心为锚点，size为circle外接正方形的面积
+export class Arrow2DownSymbol implements ISymbolClass {
+  type: SymbolType = 'arrow2Down';
+  /* eslint-disable max-len */
+  pathStr: string = 'M -0.5 -0.25 L 0 0.25 l 0.5 -0.25';
+
+  draw(ctx: IContext2d, size: number, transX: number, transY: number) {
+    const r = size / 4;
+    return arrow2Down(ctx, r, transX, transY);
+  }
+
+  drawOffset(ctx: IContext2d, size: number, transX: number, transY: number, offset: number) {
+    const r = size / 4 + offset;
+    return arrow2Down(ctx, r, transX, transY);
+  }
+
+  bounds(size: number, bounds: IBounds) {
+    const r = size / 2;
+    bounds.x1 = -r;
+    bounds.x2 = r;
+    bounds.y1 = -r;
+    bounds.y2 = r;
+  }
+}
+
+export default new Arrow2DownSymbol();

packages/vrender/src/graphic/builtin-symbol/arrow2-left.ts

@@ -44,7 +44,7 @@ export function arrow2Left(ctx: IContext2d, r: number, transX: number, transY: n
 export class Arrow2LeftSymbol implements ISymbolClass {
   type: SymbolType = 'arrow2Left';
   /* eslint-disable max-len */
-  pathStr: string = 'M 0.25 -0.5 L -0.25 0 l 0.5 0.5';
+  pathStr: string = 'M 0.25 -0.5 L -0.25 0 l 0.25 0.5';
 
   draw(ctx: IContext2d, size: number, transX: number, transY: number) {
     const r = size / 4;

packages/vrender/src/graphic/builtin-symbol/arrow2-right.ts

@@ -44,7 +44,7 @@ export function arrow2Right(ctx: IContext2d, r: number, transX: number, transY:
 export class Arrow2RightSymbol implements ISymbolClass {
   type: SymbolType = 'arrow2Right';
   /* eslint-disable max-len */
-  pathStr: string = 'M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5';
+  pathStr: string = 'M -0.25 -0.5 l 0.25 0 l -0.25 0.5';
 
   draw(ctx: IContext2d, size: number, transX: number, transY: number) {
     const r = size / 4;

packages/vrender/src/graphic/builtin-symbol/arrow2-up.ts

@@ -0,0 +1,38 @@
+import type { IBounds } from '@visactor/vutils';
+import type { IContext2d, SymbolType, ISymbolClass } from '../../interface';
+
+export function arrow2Up(ctx: IContext2d, r: number, transX: number, transY: number) {
+  const r2 = r * 2;
+  ctx.moveTo(transX - r2, transY + r);
+  ctx.lineTo(transX, transY - r);
+  ctx.lineTo(transX + r2, transY + r);
+
+  return true;
+}
+
+// 以中心为锚点，size为circle外接正方形的面积
+export class Arrow2UpSymbol implements ISymbolClass {
+  type: SymbolType = 'arrow2Up';
+  /* eslint-disable max-len */
+  pathStr: string = 'M -0.5 0.25 L 0 -0.25 l 0.5 0.25';
+
+  draw(ctx: IContext2d, size: number, transX: number, transY: number) {
+    const r = size / 4;
+    return arrow2Up(ctx, r, transX, transY);
+  }
+
+  drawOffset(ctx: IContext2d, size: number, transX: number, transY: number, offset: number) {
+    const r = size / 4 + offset;
+    return arrow2Up(ctx, r, transX, transY);
+  }
+
+  bounds(size: number, bounds: IBounds) {
+    const r = size / 2;
+    bounds.x1 = -r;
+    bounds.x2 = r;
+    bounds.y1 = -r;
+    bounds.y2 = r;
+  }
+}
+
+export default new Arrow2UpSymbol();

packages/vrender/src/graphic/builtin-symbol/close.ts

@@ -0,0 +1,43 @@
+import type { IBounds } from '@visactor/vutils';
+import { tau } from '@visactor/vutils';
+import type { IContext2d, SymbolType, ISymbolClass, IPath2D } from '../../interface';
+
+export function close(ctx: IContext2d, r: number, x: number, y: number, z?: number) {
+  ctx.moveTo(x - r, y - r);
+  ctx.lineTo(x + r, y + r);
+
+  ctx.moveTo(x + r, y - r);
+  ctx.lineTo(x - r, y + r);
+  return true;
+}
+
+// 以中心为锚点，size为circle外接正方形的面积
+export class CloseSymbol implements ISymbolClass {
+  type: SymbolType = 'close';
+  pathStr: string = 'M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5';
+
+  draw(ctx: IContext2d, size: number, x: number, y: number, z?: number) {
+    const r = size / 2;
+    return close(ctx, r, x, y, z);
+  }
+
+  drawOffset(ctx: IContext2d, size: number, x: number, y: number, offset: number, z?: number) {
+    const r = size / 2 + offset;
+    return close(ctx, r, x, y, z);
+  }
+
+  drawToSvgPath(size: number, x: number, y: number, z?: number): string {
+    const r = size / 2;
+    return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
+  }
+
+  bounds(size: number, bounds: IBounds) {
+    const r = size / 2;
+    bounds.x1 = -r;
+    bounds.x2 = r;
+    bounds.y1 = -r;
+    bounds.y2 = r;
+  }
+}
+
+export default new CloseSymbol();

packages/vrender/src/graphic/builtin-symbol/index.ts

@@ -15,6 +15,11 @@ import triangleDown from './triangle-down';
 import thinTriangle from './thin-triangle';
 import arrow2Left from './arrow2-left';
 import arrow2Right from './arrow2-right';
+import arrow2Up from './arrow2-up';
+import arrow2Down from './arrow2-down';
+import lineV from './line-v';
+import lineH from './line-h';
+import close from './close';
 import rect from './rect';
 import type { ISymbolClass } from '../../interface';
 
@@ -36,7 +41,12 @@ export const builtinSymbols = [
   triangleDown,
   arrow2Left,
   arrow2Right,
-  rect
+  arrow2Up,
+  arrow2Down,
+  rect,
+  lineV,
+  lineH,
+  close
 ];
 export const builtinSymbolsMap: Record<string, ISymbolClass> = {};
 

packages/vrender/src/graphic/builtin-symbol/line-h.ts

@@ -0,0 +1,40 @@
+import type { IBounds } from '@visactor/vutils';
+import { tau } from '@visactor/vutils';
+import type { IContext2d, SymbolType, ISymbolClass, IPath2D } from '../../interface';
+
+export function lineH(ctx: IContext2d, r: number, x: number, y: number, z?: number) {
+  ctx.moveTo(x - r, y);
+  ctx.lineTo(x + r, y);
+  return true;
+}
+
+// 以中心为锚点，size为circle外接正方形的面积
+export class LineHSymbol implements ISymbolClass {
+  type: SymbolType = 'lineH';
+  pathStr: string = 'M-0.5,0L0.5,0';
+
+  draw(ctx: IContext2d, size: number, x: number, y: number, z?: number) {
+    const r = size / 2;
+    return lineH(ctx, r, x, y, z);
+  }
+
+  drawOffset(ctx: IContext2d, size: number, x: number, y: number, offset: number, z?: number) {
+    const r = size / 2 + offset;
+    return lineH(ctx, r, x, y, z);
+  }
+
+  drawToSvgPath(size: number, x: number, y: number, z?: number): string {
+    const r = size / 2;
+    return `M ${x - r}, ${y} L ${x + r},${y}`;
+  }
+
+  bounds(size: number, bounds: IBounds) {
+    const r = size / 2;
+    bounds.x1 = -r;
+    bounds.x2 = r;
+    bounds.y1 = -r;
+    bounds.y2 = r;
+  }
+}
+
+export default new LineHSymbol();

packages/vrender/src/graphic/builtin-symbol/line-v.ts

@@ -0,0 +1,40 @@
+import type { IBounds } from '@visactor/vutils';
+import { tau } from '@visactor/vutils';
+import type { IContext2d, SymbolType, ISymbolClass, IPath2D } from '../../interface';
+
+export function lineV(ctx: IContext2d, r: number, x: number, y: number, z?: number) {
+  ctx.moveTo(x, y - r);
+  ctx.lineTo(x, y + r);
+  return true;
+}
+
+// 以中心为锚点，size为circle外接正方形的面积
+export class LineVSymbol implements ISymbolClass {
+  type: SymbolType = 'lineV';
+  pathStr: string = 'M0,-0.5L0,0.5';
+
+  draw(ctx: IContext2d, size: number, x: number, y: number, z?: number) {
+    const r = size / 2;
+    return lineV(ctx, r, x, y, z);
+  }
+
+  drawOffset(ctx: IContext2d, size: number, x: number, y: number, offset: number, z?: number) {
+    const r = size / 2 + offset;
+    return lineV(ctx, r, x, y, z);
+  }
+
+  drawToSvgPath(size: number, x: number, y: number, z?: number): string {
+    const r = size / 2;
+    return `M ${x}, ${y - r} L ${x},${y + r}`;
+  }
+
+  bounds(size: number, bounds: IBounds) {
+    const r = size / 2;
+    bounds.x1 = -r;
+    bounds.x2 = r;
+    bounds.y1 = -r;
+    bounds.y2 = r;
+  }
+}
+
+export default new LineVSymbol();