@yuneta/gobj-ui 7.23.159 → 7.23.161
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 +35 -0
- package/dist/gobj-ui.cjs.js +225 -47
- package/dist/gobj-ui.es.js +225 -47
- package/package.json +1 -1
- package/src/c_yui_treedb_schema.js +134 -10
- package/src/c_yui_treedb_topic_with_form.js +10 -4
- package/src/yui_graph_camera.js +64 -0
package/README.md
CHANGED
|
@@ -925,6 +925,30 @@ so it survived that — two light islands over a dark canvas.
|
|
|
925
925
|
(all tooltips, so a host that has not defined them shows the key on hover and
|
|
926
926
|
nothing else breaks).
|
|
927
927
|
|
|
928
|
+
### The wheel over HTML nodes: `yui_graph_forward_wheel`
|
|
929
|
+
|
|
930
|
+
G6's HTML nodes are drawn in a DOM layer **beside** the canvas element, and
|
|
931
|
+
they pass on six pointer events and not the wheel. `scroll-canvas` listens on
|
|
932
|
+
the canvas element and `zoom-canvas` reads G's wheel, which comes from that
|
|
933
|
+
same element. So a wheel over an HTML card reaches neither: the graph does not
|
|
934
|
+
scroll and does not zoom.
|
|
935
|
+
|
|
936
|
+
`yui_graph_forward_wheel(graph, $host)` catches the wheel on the element G6 was
|
|
937
|
+
mounted in and dispatches it again on the canvas element, with its deltas, its
|
|
938
|
+
position and its modifiers. Both behaviors then take it as a wheel over empty
|
|
939
|
+
canvas. It returns the function that removes the listener; call it before the
|
|
940
|
+
graph is destroyed.
|
|
941
|
+
|
|
942
|
+
```js
|
|
943
|
+
priv.unforward_wheel = yui_graph_forward_wheel(graph, priv.$canvas);
|
|
944
|
+
// ... in the teardown, before graph.destroy():
|
|
945
|
+
priv.unforward_wheel();
|
|
946
|
+
```
|
|
947
|
+
|
|
948
|
+
An element that must scroll by itself inside the graph (a popover) stops the
|
|
949
|
+
wheel with `stopPropagation()` before it reaches `$host`.
|
|
950
|
+
`C_YUI_TREEDB_SCHEMA` uses it; `C_G6_NODES_TREE` does not yet.
|
|
951
|
+
|
|
928
952
|
### The anchor: one element the camera holds
|
|
929
953
|
|
|
930
954
|
The same crosshairs button is in all three graphs' toolbars, drawn once in
|
|
@@ -1797,6 +1821,17 @@ schema question; that one answers the data question.
|
|
|
1797
1821
|
The demo `test-app/schema.html` mounts it alone against the real yuneta agent
|
|
1798
1822
|
schema, so the drawing can be held against the ASCII one in its `.c`.
|
|
1799
1823
|
|
|
1824
|
+
**Its camera is the family's** (since `7.23.160`). It has a toolbar with the
|
|
1825
|
+
`yui_graph_camera.js` cluster (zoom in, zoom out, the readout, fit, `1:1`), and
|
|
1826
|
+
it takes the wheel the same way as the other graphs: the wheel **scrolls**,
|
|
1827
|
+
Ctrl + wheel zooms, and a pinch zooms on a touch screen. This is true over the
|
|
1828
|
+
cards too, through `yui_graph_forward_wheel()`: the cards cover most of this
|
|
1829
|
+
drawing, and without it the wheel worked only in the gaps. It still never fits
|
|
1830
|
+
itself when it appears; fit is a button. The toolbar buttons fire
|
|
1831
|
+
`EV_ZOOM_IN`, `EV_ZOOM_OUT`, `EV_ZOOM_RESET` and `EV_CENTER` to the view
|
|
1832
|
+
itself, so a host declares nothing. `wide` (default `40px`) sets the button
|
|
1833
|
+
height.
|
|
1834
|
+
|
|
1800
1835
|
**Contract:**
|
|
1801
1836
|
|
|
1802
1837
|
- Attributes: `subscriber`, `descs` (`{topic_name: desc}`, the schema),
|
package/dist/gobj-ui.cjs.js
CHANGED
|
@@ -11505,6 +11505,64 @@ function yui_graph_camera_behaviors() {
|
|
|
11505
11505
|
}];
|
|
11506
11506
|
}
|
|
11507
11507
|
/************************************************************
|
|
11508
|
+
* Make the wheel work over HTML nodes too.
|
|
11509
|
+
*
|
|
11510
|
+
* G6's HTML nodes live in a DOM layer BESIDE the canvas
|
|
11511
|
+
* element, not in it, and they forward six pointer events and
|
|
11512
|
+
* not the wheel. `scroll-canvas` listens on the canvas element
|
|
11513
|
+
* and `zoom-canvas` reads G's own wheel event, which is fed
|
|
11514
|
+
* from that same element -- so a wheel over a card reaches
|
|
11515
|
+
* neither, and on a graph drawn with big cards the wheel only
|
|
11516
|
+
* works in the gaps between them.
|
|
11517
|
+
*
|
|
11518
|
+
* The wheel is caught on `$host` (the element G6 was mounted
|
|
11519
|
+
* in) and dispatched again ON the canvas element, carrying the
|
|
11520
|
+
* deltas, the position and the modifiers: both behaviors then
|
|
11521
|
+
* take it exactly as a wheel over empty canvas. Control is
|
|
11522
|
+
* read by G6 from the real keydown, which is still held.
|
|
11523
|
+
*
|
|
11524
|
+
* A wheel whose target is the canvas passes untouched, which
|
|
11525
|
+
* is also what keeps the re-dispatched one from looping. An
|
|
11526
|
+
* element that must scroll by itself (a popover) stops the
|
|
11527
|
+
* wheel before it gets here.
|
|
11528
|
+
*
|
|
11529
|
+
* Returns the function that removes the listener.
|
|
11530
|
+
************************************************************/
|
|
11531
|
+
function yui_graph_forward_wheel(graph, $host) {
|
|
11532
|
+
if (!graph || !$host) return () => {};
|
|
11533
|
+
const on_wheel = (e) => {
|
|
11534
|
+
let dom = null;
|
|
11535
|
+
try {
|
|
11536
|
+
dom = graph.getCanvas().getContextService().getDomElement();
|
|
11537
|
+
} catch (err) {
|
|
11538
|
+
return;
|
|
11539
|
+
}
|
|
11540
|
+
if (!dom || e.target === dom) return;
|
|
11541
|
+
e.preventDefault();
|
|
11542
|
+
e.stopPropagation();
|
|
11543
|
+
dom.dispatchEvent(new WheelEvent("wheel", {
|
|
11544
|
+
deltaX: e.deltaX,
|
|
11545
|
+
deltaY: e.deltaY,
|
|
11546
|
+
deltaZ: e.deltaZ,
|
|
11547
|
+
deltaMode: e.deltaMode,
|
|
11548
|
+
clientX: e.clientX,
|
|
11549
|
+
clientY: e.clientY,
|
|
11550
|
+
screenX: e.screenX,
|
|
11551
|
+
screenY: e.screenY,
|
|
11552
|
+
ctrlKey: e.ctrlKey,
|
|
11553
|
+
shiftKey: e.shiftKey,
|
|
11554
|
+
altKey: e.altKey,
|
|
11555
|
+
metaKey: e.metaKey,
|
|
11556
|
+
bubbles: true,
|
|
11557
|
+
cancelable: true
|
|
11558
|
+
}));
|
|
11559
|
+
};
|
|
11560
|
+
$host.addEventListener("wheel", on_wheel, { passive: false });
|
|
11561
|
+
return () => {
|
|
11562
|
+
$host.removeEventListener("wheel", on_wheel);
|
|
11563
|
+
};
|
|
11564
|
+
}
|
|
11565
|
+
/************************************************************
|
|
11508
11566
|
* The camera cluster: zoom in, zoom out, readout, fit,
|
|
11509
11567
|
* actual size. Returns createElement2 specs, in order.
|
|
11510
11568
|
*
|
|
@@ -13566,7 +13624,7 @@ function ac_toggle_anchor$2(gobj, event, kw, src) {
|
|
|
13566
13624
|
/************************************************************
|
|
13567
13625
|
*
|
|
13568
13626
|
************************************************************/
|
|
13569
|
-
function ac_zoom_in$
|
|
13627
|
+
function ac_zoom_in$4(gobj, event, kw, src) {
|
|
13570
13628
|
let graph = gobj.priv.graph;
|
|
13571
13629
|
if (graph) {
|
|
13572
13630
|
let z = graph.getZoom();
|
|
@@ -13577,7 +13635,7 @@ function ac_zoom_in$3(gobj, event, kw, src) {
|
|
|
13577
13635
|
/************************************************************
|
|
13578
13636
|
*
|
|
13579
13637
|
************************************************************/
|
|
13580
|
-
function ac_zoom_out$
|
|
13638
|
+
function ac_zoom_out$4(gobj, event, kw, src) {
|
|
13581
13639
|
let graph = gobj.priv.graph;
|
|
13582
13640
|
if (graph) {
|
|
13583
13641
|
let z = graph.getZoom();
|
|
@@ -13588,7 +13646,7 @@ function ac_zoom_out$3(gobj, event, kw, src) {
|
|
|
13588
13646
|
/************************************************************
|
|
13589
13647
|
*
|
|
13590
13648
|
************************************************************/
|
|
13591
|
-
function ac_zoom_reset$
|
|
13649
|
+
function ac_zoom_reset$4(gobj, event, kw, src) {
|
|
13592
13650
|
let priv = gobj.priv;
|
|
13593
13651
|
let graph = priv.graph;
|
|
13594
13652
|
if (graph && graph.rendered) {
|
|
@@ -13603,7 +13661,7 @@ function ac_zoom_reset$3(gobj, event, kw, src) {
|
|
|
13603
13661
|
/************************************************************
|
|
13604
13662
|
*
|
|
13605
13663
|
************************************************************/
|
|
13606
|
-
function ac_center$
|
|
13664
|
+
function ac_center$4(gobj, event, kw, src) {
|
|
13607
13665
|
let graph = gobj.priv.graph;
|
|
13608
13666
|
if (graph) {
|
|
13609
13667
|
graph.fitCenter();
|
|
@@ -13739,22 +13797,22 @@ function create_gclass$14(gclass_name) {
|
|
|
13739
13797
|
],
|
|
13740
13798
|
[
|
|
13741
13799
|
"EV_ZOOM_IN",
|
|
13742
|
-
ac_zoom_in$
|
|
13800
|
+
ac_zoom_in$4,
|
|
13743
13801
|
null
|
|
13744
13802
|
],
|
|
13745
13803
|
[
|
|
13746
13804
|
"EV_ZOOM_OUT",
|
|
13747
|
-
ac_zoom_out$
|
|
13805
|
+
ac_zoom_out$4,
|
|
13748
13806
|
null
|
|
13749
13807
|
],
|
|
13750
13808
|
[
|
|
13751
13809
|
"EV_ZOOM_RESET",
|
|
13752
|
-
ac_zoom_reset$
|
|
13810
|
+
ac_zoom_reset$4,
|
|
13753
13811
|
null
|
|
13754
13812
|
],
|
|
13755
13813
|
[
|
|
13756
13814
|
"EV_CENTER",
|
|
13757
|
-
ac_center$
|
|
13815
|
+
ac_center$4,
|
|
13758
13816
|
null
|
|
13759
13817
|
],
|
|
13760
13818
|
[
|
|
@@ -16851,16 +16909,16 @@ function ac_language_changed$7(gobj, event, kw, src) {
|
|
|
16851
16909
|
/************************************************************
|
|
16852
16910
|
* The camera.
|
|
16853
16911
|
************************************************************/
|
|
16854
|
-
function ac_zoom_in$
|
|
16912
|
+
function ac_zoom_in$3(gobj, event, kw, src) {
|
|
16855
16913
|
return camera(gobj, "zoom in", (graph) => graph.zoomBy(1.2));
|
|
16856
16914
|
}
|
|
16857
|
-
function ac_zoom_out$
|
|
16915
|
+
function ac_zoom_out$3(gobj, event, kw, src) {
|
|
16858
16916
|
return camera(gobj, "zoom out", (graph) => graph.zoomBy(1 / 1.2));
|
|
16859
16917
|
}
|
|
16860
|
-
function ac_zoom_reset$
|
|
16918
|
+
function ac_zoom_reset$3(gobj, event, kw, src) {
|
|
16861
16919
|
return camera(gobj, "reset the zoom", (graph) => graph.zoomTo(1));
|
|
16862
16920
|
}
|
|
16863
|
-
function ac_center$
|
|
16921
|
+
function ac_center$3(gobj, event, kw, src) {
|
|
16864
16922
|
return camera(gobj, "fit the graph", (graph) => fit_readable(graph));
|
|
16865
16923
|
}
|
|
16866
16924
|
/************************************************************
|
|
@@ -16919,22 +16977,22 @@ function create_gclass$11(gclass_name) {
|
|
|
16919
16977
|
],
|
|
16920
16978
|
[
|
|
16921
16979
|
"EV_ZOOM_IN",
|
|
16922
|
-
ac_zoom_in$
|
|
16980
|
+
ac_zoom_in$3,
|
|
16923
16981
|
null
|
|
16924
16982
|
],
|
|
16925
16983
|
[
|
|
16926
16984
|
"EV_ZOOM_OUT",
|
|
16927
|
-
ac_zoom_out$
|
|
16985
|
+
ac_zoom_out$3,
|
|
16928
16986
|
null
|
|
16929
16987
|
],
|
|
16930
16988
|
[
|
|
16931
16989
|
"EV_ZOOM_RESET",
|
|
16932
|
-
ac_zoom_reset$
|
|
16990
|
+
ac_zoom_reset$3,
|
|
16933
16991
|
null
|
|
16934
16992
|
],
|
|
16935
16993
|
[
|
|
16936
16994
|
"EV_CENTER",
|
|
16937
|
-
ac_center$
|
|
16995
|
+
ac_center$3,
|
|
16938
16996
|
null
|
|
16939
16997
|
],
|
|
16940
16998
|
[
|
|
@@ -21042,7 +21100,7 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
|
|
|
21042
21100
|
/************************************************************
|
|
21043
21101
|
*
|
|
21044
21102
|
************************************************************/
|
|
21045
|
-
function ac_zoom_in$
|
|
21103
|
+
function ac_zoom_in$2(gobj, event, kw, src) {
|
|
21046
21104
|
let graph = gobj.priv.graph;
|
|
21047
21105
|
if (graph) {
|
|
21048
21106
|
let z = graph.getZoom();
|
|
@@ -21053,7 +21111,7 @@ function ac_zoom_in$1(gobj, event, kw, src) {
|
|
|
21053
21111
|
/************************************************************
|
|
21054
21112
|
*
|
|
21055
21113
|
************************************************************/
|
|
21056
|
-
function ac_zoom_out$
|
|
21114
|
+
function ac_zoom_out$2(gobj, event, kw, src) {
|
|
21057
21115
|
let graph = gobj.priv.graph;
|
|
21058
21116
|
if (graph) {
|
|
21059
21117
|
let z = graph.getZoom();
|
|
@@ -21064,7 +21122,7 @@ function ac_zoom_out$1(gobj, event, kw, src) {
|
|
|
21064
21122
|
/************************************************************
|
|
21065
21123
|
*
|
|
21066
21124
|
************************************************************/
|
|
21067
|
-
function ac_zoom_reset$
|
|
21125
|
+
function ac_zoom_reset$2(gobj, event, kw, src) {
|
|
21068
21126
|
let priv = gobj.priv;
|
|
21069
21127
|
let graph = priv.graph;
|
|
21070
21128
|
if (graph && graph.rendered) {
|
|
@@ -21079,7 +21137,7 @@ function ac_zoom_reset$1(gobj, event, kw, src) {
|
|
|
21079
21137
|
/************************************************************
|
|
21080
21138
|
*
|
|
21081
21139
|
************************************************************/
|
|
21082
|
-
function ac_center$
|
|
21140
|
+
function ac_center$2(gobj, event, kw, src) {
|
|
21083
21141
|
let graph = gobj.priv.graph;
|
|
21084
21142
|
if (graph) {
|
|
21085
21143
|
graph.fitCenter();
|
|
@@ -21285,22 +21343,22 @@ function create_gclass$9(gclass_name) {
|
|
|
21285
21343
|
],
|
|
21286
21344
|
[
|
|
21287
21345
|
"EV_ZOOM_IN",
|
|
21288
|
-
ac_zoom_in$
|
|
21346
|
+
ac_zoom_in$2,
|
|
21289
21347
|
null
|
|
21290
21348
|
],
|
|
21291
21349
|
[
|
|
21292
21350
|
"EV_ZOOM_OUT",
|
|
21293
|
-
ac_zoom_out$
|
|
21351
|
+
ac_zoom_out$2,
|
|
21294
21352
|
null
|
|
21295
21353
|
],
|
|
21296
21354
|
[
|
|
21297
21355
|
"EV_ZOOM_RESET",
|
|
21298
|
-
ac_zoom_reset$
|
|
21356
|
+
ac_zoom_reset$2,
|
|
21299
21357
|
null
|
|
21300
21358
|
],
|
|
21301
21359
|
[
|
|
21302
21360
|
"EV_CENTER",
|
|
21303
|
-
ac_center$
|
|
21361
|
+
ac_center$2,
|
|
21304
21362
|
null
|
|
21305
21363
|
],
|
|
21306
21364
|
[
|
|
@@ -27613,9 +27671,15 @@ function show_edit_form(gobj, row, index) {
|
|
|
27613
27671
|
* Does a click on this column already mean something else?
|
|
27614
27672
|
*
|
|
27615
27673
|
* The `_` columns are the table's own scaffolding (the selection
|
|
27616
|
-
* checkbox, the Op buttons); a hook opens its children
|
|
27617
|
-
* holding a json document opens it in a viewer
|
|
27618
|
-
*
|
|
27674
|
+
* checkbox, the Op buttons); a hook opens its children, a col
|
|
27675
|
+
* holding a json document opens it in a viewer, and a `file` col
|
|
27676
|
+
* opens its asset in a popup. Anything else is plain data, and a
|
|
27677
|
+
* click on it means "show me this record".
|
|
27678
|
+
*
|
|
27679
|
+
* `file` was missing when its popup arrived (7.23.159), so a click
|
|
27680
|
+
* on a photo opened the popup AND the record on top of it: Tabulator
|
|
27681
|
+
* fires `rowClick` from its own dispatcher, and the cell's
|
|
27682
|
+
* stopPropagation() does not reach it.
|
|
27619
27683
|
************************************************************/
|
|
27620
27684
|
var CELL_WITH_ACTION = [
|
|
27621
27685
|
"hook",
|
|
@@ -27626,7 +27690,8 @@ var CELL_WITH_ACTION = [
|
|
|
27626
27690
|
"list",
|
|
27627
27691
|
"coordinates",
|
|
27628
27692
|
"blob",
|
|
27629
|
-
"gbuffer"
|
|
27693
|
+
"gbuffer",
|
|
27694
|
+
"file"
|
|
27630
27695
|
];
|
|
27631
27696
|
function cell_has_its_own_action(gobj, field) {
|
|
27632
27697
|
if (!field || field.charAt(0) === "_") return true;
|
|
@@ -64013,15 +64078,15 @@ function ac_theme$1(gobj, event, kw, src) {
|
|
|
64013
64078
|
/************************************************************
|
|
64014
64079
|
* Zoom controls
|
|
64015
64080
|
************************************************************/
|
|
64016
|
-
function ac_zoom_in(gobj, event, kw, src) {
|
|
64081
|
+
function ac_zoom_in$1(gobj, event, kw, src) {
|
|
64017
64082
|
graph_zoom_in(gobj);
|
|
64018
64083
|
return 0;
|
|
64019
64084
|
}
|
|
64020
|
-
function ac_zoom_out(gobj, event, kw, src) {
|
|
64085
|
+
function ac_zoom_out$1(gobj, event, kw, src) {
|
|
64021
64086
|
graph_zoom_out(gobj);
|
|
64022
64087
|
return 0;
|
|
64023
64088
|
}
|
|
64024
|
-
function ac_zoom_reset(gobj, event, kw, src) {
|
|
64089
|
+
function ac_zoom_reset$1(gobj, event, kw, src) {
|
|
64025
64090
|
let priv = gobj.priv;
|
|
64026
64091
|
let graph = priv.graph;
|
|
64027
64092
|
if (priv.anchor_state === "on" && priv.anchor_id) after_camera(gobj, graph.zoomTo(1));
|
|
@@ -64409,7 +64474,7 @@ function ac_find_next$1(gobj, event, kw, src) {
|
|
|
64409
64474
|
graph_find_step(gobj, !!(kw && kw.back));
|
|
64410
64475
|
return 0;
|
|
64411
64476
|
}
|
|
64412
|
-
function ac_center(gobj, event, kw, src) {
|
|
64477
|
+
function ac_center$1(gobj, event, kw, src) {
|
|
64413
64478
|
graph_center(gobj);
|
|
64414
64479
|
return 0;
|
|
64415
64480
|
}
|
|
@@ -64819,17 +64884,17 @@ function create_gclass$4(gclass_name) {
|
|
|
64819
64884
|
],
|
|
64820
64885
|
[
|
|
64821
64886
|
"EV_ZOOM_IN",
|
|
64822
|
-
ac_zoom_in,
|
|
64887
|
+
ac_zoom_in$1,
|
|
64823
64888
|
null
|
|
64824
64889
|
],
|
|
64825
64890
|
[
|
|
64826
64891
|
"EV_ZOOM_OUT",
|
|
64827
|
-
ac_zoom_out,
|
|
64892
|
+
ac_zoom_out$1,
|
|
64828
64893
|
null
|
|
64829
64894
|
],
|
|
64830
64895
|
[
|
|
64831
64896
|
"EV_ZOOM_RESET",
|
|
64832
|
-
ac_zoom_reset,
|
|
64897
|
+
ac_zoom_reset$1,
|
|
64833
64898
|
null
|
|
64834
64899
|
],
|
|
64835
64900
|
[
|
|
@@ -64929,7 +64994,7 @@ function create_gclass$4(gclass_name) {
|
|
|
64929
64994
|
],
|
|
64930
64995
|
[
|
|
64931
64996
|
"EV_CENTER",
|
|
64932
|
-
ac_center,
|
|
64997
|
+
ac_center$1,
|
|
64933
64998
|
null
|
|
64934
64999
|
],
|
|
64935
65000
|
[
|
|
@@ -67645,6 +67710,12 @@ function register_c_yui_treedb_graph() {
|
|
|
67645
67710
|
* via the host-supplied `node_route`). An alternate landing to the
|
|
67646
67711
|
* topic cards, in the spirit of "every treedb is a graph".
|
|
67647
67712
|
*
|
|
67713
|
+
* The CAMERA is the family's (yui_graph_camera.js): the same
|
|
67714
|
+
* toolbar cluster -- zoom in/out, readout, fit, 1:1 -- and the
|
|
67715
|
+
* same wheel: it SCROLLS, and Ctrl + wheel zooms, over the cards
|
|
67716
|
+
* too (yui_graph_forward_wheel). This view zoomed on a bare wheel
|
|
67717
|
+
* and had no toolbar, beside graphs that did neither.
|
|
67718
|
+
*
|
|
67648
67719
|
* Copyright (c) 2026, ArtGins.
|
|
67649
67720
|
* All Rights Reserved.
|
|
67650
67721
|
***********************************************************************/
|
|
@@ -67682,19 +67753,23 @@ var attrs_table$2 = [
|
|
|
67682
67753
|
(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_route", 0, "", "Hash-route template with a {topic} placeholder: a node click opens that topic (e.g. '#/topics/db/<sel>/{topic}')"),
|
|
67683
67754
|
(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_node_click", 0, false, "With no `node_route`, PUBLISH a node click as EV_NODE_CLICK instead of dropping it. Opt-in, because a subscriber has to DECLARE the event: the hosts that route by hash, and the ones that want nothing, must not have it appear underneath them"),
|
|
67684
67755
|
(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "system", 0, false, "Include system topics (__*__) too"),
|
|
67756
|
+
(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of the toolbar buttons: the family's (C_YUI_TREEDB_GRAPH, C_YUI_JSON_GRAPH, C_YUI_GOBJ_TREE_JS)"),
|
|
67685
67757
|
(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Root HTML element"),
|
|
67686
67758
|
(0, _yuneta_gobj_js.SDATA_END)()
|
|
67687
67759
|
];
|
|
67688
67760
|
var PRIVATE_DATA$2 = {
|
|
67689
67761
|
$container: null,
|
|
67762
|
+
$canvas: null,
|
|
67690
67763
|
graph: null,
|
|
67691
|
-
theme_observer: null
|
|
67764
|
+
theme_observer: null,
|
|
67765
|
+
unforward_wheel: null
|
|
67692
67766
|
};
|
|
67693
67767
|
var __gclass__$2 = null;
|
|
67694
67768
|
/******************************
|
|
67695
67769
|
* Framework Methods
|
|
67696
67770
|
******************************/
|
|
67697
67771
|
function mt_create$2(gobj) {
|
|
67772
|
+
ensure_pinch_zoom_patch();
|
|
67698
67773
|
build_ui$2(gobj);
|
|
67699
67774
|
let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
|
|
67700
67775
|
if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
|
|
@@ -67724,13 +67799,47 @@ function mt_destroy$2(gobj) {
|
|
|
67724
67799
|
* Build UI
|
|
67725
67800
|
************************************************************/
|
|
67726
67801
|
function build_ui$2(gobj) {
|
|
67802
|
+
let priv = gobj.priv;
|
|
67803
|
+
const $toolbar = yui_toolbar({}, [
|
|
67804
|
+
[
|
|
67805
|
+
"div",
|
|
67806
|
+
{ class: "yui-horizontal-toolbar-section left" },
|
|
67807
|
+
[]
|
|
67808
|
+
],
|
|
67809
|
+
[
|
|
67810
|
+
"div",
|
|
67811
|
+
{ class: "yui-horizontal-toolbar-section center" },
|
|
67812
|
+
yui_graph_camera_items(gobj, null, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide"))
|
|
67813
|
+
],
|
|
67814
|
+
[
|
|
67815
|
+
"div",
|
|
67816
|
+
{ class: "yui-horizontal-toolbar-section right" },
|
|
67817
|
+
[]
|
|
67818
|
+
]
|
|
67819
|
+
]);
|
|
67820
|
+
(0, _yuneta_gobj_js.refresh_language)($toolbar, i18next.t);
|
|
67821
|
+
priv.$canvas = (0, _yuneta_gobj_js.createElement2)([
|
|
67822
|
+
"div",
|
|
67823
|
+
{
|
|
67824
|
+
class: "TREEDB_SCHEMA_CANVAS",
|
|
67825
|
+
style: "position:relative; flex:1 1 auto; min-height:0;"
|
|
67826
|
+
},
|
|
67827
|
+
[]
|
|
67828
|
+
]);
|
|
67727
67829
|
let $container = (0, _yuneta_gobj_js.createElement2)([
|
|
67728
67830
|
"div",
|
|
67729
67831
|
{
|
|
67730
67832
|
class: "C_YUI_TREEDB_SCHEMA TREEDB_SCHEMA_VIEW",
|
|
67731
|
-
style: "position:relative; height:100%; min-height:0;"
|
|
67833
|
+
style: "position:relative; height:100%; min-height:0; display:flex; flex-direction:column;"
|
|
67732
67834
|
},
|
|
67733
|
-
[
|
|
67835
|
+
[[
|
|
67836
|
+
"div",
|
|
67837
|
+
{
|
|
67838
|
+
class: "TREEDB_SCHEMA_TOOLBAR",
|
|
67839
|
+
style: "flex:0 0 auto;"
|
|
67840
|
+
},
|
|
67841
|
+
[$toolbar]
|
|
67842
|
+
], priv.$canvas]
|
|
67734
67843
|
]);
|
|
67735
67844
|
(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", $container);
|
|
67736
67845
|
}
|
|
@@ -68024,7 +68133,10 @@ function edge_style(dark) {
|
|
|
68024
68133
|
function build_graph(gobj) {
|
|
68025
68134
|
let priv = gobj.priv;
|
|
68026
68135
|
let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
|
|
68027
|
-
if (!$container)
|
|
68136
|
+
if (!$container || !priv.$canvas) {
|
|
68137
|
+
(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no UI to draw the schema in`);
|
|
68138
|
+
return;
|
|
68139
|
+
}
|
|
68028
68140
|
destroy_graph(gobj);
|
|
68029
68141
|
let data = schema_to_graph(gobj);
|
|
68030
68142
|
if (data.nodes.length === 0) {
|
|
@@ -68036,15 +68148,16 @@ function build_graph(gobj) {
|
|
|
68036
68148
|
},
|
|
68037
68149
|
(0, i18next.t)("no topics", { defaultValue: "No topics" })
|
|
68038
68150
|
]);
|
|
68039
|
-
|
|
68151
|
+
priv.$canvas.appendChild($empty);
|
|
68040
68152
|
return;
|
|
68041
68153
|
}
|
|
68042
68154
|
let dark = yui_is_dark();
|
|
68043
68155
|
let graph;
|
|
68044
68156
|
try {
|
|
68045
68157
|
graph = new _antv_g6.Graph({
|
|
68046
|
-
container:
|
|
68158
|
+
container: priv.$canvas,
|
|
68047
68159
|
autoResize: true,
|
|
68160
|
+
animation: false,
|
|
68048
68161
|
data,
|
|
68049
68162
|
edge: { style: edge_style(dark) },
|
|
68050
68163
|
layout: {
|
|
@@ -68054,8 +68167,8 @@ function build_graph(gobj) {
|
|
|
68054
68167
|
ranksep: 90
|
|
68055
68168
|
},
|
|
68056
68169
|
behaviors: [
|
|
68057
|
-
"zoom-canvas",
|
|
68058
68170
|
"drag-canvas",
|
|
68171
|
+
...yui_graph_camera_behaviors(),
|
|
68059
68172
|
"drag-element"
|
|
68060
68173
|
]
|
|
68061
68174
|
});
|
|
@@ -68065,11 +68178,17 @@ function build_graph(gobj) {
|
|
|
68065
68178
|
}
|
|
68066
68179
|
priv.graph = graph;
|
|
68067
68180
|
graph.setTheme(dark ? "dark" : "light");
|
|
68181
|
+
graph.on("aftertransform", () => {
|
|
68182
|
+
yui_graph_update_zoom($container, priv.graph);
|
|
68183
|
+
});
|
|
68184
|
+
priv.unforward_wheel = yui_graph_forward_wheel(graph, priv.$canvas);
|
|
68068
68185
|
graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
|
|
68069
68186
|
let node_id = evt && evt.target && evt.target.id;
|
|
68070
68187
|
(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { node_id }, gobj);
|
|
68071
68188
|
});
|
|
68072
|
-
graph.render().
|
|
68189
|
+
graph.render().then(() => {
|
|
68190
|
+
yui_graph_update_zoom($container, priv.graph);
|
|
68191
|
+
}).catch((e) => {
|
|
68073
68192
|
(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema graph render failed: ${e}`);
|
|
68074
68193
|
});
|
|
68075
68194
|
}
|
|
@@ -68078,14 +68197,17 @@ function build_graph(gobj) {
|
|
|
68078
68197
|
************************************************************/
|
|
68079
68198
|
function destroy_graph(gobj) {
|
|
68080
68199
|
let priv = gobj.priv;
|
|
68200
|
+
if (priv.unforward_wheel) {
|
|
68201
|
+
priv.unforward_wheel();
|
|
68202
|
+
priv.unforward_wheel = null;
|
|
68203
|
+
}
|
|
68081
68204
|
if (priv.graph) {
|
|
68082
68205
|
try {
|
|
68083
68206
|
priv.graph.destroy();
|
|
68084
68207
|
} catch (e) {}
|
|
68085
68208
|
priv.graph = null;
|
|
68086
68209
|
}
|
|
68087
|
-
|
|
68088
|
-
if ($container) while ($container.firstChild) $container.removeChild($container.firstChild);
|
|
68210
|
+
if (priv.$canvas) while (priv.$canvas.firstChild) priv.$canvas.removeChild(priv.$canvas.firstChild);
|
|
68089
68211
|
}
|
|
68090
68212
|
/***************************
|
|
68091
68213
|
* Actions
|
|
@@ -68175,6 +68297,38 @@ function ac_theme(gobj, event, kw, src) {
|
|
|
68175
68297
|
return 0;
|
|
68176
68298
|
}
|
|
68177
68299
|
/************************************************************
|
|
68300
|
+
* The camera, from the toolbar. Same moves as the family's
|
|
68301
|
+
* (C_YUI_GOBJ_TREE_JS): +/- 20%, fit, and actual size at the
|
|
68302
|
+
* layout's origin.
|
|
68303
|
+
************************************************************/
|
|
68304
|
+
function camera_move(gobj, what, promise) {
|
|
68305
|
+
Promise.resolve(promise).then(() => {
|
|
68306
|
+
yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), gobj.priv.graph);
|
|
68307
|
+
}).catch((e) => {
|
|
68308
|
+
(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema graph ${what} failed: ${e}`);
|
|
68309
|
+
});
|
|
68310
|
+
}
|
|
68311
|
+
function ac_zoom_in(gobj, event, kw, src) {
|
|
68312
|
+
let graph = gobj.priv.graph;
|
|
68313
|
+
if (graph) camera_move(gobj, "zoom in", graph.zoomTo(graph.getZoom() * 1.2));
|
|
68314
|
+
return 0;
|
|
68315
|
+
}
|
|
68316
|
+
function ac_zoom_out(gobj, event, kw, src) {
|
|
68317
|
+
let graph = gobj.priv.graph;
|
|
68318
|
+
if (graph) camera_move(gobj, "zoom out", graph.zoomTo(graph.getZoom() * .8));
|
|
68319
|
+
return 0;
|
|
68320
|
+
}
|
|
68321
|
+
function ac_zoom_reset(gobj, event, kw, src) {
|
|
68322
|
+
let graph = gobj.priv.graph;
|
|
68323
|
+
if (graph && graph.rendered) camera_move(gobj, "actual size", Promise.resolve(graph.zoomTo(1)).then(() => graph.translateTo([0, 0])));
|
|
68324
|
+
return 0;
|
|
68325
|
+
}
|
|
68326
|
+
function ac_center(gobj, event, kw, src) {
|
|
68327
|
+
let graph = gobj.priv.graph;
|
|
68328
|
+
if (graph) camera_move(gobj, "fit", graph.fitView());
|
|
68329
|
+
return 0;
|
|
68330
|
+
}
|
|
68331
|
+
/************************************************************
|
|
68178
68332
|
* Rebuild from a fresh schema (descs arrived / changed).
|
|
68179
68333
|
************************************************************/
|
|
68180
68334
|
function ac_rebuild(gobj, event, kw, src) {
|
|
@@ -68216,13 +68370,37 @@ function create_gclass$2(gclass_name) {
|
|
|
68216
68370
|
"EV_REBUILD",
|
|
68217
68371
|
ac_rebuild,
|
|
68218
68372
|
null
|
|
68373
|
+
],
|
|
68374
|
+
[
|
|
68375
|
+
"EV_ZOOM_IN",
|
|
68376
|
+
ac_zoom_in,
|
|
68377
|
+
null
|
|
68378
|
+
],
|
|
68379
|
+
[
|
|
68380
|
+
"EV_ZOOM_OUT",
|
|
68381
|
+
ac_zoom_out,
|
|
68382
|
+
null
|
|
68383
|
+
],
|
|
68384
|
+
[
|
|
68385
|
+
"EV_ZOOM_RESET",
|
|
68386
|
+
ac_zoom_reset,
|
|
68387
|
+
null
|
|
68388
|
+
],
|
|
68389
|
+
[
|
|
68390
|
+
"EV_CENTER",
|
|
68391
|
+
ac_center,
|
|
68392
|
+
null
|
|
68219
68393
|
]
|
|
68220
68394
|
]]];
|
|
68221
68395
|
const event_types = [
|
|
68222
68396
|
["EV_NODE_CLICK", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
|
|
68223
68397
|
["EV_SHOW", 0],
|
|
68224
68398
|
["EV_THEME", 0],
|
|
68225
|
-
["EV_REBUILD", 0]
|
|
68399
|
+
["EV_REBUILD", 0],
|
|
68400
|
+
["EV_ZOOM_IN", 0],
|
|
68401
|
+
["EV_ZOOM_OUT", 0],
|
|
68402
|
+
["EV_ZOOM_RESET", 0],
|
|
68403
|
+
["EV_CENTER", 0]
|
|
68226
68404
|
];
|
|
68227
68405
|
__gclass__$2 = (0, _yuneta_gobj_js.gclass_create)(gclass_name, event_types, states, gmt$2, 0, attrs_table$2, PRIVATE_DATA$2, 0, 0, 0, 0);
|
|
68228
68406
|
if (!__gclass__$2) return -1;
|