dsh-live2dwaifu 1.0.1 → 1.0.2

package/README.md

@@ -35,7 +35,9 @@ dsh plugin --profile desktop add dsh-live2dwaifu
 
 ### 位置和大小
 
-按住**标题栏**能拖到屏幕任何地方；右下角那个小斜纹拖的是大小（宽 200–720，高 220–视口高−80）。位置、大小、背景、开合状态都记在本机，下次打开还是这样。
+按住**标题栏**能拖到屏幕任何地方。
+**改大小**：卡片左上角那个小斜纹，往左上拖变大、往右下拖变小——卡片本身钉在屏幕右下角，所以动的是它的左上角（宽 200–720，高 220–视口高−80）。
+位置、大小、背景、开合状态都记在本机，下次打开还是这样。
 
 拖到一半跑到屏幕外了？关掉重开一次就回到默认位置。
 
@@ -272,7 +274,7 @@ curl -X POST http://127.0.0.1:<端口>/dsh-live2d/api/push \
 先重启。还不来，看 profile 的 `package.json`：`dsh.profile.bundles` 和 `dependencies` 里都得有 `dsh-live2dwaifu`。手动拷进 `node_modules` 的不会自动登记。
 
 **她只有半张脸 / 位置偏上**
-模型画布比例跟卡片不一样。卡片是竖的，太宽或太扁的模型会被裁两边。拖右下角改形状试试。
+模型画布比例跟卡片不一样。卡片是竖的，太宽或太扁的模型会被裁两边。拖左上角那个小斜纹改形状试试。
 
 **导入了却不认得**
 `.model3.json` 的层级选错了。选它隔壁那一层。

package/lib/client.js

@@ -18,7 +18,7 @@
         transition:box-shadow .2s ease}
       .dsh-l2d-card:hover{box-shadow:0 22px 58px rgba(0,0,0,.58)}
       .dsh-l2d-card.collapsed{width:150px!important;height:38px!important}
-      .dsh-l2d-head{display:flex;align-items:center;gap:7px;padding:9px 11px;color:#a8b1bf;font-size:11px;
+      .dsh-l2d-head{display:flex;align-items:center;gap:7px;padding:9px 11px 9px 24px;color:#a8b1bf;font-size:11px;
         letter-spacing:.4px;border-bottom:1px solid rgba(255,255,255,.06);user-select:none;flex:none;cursor:move;
         background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0))}
       .dsh-l2d-dot{width:7px;height:7px;border-radius:50%;background:#6aa9ff;flex:none;
@@ -43,10 +43,12 @@
         transition:filter .15s ease}
       .dsh-l2d-send:hover{filter:brightness(1.14)}
       .dsh-l2d-send:active{filter:brightness(.96)}
-      .dsh-l2d-grip{position:absolute;right:1px;bottom:1px;width:18px;height:18px;cursor:nwse-resize;opacity:.5;
-        transition:opacity .15s ease;
-        background:repeating-linear-gradient(135deg,transparent 0 2px,rgba(255,255,255,.4) 2px 3px) no-repeat right bottom/10px 10px}
-      .dsh-l2d-grip:hover{opacity:1}
+      .dsh-l2d-grip{position:absolute;left:0;top:0;width:20px;height:20px;cursor:nwse-resize;opacity:.4;
+        transition:opacity .15s ease,background .15s ease;border-radius:16px 0 8px 0;z-index:2;
+        background:repeating-linear-gradient(135deg,transparent 0 2px,rgba(255,255,255,.45) 2px 3px) no-repeat left top/10px 10px}
+      .dsh-l2d-grip:hover{opacity:1;background-color:rgba(255,255,255,.08)}
+      .dsh-l2d-card.resizing{cursor:nwse-resize;box-shadow:0 0 0 1px rgba(106,169,255,.45),0 22px 58px rgba(0,0,0,.6)}
+      .dsh-l2d-card.moving{cursor:move;box-shadow:0 0 0 1px rgba(106,169,255,.35),0 22px 58px rgba(0,0,0,.6)}
     `;
 
     function ensureCss() {
@@ -149,42 +151,67 @@
           .catch(() => setTitle('Live2D'));
       }, [nonce]);
 
+      // 拖动时把 iframe 的指针事件关掉，否则光标一进 iframe 父窗口就收不到事件，手感像粘住
+      const lockPointer = (on, cls, cardEl) => {
+        const f = ref.current;
+        if (f) f.style.pointerEvents = on ? 'none' : '';
+        if (cardEl && cardEl.classList) {
+          cardEl.classList.toggle('resizing', on && cls === 'resizing');
+          cardEl.classList.toggle('moving', on && cls === 'moving');
+        }
+        document.body.style.userSelect = on ? 'none' : '';
+      };
+
+      const bindDrag = (move, cls, cardEl) => {
+        const up = () => {
+          window.removeEventListener('pointermove', move);
+          window.removeEventListener('pointerup', up);
+          window.removeEventListener('pointercancel', up);
+          lockPointer(false, cls, cardEl);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+      };
+
+      // 卡片钉在右下角，所以只有左上角会动：往左上拖变大，往右下拖变小
       const startDrag = (e) => {
         e.preventDefault();
+        e.stopPropagation();
+        const cardEl = e.currentTarget.closest('.dsh-l2d-card');
         const sx = e.clientX;
         const sy = e.clientY;
         const w0 = size.w;
         const h0 = size.h;
-        const move = (ev) => {
-          const w = Math.max(200, Math.min(720, w0 + (sx - ev.clientX)));
-          const hh = Math.max(220, Math.min(window.innerHeight - 80, h0 + (sy - ev.clientY)));
+        lockPointer(true, 'resizing', cardEl);
+        bindDrag((ev) => {
+          const maxW = Math.min(720, Math.max(240, window.innerWidth - 60));
+          const maxH = Math.max(240, window.innerHeight - 80);
+          const w = Math.max(200, Math.min(maxW, w0 + (sx - ev.clientX)));
+          const hh = Math.max(220, Math.min(maxH, h0 + (sy - ev.clientY)));
           setSize({ w: Math.round(w), h: Math.round(hh) });
-        };
-        const up = () => {
-          window.removeEventListener('pointermove', move);
-          window.removeEventListener('pointerup', up);
-        };
-        window.addEventListener('pointermove', move);
-        window.addEventListener('pointerup', up);
+        }, 'resizing', cardEl);
       };
 
       const startMove = (e) => {
         if (e.button !== undefined && e.button !== 0) return;
+        const cardEl = e.currentTarget.closest('.dsh-l2d-card');
         const sx = e.clientX;
         const sy = e.clientY;
         const x0 = pos.x;
         const y0 = pos.y;
-        const move = (ev) => {
+        const w = size.w;
+        const hh = open ? size.h : 38;
+        lockPointer(true, 'moving', cardEl);
+        bindDrag((ev) => {
           const nx = x0 + (ev.clientX - sx);
           const ny = y0 + (ev.clientY - sy);
-          setPos({ x: Math.round(nx), y: Math.round(ny) });
-        };
-        const up = () => {
-          window.removeEventListener('pointermove', move);
-          window.removeEventListener('pointerup', up);
-        };
-        window.addEventListener('pointermove', move);
-        window.addEventListener('pointerup', up);
+          // 至少留八十像素在视口里，别拖丢
+          setPos({
+            x: Math.round(Math.min(window.innerWidth - 80, Math.max(-w + 80, nx))),
+            y: Math.round(Math.min(window.innerHeight - 44, Math.max(-hh + 44, ny))),
+          });
+        }, 'moving', cardEl);
       };
       const noDrag = (e) => e.stopPropagation();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-live2dwaifu",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "给 DSH 网页右下角请一个 Live2D 角色：会眨眼、会呼吸、视线跟着鼠标、点她有反应、说话时嘴动、心情变了眉毛跟着动。模型不用内置——谁装谁放自己的文件夹；支持自定义 .exp3.json 表情和 .motion3.json 动作，卡片能拖能缩，背景可换。",
   "type": "module",
   "main": "lib/index.js",