dsh-figmark 1.1.0 → 1.1.2

package/lib/client.js

@@ -26,6 +26,7 @@ window.__ModuleLoader__.load({
 			clear: "清空",
 			detail: "这个元素的详细说明",
 			addComment: "添加评论…",
+			pinSize: "标记大小",
 			weight: "线条粗细",
 			detailPlaceholder: "这一处具体要改什么（例如「这个标号应指向滑套 34」）",
 			summary: "总体目标",
@@ -113,6 +114,7 @@ window.__ModuleLoader__.load({
 			clear: "Clear",
 			detail: "What this element needs",
 			addComment: "Add a comment…",
+			pinSize: "Marker size",
 			weight: "Line weight",
 			detailPlaceholder: "What should change here (for example \"this numeral should point at the sleeve 34\")",
 			summary: "Overall goal",
@@ -1013,7 +1015,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/render.ts
-		/** Stroke width of every mark, in figure pixels. */
+		/** Stroke width of a mark drawn at weight 1 on a reference-sized figure, in pixels. */
 		const STROKE_WIDTH = 2.5;
 		/**
 		* The stroke width one mark is drawn at.
@@ -1023,17 +1025,36 @@ window.__ModuleLoader__.load({
 		* thicker pen. The arrow's barbs are weighed by the same multiple, because an
 		* arrow drawn with a thick pen has a thick head.
 		*
+		* The figure's own unit multiplies everything drawn on it, so the same mark is a
+		* bold line on a thumbnail and a hairline on a scan — see `./scale`.
+		*
 		* @param mark - the mark to weigh.
+		* @param unit - the figure's size multiple, 1 for a reference-sized figure.
 		* @returns its stroke width in figure pixels.
 		*/
-		function strokeWidthOf(mark) {
-			return STROKE_WIDTH * (mark.weight ?? 1);
+		function strokeWidthOf(mark, unit = 1) {
+			return STROKE_WIDTH * (mark.weight ?? 1) * unit;
 		}
 		/** Arrow head length, in figure pixels. */
 		const ARROW_HEAD = 14;
 		/** Half-angle of the arrow head, in radians. */
 		const ARROW_SPREAD = Math.PI / 7;
 		/**
+		* Half-width of one pin's head, in figure pixels.
+		*
+		* A pin is a marker the reader compares against the line work, so it is sized like a
+		* stroke: by the figure's unit and by the mark's own weight. The weight is reused
+		* rather than given its own field because it already means "how big this mark is" to
+		* the reader, and one rail on the left is enough — a stroke and a pin are never the
+		* same mark, so the one number never has to mean two things at once.
+		* @param mark - the point mark.
+		* @param unit - the figure's size multiple.
+		* @returns its head's half-width in figure pixels.
+		*/
+		function pinRadiusOf(mark, unit = 1) {
+			return 10 * (mark.weight ?? 1) * unit;
+		}
+		/**
 		* How far a pin's head sits above its coordinate, as a multiple of its half-width.
 		*
 		* A map pin puts its *tip* on the coordinate it names, so the head stands clear of
@@ -1062,6 +1083,20 @@ window.__ModuleLoader__.load({
 		* every colour the palette offers.
 		*/
 		const PIN_NUMBER_COLOR = "#ffffff";
+		/**
+		* Font size of the number inside a pin, in figure pixels.
+		*
+		* Scaled by the mark's weight as well as the figure: the rail that makes a pin bigger
+		* makes its head bigger, and a head that grows around a fixed-size numeral reads as a
+		* circle with a speck in it. The number is the pin's whole payload, so it keeps the
+		* same share of the head at every size.
+		* @param mark - the point mark whose pin is being drawn.
+		* @param unit - the figure's size multiple.
+		* @returns the font size to draw the number at.
+		*/
+		function pinFontSizeOf(mark, unit = 1) {
+			return 11 * (mark.weight ?? 1) * unit;
+		}
 		/** Normalize two opposite corners into a top-left origin and positive extents. */
 		function bounds(first, second) {
 			return {
@@ -1111,11 +1146,11 @@ window.__ModuleLoader__.load({
 		* @param points - the arrow's tail and tip.
 		* @returns tail, tip and both barbs; the stored points alone when it is half drawn.
 		*/
-		function arrowBarbs(points, weight = 1) {
+		function arrowBarbs(points, weight = 1, unit = 1) {
 			const [first, second] = points;
 			if (first === void 0 || second === void 0) return points;
 			const angle = Math.atan2(second[1] - first[1], second[0] - first[0]);
-			const head = ARROW_HEAD * weight;
+			const head = ARROW_HEAD * weight * unit;
 			const left = [second[0] - head * Math.cos(angle - ARROW_SPREAD), second[1] - head * Math.sin(angle - ARROW_SPREAD)];
 			const right = [second[0] - head * Math.cos(angle + ARROW_SPREAD), second[1] - head * Math.sin(angle + ARROW_SPREAD)];
 			return [
@@ -1170,10 +1205,10 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns the marker's path, number centre and box, or undefined with no coordinate.
 		*/
-		function pinGeometry(mark) {
+		function pinGeometry(mark, unit = 1) {
 			const tip = mark.points[0];
 			if (tip === void 0) return void 0;
-			const radius = 10;
+			const radius = pinRadiusOf(mark, unit);
 			const lift = radius * PIN_LIFT;
 			const [tipX, tipY] = tip;
 			const up = tipY - lift - radius >= 0;
@@ -1207,16 +1242,16 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns path data, or undefined when the mark carries no coordinate.
 		*/
-		function pinPathData(mark) {
-			return pinGeometry(mark)?.path;
+		function pinPathData(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.path;
 		}
 		/**
 		* Where the number inside a `point` mark's marker sits.
 		* @param mark - the point mark.
 		* @returns the number's centre, or undefined when the mark carries no coordinate.
 		*/
-		function pinNumberCentre(mark) {
-			return pinGeometry(mark)?.number;
+		function pinNumberCentre(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.number;
 		}
 		/**
 		* The box a `point` mark's pin covers.
@@ -1229,8 +1264,8 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns the pin's box, or undefined when the mark carries no point.
 		*/
-		function pointMarkBox(mark) {
-			return pinGeometry(mark)?.box;
+		function pointMarkBox(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.box;
 		}
 		/**
 		* The box a mark covers once it is drawn, rotation included.
@@ -1243,14 +1278,14 @@ window.__ModuleLoader__.load({
 		* @param mark - the mark to measure.
 		* @returns the box, or undefined when the mark carries no coordinate.
 		*/
-		function markOutline(mark) {
-			if (mark.kind === "point") return pointMarkBox(mark);
-			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points, mark.weight ?? 1) : mark.points;
+		function markOutline(mark, unit = 1) {
+			if (mark.kind === "point") return pointMarkBox(mark, unit);
+			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points, mark.weight ?? 1, unit) : mark.points;
 			const straight = pointsBox(geometry);
 			if (straight === void 0) return void 0;
 			const radians = markRadians(mark);
 			const box = radians === 0 ? straight : turnedBox(geometry, straight, radians);
-			const grow = strokeWidthOf(mark) / 2;
+			const grow = strokeWidthOf(mark, unit) / 2;
 			return {
 				x: box.x - grow,
 				y: box.y - grow,
@@ -1324,6 +1359,42 @@ window.__ModuleLoader__.load({
 			return `rotate(${n(radians * 180 / Math.PI)} ${n(cx)} ${n(cy)})`;
 		}
 		//#endregion
+		//#region src/client/scale.ts
+		/**
+		* How big the marks should be for the figure they are drawn on.
+		*
+		* A stroke is not a physical thing: 2.5 pixels is a bold line on a 300px thumbnail
+		* and a hairline on a 4000px scan. Marks are comparisons the reader makes against
+		* the line work underneath them, so they have to be sized in the same currency as
+		* the figure — a fraction of it — rather than in the figure's pixels.
+		*
+		* The reference edge is the size a science figure is usually exported at. An
+		* ordinary figure then gets the unit it always had, and only the outliers (a
+		* thumbnail, a poster) are scaled. The range is clamped rather than proportional
+		* because a 20000px figure would otherwise get strokes 40px wide, which reads as a
+		* highlighter rather than a line.
+		* @module dsh-figmark/client/scale
+		*/
+		/** The figure edge, in pixels, that gets the unit it always had. */
+		const REFERENCE_EDGE = 1200;
+		/** Smallest multiple of the base sizes, for figures far below the reference. */
+		const MIN_UNIT = .75;
+		/**
+		* The size everything drawn on a figure is multiplied by.
+		*
+		* Measured against the figure's longer edge: that is the dimension a reader judges
+		* a stroke against, and using the area would shrink a tall thin panel's marks for a
+		* reason the eye does not see.
+		* @param width - the figure's intrinsic width, in figure pixels.
+		* @param height - the figure's intrinsic height, in figure pixels.
+		* @returns the multiple of the base sizes, held inside {@link MIN_UNIT} and {@link MAX_UNIT}.
+		*/
+		function figureUnit(width, height) {
+			const edge = Math.max(width, height);
+			if (!Number.isFinite(edge) || edge <= 0) return 1;
+			return Math.min(3, Math.max(MIN_UNIT, edge / REFERENCE_EDGE));
+		}
+		//#endregion
 		//#region src/client/Canvas.tsx
 		/**
 		* The drawing surface.
@@ -1334,6 +1405,19 @@ window.__ModuleLoader__.load({
 		* means the same thing at any zoom or pane width.
 		* @module dsh-figmark/client/Canvas
 		*/
+		/**
+		* The `weight` field of a new mark, or nothing when it is the default.
+		*
+		* Absent means the default throughout this plugin, so writing `weight: 1` would put
+		* a field into every mark that says nothing — sidecars would grow a key for every
+		* mark ever drawn, and every comparison of two documents would see a difference
+		* where there is none.
+		* @param weight - the weight the next stroke is drawn at.
+		* @returns the field, or an empty object for the default.
+		*/
+		function weightField(weight) {
+			return weight === 1 ? {} : { weight };
+		}
 		/** Hit width of an invisible selection stroke, in figure pixels. */
 		const HIT_WIDTH = 14;
 		/** Minimum distance between recorded freehand samples, in figure pixels. */
@@ -1357,6 +1441,7 @@ window.__ModuleLoader__.load({
 		*/
 		function Canvas(props) {
 			const { width, height, marks, tool, color, containerRef, anchoring } = props;
+			const [originX, originY] = props.origin ?? [0, 0];
 			const weight = props.weight ?? 1;
 			/**
 			* Each mark's number, by id.
@@ -1366,6 +1451,14 @@ window.__ModuleLoader__.load({
 			* otherwise.
 			*/
 			const numbers = new Map(marks.map((mark, index) => [mark.id, props.numbering?.get(mark.id) ?? index + 1]));
+			/**
+			* How big everything is drawn here, as a multiple of the base sizes.
+			*
+			* Derived from the surface rather than passed in: every mark on this canvas shares
+			* one figure, so one number decides the pen for all of them, and a caller that
+			* forgot to thread it through could not make a mark disagree with its hit area.
+			*/
+			const unit = figureUnit(width, height);
 			const [draft, setDraft] = (0, react.useState)(null);
 			const [press, setPress] = (0, react.useState)(null);
 			const drawing = (0, react.useRef)(false);
@@ -1410,7 +1503,7 @@ window.__ModuleLoader__.load({
 				const rect = event.currentTarget.getBoundingClientRect();
 				const scaleX = rect.width === 0 ? 1 : width / rect.width;
 				const scaleY = rect.height === 0 ? 1 : height / rect.height;
-				return [(event.clientX - rect.left) * scaleX, (event.clientY - rect.top) * scaleY];
+				return [(event.clientX - rect.left) * scaleX - originX, (event.clientY - rect.top) * scaleY - originY];
 			};
 			/**
 			* Describe what the mark landed on.
@@ -1592,6 +1685,7 @@ window.__ModuleLoader__.load({
 						kind: "point",
 						color,
 						points: [point],
+						...weightField(weight),
 						...anchor === void 0 ? {} : { anchor }
 					};
 					props.onAdd(mark);
@@ -1608,7 +1702,7 @@ window.__ModuleLoader__.load({
 					kind: tool,
 					color,
 					points: seed,
-					weight
+					...weightField(weight)
 				});
 			};
 			const move = (event) => {
@@ -1634,10 +1728,18 @@ window.__ModuleLoader__.load({
 						...press,
 						snap: event.shiftKey
 					};
+					const edit = editFor(held, point, dx, dy);
 					setPress({
 						...held,
-						edit: editFor(held, point, dx, dy)
+						edit
 					});
+					const base = props.marks.find((candidate) => candidate.id === press.id);
+					/* v8 ignore next -- a press always begins on a mark that is still in the list. */
+					if (base === void 0) return;
+					const live = { ...base };
+					if (edit.points !== void 0) live.points = edit.points;
+					if (edit.rotation !== void 0) live.rotation = edit.rotation;
+					props.onLiveEdit?.(live);
 					return;
 				}
 				if (!drawing.current || draft === null) return;
@@ -1665,6 +1767,7 @@ window.__ModuleLoader__.load({
 				if (press !== null) {
 					const done = press.edit;
 					setPress(null);
+					props.onLiveEdit?.(null);
 					if (done === null) return;
 					if (press.handle === void 0) {
 						/* v8 ignore next -- a move always carries the geometry it moved to. */
@@ -1754,8 +1857,8 @@ window.__ModuleLoader__.load({
 			* compared to a washed-out sticker.
 			*/
 			const renderPoint = (mark) => {
-				const pin = pinPathData(mark);
-				const centre = pinNumberCentre(mark);
+				const pin = pinPathData(mark, unit);
+				const centre = pinNumberCentre(mark, unit);
 				/* v8 ignore next -- a point mark carries exactly the one coordinate it was placed at. */
 				if (pin === void 0 || centre === void 0) return null;
 				const number = numbers.get(mark.id);
@@ -1764,21 +1867,21 @@ window.__ModuleLoader__.load({
 						d: pin,
 						fill: "#ffffff",
 						stroke: "#ffffff",
-						strokeWidth: 4.5,
+						strokeWidth: 4.5 * unit,
 						strokeLinejoin: "round"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 						d: pin,
 						fill: mark.color,
 						stroke: "#ffffff",
-						strokeWidth: 1.5,
+						strokeWidth: 1.5 * unit,
 						strokeLinejoin: "round"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 						x: centre[0],
 						y: centre[1],
 						fontFamily: PIN_FONT_FAMILY,
-						fontSize: 11,
+						fontSize: pinFontSizeOf(mark, unit),
 						fontWeight: 700,
 						fill: PIN_NUMBER_COLOR,
 						textAnchor: "middle",
@@ -1796,19 +1899,19 @@ window.__ModuleLoader__.load({
 			* handles that would do nothing.
 			*/
 			const renderPointFrame = (shown) => {
-				const box = pointMarkBox(shown);
+				const box = pointMarkBox(shown, unit);
 				/* v8 ignore next -- a point mark carries exactly the one coordinate it was placed at. */
 				if (box === void 0) return null;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					x: box.x - 3,
-					y: box.y - 3,
-					width: box.width + 6,
-					height: box.height + 6,
-					rx: 3,
+					x: box.x - 3 * unit,
+					y: box.y - 3 * unit,
+					width: box.width + 6 * unit,
+					height: box.height + 6 * unit,
+					rx: 3 * unit,
 					fill: "none",
 					stroke: "#4c8dff",
-					strokeWidth: 1,
-					strokeDasharray: "3 2",
+					strokeWidth: unit,
+					strokeDasharray: `${3 * unit} ${2 * unit}`,
 					style: { pointerEvents: "none" }
 				});
 			};
@@ -1818,7 +1921,7 @@ window.__ModuleLoader__.load({
 				const selected = props.selectedId === mark.id;
 				const transform = markTransform(shown);
 				const isPoint = mark.kind === "point";
-				const pin = isPoint ? pinPathData(shown) : void 0;
+				const pin = isPoint ? pinPathData(shown, unit) : void 0;
 				/**
 				* What a press on the drawn shape starts.
 				*
@@ -1830,7 +1933,7 @@ window.__ModuleLoader__.load({
 					d: pin,
 					fill: "transparent",
 					stroke: "transparent",
-					strokeWidth: HIT_WIDTH,
+					strokeWidth: HIT_WIDTH * unit,
 					style: {
 						pointerEvents: "all",
 						cursor: "pointer"
@@ -1855,7 +1958,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: "#ffffff",
-									strokeWidth: strokeWidthOf(shown) + 2.5,
+									strokeWidth: strokeWidthOf(shown, unit) + 2.5 * unit,
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -1863,7 +1966,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: shown.color,
-									strokeWidth: strokeWidthOf(shown),
+									strokeWidth: strokeWidthOf(shown, unit),
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -1871,7 +1974,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: "transparent",
-									strokeWidth: HIT_WIDTH,
+									strokeWidth: HIT_WIDTH * unit,
 									style: {
 										pointerEvents: "stroke",
 										cursor: "pointer"
@@ -1892,9 +1995,13 @@ window.__ModuleLoader__.load({
 					]
 				}, mark.id);
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				className: "da-overlay",
 				"data-da-overlay": "",
+				style: {
+					left: originX,
+					top: originY
+				},
 				width,
 				height,
 				viewBox: `0 0 ${width} ${height}`,
@@ -1916,7 +2023,10 @@ window.__ModuleLoader__.load({
 					}
 					props.onSelect(null);
 				},
-				children: [marks.map((mark) => renderMark(mark, false)), draft === null ? null : renderMark(draft, true)]
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					transform: `translate(${originX} ${originY})`,
+					children: [marks.map((mark) => renderMark(mark, false)), draft === null ? null : renderMark(draft, true)]
+				})
 			});
 		}
 		/** A difference that never changes, for a body that has no edit yet. */
@@ -2478,6 +2588,44 @@ window.__ModuleLoader__.load({
 			const existing = shell.snapshot.draft.trim();
 			shell.setDraft(existing === "" ? message : `${existing}\n\n${message}`);
 		}
+		/**
+		* The box the whole drawing occupies: the figure, plus wherever the marks reach.
+		*
+		* A figure with every mark inside it gets exactly its own box back, which is the
+		* case the overlay has always drawn; the growth only happens for marks that leave
+		* it. The margin is applied only on sides that actually grew, so an ordinary figure
+		* is not padded on all four sides for nothing.
+		* @param width - the figure's width, in figure pixels.
+		* @param height - the figure's height, in figure pixels.
+		* @param marks - the marks drawn on it.
+		* @param unit - the figure's size multiple, so outlines are measured as drawn.
+		* @returns the box the drawing occupies, in figure coordinates.
+		*/
+		function plotBounds(width, height, marks, unit = 1) {
+			let left = 0;
+			let top = 0;
+			let right = width;
+			let bottom = height;
+			for (const mark of marks) {
+				const box = markOutline(mark, unit);
+				/* v8 ignore next -- a mark with no coordinate covers nothing to grow for. */
+				if (box === void 0) continue;
+				left = Math.min(left, box.x);
+				top = Math.min(top, box.y);
+				right = Math.max(right, box.x + box.width);
+				bottom = Math.max(bottom, box.y + box.height);
+			}
+			const padLeft = left < 0 ? 12 : 0;
+			const padTop = top < 0 ? 12 : 0;
+			const padRight = right > width ? 12 : 0;
+			const padBottom = bottom > height ? 12 : 0;
+			return {
+				x: left - padLeft,
+				y: top - padTop,
+				width: right + padRight - (left - padLeft),
+				height: bottom + padBottom - (top - padTop)
+			};
+		}
 		//#endregion
 		//#region src/client/export.ts
 		/**
@@ -2485,17 +2633,19 @@ window.__ModuleLoader__.load({
 		*
 		* @param mark - the mark to draw.
 		* @param number - the mark's number in the list, when it carries one.
+		* @param unit - the figure's size multiple, so the export is drawn at the same
+		*   weight the reader saw.
 		* @returns the mark's elements.
 		*/
-		function markSvg(mark, number) {
+		function markSvg(mark, number, unit) {
 			const path = markPathData(mark);
 			const parts = [];
-			if (path !== void 0) parts.push(`<path d="${path}" fill="none" stroke="#ffffff" stroke-width="${strokeWidthOf(mark) + 2.5}" stroke-linecap="round" stroke-linejoin="round"/>`, `<path d="${path}" fill="none" stroke="${mark.color}" stroke-width="${strokeWidthOf(mark)}" stroke-linecap="round" stroke-linejoin="round"/>`);
-			const pin = mark.kind === "point" ? pinPathData(mark) : void 0;
-			const centre = mark.kind === "point" ? pinNumberCentre(mark) : void 0;
+			if (path !== void 0) parts.push(`<path d="${path}" fill="none" stroke="#ffffff" stroke-width="${strokeWidthOf(mark, unit) + 2.5 * unit}" stroke-linecap="round" stroke-linejoin="round"/>`, `<path d="${path}" fill="none" stroke="${mark.color}" stroke-width="${strokeWidthOf(mark, unit)}" stroke-linecap="round" stroke-linejoin="round"/>`);
+			const pin = mark.kind === "point" ? pinPathData(mark, unit) : void 0;
+			const centre = mark.kind === "point" ? pinNumberCentre(mark, unit) : void 0;
 			if (pin !== void 0 && centre !== void 0) {
-				parts.push(`<path d="${pin}" fill="${mark.color}" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>`);
-				if (number !== void 0) parts.push(`<text x="${centre[0]}" y="${centre[1]}" font-family="${PIN_FONT_FAMILY}" font-size="11" font-weight="700" fill="${PIN_NUMBER_COLOR}" text-anchor="middle" dominant-baseline="central">${number}</text>`);
+				parts.push(`<path d="${pin}" fill="${mark.color}" stroke="#ffffff" stroke-width="${2 * unit}" stroke-linejoin="round"/>`);
+				if (number !== void 0) parts.push(`<text x="${centre[0]}" y="${centre[1]}" font-family="${PIN_FONT_FAMILY}" font-size="${pinFontSizeOf(mark, unit)}" font-weight="700" fill="${PIN_NUMBER_COLOR}" text-anchor="middle" dominant-baseline="central">${number}</text>`);
 			}
 			return parts.join("");
 		}
@@ -2531,7 +2681,27 @@ window.__ModuleLoader__.load({
 		*/
 		function composeReviewSvg(layer, marks, numbering) {
 			const numbers = new Map(marks.map((mark, index) => [mark.id, numbering?.get(mark.id) ?? index + 1]));
-			return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${layer.width}" height="${layer.height}" viewBox="0 0 ${layer.width} ${layer.height}"><rect x="0" y="0" width="${layer.width}" height="${layer.height}" fill="#ffffff"/>` + figureSvg(layer) + marks.map((mark) => markSvg(mark, numbers.get(mark.id))).join("") + "</svg>";
+			const unit = figureUnit(layer.width, layer.height);
+			const paper = plotBounds(layer.width, layer.height, marks, unit);
+			const shift = `translate(${-paper.x} ${-paper.y})`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${paper.width}" height="${paper.height}" viewBox="0 0 ${paper.width} ${paper.height}"><rect x="0" y="0" width="${paper.width}" height="${paper.height}" fill="#ffffff"/><g transform="${shift}">` + figureSvg(layer) + marks.map((mark) => markSvg(mark, numbers.get(mark.id), unit)).join("") + "</g></svg>";
+		}
+		/**
+		* The size of the picture {@link composeReviewSvg} builds.
+		*
+		* A caller has to know it before rasterizing: an SVG rendered at the figure's size
+		* would crop away exactly the marks that made the paper grow.
+		* @param layer - the figure to place underneath.
+		* @param marks - marks in draw order.
+		* @param unit - the figure's size multiple.
+		* @returns the paper's width and height, in figure pixels.
+		*/
+		function reviewSize(layer, marks, unit = figureUnit(layer.width, layer.height)) {
+			const paper = plotBounds(layer.width, layer.height, marks, unit);
+			return {
+				width: paper.width,
+				height: paper.height
+			};
 		}
 		/**
 		* Rasterization scale for one review image.
@@ -3120,39 +3290,45 @@ window.__ModuleLoader__.load({
 .da-palette .da-tool .da-tool-icon{height:auto}
 .da-palette .da-tool .da-tool-icon svg{width:16px;height:16px;stroke-width:1.9}
 
-/* --- the weight rail ----------------------------------------------------- */
-/* A vertical rail along the left edge of the figure. Idle it is a hairline: the
-   whole control is 6px wide, so it reads as a rule at the edge of the drawing
-   rather than as a panel competing with it. Crossing it opens it out to a track
-   with a knob, which is where the width can be read and dragged. A horizontal
-   range input is rotated upright inside the pill, because a range is the one
-   control the browser already knows how to drag with every pointer. */
+/* --- the size rail ------------------------------------------------------- */
+/* A vertical rail along the left edge of the figure: how heavy the pen is, and how
+   big a point mark's pin is. Idle it is a hairline, so it costs the figure nothing;
+   crossing it opens it out to a track. The track is *tapered* — a thin line at the
+   bottom and a broad one at the top — because the control's whole subject is
+   thickness, and a wedge says which way is heavier without reading a number.
+   A horizontal range input is rotated upright inside the pill: it keeps dragging,
+   arrow keys, the step and the accessible name, while the rail above does the
+   drawing. The drawn parts never take the pointer, or grabbing the knob would grab
+   the knob instead of the slider. */
 .da-weight{position:absolute;z-index:7;left:6px;top:50%;transform:translateY(-50%);
-  display:flex;align-items:center;justify-content:center;width:6px;height:132px;
+  display:flex;align-items:center;justify-content:center;width:7px;height:200px;
   border-radius:999px;background:var(--dsw-alias-border-l2,rgba(127,127,127,.22));
   cursor:ns-resize;transition:width .16s ease,background .16s ease,box-shadow .16s ease}
-.da-weight:hover,.da-weight:focus-within{width:26px;background:var(--dsw-alias-bg-layer-2,#fff);
+.da-weight:hover,.da-weight:focus-within{width:30px;background:var(--dsw-alias-bg-layer-2,#fff);
   box-shadow:0 5px 18px rgba(20,40,80,.16),0 0 0 0.5px var(--dsw-alias-border-l2,currentColor)}
-/* The track: a hairline down the middle of the pill, only wide enough to see. */
-.da-weight::before{content:"";position:absolute;left:50%;top:11px;bottom:11px;width:2px;
-  transform:translateX(-50%);border-radius:1px;background:var(--dsw-alias-border-l3,rgba(127,127,127,.34))}
-/* The filled part of the track, drawn from the bottom up. */
-.da-weight-fill{position:absolute;left:50%;bottom:11px;width:2px;transform:translateX(-50%);
-  border-radius:1px;background:var(--dsw-alias-brand-primary,#176df2);opacity:0;transition:opacity .16s ease}
-.da-weight:hover .da-weight-fill,.da-weight:focus-within .da-weight-fill{opacity:1}
-/* The knob sits on the value. It is the only part that shows at rest, so the rail
-   reads as a slider waiting to be touched rather than a bare rule. */
-.da-weight-knob{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;
-  transform:translateX(-50%);background:var(--dsw-alias-bg-layer-2,#fff);
-  box-shadow:0 1px 4px rgba(20,40,80,.32),0 0 0 1px var(--dsw-alias-border-l3,currentColor);
+/* The track is an svg in the body: a hairline at the bottom that opens into a rounded
+   shoulder at the top. It is not a clip-path polygon because a polygon has no rounded
+   ends — the corners were what made the wedge read as a cut-out blade rather than a
+   part of the panel. preserveAspectRatio="none" stretches one 12x100 shape over the
+   rail's height, so the shoulders stay smooth at any length. */
+.da-weight-svg{position:absolute;left:50%;top:12px;bottom:12px;width:18px;
+  transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .16s ease}
+.da-weight:hover .da-weight-svg,.da-weight:focus-within .da-weight-svg{opacity:1}
+/* The knob sits on the value: the only part that shows at rest, so the rail reads as
+   a slider waiting to be touched rather than a bare rule. */
+.da-weight-knob{position:absolute;left:50%;width:var(--da-knob-size,11px);height:var(--da-knob-size,11px);
+  border-radius:50%;transform:translateX(-50%);pointer-events:none;
+  background:var(--dsw-alias-bg-layer-2,#fff);
+  box-shadow:0 1px 4px rgba(20,40,80,.28),0 0 0 1px var(--dsw-alias-border-l3,currentColor);
   transition:width .16s ease,height .16s ease,background .16s ease}
+.da-weight:hover,.da-weight:focus-within{--da-knob-size:15px}
 .da-weight:hover .da-weight-knob,.da-weight:focus-within .da-weight-knob{
-  width:13px;height:13px;background:var(--dsw-alias-brand-primary,#176df2);
-  box-shadow:0 2px 7px rgba(20,40,80,.34)}
-/* The browser's own range, rotated upright and made transparent: it keeps the
-   dragging, the arrow keys, the step and the accessible name, while the rail above
-   does the drawing. */
-.da-weight-input{position:absolute;left:50%;top:50%;width:112px;height:26px;margin:0;opacity:0;
+  background:var(--dsw-alias-brand-primary,#176df2);
+  box-shadow:0 2px 7px rgba(20,40,80,.3)}
+/* The browser's own range, rotated upright and made transparent. It spans the whole
+   rail so a press anywhere on it lands on the slider — including on the knob, which
+   is why the knob is pointer-transparent. */
+.da-weight-input{position:absolute;left:50%;top:50%;width:200px;height:30px;margin:0;opacity:0;
   transform:translate(-50%,-50%) rotate(-90deg);cursor:ns-resize;appearance:none;background:transparent}
 
 /* --- the floating bar ---------------------------------------------------- */
@@ -3243,6 +3419,10 @@ window.__ModuleLoader__.load({
    needs to see where the drawing stops. */
 .da-stage{position:relative;display:flex;align-items:safe center;justify-content:safe center;flex:1 1 auto;overflow:auto;min-height:0;padding:14px;background:var(--dsw-alias-bg-document-preview,transparent)}
 .da-surface{position:relative;flex:0 0 auto;margin:0;transform-origin:top left;background:#fff;border-radius:4px;box-shadow:var(--dsw-elevation-prominent,0 1px 3px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.08))}
+/* The paper: the figure plus the margin a mark may have needed. It is the white sheet
+   the drawing sits on, so a mark that reaches past the figure lands on paper rather
+   than on the panel behind it. */
+.da-paper{background:#fff}
 .da-figure{display:block;user-select:none;-webkit-user-drag:none}
 /* The table is a thing you can push. The hand only shows under the tools that
    leave a drag free to move the view: under a drawing tool the same drag draws. */
@@ -3253,7 +3433,7 @@ window.__ModuleLoader__.load({
 /* The rendered document takes the figure's place; the overlay above it owns every
    pointer event, which is also what keeps a link inside it from navigating. */
 .da-html{display:block;border:0;background:#fff;pointer-events:none}
-.da-overlay{position:absolute;inset:0;touch-action:none}
+.da-overlay{position:absolute;touch-action:none}
 .da-overlay[data-mode="view"]{pointer-events:none}
 .da-overlay[data-tool="select"]{cursor:default}
 .da-overlay:not([data-tool="select"]){cursor:crosshair}
@@ -3317,14 +3497,19 @@ window.__ModuleLoader__.load({
    come from the mark it belongs to. It is a pill rather than a card — no head, no
    border between the field and the panel — so writing about a mark costs one line
    over the figure instead of a box that covers it. */
-.da-float-detail{width:300px;gap:0;padding:4px;border-radius:22px;
+.da-float-detail{width:300px;max-width:calc(100% - 16px);gap:0;padding:4px;border-radius:22px;
   flex-direction:row;align-items:flex-end;
   box-shadow:0 8px 26px rgba(20,40,80,.2),0 0 0 1px rgba(20,40,80,.04)}
 .da-float .da-comment{flex:1 1 auto;min-width:0;box-sizing:border-box;border:0;background:transparent;
   color:inherit;font:inherit;font-size:13px;line-height:1.55;padding:7px 10px;resize:none;
-  /* One line until the sentence needs more: the pill is a place to type, not a
-     panel, and the rule for the record cards' textareas sets a 74px floor. */
-  min-height:0;height:33px;max-height:120px;overflow-y:auto;outline:none;field-sizing:content}
+  /* One line until the sentence needs more, then as many as it takes: the pill is a
+     place to type, and a sentence read through a slot two lines tall is a sentence
+     the reader has to scroll to finish. The rule for the record cards' textareas sets
+     a 74px floor, hence the explicit reset. The scrollbar is hidden because it is not
+     a scroll view — wheel and keys still work once the sentence outgrows the pane. */
+  min-height:0;height:auto;max-height:min(180px,42vh);overflow-y:auto;outline:none;
+  field-sizing:content;scrollbar-width:none}
+.da-float .da-comment::-webkit-scrollbar{width:0;height:0}
 .da-float .da-comment::placeholder{color:var(--dsw-alias-label-tertiary,currentColor);opacity:.85}
 /* The hand-off appears only once the field says something: an empty pill is a
    place to type, not a decision to make. */
@@ -3544,13 +3729,34 @@ window.__ModuleLoader__.load({
 		* @param size - the card's size, in CSS pixels.
 		* @returns the card's top-left corner, in the panel's coordinates.
 		*/
+		/**
+		* The size to place a card by: the card's own, or a stand-in before it is measured.
+		*
+		* A comment pill grows with the sentence in it, so a placement that assumed one line
+		* would push a long comment off the bottom of the panel. The element is measured once
+		* it has been laid out; before that — the first frame of a selection, and in any
+		* environment that reports zero boxes — the caller's estimate is the only size there
+		* is, and the next pass corrects it.
+		* @param element - the laid-out card, when there is one.
+		* @param fallback - the size to use when the card has not been measured.
+		* @returns the width and height to place by.
+		*/
+		function measuredSize(element, fallback) {
+			if (element === null || element.offsetHeight === 0) return fallback;
+			return {
+				width: element.offsetWidth,
+				height: element.offsetHeight
+			};
+		}
 		function placeCard(anchor, panelWidth, panelHeight, size = {
-			width: 252,
-			height: 196
+			width: 300,
+			height: 48
 		}) {
 			const below = anchor.y + anchor.height + 10;
 			const above = anchor.y - size.height - 10;
-			const top = below + size.height <= panelHeight - 8 ? below : Math.max(8, above);
+			const roomBelow = panelHeight - 8 - below;
+			const roomAbove = anchor.y - 10 - 8;
+			const top = roomBelow >= size.height ? below : roomAbove >= size.height ? above : Math.max(8, roomAbove > roomBelow ? above : below);
 			const widest = Math.max(8, panelWidth - size.width - 8);
 			return {
 				left: Math.min(Math.max(8, anchor.x), widest),
@@ -3614,6 +3820,27 @@ window.__ModuleLoader__.load({
 			"#2f9e44"
 		];
 		/** Tools in toolbar order. */
+		/**
+		* The rail's track, drawn on an 18x100 grid and stretched to whatever height it gets.
+		*
+		* A hairline at the bottom opening into a round shoulder at the top: the control's
+		* subject is thickness, so the track itself says which way is heavier. Every edge is
+		* curved — straight flanks make a paper dart, and a square cap makes a cut-off blade —
+		* so the profile is eased and the top is closed with an arc a little wider than the
+		* shoulders. Stretching it vertically (preserveAspectRatio="none") costs nothing
+		* visually: the only vertical features are straight lines, and the horizontal ones are
+		* what the gradient is for.
+		*/
+		const WEIGHT_TRACK = [
+			"M 8.2 100",
+			"C 8.2 78 7.9 58 6.4 38",
+			"C 5.4 25 3.2 16 1.9 11",
+			"A 7.1 7.1 0 0 1 16.1 11",
+			"C 14.8 16 12.6 25 11.6 38",
+			"C 10.1 58 9.8 78 9.8 100",
+			"A 0.8 0.8 0 0 1 8.2 100",
+			"Z"
+		].join(" ");
 		const TOOLS = [
 			{
 				tool: "select",
@@ -3640,6 +3867,20 @@ window.__ModuleLoader__.load({
 				label: "toolPoint"
 			}
 		];
+		/**
+		* The tools that draw something with a size the rail can set.
+		*
+		* `select` is not among them: it draws nothing, so with it armed and no mark
+		* selected the rail has no subject. `point` is, because a pin is sized by the same
+		* number — the rail asks "how big is this mark" either way.
+		*/
+		const WEIGHT_TOOLS = /* @__PURE__ */ new Set([
+			"arrow",
+			"rect",
+			"ellipse",
+			"pen",
+			"point"
+		]);
 		/** The copy key naming the shape each kind of mark is, for the list's second line. */
 		const TOOL_COPY = {
 			arrow: "toolArrow",
@@ -3849,9 +4090,27 @@ window.__ModuleLoader__.load({
 			const isVector = mediaType === "image/svg+xml";
 			const t = (0, react.useCallback)((key) => resolveTranslate(props, key), [props.t, props.localeId]);
 			const sessionId = props.sessionId ?? parsedAddress?.sessionId;
+			/**
+			* A private prefix for the rail's gradient and clip ids.
+			*
+			* Two bodies can be mounted at once (a PDF lays out one per page), and an id is
+			* document-wide: sharing one would make every rail's fill follow the first rail's
+			* selection. Declared here, with the other hooks, because the ids are read far below
+			* the early returns for a figure that failed to load.
+			*/
+			const trackId = `da-weight-${(0, react.useId)().replaceAll(":", "")}`;
 			const stageRef = (0, react.useRef)(null);
 			/** The box a double clicked mark's detail is written in. */
 			const detailRef = (0, react.useRef)(null);
+			/**
+			* The comment pill around that box.
+			*
+			* Measured rather than the textarea inside it: the field gives up width to the two
+			* hand-off buttons as soon as there is something to send, so a placement computed
+			* from the field's box would put the buttons past the edge of the panel — which is
+			* exactly what a comment pill against the right edge used to do.
+			*/
+			const pillRef = (0, react.useRef)(null);
 			const barRef = (0, react.useRef)(null);
 			const figureHostRef = (0, react.useRef)(null);
 			const surfaceRef = (0, react.useRef)(null);
@@ -3988,6 +4247,14 @@ window.__ModuleLoader__.load({
 			*/
 			const [detailAt, setDetailAt] = (0, react.useState)(null);
 			/**
+			* The selected mark as a drag is currently shaping it.
+			*
+			* Kept beside the stored marks rather than in them: the gesture is not committed
+			* until it is released, so writing it into the list would make every frame an
+			* undoable edit. It exists only so the pill can follow the hand.
+			*/
+			const [liveMark, setLiveMark] = (0, react.useState)(null);
+			/**
 			* Shut the style panel when the reader picks up a tool.
 			*
 			* Arming a tool is the moment the panel has done its job; leaving it open over
@@ -4175,6 +4442,23 @@ window.__ModuleLoader__.load({
 				rasterSize
 			]);
 			/**
+			* How big everything drawn is, as a multiple of the base sizes.
+			*
+			* One number for the whole surface: the pen, the pins and the review image all
+			* have to agree, and a stroke is only bold or thin relative to the figure it sits
+			* on. A 4000px scan and a 300px thumbnail get the same-looking mark this way.
+			*/
+			const unit = size === null ? 1 : figureUnit(size.width, size.height);
+			/**
+			* The paper the drawing needs: the figure, plus anywhere the marks reach past it.
+			*
+			* A reader boxing the margin a plot clips, or flagging a spot just outside the
+			* axes, is drawing something the figure does not contain. The paper grows to hold
+			* it rather than the mark being clipped — and because the surface is white, a mark
+			* out there lands on paper instead of on nothing.
+			*/
+			const paper = size === null ? null : plotBounds(size.width, size.height, marks, unit);
+			/**
 			* Everything a background write needs, read at write time.
 			*
 			* A write runs from a timer that outlives the render that scheduled it, so it has
@@ -4406,31 +4690,38 @@ window.__ModuleLoader__.load({
 				const root = rootRef.current;
 				const host = figureRef.current;
 				const mark = marks.find((candidate) => candidate.id === selectedId);
-				const box = mark === void 0 ? void 0 : markOutline(mark);
+				const drawn = liveMark !== null && liveMark.id === selectedId ? liveMark : mark;
+				const box = drawn === void 0 ? void 0 : markOutline(drawn, unit);
 				if (root === null || host === null || box === void 0 || size === null) {
 					setDetailAt(null);
 					return;
 				}
 				const panel = root.getBoundingClientRect();
-				const drawn = host.getBoundingClientRect();
+				const measured = host.getBoundingClientRect();
+				const pillSize = measuredSize(pillRef.current, {
+					width: 300,
+					height: 48
+				});
 				const at = placeCard(scaledBox(box, {
-					x: drawn.left,
-					y: drawn.top,
-					width: drawn.width,
-					height: drawn.height
+					x: measured.left,
+					y: measured.top,
+					width: measured.width,
+					height: measured.height
 				}, {
 					x: panel.left,
 					y: panel.top,
 					width: panel.width,
 					height: panel.height
-				}, size.width), panel.width, panel.height);
+				}, size.width), panel.width, panel.height, pillSize);
 				setDetailAt((previous) => previous !== null && previous.left === at.left && previous.top === at.top ? previous : at);
 			}, [
+				htmlHeight,
+				liveMark,
 				marks,
-				selectedId,
 				scale,
+				selectedId,
 				size,
-				htmlHeight
+				unit
 			]);
 			/**
 			* The factor currently drawn, kept beside the state that will hold it.
@@ -4748,8 +5039,9 @@ window.__ModuleLoader__.load({
 			]);
 			const exportPng = (0, react.useCallback)(async (target) => {
 				const svg = composeReviewSvg(target, marks);
-				const exportScale = Math.min(2, Math.max(1, 2400 / Math.max(target.width, target.height)));
-				return await rasterizePng(svg, target.width, target.height, exportScale);
+				const paper = reviewSize(target, marks);
+				const exportScale = Math.min(2, Math.max(1, 2400 / Math.max(paper.width, paper.height)));
+				return await rasterizePng(svg, paper.width, paper.height, exportScale);
 			}, [marks]);
 			const buildDocument = (0, react.useCallback)((target, scope = marks) => {
 				if (loaded === null) return null;
@@ -4973,7 +5265,23 @@ window.__ModuleLoader__.load({
 			* the next stroke, which is where the remembered preference comes in.
 			*/
 			const shownColor = selected === null ? color : selected.color;
-			const shownWeight = selected === null ? weight : selected.weight ?? 1;
+			/**
+			* What the size rail currently means, or null when it means nothing.
+			*
+			* It sizes one thing: the stroke of the mark the reader is working on, or the pen
+			* of the next stroke. With nothing selected and no drawing tool out there is no
+			* such thing, so the rail stands down instead of offering a control for a decision
+			* nobody is making. A point mark borrows the same number for its pin, so the rail
+			* stays when one is selected — it is the mark's size, whichever way it is drawn.
+			*/
+			const shownWeight = selected === null ? WEIGHT_TOOLS.has(tool) ? weight : null : selected.weight ?? 1;
+			/**
+			* How far up the rail that value sits, from 0 at the lightest to 1 at the heaviest.
+			*
+			* One number for the fill, the knob and the input: computed three times the three
+			* could round differently and the knob would sit a pixel off the fill it belongs to.
+			*/
+			const weightFraction = shownWeight === null ? 0 : (shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN);
 			/**
 			* Change one attribute of the selected mark, or of the next stroke when nothing
 			* is selected.
@@ -5004,16 +5312,32 @@ window.__ModuleLoader__.load({
 				}
 				repaintSelected(selected, { weight: held });
 			};
-			const surfaceStyle = size === null ? {} : {
-				width: size.width * scale,
-				height: size.height * scale
+			const surfaceStyle = paper === null ? {} : {
+				width: paper.width * scale,
+				height: paper.height * scale
 			};
-			const figureStyle = size === null ? {} : {
-				width: size.width,
-				height: size.height,
+			/**
+			* The paper at its unscaled size, with the figure placed at its own offset on it.
+			*
+			* The whole paper is scaled by one transform rather than each part scaling itself,
+			* so the figure and the overlay cannot drift apart at a fractional factor — which
+			* at 60% is exactly what a mark drawn on a line work and a mark drawn on paper
+			* would do.
+			*/
+			const paperStyle = paper === null ? {} : {
+				position: "relative",
+				width: paper.width,
+				height: paper.height,
 				transform: `scale(${scale})`,
 				transformOrigin: "top left"
 			};
+			const figureStyle = paper === null ? {} : {
+				position: "absolute",
+				left: -paper.x,
+				top: -paper.y,
+				width: size?.width,
+				height: size?.height
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "da-root",
 				ref: rootRef,
@@ -5042,64 +5366,67 @@ window.__ModuleLoader__.load({
 							className: "da-surface",
 							ref: surfaceRef,
 							style: surfaceStyle,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								ref: figureRef,
-								style: {
-									...figureStyle,
-									position: "relative"
-								},
-								children: [figure?.kind === "svg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									ref: figureHostRef,
-									dangerouslySetInnerHTML: { __html: figure.markup }
-								}) : figure?.kind === "raster" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									className: "da-figure",
-									src: figure.objectUrl,
-									width: size?.width,
-									height: size?.height,
-									alt: "",
-									onLoad: (event) => {
-										const image = event.currentTarget;
-										setFileRasterSize({
-											width: image.naturalWidth,
-											height: image.naturalHeight
-										});
-									}
-								}) : figure?.kind === "html" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
-									ref: frameRef,
-									className: "da-html",
-									title: t("htmlFrame"),
-									sandbox: "allow-same-origin",
-									style: {
-										width: figure.width,
-										height: htmlHeight
-									}
-								}) : null, size === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Canvas, {
-									width: size.width,
-									height: size.height,
-									marks,
-									tool,
-									color,
-									weight,
-									containerRef: figureHostRef,
-									anchoring: isVector,
-									anchorAtFigurePoint: figure?.kind === "html" ? anchorAtFigurePoint : void 0,
-									selectedId,
-									onSelect: setSelectedId,
-									onAdd: addMark,
-									onMove: moveMark,
-									onUpdate: updateMark,
-									onRemove: removeMark,
-									onPan: panBy,
-									onPanStart: () => {
-										setPanning(true);
-									},
-									onPanEnd: () => {
-										setPanning(false);
-									},
-									onEdit: editMark,
-									onDrawn: finishDrawing,
-									numbering: props.numbering
-								})]
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "da-paper",
+								style: paperStyle,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									ref: figureRef,
+									style: figureStyle,
+									children: [figure?.kind === "svg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										ref: figureHostRef,
+										dangerouslySetInnerHTML: { __html: figure.markup }
+									}) : figure?.kind === "raster" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										className: "da-figure",
+										src: figure.objectUrl,
+										width: size?.width,
+										height: size?.height,
+										alt: "",
+										onLoad: (event) => {
+											const image = event.currentTarget;
+											setFileRasterSize({
+												width: image.naturalWidth,
+												height: image.naturalHeight
+											});
+										}
+									}) : figure?.kind === "html" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+										ref: frameRef,
+										className: "da-html",
+										title: t("htmlFrame"),
+										sandbox: "allow-same-origin",
+										style: {
+											width: figure.width,
+											height: htmlHeight
+										}
+									}) : null, paper === null || size === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Canvas, {
+										width: paper.width,
+										height: paper.height,
+										origin: [-paper.x, -paper.y],
+										marks,
+										tool,
+										color,
+										weight,
+										containerRef: figureHostRef,
+										anchoring: isVector,
+										anchorAtFigurePoint: figure?.kind === "html" ? anchorAtFigurePoint : void 0,
+										selectedId,
+										onSelect: setSelectedId,
+										onAdd: addMark,
+										onMove: moveMark,
+										onUpdate: updateMark,
+										onRemove: removeMark,
+										onPan: panBy,
+										onPanStart: () => {
+											setPanning(true);
+										},
+										onPanEnd: () => {
+											setPanning(false);
+										},
+										onEdit: editMark,
+										onDrawn: finishDrawing,
+										onLiveEdit: setLiveMark,
+										numbering: props.numbering
+									})]
+								})
 							})
 						})
 					}),
@@ -5243,6 +5570,7 @@ window.__ModuleLoader__.load({
 						className: "da-float da-float-detail",
 						role: "group",
 						"aria-label": t("detail"),
+						ref: pillRef,
 						style: {
 							left: detailAt.left,
 							top: detailAt.top
@@ -5281,14 +5609,14 @@ window.__ModuleLoader__.load({
 							})]
 						})]
 					}),
-					tool === "point" || selected?.kind === "point" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					shownWeight === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 						className: "da-weight",
-						title: t("weight"),
+						title: t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "range",
 								className: "da-weight-input",
-								"aria-label": t("weight"),
+								"aria-label": t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
 								min: WEIGHT_MIN,
 								max: 4,
 								step: .1,
@@ -5297,15 +5625,49 @@ window.__ModuleLoader__.load({
 									chooseWeight(Number(event.target.value));
 								}
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "da-weight-fill",
-								"aria-hidden": true,
-								style: { height: `${(shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN) * 100}%` }
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+								className: "da-weight-svg",
+								viewBox: "0 0 18 100",
+								preserveAspectRatio: "none",
+								"aria-hidden": "true",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+										id: `${trackId}-shade`,
+										x1: "0",
+										y1: "1",
+										x2: "0",
+										y2: "0",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+											offset: "0",
+											stopColor: "rgba(20,40,80,.05)"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+											offset: "1",
+											stopColor: "rgba(20,40,80,.2)"
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+										id: `${trackId}-cut`,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+											x: "0",
+											y: 100 - weightFraction * 100,
+											width: "18",
+											height: weightFraction * 100
+										})
+									})] }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										d: WEIGHT_TRACK,
+										fill: `url(#${trackId}-shade)`
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										d: WEIGHT_TRACK,
+										fill: "var(--dsw-alias-brand-primary,#176df2)",
+										clipPath: `url(#${trackId}-cut)`
+									})
+								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "da-weight-knob",
 								"aria-hidden": true,
-								style: { bottom: `calc(${(shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN) * 100}% - 5px)` }
+								style: { bottom: `calc(12px + ${weightFraction} * (100% - 24px - var(--da-knob-size, 11px)))` }
 							})
 						]
 					}),
@@ -5644,15 +6006,18 @@ window.__ModuleLoader__.load({
 			const images = [];
 			const numbering = new Map(document.marks.map((mark, index) => [mark.id, index + 1]));
 			for (const page of pages) {
-				const svg = composeReviewSvg({
+				const layer = {
 					kind: "raster",
 					dataUrl: page.dataUrl,
 					width: page.width,
 					height: page.height
-				}, document.marks.filter((mark) => mark.page === page.page), numbering);
+				};
+				const marks = document.marks.filter((mark) => mark.page === page.page);
+				const svg = composeReviewSvg(layer, marks, numbering);
+				const paper = reviewSize(layer, marks);
 				images.push({
 					page: page.page,
-					image: await rasterizePng(svg, page.width, page.height, reviewScale(page.width, page.height))
+					image: await rasterizePng(svg, paper.width, paper.height, reviewScale(paper.width, paper.height))
 				});
 			}
 			return images;
@@ -6178,6 +6543,7 @@ window.__ModuleLoader__.load({
 					createAutosave,
 					annotationSignature,
 					autosaveDelayMs: 600,
+					figureUnit,
 					seat: createDocumentSeat({
 						sessions: ctx.get("sessions"),
 						conversation: ctx.get("conversation"),

package/lib/client.pdf.js

@@ -25856,7 +25856,7 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 		* @param transform - `[a b c d e f]`, user space → page units.
 		* @returns the placed geometry.
 		*/
-		function place(mark, transform) {
+		function place(mark, transform, unit) {
 			const scale = unitScale(transform);
 			const radians = (mark.rotation ?? 0) * Math.PI / 180;
 			const box = pointsBox(mark.points);
@@ -25867,7 +25867,7 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 			if (mark.kind === "rect" || mark.kind === "ellipse") {
 				if (turned) points = turnedRing(mark.kind, mark.points, centre, radians);
 			} else if (spins) points = mark.points.map((point) => turnAround(point, centre, radians));
-			const weight = mark.weight ?? 1;
+			const weight = (mark.weight ?? 1) * unit;
 			return {
 				points: points.map((point) => toUserSpace(transform, point)),
 				width: STROKE_WIDTH * weight / scale,
@@ -25963,13 +25963,14 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 		* @param rect - the box the appearance is drawn in.
 		* @returns the content stream operators.
 		*/
-		function pointContent(mark, placed, rect) {
+		function pointContent(mark, placed, rect, unit) {
 			const point = placed.points[0];
 			/* v8 ignore next -- a point mark carries exactly the one coordinate it was placed at. */
 			if (point === void 0) return "";
 			const [x, y] = [point[0] - rect.x, point[1] - rect.y];
-			const radius = POINT_RADIUS / Math.max(placed.width / STROKE_WIDTH, 1e-4);
-			const dot = POINT_DOT_RADIUS / Math.max(placed.width / STROKE_WIDTH, 1e-4);
+			const base = Math.max(placed.width / (STROKE_WIDTH * unit), 1e-4);
+			const radius = POINT_RADIUS / base;
+			const dot = POINT_DOT_RADIUS / base;
 			const ring = ellipsePath(x, y, radius, radius);
 			const centre = ellipsePath(x, y, dot, dot);
 			return `${colorOperators(mark.color, "RG")} ${num(placed.width)} w 1 J ${ring} S ${colorOperators(mark.color, "rg")} ${centre} f`;
@@ -26014,8 +26015,8 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 		* @returns the appearance stream reference, or undefined when the mark draws
 		*   nothing a stream is needed for.
 		*/
-		function appearance(context, mark, placed, rect) {
-			const content = mark.kind === "point" ? pointContent(mark, placed, rect) : strokeContent(mark, placed, rect);
+		function appearance(context, mark, placed, rect, unit) {
+			const content = mark.kind === "point" ? pointContent(mark, placed, rect, unit) : strokeContent(mark, placed, rect);
 			if (content === "") return void 0;
 			const dictionary = import_cjs.PDFDict.withContext(context);
 			dictionary.set(import_cjs.PDFName.of("Type"), import_cjs.PDFName.of("XObject"));
@@ -26054,11 +26055,11 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 		* @param transform - `[a b c d e f]`, user space → page units.
 		* @returns the annotation dictionary.
 		*/
-		function annotation(context, mark, transform) {
-			const placed = place(mark, transform);
+		function annotation(context, mark, transform, unit) {
+			const placed = place(mark, transform, unit);
 			if (mark.points[0] === void 0 || placed.points[0] === void 0) throw new Error("an annotation mark needs at least one coordinate pair");
 			const rect = boundsOf(drawnPoints(mark, placed), placed.width * 2);
-			const box = mark.kind === "point" ? boundsOf(placed.points, POINT_RADIUS * 2) : rect;
+			const box = mark.kind === "point" ? boundsOf(placed.points, POINT_RADIUS * unit * 2) : rect;
 			const dictionary = import_cjs.PDFDict.withContext(context);
 			dictionary.set(import_cjs.PDFName.of("Type"), import_cjs.PDFName.of("Annot"));
 			dictionary.set(import_cjs.PDFName.of("Subtype"), import_cjs.PDFName.of(annotationSubtype(mark)));
@@ -26102,7 +26103,7 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 					dictionary.set(import_cjs.PDFName.of("LE"), endings);
 				}
 			}
-			const stream = appearance(context, mark, placed, box);
+			const stream = appearance(context, mark, placed, box, unit);
 			if (stream !== void 0) {
 				const streams = import_cjs.PDFDict.withContext(context);
 				streams.set(import_cjs.PDFName.of("N"), stream);
@@ -26150,7 +26151,10 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 				const page = document.getPage(input.page - 1);
 				if (input.marks.length === 0) continue;
 				const annots = pageAnnots(document.context, page);
-				for (const mark of input.marks) annots.push(document.context.register(annotation(document.context, mark, input.transform)));
+				for (const mark of input.marks) {
+					const unit = input.unit ?? 1;
+					annots.push(document.context.register(annotation(document.context, mark, input.transform, unit)));
+				}
 			}
 			return await document.save();
 		}
@@ -50274,7 +50278,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 				});
 				try {
 					const pages = markedPages(marks);
-					const annotatedPdf = await annotatePdf(bytes, await annotateInputs(pdf, pages));
+					const annotatedPdf = await annotatePdf(bytes, await annotateInputs(pdf, pages, props.figureUnit));
 					const saved = await seats.save(address, input, annotatedPdf);
 					autosave.cancel();
 					writtenSignature.current = signature(input);
@@ -50456,14 +50460,15 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 		* @param pages - the marked pages.
 		* @returns one input per page, each with its marks and its user-space transform.
 		*/
-		async function annotateInputs(pdf, pages) {
+		async function annotateInputs(pdf, pages, unitOf) {
 			const inputs = [];
 			for (const entry of pages) {
 				const size = await pdf.size(entry.page);
 				inputs.push({
 					page: entry.page,
 					transform: size.transform,
-					marks: entry.marks
+					marks: entry.marks,
+					unit: unitOf(size.width, size.height)
 				});
 			}
 			return inputs;

package/market/index.json

@@ -93,8 +93,8 @@
       },
       "versions": [
         {
-          "version": "1.1.0",
-          "publishTimestamp": 1792725959,
+          "version": "1.1.2",
+          "publishTimestamp": 1792731605,
           "source": {
             "type": "npm",
             "registry": "https://registry.npmjs.org"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-figmark",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "private": false,
   "description": "DSH 插件：在右侧栏预览里对科研配图、SVG、PDF、HTML 直接圈画批注，标注写进侧车文件并可一键交给智能体改图源",
   "license": "MIT",