table-minimap 1.1.1 → 1.1.3
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 +225 -137
- 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,
|
|
349
|
+
var S, M, 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 = ((M = (S = L[h]) == null ? void 0 : S.textContent) == null ? void 0 : M.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
|
|
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 y = l; y < r; y++) {
|
|
382
|
+
const x = m + (y - 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[y]) == 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,63 @@ class F {
|
|
|
385
413
|
* @param e - Mouse event
|
|
386
414
|
*/
|
|
387
415
|
onMinimapClick(t) {
|
|
416
|
+
if (!(!this.minimapEl || !this.scrollContainer)) {
|
|
417
|
+
if (this.isCompactMode && (this.isCompactCollapsed || this.isCompactExpanding)) {
|
|
418
|
+
t.preventDefault(), this.clearMinimapClickTimer(), this.isCompactCollapsed && this.expandCompact();
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
if (this.options.position === "fixed") {
|
|
422
|
+
if (t.detail > 1) return;
|
|
423
|
+
const e = t.clientX;
|
|
424
|
+
this.clearMinimapClickTimer(), this.minimapClickTimer = window.setTimeout(() => {
|
|
425
|
+
this.minimapClickTimer = null, this.handleMinimapClick(e);
|
|
426
|
+
}, F);
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
this.handleMinimapClick(t.clientX);
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
/**
|
|
433
|
+
* Handles double-click on fixed minimaps to move them to the next corner.
|
|
434
|
+
*
|
|
435
|
+
* @param e - Mouse event
|
|
436
|
+
*/
|
|
437
|
+
onMinimapDoubleClick(t) {
|
|
438
|
+
this.options.position === "fixed" && (t.preventDefault(), t.stopPropagation(), this.clearMinimapClickTimer(), this.cycleFixedPosition());
|
|
439
|
+
}
|
|
440
|
+
/**
|
|
441
|
+
* Clears a pending delayed minimap click.
|
|
442
|
+
*/
|
|
443
|
+
clearMinimapClickTimer() {
|
|
444
|
+
this.minimapClickTimer !== null && (clearTimeout(this.minimapClickTimer), this.minimapClickTimer = null);
|
|
445
|
+
}
|
|
446
|
+
/**
|
|
447
|
+
* Handles single-click minimap navigation.
|
|
448
|
+
*
|
|
449
|
+
* @param clientX - Click position in viewport coordinates
|
|
450
|
+
*/
|
|
451
|
+
handleMinimapClick(t) {
|
|
388
452
|
if (!this.minimapEl || !this.scrollContainer) return;
|
|
389
453
|
if (this.isCompactMode && this.isCompactCollapsed) {
|
|
390
|
-
|
|
454
|
+
this.expandCompact();
|
|
391
455
|
return;
|
|
392
456
|
}
|
|
393
457
|
if (this.isCompactExpanding || this.isDragging || this.isPanning || this.wasPanning) return;
|
|
394
|
-
const { scrollWidth: e, clientWidth: i } = this.scrollContainer,
|
|
458
|
+
const { scrollWidth: e, clientWidth: i } = this.scrollContainer, n = e - i, a = this.minimapEl.getBoundingClientRect(), s = t - a.left;
|
|
395
459
|
if (this.options.mode === "canvas") {
|
|
396
|
-
const
|
|
397
|
-
if (
|
|
398
|
-
const
|
|
460
|
+
const m = this.getColumnAtX(s);
|
|
461
|
+
if (m >= 0) {
|
|
462
|
+
const u = this.columns.length, f = e / u, c = (m + 0.5) * f - i / 2;
|
|
399
463
|
this.scrollContainer.scrollTo({
|
|
400
|
-
left: Math.max(0, Math.min(
|
|
464
|
+
left: Math.max(0, Math.min(n, c)),
|
|
401
465
|
behavior: "smooth"
|
|
402
466
|
});
|
|
403
467
|
}
|
|
404
468
|
return;
|
|
405
469
|
}
|
|
406
|
-
const
|
|
470
|
+
const r = s / a.width * n;
|
|
407
471
|
this.scrollContainer.scrollTo({
|
|
408
|
-
left: Math.max(0, Math.min(
|
|
472
|
+
left: Math.max(0, Math.min(n, r)),
|
|
409
473
|
behavior: "smooth"
|
|
410
474
|
});
|
|
411
475
|
}
|
|
@@ -423,16 +487,40 @@ class F {
|
|
|
423
487
|
* @param e - Pointer event
|
|
424
488
|
*/
|
|
425
489
|
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();
|
|
490
|
+
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) {
|
|
491
|
+
t.preventDefault(), this.pendingPanClientX = t.clientX, this.scheduleCanvasPan();
|
|
430
492
|
return;
|
|
431
493
|
}
|
|
432
494
|
if (!this.isDragging || !this.minimapEl || !this.scrollContainer) return;
|
|
433
495
|
t.preventDefault();
|
|
434
|
-
const { scrollWidth: e, clientWidth: i } = this.scrollContainer,
|
|
435
|
-
this.scrollContainer.scrollLeft = Math.max(0, Math.min(a,
|
|
496
|
+
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;
|
|
497
|
+
this.scrollContainer.scrollLeft = Math.max(0, Math.min(a, r)), this.updateScrollState(), this.updateViewport();
|
|
498
|
+
}
|
|
499
|
+
/**
|
|
500
|
+
* Schedules canvas panning work for the next animation frame.
|
|
501
|
+
*/
|
|
502
|
+
scheduleCanvasPan() {
|
|
503
|
+
this.canvasPanRafId === null && (this.canvasPanRafId = requestAnimationFrame(() => {
|
|
504
|
+
this.canvasPanRafId = null, this.applyCanvasPan();
|
|
505
|
+
}));
|
|
506
|
+
}
|
|
507
|
+
/**
|
|
508
|
+
* Applies pending canvas pan movement using a dampened scroll ratio.
|
|
509
|
+
*/
|
|
510
|
+
applyCanvasPan() {
|
|
511
|
+
if (!this.isPanning || this.pendingPanClientX === null || !this.minimapEl || !this.scrollContainer)
|
|
512
|
+
return;
|
|
513
|
+
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;
|
|
514
|
+
this.scrollContainer.scrollLeft = Math.max(
|
|
515
|
+
0,
|
|
516
|
+
Math.min(a, this.dragStartScrollLeft + l)
|
|
517
|
+
), this.updateScrollState(), this.updateViewport(), this.render();
|
|
518
|
+
}
|
|
519
|
+
/**
|
|
520
|
+
* Cancels any pending canvas pan frame.
|
|
521
|
+
*/
|
|
522
|
+
clearCanvasPanFrame() {
|
|
523
|
+
this.canvasPanRafId !== null && (cancelAnimationFrame(this.canvasPanRafId), this.canvasPanRafId = null);
|
|
436
524
|
}
|
|
437
525
|
/**
|
|
438
526
|
* Handles pointer up to end drag
|
|
@@ -441,7 +529,7 @@ class F {
|
|
|
441
529
|
*/
|
|
442
530
|
onPointerUp(t) {
|
|
443
531
|
if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.minimapEl) {
|
|
444
|
-
this.isPotentialPan = !1, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId);
|
|
532
|
+
this.isPotentialPan = !1, this.pendingPanClientX = null, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId);
|
|
445
533
|
const e = new MouseEvent("click", {
|
|
446
534
|
clientX: t.clientX,
|
|
447
535
|
clientY: t.clientY,
|
|
@@ -450,7 +538,7 @@ class F {
|
|
|
450
538
|
this.minimapEl.dispatchEvent(e);
|
|
451
539
|
return;
|
|
452
540
|
}
|
|
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(() => {
|
|
541
|
+
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
542
|
this.wasPanning = !1;
|
|
455
543
|
}, 100)), this.isDragging && (this.isDragging = !1, this.viewportEl && (this.viewportEl.classList.remove("tm-viewport--dragging"), this.viewportEl.releasePointerCapture(t.pointerId)));
|
|
456
544
|
}
|
|
@@ -462,22 +550,22 @@ class F {
|
|
|
462
550
|
onWheel(t) {
|
|
463
551
|
if (!this.options.zoomable || this.options.mode !== "canvas" || !this.canvasEl || !this.scrollContainer || !this.minimapEl) return;
|
|
464
552
|
t.preventDefault();
|
|
465
|
-
const e = this.zoomState.level, i = -t.deltaY * this.options.zoomSpeed,
|
|
553
|
+
const e = this.zoomState.level, i = -t.deltaY * this.options.zoomSpeed, n = Math.max(
|
|
466
554
|
this.options.minZoom,
|
|
467
555
|
Math.min(this.options.maxZoom, e + i)
|
|
468
556
|
);
|
|
469
|
-
if (
|
|
470
|
-
const a = this.canvasEl.getBoundingClientRect(), s = t.clientX - a.left,
|
|
557
|
+
if (n === e) return;
|
|
558
|
+
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
559
|
this.zoomState = {
|
|
472
|
-
level:
|
|
560
|
+
level: n,
|
|
473
561
|
panX: 0,
|
|
474
|
-
isMinZoom:
|
|
475
|
-
isMaxZoom:
|
|
562
|
+
isMinZoom: n <= this.options.minZoom,
|
|
563
|
+
isMaxZoom: n >= this.options.maxZoom
|
|
476
564
|
};
|
|
477
|
-
const
|
|
478
|
-
if (
|
|
479
|
-
const S = (
|
|
480
|
-
this.scrollContainer.scrollLeft =
|
|
565
|
+
const E = 1 / n;
|
|
566
|
+
if (n > 1) {
|
|
567
|
+
const S = (d - r * E) / (1 - E), M = Math.max(0, Math.min(c, S * c));
|
|
568
|
+
this.scrollContainer.scrollLeft = M;
|
|
481
569
|
}
|
|
482
570
|
this.updateScrollState(), this.render();
|
|
483
571
|
}
|
|
@@ -523,7 +611,7 @@ class F {
|
|
|
523
611
|
applyCompactDimensions(t) {
|
|
524
612
|
if (!(!this.minimapEl || !this.isCompactMode)) {
|
|
525
613
|
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", `${
|
|
614
|
+
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
615
|
return;
|
|
528
616
|
}
|
|
529
617
|
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 +723,9 @@ class F {
|
|
|
635
723
|
scrollToColumn(t, e = !0) {
|
|
636
724
|
if (!this.scrollContainer || t < 0 || t >= this.columns.length)
|
|
637
725
|
return;
|
|
638
|
-
const
|
|
726
|
+
const n = this.columns.slice(0, t).reduce((a, s) => a + s.width, 0);
|
|
639
727
|
this.scrollContainer.scrollTo({
|
|
640
|
-
left:
|
|
728
|
+
left: n,
|
|
641
729
|
behavior: e ? "smooth" : "auto"
|
|
642
730
|
});
|
|
643
731
|
}
|
|
@@ -669,7 +757,7 @@ class F {
|
|
|
669
757
|
const i = Math.max(
|
|
670
758
|
this.options.minZoom,
|
|
671
759
|
Math.min(this.options.maxZoom, t)
|
|
672
|
-
),
|
|
760
|
+
), n = 1 / i, a = 1 - n;
|
|
673
761
|
let s = e !== void 0 ? e : 0;
|
|
674
762
|
if (s = Math.max(0, Math.min(a, s)), this.zoomState = {
|
|
675
763
|
level: i,
|
|
@@ -678,8 +766,8 @@ class F {
|
|
|
678
766
|
isMinZoom: i <= this.options.minZoom,
|
|
679
767
|
isMaxZoom: i >= this.options.maxZoom
|
|
680
768
|
}, i > 1 && s > 0) {
|
|
681
|
-
const { scrollWidth:
|
|
682
|
-
this.scrollContainer.scrollLeft = Math.max(0, Math.min(
|
|
769
|
+
const { scrollWidth: l, clientWidth: r } = this.scrollContainer, m = Math.max(l - r, 1), u = s / (1 - n);
|
|
770
|
+
this.scrollContainer.scrollLeft = Math.max(0, Math.min(m, u * m));
|
|
683
771
|
} else i <= 1 && (this.scrollContainer.scrollLeft = 0);
|
|
684
772
|
this.updateScrollState(), this.render();
|
|
685
773
|
}
|
|
@@ -699,26 +787,26 @@ class F {
|
|
|
699
787
|
if (this.isDestroyed || this.options.mode !== "canvas") return;
|
|
700
788
|
const i = this.columns.length;
|
|
701
789
|
if (i === 0) return;
|
|
702
|
-
const
|
|
703
|
-
this.setZoom(
|
|
790
|
+
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;
|
|
791
|
+
this.setZoom(l, r);
|
|
704
792
|
}
|
|
705
793
|
/**
|
|
706
794
|
* Destroys the minimap instance and cleans up resources
|
|
707
795
|
*/
|
|
708
796
|
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 = []);
|
|
797
|
+
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
798
|
}
|
|
711
799
|
}
|
|
712
|
-
const
|
|
713
|
-
let
|
|
714
|
-
function
|
|
715
|
-
if (
|
|
800
|
+
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}';
|
|
801
|
+
let R = !1;
|
|
802
|
+
function B() {
|
|
803
|
+
if (R || typeof document > "u") return;
|
|
716
804
|
const v = document.createElement("style");
|
|
717
|
-
v.id = "table-minimap-styles", v.textContent =
|
|
805
|
+
v.id = "table-minimap-styles", v.textContent = N, document.head.appendChild(v), R = !0;
|
|
718
806
|
}
|
|
719
|
-
|
|
807
|
+
B();
|
|
720
808
|
export {
|
|
721
|
-
|
|
722
|
-
|
|
809
|
+
_ as TableMinimap,
|
|
810
|
+
B as injectStyles
|
|
723
811
|
};
|
|
724
812
|
//# sourceMappingURL=table-minimap.js.map
|