dsh-comfyui-rp 0.2.5 → 0.2.6

package/README.md

@@ -56,6 +56,8 @@ dsh plugin --profile web add git+https://github.com/bmhty123/dsh-comfyui-rp.git
 - **临时手动出一张**：悬浮球 → 铅笔菜单 →「请求生成」，读来源会话的最新正文。
 - **只重做一张**：图片框 → 重新生成 →「仅此图」；整套重来选「全部」。
 - **找图**：图库 → 当前会话 / 全部 / 收藏夹 / 回收站。
+- **一键找菜单**：在图片上单击一下，四角按钮和铅笔菜单一起亮出来，5 秒没操作自动收回；再点铅笔就能收起。
+- **调图片框大小**：鼠标滚轮，或触屏双指捏合（以两指中点为中心放大缩小）。
 - **会话没更新**：概览右上「检测」，或设置里会话旁的「刷新」。
 - **清理跟图定位**：图片框 → 更多 →「清空定位」，只清当前会话，之后按比例重新分配。
 

package/docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 更新记录
 
+## 0.2.6
+
+- **单击图片框亮出所有菜单**：在图片上单击一下，四角按钮（固定左侧 / 悬浮左侧 / 右侧栏看图 / 收起）和左下角铅笔展开的那排菜单会一起出现，不用先把鼠标挪到角上。
+  - 亮起来之后，框里只要还有操作（移动、点击、滚轮、捏合、点菜单）就一直续着；**5 秒没有操作自动收回**，回到原来的「鼠标靠近角落才出现」。
+  - 手动再点一下铅笔把菜单关掉会立刻收回，不用等 5 秒。
+  - 双击收起图片框不会先闪一层菜单（第二下点击会撤掉待亮的菜单）。
+- **支持双指捏合缩放**：触屏 / 触控板上两指捏合可以放大缩小图片框（之前只认滚轮）。
+  - 以两指中点为中心缩放，捏合时两指一起移动就跟着平移。
+  - 缩放范围和滚轮完全一致（不会小于 280×360，也不会超出视口）；停靠在左侧时捏合调的是停靠宽度。
+  - 两根手指都在图片框里才接管，框外双指缩放还是缩放页面。
+  - 捏合期间不会误拖动图片框，捏合结束才写本地存储。
+
 ## 0.2.5
 
 - **修「只收到时间戳、正文没跟着来」**：自动投递前先等目标会话空闲（最多 15 秒）。有些宿主（例如带自动续写的 Tavern）会让会话一直有事在跑，这时 `queue` 投递的正文会被排到下一轮，而当前这一轮模型只看到时间上下文注入的那三行。

package/lib/client.js

@@ -221,6 +221,71 @@ window.__ModuleLoader__.load({
 
       function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, Number(v) || 0)); }
 
+      /**
+       * 双指捏合用的框尺寸算法（纯函数，便于离线测试）。
+       * p: { x, y, w, h, anchorX, anchorY } —— 捏合开始时框的视口坐标 + 要钉住的点；
+       * factor: 两指当前距离 / 起始距离；midX/midY: 两指当前中点。
+       * 返回新的 { x, y, w, h, factor }：尺寸按比例缩放后被夹在「不小于 280×360（或视口更小）
+       * 不大于视口」之间，并保证 anchor 在框内的相对位置始终落在 mid 上。
+       */
+      function scaleFrameAround(p, factor, midX, midY, vw, vh) {
+        var baseW = Math.max(1, Number(p && p.w) || 1);
+        var baseH = Math.max(1, Number(p && p.h) || 1);
+        var maxW = Math.max(1, Number(vw) || 1);
+        var maxH = Math.max(1, Number(vh) || 1);
+        var minW = Math.min(280, maxW);
+        var minH = Math.min(360, maxH);
+        var maxF = Math.min(maxW / baseW, maxH / baseH);
+        var minF = Math.min(maxF, Math.max(minW / baseW, minH / baseH));
+        var lo = Math.min(minF, maxF);
+        var hi = Math.max(minF, maxF);
+        var f = Number(factor) || 1;
+        if (f < lo) f = lo;
+        if (f > hi) f = hi;
+        var nw = Math.max(1, baseW * f);
+        var nh = Math.max(1, baseH * f);
+        var rx = Math.max(0, Math.min(1, ((Number(p && p.anchorX) || 0) - (Number(p && p.x) || 0)) / baseW));
+        var ry = Math.max(0, Math.min(1, ((Number(p && p.anchorY) || 0) - (Number(p && p.y) || 0)) / baseH));
+        var nx = (Number(midX) || 0) - rx * nw;
+        var ny = (Number(midY) || 0) - ry * nh;
+        return {
+          factor: f,
+          w: nw,
+          h: nh,
+          x: Math.max(0, Math.min(Math.max(0, maxW - nw), nx)),
+          y: Math.max(0, Math.min(Math.max(0, maxH - nh), ny)),
+        };
+      }
+
+      /**
+       * 双指捏合的一步（纯函数，便于离线测试）。
+       * p 是捏合起点快照：{ dist, midX, midY, w, h, x, y, docked, dockW, dockMax }
+       * a / b 是当前两指的 { clientX, clientY }；dockMin 是停靠最小宽度。
+       * 返回 null（这一步不用动）、{ docked: true, dockW } 或 { docked: false, x, y, w, h, factor }。
+       */
+      function pinchFrameStep(p, a, b, vw, vh, dockMin) {
+        if (!p || !p.active || !a || !b) return null;
+        var dx = a.clientX - b.clientX;
+        var dy = a.clientY - b.clientY;
+        var d = Math.sqrt(dx * dx + dy * dy);
+        if (!(d > 1)) return null;
+        var factor = d / Math.max(1, Number(p.dist) || 1);
+        if (!isFinite(factor) || factor <= 0) return null;
+        if (p.docked) {
+          // 停靠时宽度就是框宽，捏合和滚轮一样调停靠宽度。
+          var lo = Math.max(1, Number(dockMin) || 1);
+          var hi = Math.max(lo, Number(p.dockMax) || 0);
+          return {
+            docked: true,
+            dockW: Math.max(lo, Math.min(hi, Math.round((Number(p.dockW) || 0) * factor))),
+          };
+        }
+        var sc = scaleFrameAround({
+          x: p.x, y: p.y, w: p.w, h: p.h, anchorX: p.midX, anchorY: p.midY,
+        }, factor, (a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2, vw, vh);
+        return { docked: false, x: sc.x, y: sc.y, w: sc.w, h: sc.h, factor: sc.factor };
+      }
+
       /**
        * 自动补图的全局状态：逻辑在 FloatBall 里跑（它一直在，负责检测纯黑图），
        * 但「停止」按钮要能出现在右侧栏面板里，所以两边共享这一份。
@@ -1375,6 +1440,8 @@ window.__ModuleLoader__.load({
         var [followOn, setFollowOn] = useState(function () { return prefs.follow !== false; });
         var [pointerFollow, setPointerFollow] = useState(function () { return prefs.pointerFollow === true; });
         var [dragging, setDragging] = useState(false);
+        // 单击图片框临时亮起所有菜单（四角按钮 + 铅笔菜单），到点自动收回。
+        var [peek, setPeek] = useState(false);
         var [menuClipped, setMenuClipped] = useState(false);
         var [subPos, setSubPos] = useState(null);
         var [recycleBusy, setRecycleBusy] = useState(false);
@@ -1383,6 +1450,13 @@ window.__ModuleLoader__.load({
         var blRef = useRef(null);
         var menuRef = useRef(null);
         var moreRef = useRef(null);
+        // 单击亮菜单的计时器 / 是否处于亮菜单状态 / 这次按下是不是落在菜单按钮上。
+        var peekRef = useRef(false);
+        var peekTimer = useRef(null);
+        var peekDelay = useRef(null);
+        var uiDownRef = useRef(false);
+        // 双指捏合：开始时的两指距离、中点、框尺寸都记下来，移动时按比例算绝对值，避免累积误差。
+        var pinchRef = useRef({ active: false });
         var wheelTimer = useRef(null);
         var dockDrag = useRef(null);
         var reserveDrag = useRef(null);
@@ -1540,6 +1614,47 @@ window.__ModuleLoader__.load({
         var persistPrefs = function () {
           setPrefs(function (old) { saveFloatPrefs(old); return old; });
         };
+
+        /* ---------------------------------------------------------------
+         * 单击图片框：把四角按钮和铅笔菜单一起亮出来，5 秒内框里没操作就收回。
+         * 全部走 peekRef + 定时器，不依赖重渲染时序，所以连续点 / 拖 / 滚轮都不会串。
+         * ------------------------------------------------------------- */
+        var PEEK_MS = 5000;
+        // 亮菜单稍微等一下：双击收框时不会被第一下点击先闪出一层菜单。
+        var PEEK_DELAY_MS = 240;
+        var clearPeekTimer = function () {
+          if (peekTimer.current) { clearTimeout(peekTimer.current); peekTimer.current = null; }
+          if (peekDelay.current) { clearTimeout(peekDelay.current); peekDelay.current = null; }
+        };
+        var endPeek = function () {
+          clearPeekTimer();
+          if (!peekRef.current) return;
+          peekRef.current = false;
+          setPeek(false);
+          setMenuOpen(false);
+          setSubOpen(false);
+          setRegenOpen(false);
+        };
+        var bumpPeek = function () {
+          if (!peekRef.current) return;
+          clearPeekTimer();
+          peekTimer.current = setTimeout(endPeek, PEEK_MS);
+        };
+        var startPeek = function () {
+          if (peekRef.current) { bumpPeek(); return; }
+          // 已经有一次点击在等：这是双击收框的前半截，直接撤掉，别让菜单闪一下。
+          if (peekDelay.current) { clearPeekTimer(); return; }
+          clearPeekTimer();
+          peekDelay.current = setTimeout(function () {
+            peekDelay.current = null;
+            peekRef.current = true;
+            setPeek(true);
+            setMenuOpen(true);
+            setSubOpen(false);
+            setRegenOpen(false);
+            bumpPeek();
+          }, PEEK_DELAY_MS);
+        };
         var showToast = function (text, tone) {
           var id = (toastSeq.current += 1);
           setToasts(function (old) {
@@ -3187,6 +3302,7 @@ window.__ModuleLoader__.load({
             if (ev.clientX < r.left || ev.clientX > r.right || ev.clientY < r.top || ev.clientY > r.bottom) return;
             var overDockGrip = !!(ev.target && ev.target.closest && ev.target.closest(".ac-dockgrip"));
             if (!overDockGrip && ev.target && ev.target.closest && ev.target.closest("[data-ui]")) return;
+            bumpPeek();
             ev.preventDefault();
             var ds = dockStateRef.current;
             if (ds.docked) {
@@ -3250,6 +3366,115 @@ window.__ModuleLoader__.load({
           };
         }, []);
 
+        // 双指捏合缩放：和滚轮走同一条改框尺寸的路径，只是锚点换成两指中点，
+        // 顺带支持捏合时两指一起平移。挂在 window 上（和滚轮一致），
+        // 切会话 / 重挂图片框都不会丢监听。
+        useEffect(function () {
+          if (typeof window === "undefined" || typeof window.addEventListener !== "function") return undefined;
+          var dist2 = function (a, b) {
+            var dx = a.clientX - b.clientX;
+            var dy = a.clientY - b.clientY;
+            return Math.sqrt(dx * dx + dy * dy);
+          };
+          var mid2 = function (a, b) {
+            return { x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 };
+          };
+          var onTouchStart = function (ev) {
+            if (!openRef.current || hiddenRef.current) return;
+            // 单指还是原来的拖动；只有两根手指落在框里才当成捏合。
+            if (!ev.touches || ev.touches.length !== 2) return;
+            var el = frameRef.current;
+            if (!el || !el.getBoundingClientRect) return;
+            var r = el.getBoundingClientRect();
+            if (!r.width || !r.height) return;
+            var a = ev.touches[0];
+            var b = ev.touches[1];
+            var inside = function (p) {
+              return p.clientX >= r.left && p.clientX <= r.right
+                && p.clientY >= r.top && p.clientY <= r.bottom;
+            };
+            // 两指都在框里才接管；在框外双指缩放还能正常缩页面。
+            if (!inside(a) || !inside(b)) return;
+            if (ev.target && ev.target.closest && ev.target.closest("[data-ui]")) return;
+            var d = dist2(a, b);
+            if (!(d > 8)) return;
+            // 捏合一开始就掐掉单指拖动，别让框跟着其中一根手指跑。
+            if (dragRaf.current) { caf(dragRaf.current); dragRaf.current = 0; }
+            dragPending.current = null;
+            dragRef.current = null;
+            setDragging(false);
+            var ds = dockStateRef.current;
+            var dr = ds.dockRect;
+            var dm = dr ? Math.max(DOCK_MIN, Math.min(920, dr.width - DOCK_MIN_CHAT - DOCK_GAP)) : DOCK_MIN;
+            var mid = mid2(a, b);
+            pinchRef.current = {
+              active: true,
+              dist: d,
+              midX: mid.x,
+              midY: mid.y,
+              w: r.width,
+              h: r.height,
+              x: r.left,
+              y: r.top,
+              docked: !!ds.docked,
+              dockW: Number(ds.dockW) || 0,
+              dockMax: dm,
+            };
+            bumpPeek();
+          };
+          var onTouchMove = function (ev) {
+            var p = pinchRef.current;
+            if (!p || !p.active) return;
+            if (!ev.touches || ev.touches.length !== 2) return;
+            var a = ev.touches[0];
+            var b = ev.touches[1];
+            var s = vp();
+            var step = pinchFrameStep(p, a, b, s.w, s.h, DOCK_MIN);
+            if (!step) return;
+            // 双指手势到这一步还没被浏览器拿走，说明它归我们，先掐掉页面缩放 / 滚动。
+            ev.preventDefault();
+            if (step.docked) {
+              if (step.dockW !== dockStateRef.current.dockW) setFrame({ dockW: step.dockW }, false);
+            } else {
+              if (Math.abs(step.factor - 1) < 0.002) return;
+              setFrame({
+                x: step.x,
+                y: step.y,
+                w: step.w, h: step.h,
+                // 和滚轮一致：空白框也记住这个大小，用户自己定过尺寸后切图不再回退。
+                emptyW: step.w,
+                emptyH: step.h,
+                userSized: true,
+              }, false);
+            }
+            bumpPeek();
+          };
+          var onTouchEnd = function (ev) {
+            var p = pinchRef.current;
+            if (!p || !p.active) return;
+            if (ev.touches && ev.touches.length >= 2) return;
+            pinchRef.current = { active: false };
+            // 捏合收尾后浏览器常补一个 click，别让它再触发「单击亮菜单」。
+            suppressClick.current = Date.now();
+            persistPrefs();
+          };
+          try {
+            window.addEventListener("touchstart", onTouchStart, { passive: false });
+            window.addEventListener("touchmove", onTouchMove, { passive: false });
+            window.addEventListener("touchend", onTouchEnd, { passive: false });
+            window.addEventListener("touchcancel", onTouchEnd, { passive: false });
+          } catch (e) { /* 老浏览器不支持 passive 选项就退化成默认 */ }
+          return function () {
+            pinchRef.current = { active: false };
+            try {
+              window.removeEventListener("touchstart", onTouchStart);
+              window.removeEventListener("touchmove", onTouchMove);
+              window.removeEventListener("touchend", onTouchEnd);
+              window.removeEventListener("touchcancel", onTouchEnd);
+            } catch (e) { /* ignore */ }
+          };
+        }, []);
+
         useEffect(function () {
           if (!menuOpen) { setMenuClipped(false); return undefined; }
           var el = menuRef.current;
@@ -3298,6 +3523,7 @@ window.__ModuleLoader__.load({
           var ny = clamp(by + BALL_HALF - fh + COLLAPSE, 0, Math.max(0, s.h - fh));
           setFrame({ x: nx, y: ny, w: fw, h: fh }, true);
           setPref({ open: true });
+          endPeek();
           setMenuOpen(false);
           setSubOpen(false);
           setNearAny(false);
@@ -3320,6 +3546,7 @@ window.__ModuleLoader__.load({
           }, true);
           setPref({ open: false, dock: "", reserve: "" });
           if (reserved) restoreReserveFrame();
+          endPeek();
           setMenuOpen(false);
           setSubOpen(false);
           setNearAny(false);
@@ -3339,7 +3566,17 @@ window.__ModuleLoader__.load({
         var onFrameDown = function (e) {
           if (dockTimer.current) { clearTimeout(dockTimer.current); dockTimer.current = null; }
           if (e.button !== undefined && e.button !== 0) return;
-          if (e.target && e.target.closest && e.target.closest("[data-ui]")) return;
+          // 捏合中的第二根手指不参与拖动；非触屏按下（说明捏合早就该结束了）顺手复位，
+          // 免得一次没收尾的捏合把后面的拖动 / 单击全卡住。
+          if (pinchRef.current.active) {
+            if (e.pointerType === "touch" && !e.isPrimary) return;
+            pinchRef.current = { active: false };
+          }
+          // 记下这次按下的起点是不是菜单按钮：落在菜单上就不算「单击图片框」。
+          var onUi = !!(e.target && e.target.closest && e.target.closest("[data-ui]"));
+          uiDownRef.current = onUi;
+          bumpPeek();
+          if (onUi) return;
           e.preventDefault();
           try { e.currentTarget.setPointerCapture(e.pointerId); } catch (e2) { /* ignore */ }
           if (dockedActive) {
@@ -3367,6 +3604,7 @@ window.__ModuleLoader__.load({
         var onMove = function (e) {
           var d = dragRef.current;
           if (!d) return;
+          if (pinchRef.current.active) return;
           var dx = e.clientX - d.sx;
           var dy = e.clientY - d.sy;
           if (Math.abs(dx) > 3 || Math.abs(dy) > 3) d.moved = true;
@@ -3407,6 +3645,12 @@ window.__ModuleLoader__.load({
           if (!d) return;
           dragRef.current = null;
           setDragging(false);
+          // 单击（按下后没拖动、不是捏合、不是点在菜单按钮上）= 短暂亮出所有菜单。
+          // 放在 pointerup 上而不是 click：触屏上 pointerdown 被 preventDefault 后
+          // click 不一定还来，pointerup 一定来。
+          if (!d.moved && d.kind === "frame" && !uiDownRef.current && !pinchRef.current.active) {
+            startPeek();
+          }
           if (d.moved) {
             suppressClick.current = Date.now();
             persistPrefs();
@@ -3434,6 +3678,7 @@ window.__ModuleLoader__.load({
           }
         };
         var onFrameMove = function (e) {
+          bumpPeek();
           if (dragRef.current) return;
           var r = e.currentTarget.getBoundingClientRect();
           var x = e.clientX - r.left;
@@ -3523,6 +3768,7 @@ window.__ModuleLoader__.load({
         useEffect(function () {
           return function () {
             if (dockTimer.current) { clearTimeout(dockTimer.current); dockTimer.current = null; }
+            clearPeekTimer();
           };
         }, []);
 
@@ -4298,10 +4544,11 @@ window.__ModuleLoader__.load({
           setFrame({ reserveW: d.last }, true);
         };
 
-        var showBL = nearAny || menuOpen;
-        var showBR = nearAny || nearBR;
-        var showTR = nearAny;
-        var showTL = nearAny;
+        // peek 期间四角一起亮：单击图片框就能看到所有入口，不用先把鼠标挪到角上。
+        var showBL = nearAny || menuOpen || peek;
+        var showBR = nearAny || nearBR || peek;
+        var showTR = nearAny || peek;
+        var showTL = nearAny || peek;
         var openSidebarFull = function () {
           var shown = view || img || null;
           var id = shown && shown.id ? String(shown.id) : "";
@@ -4509,7 +4756,7 @@ window.__ModuleLoader__.load({
               hasImage: !!img,
               regenOpen: regenOpen,
               regenText: regenText,
-              onToggleRegen: function () { setSubOpen(false); setRegenOpen(function (v) { return !v; }); },
+              onToggleRegen: function () { setSubOpen(false); setRegenOpen(function (v) { return !v; }); bumpPeek(); },
               onRegenText: setRegenText,
               onRegenSingle: function () { runRegenFor(img, "single"); },
               onRegenAll: function () { runRegenFor(img, "all"); },
@@ -4532,12 +4779,15 @@ window.__ModuleLoader__.load({
               menuRef: menuRef,
               moreRef: moreRef,
               onToggleMenu: function () {
-                setMenuOpen(function (v) {
-                  if (v) { setSubOpen(false); setRegenOpen(false); }
-                  return !v;
-                });
+                var next = !menuOpen;
+                setSubOpen(false);
+                setRegenOpen(false);
+                setMenuOpen(next);
+                // 手动把菜单关掉 = 立刻收手，不等 5 秒；开着就继续续命。
+                if (!next) endPeek();
+                else bumpPeek();
               },
-              onToggleSub: function () { setSubPos(null); setRegenOpen(false); setSubOpen(function (v) { return !v; }); },
+              onToggleSub: function () { setSubPos(null); setRegenOpen(false); setSubOpen(function (v) { return !v; }); bumpPeek(); },
               onCapture: captureCurrent,
               onStop: stopJob,
               onContinuous: toggleContinuous,

package/lib/meta.js

@@ -6,7 +6,7 @@
  */
 export const PACKAGE_NAME = 'dsh-comfyui-rp';
 export const PLUGIN_NAME = 'dsh-comfyui-rp';
-export const VERSION = '0.2.5';
+export const VERSION = '0.2.6';
 
 /** 对外路由前缀。不能带尾斜杠（dsh-host-webserver 的 prefix 匹配规则）。 */
 export const ROUTE_PATH = '/__airp_comfy';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-comfyui-rp",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "ComfyRP Bridge：装在 DSH 里的本地文生图自动化桥。捕获会话正文 → 提示词会话 → 本地 ComfyUI 出图 → 图片回到右侧栏 / 悬浮球 / 图库。不依赖外部桥进程，也不调用 LLM。",
   "type": "module",
   "main": "lib/index.js",