@yuneta/gobj-ui 7.23.7 → 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.js

@@ -365,14 +365,20 @@ function make_toolbar(gobj)
             $search_input,
             ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
         ]]);
+    /*  The GLOBAL fold leads the row, ahead of the find box — the same
+     *  place both graphs put theirs.  It opens the whole document; the
+     *  per-row toggles live in the rows.  */
+    left_items.push(
+        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+    );
+
     attach_clear($search_control, $search_input);
     left_items.push($search_control);
 
     let right_items = [
         view_mode_switch(gobj),
-        icon_button(gobj, "yi-chevron-right",  "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right",  "EV_COLLAPSE_ALL", "collapse all"),
-        icon_button(gobj, "yi-copy",           "EV_COPY_ALL",     "copy json"),
+        icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json"),
     ];
 
     const $toolbar = yui_toolbar({}, [

package/src/c_yui_json_graph.js

@@ -47,6 +47,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
     yui_graph_fold_items,
@@ -66,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";
 
 /***************************************************************
@@ -300,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);
@@ -478,27 +481,25 @@ function make_toolbar(gobj)
      *  looks the same whether nothing matched or the match was already
      *  on screen.
      */
-    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
-        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'JSON_GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n
-                 *  walk cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'JSON_GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  Rate-limited, not delayed for effect: every keystroke
              *  REBUILDS the cards — an html node paints no G6 state, so
              *  the highlight has to live in the card's own markup — and
-             *  the first letter typed can match most of a document.
-             *  Input plumbing: the action still crosses the FSM, just
-             *  not once per keystroke. */
+             *  the first letter typed can match most of a document. */
             input: (evt) => {
                 evt.stopPropagation();
                 let text = evt.target.value.trim();
@@ -510,13 +511,32 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    /*
+     *  Left: the global fold leads the row, then find a node.
+     *
+     *  A graph of a large document has no other way in — the only way to
+     *  locate a key was to read every card.  The count SAYS how many
+     *  matched, because a graph that did not move looks the same whether
+     *  nothing matched or the match was already on screen.
+     */
+    let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches"
          *  is the word, so a language switch re-translates the half that
-         *  is a word.  Spaced with CSS because createElement2 trims text
-         *  nodes.  `display:flex` inline and NOT the `is-flex` helper —
-         *  both Bulma helpers carry !important, so `is-hidden is-flex` on
-         *  one element is decided by stylesheet order. */
+         *  is a word.  `display:flex` inline and NOT the `is-flex`
+         *  helper — both Bulma helpers carry !important, so
+         *  `is-hidden is-flex` on one element is decided by stylesheet
+         *  order. */
         ['div', {class: 'JSON_GRAPH_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [

package/src/c_yui_treedb_graph.js

@@ -78,6 +78,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
 import {
     removeChildElements,
@@ -548,23 +549,21 @@ function make_toolbar(gobj)
      *  not move looks the same whether nothing matched or the match was
      *  already on screen.
      */
-    let center_items = [
-        ['div', {class: 'GRAPH_FIND control has-icons-left',
-                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
-            ['input', {
-                class: 'GRAPH_FIND_INPUT input',
-                type: 'text',
-                /*  A placeholder is not a text node, so the data-i18n walk
-                 *  cannot reach it: it needs its own key. */
-                placeholder: t('search'),
-                'data-i18n-placeholder': 'search',
-                'aria-label': t('search'),
-                'data-i18n-aria-label': 'search'
-            }],
-            ['span', {class: 'icon is-left'}, [
-                ['i', {class: 'yi-magnifying-glass'}]
-            ]]
-        ], {
+    /*  Materialised, not a spec: attach_clear() hangs the NORM clear (✕)
+     *  on a real element.  Clearing dispatches a synthetic `input`, which
+     *  goes through the same rate-limited handler and fires EV_FIND_NODES
+     *  with an empty term — the box and the highlight clear together.  */
+    let $find_input = createElement2(
+        ['input', {
+            class: 'GRAPH_FIND_INPUT input',
+            type: 'text',
+            /*  A placeholder is not a text node, so the data-i18n walk
+             *  cannot reach it: it needs its own key. */
+            placeholder: t('search'),
+            'data-i18n-placeholder': 'search',
+            'aria-label': t('search'),
+            'data-i18n-aria-label': 'search'
+        }, [], {
             /*  Rate-limited, not delayed for effect: a match repaints the
              *  cards it lands on, and on a large treedb the first letter
              *  typed can match hundreds. This is input plumbing — the
@@ -581,7 +580,18 @@ function make_toolbar(gobj)
                     gobj_send_event(gobj, "EV_FIND_NODES", {text: text}, gobj);
                 }, 250);
             }
-        }],
+        }]);
+
+    let $find_control = createElement2(
+        ['div', {class: 'GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            $find_input,
+            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+        ]]);
+    attach_clear($find_control, $find_input);
+
+    let center_items = [
+        $find_control,
         /*  Two spans, not one string: the number is DATA and "matches" is
          *  the word, so a language switch re-translates the half that is a
          *  word. Spaced with CSS because createElement2 trims text nodes. */

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);
+    };
+}