@lrplrplrp/dsh-live2d 0.1.0 → 0.1.2

package/assets/model_list.json

@@ -6,8 +6,8 @@
       "canvasWidth": 300,
       "canvasHeight": 400,
       "config": {
-        "x": -50,
-        "y": 100,
+        "x": 0,
+        "y": 0,
         "scaleX": 2,
         "scaleY": 2
       },

package/lib/client.js

@@ -204,8 +204,9 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
   const LIVE2D_CSS = [
     '#dsh-live2d-container {',
     '  position: fixed;',
-    '  bottom: 0;',
-    '  left: 0;',
+    '  top: 24px;',
+    '  left: 24px;',
+    '  bottom: auto;',
     '  z-index: 9999;',
     // 容器本身不拦截指针事件，画布区域点击完全穿透到页面，不影响输入；
     // 只有拖拽图标与画布大小手柄单独开启 pointer-events。
@@ -243,52 +244,48 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
     '#dsh-live2d-container:hover .dsh-live2d-label {',
     '  opacity: 1;',
     '}',
-    // 画布大小拖拽手柄：平时隐藏，鼠标悬停画布（容器）时在右下角出现，与移动图标重叠
-    '#dsh-live2d-container .dsh-live2d-resize {',
-    '  position: absolute;',
-    '  right: 4px;',
-    '  bottom: 4px;',
-    '  width: 14px;',
-    '  height: 14px;',
+    // 控制浮层：固定定位，位置由 JS 动态计算——理想位置是画布右下角，
+    // 但会被夹在视口内（画布拖出屏幕时，图标停在离画布右下角最近的屏幕边缘）。
+    // 浮层本身不拦截指针（pointer-events:none），只有里面的图标可点。
+    '#dsh-live2d-controls {',
+    '  position: fixed;',
+    '  z-index: 10000;',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 8px;',
+    '  pointer-events: none;',
+    '}',
+    // 画布大小拖拽手柄：常驻右下角浮层，与移动图标并排
+    '#dsh-live2d-controls .dsh-live2d-resize {',
+    '  width: 16px;',
+    '  height: 16px;',
     '  border-right: 2px solid rgba(96,165,250,0.9);',
     '  border-bottom: 2px solid rgba(96,165,250,0.9);',
     '  cursor: nwse-resize;',
-    '  opacity: 0;',
-    '  transition: opacity 0.2s;',
+    '  opacity: 0.7;',
     '  pointer-events: auto;',
-    '  z-index: 1;',
+    '  flex: none;',
     '}',
-    '#dsh-live2d-container.hovering .dsh-live2d-resize {',
-    '  opacity: 0.9;',
-    '}',
-    // 拖拽移动图标：平时隐藏，鼠标悬停画布（容器）时出现，与画布大小手柄重叠显示在上方
-    '#dsh-live2d-container .dsh-live2d-drag {',
-    '  position: absolute;',
-    '  right: 9px;',
-    '  bottom: 9px;',
-    '  width: 22px;',
-    '  height: 22px;',
+    // 拖拽移动图标：常驻右下角浮层
+    '#dsh-live2d-controls .dsh-live2d-drag {',
+    '  width: 26px;',
+    '  height: 26px;',
     '  display: flex;',
     '  align-items: center;',
     '  justify-content: center;',
     '  border-radius: 6px;',
-    '  background: rgba(31,41,55,0.65);',
-    '  color: rgba(226,232,240,0.9);',
-    '  font-size: 14px;',
+    '  background: rgba(31,41,55,0.75);',
+    '  color: rgba(226,232,240,0.95);',
+    '  font-size: 15px;',
     '  line-height: 1;',
     '  cursor: grab;',
     '  user-select: none;',
     '  pointer-events: auto;',
-    '  opacity: 0;',
-    '  transition: opacity 0.2s;',
-    '  z-index: 2;',
-    '}',
-    '#dsh-live2d-container.hovering .dsh-live2d-drag {',
-    '  opacity: 0.9;',
+    '  opacity: 0.85;',
+    '  flex: none;',
     '}',
-    '#dsh-live2d-container.dragging .dsh-live2d-drag {',
+    '#dsh-live2d-controls .dsh-live2d-drag:active {',
     '  cursor: grabbing;',
-    '  opacity: 0.9;',
     '}',
   ].join('\n')
 
@@ -691,17 +688,38 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
    * 会优先满足 bottom，拖动看起来"完全没反应"。
    */
   function place(containerEl, x, y) {
-    // 容器是 position:fixed，left/top 相对视口；因此钳制也必须用视口尺寸，
-    // 不能用 offsetWidth/offsetHeight（offsetParent 是 overlay 层，原点未必是视口 0,0）。
-    const rect = containerEl.getBoundingClientRect()
-    const maxX = Math.max(0, window.innerWidth - rect.width)
-    const maxY = Math.max(0, window.innerHeight - rect.height)
-    containerEl.style.left = Math.min(Math.max(x, 0), maxX) + 'px'
-    containerEl.style.top = Math.min(Math.max(y, 0), maxY) + 'px'
+    // 画布可自由定位（允许拖出屏幕），仅写入 left/top；bottom 必须置 auto，
+    // 否则 left/top 与 bottom 同时生效时浏览器优先满足 bottom，拖动无反应。
+    containerEl.style.left = x + 'px'
+    containerEl.style.top = y + 'px'
     containerEl.style.bottom = 'auto'
   }
 
-  function setupDrag(handleEl, containerEl) {
+  // 控制浮层跟随画布右下角：clamp=true 时被夹在视口内（画布在屏幕内时图标贴
+  // 画布右下角；画布拖出屏幕时图标停在最近屏幕边缘）；clamp=false 时不夹边，
+  // 用于拖动画布大小手柄的过程中——否则手柄会被夹在视口底边，鼠标越过后即
+  // 收不到 pointermove，表现为"向下拖不动"。
+  function updateControls(containerEl, controlsEl, clamp = true) {
+    if (!containerEl || !controlsEl) return
+    const cr = containerEl.getBoundingClientRect()
+    const cs = controlsEl.getBoundingClientRect()
+    const w = cs.width || 60
+    const h = cs.height || 34
+    const OFFSET = 4 // 图标相对画布右下角内缩一点
+    const MARGIN = 4 // 离屏幕边缘的最小间距
+    let x = cr.right - w - OFFSET
+    let y = cr.bottom - h - OFFSET
+    if (clamp) {
+      x = Math.min(Math.max(x, MARGIN), window.innerWidth - w - MARGIN)
+      y = Math.min(Math.max(y, MARGIN), window.innerHeight - h - MARGIN)
+    }
+    controlsEl.style.left = x + 'px'
+    controlsEl.style.top = y + 'px'
+    controlsEl.style.right = 'auto'
+    controlsEl.style.bottom = 'auto'
+  }
+
+  function setupDrag(handleEl, containerEl, controlsEl) {
     let pointerId = null
     let startX = 0
     let startY = 0
@@ -756,6 +774,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       curX = origX + (e.clientX - startX)
       curY = origY + (e.clientY - startY)
       place(containerEl, curX, curY)
+      updateControls(containerEl, controlsEl)
       e.preventDefault()
     }
 
@@ -855,6 +874,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
   function Live2DWidget() {
     const containerRef = useRef(null)
     const dragHandleRef = useRef(null)
+    const controlsRef = useRef(null)
     const engineRef = useRef(null)
     const cleanupDragRef = useRef(null)
     const lastStateRef = useRef(DSHState.IDLE)
@@ -887,28 +907,19 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       engine.init(containerRef.current).then((ok) => {
         if (ok) {
           engine.playAnimation('IDLE')
+          updateControls(containerRef.current, controlsRef.current)
         }
       })
 
-      cleanupDragRef.current = setupDrag(dragHandleRef.current, containerRef.current)
+      cleanupDragRef.current = setupDrag(dragHandleRef.current, containerRef.current, controlsRef.current)
 
-      // 悬停探测：容器 pointer-events:none 导致 CSS :hover 只在子元素上触发，
-      // 这里用 window 级 mousemove 判断指针是否落在画布矩形内，动态切换 hovering 类，
-      // 实现"鼠标在画布上时显示两个手柄"，同时画布本身不拦截输入。
-      const onMouseMove = (e) => {
-        const el = containerRef.current
-        if (!el) return
-        const rect = el.getBoundingClientRect()
-        const inside = e.clientX >= rect.left && e.clientX <= rect.right &&
-          e.clientY >= rect.top && e.clientY <= rect.bottom
-        if (inside) el.classList.add('hovering')
-        else el.classList.remove('hovering')
-      }
-      window.addEventListener('mousemove', onMouseMove)
+      // 窗口尺寸变化时把图标夹回视口内（画布可能因此相对移出屏幕）
+      const onResize = () => updateControls(containerRef.current, controlsRef.current)
+      window.addEventListener('resize', onResize)
 
       return () => {
         cleanupDragRef.current?.()
-        window.removeEventListener('mousemove', onMouseMove)
+        window.removeEventListener('resize', onResize)
         engine.destroy()
       }
     }, [])
@@ -941,6 +952,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       if (!engine || !engine.ready) return
       const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08
       engine.zoomBy(factor)
+      updateControls(containerRef.current, controlsRef.current)
     }, [])
 
     // 画布大小手柄：拖动右下角改变 canvasWidth/canvasHeight
@@ -953,20 +965,27 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
 
       const startX = e.clientX
       const startY = e.clientY
-      const rect = containerEl.getBoundingClientRect()
-      const startW = rect.width
-      const startH = rect.height
+      // 起点尺寸必须取 canvas 自身（CSS 像素），不能取 container 的
+      // getBoundingClientRect()：container 是 pointer-events:none 且内含一个
+      // position:fixed 的控制浮层，某些布局下其 rect 高度会塌缩为 0 / 与画布
+      // 不一致，导致 startH 错乱、向下拖时 h 计算异常、画布大小"拖不动"。
+      const canvasEl = engine.canvas
+      const startW = canvasEl ? canvasEl.offsetWidth : containerEl.getBoundingClientRect().width
+      const startH = canvasEl ? canvasEl.offsetHeight : containerEl.getBoundingClientRect().height
       const pointerId = e.pointerId
 
-      try { e.target.setPointerCapture(pointerId) } catch {}
+      try { e.currentTarget.setPointerCapture(pointerId) } catch {}
 
       const move = (ev) => {
         if (ev.pointerId !== pointerId) return
         const dw = ev.clientX - startX
         const dh = ev.clientY - startY
+        // 拖动过程中不夹边（clamp=false）：手柄自由跟随画布右下角，向下拖
+        // 时不会被夹在视口底边、鼠标越过后收不到 pointermove 而"拖不动"。
         const w = Math.min(800, Math.max(100, startW + dw))
         const h = Math.min(800, Math.max(100, startH + dh))
         engine.setCanvasSize(w, h)
+        updateControls(containerEl, controlsRef.current, false)
       }
       const up = (ev) => {
         if (ev.pointerId !== pointerId) return
@@ -974,6 +993,8 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
         window.removeEventListener('pointermove', move)
         window.removeEventListener('pointerup', up)
         window.removeEventListener('pointercancel', up)
+        // 松手后把图标夹回视口内（静止状态始终留在网页可见区域）。
+        updateControls(containerEl, controlsRef.current, true)
       }
       window.addEventListener('pointermove', move)
       window.addEventListener('pointerup', up)
@@ -985,18 +1006,25 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       id: 'dsh-live2d-container',
       onWheel: onWheel,
     },
-      // 右下角拖拽移动图标：只有拖动它才能移动整个看板娘，画布本身不再拦截输入
-      h('div', {
-        ref: dragHandleRef,
-        className: 'dsh-live2d-drag',
-        title: '拖动移动看板娘；鼠标滚轮缩放模型大小',
-      }, '✥'),
-      // 画布大小手柄：仅鼠标悬停画布（容器）时显示
+      // 控制浮层：固定钉在视口右下角，独立于画布。画布可以拖出屏幕，
+      // 但这两个图标始终留在页面内可见可点。
       h('div', {
-        className: 'dsh-live2d-resize',
-        title: '拖动改变画布大小',
-        onPointerDown: onResizePointerDown,
-      }),
+        ref: controlsRef,
+        id: 'dsh-live2d-controls',
+      },
+        // 画布大小手柄
+        h('div', {
+          className: 'dsh-live2d-resize',
+          title: '拖动改变画布大小',
+          onPointerDown: onResizePointerDown,
+        }),
+        // 拖拽移动图标：只有拖动它才能移动整个看板娘
+        h('div', {
+          ref: dragHandleRef,
+          className: 'dsh-live2d-drag',
+          title: '拖动移动看板娘；鼠标滚轮缩放模型大小',
+        }, '✥'),
+      ),
     )
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lrplrplrp/dsh-live2d",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Live2D 看板娘插件 for DeepSeek Harness — 可拖动的 Live2D 模型，支持 DSH 状态驱动动画、本地模型导入和完整配置页。",
   "type": "module",
   "main": "lib/index.js",
@@ -11,7 +11,8 @@
   },
   "files": [
     "lib/",
-    "assets/",
+    "assets/deepseek_l2d/",
+    "assets/model_list.json",
     "cordis.patch.yml",
     "README.md",
     "LICENSE"