@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.
Files changed (86) hide show
  1. package/README.md +0 -8
  2. package/build/BaseConfig.d.ts +43 -0
  3. package/build/BaseConfig.d.ts.map +1 -0
  4. package/build/CanvasConfig.d.ts +7 -92
  5. package/build/CanvasConfig.d.ts.map +1 -1
  6. package/build/CustomElements.d.ts +18 -4
  7. package/build/CustomElements.d.ts.map +1 -1
  8. package/build/Profiler.d.ts.map +1 -1
  9. package/build/RevealBoundryStore.d.ts +50 -10
  10. package/build/RevealBoundryStore.d.ts.map +1 -1
  11. package/build/RevealStateManager.d.ts +3 -0
  12. package/build/RevealStateManager.d.ts.map +1 -1
  13. package/build/SvgConfig.d.ts +17 -0
  14. package/build/SvgConfig.d.ts.map +1 -0
  15. package/build/index.d.ts.map +1 -1
  16. package/build/main.js +169 -17
  17. package/build/utils/extractRGBValue.d.ts +2 -0
  18. package/build/utils/extractRGBValue.d.ts.map +1 -0
  19. package/build/utils/isValidateBorderDecorationType.d.ts +3 -0
  20. package/build/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  21. package/build/utils/types.d.ts +103 -0
  22. package/build/utils/types.d.ts.map +1 -0
  23. package/build/variables.d.ts +1 -1
  24. package/build/variables.d.ts.map +1 -1
  25. package/docs/demo/index.html +70 -143
  26. package/docs/demo/ng.html +992 -0
  27. package/es/BaseConfig.d.ts +43 -0
  28. package/es/BaseConfig.d.ts.map +1 -0
  29. package/es/BaseConfig.js +220 -0
  30. package/es/BaseConfig.js.map +1 -0
  31. package/es/CanvasConfig.d.ts +7 -92
  32. package/es/CanvasConfig.d.ts.map +1 -1
  33. package/es/CanvasConfig.js +35 -233
  34. package/es/CanvasConfig.js.map +1 -1
  35. package/es/CustomElements.d.ts +18 -4
  36. package/es/CustomElements.d.ts.map +1 -1
  37. package/es/CustomElements.js +82 -7
  38. package/es/CustomElements.js.map +1 -1
  39. package/es/Profiler.d.ts.map +1 -1
  40. package/es/Profiler.js +0 -2
  41. package/es/Profiler.js.map +1 -1
  42. package/es/RevealBoundryStore.d.ts +50 -10
  43. package/es/RevealBoundryStore.d.ts.map +1 -1
  44. package/es/RevealBoundryStore.js +129 -35
  45. package/es/RevealBoundryStore.js.map +1 -1
  46. package/es/RevealStateManager.d.ts +3 -0
  47. package/es/RevealStateManager.d.ts.map +1 -1
  48. package/es/RevealStateManager.js +35 -8
  49. package/es/RevealStateManager.js.map +1 -1
  50. package/es/SvgConfig.d.ts +17 -0
  51. package/es/SvgConfig.d.ts.map +1 -0
  52. package/es/SvgConfig.js +346 -0
  53. package/es/SvgConfig.js.map +1 -0
  54. package/es/index.d.ts.map +1 -1
  55. package/es/index.js +15 -21
  56. package/es/index.js.map +1 -1
  57. package/es/utils/extractRGBValue.d.ts +2 -0
  58. package/es/utils/extractRGBValue.d.ts.map +1 -0
  59. package/es/utils/extractRGBValue.js +48 -0
  60. package/es/utils/extractRGBValue.js.map +1 -0
  61. package/es/utils/isValidateBorderDecorationType.d.ts +3 -0
  62. package/es/utils/isValidateBorderDecorationType.d.ts.map +1 -0
  63. package/es/utils/isValidateBorderDecorationType.js +10 -0
  64. package/es/utils/isValidateBorderDecorationType.js.map +1 -0
  65. package/es/utils/types.d.ts +103 -0
  66. package/es/utils/types.d.ts.map +1 -0
  67. package/es/utils/types.js +2 -0
  68. package/es/utils/types.js.map +1 -0
  69. package/es/variables.d.ts +1 -1
  70. package/es/variables.d.ts.map +1 -1
  71. package/es/variables.js +1 -1
  72. package/es/variables.js.map +1 -1
  73. package/package.json +30 -30
  74. package/src/BaseConfig.ts +311 -0
  75. package/src/CanvasConfig.ts +66 -377
  76. package/src/CustomElements.ts +97 -14
  77. package/src/Profiler.ts +0 -3
  78. package/src/RevealBoundryStore.ts +138 -39
  79. package/src/RevealStateManager.ts +40 -10
  80. package/src/SvgConfig.ts +422 -0
  81. package/src/index.ts +15 -21
  82. package/src/utils/extractRGBValue.ts +58 -0
  83. package/src/utils/isValidateBorderDecorationType.ts +8 -0
  84. package/src/utils/types.ts +106 -0
  85. package/src/variables.ts +1 -1
  86. 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"}
@@ -1,101 +1,16 @@
1
1
  import { RevealBoundaryStore } from './RevealBoundryStore.js';
2
- declare type BorderDecoration = 'round' | 'bevel' | 'miter';
3
- export interface CachedBoundingRect {
4
- top: number;
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
- mouseInCanvas: () => boolean;
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
- paint: (force?: boolean | undefined, debug?: boolean | undefined) => boolean;
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":"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"}
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
- updatePointerPosition: (ev: MouseEvent) => void;
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: MouseEvent) => void;
27
- handlePointerUp: () => void;
28
- handlePointerDown: (ev: MouseEvent) => void;
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;;;CAGP,CAAC;AAElB,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,qBAAqB,OAAQ,UAAU,UAKrC;IAEF,kBAAkB,aAA0E;IAC5F,kBAAkB,aAA0E;IAC5F,iBAAiB,OAAQ,UAAU,UAAoC;IACvE,eAAe,aAAmE;IAClF,iBAAiB,OAAQ,UAAU,UAGhC;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;;CA6BpB"}
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"}
@@ -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;AAeD,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
+ {"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: CanvasConfig[];
11
- animationQueue: CanvasConfig[];
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: ($canvas: HTMLCanvasElement, $container: HTMLElement) => void;
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
- onPointerMoveOnScreen: (x: number, y: number) => boolean;
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
- paintAll: (frame: number, force?: boolean | undefined) => void;
31
- resetAll: () => void;
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
- cleanUpAnimation: (config: CanvasConfig) => void;
35
- getRevealAnimationConfig: () => CanvasConfig | null;
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;AAEjD,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,YAAY,EAAE,CAAM;IAEhC,cAAc,EAAE,YAAY,EAAE,CAAM;IACpC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,KAAK,UAAS;IAEd,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;gBAEH,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW;IAKxC,SAAS,YAAa,iBAAiB,cAAc,WAAW,UAQ9D;IAEF,YAAY,QAAS,iBAAiB,UAIpC;IAEF,eAAe,MAAO,MAAM,UAE3B;IAED,qBAAqB,MAAO,MAAM,KAAK,MAAM,aAc5C;IAED,sBAAsB,aAMpB;IAEF,sBAAsB,aAGpB;IAEF,QAAQ,UAAW,MAAM,uCAkDvB;IAEF,QAAQ,aAKN;IAEF,mBAAmB,aAYjB;IAEF,eAAe,aASb;IAEF,gBAAgB,WAAY,YAAY,UAgBtC;IAEF,wBAAwB,4BAEtB;CACL"}
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;;IAkBlB,kBAAkB,aAKjB;IAED,WAAW,QAAS,WAAW,yBAO7B;IAEF,cAAc,UAAW,mBAAmB,UAE1C;CACL"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,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,QA4MlC"}
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"}