@yuneta/gobj-ui 7.23.186 → 7.23.187

package/dist/gobj-ui.cjs.js

@@ -23714,7 +23714,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[yui_toolbar_icon("yi-hexagon-nodes")]
+								[yui_toolbar_icon("yi-compass-drafting")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -23725,6 +23725,29 @@ function build_ui$6(gobj) {
 								(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
 							} }
 						],
+						[
+							"button",
+							{
+								class: "button TREEDB_SCHEMA_JSON_BTN is-hidden",
+								title: (0, i18next.t)("schema json"),
+								"aria-label": (0, i18next.t)("schema json"),
+								"data-i18n-title": "schema json",
+								"data-i18n-aria-label": "schema json"
+							},
+							[[
+								"span",
+								{ class: "icon" },
+								[yui_toolbar_icon("yi-code")]
+							], [
+								"span",
+								{ i18n: "schema json" },
+								"schema json"
+							]],
+							{ click: (evt) => {
+								evt.stopPropagation();
+								(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_OPEN_SCHEMA_JSON", {}, gobj);
+							} }
+						],
 						[
 							"div",
 							{
@@ -24168,6 +24191,7 @@ function show_topics_landing(gobj) {
 	let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($tabs) $tabs.classList.add("is-hidden");
 	if ($sub) $sub.classList.add("is-hidden");
 	if ($info) $info.classList.add("is-hidden");
@@ -24177,6 +24201,7 @@ function show_topics_landing(gobj) {
 		$toggle.classList.remove("is-hidden");
 		$toggle.classList.toggle("is-primary", schema_mode);
 	}
+	if ($schema_json) $schema_json.classList.toggle("is-hidden", !schema_mode);
 	if (schema_mode) {
 		if ($landing) $landing.classList.add("is-hidden");
 		if ($schema) $schema.classList.remove("is-hidden");
@@ -24246,9 +24271,11 @@ function show_topic_detail(gobj) {
 	let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($landing) $landing.classList.add("is-hidden");
 	if ($schema) $schema.classList.add("is-hidden");
 	if ($info) $info.classList.add("is-hidden");
+	if ($schema_json) $schema_json.classList.add("is-hidden");
 	if ($toggle) $toggle.classList.add("is-hidden");
 	if ($tabs) $tabs.classList.remove("is-hidden");
 	if ($sub) $sub.classList.remove("is-hidden");
@@ -24289,8 +24316,10 @@ function show_topic_info(gobj, topic) {
 	let $schema = $container.querySelector(".TREEDB_TOPICS_SCHEMA");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($landing) $landing.classList.add("is-hidden");
 	if ($schema) $schema.classList.add("is-hidden");
+	if ($schema_json) $schema_json.classList.add("is-hidden");
 	if ($toggle) $toggle.classList.add("is-hidden");
 	if ($tabs) $tabs.classList.add("is-hidden");
 	if ($sub) $sub.classList.add("is-hidden");
@@ -24565,7 +24594,7 @@ function register_sub_routes$1(gobj) {
 	if ((0, _yuneta_gobj_js.is_object)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "landing_routes"))) nodes.push({
 		route: base + "/schema",
 		label: "schema",
-		icon: "yi-hexagon-nodes",
+		icon: "yi-compass-drafting",
 		gclass: "C_YUI_TREEDB_SCHEMA"
 	});
 	if ((0, _yuneta_gobj_js.is_object)(descs)) for (let topic of Object.keys(descs)) {
@@ -24708,10 +24737,11 @@ function is_mobile$2() {
 *  whole service (lazy drill). CHILD model: the viewer publishes
 *  EV_EXPAND_PATH to us.
 ************************************************************/
-function open_json_viewer$1(gobj) {
+function open_json_viewer$1(gobj, opts) {
 	let priv = gobj.priv;
+	let schema = !!(opts && opts.schema);
 	if (priv.json_win || priv.json_modal) {
-		request_print_tranger$1(gobj, "");
+		if (!schema) request_print_tranger$1(gobj, "");
 		return;
 	}
 	if (!(0, _yuneta_gobj_js.gclass_find_by_name)("C_YUI_JSON")) {
@@ -24721,7 +24751,10 @@ function open_json_viewer$1(gobj) {
 	}
 	let mobile = is_mobile$2();
 	let shell = yui_shell_of(gobj);
-	let jv = (0, _yuneta_gobj_js.gobj_create_service)(`treedb-topics-json-${(0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
+	let jv = (0, _yuneta_gobj_js.gobj_create_service)(`treedb-topics-json-${(0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj))}`, "C_YUI_JSON", {
+		subscriber: gobj,
+		json_data: schema ? (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "descs") : null
+	}, gobj);
 	if (!jv) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot create the JSON viewer`);
 		return;
@@ -24739,7 +24772,7 @@ function open_json_viewer$1(gobj) {
 			dialog: true,
 			logical_class: "TREEDB_JSON_SHEET",
 			title_prefix: priv.treedb_name,
-			title: "raw json",
+			title: schema ? "schema json" : "raw json",
 			t: i18next.t,
 			on_close: () => {
 				if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
@@ -24761,8 +24794,8 @@ function open_json_viewer$1(gobj) {
 			height: 620,
 			logical_class: "TREEDB_JSON_WINDOW",
 			title_prefix: priv.treedb_name,
-			title: "raw json",
-			icon: "yi-eye",
+			title: schema ? "schema json" : "raw json",
+			icon: schema ? "yi-code" : "yi-eye",
 			body: $box,
 			manager: null,
 			on_close: () => {
@@ -24777,7 +24810,7 @@ function open_json_viewer$1(gobj) {
 		}
 		(0, _yuneta_gobj_js.gobj_start)(priv.json_win);
 	}
-	request_print_tranger$1(gobj, "");
+	if (!schema) request_print_tranger$1(gobj, "");
 }
 /************************************************************
 *  Close the JSON viewer (user dismiss / teardown).
@@ -25371,6 +25404,19 @@ function ac_open_json$1(gobj, event, kw, src) {
 	return 0;
 }
 /********************************************
+*  The schema, as the json it is: the `descs` the schema graph is
+*  drawing. Same viewer and same host as the tranger's raw json --
+*  one at a time, so it closes whatever was open first.
+********************************************/
+function ac_open_schema_json(gobj, event, kw, src) {
+	if (!(0, _yuneta_gobj_js.is_object)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "descs"))) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema json with no descs`);
+		return -1;
+	}
+	open_json_viewer$1(gobj, { schema: true });
+	return 0;
+}
+/********************************************
 *  Open the graph where the reader left it: its last visited
 *  route under the graph's base -- `<graph>/<topic>` when a topic
 *  was focused there -- or the bare base when the graph was never
@@ -25504,6 +25550,11 @@ function create_gclass$6(gclass_name) {
 			ac_open_json$1,
 			null
 		],
+		[
+			"EV_OPEN_SCHEMA_JSON",
+			ac_open_schema_json,
+			null
+		],
 		[
 			"EV_OPEN_GRAPH",
 			ac_open_graph,
@@ -25576,6 +25627,7 @@ function create_gclass$6(gclass_name) {
 		["EV_RECORD_WRITTEN", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_REFRESH_TOPIC", 0],
 		["EV_OPEN_JSON", 0],
+		["EV_OPEN_SCHEMA_JSON", 0],
 		["EV_OPEN_GRAPH", 0],
 		["EV_EXPAND_PATH", 0],
 		["EV_JSON_CLOSED", 0],
@@ -58820,7 +58872,7 @@ function build_graph$1(gobj) {
 		container: priv.$container,
 		animation: false,
 		autoResize: false,
-		zoomRange: [.2, 4],
+		zoomRange: [.02, 4],
 		node: {
 			palette: {
 				type: "group",
@@ -60076,6 +60128,7 @@ function draw_link(gobj, child_topic, child_id, source_col, fkey, verbose) {
 		parent_topic,
 		parent_id,
 		hook_name,
+		child_topic,
 		child_id,
 		is_tree
 	});
@@ -60582,7 +60635,7 @@ async function graph_fit_selection(gobj, ids) {
 	let bw = Math.max(1, maxx - minx);
 	let bh = Math.max(1, maxy - miny);
 	let zoom = Math.min(vw / bw, vh / bh);
-	let range = graph.getZoomRange() || [.2, 4];
+	let range = graph.getZoomRange() || [.02, 4];
 	zoom = Math.max(range[0], Math.min(range[1], zoom));
 	await graph.zoomTo(zoom);
 	await graph.focusElement(ids);
@@ -63319,16 +63372,14 @@ function refresh_html_nodes_theme(gobj, theme) {
 function refresh_default_edges_theme(gobj, theme) {
 	let graph = gobj.priv.graph;
 	if (!graph) return;
-	let dark = theme === "dark";
 	let edges = graph.getData().edges || [];
 	let updates = [];
 	for (let i = 0; i < edges.length; i++) {
 		let d = edges[i].data || {};
 		if (!d.themed_default) continue;
-		let stroke = d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280";
 		updates.push({
 			id: edges[i].id,
-			style: { stroke }
+			style: { stroke: default_edge_stroke(gobj, d, theme) }
 		});
 	}
 	if (updates.length > 0) graph.updateEdgeData(updates);
@@ -63900,21 +63951,54 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope) {
 	deselect_edge(gobj);
 }
 /************************************************************
+*  The colour a link is DRAWN in: the colour of the two knobs it
+*  joins.
+*
+*  Both ends of a link wear the CHILD topic's colour -- the
+*  parent's hook port is painted with the colour of whatever may
+*  hang there, and the child's fkey port with its own (see
+*  build_ports) -- so the line between them has one obvious
+*  colour, and a reader follows a link by its hue instead of
+*  tracing a grey thread across the canvas.
+*
+*  It goes through port_rim(): the FILL of a port says which
+*  topic, and a line on the canvas is a graphical object that
+*  needs 3:1 against it, which that mix clears in both themes
+*  (9.11 dark, 3.80 light) while keeping the hue. So a link is
+*  drawn in exactly the colour of the rim of the two knobs it
+*  ends on.
+*
+*  The containment/tree relation (parent and child of the same
+*  topic) is no longer marked by a teal of its own -- it is that
+*  topic's colour like any other link, and what still tells it
+*  apart is its WIDTH.
+*
+*  A topic with no colour, or an edge of a graph with no schema
+*  yet, keeps the neutral grey this used to give everything.
+************************************************************/
+function default_edge_stroke(gobj, d, theme) {
+	let priv = gobj.priv;
+	let desc = (0, _yuneta_gobj_js.is_object)(priv.descs) ? priv.descs[d.child_topic] : null;
+	if (desc && desc.color) return port_rim(desc.color, theme);
+	let dark = theme === "dark";
+	return d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280";
+}
+/************************************************************
 *  The style an edge INHERITS, before anything saved for the
 *  edge itself: its hook's default in the parent topic, else the
 *  parent topic's default for every edge, else the library's.
 *
-*  The library's: neutral grey, teal for the containment/tree
-*  relation (parent and child of the same topic, a
-*  self-hierarchy). `themed_default` says the colour is still the
-*  library's, so a theme toggle re-themes it and leaves a chosen
-*  one alone.
+*  The library's: the colour of the ports it joins (see
+*  default_edge_stroke), and a wider line for the
+*  containment/tree relation. `themed_default` says the colour is
+*  still the library's, so a theme toggle re-themes it and leaves
+*  a chosen one alone.
 ************************************************************/
 function edge_inherited_style_of(gobj, d) {
-	let dark = gobj.priv.theme === "dark";
+	let priv = gobj.priv;
 	let style = {
 		lineWidth: d.is_tree ? 2 : 1.6,
-		stroke: d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280",
+		stroke: default_edge_stroke(gobj, d, priv.theme),
 		themed_default: true
 	};
 	let defs = topic_defaults_of(gobj, d.parent_topic);
@@ -71735,7 +71819,7 @@ function render_toolbar(gobj) {
 	]);
 	let $right = [];
 	if (priv.treedb_id && has_model) {
-		$right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-hexagon-nodes", priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
+		$right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-compass-drafting", priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
 		$right.push(toolbar_button("SCHEMA_VALIDATE_BTN", "yi-square-check", "check", "EV_VALIDATE", false));
 		$right.push(toolbar_button("SCHEMA_EXPORT_BTN", "yi-download", "export", "EV_EXPORT", false));
 		if (!readonly) $right.push(toolbar_button("SCHEMA_IMPORT_BTN", "yi-upload", "import", "EV_IMPORT", false));

package/dist/gobj-ui.es.js

@@ -23709,7 +23709,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[yui_toolbar_icon("yi-hexagon-nodes")]
+								[yui_toolbar_icon("yi-compass-drafting")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -23720,6 +23720,29 @@ function build_ui$6(gobj) {
 								gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
 							} }
 						],
+						[
+							"button",
+							{
+								class: "button TREEDB_SCHEMA_JSON_BTN is-hidden",
+								title: t("schema json"),
+								"aria-label": t("schema json"),
+								"data-i18n-title": "schema json",
+								"data-i18n-aria-label": "schema json"
+							},
+							[[
+								"span",
+								{ class: "icon" },
+								[yui_toolbar_icon("yi-code")]
+							], [
+								"span",
+								{ i18n: "schema json" },
+								"schema json"
+							]],
+							{ click: (evt) => {
+								evt.stopPropagation();
+								gobj_send_event(gobj, "EV_OPEN_SCHEMA_JSON", {}, gobj);
+							} }
+						],
 						[
 							"div",
 							{
@@ -24163,6 +24186,7 @@ function show_topics_landing(gobj) {
 	let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($tabs) $tabs.classList.add("is-hidden");
 	if ($sub) $sub.classList.add("is-hidden");
 	if ($info) $info.classList.add("is-hidden");
@@ -24172,6 +24196,7 @@ function show_topics_landing(gobj) {
 		$toggle.classList.remove("is-hidden");
 		$toggle.classList.toggle("is-primary", schema_mode);
 	}
+	if ($schema_json) $schema_json.classList.toggle("is-hidden", !schema_mode);
 	if (schema_mode) {
 		if ($landing) $landing.classList.add("is-hidden");
 		if ($schema) $schema.classList.remove("is-hidden");
@@ -24241,9 +24266,11 @@ function show_topic_detail(gobj) {
 	let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($landing) $landing.classList.add("is-hidden");
 	if ($schema) $schema.classList.add("is-hidden");
 	if ($info) $info.classList.add("is-hidden");
+	if ($schema_json) $schema_json.classList.add("is-hidden");
 	if ($toggle) $toggle.classList.add("is-hidden");
 	if ($tabs) $tabs.classList.remove("is-hidden");
 	if ($sub) $sub.classList.remove("is-hidden");
@@ -24284,8 +24311,10 @@ function show_topic_info(gobj, topic) {
 	let $schema = $container.querySelector(".TREEDB_TOPICS_SCHEMA");
 	let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
 	let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+	let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
 	if ($landing) $landing.classList.add("is-hidden");
 	if ($schema) $schema.classList.add("is-hidden");
+	if ($schema_json) $schema_json.classList.add("is-hidden");
 	if ($toggle) $toggle.classList.add("is-hidden");
 	if ($tabs) $tabs.classList.add("is-hidden");
 	if ($sub) $sub.classList.add("is-hidden");
@@ -24560,7 +24589,7 @@ function register_sub_routes$1(gobj) {
 	if (is_object(gobj_read_attr(gobj, "landing_routes"))) nodes.push({
 		route: base + "/schema",
 		label: "schema",
-		icon: "yi-hexagon-nodes",
+		icon: "yi-compass-drafting",
 		gclass: "C_YUI_TREEDB_SCHEMA"
 	});
 	if (is_object(descs)) for (let topic of Object.keys(descs)) {
@@ -24703,10 +24732,11 @@ function is_mobile$2() {
 *  whole service (lazy drill). CHILD model: the viewer publishes
 *  EV_EXPAND_PATH to us.
 ************************************************************/
-function open_json_viewer$1(gobj) {
+function open_json_viewer$1(gobj, opts) {
 	let priv = gobj.priv;
+	let schema = !!(opts && opts.schema);
 	if (priv.json_win || priv.json_modal) {
-		request_print_tranger$1(gobj, "");
+		if (!schema) request_print_tranger$1(gobj, "");
 		return;
 	}
 	if (!gclass_find_by_name("C_YUI_JSON")) {
@@ -24716,7 +24746,10 @@ function open_json_viewer$1(gobj) {
 	}
 	let mobile = is_mobile$2();
 	let shell = yui_shell_of(gobj);
-	let jv = gobj_create_service(`treedb-topics-json-${clean_name(gobj_name(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
+	let jv = gobj_create_service(`treedb-topics-json-${clean_name(gobj_name(gobj))}`, "C_YUI_JSON", {
+		subscriber: gobj,
+		json_data: schema ? gobj_read_attr(gobj, "descs") : null
+	}, gobj);
 	if (!jv) {
 		log_error(`${gobj_short_name(gobj)}: cannot create the JSON viewer`);
 		return;
@@ -24734,7 +24767,7 @@ function open_json_viewer$1(gobj) {
 			dialog: true,
 			logical_class: "TREEDB_JSON_SHEET",
 			title_prefix: priv.treedb_name,
-			title: "raw json",
+			title: schema ? "schema json" : "raw json",
 			t,
 			on_close: () => {
 				if (gobj_is_destroying(gobj)) return;
@@ -24756,8 +24789,8 @@ function open_json_viewer$1(gobj) {
 			height: 620,
 			logical_class: "TREEDB_JSON_WINDOW",
 			title_prefix: priv.treedb_name,
-			title: "raw json",
-			icon: "yi-eye",
+			title: schema ? "schema json" : "raw json",
+			icon: schema ? "yi-code" : "yi-eye",
 			body: $box,
 			manager: null,
 			on_close: () => {
@@ -24772,7 +24805,7 @@ function open_json_viewer$1(gobj) {
 		}
 		gobj_start(priv.json_win);
 	}
-	request_print_tranger$1(gobj, "");
+	if (!schema) request_print_tranger$1(gobj, "");
 }
 /************************************************************
 *  Close the JSON viewer (user dismiss / teardown).
@@ -25366,6 +25399,19 @@ function ac_open_json$1(gobj, event, kw, src) {
 	return 0;
 }
 /********************************************
+*  The schema, as the json it is: the `descs` the schema graph is
+*  drawing. Same viewer and same host as the tranger's raw json --
+*  one at a time, so it closes whatever was open first.
+********************************************/
+function ac_open_schema_json(gobj, event, kw, src) {
+	if (!is_object(gobj_read_attr(gobj, "descs"))) {
+		log_error(`${gobj_short_name(gobj)}: schema json with no descs`);
+		return -1;
+	}
+	open_json_viewer$1(gobj, { schema: true });
+	return 0;
+}
+/********************************************
 *  Open the graph where the reader left it: its last visited
 *  route under the graph's base -- `<graph>/<topic>` when a topic
 *  was focused there -- or the bare base when the graph was never
@@ -25499,6 +25545,11 @@ function create_gclass$6(gclass_name) {
 			ac_open_json$1,
 			null
 		],
+		[
+			"EV_OPEN_SCHEMA_JSON",
+			ac_open_schema_json,
+			null
+		],
 		[
 			"EV_OPEN_GRAPH",
 			ac_open_graph,
@@ -25571,6 +25622,7 @@ function create_gclass$6(gclass_name) {
 		["EV_RECORD_WRITTEN", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_REFRESH_TOPIC", 0],
 		["EV_OPEN_JSON", 0],
+		["EV_OPEN_SCHEMA_JSON", 0],
 		["EV_OPEN_GRAPH", 0],
 		["EV_EXPAND_PATH", 0],
 		["EV_JSON_CLOSED", 0],
@@ -58815,7 +58867,7 @@ function build_graph$1(gobj) {
 		container: priv.$container,
 		animation: false,
 		autoResize: false,
-		zoomRange: [.2, 4],
+		zoomRange: [.02, 4],
 		node: {
 			palette: {
 				type: "group",
@@ -60071,6 +60123,7 @@ function draw_link(gobj, child_topic, child_id, source_col, fkey, verbose) {
 		parent_topic,
 		parent_id,
 		hook_name,
+		child_topic,
 		child_id,
 		is_tree
 	});
@@ -60577,7 +60630,7 @@ async function graph_fit_selection(gobj, ids) {
 	let bw = Math.max(1, maxx - minx);
 	let bh = Math.max(1, maxy - miny);
 	let zoom = Math.min(vw / bw, vh / bh);
-	let range = graph.getZoomRange() || [.2, 4];
+	let range = graph.getZoomRange() || [.02, 4];
 	zoom = Math.max(range[0], Math.min(range[1], zoom));
 	await graph.zoomTo(zoom);
 	await graph.focusElement(ids);
@@ -63314,16 +63367,14 @@ function refresh_html_nodes_theme(gobj, theme) {
 function refresh_default_edges_theme(gobj, theme) {
 	let graph = gobj.priv.graph;
 	if (!graph) return;
-	let dark = theme === "dark";
 	let edges = graph.getData().edges || [];
 	let updates = [];
 	for (let i = 0; i < edges.length; i++) {
 		let d = edges[i].data || {};
 		if (!d.themed_default) continue;
-		let stroke = d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280";
 		updates.push({
 			id: edges[i].id,
-			style: { stroke }
+			style: { stroke: default_edge_stroke(gobj, d, theme) }
 		});
 	}
 	if (updates.length > 0) graph.updateEdgeData(updates);
@@ -63895,21 +63946,54 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope) {
 	deselect_edge(gobj);
 }
 /************************************************************
+*  The colour a link is DRAWN in: the colour of the two knobs it
+*  joins.
+*
+*  Both ends of a link wear the CHILD topic's colour -- the
+*  parent's hook port is painted with the colour of whatever may
+*  hang there, and the child's fkey port with its own (see
+*  build_ports) -- so the line between them has one obvious
+*  colour, and a reader follows a link by its hue instead of
+*  tracing a grey thread across the canvas.
+*
+*  It goes through port_rim(): the FILL of a port says which
+*  topic, and a line on the canvas is a graphical object that
+*  needs 3:1 against it, which that mix clears in both themes
+*  (9.11 dark, 3.80 light) while keeping the hue. So a link is
+*  drawn in exactly the colour of the rim of the two knobs it
+*  ends on.
+*
+*  The containment/tree relation (parent and child of the same
+*  topic) is no longer marked by a teal of its own -- it is that
+*  topic's colour like any other link, and what still tells it
+*  apart is its WIDTH.
+*
+*  A topic with no colour, or an edge of a graph with no schema
+*  yet, keeps the neutral grey this used to give everything.
+************************************************************/
+function default_edge_stroke(gobj, d, theme) {
+	let priv = gobj.priv;
+	let desc = is_object(priv.descs) ? priv.descs[d.child_topic] : null;
+	if (desc && desc.color) return port_rim(desc.color, theme);
+	let dark = theme === "dark";
+	return d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280";
+}
+/************************************************************
 *  The style an edge INHERITS, before anything saved for the
 *  edge itself: its hook's default in the parent topic, else the
 *  parent topic's default for every edge, else the library's.
 *
-*  The library's: neutral grey, teal for the containment/tree
-*  relation (parent and child of the same topic, a
-*  self-hierarchy). `themed_default` says the colour is still the
-*  library's, so a theme toggle re-themes it and leaves a chosen
-*  one alone.
+*  The library's: the colour of the ports it joins (see
+*  default_edge_stroke), and a wider line for the
+*  containment/tree relation. `themed_default` says the colour is
+*  still the library's, so a theme toggle re-themes it and leaves
+*  a chosen one alone.
 ************************************************************/
 function edge_inherited_style_of(gobj, d) {
-	let dark = gobj.priv.theme === "dark";
+	let priv = gobj.priv;
 	let style = {
 		lineWidth: d.is_tree ? 2 : 1.6,
-		stroke: d.is_tree ? dark ? "#22a7c2" : "#0e7490" : dark ? "#8b94a3" : "#6b7280",
+		stroke: default_edge_stroke(gobj, d, priv.theme),
 		themed_default: true
 	};
 	let defs = topic_defaults_of(gobj, d.parent_topic);
@@ -71730,7 +71814,7 @@ function render_toolbar(gobj) {
 	]);
 	let $right = [];
 	if (priv.treedb_id && has_model) {
-		$right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-hexagon-nodes", priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
+		$right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-compass-drafting", priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
 		$right.push(toolbar_button("SCHEMA_VALIDATE_BTN", "yi-square-check", "check", "EV_VALIDATE", false));
 		$right.push(toolbar_button("SCHEMA_EXPORT_BTN", "yi-download", "export", "EV_EXPORT", false));
 		if (!readonly) $right.push(toolbar_button("SCHEMA_IMPORT_BTN", "yi-upload", "import", "EV_IMPORT", false));

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -967,7 +967,12 @@ function build_graph(gobj)
         container: priv.$container,
         animation: false,
         autoResize: false,
-        zoomRange: [0.2, 4],
+        /*  The floor was 0.2, and a treedb of a few hundred records does
+         *  not fit in a screen at 20%: the reader could see the shape of
+         *  the whole thing in the minimap and never on the canvas. Fit
+         *  still stops at a legible zoom on purpose (graph_fit_readable);
+         *  zooming out by hand is the reader's business.  */
+        zoomRange: [0.02, 4],
         node: {  // WARNING this affect to all nodes with prevalence over individual defines!
             palette: {
                 type: 'group',
@@ -2938,6 +2943,7 @@ function draw_link(
         parent_topic: parent_topic,
         parent_id:    parent_id,
         hook_name:    hook_name,
+        child_topic:  child_topic,
         child_id:     child_id,
         is_tree:      is_tree,
     });
@@ -3718,7 +3724,7 @@ async function graph_fit_selection(gobj, ids)
     let bh = Math.max(1, maxy - miny);
 
     let zoom = Math.min(vw / bw, vh / bh);
-    let range = graph.getZoomRange() || [0.2, 4];
+    let range = graph.getZoomRange() || [0.02, 4];
     zoom = Math.max(range[0], Math.min(range[1], zoom));
 
     await graph.zoomTo(zoom);
@@ -7795,7 +7801,6 @@ function refresh_default_edges_theme(gobj, theme)
     if(!graph) {
         return;
     }
-    let dark = (theme === "dark");
     let edges = graph.getData().edges || [];
     let updates = [];
     for(let i = 0; i < edges.length; i++) {
@@ -7803,10 +7808,7 @@ function refresh_default_edges_theme(gobj, theme)
         if(!d.themed_default) {
             continue;
         }
-        let stroke = d.is_tree
-            ? (dark ? '#22a7c2' : '#0e7490')
-            : (dark ? '#8b94a3' : '#6b7280');
-        updates.push({ id: edges[i].id, style: { stroke: stroke } });
+        updates.push({id: edges[i].id, style: {stroke: default_edge_stroke(gobj, d, theme)}});
     }
     if(updates.length > 0) {
         graph.updateEdgeData(updates);
@@ -8688,26 +8690,60 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope)
     deselect_edge(gobj);
 }
 
+/************************************************************
+ *  The colour a link is DRAWN in: the colour of the two knobs it
+ *  joins.
+ *
+ *  Both ends of a link wear the CHILD topic's colour -- the
+ *  parent's hook port is painted with the colour of whatever may
+ *  hang there, and the child's fkey port with its own (see
+ *  build_ports) -- so the line between them has one obvious
+ *  colour, and a reader follows a link by its hue instead of
+ *  tracing a grey thread across the canvas.
+ *
+ *  It goes through port_rim(): the FILL of a port says which
+ *  topic, and a line on the canvas is a graphical object that
+ *  needs 3:1 against it, which that mix clears in both themes
+ *  (9.11 dark, 3.80 light) while keeping the hue. So a link is
+ *  drawn in exactly the colour of the rim of the two knobs it
+ *  ends on.
+ *
+ *  The containment/tree relation (parent and child of the same
+ *  topic) is no longer marked by a teal of its own -- it is that
+ *  topic's colour like any other link, and what still tells it
+ *  apart is its WIDTH.
+ *
+ *  A topic with no colour, or an edge of a graph with no schema
+ *  yet, keeps the neutral grey this used to give everything.
+ ************************************************************/
+function default_edge_stroke(gobj, d, theme)
+{
+    let priv = gobj.priv;
+    let desc = is_object(priv.descs)? priv.descs[d.child_topic] : null;
+    if(desc && desc.color) {
+        return port_rim(desc.color, theme);
+    }
+    let dark = (theme === "dark");
+    return d.is_tree? (dark? '#22a7c2' : '#0e7490') : (dark? '#8b94a3' : '#6b7280');
+}
+
 /************************************************************
  *  The style an edge INHERITS, before anything saved for the
  *  edge itself: its hook's default in the parent topic, else the
  *  parent topic's default for every edge, else the library's.
  *
- *  The library's: neutral grey, teal for the containment/tree
- *  relation (parent and child of the same topic, a
- *  self-hierarchy). `themed_default` says the colour is still the
- *  library's, so a theme toggle re-themes it and leaves a chosen
- *  one alone.
+ *  The library's: the colour of the ports it joins (see
+ *  default_edge_stroke), and a wider line for the
+ *  containment/tree relation. `themed_default` says the colour is
+ *  still the library's, so a theme toggle re-themes it and leaves
+ *  a chosen one alone.
  ************************************************************/
 function edge_inherited_style_of(gobj, d)
 {
     let priv = gobj.priv;
-    let dark = (priv.theme === "dark");
     let style = {
         lineWidth: d.is_tree ? 2 : 1.6,
-        stroke: d.is_tree
-            ? (dark ? '#22a7c2' : '#0e7490')
-            : (dark ? '#8b94a3' : '#6b7280'),
+        stroke: default_edge_stroke(gobj, d, priv.theme),
         themed_default: true,
     };
 

package/src/c_yui_schema_editor.js

@@ -810,7 +810,9 @@ function render_toolbar(gobj)
      *----------------------------------------------*/
     let $right = [];
     if(priv.treedb_id && has_model) {
-        $right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-hexagon-nodes",
+        /*  The compass, like every other door to a SCHEMA: the
+         *  `hexagon-nodes` it wore is the graph of the DATA.  */
+        $right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-compass-drafting",
             priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
         $right.push(toolbar_button("SCHEMA_VALIDATE_BTN", "yi-square-check",
             "check", "EV_VALIDATE", false));

package/src/c_yui_treedb_topics.js

@@ -335,12 +335,19 @@ function build_ui(gobj)
                         }
                     }],
                     /*  Landing view toggle: cards grid <-> schema graph
-                     *  (topics as nodes). Shown only on the landing. */
+                     *  (topics as nodes). Shown only on the landing.
+                     *
+                     *  The glyph is the draughtsman's compass, not the
+                     *  `hexagon-nodes` of the graph: the button one place
+                     *  to its left opens the graph of the DATA, and the
+                     *  two wore the same shape with only their labels
+                     *  telling them apart -- which on a narrow toolbar is
+                     *  nothing. A schema is the PLAN of the treedb. */
                     ['button', {class: 'button TREEDB_LANDING_TOGGLE is-hidden',
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-compass-drafting')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -348,6 +355,24 @@ function build_ui(gobj)
                             gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
                         }
                     }],
+                    /*  The schema as JSON -- the `descs` the view is drawing,
+                     *  which is what a person writing a schema literal, or
+                     *  chasing a flag that did not take, actually needs to
+                     *  read. Landing-only, like the toggle it stands next
+                     *  to; the `raw json` button further right is another
+                     *  thing entirely (the tranger's content). */
+                    ['button', {class: 'button TREEDB_SCHEMA_JSON_BTN is-hidden',
+                                title: t('schema json'), 'aria-label': t('schema json'),
+                                'data-i18n-title': 'schema json',
+                                'data-i18n-aria-label': 'schema json'}, [
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-code')]],
+                        ['span', {i18n: 'schema json'}, 'schema json']
+                    ], {
+                        click: (evt) => {
+                            evt.stopPropagation();
+                            gobj_send_event(gobj, "EV_OPEN_SCHEMA_JSON", {}, gobj);
+                        }
+                    }],
                     /*  The backend this view browses. The tab that hosts this
                      *  view is labelled with the TREEDB name, and the same
                      *  treedb name lives on more than one node — two tabs
@@ -817,6 +842,7 @@ function show_topics_landing(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($tabs) {
         $tabs.classList.add("is-hidden");
     }
@@ -835,6 +861,11 @@ function show_topics_landing(gobj)
         $toggle.classList.remove("is-hidden");   /*  the toggle lives on the landing  */
         $toggle.classList.toggle("is-primary", schema_mode);
     }
+    if($schema_json) {
+        /*  The schema's json is worth reading when the schema is what is
+         *  on screen; on the cards grid it is one more button in the way.  */
+        $schema_json.classList.toggle("is-hidden", !schema_mode);
+    }
     if(schema_mode) {
         if($landing) {
             $landing.classList.add("is-hidden");
@@ -946,6 +977,7 @@ function show_topic_detail(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
@@ -955,6 +987,9 @@ function show_topic_detail(gobj)
     if($info) {
         $info.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");   /*  landing-only  */
     }
@@ -1010,12 +1045,16 @@ function show_topic_info(gobj, topic)
     let $schema = $container.querySelector(".TREEDB_TOPICS_SCHEMA");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
     if($schema) {
         $schema.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");
     }
@@ -1307,7 +1346,7 @@ function register_sub_routes(gobj)
     let nodes = [];
     if(is_object(gobj_read_attr(gobj, "landing_routes"))) {
         nodes.push({route: base + "/schema", label: "schema",
-                    icon: "yi-hexagon-nodes", gclass: "C_YUI_TREEDB_SCHEMA"});
+                    icon: "yi-compass-drafting", gclass: "C_YUI_TREEDB_SCHEMA"});
     }
     if(is_object(descs)) {
         for(let topic of Object.keys(descs)) {
@@ -1655,13 +1694,18 @@ function is_mobile()
  *  whole service (lazy drill). CHILD model: the viewer publishes
  *  EV_EXPAND_PATH to us.
  ************************************************************/
-function open_json_viewer(gobj)
+function open_json_viewer(gobj, opts)
 {
     let priv = gobj.priv;
+    let schema = !!(opts && opts.schema);
 
-    /*  Already open: just re-fetch.  */
+    /*  Already open: just re-fetch. The schema needs no fetch -- it is
+     *  the `descs` this view already holds -- so a second click on a
+     *  viewer that is already showing it does nothing.  */
     if(priv.json_win || priv.json_modal) {
-        request_print_tranger(gobj, "");
+        if(!schema) {
+            request_print_tranger(gobj, "");
+        }
         return;
     }
 
@@ -1681,7 +1725,11 @@ function open_json_viewer(gobj)
             /*  No `title`: the host titles it — the window's title bar on
              *  desktop, the dialog's header on mobile. The viewer's own
              *  title would land INSIDE that host, doubling it.  */
-            subscriber: gobj        /*  publishes EV_EXPAND_PATH to us  */
+            subscriber: gobj,       /*  publishes EV_EXPAND_PATH to us  */
+            /*  The schema is here already and it is small: it goes in
+             *  whole, and no drill-down happens because nothing is
+             *  collapsed.  */
+            json_data: schema? gobj_read_attr(gobj, "descs") : null
         },
         gobj
     );
@@ -1703,7 +1751,7 @@ function open_json_viewer(gobj)
             dialog:        true,
             logical_class: "TREEDB_JSON_SHEET",
             title_prefix: priv.treedb_name,
-            title:         "raw json",
+            title:         schema? "schema json" : "raw json",
             t:             t,
             on_close: () => {
                 if(gobj_is_destroying(gobj)) {
@@ -1733,8 +1781,8 @@ function open_json_viewer(gobj)
                 height:     620,
                 logical_class: "TREEDB_JSON_WINDOW",
                 title_prefix: priv.treedb_name,
-                title:      "raw json",
-                icon:       "yi-eye",
+                title:      schema? "schema json" : "raw json",
+                icon:       schema? "yi-code" : "yi-eye",
                 body:       $box,
                 manager:    null,
                 on_close: () => {
@@ -1754,7 +1802,9 @@ function open_json_viewer(gobj)
         gobj_start(priv.json_win);
     }
 
-    request_print_tranger(gobj, "");
+    if(!schema) {
+        request_print_tranger(gobj, "");
+    }
 }
 
 /************************************************************
@@ -2718,6 +2768,24 @@ function ac_open_json(gobj, event, kw, src)
     return 0;
 }
 
+/********************************************
+ *  The schema, as the json it is: the `descs` the schema graph is
+ *  drawing. Same viewer and same host as the tranger's raw json --
+ *  one at a time, so it closes whatever was open first.
+ ********************************************/
+function ac_open_schema_json(gobj, event, kw, src)
+{
+    if(!is_object(gobj_read_attr(gobj, "descs"))) {
+        /*  Not reachable by hand -- the button only exists while the
+         *  schema is on screen, which needs the descs -- so this is a
+         *  broken caller, not something to tell the reader about.  */
+        log_error(`${gobj_short_name(gobj)}: schema json with no descs`);
+        return -1;
+    }
+    open_json_viewer(gobj, {schema: true});
+    return 0;
+}
+
 /********************************************
  *  Open the graph where the reader left it: its last visited
  *  route under the graph's base -- `<graph>/<topic>` when a topic
@@ -2823,6 +2891,7 @@ function create_gclass(gclass_name)
             ["EV_DELETE_RECORD",        ac_delete_record,           null],
             ["EV_REFRESH_TOPIC",        ac_refresh_topic,           null],
             ["EV_OPEN_JSON",            ac_open_json,               null],
+            ["EV_OPEN_SCHEMA_JSON",     ac_open_schema_json,        null],
             ["EV_OPEN_GRAPH",           ac_open_graph,              null],
             ["EV_EXPAND_PATH",          ac_json_expand_path,        null],
             ["EV_JSON_CLOSED",          ac_json_closed,             null],
@@ -2857,6 +2926,7 @@ function create_gclass(gclass_name)
                                     event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_REFRESH_TOPIC",        0],
         ["EV_OPEN_JSON",            0],
+        ["EV_OPEN_SCHEMA_JSON",     0],
         ["EV_OPEN_GRAPH",           0],
         ["EV_EXPAND_PATH",          0],
         ["EV_JSON_CLOSED",          0],

package/src/yui_icons.css

@@ -176,6 +176,15 @@
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM204.5 138.7c23.5-16.8 52.4-26.7 83.5-26.7 79.5 0 144 64.5 144 144 0 31.1-9.9 59.9-26.7 83.5l-34.7-34.7c12.7-21.4 17-47.7 10.1-73.7-13.7-51.2-66.4-81.6-117.6-67.9-8.6 2.3-16.7 5.7-24 10l-34.7-34.7zM325.3 395.1c-11.9 3.2-24.4 4.9-37.3 4.9-79.5 0-144-64.5-144-144 0-12.9 1.7-25.4 4.9-37.3L69.4 139.2c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6l-64.2-64.2z'/%3E%3C/svg%3E");
 }
 
+/*  The SCHEMA of a treedb -- its plan, as against the `hexagon-nodes`
+ *  of the DATA graph. The two sat on the same glyph in the same
+ *  toolbar, one button apart, and nothing but the label told them
+ *  apart.  */
+.yi-compass-drafting::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M99.3 256.1l69.4-119.9c-5.6-12.2-8.8-25.8-8.8-40.2 0-53 43-96 96-96s96 43 96 96c0 14.3-3.1 27.9-8.8 40.2l44.4 76.7c-23.1 26-53.7 45.1-88.4 53.8L256 191.9 187.9 309.5c21.5 6.8 44.3 10.5 68.1 10.5 70.7 0 133.8-32.7 174.9-84 11.1-13.8 31.2-16 45-5s16 31.2 5 45c-52.7 65.8-133.9 108-224.8 108-35.4 0-69.4-6.4-100.7-18.1L98.7 463.7C94 471.8 87 478.4 78.6 482.6L23.2 510.3c-5 2.5-10.9 2.2-15.6-.7S0 501.5 0 496l0-55.4c0-8.4 2.2-16.7 6.5-24.1l60-103.7c-12.8-11.2-24.6-23.5-35.3-36.8-11.1-13.8-8.8-33.9 5-45s33.9-8.8 45 5c5.7 7.1 11.8 13.8 18.2 20.1zM381.1 407.9c32.5-13 62.4-31 88.9-52.9l35.6 61.5c4.2 7.3 6.5 15.6 6.5 24.1l0 55.4c0 5.5-2.9 10.7-7.6 13.6s-10.6 3.2-15.6 .7l-55.4-27.7c-8.4-4.2-15.4-10.8-20.1-18.9l-32.3-55.8zM256 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M99.3 256.1l69.4-119.9c-5.6-12.2-8.8-25.8-8.8-40.2 0-53 43-96 96-96s96 43 96 96c0 14.3-3.1 27.9-8.8 40.2l44.4 76.7c-23.1 26-53.7 45.1-88.4 53.8L256 191.9 187.9 309.5c21.5 6.8 44.3 10.5 68.1 10.5 70.7 0 133.8-32.7 174.9-84 11.1-13.8 31.2-16 45-5s16 31.2 5 45c-52.7 65.8-133.9 108-224.8 108-35.4 0-69.4-6.4-100.7-18.1L98.7 463.7C94 471.8 87 478.4 78.6 482.6L23.2 510.3c-5 2.5-10.9 2.2-15.6-.7S0 501.5 0 496l0-55.4c0-8.4 2.2-16.7 6.5-24.1l60-103.7c-12.8-11.2-24.6-23.5-35.3-36.8-11.1-13.8-8.8-33.9 5-45s33.9-8.8 45 5c5.7 7.1 11.8 13.8 18.2 20.1zM381.1 407.9c32.5-13 62.4-31 88.9-52.9l35.6 61.5c4.2 7.3 6.5 15.6 6.5 24.1l0 55.4c0 5.5-2.9 10.7-7.6 13.6s-10.6 3.2-15.6 .7l-55.4-27.7c-8.4-4.2-15.4-10.8-20.1-18.9l-32.3-55.8zM256 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
+}
+
 .yi-hexagon-nodes::before {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M248 106.6c18.9-9 32-28.3 32-50.6c0-30.9-25.1-56-56-56s-56 25.1-56 56c0 22.3 13.1 41.6 32 50.6l0 98.8c-2.8 1.3-5.5 2.9-8 4.7l-80.1-45.8c1.6-20.8-8.6-41.6-27.9-52.8C57.2 96 23 105.2 7.5 132S1.2 193 28 208.5c1.3 .8 2.6 1.5 4 2.1l0 90.8c-1.3 .6-2.7 1.3-4 2.1C1.2 319-8 353.2 7.5 380S57.2 416 84 400.5c19.3-11.1 29.4-32 27.8-52.8l50.5-28.9c-11.5-11.2-19.9-25.6-23.8-41.7L88 306.1c-2.6-1.8-5.2-3.3-8-4.7l0-90.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-.1 1.4-.2 2.8-.2 4.3c0 22.3 13.1 41.6 32 50.6l0 98.8c-18.9 9-32 28.3-32 50.6c0 30.9 25.1 56 56 56s56-25.1 56-56c0-22.3-13.1-41.6-32-50.6l0-98.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-1.6 20.8 8.6 41.6 27.8 52.8c26.8 15.5 61 6.3 76.5-20.5s6.3-61-20.5-76.5c-1.3-.8-2.7-1.5-4-2.1l0-90.8c1.4-.6 2.7-1.3 4-2.1c26.8-15.5 36-49.7 20.5-76.5S390.8 96 364 111.5c-19.3 11.1-29.4 32-27.8 52.8l-50.6 28.9c11.5 11.2 19.9 25.6 23.8 41.7L360 205.9c2.6 1.8 5.2 3.3 8 4.7l0 90.8c-2.8 1.3-5.5 2.9-8 4.6l-80.1-45.8c.1-1.4 .2-2.8 .2-4.3c0-22.3-13.1-41.6-32-50.6l0-98.8z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M248 106.6c18.9-9 32-28.3 32-50.6c0-30.9-25.1-56-56-56s-56 25.1-56 56c0 22.3 13.1 41.6 32 50.6l0 98.8c-2.8 1.3-5.5 2.9-8 4.7l-80.1-45.8c1.6-20.8-8.6-41.6-27.9-52.8C57.2 96 23 105.2 7.5 132S1.2 193 28 208.5c1.3 .8 2.6 1.5 4 2.1l0 90.8c-1.3 .6-2.7 1.3-4 2.1C1.2 319-8 353.2 7.5 380S57.2 416 84 400.5c19.3-11.1 29.4-32 27.8-52.8l50.5-28.9c-11.5-11.2-19.9-25.6-23.8-41.7L88 306.1c-2.6-1.8-5.2-3.3-8-4.7l0-90.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-.1 1.4-.2 2.8-.2 4.3c0 22.3 13.1 41.6 32 50.6l0 98.8c-18.9 9-32 28.3-32 50.6c0 30.9 25.1 56 56 56s56-25.1 56-56c0-22.3-13.1-41.6-32-50.6l0-98.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-1.6 20.8 8.6 41.6 27.8 52.8c26.8 15.5 61 6.3 76.5-20.5s6.3-61-20.5-76.5c-1.3-.8-2.7-1.5-4-2.1l0-90.8c1.4-.6 2.7-1.3 4-2.1c26.8-15.5 36-49.7 20.5-76.5S390.8 96 364 111.5c-19.3 11.1-29.4 32-27.8 52.8l-50.6 28.9c11.5 11.2 19.9 25.6 23.8 41.7L360 205.9c2.6 1.8 5.2 3.3 8 4.7l0 90.8c-2.8 1.3-5.5 2.9-8 4.6l-80.1-45.8c.1-1.4 .2-2.8 .2-4.3c0-22.3-13.1-41.6-32-50.6l0-98.8z'/%3E%3C/svg%3E");