@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 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),
@@ -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$3(gobj, event, kw, src) {
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$3(gobj, event, kw, src) {
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$3(gobj, event, kw, src) {
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$3(gobj, event, kw, src) {
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$3,
13800
+ ac_zoom_in$4,
13743
13801
  null
13744
13802
  ],
13745
13803
  [
13746
13804
  "EV_ZOOM_OUT",
13747
- ac_zoom_out$3,
13805
+ ac_zoom_out$4,
13748
13806
  null
13749
13807
  ],
13750
13808
  [
13751
13809
  "EV_ZOOM_RESET",
13752
- ac_zoom_reset$3,
13810
+ ac_zoom_reset$4,
13753
13811
  null
13754
13812
  ],
13755
13813
  [
13756
13814
  "EV_CENTER",
13757
- ac_center$3,
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$2(gobj, event, kw, src) {
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$2(gobj, event, kw, src) {
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$2(gobj, event, kw, src) {
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$2(gobj, event, kw, src) {
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$2,
16980
+ ac_zoom_in$3,
16923
16981
  null
16924
16982
  ],
16925
16983
  [
16926
16984
  "EV_ZOOM_OUT",
16927
- ac_zoom_out$2,
16985
+ ac_zoom_out$3,
16928
16986
  null
16929
16987
  ],
16930
16988
  [
16931
16989
  "EV_ZOOM_RESET",
16932
- ac_zoom_reset$2,
16990
+ ac_zoom_reset$3,
16933
16991
  null
16934
16992
  ],
16935
16993
  [
16936
16994
  "EV_CENTER",
16937
- ac_center$2,
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$1(gobj, event, kw, src) {
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$1(gobj, event, kw, src) {
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$1(gobj, event, kw, src) {
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$1(gobj, event, kw, src) {
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$1,
21346
+ ac_zoom_in$2,
21289
21347
  null
21290
21348
  ],
21291
21349
  [
21292
21350
  "EV_ZOOM_OUT",
21293
- ac_zoom_out$1,
21351
+ ac_zoom_out$2,
21294
21352
  null
21295
21353
  ],
21296
21354
  [
21297
21355
  "EV_ZOOM_RESET",
21298
- ac_zoom_reset$1,
21356
+ ac_zoom_reset$2,
21299
21357
  null
21300
21358
  ],
21301
21359
  [
21302
21360
  "EV_CENTER",
21303
- ac_center$1,
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 and a col
27617
- * holding a json document opens it in a viewer. Anything else is
27618
- * plain data, and a click on it means "show me this record".
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) return;
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
- $container.appendChild($empty);
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: $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().catch((e) => {
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
- let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
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;