Skip to content

Commit

Permalink
feat: symbol support more type and support svg format, closed #110 cl…
Browse files Browse the repository at this point in the history
…osed #313
  • Loading branch information
neuqzxy committed Aug 14, 2023
1 parent 4bfea19 commit d470d5b
Show file tree
Hide file tree
Showing 19 changed files with 500 additions and 38 deletions.
15 changes: 15 additions & 0 deletions common/config/rush/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion docs/demos/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
84 changes: 67 additions & 17 deletions docs/demos/src/pages/symbol.ts

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion packages/vrender/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand Down
38 changes: 38 additions & 0 deletions packages/vrender/src/graphic/builtin-symbol/arrow2-down.ts
Original file line number Diff line number Diff line change
@@ -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();
2 changes: 1 addition & 1 deletion packages/vrender/src/graphic/builtin-symbol/arrow2-left.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
38 changes: 38 additions & 0 deletions packages/vrender/src/graphic/builtin-symbol/arrow2-up.ts
Original file line number Diff line number Diff line change
@@ -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();
43 changes: 43 additions & 0 deletions packages/vrender/src/graphic/builtin-symbol/close.ts
Original file line number Diff line number Diff line change
@@ -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();
12 changes: 11 additions & 1 deletion packages/vrender/src/graphic/builtin-symbol/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -36,7 +41,12 @@ export const builtinSymbols = [
triangleDown,
arrow2Left,
arrow2Right,
rect
arrow2Up,
arrow2Down,
rect,
lineV,
lineH,
close
];
export const builtinSymbolsMap: Record<string, ISymbolClass> = {};

Expand Down
40 changes: 40 additions & 0 deletions packages/vrender/src/graphic/builtin-symbol/line-h.ts
Original file line number Diff line number Diff line change
@@ -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();
40 changes: 40 additions & 0 deletions packages/vrender/src/graphic/builtin-symbol/line-v.ts
Original file line number Diff line number Diff line change
@@ -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();
Loading

0 comments on commit d470d5b

Please sign in to comment.