@ai-gui/plugin-figure 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ai-gui/plugin-figure
 
+## 0.12.0
+
+### Patch Changes
+
+- Updated dependencies [32f827c]
+  - @ai-gui/core@0.12.0
+
+## 0.11.1
+
+### Patch Changes
+
+- Updated dependencies [f84cb1d]
+  - @ai-gui/core@0.11.1
+
 ## 0.11.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -199,6 +199,10 @@ function figureBounds(diagram) {
 * The side has to follow the part, not its turn in the list. Alternating sides sends the leader for
 * a part on the left out to the right, straight across everything drawn in between, and a figure
 * whose lines cross the thing they are labelling cannot be read.
+*
+* Concentric parts are the exception, and a common one — a cell drawn as membrane, cytoplasm and
+* nucleus shares one centre, so following the part would pile every label into one gutter and leave
+* the other empty. A part with no side of its own alternates instead.
 */
 function layOutCallouts(diagram, bounds) {
 	const [minX, minY, maxX, maxY] = bounds;
@@ -206,7 +210,9 @@ function layOutCallouts(diagram, bounds) {
 	const labelled = diagram.parts.filter((part) => part.label !== void 0);
 	const placed = [];
 	const gutter = 56;
+	const offCentre = Math.max(1, maxX - minX) * .06;
 	const automatic = [];
+	let alternated = 0;
 	for (const part of labelled) {
 		if (part.labelAt) {
 			const { at: at$1 } = boundsOf(part);
@@ -218,9 +224,16 @@ function layOutCallouts(diagram, bounds) {
 			continue;
 		}
 		const { at } = boundsOf(part);
+		const offset = at[0] - centreX;
+		let side;
+		if (Math.abs(offset) > offCentre) side = offset < 0 ? "left" : "right";
+		else {
+			side = alternated % 2 === 0 ? "left" : "right";
+			alternated += 1;
+		}
 		automatic.push({
 			part,
-			side: at[0] <= centreX ? "left" : "right",
+			side,
 			y: at[1]
 		});
 	}
@@ -312,14 +325,30 @@ function renderFigureSVG(diagram, options = {}) {
 		"</g></svg>"
 	].join("");
 }
+/**
+* How wide a string will draw, near enough to reserve space for.
+*
+* The browser lays the text out, so this cannot be measured here — and a fixed allowance is what
+* clipped "control center containing DNA" to "trol center containing DNA" against the left edge. A
+* CJK glyph is about as wide as the font size; Latin runs a little over half.
+*/
+function textWidth(text, fontSize) {
+	let width = 0;
+	for (const character of text) {
+		const code = character.codePointAt(0) ?? 0;
+		const wide = code > 11903 && code < 40960;
+		width += wide ? fontSize : fontSize * .58;
+	}
+	return width;
+}
 /** Widen the drawing box until every callout, and the caption, is inside it. */
 function viewWithCallouts(bounds, callouts, hasCaption) {
-	const textRoom = 120;
 	const xs = [bounds[0], bounds[2]];
 	const ys = [bounds[1], bounds[3]];
 	for (const callout of callouts) {
-		xs.push(callout.side === "left" ? callout.at[0] - textRoom : callout.at[0] + textRoom);
-		ys.push(callout.at[1] - 20, callout.at[1] + 12);
+		const room = Math.max(textWidth(callout.part.label ?? "", 13), textWidth(callout.part.note ?? "", 11));
+		xs.push(callout.side === "left" ? callout.at[0] - room : callout.at[0] + room);
+		ys.push(callout.at[1] - (callout.part.note ? 26 : 12), callout.at[1] + 12);
 	}
 	const pad = 12;
 	return [

package/dist/index.js

@@ -197,6 +197,10 @@ function figureBounds(diagram) {
 * The side has to follow the part, not its turn in the list. Alternating sides sends the leader for
 * a part on the left out to the right, straight across everything drawn in between, and a figure
 * whose lines cross the thing they are labelling cannot be read.
+*
+* Concentric parts are the exception, and a common one — a cell drawn as membrane, cytoplasm and
+* nucleus shares one centre, so following the part would pile every label into one gutter and leave
+* the other empty. A part with no side of its own alternates instead.
 */
 function layOutCallouts(diagram, bounds) {
 	const [minX, minY, maxX, maxY] = bounds;
@@ -204,7 +208,9 @@ function layOutCallouts(diagram, bounds) {
 	const labelled = diagram.parts.filter((part) => part.label !== void 0);
 	const placed = [];
 	const gutter = 56;
+	const offCentre = Math.max(1, maxX - minX) * .06;
 	const automatic = [];
+	let alternated = 0;
 	for (const part of labelled) {
 		if (part.labelAt) {
 			const { at: at$1 } = boundsOf(part);
@@ -216,9 +222,16 @@ function layOutCallouts(diagram, bounds) {
 			continue;
 		}
 		const { at } = boundsOf(part);
+		const offset = at[0] - centreX;
+		let side;
+		if (Math.abs(offset) > offCentre) side = offset < 0 ? "left" : "right";
+		else {
+			side = alternated % 2 === 0 ? "left" : "right";
+			alternated += 1;
+		}
 		automatic.push({
 			part,
-			side: at[0] <= centreX ? "left" : "right",
+			side,
 			y: at[1]
 		});
 	}
@@ -310,14 +323,30 @@ function renderFigureSVG(diagram, options = {}) {
 		"</g></svg>"
 	].join("");
 }
+/**
+* How wide a string will draw, near enough to reserve space for.
+*
+* The browser lays the text out, so this cannot be measured here — and a fixed allowance is what
+* clipped "control center containing DNA" to "trol center containing DNA" against the left edge. A
+* CJK glyph is about as wide as the font size; Latin runs a little over half.
+*/
+function textWidth(text, fontSize) {
+	let width = 0;
+	for (const character of text) {
+		const code = character.codePointAt(0) ?? 0;
+		const wide = code > 11903 && code < 40960;
+		width += wide ? fontSize : fontSize * .58;
+	}
+	return width;
+}
 /** Widen the drawing box until every callout, and the caption, is inside it. */
 function viewWithCallouts(bounds, callouts, hasCaption) {
-	const textRoom = 120;
 	const xs = [bounds[0], bounds[2]];
 	const ys = [bounds[1], bounds[3]];
 	for (const callout of callouts) {
-		xs.push(callout.side === "left" ? callout.at[0] - textRoom : callout.at[0] + textRoom);
-		ys.push(callout.at[1] - 20, callout.at[1] + 12);
+		const room = Math.max(textWidth(callout.part.label ?? "", 13), textWidth(callout.part.note ?? "", 11));
+		xs.push(callout.side === "left" ? callout.at[0] - room : callout.at[0] + room);
+		ys.push(callout.at[1] - (callout.part.note ? 26 : 12), callout.at[1] + 12);
 	}
 	const pad = 12;
 	return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-figure",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Labelled figures — regions with leader-line callouts — rendered as SVG from a declarative block.",
   "keywords": [
     "llm",
@@ -54,7 +54,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.11.0"
+    "@ai-gui/core": "0.12.0"
   },
   "scripts": {
     "build": "tsdown",