@sakuzu/maplibre-gl-draw-ui 1.2.1 → 1.3.0
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 +34 -0
- package/README.md +38 -10
- package/dist/controls.d.ts +21 -6
- package/dist/index.d.ts +5 -2
- package/dist/index.js +768 -327
- package/dist/index.js.map +1 -1
- package/dist/maplibre-gl-draw-ui.js +5745 -5468
- package/dist/maplibre-gl-draw-ui.js.map +1 -1
- package/dist/reveal.d.ts +48 -0
- package/dist/style.css +1 -1
- package/dist/types.d.ts +3 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import { GlobeControl, NavigationControl, ScaleControl } from "maplibre-gl";
|
|
|
12
12
|
*
|
|
13
13
|
* `refresh` reads it again without an event, for a value that core changes without one.
|
|
14
14
|
*/
|
|
15
|
-
function follow(draw, events, read) {
|
|
15
|
+
function follow$1(draw, events, read) {
|
|
16
16
|
const updates = /* @__PURE__ */ new Set();
|
|
17
17
|
const subscribe = createSubscriber((update) => {
|
|
18
18
|
updates.add(update);
|
|
@@ -203,7 +203,7 @@ var rest_excludes$46 = /* @__PURE__ */ new Set([
|
|
|
203
203
|
"class",
|
|
204
204
|
"children"
|
|
205
205
|
]);
|
|
206
|
-
var root$
|
|
206
|
+
var root$80 = $.from_svg(`<svg><!><!></svg>`);
|
|
207
207
|
function Icon$1($$anchor, $$props) {
|
|
208
208
|
$.push($$props, true);
|
|
209
209
|
const globalProps = getLucideContext() ?? {};
|
|
@@ -228,7 +228,7 @@ function Icon$1($$anchor, $$props) {
|
|
|
228
228
|
...$.get(svgAttributes),
|
|
229
229
|
class: [...$.get(svgAttributes).class.split(" "), $$props.class]
|
|
230
230
|
}));
|
|
231
|
-
var svg = root$
|
|
231
|
+
var svg = root$80();
|
|
232
232
|
$.attribute_effect(svg, () => ({ ...$.get(iconAttributes) }));
|
|
233
233
|
var node = $.child(svg);
|
|
234
234
|
$.each(node, 17, () => $.get(builtIconNode), $.index, ($$anchor, $$item) => {
|
|
@@ -312,14 +312,14 @@ function Mouse_pointer_2($$anchor, $$props) {
|
|
|
312
312
|
}
|
|
313
313
|
//#endregion
|
|
314
314
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Actions.svelte
|
|
315
|
-
var root$
|
|
315
|
+
var root$79 = $.from_html(`<div class="lead svelte-1sb9m4s"><!></div>`);
|
|
316
316
|
var root_1$46 = $.from_html(`<div class="group svelte-1sb9m4s"><!> <!></div>`);
|
|
317
317
|
var root_2$30 = $.from_html(`<div class="actions svelte-1sb9m4s" data-role="actions"><!> <!></div>`);
|
|
318
318
|
function Actions$1($$anchor, $$props) {
|
|
319
319
|
var div = root_2$30();
|
|
320
320
|
var node = $.child(div);
|
|
321
321
|
var consequent = ($$anchor) => {
|
|
322
|
-
var div_1 = root$
|
|
322
|
+
var div_1 = root$79();
|
|
323
323
|
var node_1 = $.child(div_1);
|
|
324
324
|
$.snippet(node_1, () => $$props.lead);
|
|
325
325
|
$.reset(div_1);
|
|
@@ -468,9 +468,9 @@ function getMessages() {
|
|
|
468
468
|
}
|
|
469
469
|
//#endregion
|
|
470
470
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Counter.svelte
|
|
471
|
-
var root$
|
|
471
|
+
var root$78 = $.from_html(`<span data-role="mark" data-h="icon" class="counter svelte-1bhliyn"><span class="t svelte-1bhliyn"><!></span></span>`);
|
|
472
472
|
function Counter($$anchor, $$props) {
|
|
473
|
-
var span = root$
|
|
473
|
+
var span = root$78();
|
|
474
474
|
var span_1 = $.child(span);
|
|
475
475
|
var node = $.child(span_1);
|
|
476
476
|
$.snippet(node, () => $$props.children);
|
|
@@ -1264,10 +1264,10 @@ function X($$anchor, $$props) {
|
|
|
1264
1264
|
}
|
|
1265
1265
|
//#endregion
|
|
1266
1266
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/glyphs/Arrow.svelte
|
|
1267
|
-
var root$
|
|
1267
|
+
var root$77 = $.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="20" x2="16.5" y2="7.5"></line><circle cx="4" cy="20" r="1.7" fill="currentColor" stroke="none"></circle><polygon points="21 3 19.2 11.2 12.8 4.8" fill="currentColor" stroke="none"></polygon></svg>`);
|
|
1268
1268
|
function Arrow($$anchor, $$props) {
|
|
1269
1269
|
let size = $.prop($$props, "size", 3, 24), strokeWidth = $.prop($$props, "strokeWidth", 3, 1.75);
|
|
1270
|
-
var svg = root$
|
|
1270
|
+
var svg = root$77();
|
|
1271
1271
|
$.template_effect(() => {
|
|
1272
1272
|
$.set_attribute(svg, "width", size());
|
|
1273
1273
|
$.set_attribute(svg, "height", size());
|
|
@@ -1279,11 +1279,11 @@ function Arrow($$anchor, $$props) {
|
|
|
1279
1279
|
}
|
|
1280
1280
|
//#endregion
|
|
1281
1281
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/glyphs/Point.svelte
|
|
1282
|
-
var root$
|
|
1282
|
+
var root$76 = $.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="5.5" fill="currentColor"></circle></svg>`);
|
|
1283
1283
|
function Point($$anchor, $$props) {
|
|
1284
1284
|
let size = $.prop($$props, "size", 3, 24);
|
|
1285
1285
|
$.prop($$props, "strokeWidth", 3, 1.75);
|
|
1286
|
-
var svg = root$
|
|
1286
|
+
var svg = root$76();
|
|
1287
1287
|
$.template_effect(() => {
|
|
1288
1288
|
$.set_attribute(svg, "width", size());
|
|
1289
1289
|
$.set_attribute(svg, "height", size());
|
|
@@ -1294,10 +1294,10 @@ function Point($$anchor, $$props) {
|
|
|
1294
1294
|
}
|
|
1295
1295
|
//#endregion
|
|
1296
1296
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/glyphs/Polygon.svelte
|
|
1297
|
-
var root$
|
|
1297
|
+
var root$75 = $.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 3 21 9 17 21 6 20 3 9"></polygon><circle cx="11" cy="3" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="21" cy="9" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="17" cy="21" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="6" cy="20" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="3" cy="9" r="1.7" fill="currentColor" stroke="none"></circle></svg>`);
|
|
1298
1298
|
function Polygon($$anchor, $$props) {
|
|
1299
1299
|
let size = $.prop($$props, "size", 3, 24), strokeWidth = $.prop($$props, "strokeWidth", 3, 1.75);
|
|
1300
|
-
var svg = root$
|
|
1300
|
+
var svg = root$75();
|
|
1301
1301
|
$.template_effect(() => {
|
|
1302
1302
|
$.set_attribute(svg, "width", size());
|
|
1303
1303
|
$.set_attribute(svg, "height", size());
|
|
@@ -1309,10 +1309,10 @@ function Polygon($$anchor, $$props) {
|
|
|
1309
1309
|
}
|
|
1310
1310
|
//#endregion
|
|
1311
1311
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/glyphs/Polyline.svelte
|
|
1312
|
-
var root$
|
|
1312
|
+
var root$74 = $.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 17 8 11 14 14 21 6"></polyline><circle cx="3" cy="17" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="8" cy="11" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="14" cy="14" r="1.7" fill="currentColor" stroke="none"></circle><circle cx="21" cy="6" r="1.7" fill="currentColor" stroke="none"></circle></svg>`);
|
|
1313
1313
|
function Polyline($$anchor, $$props) {
|
|
1314
1314
|
let size = $.prop($$props, "size", 3, 24), strokeWidth = $.prop($$props, "strokeWidth", 3, 1.75);
|
|
1315
|
-
var svg = root$
|
|
1315
|
+
var svg = root$74();
|
|
1316
1316
|
$.template_effect(() => {
|
|
1317
1317
|
$.set_attribute(svg, "width", size());
|
|
1318
1318
|
$.set_attribute(svg, "height", size());
|
|
@@ -1324,10 +1324,10 @@ function Polyline($$anchor, $$props) {
|
|
|
1324
1324
|
}
|
|
1325
1325
|
//#endregion
|
|
1326
1326
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/glyphs/StickyNote.svelte
|
|
1327
|
-
var root$
|
|
1327
|
+
var root$73 = $.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3h14a2 2 0 0 1 2 2v9l-7 7H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"></path><path d="M21 14h-5a2 2 0 0 0-2 2v5"></path><line x1="8" y1="8.5" x2="17" y2="8.5"></line><line x1="8" y1="12.5" x2="13" y2="12.5"></line></svg>`);
|
|
1328
1328
|
function StickyNote($$anchor, $$props) {
|
|
1329
1329
|
let size = $.prop($$props, "size", 3, 24), strokeWidth = $.prop($$props, "strokeWidth", 3, 1.75);
|
|
1330
|
-
var svg = root$
|
|
1330
|
+
var svg = root$73();
|
|
1331
1331
|
$.template_effect(() => {
|
|
1332
1332
|
$.set_attribute(svg, "width", size());
|
|
1333
1333
|
$.set_attribute(svg, "height", size());
|
|
@@ -1501,11 +1501,11 @@ function placeTip(node, anchor, bounds) {
|
|
|
1501
1501
|
}
|
|
1502
1502
|
//#endregion
|
|
1503
1503
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Tooltip.svelte
|
|
1504
|
-
var root$
|
|
1504
|
+
var root$72 = $.from_html(`<span class="kbd svelte-balpgw"><span class="t svelte-balpgw"> </span></span>`);
|
|
1505
1505
|
var root_1$45 = $.from_html(`<span class="t svelte-balpgw"> </span><!>`, 1);
|
|
1506
1506
|
var root_2$29 = $.from_html(`<span class="tip inline svelte-balpgw" data-h="button-sm" aria-hidden="true"><!></span>`);
|
|
1507
1507
|
var root_3$19 = $.from_html(`<span class="pair svelte-balpgw"><span class="seat svelte-balpgw"><!></span> <!></span>`);
|
|
1508
|
-
var root_4$
|
|
1508
|
+
var root_4$14 = $.from_html(`<span class="tip svelte-balpgw" data-h="button-sm" aria-hidden="true"><!></span>`);
|
|
1509
1509
|
var root_5$9 = $.from_html(`<span class="seat svelte-balpgw"><!> <!></span>`);
|
|
1510
1510
|
function Tooltip($$anchor, $$props) {
|
|
1511
1511
|
$.push($$props, true);
|
|
@@ -1515,7 +1515,7 @@ function Tooltip($$anchor, $$props) {
|
|
|
1515
1515
|
var text_1 = $.only_child(span, true);
|
|
1516
1516
|
var node_1 = $.sibling(span);
|
|
1517
1517
|
var consequent = ($$anchor) => {
|
|
1518
|
-
var span_1 = root$
|
|
1518
|
+
var span_1 = root$72();
|
|
1519
1519
|
var span_2 = $.child(span_1);
|
|
1520
1520
|
var text_2 = $.only_child(span_2, true);
|
|
1521
1521
|
$.reset(span_1);
|
|
@@ -1621,7 +1621,7 @@ function Tooltip($$anchor, $$props) {
|
|
|
1621
1621
|
$.snippet(node_6, () => $$props.children);
|
|
1622
1622
|
var node_7 = $.sibling(node_6, 2);
|
|
1623
1623
|
var consequent_3 = ($$anchor) => {
|
|
1624
|
-
var span_7 = root_4$
|
|
1624
|
+
var span_7 = root_4$14();
|
|
1625
1625
|
var node_8 = $.child(span_7);
|
|
1626
1626
|
face(node_8);
|
|
1627
1627
|
$.reset(span_7);
|
|
@@ -1676,11 +1676,11 @@ var rest_excludes$10 = /* @__PURE__ */ new Set([
|
|
|
1676
1676
|
"aria-label",
|
|
1677
1677
|
"children"
|
|
1678
1678
|
]);
|
|
1679
|
-
var root$
|
|
1679
|
+
var root$71 = $.from_html(`<span class="kbd t svelte-5ccjdv"> </span>`);
|
|
1680
1680
|
var root_1$44 = $.from_html(`<!><span><!></span><!><!>`, 1);
|
|
1681
1681
|
var root_2$28 = $.from_html(`<span class="unread svelte-5ccjdv" aria-hidden="true"><!></span>`);
|
|
1682
1682
|
var root_3$18 = $.from_html(`<a><!><!></a>`);
|
|
1683
|
-
var root_4$
|
|
1683
|
+
var root_4$13 = $.from_html(`<button><!><!></button>`);
|
|
1684
1684
|
function Button($$anchor, $$props) {
|
|
1685
1685
|
$.push($$props, true);
|
|
1686
1686
|
const inner = ($$anchor) => {
|
|
@@ -1717,7 +1717,7 @@ function Button($$anchor, $$props) {
|
|
|
1717
1717
|
$.reset(span);
|
|
1718
1718
|
var node_5 = $.sibling(span);
|
|
1719
1719
|
var consequent_3 = ($$anchor) => {
|
|
1720
|
-
var span_1 = root$
|
|
1720
|
+
var span_1 = root$71();
|
|
1721
1721
|
var text = $.only_child(span_1, true);
|
|
1722
1722
|
$.template_effect(() => $.set_text(text, $$props.kbd));
|
|
1723
1723
|
$.append($$anchor, span_1);
|
|
@@ -1801,7 +1801,7 @@ function Button($$anchor, $$props) {
|
|
|
1801
1801
|
$.append($$anchor, a);
|
|
1802
1802
|
};
|
|
1803
1803
|
var alternate_1 = ($$anchor) => {
|
|
1804
|
-
var button = root_4$
|
|
1804
|
+
var button = root_4$13();
|
|
1805
1805
|
$.attribute_effect(button, () => ({
|
|
1806
1806
|
class: `btn ${variant() ?? ""}`,
|
|
1807
1807
|
"data-tone": $$props.tone,
|
|
@@ -1870,8 +1870,118 @@ function Button($$anchor, $$props) {
|
|
|
1870
1870
|
$.pop();
|
|
1871
1871
|
}
|
|
1872
1872
|
//#endregion
|
|
1873
|
+
//#region ../node_modules/@sakuzu/kata/dist/svelte/lib/place.js
|
|
1874
|
+
var MIN_HEIGHT = 120;
|
|
1875
|
+
/** The distance from the trigger (gap-xs) and the least distance from the window's edge (gap-md) */
|
|
1876
|
+
function distances(context) {
|
|
1877
|
+
return {
|
|
1878
|
+
gap: tokenPx("--kata-gap-xs", context),
|
|
1879
|
+
edge: tokenPx("--kata-gap-md", context)
|
|
1880
|
+
};
|
|
1881
|
+
}
|
|
1882
|
+
/** The height of the surface's content, measured without its limit; its scroll stays */
|
|
1883
|
+
function naturalHeight(surface) {
|
|
1884
|
+
const keep = surface.style.maxHeight;
|
|
1885
|
+
const scroll = surface.scrollTop;
|
|
1886
|
+
surface.style.maxHeight = "";
|
|
1887
|
+
const natural = surface.scrollHeight;
|
|
1888
|
+
surface.style.maxHeight = keep;
|
|
1889
|
+
surface.scrollTop = scroll;
|
|
1890
|
+
return natural;
|
|
1891
|
+
}
|
|
1892
|
+
/**
|
|
1893
|
+
* Below the trigger (or above it), lined up with its start or its end edge. edge is the rectangle
|
|
1894
|
+
* it opens from (a bar's, for a trigger inside a bar), the trigger's by default; width is the width
|
|
1895
|
+
* the surface takes, its own by default.
|
|
1896
|
+
*/
|
|
1897
|
+
function placeBelow(surface, trigger, options) {
|
|
1898
|
+
const { gap, edge: inset } = distances(surface);
|
|
1899
|
+
const from = options.edge ?? trigger;
|
|
1900
|
+
const vw = window.innerWidth;
|
|
1901
|
+
const vh = window.innerHeight;
|
|
1902
|
+
const width = options.width ?? surface.offsetWidth;
|
|
1903
|
+
const natural = naturalHeight(surface);
|
|
1904
|
+
const below = vh - from.bottom - gap - inset;
|
|
1905
|
+
const above = from.top - gap - inset;
|
|
1906
|
+
const up = options.up ? !(above < Math.min(natural, MIN_HEIGHT) && below > above) : below < Math.min(natural, MIN_HEIGHT) && above > below;
|
|
1907
|
+
const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
|
|
1908
|
+
const shown = Math.min(natural, maxHeight);
|
|
1909
|
+
const top = up ? from.top - gap - shown : from.bottom + gap;
|
|
1910
|
+
let left = options.align === "end" ? trigger.right - width : trigger.left;
|
|
1911
|
+
left = Math.max(inset, Math.min(left, vw - width - inset));
|
|
1912
|
+
return {
|
|
1913
|
+
top: Math.round(top),
|
|
1914
|
+
left: Math.round(left),
|
|
1915
|
+
maxHeight: Math.round(maxHeight)
|
|
1916
|
+
};
|
|
1917
|
+
}
|
|
1918
|
+
/**
|
|
1919
|
+
* Beside a vertical bar: gap-xs from its left edge, or from its right edge when there is no room on
|
|
1920
|
+
* the left, lined up with the top of the trigger and kept inside the window
|
|
1921
|
+
*/
|
|
1922
|
+
function placeBeside(surface, trigger, bar) {
|
|
1923
|
+
const { gap, edge: inset } = distances(surface);
|
|
1924
|
+
const vw = window.innerWidth;
|
|
1925
|
+
const vh = window.innerHeight;
|
|
1926
|
+
const width = surface.offsetWidth;
|
|
1927
|
+
const maxHeight = Math.max(MIN_HEIGHT, vh - 2 * inset);
|
|
1928
|
+
const shown = Math.min(naturalHeight(surface), maxHeight);
|
|
1929
|
+
const top = Math.max(inset, Math.min(trigger.top, vh - shown - inset));
|
|
1930
|
+
let left = bar.left - gap - width;
|
|
1931
|
+
if (left < inset) left = Math.min(bar.right + gap, vw - width - inset);
|
|
1932
|
+
return {
|
|
1933
|
+
top: Math.round(top),
|
|
1934
|
+
left: Math.round(left),
|
|
1935
|
+
maxHeight: Math.round(maxHeight)
|
|
1936
|
+
};
|
|
1937
|
+
}
|
|
1938
|
+
/**
|
|
1939
|
+
* A submenu next to its row: on the right, on the left when there is no room, and inside the window
|
|
1940
|
+
* below
|
|
1941
|
+
*/
|
|
1942
|
+
function placeNext(surface, row) {
|
|
1943
|
+
const { edge: inset } = distances(surface);
|
|
1944
|
+
const w = surface.offsetWidth;
|
|
1945
|
+
const h = surface.offsetHeight;
|
|
1946
|
+
let left = row.right;
|
|
1947
|
+
if (left + w > window.innerWidth - inset) left = Math.max(inset, row.left - w);
|
|
1948
|
+
let top = row.top;
|
|
1949
|
+
if (top + h > window.innerHeight - inset) top = Math.max(inset, window.innerHeight - inset - h);
|
|
1950
|
+
return {
|
|
1951
|
+
top,
|
|
1952
|
+
left
|
|
1953
|
+
};
|
|
1954
|
+
}
|
|
1955
|
+
/**
|
|
1956
|
+
* Places the surface again whenever its trigger moves, the page or a container scrolls (not the
|
|
1957
|
+
* surface itself, whose content scrolls), or the window is resized. Returns the function that
|
|
1958
|
+
* stops following.
|
|
1959
|
+
*/
|
|
1960
|
+
function follow(trigger, surface, place) {
|
|
1961
|
+
let last = trigger.getBoundingClientRect();
|
|
1962
|
+
let frame = requestAnimationFrame(function watch() {
|
|
1963
|
+
const r = trigger.getBoundingClientRect();
|
|
1964
|
+
if (r.top !== last.top || r.left !== last.left || r.width !== last.width || r.height !== last.height) {
|
|
1965
|
+
last = r;
|
|
1966
|
+
place();
|
|
1967
|
+
}
|
|
1968
|
+
frame = requestAnimationFrame(watch);
|
|
1969
|
+
});
|
|
1970
|
+
const onScroll = (e) => {
|
|
1971
|
+
if (e.target instanceof Node && surface.contains(e.target)) return;
|
|
1972
|
+
place();
|
|
1973
|
+
};
|
|
1974
|
+
window.addEventListener("scroll", onScroll, true);
|
|
1975
|
+
window.addEventListener("resize", place);
|
|
1976
|
+
return () => {
|
|
1977
|
+
cancelAnimationFrame(frame);
|
|
1978
|
+
window.removeEventListener("scroll", onScroll, true);
|
|
1979
|
+
window.removeEventListener("resize", place);
|
|
1980
|
+
};
|
|
1981
|
+
}
|
|
1982
|
+
//#endregion
|
|
1873
1983
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Dropdown.svelte
|
|
1874
|
-
var root$
|
|
1984
|
+
var root$70 = $.from_html(`<div><!></div>`);
|
|
1875
1985
|
var root_1$43 = $.from_html(`<span><!></span> <!>`, 1);
|
|
1876
1986
|
function Dropdown($$anchor, $$props) {
|
|
1877
1987
|
$.push($$props, true);
|
|
@@ -1912,47 +2022,16 @@ function Dropdown($$anchor, $$props) {
|
|
|
1912
2022
|
}));
|
|
1913
2023
|
let focusFirst = false;
|
|
1914
2024
|
let returnFocusEl = null;
|
|
1915
|
-
const GAP = 4;
|
|
1916
|
-
const EDGE = 8;
|
|
1917
|
-
const MIN_HEIGHT = 120;
|
|
1918
2025
|
function place() {
|
|
1919
2026
|
if (!$.get(anchor) || !$.get(panelEl)) return;
|
|
1920
2027
|
const r = $.get(anchor).getBoundingClientRect();
|
|
1921
2028
|
const bar = $.get(anchor).closest("[role=\"toolbar\"], [data-role=\"toolbar\"]");
|
|
1922
2029
|
const edge = bar ? bar.getBoundingClientRect() : r;
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
const natural = $.get(panelEl).scrollHeight;
|
|
1929
|
-
$.get(panelEl).style.maxHeight = keep;
|
|
1930
|
-
if (bar?.getAttribute("aria-orientation") === "vertical") {
|
|
1931
|
-
const maxHeight = Math.max(MIN_HEIGHT, vh - 16);
|
|
1932
|
-
const shown = Math.min(natural, maxHeight);
|
|
1933
|
-
const top = Math.max(EDGE, Math.min(r.top, vh - shown - EDGE));
|
|
1934
|
-
let left = edge.left - GAP - width;
|
|
1935
|
-
if (left < EDGE) left = Math.min(edge.right + GAP, vw - width - EDGE);
|
|
1936
|
-
$.set(pos, {
|
|
1937
|
-
top: Math.round(top),
|
|
1938
|
-
left: Math.round(left),
|
|
1939
|
-
maxHeight: Math.round(maxHeight)
|
|
1940
|
-
}, true);
|
|
1941
|
-
return;
|
|
1942
|
-
}
|
|
1943
|
-
const below = vh - edge.bottom - GAP - EDGE;
|
|
1944
|
-
const above = edge.top - GAP - EDGE;
|
|
1945
|
-
const up = preferUp() ? !(above < Math.min(natural, MIN_HEIGHT) && below > above) : below < Math.min(natural, MIN_HEIGHT) && above > below;
|
|
1946
|
-
const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
|
|
1947
|
-
const shown = Math.min(natural, maxHeight);
|
|
1948
|
-
const top = up ? edge.top - GAP - shown : edge.bottom + GAP;
|
|
1949
|
-
let left = align() === "end" ? r.right - width : r.left;
|
|
1950
|
-
left = Math.max(EDGE, Math.min(left, vw - width - EDGE));
|
|
1951
|
-
$.set(pos, {
|
|
1952
|
-
top: Math.round(top),
|
|
1953
|
-
left: Math.round(left),
|
|
1954
|
-
maxHeight: Math.round(maxHeight)
|
|
1955
|
-
}, true);
|
|
2030
|
+
$.set(pos, bar?.getAttribute("aria-orientation") === "vertical" ? placeBeside($.get(panelEl), r, edge) : placeBelow($.get(panelEl), r, {
|
|
2031
|
+
align: align(),
|
|
2032
|
+
up: preferUp(),
|
|
2033
|
+
edge
|
|
2034
|
+
}), true);
|
|
1956
2035
|
}
|
|
1957
2036
|
function toggle() {
|
|
1958
2037
|
$.set(open, !$.get(open));
|
|
@@ -1974,7 +2053,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
1974
2053
|
}
|
|
1975
2054
|
}
|
|
1976
2055
|
$.user_effect(() => {
|
|
1977
|
-
if (!$.get(open) || !$.get(panelEl)) return;
|
|
2056
|
+
if (!$.get(open) || !$.get(panelEl) || !$.get(anchor)) return;
|
|
1978
2057
|
const el = $.get(panelEl);
|
|
1979
2058
|
if (canPopover && !isShown(el)) try {
|
|
1980
2059
|
el.showPopover();
|
|
@@ -1988,6 +2067,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
1988
2067
|
await tick();
|
|
1989
2068
|
focusItemAt(0);
|
|
1990
2069
|
})();
|
|
2070
|
+
return follow($.get(anchor), el, place);
|
|
1991
2071
|
});
|
|
1992
2072
|
function menuItems() {
|
|
1993
2073
|
if (!$.get(panelEl)) return [];
|
|
@@ -2036,8 +2116,6 @@ function Dropdown($$anchor, $$props) {
|
|
|
2036
2116
|
var fragment = root_1$43();
|
|
2037
2117
|
$.event("keydown", $.window, onKeyDown, true);
|
|
2038
2118
|
$.event("pointerdown", $.window, onPointerDown, true);
|
|
2039
|
-
$.event("resize", $.window, () => $.get(open) && place());
|
|
2040
|
-
$.event("scroll", $.window, () => $.get(open) && place());
|
|
2041
2119
|
var span = $.first_child(fragment);
|
|
2042
2120
|
let classes;
|
|
2043
2121
|
var node = $.child(span);
|
|
@@ -2046,7 +2124,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
2046
2124
|
$.bind_this(span, ($$value) => $.set(anchor, $$value), () => $.get(anchor));
|
|
2047
2125
|
var node_1 = $.sibling(span, 2);
|
|
2048
2126
|
var consequent = ($$anchor) => {
|
|
2049
|
-
var div = root$
|
|
2127
|
+
var div = root$70();
|
|
2050
2128
|
let classes_1;
|
|
2051
2129
|
let styles;
|
|
2052
2130
|
var node_2 = $.child(div);
|
|
@@ -2199,9 +2277,9 @@ function createNarrow(remLimit) {
|
|
|
2199
2277
|
}
|
|
2200
2278
|
//#endregion
|
|
2201
2279
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Menu.svelte
|
|
2202
|
-
var root$
|
|
2280
|
+
var root$69 = $.from_html(`<div class="menu svelte-jzoay2" data-role="menu"><!></div>`);
|
|
2203
2281
|
function Menu($$anchor, $$props) {
|
|
2204
|
-
var div = root$
|
|
2282
|
+
var div = root$69();
|
|
2205
2283
|
var node = $.child(div);
|
|
2206
2284
|
$.snippet(node, () => $$props.children);
|
|
2207
2285
|
$.reset(div);
|
|
@@ -2210,16 +2288,16 @@ function Menu($$anchor, $$props) {
|
|
|
2210
2288
|
}
|
|
2211
2289
|
//#endregion
|
|
2212
2290
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuDivider.svelte
|
|
2213
|
-
var root$
|
|
2291
|
+
var root$68 = $.from_html(`<div class="sep svelte-1s1g1mj" data-role="rule" role="separator"></div>`);
|
|
2214
2292
|
function MenuDivider($$anchor) {
|
|
2215
|
-
var div = root$
|
|
2293
|
+
var div = root$68();
|
|
2216
2294
|
$.append($$anchor, div);
|
|
2217
2295
|
}
|
|
2218
2296
|
//#endregion
|
|
2219
2297
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuHead.svelte
|
|
2220
|
-
var root$
|
|
2298
|
+
var root$67 = $.from_html(`<div class="head svelte-1bganug" data-role="list-item" data-h="list-item"><span class="label svelte-1bganug"><!></span></div>`);
|
|
2221
2299
|
function MenuHead($$anchor, $$props) {
|
|
2222
|
-
var div = root$
|
|
2300
|
+
var div = root$67();
|
|
2223
2301
|
var span = $.child(div);
|
|
2224
2302
|
var node = $.child(span);
|
|
2225
2303
|
$.snippet(node, () => $$props.children);
|
|
@@ -2244,11 +2322,11 @@ var rest_excludes$9 = /* @__PURE__ */ new Set([
|
|
|
2244
2322
|
"onclick",
|
|
2245
2323
|
"children"
|
|
2246
2324
|
]);
|
|
2247
|
-
var root$
|
|
2325
|
+
var root$66 = $.from_html(`<span class="chk svelte-ibgq9r"><!></span>`);
|
|
2248
2326
|
var root_1$42 = $.from_html(`<span class="kbd t svelte-ibgq9r"> </span>`);
|
|
2249
2327
|
var root_2$27 = $.from_html(`<span class="sub svelte-ibgq9r"><!></span>`);
|
|
2250
2328
|
var root_3$17 = $.from_html(`<!> <span class="grow t svelte-ibgq9r"><!></span> <!> <!>`, 1);
|
|
2251
|
-
var root_4$
|
|
2329
|
+
var root_4$12 = $.from_html(`<a><!></a>`);
|
|
2252
2330
|
var root_5$8 = $.from_html(`<button><!></button>`);
|
|
2253
2331
|
function MenuItem($$anchor, $$props) {
|
|
2254
2332
|
$.push($$props, true);
|
|
@@ -2261,7 +2339,7 @@ function MenuItem($$anchor, $$props) {
|
|
|
2261
2339
|
} });
|
|
2262
2340
|
};
|
|
2263
2341
|
var consequent_2 = ($$anchor) => {
|
|
2264
|
-
var span = root$
|
|
2342
|
+
var span = root$66();
|
|
2265
2343
|
var node_1 = $.child(span);
|
|
2266
2344
|
var consequent_1 = ($$anchor) => {
|
|
2267
2345
|
Icon($$anchor, { name: "check" });
|
|
@@ -2311,7 +2389,7 @@ function MenuItem($$anchor, $$props) {
|
|
|
2311
2389
|
var fragment_3 = $.comment();
|
|
2312
2390
|
var node_6 = $.first_child(fragment_3);
|
|
2313
2391
|
var consequent_5 = ($$anchor) => {
|
|
2314
|
-
var a = root_4$
|
|
2392
|
+
var a = root_4$12();
|
|
2315
2393
|
$.attribute_effect(a, () => ({
|
|
2316
2394
|
class: "item",
|
|
2317
2395
|
"data-role": "list-item",
|
|
@@ -2363,16 +2441,16 @@ function MenuItem($$anchor, $$props) {
|
|
|
2363
2441
|
}
|
|
2364
2442
|
//#endregion
|
|
2365
2443
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuList.svelte
|
|
2366
|
-
var root$
|
|
2444
|
+
var root$65 = $.from_html(`<!> <!>`, 1);
|
|
2367
2445
|
var root_1$41 = $.from_html(`<div class="sub svelte-1taxidq"><!></div>`);
|
|
2368
2446
|
var root_2$26 = $.from_html(`<div class="level svelte-1taxidq"><!></div> <!>`, 1);
|
|
2369
2447
|
function MenuList_1($$anchor, $$props) {
|
|
2370
2448
|
$.push($$props, true);
|
|
2371
2449
|
const entries = ($$anchor) => {
|
|
2372
|
-
var fragment = root$
|
|
2450
|
+
var fragment = root$65();
|
|
2373
2451
|
var node = $.first_child(fragment);
|
|
2374
2452
|
var consequent = ($$anchor) => {
|
|
2375
|
-
var fragment_1 = root$
|
|
2453
|
+
var fragment_1 = root$65();
|
|
2376
2454
|
var node_1 = $.first_child(fragment_1);
|
|
2377
2455
|
MenuItem(node_1, {
|
|
2378
2456
|
icon: "arrow-left",
|
|
@@ -2509,8 +2587,9 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2509
2587
|
}));
|
|
2510
2588
|
let listEl = $.state(void 0);
|
|
2511
2589
|
let subEl = $.state(void 0);
|
|
2512
|
-
|
|
2590
|
+
let subRow = $.state(void 0);
|
|
2513
2591
|
function place(row) {
|
|
2592
|
+
$.set(subRow, row, true);
|
|
2514
2593
|
const r = row.getBoundingClientRect();
|
|
2515
2594
|
$.set(subPos, {
|
|
2516
2595
|
top: r.top,
|
|
@@ -2518,18 +2597,17 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2518
2597
|
}, true);
|
|
2519
2598
|
tick().then(() => {
|
|
2520
2599
|
if (!$.get(subEl)) return;
|
|
2521
|
-
|
|
2522
|
-
const h = $.get(subEl).offsetHeight;
|
|
2523
|
-
let left = r.right;
|
|
2524
|
-
if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, r.left - w);
|
|
2525
|
-
let top = r.top;
|
|
2526
|
-
if (top + h > window.innerHeight - EDGE) top = Math.max(EDGE, window.innerHeight - EDGE - h);
|
|
2527
|
-
$.set(subPos, {
|
|
2528
|
-
top,
|
|
2529
|
-
left
|
|
2530
|
-
}, true);
|
|
2600
|
+
$.set(subPos, placeNext($.get(subEl), r), true);
|
|
2531
2601
|
});
|
|
2532
2602
|
}
|
|
2603
|
+
$.user_effect(() => {
|
|
2604
|
+
const el = $.get(subEl);
|
|
2605
|
+
const row = $.get(subRow);
|
|
2606
|
+
if (!el || !row) return;
|
|
2607
|
+
return follow(row, el, () => {
|
|
2608
|
+
$.set(subPos, placeNext(el, row.getBoundingClientRect()), true);
|
|
2609
|
+
});
|
|
2610
|
+
});
|
|
2533
2611
|
function openAt(index, row, focus = false) {
|
|
2534
2612
|
if ($.get(inPlace)) $.set(inPlaceSub, index, true);
|
|
2535
2613
|
else {
|
|
@@ -2675,9 +2753,9 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2675
2753
|
$.delegate(["keydown"]);
|
|
2676
2754
|
//#endregion
|
|
2677
2755
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Block.svelte
|
|
2678
|
-
var root$
|
|
2756
|
+
var root$64 = $.from_html(`<div class="block svelte-dha4uu" data-inset="" data-role="block"><!></div>`);
|
|
2679
2757
|
function Block($$anchor, $$props) {
|
|
2680
|
-
var div = root$
|
|
2758
|
+
var div = root$64();
|
|
2681
2759
|
var node = $.child(div);
|
|
2682
2760
|
$.snippet(node, () => $$props.children);
|
|
2683
2761
|
$.reset(div);
|
|
@@ -2685,11 +2763,11 @@ function Block($$anchor, $$props) {
|
|
|
2685
2763
|
}
|
|
2686
2764
|
//#endregion
|
|
2687
2765
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/InlineEdit.svelte
|
|
2688
|
-
var root$
|
|
2766
|
+
var root$63 = $.from_html(`<textarea class="svelte-w5dys8"></textarea>`);
|
|
2689
2767
|
var root_1$40 = $.from_html(`<input type="text" class="svelte-w5dys8"/>`);
|
|
2690
2768
|
var root_2$25 = $.from_html(`<span data-role="box"><!></span>`);
|
|
2691
2769
|
var root_3$16 = $.from_html(`<span data-role="box"><span class="t clamp svelte-w5dys8"> </span></span>`);
|
|
2692
|
-
var root_4$
|
|
2770
|
+
var root_4$11 = $.from_html(`<button type="button" data-role="box"><span class="t clamp svelte-w5dys8"> </span> <span class="pen svelte-w5dys8"><!></span></button>`);
|
|
2693
2771
|
var root_5$7 = $.from_html(`<button class="add svelte-w5dys8" type="button" data-role="box" data-h="button"><!><span class="t svelte-w5dys8"> </span></button>`);
|
|
2694
2772
|
function InlineEdit($$anchor, $$props) {
|
|
2695
2773
|
$.push($$props, true);
|
|
@@ -2754,7 +2832,7 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2754
2832
|
let classes;
|
|
2755
2833
|
var node_1 = $.child(span);
|
|
2756
2834
|
var consequent = ($$anchor) => {
|
|
2757
|
-
var textarea = root$
|
|
2835
|
+
var textarea = root$63();
|
|
2758
2836
|
$.remove_textarea_child(textarea);
|
|
2759
2837
|
$.set_attribute(textarea, "rows", 1);
|
|
2760
2838
|
$.bind_this(textarea, ($$value) => $.set(inputEl, $$value), () => $.get(inputEl));
|
|
@@ -2813,7 +2891,7 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2813
2891
|
$.append($$anchor, fragment_1);
|
|
2814
2892
|
};
|
|
2815
2893
|
var consequent_4 = ($$anchor) => {
|
|
2816
|
-
var button = root_4$
|
|
2894
|
+
var button = root_4$11();
|
|
2817
2895
|
let classes_2;
|
|
2818
2896
|
var span_3 = $.child(button);
|
|
2819
2897
|
var text_1 = $.only_child(span_3, true);
|
|
@@ -2859,11 +2937,11 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2859
2937
|
$.delegate(["keydown", "click"]);
|
|
2860
2938
|
//#endregion
|
|
2861
2939
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Pair.svelte
|
|
2862
|
-
var root$
|
|
2940
|
+
var root$62 = $.from_html(`<label class="k svelte-kxn48z"> </label>`);
|
|
2863
2941
|
var root_1$39 = $.from_html(`<a class="k link svelte-kxn48z"> </a>`);
|
|
2864
2942
|
var root_2$24 = $.from_html(`<span class="k svelte-kxn48z"> </span>`);
|
|
2865
2943
|
var root_3$15 = $.from_html(`<span><!></span>`);
|
|
2866
|
-
var root_4$
|
|
2944
|
+
var root_4$10 = $.from_html(`<div class="row svelte-kxn48z"><!></div>`);
|
|
2867
2945
|
var root_5$6 = $.from_html(`<span class="note svelte-kxn48z"> </span>`);
|
|
2868
2946
|
var root_6$5 = $.from_html(`<div data-role="pair"><!> <!> <!></div>`);
|
|
2869
2947
|
function Pair($$anchor, $$props) {
|
|
@@ -2886,7 +2964,7 @@ function Pair($$anchor, $$props) {
|
|
|
2886
2964
|
let classes;
|
|
2887
2965
|
var node = $.child(div);
|
|
2888
2966
|
var consequent = ($$anchor) => {
|
|
2889
|
-
var label_1 = root$
|
|
2967
|
+
var label_1 = root$62();
|
|
2890
2968
|
let styles;
|
|
2891
2969
|
var text = $.only_child(label_1, true);
|
|
2892
2970
|
$.template_effect(() => {
|
|
@@ -2937,7 +3015,7 @@ function Pair($$anchor, $$props) {
|
|
|
2937
3015
|
$.append($$anchor, span_1);
|
|
2938
3016
|
};
|
|
2939
3017
|
var alternate_1 = ($$anchor) => {
|
|
2940
|
-
var div_1 = root_4$
|
|
3018
|
+
var div_1 = root_4$10();
|
|
2941
3019
|
var node_3 = $.child(div_1);
|
|
2942
3020
|
$.snippet(node_3, () => $$props.children);
|
|
2943
3021
|
$.reset(div_1);
|
|
@@ -2972,10 +3050,10 @@ function Pair($$anchor, $$props) {
|
|
|
2972
3050
|
}
|
|
2973
3051
|
//#endregion
|
|
2974
3052
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Kv.svelte
|
|
2975
|
-
var root$
|
|
3053
|
+
var root$61 = $.from_html(`<div data-role="list"></div>`);
|
|
2976
3054
|
function Kv($$anchor, $$props) {
|
|
2977
3055
|
let tight = $.prop($$props, "tight", 3, false);
|
|
2978
|
-
var div = root$
|
|
3056
|
+
var div = root$61();
|
|
2979
3057
|
let classes;
|
|
2980
3058
|
$.each(div, 21, () => $$props.items, $.index, ($$anchor, item) => {
|
|
2981
3059
|
{
|
|
@@ -3022,12 +3100,12 @@ function Kv($$anchor, $$props) {
|
|
|
3022
3100
|
}
|
|
3023
3101
|
//#endregion
|
|
3024
3102
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/LinkAction.svelte
|
|
3025
|
-
var root$
|
|
3103
|
+
var root$60 = $.from_html(`<!><span class="t svelte-3d5dxp"><!></span><!>`, 1);
|
|
3026
3104
|
var root_1$38 = $.from_html(`<a class="link svelte-3d5dxp" data-role="box"><!></a>`);
|
|
3027
3105
|
var root_2$23 = $.from_html(`<button type="button" class="link svelte-3d5dxp" data-role="box"><!></button>`);
|
|
3028
3106
|
function LinkAction($$anchor, $$props) {
|
|
3029
3107
|
const inner = ($$anchor) => {
|
|
3030
|
-
var fragment = root$
|
|
3108
|
+
var fragment = root$60();
|
|
3031
3109
|
var node = $.first_child(fragment);
|
|
3032
3110
|
var consequent = ($$anchor) => {
|
|
3033
3111
|
Icon($$anchor, { get name() {
|
|
@@ -3153,21 +3231,65 @@ var clampTip = (node) => {
|
|
|
3153
3231
|
};
|
|
3154
3232
|
//#endregion
|
|
3155
3233
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Text.svelte
|
|
3234
|
+
var root$59 = $.from_html(`<div data-edge-pass=""><!> <span><!></span></div>`);
|
|
3156
3235
|
function Text($$anchor, $$props) {
|
|
3157
3236
|
$.push($$props, true);
|
|
3237
|
+
const text = ($$anchor) => {
|
|
3238
|
+
var fragment = $.comment();
|
|
3239
|
+
var node_1 = $.first_child(fragment);
|
|
3240
|
+
$.element(node_1, () => $.get(tag), false, ($$element, $$anchor) => {
|
|
3241
|
+
$.action($$element, ($$node, $$action_arg) => clampTipIf?.($$node, $$action_arg), clamp);
|
|
3242
|
+
$.attribute_effect($$element, () => ({
|
|
3243
|
+
class: `kata-text ${role() ?? ""}`,
|
|
3244
|
+
"data-role": $.get(dataRole),
|
|
3245
|
+
id: $$props.id,
|
|
3246
|
+
for: $.get(tag) === "label" ? $$props.for : void 0,
|
|
3247
|
+
href: $.get(tag) === "a" ? $$props.href : void 0,
|
|
3248
|
+
[$.CLASS]: {
|
|
3249
|
+
clamp: clamp(),
|
|
3250
|
+
clamp2: $$props.lines === 2,
|
|
3251
|
+
wrap: wrap(),
|
|
3252
|
+
muted: muted(),
|
|
3253
|
+
mono: mono(),
|
|
3254
|
+
tabular: tabular()
|
|
3255
|
+
}
|
|
3256
|
+
}), void 0, void 0, void 0, "svelte-1hyv1j2");
|
|
3257
|
+
var fragment_1 = $.comment();
|
|
3258
|
+
var node_2 = $.first_child(fragment_1);
|
|
3259
|
+
$.snippet(node_2, () => $$props.children);
|
|
3260
|
+
$.append($$anchor, fragment_1);
|
|
3261
|
+
});
|
|
3262
|
+
$.append($$anchor, fragment);
|
|
3263
|
+
};
|
|
3158
3264
|
let role = $.prop($$props, "role", 3, "body"), clamp = $.prop($$props, "clamp", 3, false), wrap = $.prop($$props, "wrap", 3, false), muted = $.prop($$props, "muted", 3, false), mono = $.prop($$props, "mono", 3, false), tabular = $.prop($$props, "tabular", 3, false);
|
|
3159
|
-
/** The type role (default body) */
|
|
3160
|
-
/** Another element than the role's own: h1 (title, h1), h2 (h2), p (body, prose) or span */
|
|
3161
|
-
/** One line with an ellipsis; the full text shows on hover when it is clipped */
|
|
3162
|
-
/** Two lines with an ellipsis */
|
|
3163
|
-
/** Keep line breaks and wrap long words (text that people wrote) */
|
|
3164
|
-
/** The muted text color */
|
|
3165
|
-
/** The monospace font, at the role's size */
|
|
3166
|
-
/** Figures of equal width, for columns of numbers and times */
|
|
3167
|
-
/** The labelled control, with as="label" */
|
|
3168
|
-
/** The target, with as="a" */
|
|
3169
3265
|
const tag = $.derived(() => $$props.as ?? (role() === "h1" || role() === "title" ? "h1" : role() === "h2" ? "h2" : role() === "prose" || role() === "body" ? "p" : "span"));
|
|
3170
3266
|
const dataRole = $.derived(() => role() === "body" || role() === "prose" ? "p" : role());
|
|
3267
|
+
let ended = $.state(void 0);
|
|
3268
|
+
let seat = $.state(void 0);
|
|
3269
|
+
let under = $.state(false);
|
|
3270
|
+
$.user_effect(() => {
|
|
3271
|
+
const row = $.get(ended);
|
|
3272
|
+
const s = $.get(seat);
|
|
3273
|
+
if (!row || !s || typeof ResizeObserver === "undefined") return;
|
|
3274
|
+
let frame = 0;
|
|
3275
|
+
const read = () => {
|
|
3276
|
+
const text = row.firstElementChild;
|
|
3277
|
+
if (!text) return;
|
|
3278
|
+
const next = s.getBoundingClientRect().top >= text.getBoundingClientRect().bottom;
|
|
3279
|
+
cancelAnimationFrame(frame);
|
|
3280
|
+
frame = requestAnimationFrame(() => {
|
|
3281
|
+
frame = 0;
|
|
3282
|
+
if (untrack(() => $.get(under)) !== next) $.set(under, next);
|
|
3283
|
+
});
|
|
3284
|
+
};
|
|
3285
|
+
const ro = new ResizeObserver(read);
|
|
3286
|
+
ro.observe(row);
|
|
3287
|
+
ro.observe(s);
|
|
3288
|
+
return () => {
|
|
3289
|
+
ro.disconnect();
|
|
3290
|
+
cancelAnimationFrame(frame);
|
|
3291
|
+
};
|
|
3292
|
+
});
|
|
3171
3293
|
const clampTipIf = (node, on) => {
|
|
3172
3294
|
let inner = on ? clampTip(node) : void 0;
|
|
3173
3295
|
return {
|
|
@@ -3183,31 +3305,35 @@ function Text($$anchor, $$props) {
|
|
|
3183
3305
|
}
|
|
3184
3306
|
};
|
|
3185
3307
|
};
|
|
3186
|
-
var
|
|
3187
|
-
var
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
})
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3308
|
+
var fragment_2 = $.comment();
|
|
3309
|
+
var node_3 = $.first_child(fragment_2);
|
|
3310
|
+
var consequent = ($$anchor) => {
|
|
3311
|
+
var div = root$59();
|
|
3312
|
+
let classes;
|
|
3313
|
+
var node_4 = $.child(div);
|
|
3314
|
+
text(node_4);
|
|
3315
|
+
var span = $.sibling(node_4, 2);
|
|
3316
|
+
var node_5 = $.child(span);
|
|
3317
|
+
$.snippet(node_5, () => $$props.end);
|
|
3318
|
+
$.reset(span);
|
|
3319
|
+
$.bind_this(span, ($$value) => $.set(seat, $$value), () => $.get(seat));
|
|
3320
|
+
$.reset(div);
|
|
3321
|
+
$.bind_this(div, ($$value) => $.set(ended, $$value), () => $.get(ended));
|
|
3322
|
+
$.template_effect(() => {
|
|
3323
|
+
classes = $.set_class(div, 1, "ended svelte-1hyv1j2", null, classes, { one: clamp() });
|
|
3324
|
+
$.set_class(span, 1, `end end-${role() ?? ""}`, "svelte-1hyv1j2");
|
|
3325
|
+
$.set_attribute(span, "data-under", $.get(under) || void 0);
|
|
3326
|
+
});
|
|
3327
|
+
$.append($$anchor, div);
|
|
3328
|
+
};
|
|
3329
|
+
var alternate = ($$anchor) => {
|
|
3330
|
+
text($$anchor);
|
|
3331
|
+
};
|
|
3332
|
+
$.if(node_3, ($$render) => {
|
|
3333
|
+
if ($$props.end) $$render(consequent);
|
|
3334
|
+
else $$render(alternate, -1);
|
|
3209
3335
|
});
|
|
3210
|
-
$.append($$anchor,
|
|
3336
|
+
$.append($$anchor, fragment_2);
|
|
3211
3337
|
$.pop();
|
|
3212
3338
|
}
|
|
3213
3339
|
//#endregion
|
|
@@ -3311,7 +3437,7 @@ var root$57 = $.from_html(`<span class="lock svelte-167hfxz" role="img"><!></spa
|
|
|
3311
3437
|
var root_1$36 = $.from_html(`<div class="row svelte-167hfxz"><span class="k svelte-167hfxz"><!></span> <span class="v svelte-167hfxz"><!></span> <span class="end svelte-167hfxz"><!></span></div>`);
|
|
3312
3438
|
var root_2$21 = $.from_html(`<div class="row draft svelte-167hfxz"><span class="k svelte-167hfxz"><!></span> <span class="v svelte-167hfxz"><!></span> <span class="end svelte-167hfxz"><!></span></div>`);
|
|
3313
3439
|
var root_3$13 = $.from_html(`<!> <!>`, 1);
|
|
3314
|
-
var root_4$
|
|
3440
|
+
var root_4$9 = $.from_html(`<div class="attributes svelte-167hfxz"><!> <!></div>`);
|
|
3315
3441
|
function AttributeList($$anchor, $$props) {
|
|
3316
3442
|
$.push($$props, true);
|
|
3317
3443
|
let readonly = $.prop($$props, "readonly", 3, false), locked = $.prop($$props, "locked", 19, () => []);
|
|
@@ -3368,7 +3494,7 @@ function AttributeList($$anchor, $$props) {
|
|
|
3368
3494
|
if (next && $.get(draftRow)?.contains(next)) return;
|
|
3369
3495
|
add();
|
|
3370
3496
|
}
|
|
3371
|
-
var div = root_4$
|
|
3497
|
+
var div = root_4$9();
|
|
3372
3498
|
var node = $.child(div);
|
|
3373
3499
|
var consequent_2 = ($$anchor) => {
|
|
3374
3500
|
var fragment = $.comment();
|
|
@@ -3851,7 +3977,7 @@ var root$50 = $.from_html(`<span class="v svelte-gho7xv"> </span>`);
|
|
|
3851
3977
|
var root_1$31 = $.from_html(`<span class="v ph svelte-gho7xv" data-kata-placeholder=""> </span>`);
|
|
3852
3978
|
var root_2$20 = $.from_html(`<span class="text svelte-gho7xv"><span class="t svelte-gho7xv"> </span> <span class="t desc svelte-gho7xv"> </span></span>`);
|
|
3853
3979
|
var root_3$12 = $.from_html(`<span class="t label svelte-gho7xv"> </span>`);
|
|
3854
|
-
var root_4$
|
|
3980
|
+
var root_4$8 = $.from_html(`<button type="button" role="option" tabindex="-1" data-role="list-item" data-h="list-item"><span class="chk svelte-gho7xv"><!></span> <!></button>`);
|
|
3855
3981
|
var root_5$5 = $.from_html(`<div role="listbox" tabindex="-1"></div>`);
|
|
3856
3982
|
var root_6$4 = $.from_html(`<button type="button" data-role="box" data-h="button" aria-haspopup="listbox"><!> <!></button> <!>`, 1);
|
|
3857
3983
|
function Select($$anchor, $$props) {
|
|
@@ -3869,29 +3995,17 @@ function Select($$anchor, $$props) {
|
|
|
3869
3995
|
width: 0,
|
|
3870
3996
|
maxHeight: 0
|
|
3871
3997
|
}));
|
|
3872
|
-
const GAP = 4;
|
|
3873
|
-
const EDGE = 8;
|
|
3874
|
-
const MIN_HEIGHT = 120;
|
|
3875
3998
|
const canPopover = typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
|
|
3876
3999
|
function place() {
|
|
3877
4000
|
if (!$.get(triggerEl) || !$.get(listEl)) return;
|
|
3878
4001
|
const r = $.get(triggerEl).getBoundingClientRect();
|
|
3879
|
-
const
|
|
3880
|
-
$.get(listEl).style.maxHeight = "";
|
|
3881
|
-
const natural = $.get(listEl).scrollHeight;
|
|
3882
|
-
$.get(listEl).style.maxHeight = keep;
|
|
3883
|
-
const below = window.innerHeight - r.bottom - GAP - EDGE;
|
|
3884
|
-
const above = r.top - GAP - EDGE;
|
|
3885
|
-
const up = below < Math.min(natural, MIN_HEIGHT) && above > below;
|
|
3886
|
-
const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
|
|
3887
|
-
const shown = Math.min(natural, maxHeight);
|
|
3888
|
-
const width = $.get(listEl).offsetWidth;
|
|
3889
|
-
const left = Math.max(EDGE, Math.min(r.left, window.innerWidth - Math.max(width, r.width) - EDGE));
|
|
4002
|
+
const width = Math.max($.get(listEl).offsetWidth, r.width);
|
|
3890
4003
|
$.set(pos, {
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
4004
|
+
...placeBelow($.get(listEl), r, {
|
|
4005
|
+
align: "start",
|
|
4006
|
+
width
|
|
4007
|
+
}),
|
|
4008
|
+
width: Math.round(r.width)
|
|
3895
4009
|
}, true);
|
|
3896
4010
|
}
|
|
3897
4011
|
function items() {
|
|
@@ -3917,7 +4031,7 @@ function Select($$anchor, $$props) {
|
|
|
3917
4031
|
close(true);
|
|
3918
4032
|
}
|
|
3919
4033
|
$.user_effect(() => {
|
|
3920
|
-
if (!$.get(open) || !$.get(listEl)) return;
|
|
4034
|
+
if (!$.get(open) || !$.get(listEl) || !$.get(triggerEl)) return;
|
|
3921
4035
|
const el = $.get(listEl);
|
|
3922
4036
|
if (canPopover && !el.matches(":popover-open")) el.showPopover();
|
|
3923
4037
|
(async () => {
|
|
@@ -3928,6 +4042,7 @@ function Select($$anchor, $$props) {
|
|
|
3928
4042
|
const i = $$props.options.findIndex((o) => o.value === value());
|
|
3929
4043
|
focusAt(Math.max(0, i));
|
|
3930
4044
|
})();
|
|
4045
|
+
return follow($.get(triggerEl), el, place);
|
|
3931
4046
|
});
|
|
3932
4047
|
function onTriggerKey(e) {
|
|
3933
4048
|
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
@@ -3964,8 +4079,6 @@ function Select($$anchor, $$props) {
|
|
|
3964
4079
|
}
|
|
3965
4080
|
var fragment = root_6$4();
|
|
3966
4081
|
$.event("pointerdown", $.window, onPointerDown, true);
|
|
3967
|
-
$.event("resize", $.window, () => $.get(open) && place());
|
|
3968
|
-
$.event("scroll", $.window, () => $.get(open) && place());
|
|
3969
4082
|
var button = $.first_child(fragment);
|
|
3970
4083
|
let classes;
|
|
3971
4084
|
var node = $.child(button);
|
|
@@ -3994,7 +4107,7 @@ function Select($$anchor, $$props) {
|
|
|
3994
4107
|
let classes_1;
|
|
3995
4108
|
let styles;
|
|
3996
4109
|
$.each(div, 21, () => $$props.options, (opt) => opt.value, ($$anchor, opt) => {
|
|
3997
|
-
var button_1 = root_4$
|
|
4110
|
+
var button_1 = root_4$8();
|
|
3998
4111
|
let classes_2;
|
|
3999
4112
|
var span_2 = $.child(button_1);
|
|
4000
4113
|
var node_3 = $.child(span_2);
|
|
@@ -4080,7 +4193,7 @@ var root$49 = $.from_html(`<!> <!>`, 1);
|
|
|
4080
4193
|
var root_1$30 = $.from_html(`<div class="hue svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!>`, 1);
|
|
4081
4194
|
var root_2$19 = $.from_html(`<!> <!> <!>`, 1);
|
|
4082
4195
|
var root_3$11 = $.from_html(`<!> <div class="fmt svelte-1kcz9da"><!></div>`, 1);
|
|
4083
|
-
var root_4$
|
|
4196
|
+
var root_4$7 = $.from_html(`<!> <!> <div class="sv svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!> <!>`, 1);
|
|
4084
4197
|
var root_5$4 = $.from_html(`<div data-inset=""><!></div>`);
|
|
4085
4198
|
function ColorPicker($$anchor, $$props) {
|
|
4086
4199
|
$.push($$props, true);
|
|
@@ -4088,7 +4201,7 @@ function ColorPicker($$anchor, $$props) {
|
|
|
4088
4201
|
Stack($$anchor, {
|
|
4089
4202
|
gap: "sm",
|
|
4090
4203
|
children: ($$anchor, $$slotProps) => {
|
|
4091
|
-
var fragment_1 = root_4$
|
|
4204
|
+
var fragment_1 = root_4$7();
|
|
4092
4205
|
var node = $.first_child(fragment_1);
|
|
4093
4206
|
Row(node, {
|
|
4094
4207
|
between: true,
|
|
@@ -4696,6 +4809,7 @@ var rest_excludes$7 = /* @__PURE__ */ new Set([
|
|
|
4696
4809
|
"sel",
|
|
4697
4810
|
"rule",
|
|
4698
4811
|
"plain",
|
|
4812
|
+
"disabled",
|
|
4699
4813
|
"href",
|
|
4700
4814
|
"onclick",
|
|
4701
4815
|
"onkeydown",
|
|
@@ -4705,18 +4819,20 @@ var root$46 = $.from_html(`<a><!></a>`);
|
|
|
4705
4819
|
var root_1$29 = $.from_html(`<div><!></div>`);
|
|
4706
4820
|
function ListItem($$anchor, $$props) {
|
|
4707
4821
|
$.push($$props, true);
|
|
4708
|
-
let tail = $.prop($$props, "tail", 3, false), sel = $.prop($$props, "sel", 3, false), rule = $.prop($$props, "rule", 3, false), plain = $.prop($$props, "plain", 3, false), rest = $.rest_props($$props, rest_excludes$7);
|
|
4822
|
+
let tail = $.prop($$props, "tail", 3, false), sel = $.prop($$props, "sel", 3, false), rule = $.prop($$props, "rule", 3, false), plain = $.prop($$props, "plain", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$7);
|
|
4709
4823
|
/** The columns of the item's grid (grid-template-columns) */
|
|
4710
4824
|
/** The item ends with an icon button: pad-sm at the right */
|
|
4711
4825
|
/** Selected: the raise surface and a blue line of two at the left */
|
|
4712
4826
|
/** A line under the item (not under the last one) */
|
|
4713
4827
|
/** An item that is not pressed: no hover surface */
|
|
4828
|
+
/** A pressable item (onclick) that cannot be pressed now: dimmed and out of the tab order */
|
|
4714
4829
|
/** Renders a link */
|
|
4715
4830
|
/** Makes the item pressable (Enter and Space press it too) */
|
|
4716
4831
|
const clickable = $.derived(() => !plain() && !!($$props.onclick || $$props.href));
|
|
4832
|
+
const off = $.derived(() => disabled() && !plain() && !$$props.href && !!$$props.onclick);
|
|
4717
4833
|
function onKeyDown(e) {
|
|
4718
4834
|
$$props.onkeydown?.(e);
|
|
4719
|
-
if (e.defaultPrevented) return;
|
|
4835
|
+
if (e.defaultPrevented || $.get(off)) return;
|
|
4720
4836
|
if (e.key !== "Enter" && e.key !== " ") return;
|
|
4721
4837
|
if (e.target.closest("input, textarea, select, [contenteditable]")) return;
|
|
4722
4838
|
e.preventDefault();
|
|
@@ -4757,16 +4873,18 @@ function ListItem($$anchor, $$props) {
|
|
|
4757
4873
|
"data-rule": rule() ? "" : void 0,
|
|
4758
4874
|
...$.get(clickable) ? {
|
|
4759
4875
|
role: "button",
|
|
4760
|
-
tabindex: 0
|
|
4876
|
+
tabindex: $.get(off) ? void 0 : 0
|
|
4761
4877
|
} : {},
|
|
4762
|
-
|
|
4878
|
+
"aria-disabled": $.get(off) ? "true" : void 0,
|
|
4879
|
+
onclick: $.get(off) ? void 0 : $$props.onclick,
|
|
4763
4880
|
onkeydown: $.get(clickable) ? onKeyDown : $$props.onkeydown,
|
|
4764
4881
|
...rest,
|
|
4765
4882
|
[$.CLASS]: {
|
|
4766
4883
|
sel: sel(),
|
|
4767
4884
|
rule: rule(),
|
|
4768
4885
|
plain: plain(),
|
|
4769
|
-
tail: tail()
|
|
4886
|
+
tail: tail(),
|
|
4887
|
+
disabled: $.get(off)
|
|
4770
4888
|
},
|
|
4771
4889
|
[$.STYLE]: { "grid-template-columns": $$props.columns }
|
|
4772
4890
|
}), void 0, void 0, void 0, "svelte-rzjg5m");
|
|
@@ -5000,7 +5118,7 @@ var root$42 = $.from_html(`<div class="sub svelte-1nboboq"><!></div>`);
|
|
|
5000
5118
|
var root_1$24 = $.from_html(`<!> <!>`, 1);
|
|
5001
5119
|
var root_2$15 = $.from_html(`<!> <!> <div><!></div> <!>`, 1);
|
|
5002
5120
|
var root_3$9 = $.from_html(`<div data-role="modal" data-inline=""><!></div>`);
|
|
5003
|
-
var root_4$
|
|
5121
|
+
var root_4$6 = $.from_html(`<dialog data-role="modal" aria-modal="true"><!></dialog>`);
|
|
5004
5122
|
function Modal($$anchor, $$props) {
|
|
5005
5123
|
const titleId = $.props_id();
|
|
5006
5124
|
$.push($$props, true);
|
|
@@ -5270,7 +5388,7 @@ function Modal($$anchor, $$props) {
|
|
|
5270
5388
|
$.append($$anchor, div_2);
|
|
5271
5389
|
};
|
|
5272
5390
|
var alternate_2 = ($$anchor) => {
|
|
5273
|
-
var dialog_1 = root_4$
|
|
5391
|
+
var dialog_1 = root_4$6();
|
|
5274
5392
|
let classes_2;
|
|
5275
5393
|
var node_13 = $.child(dialog_1);
|
|
5276
5394
|
surface(node_13);
|
|
@@ -5831,7 +5949,7 @@ function InspectorRow($$anchor, $$props) {
|
|
|
5831
5949
|
}
|
|
5832
5950
|
//#endregion
|
|
5833
5951
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/NativeSelect.svelte
|
|
5834
|
-
var root$38 = $.from_html(`<option disabled="" data-kata-placeholder="" class="svelte-1iprfoy"> </option>`);
|
|
5952
|
+
var root$38 = $.from_html(`<option disabled="" selected="" data-kata-placeholder="" class="svelte-1iprfoy"> </option>`);
|
|
5835
5953
|
var root_1$21 = $.from_html(`<option class="svelte-1iprfoy"> </option>`);
|
|
5836
5954
|
var root_2$13 = $.from_html(`<optgroup></optgroup>`);
|
|
5837
5955
|
var root_3$7 = $.from_html(`<label data-role="box" data-h="button"><span aria-hidden="true"> </span> <select class="svelte-1iprfoy"><!><!><!></select> <!></label>`);
|
|
@@ -6687,7 +6805,7 @@ $.delegate([
|
|
|
6687
6805
|
var root_1$16 = $.from_html(`<a><span class="t svelte-dvdfj"> </span></a>`);
|
|
6688
6806
|
var root_2$10 = $.from_html(`<button type="button"><span class="t svelte-dvdfj"> </span></button>`);
|
|
6689
6807
|
var root_3$6 = $.from_html(`<button type="button" aria-haspopup="menu"><span class="t svelte-dvdfj"> </span><!></button>`);
|
|
6690
|
-
var root_4$
|
|
6808
|
+
var root_4$5 = $.from_html(`<span class="tab svelte-dvdfj"><span class="t svelte-dvdfj"> </span></span>`);
|
|
6691
6809
|
var root_5$3 = $.from_html(`<span class="tab more cur svelte-dvdfj"><span class="t svelte-dvdfj"> </span><!></span>`);
|
|
6692
6810
|
var root_6$3 = $.from_html(`<nav data-role="tabs"><!> <!> <span class="measure svelte-dvdfj" aria-hidden="true" data-kata-skip=""><!> <span class="tab more svelte-dvdfj"><span class="t svelte-dvdfj"> </span><!></span> <!></span></nav>`);
|
|
6693
6811
|
function Tabs($$anchor, $$props) {
|
|
@@ -6870,7 +6988,7 @@ function Tabs($$anchor, $$props) {
|
|
|
6870
6988
|
var span_3 = $.sibling(node_2, 2);
|
|
6871
6989
|
var node_5 = $.child(span_3);
|
|
6872
6990
|
$.each(node_5, 17, () => $$props.tabs, (t) => t.id, ($$anchor, t) => {
|
|
6873
|
-
var span_4 = root_4$
|
|
6991
|
+
var span_4 = root_4$5();
|
|
6874
6992
|
var span_5 = $.child(span_4);
|
|
6875
6993
|
var text_4 = $.only_child(span_5, true);
|
|
6876
6994
|
$.reset(span_4);
|
|
@@ -9413,7 +9531,7 @@ var root$23 = $.from_html(`<span data-grip="" aria-hidden="true"><!></span>`);
|
|
|
9413
9531
|
var root_1$12 = $.from_html(`<button class="chev svelte-19ffqlj" type="button" data-h="icon-button"><!></button>`);
|
|
9414
9532
|
var root_2$8 = $.from_html(`<span class="seat svelte-19ffqlj" aria-hidden="true"></span>`);
|
|
9415
9533
|
var root_3$5 = $.from_html(`<span class="keep-seat svelte-19ffqlj" aria-hidden="true"></span>`);
|
|
9416
|
-
var root_4$
|
|
9534
|
+
var root_4$4 = $.from_html(`<!> <span><!></span>`, 1);
|
|
9417
9535
|
var root_5$2 = $.from_html(`<!> <!> <span class="main svelte-19ffqlj"><!></span> <!>`, 1);
|
|
9418
9536
|
var root_6$2 = $.from_html(`<div><!></div>`);
|
|
9419
9537
|
function TreeRow($$anchor, $$props) {
|
|
@@ -9591,7 +9709,7 @@ function TreeRow($$anchor, $$props) {
|
|
|
9591
9709
|
$.reset(span_2);
|
|
9592
9710
|
var node_6 = $.sibling(span_2, 2);
|
|
9593
9711
|
var consequent_4 = ($$anchor) => {
|
|
9594
|
-
var fragment_1 = root_4$
|
|
9712
|
+
var fragment_1 = root_4$4();
|
|
9595
9713
|
var node_7 = $.first_child(fragment_1);
|
|
9596
9714
|
var consequent_3 = ($$anchor) => {
|
|
9597
9715
|
var span_3 = root_3$5();
|
|
@@ -9669,7 +9787,7 @@ var trees = 0;
|
|
|
9669
9787
|
var root_1$11 = $.from_html(`<span class="rename svelte-1go7yvy"><!></span>`);
|
|
9670
9788
|
var root_2$7 = $.from_html(`<!> <!>`, 1);
|
|
9671
9789
|
var root_3$4 = $.from_html(`<!> <!> <!> <!>`, 1);
|
|
9672
|
-
var root_4$
|
|
9790
|
+
var root_4$3 = $.from_html(`<div data-subrows=""><!></div>`);
|
|
9673
9791
|
var root_5$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="group"></div>`);
|
|
9674
9792
|
var root_6$1 = $.from_html(`<div class="item svelte-1go7yvy" role="none" data-sortable-item=""><!> <!> <!></div>`);
|
|
9675
9793
|
var root_7$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="none"></div>`);
|
|
@@ -9888,12 +10006,16 @@ function LayerTree($$anchor, $$props) {
|
|
|
9888
10006
|
});
|
|
9889
10007
|
var node_16 = $.sibling(node_15, 2);
|
|
9890
10008
|
var consequent_9 = ($$anchor) => {
|
|
9891
|
-
var div_1 = root_4$
|
|
10009
|
+
var div_1 = root_4$3();
|
|
10010
|
+
let classes;
|
|
9892
10011
|
let styles;
|
|
9893
10012
|
var node_17 = $.child(div_1);
|
|
9894
10013
|
$.snippet(node_17, () => $$props.subrows, node);
|
|
9895
10014
|
$.reset(div_1);
|
|
9896
|
-
$.template_effect(() =>
|
|
10015
|
+
$.template_effect(() => {
|
|
10016
|
+
classes = $.set_class(div_1, 1, "subrows svelte-1go7yvy", null, classes, { marked: !!node().icon && !$$props.row });
|
|
10017
|
+
styles = $.set_style(div_1, "", styles, { "--kata-tree-depth": depth() });
|
|
10018
|
+
});
|
|
9897
10019
|
$.append($$anchor, div_1);
|
|
9898
10020
|
};
|
|
9899
10021
|
$.if(node_16, ($$render) => {
|
|
@@ -10539,10 +10661,10 @@ var root$19 = $.from_html(`<span class="status svelte-mk24w4"> </span>`);
|
|
|
10539
10661
|
var root_1$9 = $.from_html(`<p class="note svelte-mk24w4" data-role="caption"> </p>`);
|
|
10540
10662
|
var root_2$6 = $.from_html(`<div class="head svelte-mk24w4" data-role="row-inline"><h2 class="title svelte-mk24w4"> </h2> <!></div> <!>`, 1);
|
|
10541
10663
|
var root_3$3 = $.from_html(`<!> <div class="body svelte-mk24w4" data-pass=""><!></div>`, 1);
|
|
10542
|
-
var root_4$
|
|
10664
|
+
var root_4$2 = $.from_html(`<section data-role="section"><!></section>`);
|
|
10543
10665
|
function Section($$anchor, $$props) {
|
|
10544
10666
|
let gap = $.prop($$props, "gap", 3, "lg"), flush = $.prop($$props, "flush", 3, false);
|
|
10545
|
-
var section = root_4$
|
|
10667
|
+
var section = root_4$2();
|
|
10546
10668
|
let classes;
|
|
10547
10669
|
Stack($.child(section), {
|
|
10548
10670
|
gap: "lg",
|
|
@@ -10633,7 +10755,7 @@ function Stat($$anchor, $$props) {
|
|
|
10633
10755
|
}
|
|
10634
10756
|
//#endregion
|
|
10635
10757
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stats.svelte
|
|
10636
|
-
var root$17 = $.from_html(`<div class="stats svelte-k8jq30" data-role="stat"><!></div>`);
|
|
10758
|
+
var root$17 = $.from_html(`<div class="stats svelte-k8jq30" data-role="stat" data-edge-pass=""><!></div>`);
|
|
10637
10759
|
function Stats($$anchor, $$props) {
|
|
10638
10760
|
var div = root$17();
|
|
10639
10761
|
var node = $.child(div);
|
|
@@ -11087,7 +11209,7 @@ function Veil($$anchor, $$props) {
|
|
|
11087
11209
|
var root_1$7 = $.from_html(`<div class="top svelte-8jke9d" data-region="top"><!></div>`);
|
|
11088
11210
|
var root_2$5 = $.from_html(`<div class="side left svelte-8jke9d" data-region="left"><!></div>`);
|
|
11089
11211
|
var root_3$2 = $.from_html(`<div class="surface svelte-8jke9d"><!></div>`);
|
|
11090
|
-
var root_4 = $.from_html(`<div class="bottom svelte-8jke9d" data-region="bottom"><!></div>`);
|
|
11212
|
+
var root_4$1 = $.from_html(`<div class="bottom svelte-8jke9d" data-region="bottom"><!></div>`);
|
|
11091
11213
|
var root_5 = $.from_html(`<div class="fab-column svelte-8jke9d" data-region="bottom"><!></div>`);
|
|
11092
11214
|
var root_6 = $.from_html(`<!> <div class="fab-seat svelte-8jke9d"><!></div>`, 1);
|
|
11093
11215
|
var root_7 = $.from_html(`<div class="top-float svelte-8jke9d" data-region="top"><!></div>`);
|
|
@@ -11172,7 +11294,7 @@ function Shell($$anchor, $$props) {
|
|
|
11172
11294
|
const sheetOf = (side) => side === "left" ? $$props.leftSheet : $$props.rightSheet;
|
|
11173
11295
|
const stagesOf = (side) => sheetOf(side)?.stages ?? ALL_STAGES;
|
|
11174
11296
|
const closableOf = (side) => sheetOf(side)?.closable ?? true;
|
|
11175
|
-
const sheets = $.derived(() => $.get(mode) === "sheet" ? [...["left", "right"].filter((side) => !closableOf(side) && !!region(side) && !shown(side)), ...$.get(order)] : []);
|
|
11297
|
+
const sheets = $.derived(() => $.get(mode) === "sheet" ? [...["left", "right"].filter((side) => !closableOf(side) && !!region(side) && !shown(side) && !$.get(dockSheeted)), ...$.get(order)] : []);
|
|
11176
11298
|
/** The height a sheet shows: its stage while open, its lowest height while it rests */
|
|
11177
11299
|
function sheetStage(side) {
|
|
11178
11300
|
if (!shown(side)) return stagesOf(side)[0];
|
|
@@ -11418,7 +11540,7 @@ function Shell($$anchor, $$props) {
|
|
|
11418
11540
|
});
|
|
11419
11541
|
var node_7 = $.sibling(node_5, 2);
|
|
11420
11542
|
var consequent_3 = ($$anchor) => {
|
|
11421
|
-
var div_7 = root_4();
|
|
11543
|
+
var div_7 = root_4$1();
|
|
11422
11544
|
var node_8 = $.child(div_7);
|
|
11423
11545
|
$.snippet(node_8, () => $$props.bottom, () => ({ column: false }));
|
|
11424
11546
|
$.reset(div_7);
|
|
@@ -12286,9 +12408,10 @@ function toolbarShortcuts(draw, specs, messages, deletable) {
|
|
|
12286
12408
|
}
|
|
12287
12409
|
//#endregion
|
|
12288
12410
|
//#region src/components/Actions.svelte
|
|
12289
|
-
var root_1$6 = $.from_html(
|
|
12290
|
-
var root_2$4 = $.from_html(`<
|
|
12291
|
-
var root_3$1 = $.from_html(`<div
|
|
12411
|
+
var root_1$6 = $.from_html(`<!> <!>`, 1);
|
|
12412
|
+
var root_2$4 = $.from_html(`<span> </span>`);
|
|
12413
|
+
var root_3$1 = $.from_html(`<div class="card svelte-9feu2r"><!></div>`);
|
|
12414
|
+
var root_4 = $.from_html(`<div data-role="actions"><!></div>`);
|
|
12292
12415
|
function Actions($$anchor, $$props) {
|
|
12293
12416
|
$.push($$props, true);
|
|
12294
12417
|
const head = ($$anchor) => {
|
|
@@ -12308,7 +12431,30 @@ function Actions($$anchor, $$props) {
|
|
|
12308
12431
|
$$slots: { default: true }
|
|
12309
12432
|
});
|
|
12310
12433
|
};
|
|
12434
|
+
const toggle = ($$anchor, spec = $.noop) => {
|
|
12435
|
+
var bind_get = () => read(spec(), "checked");
|
|
12436
|
+
var bind_set = () => runAction($$props.actions, spec());
|
|
12437
|
+
{
|
|
12438
|
+
let $0 = $.derived(() => read(spec(), "disabled"));
|
|
12439
|
+
Toggle($$anchor, {
|
|
12440
|
+
between: true,
|
|
12441
|
+
get label() {
|
|
12442
|
+
return spec().label;
|
|
12443
|
+
},
|
|
12444
|
+
get disabled() {
|
|
12445
|
+
return $.get($0);
|
|
12446
|
+
},
|
|
12447
|
+
get checked() {
|
|
12448
|
+
return bind_get();
|
|
12449
|
+
},
|
|
12450
|
+
set checked($$value) {
|
|
12451
|
+
bind_set($$value);
|
|
12452
|
+
}
|
|
12453
|
+
});
|
|
12454
|
+
}
|
|
12455
|
+
};
|
|
12311
12456
|
let keys = $.prop($$props, "keys", 3, true), narrow = $.prop($$props, "narrow", 3, false), startOpen = $.prop($$props, "startOpen", 3, true), beside = $.prop($$props, "beside", 3, false), reopen = $.prop($$props, "reopen", 3, false);
|
|
12457
|
+
const COLUMNS = "minmax(0, 1fr) auto";
|
|
12312
12458
|
const RESERVE = "--mgd-ui-actions-reserve";
|
|
12313
12459
|
const list = $.derived(() => $$props.actions.list.get());
|
|
12314
12460
|
const version = $.derived(() => $$props.actions.version.get());
|
|
@@ -12433,7 +12579,7 @@ function Actions($$anchor, $$props) {
|
|
|
12433
12579
|
root.style.removeProperty(RESERVE);
|
|
12434
12580
|
};
|
|
12435
12581
|
});
|
|
12436
|
-
var div =
|
|
12582
|
+
var div = root_4();
|
|
12437
12583
|
$.event("resize", $.window, place);
|
|
12438
12584
|
var node = $.child(div);
|
|
12439
12585
|
{
|
|
@@ -12447,10 +12593,10 @@ function Actions($$anchor, $$props) {
|
|
|
12447
12593
|
return $.get($1);
|
|
12448
12594
|
},
|
|
12449
12595
|
children: ($$anchor, $$slotProps) => {
|
|
12450
|
-
var
|
|
12451
|
-
var node_1 = $.first_child(
|
|
12452
|
-
var
|
|
12453
|
-
var div_1 =
|
|
12596
|
+
var fragment_3 = $.comment();
|
|
12597
|
+
var node_1 = $.first_child(fragment_3);
|
|
12598
|
+
var consequent_5 = ($$anchor) => {
|
|
12599
|
+
var div_1 = root_3$1();
|
|
12454
12600
|
let styles;
|
|
12455
12601
|
SectionHeader($.child(div_1), {
|
|
12456
12602
|
get label() {
|
|
@@ -12459,100 +12605,168 @@ function Actions($$anchor, $$props) {
|
|
|
12459
12605
|
get actions() {
|
|
12460
12606
|
return head;
|
|
12461
12607
|
},
|
|
12608
|
+
flush: true,
|
|
12462
12609
|
children: ($$anchor, $$slotProps) => {
|
|
12463
|
-
|
|
12464
|
-
|
|
12465
|
-
|
|
12466
|
-
|
|
12467
|
-
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
|
|
12477
|
-
|
|
12478
|
-
|
|
12479
|
-
|
|
12480
|
-
|
|
12481
|
-
|
|
12482
|
-
|
|
12483
|
-
|
|
12484
|
-
|
|
12485
|
-
|
|
12486
|
-
|
|
12487
|
-
|
|
12488
|
-
|
|
12610
|
+
List($$anchor, {
|
|
12611
|
+
children: ($$anchor, $$slotProps) => {
|
|
12612
|
+
var fragment_5 = $.comment();
|
|
12613
|
+
var node_3 = $.first_child(fragment_5);
|
|
12614
|
+
$.each(node_3, 17, () => $.get(list), (spec) => spec.id, ($$anchor, spec) => {
|
|
12615
|
+
const key = $.derived(() => kbd($.get(spec)));
|
|
12616
|
+
var fragment_6 = $.comment();
|
|
12617
|
+
var node_4 = $.first_child(fragment_6);
|
|
12618
|
+
var consequent_2 = ($$anchor) => {
|
|
12619
|
+
ListItem($$anchor, {
|
|
12620
|
+
columns: COLUMNS,
|
|
12621
|
+
plain: true,
|
|
12622
|
+
get "data-action"() {
|
|
12623
|
+
return $.get(spec).id;
|
|
12624
|
+
},
|
|
12625
|
+
children: ($$anchor, $$slotProps) => {
|
|
12626
|
+
var fragment_8 = root_1$6();
|
|
12627
|
+
var node_5 = $.first_child(fragment_8);
|
|
12628
|
+
var consequent = ($$anchor) => {
|
|
12629
|
+
Stack($$anchor, {
|
|
12630
|
+
gap: "sm",
|
|
12631
|
+
children: ($$anchor, $$slotProps) => {
|
|
12632
|
+
var fragment_10 = root_1$6();
|
|
12633
|
+
var node_6 = $.first_child(fragment_10);
|
|
12634
|
+
toggle(node_6, () => $.get(spec));
|
|
12635
|
+
Text($.sibling(node_6, 2), {
|
|
12636
|
+
role: "caption",
|
|
12637
|
+
muted: true,
|
|
12638
|
+
clamp: true,
|
|
12639
|
+
children: ($$anchor, $$slotProps) => {
|
|
12640
|
+
$.next();
|
|
12641
|
+
var text = $.text();
|
|
12642
|
+
$.template_effect(() => $.set_text(text, $.get(spec).hint));
|
|
12643
|
+
$.append($$anchor, text);
|
|
12644
|
+
},
|
|
12645
|
+
$$slots: { default: true }
|
|
12646
|
+
});
|
|
12647
|
+
$.append($$anchor, fragment_10);
|
|
12648
|
+
},
|
|
12649
|
+
$$slots: { default: true }
|
|
12650
|
+
});
|
|
12651
|
+
};
|
|
12652
|
+
var alternate = ($$anchor) => {
|
|
12653
|
+
toggle($$anchor, () => $.get(spec));
|
|
12654
|
+
};
|
|
12655
|
+
$.if(node_5, ($$render) => {
|
|
12656
|
+
if ($.get(spec).hint) $$render(consequent);
|
|
12657
|
+
else $$render(alternate, -1);
|
|
12658
|
+
});
|
|
12659
|
+
var node_8 = $.sibling(node_5, 2);
|
|
12660
|
+
var consequent_1 = ($$anchor) => {
|
|
12661
|
+
Kbd($$anchor, {
|
|
12662
|
+
bare: true,
|
|
12663
|
+
children: ($$anchor, $$slotProps) => {
|
|
12664
|
+
$.next();
|
|
12665
|
+
var text_1 = $.text();
|
|
12666
|
+
$.template_effect(() => $.set_text(text_1, $.get(key)));
|
|
12667
|
+
$.append($$anchor, text_1);
|
|
12668
|
+
},
|
|
12669
|
+
$$slots: { default: true }
|
|
12670
|
+
});
|
|
12671
|
+
};
|
|
12672
|
+
$.if(node_8, ($$render) => {
|
|
12673
|
+
if ($.get(key)) $$render(consequent_1);
|
|
12674
|
+
});
|
|
12675
|
+
$.append($$anchor, fragment_8);
|
|
12676
|
+
},
|
|
12677
|
+
$$slots: { default: true }
|
|
12678
|
+
});
|
|
12679
|
+
};
|
|
12680
|
+
var alternate_2 = ($$anchor) => {
|
|
12681
|
+
{
|
|
12682
|
+
let $0 = $.derived(() => read($.get(spec), "disabled"));
|
|
12683
|
+
ListItem($$anchor, {
|
|
12684
|
+
columns: COLUMNS,
|
|
12685
|
+
get disabled() {
|
|
12686
|
+
return $.get($0);
|
|
12687
|
+
},
|
|
12688
|
+
onclick: () => runAction($$props.actions, $.get(spec)),
|
|
12689
|
+
get "data-action"() {
|
|
12690
|
+
return $.get(spec).id;
|
|
12691
|
+
},
|
|
12692
|
+
children: ($$anchor, $$slotProps) => {
|
|
12693
|
+
var fragment_16 = root_1$6();
|
|
12694
|
+
var node_9 = $.first_child(fragment_16);
|
|
12695
|
+
var consequent_3 = ($$anchor) => {
|
|
12696
|
+
Stack($$anchor, {
|
|
12697
|
+
gap: "sm",
|
|
12698
|
+
children: ($$anchor, $$slotProps) => {
|
|
12699
|
+
var fragment_18 = root_1$6();
|
|
12700
|
+
var node_10 = $.first_child(fragment_18);
|
|
12701
|
+
Text(node_10, {
|
|
12702
|
+
clamp: true,
|
|
12703
|
+
children: ($$anchor, $$slotProps) => {
|
|
12704
|
+
$.next();
|
|
12705
|
+
var text_2 = $.text();
|
|
12706
|
+
$.template_effect(() => $.set_text(text_2, $.get(spec).label));
|
|
12707
|
+
$.append($$anchor, text_2);
|
|
12708
|
+
},
|
|
12709
|
+
$$slots: { default: true }
|
|
12710
|
+
});
|
|
12711
|
+
Text($.sibling(node_10, 2), {
|
|
12712
|
+
role: "caption",
|
|
12713
|
+
muted: true,
|
|
12714
|
+
clamp: true,
|
|
12715
|
+
children: ($$anchor, $$slotProps) => {
|
|
12716
|
+
$.next();
|
|
12717
|
+
var text_3 = $.text();
|
|
12718
|
+
$.template_effect(() => $.set_text(text_3, $.get(spec).hint));
|
|
12719
|
+
$.append($$anchor, text_3);
|
|
12720
|
+
},
|
|
12721
|
+
$$slots: { default: true }
|
|
12722
|
+
});
|
|
12723
|
+
$.append($$anchor, fragment_18);
|
|
12724
|
+
},
|
|
12725
|
+
$$slots: { default: true }
|
|
12726
|
+
});
|
|
12727
|
+
};
|
|
12728
|
+
var alternate_1 = ($$anchor) => {
|
|
12729
|
+
var span = root_2$4();
|
|
12730
|
+
var text_4 = $.only_child(span, true);
|
|
12731
|
+
$.template_effect(() => $.set_text(text_4, $.get(spec).label));
|
|
12732
|
+
$.append($$anchor, span);
|
|
12733
|
+
};
|
|
12734
|
+
$.if(node_9, ($$render) => {
|
|
12735
|
+
if ($.get(spec).hint) $$render(consequent_3);
|
|
12736
|
+
else $$render(alternate_1, -1);
|
|
12737
|
+
});
|
|
12738
|
+
var node_12 = $.sibling(node_9, 2);
|
|
12739
|
+
var consequent_4 = ($$anchor) => {
|
|
12740
|
+
Kbd($$anchor, {
|
|
12741
|
+
bare: true,
|
|
12742
|
+
children: ($$anchor, $$slotProps) => {
|
|
12743
|
+
$.next();
|
|
12744
|
+
var text_5 = $.text();
|
|
12745
|
+
$.template_effect(() => $.set_text(text_5, $.get(key)));
|
|
12746
|
+
$.append($$anchor, text_5);
|
|
12747
|
+
},
|
|
12748
|
+
$$slots: { default: true }
|
|
12749
|
+
});
|
|
12750
|
+
};
|
|
12751
|
+
$.if(node_12, ($$render) => {
|
|
12752
|
+
if ($.get(key)) $$render(consequent_4);
|
|
12753
|
+
});
|
|
12754
|
+
$.append($$anchor, fragment_16);
|
|
12755
|
+
},
|
|
12756
|
+
$$slots: { default: true }
|
|
12757
|
+
});
|
|
12489
12758
|
}
|
|
12759
|
+
};
|
|
12760
|
+
$.if(node_4, ($$render) => {
|
|
12761
|
+
if ($.get(spec).kind === "toggle") $$render(consequent_2);
|
|
12762
|
+
else $$render(alternate_2, -1);
|
|
12490
12763
|
});
|
|
12491
|
-
|
|
12492
|
-
};
|
|
12493
|
-
var alternate = ($$anchor) => {
|
|
12494
|
-
{
|
|
12495
|
-
let $0 = $.derived(() => read($.get(spec), "disabled"));
|
|
12496
|
-
Button($$anchor, {
|
|
12497
|
-
block: true,
|
|
12498
|
-
get disabled() {
|
|
12499
|
-
return $.get($0);
|
|
12500
|
-
},
|
|
12501
|
-
onclick: () => runAction($$props.actions, $.get(spec)),
|
|
12502
|
-
children: ($$anchor, $$slotProps) => {
|
|
12503
|
-
$.next();
|
|
12504
|
-
var text = $.text();
|
|
12505
|
-
$.template_effect(() => $.set_text(text, $.get(spec).label));
|
|
12506
|
-
$.append($$anchor, text);
|
|
12507
|
-
},
|
|
12508
|
-
$$slots: { default: true }
|
|
12509
|
-
});
|
|
12510
|
-
}
|
|
12511
|
-
};
|
|
12512
|
-
$.if(node_4, ($$render) => {
|
|
12513
|
-
if ($.get(spec).kind === "toggle") $$render(consequent);
|
|
12514
|
-
else $$render(alternate, -1);
|
|
12515
|
-
});
|
|
12516
|
-
$.reset(div_4);
|
|
12517
|
-
var node_5 = $.sibling(div_4, 2);
|
|
12518
|
-
var consequent_1 = ($$anchor) => {
|
|
12519
|
-
Kbd($$anchor, {
|
|
12520
|
-
bare: true,
|
|
12521
|
-
children: ($$anchor, $$slotProps) => {
|
|
12522
|
-
$.next();
|
|
12523
|
-
var text_1 = $.text();
|
|
12524
|
-
$.template_effect(() => $.set_text(text_1, $.get(key)));
|
|
12525
|
-
$.append($$anchor, text_1);
|
|
12526
|
-
},
|
|
12527
|
-
$$slots: { default: true }
|
|
12528
|
-
});
|
|
12529
|
-
};
|
|
12530
|
-
$.if(node_5, ($$render) => {
|
|
12531
|
-
if ($.get(key)) $$render(consequent_1);
|
|
12532
|
-
});
|
|
12533
|
-
$.reset(div_3);
|
|
12534
|
-
var node_6 = $.sibling(div_3, 2);
|
|
12535
|
-
var consequent_2 = ($$anchor) => {
|
|
12536
|
-
Text($$anchor, {
|
|
12537
|
-
role: "caption",
|
|
12538
|
-
muted: true,
|
|
12539
|
-
children: ($$anchor, $$slotProps) => {
|
|
12540
|
-
$.next();
|
|
12541
|
-
var text_2 = $.text();
|
|
12542
|
-
$.template_effect(() => $.set_text(text_2, $.get(spec).hint));
|
|
12543
|
-
$.append($$anchor, text_2);
|
|
12544
|
-
},
|
|
12545
|
-
$$slots: { default: true }
|
|
12764
|
+
$.append($$anchor, fragment_6);
|
|
12546
12765
|
});
|
|
12547
|
-
|
|
12548
|
-
|
|
12549
|
-
|
|
12550
|
-
});
|
|
12551
|
-
$.reset(div_2);
|
|
12552
|
-
$.template_effect(() => $.set_attribute(div_2, "data-action", $.get(spec).id));
|
|
12553
|
-
$.append($$anchor, div_2);
|
|
12766
|
+
$.append($$anchor, fragment_5);
|
|
12767
|
+
},
|
|
12768
|
+
$$slots: { default: true }
|
|
12554
12769
|
});
|
|
12555
|
-
$.append($$anchor, fragment_3);
|
|
12556
12770
|
},
|
|
12557
12771
|
$$slots: { default: true }
|
|
12558
12772
|
});
|
|
@@ -12560,7 +12774,7 @@ function Actions($$anchor, $$props) {
|
|
|
12560
12774
|
$.template_effect(() => styles = $.set_style(div_1, "", styles, { "max-height": $.get(room) === null ? void 0 : `calc(${$.get(room)}px - var(--kata-gap-md) * ${reopen() ? 3 : 2} - var(--kata-border-width) * 2)` }));
|
|
12561
12775
|
$.append($$anchor, div_1);
|
|
12562
12776
|
};
|
|
12563
|
-
var
|
|
12777
|
+
var alternate_3 = ($$anchor) => {
|
|
12564
12778
|
Button($$anchor, {
|
|
12565
12779
|
variant: "ghost",
|
|
12566
12780
|
"aria-expanded": "false",
|
|
@@ -12569,18 +12783,18 @@ function Actions($$anchor, $$props) {
|
|
|
12569
12783
|
},
|
|
12570
12784
|
children: ($$anchor, $$slotProps) => {
|
|
12571
12785
|
$.next();
|
|
12572
|
-
var
|
|
12573
|
-
$.template_effect(() => $.set_text(
|
|
12574
|
-
$.append($$anchor,
|
|
12786
|
+
var text_6 = $.text();
|
|
12787
|
+
$.template_effect(() => $.set_text(text_6, $$props.title));
|
|
12788
|
+
$.append($$anchor, text_6);
|
|
12575
12789
|
},
|
|
12576
12790
|
$$slots: { default: true }
|
|
12577
12791
|
});
|
|
12578
12792
|
};
|
|
12579
12793
|
$.if(node_1, ($$render) => {
|
|
12580
|
-
if ($.get(open)) $$render(
|
|
12581
|
-
else $$render(
|
|
12794
|
+
if ($.get(open)) $$render(consequent_5);
|
|
12795
|
+
else $$render(alternate_3, -1);
|
|
12582
12796
|
});
|
|
12583
|
-
$.append($$anchor,
|
|
12797
|
+
$.append($$anchor, fragment_3);
|
|
12584
12798
|
},
|
|
12585
12799
|
$$slots: { default: true }
|
|
12586
12800
|
});
|
|
@@ -14986,7 +15200,7 @@ function Inspector($$anchor, $$props) {
|
|
|
14986
15200
|
/** The sections the application added */
|
|
14987
15201
|
/** Called by the close button; clears the selection when left out */
|
|
14988
15202
|
/** Whether it is in a sheet, whose width the panel takes */
|
|
14989
|
-
const view = $.derived(() => follow($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
|
|
15203
|
+
const view = $.derived(() => follow$1($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
|
|
14990
15204
|
const v = $.derived(() => $.get(view).get());
|
|
14991
15205
|
const m = $.derived(() => $$props.messages.get());
|
|
14992
15206
|
let tab = $.state(void 0);
|
|
@@ -15786,7 +16000,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15786
16000
|
let features = $.prop($$props, "features", 3, true), datasets = $.prop($$props, "datasets", 3, true), add = $.prop($$props, "add", 3, true), reorder = $.prop($$props, "reorder", 3, true), basemaps = $.prop($$props, "basemaps", 3, null), basemapOpen = $.prop($$props, "basemapOpen", 3, false);
|
|
15787
16001
|
const m = $.derived(() => $$props.messages.get());
|
|
15788
16002
|
const FEATURE_LIMIT = 1e3;
|
|
15789
|
-
const tree = $.derived(() => follow($$props.draw, [
|
|
16003
|
+
const tree = $.derived(() => follow$1($$props.draw, [
|
|
15790
16004
|
"document.changed",
|
|
15791
16005
|
"hidden.changed",
|
|
15792
16006
|
"options.changed",
|
|
@@ -15798,7 +16012,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15798
16012
|
limit: features() === true ? FEATURE_LIMIT : features() === false ? 0 : features(),
|
|
15799
16013
|
datasets: datasets()
|
|
15800
16014
|
})));
|
|
15801
|
-
const datasetList = $.derived(() => follow($$props.draw, ["dataset.added", "dataset.removed"], () => datasets() ? $$props.draw.datasets.list() : []));
|
|
16015
|
+
const datasetList = $.derived(() => follow$1($$props.draw, ["dataset.added", "dataset.removed"], () => datasets() ? $$props.draw.datasets.list() : []));
|
|
15802
16016
|
$.user_effect(() => {
|
|
15803
16017
|
const refresh = $.get(tree).refresh;
|
|
15804
16018
|
const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
|
|
@@ -15808,7 +16022,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15808
16022
|
for (const off of offs) off();
|
|
15809
16023
|
};
|
|
15810
16024
|
});
|
|
15811
|
-
const selection = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get()));
|
|
16025
|
+
const selection = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get()));
|
|
15812
16026
|
const nodes = $.derived(() => $.get(tree).get());
|
|
15813
16027
|
const index = $.derived(() => indexNodes($.get(nodes)));
|
|
15814
16028
|
const selected = $.derived(() => selectedIds($.get(selection).get()));
|
|
@@ -16155,13 +16369,13 @@ var root_1$2 = $.from_html(`<div class="legend svelte-pswzrf" data-role="legend"
|
|
|
16155
16369
|
function Legend($$anchor, $$props) {
|
|
16156
16370
|
$.push($$props, true);
|
|
16157
16371
|
const m = $.derived(() => $$props.messages.get());
|
|
16158
|
-
const legend = $.derived(() => follow($$props.draw, [
|
|
16372
|
+
const legend = $.derived(() => follow$1($$props.draw, [
|
|
16159
16373
|
"document.changed",
|
|
16160
16374
|
"dataset.added",
|
|
16161
16375
|
"dataset.removed",
|
|
16162
16376
|
"dataset.reordered"
|
|
16163
16377
|
], () => legendBlocks($$props.draw, $$props.messages.get())));
|
|
16164
|
-
const datasetList = $.derived(() => follow($$props.draw, ["dataset.added", "dataset.removed"], () => $$props.draw.datasets.list()));
|
|
16378
|
+
const datasetList = $.derived(() => follow$1($$props.draw, ["dataset.added", "dataset.removed"], () => $$props.draw.datasets.list()));
|
|
16165
16379
|
$.user_effect(() => {
|
|
16166
16380
|
const refresh = $.get(legend).refresh;
|
|
16167
16381
|
const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
|
|
@@ -16429,7 +16643,7 @@ function SnappingSettings($$anchor, $$props) {
|
|
|
16429
16643
|
word: "snapGuide"
|
|
16430
16644
|
}
|
|
16431
16645
|
];
|
|
16432
|
-
const options = $.derived(() => follow($$props.draw, ["options.changed"], () => $$props.draw.options.get()));
|
|
16646
|
+
const options = $.derived(() => follow$1($$props.draw, ["options.changed"], () => $$props.draw.options.get()));
|
|
16433
16647
|
const now = $.derived(() => $.get(options).get());
|
|
16434
16648
|
const snapping = $.derived(() => $.get(now).snapping ?? {});
|
|
16435
16649
|
const enabled = $.derived(() => $.get(snapping).enabled !== false);
|
|
@@ -16634,10 +16848,10 @@ function Toolbar($$anchor, $$props) {
|
|
|
16634
16848
|
/** Whether the delete button shows */
|
|
16635
16849
|
/** Whether the magnet of snapping shows */
|
|
16636
16850
|
/** Whether the tooltips show the keys (when the keyboard shortcuts are on) */
|
|
16637
|
-
const mode = $.derived(() => follow($$props.draw, ["mode.changed"], () => $$props.draw.getMode()));
|
|
16638
|
-
const selected = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length));
|
|
16639
|
-
const readOnly = $.derived(() => follow($$props.draw, ["readOnly.changed"], () => $$props.draw.isReadOnly()));
|
|
16640
|
-
const snapOn = $.derived(() => follow($$props.draw, ["options.changed"], () => $$props.draw.options.get().snapping?.enabled !== false));
|
|
16851
|
+
const mode = $.derived(() => follow$1($$props.draw, ["mode.changed"], () => $$props.draw.getMode()));
|
|
16852
|
+
const selected = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length));
|
|
16853
|
+
const readOnly = $.derived(() => follow$1($$props.draw, ["readOnly.changed"], () => $$props.draw.isReadOnly()));
|
|
16854
|
+
const snapOn = $.derived(() => follow$1($$props.draw, ["options.changed"], () => $$props.draw.options.get().snapping?.enabled !== false));
|
|
16641
16855
|
let settings = $.state(void 0);
|
|
16642
16856
|
const m = $.derived(() => $$props.messages.get());
|
|
16643
16857
|
const specs = $.derived(() => $$props.tools.get().map((entry) => toSpec(entry, $.get(m))));
|
|
@@ -16826,7 +17040,7 @@ function DrawUI($$anchor, $$props) {
|
|
|
16826
17040
|
};
|
|
16827
17041
|
let shortcuts = $.prop($$props, "shortcuts", 3, true), sideMode = $.prop($$props, "side", 3, "floating"), themeToggle = $.prop($$props, "themeToggle", 3, true), actionsOpen = $.prop($$props, "actionsOpen", 3, true);
|
|
16828
17042
|
const inspectorSettings = $.derived(() => $$props.inspector.get());
|
|
16829
|
-
const selected = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length > 0));
|
|
17043
|
+
const selected = $.derived(() => follow$1($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length > 0));
|
|
16830
17044
|
const choosable = $.derived(() => !!$$props.basemaps && $$props.basemaps.list.length >= 2);
|
|
16831
17045
|
let basemapOpen = $.state(false);
|
|
16832
17046
|
function openBasemaps() {
|
|
@@ -16867,10 +17081,11 @@ function DrawUI($$anchor, $$props) {
|
|
|
16867
17081
|
bottom: 0,
|
|
16868
17082
|
left: 0
|
|
16869
17083
|
};
|
|
17084
|
+
const narrow = $.get(layout)?.width === "narrow";
|
|
16870
17085
|
$.get(bar);
|
|
16871
17086
|
if (!$$props.oninset) return;
|
|
16872
17087
|
const report = $$props.oninset;
|
|
16873
|
-
tick().then(() => report(now));
|
|
17088
|
+
tick().then(() => report(now, narrow));
|
|
16874
17089
|
});
|
|
16875
17090
|
const SUN_ICON = Sun;
|
|
16876
17091
|
const MOON_ICON = Moon;
|
|
@@ -17064,42 +17279,97 @@ function DrawUI($$anchor, $$props) {
|
|
|
17064
17279
|
}
|
|
17065
17280
|
//#endregion
|
|
17066
17281
|
//#region src/controls.ts
|
|
17282
|
+
/** The class of maplibre-gl's compact attribution, and the one it has while it is open */
|
|
17283
|
+
var COMPACT = "maplibregl-compact";
|
|
17284
|
+
var COMPACT_SHOW = "maplibregl-compact-show";
|
|
17067
17285
|
/**
|
|
17068
17286
|
* Adds maplibre-gl's controls to a map: all four with `true` or `undefined`, none with `false`,
|
|
17069
17287
|
* those not set to false with an object.
|
|
17070
17288
|
*
|
|
17071
17289
|
* maplibre-gl puts a control added to a bottom corner above those already there, so the controls
|
|
17072
|
-
* of the bottom right are added from the bottom: the zoom, the compass, then the globe.
|
|
17290
|
+
* of the bottom right are added from the bottom: the zoom, the compass, then the globe. The globe
|
|
17291
|
+
* and the compass come back the same way, above the zoom.
|
|
17292
|
+
*
|
|
17293
|
+
* While the map is narrow (`setNarrow`), the globe and the compass are removed, and the
|
|
17294
|
+
* attribution is folded to its (i) button: maplibre-gl builds its compact attribution open (until
|
|
17295
|
+
* the first drag), when it first fills, when the map's width brings the compact form back, and
|
|
17296
|
+
* when a page adds it again; each time, its open class is removed, as maplibre-gl's own fold on a
|
|
17297
|
+
* drag does. The (i) button opens it still. With `false`, nothing is added and the attribution is
|
|
17298
|
+
* left alone.
|
|
17073
17299
|
*/
|
|
17074
17300
|
function mapControls(map, option) {
|
|
17075
17301
|
const want = option === false ? null : option === true || option === void 0 ? {} : option;
|
|
17076
17302
|
const added = [];
|
|
17303
|
+
let wideOnly = [];
|
|
17304
|
+
let narrow = false;
|
|
17305
|
+
let destroyed = false;
|
|
17077
17306
|
const add = (control, position) => {
|
|
17078
17307
|
map.addControl(control, position);
|
|
17079
17308
|
added.push(control);
|
|
17309
|
+
return control;
|
|
17310
|
+
};
|
|
17311
|
+
const remove = (control) => {
|
|
17312
|
+
const at = added.indexOf(control);
|
|
17313
|
+
if (at >= 0) added.splice(at, 1);
|
|
17314
|
+
try {
|
|
17315
|
+
map.removeControl(control);
|
|
17316
|
+
} catch {}
|
|
17317
|
+
};
|
|
17318
|
+
const addWideOnly = () => {
|
|
17319
|
+
if (!want) return;
|
|
17320
|
+
if (want.compass !== false) wideOnly.push(add(new NavigationControl({
|
|
17321
|
+
showZoom: false,
|
|
17322
|
+
showCompass: true,
|
|
17323
|
+
visualizePitch: true
|
|
17324
|
+
}), "bottom-right"));
|
|
17325
|
+
if (want.globe !== false) wideOnly.push(add(new GlobeControl(), "bottom-right"));
|
|
17080
17326
|
};
|
|
17081
17327
|
if (want) {
|
|
17082
17328
|
if (want.zoom !== false) add(new NavigationControl({
|
|
17083
17329
|
showZoom: true,
|
|
17084
17330
|
showCompass: false
|
|
17085
17331
|
}), "bottom-right");
|
|
17086
|
-
|
|
17087
|
-
showZoom: false,
|
|
17088
|
-
showCompass: true,
|
|
17089
|
-
visualizePitch: true
|
|
17090
|
-
}), "bottom-right");
|
|
17091
|
-
if (want.globe !== false) add(new GlobeControl(), "bottom-right");
|
|
17332
|
+
addWideOnly();
|
|
17092
17333
|
if (want.scale !== false) add(new ScaleControl(), "bottom-left");
|
|
17093
17334
|
}
|
|
17094
|
-
|
|
17095
|
-
|
|
17096
|
-
|
|
17097
|
-
|
|
17098
|
-
|
|
17099
|
-
|
|
17100
|
-
|
|
17101
|
-
|
|
17102
|
-
|
|
17335
|
+
const container = map.getContainer();
|
|
17336
|
+
const watched = container.querySelector(":scope > .maplibregl-control-container") ?? container;
|
|
17337
|
+
const isAttribution = (node) => node instanceof Element && node.matches(".maplibregl-ctrl-attrib");
|
|
17338
|
+
const fold = (el) => {
|
|
17339
|
+
if (narrow) el.classList.remove(COMPACT_SHOW);
|
|
17340
|
+
};
|
|
17341
|
+
/** maplibre-gl built it open: it was added, or it has just become compact */
|
|
17342
|
+
const watcher = want && typeof MutationObserver !== "undefined" ? new MutationObserver((records) => {
|
|
17343
|
+
if (!narrow) return;
|
|
17344
|
+
for (const record of records) if (record.type === "childList") {
|
|
17345
|
+
for (const node of record.addedNodes) if (isAttribution(node)) fold(node);
|
|
17346
|
+
} else if (isAttribution(record.target) && record.target.classList.contains(COMPACT) && !(record.oldValue ?? "").split(/\s+/).includes(COMPACT)) fold(record.target);
|
|
17347
|
+
}) : null;
|
|
17348
|
+
watcher?.observe(watched, {
|
|
17349
|
+
subtree: true,
|
|
17350
|
+
childList: true,
|
|
17351
|
+
attributes: true,
|
|
17352
|
+
attributeFilter: ["class"],
|
|
17353
|
+
attributeOldValue: true
|
|
17354
|
+
});
|
|
17355
|
+
return {
|
|
17356
|
+
setNarrow(next) {
|
|
17357
|
+
if (destroyed || !want || next === narrow) return;
|
|
17358
|
+
narrow = next;
|
|
17359
|
+
if (narrow) {
|
|
17360
|
+
for (const control of wideOnly) remove(control);
|
|
17361
|
+
wideOnly = [];
|
|
17362
|
+
for (const el of watched.querySelectorAll(".maplibregl-ctrl-attrib")) fold(el);
|
|
17363
|
+
} else addWideOnly();
|
|
17364
|
+
},
|
|
17365
|
+
destroy() {
|
|
17366
|
+
if (destroyed) return;
|
|
17367
|
+
destroyed = true;
|
|
17368
|
+
watcher?.disconnect();
|
|
17369
|
+
for (const control of [...added]) remove(control);
|
|
17370
|
+
wideOnly = [];
|
|
17371
|
+
}
|
|
17372
|
+
};
|
|
17103
17373
|
}
|
|
17104
17374
|
/** The attribute on the map's container while the interface lifts its bottom corners */
|
|
17105
17375
|
var LIFT_ATTRIBUTE = "data-mgd-ui-lift";
|
|
@@ -17126,7 +17396,8 @@ var upDown = (a, b) => a.top < b.bottom && b.top < a.bottom;
|
|
|
17126
17396
|
* while the right region covers the stage (the inset's right) and they are under it up and
|
|
17127
17397
|
* down: by the inset and gap-md
|
|
17128
17398
|
* - --mgd-ui-lift-left also lifts the bottom left corner above the attribution's box while that
|
|
17129
|
-
* box reaches the corner across
|
|
17399
|
+
* box reaches the corner across, but on a narrow map: there the attribution is folded to its
|
|
17400
|
+
* (i) button (mapControls), and the band the button opens is not lifted for
|
|
17130
17401
|
*
|
|
17131
17402
|
* The boxes are measured where maplibre-gl places them, without what this moved. The attribution
|
|
17132
17403
|
* and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
|
|
@@ -17144,6 +17415,7 @@ function cornerLift(container, root) {
|
|
|
17144
17415
|
bottom: 0,
|
|
17145
17416
|
left: 0
|
|
17146
17417
|
};
|
|
17418
|
+
let narrow = false;
|
|
17147
17419
|
let now = {
|
|
17148
17420
|
left: 0,
|
|
17149
17421
|
right: 0,
|
|
@@ -17217,7 +17489,7 @@ function cornerLift(container, root) {
|
|
|
17217
17489
|
}
|
|
17218
17490
|
}
|
|
17219
17491
|
let liftLeft = reachesBar(left) ? band : 0;
|
|
17220
|
-
const attrib = attribution()?.getBoundingClientRect();
|
|
17492
|
+
const attrib = narrow ? void 0 : attribution()?.getBoundingClientRect();
|
|
17221
17493
|
if (left && attrib && attrib.width > 0 && attrib.height > 0) {
|
|
17222
17494
|
const a = moved(attrib, 0, now.right - liftRight);
|
|
17223
17495
|
const l = moved(left, 0, -liftLeft);
|
|
@@ -17263,9 +17535,10 @@ function cornerLift(container, root) {
|
|
|
17263
17535
|
for (const el of observed) observer.observe(el);
|
|
17264
17536
|
}
|
|
17265
17537
|
return {
|
|
17266
|
-
update(next) {
|
|
17538
|
+
update(next, nextNarrow) {
|
|
17267
17539
|
if (destroyed) return;
|
|
17268
17540
|
if (next) inset = { ...next };
|
|
17541
|
+
if (nextNarrow !== void 0) narrow = nextNarrow;
|
|
17269
17542
|
follow();
|
|
17270
17543
|
apply();
|
|
17271
17544
|
},
|
|
@@ -17335,6 +17608,87 @@ function mapPadding(map) {
|
|
|
17335
17608
|
};
|
|
17336
17609
|
}
|
|
17337
17610
|
//#endregion
|
|
17611
|
+
//#region src/reveal.ts
|
|
17612
|
+
/**
|
|
17613
|
+
* How far to pan the map so that a box shows in the visible region: null when the box is entirely
|
|
17614
|
+
* inside the region, else the distance from the centre of the region to the centre of the box,
|
|
17615
|
+
* which the centre of the view moves by. The zoom is never changed, so a box larger than the
|
|
17616
|
+
* region is centred in it.
|
|
17617
|
+
*
|
|
17618
|
+
* @param bbox - The box of the selection on the map's container
|
|
17619
|
+
* @param visible - The visible region of the map's container
|
|
17620
|
+
*/
|
|
17621
|
+
function reveal(bbox, visible) {
|
|
17622
|
+
if (bbox.left >= visible.left && bbox.right <= visible.right && bbox.top >= visible.top && bbox.bottom <= visible.bottom) return null;
|
|
17623
|
+
return {
|
|
17624
|
+
x: (bbox.left + bbox.right) / 2 - (visible.left + visible.right) / 2,
|
|
17625
|
+
y: (bbox.top + bbox.bottom) / 2 - (visible.top + visible.bottom) / 2
|
|
17626
|
+
};
|
|
17627
|
+
}
|
|
17628
|
+
/**
|
|
17629
|
+
* The visible region of the map's container: less the inset of the shell at each edge (the left
|
|
17630
|
+
* and the right regions, the sheets at the bottom), and above the toolbar's band and the
|
|
17631
|
+
* attribution's box, each taken from its top to the bottom of the map
|
|
17632
|
+
*
|
|
17633
|
+
* @param container - The map's container
|
|
17634
|
+
* @param root - The root element of the interface
|
|
17635
|
+
* @param inset - The inset the shell reported last
|
|
17636
|
+
*/
|
|
17637
|
+
function visibleRegion(container, root, inset) {
|
|
17638
|
+
const box = container.getBoundingClientRect();
|
|
17639
|
+
let bottom = box.height - inset.bottom;
|
|
17640
|
+
const bands = [root.querySelector("[data-region=\"bottom\"] [data-role=\"drawbar\"]"), container.querySelector(":scope > .maplibregl-control-container .maplibregl-ctrl-attrib")];
|
|
17641
|
+
for (const el of bands) {
|
|
17642
|
+
const r = el?.getBoundingClientRect();
|
|
17643
|
+
if (r && r.width > 0 && r.height > 0) bottom = Math.min(bottom, r.top - box.top);
|
|
17644
|
+
}
|
|
17645
|
+
return {
|
|
17646
|
+
left: inset.left,
|
|
17647
|
+
top: inset.top,
|
|
17648
|
+
right: box.width - inset.right,
|
|
17649
|
+
bottom
|
|
17650
|
+
};
|
|
17651
|
+
}
|
|
17652
|
+
/** Calls `visit` with each position of a geometry */
|
|
17653
|
+
function eachPosition(geometry, visit) {
|
|
17654
|
+
if (geometry.geometries) {
|
|
17655
|
+
for (const part of geometry.geometries) eachPosition(part, visit);
|
|
17656
|
+
return;
|
|
17657
|
+
}
|
|
17658
|
+
const walk = (value) => {
|
|
17659
|
+
if (!Array.isArray(value)) return;
|
|
17660
|
+
if (typeof value[0] === "number" && typeof value[1] === "number") {
|
|
17661
|
+
visit(value[0], value[1]);
|
|
17662
|
+
return;
|
|
17663
|
+
}
|
|
17664
|
+
for (const item of value) walk(item);
|
|
17665
|
+
};
|
|
17666
|
+
walk(geometry.coordinates);
|
|
17667
|
+
}
|
|
17668
|
+
/**
|
|
17669
|
+
* The box of geometries on the map's container, from the points `project` gives for their
|
|
17670
|
+
* positions; null for none
|
|
17671
|
+
*/
|
|
17672
|
+
function screenBox(geometries, project) {
|
|
17673
|
+
let box = null;
|
|
17674
|
+
for (const geometry of geometries) eachPosition(geometry, (lng, lat) => {
|
|
17675
|
+
const p = project([lng, lat]);
|
|
17676
|
+
if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) return;
|
|
17677
|
+
box = box ? {
|
|
17678
|
+
left: Math.min(box.left, p.x),
|
|
17679
|
+
top: Math.min(box.top, p.y),
|
|
17680
|
+
right: Math.max(box.right, p.x),
|
|
17681
|
+
bottom: Math.max(box.bottom, p.y)
|
|
17682
|
+
} : {
|
|
17683
|
+
left: p.x,
|
|
17684
|
+
top: p.y,
|
|
17685
|
+
right: p.x,
|
|
17686
|
+
bottom: p.y
|
|
17687
|
+
};
|
|
17688
|
+
});
|
|
17689
|
+
return box;
|
|
17690
|
+
}
|
|
17691
|
+
//#endregion
|
|
17338
17692
|
//#region src/theme.ts
|
|
17339
17693
|
/** The query of the system's preference that `auto` follows */
|
|
17340
17694
|
var LIGHT_QUERY = "(prefers-color-scheme: light)";
|
|
@@ -17468,12 +17822,15 @@ function toolsHandle(tools, messages, actions) {
|
|
|
17468
17822
|
* inspector on the right while something is selected. The map's padding follows the interface:
|
|
17469
17823
|
* the room the left panel takes (beside the map or floating over it) at the left and the sheets
|
|
17470
17824
|
* at the bottom, so that `fitBounds` and `easeTo` keep clear of them; `destroy()` gives the map
|
|
17471
|
-
* its padding back.
|
|
17825
|
+
* its padding back. When the selection of drawn features changes, the map pans once (the zoom
|
|
17826
|
+
* stays) so that it shows clear of the panels, the sheets, the toolbar and the attribution,
|
|
17827
|
+
* unless it shows there already. The last section of the layer panel is the basemap, whose row opens the
|
|
17472
17828
|
* basemaps of `options.basemaps` to choose from on the right, in the place of the inspector, when
|
|
17473
17829
|
* there are two or more. A button at the top right switches between the
|
|
17474
17830
|
* light and the dark look, and maplibre-gl's own controls go to the bottom corners of the map (the
|
|
17475
17831
|
* globe, the compass and the zoom at the right, the scale at the left), which move out of the way
|
|
17476
|
-
* of the toolbar, the right panel and the attribution;
|
|
17832
|
+
* of the toolbar, the right panel and the attribution; a narrow map (below 48rem) shows no globe
|
|
17833
|
+
* and no compass, and its attribution folded to its (i) button; `destroy()` removes them. The actions of
|
|
17477
17834
|
* the application (`options.actions`, `ui.actions`) are rows of a card at the bottom left, above
|
|
17478
17835
|
* the scale and the attribution, each with its key.
|
|
17479
17836
|
*
|
|
@@ -17514,6 +17871,7 @@ function createDrawUI(draw, options = {}) {
|
|
|
17514
17871
|
const controls = mapControls(map, options.mapControls);
|
|
17515
17872
|
const lift = cornerLift(map.getContainer(), root);
|
|
17516
17873
|
const padding = options.padding === false ? null : mapPadding(map);
|
|
17874
|
+
const revealing = selectionReveal(draw, root);
|
|
17517
17875
|
const view = mount(DrawUI, {
|
|
17518
17876
|
target: root,
|
|
17519
17877
|
props: {
|
|
@@ -17525,9 +17883,11 @@ function createDrawUI(draw, options = {}) {
|
|
|
17525
17883
|
shortcuts: options.shortcuts !== false,
|
|
17526
17884
|
inspector,
|
|
17527
17885
|
sections,
|
|
17528
|
-
oninset: (inset) => {
|
|
17886
|
+
oninset: (inset, narrow) => {
|
|
17529
17887
|
padding?.update(inset);
|
|
17530
|
-
|
|
17888
|
+
controls.setNarrow(narrow);
|
|
17889
|
+
lift.update(inset, narrow);
|
|
17890
|
+
revealing.inset(inset);
|
|
17531
17891
|
},
|
|
17532
17892
|
side: options.side,
|
|
17533
17893
|
light,
|
|
@@ -17623,6 +17983,7 @@ function createDrawUI(draw, options = {}) {
|
|
|
17623
17983
|
controlContainer?.removeAttribute("data-color-mode");
|
|
17624
17984
|
basemaps.destroy();
|
|
17625
17985
|
padding?.destroy();
|
|
17986
|
+
revealing.destroy();
|
|
17626
17987
|
lift.destroy();
|
|
17627
17988
|
controls.destroy();
|
|
17628
17989
|
unmount(view);
|
|
@@ -17631,6 +17992,84 @@ function createDrawUI(draw, options = {}) {
|
|
|
17631
17992
|
};
|
|
17632
17993
|
}
|
|
17633
17994
|
/**
|
|
17995
|
+
* Reveals the selection of drawn features each time it changes (reveal.ts), once the shell's
|
|
17996
|
+
* insets have settled for it: the right region opens with a selection, and the shell measures it
|
|
17997
|
+
* in a ResizeObserver delivery and reports the inset in the next frame. So the selection is
|
|
17998
|
+
* revealed in the task after the next inset, or, when none comes within two frames (the regions
|
|
17999
|
+
* did not change), in the task after those. The map pans with `easeTo`, the centre only.
|
|
18000
|
+
*
|
|
18001
|
+
* Every call to the map is guarded: once the map is removed, or its container leaves the page,
|
|
18002
|
+
* nothing is done.
|
|
18003
|
+
*/
|
|
18004
|
+
function selectionReveal(draw, root) {
|
|
18005
|
+
const map = draw.getMap();
|
|
18006
|
+
let inset = {
|
|
18007
|
+
top: 0,
|
|
18008
|
+
right: 0,
|
|
18009
|
+
bottom: 0,
|
|
18010
|
+
left: 0
|
|
18011
|
+
};
|
|
18012
|
+
let pending = false;
|
|
18013
|
+
let destroyed = false;
|
|
18014
|
+
let frame = 0;
|
|
18015
|
+
let timer;
|
|
18016
|
+
const cancel = () => {
|
|
18017
|
+
if (frame) cancelAnimationFrame(frame);
|
|
18018
|
+
frame = 0;
|
|
18019
|
+
if (timer !== void 0) clearTimeout(timer);
|
|
18020
|
+
timer = void 0;
|
|
18021
|
+
};
|
|
18022
|
+
/** Reveals in the next task */
|
|
18023
|
+
const soon = () => {
|
|
18024
|
+
cancel();
|
|
18025
|
+
timer = setTimeout(run, 0);
|
|
18026
|
+
};
|
|
18027
|
+
function run() {
|
|
18028
|
+
cancel();
|
|
18029
|
+
if (destroyed || !pending) return;
|
|
18030
|
+
pending = false;
|
|
18031
|
+
try {
|
|
18032
|
+
const container = map.getContainer();
|
|
18033
|
+
if (!container.isConnected) return;
|
|
18034
|
+
const selection = draw.selection.get();
|
|
18035
|
+
if (selection.type !== "feature") return;
|
|
18036
|
+
const box = screenBox(selection.ids.flatMap((id) => {
|
|
18037
|
+
const feature = draw.features.get(id);
|
|
18038
|
+
return feature ? [feature.geometry] : [];
|
|
18039
|
+
}), (lngLat) => map.project(lngLat));
|
|
18040
|
+
if (!box) return;
|
|
18041
|
+
const by = reveal(box, visibleRegion(container, root, inset));
|
|
18042
|
+
if (!by) return;
|
|
18043
|
+
const centre = map.project(map.getCenter());
|
|
18044
|
+
map.easeTo({ center: map.unproject([centre.x + by.x, centre.y + by.y]) });
|
|
18045
|
+
} catch {}
|
|
18046
|
+
}
|
|
18047
|
+
const off = draw.on("selection.changed", ({ selection }) => {
|
|
18048
|
+
cancel();
|
|
18049
|
+
pending = selection.type === "feature" && selection.ids.length > 0;
|
|
18050
|
+
if (!pending) return;
|
|
18051
|
+
frame = requestAnimationFrame(() => {
|
|
18052
|
+
frame = requestAnimationFrame(() => {
|
|
18053
|
+
frame = 0;
|
|
18054
|
+
soon();
|
|
18055
|
+
});
|
|
18056
|
+
});
|
|
18057
|
+
});
|
|
18058
|
+
return {
|
|
18059
|
+
inset(next) {
|
|
18060
|
+
if (destroyed) return;
|
|
18061
|
+
inset = { ...next };
|
|
18062
|
+
if (pending) soon();
|
|
18063
|
+
},
|
|
18064
|
+
destroy() {
|
|
18065
|
+
if (destroyed) return;
|
|
18066
|
+
destroyed = true;
|
|
18067
|
+
cancel();
|
|
18068
|
+
off();
|
|
18069
|
+
}
|
|
18070
|
+
};
|
|
18071
|
+
}
|
|
18072
|
+
/**
|
|
17634
18073
|
* Puts the toolbar alone in an element: the tools, the delete button and the magnet that opens
|
|
17635
18074
|
* the snapping settings, without the keyboard shortcuts. The bar floats at the bottom centre of `target`, which must be
|
|
17636
18075
|
* positioned (the map's container, or a positioned box over the map).
|
|
@@ -17705,12 +18144,14 @@ function leftSettings(options) {
|
|
|
17705
18144
|
}
|
|
17706
18145
|
/**
|
|
17707
18146
|
* Puts a component alone in an element, in a root element of the interface; `cleanup` runs once
|
|
17708
|
-
* when it is removed
|
|
18147
|
+
* when it is removed. The root paints the panel's surface and declares it (data-surface), as
|
|
18148
|
+
* kata's Panel does around these components in the left region
|
|
17709
18149
|
*/
|
|
17710
18150
|
function mountAlone({ target, locale, theme: themeOption }, component, props, role, cleanup) {
|
|
17711
18151
|
const themeName = checkTheme(themeOption);
|
|
17712
18152
|
const messages = new Box(resolveMessages(locale));
|
|
17713
18153
|
const root = createRoot(target, false);
|
|
18154
|
+
root.dataset.surface = "";
|
|
17714
18155
|
const theme = themeControl(root, themeName);
|
|
17715
18156
|
applyLocale(root, messages, locale ?? "en");
|
|
17716
18157
|
const view = mount(component, {
|