@yuneta/gobj-ui 7.23.84 → 7.23.86

package/README.md

@@ -850,6 +850,16 @@ both keys, either — a G6 `trigger` is a CHORD, not a list of alternatives:
 `Shortcut.match()` compares the keys held to the keys bound as a SET, so
 `['Control', 'Meta']` would mean both at once.
 
+**One glyph size for the whole row** (`7.23.86`): `YUI_GRAPH_ICON_SIZE` in
+`yui_graph_camera.js`, with a `yui_graph_icon()` that builds the `<i>`. It is
+in **`rem` and not `em`** for a reason worth keeping: in `em` the same
+`1.5em` drew 24px inside a plain button, 18px inside an `is-small` chip of
+the legend, and a labelled button left its icon at the inherited 16px — three
+sizes in two strips that are read as one thing. The legend under the toolbar
+follows it: topic name at `1rem`, count at `.875rem` (the one deliberate step
+down), glyphs at the shared size, and `align-items: stretch` so a chip's star
+and crosshair are as tall as its body.
+
 `C_G6_NODES_TREE` floats a vertical toolbar over the canvas:
 
 | control | what it does |
@@ -1374,6 +1384,20 @@ screen every card is a smudge. Since `7.23.82` a record has **three views**
   popover's own scope: this node, the topic, every node), remembered as the
   topic's default and saved per node in `__graphs__` as `node_shape`.
 
+**The colours are remembered the same way** (since `7.23.85`): `apply` writes
+`fill`, `stroke` and `lineWidth` into the node's entry in `__graphs__` — and
+into the topic's defaults for the wider scopes — and the three views read
+them back through one `node_paint_of()`, while every repaint takes the colour
+from the style the node is wearing rather than from `desc.color`. Before
+that, the colour lived on the live style alone, which on an html card is
+UNDER the html: the first repaint (a selection, the focus, a theme switch, a
+pill appearing) rebuilt that html from the topic's colour and the choice was
+gone, and nothing of it ever reached the store. Choosing the topic's own
+colour back, with the stroke and line width that go with it, **forgets** the
+entry instead of writing it: the palette is assigned by position, so a
+colour written down would freeze today's palette on that card — the trap the
+sizes fell into in `7.23.80`.
+
 In the view's toolbar (`C_YUI_TREEDB_GRAPH`), next to the fold pair: three
 push buttons in one group — a card, a line, a figure — the pressed one being
 the view that is on (`full` / `compact` / `shape`, persisted as `node_mode`;

package/dist/gobj-ui.cjs.js

@@ -10560,6 +10560,30 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
+*   ONE size for every glyph of a graph's toolbar ROW, in
+*   `rem` and not `em`.
+*
+*   In `em` the same declaration draws three different icons:
+*   `1.5em` is 24px inside a plain button, 18px inside an
+*   `is-small` one, and a labelled button left its icon at the
+*   inherited 16px -- so one row held 16px, 18px and 24px
+*   glyphs and looked like three toolbars pushed together.
+*   `rem` is measured against the page, so a chip that is
+*   deliberately shorter than a button still carries the same
+*   glyph.
+*
+*   20px against the row's 16px text: an icon-only button is
+*   legible at half its 40px height, and beside a label the
+*   glyph reads as a marker rather than as a second word.
+************************************************************/
+var YUI_GRAPH_ICON_SIZE = "1.25rem";
+function yui_graph_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
+/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10577,10 +10601,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": (0, i18next.t)(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
-			class: icon
-		}],
+		yui_graph_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
@@ -11673,7 +11694,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18115,7 +18136,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -55656,6 +55677,52 @@ function topic_defaults_of(gobj, topic_name) {
 	return (0, _yuneta_gobj_js.is_object)(topic_props) && (0, _yuneta_gobj_js.is_object)(topic_props.defaults) ? topic_props.defaults : null;
 }
 /************************************************************
+*  What a node is PAINTED with: its own colours, then the
+*  topic's default, then the topic's colour.
+*
+*  A card is html, and its html was built with `desc.color`
+*  every time it was repainted -- so a colour chosen in the node
+*  properties popover lasted until the next selection, focus,
+*  theme or pill change, and was never written to `__graphs__`
+*  at all. Only the `shape` view kept it, because a figure is a
+*  native G6 node and `style.fill` is what paints it. The FIGURE
+*  was already remembered (`node_shape`); this is the wiring the
+*  colour was missing.
+************************************************************/
+function node_paint_of(gobj, desc, geometry) {
+	let defaults = topic_defaults_of(gobj, desc.topic_name);
+	let g = (0, _yuneta_gobj_js.is_object)(geometry) ? geometry : {};
+	let fill = g.fill || defaults && defaults.fill || desc.color;
+	return {
+		fill,
+		stroke: g.stroke || defaults && defaults.stroke || getStrokeColor(fill),
+		lineWidth: g.lineWidth || defaults && defaults.lineWidth || 1
+	};
+}
+/************************************************************
+*  Write a chosen paint into an entry of `__graphs__` -- a
+*  node's or a topic's defaults.
+*
+*  A colour nobody chose is not saved: the topic's own colour,
+*  with the stroke and the line width that go with it, is what a
+*  card wears anyway, and writing it down would freeze today's
+*  palette on that card -- the trap the SIZES fell into in
+*  7.23.80, and the palette is assigned by POSITION (`ac_descs`),
+*  so it moves when a topic is added. Choosing it back MEANS
+*  forgetting the entry.
+************************************************************/
+function paint_into(entry, desc, fill, stroke, line_width) {
+	if (fill === desc.color && stroke === getStrokeColor(desc.color) && line_width === 1) {
+		delete entry.fill;
+		delete entry.stroke;
+		delete entry.lineWidth;
+		return;
+	}
+	entry.fill = fill;
+	entry.stroke = stroke;
+	entry.lineWidth = line_width;
+}
+/************************************************************
 *  The CARD: an html node, the tier's size, the ports, the
 *  saved geometry on top. The flags (focus, selection, anchor)
 *  are not painted here: repaint_cards() reads them where they
@@ -55666,10 +55733,11 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 	let node_treedb_type = desc.node_treedb_type;
 	let label = node_label(desc, record);
 	let ports = build_ports(gobj, desc);
+	let paint = node_paint_of(gobj, desc, geometry);
 	let style = {
-		fill: desc.color,
-		stroke: getStrokeColor(desc.color),
-		lineWidth: 1,
+		fill: paint.fill,
+		stroke: paint.stroke,
+		lineWidth: paint.lineWidth,
 		lineDash: [],
 		halo: false,
 		labelText: ""
@@ -55678,9 +55746,9 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 	style.size = size;
 	style.dx = -size[0] / 2;
 	style.dy = -size[1] / 2;
-	if (node_treedb_type === "child") style.innerHTML = build_chip_innerHTML(desc.color, priv.theme, record.icon, label, record.id);
-	else if (node_treedb_type === "extended") style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, label, desc.topic_name, true, record.id, false, false, false, pills_html);
-	else style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, label, desc.topic_name, false, record.id, false, false, false, pills_html);
+	if (node_treedb_type === "child") style.innerHTML = build_chip_innerHTML(paint.fill, priv.theme, record.icon, label, record.id);
+	else if (node_treedb_type === "extended") style.innerHTML = build_node_innerHTML(paint.fill, priv.theme, record.icon, label, desc.topic_name, true, record.id, false, false, false, pills_html);
+	else style.innerHTML = build_node_innerHTML(paint.fill, priv.theme, record.icon, label, desc.topic_name, false, record.id, false, false, false, pills_html);
 	let topic_props = priv._graph_properties[desc.topic_name];
 	let topic_defaults = (0, _yuneta_gobj_js.is_object)(topic_props) && (0, _yuneta_gobj_js.is_object)(topic_props.defaults) ? topic_props.defaults : null;
 	if (topic_defaults) {
@@ -55752,17 +55820,18 @@ function pill_shape_of(gobj, desc, record, geometry) {
 	let priv = gobj.priv;
 	let size = PILL_SIZE[desc.node_treedb_type] || PILL_SIZE.hierarchical;
 	let ports = build_ports(gobj, desc);
+	let paint = node_paint_of(gobj, desc, geometry);
 	let style = {
-		fill: desc.color,
-		stroke: getStrokeColor(desc.color),
-		lineWidth: 1,
+		fill: paint.fill,
+		stroke: paint.stroke,
+		lineWidth: paint.lineWidth,
 		lineDash: [],
 		halo: false,
 		labelText: "",
 		size: [...size],
 		dx: -size[0] / 2,
 		dy: -size[1] / 2,
-		innerHTML: build_chip_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), record.id)
+		innerHTML: build_chip_innerHTML(paint.fill, priv.theme, record.icon, node_label(desc, record), record.id)
 	};
 	dress_ports(gobj, style, ports, geometry, topic_defaults_of(gobj, desc.topic_name), PORT_R_PILL, true);
 	return {
@@ -55773,7 +55842,7 @@ function pill_shape_of(gobj, desc, record, geometry) {
 function pill_innerHTML_of(gobj, nd, theme, highlight, selected, anchored) {
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
-	return build_chip_innerHTML(desc.color, theme, record.icon, node_label(desc, record), record.id, highlight, selected, anchored);
+	return build_chip_innerHTML(node_fill_of(nd), theme, record.icon, node_label(desc, record), record.id, highlight, selected, anchored);
 }
 function node_figure_of(gobj, desc, geometry) {
 	let shape = geometry ? geometry.node_shape : null;
@@ -55800,8 +55869,9 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
 	let figure = node_figure_of(gobj, desc, geometry || {});
-	let stroke = getStrokeColor(desc.color);
-	let line_width = 1.5;
+	let paint = node_paint_of(gobj, desc, geometry);
+	let stroke = paint.stroke;
+	let line_width = Math.max(paint.lineWidth, 1.5);
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -55819,7 +55889,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let style = {
 		size: [side, side],
 		radius: figure === "square" ? Math.round(side / 5) : 0,
-		fill: desc.color,
+		fill: paint.fill,
 		stroke,
 		lineWidth: line_width,
 		lineDash: dash,
@@ -58644,39 +58714,23 @@ function show_node_popover(gobj) {
 	let rect = get_node_viewport_rect(gobj, node_id);
 	if (!rect) return;
 	const popover = create_popover_base(rect.right + floating_popover_dx(), rect.top + floating_icon_dy(), "g6-node-popover", "#d9d9d9", 180);
-	let node_graph_type = nodeData.data && nodeData.data.desc ? nodeData.data.desc.node_treedb_type : null;
-	let undo_node = () => {
-		let restoreStyle = {
-			fill: origFill,
-			stroke: origStroke,
-			lineWidth: origLW
-		};
-		if (node_graph_type === "hierarchical") {
-			let record = nodeData.data.record || {};
-			restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
-		}
+	let paint_node = (fill, stroke, lw) => {
 		graph.updateNodeData([{
 			id: node_id,
-			style: restoreStyle
+			style: {
+				fill,
+				stroke,
+				lineWidth: lw
+			}
 		}]);
+		repaint_cards(gobj, /* @__PURE__ */ new Set([node_id]));
 		graph.draw();
 	};
+	let undo_node = () => {
+		paint_node(origFill, origStroke, origLW);
+	};
 	function preview_node() {
-		let fill = fillInput.value;
-		let updateStyle = {
-			fill,
-			stroke: strokeInput.value,
-			lineWidth: parseInt(lwInput.value) || 1
-		};
-		if (node_graph_type === "hierarchical") {
-			let record = nodeData.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
-		}
-		graph.updateNodeData([{
-			id: node_id,
-			style: updateStyle
-		}]);
-		graph.draw();
+		paint_node(fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1);
 	}
 	create_form_label(popover, "fill color");
 	let fillInput = create_form_color_input(popover, currentFill, preview_node);
@@ -58915,15 +58969,19 @@ function refresh_minimap(gobj) {
 *  same three-way choice — it lived inline in the theme refresh and is
 *  shared now. Returns null for a node that carries no desc.
 ************************************************************/
+function node_fill_of(nd) {
+	return nd && nd.style && nd.style.fill || nd.data.desc.color;
+}
 function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html) {
 	if (!nd || !nd.data || !nd.data.desc) return null;
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
 	let label = node_label(desc, record);
+	let fill = node_fill_of(nd);
 	switch (desc.node_treedb_type) {
-		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected, anchored);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored, pills_html);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored, pills_html);
+		case "child": return build_chip_innerHTML(fill, theme, record.icon, label, record.id, highlight, selected, anchored);
+		case "extended": return build_node_innerHTML(fill, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored, pills_html);
+		case "hierarchical": return build_node_innerHTML(fill, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored, pills_html);
 	}
 	return null;
 }
@@ -59478,15 +59536,19 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
 	if (!nodeData || !nodeData.data) return;
 	let source_topic = nodeData.data.desc ? nodeData.data.desc.topic_name : null;
 	let updates = [];
+	let repaint = /* @__PURE__ */ new Set();
 	const nodes = graph.getData().nodes;
 	let figure = shape && (0, _yuneta_gobj_js.str_in_list)(NODE_SHAPES, shape) ? shape : "";
 	let reshaped = [];
-	if (figure && scope !== "this") {
+	if (scope !== "this") {
 		let topics = scope === "same_topic" ? [source_topic] : Object.keys(priv.descs || {});
 		for (let topic_name of topics) {
+			let desc = priv.descs[topic_name];
+			if (!desc) continue;
 			if (!(0, _yuneta_gobj_js.is_object)(priv._graph_properties[topic_name])) priv._graph_properties[topic_name] = {};
 			let defaults = priv._graph_properties[topic_name].defaults || {};
-			defaults.node_shape = figure;
+			if (figure) defaults.node_shape = figure;
+			paint_into(defaults, desc, fill, stroke, lineWidth);
 			priv._graph_properties[topic_name].defaults = defaults;
 		}
 	}
@@ -59495,27 +59557,27 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
 		if (!nd || !nd.data || !nd.data.desc) continue;
 		if (scope === "this" && nodes[i].id !== node_id) continue;
 		if (scope === "same_topic" && nd.data.desc.topic_name !== source_topic) continue;
+		let entry = node_props_entry(gobj, nd);
 		if (figure) {
-			node_props_entry(gobj, nd).node_shape = figure;
+			entry.node_shape = figure;
 			if (node_mode_of(gobj, nodes[i].id) === "shape") reshaped.push(nodes[i].id);
 		}
+		paint_into(entry, nd.data.desc, fill, stroke, lineWidth);
 		let updateStyle = {
 			fill,
 			stroke,
 			lineWidth
 		};
-		if (nd.data.desc.node_treedb_type === "hierarchical") {
-			let record = nd.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nd));
-		}
 		updates.push({
 			id: nodes[i].id,
 			style: updateStyle
 		});
+		repaint.add(nodes[i].id);
 	}
 	if (updates.length > 0) {
 		graph.updateNodeData(updates);
 		if (reshaped.length) reshape_nodes(gobj, reshaped);
+		repaint_cards(gobj, repaint);
 		graph.draw().then(() => {
 			mark_graph_dirty(gobj);
 		});
@@ -62041,10 +62103,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				["i", {
-					style: "font-size:1.5em; color:inherit;",
-					class: NODE_MODE_ICONS[mode]
-				}],
+				yui_graph_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62066,10 +62125,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;",
-			class: "yi-font"
-		}],
+		yui_graph_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62163,7 +62219,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_graph_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62188,7 +62244,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[["i", { class: "yi-eye" }], [
+			[yui_graph_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62233,7 +62289,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63202,9 +63258,9 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
-var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
-var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -63377,7 +63433,7 @@ function refresh_legend(gobj) {
 			"div",
 			{
 				class: "GRAPH_LEGEND_CHIP buttons has-addons",
-				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
 			[$body].concat(extras.map((spec) => (0, _yuneta_gobj_js.createElement2)(spec)))
 		]);