-
+
-
{{ safeProgress }}%
+
{{ progressLabel }}%
{{ message }}
diff --git a/frontend/src/components/TopBar.vue b/frontend/src/components/TopBar.vue
index 42cc331..1c98588 100644
--- a/frontend/src/components/TopBar.vue
+++ b/frontend/src/components/TopBar.vue
@@ -3,11 +3,13 @@ import { Quit, WindowMinimise, WindowToggleMaximise } from "../../wailsjs/runtim
defineProps<{
isRunning: boolean;
+ isScreeningActive?: boolean;
}>();
const emit = defineEmits<{
packages: [];
run: [];
+ screening: [];
stop: [];
}>();
@@ -50,11 +52,21 @@ function closeWindow() {
class="run-button"
type="button"
:class="{ stopping: isRunning }"
+ data-tour="run-button"
@click="isRunning ? emit('stop') : emit('run')"
>
{{ isRunning ? "停止运行" : "运行场景" }}
+
+
+ {{ isScreeningActive ? "放映中" : "放映模式" }}
+
diff --git a/frontend/src/components/codeAIOptimize/CodeAIOptimizeContextMenu.vue b/frontend/src/components/codeAIOptimize/CodeAIOptimizeContextMenu.vue
index a1e0a68..a5765e9 100644
--- a/frontend/src/components/codeAIOptimize/CodeAIOptimizeContextMenu.vue
+++ b/frontend/src/components/codeAIOptimize/CodeAIOptimizeContextMenu.vue
@@ -74,20 +74,26 @@ function describeEventTarget(target: EventTarget | null) {
-
+
diff --git a/frontend/src/components/AISettingsDialog.vue b/frontend/src/components/dialogs/AISettingsDialog.vue
similarity index 79%
rename from frontend/src/components/AISettingsDialog.vue
rename to frontend/src/components/dialogs/AISettingsDialog.vue
index 2f844fd..ee301d9 100644
--- a/frontend/src/components/AISettingsDialog.vue
+++ b/frontend/src/components/dialogs/AISettingsDialog.vue
@@ -4,6 +4,7 @@ import type {
AISubscriptionStatus,
AIServiceMode,
} from "../features/ai/services/aiTypes";
+import { openSponsorPage, SPONSOR_URL } from "../../lib/help";
const props = defineProps<{
open: boolean;
@@ -58,8 +59,8 @@ function updateField(field: "url" | "key" | "model", value: string) {
-
-
+
diff --git a/frontend/src/components/CreateScriptDialog.vue b/frontend/src/components/dialogs/CreateScriptDialog.vue
similarity index 100%
rename from frontend/src/components/CreateScriptDialog.vue
rename to frontend/src/components/dialogs/CreateScriptDialog.vue
diff --git a/frontend/src/components/PackageTransferDialog.vue b/frontend/src/components/dialogs/PackageTransferDialog.vue
similarity index 100%
rename from frontend/src/components/PackageTransferDialog.vue
rename to frontend/src/components/dialogs/PackageTransferDialog.vue
diff --git a/frontend/src/components/RunErrorDialog.vue b/frontend/src/components/dialogs/RunErrorDialog.vue
similarity index 60%
rename from frontend/src/components/RunErrorDialog.vue
rename to frontend/src/components/dialogs/RunErrorDialog.vue
index ba41d0e..1b2437f 100644
--- a/frontend/src/components/RunErrorDialog.vue
+++ b/frontend/src/components/dialogs/RunErrorDialog.vue
@@ -1,4 +1,6 @@
@@ -37,9 +69,11 @@ function repair() {
-
- 展开错误文本
- {{ props.errorText }}
+ {{ errorSummary }}
+
+
+ 查看详情
+ {{ errorDetails }}
diff --git a/frontend/src/components/dialogs/ScreeningDialog.vue b/frontend/src/components/dialogs/ScreeningDialog.vue
new file mode 100644
index 0000000..553a1b7
--- /dev/null
+++ b/frontend/src/components/dialogs/ScreeningDialog.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.order === null ? "" : String(item.order).padStart(2, "0") }}
+
+ {{ item.sceneName }}
+
+
+
+
+
+ 取消
+
+
+ {{ pending ? "准备中" : "开始放映" }}
+
+
+
+
+
diff --git a/frontend/src/components/SettingsDialog.vue b/frontend/src/components/dialogs/SettingsDialog.vue
similarity index 87%
rename from frontend/src/components/SettingsDialog.vue
rename to frontend/src/components/dialogs/SettingsDialog.vue
index e6859c2..eb206f1 100644
--- a/frontend/src/components/SettingsDialog.vue
+++ b/frontend/src/components/dialogs/SettingsDialog.vue
@@ -5,6 +5,7 @@ defineProps<{
running: boolean;
update: {
currentVersion: string;
+ actionKind: "check" | "latest" | "download" | "install";
actionLabel: string;
};
updatePending: boolean;
@@ -37,16 +38,12 @@ const emit = defineEmits<{
设置
+ 当前版本 {{ update.currentVersion || "-" }}
-
{{ status.summary }}
-
- {{ status.recommendedAction }}
-
{{ item.label }}
diff --git a/frontend/src/components/dialogs/StopAIConfirmDialog.vue b/frontend/src/components/dialogs/StopAIConfirmDialog.vue
new file mode 100644
index 0000000..4768016
--- /dev/null
+++ b/frontend/src/components/dialogs/StopAIConfirmDialog.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ 中断 AI 生成
+
+ 已进行的尝试会丢弃,需重新发起。
+
+
+
+ 取消
+
+
+ {{ pending ? "中断中" : "中断" }}
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/UpdateRestartDialog.vue b/frontend/src/components/dialogs/UpdateRestartDialog.vue
similarity index 100%
rename from frontend/src/components/UpdateRestartDialog.vue
rename to frontend/src/components/dialogs/UpdateRestartDialog.vue
diff --git a/frontend/src/components/editor/DesignCardCodeWidget.ts b/frontend/src/components/editor/DesignCardCodeWidget.ts
deleted file mode 100644
index bbdfdb3..0000000
--- a/frontend/src/components/editor/DesignCardCodeWidget.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { WidgetType } from "../../lib/codemirror";
-import { writeDesignCardDragData } from "../../features/designCard/services/designCardDragData";
-import { getDesignCardSvgAspectRatio } from "../../features/designCard/services/designCardSvgGeometry";
-import type { DesignCard } from "../../features/designCard/services/designCardTypes";
-
-export class DesignCardCodeWidget extends WidgetType {
- constructor(
- private readonly card: DesignCard,
- private readonly callbacks: {
- delete: (cardId: string) => void;
- move: (payload: { cardId: string; delta: number }) => void;
- open: (cardId: string) => void;
- },
- private readonly viewportWidth = 0,
- ) {
- super();
- }
-
- toDOM() {
- const shell = document.createElement("div");
- shell.className = "cm-design-card-widget";
- if (this.viewportWidth > 0) {
- shell.style.width = `${this.viewportWidth}px`;
- shell.style.maxWidth = `${this.viewportWidth}px`;
- }
-
- const article = document.createElement("article");
- article.className = "design-card-inline-block editor-design-card";
- article.draggable = true;
- article.addEventListener("pointerdown", (event) => {
- event.stopPropagation();
- });
- article.addEventListener("dragstart", (event) => {
- article.classList.add("design-card-dragging");
- writeDesignCardDragData(event.dataTransfer, { cardId: this.card.id, source: "editor" });
- if (event.dataTransfer) {
- event.dataTransfer.effectAllowed = "copyMove";
- }
- });
- article.addEventListener("dragend", () => {
- article.classList.remove("design-card-dragging");
- });
-
- const svgView = document.createElement("div");
- const aspectRatio = getDesignCardSvgAspectRatio(this.card.svg);
- svgView.className = aspectRatio
- ? "design-card-static-svg-view has-intrinsic-ratio"
- : "design-card-static-svg-view";
- if (aspectRatio) {
- svgView.style.aspectRatio = aspectRatio;
- }
- svgView.innerHTML = this.card.svg;
- article.append(svgView);
-
- const actions = document.createElement("footer");
- actions.className = "design-card-inline-actions";
- actions.addEventListener("click", (event) => event.stopPropagation());
- actions.append(
- this.createIconButton("放大查看", "zoom", () => this.callbacks.open(this.card.id)),
- this.createIconButton("从代码区移除", "trash", () => this.callbacks.delete(this.card.id)),
- );
- article.append(actions);
- shell.append(article);
- return shell;
- }
-
- override eq(widget: DesignCardCodeWidget) {
- return (
- this.card.id === widget.card.id &&
- this.card.svg === widget.card.svg &&
- this.viewportWidth === widget.viewportWidth
- );
- }
-
- override ignoreEvent() {
- return true;
- }
-
- private createIconButton(title: string, icon: "zoom" | "trash", onClick: () => void) {
- const button = document.createElement("button");
- button.className = icon === "trash" ? "design-card-icon-action design-card-trash" : "design-card-icon-action";
- button.type = "button";
- button.title = title;
- button.addEventListener("pointerdown", (event) => event.stopPropagation());
- let deleteTimer = 0;
- button.addEventListener("click", (event) => {
- event.stopPropagation();
- if (icon === "trash" && !button.classList.contains("armed")) {
- button.classList.add("armed");
- button.title = "再次点击确认移除";
- window.clearTimeout(deleteTimer);
- deleteTimer = window.setTimeout(() => {
- button.classList.remove("armed");
- button.title = title;
- }, 1800);
- return;
- }
- onClick();
- });
- button.innerHTML =
- icon === "trash"
- ? '
+
+
diff --git a/frontend/src/components/editor/EditorCornerPocket.vue b/frontend/src/components/editor/EditorCornerPocket.vue
new file mode 100644
index 0000000..e6b0530
--- /dev/null
+++ b/frontend/src/components/editor/EditorCornerPocket.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/editor/EditorPane.vue b/frontend/src/components/editor/EditorPane.vue
index 2d8b6b1..43ae860 100644
--- a/frontend/src/components/editor/EditorPane.vue
+++ b/frontend/src/components/editor/EditorPane.vue
@@ -1,124 +1,84 @@
-
+
+
+
+
+ ↑↓ 切换结果 esc 退出
+
+
+
{{ searchMatchLabel }}
+
+
diff --git a/frontend/src/components/editor/codeMirrorTheme.ts b/frontend/src/components/editor/codeMirrorTheme.ts
index ce2e64d..bbd8282 100644
--- a/frontend/src/components/editor/codeMirrorTheme.ts
+++ b/frontend/src/components/editor/codeMirrorTheme.ts
@@ -9,7 +9,7 @@ export const editorTheme = EditorView.theme({
width: "100%",
backgroundColor: "transparent",
color: "var(--text)",
- fontFamily: "\"JetBrains Mono\", \"Consolas\", \"Courier New\", monospace",
+ fontFamily: "\"Cascadia Code\", \"JetBrains Mono\", \"Consolas\", \"Courier New\", monospace",
fontSize: "13px",
lineHeight: "1.8",
outline: "0",
@@ -57,31 +57,31 @@ export const editorTheme = EditorView.theme({
minHeight: "1.8em",
},
".cm-python-keyword": {
- color: "#8b4a24",
- fontWeight: "700",
+ color: "var(--syntax-keyword)",
+ fontWeight: "600",
},
".cm-python-builtin": {
- color: "#2e7c6b",
- fontWeight: "650",
+ color: "var(--syntax-builtin)",
+ fontWeight: "500",
},
".cm-python-string": {
- color: "#69791f",
+ color: "var(--syntax-string)",
},
".cm-python-number": {
- color: "#986236",
- fontWeight: "600",
+ color: "var(--syntax-number)",
+ fontWeight: "500",
},
".cm-python-comment": {
- color: "#9a9a9a",
+ color: "var(--syntax-comment)",
fontStyle: "italic",
},
".cm-python-decorator": {
- color: "#7651a6",
- fontWeight: "650",
+ color: "var(--syntax-decorator)",
+ fontWeight: "500",
},
".cm-python-operator": {
- color: "#7a5a82",
- fontWeight: "600",
+ color: "var(--syntax-operator)",
+ fontWeight: "500",
},
".cm-gutters": {
border: "0",
@@ -111,10 +111,19 @@ export const editorTheme = EditorView.theme({
backgroundColor: "transparent",
},
".cm-activeLine": {
- backgroundColor: "color-mix(in srgb, var(--surface-soft), transparent 72%)",
+ backgroundColor: "var(--hover-fill)",
},
".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
- backgroundColor: "color-mix(in srgb, var(--muted), transparent 78%)",
+ backgroundColor: "color-mix(in srgb, var(--muted), transparent 76%)",
+ },
+ ".cm-search-match": {
+ backgroundColor: "color-mix(in srgb, #ffd76a, transparent 42%)",
+ borderRadius: "4px",
+ },
+ ".cm-search-match-active": {
+ backgroundColor: "color-mix(in srgb, #ffb347, transparent 22%)",
+ borderRadius: "4px",
+ boxShadow: "inset 0 0 0 1px color-mix(in srgb, #c46a18, transparent 28%)",
},
".cm-cursor": {
borderLeftColor: "var(--text)",
@@ -125,15 +134,4 @@ export const editorTheme = EditorView.theme({
".cm-streaming-line": {
animation: "editor-stream-line 220ms ease",
},
- ".cm-design-card-widget": {
- display: "block",
- boxSizing: "border-box",
- width: "100%",
- padding: "16px 18px 22px 6px",
- },
- ".cm-design-card-widget .design-card-inline-block": {
- width: "100%",
- maxWidth: "100%",
- margin: "0",
- },
});
diff --git a/frontend/src/components/editor/useCodeMirrorEditor.ts b/frontend/src/components/editor/useCodeMirrorEditor.ts
index c724d0e..56e9078 100644
--- a/frontend/src/components/editor/useCodeMirrorEditor.ts
+++ b/frontend/src/components/editor/useCodeMirrorEditor.ts
@@ -1,6 +1,7 @@
-import { shallowRef, type ComputedRef, type Ref } from "vue";
+import { ref, shallowRef, type ComputedRef, type Ref } from "vue";
import {
Compartment,
+ Decoration,
type DecorationSet,
EditorState,
EditorView,
@@ -38,8 +39,14 @@ type MountOptions = {
export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
const editorView = shallowRef(null);
+ const isSearchOpen = ref(false);
+ const searchMatchCount = ref(0);
+ const searchQuery = ref("");
+ const searchActiveIndex = ref(-1);
const editableMode = new Compartment();
+ const searchDecorations = new Compartment();
let isApplyingExternalCode = false;
+ let searchRanges: Array<{ from: number; to: number }> = [];
function mountEditor(mountOptions: MountOptions) {
if (!options.editorRoot.value) {
@@ -64,6 +71,7 @@ export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
editorTheme,
editableMode.of(EditorView.editable.of(!options.disabled())),
mountOptions.cardDecorations.of(EditorView.decorations.of(mountOptions.buildDecorations())),
+ searchDecorations.of(EditorView.decorations.of(buildSearchDecorations())),
EditorView.updateListener.of((update) => {
if (update.docChanged && !isApplyingExternalCode) {
options.onCodeChange(update.state.doc.toString());
@@ -71,9 +79,15 @@ export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
if (update.docChanged || update.selectionSet || update.viewportChanged) {
options.onEditorActivity();
}
+ if (update.docChanged && isSearchOpen.value && searchQuery.value !== "") {
+ queueMicrotask(() => {
+ refreshSearch(false);
+ });
+ }
}),
EditorView.domEventHandlers({
contextmenu: handleContextMenu,
+ keydown: handleEditorKeyDown,
}),
highlightActiveLine(),
],
@@ -87,6 +101,7 @@ export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
function destroyEditor() {
editorView.value?.destroy();
editorView.value = null;
+ searchRanges = [];
}
function syncExternalCode(code: string) {
@@ -100,6 +115,7 @@ export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
changes: { from: 0, to: view.state.doc.length, insert: code },
});
isApplyingExternalCode = false;
+ refreshSearch(false);
return true;
}
@@ -119,11 +135,166 @@ export function useCodeMirrorEditor(options: CodeMirrorEditorOptions) {
return true;
}
+ function handleEditorKeyDown(event: KeyboardEvent) {
+ if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "f") {
+ event.preventDefault();
+ openSearch();
+ return true;
+ }
+ return false;
+ }
+
+ function openSearch() {
+ const view = editorView.value;
+ isSearchOpen.value = true;
+ if (!view) {
+ return;
+ }
+
+ const selectedText = view.state.sliceDoc(
+ view.state.selection.main.from,
+ view.state.selection.main.to,
+ );
+ if (searchQuery.value === "" && selectedText.trim() !== "" && !selectedText.includes("\n")) {
+ searchQuery.value = selectedText;
+ }
+ refreshSearch(true);
+ }
+
+ function closeSearch() {
+ isSearchOpen.value = false;
+ searchQuery.value = "";
+ searchMatchCount.value = 0;
+ searchActiveIndex.value = -1;
+ searchRanges = [];
+ applySearchDecorations(buildSearchDecorations());
+ focusEditor();
+ }
+
+ function updateSearchQuery(value: string) {
+ searchQuery.value = value;
+ searchActiveIndex.value = 0;
+ refreshSearch(true);
+ }
+
+ function focusEditor() {
+ editorView.value?.focus();
+ }
+
+ function findNextMatch() {
+ if (searchRanges.length === 0) {
+ return;
+ }
+ searchActiveIndex.value = (searchActiveIndex.value + 1 + searchRanges.length) % searchRanges.length;
+ revealActiveMatch();
+ }
+
+ function findPreviousMatch() {
+ if (searchRanges.length === 0) {
+ return;
+ }
+ searchActiveIndex.value = (searchActiveIndex.value - 1 + searchRanges.length) % searchRanges.length;
+ revealActiveMatch();
+ }
+
+ function refreshSearch(revealActive: boolean) {
+ if (!editorView.value) {
+ return;
+ }
+
+ const query = searchQuery.value;
+ if (query === "") {
+ searchRanges = [];
+ searchMatchCount.value = 0;
+ searchActiveIndex.value = -1;
+ applySearchDecorations(buildSearchDecorations());
+ return;
+ }
+
+ searchRanges = collectSearchRanges(editorView.value.state.doc.toString(), query);
+ searchMatchCount.value = searchRanges.length;
+ if (searchRanges.length === 0) {
+ searchActiveIndex.value = -1;
+ applySearchDecorations(buildSearchDecorations());
+ return;
+ }
+
+ if (searchActiveIndex.value < 0 || searchActiveIndex.value >= searchRanges.length) {
+ searchActiveIndex.value = 0;
+ }
+ applySearchDecorations(buildSearchDecorations());
+ if (revealActive) {
+ revealActiveMatch();
+ }
+ }
+
+ function revealActiveMatch() {
+ const view = editorView.value;
+ if (!view || searchActiveIndex.value < 0 || searchActiveIndex.value >= searchRanges.length) {
+ applySearchDecorations(buildSearchDecorations());
+ return;
+ }
+
+ const activeRange = searchRanges[searchActiveIndex.value];
+ applySearchDecorations(buildSearchDecorations());
+ view.dispatch({
+ selection: { anchor: activeRange.from, head: activeRange.to },
+ scrollIntoView: true,
+ });
+ }
+
+ function applySearchDecorations(decorations: DecorationSet) {
+ editorView.value?.dispatch({
+ effects: searchDecorations.reconfigure(EditorView.decorations.of(decorations)),
+ });
+ }
+
+ function buildSearchDecorations() {
+ if (searchRanges.length === 0) {
+ return Decoration.none;
+ }
+
+ const decorations = searchRanges.map((range, index) =>
+ Decoration.mark({
+ class: index === searchActiveIndex.value ? "cm-search-match-active" : "cm-search-match",
+ }).range(range.from, range.to),
+ );
+ return Decoration.set(decorations, true);
+ }
+
+ function collectSearchRanges(content: string, query: string) {
+ const ranges: Array<{ from: number; to: number }> = [];
+ if (query === "") {
+ return ranges;
+ }
+
+ let start = 0;
+ while (start <= content.length) {
+ const foundAt = content.indexOf(query, start);
+ if (foundAt === -1) {
+ break;
+ }
+ ranges.push({ from: foundAt, to: foundAt + query.length });
+ start = foundAt + Math.max(query.length, 1);
+ }
+ return ranges;
+ }
+
return {
destroyEditor,
editorView,
+ findNextMatch,
+ findPreviousMatch,
+ focusEditor,
+ isSearchOpen,
mountEditor,
+ openSearch,
+ closeSearch,
+ searchActiveIndex,
+ searchMatchCount,
+ searchQuery,
syncDisabled,
syncExternalCode,
+ updateSearchQuery,
};
}
diff --git a/frontend/src/components/editor/useEditorAutoScroll.ts b/frontend/src/components/editor/useEditorAutoScroll.ts
deleted file mode 100644
index 175f06b..0000000
--- a/frontend/src/components/editor/useEditorAutoScroll.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { Ref, ShallowRef } from "vue";
-import type { EditorView } from "../../lib/codemirror";
-
-type EditorAutoScrollOptions = {
- editorView: ShallowRef;
- isDraggingOver: Ref;
- onScrolled: () => void;
-};
-
-export function useEditorAutoScroll(options: EditorAutoScrollOptions) {
- let autoScrollFrame = 0;
- let autoScrollSpeed = 0;
- const wheelListenerOptions = { capture: true, passive: false } as const;
-
- function handleDesignCardDragWheel(event: WheelEvent) {
- const view = options.editorView.value;
- if (!view || !options.isDraggingOver.value) {
- return;
- }
-
- event.preventDefault();
- view.scrollDOM.scrollTop += event.deltaY;
- view.scrollDOM.scrollLeft += event.deltaX;
- options.onScrolled();
- }
-
- function updateDesignCardAutoScroll(event: DragEvent) {
- const view = options.editorView.value;
- if (!view) {
- return;
- }
-
- const bounds = view.scrollDOM.getBoundingClientRect();
- const edgeSize = Math.min(140, Math.max(72, bounds.height * 0.18));
- const distanceToTop = event.clientY - bounds.top;
- const distanceToBottom = bounds.bottom - event.clientY;
- const maxSpeed = 26;
-
- if (distanceToTop >= 0 && distanceToTop < edgeSize) {
- const strength = (edgeSize - distanceToTop) / edgeSize;
- autoScrollSpeed = -Math.max(5, maxSpeed * strength);
- } else if (distanceToBottom >= 0 && distanceToBottom < edgeSize) {
- const strength = (edgeSize - distanceToBottom) / edgeSize;
- autoScrollSpeed = Math.max(5, maxSpeed * strength);
- } else {
- stopDesignCardAutoScroll();
- return;
- }
-
- if (!autoScrollFrame) {
- autoScrollFrame = window.requestAnimationFrame(runDesignCardAutoScroll);
- }
- }
-
- function runDesignCardAutoScroll() {
- autoScrollFrame = 0;
- const view = options.editorView.value;
- if (!view || !options.isDraggingOver.value || autoScrollSpeed === 0) {
- return;
- }
-
- const before = view.scrollDOM.scrollTop;
- view.scrollDOM.scrollTop += autoScrollSpeed;
- if (view.scrollDOM.scrollTop !== before) {
- options.onScrolled();
- }
-
- autoScrollFrame = window.requestAnimationFrame(runDesignCardAutoScroll);
- }
-
- function stopDesignCardAutoScroll() {
- autoScrollSpeed = 0;
- if (autoScrollFrame) {
- window.cancelAnimationFrame(autoScrollFrame);
- autoScrollFrame = 0;
- }
- }
-
- return {
- handleDesignCardDragWheel,
- stopDesignCardAutoScroll,
- updateDesignCardAutoScroll,
- wheelListenerOptions,
- };
-}
diff --git a/frontend/src/components/editor/useEditorDecorations.ts b/frontend/src/components/editor/useEditorDecorations.ts
new file mode 100644
index 0000000..2974919
--- /dev/null
+++ b/frontend/src/components/editor/useEditorDecorations.ts
@@ -0,0 +1,58 @@
+import { type ComputedRef, type ShallowRef } from "vue";
+import {
+ Compartment,
+ Decoration,
+ type DecorationSet,
+ EditorState,
+ EditorView,
+} from "../../lib/codemirror";
+
+type EditorDecorationsOptions = {
+ editorView: ShallowRef;
+ normalizedCode: ComputedRef;
+ getAnimatedLineRanges: () => Array<{ startLine: number; endLine: number }> | undefined;
+ getAnimationKey: () => number | undefined;
+ getIsStreaming: () => boolean | undefined;
+};
+
+export function useEditorDecorations(options: EditorDecorationsOptions) {
+ const decorationsCompartment = new Compartment();
+
+ function buildDecorations(): DecorationSet {
+ const view = options.editorView.value;
+ const doc = view?.state.doc ?? EditorState.create({ doc: options.normalizedCode.value }).doc;
+ const decorations = [];
+
+ const animatedLines = new Set();
+ void options.getAnimationKey();
+ for (const range of options.getAnimatedLineRanges() ?? []) {
+ for (let line = range.startLine; line <= range.endLine; line += 1) {
+ animatedLines.add(line);
+ }
+ }
+
+ for (const lineNumber of animatedLines) {
+ if (lineNumber >= 1 && lineNumber <= doc.lines) {
+ decorations.push(Decoration.line({ class: "cm-repair-revealed" }).range(doc.line(lineNumber).from));
+ }
+ }
+
+ if (options.getIsStreaming() && doc.lines > 0) {
+ decorations.push(Decoration.line({ class: "cm-streaming-line" }).range(doc.line(doc.lines).from));
+ }
+
+ return Decoration.set(decorations, true);
+ }
+
+ function reconfigureDecorations() {
+ options.editorView.value?.dispatch({
+ effects: decorationsCompartment.reconfigure(EditorView.decorations.of(buildDecorations())),
+ });
+ }
+
+ return {
+ buildDecorations,
+ decorationsCompartment,
+ reconfigureDecorations,
+ };
+}
diff --git a/frontend/src/components/editor/useEditorDesignCardDecorations.ts b/frontend/src/components/editor/useEditorDesignCardDecorations.ts
deleted file mode 100644
index 543b056..0000000
--- a/frontend/src/components/editor/useEditorDesignCardDecorations.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ref, type ComputedRef, type ShallowRef } from "vue";
-import {
- Compartment,
- Decoration,
- type DecorationSet,
- EditorState,
- EditorView,
-} from "../../lib/codemirror";
-import type { DesignCard, DesignCardPlacement } from "../../features/designCard/services/designCardTypes";
-import { DesignCardCodeWidget } from "./DesignCardCodeWidget";
-
-type EditorDesignCardDecorationsOptions = {
- editorView: ShallowRef;
- normalizedCode: ComputedRef;
- getDesignCards: () => DesignCard[] | undefined;
- getDesignCardPlacements: () => DesignCardPlacement[] | undefined;
- getAnimatedLineRanges: () => Array<{ startLine: number; endLine: number }> | undefined;
- getAnimationKey: () => number | undefined;
- getIsStreaming: () => boolean | undefined;
- onDeleteCard: (cardId: string) => void;
- onMoveCard: (payload: { cardId: string; delta: number }) => void;
- onOpenCard: (cardId: string) => void;
-};
-
-export function useEditorDesignCardDecorations(options: EditorDesignCardDecorationsOptions) {
- const cardDecorations = new Compartment();
- const cardViewportWidth = ref(0);
-
- function buildDecorations(): DecorationSet {
- const view = options.editorView.value;
- const doc = view?.state.doc ?? EditorState.create({ doc: options.normalizedCode.value }).doc;
- const decorations = [];
- const cardMap = new Map((options.getDesignCards() ?? []).map((card) => [card.id, card]));
-
- for (const placement of options.getDesignCardPlacements() ?? []) {
- const card = cardMap.get(placement.cardId);
- if (!card) {
- continue;
- }
-
- const afterLine = Math.max(
- 1,
- Math.min(doc.lines, Number.isFinite(placement.afterLine) ? placement.afterLine : doc.lines),
- );
- const position = doc.line(afterLine).to;
- decorations.push(
- Decoration.widget({
- block: true,
- side: 1,
- widget: new DesignCardCodeWidget(card, {
- delete: options.onDeleteCard,
- move: options.onMoveCard,
- open: options.onOpenCard,
- }, cardViewportWidth.value),
- }).range(position),
- );
- }
-
- const animatedLines = new Set();
- void options.getAnimationKey();
- for (const range of options.getAnimatedLineRanges() ?? []) {
- for (let line = range.startLine; line <= range.endLine; line += 1) {
- animatedLines.add(line);
- }
- }
-
- for (const lineNumber of animatedLines) {
- if (lineNumber >= 1 && lineNumber <= doc.lines) {
- decorations.push(Decoration.line({ class: "cm-repair-revealed" }).range(doc.line(lineNumber).from));
- }
- }
-
- if (options.getIsStreaming() && doc.lines > 0) {
- decorations.push(Decoration.line({ class: "cm-streaming-line" }).range(doc.line(doc.lines).from));
- }
-
- return Decoration.set(decorations, true);
- }
-
- function reconfigureDecorations() {
- options.editorView.value?.dispatch({
- effects: cardDecorations.reconfigure(EditorView.decorations.of(buildDecorations())),
- });
- }
-
- function updateCardViewportWidth(view: EditorView) {
- const gutterWidth = view.dom.querySelector(".cm-gutters")?.getBoundingClientRect().width ?? 0;
- const nextWidth = Math.max(0, Math.floor(view.scrollDOM.clientWidth - gutterWidth));
- if (Math.abs(nextWidth - cardViewportWidth.value) < 1) {
- return;
- }
-
- cardViewportWidth.value = nextWidth;
- reconfigureDecorations();
- }
-
- return {
- buildDecorations,
- cardDecorations,
- reconfigureDecorations,
- updateCardViewportWidth,
- };
-}
diff --git a/frontend/src/components/editor/useEditorDesignCardDrop.ts b/frontend/src/components/editor/useEditorDesignCardDrop.ts
deleted file mode 100644
index 7ad147e..0000000
--- a/frontend/src/components/editor/useEditorDesignCardDrop.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { Ref, ShallowRef } from "vue";
-import type { EditorView } from "../../lib/codemirror";
-import {
- hasDesignCardDragData,
- readDesignCardDragData,
- type DesignCardDragSource,
-} from "../../features/designCard/services/designCardDragData";
-
-type EditorDesignCardDropOptions = {
- editorView: ShallowRef;
- isDraggingOver: Ref;
- getViewportAnchorLine: (view: EditorView) => number;
- onPlaceCard: (payload: { cardId: string; afterLine: number; source: DesignCardDragSource }) => void;
- onUpdateAutoScroll: (event: DragEvent) => void;
- onStopAutoScroll: () => void;
-};
-
-export function useEditorDesignCardDrop(options: EditorDesignCardDropOptions) {
- function handleHostDragOver(event: DragEvent) {
- if (!hasDesignCardDragData(event.dataTransfer)) {
- return;
- }
-
- event.preventDefault();
- options.isDraggingOver.value = true;
- options.onUpdateAutoScroll(event);
- if (event.dataTransfer) {
- event.dataTransfer.dropEffect = "move";
- }
- }
-
- function handleHostDrop(event: DragEvent) {
- const dragData = readDesignCardDragData(event.dataTransfer);
- if (!dragData) {
- return;
- }
-
- const view = options.editorView.value;
- if (!view) {
- return;
- }
-
- event.preventDefault();
- options.isDraggingOver.value = false;
- options.onStopAutoScroll();
- placeCardFromEvent(event, view, dragData.cardId, dragData.source);
- }
-
- function handleDragLeave(event: DragEvent) {
- if (
- event.currentTarget instanceof HTMLElement &&
- event.relatedTarget instanceof Node &&
- event.currentTarget.contains(event.relatedTarget)
- ) {
- return;
- }
-
- clearDesignCardDragOver();
- }
-
- function clearDesignCardDragOver() {
- options.isDraggingOver.value = false;
- options.onStopAutoScroll();
- }
-
- function placeCardFromEvent(
- event: DragEvent,
- view: EditorView,
- cardId: string,
- source: DesignCardDragSource,
- ) {
- const position = view.posAtCoords({ x: event.clientX, y: event.clientY });
- const afterLine = position === null
- ? options.getViewportAnchorLine(view)
- : view.state.doc.lineAt(position).number;
- options.onPlaceCard({ cardId, afterLine, source });
- }
-
- return {
- clearDesignCardDragOver,
- handleDragLeave,
- handleHostDragOver,
- handleHostDrop,
- };
-}
diff --git a/frontend/src/components/editor/useEditorViewportAnchor.ts b/frontend/src/components/editor/useEditorViewportAnchor.ts
deleted file mode 100644
index 9d42348..0000000
--- a/frontend/src/components/editor/useEditorViewportAnchor.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ShallowRef } from "vue";
-import type { EditorView } from "../../lib/codemirror";
-
-type EditorViewportAnchorOptions = {
- editorView: ShallowRef;
- onAnchorLine: (line: number) => void;
-};
-
-export function useEditorViewportAnchor(options: EditorViewportAnchorOptions) {
- let anchorFrame = 0;
-
- function scheduleAnchorLineUpdate() {
- if (anchorFrame) {
- window.cancelAnimationFrame(anchorFrame);
- }
-
- anchorFrame = window.requestAnimationFrame(() => {
- anchorFrame = 0;
- const view = options.editorView.value;
- if (!view) {
- return;
- }
- options.onAnchorLine(getViewportAnchorLine(view));
- });
- }
-
- function cancelAnchorLineUpdate() {
- if (anchorFrame) {
- window.cancelAnimationFrame(anchorFrame);
- anchorFrame = 0;
- }
- }
-
- function getViewportAnchorLine(view: EditorView) {
- const visible = view.visibleRanges[0];
- if (!visible) {
- return view.state.doc.lineAt(view.state.selection.main.head).number;
- }
-
- const middle = Math.round((visible.from + visible.to) / 2);
- return view.state.doc.lineAt(middle).number;
- }
-
- return {
- cancelAnchorLineUpdate,
- getViewportAnchorLine,
- scheduleAnchorLineUpdate,
- };
-}
diff --git a/frontend/src/components/editor/useFluidScrim.ts b/frontend/src/components/editor/useFluidScrim.ts
new file mode 100644
index 0000000..bb85f3b
--- /dev/null
+++ b/frontend/src/components/editor/useFluidScrim.ts
@@ -0,0 +1,176 @@
+import { onBeforeUnmount } from "vue";
+
+type Rgba = [number, number, number, number];
+type ThemeId = "moon" | "warm" | "cyan" | "black";
+
+const PALETTES: Record> = {
+ moon: [
+ { pos: 0, rgba: [245, 245, 242, 0.55] },
+ { pos: 0.5, rgba: [212, 210, 205, 0.4] },
+ { pos: 0.82, rgba: [182, 180, 175, 0.18] },
+ { pos: 1, rgba: [182, 180, 175, 0] },
+ ],
+ warm: [
+ { pos: 0, rgba: [245, 188, 172, 0.55] },
+ { pos: 0.5, rgba: [232, 168, 151, 0.4] },
+ { pos: 0.82, rgba: [245, 210, 200, 0.18] },
+ { pos: 1, rgba: [245, 210, 200, 0] },
+ ],
+ cyan: [
+ { pos: 0, rgba: [240, 248, 252, 0.75] },
+ { pos: 0.5, rgba: [170, 205, 225, 0.6] },
+ { pos: 0.82, rgba: [140, 180, 210, 0.28] },
+ { pos: 1, rgba: [140, 180, 210, 0] },
+ ],
+ black: [
+ { pos: 0, rgba: [240, 240, 238, 0.55] },
+ { pos: 0.5, rgba: [200, 200, 198, 0.38] },
+ { pos: 0.82, rgba: [170, 170, 168, 0.16] },
+ { pos: 1, rgba: [170, 170, 168, 0] },
+ ],
+};
+
+const RENDER_SCALE = 0.5;
+const ANCHOR_MIN = 0.25;
+const ANCHOR_MAX = 0.75;
+const ORBIT_X = 0.14;
+const ORBIT_Y = 0.11;
+const FREQ_X = 0.73;
+const FREQ_Y = 0.51;
+const PHASE = 1.2;
+const NOISE_AMP = 0.02;
+const SPRING_K = 0.03;
+const TIME_SCALE = 0.4;
+const RADIUS_RATIO = 0.24;
+const BREATH_AMP = 0.1;
+const BREATH_FREQ = 0.45;
+
+function currentTheme(): ThemeId {
+ const id = document.documentElement.dataset.theme;
+ if (id === "moon" || id === "warm" || id === "cyan" || id === "black") {
+ return id;
+ }
+ return "moon";
+}
+
+function clampAnchor(v: number) {
+ return Math.max(ANCHOR_MIN, Math.min(ANCHOR_MAX, v));
+}
+
+export function useFluidScrim() {
+ let canvas: HTMLCanvasElement | null = null;
+ let ctx: CanvasRenderingContext2D | null = null;
+ let raf = 0;
+ let width = 0;
+ let height = 0;
+ let cssWidth = 0;
+ let cssHeight = 0;
+ let running = false;
+ let targetX = 0.5;
+ let targetY = 0.5;
+ let planetX = 0.5;
+ let planetY = 0.5;
+ let startTime = 0;
+ let theme: ThemeId = currentTheme();
+ let themeObserver: MutationObserver | null = null;
+
+ function attach(el: HTMLCanvasElement) {
+ canvas = el;
+ ctx = el.getContext("2d");
+ if (!ctx) {
+ return;
+ }
+ theme = currentTheme();
+ resize();
+ planetX = 0.5;
+ planetY = 0.5;
+ startTime = performance.now();
+ startThemeObserver();
+ running = true;
+ raf = requestAnimationFrame(loop);
+ }
+
+ function detach() {
+ running = false;
+ if (raf) {
+ cancelAnimationFrame(raf);
+ raf = 0;
+ }
+ themeObserver?.disconnect();
+ themeObserver = null;
+ ctx?.clearRect(0, 0, width, height);
+ canvas = null;
+ ctx = null;
+ }
+
+ function startThemeObserver() {
+ themeObserver = new MutationObserver(() => {
+ theme = currentTheme();
+ });
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
+ });
+ }
+
+ function resize() {
+ if (!canvas || !ctx) {
+ return;
+ }
+ const rect = canvas.getBoundingClientRect();
+ cssWidth = rect.width || 1;
+ cssHeight = rect.height || 1;
+ width = canvas.width = Math.max(1, Math.floor(cssWidth * RENDER_SCALE));
+ height = canvas.height = Math.max(1, Math.floor(cssHeight * RENDER_SCALE));
+ }
+
+ function setAnchor(offsetX: number, offsetY: number) {
+ if (!cssWidth || !cssHeight) {
+ return;
+ }
+ targetX = clampAnchor(0.5 + offsetX / cssWidth);
+ targetY = clampAnchor(0.5 + offsetY / cssHeight);
+ }
+
+ function draw(radiusScale: number) {
+ if (!ctx) {
+ return;
+ }
+ const x = planetX * width;
+ const y = planetY * height;
+ const r = width * RADIUS_RATIO * radiusScale;
+ const grad = ctx.createRadialGradient(x, y, 0, x, y, r);
+ const stops = PALETTES[theme];
+ for (const stop of stops) {
+ const [cr, cg, cb, ca] = stop.rgba;
+ grad.addColorStop(stop.pos, `rgba(${cr},${cg},${cb},${ca})`);
+ }
+ ctx.clearRect(0, 0, width, height);
+ ctx.fillStyle = grad;
+ ctx.beginPath();
+ ctx.arc(x, y, r, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ function loop() {
+ if (!ctx || !running) {
+ return;
+ }
+ const t = (performance.now() - startTime) * 0.001 * TIME_SCALE;
+ const offX = Math.sin(t * FREQ_X + PHASE) * ORBIT_X;
+ const offY = Math.cos(t * FREQ_Y) * ORBIT_Y;
+ const noiseX = Math.sin(t * 2.1) * NOISE_AMP;
+ const noiseY = Math.cos(t * 1.7) * NOISE_AMP;
+ const destX = targetX + offX + noiseX;
+ const destY = targetY + offY + noiseY;
+ planetX += (destX - planetX) * SPRING_K;
+ planetY += (destY - planetY) * SPRING_K;
+ const breath = 1 + Math.sin(t * BREATH_FREQ) * BREATH_AMP;
+ draw(breath);
+ raf = requestAnimationFrame(loop);
+ }
+
+ onBeforeUnmount(detach);
+
+ return { attach, detach, resize, setAnchor };
+}
\ No newline at end of file
diff --git a/frontend/src/components/note/NoteAIIcon.vue b/frontend/src/components/note/NoteAIIcon.vue
new file mode 100644
index 0000000..08e5366
--- /dev/null
+++ b/frontend/src/components/note/NoteAIIcon.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/note/NoteContextMenu.vue b/frontend/src/components/note/NoteContextMenu.vue
index 3be0e76..6b57076 100644
--- a/frontend/src/components/note/NoteContextMenu.vue
+++ b/frontend/src/components/note/NoteContextMenu.vue
@@ -1,14 +1,17 @@
-
+
+import NoteAIIcon from "./NoteAIIcon.vue";
+
+defineProps<{
+ disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+ design: [];
+ generate: [];
+}>();
+
+
+
+
+
+
+ 卡片
+
+
+
+ 可视化
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/note/panel/NoteDocumentArea.vue b/frontend/src/components/note/panel/NoteDocumentArea.vue
index 9e02df0..42355c0 100644
--- a/frontend/src/components/note/panel/NoteDocumentArea.vue
+++ b/frontend/src/components/note/panel/NoteDocumentArea.vue
@@ -10,6 +10,7 @@ defineProps<{
currentFile: string;
dropInsertionPoint: NoteDropInsertionPoint | null;
editableMarkdown: string;
+ isSceneSwitching?: boolean;
renderBlocks: NoteRenderBlock[];
selectedImagePaths: Set;
shouldShowMarkdownInput: boolean;
@@ -43,6 +44,7 @@ const fileInput = defineModel("fileInput", { default: n
diff --git a/frontend/src/components/note/panel/NotePanelShell.vue b/frontend/src/components/note/panel/NotePanelShell.vue
index d960f6c..94b7476 100644
--- a/frontend/src/components/note/panel/NotePanelShell.vue
+++ b/frontend/src/components/note/panel/NotePanelShell.vue
@@ -1,69 +1,52 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/frontend/src/components/note/panel/NotebookDividerHandle.vue b/frontend/src/components/note/panel/NotebookDividerHandle.vue
new file mode 100644
index 0000000..c382777
--- /dev/null
+++ b/frontend/src/components/note/panel/NotebookDividerHandle.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/note/useNoteAIActions.ts b/frontend/src/components/note/useNoteAIActions.ts
index a116c0e..f3e7124 100644
--- a/frontend/src/components/note/useNoteAIActions.ts
+++ b/frontend/src/components/note/useNoteAIActions.ts
@@ -1,10 +1,15 @@
-import type { AINoteSelectionPayload } from "../../features/ai/services/aiTypes";
+import type {
+ AINoteSceneActionRequest,
+ AINoteSelectionPayload,
+} from "../../features/ai/services/aiTypes";
type NoteAIActionsOptions = {
buildSelectionPayload: () => AINoteSelectionPayload | null;
closeContextMenu: () => void;
- onDesign: (selection: AINoteSelectionPayload) => void;
- onGenerate: (selection: AINoteSelectionPayload) => void;
+ currentFile: () => string;
+ getDocumentMarkdown: () => string;
+ onDesign: (request: AINoteSceneActionRequest) => void;
+ onGenerate: (request: AINoteSceneActionRequest) => void;
};
export function useNoteAIActions(options: NoteAIActionsOptions) {
@@ -17,22 +22,42 @@ export function useNoteAIActions(options: NoteAIActionsOptions) {
}
function runAIAction(kind: "generate" | "design") {
- const selection = options.buildSelectionPayload();
- if (!selection) {
+ const sceneName = options.currentFile().trim();
+ const selection = resolveSelection();
+ if (!selection || !sceneName) {
options.closeContextMenu();
return;
}
+ const request = { sceneName, selection };
if (kind === "design") {
- options.onDesign(selection);
+ options.onDesign(request);
} else {
- options.onGenerate(selection);
+ options.onGenerate(request);
}
options.closeContextMenu();
}
+ function resolveSelection(): AINoteSelectionPayload | null {
+ const selected = options.buildSelectionPayload();
+ if (selected?.items.length) {
+ return selected;
+ }
+ return buildFullDocumentSelection(options.getDocumentMarkdown());
+ }
+
return {
runAIDesign,
runAIGeneration,
};
}
+
+function buildFullDocumentSelection(markdown: string): AINoteSelectionPayload | null {
+ const text = markdown.trim();
+ if (!text) {
+ return null;
+ }
+ return {
+ items: [{ kind: "text", text }],
+ };
+}
diff --git a/frontend/src/components/note/useNoteContextSelection.ts b/frontend/src/components/note/useNoteContextSelection.ts
index 9c8ac94..bc208b4 100644
--- a/frontend/src/components/note/useNoteContextSelection.ts
+++ b/frontend/src/components/note/useNoteContextSelection.ts
@@ -8,6 +8,7 @@ import type { DesignCard } from "../../features/designCard/services/designCardTy
import type { NoteDocument } from "../../features/notebook/services/notebookStorage";
type NoteContextSelectionOptions = {
+ canOpenEmptyMenu: () => boolean;
designCards: () => DesignCard[];
document: () => NoteDocument;
selectedImageOrder: Ref
>;
@@ -28,11 +29,17 @@ export function useNoteContextSelection(options: NoteContextSelectionOptions) {
options.selectedImageOrder.value,
),
);
+ const contextMenuHasSelection = computed(() => hasSelection());
+ const contextMenuSupportsInsert = computed(
+ () => options.canOpenEmptyMenu() && !contextMenuHasSelection.value,
+ );
function handleContextMenu(event: MouseEvent) {
const relativePath = options.resolveImagePathFromEventTarget(event.target);
+ const isNotebookTarget =
+ event.target instanceof Node && !!options.notebookRoot.value?.contains(event.target);
const hasContextSelection = relativePath !== "" || isTextSelectionContextTarget(event.target);
- if (!hasContextSelection) {
+ if (!hasContextSelection && !isNotebookTarget) {
closeContextMenu();
return;
}
@@ -42,7 +49,7 @@ export function useNoteContextSelection(options: NoteContextSelectionOptions) {
options.ensureImageSelection(relativePath);
}
syncTextSelection();
- if (!hasSelection()) {
+ if (!hasSelection() && !options.canOpenEmptyMenu()) {
closeContextMenu();
return;
}
@@ -150,7 +157,9 @@ export function useNoteContextSelection(options: NoteContextSelectionOptions) {
buildSelectionPayload,
closeContextMenu,
contextMenu,
+ contextMenuHasSelection,
contextMenuImages,
+ contextMenuSupportsInsert,
handleContextMenu,
handleTextSelectionChange,
};
diff --git a/frontend/src/components/note/useNotePanelWindow.ts b/frontend/src/components/note/useNotePanelWindow.ts
index 1e50f79..996fc86 100644
--- a/frontend/src/components/note/useNotePanelWindow.ts
+++ b/frontend/src/components/note/useNotePanelWindow.ts
@@ -46,10 +46,7 @@ export function useNotePanelWindow(options: NotePanelWindowOptions) {
}
options.maybeStopEditingFromPointerDown(target);
-
- if (!options.notebookRoot.value?.contains(target)) {
- options.closeContextMenu();
- }
+ options.closeContextMenu();
}
return {
diff --git a/frontend/src/components/sidebar/SceneList.vue b/frontend/src/components/sidebar/SceneList.vue
index 86dd413..a8f635f 100644
--- a/frontend/src/components/sidebar/SceneList.vue
+++ b/frontend/src/components/sidebar/SceneList.vue
@@ -25,7 +25,6 @@ const animatedNames = ref>({});
const draggingScript = ref("");
const armedDragScript = ref("");
const dropTarget = ref<{ script: string; position: "before" | "after" } | null>(null);
-const sceneItemElements = new Map();
const dragPreview = ref({ left: 0, top: 0, width: 0 });
let dragArmTimer: number | null = null;
let activePointerId: number | null = null;
@@ -174,7 +173,7 @@ function armDrag(script: string, event: PointerEvent) {
closeContextOnly();
activePointerId = event.pointerId;
dragArmTimer = window.setTimeout(() => {
- const sourceElement = sceneItemElements.get(script);
+ const sourceElement = resolveSceneItemElement(script);
const sourceBounds = sourceElement?.getBoundingClientRect();
if (sourceBounds) {
dragPointerOffsetY = event.clientY - sourceBounds.top;
@@ -228,7 +227,7 @@ function updateDropTarget(pointerY: number) {
.filter((script) => script.name !== draggingScript.value)
.map((script) => ({
script: script.name,
- element: sceneItemElements.get(script.name),
+ element: resolveSceneItemElement(script.name),
}))
.filter((entry): entry is { script: string; element: HTMLElement } => !!entry.element);
@@ -316,13 +315,15 @@ function handleSelect(script: string) {
emit("select", script);
}
-function setSceneItemElement(script: string, element: Element | null) {
- if (!(element instanceof HTMLElement)) {
- sceneItemElements.delete(script);
- return;
+function resolveSceneItemElement(script: string) {
+ const items = document.querySelectorAll(".scene-list [data-scene-name]");
+ for (const item of items) {
+ if (item.dataset.sceneName === script) {
+ return item;
+ }
}
- sceneItemElements.set(script, element);
+ return null;
}
function animateTyping(script: string) {
@@ -390,7 +391,7 @@ function reorderScripts(
-
+
-
+
- 
+
+
+
+
+ 
- 
- 
- 
- 
+