@yuneta/gobj-ui 7.19.0 → 7.19.1

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.1",
   "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

@@ -95,6 +95,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;