@yuneta/gobj-ui 7.23.80 → 7.23.81

package/README.md

@@ -1388,6 +1388,29 @@ radius and per-port radius — per node and as topic defaults from `resize all`
 on the spot, and arm Save. Positions and edge styles are not touched.
 Consumer i18n keys: `reset sizes`, `reset topic sizes`.
 
+**A port has a shape, and its own properties popover** (since `7.23.81`).
+G6 draws every port as a circle — `drawPortShapes` upserts a `Circle` and
+nothing in the port style says otherwise — so a record's card is now a node
+of its own, `treedb-card` (G6's html node with `drawPortShapes` overridden),
+where a port's `shape` picks the G shape by the names G6 registers itself:
+`circle`, `square`, `diamond`, `triangle`. `r` stays the one size (the
+half-side of the square, the half-diagonal of the diamond), and the hit test,
+the resize handles and the edge's landing point read `r` and none of them care
+about the outline. A selected port shows a gear beside it, as the node does
+(under the link icon on an fkey); it opens the **port properties** popover —
+shape, 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* — with a live
+preview on the port and a cancel that puts it back. The choice is remembered
+as the topic's default (`port_shapes[key]` / `port_shape`, beside
+`port_sizes` / `portR`), so a card that arrives later is born with it, and
+saved per node in `__graphs__` as `port_shapes`. On a touch screen the port's
+context menu has the same entry. The `+N` chip stays an `html` node.
+Consumer i18n keys: `port properties`, `shape`, `circle`, `square`, `diamond`,
+`triangle`, `radius`, `this port`, `same port in topic`, `all ports` — and
+the node and edge popovers' own labels, which had no key at all (`apply to`,
+`fill color`, `stroke color`, `line width`, `color`, `create`), so they
+rendered in English in every language.
+
 ### The legend is the graph's layer control
 
 The legend strip under the toolbar is **always there** now (the *Legend*

package/dist/gobj-ui.cjs.js

@@ -43159,7 +43159,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);
@@ -43207,7 +43207,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",
@@ -54658,6 +54658,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,
@@ -54848,6 +54850,7 @@ function register_layouts(gobj) {
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "treedb-card", TreedbCard);
 	}
 }
 /************************************************************
@@ -54917,6 +54920,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(_antv_g6.NodeEvent.DRAG_END, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_DRAG_END", { evt }, gobj);
@@ -54941,6 +54945,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 {
@@ -55657,12 +55662,22 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 			if (r == null && (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.is_object)(port_shapes) ? port_shapes[key] : null;
+			if (!shape && (0, _yuneta_gobj_js.is_object)(default_port_shapes)) shape = default_port_shapes[key];
+			if (!shape) shape = default_shape;
+			if (shape && (0, _yuneta_gobj_js.str_in_list)(PORT_SHAPES, shape)) style.ports[i].shape = shape;
+		}
 	} else {
 		style.port = false;
 		style.ports = [];
 	}
 	return {
-		type: "html",
+		type: "treedb-card",
 		style
 	};
 }
@@ -56086,6 +56101,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;
@@ -56568,11 +56587,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 _antv_g6.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 _antv_g6.Circle {
@@ -57318,7 +57400,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;
 		}
@@ -57443,6 +57525,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.
@@ -57451,6 +57534,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;
 }
@@ -57503,6 +57588,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, (0, i18next.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: (0, i18next.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: (0, i18next.t)("this port")
+		},
+		{
+			value: "same_topic",
+			label: (0, i18next.t)("same port in topic")
+		},
+		{
+			value: "all",
+			label: (0, i18next.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 (!(0, _yuneta_gobj_js.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 (!(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.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 || !(0, _yuneta_gobj_js.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) {
@@ -59177,6 +59473,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", (0, i18next.t)("port properties"), "port_properties"));
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize all ports"), "resize_all_ports"));
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize topic ports"), "resize_topic_ports"));
 	}
@@ -59209,6 +59506,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;
@@ -59252,7 +59555,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;
 		}
@@ -59852,6 +60155,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;
 }
 /************************************************************