@yuneta/gobj-ui 7.23.26 → 7.23.27

package/dist/gobj-ui.cjs.js

@@ -9726,13 +9726,14 @@ async function yui_graph_center_on(graph, node_id) {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
 		if (typeof graph.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
 		for (let i = 0; i < 3; i++) {
+			let z = graph.getZoom() || 1;
 			let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
 			let want = graph.getCanvasCenter();
 			let dx = want[0] - at[0];
 			let dy = want[1] - at[1];
 			if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break;
-			let pos = graph.getPosition();
-			await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+			let n = graph.getElementPosition(node_id);
+			await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
 		}
 		return true;
 	} catch (e) {
@@ -10590,7 +10591,8 @@ var PRIVATE_DATA$11 = {
 	anchor_id: "",
 	anchor_path: "",
 	anchor_state: "off",
-	last_zoom: 1
+	last_zoom: 1,
+	center_posted: false
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10974,7 +10976,10 @@ function build_graph$3(gobj) {
 		}
 		if (z === priv.last_zoom) return;
 		priv.last_zoom = z;
-		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+		if (priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+			priv.center_posted = true;
+			(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
+		}
 	});
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -11065,12 +11070,16 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var ZOOM_CANVAS$1 = {
+	type: "zoom-canvas",
+	animation: false
+};
 var BEHAVIORS_READING$1 = [
 	"drag-canvas",
-	"zoom-canvas",
+	ZOOM_CANVAS$1,
 	"drag-element"
 ];
-var BEHAVIORS_PICKING$1 = ["drag-canvas", "zoom-canvas"];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11674,6 +11683,7 @@ function paint_anchor_mark(gobj) {
 ************************************************************/
 function ac_center_anchor$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	priv.center_posted = false;
 	paint_anchor_mark(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
@@ -13230,12 +13240,16 @@ var attrs_table$9 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
+var ZOOM_CANVAS = {
+	type: "zoom-canvas",
+	animation: false
+};
 var BEHAVIORS_READING = [
 	"drag-canvas",
-	"zoom-canvas",
+	ZOOM_CANVAS,
 	"drag-element"
 ];
-var BEHAVIORS_PICKING = ["drag-canvas", "zoom-canvas"];
+var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13525,7 +13539,7 @@ function build_ui$8(gobj) {
 				{
 					id: priv.canvas_id,
 					class: "gobj-tree-container",
-					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;"
+					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;"
 				},
 				[]
 			]]

package/dist/gobj-ui.es.js

@@ -9721,13 +9721,14 @@ async function yui_graph_center_on(graph, node_id) {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
 		if (typeof graph.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
 		for (let i = 0; i < 3; i++) {
+			let z = graph.getZoom() || 1;
 			let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
 			let want = graph.getCanvasCenter();
 			let dx = want[0] - at[0];
 			let dy = want[1] - at[1];
 			if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break;
-			let pos = graph.getPosition();
-			await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+			let n = graph.getElementPosition(node_id);
+			await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
 		}
 		return true;
 	} catch (e) {
@@ -10585,7 +10586,8 @@ var PRIVATE_DATA$11 = {
 	anchor_id: "",
 	anchor_path: "",
 	anchor_state: "off",
-	last_zoom: 1
+	last_zoom: 1,
+	center_posted: false
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10969,7 +10971,10 @@ function build_graph$3(gobj) {
 		}
 		if (z === priv.last_zoom) return;
 		priv.last_zoom = z;
-		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+		if (priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+			priv.center_posted = true;
+			gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
+		}
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -11060,12 +11065,16 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var ZOOM_CANVAS$1 = {
+	type: "zoom-canvas",
+	animation: false
+};
 var BEHAVIORS_READING$1 = [
 	"drag-canvas",
-	"zoom-canvas",
+	ZOOM_CANVAS$1,
 	"drag-element"
 ];
-var BEHAVIORS_PICKING$1 = ["drag-canvas", "zoom-canvas"];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11669,6 +11678,7 @@ function paint_anchor_mark(gobj) {
 ************************************************************/
 function ac_center_anchor$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	priv.center_posted = false;
 	paint_anchor_mark(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
@@ -13225,12 +13235,16 @@ var attrs_table$9 = [
 	SDATA(data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	SDATA_END()
 ];
+var ZOOM_CANVAS = {
+	type: "zoom-canvas",
+	animation: false
+};
 var BEHAVIORS_READING = [
 	"drag-canvas",
-	"zoom-canvas",
+	ZOOM_CANVAS,
 	"drag-element"
 ];
-var BEHAVIORS_PICKING = ["drag-canvas", "zoom-canvas"];
+var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13520,7 +13534,7 @@ function build_ui$8(gobj) {
 				{
 					id: priv.canvas_id,
 					class: "gobj-tree-container",
-					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;"
+					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;"
 				},
 				[]
 			]]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.26",
+  "version": "7.23.27",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_gobj_tree_js.js

@@ -101,8 +101,24 @@ SDATA_END()
  *  which REPLACES the behavior's own default test rather than adding
  *  to it.
  */
-const BEHAVIORS_READING = ['drag-canvas', 'zoom-canvas', 'drag-element'];
-const BEHAVIORS_PICKING = ['drag-canvas', 'zoom-canvas'];
+/*
+ *  `zoom-canvas` with NO animation, and that is two rules at once.
+ *
+ *  The house rule first: nothing in this GUI slides or fades, and G6's
+ *  200ms zoom easing is a transition nobody chose -- it comes with the
+ *  behavior's defaults.
+ *
+ *  And it is what makes an anchor possible on the WHEEL. `aftertransform`
+ *  fires while that easing is still running, so the re-centring measured
+ *  a camera that was still moving: measured, its passes went -272, then
+ *  +411 the other side, then +183 -- oscillating, because between two
+ *  reads the easing had moved the ground. With the zoom instantaneous
+ *  the camera is still by the time anything measures it.
+ */
+const ZOOM_CANVAS = {type: 'zoom-canvas', animation: false};
+
+const BEHAVIORS_READING = ['drag-canvas', ZOOM_CANVAS, 'drag-element'];
+const BEHAVIORS_PICKING = ['drag-canvas', ZOOM_CANVAS];
 
 let PRIVATE_DATA = {
     canvas_id: "",
@@ -422,13 +438,7 @@ function build_ui(gobj)
         ['div', {class: 'C_YUI_GOBJ_TREE_JS', style: 'height:100%; display:flex; flex-direction:column; position:relative;'}, [
             ['div', {class: 'is-flex-grow-0 is-flex toolbar_yui_gobj_tree'}, $toolbar],
             ['div', {class: 'is-flex-grow-1', style: 'height:100%; min-height:0; overflow:hidden;'}, [
-                /*  `touch-action` and `user-select` inline because this gclass loads no
- *  stylesheet of its own: G6 puts `touch-action: none` on its canvas and
- *  nothing on the html nodes over it, so without this a finger dragging a
- *  card makes a page scroll and stops dead after ~20px; and a card is
- *  text, so a mouse drag would start a selection. Same two rules
- *  `lib_graph.css` carries for the treedb graph.  */
-                ['div', {id: priv.canvas_id, class: 'gobj-tree-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;'}, [
+                                ['div', {id: priv.canvas_id, class: 'gobj-tree-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;'}, [
                 ]]
             ]]
         ]]

package/src/c_yui_json.css

@@ -293,65 +293,6 @@
     z-index: 1;
 }
 
-/*
- *  Picking the node to anchor. The pointer says a click is expected --
- *  without it the only sign the graph is waiting for one is a button
- *  at the far end of a toolbar.
- */
-.C_YUI_JSON .json-graph-container.JSON_GRAPH_PICKING,
-.C_YUI_JSON .json-graph-container.JSON_GRAPH_PICKING * {
-    cursor: crosshair;
-}
-
-/*
- *  The card the camera is holding.
- *
- *  It has to say so ON THE CARD: the toolbar button knows an anchor is
- *  set, and knowing WHICH node it is was left to the reader remembering
- *  what they clicked -- which is not a mark, it is a memory test.
- *
- *  An outline and not a fill: the card's own colours mean things (a
- *  dashed border is a dict, a solid one a list, the header carries the
- *  group's hue), and a mark that repaints any of them would be saying
- *  two things with one channel. `outline` also draws OUTSIDE the box,
- *  so it cannot move a single row.
- *
- *  Amber, the same "this one, right now" the toolbar's arming state
- *  uses. It is not one of the palette's action colours because it is
- *  not an action.
- */
-.C_YUI_JSON .JSON_CARD_ANCHORED {
-    outline: 3px solid #fa8c16;
-    outline-offset: 2px;
-}
-
-/*
- *  The graph mount, once its cards can be DRAGGED.
- *
- *  Two problems, both of them the browser's rather than G6's, and both
- *  already paid for once in the treedb graph (`lib_graph.css`):
- *
- *  G6 puts `touch-action: none` on its CANVAS and NOTHING on the html
- *  nodes, which are ordinary DIVs layered over it. So a finger landing
- *  on a card made a page scroll: two `pointermove`s through, then the
- *  browser decided the gesture was a scroll and killed the stream with
- *  `pointercancel` -- the card followed for about 20px and stopped dead
- *  while the page slid.
- *
- *  And a card is text: dragging one starts a text selection, and the
- *  wash stays until the next click somewhere else. Nothing on this
- *  canvas is prose.
- *
- *  On the CONTAINER and not the cards: every layer G6 stacks in here is
- *  a DIV over a canvas that already refuses the browser's gestures, and
- *  they have to agree.
- */
-.C_YUI_JSON .json-graph-container {
-    touch-action: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
 /*
  *  Disable any transition a host stylesheet might inject.
  */

package/src/c_yui_json_graph.js

@@ -205,6 +205,7 @@ let PRIVATE_DATA = {
     anchor_path:    "",     // its path, so a rebuild can find it again
     anchor_state:   "off",  // "off" | "arming" | "on"
     last_zoom:      1,      // tells a wheel zoom from a drag in aftertransform
+    center_posted:  false,  // one re-centring in flight, never a queue of them
 };
 
 let __gclass__ = null;
@@ -731,8 +732,22 @@ function build_graph(gobj)
             return;
         }
         priv.last_zoom = z;
-        if(priv.anchor_state === "on" && priv.anchor_id) {
-            yui_graph_center_on(priv.graph, priv.anchor_id);
+
+        /*
+         *  POSTED, like the pick. This runs inside G6's own transform
+         *  emit, and a camera move made there behaves the way one made
+         *  inside its click dispatch does: measured, the centring runs,
+         *  its three passes each fire back here, and the card still ends
+         *  up hundreds of pixels off -- while the same call from a zoom
+         *  BUTTON, which lands after the zoom promise resolved, centres
+         *  exactly. One turn later is out of that stack.
+         *
+         *  At most one in flight: a wheel gesture is a burst of notches,
+         *  and the queue is not a work queue.
+         */
+        if(priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+            priv.center_posted = true;
+            gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
         }
     });
 
@@ -896,8 +911,24 @@ const FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
  *  which REPLACES the behavior's own default test rather than adding to
  *  it -- the trap that made a card drag pan the canvas in 7.23.10.
  */
-const BEHAVIORS_READING = ['drag-canvas', 'zoom-canvas', 'drag-element'];
-const BEHAVIORS_PICKING = ['drag-canvas', 'zoom-canvas'];
+/*
+ *  `zoom-canvas` with NO animation, and that is two rules at once.
+ *
+ *  The house rule first: nothing in this GUI slides or fades, and G6's
+ *  200ms zoom easing is a transition nobody chose -- it comes with the
+ *  behavior's defaults.
+ *
+ *  And it is what makes an anchor possible on the WHEEL. `aftertransform`
+ *  fires while that easing is still running, so the re-centring measured
+ *  a camera that was still moving: measured, its passes went -272, then
+ *  +411 the other side, then +183 -- oscillating, because between two
+ *  reads the easing had moved the ground. With the zoom instantaneous
+ *  the camera is still by the time anything measures it.
+ */
+const ZOOM_CANVAS = {type: 'zoom-canvas', animation: false};
+
+const BEHAVIORS_READING = ['drag-canvas', ZOOM_CANVAS, 'drag-element'];
+const BEHAVIORS_PICKING = ['drag-canvas', ZOOM_CANVAS];
 
 /*
  *  The card's geometry, in ONE place.
@@ -1900,6 +1931,7 @@ function ac_center_anchor(gobj, event, kw, src)
 {
     let priv = gobj.priv;
 
+    priv.center_posted = false;
     paint_anchor_mark(gobj);
     if(priv.anchor_state === "on" && priv.anchor_id) {
         yui_graph_center_on(priv.graph, priv.anchor_id);

package/src/lib_graph.css

@@ -256,12 +256,71 @@
  *  pressed button hands it back to Bulma's rule and the toggle appears
  *  to switch off under the pointer.
  */
-/*  Picking the node to anchor, in the gobj tree: the pointer says a
- *  click is expected, which is otherwise only announced by a button at
- *  the far end of a toolbar.  */
+/*
+ *  THE OTHER TWO GRAPHS' MOUNTS.
+ *
+ *  They live here, unscoped, and that is the point: these rules first
+ *  shipped inside `c_yui_json.css` under a `.C_YUI_JSON` ancestor, and
+ *  a host that mounts `C_YUI_JSON_GRAPH` DIRECTLY -- which the demo
+ *  does, and any host wanting only the graph -- has no such ancestor.
+ *  Every one of them silently did nothing there: no crosshair while
+ *  picking, no mark on the anchored card, and no `touch-action`, so a
+ *  finger dragging a card made a page scroll. A gclass's stylesheet
+ *  cannot assume the gclass that usually hosts it.
+ *
+ *  `lib_graph.css` is reached through `lib_graph.js`, which the camera
+ *  module imports and every one of these graphs uses, so it is loaded
+ *  wherever a graph is.
+ */
+
+/*
+ *  Picking the node to anchor: the pointer says a click is expected,
+ *  which is otherwise announced only by a button at the far end of a
+ *  toolbar. `!important` because G6 writes `cursor` onto its own
+ *  elements from its style props, and a mode has to win over a default.
+ */
+.json-graph-container.JSON_GRAPH_PICKING,
+.json-graph-container.JSON_GRAPH_PICKING *,
 .gobj-tree-container.GOBJ_TREE_PICKING,
 .gobj-tree-container.GOBJ_TREE_PICKING * {
-    cursor: crosshair;
+    cursor: crosshair !important;
+}
+
+/*
+ *  The card the camera is holding.
+ *
+ *  It has to say so ON THE CARD: the toolbar knows an anchor is set,
+ *  and knowing WHICH node it is was left to the reader remembering
+ *  what they clicked -- not a mark, a memory test.
+ *
+ *  An outline and not a fill: the card's own colours already mean
+ *  things (a dashed border is a dict, a solid one a list, the header
+ *  carries the group's hue), so repainting any of them would say two
+ *  things down one channel. `outline` draws OUTSIDE the box, so it
+ *  cannot move a single row.
+ *
+ *  Amber, the same "this one, right now" the toolbar's arming state
+ *  uses, and not one of the palette's action colours -- it is not an
+ *  action.
+ */
+.JSON_CARD_ANCHORED {
+    outline: 3px solid #fa8c16;
+    outline-offset: 2px;
+}
+
+/*
+ *  Once the cards can be DRAGGED. Two problems, both the browser's:
+ *  G6 puts `touch-action: none` on its CANVAS and nothing on the html
+ *  nodes, which are ordinary DIVs layered over it, so a finger landing
+ *  on a card made a page scroll -- two `pointermove`s, then
+ *  `pointercancel`, the card dead after ~20px while the page slid. And
+ *  a card is text, so a mouse drag started a selection.
+ */
+.json-graph-container,
+.gobj-tree-container {
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .button.pressed_state,

package/src/yui_graph_camera.js

@@ -274,7 +274,7 @@ export async function yui_graph_center_on(graph, node_id)
         }
 
         /*
-         *  MEASURE, MOVE, MEASURE AGAIN -- up to three times.
+         *  MOVE BY THE CLOSED FORM, then check -- up to three times.
          *
          *  Not the arithmetic anybody would write first, and the reason
          *  is worth keeping. The obvious call is `graph.focusElement()`,
@@ -287,18 +287,26 @@ export async function yui_graph_center_on(graph, node_id)
          *  one shot lands short or long by a factor nobody should have
          *  to name.
          *
-         *  Probing for that factor gives noise: the camera settles
-         *  asynchronously, so a position read straight after a
-         *  translate is a value halfway through. AWAITING each move and
-         *  measuring again needs no factor at all -- the direction is
-         *  right, so the residual falls to nothing in two or three
-         *  passes, and a graph whose maths change under us keeps
-         *  working.
+         *  Guessing at that factor does not work: stepping by the
+         *  measured pixel gap OSCILLATES -- measured, its passes went
+         *  -272, then +411 the other side, then +183, with the zoom
+         *  stable throughout, so it is not an animation racing the
+         *  reads. The factor is read off G6's own
+         *  `getTranslateOptions()` instead: an absolute translate puts
+         *  the camera at `canvasCentre - T/zoom`, and the camera is
+         *  what lands on the viewport centre, so
          *
-         *  The 1px floor is what stops it converging forever on the
-         *  rounding.
+         *      T = (canvasCentre - nodeWorldPosition) * zoom
+         *
+         *  which lands exactly, in one pass, at any zoom.
+         *
+         *  The loop stays as a guard: it costs one measurement when the
+         *  first move was right, and it is what would catch this going
+         *  wrong again rather than shipping a graph that drifts. The
+         *  1px floor stops it chasing the rounding.
          */
         for(let i = 0; i < 3; i++) {
+            let z = graph.getZoom() || 1;
             let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
             let want = graph.getCanvasCenter();
             let dx = want[0] - at[0];
@@ -307,8 +315,12 @@ export async function yui_graph_center_on(graph, node_id)
             if(Math.abs(dx) < 1 && Math.abs(dy) < 1) {
                 break;
             }
-            let pos = graph.getPosition();
-            await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+            /*  Closed form, read off G6's own `getTranslateOptions()`:
+             *  an ABSOLUTE translate puts the camera at
+             *  `canvasCentre - T/zoom`, and the camera is what lands on
+             *  the viewport centre. So T = (centre - node) * zoom.  */
+            let n = graph.getElementPosition(node_id);
+            await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
         }
         return true;
     } catch(e) {