dsh-piano 0.1.0 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@
 
 ## 效果
 
-- 左下角一枚 🎹 按钮（默认收起，不打扰正常使用）。
+- 左下角一枚 🎹 按钮（默认收起，不打扰正常使用）。**按钮可拖动**：按住移动超过 6px 即判定为拖（不会误开面板），松手后位置存 `localStorage`，下次进来仍在原处；400ms 内的 `click` 才算"点开"，拖动不会吞掉下一次真正点击。
 - 点开是底部居中的浮动键盘面板：音量滑块、八度移调（− / +）、收起。
 - 键盘含白键 + 黑键；按住后滑动，指到哪个键就响哪个音（按住拖动 = 刮奏）。
 - 设置（音量、起始八度）持久化到 `localStorage`，刷新后保留。

package/lib/client.js

@@ -20,7 +20,7 @@ window.__ModuleLoader__.load({
 
 		//#region styles
 		const CSS = [
-			".dshp_btn{box-sizing:border-box;position:fixed;left:16px;bottom:16px;z-index:2147483000;height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:22px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 6px 24px rgba(0,0,0,.35);cursor:pointer;user-select:none;font-size:16px;line-height:20px}",
+			".dshp_btn{box-sizing:border-box;position:fixed;left:16px;bottom:16px;z-index:2147483000;height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:22px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 6px 24px rgba(0,0,0,.35);cursor:pointer;user-select:none;touch-action:none;will-change:transform;font-size:16px;line-height:20px}",
 			".dshp_btn:hover{background:var(--dsw-alias-interactive-bg-hover,#2a3140)}",
 			".dshp_panel{box-sizing:border-box;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483000;width:min(94vw,760px);display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--dsw-alias-bg-elevated,#1f2430);color:var(--dsw-alias-label-primary,#e6e8ee);box-shadow:0 12px 40px rgba(0,0,0,.45);user-select:none}",
 			".dshp_head{display:flex;align-items:center;gap:12px}",
@@ -321,8 +321,65 @@ window.__ModuleLoader__.load({
 				setOpen(true);
 			}, []);
 
+			// —— 收起态按钮**可拖动**：移动超过 6px 判定为「拖」（不触发开面板），
+			//    松手后位置存 localStorage，下次进来仍在原处。 ——
+			const [btnPos, setBtnPos] = useState(() => {
+				try { return JSON.parse(localStorage.getItem("dsh-piano:btnPos") || "null"); } catch { return null; }
+			});
+			const btnPosRef = useRef(btnPos);
+			btnPosRef.current = btnPos;
+			const dragRef = useRef(null);
+			const draggedRef = useRef(false);
+			const dragClearRef = useRef(0);
+
+			const onBtnDown = (e) => {
+				if (e.pointerType === "mouse" && e.button !== 0) return;
+				draggedRef.current = false;
+				const r = e.currentTarget.getBoundingClientRect();
+				dragRef.current = { x: e.clientX, y: e.clientY, left: r.left, top: r.top, moved: false };
+				try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
+			};
+			const onBtnMove = (e) => {
+				const d = dragRef.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 - 70, d.left + dx));
+				const top = Math.max(4, Math.min(window.innerHeight - 50, d.top + dy));
+				btnPosRef.current = { left, top };
+				setBtnPos({ left, top });
+			};
+			const onBtnUp = (e) => {
+				const d = dragRef.current;
+				dragRef.current = null;
+				try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+				if (!d || !d.moved) return;
+				draggedRef.current = true;
+				const pos = btnPosRef.current;
+				if (pos) { try { localStorage.setItem("dsh-piano:btnPos", JSON.stringify(pos)); } catch {} }
+				// 拖完不一定紧跟 click（拖到按钮外松手就点不出来）→ 400ms 后自动清标志，
+				// 免得把**下一次**真正的点击吞掉
+				if (dragClearRef.current) window.clearTimeout(dragClearRef.current);
+				dragClearRef.current = window.setTimeout(() => { draggedRef.current = false; }, 400);
+			};
+			const onBtnClick = () => {
+				if (draggedRef.current) { draggedRef.current = false; return; } // 刚才那一下是拖，不是点
+				onOpen();
+			};
+
 			if (!open) {
-				return h("button", { className: "dshp_btn", onClick: onOpen, title: "滑动钢琴" }, "🎹 钢琴");
+				return h("button", {
+					className: "dshp_btn",
+					title: "滑动钢琴（可拖动，点开面板）",
+					onClick: onBtnClick,
+					onPointerDown: onBtnDown,
+					onPointerMove: onBtnMove,
+					onPointerUp: onBtnUp,
+					onPointerCancel: onBtnUp,
+					style: btnPos ? { left: btnPos.left + "px", top: btnPos.top + "px", bottom: "auto" } : undefined
+				}, "🎹 钢琴");
 			}
 
 			return h("div", { className: "dshp_panel" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-piano",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "滑动钢琴：在 DSH 界面里弹一条钢琴键盘，鼠标/触控板滑过去像刮奏（glissando）一样出声。",
   "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"
   }
-}
+}