@yuneta/gobj-ui 7.23.106 → 7.23.108

package/dist/gobj-ui.cjs.js

@@ -3112,10 +3112,11 @@ function yui_shell_show_modal(shell, content, opts) {
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
+	let wide = !!(opts && opts.wide);
 	let $modal = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
 			role: "dialog",
 			"aria-modal": "true"
 		},
@@ -56082,8 +56083,13 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
 	let figure = node_figure_of(gobj, desc, geometry || {});
 	let paint = node_paint_of(gobj, desc, geometry);
-	let stroke = paint.stroke;
-	let line_width = Math.max(paint.lineWidth, 1.5);
+	let fill = dark ? mix_colors(paint.fill, .25, "#2c3542") : mix_colors(paint.fill, .1, "#ffffff");
+	let stroke = dark ? mix_colors(paint.fill, .85, "#ffffff") : paint.fill;
+	let line_width = 2;
+	if (paint.stroke !== getStrokeColor(paint.fill)) {
+		stroke = paint.stroke;
+		line_width = Math.max(paint.lineWidth, 2);
+	}
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -56101,7 +56107,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let style = {
 		size: [side, side],
 		radius: figure === "square" ? Math.round(side / 5) : 0,
-		fill: paint.fill,
+		fill,
 		stroke,
 		lineWidth: line_width,
 		lineDash: dash,

package/dist/gobj-ui.es.js

@@ -3107,10 +3107,11 @@ function yui_shell_show_modal(shell, content, opts) {
 		}]);
 	}
 	let logical = opts && opts.logical_class || "";
+	let wide = !!(opts && opts.wide);
 	let $modal = createElement2([
 		"div",
 		{
-			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+			class: "MODAL" + (logical ? " " + logical : "") + " modal yui-modal" + (dialog ? " yui-dialog" : "") + (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
 			role: "dialog",
 			"aria-modal": "true"
 		},
@@ -56077,8 +56078,13 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
 	let figure = node_figure_of(gobj, desc, geometry || {});
 	let paint = node_paint_of(gobj, desc, geometry);
-	let stroke = paint.stroke;
-	let line_width = Math.max(paint.lineWidth, 1.5);
+	let fill = dark ? mix_colors(paint.fill, .25, "#2c3542") : mix_colors(paint.fill, .1, "#ffffff");
+	let stroke = dark ? mix_colors(paint.fill, .85, "#ffffff") : paint.fill;
+	let line_width = 2;
+	if (paint.stroke !== getStrokeColor(paint.fill)) {
+		stroke = paint.stroke;
+		line_width = Math.max(paint.lineWidth, 2);
+	}
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -56096,7 +56102,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let style = {
 		size: [side, side],
 		radius: figure === "square" ? Math.round(side / 5) : 0,
-		fill: paint.fill,
+		fill,
 		stroke,
 		lineWidth: line_width,
 		lineDash: dash,

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -2456,8 +2456,29 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let figure = node_figure_of(gobj, desc, geometry || {});
     let paint = node_paint_of(gobj, desc, geometry);
 
-    let stroke = paint.stroke;
-    let line_width = Math.max(paint.lineWidth, 1.5);
+    /*  THE SAME PAINT AS THE CARD, and that is the point: a card, a
+     *  pill and a figure are one record drawn at three sizes, so they
+     *  cannot wear two different colour languages. The card is html and
+     *  writes `color-mix()`; a canvas shape cannot, so the same mix is
+     *  computed here -- with `mix_colors()`, which is in this file
+     *  already and for this very reason (the ports).
+     *
+     *  It also gives the figure an EDGE. It used to be the raw topic
+     *  colour filled, ringed by `getStrokeColor()` -- the same colour
+     *  darkened 20%, which measures 1.4:1 against its own fill: not a
+     *  border, a ramp, and a fan of them reads as a blurred picture.
+     *  Tint inside, vivid colour around it, and the canto is there.  */
+    let fill = dark? mix_colors(paint.fill, 0.25, "#2c3542")
+                   : mix_colors(paint.fill, 0.10, "#ffffff");
+    let stroke = dark? mix_colors(paint.fill, 0.85, "#ffffff") : paint.fill;
+    let line_width = 2;
+    /*  A paint somebody CHOSE (a node's or a topic's own, saved in
+     *  `__graphs__`) is not ours to reinterpret: it comes through as
+     *  it was chosen.  */
+    if(paint.stroke !== getStrokeColor(paint.fill)) {
+        stroke = paint.stroke;
+        line_width = Math.max(paint.lineWidth, 2);
+    }
     if(f.selected) {
         stroke = SELECT_RING;
         line_width = 3;
@@ -2480,7 +2501,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let style = {
         size: [side, side],
         radius: (figure === 'square')? Math.round(side / 5) : 0,
-        fill: paint.fill,
+        fill: fill,
         stroke: stroke,
         lineWidth: line_width,
         lineDash: dash,

package/src/c_yui_shell.css

@@ -755,6 +755,12 @@ textarea::placeholder {
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
 }
+/*  A dialog holding a DOCUMENT (`opts.wide`): a json viewer, a record, a
+ *  log. The cap above is a width for a question with two buttons.  */
+.yui-dialog.yui-dialog-wide .yui-dialog-content {
+    max-width: 1000px;
+}
+
 .yui-dialog-header {
     display: flex;
     align-items: center;

package/src/shell_modals.js

@@ -263,9 +263,18 @@ export function yui_shell_show_modal(shell, content, opts)
      *  only this tells one popup from another in the Inspector or a selector. */
     let logical = (opts && opts.logical_class) || "";
 
+    /*  `opts.wide`: a dialog that holds a DOCUMENT and not a form. The
+     *  640px of the standard card is a width for a question with two
+     *  buttons; a json viewer, a log or a record read in it wraps every
+     *  long value and pushes its own toolbar behind a scroll arrow. It
+     *  only lifts the desktop cap -- on mobile a dialog is a full-screen
+     *  sheet already, and the media query below still wins.  */
+    let wide = !!(opts && opts.wide);
+
     let $modal = createElement2(
         ["div", {class: "MODAL" + (logical ? " " + logical : "") +
-                        " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+                        " modal yui-modal" + (dialog ? " yui-dialog" : "") +
+                        (dialog && wide ? " yui-dialog-wide" : "") + " is-active",
                  role: "dialog", "aria-modal": "true"},
             modal_children
         ]