@yuneta/gobj-ui 7.23.1 → 7.23.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -2
- package/dist/gobj-ui.cjs.js +356 -75
- package/dist/gobj-ui.es.js +356 -75
- package/package.json +1 -1
- package/src/c_yui_json.js +15 -1
- package/src/c_yui_json_graph.js +249 -31
- package/src/c_yui_treedb_topic_with_form.js +152 -10
- package/src/yui_icons.css +10 -0
package/dist/gobj-ui.es.js
CHANGED
|
@@ -3513,7 +3513,7 @@ function composed_title(gobj) {
|
|
|
3513
3513
|
* Below the mobile breakpoint the window is a full-screen
|
|
3514
3514
|
* sheet (no float / drag / resize).
|
|
3515
3515
|
************************************************************/
|
|
3516
|
-
function is_mobile$
|
|
3516
|
+
function is_mobile$3() {
|
|
3517
3517
|
return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
|
|
3518
3518
|
}
|
|
3519
3519
|
/************************************************************
|
|
@@ -3546,7 +3546,7 @@ function do_minimize(gobj) {
|
|
|
3546
3546
|
************************************************************/
|
|
3547
3547
|
function build_ui$15(gobj) {
|
|
3548
3548
|
ensure_window_style();
|
|
3549
|
-
let mobile = is_mobile$
|
|
3549
|
+
let mobile = is_mobile$3();
|
|
3550
3550
|
let header = gobj_read_attr(gobj, "header");
|
|
3551
3551
|
if (is_gobj(header)) header = gobj_read_attr(header, "$container");
|
|
3552
3552
|
if (!header) header = build_default_header(gobj);
|
|
@@ -3884,7 +3884,7 @@ function min$1(gobj) {
|
|
|
3884
3884
|
* handlers moving
|
|
3885
3885
|
************************************************************/
|
|
3886
3886
|
function mvStart(gobj, evt) {
|
|
3887
|
-
if (is_mobile$
|
|
3887
|
+
if (is_mobile$3()) return;
|
|
3888
3888
|
let $container = gobj_read_attr(gobj, "$container");
|
|
3889
3889
|
let window_rect = $container.getBoundingClientRect();
|
|
3890
3890
|
let x = evt.screenX;
|
|
@@ -4043,7 +4043,7 @@ function do_center(gobj, x, y, width, height) {
|
|
|
4043
4043
|
function handleResize(gobj) {
|
|
4044
4044
|
let $container = gobj_read_attr(gobj, "$container");
|
|
4045
4045
|
if (!$container) return;
|
|
4046
|
-
if (is_mobile$
|
|
4046
|
+
if (is_mobile$3()) {
|
|
4047
4047
|
$container.classList.add("is-mobile-sheet");
|
|
4048
4048
|
let vw = window.innerWidth || document.documentElement.offsetWidth;
|
|
4049
4049
|
let vh = window.innerHeight || document.documentElement.offsetHeight;
|
|
@@ -9474,6 +9474,56 @@ var FOLD_SWALLOWED_EVENTS = [
|
|
|
9474
9474
|
"mousedown",
|
|
9475
9475
|
"click"
|
|
9476
9476
|
];
|
|
9477
|
+
var LAYOUTS$1 = {
|
|
9478
|
+
"json-tree": {
|
|
9479
|
+
label: "vertical tree",
|
|
9480
|
+
g6_layout: { type: "json-tree-layout" },
|
|
9481
|
+
edge_type: "cubic-vertical"
|
|
9482
|
+
},
|
|
9483
|
+
"dagre-tb": {
|
|
9484
|
+
label: "dagre top-down",
|
|
9485
|
+
g6_layout: {
|
|
9486
|
+
type: "antv-dagre",
|
|
9487
|
+
rankdir: "TB",
|
|
9488
|
+
nodesep: 20,
|
|
9489
|
+
ranksep: 40
|
|
9490
|
+
},
|
|
9491
|
+
edge_type: "polyline"
|
|
9492
|
+
},
|
|
9493
|
+
"dagre-lr": {
|
|
9494
|
+
label: "dagre left-right",
|
|
9495
|
+
g6_layout: {
|
|
9496
|
+
type: "antv-dagre",
|
|
9497
|
+
rankdir: "LR",
|
|
9498
|
+
nodesep: 20,
|
|
9499
|
+
ranksep: 40
|
|
9500
|
+
},
|
|
9501
|
+
edge_type: "polyline"
|
|
9502
|
+
}
|
|
9503
|
+
};
|
|
9504
|
+
var DEFAULT_LAYOUT = "json-tree";
|
|
9505
|
+
function get_layout_cfg$1(key) {
|
|
9506
|
+
return LAYOUTS$1[key] || LAYOUTS$1[DEFAULT_LAYOUT];
|
|
9507
|
+
}
|
|
9508
|
+
/************************************************************
|
|
9509
|
+
* A layout's label, with every key SPELLED OUT inside t().
|
|
9510
|
+
*
|
|
9511
|
+
* Never t(LAYOUTS[key].label) nor a `data-i18n` fed from that
|
|
9512
|
+
* table: the apps' validate-locales scans for t("literal"),
|
|
9513
|
+
* so a key reached through a variable is a key it cannot
|
|
9514
|
+
* demand — and i18next answers an undefined key with the key
|
|
9515
|
+
* itself, which renders in lower-case English and never
|
|
9516
|
+
* changes language. Twice already in this component's
|
|
9517
|
+
* history (7.20.0 `tree view`, and this table on its first
|
|
9518
|
+
* draft).
|
|
9519
|
+
************************************************************/
|
|
9520
|
+
function layout_label(key) {
|
|
9521
|
+
switch (key) {
|
|
9522
|
+
case "dagre-tb": return t("dagre top-down");
|
|
9523
|
+
case "dagre-lr": return t("dagre left-right");
|
|
9524
|
+
default: return t("vertical tree");
|
|
9525
|
+
}
|
|
9526
|
+
}
|
|
9477
9527
|
/***************************************************************
|
|
9478
9528
|
* Data
|
|
9479
9529
|
***************************************************************/
|
|
@@ -9484,6 +9534,7 @@ var attrs_table$11 = [
|
|
|
9484
9534
|
SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
|
|
9485
9535
|
SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
|
|
9486
9536
|
SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
|
|
9537
|
+
SDATA(data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
|
|
9487
9538
|
SDATA_END()
|
|
9488
9539
|
];
|
|
9489
9540
|
var PRIVATE_DATA$11 = {
|
|
@@ -9499,6 +9550,8 @@ var PRIVATE_DATA$11 = {
|
|
|
9499
9550
|
match_count: 0,
|
|
9500
9551
|
find_timer: null,
|
|
9501
9552
|
fold_listener: null,
|
|
9553
|
+
$layout_select: null,
|
|
9554
|
+
$zoom_readout: null,
|
|
9502
9555
|
$find_input: null,
|
|
9503
9556
|
$find_result: null,
|
|
9504
9557
|
$find_count: null
|
|
@@ -9673,6 +9726,7 @@ function build_ui$10(gobj) {
|
|
|
9673
9726
|
};
|
|
9674
9727
|
for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
|
|
9675
9728
|
} else log_error(`${gobj_short_name(gobj)}: no canvas mount, fold handles are dead`);
|
|
9729
|
+
priv.$layout_select = $container.querySelector(".JSON_GRAPH_LAYOUT");
|
|
9676
9730
|
priv.$find_input = $container.querySelector(".JSON_GRAPH_FIND_INPUT");
|
|
9677
9731
|
priv.$find_result = $container.querySelector(".JSON_GRAPH_FIND_RESULT");
|
|
9678
9732
|
priv.$find_count = $container.querySelector(".JSON_GRAPH_FIND_COUNT");
|
|
@@ -9695,6 +9749,54 @@ function destroy_ui$6(gobj) {
|
|
|
9695
9749
|
}
|
|
9696
9750
|
}
|
|
9697
9751
|
/************************************************************
|
|
9752
|
+
* One camera button.
|
|
9753
|
+
************************************************************/
|
|
9754
|
+
function camera_button(gobj, icon, event_name, label_key, wide) {
|
|
9755
|
+
return [
|
|
9756
|
+
"button",
|
|
9757
|
+
{
|
|
9758
|
+
class: `button ${event_name}`,
|
|
9759
|
+
type: "button",
|
|
9760
|
+
style: {
|
|
9761
|
+
height: wide,
|
|
9762
|
+
width: "2.5em"
|
|
9763
|
+
},
|
|
9764
|
+
title: t(label_key),
|
|
9765
|
+
"data-i18n-title": label_key,
|
|
9766
|
+
"aria-label": t(label_key),
|
|
9767
|
+
"data-i18n-aria-label": label_key
|
|
9768
|
+
},
|
|
9769
|
+
["i", {
|
|
9770
|
+
style: "font-size:1.5em; color:inherit;",
|
|
9771
|
+
class: icon
|
|
9772
|
+
}],
|
|
9773
|
+
{ click: (evt) => {
|
|
9774
|
+
evt.stopPropagation();
|
|
9775
|
+
gobj_send_event(gobj, event_name, { evt }, gobj);
|
|
9776
|
+
} }
|
|
9777
|
+
];
|
|
9778
|
+
}
|
|
9779
|
+
/************************************************************
|
|
9780
|
+
* The zoom, as a percentage. What the two magnifiers
|
|
9781
|
+
* change: an editor that offers a zoom shows the number.
|
|
9782
|
+
************************************************************/
|
|
9783
|
+
function zoom_percent_text$1(gobj) {
|
|
9784
|
+
let graph = gobj.priv.graph;
|
|
9785
|
+
if (!graph) return "100%";
|
|
9786
|
+
try {
|
|
9787
|
+
return Math.round(graph.getZoom() * 100) + "%";
|
|
9788
|
+
} catch (e) {
|
|
9789
|
+
return "100%";
|
|
9790
|
+
}
|
|
9791
|
+
}
|
|
9792
|
+
/************************************************************
|
|
9793
|
+
* Repaint the readout after anything that moves the camera.
|
|
9794
|
+
************************************************************/
|
|
9795
|
+
function update_zoom_readout$1(gobj) {
|
|
9796
|
+
let priv = gobj.priv;
|
|
9797
|
+
if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(gobj);
|
|
9798
|
+
}
|
|
9799
|
+
/************************************************************
|
|
9698
9800
|
* One fold button. `open` rotates the chevron to the open
|
|
9699
9801
|
* state, mirroring the per-node toggle of the lazy tree.
|
|
9700
9802
|
************************************************************/
|
|
@@ -9774,63 +9876,88 @@ function make_toolbar$3(gobj) {
|
|
|
9774
9876
|
]]
|
|
9775
9877
|
]];
|
|
9776
9878
|
let center_items = [];
|
|
9777
|
-
for (let item of [
|
|
9778
|
-
|
|
9779
|
-
|
|
9780
|
-
|
|
9781
|
-
|
|
9782
|
-
|
|
9783
|
-
|
|
9784
|
-
|
|
9785
|
-
|
|
9786
|
-
|
|
9787
|
-
|
|
9788
|
-
|
|
9789
|
-
|
|
9790
|
-
|
|
9791
|
-
"
|
|
9792
|
-
"
|
|
9793
|
-
|
|
9794
|
-
|
|
9795
|
-
|
|
9796
|
-
|
|
9797
|
-
|
|
9798
|
-
|
|
9799
|
-
|
|
9800
|
-
|
|
9801
|
-
|
|
9802
|
-
|
|
9803
|
-
"yi-arrows-rotate",
|
|
9804
|
-
"EV_REFRESH",
|
|
9805
|
-
false,
|
|
9806
|
-
"i"
|
|
9807
|
-
]
|
|
9808
|
-
]) {
|
|
9809
|
-
let icon_name = item[0];
|
|
9810
|
-
let event_name = item[1];
|
|
9811
|
-
let disabled = item[2];
|
|
9812
|
-
let button = {
|
|
9813
|
-
class: `button ${event_name}`,
|
|
9879
|
+
for (let item of [[
|
|
9880
|
+
"yi-magnifying-glass-plus",
|
|
9881
|
+
"EV_ZOOM_IN",
|
|
9882
|
+
"zoom in"
|
|
9883
|
+
], [
|
|
9884
|
+
"yi-magnifying-glass-minus",
|
|
9885
|
+
"EV_ZOOM_OUT",
|
|
9886
|
+
"zoom out"
|
|
9887
|
+
]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
|
|
9888
|
+
priv.$zoom_readout = createElement2([
|
|
9889
|
+
"span",
|
|
9890
|
+
{
|
|
9891
|
+
class: "JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
|
|
9892
|
+
style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
|
|
9893
|
+
title: t("zoom level"),
|
|
9894
|
+
"data-i18n-title": "zoom level"
|
|
9895
|
+
},
|
|
9896
|
+
zoom_percent_text$1(gobj)
|
|
9897
|
+
]);
|
|
9898
|
+
center_items.push(priv.$zoom_readout);
|
|
9899
|
+
center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
|
|
9900
|
+
center_items.push([
|
|
9901
|
+
"button",
|
|
9902
|
+
{
|
|
9903
|
+
class: "button EV_ZOOM_RESET",
|
|
9904
|
+
type: "button",
|
|
9814
9905
|
style: {
|
|
9815
9906
|
height: toolbar_wide,
|
|
9816
9907
|
width: "2.5em"
|
|
9817
|
-
}
|
|
9818
|
-
|
|
9819
|
-
|
|
9820
|
-
|
|
9821
|
-
"
|
|
9822
|
-
|
|
9823
|
-
|
|
9824
|
-
|
|
9825
|
-
|
|
9826
|
-
|
|
9827
|
-
|
|
9908
|
+
},
|
|
9909
|
+
title: t("actual size"),
|
|
9910
|
+
"data-i18n-title": "actual size",
|
|
9911
|
+
"aria-label": t("actual size"),
|
|
9912
|
+
"data-i18n-aria-label": "actual size"
|
|
9913
|
+
},
|
|
9914
|
+
[
|
|
9915
|
+
"span",
|
|
9916
|
+
{ style: "font-weight:700;" },
|
|
9917
|
+
"1:1"
|
|
9918
|
+
],
|
|
9919
|
+
{ click: (evt) => {
|
|
9920
|
+
evt.stopPropagation();
|
|
9921
|
+
gobj_send_event(gobj, "EV_ZOOM_RESET", { evt }, gobj);
|
|
9922
|
+
} }
|
|
9923
|
+
]);
|
|
9924
|
+
center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
|
|
9925
|
+
let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
|
|
9926
|
+
let options = Object.keys(LAYOUTS$1).map(function(key) {
|
|
9927
|
+
let attrs = {
|
|
9928
|
+
value: key,
|
|
9929
|
+
"data-i18n": LAYOUTS$1[key].label
|
|
9930
|
+
};
|
|
9931
|
+
if (key === current_layout) attrs.selected = "selected";
|
|
9932
|
+
return [
|
|
9933
|
+
"option",
|
|
9934
|
+
attrs,
|
|
9935
|
+
layout_label(key)
|
|
9936
|
+
];
|
|
9937
|
+
});
|
|
9938
|
+
let right_items = [
|
|
9939
|
+
createElement2([
|
|
9940
|
+
"select",
|
|
9941
|
+
{
|
|
9942
|
+
class: "JSON_GRAPH_LAYOUT select",
|
|
9943
|
+
style: {
|
|
9944
|
+
height: toolbar_wide,
|
|
9945
|
+
"margin-left": "0.5em"
|
|
9946
|
+
},
|
|
9947
|
+
title: t("layout"),
|
|
9948
|
+
"data-i18n-title": "layout",
|
|
9949
|
+
"aria-label": t("layout"),
|
|
9950
|
+
"data-i18n-aria-label": "layout"
|
|
9951
|
+
},
|
|
9952
|
+
options,
|
|
9953
|
+
{ change: (evt) => {
|
|
9828
9954
|
evt.stopPropagation();
|
|
9829
|
-
gobj_send_event(gobj,
|
|
9955
|
+
gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
|
|
9830
9956
|
} }
|
|
9831
|
-
])
|
|
9832
|
-
|
|
9833
|
-
|
|
9957
|
+
]),
|
|
9958
|
+
graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
|
|
9959
|
+
graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)
|
|
9960
|
+
];
|
|
9834
9961
|
const $toolbar = yui_toolbar({}, [
|
|
9835
9962
|
[
|
|
9836
9963
|
"div",
|
|
@@ -9856,6 +9983,7 @@ function make_toolbar$3(gobj) {
|
|
|
9856
9983
|
************************************************************/
|
|
9857
9984
|
function build_graph$3(gobj) {
|
|
9858
9985
|
let priv = gobj.priv;
|
|
9986
|
+
let layout_cfg = get_layout_cfg$1(gobj_read_str_attr(gobj, "layout"));
|
|
9859
9987
|
const graph = priv.graph = new Graph({
|
|
9860
9988
|
container: priv.canvas_id,
|
|
9861
9989
|
animation: false,
|
|
@@ -9863,20 +9991,23 @@ function build_graph$3(gobj) {
|
|
|
9863
9991
|
zoomRange: [.1, 4],
|
|
9864
9992
|
node: { style: { labelPlacement: "center" } },
|
|
9865
9993
|
edge: {
|
|
9866
|
-
type:
|
|
9994
|
+
type: layout_cfg.edge_type,
|
|
9867
9995
|
style: {
|
|
9868
9996
|
stroke: "#999",
|
|
9869
9997
|
lineWidth: 1,
|
|
9870
9998
|
endArrow: true
|
|
9871
9999
|
}
|
|
9872
10000
|
},
|
|
9873
|
-
layout:
|
|
10001
|
+
layout: layout_cfg.g6_layout,
|
|
9874
10002
|
behaviors: ["drag-canvas", "zoom-canvas"]
|
|
9875
10003
|
});
|
|
9876
10004
|
if (priv.theme) graph.setTheme(priv.theme);
|
|
9877
10005
|
graph.on(NodeEvent.CLICK, (evt) => {
|
|
9878
10006
|
gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
|
|
9879
10007
|
});
|
|
10008
|
+
graph.on("aftertransform", () => {
|
|
10009
|
+
update_zoom_readout$1(gobj);
|
|
10010
|
+
});
|
|
9880
10011
|
graph.on(CanvasEvent.CLICK, (evt) => {});
|
|
9881
10012
|
if (typeof ResizeObserver !== "undefined") {
|
|
9882
10013
|
let $canvas = document.getElementById(priv.canvas_id);
|
|
@@ -10136,6 +10267,7 @@ function load_json(gobj) {
|
|
|
10136
10267
|
});
|
|
10137
10268
|
graph.render().then(() => {
|
|
10138
10269
|
if (!preserve_view) graph.fitView();
|
|
10270
|
+
update_zoom_readout$1(gobj);
|
|
10139
10271
|
});
|
|
10140
10272
|
}
|
|
10141
10273
|
}
|
|
@@ -10297,6 +10429,34 @@ function ac_refresh$5(gobj, event, kw, src) {
|
|
|
10297
10429
|
}
|
|
10298
10430
|
/************************************************************
|
|
10299
10431
|
* {theme: "dark"|"light"} — the app switched theme.
|
|
10432
|
+
* EV_CHANGE_LAYOUT { layout }
|
|
10433
|
+
*
|
|
10434
|
+
* The layout AND the edge type move together — a vertical
|
|
10435
|
+
* layout with horizontal cubics draws every edge the wrong way
|
|
10436
|
+
* round — and then the graph is rebuilt and refitted, because a
|
|
10437
|
+
* new layout is a new shape and the old camera framed the old
|
|
10438
|
+
* one.
|
|
10439
|
+
************************************************************/
|
|
10440
|
+
function ac_change_layout$1(gobj, event, kw, src) {
|
|
10441
|
+
let priv = gobj.priv;
|
|
10442
|
+
let key = kw && kw.layout || "";
|
|
10443
|
+
if (!LAYOUTS$1[key]) {
|
|
10444
|
+
log_error(`${gobj_short_name(gobj)}: unknown layout '${key}'`);
|
|
10445
|
+
return -1;
|
|
10446
|
+
}
|
|
10447
|
+
if (key === gobj_read_str_attr(gobj, "layout")) return 0;
|
|
10448
|
+
gobj_write_str_attr(gobj, "layout", key);
|
|
10449
|
+
if (priv.$layout_select && priv.$layout_select.value !== key) priv.$layout_select.value = key;
|
|
10450
|
+
let cfg = get_layout_cfg$1(key);
|
|
10451
|
+
if (priv.graph) priv.graph.setOptions({
|
|
10452
|
+
layout: cfg.g6_layout,
|
|
10453
|
+
edge: { type: cfg.edge_type }
|
|
10454
|
+
});
|
|
10455
|
+
refresh_json(gobj);
|
|
10456
|
+
update_find_result(gobj);
|
|
10457
|
+
return 0;
|
|
10458
|
+
}
|
|
10459
|
+
/************************************************************
|
|
10300
10460
|
* EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
|
|
10301
10461
|
*
|
|
10302
10462
|
* The camera does not move: folding one branch is a local
|
|
@@ -10511,6 +10671,11 @@ function create_gclass$11(gclass_name) {
|
|
|
10511
10671
|
ac_toggle_fold,
|
|
10512
10672
|
null
|
|
10513
10673
|
],
|
|
10674
|
+
[
|
|
10675
|
+
"EV_CHANGE_LAYOUT",
|
|
10676
|
+
ac_change_layout$1,
|
|
10677
|
+
null
|
|
10678
|
+
],
|
|
10514
10679
|
[
|
|
10515
10680
|
"EV_EXPAND_ALL",
|
|
10516
10681
|
ac_expand_all$2,
|
|
@@ -10572,6 +10737,7 @@ function create_gclass$11(gclass_name) {
|
|
|
10572
10737
|
["EV_REFRESH", 0],
|
|
10573
10738
|
["EV_FIND_NODES", 0],
|
|
10574
10739
|
["EV_TOGGLE_FOLD", 0],
|
|
10740
|
+
["EV_CHANGE_LAYOUT", 0],
|
|
10575
10741
|
["EV_EXPAND_ALL", 0],
|
|
10576
10742
|
["EV_COLLAPSE_ALL", 0],
|
|
10577
10743
|
["EV_THEME", 0],
|
|
@@ -10905,12 +11071,13 @@ function mt_start$10(gobj) {
|
|
|
10905
11071
|
/***************************************************************
|
|
10906
11072
|
* Framework Method: Stop
|
|
10907
11073
|
***************************************************************/
|
|
10908
|
-
function mt_stop$10(gobj) {
|
|
11074
|
+
function mt_stop$10(gobj) {
|
|
11075
|
+
teardown_graph_child(gobj);
|
|
11076
|
+
}
|
|
10909
11077
|
/***************************************************************
|
|
10910
11078
|
* Framework Method: Destroy
|
|
10911
11079
|
***************************************************************/
|
|
10912
11080
|
function mt_destroy$10(gobj) {
|
|
10913
|
-
teardown_graph_child(gobj);
|
|
10914
11081
|
destroy_ui$5(gobj);
|
|
10915
11082
|
}
|
|
10916
11083
|
/***************************
|
|
@@ -16210,7 +16377,7 @@ function treedb_delete_node$1(gobj, treedb_name, topic_name, record, options) {
|
|
|
16210
16377
|
/************************************************************
|
|
16211
16378
|
* True on a phone-width viewport (Bulma's mobile breakpoint).
|
|
16212
16379
|
************************************************************/
|
|
16213
|
-
function is_mobile$
|
|
16380
|
+
function is_mobile$2() {
|
|
16214
16381
|
return typeof window !== "undefined" && window.innerWidth <= 768;
|
|
16215
16382
|
}
|
|
16216
16383
|
/************************************************************
|
|
@@ -16229,7 +16396,7 @@ function open_json_viewer$1(gobj) {
|
|
|
16229
16396
|
yui_shell_show_error(yui_shell_of(gobj), "raw json viewer unavailable", { t });
|
|
16230
16397
|
return;
|
|
16231
16398
|
}
|
|
16232
|
-
let mobile = is_mobile$
|
|
16399
|
+
let mobile = is_mobile$2();
|
|
16233
16400
|
let shell = yui_shell_of(gobj);
|
|
16234
16401
|
let jv = gobj_create_service(`treedb-topics-json-${clean_name(gobj_name(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
|
|
16235
16402
|
if (!jv) {
|
|
@@ -17442,10 +17609,102 @@ var PRIVATE_DATA$5 = {
|
|
|
17442
17609
|
form_modal: null,
|
|
17443
17610
|
schema_gobj: null,
|
|
17444
17611
|
schema_modal: null,
|
|
17612
|
+
schema_win: null,
|
|
17445
17613
|
cell_json_gobj: null,
|
|
17446
|
-
cell_json_modal: null
|
|
17614
|
+
cell_json_modal: null,
|
|
17615
|
+
cell_json_win: null
|
|
17447
17616
|
};
|
|
17448
17617
|
var __gclass__$5 = null;
|
|
17618
|
+
function is_mobile$1() {
|
|
17619
|
+
return typeof window !== "undefined" && window.innerWidth <= 768;
|
|
17620
|
+
}
|
|
17621
|
+
/************************************************************
|
|
17622
|
+
* Present a JSON viewer's $container.
|
|
17623
|
+
*
|
|
17624
|
+
* On a LAPTOP a floating C_YUI_WINDOW: a JSON document is
|
|
17625
|
+
* something you read WHILE looking at the table behind it —
|
|
17626
|
+
* you move it, you resize it, you maximise it when the
|
|
17627
|
+
* document is big. A modal can do none of that, and it
|
|
17628
|
+
* darkens exactly the rows you opened the cell from.
|
|
17629
|
+
*
|
|
17630
|
+
* On a phone the modal sheet stays: there is no room to
|
|
17631
|
+
* arrange anything, and the sheet already carries the shell's
|
|
17632
|
+
* Escape / Back handling.
|
|
17633
|
+
*
|
|
17634
|
+
* Returns {win, modal} — exactly one of them is set.
|
|
17635
|
+
************************************************************/
|
|
17636
|
+
function present_json_popup(gobj, $box, opts) {
|
|
17637
|
+
let shell = yui_shell_of(gobj);
|
|
17638
|
+
if (!shell) {
|
|
17639
|
+
log_error(`${gobj_short_name(gobj)}: no shell, cannot present the json`);
|
|
17640
|
+
return null;
|
|
17641
|
+
}
|
|
17642
|
+
if (is_mobile$1()) return {
|
|
17643
|
+
modal: yui_shell_show_modal(shell, $box, {
|
|
17644
|
+
dialog: true,
|
|
17645
|
+
logical_class: opts.logical_class + "_SHEET",
|
|
17646
|
+
title_prefix: opts.title_prefix,
|
|
17647
|
+
title: opts.title,
|
|
17648
|
+
t,
|
|
17649
|
+
on_close: opts.on_close
|
|
17650
|
+
}),
|
|
17651
|
+
win: null
|
|
17652
|
+
};
|
|
17653
|
+
let win = gobj_create_service(opts.name, "C_YUI_WINDOW", {
|
|
17654
|
+
$parent: popup_mount_layer(gobj),
|
|
17655
|
+
subscriber: null,
|
|
17656
|
+
modal: false,
|
|
17657
|
+
showMax: true,
|
|
17658
|
+
showFooter: false,
|
|
17659
|
+
resizable: true,
|
|
17660
|
+
center: true,
|
|
17661
|
+
auto_save_size_and_position: true,
|
|
17662
|
+
width: 720,
|
|
17663
|
+
height: 620,
|
|
17664
|
+
logical_class: opts.logical_class + "_WINDOW",
|
|
17665
|
+
title_prefix: opts.title_prefix,
|
|
17666
|
+
title: opts.title,
|
|
17667
|
+
icon: opts.icon,
|
|
17668
|
+
body: $box,
|
|
17669
|
+
manager: null,
|
|
17670
|
+
on_close: function() {
|
|
17671
|
+
if (gobj_is_destroying(gobj)) return;
|
|
17672
|
+
opts.forget_window();
|
|
17673
|
+
opts.on_close();
|
|
17674
|
+
}
|
|
17675
|
+
}, gobj);
|
|
17676
|
+
if (!win) {
|
|
17677
|
+
log_error(`${gobj_short_name(gobj)}: cannot create the json window`);
|
|
17678
|
+
return null;
|
|
17679
|
+
}
|
|
17680
|
+
gobj_start(win);
|
|
17681
|
+
return {
|
|
17682
|
+
win,
|
|
17683
|
+
modal: null
|
|
17684
|
+
};
|
|
17685
|
+
}
|
|
17686
|
+
/************************************************************
|
|
17687
|
+
* Retire a presenting window: reference cleared FIRST, then
|
|
17688
|
+
* stop, then destroy.
|
|
17689
|
+
*
|
|
17690
|
+
* The order is the whole content of this function. The ✕ of
|
|
17691
|
+
* the window calls back into the teardown that calls this, so
|
|
17692
|
+
* clearing the reference first is what stops the recursion.
|
|
17693
|
+
* And it is STOP then destroy because the window was started
|
|
17694
|
+
* on open: handing a running gobj to gobj_destroy() makes the
|
|
17695
|
+
* framework rescue it and say so — "Destroying a RUNNING
|
|
17696
|
+
* gobj" — which is a caller's bug, not a framework message.
|
|
17697
|
+
* Same lesson `c_tranger_view.close_json_viewer` carries.
|
|
17698
|
+
************************************************************/
|
|
17699
|
+
function retire_popup_window(win) {
|
|
17700
|
+
if (!win) return;
|
|
17701
|
+
try {
|
|
17702
|
+
if (gobj_is_running(win)) gobj_stop(win);
|
|
17703
|
+
gobj_destroy(win);
|
|
17704
|
+
} catch (e) {
|
|
17705
|
+
log_warning(`${GCLASS_NAME$5}: json window already gone: ${e}`);
|
|
17706
|
+
}
|
|
17707
|
+
}
|
|
17449
17708
|
function popup_mount_layer(gobj) {
|
|
17450
17709
|
let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
|
|
17451
17710
|
if ($layer) return $layer;
|
|
@@ -18616,8 +18875,7 @@ function open_schema_dialog(gobj) {
|
|
|
18616
18875
|
log_error(`${gobj_short_name(gobj)}: no desc, no schema to show`);
|
|
18617
18876
|
return;
|
|
18618
18877
|
}
|
|
18619
|
-
|
|
18620
|
-
if (!shell) {
|
|
18878
|
+
if (!yui_shell_of(gobj)) {
|
|
18621
18879
|
log_error(`${gobj_short_name(gobj)}: no shell, cannot open the schema view`);
|
|
18622
18880
|
return;
|
|
18623
18881
|
}
|
|
@@ -18634,16 +18892,25 @@ function open_schema_dialog(gobj) {
|
|
|
18634
18892
|
teardown_schema_child(gobj);
|
|
18635
18893
|
return;
|
|
18636
18894
|
}
|
|
18637
|
-
|
|
18638
|
-
|
|
18639
|
-
logical_class: "
|
|
18895
|
+
let presented = present_json_popup(gobj, $box, {
|
|
18896
|
+
name: "schemawin_" + clean_name(gobj_name(gobj)),
|
|
18897
|
+
logical_class: "TREEDB_SCHEMA",
|
|
18640
18898
|
title_prefix: gobj_read_str_attr(gobj, "topic_name"),
|
|
18641
18899
|
title: "schema",
|
|
18642
|
-
|
|
18900
|
+
icon: "yi-table",
|
|
18901
|
+
forget_window: function() {
|
|
18902
|
+
priv.schema_win = null;
|
|
18903
|
+
},
|
|
18643
18904
|
on_close: function() {
|
|
18644
18905
|
teardown_schema_child(gobj);
|
|
18645
18906
|
}
|
|
18646
18907
|
});
|
|
18908
|
+
if (!presented) {
|
|
18909
|
+
teardown_schema_child(gobj);
|
|
18910
|
+
return;
|
|
18911
|
+
}
|
|
18912
|
+
priv.schema_modal = presented.modal;
|
|
18913
|
+
priv.schema_win = presented.win;
|
|
18647
18914
|
gobj_send_event(json_view, "EV_SET_JSON", { json: desc }, gobj);
|
|
18648
18915
|
}
|
|
18649
18916
|
/************************************************************
|
|
@@ -18658,6 +18925,9 @@ function teardown_schema_child(gobj) {
|
|
|
18658
18925
|
gobj_destroy(priv.schema_gobj);
|
|
18659
18926
|
priv.schema_gobj = null;
|
|
18660
18927
|
}
|
|
18928
|
+
let win = priv.schema_win;
|
|
18929
|
+
priv.schema_win = null;
|
|
18930
|
+
retire_popup_window(win);
|
|
18661
18931
|
priv.schema_modal = null;
|
|
18662
18932
|
}
|
|
18663
18933
|
/************************************************************
|
|
@@ -18704,8 +18974,7 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
|
|
|
18704
18974
|
log_error(`${gobj_short_name(gobj)}: row '${row_id}' has no col '${col_id}'`);
|
|
18705
18975
|
return;
|
|
18706
18976
|
}
|
|
18707
|
-
|
|
18708
|
-
if (!shell) {
|
|
18977
|
+
if (!yui_shell_of(gobj)) {
|
|
18709
18978
|
log_error(`${gobj_short_name(gobj)}: no shell, cannot open the cell json`);
|
|
18710
18979
|
return;
|
|
18711
18980
|
}
|
|
@@ -18722,16 +18991,25 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
|
|
|
18722
18991
|
teardown_cell_json_child(gobj);
|
|
18723
18992
|
return;
|
|
18724
18993
|
}
|
|
18725
|
-
|
|
18726
|
-
|
|
18727
|
-
logical_class: "
|
|
18994
|
+
let presented = present_json_popup(gobj, $box, {
|
|
18995
|
+
name: "cellwin_" + clean_name(gobj_name(gobj)),
|
|
18996
|
+
logical_class: "TREEDB_CELL_JSON",
|
|
18728
18997
|
title_prefix: String(row_id),
|
|
18729
18998
|
title: col_id,
|
|
18730
|
-
|
|
18999
|
+
icon: "yi-js-square",
|
|
19000
|
+
forget_window: function() {
|
|
19001
|
+
priv.cell_json_win = null;
|
|
19002
|
+
},
|
|
18731
19003
|
on_close: function() {
|
|
18732
19004
|
teardown_cell_json_child(gobj);
|
|
18733
19005
|
}
|
|
18734
19006
|
});
|
|
19007
|
+
if (!presented) {
|
|
19008
|
+
teardown_cell_json_child(gobj);
|
|
19009
|
+
return;
|
|
19010
|
+
}
|
|
19011
|
+
priv.cell_json_modal = presented.modal;
|
|
19012
|
+
priv.cell_json_win = presented.win;
|
|
18735
19013
|
gobj_send_event(json_view, "EV_SET_JSON", { json: value }, gobj);
|
|
18736
19014
|
}
|
|
18737
19015
|
/************************************************************
|
|
@@ -18746,6 +19024,9 @@ function teardown_cell_json_child(gobj) {
|
|
|
18746
19024
|
gobj_destroy(priv.cell_json_gobj);
|
|
18747
19025
|
priv.cell_json_gobj = null;
|
|
18748
19026
|
}
|
|
19027
|
+
let win = priv.cell_json_win;
|
|
19028
|
+
priv.cell_json_win = null;
|
|
19029
|
+
retire_popup_window(win);
|
|
18749
19030
|
priv.cell_json_modal = null;
|
|
18750
19031
|
}
|
|
18751
19032
|
/************************************************************
|
package/package.json
CHANGED
package/src/c_yui_json.js
CHANGED
|
@@ -227,6 +227,21 @@ function mt_start(gobj)
|
|
|
227
227
|
***************************************************************/
|
|
228
228
|
function mt_stop(gobj)
|
|
229
229
|
{
|
|
230
|
+
/*
|
|
231
|
+
* The graph child dies with the parent's RUNNING state, not with
|
|
232
|
+
* its destruction, and the difference is not cosmetic:
|
|
233
|
+
* gobj_destroy() destroys the children BEFORE calling mt_destroy(),
|
|
234
|
+
* so tearing it down there arrived after the framework had already
|
|
235
|
+
* destroyed it — while it was still running. Closing the window
|
|
236
|
+
* logged "Destroying a RUNNING gobj" for the child and then
|
|
237
|
+
* "gobj NULL or DESTROYED" for this gobj's own attempt to stop it.
|
|
238
|
+
*
|
|
239
|
+
* Here it is stopped and destroyed while everything is still whole,
|
|
240
|
+
* and gobj_destroy() finds no child left to rescue. A later
|
|
241
|
+
* gobj_start + a switch back to the graph rebuilds it, which is the
|
|
242
|
+
* same lazy path a first entry takes.
|
|
243
|
+
*/
|
|
244
|
+
teardown_graph_child(gobj);
|
|
230
245
|
}
|
|
231
246
|
|
|
232
247
|
/***************************************************************
|
|
@@ -234,7 +249,6 @@ function mt_stop(gobj)
|
|
|
234
249
|
***************************************************************/
|
|
235
250
|
function mt_destroy(gobj)
|
|
236
251
|
{
|
|
237
|
-
teardown_graph_child(gobj);
|
|
238
252
|
destroy_ui(gobj);
|
|
239
253
|
}
|
|
240
254
|
|