@sakuzu/maplibre-gl-draw-ui 1.2.0 → 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 +46 -0
- package/README.md +38 -10
- package/dist/controls.d.ts +24 -7
- package/dist/index.d.ts +5 -2
- package/dist/index.js +893 -350
- package/dist/index.js.map +1 -1
- package/dist/maplibre-gl-draw-ui.js +5835 -5494
- 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 +4 -2
- 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);
|
|
@@ -1892,6 +2002,17 @@ function Dropdown($$anchor, $$props) {
|
|
|
1892
2002
|
$$props.onOpenChange?.($.get(open));
|
|
1893
2003
|
});
|
|
1894
2004
|
let anchor = $.state(void 0);
|
|
2005
|
+
let told = false;
|
|
2006
|
+
$.user_effect(() => {
|
|
2007
|
+
const el = $.get(anchor);
|
|
2008
|
+
const now = $.get(open);
|
|
2009
|
+
if (!el || now === told) return;
|
|
2010
|
+
told = now;
|
|
2011
|
+
el.dispatchEvent(new CustomEvent("kata-menu-toggle", {
|
|
2012
|
+
bubbles: true,
|
|
2013
|
+
detail: { open: now }
|
|
2014
|
+
}));
|
|
2015
|
+
});
|
|
1895
2016
|
let panelEl = $.state(void 0);
|
|
1896
2017
|
let placed = $.state(false);
|
|
1897
2018
|
let pos = $.state($.proxy({
|
|
@@ -1901,47 +2022,16 @@ function Dropdown($$anchor, $$props) {
|
|
|
1901
2022
|
}));
|
|
1902
2023
|
let focusFirst = false;
|
|
1903
2024
|
let returnFocusEl = null;
|
|
1904
|
-
const GAP = 4;
|
|
1905
|
-
const EDGE = 8;
|
|
1906
|
-
const MIN_HEIGHT = 120;
|
|
1907
2025
|
function place() {
|
|
1908
2026
|
if (!$.get(anchor) || !$.get(panelEl)) return;
|
|
1909
2027
|
const r = $.get(anchor).getBoundingClientRect();
|
|
1910
2028
|
const bar = $.get(anchor).closest("[role=\"toolbar\"], [data-role=\"toolbar\"]");
|
|
1911
2029
|
const edge = bar ? bar.getBoundingClientRect() : r;
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
const natural = $.get(panelEl).scrollHeight;
|
|
1918
|
-
$.get(panelEl).style.maxHeight = keep;
|
|
1919
|
-
if (bar?.getAttribute("aria-orientation") === "vertical") {
|
|
1920
|
-
const maxHeight = Math.max(MIN_HEIGHT, vh - 16);
|
|
1921
|
-
const shown = Math.min(natural, maxHeight);
|
|
1922
|
-
const top = Math.max(EDGE, Math.min(r.top, vh - shown - EDGE));
|
|
1923
|
-
let left = edge.left - GAP - width;
|
|
1924
|
-
if (left < EDGE) left = Math.min(edge.right + GAP, vw - width - EDGE);
|
|
1925
|
-
$.set(pos, {
|
|
1926
|
-
top: Math.round(top),
|
|
1927
|
-
left: Math.round(left),
|
|
1928
|
-
maxHeight: Math.round(maxHeight)
|
|
1929
|
-
}, true);
|
|
1930
|
-
return;
|
|
1931
|
-
}
|
|
1932
|
-
const below = vh - edge.bottom - GAP - EDGE;
|
|
1933
|
-
const above = edge.top - GAP - EDGE;
|
|
1934
|
-
const up = preferUp() ? !(above < Math.min(natural, MIN_HEIGHT) && below > above) : below < Math.min(natural, MIN_HEIGHT) && above > below;
|
|
1935
|
-
const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
|
|
1936
|
-
const shown = Math.min(natural, maxHeight);
|
|
1937
|
-
const top = up ? edge.top - GAP - shown : edge.bottom + GAP;
|
|
1938
|
-
let left = align() === "end" ? r.right - width : r.left;
|
|
1939
|
-
left = Math.max(EDGE, Math.min(left, vw - width - EDGE));
|
|
1940
|
-
$.set(pos, {
|
|
1941
|
-
top: Math.round(top),
|
|
1942
|
-
left: Math.round(left),
|
|
1943
|
-
maxHeight: Math.round(maxHeight)
|
|
1944
|
-
}, 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);
|
|
1945
2035
|
}
|
|
1946
2036
|
function toggle() {
|
|
1947
2037
|
$.set(open, !$.get(open));
|
|
@@ -1963,7 +2053,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
1963
2053
|
}
|
|
1964
2054
|
}
|
|
1965
2055
|
$.user_effect(() => {
|
|
1966
|
-
if (!$.get(open) || !$.get(panelEl)) return;
|
|
2056
|
+
if (!$.get(open) || !$.get(panelEl) || !$.get(anchor)) return;
|
|
1967
2057
|
const el = $.get(panelEl);
|
|
1968
2058
|
if (canPopover && !isShown(el)) try {
|
|
1969
2059
|
el.showPopover();
|
|
@@ -1977,6 +2067,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
1977
2067
|
await tick();
|
|
1978
2068
|
focusItemAt(0);
|
|
1979
2069
|
})();
|
|
2070
|
+
return follow($.get(anchor), el, place);
|
|
1980
2071
|
});
|
|
1981
2072
|
function menuItems() {
|
|
1982
2073
|
if (!$.get(panelEl)) return [];
|
|
@@ -2025,8 +2116,6 @@ function Dropdown($$anchor, $$props) {
|
|
|
2025
2116
|
var fragment = root_1$43();
|
|
2026
2117
|
$.event("keydown", $.window, onKeyDown, true);
|
|
2027
2118
|
$.event("pointerdown", $.window, onPointerDown, true);
|
|
2028
|
-
$.event("resize", $.window, () => $.get(open) && place());
|
|
2029
|
-
$.event("scroll", $.window, () => $.get(open) && place());
|
|
2030
2119
|
var span = $.first_child(fragment);
|
|
2031
2120
|
let classes;
|
|
2032
2121
|
var node = $.child(span);
|
|
@@ -2035,7 +2124,7 @@ function Dropdown($$anchor, $$props) {
|
|
|
2035
2124
|
$.bind_this(span, ($$value) => $.set(anchor, $$value), () => $.get(anchor));
|
|
2036
2125
|
var node_1 = $.sibling(span, 2);
|
|
2037
2126
|
var consequent = ($$anchor) => {
|
|
2038
|
-
var div = root$
|
|
2127
|
+
var div = root$70();
|
|
2039
2128
|
let classes_1;
|
|
2040
2129
|
let styles;
|
|
2041
2130
|
var node_2 = $.child(div);
|
|
@@ -2188,9 +2277,9 @@ function createNarrow(remLimit) {
|
|
|
2188
2277
|
}
|
|
2189
2278
|
//#endregion
|
|
2190
2279
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Menu.svelte
|
|
2191
|
-
var root$
|
|
2280
|
+
var root$69 = $.from_html(`<div class="menu svelte-jzoay2" data-role="menu"><!></div>`);
|
|
2192
2281
|
function Menu($$anchor, $$props) {
|
|
2193
|
-
var div = root$
|
|
2282
|
+
var div = root$69();
|
|
2194
2283
|
var node = $.child(div);
|
|
2195
2284
|
$.snippet(node, () => $$props.children);
|
|
2196
2285
|
$.reset(div);
|
|
@@ -2199,16 +2288,16 @@ function Menu($$anchor, $$props) {
|
|
|
2199
2288
|
}
|
|
2200
2289
|
//#endregion
|
|
2201
2290
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuDivider.svelte
|
|
2202
|
-
var root$
|
|
2291
|
+
var root$68 = $.from_html(`<div class="sep svelte-1s1g1mj" data-role="rule" role="separator"></div>`);
|
|
2203
2292
|
function MenuDivider($$anchor) {
|
|
2204
|
-
var div = root$
|
|
2293
|
+
var div = root$68();
|
|
2205
2294
|
$.append($$anchor, div);
|
|
2206
2295
|
}
|
|
2207
2296
|
//#endregion
|
|
2208
2297
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuHead.svelte
|
|
2209
|
-
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>`);
|
|
2210
2299
|
function MenuHead($$anchor, $$props) {
|
|
2211
|
-
var div = root$
|
|
2300
|
+
var div = root$67();
|
|
2212
2301
|
var span = $.child(div);
|
|
2213
2302
|
var node = $.child(span);
|
|
2214
2303
|
$.snippet(node, () => $$props.children);
|
|
@@ -2233,11 +2322,11 @@ var rest_excludes$9 = /* @__PURE__ */ new Set([
|
|
|
2233
2322
|
"onclick",
|
|
2234
2323
|
"children"
|
|
2235
2324
|
]);
|
|
2236
|
-
var root$
|
|
2325
|
+
var root$66 = $.from_html(`<span class="chk svelte-ibgq9r"><!></span>`);
|
|
2237
2326
|
var root_1$42 = $.from_html(`<span class="kbd t svelte-ibgq9r"> </span>`);
|
|
2238
2327
|
var root_2$27 = $.from_html(`<span class="sub svelte-ibgq9r"><!></span>`);
|
|
2239
2328
|
var root_3$17 = $.from_html(`<!> <span class="grow t svelte-ibgq9r"><!></span> <!> <!>`, 1);
|
|
2240
|
-
var root_4$
|
|
2329
|
+
var root_4$12 = $.from_html(`<a><!></a>`);
|
|
2241
2330
|
var root_5$8 = $.from_html(`<button><!></button>`);
|
|
2242
2331
|
function MenuItem($$anchor, $$props) {
|
|
2243
2332
|
$.push($$props, true);
|
|
@@ -2250,7 +2339,7 @@ function MenuItem($$anchor, $$props) {
|
|
|
2250
2339
|
} });
|
|
2251
2340
|
};
|
|
2252
2341
|
var consequent_2 = ($$anchor) => {
|
|
2253
|
-
var span = root$
|
|
2342
|
+
var span = root$66();
|
|
2254
2343
|
var node_1 = $.child(span);
|
|
2255
2344
|
var consequent_1 = ($$anchor) => {
|
|
2256
2345
|
Icon($$anchor, { name: "check" });
|
|
@@ -2300,7 +2389,7 @@ function MenuItem($$anchor, $$props) {
|
|
|
2300
2389
|
var fragment_3 = $.comment();
|
|
2301
2390
|
var node_6 = $.first_child(fragment_3);
|
|
2302
2391
|
var consequent_5 = ($$anchor) => {
|
|
2303
|
-
var a = root_4$
|
|
2392
|
+
var a = root_4$12();
|
|
2304
2393
|
$.attribute_effect(a, () => ({
|
|
2305
2394
|
class: "item",
|
|
2306
2395
|
"data-role": "list-item",
|
|
@@ -2352,16 +2441,16 @@ function MenuItem($$anchor, $$props) {
|
|
|
2352
2441
|
}
|
|
2353
2442
|
//#endregion
|
|
2354
2443
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/MenuList.svelte
|
|
2355
|
-
var root$
|
|
2444
|
+
var root$65 = $.from_html(`<!> <!>`, 1);
|
|
2356
2445
|
var root_1$41 = $.from_html(`<div class="sub svelte-1taxidq"><!></div>`);
|
|
2357
2446
|
var root_2$26 = $.from_html(`<div class="level svelte-1taxidq"><!></div> <!>`, 1);
|
|
2358
2447
|
function MenuList_1($$anchor, $$props) {
|
|
2359
2448
|
$.push($$props, true);
|
|
2360
2449
|
const entries = ($$anchor) => {
|
|
2361
|
-
var fragment = root$
|
|
2450
|
+
var fragment = root$65();
|
|
2362
2451
|
var node = $.first_child(fragment);
|
|
2363
2452
|
var consequent = ($$anchor) => {
|
|
2364
|
-
var fragment_1 = root$
|
|
2453
|
+
var fragment_1 = root$65();
|
|
2365
2454
|
var node_1 = $.first_child(fragment_1);
|
|
2366
2455
|
MenuItem(node_1, {
|
|
2367
2456
|
icon: "arrow-left",
|
|
@@ -2498,8 +2587,9 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2498
2587
|
}));
|
|
2499
2588
|
let listEl = $.state(void 0);
|
|
2500
2589
|
let subEl = $.state(void 0);
|
|
2501
|
-
|
|
2590
|
+
let subRow = $.state(void 0);
|
|
2502
2591
|
function place(row) {
|
|
2592
|
+
$.set(subRow, row, true);
|
|
2503
2593
|
const r = row.getBoundingClientRect();
|
|
2504
2594
|
$.set(subPos, {
|
|
2505
2595
|
top: r.top,
|
|
@@ -2507,18 +2597,17 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2507
2597
|
}, true);
|
|
2508
2598
|
tick().then(() => {
|
|
2509
2599
|
if (!$.get(subEl)) return;
|
|
2510
|
-
|
|
2511
|
-
const h = $.get(subEl).offsetHeight;
|
|
2512
|
-
let left = r.right;
|
|
2513
|
-
if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, r.left - w);
|
|
2514
|
-
let top = r.top;
|
|
2515
|
-
if (top + h > window.innerHeight - EDGE) top = Math.max(EDGE, window.innerHeight - EDGE - h);
|
|
2516
|
-
$.set(subPos, {
|
|
2517
|
-
top,
|
|
2518
|
-
left
|
|
2519
|
-
}, true);
|
|
2600
|
+
$.set(subPos, placeNext($.get(subEl), r), true);
|
|
2520
2601
|
});
|
|
2521
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
|
+
});
|
|
2522
2611
|
function openAt(index, row, focus = false) {
|
|
2523
2612
|
if ($.get(inPlace)) $.set(inPlaceSub, index, true);
|
|
2524
2613
|
else {
|
|
@@ -2664,9 +2753,9 @@ function MenuList_1($$anchor, $$props) {
|
|
|
2664
2753
|
$.delegate(["keydown"]);
|
|
2665
2754
|
//#endregion
|
|
2666
2755
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Block.svelte
|
|
2667
|
-
var root$
|
|
2756
|
+
var root$64 = $.from_html(`<div class="block svelte-dha4uu" data-inset="" data-role="block"><!></div>`);
|
|
2668
2757
|
function Block($$anchor, $$props) {
|
|
2669
|
-
var div = root$
|
|
2758
|
+
var div = root$64();
|
|
2670
2759
|
var node = $.child(div);
|
|
2671
2760
|
$.snippet(node, () => $$props.children);
|
|
2672
2761
|
$.reset(div);
|
|
@@ -2674,11 +2763,11 @@ function Block($$anchor, $$props) {
|
|
|
2674
2763
|
}
|
|
2675
2764
|
//#endregion
|
|
2676
2765
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/InlineEdit.svelte
|
|
2677
|
-
var root$
|
|
2766
|
+
var root$63 = $.from_html(`<textarea class="svelte-w5dys8"></textarea>`);
|
|
2678
2767
|
var root_1$40 = $.from_html(`<input type="text" class="svelte-w5dys8"/>`);
|
|
2679
2768
|
var root_2$25 = $.from_html(`<span data-role="box"><!></span>`);
|
|
2680
2769
|
var root_3$16 = $.from_html(`<span data-role="box"><span class="t clamp svelte-w5dys8"> </span></span>`);
|
|
2681
|
-
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>`);
|
|
2682
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>`);
|
|
2683
2772
|
function InlineEdit($$anchor, $$props) {
|
|
2684
2773
|
$.push($$props, true);
|
|
@@ -2743,7 +2832,7 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2743
2832
|
let classes;
|
|
2744
2833
|
var node_1 = $.child(span);
|
|
2745
2834
|
var consequent = ($$anchor) => {
|
|
2746
|
-
var textarea = root$
|
|
2835
|
+
var textarea = root$63();
|
|
2747
2836
|
$.remove_textarea_child(textarea);
|
|
2748
2837
|
$.set_attribute(textarea, "rows", 1);
|
|
2749
2838
|
$.bind_this(textarea, ($$value) => $.set(inputEl, $$value), () => $.get(inputEl));
|
|
@@ -2802,7 +2891,7 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2802
2891
|
$.append($$anchor, fragment_1);
|
|
2803
2892
|
};
|
|
2804
2893
|
var consequent_4 = ($$anchor) => {
|
|
2805
|
-
var button = root_4$
|
|
2894
|
+
var button = root_4$11();
|
|
2806
2895
|
let classes_2;
|
|
2807
2896
|
var span_3 = $.child(button);
|
|
2808
2897
|
var text_1 = $.only_child(span_3, true);
|
|
@@ -2848,11 +2937,11 @@ function InlineEdit($$anchor, $$props) {
|
|
|
2848
2937
|
$.delegate(["keydown", "click"]);
|
|
2849
2938
|
//#endregion
|
|
2850
2939
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Pair.svelte
|
|
2851
|
-
var root$
|
|
2940
|
+
var root$62 = $.from_html(`<label class="k svelte-kxn48z"> </label>`);
|
|
2852
2941
|
var root_1$39 = $.from_html(`<a class="k link svelte-kxn48z"> </a>`);
|
|
2853
2942
|
var root_2$24 = $.from_html(`<span class="k svelte-kxn48z"> </span>`);
|
|
2854
2943
|
var root_3$15 = $.from_html(`<span><!></span>`);
|
|
2855
|
-
var root_4$
|
|
2944
|
+
var root_4$10 = $.from_html(`<div class="row svelte-kxn48z"><!></div>`);
|
|
2856
2945
|
var root_5$6 = $.from_html(`<span class="note svelte-kxn48z"> </span>`);
|
|
2857
2946
|
var root_6$5 = $.from_html(`<div data-role="pair"><!> <!> <!></div>`);
|
|
2858
2947
|
function Pair($$anchor, $$props) {
|
|
@@ -2875,7 +2964,7 @@ function Pair($$anchor, $$props) {
|
|
|
2875
2964
|
let classes;
|
|
2876
2965
|
var node = $.child(div);
|
|
2877
2966
|
var consequent = ($$anchor) => {
|
|
2878
|
-
var label_1 = root$
|
|
2967
|
+
var label_1 = root$62();
|
|
2879
2968
|
let styles;
|
|
2880
2969
|
var text = $.only_child(label_1, true);
|
|
2881
2970
|
$.template_effect(() => {
|
|
@@ -2926,7 +3015,7 @@ function Pair($$anchor, $$props) {
|
|
|
2926
3015
|
$.append($$anchor, span_1);
|
|
2927
3016
|
};
|
|
2928
3017
|
var alternate_1 = ($$anchor) => {
|
|
2929
|
-
var div_1 = root_4$
|
|
3018
|
+
var div_1 = root_4$10();
|
|
2930
3019
|
var node_3 = $.child(div_1);
|
|
2931
3020
|
$.snippet(node_3, () => $$props.children);
|
|
2932
3021
|
$.reset(div_1);
|
|
@@ -2961,10 +3050,10 @@ function Pair($$anchor, $$props) {
|
|
|
2961
3050
|
}
|
|
2962
3051
|
//#endregion
|
|
2963
3052
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Kv.svelte
|
|
2964
|
-
var root$
|
|
3053
|
+
var root$61 = $.from_html(`<div data-role="list"></div>`);
|
|
2965
3054
|
function Kv($$anchor, $$props) {
|
|
2966
3055
|
let tight = $.prop($$props, "tight", 3, false);
|
|
2967
|
-
var div = root$
|
|
3056
|
+
var div = root$61();
|
|
2968
3057
|
let classes;
|
|
2969
3058
|
$.each(div, 21, () => $$props.items, $.index, ($$anchor, item) => {
|
|
2970
3059
|
{
|
|
@@ -3011,12 +3100,12 @@ function Kv($$anchor, $$props) {
|
|
|
3011
3100
|
}
|
|
3012
3101
|
//#endregion
|
|
3013
3102
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/LinkAction.svelte
|
|
3014
|
-
var root$
|
|
3103
|
+
var root$60 = $.from_html(`<!><span class="t svelte-3d5dxp"><!></span><!>`, 1);
|
|
3015
3104
|
var root_1$38 = $.from_html(`<a class="link svelte-3d5dxp" data-role="box"><!></a>`);
|
|
3016
3105
|
var root_2$23 = $.from_html(`<button type="button" class="link svelte-3d5dxp" data-role="box"><!></button>`);
|
|
3017
3106
|
function LinkAction($$anchor, $$props) {
|
|
3018
3107
|
const inner = ($$anchor) => {
|
|
3019
|
-
var fragment = root$
|
|
3108
|
+
var fragment = root$60();
|
|
3020
3109
|
var node = $.first_child(fragment);
|
|
3021
3110
|
var consequent = ($$anchor) => {
|
|
3022
3111
|
Icon($$anchor, { get name() {
|
|
@@ -3142,21 +3231,65 @@ var clampTip = (node) => {
|
|
|
3142
3231
|
};
|
|
3143
3232
|
//#endregion
|
|
3144
3233
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Text.svelte
|
|
3234
|
+
var root$59 = $.from_html(`<div data-edge-pass=""><!> <span><!></span></div>`);
|
|
3145
3235
|
function Text($$anchor, $$props) {
|
|
3146
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
|
+
};
|
|
3147
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);
|
|
3148
|
-
/** The type role (default body) */
|
|
3149
|
-
/** Another element than the role's own: h1 (title, h1), h2 (h2), p (body, prose) or span */
|
|
3150
|
-
/** One line with an ellipsis; the full text shows on hover when it is clipped */
|
|
3151
|
-
/** Two lines with an ellipsis */
|
|
3152
|
-
/** Keep line breaks and wrap long words (text that people wrote) */
|
|
3153
|
-
/** The muted text color */
|
|
3154
|
-
/** The monospace font, at the role's size */
|
|
3155
|
-
/** Figures of equal width, for columns of numbers and times */
|
|
3156
|
-
/** The labelled control, with as="label" */
|
|
3157
|
-
/** The target, with as="a" */
|
|
3158
3265
|
const tag = $.derived(() => $$props.as ?? (role() === "h1" || role() === "title" ? "h1" : role() === "h2" ? "h2" : role() === "prose" || role() === "body" ? "p" : "span"));
|
|
3159
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
|
+
});
|
|
3160
3293
|
const clampTipIf = (node, on) => {
|
|
3161
3294
|
let inner = on ? clampTip(node) : void 0;
|
|
3162
3295
|
return {
|
|
@@ -3172,31 +3305,35 @@ function Text($$anchor, $$props) {
|
|
|
3172
3305
|
}
|
|
3173
3306
|
};
|
|
3174
3307
|
};
|
|
3175
|
-
var
|
|
3176
|
-
var
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
})
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
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);
|
|
3198
3335
|
});
|
|
3199
|
-
$.append($$anchor,
|
|
3336
|
+
$.append($$anchor, fragment_2);
|
|
3200
3337
|
$.pop();
|
|
3201
3338
|
}
|
|
3202
3339
|
//#endregion
|
|
@@ -3300,7 +3437,7 @@ var root$57 = $.from_html(`<span class="lock svelte-167hfxz" role="img"><!></spa
|
|
|
3300
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>`);
|
|
3301
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>`);
|
|
3302
3439
|
var root_3$13 = $.from_html(`<!> <!>`, 1);
|
|
3303
|
-
var root_4$
|
|
3440
|
+
var root_4$9 = $.from_html(`<div class="attributes svelte-167hfxz"><!> <!></div>`);
|
|
3304
3441
|
function AttributeList($$anchor, $$props) {
|
|
3305
3442
|
$.push($$props, true);
|
|
3306
3443
|
let readonly = $.prop($$props, "readonly", 3, false), locked = $.prop($$props, "locked", 19, () => []);
|
|
@@ -3357,7 +3494,7 @@ function AttributeList($$anchor, $$props) {
|
|
|
3357
3494
|
if (next && $.get(draftRow)?.contains(next)) return;
|
|
3358
3495
|
add();
|
|
3359
3496
|
}
|
|
3360
|
-
var div = root_4$
|
|
3497
|
+
var div = root_4$9();
|
|
3361
3498
|
var node = $.child(div);
|
|
3362
3499
|
var consequent_2 = ($$anchor) => {
|
|
3363
3500
|
var fragment = $.comment();
|
|
@@ -3840,7 +3977,7 @@ var root$50 = $.from_html(`<span class="v svelte-gho7xv"> </span>`);
|
|
|
3840
3977
|
var root_1$31 = $.from_html(`<span class="v ph svelte-gho7xv" data-kata-placeholder=""> </span>`);
|
|
3841
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>`);
|
|
3842
3979
|
var root_3$12 = $.from_html(`<span class="t label svelte-gho7xv"> </span>`);
|
|
3843
|
-
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>`);
|
|
3844
3981
|
var root_5$5 = $.from_html(`<div role="listbox" tabindex="-1"></div>`);
|
|
3845
3982
|
var root_6$4 = $.from_html(`<button type="button" data-role="box" data-h="button" aria-haspopup="listbox"><!> <!></button> <!>`, 1);
|
|
3846
3983
|
function Select($$anchor, $$props) {
|
|
@@ -3858,29 +3995,17 @@ function Select($$anchor, $$props) {
|
|
|
3858
3995
|
width: 0,
|
|
3859
3996
|
maxHeight: 0
|
|
3860
3997
|
}));
|
|
3861
|
-
const GAP = 4;
|
|
3862
|
-
const EDGE = 8;
|
|
3863
|
-
const MIN_HEIGHT = 120;
|
|
3864
3998
|
const canPopover = typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
|
|
3865
3999
|
function place() {
|
|
3866
4000
|
if (!$.get(triggerEl) || !$.get(listEl)) return;
|
|
3867
4001
|
const r = $.get(triggerEl).getBoundingClientRect();
|
|
3868
|
-
const
|
|
3869
|
-
$.get(listEl).style.maxHeight = "";
|
|
3870
|
-
const natural = $.get(listEl).scrollHeight;
|
|
3871
|
-
$.get(listEl).style.maxHeight = keep;
|
|
3872
|
-
const below = window.innerHeight - r.bottom - GAP - EDGE;
|
|
3873
|
-
const above = r.top - GAP - EDGE;
|
|
3874
|
-
const up = below < Math.min(natural, MIN_HEIGHT) && above > below;
|
|
3875
|
-
const maxHeight = Math.max(MIN_HEIGHT, up ? above : below);
|
|
3876
|
-
const shown = Math.min(natural, maxHeight);
|
|
3877
|
-
const width = $.get(listEl).offsetWidth;
|
|
3878
|
-
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);
|
|
3879
4003
|
$.set(pos, {
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
4004
|
+
...placeBelow($.get(listEl), r, {
|
|
4005
|
+
align: "start",
|
|
4006
|
+
width
|
|
4007
|
+
}),
|
|
4008
|
+
width: Math.round(r.width)
|
|
3884
4009
|
}, true);
|
|
3885
4010
|
}
|
|
3886
4011
|
function items() {
|
|
@@ -3906,7 +4031,7 @@ function Select($$anchor, $$props) {
|
|
|
3906
4031
|
close(true);
|
|
3907
4032
|
}
|
|
3908
4033
|
$.user_effect(() => {
|
|
3909
|
-
if (!$.get(open) || !$.get(listEl)) return;
|
|
4034
|
+
if (!$.get(open) || !$.get(listEl) || !$.get(triggerEl)) return;
|
|
3910
4035
|
const el = $.get(listEl);
|
|
3911
4036
|
if (canPopover && !el.matches(":popover-open")) el.showPopover();
|
|
3912
4037
|
(async () => {
|
|
@@ -3917,6 +4042,7 @@ function Select($$anchor, $$props) {
|
|
|
3917
4042
|
const i = $$props.options.findIndex((o) => o.value === value());
|
|
3918
4043
|
focusAt(Math.max(0, i));
|
|
3919
4044
|
})();
|
|
4045
|
+
return follow($.get(triggerEl), el, place);
|
|
3920
4046
|
});
|
|
3921
4047
|
function onTriggerKey(e) {
|
|
3922
4048
|
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
@@ -3953,8 +4079,6 @@ function Select($$anchor, $$props) {
|
|
|
3953
4079
|
}
|
|
3954
4080
|
var fragment = root_6$4();
|
|
3955
4081
|
$.event("pointerdown", $.window, onPointerDown, true);
|
|
3956
|
-
$.event("resize", $.window, () => $.get(open) && place());
|
|
3957
|
-
$.event("scroll", $.window, () => $.get(open) && place());
|
|
3958
4082
|
var button = $.first_child(fragment);
|
|
3959
4083
|
let classes;
|
|
3960
4084
|
var node = $.child(button);
|
|
@@ -3983,7 +4107,7 @@ function Select($$anchor, $$props) {
|
|
|
3983
4107
|
let classes_1;
|
|
3984
4108
|
let styles;
|
|
3985
4109
|
$.each(div, 21, () => $$props.options, (opt) => opt.value, ($$anchor, opt) => {
|
|
3986
|
-
var button_1 = root_4$
|
|
4110
|
+
var button_1 = root_4$8();
|
|
3987
4111
|
let classes_2;
|
|
3988
4112
|
var span_2 = $.child(button_1);
|
|
3989
4113
|
var node_3 = $.child(span_2);
|
|
@@ -4069,7 +4193,7 @@ var root$49 = $.from_html(`<!> <!>`, 1);
|
|
|
4069
4193
|
var root_1$30 = $.from_html(`<div class="hue svelte-1kcz9da" role="slider" tabindex="0"><span class="knob svelte-1kcz9da"></span></div> <!>`, 1);
|
|
4070
4194
|
var root_2$19 = $.from_html(`<!> <!> <!>`, 1);
|
|
4071
4195
|
var root_3$11 = $.from_html(`<!> <div class="fmt svelte-1kcz9da"><!></div>`, 1);
|
|
4072
|
-
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);
|
|
4073
4197
|
var root_5$4 = $.from_html(`<div data-inset=""><!></div>`);
|
|
4074
4198
|
function ColorPicker($$anchor, $$props) {
|
|
4075
4199
|
$.push($$props, true);
|
|
@@ -4077,7 +4201,7 @@ function ColorPicker($$anchor, $$props) {
|
|
|
4077
4201
|
Stack($$anchor, {
|
|
4078
4202
|
gap: "sm",
|
|
4079
4203
|
children: ($$anchor, $$slotProps) => {
|
|
4080
|
-
var fragment_1 = root_4$
|
|
4204
|
+
var fragment_1 = root_4$7();
|
|
4081
4205
|
var node = $.first_child(fragment_1);
|
|
4082
4206
|
Row(node, {
|
|
4083
4207
|
between: true,
|
|
@@ -4685,6 +4809,7 @@ var rest_excludes$7 = /* @__PURE__ */ new Set([
|
|
|
4685
4809
|
"sel",
|
|
4686
4810
|
"rule",
|
|
4687
4811
|
"plain",
|
|
4812
|
+
"disabled",
|
|
4688
4813
|
"href",
|
|
4689
4814
|
"onclick",
|
|
4690
4815
|
"onkeydown",
|
|
@@ -4694,18 +4819,20 @@ var root$46 = $.from_html(`<a><!></a>`);
|
|
|
4694
4819
|
var root_1$29 = $.from_html(`<div><!></div>`);
|
|
4695
4820
|
function ListItem($$anchor, $$props) {
|
|
4696
4821
|
$.push($$props, true);
|
|
4697
|
-
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);
|
|
4698
4823
|
/** The columns of the item's grid (grid-template-columns) */
|
|
4699
4824
|
/** The item ends with an icon button: pad-sm at the right */
|
|
4700
4825
|
/** Selected: the raise surface and a blue line of two at the left */
|
|
4701
4826
|
/** A line under the item (not under the last one) */
|
|
4702
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 */
|
|
4703
4829
|
/** Renders a link */
|
|
4704
4830
|
/** Makes the item pressable (Enter and Space press it too) */
|
|
4705
4831
|
const clickable = $.derived(() => !plain() && !!($$props.onclick || $$props.href));
|
|
4832
|
+
const off = $.derived(() => disabled() && !plain() && !$$props.href && !!$$props.onclick);
|
|
4706
4833
|
function onKeyDown(e) {
|
|
4707
4834
|
$$props.onkeydown?.(e);
|
|
4708
|
-
if (e.defaultPrevented) return;
|
|
4835
|
+
if (e.defaultPrevented || $.get(off)) return;
|
|
4709
4836
|
if (e.key !== "Enter" && e.key !== " ") return;
|
|
4710
4837
|
if (e.target.closest("input, textarea, select, [contenteditable]")) return;
|
|
4711
4838
|
e.preventDefault();
|
|
@@ -4746,16 +4873,18 @@ function ListItem($$anchor, $$props) {
|
|
|
4746
4873
|
"data-rule": rule() ? "" : void 0,
|
|
4747
4874
|
...$.get(clickable) ? {
|
|
4748
4875
|
role: "button",
|
|
4749
|
-
tabindex: 0
|
|
4876
|
+
tabindex: $.get(off) ? void 0 : 0
|
|
4750
4877
|
} : {},
|
|
4751
|
-
|
|
4878
|
+
"aria-disabled": $.get(off) ? "true" : void 0,
|
|
4879
|
+
onclick: $.get(off) ? void 0 : $$props.onclick,
|
|
4752
4880
|
onkeydown: $.get(clickable) ? onKeyDown : $$props.onkeydown,
|
|
4753
4881
|
...rest,
|
|
4754
4882
|
[$.CLASS]: {
|
|
4755
4883
|
sel: sel(),
|
|
4756
4884
|
rule: rule(),
|
|
4757
4885
|
plain: plain(),
|
|
4758
|
-
tail: tail()
|
|
4886
|
+
tail: tail(),
|
|
4887
|
+
disabled: $.get(off)
|
|
4759
4888
|
},
|
|
4760
4889
|
[$.STYLE]: { "grid-template-columns": $$props.columns }
|
|
4761
4890
|
}), void 0, void 0, void 0, "svelte-rzjg5m");
|
|
@@ -4989,7 +5118,7 @@ var root$42 = $.from_html(`<div class="sub svelte-1nboboq"><!></div>`);
|
|
|
4989
5118
|
var root_1$24 = $.from_html(`<!> <!>`, 1);
|
|
4990
5119
|
var root_2$15 = $.from_html(`<!> <!> <div><!></div> <!>`, 1);
|
|
4991
5120
|
var root_3$9 = $.from_html(`<div data-role="modal" data-inline=""><!></div>`);
|
|
4992
|
-
var root_4$
|
|
5121
|
+
var root_4$6 = $.from_html(`<dialog data-role="modal" aria-modal="true"><!></dialog>`);
|
|
4993
5122
|
function Modal($$anchor, $$props) {
|
|
4994
5123
|
const titleId = $.props_id();
|
|
4995
5124
|
$.push($$props, true);
|
|
@@ -5259,7 +5388,7 @@ function Modal($$anchor, $$props) {
|
|
|
5259
5388
|
$.append($$anchor, div_2);
|
|
5260
5389
|
};
|
|
5261
5390
|
var alternate_2 = ($$anchor) => {
|
|
5262
|
-
var dialog_1 = root_4$
|
|
5391
|
+
var dialog_1 = root_4$6();
|
|
5263
5392
|
let classes_2;
|
|
5264
5393
|
var node_13 = $.child(dialog_1);
|
|
5265
5394
|
surface(node_13);
|
|
@@ -5820,7 +5949,7 @@ function InspectorRow($$anchor, $$props) {
|
|
|
5820
5949
|
}
|
|
5821
5950
|
//#endregion
|
|
5822
5951
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/NativeSelect.svelte
|
|
5823
|
-
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>`);
|
|
5824
5953
|
var root_1$21 = $.from_html(`<option class="svelte-1iprfoy"> </option>`);
|
|
5825
5954
|
var root_2$13 = $.from_html(`<optgroup></optgroup>`);
|
|
5826
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>`);
|
|
@@ -6676,7 +6805,7 @@ $.delegate([
|
|
|
6676
6805
|
var root_1$16 = $.from_html(`<a><span class="t svelte-dvdfj"> </span></a>`);
|
|
6677
6806
|
var root_2$10 = $.from_html(`<button type="button"><span class="t svelte-dvdfj"> </span></button>`);
|
|
6678
6807
|
var root_3$6 = $.from_html(`<button type="button" aria-haspopup="menu"><span class="t svelte-dvdfj"> </span><!></button>`);
|
|
6679
|
-
var root_4$
|
|
6808
|
+
var root_4$5 = $.from_html(`<span class="tab svelte-dvdfj"><span class="t svelte-dvdfj"> </span></span>`);
|
|
6680
6809
|
var root_5$3 = $.from_html(`<span class="tab more cur svelte-dvdfj"><span class="t svelte-dvdfj"> </span><!></span>`);
|
|
6681
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>`);
|
|
6682
6811
|
function Tabs($$anchor, $$props) {
|
|
@@ -6859,7 +6988,7 @@ function Tabs($$anchor, $$props) {
|
|
|
6859
6988
|
var span_3 = $.sibling(node_2, 2);
|
|
6860
6989
|
var node_5 = $.child(span_3);
|
|
6861
6990
|
$.each(node_5, 17, () => $$props.tabs, (t) => t.id, ($$anchor, t) => {
|
|
6862
|
-
var span_4 = root_4$
|
|
6991
|
+
var span_4 = root_4$5();
|
|
6863
6992
|
var span_5 = $.child(span_4);
|
|
6864
6993
|
var text_4 = $.only_child(span_5, true);
|
|
6865
6994
|
$.reset(span_4);
|
|
@@ -9402,7 +9531,7 @@ var root$23 = $.from_html(`<span data-grip="" aria-hidden="true"><!></span>`);
|
|
|
9402
9531
|
var root_1$12 = $.from_html(`<button class="chev svelte-19ffqlj" type="button" data-h="icon-button"><!></button>`);
|
|
9403
9532
|
var root_2$8 = $.from_html(`<span class="seat svelte-19ffqlj" aria-hidden="true"></span>`);
|
|
9404
9533
|
var root_3$5 = $.from_html(`<span class="keep-seat svelte-19ffqlj" aria-hidden="true"></span>`);
|
|
9405
|
-
var root_4$
|
|
9534
|
+
var root_4$4 = $.from_html(`<!> <span><!></span>`, 1);
|
|
9406
9535
|
var root_5$2 = $.from_html(`<!> <!> <span class="main svelte-19ffqlj"><!></span> <!>`, 1);
|
|
9407
9536
|
var root_6$2 = $.from_html(`<div><!></div>`);
|
|
9408
9537
|
function TreeRow($$anchor, $$props) {
|
|
@@ -9458,6 +9587,22 @@ function TreeRow($$anchor, $$props) {
|
|
|
9458
9587
|
if (frame) cancelAnimationFrame(frame);
|
|
9459
9588
|
};
|
|
9460
9589
|
});
|
|
9590
|
+
let rowEl = $.state(void 0);
|
|
9591
|
+
let menuOpen = $.state(false);
|
|
9592
|
+
$.user_effect(() => {
|
|
9593
|
+
const el = $.get(rowEl);
|
|
9594
|
+
if (!el) return;
|
|
9595
|
+
const from = /* @__PURE__ */ new Set();
|
|
9596
|
+
const onMenuToggle = (e) => {
|
|
9597
|
+
const target = e.target;
|
|
9598
|
+
if (!target) return;
|
|
9599
|
+
if (e.detail?.open) from.add(target);
|
|
9600
|
+
else from.delete(target);
|
|
9601
|
+
$.set(menuOpen, from.size > 0);
|
|
9602
|
+
};
|
|
9603
|
+
el.addEventListener("kata-menu-toggle", onMenuToggle);
|
|
9604
|
+
return () => el.removeEventListener("kata-menu-toggle", onMenuToggle);
|
|
9605
|
+
});
|
|
9461
9606
|
function toggle() {
|
|
9462
9607
|
expanded(!expanded());
|
|
9463
9608
|
$$props.ontoggle?.(expanded());
|
|
@@ -9480,6 +9625,7 @@ function TreeRow($$anchor, $$props) {
|
|
|
9480
9625
|
$.attribute_effect(div, () => ({
|
|
9481
9626
|
class: "tree-row",
|
|
9482
9627
|
"data-dim": hidden() || dimmed() || dragging() ? "" : void 0,
|
|
9628
|
+
"data-open": $.get(menuOpen) ? "" : void 0,
|
|
9483
9629
|
role: "treeitem",
|
|
9484
9630
|
"aria-selected": sel(),
|
|
9485
9631
|
"aria-expanded": expandable() ? expanded() : void 0,
|
|
@@ -9563,7 +9709,7 @@ function TreeRow($$anchor, $$props) {
|
|
|
9563
9709
|
$.reset(span_2);
|
|
9564
9710
|
var node_6 = $.sibling(span_2, 2);
|
|
9565
9711
|
var consequent_4 = ($$anchor) => {
|
|
9566
|
-
var fragment_1 = root_4$
|
|
9712
|
+
var fragment_1 = root_4$4();
|
|
9567
9713
|
var node_7 = $.first_child(fragment_1);
|
|
9568
9714
|
var consequent_3 = ($$anchor) => {
|
|
9569
9715
|
var span_3 = root_3$5();
|
|
@@ -9592,6 +9738,7 @@ function TreeRow($$anchor, $$props) {
|
|
|
9592
9738
|
});
|
|
9593
9739
|
}
|
|
9594
9740
|
$.reset(div);
|
|
9741
|
+
$.bind_this(div, ($$value) => $.set(rowEl, $$value), () => $.get(rowEl));
|
|
9595
9742
|
$.append($$anchor, div);
|
|
9596
9743
|
$.pop();
|
|
9597
9744
|
}
|
|
@@ -9640,7 +9787,7 @@ var trees = 0;
|
|
|
9640
9787
|
var root_1$11 = $.from_html(`<span class="rename svelte-1go7yvy"><!></span>`);
|
|
9641
9788
|
var root_2$7 = $.from_html(`<!> <!>`, 1);
|
|
9642
9789
|
var root_3$4 = $.from_html(`<!> <!> <!> <!>`, 1);
|
|
9643
|
-
var root_4$
|
|
9790
|
+
var root_4$3 = $.from_html(`<div data-subrows=""><!></div>`);
|
|
9644
9791
|
var root_5$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="group"></div>`);
|
|
9645
9792
|
var root_6$1 = $.from_html(`<div class="item svelte-1go7yvy" role="none" data-sortable-item=""><!> <!> <!></div>`);
|
|
9646
9793
|
var root_7$1 = $.from_html(`<div class="zone svelte-1go7yvy" role="none"></div>`);
|
|
@@ -9859,12 +10006,16 @@ function LayerTree($$anchor, $$props) {
|
|
|
9859
10006
|
});
|
|
9860
10007
|
var node_16 = $.sibling(node_15, 2);
|
|
9861
10008
|
var consequent_9 = ($$anchor) => {
|
|
9862
|
-
var div_1 = root_4$
|
|
10009
|
+
var div_1 = root_4$3();
|
|
10010
|
+
let classes;
|
|
9863
10011
|
let styles;
|
|
9864
10012
|
var node_17 = $.child(div_1);
|
|
9865
10013
|
$.snippet(node_17, () => $$props.subrows, node);
|
|
9866
10014
|
$.reset(div_1);
|
|
9867
|
-
$.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
|
+
});
|
|
9868
10019
|
$.append($$anchor, div_1);
|
|
9869
10020
|
};
|
|
9870
10021
|
$.if(node_16, ($$render) => {
|
|
@@ -10204,9 +10355,11 @@ function Sheet($$anchor, $$props) {
|
|
|
10204
10355
|
full: 1
|
|
10205
10356
|
};
|
|
10206
10357
|
const MIN_DRAG = 48;
|
|
10358
|
+
const MIN_MOVE = 4;
|
|
10207
10359
|
let el = $.state(void 0);
|
|
10208
10360
|
let dragH = $.state(null);
|
|
10209
10361
|
let dragging = $.state(false);
|
|
10362
|
+
let dragged = false;
|
|
10210
10363
|
let startY = 0;
|
|
10211
10364
|
let startH = 0;
|
|
10212
10365
|
let parentH = 0;
|
|
@@ -10216,8 +10369,12 @@ function Sheet($$anchor, $$props) {
|
|
|
10216
10369
|
stage(next);
|
|
10217
10370
|
$$props.onstage?.(next);
|
|
10218
10371
|
}
|
|
10219
|
-
function cycle() {
|
|
10372
|
+
function cycle(e) {
|
|
10220
10373
|
if ($.get(dragging)) return;
|
|
10374
|
+
if (dragged && e.detail > 0) {
|
|
10375
|
+
dragged = false;
|
|
10376
|
+
return;
|
|
10377
|
+
}
|
|
10221
10378
|
go(stages()[$.get(index) >= stages().length - 1 ? 0 : $.get(index) + 1]);
|
|
10222
10379
|
}
|
|
10223
10380
|
function down(e) {
|
|
@@ -10227,6 +10384,7 @@ function Sheet($$anchor, $$props) {
|
|
|
10227
10384
|
startH = $.get(el).getBoundingClientRect().height;
|
|
10228
10385
|
$.set(dragH, startH, true);
|
|
10229
10386
|
$.set(dragging, true);
|
|
10387
|
+
dragged = false;
|
|
10230
10388
|
e.currentTarget.setPointerCapture?.(e.pointerId);
|
|
10231
10389
|
}
|
|
10232
10390
|
function move(e) {
|
|
@@ -10234,18 +10392,22 @@ function Sheet($$anchor, $$props) {
|
|
|
10234
10392
|
const h = startH + (startY - e.clientY);
|
|
10235
10393
|
$.set(dragH, Math.max(MIN_DRAG, Math.min(parentH * .94, h)), true);
|
|
10236
10394
|
}
|
|
10237
|
-
function up() {
|
|
10395
|
+
function up(e) {
|
|
10238
10396
|
if (!$.get(dragging)) return;
|
|
10239
10397
|
$.set(dragging, false);
|
|
10240
|
-
const
|
|
10398
|
+
const h = $.get(dragH) ?? 0;
|
|
10241
10399
|
$.set(dragH, null);
|
|
10400
|
+
if (Math.abs(e.clientY - startY) < MIN_MOVE) return;
|
|
10401
|
+
dragged = true;
|
|
10402
|
+
const frac = h / (parentH || 1);
|
|
10242
10403
|
if (closable() && frac < FRAC[stages()[0]] * .55) {
|
|
10243
10404
|
$$props.onclose?.();
|
|
10244
10405
|
return;
|
|
10245
10406
|
}
|
|
10246
|
-
|
|
10407
|
+
const near = stages().filter((_, i) => h > startH ? i >= $.get(index) : h < startH ? i <= $.get(index) : true);
|
|
10408
|
+
let best = near[0];
|
|
10247
10409
|
let bestD = Number.POSITIVE_INFINITY;
|
|
10248
|
-
for (const s of
|
|
10410
|
+
for (const s of near) {
|
|
10249
10411
|
const d = Math.abs(FRAC[s] - frac);
|
|
10250
10412
|
if (d < bestD) {
|
|
10251
10413
|
bestD = d;
|
|
@@ -10499,10 +10661,10 @@ var root$19 = $.from_html(`<span class="status svelte-mk24w4"> </span>`);
|
|
|
10499
10661
|
var root_1$9 = $.from_html(`<p class="note svelte-mk24w4" data-role="caption"> </p>`);
|
|
10500
10662
|
var root_2$6 = $.from_html(`<div class="head svelte-mk24w4" data-role="row-inline"><h2 class="title svelte-mk24w4"> </h2> <!></div> <!>`, 1);
|
|
10501
10663
|
var root_3$3 = $.from_html(`<!> <div class="body svelte-mk24w4" data-pass=""><!></div>`, 1);
|
|
10502
|
-
var root_4$
|
|
10664
|
+
var root_4$2 = $.from_html(`<section data-role="section"><!></section>`);
|
|
10503
10665
|
function Section($$anchor, $$props) {
|
|
10504
10666
|
let gap = $.prop($$props, "gap", 3, "lg"), flush = $.prop($$props, "flush", 3, false);
|
|
10505
|
-
var section = root_4$
|
|
10667
|
+
var section = root_4$2();
|
|
10506
10668
|
let classes;
|
|
10507
10669
|
Stack($.child(section), {
|
|
10508
10670
|
gap: "lg",
|
|
@@ -10566,7 +10728,7 @@ function Section($$anchor, $$props) {
|
|
|
10566
10728
|
}
|
|
10567
10729
|
//#endregion
|
|
10568
10730
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stat.svelte
|
|
10569
|
-
var root$18 = $.from_html(`<div class="stat svelte-1hxotol" data-role="stat"><span class="v svelte-1hxotol"> </span> <span class="k svelte-1hxotol"><!><span class="t svelte-1hxotol"> </span></span></div>`);
|
|
10731
|
+
var root$18 = $.from_html(`<div class="stat svelte-1hxotol" data-role="stat" data-pass=""><span class="v svelte-1hxotol"> </span> <span class="k svelte-1hxotol"><!><span class="t svelte-1hxotol"> </span></span></div>`);
|
|
10570
10732
|
function Stat($$anchor, $$props) {
|
|
10571
10733
|
var div = root$18();
|
|
10572
10734
|
var span = $.child(div);
|
|
@@ -10593,7 +10755,7 @@ function Stat($$anchor, $$props) {
|
|
|
10593
10755
|
}
|
|
10594
10756
|
//#endregion
|
|
10595
10757
|
//#region ../node_modules/@sakuzu/kata/dist/svelte/components/Stats.svelte
|
|
10596
|
-
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>`);
|
|
10597
10759
|
function Stats($$anchor, $$props) {
|
|
10598
10760
|
var div = root$17();
|
|
10599
10761
|
var node = $.child(div);
|
|
@@ -11047,7 +11209,7 @@ function Veil($$anchor, $$props) {
|
|
|
11047
11209
|
var root_1$7 = $.from_html(`<div class="top svelte-8jke9d" data-region="top"><!></div>`);
|
|
11048
11210
|
var root_2$5 = $.from_html(`<div class="side left svelte-8jke9d" data-region="left"><!></div>`);
|
|
11049
11211
|
var root_3$2 = $.from_html(`<div class="surface svelte-8jke9d"><!></div>`);
|
|
11050
|
-
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>`);
|
|
11051
11213
|
var root_5 = $.from_html(`<div class="fab-column svelte-8jke9d" data-region="bottom"><!></div>`);
|
|
11052
11214
|
var root_6 = $.from_html(`<!> <div class="fab-seat svelte-8jke9d"><!></div>`, 1);
|
|
11053
11215
|
var root_7 = $.from_html(`<div class="top-float svelte-8jke9d" data-region="top"><!></div>`);
|
|
@@ -11132,7 +11294,7 @@ function Shell($$anchor, $$props) {
|
|
|
11132
11294
|
const sheetOf = (side) => side === "left" ? $$props.leftSheet : $$props.rightSheet;
|
|
11133
11295
|
const stagesOf = (side) => sheetOf(side)?.stages ?? ALL_STAGES;
|
|
11134
11296
|
const closableOf = (side) => sheetOf(side)?.closable ?? true;
|
|
11135
|
-
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)] : []);
|
|
11136
11298
|
/** The height a sheet shows: its stage while open, its lowest height while it rests */
|
|
11137
11299
|
function sheetStage(side) {
|
|
11138
11300
|
if (!shown(side)) return stagesOf(side)[0];
|
|
@@ -11378,7 +11540,7 @@ function Shell($$anchor, $$props) {
|
|
|
11378
11540
|
});
|
|
11379
11541
|
var node_7 = $.sibling(node_5, 2);
|
|
11380
11542
|
var consequent_3 = ($$anchor) => {
|
|
11381
|
-
var div_7 = root_4();
|
|
11543
|
+
var div_7 = root_4$1();
|
|
11382
11544
|
var node_8 = $.child(div_7);
|
|
11383
11545
|
$.snippet(node_8, () => $$props.bottom, () => ({ column: false }));
|
|
11384
11546
|
$.reset(div_7);
|
|
@@ -12246,9 +12408,10 @@ function toolbarShortcuts(draw, specs, messages, deletable) {
|
|
|
12246
12408
|
}
|
|
12247
12409
|
//#endregion
|
|
12248
12410
|
//#region src/components/Actions.svelte
|
|
12249
|
-
var root_1$6 = $.from_html(
|
|
12250
|
-
var root_2$4 = $.from_html(`<
|
|
12251
|
-
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>`);
|
|
12252
12415
|
function Actions($$anchor, $$props) {
|
|
12253
12416
|
$.push($$props, true);
|
|
12254
12417
|
const head = ($$anchor) => {
|
|
@@ -12268,7 +12431,30 @@ function Actions($$anchor, $$props) {
|
|
|
12268
12431
|
$$slots: { default: true }
|
|
12269
12432
|
});
|
|
12270
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
|
+
};
|
|
12271
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";
|
|
12272
12458
|
const RESERVE = "--mgd-ui-actions-reserve";
|
|
12273
12459
|
const list = $.derived(() => $$props.actions.list.get());
|
|
12274
12460
|
const version = $.derived(() => $$props.actions.version.get());
|
|
@@ -12290,10 +12476,12 @@ function Actions($$anchor, $$props) {
|
|
|
12290
12476
|
const attribution = () => $$props.corner?.querySelector(":scope > .maplibregl-control-container > .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib") ?? null;
|
|
12291
12477
|
const toolbar = (root) => root.querySelector("[data-region=\"bottom\"] [data-role=\"drawbar\"]");
|
|
12292
12478
|
const reopenButton = (root) => root.querySelector(":scope > [data-role=\"reopen\"] > [data-role=\"floating\"]");
|
|
12293
|
-
|
|
12479
|
+
/** Where the card goes, measured now: the room it reserves, its height above the bottom, and
|
|
12480
|
+
* the room above it; null while it is not on the page */
|
|
12481
|
+
function measure() {
|
|
12294
12482
|
const root = $.get(card)?.parentElement;
|
|
12295
12483
|
const el = floating();
|
|
12296
|
-
if (!root || !el) return;
|
|
12484
|
+
if (!root || !el) return null;
|
|
12297
12485
|
const box = root.getBoundingClientRect();
|
|
12298
12486
|
const r = el.getBoundingClientRect();
|
|
12299
12487
|
const scale = bottomLeft()?.getBoundingClientRect();
|
|
@@ -12304,11 +12492,41 @@ function Actions($$anchor, $$props) {
|
|
|
12304
12492
|
if (b && b.width > 0 && b.height > 0 && r.right > b.left && r.left < b.right) next = Math.max(next, box.bottom - b.top);
|
|
12305
12493
|
next = Math.max(0, Math.round(next));
|
|
12306
12494
|
const reserve = `${Math.max(0, Math.round(r.height + (box.bottom - r.bottom) + (next - $.get(bottom))))}px`;
|
|
12307
|
-
if (root.style.getPropertyValue(RESERVE) !== reserve) root.style.setProperty(RESERVE, reserve);
|
|
12308
|
-
$.set(bottom, next, true);
|
|
12309
12495
|
const button = reopen() ? reopenButton(root)?.getBoundingClientRect() : void 0;
|
|
12310
12496
|
const above = button && button.height > 0 ? button.height : 0;
|
|
12311
|
-
|
|
12497
|
+
return {
|
|
12498
|
+
root,
|
|
12499
|
+
reserve,
|
|
12500
|
+
bottom: next,
|
|
12501
|
+
room: Math.max(0, Math.round(box.height - next - above))
|
|
12502
|
+
};
|
|
12503
|
+
}
|
|
12504
|
+
/** Writes a place measured before */
|
|
12505
|
+
function write(at) {
|
|
12506
|
+
const { root, reserve } = at;
|
|
12507
|
+
if (root.style.getPropertyValue(RESERVE) !== reserve) root.style.setProperty(RESERVE, reserve);
|
|
12508
|
+
$.set(bottom, at.bottom, true);
|
|
12509
|
+
$.set(room, at.room, true);
|
|
12510
|
+
}
|
|
12511
|
+
let frame = 0;
|
|
12512
|
+
/** Places the card now */
|
|
12513
|
+
function place() {
|
|
12514
|
+
if (frame) cancelAnimationFrame(frame);
|
|
12515
|
+
frame = 0;
|
|
12516
|
+
const at = measure();
|
|
12517
|
+
if (at) write(at);
|
|
12518
|
+
}
|
|
12519
|
+
/**
|
|
12520
|
+
* An observer's delivery: measures now and writes in the next frame, so that what the writes
|
|
12521
|
+
* move is not measured again in the same delivery
|
|
12522
|
+
*/
|
|
12523
|
+
function placeLater() {
|
|
12524
|
+
const at = measure();
|
|
12525
|
+
if (frame) cancelAnimationFrame(frame);
|
|
12526
|
+
frame = at ? requestAnimationFrame(() => {
|
|
12527
|
+
frame = 0;
|
|
12528
|
+
write(at);
|
|
12529
|
+
}) : 0;
|
|
12312
12530
|
}
|
|
12313
12531
|
$.user_effect(() => {
|
|
12314
12532
|
const el = $.get(card) && floating();
|
|
@@ -12322,7 +12540,7 @@ function Actions($$anchor, $$props) {
|
|
|
12322
12540
|
place();
|
|
12323
12541
|
return () => root.style.removeProperty(RESERVE);
|
|
12324
12542
|
}
|
|
12325
|
-
const observer = new ResizeObserver(() =>
|
|
12543
|
+
const observer = new ResizeObserver(() => placeLater());
|
|
12326
12544
|
let bar = null;
|
|
12327
12545
|
const watch = () => {
|
|
12328
12546
|
bar = toolbar(root);
|
|
@@ -12340,26 +12558,28 @@ function Actions($$anchor, $$props) {
|
|
|
12340
12558
|
const mutations = typeof MutationObserver === "undefined" || !shell ? null : new MutationObserver(() => {
|
|
12341
12559
|
if (toolbar(root) === bar) return;
|
|
12342
12560
|
watch();
|
|
12343
|
-
|
|
12561
|
+
placeLater();
|
|
12344
12562
|
});
|
|
12345
12563
|
mutations?.observe(shell, {
|
|
12346
12564
|
childList: true,
|
|
12347
12565
|
subtree: true
|
|
12348
12566
|
});
|
|
12349
|
-
const moves = typeof MutationObserver === "undefined" || !$$props.corner ? null : new MutationObserver(() =>
|
|
12567
|
+
const moves = typeof MutationObserver === "undefined" || !$$props.corner ? null : new MutationObserver(() => placeLater());
|
|
12350
12568
|
if ($$props.corner) moves?.observe($$props.corner, {
|
|
12351
12569
|
attributes: true,
|
|
12352
12570
|
attributeFilter: ["style"]
|
|
12353
12571
|
});
|
|
12354
12572
|
place();
|
|
12355
12573
|
return () => {
|
|
12574
|
+
if (frame) cancelAnimationFrame(frame);
|
|
12575
|
+
frame = 0;
|
|
12356
12576
|
observer.disconnect();
|
|
12357
12577
|
mutations?.disconnect();
|
|
12358
12578
|
moves?.disconnect();
|
|
12359
12579
|
root.style.removeProperty(RESERVE);
|
|
12360
12580
|
};
|
|
12361
12581
|
});
|
|
12362
|
-
var div =
|
|
12582
|
+
var div = root_4();
|
|
12363
12583
|
$.event("resize", $.window, place);
|
|
12364
12584
|
var node = $.child(div);
|
|
12365
12585
|
{
|
|
@@ -12373,10 +12593,10 @@ function Actions($$anchor, $$props) {
|
|
|
12373
12593
|
return $.get($1);
|
|
12374
12594
|
},
|
|
12375
12595
|
children: ($$anchor, $$slotProps) => {
|
|
12376
|
-
var
|
|
12377
|
-
var node_1 = $.first_child(
|
|
12378
|
-
var
|
|
12379
|
-
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();
|
|
12380
12600
|
let styles;
|
|
12381
12601
|
SectionHeader($.child(div_1), {
|
|
12382
12602
|
get label() {
|
|
@@ -12385,100 +12605,168 @@ function Actions($$anchor, $$props) {
|
|
|
12385
12605
|
get actions() {
|
|
12386
12606
|
return head;
|
|
12387
12607
|
},
|
|
12608
|
+
flush: true,
|
|
12388
12609
|
children: ($$anchor, $$slotProps) => {
|
|
12389
|
-
|
|
12390
|
-
|
|
12391
|
-
|
|
12392
|
-
|
|
12393
|
-
|
|
12394
|
-
|
|
12395
|
-
|
|
12396
|
-
|
|
12397
|
-
|
|
12398
|
-
|
|
12399
|
-
|
|
12400
|
-
|
|
12401
|
-
|
|
12402
|
-
|
|
12403
|
-
|
|
12404
|
-
|
|
12405
|
-
|
|
12406
|
-
|
|
12407
|
-
|
|
12408
|
-
|
|
12409
|
-
|
|
12410
|
-
|
|
12411
|
-
|
|
12412
|
-
|
|
12413
|
-
|
|
12414
|
-
|
|
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
|
+
});
|
|
12415
12758
|
}
|
|
12759
|
+
};
|
|
12760
|
+
$.if(node_4, ($$render) => {
|
|
12761
|
+
if ($.get(spec).kind === "toggle") $$render(consequent_2);
|
|
12762
|
+
else $$render(alternate_2, -1);
|
|
12416
12763
|
});
|
|
12417
|
-
|
|
12418
|
-
};
|
|
12419
|
-
var alternate = ($$anchor) => {
|
|
12420
|
-
{
|
|
12421
|
-
let $0 = $.derived(() => read($.get(spec), "disabled"));
|
|
12422
|
-
Button($$anchor, {
|
|
12423
|
-
block: true,
|
|
12424
|
-
get disabled() {
|
|
12425
|
-
return $.get($0);
|
|
12426
|
-
},
|
|
12427
|
-
onclick: () => runAction($$props.actions, $.get(spec)),
|
|
12428
|
-
children: ($$anchor, $$slotProps) => {
|
|
12429
|
-
$.next();
|
|
12430
|
-
var text = $.text();
|
|
12431
|
-
$.template_effect(() => $.set_text(text, $.get(spec).label));
|
|
12432
|
-
$.append($$anchor, text);
|
|
12433
|
-
},
|
|
12434
|
-
$$slots: { default: true }
|
|
12435
|
-
});
|
|
12436
|
-
}
|
|
12437
|
-
};
|
|
12438
|
-
$.if(node_4, ($$render) => {
|
|
12439
|
-
if ($.get(spec).kind === "toggle") $$render(consequent);
|
|
12440
|
-
else $$render(alternate, -1);
|
|
12441
|
-
});
|
|
12442
|
-
$.reset(div_4);
|
|
12443
|
-
var node_5 = $.sibling(div_4, 2);
|
|
12444
|
-
var consequent_1 = ($$anchor) => {
|
|
12445
|
-
Kbd($$anchor, {
|
|
12446
|
-
bare: true,
|
|
12447
|
-
children: ($$anchor, $$slotProps) => {
|
|
12448
|
-
$.next();
|
|
12449
|
-
var text_1 = $.text();
|
|
12450
|
-
$.template_effect(() => $.set_text(text_1, $.get(key)));
|
|
12451
|
-
$.append($$anchor, text_1);
|
|
12452
|
-
},
|
|
12453
|
-
$$slots: { default: true }
|
|
12454
|
-
});
|
|
12455
|
-
};
|
|
12456
|
-
$.if(node_5, ($$render) => {
|
|
12457
|
-
if ($.get(key)) $$render(consequent_1);
|
|
12458
|
-
});
|
|
12459
|
-
$.reset(div_3);
|
|
12460
|
-
var node_6 = $.sibling(div_3, 2);
|
|
12461
|
-
var consequent_2 = ($$anchor) => {
|
|
12462
|
-
Text($$anchor, {
|
|
12463
|
-
role: "caption",
|
|
12464
|
-
muted: true,
|
|
12465
|
-
children: ($$anchor, $$slotProps) => {
|
|
12466
|
-
$.next();
|
|
12467
|
-
var text_2 = $.text();
|
|
12468
|
-
$.template_effect(() => $.set_text(text_2, $.get(spec).hint));
|
|
12469
|
-
$.append($$anchor, text_2);
|
|
12470
|
-
},
|
|
12471
|
-
$$slots: { default: true }
|
|
12764
|
+
$.append($$anchor, fragment_6);
|
|
12472
12765
|
});
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
});
|
|
12477
|
-
$.reset(div_2);
|
|
12478
|
-
$.template_effect(() => $.set_attribute(div_2, "data-action", $.get(spec).id));
|
|
12479
|
-
$.append($$anchor, div_2);
|
|
12766
|
+
$.append($$anchor, fragment_5);
|
|
12767
|
+
},
|
|
12768
|
+
$$slots: { default: true }
|
|
12480
12769
|
});
|
|
12481
|
-
$.append($$anchor, fragment_3);
|
|
12482
12770
|
},
|
|
12483
12771
|
$$slots: { default: true }
|
|
12484
12772
|
});
|
|
@@ -12486,7 +12774,7 @@ function Actions($$anchor, $$props) {
|
|
|
12486
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)` }));
|
|
12487
12775
|
$.append($$anchor, div_1);
|
|
12488
12776
|
};
|
|
12489
|
-
var
|
|
12777
|
+
var alternate_3 = ($$anchor) => {
|
|
12490
12778
|
Button($$anchor, {
|
|
12491
12779
|
variant: "ghost",
|
|
12492
12780
|
"aria-expanded": "false",
|
|
@@ -12495,18 +12783,18 @@ function Actions($$anchor, $$props) {
|
|
|
12495
12783
|
},
|
|
12496
12784
|
children: ($$anchor, $$slotProps) => {
|
|
12497
12785
|
$.next();
|
|
12498
|
-
var
|
|
12499
|
-
$.template_effect(() => $.set_text(
|
|
12500
|
-
$.append($$anchor,
|
|
12786
|
+
var text_6 = $.text();
|
|
12787
|
+
$.template_effect(() => $.set_text(text_6, $$props.title));
|
|
12788
|
+
$.append($$anchor, text_6);
|
|
12501
12789
|
},
|
|
12502
12790
|
$$slots: { default: true }
|
|
12503
12791
|
});
|
|
12504
12792
|
};
|
|
12505
12793
|
$.if(node_1, ($$render) => {
|
|
12506
|
-
if ($.get(open)) $$render(
|
|
12507
|
-
else $$render(
|
|
12794
|
+
if ($.get(open)) $$render(consequent_5);
|
|
12795
|
+
else $$render(alternate_3, -1);
|
|
12508
12796
|
});
|
|
12509
|
-
$.append($$anchor,
|
|
12797
|
+
$.append($$anchor, fragment_3);
|
|
12510
12798
|
},
|
|
12511
12799
|
$$slots: { default: true }
|
|
12512
12800
|
});
|
|
@@ -14912,7 +15200,7 @@ function Inspector($$anchor, $$props) {
|
|
|
14912
15200
|
/** The sections the application added */
|
|
14913
15201
|
/** Called by the close button; clears the selection when left out */
|
|
14914
15202
|
/** Whether it is in a sheet, whose width the panel takes */
|
|
14915
|
-
const view = $.derived(() => follow($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
|
|
15203
|
+
const view = $.derived(() => follow$1($$props.draw, INSPECTOR_EVENTS, () => readView($$props.draw)));
|
|
14916
15204
|
const v = $.derived(() => $.get(view).get());
|
|
14917
15205
|
const m = $.derived(() => $$props.messages.get());
|
|
14918
15206
|
let tab = $.state(void 0);
|
|
@@ -15712,7 +16000,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15712
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);
|
|
15713
16001
|
const m = $.derived(() => $$props.messages.get());
|
|
15714
16002
|
const FEATURE_LIMIT = 1e3;
|
|
15715
|
-
const tree = $.derived(() => follow($$props.draw, [
|
|
16003
|
+
const tree = $.derived(() => follow$1($$props.draw, [
|
|
15716
16004
|
"document.changed",
|
|
15717
16005
|
"hidden.changed",
|
|
15718
16006
|
"options.changed",
|
|
@@ -15724,7 +16012,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15724
16012
|
limit: features() === true ? FEATURE_LIMIT : features() === false ? 0 : features(),
|
|
15725
16013
|
datasets: datasets()
|
|
15726
16014
|
})));
|
|
15727
|
-
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() : []));
|
|
15728
16016
|
$.user_effect(() => {
|
|
15729
16017
|
const refresh = $.get(tree).refresh;
|
|
15730
16018
|
const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
|
|
@@ -15734,7 +16022,7 @@ function LayerPanel($$anchor, $$props) {
|
|
|
15734
16022
|
for (const off of offs) off();
|
|
15735
16023
|
};
|
|
15736
16024
|
});
|
|
15737
|
-
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()));
|
|
15738
16026
|
const nodes = $.derived(() => $.get(tree).get());
|
|
15739
16027
|
const index = $.derived(() => indexNodes($.get(nodes)));
|
|
15740
16028
|
const selected = $.derived(() => selectedIds($.get(selection).get()));
|
|
@@ -16081,13 +16369,13 @@ var root_1$2 = $.from_html(`<div class="legend svelte-pswzrf" data-role="legend"
|
|
|
16081
16369
|
function Legend($$anchor, $$props) {
|
|
16082
16370
|
$.push($$props, true);
|
|
16083
16371
|
const m = $.derived(() => $$props.messages.get());
|
|
16084
|
-
const legend = $.derived(() => follow($$props.draw, [
|
|
16372
|
+
const legend = $.derived(() => follow$1($$props.draw, [
|
|
16085
16373
|
"document.changed",
|
|
16086
16374
|
"dataset.added",
|
|
16087
16375
|
"dataset.removed",
|
|
16088
16376
|
"dataset.reordered"
|
|
16089
16377
|
], () => legendBlocks($$props.draw, $$props.messages.get())));
|
|
16090
|
-
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()));
|
|
16091
16379
|
$.user_effect(() => {
|
|
16092
16380
|
const refresh = $.get(legend).refresh;
|
|
16093
16381
|
const offs = $.get(datasetList).get().map((dataset) => dataset.on("changed", ({ reason }) => {
|
|
@@ -16355,7 +16643,7 @@ function SnappingSettings($$anchor, $$props) {
|
|
|
16355
16643
|
word: "snapGuide"
|
|
16356
16644
|
}
|
|
16357
16645
|
];
|
|
16358
|
-
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()));
|
|
16359
16647
|
const now = $.derived(() => $.get(options).get());
|
|
16360
16648
|
const snapping = $.derived(() => $.get(now).snapping ?? {});
|
|
16361
16649
|
const enabled = $.derived(() => $.get(snapping).enabled !== false);
|
|
@@ -16560,9 +16848,10 @@ function Toolbar($$anchor, $$props) {
|
|
|
16560
16848
|
/** Whether the delete button shows */
|
|
16561
16849
|
/** Whether the magnet of snapping shows */
|
|
16562
16850
|
/** Whether the tooltips show the keys (when the keyboard shortcuts are on) */
|
|
16563
|
-
const mode = $.derived(() => follow($$props.draw, ["mode.changed"], () => $$props.draw.getMode()));
|
|
16564
|
-
const selected = $.derived(() => follow($$props.draw, ["selection.changed"], () => $$props.draw.selection.get().ids.length));
|
|
16565
|
-
const
|
|
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));
|
|
16566
16855
|
let settings = $.state(void 0);
|
|
16567
16856
|
const m = $.derived(() => $$props.messages.get());
|
|
16568
16857
|
const specs = $.derived(() => $$props.tools.get().map((entry) => toSpec(entry, $.get(m))));
|
|
@@ -16577,7 +16866,7 @@ function Toolbar($$anchor, $$props) {
|
|
|
16577
16866
|
kbd: keys() ? formatShortcut("delete") : void 0,
|
|
16578
16867
|
group: DELETE_ID,
|
|
16579
16868
|
tone: "danger",
|
|
16580
|
-
disabled: $.get(selected).get() === 0
|
|
16869
|
+
disabled: $.get(selected).get() === 0 || $.get(readOnly).get()
|
|
16581
16870
|
}] : []]);
|
|
16582
16871
|
const toggles = $.derived(() => snapping() ? [{
|
|
16583
16872
|
id: SNAPPING_ID,
|
|
@@ -16751,7 +17040,7 @@ function DrawUI($$anchor, $$props) {
|
|
|
16751
17040
|
};
|
|
16752
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);
|
|
16753
17042
|
const inspectorSettings = $.derived(() => $$props.inspector.get());
|
|
16754
|
-
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));
|
|
16755
17044
|
const choosable = $.derived(() => !!$$props.basemaps && $$props.basemaps.list.length >= 2);
|
|
16756
17045
|
let basemapOpen = $.state(false);
|
|
16757
17046
|
function openBasemaps() {
|
|
@@ -16792,10 +17081,11 @@ function DrawUI($$anchor, $$props) {
|
|
|
16792
17081
|
bottom: 0,
|
|
16793
17082
|
left: 0
|
|
16794
17083
|
};
|
|
17084
|
+
const narrow = $.get(layout)?.width === "narrow";
|
|
16795
17085
|
$.get(bar);
|
|
16796
17086
|
if (!$$props.oninset) return;
|
|
16797
17087
|
const report = $$props.oninset;
|
|
16798
|
-
tick().then(() => report(now));
|
|
17088
|
+
tick().then(() => report(now, narrow));
|
|
16799
17089
|
});
|
|
16800
17090
|
const SUN_ICON = Sun;
|
|
16801
17091
|
const MOON_ICON = Moon;
|
|
@@ -16989,42 +17279,97 @@ function DrawUI($$anchor, $$props) {
|
|
|
16989
17279
|
}
|
|
16990
17280
|
//#endregion
|
|
16991
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";
|
|
16992
17285
|
/**
|
|
16993
17286
|
* Adds maplibre-gl's controls to a map: all four with `true` or `undefined`, none with `false`,
|
|
16994
17287
|
* those not set to false with an object.
|
|
16995
17288
|
*
|
|
16996
17289
|
* maplibre-gl puts a control added to a bottom corner above those already there, so the controls
|
|
16997
|
-
* 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.
|
|
16998
17299
|
*/
|
|
16999
17300
|
function mapControls(map, option) {
|
|
17000
17301
|
const want = option === false ? null : option === true || option === void 0 ? {} : option;
|
|
17001
17302
|
const added = [];
|
|
17303
|
+
let wideOnly = [];
|
|
17304
|
+
let narrow = false;
|
|
17305
|
+
let destroyed = false;
|
|
17002
17306
|
const add = (control, position) => {
|
|
17003
17307
|
map.addControl(control, position);
|
|
17004
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"));
|
|
17005
17326
|
};
|
|
17006
17327
|
if (want) {
|
|
17007
17328
|
if (want.zoom !== false) add(new NavigationControl({
|
|
17008
17329
|
showZoom: true,
|
|
17009
17330
|
showCompass: false
|
|
17010
17331
|
}), "bottom-right");
|
|
17011
|
-
|
|
17012
|
-
showZoom: false,
|
|
17013
|
-
showCompass: true,
|
|
17014
|
-
visualizePitch: true
|
|
17015
|
-
}), "bottom-right");
|
|
17016
|
-
if (want.globe !== false) add(new GlobeControl(), "bottom-right");
|
|
17332
|
+
addWideOnly();
|
|
17017
17333
|
if (want.scale !== false) add(new ScaleControl(), "bottom-left");
|
|
17018
17334
|
}
|
|
17019
|
-
|
|
17020
|
-
|
|
17021
|
-
|
|
17022
|
-
|
|
17023
|
-
|
|
17024
|
-
|
|
17025
|
-
|
|
17026
|
-
|
|
17027
|
-
|
|
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
|
+
};
|
|
17028
17373
|
}
|
|
17029
17374
|
/** The attribute on the map's container while the interface lifts its bottom corners */
|
|
17030
17375
|
var LIFT_ATTRIBUTE = "data-mgd-ui-lift";
|
|
@@ -17051,14 +17396,18 @@ var upDown = (a, b) => a.top < b.bottom && b.top < a.bottom;
|
|
|
17051
17396
|
* while the right region covers the stage (the inset's right) and they are under it up and
|
|
17052
17397
|
* down: by the inset and gap-md
|
|
17053
17398
|
* - --mgd-ui-lift-left also lifts the bottom left corner above the attribution's box while that
|
|
17054
|
-
* 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
|
|
17055
17401
|
*
|
|
17056
17402
|
* The boxes are measured where maplibre-gl places them, without what this moved. The attribution
|
|
17057
|
-
* and the right region are followed with a ResizeObserver, as the toolbar and the corners are
|
|
17403
|
+
* and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
|
|
17404
|
+
* the boxes are read in the observer's delivery and the custom properties are written in the next
|
|
17405
|
+
* frame, so that what they move is not measured again in the same delivery.
|
|
17058
17406
|
*/
|
|
17059
17407
|
function cornerLift(container, root) {
|
|
17060
17408
|
let destroyed = false;
|
|
17061
17409
|
let observer;
|
|
17410
|
+
let frame = 0;
|
|
17062
17411
|
let observed = [];
|
|
17063
17412
|
let inset = {
|
|
17064
17413
|
top: 0,
|
|
@@ -17066,6 +17415,7 @@ function cornerLift(container, root) {
|
|
|
17066
17415
|
bottom: 0,
|
|
17067
17416
|
left: 0
|
|
17068
17417
|
};
|
|
17418
|
+
let narrow = false;
|
|
17069
17419
|
let now = {
|
|
17070
17420
|
left: 0,
|
|
17071
17421
|
right: 0,
|
|
@@ -17101,12 +17451,13 @@ function cornerLift(container, root) {
|
|
|
17101
17451
|
container.style.setProperty("--mgd-ui-lift-right", `${right}px`);
|
|
17102
17452
|
container.style.setProperty("--mgd-ui-shift-right", `${shift}px`);
|
|
17103
17453
|
}
|
|
17104
|
-
|
|
17105
|
-
|
|
17106
|
-
if (!container.isConnected) {
|
|
17107
|
-
|
|
17108
|
-
|
|
17109
|
-
|
|
17454
|
+
/** What to apply, measured now: the lift of each corner and the shift of the right controls */
|
|
17455
|
+
function measure() {
|
|
17456
|
+
if (!container.isConnected) return {
|
|
17457
|
+
left: 0,
|
|
17458
|
+
right: 0,
|
|
17459
|
+
shift: 0
|
|
17460
|
+
};
|
|
17110
17461
|
const box = container.getBoundingClientRect();
|
|
17111
17462
|
const place = (side) => {
|
|
17112
17463
|
const el = corner(side);
|
|
@@ -17138,13 +17489,34 @@ function cornerLift(container, root) {
|
|
|
17138
17489
|
}
|
|
17139
17490
|
}
|
|
17140
17491
|
let liftLeft = reachesBar(left) ? band : 0;
|
|
17141
|
-
const attrib = attribution()?.getBoundingClientRect();
|
|
17492
|
+
const attrib = narrow ? void 0 : attribution()?.getBoundingClientRect();
|
|
17142
17493
|
if (left && attrib && attrib.width > 0 && attrib.height > 0) {
|
|
17143
17494
|
const a = moved(attrib, 0, now.right - liftRight);
|
|
17144
17495
|
const l = moved(left, 0, -liftLeft);
|
|
17145
17496
|
if (across(a, l) && upDown(a, l)) liftLeft = Math.round(left.bottom - a.top);
|
|
17146
17497
|
}
|
|
17147
|
-
|
|
17498
|
+
return {
|
|
17499
|
+
left: Math.max(0, liftLeft),
|
|
17500
|
+
right: liftRight,
|
|
17501
|
+
shift
|
|
17502
|
+
};
|
|
17503
|
+
}
|
|
17504
|
+
function apply() {
|
|
17505
|
+
if (destroyed) return;
|
|
17506
|
+
if (frame) cancelAnimationFrame(frame);
|
|
17507
|
+
frame = 0;
|
|
17508
|
+
const next = measure();
|
|
17509
|
+
set(next.left, next.right, next.shift);
|
|
17510
|
+
}
|
|
17511
|
+
/** The observer's delivery: measures now, and writes in the next frame */
|
|
17512
|
+
function delivered() {
|
|
17513
|
+
if (destroyed) return;
|
|
17514
|
+
const next = measure();
|
|
17515
|
+
if (frame) cancelAnimationFrame(frame);
|
|
17516
|
+
frame = requestAnimationFrame(() => {
|
|
17517
|
+
frame = 0;
|
|
17518
|
+
if (!destroyed) set(next.left, next.right, next.shift);
|
|
17519
|
+
});
|
|
17148
17520
|
}
|
|
17149
17521
|
function follow() {
|
|
17150
17522
|
const next = [
|
|
@@ -17159,19 +17531,22 @@ function cornerLift(container, root) {
|
|
|
17159
17531
|
observer?.disconnect();
|
|
17160
17532
|
observed = next;
|
|
17161
17533
|
if (typeof ResizeObserver === "undefined") return;
|
|
17162
|
-
observer ??= new ResizeObserver(
|
|
17534
|
+
observer ??= new ResizeObserver(delivered);
|
|
17163
17535
|
for (const el of observed) observer.observe(el);
|
|
17164
17536
|
}
|
|
17165
17537
|
return {
|
|
17166
|
-
update(next) {
|
|
17538
|
+
update(next, nextNarrow) {
|
|
17167
17539
|
if (destroyed) return;
|
|
17168
17540
|
if (next) inset = { ...next };
|
|
17541
|
+
if (nextNarrow !== void 0) narrow = nextNarrow;
|
|
17169
17542
|
follow();
|
|
17170
17543
|
apply();
|
|
17171
17544
|
},
|
|
17172
17545
|
destroy() {
|
|
17173
17546
|
if (destroyed) return;
|
|
17174
17547
|
destroyed = true;
|
|
17548
|
+
if (frame) cancelAnimationFrame(frame);
|
|
17549
|
+
frame = 0;
|
|
17175
17550
|
observer?.disconnect();
|
|
17176
17551
|
observer = void 0;
|
|
17177
17552
|
observed = [];
|
|
@@ -17233,6 +17608,87 @@ function mapPadding(map) {
|
|
|
17233
17608
|
};
|
|
17234
17609
|
}
|
|
17235
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
|
|
17236
17692
|
//#region src/theme.ts
|
|
17237
17693
|
/** The query of the system's preference that `auto` follows */
|
|
17238
17694
|
var LIGHT_QUERY = "(prefers-color-scheme: light)";
|
|
@@ -17366,12 +17822,15 @@ function toolsHandle(tools, messages, actions) {
|
|
|
17366
17822
|
* inspector on the right while something is selected. The map's padding follows the interface:
|
|
17367
17823
|
* the room the left panel takes (beside the map or floating over it) at the left and the sheets
|
|
17368
17824
|
* at the bottom, so that `fitBounds` and `easeTo` keep clear of them; `destroy()` gives the map
|
|
17369
|
-
* 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
|
|
17370
17828
|
* basemaps of `options.basemaps` to choose from on the right, in the place of the inspector, when
|
|
17371
17829
|
* there are two or more. A button at the top right switches between the
|
|
17372
17830
|
* light and the dark look, and maplibre-gl's own controls go to the bottom corners of the map (the
|
|
17373
17831
|
* globe, the compass and the zoom at the right, the scale at the left), which move out of the way
|
|
17374
|
-
* 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
|
|
17375
17834
|
* the application (`options.actions`, `ui.actions`) are rows of a card at the bottom left, above
|
|
17376
17835
|
* the scale and the attribution, each with its key.
|
|
17377
17836
|
*
|
|
@@ -17412,6 +17871,7 @@ function createDrawUI(draw, options = {}) {
|
|
|
17412
17871
|
const controls = mapControls(map, options.mapControls);
|
|
17413
17872
|
const lift = cornerLift(map.getContainer(), root);
|
|
17414
17873
|
const padding = options.padding === false ? null : mapPadding(map);
|
|
17874
|
+
const revealing = selectionReveal(draw, root);
|
|
17415
17875
|
const view = mount(DrawUI, {
|
|
17416
17876
|
target: root,
|
|
17417
17877
|
props: {
|
|
@@ -17423,9 +17883,11 @@ function createDrawUI(draw, options = {}) {
|
|
|
17423
17883
|
shortcuts: options.shortcuts !== false,
|
|
17424
17884
|
inspector,
|
|
17425
17885
|
sections,
|
|
17426
|
-
oninset: (inset) => {
|
|
17886
|
+
oninset: (inset, narrow) => {
|
|
17427
17887
|
padding?.update(inset);
|
|
17428
|
-
|
|
17888
|
+
controls.setNarrow(narrow);
|
|
17889
|
+
lift.update(inset, narrow);
|
|
17890
|
+
revealing.inset(inset);
|
|
17429
17891
|
},
|
|
17430
17892
|
side: options.side,
|
|
17431
17893
|
light,
|
|
@@ -17521,6 +17983,7 @@ function createDrawUI(draw, options = {}) {
|
|
|
17521
17983
|
controlContainer?.removeAttribute("data-color-mode");
|
|
17522
17984
|
basemaps.destroy();
|
|
17523
17985
|
padding?.destroy();
|
|
17986
|
+
revealing.destroy();
|
|
17524
17987
|
lift.destroy();
|
|
17525
17988
|
controls.destroy();
|
|
17526
17989
|
unmount(view);
|
|
@@ -17529,6 +17992,84 @@ function createDrawUI(draw, options = {}) {
|
|
|
17529
17992
|
};
|
|
17530
17993
|
}
|
|
17531
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
|
+
/**
|
|
17532
18073
|
* Puts the toolbar alone in an element: the tools, the delete button and the magnet that opens
|
|
17533
18074
|
* the snapping settings, without the keyboard shortcuts. The bar floats at the bottom centre of `target`, which must be
|
|
17534
18075
|
* positioned (the map's container, or a positioned box over the map).
|
|
@@ -17603,12 +18144,14 @@ function leftSettings(options) {
|
|
|
17603
18144
|
}
|
|
17604
18145
|
/**
|
|
17605
18146
|
* Puts a component alone in an element, in a root element of the interface; `cleanup` runs once
|
|
17606
|
-
* 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
|
|
17607
18149
|
*/
|
|
17608
18150
|
function mountAlone({ target, locale, theme: themeOption }, component, props, role, cleanup) {
|
|
17609
18151
|
const themeName = checkTheme(themeOption);
|
|
17610
18152
|
const messages = new Box(resolveMessages(locale));
|
|
17611
18153
|
const root = createRoot(target, false);
|
|
18154
|
+
root.dataset.surface = "";
|
|
17612
18155
|
const theme = themeControl(root, themeName);
|
|
17613
18156
|
applyLocale(root, messages, locale ?? "en");
|
|
17614
18157
|
const view = mount(component, {
|