@ai-game-assets/phaser 0.5.5 → 0.6.0

package/dist/designer-support.js

@@ -126,7 +126,12 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     currentTouchUpButton.className = "ai-game-assets-designer__animate-button";
     currentTouchUpButton.textContent = "Touch up...";
     currentTouchUpButton.hidden = true;
-    currentPreview.append(currentImage, currentAudio, currentAnimation, currentAnimationButton, currentTouchUpButton);
+    const currentRevertButton = document.createElement("button");
+    currentRevertButton.type = "button";
+    currentRevertButton.className = "ai-game-assets-designer__animate-button";
+    currentRevertButton.textContent = "Revert preview";
+    currentRevertButton.hidden = true;
+    currentPreview.append(currentImage, currentAudio, currentAnimation, currentAnimationButton, currentTouchUpButton, currentRevertButton);
     const regenerateButton = document.createElement("button");
     regenerateButton.type = "button";
     regenerateButton.textContent = "Regenerate";
@@ -161,6 +166,7 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         root,
         toggle,
         panel,
+        title,
         styleButton,
         assetSelect,
         assetBrowser,
@@ -189,6 +195,7 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         currentAudio,
         currentAnimation,
         currentAnimationButton,
+        currentRevertButton,
         currentTouchUpButton,
         currentPreview,
         uploadButton,
@@ -214,7 +221,7 @@ export function renderAssetFolderBrowser(options) {
     const storedPathValue = options.container.getAttribute("data-path");
     const storedPath = storedPathValue !== null
         ? storedPathValue.split("/").filter(Boolean)
-        : selectedPath;
+        : [];
     const currentPath = pathHasAnyAsset(storedPath, assetPathEntries)
         ? storedPath
         : selectedPath;
@@ -390,7 +397,7 @@ export function renderOptions(options) {
                     element: animationStage,
                     src: option.dataUrl,
                     asset: optionAsset,
-                    displaySize: resolvePreviewDisplaySize(options.designerOptions, options.assetId, optionAsset),
+                    displaySize: { width: 68, height: 68 },
                     applyFrameTransforms: false
                 });
             });
@@ -473,7 +480,6 @@ export async function uploadedOptionFromFile(options) {
         model: "uploaded",
         dimensions: geometry.dimensions,
         frameGrid: geometry.frameGrid,
-        animations: options.asset.animations,
         settings: {
             ...options.asset.settings,
             format: normalizeAssetFormatFromMimeType(mimeType, options.file.name)
@@ -575,6 +581,13 @@ export async function spriteSheetFrameToDataUrl(options) {
 export function isSvgSource(src) {
     return src.startsWith("data:image/svg+xml") || /\.svg(?:$|\?)/i.test(src);
 }
+const frameTouchUpPreferences = {
+    alpha: 255,
+    antiAlias: true,
+    brushSize: 4,
+    color: "#f8fafc",
+    tool: "brush"
+};
 export async function openFrameTouchUpEditor(options) {
     const sourceImage = await loadImageElement(options.frameSrc);
     const dialog = document.createElement("div");
@@ -616,7 +629,7 @@ export async function openFrameTouchUpEditor(options) {
     brushSizeInput.min = "1";
     brushSizeInput.max = "32";
     brushSizeInput.step = "1";
-    brushSizeInput.value = "4";
+    brushSizeInput.value = String(frameTouchUpPreferences.brushSize);
     const brushSizeValue = document.createElement("span");
     brushSizeValue.textContent = brushSizeInput.value;
     const brushSizeField = document.createElement("label");
@@ -624,7 +637,7 @@ export async function openFrameTouchUpEditor(options) {
     brushSizeField.append("Size", brushSizeInput, brushSizeValue);
     const antiAliasInput = document.createElement("input");
     antiAliasInput.type = "checkbox";
-    antiAliasInput.checked = true;
+    antiAliasInput.checked = frameTouchUpPreferences.antiAlias;
     const antiAliasField = document.createElement("label");
     antiAliasField.className = "ai-game-assets-designer__inline-checkbox";
     antiAliasField.append(antiAliasInput, "Anti-aliased round tip");
@@ -640,14 +653,14 @@ export async function openFrameTouchUpEditor(options) {
     saveButton.classList.add("is-primary");
     const colorInput = document.createElement("input");
     colorInput.type = "color";
-    colorInput.value = "#f8fafc";
+    colorInput.value = frameTouchUpPreferences.color;
     colorInput.setAttribute("aria-label", "Brush color");
     const alphaInput = document.createElement("input");
     alphaInput.type = "number";
     alphaInput.min = "0";
     alphaInput.max = "255";
     alphaInput.step = "1";
-    alphaInput.value = "255";
+    alphaInput.value = String(frameTouchUpPreferences.alpha);
     alphaInput.setAttribute("aria-label", "Alpha");
     const rgbaLabel = document.createElement("label");
     rgbaLabel.className = "ai-game-assets-designer__touchup-color";
@@ -699,9 +712,10 @@ export async function openFrameTouchUpEditor(options) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);
     let zoom = Math.max(1, Math.floor(Math.min(8, 480 / Math.max(canvas.width, canvas.height))));
-    let tool = "brush";
+    let tool = frameTouchUpPreferences.tool;
     let dirty = false;
     let drawing = false;
+    let drawingPointerId;
     let selectionStart;
     let selection;
     let animationTimeout;
@@ -751,6 +765,11 @@ export async function openFrameTouchUpEditor(options) {
         }[tool];
         activeButton.classList.add("is-active");
     };
+    const selectTool = (nextTool) => {
+        tool = nextTool;
+        frameTouchUpPreferences.tool = nextTool;
+        updateToolButtons();
+    };
     const updateUndoRedo = () => {
         undoButton.disabled = undoStack.length === 0;
         redoButton.disabled = redoStack.length === 0;
@@ -769,6 +788,22 @@ export async function openFrameTouchUpEditor(options) {
         redrawEditor();
         setDirty(true);
     };
+    const undo = () => {
+        const previous = undoStack.pop();
+        if (!previous)
+            return;
+        redoStack.push(snapshot());
+        restore(previous);
+        updateUndoRedo();
+    };
+    const redo = () => {
+        const next = redoStack.pop();
+        if (!next)
+            return;
+        undoStack.push(snapshot());
+        restore(next);
+        updateUndoRedo();
+    };
     const syncSelectionBox = () => {
         if (!selection) {
             selectionBox.hidden = true;
@@ -913,6 +948,8 @@ export async function openFrameTouchUpEditor(options) {
         const data = context.getImageData(point.x, point.y, 1, 1).data;
         colorInput.value = `#${hexByte(data[0])}${hexByte(data[1])}${hexByte(data[2])}`;
         alphaInput.value = String(data[3]);
+        frameTouchUpPreferences.color = colorInput.value;
+        frameTouchUpPreferences.alpha = data[3];
     };
     const fillAt = (point) => {
         const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
@@ -1020,7 +1057,10 @@ export async function openFrameTouchUpEditor(options) {
         disposed = true;
         if (animationTimeout !== undefined)
             window.clearTimeout(animationTimeout);
-        window.removeEventListener("keydown", keyHandler);
+        window.removeEventListener("keydown", keyHandler, true);
+        window.removeEventListener("pointerup", finishPointer, true);
+        window.removeEventListener("pointercancel", finishPointer, true);
+        window.removeEventListener("blur", cancelDrawing);
         document.removeEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
         dialog.remove();
     };
@@ -1032,33 +1072,55 @@ export async function openFrameTouchUpEditor(options) {
     const keyHandler = (event) => {
         if (!dialog.isConnected)
             return;
+        const key = event.key.toLowerCase();
+        const commandModifier = event.metaKey || event.ctrlKey;
+        if (commandModifier && !event.altKey && (key === "z" || key === "y")) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (key === "y" || event.shiftKey) {
+                redo();
+            }
+            else {
+                undo();
+            }
+            return;
+        }
         if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
             requestClose();
             return;
         }
         if (event.key === "Backspace" || event.key === "Delete") {
             event.preventDefault();
+            event.stopPropagation();
             deleteSelection();
             return;
         }
         if (event.key === "ArrowLeft") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(-1, 0);
         }
         else if (event.key === "ArrowRight") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(1, 0);
         }
         else if (event.key === "ArrowUp") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(0, -1);
         }
         else if (event.key === "ArrowDown") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(0, 1);
         }
     };
     canvas.addEventListener("pointerdown", (event) => {
+        if (event.pointerType !== "touch" && event.button !== 0)
+            return;
         if (event.pointerType === "touch") {
             activeTouchPointers.set(event.pointerId, {
                 x: event.clientX,
@@ -1066,6 +1128,7 @@ export async function openFrameTouchUpEditor(options) {
             });
             if (activeTouchPointers.size >= 2) {
                 drawing = false;
+                drawingPointerId = undefined;
                 selectionStart = undefined;
                 pinchStartDistance = touchPointerDistance();
                 pinchStartZoom = zoom;
@@ -1080,6 +1143,7 @@ export async function openFrameTouchUpEditor(options) {
         }
         pushUndo();
         drawing = true;
+        drawingPointerId = event.pointerId;
         canvas.setPointerCapture(event.pointerId);
         if (tool === "select") {
             selectionStart = point;
@@ -1090,6 +1154,7 @@ export async function openFrameTouchUpEditor(options) {
         if (tool === "fill") {
             fillAt(point);
             drawing = false;
+            drawingPointerId = undefined;
             setDirty(true);
             redrawEditor();
             return;
@@ -1112,8 +1177,12 @@ export async function openFrameTouchUpEditor(options) {
                 return;
             }
         }
-        if (!drawing)
+        if (!drawing || drawingPointerId !== event.pointerId)
+            return;
+        if (event.pointerType !== "touch" && (event.buttons & 1) === 0) {
+            finishPointer(event);
             return;
+        }
         const point = canvasPoint(event);
         if (tool === "select" && selectionStart) {
             const x = Math.min(selectionStart.x, point.x);
@@ -1133,7 +1202,7 @@ export async function openFrameTouchUpEditor(options) {
             redrawEditor();
         }
     });
-    const finishPointer = (event) => {
+    function finishPointer(event) {
         if (event.pointerType === "touch") {
             activeTouchPointers.delete(event.pointerId);
             if (activeTouchPointers.size < 2) {
@@ -1144,15 +1213,29 @@ export async function openFrameTouchUpEditor(options) {
                 pinchStartZoom = zoom;
             }
         }
-        drawing = false;
-        selectionStart = undefined;
+        if (drawingPointerId === event.pointerId) {
+            drawing = false;
+            drawingPointerId = undefined;
+            selectionStart = undefined;
+        }
         if (canvas.hasPointerCapture(event.pointerId)) {
             canvas.releasePointerCapture(event.pointerId);
         }
         redrawEditor();
-    };
+    }
+    function cancelDrawing() {
+        drawing = false;
+        drawingPointerId = undefined;
+        selectionStart = undefined;
+        activeTouchPointers.clear();
+        pinchStartDistance = undefined;
+    }
     canvas.addEventListener("pointerup", finishPointer);
     canvas.addEventListener("pointercancel", finishPointer);
+    canvas.addEventListener("lostpointercapture", finishPointer);
+    window.addEventListener("pointerup", finishPointer, true);
+    window.addEventListener("pointercancel", finishPointer, true);
+    window.addEventListener("blur", cancelDrawing);
     canvasWrap.addEventListener("wheel", (event) => {
         if (!event.ctrlKey && !event.metaKey)
             return;
@@ -1171,54 +1254,45 @@ export async function openFrameTouchUpEditor(options) {
         setZoom(zoom + 1);
     });
     brushButton.addEventListener("click", () => {
-        tool = "brush";
-        updateToolButtons();
+        selectTool("brush");
     });
     brushMenuButton.addEventListener("click", () => {
         brushMenu.hidden = !brushMenu.hidden;
     });
     brushSizeInput.addEventListener("input", () => {
         brushSizeValue.textContent = brushSizeInput.value;
+        frameTouchUpPreferences.brushSize = brushSize();
+    });
+    antiAliasInput.addEventListener("change", () => {
+        frameTouchUpPreferences.antiAlias = antiAliasInput.checked;
+    });
+    colorInput.addEventListener("input", () => {
+        frameTouchUpPreferences.color = colorInput.value;
+    });
+    alphaInput.addEventListener("input", () => {
+        frameTouchUpPreferences.alpha = clamp(Math.round(Number(alphaInput.value)), 0, 255);
     });
     document.addEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
     eraserButton.addEventListener("click", () => {
-        tool = "eraser";
-        updateToolButtons();
+        selectTool("eraser");
     });
     pickerButton.addEventListener("click", () => {
-        tool = "picker";
-        updateToolButtons();
+        selectTool("picker");
     });
     selectButton.addEventListener("click", () => {
-        tool = "select";
-        updateToolButtons();
+        selectTool("select");
     });
     fillButton.addEventListener("click", () => {
-        tool = "fill";
-        updateToolButtons();
-    });
-    undoButton.addEventListener("click", () => {
-        const previous = undoStack.pop();
-        if (!previous)
-            return;
-        redoStack.push(snapshot());
-        restore(previous);
-        updateUndoRedo();
-    });
-    redoButton.addEventListener("click", () => {
-        const next = redoStack.pop();
-        if (!next)
-            return;
-        undoStack.push(snapshot());
-        restore(next);
-        updateUndoRedo();
+        selectTool("fill");
     });
+    undoButton.addEventListener("click", undo);
+    redoButton.addEventListener("click", redo);
     saveButton.addEventListener("click", async () => {
         await options.onSave(canvas.toDataURL("image/png"));
         setDirty(false);
         close();
     });
-    window.addEventListener("keydown", keyHandler);
+    window.addEventListener("keydown", keyHandler, true);
     updateZoom();
     updateToolButtons();
     updateUndoRedo();
@@ -1359,6 +1433,14 @@ export function renderAudioPlayer(options) {
             state.frame = window.requestAnimationFrame(tick);
         }
     };
+    const handleEnded = () => {
+        if (!options.playback?.loop || state.disposed) {
+            sync();
+            return;
+        }
+        audio.currentTime = state.trimStart;
+        void audio.play().then(() => tick()).catch(() => sync());
+    };
     playButton.addEventListener("click", async () => {
         if (audio.paused) {
             pauseSiblingAudioPlayers(options.container);
@@ -1393,12 +1475,15 @@ export function renderAudioPlayer(options) {
         state.trimStart = clamp(options.playback?.trimStartSeconds ?? 0, 0, state.duration);
         state.trimEnd = clamp(options.playback?.trimEndSeconds ?? state.duration, state.trimStart, state.duration);
         trimLabel.hidden = state.trimStart === 0 && state.trimEnd === state.duration;
-        trimLabel.textContent = `Trim ${formatAudioTime(state.trimStart)} – ${formatAudioTime(state.trimEnd)}`;
+        trimLabel.textContent = `Trim ${formatAudioTime(state.trimStart, true)} – ${formatAudioTime(state.trimEnd, true)}`;
+        audio.loop = Boolean(options.playback?.loop) &&
+            state.trimStart === 0 &&
+            state.trimEnd >= state.duration - 0.05;
         audio.currentTime = state.trimStart;
         sync();
     });
     audio.addEventListener("timeupdate", sync);
-    audio.addEventListener("ended", sync);
+    audio.addEventListener("ended", handleEnded);
     draw();
     void audioWaveformPeaks(options.src).then((peaks) => {
         if (state.disposed)
@@ -1516,13 +1601,17 @@ export function progressForAudio(audio) {
 export function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
-export function formatAudioTime(value) {
+export function formatAudioTime(value, fractional = false) {
     if (!Number.isFinite(value) || value < 0) {
         return "0:00";
     }
-    const minutes = Math.floor(value / 60);
-    const seconds = Math.floor(value % 60);
-    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+    const precision = fractional ? 2 : 0;
+    const multiplier = 10 ** precision;
+    const roundedValue = Math.round(value * multiplier) / multiplier;
+    const minutes = Math.floor(roundedValue / 60);
+    const seconds = roundedValue % 60;
+    const formattedSeconds = seconds.toFixed(precision).padStart(fractional ? 5 : 2, "0");
+    return `${minutes}:${formattedSeconds}`;
 }
 export function startSpritesheetPreview(options) {
     const frameGrid = options.asset.frameGrid;
@@ -2365,11 +2454,33 @@ export function setFrameBackground(element, options) {
 export function setFrameElementBackground(frameElement, options) {
     const column = options.frame % options.frameGrid.columns;
     const row = Math.floor(options.frame / options.frameGrid.columns);
+    const margin = options.frameGrid.margin ?? 0;
+    const spacing = options.frameGrid.spacing ?? 0;
+    const frameWidth = options.frameGrid.frameWidth;
+    const frameHeight = options.frameGrid.frameHeight;
+    const scale = Math.min(options.displaySize.width / frameWidth, options.displaySize.height / frameHeight);
+    const sheetWidth = (margin * 2) +
+        (options.frameGrid.columns * frameWidth) +
+        (Math.max(0, options.frameGrid.columns - 1) * spacing);
+    const sheetHeight = (margin * 2) +
+        (options.frameGrid.rows * frameHeight) +
+        (Math.max(0, options.frameGrid.rows - 1) * spacing);
+    const sourceX = margin + (column * (frameWidth + spacing));
+    const sourceY = margin + (row * (frameHeight + spacing));
+    const displayFrameWidth = frameWidth * scale;
+    const displayFrameHeight = frameHeight * scale;
+    const frameOffsetX = (options.displaySize.width - displayFrameWidth) / 2;
+    const frameOffsetY = (options.displaySize.height - displayFrameHeight) / 2;
+    frameElement.style.inset = "auto";
+    frameElement.style.left = `${frameOffsetX}px`;
+    frameElement.style.top = `${frameOffsetY}px`;
+    frameElement.style.width = `${displayFrameWidth}px`;
+    frameElement.style.height = `${displayFrameHeight}px`;
     frameElement.style.backgroundImage = `url("${cssUrl(options.src)}")`;
     frameElement.style.backgroundSize =
-        `${options.frameGrid.columns * options.displaySize.width}px ${options.frameGrid.rows * options.displaySize.height}px`;
+        `${sheetWidth * scale}px ${sheetHeight * scale}px`;
     frameElement.style.backgroundPosition =
-        `${-(column * options.displaySize.width)}px ${-(row * options.displaySize.height)}px`;
+        `${-(sourceX * scale)}px ${-(sourceY * scale)}px`;
 }
 export function ensureFramePreviewElement(element) {
     const existing = element.querySelector(":scope > .ai-game-assets-designer__frame-image");
@@ -2456,16 +2567,28 @@ export function isAudioAsset(asset) {
 export function isVoiceAsset(asset) {
     return asset?.kind === "voice" || asset?.kind === "voice-line";
 }
-export function assetWithGeneratedGeometry(asset, option) {
+export function assetWithGeneratedGeometry(asset, option, options = {}) {
     return {
         ...asset,
         dimensions: option.dimensions ?? asset.dimensions,
         frameGrid: option.frameGrid ?? asset.frameGrid,
-        animations: option.animations ?? asset.animations,
+        animations: option.animations ??
+            (options.inheritAnimations
+                ? asset.animations
+                : candidateAnimationDefinitions(asset, option.frameGrid ?? asset.frameGrid)),
         audioPlayback: option.audioPlayback ?? asset.audioPlayback,
         voiceSettings: option.voiceSettings ?? asset.voiceSettings
     };
 }
+function candidateAnimationDefinitions(asset, frameGrid) {
+    if (!frameGrid || !asset.animations?.length)
+        return undefined;
+    const frameCount = frameGrid.frameCount ?? frameGrid.columns * frameGrid.rows;
+    const frames = Array.from({ length: frameCount }, (_, index) => index);
+    // This is runtime-only playback structure, derived from the candidate's grid.
+    // It deliberately does not copy prompt, timings, tags, or transforms.
+    return asset.animations.map(({ key, frameRate, repeat }) => ({ key, frameRate, repeat, frames }));
+}
 export function positiveIntegerInput(input, fallback) {
     const value = Number(input.value);
     if (!Number.isFinite(value))
@@ -3074,6 +3197,7 @@ export function ensureDesignerStyles() {
   background: transparent;
   display: grid;
   place-items: center;
+  overflow: hidden;
   cursor: pointer;
   color: #dbeafe;
   font: inherit;
@@ -3094,12 +3218,18 @@ export function ensureDesignerStyles() {
   object-fit: contain;
   image-rendering: pixelated;
 }
+.ai-game-assets-designer__option-animation {
+  width: 68px;
+  height: 68px;
+  max-width: 100%;
+}
 .ai-game-assets-designer__option .ai-game-assets-designer__animate-button {
   width: 100%;
 }
 .ai-game-assets-designer__modal {
   position: fixed;
   inset: 0;
+  z-index: 2147483647;
   display: grid;
   place-items: center;
   padding: 18px;
@@ -3231,14 +3361,24 @@ export function ensureDesignerStyles() {
 }
 .ai-game-assets-designer__frame-thumb {
   flex: 0 0 auto;
-  border: 2px solid #384251;
+  border: 0;
   border-radius: 6px;
   background-color: #0f1218;
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }
-.ai-game-assets-designer__frame-thumb.is-selected {
+.ai-game-assets-designer__frame-thumb::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border: 2px solid #384251;
+  border-radius: inherit;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.ai-game-assets-designer__frame-thumb.is-selected::after {
   border-color: #6ed3ff;
 }
 .ai-game-assets-designer__frame-fields {