@operato/utils 8.0.0 → 9.0.0-beta.4
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/CHANGELOG.md +64 -4
- package/dist/src/gesture-helper.d.ts +35 -0
- package/dist/src/gesture-helper.js +111 -0
- package/dist/src/gesture-helper.js.map +1 -0
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.js +1 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/mixins/gesture-mixin.d.ts +393 -0
- package/dist/src/mixins/gesture-mixin.js +119 -0
- package/dist/src/mixins/gesture-mixin.js.map +1 -0
- package/dist/src/mixins/index.d.ts +1 -0
- package/dist/src/mixins/index.js +1 -0
- package/dist/src/mixins/index.js.map +1 -1
- package/dist/src/reactive-controllers/tooltip-reactive-controller.js +1 -1
- package/dist/src/reactive-controllers/tooltip-reactive-controller.js.map +1 -1
- package/dist/src/timecapsule/snapshot-taker.d.ts +1 -1
- package/dist/src/timecapsule/snapshot-taker.js.map +1 -1
- package/dist/src/timecapsule/timecapsule.d.ts +1 -1
- package/dist/src/timecapsule/timecapsule.js +1 -1
- package/dist/src/timecapsule/timecapsule.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +19 -10
@@ -0,0 +1,393 @@
|
|
1
|
+
interface CustomElement extends HTMLElement {
|
2
|
+
connectedCallback?(): void;
|
3
|
+
disconnectedCallback?(): void;
|
4
|
+
}
|
5
|
+
type Constructor<T = CustomElement> = new (...args: any[]) => T;
|
6
|
+
export type GestureEventPinch = CustomEvent<{
|
7
|
+
scale: number;
|
8
|
+
centerX: number;
|
9
|
+
centerY: number;
|
10
|
+
}>;
|
11
|
+
export type GestureEventDrag = CustomEvent<{
|
12
|
+
deltaX: number;
|
13
|
+
deltaY: number;
|
14
|
+
clientX: number;
|
15
|
+
clientY: number;
|
16
|
+
end: boolean;
|
17
|
+
}>;
|
18
|
+
export type GestureEventDoubleTap = CustomEvent<{
|
19
|
+
x: number;
|
20
|
+
y: number;
|
21
|
+
}>;
|
22
|
+
export declare function gesture<TBase extends Constructor>(Base: TBase): {
|
23
|
+
new (...args: any[]): {
|
24
|
+
__pointers: Map<number, {
|
25
|
+
x: number;
|
26
|
+
y: number;
|
27
|
+
}>;
|
28
|
+
__lastTapTime: number;
|
29
|
+
__lastPinchDistance: number;
|
30
|
+
__dragStart: {
|
31
|
+
x: number;
|
32
|
+
y: number;
|
33
|
+
} | null;
|
34
|
+
connectedCallback(): void;
|
35
|
+
disconnectedCallback(): void;
|
36
|
+
handlePointerDown: (e: PointerEvent) => void;
|
37
|
+
handlePointerMove: (e: PointerEvent) => void;
|
38
|
+
handlePointerUp: (e: PointerEvent) => void;
|
39
|
+
handlePinch(): void;
|
40
|
+
handleDrag(point: {
|
41
|
+
x: number;
|
42
|
+
y: number;
|
43
|
+
}, end: boolean): void;
|
44
|
+
handleTap(point: {
|
45
|
+
x: number;
|
46
|
+
y: number;
|
47
|
+
}): void;
|
48
|
+
getDistance(p1: {
|
49
|
+
x: number;
|
50
|
+
y: number;
|
51
|
+
}, p2: {
|
52
|
+
x: number;
|
53
|
+
y: number;
|
54
|
+
}): number;
|
55
|
+
addGlobalListeners(): void;
|
56
|
+
removeGlobalListeners(): void;
|
57
|
+
accessKey: string;
|
58
|
+
readonly accessKeyLabel: string;
|
59
|
+
autocapitalize: string;
|
60
|
+
dir: string;
|
61
|
+
draggable: boolean;
|
62
|
+
hidden: boolean;
|
63
|
+
inert: boolean;
|
64
|
+
innerText: string;
|
65
|
+
lang: string;
|
66
|
+
readonly offsetHeight: number;
|
67
|
+
readonly offsetLeft: number;
|
68
|
+
readonly offsetParent: Element | null;
|
69
|
+
readonly offsetTop: number;
|
70
|
+
readonly offsetWidth: number;
|
71
|
+
outerText: string;
|
72
|
+
popover: string | null;
|
73
|
+
spellcheck: boolean;
|
74
|
+
title: string;
|
75
|
+
translate: boolean;
|
76
|
+
writingSuggestions: string;
|
77
|
+
attachInternals(): ElementInternals;
|
78
|
+
click(): void;
|
79
|
+
hidePopover(): void;
|
80
|
+
showPopover(): void;
|
81
|
+
togglePopover(force?: boolean): boolean;
|
82
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
83
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
84
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
85
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
86
|
+
readonly attributes: NamedNodeMap;
|
87
|
+
readonly classList: DOMTokenList;
|
88
|
+
className: string;
|
89
|
+
readonly clientHeight: number;
|
90
|
+
readonly clientLeft: number;
|
91
|
+
readonly clientTop: number;
|
92
|
+
readonly clientWidth: number;
|
93
|
+
readonly currentCSSZoom: number;
|
94
|
+
id: string;
|
95
|
+
innerHTML: string;
|
96
|
+
readonly localName: string;
|
97
|
+
readonly namespaceURI: string | null;
|
98
|
+
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
99
|
+
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
100
|
+
outerHTML: string;
|
101
|
+
readonly ownerDocument: Document;
|
102
|
+
readonly part: DOMTokenList;
|
103
|
+
readonly prefix: string | null;
|
104
|
+
readonly scrollHeight: number;
|
105
|
+
scrollLeft: number;
|
106
|
+
scrollTop: number;
|
107
|
+
readonly scrollWidth: number;
|
108
|
+
readonly shadowRoot: ShadowRoot | null;
|
109
|
+
slot: string;
|
110
|
+
readonly tagName: string;
|
111
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
112
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
113
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
114
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
115
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
116
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
117
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
118
|
+
getAttribute(qualifiedName: string): string | null;
|
119
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
120
|
+
getAttributeNames(): string[];
|
121
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
122
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
123
|
+
getBoundingClientRect(): DOMRect;
|
124
|
+
getClientRects(): DOMRectList;
|
125
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
126
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
127
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
128
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
129
|
+
getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
130
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
131
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
132
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
133
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
134
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
135
|
+
getHTML(options?: GetHTMLOptions): string;
|
136
|
+
hasAttribute(qualifiedName: string): boolean;
|
137
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
138
|
+
hasAttributes(): boolean;
|
139
|
+
hasPointerCapture(pointerId: number): boolean;
|
140
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
141
|
+
insertAdjacentHTML(position: InsertPosition, string: string): void;
|
142
|
+
insertAdjacentText(where: InsertPosition, data: string): void;
|
143
|
+
matches(selectors: string): boolean;
|
144
|
+
releasePointerCapture(pointerId: number): void;
|
145
|
+
removeAttribute(qualifiedName: string): void;
|
146
|
+
removeAttributeNS(namespace: string | null, localName: string): void;
|
147
|
+
removeAttributeNode(attr: Attr): Attr;
|
148
|
+
requestFullscreen(options?: FullscreenOptions): Promise<void>;
|
149
|
+
requestPointerLock(options?: PointerLockOptions): Promise<void>;
|
150
|
+
scroll(options?: ScrollToOptions): void;
|
151
|
+
scroll(x: number, y: number): void;
|
152
|
+
scrollBy(options?: ScrollToOptions): void;
|
153
|
+
scrollBy(x: number, y: number): void;
|
154
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
155
|
+
scrollTo(options?: ScrollToOptions): void;
|
156
|
+
scrollTo(x: number, y: number): void;
|
157
|
+
setAttribute(qualifiedName: string, value: string): void;
|
158
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
159
|
+
setAttributeNode(attr: Attr): Attr | null;
|
160
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
161
|
+
setHTMLUnsafe(html: string): void;
|
162
|
+
setPointerCapture(pointerId: number): void;
|
163
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
164
|
+
webkitMatchesSelector(selectors: string): boolean;
|
165
|
+
readonly baseURI: string;
|
166
|
+
readonly childNodes: NodeListOf<ChildNode>;
|
167
|
+
readonly firstChild: ChildNode | null;
|
168
|
+
readonly isConnected: boolean;
|
169
|
+
readonly lastChild: ChildNode | null;
|
170
|
+
readonly nextSibling: ChildNode | null;
|
171
|
+
readonly nodeName: string;
|
172
|
+
readonly nodeType: number;
|
173
|
+
nodeValue: string | null;
|
174
|
+
readonly parentElement: HTMLElement | null;
|
175
|
+
readonly parentNode: ParentNode | null;
|
176
|
+
readonly previousSibling: ChildNode | null;
|
177
|
+
textContent: string | null;
|
178
|
+
appendChild<T extends Node>(node: T): T;
|
179
|
+
cloneNode(deep?: boolean): Node;
|
180
|
+
compareDocumentPosition(other: Node): number;
|
181
|
+
contains(other: Node | null): boolean;
|
182
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
183
|
+
hasChildNodes(): boolean;
|
184
|
+
insertBefore<T extends Node>(node: T, child: Node | null): T;
|
185
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
186
|
+
isEqualNode(otherNode: Node | null): boolean;
|
187
|
+
isSameNode(otherNode: Node | null): boolean;
|
188
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
189
|
+
lookupPrefix(namespace: string | null): string | null;
|
190
|
+
normalize(): void;
|
191
|
+
removeChild<T extends Node>(child: T): T;
|
192
|
+
replaceChild<T extends Node>(node: Node, child: T): T;
|
193
|
+
readonly ELEMENT_NODE: 1;
|
194
|
+
readonly ATTRIBUTE_NODE: 2;
|
195
|
+
readonly TEXT_NODE: 3;
|
196
|
+
readonly CDATA_SECTION_NODE: 4;
|
197
|
+
readonly ENTITY_REFERENCE_NODE: 5;
|
198
|
+
readonly ENTITY_NODE: 6;
|
199
|
+
readonly PROCESSING_INSTRUCTION_NODE: 7;
|
200
|
+
readonly COMMENT_NODE: 8;
|
201
|
+
readonly DOCUMENT_NODE: 9;
|
202
|
+
readonly DOCUMENT_TYPE_NODE: 10;
|
203
|
+
readonly DOCUMENT_FRAGMENT_NODE: 11;
|
204
|
+
readonly NOTATION_NODE: 12;
|
205
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: 1;
|
206
|
+
readonly DOCUMENT_POSITION_PRECEDING: 2;
|
207
|
+
readonly DOCUMENT_POSITION_FOLLOWING: 4;
|
208
|
+
readonly DOCUMENT_POSITION_CONTAINS: 8;
|
209
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
210
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
211
|
+
dispatchEvent(event: Event): boolean;
|
212
|
+
ariaAtomic: string | null;
|
213
|
+
ariaAutoComplete: string | null;
|
214
|
+
ariaBrailleLabel: string | null;
|
215
|
+
ariaBrailleRoleDescription: string | null;
|
216
|
+
ariaBusy: string | null;
|
217
|
+
ariaChecked: string | null;
|
218
|
+
ariaColCount: string | null;
|
219
|
+
ariaColIndex: string | null;
|
220
|
+
ariaColIndexText: string | null;
|
221
|
+
ariaColSpan: string | null;
|
222
|
+
ariaCurrent: string | null;
|
223
|
+
ariaDescription: string | null;
|
224
|
+
ariaDisabled: string | null;
|
225
|
+
ariaExpanded: string | null;
|
226
|
+
ariaHasPopup: string | null;
|
227
|
+
ariaHidden: string | null;
|
228
|
+
ariaInvalid: string | null;
|
229
|
+
ariaKeyShortcuts: string | null;
|
230
|
+
ariaLabel: string | null;
|
231
|
+
ariaLevel: string | null;
|
232
|
+
ariaLive: string | null;
|
233
|
+
ariaModal: string | null;
|
234
|
+
ariaMultiLine: string | null;
|
235
|
+
ariaMultiSelectable: string | null;
|
236
|
+
ariaOrientation: string | null;
|
237
|
+
ariaPlaceholder: string | null;
|
238
|
+
ariaPosInSet: string | null;
|
239
|
+
ariaPressed: string | null;
|
240
|
+
ariaReadOnly: string | null;
|
241
|
+
ariaRequired: string | null;
|
242
|
+
ariaRoleDescription: string | null;
|
243
|
+
ariaRowCount: string | null;
|
244
|
+
ariaRowIndex: string | null;
|
245
|
+
ariaRowIndexText: string | null;
|
246
|
+
ariaRowSpan: string | null;
|
247
|
+
ariaSelected: string | null;
|
248
|
+
ariaSetSize: string | null;
|
249
|
+
ariaSort: string | null;
|
250
|
+
ariaValueMax: string | null;
|
251
|
+
ariaValueMin: string | null;
|
252
|
+
ariaValueNow: string | null;
|
253
|
+
ariaValueText: string | null;
|
254
|
+
role: string | null;
|
255
|
+
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
|
256
|
+
getAnimations(options?: GetAnimationsOptions): Animation[];
|
257
|
+
after(...nodes: (Node | string)[]): void;
|
258
|
+
before(...nodes: (Node | string)[]): void;
|
259
|
+
remove(): void;
|
260
|
+
replaceWith(...nodes: (Node | string)[]): void;
|
261
|
+
readonly nextElementSibling: Element | null;
|
262
|
+
readonly previousElementSibling: Element | null;
|
263
|
+
readonly childElementCount: number;
|
264
|
+
readonly children: HTMLCollection;
|
265
|
+
readonly firstElementChild: Element | null;
|
266
|
+
readonly lastElementChild: Element | null;
|
267
|
+
append(...nodes: (Node | string)[]): void;
|
268
|
+
prepend(...nodes: (Node | string)[]): void;
|
269
|
+
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
270
|
+
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
271
|
+
querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
272
|
+
querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
273
|
+
querySelector<E extends Element = Element>(selectors: string): E | null;
|
274
|
+
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
275
|
+
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
276
|
+
querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
277
|
+
querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
278
|
+
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
279
|
+
replaceChildren(...nodes: (Node | string)[]): void;
|
280
|
+
readonly assignedSlot: HTMLSlotElement | null;
|
281
|
+
readonly attributeStyleMap: StylePropertyMap;
|
282
|
+
readonly style: CSSStyleDeclaration;
|
283
|
+
contentEditable: string;
|
284
|
+
enterKeyHint: string;
|
285
|
+
inputMode: string;
|
286
|
+
readonly isContentEditable: boolean;
|
287
|
+
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
288
|
+
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
289
|
+
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
290
|
+
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
291
|
+
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
292
|
+
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
293
|
+
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
294
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
295
|
+
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
296
|
+
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
297
|
+
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
298
|
+
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
299
|
+
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
300
|
+
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
301
|
+
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
302
|
+
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
303
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
304
|
+
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
305
|
+
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
306
|
+
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
307
|
+
oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
308
|
+
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
309
|
+
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
310
|
+
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
311
|
+
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
312
|
+
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
313
|
+
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
314
|
+
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
315
|
+
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
316
|
+
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
317
|
+
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
318
|
+
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
319
|
+
onerror: OnErrorEventHandler;
|
320
|
+
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
321
|
+
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
322
|
+
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
323
|
+
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
324
|
+
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
325
|
+
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
326
|
+
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
327
|
+
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
328
|
+
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
329
|
+
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
330
|
+
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
331
|
+
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
332
|
+
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
333
|
+
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
334
|
+
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
335
|
+
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
336
|
+
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
337
|
+
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
338
|
+
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
339
|
+
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
340
|
+
onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
341
|
+
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
342
|
+
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
343
|
+
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
344
|
+
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
345
|
+
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
346
|
+
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
347
|
+
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
348
|
+
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
349
|
+
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
350
|
+
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
351
|
+
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
352
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
353
|
+
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
354
|
+
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
355
|
+
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
356
|
+
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
357
|
+
onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
358
|
+
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
359
|
+
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
360
|
+
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
361
|
+
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
362
|
+
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
363
|
+
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
364
|
+
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
365
|
+
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
366
|
+
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
367
|
+
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
368
|
+
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
369
|
+
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
370
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
371
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
372
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
373
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
374
|
+
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
375
|
+
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
376
|
+
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
377
|
+
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
378
|
+
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
379
|
+
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
380
|
+
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
381
|
+
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
382
|
+
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
383
|
+
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
384
|
+
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
385
|
+
autofocus: boolean;
|
386
|
+
readonly dataset: DOMStringMap;
|
387
|
+
nonce?: string;
|
388
|
+
tabIndex: number;
|
389
|
+
blur(): void;
|
390
|
+
focus(options?: FocusOptions): void;
|
391
|
+
};
|
392
|
+
} & TBase;
|
393
|
+
export {};
|
@@ -0,0 +1,119 @@
|
|
1
|
+
export function gesture(Base) {
|
2
|
+
return class extends Base {
|
3
|
+
constructor() {
|
4
|
+
super(...arguments);
|
5
|
+
this.__pointers = new Map();
|
6
|
+
this.__lastTapTime = 0;
|
7
|
+
this.__lastPinchDistance = 0;
|
8
|
+
this.__dragStart = null;
|
9
|
+
this.handlePointerDown = (e) => {
|
10
|
+
e.preventDefault();
|
11
|
+
const point = { x: e.clientX, y: e.clientY };
|
12
|
+
this.__pointers.set(e.pointerId, point);
|
13
|
+
this.addGlobalListeners();
|
14
|
+
};
|
15
|
+
this.handlePointerMove = (e) => {
|
16
|
+
e.preventDefault();
|
17
|
+
const point = { x: e.clientX, y: e.clientY };
|
18
|
+
this.__pointers.set(e.pointerId, point);
|
19
|
+
if (this.__pointers.size === 2) {
|
20
|
+
this.handlePinch();
|
21
|
+
}
|
22
|
+
else if (this.__pointers.size === 1) {
|
23
|
+
this.handleDrag(point, false);
|
24
|
+
}
|
25
|
+
};
|
26
|
+
this.handlePointerUp = (e) => {
|
27
|
+
const point = { x: e.clientX, y: e.clientY };
|
28
|
+
this.__pointers.delete(e.pointerId);
|
29
|
+
if (this.__dragStart) {
|
30
|
+
this.handleDrag(point, true);
|
31
|
+
}
|
32
|
+
if (this.__pointers.size === 0) {
|
33
|
+
this.removeGlobalListeners();
|
34
|
+
this.__dragStart = null;
|
35
|
+
this.__lastPinchDistance = 0;
|
36
|
+
this.handleTap(point);
|
37
|
+
}
|
38
|
+
};
|
39
|
+
}
|
40
|
+
connectedCallback() {
|
41
|
+
if (super.connectedCallback) {
|
42
|
+
super.connectedCallback();
|
43
|
+
}
|
44
|
+
this.addEventListener('pointerdown', this.handlePointerDown);
|
45
|
+
}
|
46
|
+
disconnectedCallback() {
|
47
|
+
if (super.disconnectedCallback) {
|
48
|
+
super.disconnectedCallback();
|
49
|
+
}
|
50
|
+
this.removeEventListener('pointerdown', this.handlePointerDown);
|
51
|
+
this.removeGlobalListeners();
|
52
|
+
}
|
53
|
+
handlePinch() {
|
54
|
+
const pointers = Array.from(this.__pointers.values());
|
55
|
+
const currentDistance = this.getDistance(pointers[0], pointers[1]);
|
56
|
+
if (this.__lastPinchDistance) {
|
57
|
+
const scale = currentDistance / this.__lastPinchDistance;
|
58
|
+
const center = {
|
59
|
+
x: (pointers[0].x + pointers[1].x) / 2,
|
60
|
+
y: (pointers[0].y + pointers[1].y) / 2
|
61
|
+
};
|
62
|
+
this.dispatchEvent(new CustomEvent('pinch', {
|
63
|
+
detail: { scale, centerX: center.x, centerY: center.y }
|
64
|
+
}));
|
65
|
+
}
|
66
|
+
this.__lastPinchDistance = currentDistance;
|
67
|
+
}
|
68
|
+
handleDrag(point, end) {
|
69
|
+
if (this.__dragStart) {
|
70
|
+
const deltaX = point.x - this.__dragStart.x;
|
71
|
+
const deltaY = point.y - this.__dragStart.y;
|
72
|
+
this.dispatchEvent(new CustomEvent('drag', {
|
73
|
+
detail: { deltaX, deltaY, clientX: point.x, clientY: point.y, end }
|
74
|
+
}));
|
75
|
+
if (end) {
|
76
|
+
this.__dragStart = null;
|
77
|
+
}
|
78
|
+
else {
|
79
|
+
this.__dragStart = point;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
else if (!end && this.__pointers.size === 1) {
|
83
|
+
/* dragging을 시작하려면, pointer 개수가 1개인 것을 (지연)확인해야한다. */
|
84
|
+
setTimeout(() => {
|
85
|
+
if (this.__pointers.size === 1 && !this.__dragStart) {
|
86
|
+
this.__dragStart = point;
|
87
|
+
}
|
88
|
+
}, 30);
|
89
|
+
}
|
90
|
+
}
|
91
|
+
handleTap(point) {
|
92
|
+
const currentTime = performance.now();
|
93
|
+
const timeSinceLastTap = currentTime - this.__lastTapTime;
|
94
|
+
if (timeSinceLastTap < 300) {
|
95
|
+
// 300ms is a common double-tap threshold
|
96
|
+
this.dispatchEvent(new CustomEvent('doubletap', {
|
97
|
+
detail: { x: point.x, y: point.y }
|
98
|
+
}));
|
99
|
+
}
|
100
|
+
this.__lastTapTime = currentTime;
|
101
|
+
}
|
102
|
+
getDistance(p1, p2) {
|
103
|
+
const dx = p1.x - p2.x;
|
104
|
+
const dy = p1.y - p2.y;
|
105
|
+
return Math.sqrt(dx * dx + dy * dy);
|
106
|
+
}
|
107
|
+
addGlobalListeners() {
|
108
|
+
document.addEventListener('pointermove', this.handlePointerMove);
|
109
|
+
document.addEventListener('pointerup', this.handlePointerUp);
|
110
|
+
document.addEventListener('pointercancel', this.handlePointerUp);
|
111
|
+
}
|
112
|
+
removeGlobalListeners() {
|
113
|
+
document.removeEventListener('pointermove', this.handlePointerMove);
|
114
|
+
document.removeEventListener('pointerup', this.handlePointerUp);
|
115
|
+
document.removeEventListener('pointercancel', this.handlePointerUp);
|
116
|
+
}
|
117
|
+
};
|
118
|
+
}
|
119
|
+
//# sourceMappingURL=gesture-mixin.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"gesture-mixin.js","sourceRoot":"","sources":["../../../src/mixins/gesture-mixin.ts"],"names":[],"mappings":"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","sourcesContent":["interface CustomElement extends HTMLElement {\n connectedCallback?(): void\n disconnectedCallback?(): void\n}\n\ntype Constructor<T = CustomElement> = new (...args: any[]) => T\n\nexport type GestureEventPinch = CustomEvent<{ scale: number; centerX: number; centerY: number }>\nexport type GestureEventDrag = CustomEvent<{\n deltaX: number\n deltaY: number\n clientX: number\n clientY: number\n end: boolean\n}>\nexport type GestureEventDoubleTap = CustomEvent<{ x: number; y: number }>\n\nexport function gesture<TBase extends Constructor>(Base: TBase) {\n return class extends Base {\n __pointers = new Map<number, { x: number; y: number }>()\n __lastTapTime = 0\n __lastPinchDistance = 0\n __dragStart: { x: number; y: number } | null = null\n\n connectedCallback(): void {\n if (super.connectedCallback) {\n super.connectedCallback()\n }\n this.addEventListener('pointerdown', this.handlePointerDown as EventListener)\n }\n\n disconnectedCallback(): void {\n if (super.disconnectedCallback) {\n super.disconnectedCallback()\n }\n this.removeEventListener('pointerdown', this.handlePointerDown as EventListener)\n this.removeGlobalListeners()\n }\n\n handlePointerDown = (e: PointerEvent) => {\n e.preventDefault()\n const point = { x: e.clientX, y: e.clientY }\n this.__pointers.set(e.pointerId, point)\n\n this.addGlobalListeners()\n }\n\n handlePointerMove = (e: PointerEvent) => {\n e.preventDefault()\n const point = { x: e.clientX, y: e.clientY }\n this.__pointers.set(e.pointerId, point)\n\n if (this.__pointers.size === 2) {\n this.handlePinch()\n } else if (this.__pointers.size === 1) {\n this.handleDrag(point, false)\n }\n }\n\n handlePointerUp = (e: PointerEvent) => {\n const point = { x: e.clientX, y: e.clientY }\n this.__pointers.delete(e.pointerId)\n\n if (this.__dragStart) {\n this.handleDrag(point, true)\n }\n\n if (this.__pointers.size === 0) {\n this.removeGlobalListeners()\n this.__dragStart = null\n this.__lastPinchDistance = 0\n this.handleTap(point)\n }\n }\n\n handlePinch() {\n const pointers = Array.from(this.__pointers.values()) as { x: number; y: number }[]\n const currentDistance = this.getDistance(pointers[0], pointers[1])\n\n if (this.__lastPinchDistance) {\n const scale = currentDistance / this.__lastPinchDistance\n const center = {\n x: (pointers[0].x + pointers[1].x) / 2,\n y: (pointers[0].y + pointers[1].y) / 2\n }\n\n this.dispatchEvent(\n new CustomEvent('pinch', {\n detail: { scale, centerX: center.x, centerY: center.y }\n })\n )\n }\n\n this.__lastPinchDistance = currentDistance\n }\n\n handleDrag(point: { x: number; y: number }, end: boolean) {\n if (this.__dragStart) {\n const deltaX = point.x - this.__dragStart.x\n const deltaY = point.y - this.__dragStart.y\n\n this.dispatchEvent(\n new CustomEvent('drag', {\n detail: { deltaX, deltaY, clientX: point.x, clientY: point.y, end }\n })\n )\n\n if (end) {\n this.__dragStart = null\n } else {\n this.__dragStart = point\n }\n } else if (!end && this.__pointers.size === 1) {\n /* dragging을 시작하려면, pointer 개수가 1개인 것을 (지연)확인해야한다. */\n setTimeout(() => {\n if (this.__pointers.size === 1 && !this.__dragStart) {\n this.__dragStart = point\n }\n }, 30)\n }\n }\n\n handleTap(point: { x: number; y: number }) {\n const currentTime = performance.now()\n const timeSinceLastTap = currentTime - this.__lastTapTime\n\n if (timeSinceLastTap < 300) {\n // 300ms is a common double-tap threshold\n this.dispatchEvent(\n new CustomEvent('doubletap', {\n detail: { x: point.x, y: point.y }\n })\n )\n }\n\n this.__lastTapTime = currentTime\n }\n\n getDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {\n const dx = p1.x - p2.x\n const dy = p1.y - p2.y\n return Math.sqrt(dx * dx + dy * dy)\n }\n\n addGlobalListeners() {\n document.addEventListener('pointermove', this.handlePointerMove as EventListener)\n document.addEventListener('pointerup', this.handlePointerUp as EventListener)\n document.addEventListener('pointercancel', this.handlePointerUp as EventListener)\n }\n\n removeGlobalListeners() {\n document.removeEventListener('pointermove', this.handlePointerMove as EventListener)\n document.removeEventListener('pointerup', this.handlePointerUp as EventListener)\n document.removeEventListener('pointercancel', this.handlePointerUp as EventListener)\n }\n }\n}\n"]}
|
package/dist/src/mixins/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/mixins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA","sourcesContent":["export { default as InfiniteScrollable } from './infinite-scrollable.js'\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/mixins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACxE,cAAc,oBAAoB,CAAA","sourcesContent":["export { default as InfiniteScrollable } from './infinite-scrollable.js'\nexport * from './gesture-mixin.js'\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { hasOverflow } from '../has-overflow.js'\n\nexport class TooltipReactiveController implements ReactiveController {\n private host: ReactiveControllerHost & HTMLElement\n private attributeName: string\n private content?: string | ((element: HTMLElement) => string)\n private static tooltipContainer: HTMLElement | null = null\n\n constructor(\n host: ReactiveControllerHost & HTMLElement,\n options?: {\n content?: string | ((element: HTMLElement) => string)\n attributeName?: string\n }\n ) {\n const { attributeName, content } = options || {}\n\n this.host = host\n this.attributeName = attributeName || 'data-reactive-tooltip'\n this.content = content\n\n host.addController(this)\n\n // Create a tooltip container element if it doesn't exist\n if (!TooltipReactiveController.tooltipContainer) {\n TooltipReactiveController.tooltipContainer = document.createElement('div')\n TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'\n TooltipReactiveController.tooltipContainer.style.position = 'fixed'\n TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'\n TooltipReactiveController.tooltipContainer.style.zIndex = '1000'\n // Set default styles using CSS variables\n TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'\n TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'\n TooltipReactiveController.tooltipContainer.style.backgroundColor =\n 'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'\n TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'\n TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'\n TooltipReactiveController.tooltipContainer.style.boxShadow =\n 'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'\n TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'\n TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'\n TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'\n TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'\n document.body.appendChild(TooltipReactiveController.tooltipContainer)\n }\n }\n\n hostConnected() {\n const target = this.host.shadowRoot ?? this.host\n target.addEventListener('mouseover', this.handleMouseOver)\n target.addEventListener('mouseout', this.handleMouseOut)\n }\n\n hostDisconnected() {\n const target = this.host.shadowRoot ?? this.host\n target.removeEventListener('mouseover', this.handleMouseOver)\n target.removeEventListener('mouseout', this.handleMouseOut)\n }\n\n private handleMouseOver = (e: Event) => {\n const element = e.target as HTMLElement\n if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {\n const tooltipContent =\n typeof this.content === 'function'\n ? this.content.call(this, element)\n : this.content || element.textContent?.trim() || ''\n\n const rect = element.getBoundingClientRect()\n\n // Calculate the fixed position\n const fixedTop = rect.top + rect.height\n const fixedLeft = rect.left\n\n // Set tooltip container position and content\n TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px`\n TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px`\n TooltipReactiveController.tooltipContainer!.style.display = 'block'\n TooltipReactiveController.tooltipContainer!.textContent = tooltipContent\n }\n }\n\n private handleMouseOut = (e: Event) => {\n if (TooltipReactiveController.tooltipContainer) {\n TooltipReactiveController.tooltipContainer.style.display = 'none'\n }\n }\n}\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"snapshot-taker.js","sourceRoot":"","sources":["../../../src/timecapsule/snapshot-taker.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC;;;;GAIG;AACH,IAAI,SAAS,GAAG,QAAQ,CACtB,KAAK,CAAC,EAAE;IACN,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACjB,KAAK,CAAC,IAAI,EAAE,CAAA;IACd,CAAC;AACH,CAAC,EACD,IAAI,EACJ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CACnC,CAAA;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,KAAoB;IACzC,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,OAAM;IACvC,SAAS,CAAC,KAAK,CAAC,CAAA;AAClB,CAAC;AAWD;;GAEG;AACH,MAAM,OAAO,aAAa;IAQxB;;;;OAIG;IACH,YAAY,YAAiB,EAAE,WAAwB;QAZ/C,WAAM,GAAY,KAAK,CAAA;QAE/B,UAAK,GAAY,KAAK,CAAA;QAWpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAChC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;QAC9B,IAAI,CAAC,WAAW,CAAC,cAAc,GAAG,IAAI,CAAA;IACxC,CAAC;IAED;;OAEG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,YAAY,CAAA;QACxB,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC;IAED,wCAAwC;IACxC;;;OAGG;IACH,IAAI,CAAC,QAAiB,KAAK;;QACzB,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;YACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,CAAA;YACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,uCAAuC;IACvC;;;OAGG;IACH,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAA;QACrB,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC;CACF","sourcesContent":["import { TimeCapsule } from './timecapsule'\nimport debounce from 'lodash-es/debounce'\n\n/**\n * A function that takes a SnapshotTaker as an argument and initiates snapshot creation\n * using a debouncer to delay the process.\n * @param {SnapshotTaker} taker - The SnapshotTaker instance to trigger snapshots for.\n */\nvar debouncer = debounce(\n taker => {\n if (!taker.brake) {\n taker.take()\n }\n },\n 1000,\n { leading: true, trailing: false }\n)\n\n/**\n * Function to trigger snapshot creation for a SnapshotTaker instance.\n * Checks if the taker is in a brake state or not dirty before triggering the snapshot.\n * @param {SnapshotTaker} taker - The SnapshotTaker instance to create a snapshot for.\n */\nfunction take_snapshot(taker: SnapshotTaker) {\n if (taker.brake || !taker.dirty) return\n debouncer(taker)\n}\n\n/**\n * Type definition for holding state information.\n * @typedef {Object} StateHolder\n * @property {*} state - The state to be held.\n */\nexport type StateHolder = {\n state: any\n}\n\n/**\n * Class responsible for taking and managing snapshots of state.\n */\nexport class SnapshotTaker {\n private _brake: boolean = false\n\n dirty: boolean = false\n\n state_holder?: StateHolder\n timecapsule?: TimeCapsule\n\n /**\n * Creates an instance of SnapshotTaker.\n * @param {*} state_holder - The object that holds the state to be snapshot.\n * @param {TimeCapsule} timecapsule - The TimeCapsule instance associated with this SnapshotTaker.\n */\n constructor(state_holder: any, timecapsule: TimeCapsule) {\n this.state_holder = state_holder\n this.timecapsule = timecapsule\n this.timecapsule.snapshot_taker = this\n }\n\n /**\n * Disposes of the SnapshotTaker and clears associated references.\n */\n dispose() {\n delete this.state_holder\n delete this.timecapsule\n }\n\n /**\n * Marks the SnapshotTaker as dirty and initiates snapshot creation.\n */\n touch() {\n this.dirty = true\n take_snapshot(this)\n }\n\n /* 모든 조건에 관계없이 현재 상태를 snapshot으로 취한다. */\n /**\n * Takes a snapshot of the current state.\n * @param {boolean} [force=false] - If true, the snapshot is taken even if not dirty.\n */\n take(force: boolean = false) {\n if (this.dirty || force) {\n this.timecapsule?.snapshot(this.state_holder?.state)\n this.dirty = false\n }\n }\n\n /**\n * Gets the brake state of the SnapshotTaker.\n * @returns {boolean} - true if the brake is active, false otherwise.\n */\n get brake() {\n return this._brake\n }\n\n /* 마우스를 드래깅하는 동안, 보통 brake 를 ON 시킨다. */\n /**\n * Sets the brake state of the SnapshotTaker and initiates snapshot creation.\n * @param {boolean} brake - The new brake state.\n */\n set brake(brake) {\n this._brake = !!brake\n take_snapshot(this)\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"snapshot-taker.js","sourceRoot":"","sources":["../../../src/timecapsule/snapshot-taker.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC;;;;GAIG;AACH,IAAI,SAAS,GAAG,QAAQ,CACtB,KAAK,CAAC,EAAE;IACN,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACjB,KAAK,CAAC,IAAI,EAAE,CAAA;IACd,CAAC;AACH,CAAC,EACD,IAAI,EACJ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CACnC,CAAA;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,KAAoB;IACzC,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,OAAM;IACvC,SAAS,CAAC,KAAK,CAAC,CAAA;AAClB,CAAC;AAWD;;GAEG;AACH,MAAM,OAAO,aAAa;IAQxB;;;;OAIG;IACH,YAAY,YAAiB,EAAE,WAAwB;QAZ/C,WAAM,GAAY,KAAK,CAAA;QAE/B,UAAK,GAAY,KAAK,CAAA;QAWpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAChC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;QAC9B,IAAI,CAAC,WAAW,CAAC,cAAc,GAAG,IAAI,CAAA;IACxC,CAAC;IAED;;OAEG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,YAAY,CAAA;QACxB,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC;IAED,wCAAwC;IACxC;;;OAGG;IACH,IAAI,CAAC,QAAiB,KAAK;;QACzB,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;YACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,CAAA;YACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,uCAAuC;IACvC;;;OAGG;IACH,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAA;QACrB,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC;CACF","sourcesContent":["import { TimeCapsule } from './timecapsule.js'\nimport debounce from 'lodash-es/debounce'\n\n/**\n * A function that takes a SnapshotTaker as an argument and initiates snapshot creation\n * using a debouncer to delay the process.\n * @param {SnapshotTaker} taker - The SnapshotTaker instance to trigger snapshots for.\n */\nvar debouncer = debounce(\n taker => {\n if (!taker.brake) {\n taker.take()\n }\n },\n 1000,\n { leading: true, trailing: false }\n)\n\n/**\n * Function to trigger snapshot creation for a SnapshotTaker instance.\n * Checks if the taker is in a brake state or not dirty before triggering the snapshot.\n * @param {SnapshotTaker} taker - The SnapshotTaker instance to create a snapshot for.\n */\nfunction take_snapshot(taker: SnapshotTaker) {\n if (taker.brake || !taker.dirty) return\n debouncer(taker)\n}\n\n/**\n * Type definition for holding state information.\n * @typedef {Object} StateHolder\n * @property {*} state - The state to be held.\n */\nexport type StateHolder = {\n state: any\n}\n\n/**\n * Class responsible for taking and managing snapshots of state.\n */\nexport class SnapshotTaker {\n private _brake: boolean = false\n\n dirty: boolean = false\n\n state_holder?: StateHolder\n timecapsule?: TimeCapsule\n\n /**\n * Creates an instance of SnapshotTaker.\n * @param {*} state_holder - The object that holds the state to be snapshot.\n * @param {TimeCapsule} timecapsule - The TimeCapsule instance associated with this SnapshotTaker.\n */\n constructor(state_holder: any, timecapsule: TimeCapsule) {\n this.state_holder = state_holder\n this.timecapsule = timecapsule\n this.timecapsule.snapshot_taker = this\n }\n\n /**\n * Disposes of the SnapshotTaker and clears associated references.\n */\n dispose() {\n delete this.state_holder\n delete this.timecapsule\n }\n\n /**\n * Marks the SnapshotTaker as dirty and initiates snapshot creation.\n */\n touch() {\n this.dirty = true\n take_snapshot(this)\n }\n\n /* 모든 조건에 관계없이 현재 상태를 snapshot으로 취한다. */\n /**\n * Takes a snapshot of the current state.\n * @param {boolean} [force=false] - If true, the snapshot is taken even if not dirty.\n */\n take(force: boolean = false) {\n if (this.dirty || force) {\n this.timecapsule?.snapshot(this.state_holder?.state)\n this.dirty = false\n }\n }\n\n /**\n * Gets the brake state of the SnapshotTaker.\n * @returns {boolean} - true if the brake is active, false otherwise.\n */\n get brake() {\n return this._brake\n }\n\n /* 마우스를 드래깅하는 동안, 보통 brake 를 ON 시킨다. */\n /**\n * Sets the brake state of the SnapshotTaker and initiates snapshot creation.\n * @param {boolean} brake - The new brake state.\n */\n set brake(brake) {\n this._brake = !!brake\n take_snapshot(this)\n }\n}\n"]}
|