dsh-scroll-piano 0.3.4 → 0.3.6

package/README.md

@@ -9,7 +9,7 @@
 - 竖条上有**「我的消息」小地图刻度**：你每发一条消息，对应位置一根蓝色小横杠——**按「在整段对话里的位置」定位，与滚动无关**，所以不管你滚到对话多深，自己的消息始终标在那、点得到。
 - **气泡只在鼠标贴近某条刻度（±16px）时出现**，内容就是那条消息的正文（最多 3 行）；**其余位置整个不显示**（不显示音名、不显示 MIDI 数字）。
 - **点蓝色小横杠 → 跳到那条消息**（平滑滚动、滚到视口中央）。蓝条命中区放大到 18×12px（可视化仍是 7×2 细条，悬停时加宽变亮），比原来 2px 高好点得多；**点气泡也能跳**（两者同一个 `jumpTo`）。
-- 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。
+- 左下角一枚 `🎵 滚动钢琴 ON/OFF` 胶囊：点开关切换、右侧滑块调音量（设置存 `localStorage`）。**胶囊可拖动**（`cursor:grab`）：位移 >6px 判定为拖、松手位置存 `localStorage("dsh-scroll-piano:pillPos")`、拖完 400ms 内不吞点击；**按在音量滑块上不进拖动**，滑块照常调音量。
 - 默认音域 C3–C6（3 个八度），只按半音触发（同音不重复触发）。
 
 > 预览**只显示用户自己发的消息**，**不做「取全局最近一条」兜底**（否则同一条会在整片区域反复出现 = 重复显示），位置感交给刻度。**声音与预览彼此独立**——任何位置滑动都照常出声，只有预览挑消息。

package/lib/client.js

@@ -23,7 +23,7 @@ window.__ModuleLoader__.load({
 
 		//#region styles
 		const CSS = [
-			".dshscp_pill{box-sizing:border-box;position:fixed;left:132px;bottom:16px;z-index:2147483000;height:32px;display:inline-flex;align-items:center;gap:10px;padding:0 10px;border-radius:16px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 4px 18px rgba(0,0,0,.35);font-size:12px;line-height:16px}",
+			".dshscp_pill{box-sizing:border-box;position:fixed;left:132px;bottom:16px;z-index:2147483000;height:32px;display:inline-flex;align-items:center;gap:10px;padding:0 10px;border-radius:16px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 4px 18px rgba(0,0,0,.35);font-size:12px;line-height:16px;cursor:grab;touch-action:none}",
 			".dshscp_pill button{box-sizing:border-box;border:none;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0 2px;display:inline-flex;align-items:center;gap:6px}",
 			".dshscp_dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-label-tertiary,#6b7280)}",
 			".dshscp_dotOn{background:#35c46a;box-shadow:0 0 6px rgba(53,196,106,.9)}",
@@ -241,6 +241,48 @@ window.__ModuleLoader__.load({
 		//#region component
 		function ScrollPiano() {
 			const [settings, setSettings] = useState(loadSettings);
+			// —— 左下角那条黑胶囊**可拖动**（音量滑块除外，它自己要收拖动事件）——
+			const [pillPos, setPillPos] = useState(() => {
+				try { return JSON.parse(localStorage.getItem("dsh-scroll-piano:pillPos") || "null"); } catch { return null; }
+			});
+			const pillPosRef = useRef(pillPos);
+			pillPosRef.current = pillPos;
+			const pillDragRef = useRef(null);
+			const pillDraggedRef = useRef(false);
+			const pillClearRef = useRef(0);
+			const onPillDown = (e) => {
+				// 按在音量滑块上不进拖动，否则调音量会被拖走
+				if (e.target && e.target.tagName === "INPUT") return;
+				if (e.pointerType === "mouse" && e.button !== 0) return;
+				pillDraggedRef.current = false;
+				const r = e.currentTarget.getBoundingClientRect();
+				pillDragRef.current = { x: e.clientX, y: e.clientY, left: r.left, top: r.top, moved: false };
+				try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
+			};
+			const onPillMove = (e) => {
+				const d = pillDragRef.current;
+				if (!d) return;
+				const dx = e.clientX - d.x;
+				const dy = e.clientY - d.y;
+				if (!d.moved && Math.abs(dx) + Math.abs(dy) > 6) d.moved = true;
+				if (!d.moved) return;
+				const left = Math.max(4, Math.min(window.innerWidth - 60, d.left + dx));
+				const top = Math.max(4, Math.min(window.innerHeight - 40, d.top + dy));
+				pillPosRef.current = { left, top };
+				setPillPos({ left, top });
+			};
+			const onPillUp = (e) => {
+				const d = pillDragRef.current;
+				pillDragRef.current = null;
+				try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+				if (!d || !d.moved) return;
+				pillDraggedRef.current = true;
+				const pos = pillPosRef.current;
+				if (pos) { try { localStorage.setItem("dsh-scroll-piano:pillPos", JSON.stringify(pos)); } catch {} }
+				// 拖完不一定紧跟 click → 400ms 自动清，别吞掉下一次真正点击
+				if (pillClearRef.current) window.clearTimeout(pillClearRef.current);
+				pillClearRef.current = window.setTimeout(() => { pillDraggedRef.current = false; }, 400);
+			};
 			const settingsRef = useRef(settings);
 			settingsRef.current = settings;
 			const lastMidiRef = useRef(null);
@@ -468,9 +510,19 @@ window.__ModuleLoader__.load({
 					),
 					h("div", { ref: textRef, className: "dshscp_prevText" })
 				),
-				h("div", { className: "dshscp_pill" },
+				h("div", {
+					className: "dshscp_pill",
+					onPointerDown: onPillDown,
+					onPointerMove: onPillMove,
+					onPointerUp: onPillUp,
+					onPointerCancel: onPillUp,
+					style: pillPos ? { left: pillPos.left + "px", top: pillPos.top + "px", bottom: "auto" } : undefined
+				},
 					h("button", {
-						onClick: () => setOn(!settings.on),
+						onClick: () => {
+							if (pillDraggedRef.current) { pillDraggedRef.current = false; return; } // 刚才是拖，不是点
+							setOn(!settings.on);
+						},
 						title: settings.on ? "关闭滚动钢琴" : "开启滚动钢琴"
 					},
 						h("span", { className: "dshscp_dot" + (settings.on ? " dshscp_dotOn" : "") }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-scroll-piano",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "滚动钢琴：鼠标滑过 DSH 右侧边缘的滚动条竖条时，按纵向位置发出钢琴音（越高音越高，特雷门琴式）。",
   "type": "module",
   "license": "MIT",
@@ -49,11 +49,13 @@
     },
     "compatibility": {
       "dshReleases": {
-        "0.2.0-rc.2": "compatible"
+        "0.2.0-rc.2": "compatible",
+        "0.2.1-rc.2": "compatible",
+        "0.2.2-rc.1": "compatible"
       }
     }
   },
   "scripts": {
     "test": "node test/bundle-check.mjs"
   }
-}
+}