table-minimap 1.1.1 → 1.1.2
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/README.md +4 -1
- package/dist/index.d.ts +43 -0
- package/dist/table-minimap.cjs +1 -1
- package/dist/table-minimap.cjs.map +1 -1
- package/dist/table-minimap.js +220 -136
- package/dist/table-minimap.js.map +1 -1
- package/package.json +1 -1
package/dist/table-minimap.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var
|
|
2
|
-
var z = (v, t, e) => t in v ?
|
|
3
|
-
var
|
|
4
|
-
const
|
|
1
|
+
var I = Object.defineProperty;
|
|
2
|
+
var z = (v, t, e) => t in v ? I(v, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[t] = e;
|
|
3
|
+
var o = (v, t, e) => z(v, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
const A = {
|
|
5
5
|
mode: "columns",
|
|
6
6
|
height: 40,
|
|
7
7
|
position: "bottom",
|
|
@@ -14,8 +14,13 @@ const H = {
|
|
|
14
14
|
minZoom: 1,
|
|
15
15
|
maxZoom: 10,
|
|
16
16
|
zoomSpeed: 0.1
|
|
17
|
-
},
|
|
18
|
-
|
|
17
|
+
}, X = 24, H = 5, O = 180, F = 180, P = [
|
|
18
|
+
"bottom-right",
|
|
19
|
+
"bottom-left",
|
|
20
|
+
"top-left",
|
|
21
|
+
"top-right"
|
|
22
|
+
], $ = 3, Z = 0.85;
|
|
23
|
+
class _ {
|
|
19
24
|
/**
|
|
20
25
|
* Creates a new TableMinimap instance
|
|
21
26
|
*
|
|
@@ -25,33 +30,35 @@ class F {
|
|
|
25
30
|
*/
|
|
26
31
|
constructor(t, e = {}) {
|
|
27
32
|
/** The target table element */
|
|
28
|
-
|
|
33
|
+
o(this, "table");
|
|
29
34
|
/** Configuration options */
|
|
30
|
-
|
|
35
|
+
o(this, "options");
|
|
31
36
|
/** Whether compact fixed-overlay behavior is enabled */
|
|
32
|
-
|
|
37
|
+
o(this, "isCompactMode");
|
|
33
38
|
/** Whether the compact minimap is currently collapsed */
|
|
34
|
-
|
|
39
|
+
o(this, "isCompactCollapsed", !1);
|
|
35
40
|
/** Whether the compact minimap is currently expanding (transition in progress) */
|
|
36
|
-
|
|
41
|
+
o(this, "isCompactExpanding", !1);
|
|
37
42
|
/** Timeout used to collapse compact mode after pointer leave */
|
|
38
|
-
|
|
43
|
+
o(this, "compactCollapseTimer", null);
|
|
44
|
+
/** Timeout used to delay fixed minimap click navigation until double-click is ruled out */
|
|
45
|
+
o(this, "minimapClickTimer", null);
|
|
39
46
|
/** The scrollable container (parent of table) */
|
|
40
|
-
|
|
47
|
+
o(this, "scrollContainer", null);
|
|
41
48
|
/** Main minimap container element */
|
|
42
|
-
|
|
49
|
+
o(this, "minimapEl", null);
|
|
43
50
|
/** Columns container for columns mode */
|
|
44
|
-
|
|
51
|
+
o(this, "columnsEl", null);
|
|
45
52
|
/** Canvas element for canvas mode */
|
|
46
|
-
|
|
53
|
+
o(this, "canvasEl", null);
|
|
47
54
|
/** Canvas 2D rendering context */
|
|
48
|
-
|
|
55
|
+
o(this, "canvasCtx", null);
|
|
49
56
|
/** Viewport indicator element */
|
|
50
|
-
|
|
57
|
+
o(this, "viewportEl", null);
|
|
51
58
|
/** Detected column information */
|
|
52
|
-
|
|
59
|
+
o(this, "columns", []);
|
|
53
60
|
/** Current scroll state */
|
|
54
|
-
|
|
61
|
+
o(this, "scrollState", {
|
|
55
62
|
scrollLeft: 0,
|
|
56
63
|
scrollWidth: 0,
|
|
57
64
|
clientWidth: 0,
|
|
@@ -59,44 +66,49 @@ class F {
|
|
|
59
66
|
positionRatio: 0
|
|
60
67
|
});
|
|
61
68
|
/** Current zoom state */
|
|
62
|
-
|
|
69
|
+
o(this, "zoomState", {
|
|
63
70
|
level: 1,
|
|
64
71
|
panX: 0,
|
|
65
72
|
isMinZoom: !0,
|
|
66
73
|
isMaxZoom: !1
|
|
67
74
|
});
|
|
68
75
|
/** Is the viewport being dragged */
|
|
69
|
-
|
|
76
|
+
o(this, "isDragging", !1);
|
|
70
77
|
/** Is the canvas being panned (when zoomed) */
|
|
71
|
-
|
|
78
|
+
o(this, "isPanning", !1);
|
|
72
79
|
/** Was just panning (to prevent click after pan) */
|
|
73
|
-
|
|
80
|
+
o(this, "wasPanning", !1);
|
|
74
81
|
/** Pan start position */
|
|
75
|
-
|
|
82
|
+
o(this, "panStartX", 0);
|
|
83
|
+
/** Last pointer X waiting to be applied during canvas panning */
|
|
84
|
+
o(this, "pendingPanClientX", null);
|
|
76
85
|
/** Currently hovered column index (-1 = none) */
|
|
77
|
-
|
|
86
|
+
o(this, "hoveredColumn", -1);
|
|
78
87
|
/** Drag start X position */
|
|
79
|
-
|
|
88
|
+
o(this, "dragStartX", 0);
|
|
80
89
|
/** Drag start scroll position */
|
|
81
|
-
|
|
90
|
+
o(this, "dragStartScrollLeft", 0);
|
|
82
91
|
/** ResizeObserver instance */
|
|
83
|
-
|
|
92
|
+
o(this, "resizeObserver", null);
|
|
84
93
|
/** MutationObserver instance */
|
|
85
|
-
|
|
94
|
+
o(this, "mutationObserver", null);
|
|
86
95
|
/** Bound event handlers for cleanup */
|
|
87
|
-
|
|
96
|
+
o(this, "boundHandlers");
|
|
88
97
|
/** Animation frame ID for throttling */
|
|
89
|
-
|
|
98
|
+
o(this, "rafId", null);
|
|
99
|
+
/** Animation frame ID for throttling canvas panning */
|
|
100
|
+
o(this, "canvasPanRafId", null);
|
|
90
101
|
/** Whether the instance has been destroyed */
|
|
91
|
-
|
|
102
|
+
o(this, "isDestroyed", !1);
|
|
92
103
|
/** Whether we started a potential pan (waiting to see if it's a click or drag) */
|
|
93
|
-
|
|
94
|
-
this.table = this.resolveTable(t), this.options = { ...
|
|
104
|
+
o(this, "isPotentialPan", !1);
|
|
105
|
+
this.table = this.resolveTable(t), this.options = { ...A, ...e }, this.isCompactMode = this.options.compact && this.options.position === "fixed", this.boundHandlers = {
|
|
95
106
|
onScroll: this.onScroll.bind(this),
|
|
96
107
|
onPointerDown: this.onPointerDown.bind(this),
|
|
97
108
|
onPointerMove: this.onPointerMove.bind(this),
|
|
98
109
|
onPointerUp: this.onPointerUp.bind(this),
|
|
99
110
|
onMinimapClick: this.onMinimapClick.bind(this),
|
|
111
|
+
onMinimapDoubleClick: this.onMinimapDoubleClick.bind(this),
|
|
100
112
|
onWheel: this.onWheel.bind(this),
|
|
101
113
|
onCanvasPointerDown: this.onCanvasPointerDown.bind(this),
|
|
102
114
|
onCanvasMouseMove: this.onCanvasMouseMove.bind(this),
|
|
@@ -147,8 +159,8 @@ class F {
|
|
|
147
159
|
findScrollContainer() {
|
|
148
160
|
let t = this.table.parentElement;
|
|
149
161
|
for (; t; ) {
|
|
150
|
-
const e = getComputedStyle(t), i = e.overflowX,
|
|
151
|
-
if (i === "auto" || i === "scroll" ||
|
|
162
|
+
const e = getComputedStyle(t), i = e.overflowX, n = e.overflow;
|
|
163
|
+
if (i === "auto" || i === "scroll" || n === "auto" || n === "scroll" || t.scrollWidth > t.clientWidth)
|
|
152
164
|
return t;
|
|
153
165
|
t = t.parentElement;
|
|
154
166
|
}
|
|
@@ -166,18 +178,18 @@ class F {
|
|
|
166
178
|
if (t.length > 0)
|
|
167
179
|
e = t;
|
|
168
180
|
else {
|
|
169
|
-
const
|
|
170
|
-
|
|
181
|
+
const n = this.table.querySelector("tr");
|
|
182
|
+
n ? e = n.querySelectorAll("th, td") : e = [];
|
|
171
183
|
}
|
|
172
184
|
const i = this.table.offsetWidth || 1;
|
|
173
|
-
Array.from(e).forEach((
|
|
174
|
-
const a =
|
|
175
|
-
for (let
|
|
176
|
-
const
|
|
185
|
+
Array.from(e).forEach((n) => {
|
|
186
|
+
const a = n.colSpan || 1, s = n.offsetWidth;
|
|
187
|
+
for (let l = 0; l < a; l++) {
|
|
188
|
+
const r = s / a;
|
|
177
189
|
this.columns.push({
|
|
178
190
|
index: this.columns.length,
|
|
179
|
-
width:
|
|
180
|
-
widthPercent:
|
|
191
|
+
width: r,
|
|
192
|
+
widthPercent: r / i * 100
|
|
181
193
|
});
|
|
182
194
|
}
|
|
183
195
|
}), this.columns.length === 0 && this.columns.push({
|
|
@@ -190,7 +202,7 @@ class F {
|
|
|
190
202
|
* Creates the minimap DOM element
|
|
191
203
|
*/
|
|
192
204
|
createMinimapElement() {
|
|
193
|
-
this.minimapEl = document.createElement("div"), this.minimapEl.className = `tm-minimap tm-minimap--${this.options.position}`, this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.options.position === "fixed" && (this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.minimapEl.
|
|
205
|
+
this.minimapEl = document.createElement("div"), this.minimapEl.className = `tm-minimap tm-minimap--${this.options.position}`, this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.options.position === "fixed" && (this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.minimapEl.title = "Double-click to move minimap to the next corner"), this.isCompactMode ? (this.minimapEl.classList.add("tm-minimap--compact", "tm-minimap--compact-collapsed"), this.minimapEl.style.setProperty("--tm-compact-dot-size", `${H}px`), this.isCompactCollapsed = !0, this.applyCompactDimensions(!0), this.minimapEl.setAttribute("aria-expanded", "false")) : this.minimapEl.setAttribute("aria-expanded", "true"), this.minimapEl.setAttribute("role", "slider"), this.minimapEl.setAttribute("aria-label", "Table minimap navigation"), this.minimapEl.setAttribute("aria-valuemin", "0"), this.minimapEl.setAttribute("aria-valuemax", "100"), this.minimapEl.setAttribute("tabindex", "0"), this.options.mode === "canvas" ? this.createCanvasContent() : this.createColumnsContent(), this.options.showViewport && this.createViewportIndicator(), this.insertMinimap();
|
|
194
206
|
}
|
|
195
207
|
/**
|
|
196
208
|
* Creates columns-mode content
|
|
@@ -223,9 +235,7 @@ class F {
|
|
|
223
235
|
if (t) {
|
|
224
236
|
getComputedStyle(t).position === "static" && (t.style.position = "relative");
|
|
225
237
|
const i = this.scrollContainer.nextSibling;
|
|
226
|
-
i ? t.insertBefore(this.minimapEl, i) : t.appendChild(this.minimapEl), this.minimapEl.style.position = "absolute";
|
|
227
|
-
const o = this.isCompactMode ? 8 : 12, a = this.options.fixedPosition;
|
|
228
|
-
this.minimapEl.style.top = "", this.minimapEl.style.bottom = "", this.minimapEl.style.left = "", this.minimapEl.style.right = "", this.minimapEl.style.marginTop = "0", a === "top-left" ? (this.minimapEl.style.top = `${o}px`, this.minimapEl.style.left = `${o}px`) : a === "top-right" ? (this.minimapEl.style.top = `${o}px`, this.minimapEl.style.right = `${o}px`) : a === "bottom-left" ? (this.minimapEl.style.bottom = `${o}px`, this.minimapEl.style.left = `${o}px`) : (this.minimapEl.style.bottom = `${o}px`, this.minimapEl.style.right = `${o}px`);
|
|
238
|
+
i ? t.insertBefore(this.minimapEl, i) : t.appendChild(this.minimapEl), this.minimapEl.style.position = "absolute", this.applyFixedPosition();
|
|
229
239
|
}
|
|
230
240
|
} else if (this.options.position === "top")
|
|
231
241
|
t ? t.insertBefore(this.minimapEl, this.scrollContainer) : this.scrollContainer.insertBefore(this.minimapEl, this.scrollContainer.firstChild);
|
|
@@ -235,6 +245,24 @@ class F {
|
|
|
235
245
|
} else
|
|
236
246
|
this.scrollContainer.appendChild(this.minimapEl);
|
|
237
247
|
}
|
|
248
|
+
/**
|
|
249
|
+
* Applies the configured fixed corner position to the minimap element.
|
|
250
|
+
*/
|
|
251
|
+
applyFixedPosition() {
|
|
252
|
+
if (!this.minimapEl || this.options.position !== "fixed") return;
|
|
253
|
+
const t = this.isCompactMode ? 8 : 12, e = this.options.fixedPosition;
|
|
254
|
+
P.forEach((i) => {
|
|
255
|
+
this.minimapEl.classList.remove(`tm-minimap--${i}`);
|
|
256
|
+
}), this.minimapEl.classList.add(`tm-minimap--${e}`), this.minimapEl.style.top = "", this.minimapEl.style.bottom = "", this.minimapEl.style.left = "", this.minimapEl.style.right = "", this.minimapEl.style.marginTop = "0", e === "top-left" ? (this.minimapEl.style.top = `${t}px`, this.minimapEl.style.left = `${t}px`) : e === "top-right" ? (this.minimapEl.style.top = `${t}px`, this.minimapEl.style.right = `${t}px`) : e === "bottom-left" ? (this.minimapEl.style.bottom = `${t}px`, this.minimapEl.style.left = `${t}px`) : (this.minimapEl.style.bottom = `${t}px`, this.minimapEl.style.right = `${t}px`);
|
|
257
|
+
}
|
|
258
|
+
/**
|
|
259
|
+
* Moves fixed minimaps to the next configured corner.
|
|
260
|
+
*/
|
|
261
|
+
cycleFixedPosition() {
|
|
262
|
+
if (this.options.position !== "fixed") return;
|
|
263
|
+
const t = P.indexOf(this.options.fixedPosition), e = t >= 0 ? (t + 1) % P.length : 0;
|
|
264
|
+
this.options.fixedPosition = P[e], this.applyFixedPosition();
|
|
265
|
+
}
|
|
238
266
|
/**
|
|
239
267
|
* Updates the scroll state from the container
|
|
240
268
|
*/
|
|
@@ -263,24 +291,24 @@ class F {
|
|
|
263
291
|
*/
|
|
264
292
|
getCanvasMetrics() {
|
|
265
293
|
var p;
|
|
266
|
-
const t = ((p = this.minimapEl) == null ? void 0 : p.offsetWidth) ?? 0, e = this.zoomState.level, i = this.columns.length,
|
|
267
|
-
let
|
|
294
|
+
const t = ((p = this.minimapEl) == null ? void 0 : p.offsetWidth) ?? 0, e = this.zoomState.level, i = this.columns.length, n = 1 / e, a = i * n, s = a > 0 ? t / a : 0;
|
|
295
|
+
let l = 0;
|
|
268
296
|
if (e > 1 && this.scrollContainer) {
|
|
269
|
-
const { scrollLeft:
|
|
270
|
-
|
|
297
|
+
const { scrollLeft: c, scrollWidth: g, clientWidth: w } = this.scrollContainer, d = Math.max(g - w, 1);
|
|
298
|
+
l = c / d * (1 - n);
|
|
271
299
|
}
|
|
272
|
-
const
|
|
300
|
+
const r = l * i, m = Math.floor(r), u = Math.min(Math.ceil(r + a) + 1, i), f = -(r - m) * s;
|
|
273
301
|
return {
|
|
274
302
|
width: t,
|
|
275
303
|
zoom: e,
|
|
276
304
|
numCols: i,
|
|
277
|
-
visibleRatio:
|
|
305
|
+
visibleRatio: n,
|
|
278
306
|
visibleCols: a,
|
|
279
307
|
cellWidth: s,
|
|
280
|
-
panX:
|
|
281
|
-
startColFloat:
|
|
282
|
-
startCol:
|
|
283
|
-
endCol:
|
|
308
|
+
panX: l,
|
|
309
|
+
startColFloat: r,
|
|
310
|
+
startCol: m,
|
|
311
|
+
endCol: u,
|
|
284
312
|
xOffset: f
|
|
285
313
|
};
|
|
286
314
|
}
|
|
@@ -288,10 +316,10 @@ class F {
|
|
|
288
316
|
* Calculates column index from mouse X position
|
|
289
317
|
*/
|
|
290
318
|
getColumnAtX(t) {
|
|
291
|
-
const { width: e, numCols: i, panX:
|
|
319
|
+
const { width: e, numCols: i, panX: n, visibleRatio: a } = this.getCanvasMetrics();
|
|
292
320
|
if (i === 0 || e === 0) return -1;
|
|
293
|
-
const s = t / e,
|
|
294
|
-
return Math.max(0, Math.min(i - 1,
|
|
321
|
+
const s = t / e, l = n + s * a, r = Math.floor(l * i);
|
|
322
|
+
return Math.max(0, Math.min(i - 1, r));
|
|
295
323
|
}
|
|
296
324
|
/**
|
|
297
325
|
* Updates the viewport indicator position and size
|
|
@@ -303,8 +331,8 @@ class F {
|
|
|
303
331
|
this.viewportEl.style.display = "none";
|
|
304
332
|
return;
|
|
305
333
|
}
|
|
306
|
-
const t = this.minimapEl.offsetWidth, e = Math.max(t * this.scrollState.viewportRatio, 20),
|
|
307
|
-
this.viewportEl.style.cssText = `width:${e}px;left:${
|
|
334
|
+
const t = this.minimapEl.offsetWidth, e = Math.max(t * this.scrollState.viewportRatio, 20), n = (t - e) * this.scrollState.positionRatio;
|
|
335
|
+
this.viewportEl.style.cssText = `width:${e}px;left:${n}px;display:block`;
|
|
308
336
|
}
|
|
309
337
|
/**
|
|
310
338
|
* Renders the canvas-mode visualization with table preview
|
|
@@ -318,11 +346,11 @@ class F {
|
|
|
318
346
|
* Renders the visible portion of the table directly onto the canvas
|
|
319
347
|
*/
|
|
320
348
|
renderTableDirect(t, e) {
|
|
321
|
-
var S, y,
|
|
349
|
+
var S, y, k, D;
|
|
322
350
|
if (!this.canvasCtx) return;
|
|
323
|
-
const i = this.canvasCtx, { width:
|
|
351
|
+
const i = this.canvasCtx, { width: n, numCols: a, cellWidth: s, startCol: l, endCol: r, xOffset: m } = t, u = Array.from(this.table.querySelectorAll("tr")), f = u.length;
|
|
324
352
|
if (f === 0 || a === 0) return;
|
|
325
|
-
const p = Math.min(e * 0.15, 30),
|
|
353
|
+
const p = Math.min(e * 0.15, 30), c = (e - p) / f, g = Math.min(c * 0.6, s * 0.15, 14), w = Math.min(p * 0.6, s * 0.15, 14), d = {
|
|
326
354
|
bg: "#ffffff",
|
|
327
355
|
headerBg: "#f1f5f9",
|
|
328
356
|
border: "#e2e8f0",
|
|
@@ -332,35 +360,35 @@ class F {
|
|
|
332
360
|
hoverFill: "rgba(59, 130, 246, 0.08)",
|
|
333
361
|
hoverStroke: "rgba(59, 130, 246, 0.3)"
|
|
334
362
|
};
|
|
335
|
-
i.fillStyle =
|
|
336
|
-
const
|
|
337
|
-
i.font = `bold ${
|
|
338
|
-
for (let
|
|
339
|
-
const
|
|
340
|
-
if (
|
|
341
|
-
i.strokeStyle =
|
|
342
|
-
const
|
|
343
|
-
i.fillStyle =
|
|
363
|
+
i.fillStyle = d.bg, i.fillRect(0, 0, n, e), i.fillStyle = d.headerBg, i.fillRect(0, 0, n, p);
|
|
364
|
+
const E = this.table.querySelector("thead tr") || u[0], L = E ? Array.from(E.querySelectorAll("th, td")) : [];
|
|
365
|
+
i.font = `bold ${w}px system-ui, sans-serif`, i.textBaseline = "middle";
|
|
366
|
+
for (let h = l; h < r; h++) {
|
|
367
|
+
const C = m + (h - l) * s;
|
|
368
|
+
if (C + s < 0 || C > n) continue;
|
|
369
|
+
i.strokeStyle = d.border, i.lineWidth = 1, i.strokeRect(C, 0, s, p);
|
|
370
|
+
const b = ((y = (S = L[h]) == null ? void 0 : S.textContent) == null ? void 0 : y.trim()) || `Col ${h + 1}`;
|
|
371
|
+
i.fillStyle = d.headerText, i.save(), i.beginPath(), i.rect(C + 2, 0, s - 4, p), i.clip(), i.fillText(b, C + 4, p / 2), i.restore();
|
|
344
372
|
}
|
|
345
|
-
i.font = `${
|
|
346
|
-
for (let
|
|
347
|
-
const
|
|
348
|
-
if (
|
|
349
|
-
const
|
|
350
|
-
if (
|
|
351
|
-
|
|
352
|
-
const
|
|
353
|
-
for (let M =
|
|
354
|
-
const
|
|
355
|
-
if (
|
|
356
|
-
i.strokeStyle =
|
|
357
|
-
const
|
|
358
|
-
|
|
373
|
+
i.font = `${g}px system-ui, sans-serif`;
|
|
374
|
+
for (let h = 0; h < u.length; h++) {
|
|
375
|
+
const C = u[h];
|
|
376
|
+
if (C.closest("thead")) continue;
|
|
377
|
+
const b = p + h * c;
|
|
378
|
+
if (b + c < 0 || b > e) continue;
|
|
379
|
+
h % 2 === 1 && (i.fillStyle = d.altRow, i.fillRect(0, b, n, c));
|
|
380
|
+
const W = Array.from(C.querySelectorAll("th, td"));
|
|
381
|
+
for (let M = l; M < r; M++) {
|
|
382
|
+
const x = m + (M - l) * s;
|
|
383
|
+
if (x + s < 0 || x > n) continue;
|
|
384
|
+
i.strokeStyle = d.border, i.lineWidth = 0.5, i.strokeRect(x, b, s, c);
|
|
385
|
+
const T = (D = (k = W[M]) == null ? void 0 : k.textContent) == null ? void 0 : D.trim();
|
|
386
|
+
T && (i.fillStyle = d.text, i.save(), i.beginPath(), i.rect(x + 2, b, s - 4, c), i.clip(), i.fillText(T, x + 4, b + c / 2), i.restore());
|
|
359
387
|
}
|
|
360
388
|
}
|
|
361
|
-
if (this.hoveredColumn >=
|
|
362
|
-
const
|
|
363
|
-
i.fillStyle =
|
|
389
|
+
if (this.hoveredColumn >= l && this.hoveredColumn < r) {
|
|
390
|
+
const h = m + (this.hoveredColumn - l) * s;
|
|
391
|
+
i.fillStyle = d.hoverFill, i.fillRect(h, 0, s, e), i.strokeStyle = d.hoverStroke, i.lineWidth = 1, i.strokeRect(h, 0, s, e);
|
|
364
392
|
}
|
|
365
393
|
}
|
|
366
394
|
/**
|
|
@@ -369,7 +397,7 @@ class F {
|
|
|
369
397
|
attachEventListeners() {
|
|
370
398
|
!this.scrollContainer || !this.minimapEl || (this.scrollContainer.addEventListener("scroll", this.boundHandlers.onScroll, {
|
|
371
399
|
passive: !0
|
|
372
|
-
}), this.minimapEl.addEventListener("click", this.boundHandlers.onMinimapClick), this.isCompactMode && (this.minimapEl.addEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.addEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.addEventListener("keydown", this.boundHandlers.onCompactKeyDown), document.addEventListener("click", this.boundHandlers.onDocumentClick)), this.options.draggable && this.viewportEl && this.viewportEl.addEventListener("pointerdown", this.boundHandlers.onPointerDown), this.options.zoomable && this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 }), this.canvasEl.addEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", this.viewportEl && this.viewportEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 })), this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.addEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.addEventListener("pointermove", this.boundHandlers.onPointerMove), document.addEventListener("pointerup", this.boundHandlers.onPointerUp));
|
|
400
|
+
}), this.minimapEl.addEventListener("click", this.boundHandlers.onMinimapClick), this.minimapEl.addEventListener("dblclick", this.boundHandlers.onMinimapDoubleClick), this.isCompactMode && (this.minimapEl.addEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.addEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.addEventListener("keydown", this.boundHandlers.onCompactKeyDown), document.addEventListener("click", this.boundHandlers.onDocumentClick)), this.options.draggable && this.viewportEl && this.viewportEl.addEventListener("pointerdown", this.boundHandlers.onPointerDown), this.options.zoomable && this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 }), this.canvasEl.addEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", this.viewportEl && this.viewportEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 })), this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.addEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.addEventListener("pointermove", this.boundHandlers.onPointerMove), document.addEventListener("pointerup", this.boundHandlers.onPointerUp));
|
|
373
401
|
}
|
|
374
402
|
/**
|
|
375
403
|
* Handles scroll events on the container
|
|
@@ -385,27 +413,59 @@ class F {
|
|
|
385
413
|
* @param e - Mouse event
|
|
386
414
|
*/
|
|
387
415
|
onMinimapClick(t) {
|
|
416
|
+
if (!(!this.minimapEl || !this.scrollContainer)) {
|
|
417
|
+
if (this.options.position === "fixed") {
|
|
418
|
+
if (t.detail > 1) return;
|
|
419
|
+
const e = t.clientX;
|
|
420
|
+
this.clearMinimapClickTimer(), this.minimapClickTimer = window.setTimeout(() => {
|
|
421
|
+
this.minimapClickTimer = null, this.handleMinimapClick(e);
|
|
422
|
+
}, F);
|
|
423
|
+
return;
|
|
424
|
+
}
|
|
425
|
+
this.handleMinimapClick(t.clientX);
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* Handles double-click on fixed minimaps to move them to the next corner.
|
|
430
|
+
*
|
|
431
|
+
* @param e - Mouse event
|
|
432
|
+
*/
|
|
433
|
+
onMinimapDoubleClick(t) {
|
|
434
|
+
this.options.position === "fixed" && (t.preventDefault(), t.stopPropagation(), this.clearMinimapClickTimer(), this.cycleFixedPosition());
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Clears a pending delayed minimap click.
|
|
438
|
+
*/
|
|
439
|
+
clearMinimapClickTimer() {
|
|
440
|
+
this.minimapClickTimer !== null && (clearTimeout(this.minimapClickTimer), this.minimapClickTimer = null);
|
|
441
|
+
}
|
|
442
|
+
/**
|
|
443
|
+
* Handles single-click minimap navigation.
|
|
444
|
+
*
|
|
445
|
+
* @param clientX - Click position in viewport coordinates
|
|
446
|
+
*/
|
|
447
|
+
handleMinimapClick(t) {
|
|
388
448
|
if (!this.minimapEl || !this.scrollContainer) return;
|
|
389
449
|
if (this.isCompactMode && this.isCompactCollapsed) {
|
|
390
|
-
|
|
450
|
+
this.expandCompact();
|
|
391
451
|
return;
|
|
392
452
|
}
|
|
393
453
|
if (this.isCompactExpanding || this.isDragging || this.isPanning || this.wasPanning) return;
|
|
394
|
-
const { scrollWidth: e, clientWidth: i } = this.scrollContainer,
|
|
454
|
+
const { scrollWidth: e, clientWidth: i } = this.scrollContainer, n = e - i, a = this.minimapEl.getBoundingClientRect(), s = t - a.left;
|
|
395
455
|
if (this.options.mode === "canvas") {
|
|
396
|
-
const
|
|
397
|
-
if (
|
|
398
|
-
const
|
|
456
|
+
const m = this.getColumnAtX(s);
|
|
457
|
+
if (m >= 0) {
|
|
458
|
+
const u = this.columns.length, f = e / u, c = (m + 0.5) * f - i / 2;
|
|
399
459
|
this.scrollContainer.scrollTo({
|
|
400
|
-
left: Math.max(0, Math.min(
|
|
460
|
+
left: Math.max(0, Math.min(n, c)),
|
|
401
461
|
behavior: "smooth"
|
|
402
462
|
});
|
|
403
463
|
}
|
|
404
464
|
return;
|
|
405
465
|
}
|
|
406
|
-
const
|
|
466
|
+
const r = s / a.width * n;
|
|
407
467
|
this.scrollContainer.scrollTo({
|
|
408
|
-
left: Math.max(0, Math.min(
|
|
468
|
+
left: Math.max(0, Math.min(n, r)),
|
|
409
469
|
behavior: "smooth"
|
|
410
470
|
});
|
|
411
471
|
}
|
|
@@ -423,16 +483,40 @@ class F {
|
|
|
423
483
|
* @param e - Pointer event
|
|
424
484
|
*/
|
|
425
485
|
onPointerMove(t) {
|
|
426
|
-
if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.zoomState.level > 1 && Math.abs(t.clientX - this.panStartX) >
|
|
427
|
-
t.preventDefault();
|
|
428
|
-
const c = t.clientX - this.panStartX, h = this.minimapEl.offsetWidth, { scrollWidth: f, clientWidth: p } = this.scrollContainer, m = f - p, E = c / h * m * this.zoomState.level, g = this.dragStartScrollLeft + E;
|
|
429
|
-
this.scrollContainer.scrollLeft = Math.max(0, Math.min(m, g)), this.updateScrollState(), this.updateViewport(), this.render();
|
|
486
|
+
if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.zoomState.level > 1 && Math.abs(t.clientX - this.panStartX) > $ && (this.isPanning = !0, this.canvasEl.style.cursor = "grabbing"), this.isPanning && this.canvasEl && this.minimapEl && this.scrollContainer) {
|
|
487
|
+
t.preventDefault(), this.pendingPanClientX = t.clientX, this.scheduleCanvasPan();
|
|
430
488
|
return;
|
|
431
489
|
}
|
|
432
490
|
if (!this.isDragging || !this.minimapEl || !this.scrollContainer) return;
|
|
433
491
|
t.preventDefault();
|
|
434
|
-
const { scrollWidth: e, clientWidth: i } = this.scrollContainer,
|
|
435
|
-
this.scrollContainer.scrollLeft = Math.max(0, Math.min(a,
|
|
492
|
+
const { scrollWidth: e, clientWidth: i } = this.scrollContainer, n = this.minimapEl.offsetWidth, a = e - i, l = (t.clientX - this.dragStartX) / n * a, r = this.dragStartScrollLeft + l;
|
|
493
|
+
this.scrollContainer.scrollLeft = Math.max(0, Math.min(a, r)), this.updateScrollState(), this.updateViewport();
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Schedules canvas panning work for the next animation frame.
|
|
497
|
+
*/
|
|
498
|
+
scheduleCanvasPan() {
|
|
499
|
+
this.canvasPanRafId === null && (this.canvasPanRafId = requestAnimationFrame(() => {
|
|
500
|
+
this.canvasPanRafId = null, this.applyCanvasPan();
|
|
501
|
+
}));
|
|
502
|
+
}
|
|
503
|
+
/**
|
|
504
|
+
* Applies pending canvas pan movement using a dampened scroll ratio.
|
|
505
|
+
*/
|
|
506
|
+
applyCanvasPan() {
|
|
507
|
+
if (!this.isPanning || this.pendingPanClientX === null || !this.minimapEl || !this.scrollContainer)
|
|
508
|
+
return;
|
|
509
|
+
const t = this.panStartX - this.pendingPanClientX, e = Math.max(this.minimapEl.offsetWidth, 1), { scrollWidth: i, clientWidth: n } = this.scrollContainer, a = Math.max(i - n, 0), s = 1 / Math.max(this.zoomState.level, 1), l = t / e * a * s * Z;
|
|
510
|
+
this.scrollContainer.scrollLeft = Math.max(
|
|
511
|
+
0,
|
|
512
|
+
Math.min(a, this.dragStartScrollLeft + l)
|
|
513
|
+
), this.updateScrollState(), this.updateViewport(), this.render();
|
|
514
|
+
}
|
|
515
|
+
/**
|
|
516
|
+
* Cancels any pending canvas pan frame.
|
|
517
|
+
*/
|
|
518
|
+
clearCanvasPanFrame() {
|
|
519
|
+
this.canvasPanRafId !== null && (cancelAnimationFrame(this.canvasPanRafId), this.canvasPanRafId = null);
|
|
436
520
|
}
|
|
437
521
|
/**
|
|
438
522
|
* Handles pointer up to end drag
|
|
@@ -441,7 +525,7 @@ class F {
|
|
|
441
525
|
*/
|
|
442
526
|
onPointerUp(t) {
|
|
443
527
|
if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.minimapEl) {
|
|
444
|
-
this.isPotentialPan = !1, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId);
|
|
528
|
+
this.isPotentialPan = !1, this.pendingPanClientX = null, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId);
|
|
445
529
|
const e = new MouseEvent("click", {
|
|
446
530
|
clientX: t.clientX,
|
|
447
531
|
clientY: t.clientY,
|
|
@@ -450,7 +534,7 @@ class F {
|
|
|
450
534
|
this.minimapEl.dispatchEvent(e);
|
|
451
535
|
return;
|
|
452
536
|
}
|
|
453
|
-
this.isPotentialPan = !1, this.isPanning && this.canvasEl && (this.isPanning = !1, this.wasPanning = !0, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", setTimeout(() => {
|
|
537
|
+
this.isPotentialPan = !1, this.isPanning && this.canvasEl && (this.applyCanvasPan(), this.clearCanvasPanFrame(), this.pendingPanClientX = null, this.isPanning = !1, this.wasPanning = !0, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", setTimeout(() => {
|
|
454
538
|
this.wasPanning = !1;
|
|
455
539
|
}, 100)), this.isDragging && (this.isDragging = !1, this.viewportEl && (this.viewportEl.classList.remove("tm-viewport--dragging"), this.viewportEl.releasePointerCapture(t.pointerId)));
|
|
456
540
|
}
|
|
@@ -462,21 +546,21 @@ class F {
|
|
|
462
546
|
onWheel(t) {
|
|
463
547
|
if (!this.options.zoomable || this.options.mode !== "canvas" || !this.canvasEl || !this.scrollContainer || !this.minimapEl) return;
|
|
464
548
|
t.preventDefault();
|
|
465
|
-
const e = this.zoomState.level, i = -t.deltaY * this.options.zoomSpeed,
|
|
549
|
+
const e = this.zoomState.level, i = -t.deltaY * this.options.zoomSpeed, n = Math.max(
|
|
466
550
|
this.options.minZoom,
|
|
467
551
|
Math.min(this.options.maxZoom, e + i)
|
|
468
552
|
);
|
|
469
|
-
if (
|
|
470
|
-
const a = this.canvasEl.getBoundingClientRect(), s = t.clientX - a.left,
|
|
553
|
+
if (n === e) return;
|
|
554
|
+
const a = this.canvasEl.getBoundingClientRect(), s = t.clientX - a.left, l = this.minimapEl.offsetWidth, r = s / l, m = 1 / e, { scrollLeft: u, scrollWidth: f, clientWidth: p } = this.scrollContainer, c = Math.max(f - p, 1), g = u / c, d = (e > 1 ? g * (1 - m) : 0) + r * m;
|
|
471
555
|
this.zoomState = {
|
|
472
|
-
level:
|
|
556
|
+
level: n,
|
|
473
557
|
panX: 0,
|
|
474
|
-
isMinZoom:
|
|
475
|
-
isMaxZoom:
|
|
558
|
+
isMinZoom: n <= this.options.minZoom,
|
|
559
|
+
isMaxZoom: n >= this.options.maxZoom
|
|
476
560
|
};
|
|
477
|
-
const
|
|
478
|
-
if (
|
|
479
|
-
const S = (
|
|
561
|
+
const E = 1 / n;
|
|
562
|
+
if (n > 1) {
|
|
563
|
+
const S = (d - r * E) / (1 - E), y = Math.max(0, Math.min(c, S * c));
|
|
480
564
|
this.scrollContainer.scrollLeft = y;
|
|
481
565
|
}
|
|
482
566
|
this.updateScrollState(), this.render();
|
|
@@ -523,7 +607,7 @@ class F {
|
|
|
523
607
|
applyCompactDimensions(t) {
|
|
524
608
|
if (!(!this.minimapEl || !this.isCompactMode)) {
|
|
525
609
|
if (this.isCompactCollapsed = t, t) {
|
|
526
|
-
this.minimapEl.classList.add("tm-minimap--compact-collapsed"), this.minimapEl.classList.remove("tm-minimap--compact-expanded"), this.minimapEl.style.setProperty("--tm-minimap-width", `${
|
|
610
|
+
this.minimapEl.classList.add("tm-minimap--compact-collapsed"), this.minimapEl.classList.remove("tm-minimap--compact-expanded"), this.minimapEl.style.setProperty("--tm-minimap-width", `${X}px`), this.minimapEl.style.setProperty("--tm-minimap-height", `${X}px`), this.minimapEl.setAttribute("aria-expanded", "false");
|
|
527
611
|
return;
|
|
528
612
|
}
|
|
529
613
|
this.minimapEl.classList.remove("tm-minimap--compact-collapsed"), this.minimapEl.classList.add("tm-minimap--compact-expanded"), this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.minimapEl.setAttribute("aria-expanded", "true");
|
|
@@ -635,9 +719,9 @@ class F {
|
|
|
635
719
|
scrollToColumn(t, e = !0) {
|
|
636
720
|
if (!this.scrollContainer || t < 0 || t >= this.columns.length)
|
|
637
721
|
return;
|
|
638
|
-
const
|
|
722
|
+
const n = this.columns.slice(0, t).reduce((a, s) => a + s.width, 0);
|
|
639
723
|
this.scrollContainer.scrollTo({
|
|
640
|
-
left:
|
|
724
|
+
left: n,
|
|
641
725
|
behavior: e ? "smooth" : "auto"
|
|
642
726
|
});
|
|
643
727
|
}
|
|
@@ -669,7 +753,7 @@ class F {
|
|
|
669
753
|
const i = Math.max(
|
|
670
754
|
this.options.minZoom,
|
|
671
755
|
Math.min(this.options.maxZoom, t)
|
|
672
|
-
),
|
|
756
|
+
), n = 1 / i, a = 1 - n;
|
|
673
757
|
let s = e !== void 0 ? e : 0;
|
|
674
758
|
if (s = Math.max(0, Math.min(a, s)), this.zoomState = {
|
|
675
759
|
level: i,
|
|
@@ -678,8 +762,8 @@ class F {
|
|
|
678
762
|
isMinZoom: i <= this.options.minZoom,
|
|
679
763
|
isMaxZoom: i >= this.options.maxZoom
|
|
680
764
|
}, i > 1 && s > 0) {
|
|
681
|
-
const { scrollWidth:
|
|
682
|
-
this.scrollContainer.scrollLeft = Math.max(0, Math.min(
|
|
765
|
+
const { scrollWidth: l, clientWidth: r } = this.scrollContainer, m = Math.max(l - r, 1), u = s / (1 - n);
|
|
766
|
+
this.scrollContainer.scrollLeft = Math.max(0, Math.min(m, u * m));
|
|
683
767
|
} else i <= 1 && (this.scrollContainer.scrollLeft = 0);
|
|
684
768
|
this.updateScrollState(), this.render();
|
|
685
769
|
}
|
|
@@ -699,26 +783,26 @@ class F {
|
|
|
699
783
|
if (this.isDestroyed || this.options.mode !== "canvas") return;
|
|
700
784
|
const i = this.columns.length;
|
|
701
785
|
if (i === 0) return;
|
|
702
|
-
const
|
|
703
|
-
this.setZoom(
|
|
786
|
+
const n = Math.max(0, Math.min(i - 1, t)), s = Math.max(n + 1, Math.min(i, e)) - n, l = i / s, r = n / i;
|
|
787
|
+
this.setZoom(l, r);
|
|
704
788
|
}
|
|
705
789
|
/**
|
|
706
790
|
* Destroys the minimap instance and cleans up resources
|
|
707
791
|
*/
|
|
708
792
|
destroy() {
|
|
709
|
-
this.isDestroyed || (this.isDestroyed = !0, this.clearCompactCollapseTimer(), this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollContainer && this.scrollContainer.removeEventListener("scroll", this.boundHandlers.onScroll), this.minimapEl && (this.minimapEl.removeEventListener("click", this.boundHandlers.onMinimapClick), this.minimapEl.removeEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.removeEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.removeEventListener("keydown", this.boundHandlers.onCompactKeyDown)), document.removeEventListener("click", this.boundHandlers.onDocumentClick), this.viewportEl && (this.viewportEl.removeEventListener("pointerdown", this.boundHandlers.onPointerDown), this.viewportEl.removeEventListener("wheel", this.boundHandlers.onWheel)), this.canvasEl && (this.canvasEl.removeEventListener("wheel", this.boundHandlers.onWheel), this.canvasEl.removeEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.removeEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.removeEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.removeEventListener("pointermove", this.boundHandlers.onPointerMove), document.removeEventListener("pointerup", this.boundHandlers.onPointerUp), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.mutationObserver && (this.mutationObserver.disconnect(), this.mutationObserver = null), this.minimapEl && this.minimapEl.parentNode && this.minimapEl.parentNode.removeChild(this.minimapEl), this.minimapEl = null, this.columnsEl = null, this.canvasEl = null, this.canvasCtx = null, this.viewportEl = null, this.scrollContainer = null, this.columns = []);
|
|
793
|
+
this.isDestroyed || (this.isDestroyed = !0, this.clearCompactCollapseTimer(), this.clearMinimapClickTimer(), this.clearCanvasPanFrame(), this.pendingPanClientX = null, this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollContainer && this.scrollContainer.removeEventListener("scroll", this.boundHandlers.onScroll), this.minimapEl && (this.minimapEl.removeEventListener("click", this.boundHandlers.onMinimapClick), this.minimapEl.removeEventListener("dblclick", this.boundHandlers.onMinimapDoubleClick), this.minimapEl.removeEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.removeEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.removeEventListener("keydown", this.boundHandlers.onCompactKeyDown)), document.removeEventListener("click", this.boundHandlers.onDocumentClick), this.viewportEl && (this.viewportEl.removeEventListener("pointerdown", this.boundHandlers.onPointerDown), this.viewportEl.removeEventListener("wheel", this.boundHandlers.onWheel)), this.canvasEl && (this.canvasEl.removeEventListener("wheel", this.boundHandlers.onWheel), this.canvasEl.removeEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.removeEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.removeEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.removeEventListener("pointermove", this.boundHandlers.onPointerMove), document.removeEventListener("pointerup", this.boundHandlers.onPointerUp), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.mutationObserver && (this.mutationObserver.disconnect(), this.mutationObserver = null), this.minimapEl && this.minimapEl.parentNode && this.minimapEl.parentNode.removeChild(this.minimapEl), this.minimapEl = null, this.columnsEl = null, this.canvasEl = null, this.canvasCtx = null, this.viewportEl = null, this.scrollContainer = null, this.columns = []);
|
|
710
794
|
}
|
|
711
795
|
}
|
|
712
|
-
const
|
|
713
|
-
let
|
|
714
|
-
function
|
|
715
|
-
if (
|
|
796
|
+
const N = ':root{--tm-background: #e3f2fd;--tm-border: #90caf9;--tm-viewport-color: rgba(25, 118, 210, .3);--tm-viewport-border: #1976d2;--tm-height: 40px;--tm-column-color: #64b5f6;--tm-column-gap: 1px;--tm-border-radius: 4px;--tm-canvas-empty: #bbdefb;--tm-canvas-filled: #1565c0;--tm-compact-dot-size: 5px;--tm-compact-transition-duration: .18s}@media (prefers-color-scheme: dark){:root{--tm-background: #1a237e;--tm-border: #3949ab;--tm-viewport-color: rgba(100, 180, 255, .3);--tm-viewport-border: #64b5f6;--tm-column-color: #3f51b5;--tm-canvas-empty: #283593;--tm-canvas-filled: #90caf9}}.tm-minimap{position:relative;width:var(--tm-minimap-width, 100%);height:var(--tm-minimap-height, var(--tm-height));background:var(--tm-background);border:1px solid var(--tm-border);border-radius:var(--tm-border-radius);box-sizing:border-box;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:pointer;transition:width var(--tm-compact-transition-duration) ease-in-out,height var(--tm-compact-transition-duration) ease-in-out,opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out,border-color var(--tm-compact-transition-duration) ease-in-out,box-shadow var(--tm-compact-transition-duration) ease-in-out;will-change:width,height,opacity,transform}.tm-minimap--top{margin-bottom:8px}.tm-minimap--bottom{margin-top:8px}.tm-minimap--fixed{z-index:100;background:color-mix(in srgb,var(--tm-background) 72%,transparent);border-color:color-mix(in srgb,var(--tm-border) 72%,transparent);box-shadow:0 4px 12px #00000026;border-radius:8px;opacity:.78;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tm-minimap--fixed:hover,.tm-minimap--fixed:focus-within{opacity:.96}.tm-minimap--compact-collapsed{border-radius:999px}.tm-minimap--compact-expanded{border-radius:8px}.tm-minimap--compact>*{transition:opacity var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-collapsed{background:color-mix(in srgb,var(--tm-background) 60%,transparent);border-color:color-mix(in srgb,var(--tm-border) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-border) 20%,transparent);opacity:.72;transform:translate(2px,2px)}.tm-minimap--compact-collapsed>*{opacity:0;pointer-events:none}.tm-minimap--compact-collapsed:after{content:"";position:absolute;right:calc((var(--tm-minimap-width, 24px) - var(--tm-compact-dot-size)) / 2);bottom:calc((var(--tm-minimap-height, 24px) - var(--tm-compact-dot-size)) / 2);width:var(--tm-compact-dot-size);height:var(--tm-compact-dot-size);border-radius:999px;background:color-mix(in srgb,var(--tm-viewport-border) 72%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-viewport-border) 24%,transparent);opacity:.78;pointer-events:none;transition:opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-expanded{transform:translate(0)}.tm-minimap--compact-expanded:after{opacity:0;transform:scale(.7)}.tm-columns{display:flex;align-items:stretch;height:100%;gap:var(--tm-column-gap);padding:4px;box-sizing:border-box}.tm-column{flex:1 1 0;min-width:0;height:100%;background:var(--tm-column-color);border-radius:2px;transition:background-color .15s ease;cursor:pointer}.tm-column:hover{background:color-mix(in srgb,var(--tm-column-color) 80%,black)}.tm-canvas{width:100%;height:100%;display:block;cursor:pointer}.tm-viewport{position:absolute;top:0;height:100%;background:var(--tm-viewport-color);border-left:2px solid var(--tm-viewport-border);border-right:2px solid var(--tm-viewport-border);box-sizing:border-box;cursor:grab;transition:background-color .15s ease;z-index:10}.tm-viewport:hover{background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 10%)}.tm-viewport--dragging{cursor:grabbing;background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 20%);transition:none}.tm-viewport--disabled{cursor:default;pointer-events:none}.tm-minimap:focus-visible{outline:2px solid var(--tm-viewport-border);outline-offset:2px}.tm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}';
|
|
797
|
+
let R = !1;
|
|
798
|
+
function B() {
|
|
799
|
+
if (R || typeof document > "u") return;
|
|
716
800
|
const v = document.createElement("style");
|
|
717
|
-
v.id = "table-minimap-styles", v.textContent =
|
|
801
|
+
v.id = "table-minimap-styles", v.textContent = N, document.head.appendChild(v), R = !0;
|
|
718
802
|
}
|
|
719
|
-
|
|
803
|
+
B();
|
|
720
804
|
export {
|
|
721
|
-
|
|
722
|
-
|
|
805
|
+
_ as TableMinimap,
|
|
806
|
+
B as injectStyles
|
|
723
807
|
};
|
|
724
808
|
//# sourceMappingURL=table-minimap.js.map
|