@yuneta/gobj-ui 7.19.0 → 7.19.2

package/dist/gobj-ui.cjs.js

@@ -57017,6 +57017,19 @@ function refresh_minimap(gobj) {
 	graph_add_plugin(gobj, "minimap", {
 		size: [200, 140],
 		position: "bottom-left",
+		containerStyle: {
+			top: "auto",
+			bottom: "12px",
+			left: "12px",
+			background: "var(--bulma-scheme-main, #fff)",
+			border: "1px solid var(--bulma-border-weak, #ddd)",
+			borderRadius: "6px",
+			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+		},
+		maskStyle: {
+			border: "2px solid var(--bulma-link, #3b82f6)",
+			background: "rgba(59, 130, 246, 0.12)"
+		},
 		shape: (id, element_type, element) => {
 			if (element_type !== "node") return element;
 			try {

package/dist/gobj-ui.es.js

@@ -57004,6 +57004,19 @@ function refresh_minimap(gobj) {
 	graph_add_plugin(gobj, "minimap", {
 		size: [200, 140],
 		position: "bottom-left",
+		containerStyle: {
+			top: "auto",
+			bottom: "12px",
+			left: "12px",
+			background: "var(--bulma-scheme-main, #fff)",
+			border: "1px solid var(--bulma-border-weak, #ddd)",
+			borderRadius: "6px",
+			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+		},
+		maskStyle: {
+			border: "2px solid var(--bulma-link, #3b82f6)",
+			background: "rgba(59, 130, 246, 0.12)"
+		},
 		shape: (id, element_type, element) => {
 			if (element_type !== "node") return element;
 			try {

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -5166,6 +5166,43 @@ function refresh_minimap(gobj)
         {
             size: [200, 140],
             position: "bottom-left",
+            /*
+             *  The anchor has to be CSS, not the pixels G6 computes.
+             *
+             *  `createPluginCanvas` turns `position` into `left`/`top`
+             *  in PIXELS, once, from the canvas size at creation
+             *  (`xRatio * (W - width)`). The container then grows --
+             *  full screen, a window resize, a panel closing -- and the
+             *  minimap stays at the `top` it was given: measured going
+             *  full screen, `top` was still `511px` over a container
+             *  that had become 768 tall, which put it floating halfway
+             *  up the left edge, on top of the graph it is there to
+             *  explain.
+             *
+             *  `containerStyle` is merged AFTER those pixels, so
+             *  `top: auto` + `bottom` is a real anchor the browser
+             *  keeps for every size the container ever takes.
+             *
+             *  And it follows the theme: G6's default is a `#fff` box
+             *  with a `#ddd` border in BOTH themes, which over a
+             *  near-black canvas is the brightest thing on screen.
+             */
+            containerStyle: {
+                top:          "auto",
+                bottom:       "12px",
+                left:         "12px",
+                background:   "var(--bulma-scheme-main, #fff)",
+                border:       "1px solid var(--bulma-border-weak, #ddd)",
+                borderRadius: "6px",
+                boxShadow:    "0 2px 8px rgba(0, 0, 0, 0.15)",
+            },
+            /*  The viewport rectangle: G6 washes it in black, which is
+             *  invisible over a dark minimap. A link-coloured outline
+             *  reads on both.  */
+            maskStyle: {
+                border:     "2px solid var(--bulma-link, #3b82f6)",
+                background: "rgba(59, 130, 246, 0.12)",
+            },
             shape: (id, element_type, element) => {
                 if(element_type !== "node") {
                     return element;     /*  edges clone themselves fine  */

package/src/lib_graph.css

@@ -30,6 +30,36 @@
  *  G6 injects `:not(:root):fullscreen::backdrop { background: transparent }`
  *  with lower specificity, so class + pseudo-class wins without !important.
  */
+/*
+ *  A shift+click on a card must SELECT THE CARD, not smear a text
+ *  selection across the graph.
+ *
+ *  Shift+click is the browser's own "extend the text selection"
+ *  gesture, and the cards are DOM. So the moment shift+click came to
+ *  mean something here, marking three nodes also painted their labels
+ *  blue -- and the wash stayed until the next click somewhere else.
+ *  The canvas is a canvas: nothing in it is prose.
+ *
+ *  Except what IS there to be read or typed into. The popovers this
+ *  gclass appends to the same container carry record data an operator
+ *  may well want to copy, and inputs need a caret.
+ */
+.graph-container {
+    -webkit-user-select: none;
+    user-select: none;
+}
+.graph-container input,
+.graph-container textarea,
+.graph-container select,
+.graph-container [contenteditable],
+.graph-container .g6-confirm-popover,
+.graph-container .g6-create-popover,
+.graph-container .g6-node-popover,
+.graph-container .g6-edge-popover {
+    -webkit-user-select: text;
+    user-select: text;
+}
+
 .graph-container:fullscreen {
     background-color: var(--bulma-background, #fff);
 }
@@ -95,6 +125,17 @@
     min-width: 20px;
 }
 .g6-toolbar.g6-toolbar-large .g6-toolbar-text {
+    /*
+     *  The click has to land on the ITEM, not on this.
+     *
+     *  G6's toolbar fires `onClick` only when the pressed element's own
+     *  class list contains `g6-toolbar-item` -- which is why its CSS
+     *  gives the icon `<svg>` `pointer-events: none`. A text glyph
+     *  needs the same rule for the same reason: without it the press
+     *  lands on this span, the class does not match, and the button is
+     *  simply dead. `1:1` shipped that way.
+     */
+    pointer-events: none;
     display: block;
     line-height: 20px;
     font-size: 0.8125rem;