@yuneta/gobj-ui 7.23.8 → 7.23.9

package/src/c_yui_gobj_tree_js.js

@@ -59,6 +59,7 @@ import {
 } from '@antv/g6';
 
 import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
+import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
 
 /***************************************************************
@@ -305,6 +306,7 @@ function mt_create(gobj)
     build_ui(gobj);
 
     ensure_drag_canvas_patch();
+    ensure_pinch_zoom_patch();
 
     if(!__layout_registered__) {
         register(ExtensionCategory.LAYOUT, 'gobj-tree-v', GobjTreeVLayout);

package/src/c_yui_json_graph.js

@@ -67,6 +67,7 @@ import {
 } from '@antv/g6';
 
 import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
+import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
 
 /***************************************************************
@@ -301,6 +302,7 @@ function mt_create(gobj)
     build_ui(gobj);
 
     ensure_drag_canvas_patch();
+    ensure_pinch_zoom_patch();
 
     if(!__layout_registered__) {
         register(ExtensionCategory.LAYOUT, 'json-tree-layout', JsonTreeLayout);

package/src/g6_drag_canvas_touch.js

@@ -41,6 +41,12 @@
  *          every graph (tree, json, treedb, editor) is fixed without
  *          touching each consumer's behaviors list.
  *
+ *          It also has to keep the ONE guard the base class has and
+ *          this replacement dropped: G6's `onDrag` refuses to pan
+ *          while a pinch is in progress. See `is_pinching` in
+ *          `g6_touch_gestures.js`, which is where the pinch that
+ *          matters is now recognised.
+ *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
@@ -51,6 +57,8 @@ import {
     register,
 } from '@antv/g6';
 
+import {is_pinching} from './g6_touch_gestures.js';
+
 /************************************************************
  *  Custom drag-canvas: same behavior, reliable delta source
  ************************************************************/
@@ -74,6 +82,19 @@ class DragCanvasTouch extends DragCanvas {
                 this._lastVP = null;
                 return;
             }
+            /*
+             *  Two fingers on the glass is a PINCH, not a pan. G6's
+             *  own onDrag guards on `PinchHandler.isPinching` and
+             *  this replacement dropped it, which cost nothing while
+             *  no graph answered the pinch -- and would have panned
+             *  the canvas out from under the zoom the day one did.
+             *  `null` so the next one-finger frame re-seeds instead
+             *  of jumping the camera by the whole gesture.
+             */
+            if(is_pinching(this.context.graph)) {
+                this._lastVP = null;
+                return;
+            }
             let vp = event.viewport;
             if(!vp || typeof vp.x !== "number" || typeof vp.y !== "number") {
                 return;

package/src/g6_touch_gestures.js

@@ -0,0 +1,413 @@
+/***********************************************************************
+ *          g6_touch_gestures.js
+ *
+ *          The two gestures a G6 graph needs on a touch screen and
+ *          does not have: PINCH to zoom, and LONG PRESS to open the
+ *          context menu.
+ *
+ *          Why this exists
+ *          ----------------
+ *          G6 v5 draws a graph that reads fine on a phone and cannot
+ *          be OPERATED on one.  Two gaps, both structural:
+ *
+ *          1. `zoom-canvas` binds the WHEEL and nothing else
+ *             (`trigger: []`).  There is no wheel on a phone, so the
+ *             only zoom is the toolbar's +/- buttons.  G6 does ship a
+ *             pinch recogniser, and `zoom-canvas` will use it -- with
+ *             `trigger: ['pinch']`, which its `bindEvents` treats as
+ *             an ALTERNATIVE to the wheel (`if pinch ... else wheel`),
+ *             so opting in costs the mouse.  Worse, its `PinchHandler`
+ *             keeps its instance and its callback list in STATICS: on
+ *             a page with two graphs the second one registers its
+ *             callback against the FIRST one's emitter, so pinching
+ *             graph A zooms both and pinching graph B does nothing.
+ *             We recognise the gesture ourselves, per graph.
+ *
+ *          2. The context menu is bound to `contextmenu`, and G6 does
+ *             not take that from the DOM: its `BehaviorController`
+ *             SYNTHESISES it from `pointerdown` with `button === 2`.
+ *             A long press therefore never reaches the plugin on ANY
+ *             platform, whatever the browser does with the gesture.
+ *             So we synthesise it the same way G6 does, from the same
+ *             forwarded event object -- which is why the plugin's
+ *             `getItems(e)` receives exactly the shape it expects.
+ *
+ *          Both are built on ONE per-graph record of the fingers
+ *          on the glass, read from the NATIVE touch events -- see
+ *          `touch_state_of` for why the pointer stream, which looks
+ *          like the right source, is not.  That record is also what
+ *          tells `drag-canvas` to stop panning while two fingers are
+ *          down (`is_pinching`), the guard G6's own drag-canvas has
+ *          and our replacement dropped.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    ZoomCanvas,
+    CommonEvent,
+    ExtensionCategory,
+    register,
+} from '@antv/g6';
+
+
+/***************************************************************
+ *              Constants
+ ***************************************************************/
+
+/*
+ *  How long a finger must stay put to mean "context menu", and how
+ *  far it may wander first.  500ms is what Android and iOS both use
+ *  for their own long press; a shorter one fires while the user is
+ *  still deciding whether to pan.
+ */
+const LONG_PRESS_MS   = 500;
+const LONG_PRESS_SLOP = 10;     /* CSS px */
+
+
+/***************************************************************
+ *      Per-graph record of the fingers on the glass
+ ***************************************************************/
+const __touch_state__ = new WeakMap();
+
+/************************************************************
+ *   The touch record of one graph, installing its listeners
+ *   the first time it is asked for.
+ *
+ *   Read from the NATIVE touch events, not from G6's
+ *   forwarded pointer stream.
+ *
+ *   The pointer stream looks like the right source and is
+ *   not: @antv/g re-issues pointer ids in the middle of a
+ *   two-finger gesture (measured: a pinch that started on
+ *   ids 2 and 3 finished on id 1), so anything that keys a
+ *   Map on `pointerId` loses one of the two fingers halfway
+ *   and reads the gesture as a fraction of what it was.
+ *   G6's own `PinchHandler` is built exactly that way.
+ *
+ *   `event.touches` needs no bookkeeping at all: it IS the
+ *   list of fingers currently down, re-stated on every event.
+ ************************************************************/
+function touch_state_of(graph)
+{
+    let state = __touch_state__.get(graph);
+    if(state) {
+        return state;
+    }
+
+    state = {
+        count:     0,       /* fingers on the glass right now  */
+        container: null,
+    };
+    __touch_state__.set(graph, state);
+
+    let container = graph.getCanvas?.()?.getContainer?.();
+    if(!container) {
+        return state;       /*  no DOM yet: nothing to listen to  */
+    }
+    state.container = container;
+
+    let read = (event) => {
+        state.count = event.touches? event.touches.length: 0;
+    };
+
+    /*  Passive: we never preventDefault here -- the canvas already
+     *  carries `touch-action: none`, which is what actually stops
+     *  the browser from panning the page under the graph.  */
+    container.addEventListener("touchstart",  read, {passive: true});
+    container.addEventListener("touchmove",   read, {passive: true});
+    container.addEventListener("touchend",    read, {passive: true});
+    container.addEventListener("touchcancel", read, {passive: true});
+
+    return state;
+}
+
+/************************************************************
+ *   Is a two-finger gesture in progress on this graph?
+ *
+ *   Read by our `drag-canvas` replacement: panning and zooming
+ *   the same drag at the same time fights the user for the
+ *   camera.
+ ************************************************************/
+export function is_pinching(graph)
+{
+    if(!graph) {
+        return false;
+    }
+    let state = __touch_state__.get(graph);
+    if(!state) {
+        return false;   /*  no touch gesture was ever installed here  */
+    }
+    return state.count >= 2;
+}
+
+
+
+
+                    /***************************
+                     *      Pinch to zoom
+                     ***************************/
+
+
+
+
+/************************************************************
+ *   `zoom-canvas` that also answers the pinch.
+ *
+ *   The base class keeps the wheel; the pinch is added on top
+ *   instead of replacing it, so one build serves the mouse and
+ *   the finger.  The scale is ABSOLUTE against the zoom the
+ *   gesture started at -- G6's own pinch feeds `zoom()` an
+ *   increment per frame, which drifts away from the fingers
+ *   over a long gesture.
+ ************************************************************/
+class ZoomCanvasPinch extends ZoomCanvas
+{
+    constructor(context, options)
+    {
+        super(context, options);
+
+        this._pinch_dist0   = 0;
+        this._pinch_zoom0   = 1;
+        this._on_touch_move = null;
+
+        let {trigger} = this.options;
+        if(Array.isArray(trigger) && trigger.includes(CommonEvent.PINCH)) {
+            return;     /*  the caller asked for G6's own pinch  */
+        }
+
+        let graph = this.context.graph;
+        let state = touch_state_of(graph);
+        if(!state.container) {
+            return;
+        }
+
+        this._on_touch_move = (event) => {
+            let touches = event.touches;
+            if(!touches || touches.length !== 2) {
+                /*  Not two fingers (yet, or any more): the next pinch
+                 *  measures itself afresh.  */
+                this._pinch_dist0 = 0;
+                return;
+            }
+            let dx = touches[0].clientX - touches[1].clientX;
+            let dy = touches[0].clientY - touches[1].clientY;
+            let dist = Math.sqrt(dx * dx + dy * dy);
+            if(dist <= 0) {
+                return;
+            }
+            if(this._pinch_dist0 === 0) {
+                /*  First frame of this gesture: remember what it is
+                 *  measured against.  */
+                this._pinch_dist0 = dist;
+                this._pinch_zoom0 = graph.getZoom();
+                return;
+            }
+            this._pinch_to(dist / this._pinch_dist0, touches, event);
+        };
+
+        /*
+         *  Bound on the CONTAINER and not through `bindEvents()`,
+         *  which `update()` runs again on every option change: the
+         *  wheel goes through `Shortcut`, which unbinds itself
+         *  first, and a listener put straight on an element would
+         *  simply pile up.
+         */
+        state.container.addEventListener(
+            "touchmove", this._on_touch_move, {passive: true}
+        );
+    }
+
+    /************************************************************
+     *   Zoom to `scale` times the zoom the pinch started at,
+     *   about the midpoint between the two fingers.
+     *
+     *   ABSOLUTE against the start of the gesture, where G6's
+     *   own pinch feeds `zoom()` an increment per frame: an
+     *   increment drifts away from the fingers over a long
+     *   gesture, and cannot come back when they close again.
+     ************************************************************/
+    _pinch_to(scale, touches, event)
+    {
+        if(!this.validate(event)) {
+            return;
+        }
+        let graph  = this.context.graph;
+        let state  = touch_state_of(graph);
+        let origin = null;
+
+        /*  The camera's origin is measured in the canvas's own
+         *  viewport space, which is the container box: the canvas
+         *  fills it, so the offset IS the container's corner.  */
+        let rect = state.container?.getBoundingClientRect();
+        if(rect) {
+            origin = [
+                (touches[0].clientX + touches[1].clientX) / 2 - rect.left,
+                (touches[0].clientY + touches[1].clientY) / 2 - rect.top,
+            ];
+        }
+
+        /*  `zoomTo` clamps to the graph's own `zoomRange`; no
+         *  animation, the fingers are the animation.  */
+        graph.zoomTo(this._pinch_zoom0 * scale, false, origin);
+        this.options.onFinish?.();
+    }
+
+    destroy()
+    {
+        if(this._on_touch_move) {
+            let state = __touch_state__.get(this.context.graph);
+            state?.container?.removeEventListener("touchmove", this._on_touch_move);
+            this._on_touch_move = null;
+        }
+        super.destroy();
+    }
+}
+
+/************************************************************
+ *   Register once, over the built-in `zoom-canvas`, so every
+ *   graph (tree, json, treedb, editor) pinches without
+ *   touching its behaviors list.
+ ************************************************************/
+let __zoom_canvas_patched__ = false;
+
+export function ensure_pinch_zoom_patch()
+{
+    if(__zoom_canvas_patched__) {
+        return;
+    }
+    register(ExtensionCategory.BEHAVIOR, 'zoom-canvas', ZoomCanvasPinch);
+    __zoom_canvas_patched__ = true;
+}
+
+
+
+
+                    /***************************
+                     *      Long press
+                     ***************************/
+
+
+
+
+/************************************************************
+ *   Make a long press open the context menu.
+ *
+ *   Returns the function that uninstalls it.
+ *
+ *   The menu the press opens is whatever the `contextmenu`
+ *   plugin builds: we re-emit G6's own forwarded event under
+ *   the name the plugin listens for, so `getItems(e)` and
+ *   `enable(e)` see the same object a right-click would give
+ *   them -- same `target`, same `targetType`, same `client`.
+ ************************************************************/
+export function install_long_press_contextmenu(graph)
+{
+    if(!graph) {
+        return () => {};
+    }
+
+    let state = touch_state_of(graph);
+    let pending = null;         /* {timer, x, y, event} */
+
+    let cancel = () => {
+        if(pending) {
+            clearTimeout(pending.timer);
+            pending = null;
+        }
+    };
+
+    let fire = (event) => {
+        pending = null;
+
+        /*
+         *  The tap that ENDS the long press would reach the plugin's
+         *  own `document` click listener and hide the menu the press
+         *  just opened -- a right click never produces a `click`, so
+         *  the plugin has no reason to guard against it.  Swallow
+         *  that one click in the CAPTURE phase, where document sees
+         *  it before anything else does.
+         */
+        let swallow = (evt) => {
+            evt.stopPropagation();
+            document.removeEventListener("click", swallow, true);
+        };
+        document.addEventListener("click", swallow, true);
+        setTimeout(() => {
+            document.removeEventListener("click", swallow, true);
+        }, 1000);
+
+        /*
+         *  And the browser's own long-press menu, which would open on
+         *  top of ours.  One shot: a later right click must keep
+         *  reaching the plugin.
+         */
+        let container = graph.getCanvas?.()?.getContainer?.();
+        if(container) {
+            container.addEventListener("contextmenu", (evt) => {
+                evt.preventDefault();
+            }, {once: true, capture: true});
+        }
+
+        graph.emit(`${event.targetType}:${CommonEvent.CONTEXT_MENU}`, event);
+        graph.emit(CommonEvent.CONTEXT_MENU, event);
+    };
+
+    let on_down = (event) => {
+        cancel();
+        if(event.pointerType !== "touch") {
+            return;     /*  a mouse holding its button is not a menu  */
+        }
+        if(state.count > 1) {
+            return;     /*  two fingers: that is the pinch  */
+        }
+        let x = event.client?.x;
+        let y = event.client?.y;
+        if(x === undefined || y === undefined) {
+            return;
+        }
+        /*
+         *  The event object is reused by @antv/g between dispatches,
+         *  so what the timer must carry is a COPY -- by the time it
+         *  fires, the live object describes the pointerup.
+         */
+        let frozen = Object.assign({}, event);
+        pending = {
+            x: x,
+            y: y,
+            timer: setTimeout(() => {
+                fire(frozen);
+            }, LONG_PRESS_MS),
+        };
+    };
+
+    let on_move = (event) => {
+        if(!pending) {
+            return;
+        }
+        if(state.count > 1) {
+            cancel();
+            return;
+        }
+        let x = event.client?.x;
+        let y = event.client?.y;
+        if(x === undefined || y === undefined) {
+            return;
+        }
+        if(Math.abs(x - pending.x) > LONG_PRESS_SLOP ||
+                Math.abs(y - pending.y) > LONG_PRESS_SLOP) {
+            cancel();
+        }
+    };
+
+    graph.on(CommonEvent.POINTER_DOWN, on_down);
+    graph.on(CommonEvent.POINTER_MOVE, on_move);
+    graph.on(CommonEvent.POINTER_UP,   cancel);
+
+    return () => {
+        cancel();
+        graph.off(CommonEvent.POINTER_DOWN, on_down);
+        graph.off(CommonEvent.POINTER_MOVE, on_move);
+        graph.off(CommonEvent.POINTER_UP,   cancel);
+    };
+}

package/src/lib_graph.css

@@ -177,6 +177,25 @@
     background-color: var(--bulma-background, #f0f0f0);
 }
 
+/*
+ *  Touch: the context menu is a LIST OF COMMANDS, and G6 sizes its
+ *  rows with `padding: 8px 12px` -- 34px, which is a mouse row. The
+ *  menu is now reachable by a long press (g6_touch_gestures.js), so
+ *  its rows have to be reachable by the same finger that opened it.
+ *  `font-size` with it: 12px is a caption, not a command.
+ */
+@media (pointer: coarse) {
+    .g6-contextmenu {
+        font-size: 14px;
+    }
+    .g6-contextmenu-li {
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        padding: 8px 16px;
+    }
+}
+
 /* No transient effects: open/move popups immediately (user pref).
  * G6 injects its own .g6-contextmenu / .g6-tooltip CSS with a
  * left/top/visibility transition that makes them glide into place.

package/src/lib_icons.js

@@ -113,6 +113,20 @@ const ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-plus" viewBox="0 0 512 512">
         <path fill="currentColor" d="M316 32 L316 196 L480 196 L480 316 L316 316 L316 480 L196 480 L196 316 L32 316 L32 196 L196 196 L196 32 Z"/>
     </symbol>
+    <!-- ellipsis-vertical (unfold the floating toolbar).
+         The strip it stands for is a vertical stack, and a vertical
+         ellipsis is what "there is more of this here" is drawn as
+         everywhere else. -->
+    <symbol id="g6-icon-toolbar-show" viewBox="0 0 128 512">
+        <path fill="currentColor" d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/>
+    </symbol>
+    <!-- xmark (fold the floating toolbar away).
+         Not a chevron: the two toolbars sit on OPPOSITE edges, so a
+         direction would point the wrong way on one of them. What the
+         button does is close an overlay, and that is an x. -->
+    <symbol id="g6-icon-toolbar-hide" viewBox="0 0 384 512">
+        <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>