dsh-figmark 1.1.1 → 1.1.2

package/lib/client.js

@@ -1083,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 {
@@ -1867,7 +1881,7 @@ window.__ModuleLoader__.load({
 						x: centre[0],
 						y: centre[1],
 						fontFamily: PIN_FONT_FAMILY,
-						fontSize: 11 * unit,
+						fontSize: pinFontSizeOf(mark, unit),
 						fontWeight: 700,
 						fill: PIN_NUMBER_COLOR,
 						textAnchor: "middle",
@@ -2631,7 +2645,7 @@ window.__ModuleLoader__.load({
 			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 * unit}" stroke-linejoin="round"/>`);
-				if (number !== void 0) parts.push(`<text x="${centre[0]}" y="${centre[1]}" font-family="${PIN_FONT_FAMILY}" font-size="${11 * unit}" font-weight="700" fill="${PIN_NUMBER_COLOR}" text-anchor="middle" dominant-baseline="central">${number}</text>`);
+				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("");
 		}
@@ -3292,33 +3306,25 @@ window.__ModuleLoader__.load({
   cursor:ns-resize;transition:width .16s ease,background .16s ease,box-shadow .16s ease}
 .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 wedge: a hairline at the bottom, the heaviest width at the top. Drawn as a
-   clipped gradient box so it costs one element and no SVG. */
-.da-weight::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:11px;
-  transform:translateX(-50%);opacity:0;
-  background:linear-gradient(to top,var(--dsw-alias-border-l3,rgba(127,127,127,.34)),
-    var(--dsw-alias-border-l4,rgba(127,127,127,.5)));
-  clip-path:polygon(calc(50% - 0.5px) 100%,calc(50% + 0.5px) 100%,
-    calc(50% + 5.5px) 0,calc(50% - 5.5px) 0);
-  transition:opacity .16s ease}
-.da-weight:hover::before,.da-weight:focus-within::before{opacity:1}
-/* The part already chosen, drawn from the bottom up in the brand colour. */
-.da-weight-fill{position:absolute;left:50%;bottom:14px;width:11px;transform:translateX(-50%);
-  opacity:0;pointer-events:none;transition:opacity .16s ease;
-  background:var(--dsw-alias-brand-primary,#176df2);
-  clip-path:polygon(calc(50% - 0.5px) 100%,calc(50% + 0.5px) 100%,
-    calc(50% + 5.5px) 0,calc(50% - 5.5px) 0)}
-.da-weight:hover .da-weight-fill,.da-weight:focus-within .da-weight-fill{opacity:1}
+/* 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:11px;height:11px;border-radius:50%;
-  transform:translateX(-50%);pointer-events:none;
+.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,.32),0 0 0 1px var(--dsw-alias-border-l3,currentColor);
+  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:15px;height:15px;background:var(--dsw-alias-brand-primary,#176df2);
-  box-shadow:0 2px 7px rgba(20,40,80,.34)}
+  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. */
@@ -3491,7 +3497,7 @@ 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;
@@ -3814,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",
@@ -4063,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);
@@ -4653,7 +4698,7 @@ window.__ModuleLoader__.load({
 				}
 				const panel = root.getBoundingClientRect();
 				const measured = host.getBoundingClientRect();
-				const pillSize = measuredSize(detailRef.current, {
+				const pillSize = measuredSize(pillRef.current, {
 					width: 300,
 					height: 48
 				});
@@ -5231,6 +5276,13 @@ window.__ModuleLoader__.load({
 			*/
 			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.
 			*
@@ -5518,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
@@ -5572,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}% - 5.5px)` }
+								style: { bottom: `calc(12px + ${weightFraction} * (100% - 24px - var(--da-knob-size, 11px)))` }
 							})
 						]
 					}),

package/market/index.json

@@ -93,8 +93,8 @@
       },
       "versions": [
         {
-          "version": "1.1.1",
-          "publishTimestamp": 1792729486,
+          "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.1",
+  "version": "1.1.2",
   "private": false,
   "description": "DSH 插件：在右侧栏预览里对科研配图、SVG、PDF、HTML 直接圈画批注，标注写进侧车文件并可一键交给智能体改图源",
   "license": "MIT",