@visactor/vrender-core 0.21.0-alpha.12 → 0.21.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/animate/Ticker/default-ticker.d.ts +2 -4
- package/cjs/animate/Ticker/default-ticker.js +5 -8
- package/cjs/animate/Ticker/default-ticker.js.map +1 -1
- package/cjs/animate/custom-animate.d.ts +0 -2
- package/cjs/animate/custom-animate.js +2 -11
- package/cjs/animate/custom-animate.js.map +1 -1
- package/cjs/color-string/interpolate.js +1 -1
- package/cjs/color-string/store.js +1 -1
- package/cjs/common/3d-interceptor.js +1 -2
- package/cjs/common/canvas-utils.js +1 -0
- package/cjs/common/render-command-list.js +1 -2
- package/cjs/common/simplify.js +2 -1
- package/cjs/common/text.js +1 -1
- package/cjs/common/utils.d.ts +0 -1
- package/cjs/common/utils.js +3 -10
- package/cjs/common/utils.js.map +1 -1
- package/cjs/core/contributions/textMeasure/AtextMeasure.d.ts +4 -56
- package/cjs/core/contributions/textMeasure/AtextMeasure.js +14 -107
- package/cjs/core/contributions/textMeasure/AtextMeasure.js.map +1 -1
- package/cjs/core/contributions/textMeasure/layout.d.ts +3 -8
- package/cjs/core/contributions/textMeasure/layout.js +44 -50
- package/cjs/core/contributions/textMeasure/layout.js.map +1 -1
- package/cjs/core/global.d.ts +3 -0
- package/cjs/core/global.js +7 -1
- package/cjs/core/global.js.map +1 -1
- package/cjs/core/stage.d.ts +0 -2
- package/cjs/core/stage.js +5 -9
- package/cjs/core/stage.js.map +1 -1
- package/cjs/graphic/builtin-symbol/arrow.js +2 -2
- package/cjs/graphic/builtin-symbol/arrow.js.map +1 -1
- package/cjs/graphic/builtin-symbol/arrow2-down.js +2 -2
- package/cjs/graphic/builtin-symbol/arrow2-down.js.map +1 -1
- package/cjs/graphic/builtin-symbol/arrow2-left.js +2 -2
- package/cjs/graphic/builtin-symbol/arrow2-left.js.map +1 -1
- package/cjs/graphic/builtin-symbol/arrow2-right.js +2 -2
- package/cjs/graphic/builtin-symbol/arrow2-right.js.map +1 -1
- package/cjs/graphic/builtin-symbol/arrow2-up.js +2 -2
- package/cjs/graphic/builtin-symbol/arrow2-up.js.map +1 -1
- package/cjs/graphic/builtin-symbol/base.d.ts +0 -1
- package/cjs/graphic/builtin-symbol/base.js +0 -3
- package/cjs/graphic/builtin-symbol/base.js.map +1 -1
- package/cjs/graphic/builtin-symbol/circle.js +3 -3
- package/cjs/graphic/builtin-symbol/circle.js.map +1 -1
- package/cjs/graphic/builtin-symbol/close.js +3 -3
- package/cjs/graphic/builtin-symbol/close.js.map +1 -1
- package/cjs/graphic/builtin-symbol/cross.js +2 -2
- package/cjs/graphic/builtin-symbol/cross.js.map +1 -1
- package/cjs/graphic/builtin-symbol/diamond.js +3 -3
- package/cjs/graphic/builtin-symbol/diamond.js.map +1 -1
- package/cjs/graphic/builtin-symbol/line-h.js +3 -3
- package/cjs/graphic/builtin-symbol/line-h.js.map +1 -1
- package/cjs/graphic/builtin-symbol/line-v.js +3 -3
- package/cjs/graphic/builtin-symbol/line-v.js.map +1 -1
- package/cjs/graphic/builtin-symbol/square.js +2 -2
- package/cjs/graphic/builtin-symbol/square.js.map +1 -1
- package/cjs/graphic/builtin-symbol/star.js +2 -2
- package/cjs/graphic/builtin-symbol/star.js.map +1 -1
- package/cjs/graphic/builtin-symbol/stroke.js +2 -2
- package/cjs/graphic/builtin-symbol/stroke.js.map +1 -1
- package/cjs/graphic/builtin-symbol/thin-triangle.js +2 -2
- package/cjs/graphic/builtin-symbol/thin-triangle.js.map +1 -1
- package/cjs/graphic/builtin-symbol/triangle-down.js +2 -2
- package/cjs/graphic/builtin-symbol/triangle-down.js.map +1 -1
- package/cjs/graphic/builtin-symbol/triangle-left.js +2 -2
- package/cjs/graphic/builtin-symbol/triangle-left.js.map +1 -1
- package/cjs/graphic/builtin-symbol/triangle-right.js +2 -2
- package/cjs/graphic/builtin-symbol/triangle-right.js.map +1 -1
- package/cjs/graphic/builtin-symbol/triangle-up.js +2 -2
- package/cjs/graphic/builtin-symbol/triangle-up.js.map +1 -1
- package/cjs/graphic/builtin-symbol/utils.d.ts +0 -1
- package/cjs/graphic/builtin-symbol/utils.js +3 -6
- package/cjs/graphic/builtin-symbol/utils.js.map +1 -1
- package/cjs/graphic/builtin-symbol/wedge.js +2 -2
- package/cjs/graphic/builtin-symbol/wedge.js.map +1 -1
- package/cjs/graphic/builtin-symbol/wye.js +2 -2
- package/cjs/graphic/builtin-symbol/wye.js.map +1 -1
- package/cjs/graphic/config.d.ts +1 -1
- package/cjs/graphic/config.js +3 -7
- package/cjs/graphic/config.js.map +1 -1
- package/cjs/graphic/richtext/paragraph.js +1 -3
- package/cjs/graphic/richtext/paragraph.js.map +1 -1
- package/cjs/graphic/text.d.ts +11 -11
- package/cjs/graphic/text.js +170 -104
- package/cjs/graphic/text.js.map +1 -1
- package/cjs/graphic/wrap-text.js +4 -16
- package/cjs/graphic/wrap-text.js.map +1 -1
- package/cjs/interface/animate.d.ts +1 -3
- package/cjs/interface/animate.js.map +1 -1
- package/cjs/interface/context.d.ts +0 -1
- package/cjs/interface/context.js.map +1 -1
- package/cjs/interface/global.d.ts +1 -0
- package/cjs/interface/global.js.map +1 -1
- package/cjs/interface/graphic/text.d.ts +3 -11
- package/cjs/interface/graphic/text.js +1 -6
- package/cjs/interface/graphic/text.js.map +1 -1
- package/cjs/interface/graphic.d.ts +0 -1
- package/cjs/interface/graphic.js.map +1 -1
- package/cjs/interface/stage.d.ts +0 -1
- package/cjs/interface/stage.js.map +1 -1
- package/cjs/interface/text.d.ts +1 -9
- package/cjs/interface/text.js.map +1 -1
- package/cjs/render/contributions/render/contributions/arc-contribution-render.js +2 -2
- package/cjs/render/contributions/render/contributions/arc-contribution-render.js.map +1 -1
- package/cjs/render/contributions/render/contributions/circle-contribution-render.js +2 -2
- package/cjs/render/contributions/render/contributions/circle-contribution-render.js.map +1 -1
- package/cjs/render/contributions/render/contributions/image-contribution-render.d.ts +1 -1
- package/cjs/render/contributions/render/contributions/image-contribution-render.js +3 -2
- package/cjs/render/contributions/render/contributions/image-contribution-render.js.map +1 -1
- package/cjs/render/contributions/render/contributions/rect-contribution-render.js +2 -2
- package/cjs/render/contributions/render/contributions/rect-contribution-render.js.map +1 -1
- package/cjs/render/contributions/render/contributions/symbol-contribution-render.js +2 -2
- package/cjs/render/contributions/render/contributions/symbol-contribution-render.js.map +1 -1
- package/cjs/render/contributions/render/image-render.js +6 -4
- package/cjs/render/contributions/render/image-render.js.map +1 -1
- package/cjs/render/contributions/render/text-render.d.ts +1 -1
- package/cjs/render/contributions/render/text-render.js +46 -24
- package/cjs/render/contributions/render/text-render.js.map +1 -1
- package/cjs/resource-loader/loader.js +1 -1
- package/cjs/resource-loader/loader.js.map +1 -1
- package/dist/index.es.js +549 -568
- package/es/animate/Ticker/default-ticker.d.ts +2 -4
- package/es/animate/Ticker/default-ticker.js +6 -9
- package/es/animate/Ticker/default-ticker.js.map +1 -1
- package/es/animate/custom-animate.d.ts +0 -2
- package/es/animate/custom-animate.js +2 -11
- package/es/animate/custom-animate.js.map +1 -1
- package/es/color-string/interpolate.js +1 -1
- package/es/color-string/store.js +1 -1
- package/es/common/3d-interceptor.js +1 -2
- package/es/common/canvas-utils.js +2 -1
- package/es/common/render-command-list.js +1 -2
- package/es/common/simplify.js +2 -1
- package/es/common/text.js +1 -1
- package/es/common/utils.d.ts +0 -1
- package/es/common/utils.js +2 -7
- package/es/common/utils.js.map +1 -1
- package/es/core/contributions/textMeasure/AtextMeasure.d.ts +4 -56
- package/es/core/contributions/textMeasure/AtextMeasure.js +13 -108
- package/es/core/contributions/textMeasure/AtextMeasure.js.map +1 -1
- package/es/core/contributions/textMeasure/layout.d.ts +3 -8
- package/es/core/contributions/textMeasure/layout.js +44 -50
- package/es/core/contributions/textMeasure/layout.js.map +1 -1
- package/es/core/global.d.ts +3 -0
- package/es/core/global.js +8 -1
- package/es/core/global.js.map +1 -1
- package/es/core/stage.d.ts +0 -2
- package/es/core/stage.js +5 -9
- package/es/core/stage.js.map +1 -1
- package/es/graphic/builtin-symbol/arrow.js +2 -2
- package/es/graphic/builtin-symbol/arrow.js.map +1 -1
- package/es/graphic/builtin-symbol/arrow2-down.js +2 -2
- package/es/graphic/builtin-symbol/arrow2-down.js.map +1 -1
- package/es/graphic/builtin-symbol/arrow2-left.js +2 -2
- package/es/graphic/builtin-symbol/arrow2-left.js.map +1 -1
- package/es/graphic/builtin-symbol/arrow2-right.js +2 -2
- package/es/graphic/builtin-symbol/arrow2-right.js.map +1 -1
- package/es/graphic/builtin-symbol/arrow2-up.js +2 -2
- package/es/graphic/builtin-symbol/arrow2-up.js.map +1 -1
- package/es/graphic/builtin-symbol/base.d.ts +0 -1
- package/es/graphic/builtin-symbol/base.js +0 -3
- package/es/graphic/builtin-symbol/base.js.map +1 -1
- package/es/graphic/builtin-symbol/circle.js +3 -3
- package/es/graphic/builtin-symbol/circle.js.map +1 -1
- package/es/graphic/builtin-symbol/close.js +3 -3
- package/es/graphic/builtin-symbol/close.js.map +1 -1
- package/es/graphic/builtin-symbol/cross.js +2 -2
- package/es/graphic/builtin-symbol/cross.js.map +1 -1
- package/es/graphic/builtin-symbol/diamond.js +3 -3
- package/es/graphic/builtin-symbol/diamond.js.map +1 -1
- package/es/graphic/builtin-symbol/line-h.js +3 -3
- package/es/graphic/builtin-symbol/line-h.js.map +1 -1
- package/es/graphic/builtin-symbol/line-v.js +3 -3
- package/es/graphic/builtin-symbol/line-v.js.map +1 -1
- package/es/graphic/builtin-symbol/square.js +2 -2
- package/es/graphic/builtin-symbol/square.js.map +1 -1
- package/es/graphic/builtin-symbol/star.js +2 -2
- package/es/graphic/builtin-symbol/star.js.map +1 -1
- package/es/graphic/builtin-symbol/stroke.js +2 -2
- package/es/graphic/builtin-symbol/stroke.js.map +1 -1
- package/es/graphic/builtin-symbol/thin-triangle.js +2 -2
- package/es/graphic/builtin-symbol/thin-triangle.js.map +1 -1
- package/es/graphic/builtin-symbol/triangle-down.js +2 -2
- package/es/graphic/builtin-symbol/triangle-down.js.map +1 -1
- package/es/graphic/builtin-symbol/triangle-left.js +2 -2
- package/es/graphic/builtin-symbol/triangle-left.js.map +1 -1
- package/es/graphic/builtin-symbol/triangle-right.js +2 -2
- package/es/graphic/builtin-symbol/triangle-right.js.map +1 -1
- package/es/graphic/builtin-symbol/triangle-up.js +2 -2
- package/es/graphic/builtin-symbol/triangle-up.js.map +1 -1
- package/es/graphic/builtin-symbol/utils.d.ts +0 -1
- package/es/graphic/builtin-symbol/utils.js +4 -7
- package/es/graphic/builtin-symbol/utils.js.map +1 -1
- package/es/graphic/builtin-symbol/wedge.js +2 -2
- package/es/graphic/builtin-symbol/wedge.js.map +1 -1
- package/es/graphic/builtin-symbol/wye.js +2 -2
- package/es/graphic/builtin-symbol/wye.js.map +1 -1
- package/es/graphic/config.d.ts +1 -1
- package/es/graphic/config.js +2 -8
- package/es/graphic/config.js.map +1 -1
- package/es/graphic/richtext/paragraph.js +2 -4
- package/es/graphic/richtext/paragraph.js.map +1 -1
- package/es/graphic/text.d.ts +11 -11
- package/es/graphic/text.js +165 -103
- package/es/graphic/text.js.map +1 -1
- package/es/graphic/wrap-text.js +4 -16
- package/es/graphic/wrap-text.js.map +1 -1
- package/es/interface/animate.d.ts +1 -3
- package/es/interface/animate.js.map +1 -1
- package/es/interface/context.d.ts +0 -1
- package/es/interface/context.js.map +1 -1
- package/es/interface/global.d.ts +1 -0
- package/es/interface/global.js.map +1 -1
- package/es/interface/graphic/text.d.ts +3 -11
- package/es/interface/graphic/text.js +1 -6
- package/es/interface/graphic/text.js.map +1 -1
- package/es/interface/graphic.d.ts +0 -1
- package/es/interface/graphic.js.map +1 -1
- package/es/interface/stage.d.ts +0 -1
- package/es/interface/stage.js.map +1 -1
- package/es/interface/text.d.ts +1 -9
- package/es/interface/text.js.map +1 -1
- package/es/render/contributions/render/contributions/arc-contribution-render.js +2 -2
- package/es/render/contributions/render/contributions/arc-contribution-render.js.map +1 -1
- package/es/render/contributions/render/contributions/circle-contribution-render.js +2 -2
- package/es/render/contributions/render/contributions/circle-contribution-render.js.map +1 -1
- package/es/render/contributions/render/contributions/image-contribution-render.d.ts +1 -1
- package/es/render/contributions/render/contributions/image-contribution-render.js +3 -2
- package/es/render/contributions/render/contributions/image-contribution-render.js.map +1 -1
- package/es/render/contributions/render/contributions/rect-contribution-render.js +2 -2
- package/es/render/contributions/render/contributions/rect-contribution-render.js.map +1 -1
- package/es/render/contributions/render/contributions/symbol-contribution-render.js +2 -2
- package/es/render/contributions/render/contributions/symbol-contribution-render.js.map +1 -1
- package/es/render/contributions/render/image-render.js +6 -4
- package/es/render/contributions/render/image-render.js.map +1 -1
- package/es/render/contributions/render/text-render.d.ts +1 -1
- package/es/render/contributions/render/text-render.js +45 -23
- package/es/render/contributions/render/text-render.js.map +1 -1
- package/es/resource-loader/loader.js +1 -1
- package/es/resource-loader/loader.js.map +1 -1
- package/package.json +3 -4
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { IAABBBounds } from '@visactor/vutils';
|
|
1
2
|
import type { IGraphicAttribute, IGraphic } from '../graphic';
|
|
2
3
|
export interface TextLayoutBBox {
|
|
3
4
|
width: number;
|
|
@@ -10,9 +11,6 @@ export interface LayoutItemType {
|
|
|
10
11
|
leftOffset?: number;
|
|
11
12
|
topOffset?: number;
|
|
12
13
|
width: number;
|
|
13
|
-
ascent: number;
|
|
14
|
-
descent: number;
|
|
15
|
-
keepCenterInLine: boolean;
|
|
16
14
|
}
|
|
17
15
|
export interface SimplifyLayoutType {
|
|
18
16
|
lines: LayoutItemType[];
|
|
@@ -27,15 +25,9 @@ export interface LayoutType {
|
|
|
27
25
|
textAlign: TextAlignType;
|
|
28
26
|
textBaseline: TextBaselineType;
|
|
29
27
|
}
|
|
30
|
-
export declare enum MeasureModeEnum {
|
|
31
|
-
estimate = 0,
|
|
32
|
-
actualBounding = 1,
|
|
33
|
-
fontBounding = 2
|
|
34
|
-
}
|
|
35
28
|
export type ITextAttribute = {
|
|
36
29
|
text: string | number | string[] | number[];
|
|
37
30
|
maxLineWidth: number;
|
|
38
|
-
maxWidth: number;
|
|
39
31
|
textAlign: TextAlignType;
|
|
40
32
|
textBaseline: TextBaselineType;
|
|
41
33
|
fontSize: number;
|
|
@@ -60,8 +52,6 @@ export type ITextAttribute = {
|
|
|
60
52
|
underlineDash: number[];
|
|
61
53
|
underlineOffset: number;
|
|
62
54
|
disableAutoClipedPoptip?: boolean;
|
|
63
|
-
measureMode?: MeasureModeEnum;
|
|
64
|
-
keepCenterInLine?: boolean;
|
|
65
55
|
};
|
|
66
56
|
export type ITextCache = {
|
|
67
57
|
clipedText?: string;
|
|
@@ -88,6 +78,8 @@ export interface IText extends IGraphic<ITextGraphicAttribute> {
|
|
|
88
78
|
cache?: ITextCache;
|
|
89
79
|
getBaselineMapAlign: () => Record<string, string>;
|
|
90
80
|
getAlignMapBaseline: () => Record<string, string>;
|
|
81
|
+
updateMultilineAABBBounds: (text: (number | string)[]) => IAABBBounds;
|
|
82
|
+
updateSingallineAABBBounds: (text: number | string) => IAABBBounds;
|
|
91
83
|
}
|
|
92
84
|
export type TextAlignType = 'left' | 'right' | 'center' | 'start' | 'end';
|
|
93
85
|
export type TextBaselineType = 'top' | 'middle' | 'bottom' | 'alphabetic';
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var MeasureModeEnum;
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: !0
|
|
7
|
-
})
|
|
8
|
-
MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding",
|
|
9
|
-
MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
|
|
10
|
-
}(MeasureModeEnum = exports.MeasureModeEnum || (exports.MeasureModeEnum = {}));
|
|
5
|
+
});
|
|
11
6
|
//# sourceMappingURL=text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interface/graphic/text.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/interface/graphic/text.ts"],"names":[],"mappings":"","file":"text.js","sourcesContent":["import type { IAABBBounds } from '@visactor/vutils';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\n\nexport interface TextLayoutBBox {\n width: number; // 包围盒的宽度\n height: number; // 包围盒的高度\n xOffset: number;\n yOffset: number;\n}\n\nexport interface LayoutItemType {\n str: string; // 这行的字符串\n leftOffset?: number; // 该行距离左侧的偏移\n topOffset?: number; // 该行距离右侧的偏移\n width: number;\n}\n\nexport interface SimplifyLayoutType {\n lines: LayoutItemType[];\n}\n\nexport interface LayoutType {\n bbox: TextLayoutBBox;\n lines: LayoutItemType[];\n fontFamily: string;\n fontSize: number;\n fontWeight?: string | number;\n lineHeight: number;\n textAlign: TextAlignType;\n textBaseline: TextBaselineType;\n}\n\nexport type ITextAttribute = {\n text: string | number | string[] | number[];\n maxLineWidth: number;\n textAlign: TextAlignType;\n textBaseline: TextBaselineType;\n fontSize: number;\n fontFamily: string;\n fontWeight: string | number;\n ellipsis: boolean | string;\n fontVariant: string;\n fontStyle: string;\n lineHeight: number | string;\n underline: number;\n lineThrough: number;\n scaleIn3d: boolean;\n direction: 'horizontal' | 'vertical';\n verticalMode: number; // 垂直布局的模式,0代表默认(横向textAlign,纵向textBaseline),1代表特殊(横向textBaseline,纵向textAlign)\n wordBreak: 'break-word' | 'break-all' | 'keep-all';\n ignoreBuf: boolean;\n heightLimit: number;\n lineClamp: number;\n wrap: boolean;\n whiteSpace: 'normal' | 'no-wrap';\n suffixPosition: 'start' | 'end' | 'middle';\n underlineDash: number[];\n underlineOffset: number;\n // textDecoration: number;\n // textDecorationWidth: number;\n // padding?: number | number[];\n disableAutoClipedPoptip?: boolean;\n};\nexport type ITextCache = {\n // 单行文本的时候缓存用\n clipedText?: string;\n clipedWidth?: number;\n // 多行文本的布局缓存\n layoutData?: LayoutType;\n verticalList?: { text: string; width?: number; direction: number }[][];\n};\n\nexport type ITextGraphicAttribute = Partial<IGraphicAttribute> & Partial<ITextAttribute>;\n\nexport type IWrapTextGraphicAttribute = ITextGraphicAttribute & {\n heightLimit?: number;\n lineClamp?: number;\n};\n\nexport interface IText extends IGraphic<ITextGraphicAttribute> {\n // 判断是否被ellipisised\n clipedText?: string;\n clipedWidth?: number;\n cliped?: boolean;\n multilineLayout?: LayoutType;\n font?: string;\n isMultiLine: boolean;\n cache?: ITextCache;\n\n getBaselineMapAlign: () => Record<string, string>;\n getAlignMapBaseline: () => Record<string, string>;\n\n updateMultilineAABBBounds: (text: (number | string)[]) => IAABBBounds;\n updateSingallineAABBBounds: (text: number | string) => IAABBBounds;\n}\n\nexport type TextAlignType = 'left' | 'right' | 'center' | 'start' | 'end';\nexport type TextBaselineType = 'top' | 'middle' | 'bottom' | 'alphabetic';\n"]}
|
|
@@ -170,7 +170,6 @@ export type IGraphicAttribute = IDebugType & IGraphicStyle & ITransform & {
|
|
|
170
170
|
globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';
|
|
171
171
|
overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';
|
|
172
172
|
fillStrokeOrder: number;
|
|
173
|
-
keepStrokeScale: boolean;
|
|
174
173
|
};
|
|
175
174
|
export interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {
|
|
176
175
|
attribute: Partial<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget } from './animate';\nimport type { IColor } from './color';\nimport type { IGroup } from './graphic/group';\nimport type { IShadowRoot } from './graphic/shadow-root';\nimport type { ILayer } from './layer';\nimport type { INode } from './node-tree';\nimport type { ICustomPath2D } from './path';\nimport type { IStage } from './stage';\nimport type { IGlyphGraphicAttribute } from './graphic/glyph';\nimport type { IContainPointMode } from '../common/enums';\nimport type { IFace3d } from './graphic/face3d';\nimport type { IPickerService } from './picker';\n\ntype IStrokeSeg = {\n start: number; // 百分比\n // end和length二选一\n end: number; // 百分比\n length: number; // 像素长度\n};\n\n// TODO 最后加一个any\nexport type GraphicType =\n | 'area'\n | 'circle'\n | 'ellipse'\n | 'line'\n | 'rect'\n | 'rect3d'\n | 'path'\n | 'richtext'\n | 'text'\n | 'arc'\n | 'arc3d'\n | 'image'\n | 'symbol'\n | 'group'\n | 'shadowroot'\n | 'polygon'\n | 'pyramid3d'\n | 'glyph';\n\n// Cursor style\n// See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\nexport type Cursor =\n | 'auto'\n | 'default'\n | 'none'\n | 'context-menu'\n | 'help'\n | 'pointer'\n | 'progress'\n | 'wait'\n | 'cell'\n | 'crosshair'\n | 'text'\n | 'vertical-text'\n | 'alias'\n | 'copy'\n | 'move'\n | 'no-drop'\n | 'not-allowed'\n | 'grab'\n | 'grabbing'\n | 'all-scroll'\n | 'col-resize'\n | 'row-resize'\n | 'n-resize'\n | 'e-resize'\n | 's-resize'\n | 'w-resize'\n | 'ne-resize'\n | 'nw-resize'\n | 'se-resize'\n | 'sw-resize'\n | 'ew-resize'\n | 'ns-resize'\n | 'nesw-resize'\n | 'nwse-resize'\n | 'zoom-in'\n | 'zoom-out';\n\nexport type ITransform = {\n x: number;\n y: number;\n z: number;\n dx: number;\n dy: number;\n dz: number;\n scrollX: number;\n scrollY: number;\n scaleX: number;\n scaleY: number;\n scaleZ: number;\n angle: number;\n alpha: number;\n beta: number;\n scaleCenter: [number | string, number | string];\n anchor: [number | string, number | string]; // 基于AABB的锚点位置,用于简单的定位某些path\n anchor3d: [number | string, number | string, number] | [number | string, number | string]; // 3d的锚点位置\n postMatrix: IMatrix;\n};\n\nexport type IFillType = boolean | string | IColor;\nexport type IFillStyle = {\n fillOpacity: number;\n shadowBlur: number;\n shadowColor: string;\n shadowOffsetX: number;\n shadowOffsetY: number;\n fill: IFillType;\n};\n\nexport type ILayout = {\n alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center';\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n distance: number | string;\n visible?: boolean;\n};\n\nexport type IStrokeType = boolean | string | IColor | null;\nexport type IStrokeStyle = {\n outerBorder: Partial<IBorderStyle>;\n innerBorder: Partial<IBorderStyle>;\n strokeOpacity: number;\n lineDash: number[];\n lineDashOffset: number;\n lineWidth: number;\n lineCap: CanvasLineCap;\n lineJoin: CanvasLineJoin;\n miterLimit: number;\n // 描边的boundsBuffer,用于控制bounds的buffer\n strokeBoundsBuffer: number;\n /**\n * stroke - true 全描边\n * stroke - false 不描边\n * stroke 为数值类型,适用于rect\\arc等图形,用于配置部分描边的场景,其中\n *\n * 0b00000 - 不描边\n * 0b000001 - top\n * 0b000010 - right\n * 0b000100 - bottom\n * 0b001000 - left\n * 相应的:\n * 0b000011 - top + right\n * 0b000111 - top + right + bottom\n * 0b001111 - 全描边\n *\n * stroke - boolean[],适用于rect\\arc等图形,用于配置部分描边的场景\n */\n stroke: IStrokeType[] | IStrokeType;\n};\n\ntype TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';\n\nexport type IConnectedStyle = {\n // 连接,取零或者断开\n connectedType: 'connect' | 'zero' | 'none';\n connectedStyle: {\n stroke: IStrokeStyle['stroke'];\n strokeOpacity: IStrokeStyle['strokeOpacity'];\n lineDash: IStrokeStyle['lineDash'];\n lineDashOffset: IStrokeStyle['lineDashOffset'];\n lineCap: IStrokeStyle['lineCap'];\n lineJoin: IStrokeStyle['lineJoin'];\n lineWidth: IStrokeStyle['lineWidth'];\n fill: IFillStyle['fill'];\n fillOpacity: IFillStyle['fillOpacity'];\n };\n connectedX: number;\n connectedY: number;\n};\n\nexport type IBackgroundConfig = {\n stroke?: string | boolean;\n fill?: string | boolean;\n lineWidth?: number;\n cornerRadius?: number;\n expandX?: number;\n expandY?: number;\n};\n\ntype IBackgroundType = string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig;\n\nexport interface SimpleDomStyleOptions {\n width: number; // 容器的宽度\n height: number; // 容器的高度\n style?:\n | string\n | Record<string, any>\n | ((\n pos: { top: number; left: number; width: number; height: number },\n graphic: IGraphic,\n wrapContainer: HTMLElement\n ) => Record<string, any>); // 容器的样式\n}\n\nexport interface CommonDomOptions {\n id?: string;\n container: string | HTMLElement | null; // id或者dom\n visible?: boolean;\n pointerEvents?: boolean | string;\n anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;\n}\n\nexport type IGraphicStyle = ILayout &\n IFillStyle &\n IStrokeStyle &\n IPickStyle & {\n forceBoundsWidth: number | (() => number) | undefined;\n forceBoundsHeight: number | (() => number) | undefined;\n opacity: number;\n shadowGraphic?: IGraphic | undefined;\n backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式(与具体图元有关)\n backgroundFit: boolean; // 是否正好填充,只在repeat-x或者repeat-y以及no-repeat的时候生效\n backgroundCornerRadius: number | number[];\n backgroundOpacity: number;\n background:\n | IBackgroundType\n | {\n background: IBackgroundType;\n dx?: number;\n dy?: number;\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n }\n | null; // 背景,可以与fill同时存在\n texture: TextureType | string; // 纹理\n textureColor: string; // 纹理颜色\n textureSize: number; // 纹理大小\n texturePadding: number; // 纹理间隙\n blur: number;\n cursor: Cursor | null; // 鼠标样式\n renderStyle?: 'default' | 'rough' | any;\n // HTML的dom或者string\n html:\n | ({\n dom: string | HTMLElement; // dom字符串或者dom\n } & SimpleDomStyleOptions &\n CommonDomOptions)\n | null;\n react:\n | ({\n element: any; // react场景节点\n } & SimpleDomStyleOptions &\n CommonDomOptions)\n | null;\n };\n\nexport type IPickStyle = {\n // 给stroke模式的pick额外加的buffer,用于外界控制stroke区域的pick范围\n pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n IGraphicStyle &\n ITransform & {\n /**\n * stroke百分比\n */\n strokeSeg: IStrokeSeg | null;\n // 包围盒的padding\n boundsPadding: number | number[];\n /**\n * 选择模式,精确模式,粗糙模式(包围盒模式),自定义模式\n */\n pickMode: 'accurate' | 'imprecise' | 'custom';\n boundsMode: 'accurate' | 'imprecise';\n customPickShape: () => boolean | null;\n /**\n * 是否支持事件拾取,默认为 true。\n * @default true\n */\n pickable: boolean;\n /**\n * 是否支持fill拾取,默认为 true。\n * @experimental\n * @default true\n */\n fillPickable: boolean;\n /**\n * 是否支持stroke拾取,默认为 true。\n * @experimental\n * @default true\n */\n strokePickable: boolean;\n /**\n * 对于 group 节点,是否支持其子元素的事件拾取,默认为 true。\n * 如果 group `pickable` 关闭,`childrenPickable` 开启,那么 group 的子节点仍参与事件拾取\n * @default true\n */\n childrenPickable: boolean;\n /**\n * 元素是否可见。\n * @default true\n */\n visible: boolean;\n zIndex: number;\n layout: any;\n /**\n * 是否隐藏元素(只是绘制的时候不绘制)\n */\n renderable: boolean;\n /**\n * 是否在3d中控制方向\n * false: 不控制方向\n * true: 始终控制方向朝摄像机\n */\n keepDirIn3d?: boolean;\n shadowRootIdx: number;\n shadowPickMode?: 'full' | 'graphic';\n globalZIndex: number;\n globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n // 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\n // 绘制fill和stroke的顺序,为0表示fill先绘制,1表示stroke先绘制\n fillStrokeOrder: number;\n // @since 0.20.15\n // 保持stroke的scale,默认为false,为true的话stroke显示的宽度会随着scale变化\n keepStrokeScale: boolean;\n };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n attribute: Partial<T>;\n _uid: number;\n type: string;\n name: string;\n children: IGraphicJson<T>[];\n}\n\n/** the context of setAttribute */\nexport type ISetAttributeContext = {\n /** type of setAttribute */\n type?: number;\n animationState?: {\n step?: IStep;\n isFirstFrameOfStep?: boolean;\n /** ratio of animation */\n ratio?: number;\n /** is animation end? */\n end?: boolean;\n };\n skipUpdateCallback?: boolean;\n};\n\nexport type IGraphicAnimateParams = {\n slience?: boolean;\n id?: number | string;\n onStart?: () => void;\n onFrame?: (step: IStep, ratio: number) => void;\n onEnd?: () => void;\n onRemove?: () => void;\n interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n};\n\nexport interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>>\n extends INode,\n IAnimateTarget {\n type?: GraphicType;\n numberType?: number;\n stage?: IStage;\n layer?: ILayer;\n shadowRoot?: IShadowRoot;\n glyphHost?: IGraphic<IGlyphGraphicAttribute>;\n backgroundImg?: boolean;\n attachedThemeGraphic?: IGraphic<any>;\n\n bindDom?: Map<\n string | HTMLElement,\n { container: HTMLElement | string; dom: HTMLElement | any; wrapGroup: HTMLDivElement | any; root?: any }\n >;\n\n valid: boolean;\n parent: IGroup | null;\n isContainer?: boolean;\n // 是否是3d模式(是否应用3d视角)\n in3dMode?: boolean;\n\n // 上次更新的stamp\n stamp?: number;\n animationBackUps?: {\n from: Record<string, any>;\n to: Record<string, any>;\n };\n\n attribute: Partial<T>;\n\n /** 用于实现morph动画场景,转换成bezier曲线渲染 */\n pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);\n incremental?: number;\n incrementalAt?: number;\n\n /** 记录state对应的图形属性 */\n states?: Record<string, Partial<T>>;\n normalAttrs?: Partial<T>;\n stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n findFace?: () => IFace3d;\n toggleState: (stateName: string, hasAnimation?: boolean) => void;\n removeState: (stateName: string, hasAnimation?: boolean) => void;\n clearStates: (hasAnimation?: boolean) => void;\n useStates: (states: string[], hasAnimation?: boolean) => void;\n addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n hasState: (stateName?: string) => boolean;\n getState: (stateName: string) => Partial<T>;\n onBeforeAttributeUpdate?: (\n val: any,\n attributes: Partial<T>,\n key: null | string | string[],\n context?: ISetAttributeContext\n ) => T | undefined;\n applyStateAttrs: (attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean) => void;\n updateNormalAttrs: (stateAttrs: Partial<T>) => void;\n\n // get\n readonly AABBBounds: IAABBBounds; // 用于获取当前节点的AABB包围盒\n readonly OBBBounds: IOBBBounds; // 获取OBB包围盒,旋转防重叠需要用\n readonly globalAABBBounds: IAABBBounds; // 全局AABB包围盒\n readonly transMatrix: IMatrix; // 变换矩阵,动态计算\n readonly globalTransMatrix: IMatrix; // 变换矩阵,动态计算\n\n getOffsetXY: (attr?: ITransform) => IPoint;\n\n // function\n containsPoint: (x: number, y: number, mode?: IContainPointMode, picker?: IPickerService) => boolean;\n\n setMode: (mode: '3d' | '2d') => void;\n isValid: () => boolean;\n\n // TODO: transform API\n // 基于当前transform的变换,普通用户尽量别用,拿捏不住的~\n translate: (x: number, y: number) => this;\n translateTo: (x: number, y: number) => this;\n scale: (scaleX: number, scaleY: number, scaleCenter?: IPointLike) => this;\n scaleTo: (scaleX: number, scaleY: number) => this;\n rotate: (angle: number, rotateCenter?: IPointLike) => this;\n rotateTo: (angle: number) => this;\n skewTo: (b: number, c: number) => this;\n addUpdateBoundTag: () => void;\n addUpdateShapeAndBoundsTag: () => void;\n addUpdateLayoutTag: () => void;\n\n update: (d?: { bounds: boolean; trans: boolean }) => void;\n\n // animate\n animate: (params?: IGraphicAnimateParams) => IAnimate;\n\n // 语法糖,可有可无,有的为了首屏性能考虑做成get方法,有的由外界直接托管,内部不赋值\n name?: string;\n\n // 供render处理shape缓存tag\n shouldUpdateShape: () => boolean;\n clearUpdateShapeTag: () => void;\n\n // // 供render缓存shape\n // cacheShape?: ICustomPath2D;\n // // 线段使用的path2D\n // cacheLine?: ISegPath2D | ISegPath2D[];\n // // 面积图使用的path2D\n // cacheArea?: IAreaCacheItem | IAreaCacheItem[];\n\n setAttributes: (params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n initAttributes: (params: Partial<T>) => void;\n\n setAttribute: (key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n setStage: (stage?: IStage, layer?: ILayer) => void;\n onSetStage: (cb: (g: IGraphic, stage: IStage) => void) => void;\n\n shouldUpdateAABBBounds: () => boolean;\n shouldSelfChangeUpdateAABBBounds: () => boolean;\n shouldUpdateGlobalMatrix: () => boolean;\n\n addUpdatePositionTag: () => void;\n addUpdateGlobalPositionTag: () => void;\n\n attachShadow: () => IShadowRoot;\n detachShadow: () => void;\n\n toJson: () => IGraphicJson;\n\n /** 创建pathProxy */\n createPathProxy: (path?: string) => void;\n /** 将图形转换成CustomPath2D */\n toCustomPath?: () => ICustomPath2D;\n\n resources?: Map<\n string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig,\n { state: 'init' | 'loading' | 'success' | 'fail'; data?: HTMLImageElement | HTMLCanvasElement }\n >;\n imageLoadSuccess: (url: string, data: HTMLImageElement) => void;\n imageLoadFail: (url: string) => void;\n\n clone: () => IGraphic;\n stopAnimates: (stopChildren?: boolean) => void;\n getNoWorkAnimateAttr: () => Record<string, number>;\n getGraphicTheme: () => T;\n}\n\nexport interface IRoot extends IGraphic {\n pick: (x: number, y: number) => IGraphic;\n}\n\n/**\n * 动画配置\n */\nexport type IAnimateConfig = {\n duration?: number;\n easing?: EasingType;\n};\n\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget } from './animate';\nimport type { IColor } from './color';\nimport type { IGroup } from './graphic/group';\nimport type { IShadowRoot } from './graphic/shadow-root';\nimport type { ILayer } from './layer';\nimport type { INode } from './node-tree';\nimport type { ICustomPath2D } from './path';\nimport type { IStage } from './stage';\nimport type { IGlyphGraphicAttribute } from './graphic/glyph';\nimport type { IContainPointMode } from '../common/enums';\nimport type { IFace3d } from './graphic/face3d';\nimport type { IPickerService } from './picker';\n\ntype IStrokeSeg = {\n start: number; // 百分比\n // end和length二选一\n end: number; // 百分比\n length: number; // 像素长度\n};\n\n// TODO 最后加一个any\nexport type GraphicType =\n | 'area'\n | 'circle'\n | 'ellipse'\n | 'line'\n | 'rect'\n | 'rect3d'\n | 'path'\n | 'richtext'\n | 'text'\n | 'arc'\n | 'arc3d'\n | 'image'\n | 'symbol'\n | 'group'\n | 'shadowroot'\n | 'polygon'\n | 'pyramid3d'\n | 'glyph';\n\n// Cursor style\n// See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\nexport type Cursor =\n | 'auto'\n | 'default'\n | 'none'\n | 'context-menu'\n | 'help'\n | 'pointer'\n | 'progress'\n | 'wait'\n | 'cell'\n | 'crosshair'\n | 'text'\n | 'vertical-text'\n | 'alias'\n | 'copy'\n | 'move'\n | 'no-drop'\n | 'not-allowed'\n | 'grab'\n | 'grabbing'\n | 'all-scroll'\n | 'col-resize'\n | 'row-resize'\n | 'n-resize'\n | 'e-resize'\n | 's-resize'\n | 'w-resize'\n | 'ne-resize'\n | 'nw-resize'\n | 'se-resize'\n | 'sw-resize'\n | 'ew-resize'\n | 'ns-resize'\n | 'nesw-resize'\n | 'nwse-resize'\n | 'zoom-in'\n | 'zoom-out';\n\nexport type ITransform = {\n x: number;\n y: number;\n z: number;\n dx: number;\n dy: number;\n dz: number;\n scrollX: number;\n scrollY: number;\n scaleX: number;\n scaleY: number;\n scaleZ: number;\n angle: number;\n alpha: number;\n beta: number;\n scaleCenter: [number | string, number | string];\n anchor: [number | string, number | string]; // 基于AABB的锚点位置,用于简单的定位某些path\n anchor3d: [number | string, number | string, number] | [number | string, number | string]; // 3d的锚点位置\n postMatrix: IMatrix;\n};\n\nexport type IFillType = boolean | string | IColor;\nexport type IFillStyle = {\n fillOpacity: number;\n shadowBlur: number;\n shadowColor: string;\n shadowOffsetX: number;\n shadowOffsetY: number;\n fill: IFillType;\n};\n\nexport type ILayout = {\n alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center';\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n distance: number | string;\n visible?: boolean;\n};\n\nexport type IStrokeType = boolean | string | IColor | null;\nexport type IStrokeStyle = {\n outerBorder: Partial<IBorderStyle>;\n innerBorder: Partial<IBorderStyle>;\n strokeOpacity: number;\n lineDash: number[];\n lineDashOffset: number;\n lineWidth: number;\n lineCap: CanvasLineCap;\n lineJoin: CanvasLineJoin;\n miterLimit: number;\n // 描边的boundsBuffer,用于控制bounds的buffer\n strokeBoundsBuffer: number;\n /**\n * stroke - true 全描边\n * stroke - false 不描边\n * stroke 为数值类型,适用于rect\\arc等图形,用于配置部分描边的场景,其中\n *\n * 0b00000 - 不描边\n * 0b000001 - top\n * 0b000010 - right\n * 0b000100 - bottom\n * 0b001000 - left\n * 相应的:\n * 0b000011 - top + right\n * 0b000111 - top + right + bottom\n * 0b001111 - 全描边\n *\n * stroke - boolean[],适用于rect\\arc等图形,用于配置部分描边的场景\n */\n stroke: IStrokeType[] | IStrokeType;\n};\n\ntype TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';\n\nexport type IConnectedStyle = {\n // 连接,取零或者断开\n connectedType: 'connect' | 'zero' | 'none';\n connectedStyle: {\n stroke: IStrokeStyle['stroke'];\n strokeOpacity: IStrokeStyle['strokeOpacity'];\n lineDash: IStrokeStyle['lineDash'];\n lineDashOffset: IStrokeStyle['lineDashOffset'];\n lineCap: IStrokeStyle['lineCap'];\n lineJoin: IStrokeStyle['lineJoin'];\n lineWidth: IStrokeStyle['lineWidth'];\n fill: IFillStyle['fill'];\n fillOpacity: IFillStyle['fillOpacity'];\n };\n connectedX: number;\n connectedY: number;\n};\n\nexport type IBackgroundConfig = {\n stroke?: string | boolean;\n fill?: string | boolean;\n lineWidth?: number;\n cornerRadius?: number;\n expandX?: number;\n expandY?: number;\n};\n\ntype IBackgroundType = string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig;\n\nexport interface SimpleDomStyleOptions {\n width: number; // 容器的宽度\n height: number; // 容器的高度\n style?:\n | string\n | Record<string, any>\n | ((\n pos: { top: number; left: number; width: number; height: number },\n graphic: IGraphic,\n wrapContainer: HTMLElement\n ) => Record<string, any>); // 容器的样式\n}\n\nexport interface CommonDomOptions {\n id?: string;\n container: string | HTMLElement | null; // id或者dom\n visible?: boolean;\n pointerEvents?: boolean | string;\n anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;\n}\n\nexport type IGraphicStyle = ILayout &\n IFillStyle &\n IStrokeStyle &\n IPickStyle & {\n forceBoundsWidth: number | (() => number) | undefined;\n forceBoundsHeight: number | (() => number) | undefined;\n opacity: number;\n shadowGraphic?: IGraphic | undefined;\n backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式(与具体图元有关)\n backgroundFit: boolean; // 是否正好填充,只在repeat-x或者repeat-y以及no-repeat的时候生效\n backgroundCornerRadius: number | number[];\n backgroundOpacity: number;\n background:\n | IBackgroundType\n | {\n background: IBackgroundType;\n dx?: number;\n dy?: number;\n width?: number;\n height?: number;\n x?: number;\n y?: number;\n }\n | null; // 背景,可以与fill同时存在\n texture: TextureType | string; // 纹理\n textureColor: string; // 纹理颜色\n textureSize: number; // 纹理大小\n texturePadding: number; // 纹理间隙\n blur: number;\n cursor: Cursor | null; // 鼠标样式\n renderStyle?: 'default' | 'rough' | any;\n // HTML的dom或者string\n html:\n | ({\n dom: string | HTMLElement; // dom字符串或者dom\n } & SimpleDomStyleOptions &\n CommonDomOptions)\n | null;\n react:\n | ({\n element: any; // react场景节点\n } & SimpleDomStyleOptions &\n CommonDomOptions)\n | null;\n };\n\nexport type IPickStyle = {\n // 给stroke模式的pick额外加的buffer,用于外界控制stroke区域的pick范围\n pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n IGraphicStyle &\n ITransform & {\n /**\n * stroke百分比\n */\n strokeSeg: IStrokeSeg | null;\n // 包围盒的padding\n boundsPadding: number | number[];\n /**\n * 选择模式,精确模式,粗糙模式(包围盒模式),自定义模式\n */\n pickMode: 'accurate' | 'imprecise' | 'custom';\n boundsMode: 'accurate' | 'imprecise';\n customPickShape: () => boolean | null;\n /**\n * 是否支持事件拾取,默认为 true。\n * @default true\n */\n pickable: boolean;\n /**\n * 是否支持fill拾取,默认为 true。\n * @experimental\n * @default true\n */\n fillPickable: boolean;\n /**\n * 是否支持stroke拾取,默认为 true。\n * @experimental\n * @default true\n */\n strokePickable: boolean;\n /**\n * 对于 group 节点,是否支持其子元素的事件拾取,默认为 true。\n * 如果 group `pickable` 关闭,`childrenPickable` 开启,那么 group 的子节点仍参与事件拾取\n * @default true\n */\n childrenPickable: boolean;\n /**\n * 元素是否可见。\n * @default true\n */\n visible: boolean;\n zIndex: number;\n layout: any;\n /**\n * 是否隐藏元素(只是绘制的时候不绘制)\n */\n renderable: boolean;\n /**\n * 是否在3d中控制方向\n * false: 不控制方向\n * true: 始终控制方向朝摄像机\n */\n keepDirIn3d?: boolean;\n shadowRootIdx: number;\n shadowPickMode?: 'full' | 'graphic';\n globalZIndex: number;\n globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n // 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\n // 绘制fill和stroke的顺序,为0表示fill先绘制,1表示stroke先绘制\n fillStrokeOrder: number;\n };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n attribute: Partial<T>;\n _uid: number;\n type: string;\n name: string;\n children: IGraphicJson<T>[];\n}\n\n/** the context of setAttribute */\nexport type ISetAttributeContext = {\n /** type of setAttribute */\n type?: number;\n animationState?: {\n step?: IStep;\n isFirstFrameOfStep?: boolean;\n /** ratio of animation */\n ratio?: number;\n /** is animation end? */\n end?: boolean;\n };\n skipUpdateCallback?: boolean;\n};\n\nexport type IGraphicAnimateParams = {\n slience?: boolean;\n id?: number | string;\n onStart?: () => void;\n onFrame?: (step: IStep, ratio: number) => void;\n onEnd?: () => void;\n onRemove?: () => void;\n interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n};\n\nexport interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>>\n extends INode,\n IAnimateTarget {\n type?: GraphicType;\n numberType?: number;\n stage?: IStage;\n layer?: ILayer;\n shadowRoot?: IShadowRoot;\n glyphHost?: IGraphic<IGlyphGraphicAttribute>;\n backgroundImg?: boolean;\n attachedThemeGraphic?: IGraphic<any>;\n\n bindDom?: Map<\n string | HTMLElement,\n { container: HTMLElement | string; dom: HTMLElement | any; wrapGroup: HTMLDivElement | any; root?: any }\n >;\n\n valid: boolean;\n parent: IGroup | null;\n isContainer?: boolean;\n // 是否是3d模式(是否应用3d视角)\n in3dMode?: boolean;\n\n // 上次更新的stamp\n stamp?: number;\n animationBackUps?: {\n from: Record<string, any>;\n to: Record<string, any>;\n };\n\n attribute: Partial<T>;\n\n /** 用于实现morph动画场景,转换成bezier曲线渲染 */\n pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);\n incremental?: number;\n incrementalAt?: number;\n\n /** 记录state对应的图形属性 */\n states?: Record<string, Partial<T>>;\n normalAttrs?: Partial<T>;\n stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n findFace?: () => IFace3d;\n toggleState: (stateName: string, hasAnimation?: boolean) => void;\n removeState: (stateName: string, hasAnimation?: boolean) => void;\n clearStates: (hasAnimation?: boolean) => void;\n useStates: (states: string[], hasAnimation?: boolean) => void;\n addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n hasState: (stateName?: string) => boolean;\n getState: (stateName: string) => Partial<T>;\n onBeforeAttributeUpdate?: (\n val: any,\n attributes: Partial<T>,\n key: null | string | string[],\n context?: ISetAttributeContext\n ) => T | undefined;\n applyStateAttrs: (attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean) => void;\n updateNormalAttrs: (stateAttrs: Partial<T>) => void;\n\n // get\n readonly AABBBounds: IAABBBounds; // 用于获取当前节点的AABB包围盒\n readonly OBBBounds: IOBBBounds; // 获取OBB包围盒,旋转防重叠需要用\n readonly globalAABBBounds: IAABBBounds; // 全局AABB包围盒\n readonly transMatrix: IMatrix; // 变换矩阵,动态计算\n readonly globalTransMatrix: IMatrix; // 变换矩阵,动态计算\n\n getOffsetXY: (attr?: ITransform) => IPoint;\n\n // function\n containsPoint: (x: number, y: number, mode?: IContainPointMode, picker?: IPickerService) => boolean;\n\n setMode: (mode: '3d' | '2d') => void;\n isValid: () => boolean;\n\n // TODO: transform API\n // 基于当前transform的变换,普通用户尽量别用,拿捏不住的~\n translate: (x: number, y: number) => this;\n translateTo: (x: number, y: number) => this;\n scale: (scaleX: number, scaleY: number, scaleCenter?: IPointLike) => this;\n scaleTo: (scaleX: number, scaleY: number) => this;\n rotate: (angle: number, rotateCenter?: IPointLike) => this;\n rotateTo: (angle: number) => this;\n skewTo: (b: number, c: number) => this;\n addUpdateBoundTag: () => void;\n addUpdateShapeAndBoundsTag: () => void;\n addUpdateLayoutTag: () => void;\n\n update: (d?: { bounds: boolean; trans: boolean }) => void;\n\n // animate\n animate: (params?: IGraphicAnimateParams) => IAnimate;\n\n // 语法糖,可有可无,有的为了首屏性能考虑做成get方法,有的由外界直接托管,内部不赋值\n name?: string;\n\n // 供render处理shape缓存tag\n shouldUpdateShape: () => boolean;\n clearUpdateShapeTag: () => void;\n\n // // 供render缓存shape\n // cacheShape?: ICustomPath2D;\n // // 线段使用的path2D\n // cacheLine?: ISegPath2D | ISegPath2D[];\n // // 面积图使用的path2D\n // cacheArea?: IAreaCacheItem | IAreaCacheItem[];\n\n setAttributes: (params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n initAttributes: (params: Partial<T>) => void;\n\n setAttribute: (key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n setStage: (stage?: IStage, layer?: ILayer) => void;\n onSetStage: (cb: (g: IGraphic, stage: IStage) => void) => void;\n\n shouldUpdateAABBBounds: () => boolean;\n shouldSelfChangeUpdateAABBBounds: () => boolean;\n shouldUpdateGlobalMatrix: () => boolean;\n\n addUpdatePositionTag: () => void;\n addUpdateGlobalPositionTag: () => void;\n\n attachShadow: () => IShadowRoot;\n detachShadow: () => void;\n\n toJson: () => IGraphicJson;\n\n /** 创建pathProxy */\n createPathProxy: (path?: string) => void;\n /** 将图形转换成CustomPath2D */\n toCustomPath?: () => ICustomPath2D;\n\n resources?: Map<\n string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig,\n { state: 'init' | 'loading' | 'success' | 'fail'; data?: HTMLImageElement | HTMLCanvasElement }\n >;\n imageLoadSuccess: (url: string, data: HTMLImageElement) => void;\n imageLoadFail: (url: string) => void;\n\n clone: () => IGraphic;\n stopAnimates: (stopChildren?: boolean) => void;\n getNoWorkAnimateAttr: () => Record<string, number>;\n getGraphicTheme: () => T;\n}\n\nexport interface IRoot extends IGraphic {\n pick: (x: number, y: number) => IGraphic;\n}\n\n/**\n * 动画配置\n */\nexport type IAnimateConfig = {\n duration?: number;\n easing?: EasingType;\n};\n\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\n"]}
|
package/cjs/interface/stage.d.ts
CHANGED
|
@@ -55,7 +55,6 @@ export type EventConfig = {
|
|
|
55
55
|
export type IOptimizeType = {
|
|
56
56
|
skipRenderWithOutRange?: boolean;
|
|
57
57
|
disableCheckGraphicWidthOutRange?: boolean;
|
|
58
|
-
tickRenderMode?: 'effect' | 'performance';
|
|
59
58
|
};
|
|
60
59
|
export interface IOption3D {
|
|
61
60
|
enableView3dTransform?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interface/stage.ts"],"names":[],"mappings":"","file":"stage.js","sourcesContent":["import type { INode } from './node-tree';\nimport type { ILayer, LayerMode } from './layer';\nimport type { IColor } from './color';\nimport type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { vec3 } from './matrix';\nimport type { IDirectionLight } from './light';\nimport type { ISyncHook } from './sync-hook';\nimport type { IDrawContext, IRenderService } from './render';\nimport type { ITicker, ITimeline } from './animate';\nimport type { IPickerService, PickResult } from './picker';\nimport type { IPlugin, IPluginService } from './plugin';\nimport type { IWindow } from './window';\nimport type { ILayerService } from './core';\nimport type { IFullThemeSpec } from './graphic/theme';\n\nexport type IExportType = 'canvas' | 'imageData';\n\nexport type IStageCreateContext = {\n appName?: 'vchart' | 'vgrammar' | 'vtable' | string;\n};\nexport interface IStageParams {\n // x: number;\n // y: number;\n // // 视口的宽高\n // viewWidth: number;\n // viewHeight: number;\n\n // 视口的宽高\n viewBox: IBoundsLike;\n // 总的宽高\n width: number;\n height: number;\n dpr: number;\n // stage的背景\n background: string | IColor;\n // 外部的canvas\n canvas: string | HTMLCanvasElement;\n // canvas的container容器,如果不传入canvas,那就会在容器中创建canvas\n container: string | HTMLElement;\n // 是否是受控制的canvas,如果不是的话,不会进行resize等操作,也不会修改canvas的样式\n canvasControled: boolean;\n title: string;\n // 是否开启自动渲染\n autoRender: boolean;\n // 是否开启自动刷新\n autoRefresh: boolean;\n // 是否开启布局支持\n enableLayout: boolean;\n // 是否关闭脏矩形检测\n disableDirtyBounds: boolean;\n // 是否支持interactiveLayer,默认为true\n interactiveLayer: boolean;\n // 是否支持HTML属性\n enableHtmlAttribute: string | boolean | HTMLElement;\n // 是否支持react-dom(传入ReactDOM)\n ReactDOM: any;\n // 是否支持滚动条\n enableScroll: boolean;\n poptip: boolean;\n // 绘制之前的钩子函数\n beforeRender: (stage: IStage) => void;\n // 绘制之后的钩子函数\n afterRender: (stage: IStage) => void;\n renderStyle?: string;\n ticker?: ITicker;\n pluginList?: string[];\n // 优化配置\n optimize?: IOptimizeType;\n /**\n * 事件系统相关配置\n */\n event?: EventConfig;\n\n /**\n * @since 0.17.15\n * 是否支持touch事件,不支持就不监听touch事件\n */\n supportsTouchEvents?: boolean;\n\n /**\n * @since 0.17.15\n * 是否支持pointer事件,不支持就监听mouse事件\n */\n supportsPointerEvents?: boolean;\n\n context?: IStageCreateContext;\n}\n\nexport type EventConfig = {\n /** 是否自动阻止事件 */\n autoPreventDefault?: boolean;\n /**\n * 多次点击之间的最大时间,默认为 200 ms\n * @default 200\n */\n clickInterval?: number;\n [key: string]: any;\n};\n\nexport type IOptimizeType = {\n // 视口不在可视区,跳过渲染,默认为true\n skipRenderWithOutRange?: boolean;\n // 跳过图元在区间外的判断\n // 不存在dirtyBounds的时候,根据该配置判断是否关闭图元的超出边界判定\n // 如果有dirtyBounds那么该配置不生效\n disableCheckGraphicWidthOutRange?: boolean;\n
|
|
1
|
+
{"version":3,"sources":["../src/interface/stage.ts"],"names":[],"mappings":"","file":"stage.js","sourcesContent":["import type { INode } from './node-tree';\nimport type { ILayer, LayerMode } from './layer';\nimport type { IColor } from './color';\nimport type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { vec3 } from './matrix';\nimport type { IDirectionLight } from './light';\nimport type { ISyncHook } from './sync-hook';\nimport type { IDrawContext, IRenderService } from './render';\nimport type { ITicker, ITimeline } from './animate';\nimport type { IPickerService, PickResult } from './picker';\nimport type { IPlugin, IPluginService } from './plugin';\nimport type { IWindow } from './window';\nimport type { ILayerService } from './core';\nimport type { IFullThemeSpec } from './graphic/theme';\n\nexport type IExportType = 'canvas' | 'imageData';\n\nexport type IStageCreateContext = {\n appName?: 'vchart' | 'vgrammar' | 'vtable' | string;\n};\nexport interface IStageParams {\n // x: number;\n // y: number;\n // // 视口的宽高\n // viewWidth: number;\n // viewHeight: number;\n\n // 视口的宽高\n viewBox: IBoundsLike;\n // 总的宽高\n width: number;\n height: number;\n dpr: number;\n // stage的背景\n background: string | IColor;\n // 外部的canvas\n canvas: string | HTMLCanvasElement;\n // canvas的container容器,如果不传入canvas,那就会在容器中创建canvas\n container: string | HTMLElement;\n // 是否是受控制的canvas,如果不是的话,不会进行resize等操作,也不会修改canvas的样式\n canvasControled: boolean;\n title: string;\n // 是否开启自动渲染\n autoRender: boolean;\n // 是否开启自动刷新\n autoRefresh: boolean;\n // 是否开启布局支持\n enableLayout: boolean;\n // 是否关闭脏矩形检测\n disableDirtyBounds: boolean;\n // 是否支持interactiveLayer,默认为true\n interactiveLayer: boolean;\n // 是否支持HTML属性\n enableHtmlAttribute: string | boolean | HTMLElement;\n // 是否支持react-dom(传入ReactDOM)\n ReactDOM: any;\n // 是否支持滚动条\n enableScroll: boolean;\n poptip: boolean;\n // 绘制之前的钩子函数\n beforeRender: (stage: IStage) => void;\n // 绘制之后的钩子函数\n afterRender: (stage: IStage) => void;\n renderStyle?: string;\n ticker?: ITicker;\n pluginList?: string[];\n // 优化配置\n optimize?: IOptimizeType;\n /**\n * 事件系统相关配置\n */\n event?: EventConfig;\n\n /**\n * @since 0.17.15\n * 是否支持touch事件,不支持就不监听touch事件\n */\n supportsTouchEvents?: boolean;\n\n /**\n * @since 0.17.15\n * 是否支持pointer事件,不支持就监听mouse事件\n */\n supportsPointerEvents?: boolean;\n\n context?: IStageCreateContext;\n}\n\nexport type EventConfig = {\n /** 是否自动阻止事件 */\n autoPreventDefault?: boolean;\n /**\n * 多次点击之间的最大时间,默认为 200 ms\n * @default 200\n */\n clickInterval?: number;\n [key: string]: any;\n};\n\nexport type IOptimizeType = {\n // 视口不在可视区,跳过渲染,默认为true\n skipRenderWithOutRange?: boolean;\n // 跳过图元在区间外的判断\n // 不存在dirtyBounds的时候,根据该配置判断是否关闭图元的超出边界判定\n // 如果有dirtyBounds那么该配置不生效\n disableCheckGraphicWidthOutRange?: boolean;\n};\n\nexport interface IOption3D {\n enableView3dTransform?: boolean; // 是否开启view3d自动旋转\n alpha?: number; // x轴的转角\n beta?: number; // y轴的转角\n gama?: number; // z轴的转角\n center?: { x?: number; y?: number; z?: number; dx?: number; dy?: number; dz?: number }; // 中心位置\n fieldRatio?: number; // 透视的视域缩放比例\n fieldDepth?: number;\n light?: {\n dir?: vec3;\n color?: string;\n ambient?: number;\n };\n // 配置相机后,alpha、beta、gamma配置会失效\n camera?: any; // 相机配置\n}\n\n// TODO 命名方式\nexport interface IStage extends INode {\n stage?: IStage;\n parent: IStage | null;\n // rootNode: IStage;\n x: number;\n y: number;\n\n params: Partial<IStageParams>;\n\n window: IWindow;\n\n width: number;\n height: number;\n viewWidth: number;\n viewHeight: number;\n defaultLayer: ILayer;\n dirtyBounds: IBounds | null;\n\n autoRender: boolean;\n renderCount: number;\n\n hooks: {\n beforeRender: ISyncHook<[IStage]>;\n afterRender: ISyncHook<[IStage]>;\n };\n\n option3d?: IOption3D;\n\n set3dOptions: (options: IOption3D) => void;\n light?: IDirectionLight;\n camera?: ICamera;\n\n dpr: number;\n\n viewBox: IBoundsLike;\n background: string | IColor;\n ticker: ITicker;\n increaseAutoRender: boolean;\n readonly renderService: IRenderService;\n getPickerService: () => IPickerService;\n readonly pluginService: IPluginService;\n readonly layerService: ILayerService;\n // 如果传入CanvasId,如果存在相同Id,说明这两个图层使用相同的Canvas绘制\n // 但需要注意的是依然是两个图层(用于解决Table嵌入ChartSpace不影响Table的绘制)\n createLayer: (canvasId?: string, layerMode?: LayerMode) => ILayer;\n getLayer: (name: string) => ILayer;\n sortLayer: (cb: (layer1: ILayer, layer2: ILayer) => number) => void;\n removeLayer: (layerId: number) => ILayer | false;\n\n getTimeline: () => ITimeline;\n\n render: (layers?: ILayer[], params?: Partial<IDrawContext>) => void;\n /**\n * 下一帧渲染\n * @param layers 渲染的图层\n * @param force 是否强行下一帧渲染,不采取优化方案\n * @returns\n */\n renderNextFrame: (layers?: ILayer[], force?: boolean) => void;\n tryInitInteractiveLayer: () => void;\n\n // 画布操作\n resize: (w: number, h: number, rerender?: boolean) => void;\n resizeWindow: (w: number, h: number, rerender?: boolean) => void;\n resizeView: (w: number, h: number, rerender?: boolean) => void;\n setViewBox:\n | ((viewBox: IBoundsLike, rerender: boolean) => void)\n | ((x: number, y: number, w: number, h: number, rerender: boolean) => void)\n | ((x: number | IBoundsLike, y: number | boolean, w?: number, h?: number, rerender?: boolean) => void);\n setDpr: (dpr: number, rerender?: boolean) => void;\n setOrigin: (x: number, y: number) => void;\n export: (type: IExportType) => HTMLCanvasElement | ImageData;\n pick: (x: number, y: number) => PickResult | false;\n\n // 动画相关\n startAnimate: (t: number) => void;\n setToFrame: (t: number) => void;\n dirty: (b: IBounds, matrix?: IMatrix) => void;\n // 考虑操作回放\n\n renderTo: (window: IWindow, params: { x: number; y: number; width: number; height: number }) => void;\n\n renderToNewWindow: (fullImage?: boolean) => IWindow;\n\n toCanvas: (fullImage?: boolean, viewBox?: IAABBBounds) => HTMLCanvasElement | null;\n\n setBeforeRender: (cb: (stage: IStage) => void) => void;\n\n setAfterRender: (cb: (stage: IStage) => void) => void;\n\n afterNextRender: (cb: (stage: IStage) => void) => void;\n enableAutoRender: () => void;\n disableAutoRender: () => void;\n enableIncrementalAutoRender: () => void;\n disableIncrementalAutoRender: () => void;\n enableDirtyBounds: () => void;\n disableDirtyBounds: () => void;\n enableView3dTransform: () => void;\n disableView3dTranform: () => void;\n getPluginsByName: (name: string) => IPlugin[];\n clearViewBox: (color?: string) => void;\n release: () => void;\n setStage: (stage?: IStage) => void;\n\n pauseRender: (sk?: number) => void;\n resumeRender: () => void;\n\n setCursor: (mode?: string) => void;\n\n getTheme: () => IFullThemeSpec;\n eventPointTransform: (e: PointerEvent | WheelEvent | TouchEvent) => { x: number; y: number };\n pauseTriggerEvent: () => void;\n resumeTriggerEvent: () => void;\n}\n\nexport declare function combineStage(srages: IStage[], params: { canvas: string | HTMLCanvasElement }): IStage;\n"]}
|
package/cjs/interface/text.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import type { IContribution } from './contribution';
|
|
2
2
|
import type { IGraphicUtil } from './core';
|
|
3
|
-
import type { MeasureModeEnum } from './graphic/text';
|
|
4
3
|
export interface TextOptionsType {
|
|
5
4
|
fontSize?: number;
|
|
6
5
|
fontWeight?: string | number;
|
|
7
6
|
fontFamily?: string;
|
|
8
7
|
fontStyle?: string;
|
|
9
8
|
fontVariant?: string;
|
|
10
|
-
lineHeight?: number;
|
|
11
9
|
textBaseline?: 'alphabetic' | 'top' | 'middle' | 'bottom';
|
|
12
10
|
textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';
|
|
13
11
|
}
|
|
@@ -15,15 +13,9 @@ export interface ITextMeasure extends IContribution<IGraphicUtil> {
|
|
|
15
13
|
measureTextWidth: (text: string, options: TextOptionsType) => number;
|
|
16
14
|
measureTextPixelHeight: (text: string, options: TextOptionsType) => number;
|
|
17
15
|
measureTextBoundHieght: (text: string, options: TextOptionsType) => number;
|
|
18
|
-
measureTextPixelADscentAndWidth: (text: string, options: TextOptionsType, mode: MeasureModeEnum) => {
|
|
19
|
-
width: number;
|
|
20
|
-
ascent: number;
|
|
21
|
-
descent: number;
|
|
22
|
-
};
|
|
23
16
|
clipText: (text: string, options: TextOptionsType, width: number, wordBreak: boolean, keepAllBreak?: boolean) => {
|
|
24
17
|
str: string;
|
|
25
18
|
width: number;
|
|
26
|
-
wordBreaked?: number;
|
|
27
19
|
};
|
|
28
20
|
clipTextVertical: (verticalList: {
|
|
29
21
|
text: string;
|
|
@@ -37,7 +29,7 @@ export interface ITextMeasure extends IContribution<IGraphicUtil> {
|
|
|
37
29
|
}[];
|
|
38
30
|
width: number;
|
|
39
31
|
};
|
|
40
|
-
clipTextWithSuffix: (text: string, options: TextOptionsType, width: number, suffix: string
|
|
32
|
+
clipTextWithSuffix: (text: string, options: TextOptionsType, width: number, suffix: string, wordBreak: boolean, position: 'start' | 'end' | 'middle') => {
|
|
41
33
|
str: string;
|
|
42
34
|
width: number;
|
|
43
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/interface/text.ts"],"names":[],"mappings":"","file":"text.js","sourcesContent":["import type { IContribution } from './contribution';\nimport type { IGraphicUtil } from './core';\
|
|
1
|
+
{"version":3,"sources":["../src/interface/text.ts"],"names":[],"mappings":"","file":"text.js","sourcesContent":["import type { IContribution } from './contribution';\nimport type { IGraphicUtil } from './core';\n\nexport interface TextOptionsType {\n fontSize?: number;\n fontWeight?: string | number;\n fontFamily?: string;\n fontStyle?: string;\n fontVariant?: string;\n textBaseline?: 'alphabetic' | 'top' | 'middle' | 'bottom';\n textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';\n}\n\nexport interface ITextMeasure extends IContribution<IGraphicUtil> {\n measureTextWidth: (text: string, options: TextOptionsType) => number;\n measureTextPixelHeight: (text: string, options: TextOptionsType) => number;\n measureTextBoundHieght: (text: string, options: TextOptionsType) => number;\n clipText: (\n text: string,\n options: TextOptionsType,\n width: number,\n wordBreak: boolean,\n keepAllBreak?: boolean\n ) => { str: string; width: number };\n clipTextVertical: (\n verticalList: { text: string; width?: number; direction: number }[],\n options: TextOptionsType,\n width: number,\n wordBreak: boolean\n ) => { verticalList: { text: string; width?: number; direction: number }[]; width: number };\n clipTextWithSuffix: (\n text: string,\n options: TextOptionsType,\n width: number,\n suffix: string,\n wordBreak: boolean,\n position: 'start' | 'end' | 'middle'\n ) => { str: string; width: number };\n clipTextWithSuffixVertical: (\n verticalList: { text: string; width?: number; direction: number }[],\n options: TextOptionsType,\n width: number,\n suffix: string,\n wordBreak: boolean,\n suffixPosition: 'start' | 'end' | 'middle'\n ) => { verticalList: { text: string; width?: number; direction: number }[]; width: number };\n measureText: (text: string, options: TextOptionsType) => { width: number };\n}\n"]}
|
|
@@ -14,11 +14,11 @@ class DefaultArcRenderContribution {
|
|
|
14
14
|
drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb) {
|
|
15
15
|
const {outerBorder: outerBorder, innerBorder: innerBorder} = arc.attribute, doOuterBorder = outerBorder && !1 !== outerBorder.visible, doInnerBorder = innerBorder && !1 !== innerBorder.visible;
|
|
16
16
|
if (!doOuterBorder && !doInnerBorder) return;
|
|
17
|
-
const {innerPadding: innerPadding = arcAttribute.innerPadding, outerPadding: outerPadding = arcAttribute.outerPadding, startAngle: startAngle = arcAttribute.startAngle, endAngle: endAngle = arcAttribute.endAngle, opacity: opacity = arcAttribute.opacity, x: originX = arcAttribute.x, y: originY = arcAttribute.y, scaleX: scaleX = arcAttribute.scaleX, scaleY: scaleY = arcAttribute.scaleY
|
|
17
|
+
const {innerPadding: innerPadding = arcAttribute.innerPadding, outerPadding: outerPadding = arcAttribute.outerPadding, startAngle: startAngle = arcAttribute.startAngle, endAngle: endAngle = arcAttribute.endAngle, opacity: opacity = arcAttribute.opacity, x: originX = arcAttribute.x, y: originY = arcAttribute.y, scaleX: scaleX = arcAttribute.scaleX, scaleY: scaleY = arcAttribute.scaleY} = arc.attribute;
|
|
18
18
|
let {innerRadius: innerRadius = arcAttribute.innerRadius, outerRadius: outerRadius = arcAttribute.outerRadius} = arc.attribute;
|
|
19
19
|
outerRadius += outerPadding, innerRadius -= innerPadding;
|
|
20
20
|
const renderBorder = (borderStyle, key) => {
|
|
21
|
-
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = arcAttribute[key].distance} = borderStyle, d =
|
|
21
|
+
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = arcAttribute[key].distance} = borderStyle, d = (0,
|
|
22
22
|
canvas_utils_1.getScaledStroke)(context, distance, context.dpr), deltaAngle = distance / outerRadius, sign = "outerBorder" === key ? 1 : -1;
|
|
23
23
|
if (arc.setAttributes({
|
|
24
24
|
outerRadius: outerRadius + sign * d,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/render/contributions/render/contributions/arc-contribution-render.ts"],"names":[],"mappings":";;;AAWA,kEAAkE;AAClE,yEAAqF;AACrF,oCAAuC;AACvC,oDAAsE;AACtE,yFAA0F;AAE1F,MAAa,4BAA4B;IAAzC;QACE,SAAI,GAA+B,kCAA0B,CAAC,eAAe,CAAC;QAC9E,aAAQ,GAAY,IAAI,CAAC;QACzB,UAAK,GAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/render/contributions/render/contributions/arc-contribution-render.ts"],"names":[],"mappings":"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","file":"arc-contribution-render.js","sourcesContent":["import type {\n IGraphicAttribute,\n IContext2d,\n IMarkAttribute,\n IArc,\n IArcGraphicAttribute,\n IThemeAttribute,\n IArcRenderContribution,\n IDrawContext,\n IBorderStyle\n} from '../../../../interface';\nimport { getScaledStroke } from '../../../../common/canvas-utils';\nimport { defaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { drawArcPath } from '../utils';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { defaultBaseTextureRenderContribution } from './base-texture-contribution-render';\n\nexport class DefaultArcRenderContribution implements IArcRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n arc: IArc,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n arcAttribute: Required<IArcGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const { outerBorder, innerBorder } = arc.attribute;\n const doOuterBorder = outerBorder && outerBorder.visible !== false;\n const doInnerBorder = innerBorder && innerBorder.visible !== false;\n if (!(doOuterBorder || doInnerBorder)) {\n return;\n }\n const {\n innerPadding = arcAttribute.innerPadding,\n outerPadding = arcAttribute.outerPadding,\n startAngle = arcAttribute.startAngle,\n endAngle = arcAttribute.endAngle,\n opacity = arcAttribute.opacity,\n x: originX = arcAttribute.x,\n y: originY = arcAttribute.y,\n scaleX = arcAttribute.scaleX,\n scaleY = arcAttribute.scaleY\n } = arc.attribute;\n let { innerRadius = arcAttribute.innerRadius, outerRadius = arcAttribute.outerRadius } = arc.attribute;\n outerRadius += outerPadding;\n innerRadius -= innerPadding;\n\n const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {\n const doStroke = !!(borderStyle && borderStyle.stroke);\n\n const { distance = arcAttribute[key].distance } = borderStyle;\n const d = getScaledStroke(context, distance as number, context.dpr);\n const deltaAngle = (distance as number) / outerRadius;\n const sign = key === 'outerBorder' ? 1 : -1;\n arc.setAttributes({\n outerRadius: outerRadius + sign * d,\n innerRadius: innerRadius - sign * d,\n startAngle: startAngle - sign * deltaAngle,\n endAngle: endAngle + sign * deltaAngle\n } as any);\n context.beginPath();\n drawArcPath(arc, context, x, y, outerRadius + sign * d, innerRadius - sign * d);\n // shadow\n context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);\n\n if (strokeCb) {\n strokeCb(context, borderStyle, arcAttribute[key]);\n } else if (doStroke) {\n // 存在stroke\n const lastOpacity = (arcAttribute[key] as any).opacity;\n (arcAttribute[key] as any).opacity = opacity;\n context.setStrokeStyle(\n arc,\n borderStyle,\n (originX - x) / scaleX,\n (originY - y) / scaleY,\n arcAttribute[key] as any\n );\n (arcAttribute[key] as any).opacity = lastOpacity;\n context.stroke();\n }\n };\n\n doOuterBorder && renderBorder(outerBorder, 'outerBorder');\n doInnerBorder && renderBorder(innerBorder, 'innerBorder');\n arc.setAttributes({ outerRadius: outerRadius, innerRadius: innerRadius, startAngle, endAngle } as any);\n }\n}\n\nexport const defaultArcRenderContribution = new DefaultArcRenderContribution();\nexport const defaultArcTextureRenderContribution = defaultBaseTextureRenderContribution;\nexport const defaultArcBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;\n"]}
|
|
@@ -14,8 +14,8 @@ class DefaultCircleRenderContribution {
|
|
|
14
14
|
drawShape(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb) {
|
|
15
15
|
const {outerBorder: outerBorder, innerBorder: innerBorder} = circle.attribute, doOuterBorder = outerBorder && !1 !== outerBorder.visible, doInnerBorder = innerBorder && !1 !== innerBorder.visible;
|
|
16
16
|
if (!doOuterBorder && !doInnerBorder) return;
|
|
17
|
-
const {radius: radius = circleAttribute.radius, startAngle: startAngle = circleAttribute.startAngle, endAngle: endAngle = circleAttribute.endAngle, opacity: opacity = circleAttribute.opacity, x: originX = circleAttribute.x, y: originY = circleAttribute.y, scaleX: scaleX = circleAttribute.scaleX, scaleY: scaleY = circleAttribute.scaleY
|
|
18
|
-
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = circleAttribute[key].distance} = borderStyle, d =
|
|
17
|
+
const {radius: radius = circleAttribute.radius, startAngle: startAngle = circleAttribute.startAngle, endAngle: endAngle = circleAttribute.endAngle, opacity: opacity = circleAttribute.opacity, x: originX = circleAttribute.x, y: originY = circleAttribute.y, scaleX: scaleX = circleAttribute.scaleX, scaleY: scaleY = circleAttribute.scaleY} = circle.attribute, renderBorder = (borderStyle, key) => {
|
|
18
|
+
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = circleAttribute[key].distance} = borderStyle, d = (0,
|
|
19
19
|
canvas_utils_1.getScaledStroke)(context, distance, context.dpr), sign = "outerBorder" === key ? 1 : -1;
|
|
20
20
|
if (context.beginPath(), context.arc(x, y, radius + sign * d, startAngle, endAngle),
|
|
21
21
|
context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/render/contributions/render/contributions/circle-contribution-render.ts"],"names":[],"mappings":";;;AAWA,kEAAkE;AAClE,yEAAqF;AACrF,oDAAsE;AACtE,yFAA0F;AAE1F,MAAa,+BAA+B;IAA5C;QACE,SAAI,GAA+B,kCAA0B,CAAC,eAAe,CAAC;QAC9E,aAAQ,GAAY,IAAI,CAAC;QACzB,UAAK,GAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/render/contributions/render/contributions/circle-contribution-render.ts"],"names":[],"mappings":"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","file":"circle-contribution-render.js","sourcesContent":["import type {\n IGraphicAttribute,\n IContext2d,\n IMarkAttribute,\n ICircle,\n ICircleGraphicAttribute,\n IThemeAttribute,\n ICircleRenderContribution,\n IDrawContext,\n IBorderStyle\n} from '../../../../interface';\nimport { getScaledStroke } from '../../../../common/canvas-utils';\nimport { defaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { defaultBaseTextureRenderContribution } from './base-texture-contribution-render';\n\nexport class DefaultCircleRenderContribution implements ICircleRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n circle: ICircle,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n circleAttribute: Required<ICircleGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const { outerBorder, innerBorder } = circle.attribute;\n const doOuterBorder = outerBorder && outerBorder.visible !== false;\n const doInnerBorder = innerBorder && innerBorder.visible !== false;\n if (!(doOuterBorder || doInnerBorder)) {\n return;\n }\n const {\n radius = circleAttribute.radius,\n startAngle = circleAttribute.startAngle,\n endAngle = circleAttribute.endAngle,\n opacity = circleAttribute.opacity,\n x: originX = circleAttribute.x,\n y: originY = circleAttribute.y,\n scaleX = circleAttribute.scaleX,\n scaleY = circleAttribute.scaleY\n } = circle.attribute;\n\n const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {\n const doStroke = !!(borderStyle && borderStyle.stroke);\n\n const { distance = circleAttribute[key].distance } = borderStyle;\n const d = getScaledStroke(context, distance as number, context.dpr);\n const sign = key === 'outerBorder' ? 1 : -1;\n context.beginPath();\n context.arc(x, y, radius + sign * d, startAngle, endAngle);\n context.closePath();\n\n // shadow\n context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute);\n\n if (strokeCb) {\n strokeCb(context, borderStyle, circleAttribute[key]);\n } else if (doStroke) {\n // 存在stroke\n const lastOpacity = (circleAttribute[key] as any).opacity;\n (circleAttribute[key] as any).opacity = opacity;\n context.setStrokeStyle(\n circle,\n borderStyle,\n (originX - x) / scaleX,\n (originY - y) / scaleY,\n circleAttribute[key] as any\n );\n (circleAttribute[key] as any).opacity = lastOpacity;\n context.stroke();\n }\n };\n\n doOuterBorder && renderBorder(outerBorder, 'outerBorder');\n doInnerBorder && renderBorder(innerBorder, 'innerBorder');\n }\n}\n\nexport const defaultCircleRenderContribution = new DefaultCircleRenderContribution();\nexport const defaultCircleTextureRenderContribution = defaultBaseTextureRenderContribution;\nexport const defaultCircleBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;\n"]}
|
|
@@ -10,7 +10,7 @@ export declare class DefaultImageRenderContribution extends DefaultRectRenderCon
|
|
|
10
10
|
time: BaseRenderContributionTime;
|
|
11
11
|
useStyle: boolean;
|
|
12
12
|
order: number;
|
|
13
|
-
drawShape(
|
|
13
|
+
drawShape(image: any, context: IContext2d, x: number, y: number, doFill: boolean, doStroke: boolean, fVisible: boolean, sVisible: boolean, rectAttribute: any, drawContext: IDrawContext, fillCb?: (ctx: IContext2d, markAttribute: Partial<IMarkAttribute & IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean, strokeCb?: (ctx: IContext2d, markAttribute: Partial<IMarkAttribute & IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean): void;
|
|
14
14
|
}
|
|
15
15
|
export declare const defaultImageRenderContribution: DefaultImageRenderContribution;
|
|
16
16
|
export declare const defaultImageBackgroundRenderContribution: DefaultImageBackgroundRenderContribution;
|
|
@@ -60,8 +60,9 @@ class DefaultImageRenderContribution extends rect_contribution_render_1.DefaultR
|
|
|
60
60
|
super(...arguments), this.time = enums_1.BaseRenderContributionTime.afterFillStroke,
|
|
61
61
|
this.useStyle = !0, this.order = 0;
|
|
62
62
|
}
|
|
63
|
-
drawShape(
|
|
64
|
-
return super.drawShape(
|
|
63
|
+
drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
|
|
64
|
+
if (!(image.isGifImage && image.renderFrame && image.playing)) return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
|
|
65
|
+
image.renderFrame(context, x, y);
|
|
65
66
|
}
|
|
66
67
|
}
|
|
67
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/render/contributions/render/contributions/image-contribution-render.ts"],"names":[],"mappings":"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","file":"image-contribution-render.js","sourcesContent":["import type {\n IGraphicAttribute,\n IContext2d,\n IImage,\n IThemeAttribute,\n IImageRenderContribution,\n IDrawContext,\n IBackgroundConfig,\n IGraphic,\n IMarkAttribute\n} from '../../../../interface';\nimport { getTheme } from '../../../../graphic/theme';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { isNumber, isObject } from '@visactor/vutils';\nimport { parsePadding } from '../../../../common/utils';\nimport { createRectPath } from '../../../../common/shape/rect';\nimport { DefaultRectRenderContribution } from './rect-contribution-render';\n\nexport class DefaultImageBackgroundRenderContribution\n extends DefaultBaseBackgroundRenderContribution\n implements IImageRenderContribution\n{\n time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n drawShape(\n graphic: IImage,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n graphicAttribute: Required<IGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n ) {\n const {\n background,\n backgroundMode = graphicAttribute.backgroundMode,\n backgroundFit = graphicAttribute.backgroundFit\n } = graphic.attribute;\n if (!background) {\n return;\n }\n\n if (!graphic.backgroundImg) {\n if (isObject(background)) {\n const {\n stroke,\n fill,\n lineWidth = 1,\n cornerRadius = 0,\n expandX = 0,\n expandY = 0\n } = background as IBackgroundConfig;\n\n if (!stroke && !fill) {\n return;\n }\n\n context.beginPath();\n const { x, y, width, height } = getActualPosition(graphic);\n if (cornerRadius) {\n createRectPath(context, x - expandX, y - expandY, width + expandX * 2, height + expandY * 2, cornerRadius);\n } else {\n context.rect(x - expandX, y - expandY, width + expandX * 2, height + expandY * 2);\n }\n\n context.globalAlpha = 1;\n if (fill) {\n context.fillStyle = fill as string;\n context.fill();\n }\n\n if (stroke && lineWidth > 0) {\n context.lineWidth = lineWidth;\n context.strokeStyle = stroke as string;\n context.stroke();\n }\n } else {\n context.beginPath();\n const b = graphic.AABBBounds;\n context.rect(x, y, b.width(), b.height());\n context.fillStyle = background as string;\n context.globalAlpha = 1;\n context.fill();\n }\n } else {\n const res = graphic.resources.get(background as any);\n if (res.state !== 'success' || !res.data) {\n return;\n }\n context.save();\n if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n const groupAttribute = getTheme(graphic.parent).group;\n const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n context.translate(scrollX, scrollY);\n }\n // context.clip();\n const b = graphic.AABBBounds;\n this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n context.restore();\n if (!graphic.transMatrix.onlyTranslate()) {\n context.setTransformForCurrent();\n }\n }\n }\n}\n\nfunction getActualPosition(graphic: IGraphic) {\n const boundsPadding = parsePadding(graphic.attribute.boundsPadding);\n const bounds = graphic.AABBBounds;\n let x = bounds.x1;\n let y = bounds.y1;\n let width = bounds.width();\n let height = bounds.height();\n\n if (isNumber(boundsPadding)) {\n x += boundsPadding;\n y += boundsPadding;\n width -= boundsPadding * 2;\n height -= boundsPadding * 2;\n } else {\n x += boundsPadding[3];\n y += boundsPadding[0];\n width -= boundsPadding[1] + boundsPadding[3];\n height -= boundsPadding[0] + boundsPadding[2];\n }\n\n return {\n x,\n y,\n width,\n height\n };\n}\n\nexport class DefaultImageRenderContribution extends DefaultRectRenderContribution implements IImageRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n rect: any,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n rectAttribute: any,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n return super.drawShape(\n rect,\n context,\n x,\n y,\n doFill,\n doStroke,\n fVisible,\n sVisible,\n rectAttribute,\n drawContext,\n fillCb,\n strokeCb\n );\n }\n}\n\nexport const defaultImageRenderContribution = new DefaultImageRenderContribution();\nexport const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/render/contributions/render/contributions/image-contribution-render.ts"],"names":[],"mappings":"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","file":"image-contribution-render.js","sourcesContent":["import type {\n IGraphicAttribute,\n IContext2d,\n IImage,\n IThemeAttribute,\n IImageRenderContribution,\n IDrawContext,\n IBackgroundConfig,\n IGraphic,\n IMarkAttribute\n} from '../../../../interface';\nimport { getTheme } from '../../../../graphic/theme';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { isNumber, isObject } from '@visactor/vutils';\nimport { parsePadding } from '../../../../common/utils';\nimport { createRectPath } from '../../../../common/shape/rect';\nimport { DefaultRectRenderContribution } from './rect-contribution-render';\n\nexport class DefaultImageBackgroundRenderContribution\n extends DefaultBaseBackgroundRenderContribution\n implements IImageRenderContribution\n{\n time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n drawShape(\n graphic: IImage,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n graphicAttribute: Required<IGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n ) {\n const {\n background,\n backgroundMode = graphicAttribute.backgroundMode,\n backgroundFit = graphicAttribute.backgroundFit\n } = graphic.attribute;\n if (!background) {\n return;\n }\n\n if (!graphic.backgroundImg) {\n if (isObject(background)) {\n const {\n stroke,\n fill,\n lineWidth = 1,\n cornerRadius = 0,\n expandX = 0,\n expandY = 0\n } = background as IBackgroundConfig;\n\n if (!stroke && !fill) {\n return;\n }\n\n context.beginPath();\n const { x, y, width, height } = getActualPosition(graphic);\n if (cornerRadius) {\n createRectPath(context, x - expandX, y - expandY, width + expandX * 2, height + expandY * 2, cornerRadius);\n } else {\n context.rect(x - expandX, y - expandY, width + expandX * 2, height + expandY * 2);\n }\n\n context.globalAlpha = 1;\n if (fill) {\n context.fillStyle = fill as string;\n context.fill();\n }\n\n if (stroke && lineWidth > 0) {\n context.lineWidth = lineWidth;\n context.strokeStyle = stroke as string;\n context.stroke();\n }\n } else {\n context.beginPath();\n const b = graphic.AABBBounds;\n context.rect(x, y, b.width(), b.height());\n context.fillStyle = background as string;\n context.globalAlpha = 1;\n context.fill();\n }\n } else {\n const res = graphic.resources.get(background as any);\n if (res.state !== 'success' || !res.data) {\n return;\n }\n context.save();\n if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n const groupAttribute = getTheme(graphic.parent).group;\n const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n context.translate(scrollX, scrollY);\n }\n // context.clip();\n const b = graphic.AABBBounds;\n this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n context.restore();\n if (!graphic.transMatrix.onlyTranslate()) {\n context.setTransformForCurrent();\n }\n }\n }\n}\n\nfunction getActualPosition(graphic: IGraphic) {\n const boundsPadding = parsePadding(graphic.attribute.boundsPadding);\n const bounds = graphic.AABBBounds;\n let x = bounds.x1;\n let y = bounds.y1;\n let width = bounds.width();\n let height = bounds.height();\n\n if (isNumber(boundsPadding)) {\n x += boundsPadding;\n y += boundsPadding;\n width -= boundsPadding * 2;\n height -= boundsPadding * 2;\n } else {\n x += boundsPadding[3];\n y += boundsPadding[0];\n width -= boundsPadding[1] + boundsPadding[3];\n height -= boundsPadding[0] + boundsPadding[2];\n }\n\n return {\n x,\n y,\n width,\n height\n };\n}\n\nexport class DefaultImageRenderContribution extends DefaultRectRenderContribution implements IImageRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n image: any,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n rectAttribute: any,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n if (image.isGifImage && image.renderFrame && image.playing) {\n image.renderFrame(context, x, y);\n } else {\n return super.drawShape(\n image,\n context,\n x,\n y,\n doFill,\n doStroke,\n fVisible,\n sVisible,\n rectAttribute,\n drawContext,\n fillCb,\n strokeCb\n );\n }\n }\n}\n\nexport const defaultImageRenderContribution = new DefaultImageRenderContribution();\nexport const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();\n"]}
|
|
@@ -20,11 +20,11 @@ class DefaultRectRenderContribution {
|
|
|
20
20
|
drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
|
|
21
21
|
const {outerBorder: outerBorder, innerBorder: innerBorder} = rect.attribute, doOuterBorder = outerBorder && !1 !== outerBorder.visible, doInnerBorder = innerBorder && !1 !== innerBorder.visible;
|
|
22
22
|
if (!doOuterBorder && !doInnerBorder) return;
|
|
23
|
-
const {cornerRadius: cornerRadius = rectAttribute.cornerRadius, opacity: opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX: scaleX = rectAttribute.scaleX, scaleY: scaleY = rectAttribute.scaleY, x1: x1, y1: y1
|
|
23
|
+
const {cornerRadius: cornerRadius = rectAttribute.cornerRadius, opacity: opacity = rectAttribute.opacity, x: originX = rectAttribute.x, y: originY = rectAttribute.y, scaleX: scaleX = rectAttribute.scaleX, scaleY: scaleY = rectAttribute.scaleY, x1: x1, y1: y1} = rect.attribute;
|
|
24
24
|
let {width: width, height: height} = rect.attribute;
|
|
25
25
|
width = (null != width ? width : x1 - x) || 0, height = (null != height ? height : y1 - y) || 0;
|
|
26
26
|
const renderBorder = (borderStyle, key) => {
|
|
27
|
-
const doStroke = !(!borderStyle || !borderStyle.stroke), sign = "outerBorder" === key ? -1 : 1, {distance: distance = rectAttribute[key].distance} = borderStyle, d =
|
|
27
|
+
const doStroke = !(!borderStyle || !borderStyle.stroke), sign = "outerBorder" === key ? -1 : 1, {distance: distance = rectAttribute[key].distance} = borderStyle, d = (0,
|
|
28
28
|
canvas_utils_1.getScaledStroke)(context, distance, context.dpr), nextX = x + sign * d, nextY = y + sign * d, dw = 2 * d;
|
|
29
29
|
if (0 === cornerRadius || (0, vutils_1.isArray)(cornerRadius) && cornerRadius.every((num => 0 === num)) ? (context.beginPath(),
|
|
30
30
|
context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/render/contributions/render/contributions/rect-contribution-render.ts"],"names":[],"mappings":"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","file":"rect-contribution-render.js","sourcesContent":["import { isArray } from '@visactor/vutils';\nimport { injectable } from '../../../../common/inversify-lite';\nimport type {\n IGraphicAttribute,\n IContext2d,\n IMarkAttribute,\n IRect,\n IRectGraphicAttribute,\n IThemeAttribute,\n IRectRenderContribution,\n IDrawContext,\n IBorderStyle\n} from '../../../../interface';\nimport { getScaledStroke } from '../../../../common/canvas-utils';\nimport { defaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { createRectPath } from '../../../../common/shape/rect';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { defaultBaseTextureRenderContribution } from './base-texture-contribution-render';\n\nexport class DefaultRectRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n rect: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n rectAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const { outerBorder, innerBorder } = rect.attribute;\n const doOuterBorder = outerBorder && outerBorder.visible !== false;\n const doInnerBorder = innerBorder && innerBorder.visible !== false;\n if (!(doOuterBorder || doInnerBorder)) {\n return;\n }\n const {\n cornerRadius = rectAttribute.cornerRadius,\n opacity = rectAttribute.opacity,\n x: originX = rectAttribute.x,\n y: originY = rectAttribute.y,\n scaleX = rectAttribute.scaleX,\n scaleY = rectAttribute.scaleY,\n x1,\n y1,\n keepStrokeScale = rectAttribute.keepStrokeScale\n } = rect.attribute;\n\n let { width, height } = rect.attribute;\n\n width = (width ?? x1 - x) || 0;\n height = (height ?? y1 - y) || 0;\n\n const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {\n const doStroke = !!(borderStyle && borderStyle.stroke);\n\n const sign = key === 'outerBorder' ? -1 : 1;\n const { distance = rectAttribute[key].distance } = borderStyle;\n const d = keepStrokeScale ? (distance as number) : getScaledStroke(context, distance as number, context.dpr);\n const nextX = x + sign * d;\n const nextY = y + sign * d;\n const dw = d * 2;\n if (cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0))) {\n // 不需要处理圆角\n context.beginPath();\n context.rect(nextX, nextY, width - sign * dw, height - sign * dw);\n } else {\n context.beginPath();\n\n // 测试后,cache对于重绘性能提升不大,但是在首屏有一定性能损耗,因此rect不再使用cache\n createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius);\n }\n\n // shadow\n context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);\n\n if (strokeCb) {\n strokeCb(context, borderStyle, rectAttribute[key]);\n } else if (doStroke) {\n // 存在stroke\n const lastOpacity = (rectAttribute[key] as any).opacity;\n (rectAttribute[key] as any).opacity = opacity;\n context.setStrokeStyle(\n rect,\n borderStyle,\n (originX - x) / scaleX,\n (originY - y) / scaleY,\n rectAttribute[key] as any\n );\n (rectAttribute[key] as any).opacity = lastOpacity;\n context.stroke();\n }\n };\n\n doOuterBorder && renderBorder(outerBorder, 'outerBorder');\n doInnerBorder && renderBorder(innerBorder, 'innerBorder');\n }\n}\n\n@injectable()\nexport class SplitRectBeforeRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n group: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n groupAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n doFillOrStroke?: { doFill: boolean; doStroke: boolean }\n ) {\n const { stroke = groupAttribute.stroke } = group.attribute as any;\n\n // 数组且存在为false的项目,那就不绘制\n if (Array.isArray(stroke) && stroke.some(s => s === false)) {\n doFillOrStroke.doStroke = false;\n }\n }\n}\n\n@injectable()\nexport class SplitRectAfterRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n rect: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n groupAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const {\n x1,\n y1,\n x: originX = groupAttribute.x,\n y: originY = groupAttribute.y,\n stroke = groupAttribute.stroke,\n cornerRadius = groupAttribute.cornerRadius\n } = rect.attribute as any;\n\n let { width, height } = rect.attribute;\n width = (width ?? x1 - originX) || 0;\n height = (height ?? y1 - originY) || 0;\n\n // 不是数组\n if (!(Array.isArray(stroke) && stroke.some(s => s === false))) {\n return;\n }\n\n context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute);\n\n // 带不同stroke边框\n if (!(cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0)))) {\n let lastStrokeI = 0;\n let lastStroke: any;\n createRectPath(\n context,\n x,\n y,\n width,\n height,\n cornerRadius,\n new Array(4).fill(0).map((_, i) => (x1: number, y1: number, x2: number, y2: number) => {\n if (stroke[i]) {\n if (!(lastStrokeI === i - 1 && stroke[i] === lastStroke)) {\n context.setStrokeStyle(rect, { ...rect.attribute, stroke: stroke[i] }, x, y, groupAttribute);\n context.beginPath();\n context.moveTo(x1, y1);\n lastStroke = stroke[i];\n }\n lastStrokeI = i;\n context.lineTo(x2, y2);\n context.stroke();\n if (i === 3) {\n context.beginPath();\n }\n }\n })\n );\n context.stroke();\n return;\n }\n\n // 单独处理每条边界,目前不考虑圆角\n context.beginPath();\n context.moveTo(x, y);\n // top\n if (stroke[0]) {\n context.lineTo(x + width, y);\n } else {\n context.moveTo(x + width, y);\n }\n // right\n if (stroke[1]) {\n context.lineTo(x + width, y + height);\n } else {\n context.moveTo(x + width, y + height);\n }\n // bottom\n if (stroke[2]) {\n context.lineTo(x, y + height);\n } else {\n context.moveTo(x, y + height);\n }\n // left\n if (stroke[3]) {\n // 没有close path是,起点和终点不连续,需要调整y保证不出现缺口\n const adjustY = stroke[0] ? y - context.lineWidth / 2 : y;\n context.lineTo(x, adjustY);\n } else {\n context.moveTo(x, y);\n }\n\n context.stroke();\n }\n}\n\nexport const defaultRectRenderContribution = new DefaultRectRenderContribution();\n// export const splitRectBeforeRenderContribution = new SplitRectBeforeRenderContribution();\n// export const splitRectAfterRenderContribution = new SplitRectAfterRenderContribution();\nexport const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;\nexport const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/render/contributions/render/contributions/rect-contribution-render.ts"],"names":[],"mappings":"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","file":"rect-contribution-render.js","sourcesContent":["import { isArray } from '@visactor/vutils';\nimport { injectable } from '../../../../common/inversify-lite';\nimport type {\n IGraphicAttribute,\n IContext2d,\n IMarkAttribute,\n IRect,\n IRectGraphicAttribute,\n IThemeAttribute,\n IRectRenderContribution,\n IDrawContext,\n IBorderStyle\n} from '../../../../interface';\nimport { getScaledStroke } from '../../../../common/canvas-utils';\nimport { defaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { createRectPath } from '../../../../common/shape/rect';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { defaultBaseTextureRenderContribution } from './base-texture-contribution-render';\n\nexport class DefaultRectRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n rect: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n rectAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const { outerBorder, innerBorder } = rect.attribute;\n const doOuterBorder = outerBorder && outerBorder.visible !== false;\n const doInnerBorder = innerBorder && innerBorder.visible !== false;\n if (!(doOuterBorder || doInnerBorder)) {\n return;\n }\n const {\n cornerRadius = rectAttribute.cornerRadius,\n opacity = rectAttribute.opacity,\n x: originX = rectAttribute.x,\n y: originY = rectAttribute.y,\n scaleX = rectAttribute.scaleX,\n scaleY = rectAttribute.scaleY,\n x1,\n y1\n } = rect.attribute;\n\n let { width, height } = rect.attribute;\n\n width = (width ?? x1 - x) || 0;\n height = (height ?? y1 - y) || 0;\n\n const renderBorder = (borderStyle: Partial<IBorderStyle>, key: 'outerBorder' | 'innerBorder') => {\n const doStroke = !!(borderStyle && borderStyle.stroke);\n\n const sign = key === 'outerBorder' ? -1 : 1;\n const { distance = rectAttribute[key].distance } = borderStyle;\n const d = getScaledStroke(context, distance as number, context.dpr);\n const nextX = x + sign * d;\n const nextY = y + sign * d;\n const dw = d * 2;\n if (cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0))) {\n // 不需要处理圆角\n context.beginPath();\n context.rect(nextX, nextY, width - sign * dw, height - sign * dw);\n } else {\n context.beginPath();\n\n // 测试后,cache对于重绘性能提升不大,但是在首屏有一定性能损耗,因此rect不再使用cache\n createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius);\n }\n\n // shadow\n context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);\n\n if (strokeCb) {\n strokeCb(context, borderStyle, rectAttribute[key]);\n } else if (doStroke) {\n // 存在stroke\n const lastOpacity = (rectAttribute[key] as any).opacity;\n (rectAttribute[key] as any).opacity = opacity;\n context.setStrokeStyle(\n rect,\n borderStyle,\n (originX - x) / scaleX,\n (originY - y) / scaleY,\n rectAttribute[key] as any\n );\n (rectAttribute[key] as any).opacity = lastOpacity;\n context.stroke();\n }\n };\n\n doOuterBorder && renderBorder(outerBorder, 'outerBorder');\n doInnerBorder && renderBorder(innerBorder, 'innerBorder');\n }\n}\n\n@injectable()\nexport class SplitRectBeforeRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n group: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n groupAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n doFillOrStroke?: { doFill: boolean; doStroke: boolean }\n ) {\n const { stroke = groupAttribute.stroke } = group.attribute as any;\n\n // 数组且存在为false的项目,那就不绘制\n if (Array.isArray(stroke) && stroke.some(s => s === false)) {\n doFillOrStroke.doStroke = false;\n }\n }\n}\n\n@injectable()\nexport class SplitRectAfterRenderContribution implements IRectRenderContribution {\n time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n useStyle: boolean = true;\n order: number = 0;\n drawShape(\n rect: IRect,\n context: IContext2d,\n x: number,\n y: number,\n doFill: boolean,\n doStroke: boolean,\n fVisible: boolean,\n sVisible: boolean,\n groupAttribute: Required<IRectGraphicAttribute>,\n drawContext: IDrawContext,\n fillCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean,\n strokeCb?: (\n ctx: IContext2d,\n markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n themeAttribute: IThemeAttribute\n ) => boolean\n ) {\n const {\n x1,\n y1,\n x: originX = groupAttribute.x,\n y: originY = groupAttribute.y,\n stroke = groupAttribute.stroke,\n cornerRadius = groupAttribute.cornerRadius\n } = rect.attribute as any;\n\n let { width, height } = rect.attribute;\n width = (width ?? x1 - originX) || 0;\n height = (height ?? y1 - originY) || 0;\n\n // 不是数组\n if (!(Array.isArray(stroke) && stroke.some(s => s === false))) {\n return;\n }\n\n context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute);\n\n // 带不同stroke边框\n if (!(cornerRadius === 0 || (isArray(cornerRadius) && (<number[]>cornerRadius).every(num => num === 0)))) {\n let lastStrokeI = 0;\n let lastStroke: any;\n createRectPath(\n context,\n x,\n y,\n width,\n height,\n cornerRadius,\n new Array(4).fill(0).map((_, i) => (x1: number, y1: number, x2: number, y2: number) => {\n if (stroke[i]) {\n if (!(lastStrokeI === i - 1 && stroke[i] === lastStroke)) {\n context.setStrokeStyle(rect, { ...rect.attribute, stroke: stroke[i] }, x, y, groupAttribute);\n context.beginPath();\n context.moveTo(x1, y1);\n lastStroke = stroke[i];\n }\n lastStrokeI = i;\n context.lineTo(x2, y2);\n context.stroke();\n if (i === 3) {\n context.beginPath();\n }\n }\n })\n );\n context.stroke();\n return;\n }\n\n // 单独处理每条边界,目前不考虑圆角\n context.beginPath();\n context.moveTo(x, y);\n // top\n if (stroke[0]) {\n context.lineTo(x + width, y);\n } else {\n context.moveTo(x + width, y);\n }\n // right\n if (stroke[1]) {\n context.lineTo(x + width, y + height);\n } else {\n context.moveTo(x + width, y + height);\n }\n // bottom\n if (stroke[2]) {\n context.lineTo(x, y + height);\n } else {\n context.moveTo(x, y + height);\n }\n // left\n if (stroke[3]) {\n // 没有close path是,起点和终点不连续,需要调整y保证不出现缺口\n const adjustY = stroke[0] ? y - context.lineWidth / 2 : y;\n context.lineTo(x, adjustY);\n } else {\n context.moveTo(x, y);\n }\n\n context.stroke();\n }\n}\n\nexport const defaultRectRenderContribution = new DefaultRectRenderContribution();\n// export const splitRectBeforeRenderContribution = new SplitRectBeforeRenderContribution();\n// export const splitRectAfterRenderContribution = new SplitRectAfterRenderContribution();\nexport const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;\nexport const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;\n"]}
|
|
@@ -16,8 +16,8 @@ class DefaultSymbolRenderContribution {
|
|
|
16
16
|
if (!parsedPath) return;
|
|
17
17
|
const {outerBorder: outerBorder, innerBorder: innerBorder} = symbol.attribute, doOuterBorder = outerBorder && !1 !== outerBorder.visible, doInnerBorder = innerBorder && !1 !== innerBorder.visible;
|
|
18
18
|
if (!doOuterBorder && !doInnerBorder) return;
|
|
19
|
-
const {size: size = symbolAttribute.size, opacity: opacity = symbolAttribute.opacity, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX: scaleX = symbolAttribute.scaleX, scaleY: scaleY = symbolAttribute.scaleY
|
|
20
|
-
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = symbolAttribute[key].distance} = borderStyle, d =
|
|
19
|
+
const {size: size = symbolAttribute.size, opacity: opacity = symbolAttribute.opacity, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX: scaleX = symbolAttribute.scaleX, scaleY: scaleY = symbolAttribute.scaleY} = symbol.attribute, renderBorder = (borderStyle, key) => {
|
|
20
|
+
const doStroke = !(!borderStyle || !borderStyle.stroke), {distance: distance = symbolAttribute[key].distance} = borderStyle, d = (0,
|
|
21
21
|
canvas_utils_1.getScaledStroke)(context, distance, context.dpr), sign = "outerBorder" === key ? 1 : -1;
|
|
22
22
|
if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, sign * d) && context.closePath(),
|
|
23
23
|
context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute),
|