@ax-design/reveal-highlight 0.3.0-alpha.6 → 0.4.0
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/README.md +0 -8
- package/build/BaseConfig.d.ts +43 -0
- package/build/BaseConfig.d.ts.map +1 -0
- package/build/CanvasConfig.d.ts +7 -92
- package/build/CanvasConfig.d.ts.map +1 -1
- package/build/CustomElements.d.ts +18 -4
- package/build/CustomElements.d.ts.map +1 -1
- package/build/Profiler.d.ts.map +1 -1
- package/build/RevealBoundryStore.d.ts +50 -10
- package/build/RevealBoundryStore.d.ts.map +1 -1
- package/build/RevealStateManager.d.ts +3 -0
- package/build/RevealStateManager.d.ts.map +1 -1
- package/build/SvgConfig.d.ts +17 -0
- package/build/SvgConfig.d.ts.map +1 -0
- package/build/index.d.ts.map +1 -1
- package/build/main.js +169 -17
- package/build/utils/extractRGBValue.d.ts +2 -0
- package/build/utils/extractRGBValue.d.ts.map +1 -0
- package/build/utils/isValidateBorderDecorationType.d.ts +3 -0
- package/build/utils/isValidateBorderDecorationType.d.ts.map +1 -0
- package/build/utils/types.d.ts +103 -0
- package/build/utils/types.d.ts.map +1 -0
- package/build/variables.d.ts +1 -1
- package/build/variables.d.ts.map +1 -1
- package/docs/demo/index.html +70 -143
- package/docs/demo/ng.html +992 -0
- package/es/BaseConfig.d.ts +43 -0
- package/es/BaseConfig.d.ts.map +1 -0
- package/es/BaseConfig.js +220 -0
- package/es/BaseConfig.js.map +1 -0
- package/es/CanvasConfig.d.ts +7 -92
- package/es/CanvasConfig.d.ts.map +1 -1
- package/es/CanvasConfig.js +35 -233
- package/es/CanvasConfig.js.map +1 -1
- package/es/CustomElements.d.ts +18 -4
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +82 -7
- package/es/CustomElements.js.map +1 -1
- package/es/Profiler.d.ts.map +1 -1
- package/es/Profiler.js +0 -2
- package/es/Profiler.js.map +1 -1
- package/es/RevealBoundryStore.d.ts +50 -10
- package/es/RevealBoundryStore.d.ts.map +1 -1
- package/es/RevealBoundryStore.js +129 -35
- package/es/RevealBoundryStore.js.map +1 -1
- package/es/RevealStateManager.d.ts +3 -0
- package/es/RevealStateManager.d.ts.map +1 -1
- package/es/RevealStateManager.js +35 -8
- package/es/RevealStateManager.js.map +1 -1
- package/es/SvgConfig.d.ts +17 -0
- package/es/SvgConfig.d.ts.map +1 -0
- package/es/SvgConfig.js +346 -0
- package/es/SvgConfig.js.map +1 -0
- package/es/index.d.ts.map +1 -1
- package/es/index.js +15 -21
- package/es/index.js.map +1 -1
- package/es/utils/extractRGBValue.d.ts +2 -0
- package/es/utils/extractRGBValue.d.ts.map +1 -0
- package/es/utils/extractRGBValue.js +48 -0
- package/es/utils/extractRGBValue.js.map +1 -0
- package/es/utils/isValidateBorderDecorationType.d.ts +3 -0
- package/es/utils/isValidateBorderDecorationType.d.ts.map +1 -0
- package/es/utils/isValidateBorderDecorationType.js +10 -0
- package/es/utils/isValidateBorderDecorationType.js.map +1 -0
- package/es/utils/types.d.ts +103 -0
- package/es/utils/types.d.ts.map +1 -0
- package/es/utils/types.js +2 -0
- package/es/utils/types.js.map +1 -0
- package/es/variables.d.ts +1 -1
- package/es/variables.d.ts.map +1 -1
- package/es/variables.js +1 -1
- package/es/variables.js.map +1 -1
- package/package.json +30 -30
- package/src/BaseConfig.ts +311 -0
- package/src/CanvasConfig.ts +66 -377
- package/src/CustomElements.ts +97 -14
- package/src/Profiler.ts +0 -3
- package/src/RevealBoundryStore.ts +138 -39
- package/src/RevealStateManager.ts +40 -10
- package/src/SvgConfig.ts +422 -0
- package/src/index.ts +15 -21
- package/src/utils/extractRGBValue.ts +58 -0
- package/src/utils/isValidateBorderDecorationType.ts +8 -0
- package/src/utils/types.ts +106 -0
- package/src/variables.ts +1 -1
- package/.yarnrc.yml +0 -1
package/README.md
CHANGED
|
@@ -132,14 +132,6 @@ reveal-highlight use custom properties to manage the style of highlights
|
|
|
132
132
|
|
|
133
133
|
**Note:** To control each corner, use `--reveal-border-decoration-top-left-radius`, `--reveal-border-decoration-top-right-radius`, `--reveal-border-decoration-bottom-left-radius`, `--reveal-border-decoration-bottom-right-radius`, if the value of these values are negative, `--reveal-border-decoration-radius` would be used.
|
|
134
134
|
|
|
135
|
-
#### --reveal-border-style
|
|
136
|
-
|
|
137
|
-
**Type:** `'full' | 'half'`
|
|
138
|
-
|
|
139
|
-
**Default:** `'full'`
|
|
140
|
-
|
|
141
|
-
**Description:** If `full` provided, there'll be four sides of the element will have a light effect, if `half` provided, only the top and bottom side will have a light effect.
|
|
142
|
-
|
|
143
135
|
### Hover light
|
|
144
136
|
|
|
145
137
|
Hover light is the light effect shown up when you hover on the reveal element, it will fill the whole element.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ComputedStyleStorage } from './ComputedStyleStorage.js';
|
|
2
|
+
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
3
|
+
import type { CachedBoundingRect, CachedStyle } from './utils/types.js';
|
|
4
|
+
export declare class BaseConfig<T extends Element> {
|
|
5
|
+
protected _store: RevealBoundaryStore;
|
|
6
|
+
pxRatio: number;
|
|
7
|
+
readonly container: HTMLElement;
|
|
8
|
+
readonly element: T;
|
|
9
|
+
protected readonly computedStyle: ComputedStyleStorage;
|
|
10
|
+
paintedWidth: number;
|
|
11
|
+
paintedHeight: number;
|
|
12
|
+
currentFrameId: number;
|
|
13
|
+
cachedBoundingRectFrameId: number;
|
|
14
|
+
cachedBoundingRect: CachedBoundingRect;
|
|
15
|
+
cachedStyleFrameId: number;
|
|
16
|
+
cachedStyle: CachedStyle;
|
|
17
|
+
dirty: boolean;
|
|
18
|
+
shapeDirty: boolean;
|
|
19
|
+
fillDirty: boolean;
|
|
20
|
+
animationDirty: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* If is cleaned up by `RevealBoundaryStore` during animation
|
|
23
|
+
* duration checkup.
|
|
24
|
+
*/
|
|
25
|
+
cleanedUpForAnimation: boolean;
|
|
26
|
+
mouseUpClientX: number | null;
|
|
27
|
+
mouseUpClientY: number | null;
|
|
28
|
+
mouseDownAnimateStartFrame: number | null;
|
|
29
|
+
mouseDownAnimateCurrentFrame: number | null;
|
|
30
|
+
mouseDownAnimateReleasedFrame: number | null;
|
|
31
|
+
mouseDownAnimateLogicFrame: number | null;
|
|
32
|
+
mousePressed: boolean;
|
|
33
|
+
mouseReleased: boolean;
|
|
34
|
+
constructor(store: RevealBoundaryStore, $canvas: T, $container: HTMLElement);
|
|
35
|
+
cacheBoundingRect: () => void;
|
|
36
|
+
getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string) => [number, number];
|
|
37
|
+
getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string;
|
|
38
|
+
getNumberPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => number;
|
|
39
|
+
cacheCanvasPaintingStyle: () => void;
|
|
40
|
+
mouseInCanvas: () => boolean;
|
|
41
|
+
syncSizeToRevealRadius: (x: HTMLCanvasElement, factor: number) => void;
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=BaseConfig.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseConfig.d.ts","sourceRoot":"","sources":["../src/BaseConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE1F,qBAAa,UAAU,CAAC,CAAC,SAAS,OAAO;IACrC,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAEtC,OAAO,SAAgC;IAEvC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAEpB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,oBAAoB,CAAC;IAEvD,YAAY,SAAK;IACjB,aAAa,SAAK;IAElB,cAAc,EAAE,MAAM,CAAM;IAE5B,yBAAyB,EAAE,MAAM,CAAM;IAEvC,kBAAkB,EAAE,kBAAkB,CAKpC;IAEF,kBAAkB,EAAE,MAAM,CAAM;IAEhC,WAAW,EAAE,WAAW,CA2BtB;IAEF,KAAK,EAAE,OAAO,CAAS;IAEvB,UAAU,EAAE,OAAO,CAAQ;IAC3B,SAAS,EAAE,OAAO,CAAQ;IAC1B,cAAc,EAAE,OAAO,CAAQ;IAE/B;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,4BAA4B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnD,6BAA6B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpD,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,YAAY,UAAS;IAErB,aAAa,UAAS;gBAEV,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,WAAW;IAS3E,iBAAiB,aAaf;IAEF,iBAAiB,6EAsBf;IAEF,yBAAyB,iBAAkB,MAAM,gBAAgB,MAAM,YAKrE;IAEF,+BAA+B,iBAAkB,MAAM,gBAAgB,MAAM,YAK3E;IAEF,wBAAwB,aA8ItB;IAEF,aAAa,gBAOX;IAEF,sBAAsB,MAAO,iBAAiB,UAAU,MAAM,UAU5D;CACL"}
|
package/build/CanvasConfig.d.ts
CHANGED
|
@@ -1,101 +1,16 @@
|
|
|
1
1
|
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
left: number;
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
}
|
|
9
|
-
export interface CachedStyle {
|
|
10
|
-
color: string;
|
|
11
|
-
opacity: number;
|
|
12
|
-
trueFillRadius: [number, number];
|
|
13
|
-
borderStyle: string;
|
|
14
|
-
borderColor: string;
|
|
15
|
-
borderFillRadius: number;
|
|
16
|
-
borderDecorationType: BorderDecoration;
|
|
17
|
-
borderDecorationRadius: number;
|
|
18
|
-
topLeftBorderDecorationRadius: number;
|
|
19
|
-
topRightBorderDecorationRadius: number;
|
|
20
|
-
bottomLeftBorderDecorationRadius: number;
|
|
21
|
-
bottomRightBorderDecorationRadius: number;
|
|
22
|
-
withLeftBorderFactor: number;
|
|
23
|
-
withRightBorderFactor: number;
|
|
24
|
-
withTopBorderFactor: number;
|
|
25
|
-
withBottomBorderFactor: number;
|
|
26
|
-
borderWidth: number;
|
|
27
|
-
hoverLight: boolean;
|
|
28
|
-
hoverLightColor: string;
|
|
29
|
-
hoverLightFillMode: string;
|
|
30
|
-
hoverLightFillRadius: number;
|
|
31
|
-
diffuse: boolean;
|
|
32
|
-
pressAnimation: boolean;
|
|
33
|
-
pressAnimationFillMode: string;
|
|
34
|
-
pressAnimationColor: string;
|
|
35
|
-
pressAnimationSpeed: number;
|
|
36
|
-
releaseAnimationAccelerateRate: number;
|
|
37
|
-
}
|
|
38
|
-
interface CachedReveal {
|
|
39
|
-
radius: number;
|
|
40
|
-
radiusFactor: number;
|
|
41
|
-
color: string;
|
|
42
|
-
opacity: number;
|
|
43
|
-
pattern: CanvasPattern | null;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Cached border and body pattern, for faster painting on the canvas.
|
|
47
|
-
* @interface CachedRevealBitmap
|
|
48
|
-
*/
|
|
49
|
-
export interface CachedRevealBitmap {
|
|
50
|
-
cachedReveal: {
|
|
51
|
-
borderReveal: CachedReveal;
|
|
52
|
-
fillReveal: CachedReveal;
|
|
53
|
-
};
|
|
54
|
-
cachedCanvas: {
|
|
55
|
-
borderReveal: HTMLCanvasElement;
|
|
56
|
-
fillReveal: HTMLCanvasElement;
|
|
57
|
-
};
|
|
58
|
-
cachedCtx: {
|
|
59
|
-
borderReveal: CanvasRenderingContext2D | null;
|
|
60
|
-
fillReveal: CanvasRenderingContext2D | null;
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
export declare class CanvasConfig {
|
|
64
|
-
protected _store: RevealBoundaryStore;
|
|
65
|
-
pxRatio: number;
|
|
66
|
-
readonly container: HTMLElement;
|
|
67
|
-
readonly canvas: HTMLCanvasElement;
|
|
2
|
+
import type { CachedRevealBitmap } from './utils/types.js';
|
|
3
|
+
import { BaseConfig } from './BaseConfig.js';
|
|
4
|
+
export declare class CanvasConfig extends BaseConfig<HTMLCanvasElement> {
|
|
68
5
|
ctx: CanvasRenderingContext2D | null;
|
|
69
|
-
private readonly computedStyle;
|
|
70
|
-
paintedWidth: number;
|
|
71
|
-
paintedHeight: number;
|
|
72
6
|
protected cachedImg: CachedRevealBitmap;
|
|
73
|
-
currentFrameId: number;
|
|
74
|
-
cachedBoundingRectFrameId: number;
|
|
75
|
-
cachedBoundingRect: CachedBoundingRect;
|
|
76
|
-
cachedStyleFrameId: number;
|
|
77
|
-
cachedStyle: CachedStyle;
|
|
78
|
-
mouseUpClientX: number | null;
|
|
79
|
-
mouseUpClientY: number | null;
|
|
80
|
-
mouseDownAnimateStartFrame: number | null;
|
|
81
|
-
mouseDownAnimateCurrentFrame: number | null;
|
|
82
|
-
mouseDownAnimateReleasedFrame: number | null;
|
|
83
|
-
mouseDownAnimateLogicFrame: number | null;
|
|
84
|
-
mousePressed: boolean;
|
|
85
|
-
mouseReleased: boolean;
|
|
86
7
|
constructor(store: RevealBoundaryStore, $canvas: HTMLCanvasElement, $container: HTMLElement);
|
|
87
|
-
cacheBoundingRect: () => void;
|
|
88
|
-
getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string) => [number, number];
|
|
89
|
-
getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string;
|
|
90
|
-
cacheCanvasPaintingStyle: () => void;
|
|
91
8
|
updateCachedReveal: () => void;
|
|
92
9
|
updateCachedBitmap: () => void;
|
|
93
|
-
|
|
94
|
-
syncSizeToElement: (x: HTMLCanvasElement) => void;
|
|
95
|
-
syncSizeToRevealRadius: (x: HTMLCanvasElement, factor: number) => void;
|
|
96
|
-
updateAnimateGrd: (frame: number, grd: CanvasGradient) => void;
|
|
10
|
+
private updateAnimateGrd;
|
|
97
11
|
private drawShape;
|
|
98
|
-
|
|
12
|
+
syncSizeToElement: (x: HTMLCanvasElement) => void;
|
|
13
|
+
clear: () => boolean;
|
|
14
|
+
paint: (skipSamePointerPositionCheck?: boolean | undefined) => boolean;
|
|
99
15
|
}
|
|
100
|
-
export {};
|
|
101
16
|
//# sourceMappingURL=CanvasConfig.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasConfig.d.ts","sourceRoot":"","sources":["../src/CanvasConfig.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CanvasConfig.d.ts","sourceRoot":"","sources":["../src/CanvasConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,qBAAa,YAAa,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IAC3D,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAErC,SAAS,CAAC,SAAS,EAAE,kBAAkB,CAAC;gBAE5B,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW;IAqC3F,kBAAkB,aA0DhB;IAEF,kBAAkB,aAGhB;IAEF,OAAO,CAAC,gBAAgB,CAgBtB;IAEF,OAAO,CAAC,SAAS,CA8Hf;IAEF,iBAAiB,MAAO,iBAAiB,UASvC;IAEF,KAAK,gBAeJ;IAED,KAAK,0DAA6C,OAAO,CA4HvD;CACL"}
|
|
@@ -20,12 +20,16 @@ export declare class AxRevealBoundary extends PatchedHTMLElement {
|
|
|
20
20
|
private set storage(value);
|
|
21
21
|
waitForStorage(f: (storage: RevealBoundaryStore) => void): void;
|
|
22
22
|
private appendStorage;
|
|
23
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Update the position of your pointer.
|
|
25
|
+
* @param ev Pointer event from the listener.
|
|
26
|
+
*/
|
|
27
|
+
updatePointerPosition: (ev: PointerEvent) => void;
|
|
24
28
|
handlePointerEnter: () => void;
|
|
25
29
|
handlePointerLeave: () => void;
|
|
26
|
-
handlePointerMove: (ev:
|
|
27
|
-
handlePointerUp: () => void;
|
|
28
|
-
handlePointerDown: (ev:
|
|
30
|
+
handlePointerMove: (ev: PointerEvent) => void;
|
|
31
|
+
handlePointerUp: (ev: PointerEvent) => void;
|
|
32
|
+
handlePointerDown: (ev: PointerEvent) => void;
|
|
29
33
|
connectedCallback(): void;
|
|
30
34
|
disconnectedCallback(): void;
|
|
31
35
|
constructor();
|
|
@@ -40,5 +44,15 @@ export declare class AxReveal extends PatchedHTMLElement {
|
|
|
40
44
|
connectedCallback(): void;
|
|
41
45
|
constructor();
|
|
42
46
|
}
|
|
47
|
+
export declare class AxRevealNg extends PatchedHTMLElement {
|
|
48
|
+
static readonly ElementName = "ax-reveal-ng";
|
|
49
|
+
private root;
|
|
50
|
+
private svg;
|
|
51
|
+
private boundary;
|
|
52
|
+
adoptedCallback(): void;
|
|
53
|
+
disconnectedCallback(): void;
|
|
54
|
+
connectedCallback(): void;
|
|
55
|
+
constructor();
|
|
56
|
+
}
|
|
43
57
|
export {};
|
|
44
58
|
//# sourceMappingURL=CustomElements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY9D,QAAA,MAAM,kBAAkB;;;
|
|
1
|
+
{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY9D,QAAA,MAAM,kBAAkB;;;CAGH,CAAC;AAEtB,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,wBAAwB;IACnD,QAAQ,CAAC,YAAY,qBAA4B;CACpD;AAED,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAqB;IAEhD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,mBAAmB,oBAAoB;IAEvD,OAAO,CAAC,IAAI,CAAuC;IAEnD,MAAM,CAAC,QAAQ,CAAC,YAAY,qBAA4B;IAExD,OAAO,CAAC,QAAQ,CAAmC;IAEnD,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,OAAO,QAkBlB;IAEM,cAAc,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI;IAQ/D,OAAO,CAAC,aAAa;IAWrB;;;OAGG;IACH,qBAAqB,OAAQ,YAAY,UAKvC;IAEF,kBAAkB,aAA0E;IAC5F,kBAAkB,aAA0E;IAC5F,iBAAiB,OATY,YAAY,UASM;IAC/C,eAAe,OAAQ,YAAY,UAMjC;IACF,iBAAiB,OAAQ,YAAY,UAIlC;IAEH,iBAAiB;IAWjB,oBAAoB;;CAWvB;AAED,qBAAa,QAAS,SAAQ,kBAAkB;IAC5C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAe;IAC1C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,oBAAoB;IAIpB,iBAAiB;;CAgCpB;AAED,qBAAa,UAAW,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAkB;IAC7C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,oBAAoB;IAIpB,iBAAiB;;CAmDpB"}
|
package/build/Profiler.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Profiler.d.ts","sourceRoot":"","sources":["../src/Profiler.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"Profiler.d.ts","sourceRoot":"","sources":["../src/Profiler.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAYD,qBAAa,QAAQ;IACjB,OAAO,CAAC,QAAQ,CAAa;IAC7B,IAAI,EAAE,WAAW,EAAE,CAAM;IAEzB,WAAW;IAIX,IAAI,CAAC,IAAI,GAAE,MAAkB;IAW7B,SAAS;CASZ"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { CanvasConfig } from './CanvasConfig.js';
|
|
2
|
+
import { SvgConfig } from './SvgConfig.js';
|
|
3
|
+
declare type Config = CanvasConfig | SvgConfig;
|
|
2
4
|
export declare class RevealBoundaryStore {
|
|
3
5
|
id: number;
|
|
4
6
|
container: HTMLElement;
|
|
@@ -7,10 +9,9 @@ export declare class RevealBoundaryStore {
|
|
|
7
9
|
paintedClientX: number;
|
|
8
10
|
paintedClientY: number;
|
|
9
11
|
mouseInBoundary: boolean;
|
|
10
|
-
canvasList:
|
|
11
|
-
animationQueue:
|
|
12
|
+
canvasList: Config[];
|
|
13
|
+
animationQueue: Config[];
|
|
12
14
|
animationFrame: number | null;
|
|
13
|
-
dirty: boolean;
|
|
14
15
|
mouseUpClientX: null;
|
|
15
16
|
mouseUpClientY: null;
|
|
16
17
|
mouseDownAnimateStartFrame: null;
|
|
@@ -20,18 +21,57 @@ export declare class RevealBoundaryStore {
|
|
|
20
21
|
mousePressed: boolean;
|
|
21
22
|
mouseReleased: boolean;
|
|
22
23
|
maxRadius: number;
|
|
24
|
+
requestedAnimationFrame: boolean;
|
|
23
25
|
constructor(id: number, $el: HTMLElement);
|
|
24
|
-
addReveal: ($
|
|
25
|
-
removeReveal: ($el: HTMLCanvasElement) => void;
|
|
26
|
+
addReveal: ($element: HTMLCanvasElement | SVGElement, $container: HTMLElement) => void;
|
|
27
|
+
removeReveal: ($el: HTMLCanvasElement | SVGElement) => void;
|
|
26
28
|
updateMaxRadius: (x: number) => void;
|
|
27
|
-
|
|
29
|
+
requestPaintAll: (cleanup?: boolean | undefined) => void;
|
|
30
|
+
updatePointerPosition: (x: number, y: number) => void;
|
|
31
|
+
onPointerMoveOnScreen: (x: number, y: number) => true | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* Repaint all canvas while user's pointer has entered the boundary.
|
|
34
|
+
*/
|
|
28
35
|
onPointerEnterBoundary: () => void;
|
|
36
|
+
/**
|
|
37
|
+
* Clear all canvas while user's pointer leave the bounary.
|
|
38
|
+
*/
|
|
29
39
|
onPointerLeaveBoundary: () => void;
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
/**
|
|
41
|
+
* The painting method that draw everything on your screen.
|
|
42
|
+
* @param frame current frame index, if this value is 0, it means all canvas
|
|
43
|
+
* should be cleaned.
|
|
44
|
+
* @param skipSamePointerPositionCheck Literally.
|
|
45
|
+
*/
|
|
46
|
+
private paintAll;
|
|
47
|
+
/**
|
|
48
|
+
* Clear all canvas.
|
|
49
|
+
*/
|
|
50
|
+
clearAll: (forAnimation: boolean) => void;
|
|
51
|
+
/**
|
|
52
|
+
* This is the effect while user pressed on the reveal highlight,
|
|
53
|
+
* the ripple start to spread slowly.
|
|
54
|
+
*/
|
|
32
55
|
initializeAnimation: () => void;
|
|
56
|
+
/**
|
|
57
|
+
* This is the effect while user released it's pointer, the spreading
|
|
58
|
+
* ripple animation will start to accelerate.
|
|
59
|
+
*/
|
|
33
60
|
switchAnimation: () => void;
|
|
34
|
-
|
|
35
|
-
|
|
61
|
+
/**
|
|
62
|
+
* Cleanup all animations.
|
|
63
|
+
* @param skipPaint Only cleanup data or also clean up the canvas
|
|
64
|
+
* @param forceClean Clean the canvas or not
|
|
65
|
+
*/
|
|
66
|
+
cleanupAnimation: (skipPaint?: boolean | undefined, forceClean?: boolean | undefined) => void;
|
|
67
|
+
/**
|
|
68
|
+
* Clean up the config of an animation, but the canvas won't cleaned up.
|
|
69
|
+
* @param config The config to be cleaned up.
|
|
70
|
+
* @param skipPaint Skip painting.
|
|
71
|
+
* @param forceClean Force clear the painting.
|
|
72
|
+
*/
|
|
73
|
+
cleanUpAnimationUnit: (config: Config, skipPaint?: boolean | undefined, forceClean?: boolean | undefined) => void;
|
|
74
|
+
getRevealAnimationConfig: () => Config | null;
|
|
36
75
|
}
|
|
76
|
+
export {};
|
|
37
77
|
//# sourceMappingURL=RevealBoundryStore.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RevealBoundryStore.d.ts","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"RevealBoundryStore.d.ts","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,aAAK,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;AAEvC,qBAAa,mBAAmB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IAGvB,OAAO,SAAS;IAChB,OAAO,SAAS;IAGhB,cAAc,SAAS;IACvB,cAAc,SAAS;IAEvB,eAAe,UAAS;IACxB,UAAU,EAAE,MAAM,EAAE,CAAM;IAE1B,cAAc,EAAE,MAAM,EAAE,CAAM;IAC9B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErC,cAAc,OAAQ;IACtB,cAAc,OAAQ;IACtB,0BAA0B,OAAQ;IAClC,4BAA4B,OAAQ;IACpC,6BAA6B,OAAQ;IACrC,0BAA0B,OAAQ;IAClC,YAAY,UAAS;IACrB,aAAa,UAAS;IAEtB,SAAS,SAAM;IAEf,uBAAuB,UAAS;gBAEpB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW;IAKxC,SAAS,aAAc,iBAAiB,GAAG,UAAU,cAAc,WAAW,UAiB5E;IAEF,YAAY,QAAS,iBAAiB,GAAG,UAAU,UAIjD;IAEF,eAAe,MAAO,MAAM,UAE1B;IAEF,eAAe,0CAQb;IAEF,qBAAqB,MAAO,MAAM,KAAK,MAAM,UAc5C;IAED,qBAAqB,MAAO,MAAM,KAAK,MAAM,sBAK3C;IAEF;;OAEG;IACH,sBAAsB,aAMpB;IAEF;;OAEG;IACH,sBAAsB,aAGpB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,CAsEd;IAEF;;OAEG;IACH,QAAQ,iBAAkB,OAAO,UAE/B;IAEF;;;OAGG;IACH,mBAAmB,aAYjB;IAEF;;;OAGG;IACH,eAAe,aAWb;IAEF;;;;OAIG;IACH,gBAAgB,8EAMf;IAED;;;;;OAKG;IACH,oBAAoB,WAAY,MAAM,6EAwBpC;IAEF,wBAAwB,sBAEtB;CACL"}
|
|
@@ -6,6 +6,9 @@ export declare class RevealStateManager {
|
|
|
6
6
|
cachedMouseX: number;
|
|
7
7
|
cachedMouseY: number;
|
|
8
8
|
constructor();
|
|
9
|
+
pointerLeaveScheduled: boolean;
|
|
10
|
+
handlePointerLeave: () => void;
|
|
11
|
+
handlePointerMove: (event: PointerEvent) => void;
|
|
9
12
|
traverseBoundaries: () => void;
|
|
10
13
|
newBoundary: ($el: HTMLElement) => RevealBoundaryStore;
|
|
11
14
|
removeBoundary: (store: RevealBoundaryStore) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RevealStateManager.d.ts","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAA6B;IAE7C,OAAO,CAAC,2BAA2B,CAAS;IAC5C,YAAY,SAAM;IAClB,YAAY,SAAM;;
|
|
1
|
+
{"version":3,"file":"RevealStateManager.d.ts","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAA6B;IAE7C,OAAO,CAAC,2BAA2B,CAAS;IAC5C,YAAY,SAAM;IAClB,YAAY,SAAM;;IAsBlB,qBAAqB,UAAS;IAE9B,kBAAkB,aAYjB;IAED,iBAAiB,UAAW,YAAY,UAQtC;IAEF,kBAAkB,aAKhB;IAEF,WAAW,QAAS,WAAW,yBAO7B;IAEF,cAAc,UAAW,mBAAmB,UAE1C;CACL"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
2
|
+
import type { CachedRevealPath } from './utils/types.js';
|
|
3
|
+
import { BaseConfig } from './BaseConfig.js';
|
|
4
|
+
export declare class SvgConfig extends BaseConfig<SVGSVGElement> {
|
|
5
|
+
protected cachedImg: CachedRevealPath;
|
|
6
|
+
constructor(store: RevealBoundaryStore, $svg: SVGSVGElement, $container: HTMLElement);
|
|
7
|
+
updateCachedBitmap: () => void;
|
|
8
|
+
updateCachedReveal: () => void;
|
|
9
|
+
private updateAnimateGrd;
|
|
10
|
+
private updateGradientPosition;
|
|
11
|
+
private drawShape;
|
|
12
|
+
syncSizeToElement: (x: SVGSVGElement) => void;
|
|
13
|
+
clear: (forAnimation: boolean) => void;
|
|
14
|
+
private internalClear;
|
|
15
|
+
paint: (skipSamePointerPositionCheck?: boolean | undefined) => boolean;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=SvgConfig.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SvgConfig.d.ts","sourceRoot":"","sources":["../src/SvgConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,qBAAa,SAAU,SAAQ,UAAU,CAAC,aAAa,CAAC;IACpD,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAC;gBAE1B,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IAuDpF,kBAAkB,aACjB;IAED,kBAAkB,aA2BhB;IAEF,OAAO,CAAC,gBAAgB,CA0BtB;IAEF,OAAO,CAAC,sBAAsB,CAQ7B;IAED,OAAO,CAAC,SAAS,CAgJf;IAEF,iBAAiB,MAAO,aAAa,UASnC;IAEF,KAAK,iBAAkB,OAAO,UAI7B;IAED,OAAO,CAAC,aAAa,CAWpB;IAED,KAAK,0DAA6C,OAAO,CA8GvD;CACL"}
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,gCAAgC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,YAAY,GAAG,qBAAqB,CAAC;CAC7D;AAID,wBAAgB,QAAQ,CAAC,EACrB,MAAc,EACd,mBAAkC,GACrC,EAAE,gCAAgC,QAqMlC"}
|