1048 lines
43 KiB
JavaScript
1048 lines
43 KiB
JavaScript
import { announce, apiJson, registerWorkspace } from "../core.js";
|
|
import {
|
|
animationEditState,
|
|
enterAnimationEdit,
|
|
getScene,
|
|
leaveAnimationEdit,
|
|
markAnimationFrameSaved,
|
|
registerSceneReplacementGuard,
|
|
syncAnimationEditMetadata,
|
|
} from "../scene-board.js";
|
|
import { sceneToStorageValue } from "../scene-model.js";
|
|
import {
|
|
animationEditContextName,
|
|
effectiveFrameName,
|
|
formatFrameDuration,
|
|
reorderSelectedFrameIds,
|
|
validateFrameDuration,
|
|
} from "../animation-ui-model.js";
|
|
import {
|
|
createAnimationPreviewGroup,
|
|
createAnimationThumbnailBox,
|
|
} from "../animation-thumbnail-preview.js";
|
|
import { protectCardDragStart } from "../sortable-card.js";
|
|
import { renderUiCopy } from "../ui-copy-runtime.js";
|
|
import { refreshStatus } from "./device.js";
|
|
import {
|
|
setControlBusy,
|
|
setControlReady,
|
|
setControlUnavailable,
|
|
} from "../interaction-feedback.js";
|
|
|
|
const folders = document.getElementById("animation-folders");
|
|
const frames = document.getElementById("animation-frames");
|
|
const framePanel = document.getElementById("animation-frame-panel");
|
|
const frameTitle = document.getElementById("animation-frame-title");
|
|
const feedback = document.getElementById("animation-feedback");
|
|
const createButton = document.getElementById("create-animation");
|
|
const addFrameButton = document.getElementById("add-animation-frame");
|
|
const refreshButton = document.getElementById("refresh-animations");
|
|
const previewImage = document.getElementById("animation-preview-image");
|
|
const previewPlaceholder = document.getElementById("animation-preview-placeholder");
|
|
const previewStatus = document.getElementById("animation-preview-status");
|
|
const nameDialog = document.getElementById("template-name-dialog");
|
|
const nameDialogTitle = document.getElementById("template-dialog-title");
|
|
const nameDialogNote = document.getElementById("template-dialog-note");
|
|
const nameInput = document.getElementById("template-name-input");
|
|
const dirtyDialog = document.getElementById("animation-dirty-dialog");
|
|
const dirtyMessage = document.getElementById("animation-dirty-message");
|
|
const copyDialog = document.getElementById("library-copy-dialog");
|
|
const copyTarget = document.getElementById("library-copy-target");
|
|
const boardShell = document.getElementById("board-shell");
|
|
const selectionStatus = document.getElementById("animation-selection-status");
|
|
const batchCopyButton = document.getElementById("animation-batch-copy");
|
|
const batchMoveButton = document.getElementById("animation-batch-move");
|
|
const batchDeleteButton = document.getElementById("animation-batch-delete");
|
|
const operationDialog = document.getElementById("animation-operation-dialog");
|
|
const operationTitle = document.getElementById("animation-operation-title");
|
|
const operationMessage = document.getElementById("animation-operation-message");
|
|
const operationConfirm = document.getElementById("animation-operation-confirm");
|
|
const copyDestinationDialog = document.getElementById("animation-copy-destination-dialog");
|
|
const copyDestination = document.getElementById("animation-copy-destination");
|
|
const positionDialog = document.getElementById("animation-position-dialog");
|
|
const positionTitle = document.getElementById("animation-position-title");
|
|
const positionHint = document.getElementById("animation-position-hint");
|
|
const positionTarget = document.getElementById("animation-position-target");
|
|
const framePagination = document.getElementById("animation-frame-pagination");
|
|
const pagePrevious = document.getElementById("animation-page-prev");
|
|
const pageNext = document.getElementById("animation-page-next");
|
|
const pageStatus = document.getElementById("animation-page-status");
|
|
|
|
const SELECTION_LOCK_MESSAGE = "请先完成批量操作或取消全部勾选。";
|
|
const NO_SELECTION_MESSAGE = "请先勾选至少一帧。";
|
|
const FRAME_PAGE_SIZE = 100;
|
|
|
|
let list = [];
|
|
let current = null;
|
|
let busy = false;
|
|
let workspaceActive = false;
|
|
let frameOffset = 0;
|
|
const selectedFrameIds = new Set();
|
|
const durationUnits = new Map();
|
|
const folderPreviewGroup = createAnimationPreviewGroup();
|
|
const currentPreviewGroup = createAnimationPreviewGroup();
|
|
|
|
function askName(title, initial = "", { allowEmpty = false } = {}) {
|
|
nameDialogTitle.textContent = title;
|
|
nameDialogNote.textContent = "";
|
|
nameDialogNote.hidden = true;
|
|
nameInput.value = initial;
|
|
nameInput.required = !allowEmpty;
|
|
nameDialog.returnValue = "";
|
|
nameDialog.showModal();
|
|
setTimeout(() => { nameInput.focus(); nameInput.select(); }, 0);
|
|
return new Promise((resolve) => nameDialog.addEventListener("close", () => {
|
|
resolve(nameDialog.returnValue === "save" ? nameInput.value.trim() : null);
|
|
}, { once: true }));
|
|
}
|
|
|
|
function dirtyChoice() {
|
|
const state = animationEditState();
|
|
const displayName = state
|
|
? animationEditContextName(state.animationName, { name: state.frameName }, state.position)
|
|
: "当前动图帧";
|
|
dirtyMessage.textContent = `“${displayName}”有未保存修改。是否应用当前修改到动图？`;
|
|
dirtyDialog.returnValue = "";
|
|
dirtyDialog.showModal();
|
|
return new Promise((resolve) => dirtyDialog.addEventListener("close", () => {
|
|
resolve(dirtyDialog.returnValue || "cancel");
|
|
}, { once: true }));
|
|
}
|
|
|
|
function confirmAnimationOperation(title, message, confirmLabel = "确认") {
|
|
operationTitle.textContent = title;
|
|
operationMessage.textContent = message;
|
|
operationConfirm.textContent = confirmLabel;
|
|
operationDialog.returnValue = "";
|
|
operationDialog.showModal();
|
|
return new Promise((resolve) => operationDialog.addEventListener("close", () => {
|
|
resolve(operationDialog.returnValue === "confirm");
|
|
}, { once: true }));
|
|
}
|
|
|
|
async function chooseCopyDestination(animations) {
|
|
copyDestination.replaceChildren(...animations.map((animation) => (
|
|
new Option(animation.name, animation.id)
|
|
)));
|
|
if (!animations.length) return null;
|
|
copyDestinationDialog.returnValue = "";
|
|
copyDestinationDialog.showModal();
|
|
await new Promise((resolve) => copyDestinationDialog.addEventListener("close", resolve, { once: true }));
|
|
if (copyDestinationDialog.returnValue !== "next") return null;
|
|
return animations.find((animation) => animation.id === copyDestination.value) || null;
|
|
}
|
|
|
|
async function chooseInsertionPosition(
|
|
animation,
|
|
{ disabledIds = new Set(), title = "选择插入位置", copyMode = false } = {},
|
|
) {
|
|
positionTitle.textContent = title;
|
|
positionHint.textContent = copyMode
|
|
? "选择目标帧后，复制的帧将按当前顺序插入到该帧之后；选择“插入到最前”则置于第一帧前。"
|
|
: "选择目标帧后，所选帧将按当前顺序插入到该帧之后；选择“插入到最前”则置于第一帧前。";
|
|
const options = [new Option("插入到最前", "")];
|
|
animation.frames.forEach((frame, index) => {
|
|
const disabled = disabledIds.has(frame.id);
|
|
const position = frame.position ?? index + 1;
|
|
const label = `第 ${position} 帧 · ${effectiveFrameName(animation.name, frame, position)}`;
|
|
const option = new Option(disabled ? `${label}（已选择，不可作为移动目标）` : label, frame.id);
|
|
if (disabled) {
|
|
option.setAttribute("disabled", "");
|
|
option.className = "animation-position-disabled";
|
|
}
|
|
options.push(option);
|
|
});
|
|
positionTarget.replaceChildren(...options);
|
|
positionDialog.returnValue = "";
|
|
positionDialog.showModal();
|
|
await new Promise((resolve) => positionDialog.addEventListener("close", resolve, { once: true }));
|
|
if (positionDialog.returnValue !== "confirm") return undefined;
|
|
return positionTarget.value || null;
|
|
}
|
|
|
|
async function resolveDirty() {
|
|
const state = animationEditState();
|
|
if (!state?.dirty) return true;
|
|
const choice = await dirtyChoice();
|
|
if (choice === "cancel") return false;
|
|
if (choice === "save") return saveCurrentFrame();
|
|
return true;
|
|
}
|
|
|
|
export async function resolveAnimationEditBeforeNavigation() {
|
|
if (!animationEditState()) return true;
|
|
if (!await resolveDirty()) return false;
|
|
leaveAnimationEdit();
|
|
return true;
|
|
}
|
|
|
|
function selectionMode() {
|
|
return selectedFrameIds.size > 0;
|
|
}
|
|
|
|
function frameTotal(animation = current) {
|
|
return animation?.frame_total ?? animation?.frame_count ?? 0;
|
|
}
|
|
|
|
function usesPartialFramePage(animation = current) {
|
|
return Boolean(animation && frameTotal(animation) > animation.frames.length);
|
|
}
|
|
|
|
function animationPageUrl(id, offset = frameOffset, limit = FRAME_PAGE_SIZE) {
|
|
const query = new URLSearchParams({ frame_offset: String(offset), frame_limit: String(limit) });
|
|
return `/api/animations/${id}?${query}`;
|
|
}
|
|
|
|
async function loadAnimationPage(id, requestedOffset = frameOffset) {
|
|
const offset = Math.max(0, requestedOffset);
|
|
let detail = await apiJson(animationPageUrl(id, offset));
|
|
if (!detail.frames.length && detail.frame_total > 0 && offset >= detail.frame_total) {
|
|
const lastOffset = Math.floor((detail.frame_total - 1) / FRAME_PAGE_SIZE) * FRAME_PAGE_SIZE;
|
|
detail = await apiJson(animationPageUrl(id, lastOffset));
|
|
}
|
|
frameOffset = detail.frame_offset ?? 0;
|
|
return detail;
|
|
}
|
|
|
|
function renderFramePagination() {
|
|
if (!current) {
|
|
framePagination.hidden = true;
|
|
return;
|
|
}
|
|
const total = frameTotal();
|
|
const pages = Math.max(1, Math.ceil(total / FRAME_PAGE_SIZE));
|
|
const page = Math.min(pages, Math.floor(frameOffset / FRAME_PAGE_SIZE) + 1);
|
|
framePagination.hidden = total <= FRAME_PAGE_SIZE;
|
|
renderUiCopy(
|
|
"copy.dynamic.animation.page_status",
|
|
pageStatus,
|
|
"第 {page} / {pages} 页 · 共 {total} 帧",
|
|
{ page, pages, total },
|
|
);
|
|
if (busy) {
|
|
setControlBusy(pagePrevious);
|
|
setControlBusy(pageNext);
|
|
} else {
|
|
if (frameOffset === 0) setControlUnavailable(pagePrevious, "当前已经是第一页。");
|
|
else setControlReady(pagePrevious);
|
|
if (frameOffset + current.frames.length >= total) setControlUnavailable(pageNext, "当前已经是最后一页。");
|
|
else setControlReady(pageNext);
|
|
}
|
|
}
|
|
|
|
function selectedIdsInFrameOrder() {
|
|
return current ? current.frames.filter((frame) => selectedFrameIds.has(frame.id)).map((frame) => frame.id) : [];
|
|
}
|
|
|
|
function syncToolbarState() {
|
|
const selecting = selectionMode();
|
|
selectionStatus.textContent = selecting ? `已选择 ${selectedFrameIds.size} 帧` : "未选择帧";
|
|
if (busy) return;
|
|
if (selecting) {
|
|
setControlUnavailable(createButton, SELECTION_LOCK_MESSAGE);
|
|
setControlUnavailable(refreshButton, SELECTION_LOCK_MESSAGE);
|
|
setControlUnavailable(addFrameButton, SELECTION_LOCK_MESSAGE);
|
|
setControlReady(batchCopyButton);
|
|
setControlReady(batchMoveButton);
|
|
setControlReady(batchDeleteButton);
|
|
return;
|
|
}
|
|
setControlReady(createButton);
|
|
setControlReady(refreshButton);
|
|
if (current) setControlReady(addFrameButton);
|
|
else setControlUnavailable(addFrameButton, "请先新建或打开一个动图，再把当前画板添加为帧。");
|
|
setControlUnavailable(batchCopyButton, NO_SELECTION_MESSAGE);
|
|
setControlUnavailable(batchMoveButton, NO_SELECTION_MESSAGE);
|
|
setControlUnavailable(batchDeleteButton, NO_SELECTION_MESSAGE);
|
|
}
|
|
|
|
function clearSelection({ render = true } = {}) {
|
|
selectedFrameIds.clear();
|
|
if (render && current) renderFrames();
|
|
if (render) renderFolders();
|
|
syncToolbarState();
|
|
}
|
|
|
|
function retainExistingSelection() {
|
|
const existing = new Set(current?.frames.map((frame) => frame.id) || []);
|
|
for (const frameId of selectedFrameIds) {
|
|
if (!existing.has(frameId)) selectedFrameIds.delete(frameId);
|
|
}
|
|
}
|
|
|
|
function stopAnimationPreview({ clear = false } = {}) {
|
|
currentPreviewGroup.clear();
|
|
if (!clear) return;
|
|
previewImage.hidden = true;
|
|
previewImage.removeAttribute("src");
|
|
previewImage.alt = "";
|
|
previewPlaceholder.hidden = false;
|
|
}
|
|
|
|
function showPreviewPlaceholder(message) {
|
|
stopAnimationPreview({ clear: true });
|
|
previewPlaceholder.textContent = message;
|
|
previewStatus.textContent = message;
|
|
}
|
|
|
|
function startAnimationPreview() {
|
|
stopAnimationPreview();
|
|
if (!workspaceActive || document.visibilityState !== "visible") return;
|
|
if (!current) {
|
|
showPreviewPlaceholder("请先打开一个动图");
|
|
return;
|
|
}
|
|
if (!current.frame_count) {
|
|
showPreviewPlaceholder("当前动图还没有帧");
|
|
return;
|
|
}
|
|
previewImage.src = current.thumbnail_url;
|
|
previewImage.alt = `${current.name} 动图预览`;
|
|
currentPreviewGroup.register({
|
|
animation: current,
|
|
image: previewImage,
|
|
target: previewImage,
|
|
onLoad: () => {
|
|
if (!workspaceActive) return;
|
|
previewImage.hidden = false;
|
|
previewPlaceholder.hidden = true;
|
|
},
|
|
onInitialError: () => {
|
|
if (!workspaceActive) return;
|
|
previewImage.hidden = true;
|
|
previewPlaceholder.hidden = false;
|
|
previewPlaceholder.textContent = "帧预览加载失败";
|
|
previewStatus.textContent = "帧预览加载失败，将继续尝试下一帧";
|
|
},
|
|
onFrame: ({ frame, index, total }) => {
|
|
const displayName = effectiveFrameName(current.name, frame, frame.position ?? index + 1);
|
|
previewImage.alt = `当前动图帧：${displayName}`;
|
|
previewStatus.textContent = `${current.name} · 第 ${index + 1}/${total} 帧`;
|
|
},
|
|
});
|
|
currentPreviewGroup.setActive(true);
|
|
}
|
|
|
|
async function mutate(action, message, control = null, { clearSelectionOnSuccess = false } = {}) {
|
|
if (busy) return null;
|
|
busy = true;
|
|
folders.inert = true;
|
|
frames.inert = true;
|
|
folders.setAttribute("aria-busy", "true");
|
|
frames.setAttribute("aria-busy", "true");
|
|
const globalControls = [
|
|
createButton, refreshButton, addFrameButton,
|
|
batchCopyButton, batchMoveButton, batchDeleteButton,
|
|
pagePrevious, pageNext,
|
|
];
|
|
globalControls.forEach((item) => setControlBusy(item));
|
|
if (control && !globalControls.includes(control)) setControlBusy(control);
|
|
feedback.textContent = "正在处理动图操作…";
|
|
feedback.dataset.state = "pending";
|
|
try {
|
|
const result = await action();
|
|
if (result?.frames) syncAnimationEditMetadata(result);
|
|
if (clearSelectionOnSuccess) selectedFrameIds.clear();
|
|
if (message) announce(message);
|
|
await refreshAnimations(current?.id || null);
|
|
document.dispatchEvent(new CustomEvent("matrix:library-change", { detail: { source: "animations" } }));
|
|
return result;
|
|
} catch (error) {
|
|
feedback.textContent = error.status === 409 || error.status === 428
|
|
? "动图已被其他页面修改，请取消勾选并刷新后重试；本次操作没有部分生效。"
|
|
: error.message;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
return null;
|
|
} finally {
|
|
busy = false;
|
|
folders.inert = false;
|
|
frames.inert = false;
|
|
folders.removeAttribute("aria-busy");
|
|
frames.removeAttribute("aria-busy");
|
|
globalControls.forEach((item) => setControlReady(item));
|
|
if (control) setControlReady(control);
|
|
syncToolbarState();
|
|
renderFramePagination();
|
|
}
|
|
}
|
|
|
|
function button(label, action, className = "") {
|
|
const item = document.createElement("button");
|
|
item.type = "button";
|
|
item.textContent = label;
|
|
item.className = className;
|
|
item.addEventListener("click", () => action(item));
|
|
return item;
|
|
}
|
|
|
|
async function openAnimation(id, control = null) {
|
|
if (selectionMode()) {
|
|
announce(SELECTION_LOCK_MESSAGE, true);
|
|
return;
|
|
}
|
|
const state = animationEditState();
|
|
if (state && state.animationId !== id && !await resolveAnimationEditBeforeNavigation()) return;
|
|
if (control) setControlBusy(control, { label: "正在打开…", message: "正在打开动图…" });
|
|
try {
|
|
current = await loadAnimationPage(id, 0);
|
|
selectedFrameIds.clear();
|
|
framePanel.hidden = false;
|
|
frameTitle.textContent = `${current.name} · ${current.frame_count} 帧`;
|
|
feedback.textContent = `已打开“${current.name}”`;
|
|
feedback.dataset.state = "ready";
|
|
renderFrames();
|
|
renderFolders();
|
|
syncToolbarState();
|
|
startAnimationPreview();
|
|
} catch (error) {
|
|
feedback.textContent = `动图打开失败：${error.message}`;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
} finally {
|
|
if (control) setControlReady(control);
|
|
}
|
|
}
|
|
|
|
function renderFolders() {
|
|
folderPreviewGroup.clear();
|
|
const selecting = selectionMode();
|
|
const cards = list.map((item) => {
|
|
const card = document.createElement("article");
|
|
card.className = `animation-folder-card panel${current?.id === item.id ? " active" : ""}`;
|
|
const imageBox = createAnimationThumbnailBox(folderPreviewGroup, item);
|
|
const title = document.createElement("h3");
|
|
title.className = "animation-folder-name";
|
|
title.textContent = item.name;
|
|
title.dataset.hoverTooltip = item.name;
|
|
const meta = document.createElement("p");
|
|
meta.textContent = `${item.frame_count} 帧 · ${(item.total_duration_ms / 1000).toFixed(2)} 秒`;
|
|
const actions = document.createElement("div");
|
|
actions.className = "template-card-actions";
|
|
const open = button("打开", (control) => openAnimation(item.id, control), "primary-button");
|
|
const play = button("播放", (control) => mutate(async () => {
|
|
const result = await apiJson(`/api/animations/${item.id}/play`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${item.revision}"` },
|
|
body: "{}",
|
|
});
|
|
await refreshStatus();
|
|
return result;
|
|
}, `开始播放“${item.name}”`, control), item.frame_count ? "" : "disabled-button");
|
|
const rename = button("重命名", async (control) => {
|
|
const name = await askName("重命名动图", item.name);
|
|
if (name) mutate(() => apiJson(`/api/animations/${item.id}`, {
|
|
method: "PATCH",
|
|
headers: { "If-Match": `"${item.revision}"` },
|
|
body: JSON.stringify({ name }),
|
|
}), "动图已重命名", control);
|
|
});
|
|
const remove = button("删除", async (control) => {
|
|
if (await confirmAnimationOperation("确认删除动图", `永久删除动图“${item.name}”及全部帧吗？`, "删除")) {
|
|
mutate(() => apiJson(`/api/animations/${item.id}`, {
|
|
method: "DELETE",
|
|
headers: { "If-Match": `"${item.revision}"` },
|
|
}), "动图已删除", control);
|
|
}
|
|
}, "danger-button");
|
|
actions.append(open, play, rename, remove);
|
|
if (selecting) {
|
|
[...actions.children].forEach((control) => setControlUnavailable(control, SELECTION_LOCK_MESSAGE));
|
|
} else if (!item.frame_count) {
|
|
setControlUnavailable(play, "请先在该动图中添加至少一帧，再开始播放。");
|
|
}
|
|
card.append(imageBox, title, meta, actions);
|
|
return card;
|
|
});
|
|
if (!cards.length) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "template-empty panel";
|
|
empty.textContent = "还没有动图，请先新建一个动图。";
|
|
cards.push(empty);
|
|
}
|
|
folders.replaceChildren(...cards);
|
|
}
|
|
|
|
async function copyFrame(frame, control) {
|
|
if (selectionMode()) return;
|
|
setControlBusy(control, { label: "正在准备…", message: "正在读取可复制的目标…" });
|
|
try {
|
|
const data = await apiJson("/api/animations");
|
|
copyTarget.replaceChildren(
|
|
new Option("静态模板", "static"),
|
|
...data.animations.map((item) => new Option(`动图：${item.name}`, `animation:${item.id}`)),
|
|
);
|
|
copyDialog.returnValue = "";
|
|
copyDialog.showModal();
|
|
await new Promise((resolve) => copyDialog.addEventListener("close", resolve, { once: true }));
|
|
if (copyDialog.returnValue !== "copy") return;
|
|
const [type, animationId] = copyTarget.value.split(":");
|
|
if (type === "static") {
|
|
await mutate(() => apiJson("/api/library/copy", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
source_type: "animation_frame",
|
|
source_id: frame.id,
|
|
source_animation_id: current.id,
|
|
source_revision: current.revision,
|
|
destination_type: "static",
|
|
destination_animation_id: null,
|
|
destination_revision: null,
|
|
}),
|
|
}), "帧已复制为静态模板", control);
|
|
return;
|
|
}
|
|
const destination = await apiJson(`/api/animations/${animationId}`);
|
|
const insertAfterFrameId = await chooseInsertionPosition(destination, {
|
|
title: "选择单帧复制位置",
|
|
copyMode: true,
|
|
});
|
|
if (insertAfterFrameId === undefined) return;
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frames/copy`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({
|
|
frame_ids: [frame.id],
|
|
destination_animation_id: destination.id,
|
|
destination_revision: destination.revision,
|
|
insert_after_frame_id: insertAfterFrameId,
|
|
}),
|
|
}), "帧已复制到指定位置", control);
|
|
} catch (error) {
|
|
feedback.textContent = `复制目标读取失败：${error.message}`;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
} finally {
|
|
setControlReady(control);
|
|
}
|
|
}
|
|
|
|
async function changeDuration(frame, duration) {
|
|
return mutate(() => apiJson(`/api/animations/${current.id}/frames/${frame.id}`, {
|
|
method: "PATCH",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ duration_ms: duration }),
|
|
}), "帧时长已更新");
|
|
}
|
|
|
|
async function applyDurationToSelection(frame, duration, restoreInput) {
|
|
const selectedIds = selectedIdsInFrameOrder();
|
|
const confirmed = await confirmAnimationOperation(
|
|
"确认批量修改时长",
|
|
`将 ${duration} 毫秒应用到已选择的 ${selectedIds.length} 帧吗？`,
|
|
"应用到已选帧",
|
|
);
|
|
if (!confirmed) {
|
|
restoreInput();
|
|
return false;
|
|
}
|
|
const result = await mutate(() => apiJson(`/api/animations/${current.id}/frame-durations`, {
|
|
method: "PUT",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ duration_ms: duration, frame_ids: selectedIds }),
|
|
}), `已更新 ${selectedIds.length} 帧的显示时间`);
|
|
return Boolean(result);
|
|
}
|
|
|
|
async function moveFrame(index, delta) {
|
|
if (selectionMode()) return;
|
|
const frame = current.frames[index];
|
|
const targetPosition = frame.position + delta;
|
|
if (targetPosition < 1 || targetPosition > frameTotal()) return;
|
|
if (usesPartialFramePage()) {
|
|
let beforeFrameId = null;
|
|
if (delta < 0) {
|
|
const previous = index > 0
|
|
? current.frames[index - 1]
|
|
: (await apiJson(animationPageUrl(current.id, frame.position - 2, 1))).frames[0];
|
|
beforeFrameId = previous?.id ?? null;
|
|
} else if (frame.position + 1 < frameTotal()) {
|
|
const afterNext = index + 2 < current.frames.length
|
|
? current.frames[index + 2]
|
|
: (await apiJson(animationPageUrl(current.id, frame.position + 1, 1))).frames[0];
|
|
beforeFrameId = afterNext?.id ?? null;
|
|
}
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frame-move`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: [frame.id], before_frame_id: beforeFrameId }),
|
|
}), "帧顺序已更新");
|
|
return;
|
|
}
|
|
const order = current.frames.map((item) => item.id);
|
|
const target = index + delta;
|
|
if (target < 0 || target >= order.length) return;
|
|
[order[index], order[target]] = [order[target], order[index]];
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frame-order`, {
|
|
method: "PUT",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: order }),
|
|
}), "帧顺序已更新");
|
|
}
|
|
|
|
async function editFrame(frame, control) {
|
|
if (selectionMode() || !await resolveDirty()) return;
|
|
setControlBusy(control, { label: "正在打开…", message: "正在读取动图帧…" });
|
|
try {
|
|
const full = await apiJson(`/api/animations/${current.id}/frames/${frame.id}`);
|
|
enterAnimationEdit(full);
|
|
const displayName = effectiveFrameName(current.name, frame, frame.position);
|
|
feedback.textContent = `正在编辑“${displayName}”`;
|
|
renderFrames();
|
|
boardShell.scrollIntoView({
|
|
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
|
|
block: "start",
|
|
});
|
|
} catch (error) {
|
|
feedback.textContent = `动图帧读取失败：${error.message}`;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
} finally {
|
|
setControlReady(control);
|
|
}
|
|
}
|
|
|
|
function configureDurationInput(input, unit, durationMs, displayName) {
|
|
input.value = formatFrameDuration(durationMs, unit);
|
|
if (unit === "s") {
|
|
input.min = "0.050";
|
|
input.max = "604800";
|
|
input.step = "0.001";
|
|
input.inputMode = "decimal";
|
|
input.setAttribute("aria-label", `${displayName}显示时间，单位秒`);
|
|
} else {
|
|
input.min = "50";
|
|
input.max = "604800000";
|
|
input.step = "1";
|
|
input.inputMode = "numeric";
|
|
input.setAttribute("aria-label", `${displayName}显示时间，单位毫秒`);
|
|
}
|
|
}
|
|
|
|
function renderFrames() {
|
|
if (!current) return;
|
|
const selecting = selectionMode();
|
|
frames.replaceChildren(...current.frames.map((frame, index) => {
|
|
const editing = animationEditState()?.frameId === frame.id;
|
|
const selected = selectedFrameIds.has(frame.id);
|
|
const displayName = effectiveFrameName(current.name, frame, frame.position);
|
|
const card = document.createElement("article");
|
|
card.className = `template-card animation-frame-card sortable-card${editing ? " editing" : ""}${selected ? " selected" : ""}`;
|
|
card.dataset.frameId = frame.id;
|
|
if (!selecting && !usesPartialFramePage()) protectCardDragStart(card);
|
|
else card.draggable = false;
|
|
if (editing) card.setAttribute("aria-current", "true");
|
|
|
|
const positionRow = document.createElement("div");
|
|
positionRow.className = "animation-frame-position-row";
|
|
const positionText = document.createElement("span");
|
|
positionText.append(document.createTextNode("第 "));
|
|
const currentPosition = document.createElement("span");
|
|
currentPosition.className = "animation-frame-position-current";
|
|
currentPosition.textContent = String(frame.position);
|
|
const totalPosition = document.createElement("span");
|
|
totalPosition.className = "animation-frame-position-total";
|
|
totalPosition.textContent = String(frameTotal());
|
|
positionText.append(currentPosition, document.createTextNode(" / "), totalPosition, document.createTextNode(" 帧"));
|
|
const checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.className = "animation-frame-select";
|
|
checkbox.checked = selected;
|
|
checkbox.setAttribute("aria-label", `选择${displayName}`);
|
|
checkbox.addEventListener("change", async () => {
|
|
if (checkbox.checked && animationEditState() && !await resolveAnimationEditBeforeNavigation()) {
|
|
checkbox.checked = false;
|
|
return;
|
|
}
|
|
if (checkbox.checked) selectedFrameIds.add(frame.id);
|
|
else selectedFrameIds.delete(frame.id);
|
|
renderFrames();
|
|
renderFolders();
|
|
syncToolbarState();
|
|
});
|
|
positionRow.append(positionText, checkbox);
|
|
|
|
const title = document.createElement("h3");
|
|
title.className = "template-card-name animation-frame-name";
|
|
title.textContent = displayName;
|
|
const editingBadge = document.createElement("span");
|
|
editingBadge.className = "animation-frame-editing-badge";
|
|
editingBadge.textContent = "当前正在编辑";
|
|
editingBadge.hidden = !editing;
|
|
const rename = button("重命名", async (control) => {
|
|
const name = await askName("帧名称（留空恢复自动名称）", frame.name || "", { allowEmpty: true });
|
|
if (name !== null) mutate(() => apiJson(`/api/animations/${current.id}/frames/${frame.id}`, {
|
|
method: "PATCH",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ name: name || null }),
|
|
}), name ? "帧名称已更新" : "帧已恢复自动名称", control);
|
|
}, "animation-frame-rename");
|
|
|
|
const durationField = document.createElement("div");
|
|
durationField.className = "animation-duration-field";
|
|
const durationHeading = document.createElement("div");
|
|
durationHeading.className = "animation-duration-heading";
|
|
const durationLabel = document.createElement("span");
|
|
durationLabel.textContent = "显示时间";
|
|
const copyDuration = button("复制到已选帧", () => commitDuration(true));
|
|
durationHeading.append(durationLabel, copyDuration);
|
|
const durationControls = document.createElement("div");
|
|
durationControls.className = "animation-duration-controls";
|
|
const duration = document.createElement("input");
|
|
duration.type = "number";
|
|
const unit = durationUnits.get(frame.id) || "ms";
|
|
configureDurationInput(duration, unit, frame.duration_ms, displayName);
|
|
const unitButton = button(unit === "ms" ? "毫秒" : "秒", () => {
|
|
const nextUnit = (durationUnits.get(frame.id) || "ms") === "ms" ? "s" : "ms";
|
|
durationUnits.set(frame.id, nextUnit);
|
|
configureDurationInput(duration, nextUnit, frame.duration_ms, displayName);
|
|
unitButton.textContent = nextUnit === "ms" ? "毫秒" : "秒";
|
|
duration.setAttribute("aria-invalid", "false");
|
|
durationError.hidden = true;
|
|
}, "animation-duration-unit");
|
|
unitButton.setAttribute("aria-label", `${displayName}显示时间单位，点击切换秒或毫秒`);
|
|
durationControls.append(duration, unitButton);
|
|
const durationError = document.createElement("span");
|
|
durationError.className = "animation-duration-error";
|
|
durationError.id = `duration-error-${frame.id}`;
|
|
durationError.hidden = true;
|
|
duration.setAttribute("aria-describedby", durationError.id);
|
|
durationField.append(durationHeading, durationControls, durationError);
|
|
let durationCommitPending = false;
|
|
async function commitDuration(requireSelection = false) {
|
|
if (durationCommitPending) return;
|
|
if (requireSelection && !selectionMode()) return;
|
|
durationCommitPending = true;
|
|
const activeUnit = durationUnits.get(frame.id) || "ms";
|
|
const validation = validateFrameDuration(duration.value, activeUnit);
|
|
duration.setAttribute("aria-invalid", String(!validation.valid));
|
|
durationError.textContent = validation.error;
|
|
durationError.hidden = validation.valid;
|
|
if (!validation.valid) {
|
|
announce(validation.error, true);
|
|
queueMicrotask(() => { durationCommitPending = false; });
|
|
return;
|
|
}
|
|
const restoreInput = () => {
|
|
configureDurationInput(duration, activeUnit, frame.duration_ms, displayName);
|
|
duration.setAttribute("aria-invalid", "false");
|
|
durationError.hidden = true;
|
|
};
|
|
if (selectionMode()) {
|
|
await applyDurationToSelection(frame, validation.duration, restoreInput);
|
|
} else if (validation.duration !== frame.duration_ms) {
|
|
await changeDuration(frame, validation.duration);
|
|
}
|
|
durationCommitPending = false;
|
|
}
|
|
duration.addEventListener("change", () => commitDuration(false));
|
|
duration.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
commitDuration(false);
|
|
duration.blur();
|
|
}
|
|
});
|
|
|
|
const imageBox = document.createElement("div");
|
|
imageBox.className = "template-image-box animation-frame-image-box";
|
|
const image = document.createElement("img");
|
|
image.className = "template-image";
|
|
image.src = frame.thumbnail_url;
|
|
image.alt = displayName;
|
|
image.width = 64;
|
|
image.height = 64;
|
|
image.draggable = false;
|
|
image.addEventListener("error", () => imageBox.classList.add("template-image-error"));
|
|
imageBox.append(image);
|
|
const edit = button("编辑此帧", (control) => editFrame(frame, control), "primary-button animation-frame-edit");
|
|
const actions = document.createElement("div");
|
|
actions.className = "template-card-actions animation-frame-secondary-actions";
|
|
const moveUp = button("上移", () => moveFrame(index, -1));
|
|
const moveDown = button("下移", () => moveFrame(index, 1));
|
|
const copy = button("复制", (control) => copyFrame(frame, control));
|
|
const remove = button("删除", async (control) => {
|
|
if (await confirmAnimationOperation("确认删除帧", `删除“${displayName}”吗？`, "删除")) {
|
|
mutate(() => apiJson(`/api/animations/${current.id}/frames/${frame.id}`, {
|
|
method: "DELETE",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
}), "帧已删除", control);
|
|
}
|
|
}, "danger-button");
|
|
actions.append(moveUp, moveDown, copy, remove);
|
|
if (selecting) {
|
|
[rename, edit, moveUp, moveDown, copy, remove].forEach((control) => {
|
|
setControlUnavailable(control, SELECTION_LOCK_MESSAGE);
|
|
});
|
|
setControlReady(copyDuration);
|
|
} else {
|
|
setControlUnavailable(copyDuration, NO_SELECTION_MESSAGE);
|
|
if (frame.position === 1) setControlUnavailable(moveUp, "当前已经是第一帧，不能继续上移。");
|
|
if (frame.position === frameTotal()) setControlUnavailable(moveDown, "当前已经是最后一帧，不能继续下移。");
|
|
}
|
|
card.addEventListener("dragstart", (event) => {
|
|
if (selectionMode() || usesPartialFramePage()) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
if (!event.defaultPrevented) event.dataTransfer.setData("text/plain", frame.id);
|
|
});
|
|
card.addEventListener("dragover", (event) => {
|
|
if (!selectionMode() && !usesPartialFramePage()) event.preventDefault();
|
|
});
|
|
card.addEventListener("drop", (event) => {
|
|
if (selectionMode() || usesPartialFramePage()) return;
|
|
event.preventDefault();
|
|
const source = event.dataTransfer.getData("text/plain");
|
|
const order = current.frames.map((item) => item.id);
|
|
const from = order.indexOf(source);
|
|
if (from < 0 || from === index) return;
|
|
order.splice(index, 0, order.splice(from, 1)[0]);
|
|
mutate(() => apiJson(`/api/animations/${current.id}/frame-order`, {
|
|
method: "PUT",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: order }),
|
|
}), "帧顺序已更新");
|
|
});
|
|
card.append(positionRow, title, editingBadge, rename, durationField, imageBox, edit, actions);
|
|
return card;
|
|
}));
|
|
if (!current.frames.length) {
|
|
const empty = document.createElement("p");
|
|
empty.textContent = "此动图还没有帧。";
|
|
frames.append(empty);
|
|
}
|
|
renderFramePagination();
|
|
}
|
|
|
|
async function batchMove() {
|
|
const selectedIds = selectedIdsInFrameOrder();
|
|
const insertAfterFrameId = await chooseInsertionPosition(current, {
|
|
disabledIds: new Set(selectedIds),
|
|
title: "批量移动帧",
|
|
});
|
|
if (insertAfterFrameId === undefined) return;
|
|
if (usesPartialFramePage()) {
|
|
let beforeFrameId = null;
|
|
const selected = new Set(selectedIds);
|
|
if (insertAfterFrameId === null) {
|
|
const first = await apiJson(animationPageUrl(current.id, 0, selectedIds.length + 1));
|
|
beforeFrameId = first.frames.find((frame) => !selected.has(frame.id))?.id ?? null;
|
|
} else {
|
|
const target = current.frames.find((frame) => frame.id === insertAfterFrameId);
|
|
const following = await apiJson(animationPageUrl(
|
|
current.id,
|
|
target?.position ?? 0,
|
|
selectedIds.length + 1,
|
|
));
|
|
beforeFrameId = following.frames.find((frame) => !selected.has(frame.id))?.id ?? null;
|
|
}
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frame-move`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: selectedIds, before_frame_id: beforeFrameId }),
|
|
}), `已移动 ${selectedIds.length} 帧`, batchMoveButton, { clearSelectionOnSuccess: true });
|
|
return;
|
|
}
|
|
const existing = current.frames.map((frame) => frame.id);
|
|
const order = reorderSelectedFrameIds(existing, selectedIds, insertAfterFrameId);
|
|
if (!order) {
|
|
feedback.textContent = "无法生成批量移动顺序，请刷新后重试。";
|
|
announce(feedback.textContent, true);
|
|
return;
|
|
}
|
|
if (order.every((frameId, index) => frameId === existing[index])) {
|
|
feedback.textContent = "所选帧已经位于该位置，顺序未变化。";
|
|
clearSelection();
|
|
announce(feedback.textContent);
|
|
return;
|
|
}
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frame-order`, {
|
|
method: "PUT",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: order }),
|
|
}), `已移动 ${selectedIds.length} 帧`, batchMoveButton, { clearSelectionOnSuccess: true });
|
|
}
|
|
|
|
async function batchCopy() {
|
|
setControlBusy(batchCopyButton, { label: "正在准备…", message: "正在读取复制目标…" });
|
|
try {
|
|
const data = await apiJson("/api/animations");
|
|
const destinationMetadata = await chooseCopyDestination(data.animations);
|
|
if (!destinationMetadata) return;
|
|
const destination = await apiJson(`/api/animations/${destinationMetadata.id}`);
|
|
const insertAfterFrameId = await chooseInsertionPosition(destination, {
|
|
title: "选择批量复制位置",
|
|
copyMode: true,
|
|
});
|
|
if (insertAfterFrameId === undefined) return;
|
|
const selectedIds = selectedIdsInFrameOrder();
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frames/copy`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({
|
|
frame_ids: selectedIds,
|
|
destination_animation_id: destination.id,
|
|
destination_revision: destination.revision,
|
|
insert_after_frame_id: insertAfterFrameId,
|
|
}),
|
|
}), `已复制 ${selectedIds.length} 帧到“${destination.name}”`, batchCopyButton, {
|
|
clearSelectionOnSuccess: true,
|
|
});
|
|
} catch (error) {
|
|
feedback.textContent = `批量复制准备失败：${error.message}`;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
} finally {
|
|
setControlReady(batchCopyButton);
|
|
syncToolbarState();
|
|
}
|
|
}
|
|
|
|
async function batchDelete() {
|
|
const selectedFrames = current.frames.filter((frame) => selectedFrameIds.has(frame.id));
|
|
const names = selectedFrames.slice(0, 3).map((frame, index) => (
|
|
effectiveFrameName(current.name, frame, current.frames.indexOf(frame) + 1)
|
|
));
|
|
const suffix = selectedFrames.length > names.length ? `等 ${selectedFrames.length} 帧` : `${selectedFrames.length} 帧`;
|
|
const confirmed = await confirmAnimationOperation(
|
|
"确认批量删除",
|
|
`永久删除 ${names.join("、")} ${suffix}吗？删除后无法恢复。`,
|
|
"批量删除",
|
|
);
|
|
if (!confirmed) return;
|
|
await mutate(() => apiJson(`/api/animations/${current.id}/frames/batch-delete`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ frame_ids: selectedIdsInFrameOrder() }),
|
|
}), `已删除 ${selectedFrames.length} 帧`, batchDeleteButton, { clearSelectionOnSuccess: true });
|
|
}
|
|
|
|
export async function refreshAnimations(selectId = null) {
|
|
const ownsBusyState = !busy;
|
|
if (ownsBusyState) {
|
|
setControlBusy(refreshButton, { label: "正在刷新…", message: "正在读取动图…" });
|
|
feedback.textContent = "正在读取动图…";
|
|
feedback.dataset.state = "pending";
|
|
}
|
|
try {
|
|
const data = await apiJson("/api/animations");
|
|
list = data.animations;
|
|
const id = selectId || current?.id;
|
|
current = id && list.some((item) => item.id === id) ? await loadAnimationPage(id) : null;
|
|
if (current) retainExistingSelection();
|
|
else selectedFrameIds.clear();
|
|
framePanel.hidden = !current;
|
|
if (current) frameTitle.textContent = `${current.name} · ${current.frame_count} 帧`;
|
|
renderFolders();
|
|
if (current) renderFrames();
|
|
else renderFramePagination();
|
|
feedback.textContent = current ? `已打开“${current.name}”` : `共 ${list.length} 个动图`;
|
|
feedback.dataset.state = "ready";
|
|
syncToolbarState();
|
|
startAnimationPreview();
|
|
if (ownsBusyState) announce(feedback.textContent);
|
|
} catch (error) {
|
|
feedback.textContent = `动图读取失败：${error.message}`;
|
|
feedback.dataset.state = "error";
|
|
announce(feedback.textContent, true);
|
|
} finally {
|
|
if (ownsBusyState) setControlReady(refreshButton);
|
|
syncToolbarState();
|
|
}
|
|
}
|
|
|
|
async function saveCurrentFrame() {
|
|
const state = animationEditState();
|
|
if (!state) return true;
|
|
const result = await mutate(async () => {
|
|
const saved = await apiJson(`/api/animations/${state.animationId}/frames/${state.frameId}`, {
|
|
method: "PUT",
|
|
headers: { "If-Match": `"${state.revision}"` },
|
|
body: JSON.stringify({ scene: sceneToStorageValue(getScene()) }),
|
|
});
|
|
document.dispatchEvent(new CustomEvent("matrix:canvas-history-checkpoint", { detail: { reason: "animation-frame-save" } }));
|
|
return saved;
|
|
}, "当前动图帧已保存");
|
|
if (!result) return false;
|
|
const detail = result.frames.find((item) => item.id === state.frameId);
|
|
markAnimationFrameSaved({ revision: result.revision, ...detail });
|
|
renderFrames();
|
|
startAnimationPreview();
|
|
return true;
|
|
}
|
|
|
|
createButton.addEventListener("click", async () => {
|
|
const name = await askName("新建动图");
|
|
if (!name) return;
|
|
const result = await mutate(() => apiJson("/api/animations", {
|
|
method: "POST",
|
|
body: JSON.stringify({ name }),
|
|
}), `动图“${name}”已创建`, createButton);
|
|
if (result) openAnimation(result.id);
|
|
});
|
|
addFrameButton.addEventListener("click", () => current && mutate(async () => {
|
|
const result = await apiJson(`/api/animations/${current.id}/frames`, {
|
|
method: "POST",
|
|
headers: { "If-Match": `"${current.revision}"` },
|
|
body: JSON.stringify({ scene: sceneToStorageValue(getScene()), duration_ms: 500 }),
|
|
});
|
|
document.dispatchEvent(new CustomEvent("matrix:canvas-history-checkpoint", { detail: { reason: "animation-frame-create" } }));
|
|
return result;
|
|
}, "新帧已创建", addFrameButton));
|
|
refreshButton.addEventListener("click", () => refreshAnimations());
|
|
batchCopyButton.addEventListener("click", batchCopy);
|
|
batchMoveButton.addEventListener("click", batchMove);
|
|
batchDeleteButton.addEventListener("click", batchDelete);
|
|
pagePrevious.addEventListener("click", async () => {
|
|
if (!current || busy || selectionMode() || !await resolveAnimationEditBeforeNavigation()) return;
|
|
selectedFrameIds.clear();
|
|
current = await loadAnimationPage(current.id, Math.max(0, frameOffset - FRAME_PAGE_SIZE));
|
|
renderFrames();
|
|
startAnimationPreview();
|
|
});
|
|
pageNext.addEventListener("click", async () => {
|
|
if (!current || busy || selectionMode() || !await resolveAnimationEditBeforeNavigation()) return;
|
|
selectedFrameIds.clear();
|
|
current = await loadAnimationPage(current.id, frameOffset + FRAME_PAGE_SIZE);
|
|
renderFrames();
|
|
startAnimationPreview();
|
|
});
|
|
document.addEventListener("matrix:save-animation-frame", () => saveCurrentFrame());
|
|
document.addEventListener("matrix:request-exit-animation-edit", async () => {
|
|
if (await resolveDirty()) leaveAnimationEdit();
|
|
});
|
|
document.addEventListener("matrix:library-change", (event) => {
|
|
if (event.detail?.source !== "animations") refreshAnimations(current?.id);
|
|
});
|
|
document.addEventListener("matrix:open-animation", (event) => openAnimation(event.detail.id));
|
|
window.addEventListener("beforeunload", (event) => {
|
|
if (animationEditState()?.dirty) {
|
|
event.preventDefault();
|
|
event.returnValue = "";
|
|
}
|
|
});
|
|
registerSceneReplacementGuard(resolveAnimationEditBeforeNavigation);
|
|
|
|
registerWorkspace({
|
|
id: "animations",
|
|
title: "动图管理",
|
|
elementId: "workspace-animations",
|
|
order: 50,
|
|
persistence: "server",
|
|
onEnter: async () => {
|
|
workspaceActive = true;
|
|
folderPreviewGroup.setActive(true);
|
|
currentPreviewGroup.setActive(true);
|
|
await refreshAnimations();
|
|
},
|
|
onLeave: () => {
|
|
workspaceActive = false;
|
|
selectedFrameIds.clear();
|
|
folderPreviewGroup.setActive(false);
|
|
folderPreviewGroup.clear();
|
|
currentPreviewGroup.setActive(false);
|
|
stopAnimationPreview();
|
|
},
|
|
});
|