@yuneta/gobj-ui 7.15.0 → 7.17.0

package/dist/gobj-ui.es.js

@@ -53734,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
 ***************************************************************/
@@ -53845,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: "",
@@ -54073,12 +54075,15 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.on("languageChanged", priv._on_language_changed);
-	if (gobj_read_bool_attr(gobj, "with_fullscreen")) graph.on("keydown", (evt) => {
-		const key = evt.key;
-		const fullscreen = graph_get_plugin(gobj, "fullscreen");
-		if (!fullscreen) return;
-		if (key === "F" || key === "f") fullscreen.request();
-		else if (key === "Escape") fullscreen.exit();
+	graph.on("keydown", (evt) => {
+		let ctrl = !!(evt.ctrlKey || evt.metaKey);
+		if (ctrl && (evt.key === "a" || evt.key === "A")) {
+			if (typeof evt.preventDefault === "function") evt.preventDefault();
+		}
+		gobj_send_event(gobj, "EV_KEY_DOWN", {
+			key: evt.key,
+			ctrl
+		}, gobj);
 	});
 }
 /************************************************************
@@ -54365,9 +54370,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":
@@ -55440,10 +55460,17 @@ function create_form_button_row(parent, buttons) {
 function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_color, onConfirm, priv_key) {
 	hide_overlay(gobj, priv_key);
 	let priv = gobj.priv;
-	if (!target_el) return;
-	let iconRect = target_el.getBoundingClientRect();
 	let containerRect = priv.$container.getBoundingClientRect();
-	const popover = create_popover_base(iconRect.right - containerRect.left + 6, iconRect.top - containerRect.top - 4, "g6-confirm-popover", "#ff4d4f", 160);
+	let left, top;
+	if (target_el) {
+		let iconRect = target_el.getBoundingClientRect();
+		left = iconRect.right - containerRect.left + 6;
+		top = iconRect.top - containerRect.top - 4;
+	} else {
+		left = Math.round(containerRect.width / 2) - 110;
+		top = Math.round(containerRect.height / 4);
+	}
+	const popover = create_popover_base(left, top, "g6-confirm-popover", "#ff4d4f", 160);
 	let msg = document.createElement("div");
 	msg.style.cssText = "margin-bottom:10px;font-weight:500;white-space:pre-line;";
 	msg.textContent = message;
@@ -55482,6 +55509,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;
@@ -55491,6 +55593,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(() => {
@@ -55506,12 +55609,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);
 		});
@@ -56798,33 +56906,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 }
@@ -56835,19 +56946,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 }
@@ -56877,12 +57001,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"})`;
@@ -56901,7 +57042,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;
@@ -56927,7 +57068,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";
@@ -56969,7 +57110,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;
@@ -57013,17 +57154,89 @@ function execute_delete_node(gobj, nodeData) {
 	deselect_node(gobj);
 }
 /************************************************************
+*  Every node in the graph.
+************************************************************/
+function select_all_nodes(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	set_selection(gobj, ((graph.getData() || {}).nodes || []).map((nd) => nd.id));
+}
+/************************************************************
+*  The nodes currently selected, as their node data.
+************************************************************/
+function selected_nodes_data(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let ids = new Set(selected_node_ids(gobj));
+	for (let id of priv._selected_paint_ids || []) ids.add(id);
+	if (priv._selected_node_id) ids.add(priv._selected_node_id);
+	let out = [];
+	for (let id of ids) {
+		let nd;
+		try {
+			nd = graph.getNodeData(id);
+		} catch (e) {
+			continue;
+		}
+		if (nd && nd.data && nd.data.desc) out.push(nd);
+	}
+	return out;
+}
+/************************************************************
+*  What a delete takes with it, for ONE node or for a set.
+*
+*  Same sentence in both cases and the same keys, because it is the
+*  same warning: these views delete with `force`, which UNLINKS the
+*  children (they survive, loose) and cleans the node off its
+*  parents. Over a set the two numbers are the sums -- an operator
+*  about to detach eleven records has to read eleven, not "are you
+*  sure".
+************************************************************/
+function delete_question(nodes) {
+	let children = 0;
+	let parents = 0;
+	for (let nd of nodes) {
+		let impact = delete_impact(nd.data.desc, nd.data.record || {});
+		children += impact.children;
+		parents += impact.parents;
+	}
+	let question;
+	if (nodes.length === 1) {
+		let nd = nodes[0];
+		question = t("delete") + " " + nd.data.desc.topic_name + ": " + (nd.data.record || {}).id + "?";
+	} else question = t("delete") + " " + nodes.length + " " + t("records") + "?";
+	if (children > 0) question += "\n" + children + " " + t("children will be unlinked, not deleted", { count: children });
+	if (parents > 0) question += "\n" + t("it will be detached from") + " " + parents + " " + t("parents", { count: parents });
+	return question;
+}
+/************************************************************
+*  Delete every selected node (the Delete key).
+************************************************************/
+function request_delete_selection(gobj) {
+	let nodes = selected_nodes_data(gobj);
+	if (!nodes.length) return;
+	if (!gobj_read_bool_attr(gobj, "confirm_delete_node")) {
+		execute_delete_selection(gobj, nodes);
+		return;
+	}
+	show_confirm_popover(gobj, null, delete_question(nodes), "delete", "#ff4d4f", () => execute_delete_selection(gobj, nodes), "_delete_confirm_el");
+}
+function execute_delete_selection(gobj, nodes) {
+	let priv = gobj.priv;
+	hide_delete_confirm(gobj);
+	for (let nd of nodes) gobj_publish_event(gobj, "EV_DELETE_NODE", {
+		treedb_name: priv.treedb_name,
+		topic_name: nd.data.desc.topic_name,
+		record: nd.data.record
+	});
+	deselect_node(gobj);
+}
+/************************************************************
 *  Show a confirmation popover next to the delete icon.
 ************************************************************/
 function show_delete_confirm(gobj, nodeData) {
 	let priv = gobj.priv;
-	let record = nodeData.data.record || {};
-	let topic_name = nodeData.data.desc.topic_name;
-	let impact = delete_impact(nodeData.data.desc, record);
-	let question = t("delete") + " " + topic_name + ": " + record.id + "?";
-	if (impact.children > 0) question += "\n" + impact.children + " " + t("children will be unlinked, not deleted", { count: impact.children });
-	if (impact.parents > 0) question += "\n" + t("it will be detached from") + " " + impact.parents + " " + t("parents", { count: impact.parents });
-	show_confirm_popover(gobj, priv._node_delete_el, question, "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
+	show_confirm_popover(gobj, priv._node_delete_el, delete_question([nodeData]), "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
 }
 function hide_delete_confirm(gobj) {
 	hide_overlay(gobj, "_delete_confirm_el");
@@ -57890,6 +58103,49 @@ function ac_node_drag_end(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  A key, while the graph has focus.
+*
+*  Full screen keeps the two keys it always had. The rest belong to
+*  the selection, so they only mean anything in edition -- outside
+*  it there is nothing selected to clear, select or delete.
+************************************************************/
+function ac_key_down(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let key = kw && kw.key || "";
+	if (gobj_read_bool_attr(gobj, "with_fullscreen")) {
+		let fullscreen = graph_get_plugin(gobj, "fullscreen");
+		if (fullscreen) {
+			if (key === "F" || key === "f") fullscreen.request();
+			else if (key === "Escape") fullscreen.exit();
+		}
+	}
+	if (!priv.edit_mode) return 0;
+	if (key === "Escape") {
+		deselect_node(gobj);
+		return 0;
+	}
+	if (kw.ctrl && (key === "a" || key === "A")) {
+		select_all_nodes(gobj);
+		return 0;
+	}
+	if (key === "Delete" || key === "Backspace") {
+		request_delete_selection(gobj);
+		return 0;
+	}
+	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) {
@@ -57904,7 +58160,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]);
@@ -58131,6 +58388,16 @@ function create_gclass$1(gclass_name) {
 			ac_node_drag_end,
 			null
 		],
+		[
+			"EV_BRUSH_SELECT",
+			ac_brush_select,
+			null
+		],
+		[
+			"EV_KEY_DOWN",
+			ac_key_down,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58239,6 +58506,8 @@ 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_KEY_DOWN", 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.15.0",
+  "version": "7.17.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",