@ax-design/reveal-highlight 0.4.0 → 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 -227
- package/build/CustomElements.d.ts +2 -0
- package/build/CustomElements.d.ts.map +1 -1
- package/build/main.js +32 -32
- package/es/CustomElements.d.ts +2 -0
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +99 -77
- package/es/CustomElements.js.map +1 -1
- package/es/SvgConfig.js +70 -70
- package/es/tsconfig.tsbuildinfo +1 -0
- package/package.json +12 -8
- package/src/BaseConfig.ts +310 -310
- package/src/CanvasConfig.ts +415 -415
- package/src/ComputedStyleStorage.ts +89 -89
- package/src/CustomElements.ts +272 -247
- package/src/Profiler.ts +44 -44
- package/src/RevealBoundryStore.ts +291 -291
- package/src/RevealStateManager.ts +78 -78
- package/src/SvgConfig.ts +422 -422
- package/src/config.ts +26 -26
- package/src/cssTypedOM.d.ts +52 -52
- package/src/index.ts +219 -219
- package/src/utils/extractRGBValue.ts +58 -58
- package/src/utils/isValidateBorderDecorationType.ts +8 -8
- package/src/utils/types.ts +105 -105
- package/src/variables.ts +1 -1
- package/.prettierrc +0 -6
- package/.travis.yml +0 -26
- package/docs/demo/index.html +0 -992
- package/docs/demo/ng.html +0 -992
- package/docs/demo/performance-inspector.html +0 -60
- package/docs/demo/shapes-demo.html +0 -93
- package/docs/demo/single-unit.html +0 -39
- 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
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
2
|
-
|
|
3
|
-
import { config } from './config.js';
|
|
4
|
-
|
|
5
|
-
export class RevealStateManager {
|
|
6
|
-
private _currentHashId = 0;
|
|
7
|
-
private _storage: RevealBoundaryStore[] = [];
|
|
8
|
-
|
|
9
|
-
private requestedTraverseBoundaries = false;
|
|
10
|
-
cachedMouseX = -1;
|
|
11
|
-
cachedMouseY = -1;
|
|
12
|
-
|
|
13
|
-
constructor() {
|
|
14
|
-
if (config.borderDetectionMode === 'experimentalAutoFit') {
|
|
15
|
-
if (typeof Window === 'undefined') return;
|
|
16
|
-
|
|
17
|
-
window.addEventListener('pointermove', this.handlePointerMove);
|
|
18
|
-
// This is for touch screen
|
|
19
|
-
// Window.pointerleave won't be triggered if the finger
|
|
20
|
-
// leave the screen, so we use pointer up here.
|
|
21
|
-
window.addEventListener('pointerup', (ev) => {
|
|
22
|
-
if (ev.pointerType !== 'mouse') this.handlePointerLeave();
|
|
23
|
-
});
|
|
24
|
-
// This is for desktop
|
|
25
|
-
// If the mouse leave the window, we need to terminate
|
|
26
|
-
// all animations and clean up the canvas.
|
|
27
|
-
window.addEventListener('pointerleave', (ev) => {
|
|
28
|
-
if (ev.pointerType === 'mouse') this.handlePointerLeave();
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
pointerLeaveScheduled = false;
|
|
34
|
-
|
|
35
|
-
handlePointerLeave = () => {
|
|
36
|
-
if (this.pointerLeaveScheduled) return;
|
|
37
|
-
|
|
38
|
-
this.pointerLeaveScheduled = true;
|
|
39
|
-
|
|
40
|
-
window.requestAnimationFrame(() => {
|
|
41
|
-
for (let i = 0; i < this._storage.length; i++) {
|
|
42
|
-
this._storage[i].onPointerLeaveBoundary();
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
this.pointerLeaveScheduled = false;
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
handlePointerMove = (event: PointerEvent) => {
|
|
50
|
-
this.cachedMouseX = event.clientX;
|
|
51
|
-
this.cachedMouseY = event.clientY;
|
|
52
|
-
|
|
53
|
-
if (!this.requestedTraverseBoundaries) {
|
|
54
|
-
window.requestAnimationFrame(this.traverseBoundaries);
|
|
55
|
-
this.requestedTraverseBoundaries = true;
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
traverseBoundaries = () => {
|
|
60
|
-
this.requestedTraverseBoundaries = false;
|
|
61
|
-
for (let i = 0; i < this._storage.length; i++) {
|
|
62
|
-
this._storage[i].onPointerMoveOnScreen(this.cachedMouseX, this.cachedMouseY);
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
newBoundary = ($el: HTMLElement) => {
|
|
67
|
-
const hashId = this._currentHashId++;
|
|
68
|
-
|
|
69
|
-
const store = new RevealBoundaryStore(hashId, $el);
|
|
70
|
-
this._storage.push(store);
|
|
71
|
-
|
|
72
|
-
return store;
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
removeBoundary = (store: RevealBoundaryStore) => {
|
|
76
|
-
this._storage = this._storage.filter((x) => x !== store);
|
|
77
|
-
};
|
|
78
|
-
}
|
|
1
|
+
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
2
|
+
|
|
3
|
+
import { config } from './config.js';
|
|
4
|
+
|
|
5
|
+
export class RevealStateManager {
|
|
6
|
+
private _currentHashId = 0;
|
|
7
|
+
private _storage: RevealBoundaryStore[] = [];
|
|
8
|
+
|
|
9
|
+
private requestedTraverseBoundaries = false;
|
|
10
|
+
cachedMouseX = -1;
|
|
11
|
+
cachedMouseY = -1;
|
|
12
|
+
|
|
13
|
+
constructor() {
|
|
14
|
+
if (config.borderDetectionMode === 'experimentalAutoFit') {
|
|
15
|
+
if (typeof Window === 'undefined') return;
|
|
16
|
+
|
|
17
|
+
window.addEventListener('pointermove', this.handlePointerMove);
|
|
18
|
+
// This is for touch screen
|
|
19
|
+
// Window.pointerleave won't be triggered if the finger
|
|
20
|
+
// leave the screen, so we use pointer up here.
|
|
21
|
+
window.addEventListener('pointerup', (ev) => {
|
|
22
|
+
if (ev.pointerType !== 'mouse') this.handlePointerLeave();
|
|
23
|
+
});
|
|
24
|
+
// This is for desktop
|
|
25
|
+
// If the mouse leave the window, we need to terminate
|
|
26
|
+
// all animations and clean up the canvas.
|
|
27
|
+
window.addEventListener('pointerleave', (ev) => {
|
|
28
|
+
if (ev.pointerType === 'mouse') this.handlePointerLeave();
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
pointerLeaveScheduled = false;
|
|
34
|
+
|
|
35
|
+
handlePointerLeave = () => {
|
|
36
|
+
if (this.pointerLeaveScheduled) return;
|
|
37
|
+
|
|
38
|
+
this.pointerLeaveScheduled = true;
|
|
39
|
+
|
|
40
|
+
window.requestAnimationFrame(() => {
|
|
41
|
+
for (let i = 0; i < this._storage.length; i++) {
|
|
42
|
+
this._storage[i].onPointerLeaveBoundary();
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
this.pointerLeaveScheduled = false;
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
handlePointerMove = (event: PointerEvent) => {
|
|
50
|
+
this.cachedMouseX = event.clientX;
|
|
51
|
+
this.cachedMouseY = event.clientY;
|
|
52
|
+
|
|
53
|
+
if (!this.requestedTraverseBoundaries) {
|
|
54
|
+
window.requestAnimationFrame(this.traverseBoundaries);
|
|
55
|
+
this.requestedTraverseBoundaries = true;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
traverseBoundaries = () => {
|
|
60
|
+
this.requestedTraverseBoundaries = false;
|
|
61
|
+
for (let i = 0; i < this._storage.length; i++) {
|
|
62
|
+
this._storage[i].onPointerMoveOnScreen(this.cachedMouseX, this.cachedMouseY);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
newBoundary = ($el: HTMLElement) => {
|
|
67
|
+
const hashId = this._currentHashId++;
|
|
68
|
+
|
|
69
|
+
const store = new RevealBoundaryStore(hashId, $el);
|
|
70
|
+
this._storage.push(store);
|
|
71
|
+
|
|
72
|
+
return store;
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
removeBoundary = (store: RevealBoundaryStore) => {
|
|
76
|
+
this._storage = this._storage.filter((x) => x !== store);
|
|
77
|
+
};
|
|
78
|
+
}
|