@ax-design/reveal-highlight 0.3.0-alpha.7 → 0.4.1
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/LICENSE +21 -21
- package/README.md +76 -235
- 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 +20 -4
- package/build/CustomElements.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/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 +20 -4
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +130 -33
- package/es/CustomElements.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 +12 -18
- package/es/index.js.map +1 -1
- package/es/tsconfig.tsbuildinfo +1 -0
- 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/package.json +34 -30
- package/src/BaseConfig.ts +311 -0
- package/src/CanvasConfig.ts +415 -729
- package/src/ComputedStyleStorage.ts +89 -89
- package/src/CustomElements.ts +272 -164
- package/src/Profiler.ts +44 -44
- package/src/RevealBoundryStore.ts +291 -192
- package/src/RevealStateManager.ts +78 -48
- package/src/SvgConfig.ts +422 -0
- package/src/config.ts +26 -26
- package/src/cssTypedOM.d.ts +52 -52
- package/src/index.ts +219 -225
- 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/.prettierrc +0 -6
- package/.travis.yml +0 -26
- package/.yarnrc.yml +0 -1
- package/docs/demo/debug.html +0 -75
- package/docs/demo/index.html +0 -1065
- package/docs/demo/performance-inspector.html +0 -60
- package/docs/demo/shapes-demo.html +0 -93
- package/docs/demo/single-unit.html +0 -40
- package/docs/logo.png +0 -0
- package/docs/logo.svg +0 -1
- package/docs/screen-record.gif +0 -0
- package/docs/src/logo.afdesign +0 -0
- package/rollup.config.js +0 -14
- package/tsconfig.json +0 -18
package/es/CustomElements.js
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
import { RevealStateManager } from './RevealStateManager.js';
|
|
2
2
|
import { config } from './config.js';
|
|
3
|
+
function closest(dom, selector) {
|
|
4
|
+
var _a;
|
|
5
|
+
const r = dom.closest(selector);
|
|
6
|
+
if (r)
|
|
7
|
+
return r;
|
|
8
|
+
const host = (_a = findParentShadowRoot(dom)) === null || _a === void 0 ? void 0 : _a.host;
|
|
9
|
+
if (!host)
|
|
10
|
+
return null;
|
|
11
|
+
return closest(host, selector);
|
|
12
|
+
}
|
|
13
|
+
function findParentShadowRoot(x) {
|
|
14
|
+
if (!x)
|
|
15
|
+
return null;
|
|
16
|
+
if (x.parentNode && x.parentNode.nodeType === document.DOCUMENT_FRAGMENT_NODE)
|
|
17
|
+
return x.parentNode;
|
|
18
|
+
return findParentShadowRoot(x.parentNode);
|
|
19
|
+
}
|
|
3
20
|
class ServerSideHTMLElement {
|
|
4
21
|
constructor() {
|
|
5
22
|
this.root = {
|
|
@@ -9,9 +26,7 @@ class ServerSideHTMLElement {
|
|
|
9
26
|
this.attachShadow = () => null;
|
|
10
27
|
}
|
|
11
28
|
}
|
|
12
|
-
const PatchedHTMLElement = typeof globalThis.Window === 'undefined'
|
|
13
|
-
? ServerSideHTMLElement
|
|
14
|
-
: HTMLElement;
|
|
29
|
+
const PatchedHTMLElement = typeof globalThis.Window === 'undefined' ? ServerSideHTMLElement : HTMLElement;
|
|
15
30
|
export class AxRevealProvider extends PatchedHTMLElement {
|
|
16
31
|
constructor() {
|
|
17
32
|
super(...arguments);
|
|
@@ -23,23 +38,34 @@ export class AxRevealBoundary extends PatchedHTMLElement {
|
|
|
23
38
|
constructor() {
|
|
24
39
|
super();
|
|
25
40
|
this.root = this.attachShadow({ mode: 'open' });
|
|
41
|
+
/**
|
|
42
|
+
* Update the position of your pointer.
|
|
43
|
+
* @param ev Pointer event from the listener.
|
|
44
|
+
*/
|
|
26
45
|
this.updatePointerPosition = (ev) => {
|
|
27
|
-
this.waitForStorage(storage => {
|
|
46
|
+
this.waitForStorage((storage) => {
|
|
28
47
|
storage.clientX = ev.clientX;
|
|
29
48
|
storage.clientY = ev.clientY;
|
|
30
49
|
});
|
|
31
50
|
};
|
|
32
|
-
this.handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
|
|
33
|
-
this.handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
|
|
34
|
-
this.handlePointerMove =
|
|
35
|
-
this.handlePointerUp = () =>
|
|
36
|
-
|
|
51
|
+
this.handlePointerEnter = () => this.waitForStorage((storage) => storage.onPointerEnterBoundary());
|
|
52
|
+
this.handlePointerLeave = () => this.waitForStorage((storage) => storage.onPointerLeaveBoundary());
|
|
53
|
+
this.handlePointerMove = this.updatePointerPosition;
|
|
54
|
+
this.handlePointerUp = (ev) => {
|
|
55
|
+
if (ev.pointerType === 'mouse') {
|
|
56
|
+
this.waitForStorage((storage) => storage.switchAnimation());
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
this.waitForStorage((storage) => storage.clearAll(false));
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
this.handlePointerDown = (ev) => this.waitForStorage((storage) => {
|
|
37
63
|
this.updatePointerPosition(ev);
|
|
38
64
|
storage.initializeAnimation();
|
|
39
65
|
});
|
|
40
|
-
this.root.innerHTML = `
|
|
41
|
-
<div>
|
|
42
|
-
<slot></slot>
|
|
66
|
+
this.root.innerHTML = `
|
|
67
|
+
<div>
|
|
68
|
+
<slot></slot>
|
|
43
69
|
</div>`;
|
|
44
70
|
}
|
|
45
71
|
get storage() {
|
|
@@ -73,7 +99,7 @@ export class AxRevealBoundary extends PatchedHTMLElement {
|
|
|
73
99
|
if (!force && this.storage) {
|
|
74
100
|
return;
|
|
75
101
|
}
|
|
76
|
-
const parent =
|
|
102
|
+
const parent = closest(this, AxRevealProvider.ElementName);
|
|
77
103
|
const stateManager = parent ? parent.stateManager : AxRevealBoundary.stateManager;
|
|
78
104
|
this.storage = stateManager.newBoundary(this);
|
|
79
105
|
}
|
|
@@ -100,22 +126,28 @@ export class AxReveal extends PatchedHTMLElement {
|
|
|
100
126
|
constructor() {
|
|
101
127
|
super();
|
|
102
128
|
this.root = this.attachShadow({ mode: 'open' });
|
|
103
|
-
this.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
div
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
:host
|
|
117
|
-
:host([
|
|
118
|
-
|
|
129
|
+
this.handlePointerDown = (ev) => {
|
|
130
|
+
this.setPointerCapture(ev.pointerId);
|
|
131
|
+
};
|
|
132
|
+
this.root.innerHTML = `
|
|
133
|
+
<div class="ax-reveal">
|
|
134
|
+
<canvas></canvas>
|
|
135
|
+
<div class="content"><slot></slot></div>
|
|
136
|
+
</div>
|
|
137
|
+
<style>
|
|
138
|
+
.ax-reveal { display: content; }
|
|
139
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
140
|
+
.content { position: relative; }
|
|
141
|
+
canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
142
|
+
:host { display: inline-block; position: relative; }
|
|
143
|
+
:host([block]) { display: block; }
|
|
144
|
+
:host([inline-block]) { display: inline-block; }
|
|
145
|
+
:host([flex]) { display: flex; }
|
|
146
|
+
:host([inline-flex]) { display: inline-flex; }
|
|
147
|
+
:host([grid]) { display: grid; }
|
|
148
|
+
:host([inline-grid]) { display: inline-grid; }
|
|
149
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
150
|
+
::slotted(button) { outline:none; }
|
|
119
151
|
</style>`;
|
|
120
152
|
this.canvas = this.root.querySelector('canvas');
|
|
121
153
|
}
|
|
@@ -124,14 +156,79 @@ export class AxReveal extends PatchedHTMLElement {
|
|
|
124
156
|
this.connectedCallback();
|
|
125
157
|
}
|
|
126
158
|
disconnectedCallback() {
|
|
127
|
-
this.boundary && this.boundary.waitForStorage(storage => storage.removeReveal(this.canvas));
|
|
159
|
+
this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.canvas));
|
|
128
160
|
}
|
|
129
161
|
connectedCallback() {
|
|
130
|
-
this.boundary =
|
|
162
|
+
this.boundary = closest(this, AxRevealBoundary.ElementName);
|
|
131
163
|
if (!this.boundary)
|
|
132
|
-
throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of
|
|
133
|
-
this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas, this), 0));
|
|
164
|
+
throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!');
|
|
165
|
+
this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.canvas, this), 0));
|
|
166
|
+
this.addEventListener('pointerdown', this.handlePointerDown);
|
|
134
167
|
}
|
|
135
168
|
}
|
|
136
169
|
AxReveal.ElementName = 'ax-reveal';
|
|
170
|
+
export class AxRevealNg extends PatchedHTMLElement {
|
|
171
|
+
constructor() {
|
|
172
|
+
super();
|
|
173
|
+
this.root = this.attachShadow({ mode: 'open' });
|
|
174
|
+
this.handlePointerDown = (ev) => {
|
|
175
|
+
this.setPointerCapture(ev.pointerId);
|
|
176
|
+
};
|
|
177
|
+
this.root.innerHTML = `
|
|
178
|
+
<div class="ax-reveal">
|
|
179
|
+
<svg>
|
|
180
|
+
<defs>
|
|
181
|
+
<radialGradient id="borderGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
182
|
+
<stop id="borderCenter" offset="0%" />
|
|
183
|
+
<stop id="borderOut" offset="100%" />
|
|
184
|
+
</radialGradient>
|
|
185
|
+
<radialGradient id="fillGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
186
|
+
<stop id="fillCenter" offset="0%" />
|
|
187
|
+
<stop id="fillOut" offset="100%" />
|
|
188
|
+
</radialGradient>
|
|
189
|
+
<radialGradient id="rippleGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
190
|
+
<stop id="rippleCenter" offset="0%" />
|
|
191
|
+
<stop id="rippleMiddle" offset="0%" />
|
|
192
|
+
<stop id="rippleOut" offset="0%" />
|
|
193
|
+
</radialGradient>
|
|
194
|
+
</defs>
|
|
195
|
+
<path id="borderPath" fill="url(#borderGrad)" />
|
|
196
|
+
<path id="fillPath" fill="url(#fillGrad)" />
|
|
197
|
+
<path id="ripplePath" fill="url(#rippleGrad)" />
|
|
198
|
+
</svg>
|
|
199
|
+
<div class="content"><slot></slot></div>
|
|
200
|
+
</div>
|
|
201
|
+
<style>
|
|
202
|
+
.ax-reveal { display: contents; }
|
|
203
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
204
|
+
.content { position: relative; }
|
|
205
|
+
svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
206
|
+
:host { display: inline-block; position: relative; }
|
|
207
|
+
:host([block]) { display: block; }
|
|
208
|
+
:host([inline-block]) { display: inline-block; }
|
|
209
|
+
:host([flex]) { display: flex; }
|
|
210
|
+
:host([inline-flex]) { display: inline-flex; }
|
|
211
|
+
:host([grid]) { display: grid; }
|
|
212
|
+
:host([inline-grid]) { display: inline-grid; }
|
|
213
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
214
|
+
::slotted(button) { outline:none; }
|
|
215
|
+
</style>`;
|
|
216
|
+
this.svg = this.root.querySelector('svg');
|
|
217
|
+
}
|
|
218
|
+
adoptedCallback() {
|
|
219
|
+
this.disconnectedCallback();
|
|
220
|
+
this.connectedCallback();
|
|
221
|
+
}
|
|
222
|
+
disconnectedCallback() {
|
|
223
|
+
this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.svg));
|
|
224
|
+
}
|
|
225
|
+
connectedCallback() {
|
|
226
|
+
this.boundary = closest(this, AxRevealBoundary.ElementName);
|
|
227
|
+
if (!this.boundary)
|
|
228
|
+
throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!');
|
|
229
|
+
this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.svg, this), 0));
|
|
230
|
+
this.addEventListener('pointerdown', this.handlePointerDown);
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
AxRevealNg.ElementName = 'ax-reveal-ng';
|
|
137
234
|
//# sourceMappingURL=CustomElements.js.map
|
package/es/CustomElements.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomElements.js","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,qBAAqB;IAA3B;QACI,SAAI,GAAG;YACH,SAAS,EAAE,EAAE;YACb,aAAa,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,IAAI;SACtC,
|
|
1
|
+
{"version":3,"file":"CustomElements.js","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"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"}
|
|
@@ -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"}
|
package/es/RevealBoundryStore.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CanvasConfig } from './CanvasConfig.js';
|
|
2
|
+
import { SvgConfig } from './SvgConfig.js';
|
|
2
3
|
export class RevealBoundaryStore {
|
|
3
4
|
constructor(id, $el) {
|
|
4
5
|
// The current cursor position relative to window.
|
|
@@ -11,7 +12,6 @@ export class RevealBoundaryStore {
|
|
|
11
12
|
this.canvasList = [];
|
|
12
13
|
this.animationQueue = [];
|
|
13
14
|
this.animationFrame = null;
|
|
14
|
-
this.dirty = false;
|
|
15
15
|
this.mouseUpClientX = null;
|
|
16
16
|
this.mouseUpClientY = null;
|
|
17
17
|
this.mouseDownAnimateStartFrame = null;
|
|
@@ -21,94 +21,156 @@ export class RevealBoundaryStore {
|
|
|
21
21
|
this.mousePressed = false;
|
|
22
22
|
this.mouseReleased = false;
|
|
23
23
|
this.maxRadius = -1;
|
|
24
|
-
this.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
this.requestedAnimationFrame = false;
|
|
25
|
+
this.addReveal = ($element, $container) => {
|
|
26
|
+
let config;
|
|
27
|
+
const elementType = Object.prototype.toString.call($element);
|
|
28
|
+
if (elementType === '[object HTMLCanvasElement]') {
|
|
29
|
+
config = new CanvasConfig(this, $element, $container);
|
|
30
|
+
}
|
|
31
|
+
else if (elementType === '[object SVGSVGElement]') {
|
|
32
|
+
config = new SvgConfig(this, $element, $container);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
throw new TypeError(`Unknown element type, got: ${elementType}, Canvas or SVG element expected.`);
|
|
36
|
+
}
|
|
37
|
+
config.cacheBoundingRect();
|
|
38
|
+
config.cacheCanvasPaintingStyle();
|
|
39
|
+
config.updateCachedBitmap();
|
|
40
|
+
this.canvasList.push(config);
|
|
30
41
|
};
|
|
31
42
|
this.removeReveal = ($el) => {
|
|
32
43
|
this.canvasList = this.canvasList.filter((config) => {
|
|
33
|
-
return config && config.
|
|
44
|
+
return config && config.element !== $el;
|
|
34
45
|
});
|
|
35
46
|
};
|
|
36
47
|
this.updateMaxRadius = (x) => {
|
|
37
48
|
this.maxRadius = Math.max(x, this.maxRadius);
|
|
38
49
|
};
|
|
39
|
-
this.
|
|
50
|
+
this.requestPaintAll = (cleanup) => {
|
|
51
|
+
if (this.requestedAnimationFrame)
|
|
52
|
+
return;
|
|
53
|
+
this.requestedAnimationFrame = true;
|
|
54
|
+
this.animationFrame = window.requestAnimationFrame((frame) => {
|
|
55
|
+
this.requestedAnimationFrame = false;
|
|
56
|
+
this.paintAll(cleanup ? -1 : frame, true);
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
this.updatePointerPosition = (x, y) => {
|
|
60
|
+
this.clientX = x;
|
|
61
|
+
this.clientY = y;
|
|
40
62
|
const boundingBox = this.container.getBoundingClientRect();
|
|
63
|
+
let mouseInBoundary = true;
|
|
41
64
|
if (x < boundingBox.left - this.maxRadius)
|
|
42
|
-
|
|
65
|
+
mouseInBoundary = false;
|
|
43
66
|
if (x > boundingBox.right + this.maxRadius)
|
|
44
|
-
|
|
67
|
+
mouseInBoundary = false;
|
|
45
68
|
if (y < boundingBox.top - this.maxRadius)
|
|
46
|
-
|
|
69
|
+
mouseInBoundary = false;
|
|
47
70
|
if (y > boundingBox.bottom + this.maxRadius)
|
|
48
|
-
|
|
49
|
-
this.mouseInBoundary =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
this.
|
|
71
|
+
mouseInBoundary = false;
|
|
72
|
+
this.mouseInBoundary = mouseInBoundary;
|
|
73
|
+
};
|
|
74
|
+
this.onPointerMoveOnScreen = (x, y) => {
|
|
75
|
+
this.updatePointerPosition(x, y);
|
|
76
|
+
if (!this.mouseInBoundary)
|
|
77
|
+
return;
|
|
78
|
+
this.requestPaintAll();
|
|
53
79
|
return true;
|
|
54
80
|
};
|
|
81
|
+
/**
|
|
82
|
+
* Repaint all canvas while user's pointer has entered the boundary.
|
|
83
|
+
*/
|
|
55
84
|
this.onPointerEnterBoundary = () => {
|
|
56
85
|
this.mouseInBoundary = true;
|
|
57
86
|
if (!this.animationFrame) {
|
|
58
|
-
this.
|
|
87
|
+
this.requestPaintAll();
|
|
59
88
|
}
|
|
60
89
|
};
|
|
90
|
+
/**
|
|
91
|
+
* Clear all canvas while user's pointer leave the bounary.
|
|
92
|
+
*/
|
|
61
93
|
this.onPointerLeaveBoundary = () => {
|
|
62
94
|
this.mouseInBoundary = false;
|
|
63
|
-
this.
|
|
95
|
+
this.requestPaintAll(true);
|
|
64
96
|
};
|
|
65
|
-
|
|
66
|
-
|
|
97
|
+
/**
|
|
98
|
+
* The painting method that draw everything on your screen.
|
|
99
|
+
* @param frame current frame index, if this value is 0, it means all canvas
|
|
100
|
+
* should be cleaned.
|
|
101
|
+
* @param skipSamePointerPositionCheck Literally.
|
|
102
|
+
*/
|
|
103
|
+
this.paintAll = (frame, skipSamePointerPositionCheck) => {
|
|
104
|
+
if (!skipSamePointerPositionCheck && !this.mouseInBoundary && this.animationQueue.length === 0) {
|
|
67
105
|
return;
|
|
68
106
|
}
|
|
107
|
+
// Animation duration checkup
|
|
69
108
|
for (let i = 0; i < this.animationQueue.length; i++) {
|
|
70
109
|
const config = this.animationQueue[i];
|
|
71
110
|
if (!frame || config.currentFrameId === frame) {
|
|
72
|
-
|
|
111
|
+
continue;
|
|
73
112
|
}
|
|
74
113
|
config.currentFrameId = frame;
|
|
114
|
+
// Initialize the animation parameter
|
|
75
115
|
if (config.mouseDownAnimateStartFrame === null) {
|
|
76
116
|
config.mouseDownAnimateStartFrame = frame;
|
|
77
117
|
}
|
|
118
|
+
// Calculate how long the animation has been playing
|
|
78
119
|
const relativeFrame = frame - config.mouseDownAnimateStartFrame;
|
|
79
120
|
config.mouseDownAnimateCurrentFrame = relativeFrame;
|
|
80
121
|
const speed = config.cachedStyle.pressAnimationSpeed;
|
|
81
122
|
const accelerateRate = config.cachedStyle.releaseAnimationAccelerateRate;
|
|
123
|
+
// We assume that Ripple is a one-way linear process from
|
|
124
|
+
// no diffusion to fully diffused,
|
|
125
|
+
// and Logic Frame represents the progress of the animation
|
|
126
|
+
// in this process.
|
|
82
127
|
let unitLogicFrame = relativeFrame;
|
|
83
128
|
if (config.mouseReleased && config.mouseDownAnimateReleasedFrame) {
|
|
84
129
|
unitLogicFrame += (relativeFrame - config.mouseDownAnimateReleasedFrame) * accelerateRate;
|
|
85
130
|
}
|
|
86
131
|
config.mouseDownAnimateLogicFrame = unitLogicFrame / speed;
|
|
87
132
|
if (config.mouseDownAnimateLogicFrame > 1) {
|
|
88
|
-
|
|
133
|
+
// It will be cleaned later
|
|
134
|
+
config.cleanedUpForAnimation = true;
|
|
89
135
|
}
|
|
90
136
|
}
|
|
137
|
+
// Paint the canvas one by one
|
|
91
138
|
for (let i = 0; i < this.canvasList.length; i++) {
|
|
92
139
|
const config = this.canvasList[i];
|
|
93
140
|
config.currentFrameId = frame;
|
|
94
|
-
config.
|
|
141
|
+
if (config.cleanedUpForAnimation) {
|
|
142
|
+
this.cleanUpAnimationUnit(config, false);
|
|
143
|
+
config.cleanedUpForAnimation = false;
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
const isPlayingAnimation = this.animationQueue.indexOf(config) === -1;
|
|
147
|
+
if (this.mouseInBoundary || isPlayingAnimation) {
|
|
148
|
+
config.paint(skipSamePointerPositionCheck);
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
config.clear(false);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
95
154
|
}
|
|
96
|
-
this.dirty = true;
|
|
97
155
|
this.paintedClientX = this.clientX;
|
|
98
156
|
this.paintedClientY = this.clientY;
|
|
99
157
|
if (this.mouseInBoundary || this.animationQueue.length !== 0) {
|
|
100
|
-
this.
|
|
158
|
+
this.requestPaintAll();
|
|
101
159
|
}
|
|
102
160
|
else {
|
|
103
161
|
this.animationFrame = null;
|
|
104
162
|
}
|
|
105
163
|
};
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
164
|
+
/**
|
|
165
|
+
* Clear all canvas.
|
|
166
|
+
*/
|
|
167
|
+
this.clearAll = (forAnimation) => {
|
|
168
|
+
this.cleanupAnimation(forAnimation, true);
|
|
111
169
|
};
|
|
170
|
+
/**
|
|
171
|
+
* This is the effect while user pressed on the reveal highlight,
|
|
172
|
+
* the ripple start to spread slowly.
|
|
173
|
+
*/
|
|
112
174
|
this.initializeAnimation = () => {
|
|
113
175
|
const config = this.canvasList.find((x) => x.mouseInCanvas());
|
|
114
176
|
if (!config)
|
|
@@ -120,17 +182,39 @@ export class RevealBoundaryStore {
|
|
|
120
182
|
config.mousePressed = true;
|
|
121
183
|
config.mouseReleased = false;
|
|
122
184
|
};
|
|
185
|
+
/**
|
|
186
|
+
* This is the effect while user released it's pointer, the spreading
|
|
187
|
+
* ripple animation will start to accelerate.
|
|
188
|
+
*/
|
|
123
189
|
this.switchAnimation = () => {
|
|
124
|
-
this.animationQueue.
|
|
190
|
+
for (let i = 0; i < this.animationQueue.length; i++) {
|
|
191
|
+
const config = this.animationQueue[i];
|
|
125
192
|
if (!config.mouseReleased) {
|
|
126
193
|
config.mouseReleased = true;
|
|
127
194
|
config.mouseDownAnimateReleasedFrame = config.mouseDownAnimateCurrentFrame;
|
|
128
195
|
config.mouseUpClientX = this.clientX;
|
|
129
196
|
config.mouseUpClientY = this.clientY;
|
|
130
197
|
}
|
|
131
|
-
}
|
|
198
|
+
}
|
|
132
199
|
};
|
|
133
|
-
|
|
200
|
+
/**
|
|
201
|
+
* Cleanup all animations.
|
|
202
|
+
* @param skipPaint Only cleanup data or also clean up the canvas
|
|
203
|
+
* @param forceClean Clean the canvas or not
|
|
204
|
+
*/
|
|
205
|
+
this.cleanupAnimation = (skipPaint, forceClean) => {
|
|
206
|
+
for (let i = 0; i < this.animationQueue.length; i++) {
|
|
207
|
+
const config = this.animationQueue[i];
|
|
208
|
+
this.cleanUpAnimationUnit(config, skipPaint, forceClean);
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
/**
|
|
212
|
+
* Clean up the config of an animation, but the canvas won't cleaned up.
|
|
213
|
+
* @param config The config to be cleaned up.
|
|
214
|
+
* @param skipPaint Skip painting.
|
|
215
|
+
* @param forceClean Force clear the painting.
|
|
216
|
+
*/
|
|
217
|
+
this.cleanUpAnimationUnit = (config, skipPaint, forceClean) => {
|
|
134
218
|
config.mouseUpClientX = null;
|
|
135
219
|
config.mouseUpClientY = null;
|
|
136
220
|
config.mouseDownAnimateStartFrame = null;
|
|
@@ -143,7 +227,17 @@ export class RevealBoundaryStore {
|
|
|
143
227
|
if (configIdx > -1) {
|
|
144
228
|
this.animationQueue.splice(configIdx, 1);
|
|
145
229
|
}
|
|
146
|
-
|
|
230
|
+
if (!skipPaint) {
|
|
231
|
+
if (forceClean) {
|
|
232
|
+
config.clear(false);
|
|
233
|
+
}
|
|
234
|
+
else if (this.mouseInBoundary) {
|
|
235
|
+
config.paint(true);
|
|
236
|
+
}
|
|
237
|
+
else {
|
|
238
|
+
config.clear(true);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
147
241
|
};
|
|
148
242
|
this.getRevealAnimationConfig = () => {
|
|
149
243
|
return this.canvasList.find((x) => x.mouseInCanvas()) || null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RevealBoundryStore.js","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"RevealBoundryStore.js","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"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"}
|
|
@@ -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;
|