@yuneta/gobj-ui 7.23.44 → 7.23.45

package/dist/gobj-ui.cjs.js

@@ -54352,6 +54352,7 @@ function create_popover_base(left, top, className, borderColor, minWidth) {
 	popover.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;background:var(--bulma-scheme-main, #fff);color:var(--bulma-text-strong, #1A1A1A);border:1px solid " + borderColor + ";border-radius:6px;padding:12px;z-index:100;pointer-events:all;box-shadow:0 4px 12px rgba(0,0,0,0.15);min-width:" + minWidth + "px;font-size:13px;";
 	popover.addEventListener("click", (e) => e.stopPropagation());
 	popover.addEventListener("pointerdown", (e) => e.stopPropagation());
+	popover.addEventListener("wheel", (e) => e.stopPropagation());
 	return popover;
 }
 /************************************************************
@@ -55801,6 +55802,7 @@ function show_node_detail_popover(gobj, node_id) {
 	popover.style.maxWidth = "320px";
 	popover.style.maxHeight = "60%";
 	popover.style.overflow = "auto";
+	popover.style.padding = "0 12px 12px";
 	popover.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 	let rows = "";
 	for (let key of Object.keys(record)) {
@@ -55811,9 +55813,9 @@ function show_node_detail_popover(gobj, node_id) {
 		else if (typeof v === "object") vs = JSON.stringify(v);
 		else vs = String(v);
 		if (vs.length > 240) vs = vs.slice(0, 240) + "…";
-		rows += `<div style="display:flex;gap:10px;padding:5px 0;border-top:1px solid ${rowbd};"><div style="flex:0 0 38%;color:${sub};font-size:12px;word-break:break-word;">${(0, _yuneta_gobj_js.escapeHtml)(key)}</div><div style="flex:1 1 auto;font-size:12px;word-break:break-word;">${(0, _yuneta_gobj_js.escapeHtml)(vs)}</div></div>`;
+		rows += `<div class="g6-detail-row" style="border-top:1px solid ${rowbd};"><div class="g6-detail-key" style="color:${sub};">${(0, _yuneta_gobj_js.escapeHtml)(key)}</div><div class="g6-detail-val">${(0, _yuneta_gobj_js.escapeHtml)(vs)}</div></div>`;
 	}
-	popover.innerHTML = `<div style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><div style="flex:1 1 auto;min-width:0;"><div style="font-size:14px;font-weight:600;word-break:break-word;">${(0, _yuneta_gobj_js.escapeHtml)(id)}</div><div style="font-size:11px;color:${sub};margin-top:2px;">${(0, _yuneta_gobj_js.escapeHtml)(topic)}</div></div><div class="g6-detail-close" style="flex:0 0 auto;cursor:pointer;font-size:16px;line-height:1;color:${sub};padding:0 2px;">×</div></div>` + (rows || `<div style="font-size:12px;color:${sub};">${(0, _yuneta_gobj_js.escapeHtml)((0, i18next.t)("no fields"))}</div>`);
+	popover.innerHTML = `<div class="g6-detail-head" style="background:${bg};"><div style="flex:1 1 auto;min-width:0;"><div class="g6-detail-id">${(0, _yuneta_gobj_js.escapeHtml)(id)}</div><div class="g6-detail-topic" style="color:${sub};">${(0, _yuneta_gobj_js.escapeHtml)(topic)}</div></div><div class="g6-detail-close" role="button" tabindex="0" aria-label="${(0, _yuneta_gobj_js.escapeHtml)((0, i18next.t)("close"))}" title="${(0, _yuneta_gobj_js.escapeHtml)((0, i18next.t)("close"))}" style="color:${sub};">×</div></div>` + (rows || `<div class="g6-detail-empty" style="color:${sub};">${(0, _yuneta_gobj_js.escapeHtml)((0, i18next.t)("no fields"))}</div>`);
 	let close_el = popover.querySelector(".g6-detail-close");
 	if (close_el) close_el.addEventListener("click", (e) => {
 		e.stopPropagation();

package/dist/gobj-ui.es.js

@@ -54347,6 +54347,7 @@ function create_popover_base(left, top, className, borderColor, minWidth) {
 	popover.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;background:var(--bulma-scheme-main, #fff);color:var(--bulma-text-strong, #1A1A1A);border:1px solid " + borderColor + ";border-radius:6px;padding:12px;z-index:100;pointer-events:all;box-shadow:0 4px 12px rgba(0,0,0,0.15);min-width:" + minWidth + "px;font-size:13px;";
 	popover.addEventListener("click", (e) => e.stopPropagation());
 	popover.addEventListener("pointerdown", (e) => e.stopPropagation());
+	popover.addEventListener("wheel", (e) => e.stopPropagation());
 	return popover;
 }
 /************************************************************
@@ -55796,6 +55797,7 @@ function show_node_detail_popover(gobj, node_id) {
 	popover.style.maxWidth = "320px";
 	popover.style.maxHeight = "60%";
 	popover.style.overflow = "auto";
+	popover.style.padding = "0 12px 12px";
 	popover.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 	let rows = "";
 	for (let key of Object.keys(record)) {
@@ -55806,9 +55808,9 @@ function show_node_detail_popover(gobj, node_id) {
 		else if (typeof v === "object") vs = JSON.stringify(v);
 		else vs = String(v);
 		if (vs.length > 240) vs = vs.slice(0, 240) + "…";
-		rows += `<div style="display:flex;gap:10px;padding:5px 0;border-top:1px solid ${rowbd};"><div style="flex:0 0 38%;color:${sub};font-size:12px;word-break:break-word;">${escapeHtml(key)}</div><div style="flex:1 1 auto;font-size:12px;word-break:break-word;">${escapeHtml(vs)}</div></div>`;
+		rows += `<div class="g6-detail-row" style="border-top:1px solid ${rowbd};"><div class="g6-detail-key" style="color:${sub};">${escapeHtml(key)}</div><div class="g6-detail-val">${escapeHtml(vs)}</div></div>`;
 	}
-	popover.innerHTML = `<div style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><div style="flex:1 1 auto;min-width:0;"><div style="font-size:14px;font-weight:600;word-break:break-word;">${escapeHtml(id)}</div><div style="font-size:11px;color:${sub};margin-top:2px;">${escapeHtml(topic)}</div></div><div class="g6-detail-close" style="flex:0 0 auto;cursor:pointer;font-size:16px;line-height:1;color:${sub};padding:0 2px;">×</div></div>` + (rows || `<div style="font-size:12px;color:${sub};">${escapeHtml(t("no fields"))}</div>`);
+	popover.innerHTML = `<div class="g6-detail-head" style="background:${bg};"><div style="flex:1 1 auto;min-width:0;"><div class="g6-detail-id">${escapeHtml(id)}</div><div class="g6-detail-topic" style="color:${sub};">${escapeHtml(topic)}</div></div><div class="g6-detail-close" role="button" tabindex="0" aria-label="${escapeHtml(t("close"))}" title="${escapeHtml(t("close"))}" style="color:${sub};">×</div></div>` + (rows || `<div class="g6-detail-empty" style="color:${sub};">${escapeHtml(t("no fields"))}</div>`);
 	let close_el = popover.querySelector(".g6-detail-close");
 	if (close_el) close_el.addEventListener("click", (e) => {
 		e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.44",
+  "version": "7.23.45",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@rollup/plugin-terser": "^1.0.0",
     "@vitest/coverage-v8": "^4.1.10",
-    "@yuneta/gobj-js": "^7.13.2",
+    "@yuneta/gobj-js": "^7.16.1",
     "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },

package/src/c_g6_nodes_tree.js

@@ -3348,6 +3348,25 @@ function create_popover_base(left, top, className, borderColor, minWidth)
         'min-width:' + minWidth + 'px;font-size:13px;';
     popover.addEventListener('click', (e) => e.stopPropagation());
     popover.addEventListener('pointerdown', (e) => e.stopPropagation());
+    /*
+     *  AND THE WHEEL, or a popover that overflows cannot be scrolled with
+     *  the wheel at all -- the scrollbar has to be dragged.
+     *
+     *  G6's zoom behavior binds a wheel listener on the CONTAINER and
+     *  calls preventDefault() on every notch, whatever the target is;
+     *  then it declines to zoom because the target is not the canvas. So
+     *  the gesture is cancelled and nobody uses it: the graph does not
+     *  zoom AND the box does not scroll. Measured on a live node: with
+     *  the popover overflowing (scrollHeight 674 over 357 visible),
+     *  scrollTop stayed at 0 and the zoom readout stayed at 50%.
+     *
+     *  Stopping it here -- in the bubble phase, where the click and the
+     *  pointerdown above are already stopped -- is enough: G6 sees
+     *  nothing and the browser scrolls the box normally. Not
+     *  preventDefault: cancelling it ourselves would be the same bug
+     *  from our side.
+     */
+    popover.addEventListener('wheel', (e) => e.stopPropagation());
     return popover;
 }
 
@@ -5492,6 +5511,9 @@ function show_node_detail_popover(gobj, node_id)
     popover.style.maxWidth = '320px';
     popover.style.maxHeight = '60%';
     popover.style.overflow = 'auto';
+    /*  The sticky head spans the full width, so the side padding moves
+     *  to the rows; `create_popover_base` put 12px on the box itself. */
+    popover.style.padding = '0 12px 12px';
     popover.style.fontFamily =
         "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, " +
         "Helvetica, Arial, sans-serif";
@@ -5514,29 +5536,33 @@ function show_node_detail_popover(gobj, node_id)
             vs = vs.slice(0, 240) + '…';
         }
         rows +=
-            `<div style="display:flex;gap:10px;padding:5px 0;` +
-            `border-top:1px solid ${rowbd};">` +
-            `<div style="flex:0 0 38%;color:${sub};font-size:12px;` +
-            `word-break:break-word;">${escapeHtml(key)}</div>` +
-            `<div style="flex:1 1 auto;font-size:12px;` +
-            `word-break:break-word;">${escapeHtml(vs)}</div>` +
+            `<div class="g6-detail-row" style="border-top:1px solid ${rowbd};">` +
+            `<div class="g6-detail-key" style="color:${sub};">` +
+            `${escapeHtml(key)}</div>` +
+            `<div class="g6-detail-val">${escapeHtml(vs)}</div>` +
             `</div>`;
     }
 
+    /*
+     *  The head is STICKY: the box scrolls, and with the head scrolling
+     *  away the ✕ left the screen -- on a phone, where the box is most
+     *  of the screen, that is a popover you cannot close without
+     *  scrolling back up for the button. Its background is the
+     *  popover's own, or the rows would show through it.
+     */
     popover.innerHTML =
-        `<div style="display:flex;align-items:flex-start;gap:8px;` +
-        `margin-bottom:6px;">` +
+        `<div class="g6-detail-head" style="background:${bg};">` +
             `<div style="flex:1 1 auto;min-width:0;">` +
-                `<div style="font-size:14px;font-weight:600;` +
-                `word-break:break-word;">${escapeHtml(id)}</div>` +
-                `<div style="font-size:11px;color:${sub};` +
-                `margin-top:2px;">${escapeHtml(topic)}</div>` +
+                `<div class="g6-detail-id">${escapeHtml(id)}</div>` +
+                `<div class="g6-detail-topic" style="color:${sub};">` +
+                `${escapeHtml(topic)}</div>` +
             `</div>` +
-            `<div class="g6-detail-close" style="flex:0 0 auto;` +
-            `cursor:pointer;font-size:16px;line-height:1;` +
-            `color:${sub};padding:0 2px;">×</div>` +
+            `<div class="g6-detail-close" role="button" tabindex="0"` +
+            ` aria-label="${escapeHtml(t('close'))}"` +
+            ` title="${escapeHtml(t('close'))}"` +
+            ` style="color:${sub};">×</div>` +
         `</div>` +
-        (rows || `<div style="font-size:12px;color:${sub};">` +
+        (rows || `<div class="g6-detail-empty" style="color:${sub};">` +
             `${escapeHtml(t('no fields'))}</div>`);
 
     let close_el = popover.querySelector('.g6-detail-close');

package/src/lib_graph.css

@@ -111,6 +111,116 @@
     background-color: var(--bulma-background, #fff);
 }
 
+/*
+ *  THE NODE DETAIL POPOVER.
+ *
+ *  Sizes live here and not in the inline styles that build it, for one
+ *  reason: a media query cannot reach an inline style, and this box is
+ *  read on a phone as much as on a desk.
+ *
+ *  12px was the size of the rows and 11px of the topic. That is caption
+ *  size, and this popover exists ONLY to be read -- it is the record of
+ *  a node, field by field. Same reasoning as the context menu below:
+ *  12px is a caption, not content.
+ */
+.graph-container .g6-detail-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    /*  Sticky, so the ✕ never scrolls off a box that is most of the
+     *  screen on a phone.  The 12px of side padding the popover used to
+     *  carry moved to the rows, so the head reaches its edges. */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 12px 0 6px;
+}
+
+.graph-container .g6-detail-id {
+    font-size: 15px;
+    font-weight: 600;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-topic {
+    font-size: 12px;
+    margin-top: 2px;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-row {
+    display: flex;
+    gap: 10px;
+    padding: 6px 0;
+}
+
+.graph-container .g6-detail-key,
+.graph-container .g6-detail-val,
+.graph-container .g6-detail-empty {
+    font-size: 13px;
+    word-break: break-word;
+}
+
+.graph-container .g6-detail-key {
+    flex: 0 0 38%;
+}
+
+.graph-container .g6-detail-val {
+    flex: 1 1 auto;
+}
+
+/*
+ *  The close button was a 13x16 box: a glyph with 2px of side padding
+ *  and nothing else. That is a mouse target on a good day and not a
+ *  finger target on any. It is a real box now, and a square one, so the
+ *  ✕ has somewhere to be.
+ */
+.graph-container .g6-detail-close {
+    flex: 0 0 auto;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: -4px -4px 0 0;
+    border-radius: 4px;
+}
+
+.graph-container .g6-detail-close:hover {
+    background: var(--bulma-background, rgba(128, 128, 128, 0.15));
+}
+
+/*
+ *  A finger, and the rule the context menu below already follows: the
+ *  target grows to something a thumb hits, and the text to something
+ *  read at arm's length.
+ */
+@media (pointer: coarse) {
+    .graph-container .g6-detail-close {
+        width: 44px;
+        height: 44px;
+        font-size: 22px;
+        margin: -8px -8px 0 0;
+    }
+    .graph-container .g6-detail-id {
+        font-size: 16px;
+    }
+    .graph-container .g6-detail-topic {
+        font-size: 13px;
+    }
+    .graph-container .g6-detail-key,
+    .graph-container .g6-detail-val,
+    .graph-container .g6-detail-empty {
+        font-size: 14px;
+    }
+    .graph-container .g6-detail-row {
+        padding: 8px 0;
+    }
+}
+
 /*
  *  G6 toolbar: larger icons (via className option)
  */