dsh-live2dwaifu 1.0.3 → 1.0.5

package/README.md

@@ -340,6 +340,12 @@ curl -X POST http://127.0.0.1:<端口>/dsh-live2d/api/push \
 
 ---
 
+## 反馈
+
+遇到问题、想要新功能、觉得哪句话还是像 AI，都可以写信到 **FujiwaraReisen@outlook.com**。
+
+也可以直接去 [GitHub Issues](https://github.com/FujiwaraReisen/dsh-live2dwaifu/issues) 提，附上模型的来源和出问题的样子更容易定位。
+
 ## 致谢
 
 - Live2D Cubism Core © Live2D Inc.

package/lib/client.js

@@ -151,68 +151,56 @@
           .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) => {
+      // 拖动时盖一层全屏透明遮罩：既挡住 iframe 吃事件，也保证 pointermove 一定落在父窗口
+      const beginDrag = (e, kind) => {
+        if (e.button !== undefined && e.button !== 0) return;
         e.preventDefault();
         e.stopPropagation();
-        const cardEl = e.currentTarget.closest('.dsh-l2d-card');
+        const cardEl = e.currentTarget && e.currentTarget.closest ? e.currentTarget.closest('.dsh-l2d-card') : null;
         const sx = e.clientX;
         const sy = e.clientY;
         const w0 = size.w;
         const h0 = size.h;
-        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) });
-        }, '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 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(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 cls = kind === 'resize' ? 'resizing' : 'moving';
+        const shield = document.createElement('div');
+        shield.setAttribute('data-dsh-l2d-shield', '1');
+        shield.style.cssText =
+          'position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;background:transparent;touch-action:none;cursor:' +
+          (kind === 'resize' ? 'nwse-resize' : 'move');
+        document.body.appendChild(shield);
+        if (cardEl && cardEl.classList) cardEl.classList.add(cls);
+
+        const move = (ev) => {
+          if (kind === 'resize') {
+            const maxW = Math.max(240, Math.min(760, window.innerWidth - 40));
+            const maxH = Math.max(240, window.innerHeight - 60);
+            const w = Math.max(200, Math.min(maxW, w0 + (sx - ev.clientX)));
+            const hh = Math.max(200, Math.min(maxH, h0 + (sy - ev.clientY)));
+            setSize({ w: Math.round(w), h: Math.round(hh) });
+          } else {
+            setPos({ x: Math.round(x0 + (ev.clientX - sx)), y: Math.round(y0 + (ev.clientY - sy)) });
+          }
+        };
+
+        const finish = () => {
+          shield.removeEventListener('pointermove', move);
+          if (shield.parentNode) shield.parentNode.removeChild(shield);
+          if (cardEl && cardEl.classList) cardEl.classList.remove(cls);
+          window.removeEventListener('pointermove', move);
+          window.removeEventListener('pointerup', finish);
+          window.removeEventListener('pointercancel', finish);
+        };
+
+        shield.addEventListener('pointermove', move);
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', finish);
+        window.addEventListener('pointercancel', finish);
       };
+
+      const startDrag = (e) => beginDrag(e, 'resize');
+      const startMove = (e) => beginDrag(e, 'move');
       const noDrag = (e) => e.stopPropagation();
 
       const manage = () => ref.current && ref.current.contentWindow.postMessage({ type: 'dsh-live2d/manage' }, '*');

package/package.json

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