@yuneta/gobj-ui 7.23.84 → 7.23.86

package/dist/gobj-ui.es.js

@@ -10555,6 +10555,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) {
@@ -10572,10 +10596,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": 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();
 			gobj_send_event(gobj, event_name, { evt }, gobj);
@@ -11668,7 +11689,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);
@@ -18110,7 +18131,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);
@@ -55651,6 +55672,52 @@ function topic_defaults_of(gobj, topic_name) {
 	return is_object(topic_props) && 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 = 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
@@ -55661,10 +55728,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: ""
@@ -55673,9 +55741,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 = is_object(topic_props) && is_object(topic_props.defaults) ? topic_props.defaults : null;
 	if (topic_defaults) {
@@ -55747,17 +55815,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 {
@@ -55768,7 +55837,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;
@@ -55795,8 +55864,9 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
 	let labels = 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;
@@ -55814,7 +55884,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,
@@ -58639,39 +58709,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);
@@ -58910,15 +58964,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;
 }
@@ -59473,15 +59531,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 && 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 (!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;
 		}
 	}
@@ -59490,27 +59552,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);
 		});
@@ -62036,10 +62098,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();
 					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62061,10 +62120,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();
 			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62158,7 +62214,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",
@@ -62183,7 +62239,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",
@@ -62228,7 +62284,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);
@@ -63197,9 +63253,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 = gobj_read_attr(gobj, "$container");
@@ -63372,7 +63428,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) => createElement2(spec)))
 		]);

package/package.json

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