@yuneta/gobj-ui 7.14.3 → 7.16.0

package/dist/gobj-ui.es.js

@@ -53689,11 +53689,22 @@ function inject_svg_icons() {
 ***********************************************************************/
 /***************************************************************
 *  YuiToolbar — G6 Toolbar subclass that adds per-item className
-*  and disabled support.
+*  and disabled support, plus three item kinds G6 does not have.
 *
 *  Each item in getItems() may carry:
 *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
 *    disabled   — boolean; sets the 'disabled' attribute initially
+*    text       — render this text instead of a sprite symbol; a
+*                 label is the only readable way to say `1:1`, and
+*                 every editor that offers actual-size writes it
+*    readout    — a text item that REPORTS instead of acting (the
+*                 zoom level); it is not a button
+*    separator  — a group divider, not an item
+*
+*  The base class fires onClick only for elements whose class list
+*  contains `g6-toolbar-item`, so a separator and a readout carry
+*  their own class and are inert by construction, with no guard in
+*  the click handler.
 *
 *  With className set to the event name, the lib_graph.js state
 *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -53703,9 +53714,15 @@ function inject_svg_icons() {
 var YuiToolbar = class extends Toolbar {
 	async getDOMContent() {
 		return (await this.options.getItems()).map((item) => {
+			if (item.separator) return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
 			const extra_class = item.className ? ` ${item.className}` : "";
+			const title = item.title ?? "";
+			if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}">${item.text ?? ""}</div>`;
 			const disabled = item.disabled ? " disabled" : "";
-			return `<div class="g6-toolbar-item${extra_class}" value="${item.value}" title="${item.title ?? ""}"${disabled}><svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg></div>`;
+			const is_text = item.text !== void 0;
+			const kind_class = is_text ? " g6-toolbar-item-text" : "";
+			const body = is_text ? `<span class="g6-toolbar-text">${item.text}</span>` : `<svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg>`;
+			return `<div class="g6-toolbar-item${kind_class}${extra_class}" value="${item.value}" title="${title}" aria-label="${title}"${disabled}>${body}</div>`;
 		}).join("");
 	}
 };
@@ -53717,6 +53734,7 @@ ensure_drag_canvas_patch();
 var GCLASS_NAME$1 = "C_G6_NODES_TREE";
 var HIGHLIGHT_COLOR = "#f0a020";
 var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
+var SELECT_RING = "rgba(59,130,246,0.95)";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -53828,6 +53846,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
 	_layout_asked: "",
@@ -54050,6 +54069,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_zoom_readout(gobj);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -54115,6 +54135,59 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 }
+/************************************************************
+*  The floating toolbars follow the theme.
+*
+*  They used to be pinned to a light background in BOTH themes,
+*  with the icon colour pinned dark so it survived that -- two
+*  light islands sitting over a dark canvas. The tokens do the
+*  flipping now; the fallbacks are the old forced-light values, so
+*  a host without Bulma gets exactly what it had.
+************************************************************/
+function toolbar_style(extra) {
+	return Object.assign({
+		backgroundColor: "var(--bulma-scheme-main, #f5f5f5)",
+		color: "var(--bulma-text-strong, #333)",
+		padding: "8px",
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+		borderRadius: "8px",
+		border: "1px solid var(--bulma-border-weak, #e8e8e8)",
+		opacity: "0.85"
+	}, extra || {});
+}
+/************************************************************
+*  The zoom level as a percentage, the way every editor that
+*  shows one writes it. Empty while the graph cannot be asked --
+*  the toolbar is built before the first draw, and a viewport
+*  that does not exist yet has no zoom to report.
+************************************************************/
+function zoom_percent_text(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function") return "";
+	let zoom;
+	try {
+		zoom = graph.getZoom();
+	} catch (e) {
+		return "";
+	}
+	if (!zoom) return "";
+	return `${Math.round(zoom * 100)}%`;
+}
+/************************************************************
+*  Repaint the zoom readout in place.
+*
+*  The text node is patched instead of re-rendering the plugin:
+*  the readout follows the wheel, and updatePlugin() rebuilds the
+*  whole toolbar's innerHTML -- which would also drop the disabled
+*  state of the edit buttons on every notch of the wheel.
+************************************************************/
+function update_zoom_readout(gobj) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = zoom_percent_text(gobj);
+}
 function configure_toolbar(gobj) {
 	let priv = gobj.priv;
 	let toolbar_position = gobj_read_str_attr(gobj, "toolbar_position") || "top-left";
@@ -54123,17 +54196,10 @@ function configure_toolbar(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: toolbar_position,
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85",
+		style: toolbar_style({
 			marginTop: "12px",
 			marginLeft: "12px"
-		},
+		}),
 		getItems: () => {
 			let items = [
 				{
@@ -54148,6 +54214,13 @@ function configure_toolbar(gobj) {
 					className: "EV_ZOOM_OUT",
 					title: t("zoom out")
 				},
+				{
+					readout: true,
+					className: "G6_ZOOM_LEVEL",
+					text: zoom_percent_text(gobj),
+					title: t("zoom level")
+				},
+				{ separator: true },
 				{
 					id: "g6-icon-fit",
 					value: "auto-fit",
@@ -54155,13 +54228,14 @@ function configure_toolbar(gobj) {
 					title: t("auto fit")
 				},
 				{
-					id: "g6-icon-home",
+					text: "1:1",
 					value: "reset",
 					className: "EV_ZOOM_RESET",
-					title: t("reset zoom")
+					title: t("actual size")
 				}
 			];
 			if (gobj_read_bool_attr(gobj, "with_fullscreen")) {
+				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
 					id: "g6-icon-fullscreen-exit",
 					value: "exit-fullscreen",
@@ -54217,15 +54291,7 @@ function configure_toolbar_edit(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: "left-top",
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85"
-		},
+		style: toolbar_style(),
 		getItems: () => {
 			return [
 				{
@@ -54301,9 +54367,24 @@ function configure_behaviour(gobj) {
 		case "edition":
 			priv.edit_mode = true;
 			behaviors = [
-				"drag-canvas",
+				{
+					type: "drag-canvas",
+					key: "drag-canvas",
+					enable: (event) => !event.shiftKey
+				},
 				"zoom-canvas",
-				"drag-element"
+				"drag-element",
+				{
+					type: "brush-select",
+					key: "brush-select",
+					trigger: ["shift"],
+					enableElements: ["node"],
+					immediately: false,
+					onSelect: (states) => {
+						let ids = Object.keys(states || {}).filter((id) => (states[id] || []).includes("selected"));
+						gobj_send_event(gobj, "EV_BRUSH_SELECT", { ids }, gobj);
+					}
+				}
 			];
 			break;
 		case "operation":
@@ -55418,6 +55499,81 @@ function perform_history_op(gobj, is_redo) {
 		sync_history_to_backend(gobj, cmd ? cmd.original : null);
 	}
 }
+/************************************************************
+*  The selection.
+*
+*  G6's `selected` element state IS the selection: `drag-element`
+*  reads it (`getElementDataByState`) to decide what a drag moves,
+*  so keeping the set anywhere else would be a second truth the
+*  drag does not consult. What this gclass keeps is what is
+*  PAINTED -- an html node draws no state style at all (its key
+*  shape is a DOM element), so the ring lives in the card's own
+*  html, exactly like the find highlight, and the painted set
+*  exists to diff the repaint.
+************************************************************/
+function selected_node_ids(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return [];
+	let data;
+	try {
+		data = graph.getElementDataByState("node", "selected") || [];
+	} catch (e) {
+		return [];
+	}
+	return data.map((nd) => nd.id);
+}
+/************************************************************
+*  Move the ring to these nodes and off the ones that had it.
+************************************************************/
+function paint_selection(gobj, ids) {
+	let priv = gobj.priv;
+	let prev = priv._selected_paint_ids || [];
+	let next = ids || [];
+	priv._selected_paint_ids = next;
+	repaint_cards(gobj, /* @__PURE__ */ new Set([...prev, ...next]));
+}
+/************************************************************
+*  Select a SET of nodes: what a marquee and a shift-click do.
+*
+*  It leaves `_selected_node_id` null even for a set of one,
+*  because that field is not "the selection", it is "the node
+*  opened for editing" -- the resize handles, the ports and the
+*  popovers hang off it, and none of them means anything over a
+*  set. Clicking a node is what opens one (`select_node`); a
+*  marquee selects, it does not open.
+************************************************************/
+function set_selection(gobj, ids) {
+	let graph = gobj.priv.graph;
+	let next = [];
+	for (let id of ids || []) try {
+		if (graph.getNodeData(id)) next.push(id);
+	} catch (e) {}
+	deselect_node(gobj);
+	if (!next.length) return;
+	history_pause(gobj);
+	try {
+		let states = {};
+		for (let id of next) states[id] = ["selected"];
+		graph.setElementState(states);
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot set the selection: ${e}`);
+	}
+	paint_selection(gobj, next);
+	graph_draw(gobj).then(() => {
+		history_resume(gobj);
+	});
+}
+/************************************************************
+*  Add a node to the selection, or take it out of it.
+************************************************************/
+function toggle_in_selection(gobj, node_id) {
+	let priv = gobj.priv;
+	let current = new Set(selected_node_ids(gobj));
+	for (let id of priv._selected_paint_ids || []) current.add(id);
+	if (current.has(node_id)) current.delete(node_id);
+	else current.add(node_id);
+	set_selection(gobj, [...current]);
+}
 function select_node(gobj, node_id) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
@@ -55427,6 +55583,7 @@ function select_node(gobj, node_id) {
 		graph.setElementState(node_id, ["selected"]);
 	} catch (e) {}
 	priv._selected_node_id = node_id;
+	paint_selection(gobj, [node_id]);
 	show_resize_handles(gobj);
 	show_node_icon(gobj);
 	graph_draw(gobj).then(() => {
@@ -55442,12 +55599,17 @@ function deselect_node(gobj) {
 	hide_node_popover(gobj);
 	hide_delete_confirm(gobj);
 	hide_unlink_confirm(gobj);
-	if (priv._selected_node_id) {
+	let clearing = /* @__PURE__ */ new Set([...selected_node_ids(gobj), ...priv._selected_paint_ids || []]);
+	if (priv._selected_node_id) clearing.add(priv._selected_node_id);
+	if (clearing.size) {
 		history_pause(gobj);
 		try {
-			graph.setElementState(priv._selected_node_id, []);
+			let states = {};
+			for (let id of clearing) states[id] = [];
+			graph.setElementState(states);
 		} catch (e) {}
 		priv._selected_node_id = null;
+		paint_selection(gobj, []);
 		graph_draw(gobj).then(() => {
 			history_resume(gobj);
 		});
@@ -56734,33 +56896,36 @@ 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_innerHTML_of(nd, theme, highlight) {
+function node_innerHTML_of(nd, theme, highlight, selected) {
 	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);
 	switch (desc.node_treedb_type) {
-		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight);
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected);
 	}
 	return null;
 }
 /************************************************************
-*  Repaint the cards whose highlight state CHANGES: the ones that had it
-*  and lose it, plus the ones that gain it. Only those — a treedb graph
-*  is redrawn per keystroke of the find box otherwise.
+*  Repaint these cards with the flags they carry RIGHT NOW.
+*
+*  One place, because the flags are independent and each used to
+*  be written by whoever repainted last: a find that repainted its
+*  matches erased the selection ring off them, and a selection
+*  repainted over a match erased the amber. Both are read here
+*  from where they live.
 ************************************************************/
-function apply_node_highlight(gobj, prev_ids, next_ids) {
+function repaint_cards(gobj, ids) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
-	if (!graph) return;
-	let next = new Set(next_ids || []);
-	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
-	if (touched.size === 0) return;
+	if (!graph || !ids || !ids.size) return;
+	let focus = new Set(priv._focus_ids || []);
+	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
-	for (let id of touched) {
-		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, next.has(id));
+	for (let id of ids) {
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -56771,19 +56936,32 @@ function apply_node_highlight(gobj, prev_ids, next_ids) {
 		graph.updateNodeData(updates);
 		graph.draw();
 	} catch (e) {
-		log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+		log_error(`${gobj_short_name(gobj)}: cannot repaint the cards: ${e}`);
 	}
 }
+/************************************************************
+*  Repaint the cards whose highlight state CHANGES: the ones that had it
+*  and lose it, plus the ones that gain it. Only those — a treedb graph
+*  is redrawn per keystroke of the find box otherwise.
+************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids) {
+	if (!gobj.priv.graph) return;
+	let next = new Set(next_ids || []);
+	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
+	if (touched.size === 0) return;
+	repaint_cards(gobj, touched);
+}
 function refresh_html_nodes_theme(gobj, theme) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
 	let nodes = graph.getData().nodes || [];
 	let highlighted = new Set(priv._focus_ids || []);
+	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
 	for (let i = 0; i < nodes.length; i++) {
 		let id = nodes[i].id;
-		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id), selected.has(id));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -56813,12 +56991,29 @@ function refresh_default_edges_theme(gobj, theme) {
 	if (updates.length > 0) graph.updateEdgeData(updates);
 }
 /************************************************************
+*  The rings a card can wear, composed into one `box-shadow`.
+*
+*  A node can be a find match and be selected at the same time, so
+*  neither ring may be written by overwriting the other: the amber
+*  halo hugs the card and the blue selection ring is drawn outside
+*  it, which is also the order that reads correctly when only one
+*  of them is on.
+************************************************************/
+function ring_shadow(highlight, selected, base_shadow) {
+	let rings = [];
+	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+	if (selected) rings.push(`0 0 0 ${highlight ? "7px" : "3px"} ${SELECT_RING}`);
+	if (base_shadow) rings.push(base_shadow);
+	if (!rings.length) return "";
+	return `box-shadow: ${rings.join(", ")};`;
+}
+/************************************************************
 *  Build innerHTML for pure-child (leaf) nodes: a compact
 *  chip-card. Same colour/typography family as the entity card
 *  but lighter (1px border, no shadow, single line). The name is
 *  always legible (ellipsis + native title tooltip on overflow).
 ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
@@ -56837,7 +57032,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
-    ${highlight ? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
+    ${ring_shadow(highlight, selected, "")}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -56863,7 +57058,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -56905,7 +57100,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${highlight ? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
+    ${ring_shadow(highlight, selected, shadow)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -57826,6 +58021,17 @@ function ac_node_drag_end(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The rubber band let go: these are the nodes it enclosed.
+*
+*  They arrive in the kw because `onSelect` runs BEFORE G6 writes
+*  the state, so asking the graph here would answer the previous
+*  selection.
+************************************************************/
+function ac_brush_select(gobj, event, kw, src) {
+	set_selection(gobj, kw && kw.ids || []);
+	return 0;
+}
+/************************************************************
 *  Node click - publish vertex clicked event
 ************************************************************/
 function ac_node_click(gobj, event, kw, src) {
@@ -57840,7 +58046,8 @@ function ac_node_click(gobj, event, kw, src) {
 				topic_name: nodedata.data.desc.topic_name,
 				record: nodedata.data.record
 			});
-			if (priv.edit_mode) {
+			if (priv.edit_mode && kw.evt.shiftKey) toggle_in_selection(gobj, node_id);
+			else if (priv.edit_mode) {
 				let containerRect = priv.$container.getBoundingClientRect();
 				let canvasPoint = graph.getCanvasByViewport([kw.evt.client.x - containerRect.left, kw.evt.client.y - containerRect.top]);
 				let port_key = detect_port_click(gobj, node_id, canvasPoint[0], canvasPoint[1]);
@@ -58067,6 +58274,11 @@ function create_gclass$1(gclass_name) {
 			ac_node_drag_end,
 			null
 		],
+		[
+			"EV_BRUSH_SELECT",
+			ac_brush_select,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58175,6 +58387,7 @@ function create_gclass$1(gclass_name) {
 		["EV_NODE_CONTEXT_MENU", 0],
 		["EV_CANVAS_CLICK", 0],
 		["EV_NODE_DRAG_END", 0],
+		["EV_BRUSH_SELECT", 0],
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],

package/package.json

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