@yuneta/gobj-ui 7.23.22 → 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) => {
@@ -11188,6 +11192,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
     ${content_html}
 </div>`;
 	let ports = [];
+	if (parent_id) ports.push({
+		key: "in",
+		placement: [.5, 0],
+		fill: colors.border,
+		stroke: colors.border
+	});
 	for (let pending of pending_complex) {
 		let child_colors = json_card_style((0, _yuneta_gobj_js.is_object)(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
 		let row_mid = CARD_HEADER_H$1 + pending.row * CARD_ROW_H$1 + CARD_ROW_H$1 / 2;
@@ -11223,7 +11233,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 			target: group_id,
 			style: {
 				stroke: colors.border,
-				lineWidth: 1
+				lineWidth: 1,
+				endArrow: true,
+				endArrowSize: 8,
+				endArrowFill: colors.border,
+				endArrowStroke: colors.border,
+				targetPort: "in"
 			}
 		};
 		if (parent_port) edge.style.sourcePort = parent_port;
@@ -13412,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;"
 				},
 				[]
 			]]
@@ -13604,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) => {
@@ -11183,6 +11187,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
     ${content_html}
 </div>`;
 	let ports = [];
+	if (parent_id) ports.push({
+		key: "in",
+		placement: [.5, 0],
+		fill: colors.border,
+		stroke: colors.border
+	});
 	for (let pending of pending_complex) {
 		let child_colors = json_card_style(is_object(pending.value) ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
 		let row_mid = CARD_HEADER_H$1 + pending.row * CARD_ROW_H$1 + CARD_ROW_H$1 / 2;
@@ -11218,7 +11228,12 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 			target: group_id,
 			style: {
 				stroke: colors.border,
-				lineWidth: 1
+				lineWidth: 1,
+				endArrow: true,
+				endArrowSize: 8,
+				endArrowFill: colors.border,
+				endArrowStroke: colors.border,
+				targetPort: "in"
 			}
 		};
 		if (parent_port) edge.style.sourcePort = parent_port;
@@ -13407,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;"
 				},
 				[]
 			]]
@@ -13599,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.22",
+  "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',
         ],
     });
 
@@ -1181,6 +1195,28 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
      *  the one thing the port can say that the row does not.
      */
     let ports = [];
+
+    /*
+     *  The port a line ARRIVES at: one per card, above the title and
+     *  centred, and only on a card that has a parent -- the root
+     *  receives nothing, so a dot there would mark a door onto nothing.
+     *
+     *  One and not one-per-parent because a card has exactly ONE parent
+     *  in a JSON document: what varies is which key of that parent it
+     *  hangs from, and that is what the source ports say.
+     *
+     *  Keyed `in` with no prefix, which is why the key ports carry one:
+     *  no `p_<key>` can ever collide with it.
+     */
+    if(parent_id) {
+        ports.push({
+            key: "in",
+            placement: [0.5, 0],
+            fill: colors.border,
+            stroke: colors.border,
+        });
+    }
+
     for(let pending of pending_complex) {
         let child_colors = json_card_style(
             is_object(pending.value)? GROUP_COLORS.dict: GROUP_COLORS.list, dark
@@ -1224,6 +1260,23 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
             style: {
                 stroke: colors.border,
                 lineWidth: 1,
+                /*
+                 *  Said on the EDGE and not left to the graph's element
+                 *  default: a per-element `style` is what the reader of
+                 *  this code sees, and an arrow that lives somewhere
+                 *  else is an arrow nobody can find when it stops
+                 *  being drawn.
+                 *
+                 *  Filled with the line's own colour, because an
+                 *  arrowhead in the default fill is a black triangle on
+                 *  a teal line in light and an invisible one in dark.
+                 */
+                endArrow: true,
+                endArrowSize: 8,
+                endArrowFill: colors.border,
+                endArrowStroke: colors.border,
+                /*  It lands on the card's `in` port, above the title. */
+                targetPort: "in",
             }
         };
         if(parent_port) {