@yuneta/gobj-ui 7.23.23 → 7.23.24

package/dist/gobj-ui.cjs.js

@@ -10924,7 +10924,11 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
@@ -13423,7 +13427,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;"
+					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;"
 				},
 				[]
 			]]
@@ -13615,7 +13619,11 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {

package/dist/gobj-ui.es.js

@@ -10919,7 +10919,11 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(NodeEvent.CLICK, (evt) => {
@@ -13418,7 +13422,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;"
+					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;"
 				},
 				[]
 			]]
@@ -13610,7 +13614,11 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -407,7 +407,13 @@ 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;'}, [
-                ['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` 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;'}, [
                 ]]
             ]]
         ]]
@@ -650,6 +656,13 @@ function build_graph(gobj)
         behaviors: [
             'drag-canvas',
             'zoom-canvas',
+            /*  Move a card by dragging it. The position is not kept --
+             *  this tree is rebuilt from the live gobj tree on every
+             *  refresh -- and it is still worth having: pulling two
+             *  cards apart to read the lines between them is the whole
+             *  use of it. `enable` REPLACES a behavior's default rather
+             *  than adding to it, so it is not passed.  */
+            'drag-element',
         ],
     });
 

package/src/c_yui_json.css

@@ -293,6 +293,33 @@
     z-index: 1;
 }
 
+/*
+ *  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

@@ -694,6 +694,20 @@ function build_graph(gobj)
         behaviors: [
             'drag-canvas',
             'zoom-canvas',
+            /*
+             *  Move a card by dragging it. The position is NOT kept:
+             *  the graph is rebuilt from the document on every refresh,
+             *  fold and layout change, and there is nothing here to
+             *  save it to -- this is a viewer over a value somebody
+             *  handed it, not a document of its own. Deliberate: being
+             *  able to pull two cards apart to read the lines between
+             *  them is worth having even when it lasts one session.
+             *
+             *  No `enable`: a behavior's `enable` REPLACES the default,
+             *  it does not add to it, and the default here is exactly
+             *  what is wanted.
+             */
+            'drag-element',
         ],
     });