@operato/mini-map 8.0.0-alpha.0 → 8.0.0-alpha.31
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 +18 -0
- package/dist/src/ox-mini-map.js +12 -12
- package/dist/src/ox-mini-map.js.map +1 -1
- package/dist/src/ox-zoomable-image.d.ts +374 -14
- package/dist/src/ox-zoomable-image.js +65 -108
- package/dist/src/ox-zoomable-image.js.map +1 -1
- package/dist/stories/ox-zoomable-image.stories.d.ts +4 -0
- package/dist/stories/ox-zoomable-image.stories.js +10 -6
- package/dist/stories/ox-zoomable-image.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-mini-map.ts +12 -12
- package/src/ox-zoomable-image.ts +62 -101
- package/stories/ox-zoomable-image.stories.ts +11 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.30...v8.0.0-alpha.31) (2024-10-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* missing datasets and annotations change event notification ([073b10d](https://github.com/hatiolab/operato/commit/073b10de469cd82f61cfdfb217f36eb939398288))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* apply pointer-event ([ecc73a1](https://github.com/hatiolab/operato/commit/ecc73a1d2df0d8ce7ba462965062a91461c504c3))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @operato/mini-map
|
package/dist/src/ox-mini-map.js
CHANGED
|
@@ -15,8 +15,8 @@ let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
|
|
|
15
15
|
connectedCallback() {
|
|
16
16
|
super.connectedCallback();
|
|
17
17
|
window.addEventListener('resize', this.handleResize.bind(this));
|
|
18
|
-
this.addEventListener('
|
|
19
|
-
this.addEventListener('
|
|
18
|
+
this.addEventListener('pointermove', this.handlePointerMove.bind(this));
|
|
19
|
+
this.addEventListener('pointerup', this.handlePointerUp.bind(this));
|
|
20
20
|
if (this.target) {
|
|
21
21
|
this.observeTarget(this.target);
|
|
22
22
|
}
|
|
@@ -24,8 +24,8 @@ let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
|
|
|
24
24
|
disconnectedCallback() {
|
|
25
25
|
super.disconnectedCallback();
|
|
26
26
|
window.removeEventListener('resize', this.handleResize.bind(this));
|
|
27
|
-
window.removeEventListener('
|
|
28
|
-
window.removeEventListener('
|
|
27
|
+
window.removeEventListener('pointermove', this.handlePointerMove.bind(this));
|
|
28
|
+
window.removeEventListener('pointerup', this.handlePointerUp.bind(this));
|
|
29
29
|
if (this.observer) {
|
|
30
30
|
this.observer.disconnect();
|
|
31
31
|
this.observer = null;
|
|
@@ -102,7 +102,7 @@ let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
|
|
|
102
102
|
const viewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
|
|
103
103
|
viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`;
|
|
104
104
|
}
|
|
105
|
-
|
|
105
|
+
handlePointerDown(event) {
|
|
106
106
|
this.isDragging = true;
|
|
107
107
|
this.startX = event.clientX;
|
|
108
108
|
this.startY = event.clientY;
|
|
@@ -111,11 +111,11 @@ let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
|
|
|
111
111
|
this.initialScrollLeft = target.scrollLeft;
|
|
112
112
|
this.initialScrollTop = target.scrollTop;
|
|
113
113
|
}
|
|
114
|
-
window.addEventListener('
|
|
115
|
-
window.addEventListener('
|
|
114
|
+
window.addEventListener('pointermove', this.handlePointerMove.bind(this));
|
|
115
|
+
window.addEventListener('pointerup', this.handlePointerUp.bind(this));
|
|
116
116
|
event.preventDefault();
|
|
117
117
|
}
|
|
118
|
-
|
|
118
|
+
handlePointerMove(event) {
|
|
119
119
|
if (!this.isDragging)
|
|
120
120
|
return;
|
|
121
121
|
const deltaX = event.clientX - this.startX;
|
|
@@ -133,16 +133,16 @@ let OxMiniMapComponent = class OxMiniMapComponent extends LitElement {
|
|
|
133
133
|
this.updateViewportPosition(1, target.scrollLeft, target.scrollTop); // Assuming no additional transform during drag
|
|
134
134
|
event.preventDefault();
|
|
135
135
|
}
|
|
136
|
-
|
|
136
|
+
handlePointerUp(event) {
|
|
137
137
|
this.isDragging = false;
|
|
138
|
-
window.removeEventListener('
|
|
139
|
-
window.removeEventListener('
|
|
138
|
+
window.removeEventListener('pointermove', this.handlePointerMove.bind(this));
|
|
139
|
+
window.removeEventListener('pointerup', this.handlePointerUp.bind(this));
|
|
140
140
|
event.preventDefault();
|
|
141
141
|
}
|
|
142
142
|
render() {
|
|
143
143
|
return html `
|
|
144
144
|
<div id="minimap">
|
|
145
|
-
<div id="viewport" @
|
|
145
|
+
<div id="viewport" @pointerdown=${this.handlePointerDown}></div>
|
|
146
146
|
</div>
|
|
147
147
|
`;
|
|
148
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-mini-map.js","sourceRoot":"","sources":["../../src/ox-mini-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-mini-map')\nclass OxMiniMapComponent extends LitElement {\n static styles = css`\n :host {\n display: flex;\n position: relative;\n background-color: gray;\n width: 200px; /* 기본 너비 */\n height: 150px; /* 기본 높이 */\n }\n\n #minimap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n background-color: var(--md-sys-color-surface);\n overflow: hidden;\n }\n\n #viewport {\n position: absolute;\n border: 1px dashed blue;\n box-sizing: border-box;\n cursor: move;\n background-color: rgba(255, 255, 255, 0.5);\n }\n `\n\n @property({ type: Object }) target: HTMLElement | null = null\n private isDragging = false\n private startX = 0\n private startY = 0\n private initialScrollLeft = 0\n private initialScrollTop = 0\n private observer: MutationObserver | null = null\n\n connectedCallback() {\n super.connectedCallback()\n window.addEventListener('resize', this.handleResize.bind(this))\n this.addEventListener('mousemove', this.handleMouseMove.bind(this))\n this.addEventListener('mouseup', this.handleMouseUp.bind(this))\n if (this.target) {\n this.observeTarget(this.target)\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n window.removeEventListener('resize', this.handleResize.bind(this))\n window.removeEventListener('mousemove', this.handleMouseMove.bind(this))\n window.removeEventListener('mouseup', this.handleMouseUp.bind(this))\n if (this.observer) {\n this.observer.disconnect()\n this.observer = null\n }\n }\n\n firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n super.firstUpdated(changes)\n this.updateTarget()\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('target')) {\n this.updateTarget()\n if (this.target) {\n this.observeTarget(this.target)\n }\n }\n }\n\n handleResize() {\n this.updateTarget()\n }\n\n observeTarget(target: HTMLElement) {\n if (this.observer) {\n this.observer.disconnect()\n }\n this.observer = new MutationObserver(() => {\n this.updateTarget()\n })\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] })\n }\n\n updateTarget() {\n const target = this.target || this.parentElement\n if (!target) {\n return\n }\n\n const targetStyle = window.getComputedStyle(target)\n const transform = targetStyle.transform\n const scaleMatch = /scale\\(([^,]+),?([^)]+)?\\)/.exec(transform)\n const leftMatch = /translate\\(([^,]+)px, ?([^)]+)?px\\)/.exec(transform)\n\n let scale = 1\n let left = 0\n let top = 0\n\n if (scaleMatch) {\n scale = parseFloat(scaleMatch[1])\n }\n\n if (leftMatch) {\n left = parseFloat(leftMatch[1])\n top = parseFloat(leftMatch[2] || '0')\n }\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scaleMinimap =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const minimapHeight = target.scrollHeight * scaleMinimap\n const minimapWidth = target.scrollWidth * scaleMinimap\n\n const viewportHeight = target.clientHeight * scaleMinimap\n const viewportWidth = target.clientWidth * scaleMinimap\n\n const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n\n minimap.style.width = `${minimapWidth}px`\n minimap.style.height = `${minimapHeight}px`\n\n viewport.style.width = `${viewportWidth}px`\n viewport.style.height = `${viewportHeight}px`\n\n this.updateViewportPosition(scale, left, top)\n }\n\n updateViewportPosition(scale: number, left: number, top: number) {\n const target = this.target || this.parentElement\n if (!target) {\n return\n }\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scaleMinimap =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`\n }\n\n handleMouseDown(event: MouseEvent) {\n this.isDragging = true\n this.startX = event.clientX\n this.startY = event.clientY\n\n const target = this.target || this.parentElement\n if (target) {\n this.initialScrollLeft = target.scrollLeft\n this.initialScrollTop = target.scrollTop\n }\n\n window.addEventListener('mousemove', this.handleMouseMove.bind(this))\n window.addEventListener('mouseup', this.handleMouseUp.bind(this))\n\n event.preventDefault()\n }\n\n handleMouseMove(event: MouseEvent) {\n if (!this.isDragging) return\n\n const deltaX = event.clientX - this.startX\n const deltaY = event.clientY - this.startY\n\n const target = this.target || this.parentElement\n if (!target) return\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scale =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const scrollX = deltaX / scale\n const scrollY = deltaY / scale\n\n target.scrollLeft = this.initialScrollLeft + scrollX\n target.scrollTop = this.initialScrollTop + scrollY\n\n this.updateViewportPosition(1, target.scrollLeft, target.scrollTop) // Assuming no additional transform during drag\n\n event.preventDefault()\n }\n\n handleMouseUp(event: MouseEvent) {\n this.isDragging = false\n window.removeEventListener('mousemove', this.handleMouseMove.bind(this))\n window.removeEventListener('mouseup', this.handleMouseUp.bind(this))\n event.preventDefault()\n }\n\n render() {\n return html`\n <div id=\"minimap\">\n <div id=\"viewport\" @mousedown=${this.handleMouseDown}></div>\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-mini-map.js","sourceRoot":"","sources":["../../src/ox-mini-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-mini-map')\nclass OxMiniMapComponent extends LitElement {\n static styles = css`\n :host {\n display: flex;\n position: relative;\n background-color: gray;\n width: 200px; /* 기본 너비 */\n height: 150px; /* 기본 높이 */\n }\n\n #minimap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n background-color: var(--md-sys-color-surface);\n overflow: hidden;\n }\n\n #viewport {\n position: absolute;\n border: 1px dashed blue;\n box-sizing: border-box;\n cursor: move;\n background-color: rgba(255, 255, 255, 0.5);\n }\n `\n\n @property({ type: Object }) target: HTMLElement | null = null\n private isDragging = false\n private startX = 0\n private startY = 0\n private initialScrollLeft = 0\n private initialScrollTop = 0\n private observer: MutationObserver | null = null\n\n connectedCallback() {\n super.connectedCallback()\n window.addEventListener('resize', this.handleResize.bind(this))\n this.addEventListener('pointermove', this.handlePointerMove.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n if (this.target) {\n this.observeTarget(this.target)\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n window.removeEventListener('resize', this.handleResize.bind(this))\n window.removeEventListener('pointermove', this.handlePointerMove.bind(this))\n window.removeEventListener('pointerup', this.handlePointerUp.bind(this))\n if (this.observer) {\n this.observer.disconnect()\n this.observer = null\n }\n }\n\n firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n super.firstUpdated(changes)\n this.updateTarget()\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('target')) {\n this.updateTarget()\n if (this.target) {\n this.observeTarget(this.target)\n }\n }\n }\n\n handleResize() {\n this.updateTarget()\n }\n\n observeTarget(target: HTMLElement) {\n if (this.observer) {\n this.observer.disconnect()\n }\n this.observer = new MutationObserver(() => {\n this.updateTarget()\n })\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] })\n }\n\n updateTarget() {\n const target = this.target || this.parentElement\n if (!target) {\n return\n }\n\n const targetStyle = window.getComputedStyle(target)\n const transform = targetStyle.transform\n const scaleMatch = /scale\\(([^,]+),?([^)]+)?\\)/.exec(transform)\n const leftMatch = /translate\\(([^,]+)px, ?([^)]+)?px\\)/.exec(transform)\n\n let scale = 1\n let left = 0\n let top = 0\n\n if (scaleMatch) {\n scale = parseFloat(scaleMatch[1])\n }\n\n if (leftMatch) {\n left = parseFloat(leftMatch[1])\n top = parseFloat(leftMatch[2] || '0')\n }\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scaleMinimap =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const minimapHeight = target.scrollHeight * scaleMinimap\n const minimapWidth = target.scrollWidth * scaleMinimap\n\n const viewportHeight = target.clientHeight * scaleMinimap\n const viewportWidth = target.clientWidth * scaleMinimap\n\n const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n\n minimap.style.width = `${minimapWidth}px`\n minimap.style.height = `${minimapHeight}px`\n\n viewport.style.width = `${viewportWidth}px`\n viewport.style.height = `${viewportHeight}px`\n\n this.updateViewportPosition(scale, left, top)\n }\n\n updateViewportPosition(scale: number, left: number, top: number) {\n const target = this.target || this.parentElement\n if (!target) {\n return\n }\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scaleMinimap =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n viewport.style.transform = `scale(${scale}) translate(${left * scaleMinimap}px, ${top * scaleMinimap}px)`\n }\n\n handlePointerDown(event: MouseEvent) {\n this.isDragging = true\n this.startX = event.clientX\n this.startY = event.clientY\n\n const target = this.target || this.parentElement\n if (target) {\n this.initialScrollLeft = target.scrollLeft\n this.initialScrollTop = target.scrollTop\n }\n\n window.addEventListener('pointermove', this.handlePointerMove.bind(this))\n window.addEventListener('pointerup', this.handlePointerUp.bind(this))\n\n event.preventDefault()\n }\n\n handlePointerMove(event: MouseEvent) {\n if (!this.isDragging) return\n\n const deltaX = event.clientX - this.startX\n const deltaY = event.clientY - this.startY\n\n const target = this.target || this.parentElement\n if (!target) return\n\n const targetRatio = target.scrollHeight / target.scrollWidth\n const thisRatio = this.offsetHeight / this.offsetWidth\n\n const scale =\n targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n const scrollX = deltaX / scale\n const scrollY = deltaY / scale\n\n target.scrollLeft = this.initialScrollLeft + scrollX\n target.scrollTop = this.initialScrollTop + scrollY\n\n this.updateViewportPosition(1, target.scrollLeft, target.scrollTop) // Assuming no additional transform during drag\n\n event.preventDefault()\n }\n\n handlePointerUp(event: MouseEvent) {\n this.isDragging = false\n window.removeEventListener('pointermove', this.handlePointerMove.bind(this))\n window.removeEventListener('pointerup', this.handlePointerUp.bind(this))\n event.preventDefault()\n }\n\n render() {\n return html`\n <div id=\"minimap\">\n <div id=\"viewport\" @pointerdown=${this.handlePointerDown}></div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,4 +1,369 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
declare const OxZoomableImage_base: (new (...args: any[]) => {
|
|
3
|
+
__pointers: Map<number, {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
}>;
|
|
7
|
+
__lastTapTime: number;
|
|
8
|
+
__lastPinchDistance: number;
|
|
9
|
+
__dragStart: {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
} | null;
|
|
13
|
+
connectedCallback(): void;
|
|
14
|
+
disconnectedCallback(): void;
|
|
15
|
+
handlePointerDown: (e: PointerEvent) => void;
|
|
16
|
+
handlePointerMove: (e: PointerEvent) => void;
|
|
17
|
+
handlePointerUp: (e: PointerEvent) => void;
|
|
18
|
+
handlePinch(): void;
|
|
19
|
+
handleDrag(point: {
|
|
20
|
+
x: number;
|
|
21
|
+
y: number;
|
|
22
|
+
}): void;
|
|
23
|
+
handleTap(point: {
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
}): void;
|
|
27
|
+
getDistance(p1: {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
}, p2: {
|
|
31
|
+
x: number;
|
|
32
|
+
y: number;
|
|
33
|
+
}): number;
|
|
34
|
+
addGlobalListeners(): void;
|
|
35
|
+
removeGlobalListeners(): void;
|
|
36
|
+
accessKey: string;
|
|
37
|
+
readonly accessKeyLabel: string;
|
|
38
|
+
autocapitalize: string;
|
|
39
|
+
dir: string;
|
|
40
|
+
draggable: boolean;
|
|
41
|
+
hidden: boolean;
|
|
42
|
+
inert: boolean;
|
|
43
|
+
innerText: string;
|
|
44
|
+
lang: string;
|
|
45
|
+
readonly offsetHeight: number;
|
|
46
|
+
readonly offsetLeft: number;
|
|
47
|
+
readonly offsetParent: Element | null;
|
|
48
|
+
readonly offsetTop: number;
|
|
49
|
+
readonly offsetWidth: number;
|
|
50
|
+
outerText: string;
|
|
51
|
+
popover: string | null;
|
|
52
|
+
spellcheck: boolean;
|
|
53
|
+
title: string;
|
|
54
|
+
translate: boolean;
|
|
55
|
+
attachInternals(): ElementInternals;
|
|
56
|
+
click(): void;
|
|
57
|
+
hidePopover(): void;
|
|
58
|
+
showPopover(): void;
|
|
59
|
+
togglePopover(force?: boolean): boolean;
|
|
60
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
61
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
62
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
63
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
64
|
+
readonly attributes: NamedNodeMap;
|
|
65
|
+
readonly classList: DOMTokenList;
|
|
66
|
+
className: string;
|
|
67
|
+
readonly clientHeight: number;
|
|
68
|
+
readonly clientLeft: number;
|
|
69
|
+
readonly clientTop: number;
|
|
70
|
+
readonly clientWidth: number;
|
|
71
|
+
id: string;
|
|
72
|
+
innerHTML: string;
|
|
73
|
+
readonly localName: string;
|
|
74
|
+
readonly namespaceURI: string | null;
|
|
75
|
+
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
76
|
+
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
77
|
+
outerHTML: string;
|
|
78
|
+
readonly ownerDocument: Document;
|
|
79
|
+
readonly part: DOMTokenList;
|
|
80
|
+
readonly prefix: string | null;
|
|
81
|
+
readonly scrollHeight: number;
|
|
82
|
+
scrollLeft: number;
|
|
83
|
+
scrollTop: number;
|
|
84
|
+
readonly scrollWidth: number;
|
|
85
|
+
readonly shadowRoot: ShadowRoot | null;
|
|
86
|
+
slot: string;
|
|
87
|
+
readonly tagName: string;
|
|
88
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
89
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
|
90
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
91
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
92
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
93
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
|
94
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
|
95
|
+
getAttribute(qualifiedName: string): string | null;
|
|
96
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
97
|
+
getAttributeNames(): string[];
|
|
98
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
|
99
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
100
|
+
getBoundingClientRect(): DOMRect;
|
|
101
|
+
getClientRects(): DOMRectList;
|
|
102
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
103
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
104
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
105
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
106
|
+
getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
107
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
108
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
109
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
110
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
111
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
112
|
+
getHTML(options?: GetHTMLOptions): string;
|
|
113
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
114
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
115
|
+
hasAttributes(): boolean;
|
|
116
|
+
hasPointerCapture(pointerId: number): boolean;
|
|
117
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
118
|
+
insertAdjacentHTML(position: InsertPosition, string: string): void;
|
|
119
|
+
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
120
|
+
matches(selectors: string): boolean;
|
|
121
|
+
releasePointerCapture(pointerId: number): void;
|
|
122
|
+
removeAttribute(qualifiedName: string): void;
|
|
123
|
+
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
124
|
+
removeAttributeNode(attr: Attr): Attr;
|
|
125
|
+
requestFullscreen(options?: FullscreenOptions): Promise<void>;
|
|
126
|
+
requestPointerLock(options?: PointerLockOptions): Promise<void>;
|
|
127
|
+
scroll(options?: ScrollToOptions): void;
|
|
128
|
+
scroll(x: number, y: number): void;
|
|
129
|
+
scrollBy(options?: ScrollToOptions): void;
|
|
130
|
+
scrollBy(x: number, y: number): void;
|
|
131
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
|
132
|
+
scrollTo(options?: ScrollToOptions): void;
|
|
133
|
+
scrollTo(x: number, y: number): void;
|
|
134
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
135
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
136
|
+
setAttributeNode(attr: Attr): Attr | null;
|
|
137
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
138
|
+
setHTMLUnsafe(html: string): void;
|
|
139
|
+
setPointerCapture(pointerId: number): void;
|
|
140
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
141
|
+
webkitMatchesSelector(selectors: string): boolean;
|
|
142
|
+
readonly baseURI: string;
|
|
143
|
+
readonly childNodes: NodeListOf<ChildNode>;
|
|
144
|
+
readonly firstChild: ChildNode | null;
|
|
145
|
+
readonly isConnected: boolean;
|
|
146
|
+
readonly lastChild: ChildNode | null;
|
|
147
|
+
readonly nextSibling: ChildNode | null;
|
|
148
|
+
readonly nodeName: string;
|
|
149
|
+
readonly nodeType: number;
|
|
150
|
+
nodeValue: string | null;
|
|
151
|
+
readonly parentElement: HTMLElement | null;
|
|
152
|
+
readonly parentNode: ParentNode | null;
|
|
153
|
+
readonly previousSibling: ChildNode | null;
|
|
154
|
+
textContent: string | null;
|
|
155
|
+
appendChild<T extends Node>(node: T): T;
|
|
156
|
+
cloneNode(deep?: boolean): Node;
|
|
157
|
+
compareDocumentPosition(other: Node): number;
|
|
158
|
+
contains(other: Node | null): boolean;
|
|
159
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
|
160
|
+
hasChildNodes(): boolean;
|
|
161
|
+
insertBefore<T extends Node>(node: T, child: Node | null): T;
|
|
162
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
|
163
|
+
isEqualNode(otherNode: Node | null): boolean;
|
|
164
|
+
isSameNode(otherNode: Node | null): boolean;
|
|
165
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
|
166
|
+
lookupPrefix(namespace: string | null): string | null;
|
|
167
|
+
normalize(): void;
|
|
168
|
+
removeChild<T extends Node>(child: T): T;
|
|
169
|
+
replaceChild<T extends Node>(node: Node, child: T): T;
|
|
170
|
+
readonly ELEMENT_NODE: 1;
|
|
171
|
+
readonly ATTRIBUTE_NODE: 2;
|
|
172
|
+
readonly TEXT_NODE: 3;
|
|
173
|
+
readonly CDATA_SECTION_NODE: 4;
|
|
174
|
+
readonly ENTITY_REFERENCE_NODE: 5;
|
|
175
|
+
readonly ENTITY_NODE: 6;
|
|
176
|
+
readonly PROCESSING_INSTRUCTION_NODE: 7;
|
|
177
|
+
readonly COMMENT_NODE: 8;
|
|
178
|
+
readonly DOCUMENT_NODE: 9;
|
|
179
|
+
readonly DOCUMENT_TYPE_NODE: 10;
|
|
180
|
+
readonly DOCUMENT_FRAGMENT_NODE: 11;
|
|
181
|
+
readonly NOTATION_NODE: 12;
|
|
182
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: 1;
|
|
183
|
+
readonly DOCUMENT_POSITION_PRECEDING: 2;
|
|
184
|
+
readonly DOCUMENT_POSITION_FOLLOWING: 4;
|
|
185
|
+
readonly DOCUMENT_POSITION_CONTAINS: 8;
|
|
186
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
187
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
188
|
+
dispatchEvent(event: Event): boolean;
|
|
189
|
+
ariaAtomic: string | null;
|
|
190
|
+
ariaAutoComplete: string | null;
|
|
191
|
+
ariaBrailleLabel: string | null;
|
|
192
|
+
ariaBrailleRoleDescription: string | null;
|
|
193
|
+
ariaBusy: string | null;
|
|
194
|
+
ariaChecked: string | null;
|
|
195
|
+
ariaColCount: string | null;
|
|
196
|
+
ariaColIndex: string | null;
|
|
197
|
+
ariaColSpan: string | null;
|
|
198
|
+
ariaCurrent: string | null;
|
|
199
|
+
ariaDescription: string | null;
|
|
200
|
+
ariaDisabled: string | null;
|
|
201
|
+
ariaExpanded: string | null;
|
|
202
|
+
ariaHasPopup: string | null;
|
|
203
|
+
ariaHidden: string | null;
|
|
204
|
+
ariaInvalid: string | null;
|
|
205
|
+
ariaKeyShortcuts: string | null;
|
|
206
|
+
ariaLabel: string | null;
|
|
207
|
+
ariaLevel: string | null;
|
|
208
|
+
ariaLive: string | null;
|
|
209
|
+
ariaModal: string | null;
|
|
210
|
+
ariaMultiLine: string | null;
|
|
211
|
+
ariaMultiSelectable: string | null;
|
|
212
|
+
ariaOrientation: string | null;
|
|
213
|
+
ariaPlaceholder: string | null;
|
|
214
|
+
ariaPosInSet: string | null;
|
|
215
|
+
ariaPressed: string | null;
|
|
216
|
+
ariaReadOnly: string | null;
|
|
217
|
+
ariaRequired: string | null;
|
|
218
|
+
ariaRoleDescription: string | null;
|
|
219
|
+
ariaRowCount: string | null;
|
|
220
|
+
ariaRowIndex: string | null;
|
|
221
|
+
ariaRowSpan: string | null;
|
|
222
|
+
ariaSelected: string | null;
|
|
223
|
+
ariaSetSize: string | null;
|
|
224
|
+
ariaSort: string | null;
|
|
225
|
+
ariaValueMax: string | null;
|
|
226
|
+
ariaValueMin: string | null;
|
|
227
|
+
ariaValueNow: string | null;
|
|
228
|
+
ariaValueText: string | null;
|
|
229
|
+
role: string | null;
|
|
230
|
+
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
|
|
231
|
+
getAnimations(options?: GetAnimationsOptions): Animation[];
|
|
232
|
+
after(...nodes: (Node | string)[]): void;
|
|
233
|
+
before(...nodes: (Node | string)[]): void;
|
|
234
|
+
remove(): void;
|
|
235
|
+
replaceWith(...nodes: (Node | string)[]): void;
|
|
236
|
+
readonly nextElementSibling: Element | null;
|
|
237
|
+
readonly previousElementSibling: Element | null;
|
|
238
|
+
readonly childElementCount: number;
|
|
239
|
+
readonly children: HTMLCollection;
|
|
240
|
+
readonly firstElementChild: Element | null;
|
|
241
|
+
readonly lastElementChild: Element | null;
|
|
242
|
+
append(...nodes: (Node | string)[]): void;
|
|
243
|
+
prepend(...nodes: (Node | string)[]): void;
|
|
244
|
+
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
245
|
+
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
246
|
+
querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
247
|
+
querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
248
|
+
querySelector<E extends Element = Element>(selectors: string): E | null;
|
|
249
|
+
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
250
|
+
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
251
|
+
querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
252
|
+
querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
253
|
+
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
254
|
+
replaceChildren(...nodes: (Node | string)[]): void;
|
|
255
|
+
readonly assignedSlot: HTMLSlotElement | null;
|
|
256
|
+
readonly attributeStyleMap: StylePropertyMap;
|
|
257
|
+
readonly style: CSSStyleDeclaration;
|
|
258
|
+
contentEditable: string;
|
|
259
|
+
enterKeyHint: string;
|
|
260
|
+
inputMode: string;
|
|
261
|
+
readonly isContentEditable: boolean;
|
|
262
|
+
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
263
|
+
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
264
|
+
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
265
|
+
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
266
|
+
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
267
|
+
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
268
|
+
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
269
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
270
|
+
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
271
|
+
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
272
|
+
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
273
|
+
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
274
|
+
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
275
|
+
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
276
|
+
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
277
|
+
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
278
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
279
|
+
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
|
+
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
281
|
+
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
282
|
+
oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
283
|
+
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
284
|
+
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
285
|
+
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
286
|
+
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
287
|
+
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
288
|
+
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
289
|
+
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
290
|
+
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
291
|
+
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
292
|
+
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
293
|
+
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
294
|
+
onerror: OnErrorEventHandler;
|
|
295
|
+
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
296
|
+
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
|
297
|
+
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
298
|
+
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
299
|
+
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
300
|
+
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
301
|
+
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
302
|
+
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
303
|
+
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
304
|
+
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
305
|
+
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
306
|
+
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
307
|
+
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
308
|
+
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
309
|
+
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
310
|
+
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
311
|
+
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
312
|
+
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
313
|
+
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
314
|
+
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
315
|
+
onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
316
|
+
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
317
|
+
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
318
|
+
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
319
|
+
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
320
|
+
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
321
|
+
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
322
|
+
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
323
|
+
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
324
|
+
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
325
|
+
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
326
|
+
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
327
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
328
|
+
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
329
|
+
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
330
|
+
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
331
|
+
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
332
|
+
onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
333
|
+
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
|
334
|
+
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
335
|
+
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
336
|
+
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
337
|
+
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
338
|
+
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
339
|
+
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
340
|
+
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
341
|
+
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
342
|
+
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
343
|
+
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
344
|
+
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
345
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
346
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
347
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
348
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
349
|
+
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
350
|
+
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
351
|
+
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
352
|
+
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
353
|
+
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
354
|
+
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
355
|
+
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
356
|
+
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
357
|
+
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
358
|
+
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
359
|
+
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
360
|
+
autofocus: boolean;
|
|
361
|
+
readonly dataset: DOMStringMap;
|
|
362
|
+
nonce?: string;
|
|
363
|
+
tabIndex: number;
|
|
364
|
+
blur(): void;
|
|
365
|
+
focus(options?: FocusOptions): void;
|
|
366
|
+
}) & typeof LitElement;
|
|
2
367
|
/**
|
|
3
368
|
* Example usage:
|
|
4
369
|
*
|
|
@@ -21,34 +386,29 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
21
386
|
* </style>
|
|
22
387
|
* </head>
|
|
23
388
|
* <body>
|
|
24
|
-
* <ox-zoomable-image src="path/to/your/image.jpg"></ox-zoomable-image>
|
|
389
|
+
* <ox-zoomable-image src="path/to/your/image.jpg" restrict-boundary></ox-zoomable-image>
|
|
25
390
|
* </body>
|
|
26
391
|
* </html>
|
|
27
392
|
*/
|
|
28
|
-
export declare class OxZoomableImage extends
|
|
393
|
+
export declare class OxZoomableImage extends OxZoomableImage_base {
|
|
29
394
|
static styles: import("lit").CSSResult;
|
|
30
395
|
src?: string;
|
|
396
|
+
restrictBoundary: boolean;
|
|
31
397
|
private zoom;
|
|
32
398
|
private left;
|
|
33
399
|
private top;
|
|
34
|
-
private minZoom;
|
|
35
400
|
private imageWidth;
|
|
36
401
|
private imageHeight;
|
|
37
|
-
private dragStart?;
|
|
38
|
-
private readonly dragEndHandler;
|
|
39
|
-
private readonly dragMoveHandler;
|
|
40
|
-
private readonly dragStartHandler;
|
|
41
|
-
private readonly wheelEventHandler;
|
|
42
|
-
private readonly resetHandler;
|
|
43
402
|
connectedCallback(): void;
|
|
44
403
|
disconnectedCallback(): void;
|
|
45
404
|
updated(changes: PropertyValues<this>): void;
|
|
46
405
|
private calculateMinZoom;
|
|
47
|
-
private
|
|
48
|
-
private
|
|
49
|
-
private
|
|
50
|
-
private
|
|
51
|
-
private
|
|
406
|
+
private pinchHandler;
|
|
407
|
+
private zoomAt;
|
|
408
|
+
private wheelHandler;
|
|
409
|
+
private dragHandler;
|
|
410
|
+
private doubleTapHandler;
|
|
52
411
|
private updateTransform;
|
|
53
412
|
private applyBounds;
|
|
54
413
|
}
|
|
414
|
+
export {};
|