@yuneta/gobj-ui 7.23.80 → 7.23.81

package/dist/gobj-ui.es.js

@@ -6,7 +6,7 @@ import { createJSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import * as maplibregl from "maplibre-gl";
 import uPlot from "uplot";
-import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HistoryEvent, NodeEvent, Toolbar, ZoomCanvas, register } from "@antv/g6";
+import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Toolbar, ZoomCanvas, register } from "@antv/g6";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -43154,7 +43154,7 @@ var _excluded$5 = ["style"];
 * HTML container
 * @see https://github.com/pmndrs/drei#html
 */
-var HTML = /*#__PURE__*/ function(_DisplayObject) {
+var HTML$1 = /*#__PURE__*/ function(_DisplayObject) {
 	function HTML() {
 		var _this;
 		var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, style = _ref.style, rest = _objectWithoutProperties(_ref, _excluded$5);
@@ -43202,7 +43202,7 @@ var HTML = /*#__PURE__*/ function(_DisplayObject) {
 		}
 	]);
 }(DisplayObject);
-HTML.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARSED_STYLE_LIST), [
+HTML$1.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARSED_STYLE_LIST), [
 	"x",
 	"y",
 	"$el",
@@ -54653,6 +54653,8 @@ var PRIVATE_DATA$4 = {
 	_edge_icon_el: null,
 	_edge_delete_el: null,
 	_edge_popover_el: null,
+	_port_icon_el: null,
+	_port_popover_el: null,
 	_node_icon_el: null,
 	_node_delete_el: null,
 	_node_popover_el: null,
@@ -54843,6 +54845,7 @@ function register_layouts(gobj) {
 		register(ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
 		register(ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		register(ExtensionCategory.NODE, "light", LightNode);
+		register(ExtensionCategory.NODE, "treedb-card", TreedbCard);
 	}
 }
 /************************************************************
@@ -54912,6 +54915,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_port_icon_position(gobj);
 	});
 	graph.on(NodeEvent.DRAG_END, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_DRAG_END", { evt }, gobj);
@@ -54936,6 +54940,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_port_icon_position(gobj);
 		update_zoom_readout(gobj);
 		let z = priv.last_zoom;
 		try {
@@ -55652,12 +55657,22 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 			if (r == null && is_object(default_port_sizes)) r = default_port_sizes[key];
 			if (r != null) style.ports[i].r = r;
 		}
+		let port_shapes = geometry.port_shapes;
+		let default_port_shapes = topic_defaults ? topic_defaults.port_shapes : null;
+		let default_shape = topic_defaults ? topic_defaults.port_shape : null;
+		for (let i = 0; i < style.ports.length; i++) {
+			let key = style.ports[i].key;
+			let shape = is_object(port_shapes) ? port_shapes[key] : null;
+			if (!shape && is_object(default_port_shapes)) shape = default_port_shapes[key];
+			if (!shape) shape = default_shape;
+			if (shape && str_in_list(PORT_SHAPES, shape)) style.ports[i].shape = shape;
+		}
 	} else {
 		style.port = false;
 		style.ports = [];
 	}
 	return {
-		type: "html",
+		type: "treedb-card",
 		style
 	};
 }
@@ -56081,6 +56096,10 @@ function update_geometry(gobj, node_id) {
 		for (let i = 0; i < ports.length; i++) if (ports[i].r != null) port_sizes[ports[i].key] = ports[i].r;
 		if (Object.keys(port_sizes).length > 0) node_props.port_sizes = port_sizes;
 		else delete node_props.port_sizes;
+		let port_shapes = {};
+		for (let i = 0; i < ports.length; i++) if (ports[i].shape && ports[i].shape !== "circle") port_shapes[ports[i].key] = ports[i].shape;
+		if (Object.keys(port_shapes).length > 0) node_props.port_shapes = port_shapes;
+		else delete node_props.port_shapes;
 	}
 	topic_props.nodes[record.id] = node_props;
 	nodedata.data.graph_props = node_props;
@@ -56563,11 +56582,74 @@ function graph_resize(gobj, width, height) {
 	update_port_resize_handles_position(gobj);
 	update_node_icon_position(gobj);
 	update_link_icon_position(gobj);
+	update_port_icon_position(gobj);
 }
 function graph_write_behaviors(gobj, behaviors) {
 	gobj.priv.graph.setOptions({ behaviors });
 }
 /************************************************************
+*  Custom G6 node: TreedbCard -- G6's html node with ports that
+*  have a SHAPE.
+*
+*  G6 draws every port as a circle (`drawPortShapes` upserts a
+*  `Circle`, nothing in the port style says otherwise). A port's
+*  `shape` -- `circle`, `square`, `diamond`, `triangle` -- picks
+*  the G shape here, by the names G6 registers itself, and `r`
+*  stays the one size: the half-side of the square, the half-
+*  diagonal of the diamond, the half-height of the triangle. The
+*  hit test, the resize handles and the edge's landing point all
+*  read `r` and none of them care about the outline.
+************************************************************/
+var PORT_SHAPES = [
+	"circle",
+	"square",
+	"diamond",
+	"triangle"
+];
+var TreedbCard = class extends HTML {
+	drawPortShapes(attributes, container) {
+		const portsStyle = this.getPortsStyle(attributes);
+		Object.keys(portsStyle).forEach((key) => {
+			const style = portsStyle[key];
+			const shapeKey = `port-${key}`;
+			if (style === false) {
+				this.upsert(shapeKey, "circle", false, container);
+				return;
+			}
+			let r = Number(style.r) || 0;
+			switch (style.shape) {
+				case "square":
+					this.upsert(shapeKey, "rect", Object.assign({}, style, {
+						x: -r,
+						y: -r,
+						width: 2 * r,
+						height: 2 * r
+					}), container);
+					break;
+				case "diamond":
+					this.upsert(shapeKey, "polygon", Object.assign({}, style, { points: [
+						[0, -r],
+						[r, 0],
+						[0, r],
+						[-r, 0]
+					] }), container);
+					break;
+				case "triangle":
+					this.upsert(shapeKey, "polygon", Object.assign({}, style, { points: [
+						[0, -r],
+						[r, r],
+						[-r, r]
+					] }), container);
+					break;
+				default: this.upsert(shapeKey, "circle", style, container);
+			}
+		});
+	}
+};
+function is_card_type(type) {
+	return type === "treedb-card" || type === "html";
+}
+/************************************************************
 *  Custom G6 node: LightNode (circle with status indicator)
 ************************************************************/
 var LightNode = class extends Circle {
@@ -57313,7 +57395,7 @@ function start_node_resize(gobj, e, mx, my) {
 		};
 		if (nodeType === "circle") updateStyle.size = [Math.max(newW, newH)];
 		else updateStyle.size = [newW, newH];
-		if (nodeType === "html") {
+		if (is_card_type(nodeType)) {
 			updateStyle.dx = -newW / 2;
 			updateStyle.dy = -newH / 2;
 		}
@@ -57438,6 +57520,7 @@ function select_port(gobj, node_id, port_key) {
 	priv._selected_port_key = port_key;
 	show_port_resize_handles(gobj);
 	show_link_icon_if_fkey(gobj);
+	show_port_icon(gobj);
 }
 /************************************************************
 *  Deselect port: clear port state, return to node selection.
@@ -57446,6 +57529,8 @@ function deselect_port(gobj) {
 	let priv = gobj.priv;
 	exit_linking_mode(gobj);
 	hide_link_icon(gobj);
+	hide_port_icon(gobj);
+	hide_port_popover(gobj);
 	hide_port_resize_handles(gobj);
 	priv._selected_port_key = null;
 }
@@ -57498,6 +57583,217 @@ function update_link_icon_position(gobj) {
 	}
 }
 /************************************************************
+*  Port properties icon and popover: the gear beside a selected
+*  port, as the node has its own. The popover has the two things
+*  a port IS on screen -- its shape and its radius -- and the
+*  scope: this port, the same port of every card of the topic
+*  (the hook or fkey column), or every port there is.
+************************************************************/
+function port_icon_xy(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let canvasPos = get_port_canvas_position(gobj, priv._selected_node_id, priv._selected_port_key);
+	if (!canvasPos) return null;
+	let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
+	let below = priv._link_icon_el ? floating_icon_step() : 0;
+	return {
+		x: vp[0] + floating_icon_size() / 2 + 4,
+		y: vp[1] + floating_icon_dy() + below
+	};
+}
+function show_port_icon(gobj) {
+	hide_port_icon(gobj);
+	let priv = gobj.priv;
+	if (!priv._selected_node_id || !priv._selected_port_key) return;
+	let xy = port_icon_xy(gobj);
+	if (!xy) return;
+	let icon = create_floating_icon("gear", "#1890ff", xy.x, xy.y, t("port properties"), () => toggle_port_popover(gobj));
+	priv.$container.appendChild(icon);
+	priv._port_icon_el = icon;
+}
+function hide_port_icon(gobj) {
+	hide_overlay(gobj, "_port_icon_el");
+}
+function update_port_icon_position(gobj) {
+	let priv = gobj.priv;
+	if (!priv._port_icon_el || !priv._selected_node_id || !priv._selected_port_key) return;
+	try {
+		let xy = port_icon_xy(gobj);
+		if (!xy) {
+			hide_port_icon(gobj);
+			hide_port_popover(gobj);
+			return;
+		}
+		priv._port_icon_el.style.left = xy.x + "px";
+		priv._port_icon_el.style.top = xy.y + "px";
+		if (priv._port_popover_el) {
+			priv._port_popover_el.style.left = xy.x + floating_popover_dx() + "px";
+			priv._port_popover_el.style.top = xy.y + "px";
+			clamp_popover_position(gobj, priv._port_popover_el);
+		}
+	} catch (e) {
+		hide_port_icon(gobj);
+		hide_port_popover(gobj);
+	}
+}
+function toggle_port_popover(gobj) {
+	if (gobj.priv._port_popover_el) hide_port_popover(gobj);
+	else show_port_popover(gobj);
+}
+function hide_port_popover(gobj) {
+	hide_overlay(gobj, "_port_popover_el");
+}
+function ports_with(ports, port_key, changes) {
+	return (ports || []).map((p) => p.key === port_key ? Object.assign({}, p, changes) : p);
+}
+function show_port_popover(gobj) {
+	hide_port_popover(gobj);
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let node_id = priv._selected_node_id;
+	let port_key = priv._selected_port_key;
+	if (!node_id || !port_key) return;
+	let nodeData = graph.getNodeData(node_id);
+	if (!nodeData || !nodeData.style) return;
+	let port = (nodeData.style.ports || []).find((p) => p.key === port_key);
+	if (!port) return;
+	let orig_shape = port.shape || "circle";
+	let orig_r = get_port_radius(gobj, node_id, port_key);
+	let xy = port_icon_xy(gobj);
+	if (!xy) return;
+	const popover = create_popover_base(xy.x + floating_popover_dx(), xy.y, "g6-port-popover", "#d9d9d9", 180);
+	function preview_port() {
+		let r = parseInt(rInput.value) || orig_r;
+		graph.updateNodeData([{
+			id: node_id,
+			style: { ports: ports_with(nodeData.style.ports, port_key, {
+				shape: shapeSelect.value,
+				r
+			}) }
+		}]);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+		});
+	}
+	create_form_label(popover, "shape");
+	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
+		return {
+			value: shape,
+			label: t(shape)
+		};
+	}));
+	shapeSelect.value = orig_shape;
+	shapeSelect.addEventListener("change", preview_port);
+	create_form_label(popover, "radius");
+	let rInput = create_form_number_input(popover, orig_r, 2, 40, preview_port);
+	create_form_label(popover, "apply to");
+	let scopeSelect = create_form_select(popover, [
+		{
+			value: "this",
+			label: t("this port")
+		},
+		{
+			value: "same_topic",
+			label: t("same port in topic")
+		},
+		{
+			value: "all",
+			label: t("all ports")
+		}
+	]);
+	create_form_button_row(popover, [{
+		text: "cancel",
+		style: BTN_STYLE_CANCEL,
+		onClick: () => {
+			graph.updateNodeData([{
+				id: node_id,
+				style: { ports: ports_with(nodeData.style.ports, port_key, {
+					shape: orig_shape,
+					r: orig_r
+				}) }
+			}]);
+			graph.draw().then(() => {
+				update_port_resize_handles_position(gobj);
+			});
+			hide_port_popover(gobj);
+		}
+	}, {
+		text: "apply",
+		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
+		onClick: () => {
+			apply_port_properties(gobj, node_id, port_key, shapeSelect.value, parseInt(rInput.value) || orig_r, scopeSelect.value);
+		}
+	}]);
+	priv.$container.appendChild(popover);
+	priv._port_popover_el = popover;
+	clamp_popover_position(gobj, popover);
+}
+/************************************************************
+*  Apply a port's shape and radius to one port, to the same port
+*  of every card of the topic, or to every port -- and remember
+*  the choice as the topic's default, the way `resize all ports`
+*  does, so a card that arrives later is born with it.
+*      scope: 'this', 'same_topic', 'all'
+************************************************************/
+function apply_port_properties(gobj, node_id, port_key, shape, r, scope) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let nodeData = graph.getNodeData(node_id);
+	if (!nodeData || !nodeData.data) return;
+	let source_topic = nodeData.data.topic_name;
+	if (scope === "same_topic") {
+		if (!is_object(priv._graph_properties[source_topic])) priv._graph_properties[source_topic] = {};
+		let defaults = priv._graph_properties[source_topic].defaults || {};
+		defaults.port_sizes = Object.assign({}, defaults.port_sizes, { [port_key]: r });
+		defaults.port_shapes = Object.assign({}, defaults.port_shapes, { [port_key]: shape });
+		priv._graph_properties[source_topic].defaults = defaults;
+	} else if (scope === "all") for (const topic_name of Object.keys(priv.descs || {})) {
+		if (!is_object(priv._graph_properties[topic_name])) priv._graph_properties[topic_name] = {};
+		let defaults = priv._graph_properties[topic_name].defaults || {};
+		defaults.portR = r;
+		defaults.port_shape = shape;
+		delete defaults.port_sizes;
+		delete defaults.port_shapes;
+		priv._graph_properties[topic_name].defaults = defaults;
+	}
+	let updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		if (!nd || !nd.data || !nd.data.desc || !nd.style || !is_array(nd.style.ports)) continue;
+		let new_ports;
+		if (scope === "this") {
+			if (nd.id !== node_id) continue;
+			new_ports = ports_with(nd.style.ports, port_key, {
+				shape,
+				r
+			});
+		} else if (scope === "same_topic") {
+			if (nd.data.topic_name !== source_topic) continue;
+			new_ports = ports_with(nd.style.ports, port_key, {
+				shape,
+				r
+			});
+		} else new_ports = nd.style.ports.map((p) => Object.assign({}, p, {
+			shape,
+			r
+		}));
+		let upd = { ports: new_ports };
+		if (scope === "all") upd.portR = r;
+		updates.push({
+			id: nd.id,
+			style: upd
+		});
+	}
+	if (updates.length > 0) {
+		graph.updateNodeData(updates);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+			update_port_icon_position(gobj);
+			mark_graph_dirty(gobj);
+		});
+	}
+	hide_port_popover(gobj);
+}
+/************************************************************
 *  Get a column descriptor by field id from a topic desc.
 ************************************************************/
 function get_col_by_id(desc, col_id) {
@@ -59172,6 +59468,7 @@ function build_port_context_menu(gobj, node_id, port_key) {
 	let items = [];
 	if (gobj.priv.edit_mode) {
 		inject_svg_icons();
+		items.push(ctx_item("g6-icon-edit", t("port properties"), "port_properties"));
 		items.push(ctx_item("g6-icon-resize", t("resize all ports"), "resize_all_ports"));
 		items.push(ctx_item("g6-icon-resize", t("resize topic ports"), "resize_topic_ports"));
 	}
@@ -59204,6 +59501,12 @@ function handle_context_menu_click(gobj, value) {
 		case "reset_topic_sizes":
 			reset_sizes(gobj, true);
 			break;
+		case "port_properties":
+			if (priv._context_node_id && priv._context_port_key) {
+				select_port(gobj, priv._context_node_id, priv._context_port_key);
+				show_port_popover(gobj);
+			}
+			break;
 		case "resize_all_ports":
 			copy_size_to_ports(gobj, false);
 			break;
@@ -59247,7 +59550,7 @@ function copy_size_to_nodes(gobj, same_topic_only) {
 		if (nodes[i].id === node_id) continue;
 		let updateStyle = { size: [...source_size] };
 		if (source_portR != null) updateStyle.portR = source_portR;
-		if (nd.type === "html") {
+		if (is_card_type(nd.type)) {
 			updateStyle.dx = -source_size[0] / 2;
 			updateStyle.dy = -(source_size.length > 1 ? source_size[1] : source_size[0]) / 2;
 		}
@@ -59847,6 +60150,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	update_edge_icon_position(gobj);
 	update_node_icon_position(gobj);
 	update_link_icon_position(gobj);
+	update_port_icon_position(gobj);
 	return changed;
 }
 /************************************************************

package/package.json

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