@dickpy/dsh-imagegen 1.0.4 → 1.0.6

package/lib/index.js

@@ -14,7 +14,7 @@ import { spawn } from "node:child_process";
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 const IMAGEGEN_SETTINGS_NAMESPACE = "dsh-imagegen";
 /** Published package version shared by the host updater and the client UI. */
-const PLUGIN_VERSION = "1.0.4";
+const PLUGIN_VERSION = "1.0.6";
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 const SETTINGS_API = {
 	describe: "/api/dsh-imagegen/settings/describe",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dickpy/dsh-imagegen",
   "description": "AI 生图 (image generation) plugin for the dsh web GUI: text-to-image and image-to-image through a configurable OpenAI-compatible endpoint (gpt-image-2 / gpt-image-1 / dall-e-3), with a settings card for api_url / api_key and a sidebar entry opening a split-pane generation studio.",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/ImageGenPanel.tsx

@@ -147,6 +147,7 @@ export function ImageGenPanel(props: {
   const [updateMessage, setUpdateMessage] = useState<string | null>(null)
   const [updateResult, setUpdateResult] = useState<'success' | 'failed' | null>(null)
   const fileInput = useRef<HTMLInputElement>(null)
+  const previewStage = useRef<HTMLDivElement>(null)
   const elapsed = useElapsed(generating, startedAt)
 
   // Load the host-persisted history once on mount (it lives in ~/.dsh on the
@@ -287,6 +288,19 @@ export function ImageGenPanel(props: {
     return () => window.removeEventListener('keydown', onKey)
   }, [preview])
 
+  // A scaled image owns real scrollable space, rather than being visually
+  // transformed and clipped. Recenter the viewport after every zoom or slide.
+  useEffect(() => {
+    if (preview === null) return
+    const frame = window.requestAnimationFrame(() => {
+      const stage = previewStage.current
+      if (stage === null) return
+      stage.scrollLeft = Math.max(0, (stage.scrollWidth - stage.clientWidth) / 2)
+      stage.scrollTop = Math.max(0, (stage.scrollHeight - stage.clientHeight) / 2)
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [preview, previewScale])
+
   /** Load a past generation's images into the canvas. */
   const viewHistoryEntry = async (entry: HistoryEntry): Promise<void> => {
     try {
@@ -343,6 +357,8 @@ export function ImageGenPanel(props: {
   const generateDisabled = generating || !enabled || !configured
   const viewingEntry = viewingHistoryId === null ? null : history.find(entry => entry.id === viewingHistoryId) ?? null
   const previewImage = preview === null ? null : preview.images[preview.index] ?? null
+  const previewFrameScale = Math.max(1, previewScale)
+  const previewImageScale = previewScale / previewFrameScale
 
   const copyPreviewPrompt = async (text: string): Promise<void> => {
     try {
@@ -750,18 +766,24 @@ export function ImageGenPanel(props: {
             ) : null}
             <figure className={css.lightboxFigure} onClick={(event) => { event.stopPropagation() }}>
               <div
+                ref={previewStage}
                 className={css.lightboxStage}
                 onWheel={(event) => {
                   event.preventDefault()
                   setPreviewScale(current => clampPreviewScale(current + (event.deltaY < 0 ? PREVIEW_SCALE_STEP : -PREVIEW_SCALE_STEP)))
                 }}
               >
-                <img
-                  className={css.lightboxImage}
-                  style={{ transform: `scale(${previewScale})` }}
-                  src={srcOf(previewImage)}
-                  alt={previewImage.revisedPrompt ?? tt('preview.title')}
-                />
+                <div
+                  className={css.lightboxScaleFrame}
+                  style={{ width: `${previewFrameScale * 100}%`, height: `${previewFrameScale * 100}%` }}
+                >
+                  <img
+                    className={css.lightboxImage}
+                    style={{ width: `${previewImageScale * 100}%`, height: `${previewImageScale * 100}%` }}
+                    src={srcOf(previewImage)}
+                    alt={previewImage.revisedPrompt ?? tt('preview.title')}
+                  />
+                </div>
               </div>
               <div className={css.lightboxTools} role="group" aria-label={tt('preview.zoomControls')}>
                 <button type="button" className={css.lightboxTool} aria-label={tt('preview.zoomOut')} title={tt('preview.zoomOut')} onClick={() => { setPreviewScale(current => clampPreviewScale(current - PREVIEW_SCALE_STEP)) }}>

package/src/client/panel.module.css

@@ -801,26 +801,12 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   flex: 1;
   min-height: 0;
   gap: 14px;
-}
-
-.grid[data-count='1'] {
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.grid[data-count='2'] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.grid[data-count='3'] {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
-.grid[data-count='4'] {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: repeat(2, minmax(0, 1fr));
+.grid[data-count='1'] .imageCard {
+  grid-area: 1 / 1 / 3 / 3;
 }
 
 .imageCard {
@@ -846,7 +832,7 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   flex: 1;
   min-height: 0;
   width: 100%;
-  object-fit: contain;
+  object-fit: cover;
   background: var(--dsw-alias-bg-base);
 }
 
@@ -1014,20 +1000,27 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 .lightboxStage {
   flex: 1;
   min-height: 0;
-  display: grid;
-  place-items: center;
+  position: relative;
   overflow: auto;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.04);
 }
 
+.lightboxScaleFrame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100%;
+  min-height: 100%;
+}
+
 .lightboxImage {
-  max-width: calc(100% - 4px);
-  max-height: calc(100% - 4px);
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
   border-radius: 10px;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
-  transition: transform 120ms ease;
 }
 
 .lightboxTools {

package/src/protocol.ts

@@ -8,7 +8,7 @@
 export const IMAGEGEN_SETTINGS_NAMESPACE = 'dsh-imagegen'
 
 /** Published package version shared by the host updater and the client UI. */
-export const PLUGIN_VERSION = '1.0.4'
+export const PLUGIN_VERSION = '1.0.6'
 
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 export const SETTINGS_API = {