From e4aa0dce86fe14104407578bc368c0db7599f2f7 Mon Sep 17 00:00:00 2001 From: th Date: Sun, 19 Apr 2026 19:32:23 +0200 Subject: [PATCH] bak --- src/App.vue | 199 ++++++++- src/components/Timeline.vue | 44 +- src/components/WelcomeDialog.vue | 370 +++++++++++++++++ src/devtools/TestOverlay.vue | 685 +++++++++++++++++++++++++++++++ src/devtools/testRunner.ts | 185 +++++++++ src/devtools/tests.ts | 525 +++++++++++++++++++++++ src/lib/projectFile.ts | 91 ++++ src/lib/projectStore.ts | 124 ++++++ src/lib/timelineSnap.ts | 26 ++ src/stores/scene.ts | 6 + todo | 4 + 11 files changed, 2227 insertions(+), 32 deletions(-) create mode 100644 src/components/WelcomeDialog.vue create mode 100644 src/devtools/TestOverlay.vue create mode 100644 src/devtools/testRunner.ts create mode 100644 src/devtools/tests.ts create mode 100644 src/lib/projectFile.ts create mode 100644 src/lib/projectStore.ts create mode 100644 src/lib/timelineSnap.ts diff --git a/src/App.vue b/src/App.vue index b8c7670..ae2b7f1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,6 +2,8 @@ import { onBeforeUnmount, onMounted, ref } from 'vue' import { PhExport, + PhFolderOpen, + PhFloppyDisk, PhGearSix, PhPause, PhPlay, @@ -15,11 +17,32 @@ import DocumentSettings from './components/DocumentSettings.vue' import ExportDialog from './components/ExportDialog.vue' import PropertiesPanel from './components/PropertiesPanel.vue' import Timeline from './components/Timeline.vue' +import WelcomeDialog from './components/WelcomeDialog.vue' +import TestOverlay from './devtools/TestOverlay.vue' import { usePlaybackLoop } from './composables/usePlaybackLoop' +import { + ProjectFileError, + downloadProject, + pickProjectFile, + readProjectFile, +} from './lib/projectFile' +import { + getLastOpenedId, + listRecentProjects, + saveProjectToStore, + setLastOpenedId, + type StoredProject, +} from './lib/projectStore' import { useSceneStore } from './stores/scene' const settingsOpen = ref(false) const exportOpen = ref(false) +const testsOpen = ref(false) +const welcomeOpen = ref(false) +const loadError = ref(null) +const savedToast = ref(null) +const currentProjectId = ref(null) +const currentProjectName = ref(null) usePlaybackLoop() const store = useSceneStore() @@ -32,6 +55,87 @@ function stop() { store.pause() } +async function saveProject() { + const scene = JSON.parse(JSON.stringify(store.scene)) + let name = currentProjectName.value + if (!name) { + const suggested = `Projekt ${new Date().toLocaleDateString()}` + const entered = prompt('Projektname?', suggested) + if (entered === null) return + name = entered.trim() || suggested + } + const rec = await saveProjectToStore(scene, { + id: currentProjectId.value ?? undefined, + name, + }) + currentProjectId.value = rec.id + currentProjectName.value = rec.name + setLastOpenedId(rec.id) + showSavedToast(`"${rec.name}" gespeichert`) +} + +function exportProjectFile() { + const scene = JSON.parse(JSON.stringify(store.scene)) + const base = currentProjectName.value ?? 'animatr' + const safe = base.replace(/[^a-z0-9äöüß_-]+/gi, '-').replace(/^-+|-+$/g, '') || 'animatr' + downloadProject(scene, `${safe}.json`) +} + +async function importFromFile() { + const file = await pickProjectFile() + if (!file) return + const hasContent = store.scene.layers.length > 0 || store.scene.assets.length > 0 + if (hasContent) { + const ok = confirm( + 'Aktuelles Projekt wird durch die geladene Datei ersetzt. Ungespeicherte Änderungen gehen verloren. Fortfahren?', + ) + if (!ok) return + } + try { + const scene = await readProjectFile(file) + store.loadScene(scene) + currentProjectId.value = null + currentProjectName.value = file.name.replace(/\.[^.]+$/, '') + loadError.value = null + } catch (err) { + const msg = + err instanceof ProjectFileError ? err.message : (err as Error).message || String(err) + loadError.value = msg + setTimeout(() => { + loadError.value = null + }, 6000) + } +} + +function openFromRecent(project: StoredProject) { + store.loadScene(JSON.parse(JSON.stringify(project.scene))) + currentProjectId.value = project.id + currentProjectName.value = project.name + setLastOpenedId(project.id) + loadError.value = null +} + +function showSavedToast(msg: string) { + savedToast.value = msg + setTimeout(() => { + if (savedToast.value === msg) savedToast.value = null + }, 2500) +} + +async function bootWelcome() { + const recents = await listRecentProjects() + if (recents.length > 0) { + welcomeOpen.value = true + const lastId = getLastOpenedId() + if (lastId) { + const last = recents.find((p) => p.id === lastId) + if (last) { + currentProjectName.value = last.name + } + } + } +} + function isEditable(el: EventTarget | null): boolean { if (!(el instanceof HTMLElement)) return false const tag = el.tagName @@ -41,13 +145,21 @@ function isEditable(el: EventTarget | null): boolean { } function onKeyDown(e: KeyboardEvent) { + if (e.ctrlKey && e.shiftKey && e.altKey && (e.code === 'KeyT' || e.key.toLowerCase() === 't')) { + e.preventDefault() + testsOpen.value = true + return + } if (e.code !== 'Space') return if (isEditable(e.target)) return e.preventDefault() store.togglePlay() } -onMounted(() => document.addEventListener('keydown', onKeyDown)) +onMounted(() => { + document.addEventListener('keydown', onKeyDown) + bootWelcome() +}) onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown)) @@ -79,6 +191,15 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown)) {{ store.playhead.toFixed(2) }}s / {{ store.scene.duration }}s
+ + {{ currentProjectName }} + + + @@ -94,6 +215,23 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
+ + + + + + +
{{ savedToast }}
+
@@ -259,4 +397,63 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown)) border-top: 1px solid var(--border); overflow: hidden; } + +.load-error { + position: fixed; + bottom: 240px; + left: 50%; + transform: translateX(-50%); + z-index: 1500; + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 14px; + background: var(--danger-soft); + color: var(--danger); + border: 1px solid var(--danger); + border-radius: var(--radius); + box-shadow: var(--shadow-md); + font-size: 12px; + max-width: 520px; +} + +.saved-toast { + position: fixed; + bottom: 240px; + left: 50%; + transform: translateX(-50%); + z-index: 1500; + padding: 8px 14px; + background: var(--panel); + border: 1px solid var(--border-strong); + color: var(--text); + border-radius: var(--radius); + box-shadow: var(--shadow-md); + font-size: 12px; +} + +.project-name { + display: inline-flex; + align-items: center; + max-width: 220px; + padding: 4px 10px; + font-size: 11px; + color: var(--text-dim-strong); + background: var(--panel-alt); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 4px; +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity 140ms var(--ease); +} +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 528d8ff..8c2e54b 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -3,6 +3,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { PhArrowsSplit, PhCheck, PhCopy, PhMagnet, PhTrash } from '@phosphor-icons/vue' import { useSceneStore } from '@/stores/scene' import { sampleLayer } from '@/lib/interpolate' +import { snapToCandidates } from '@/lib/timelineSnap' import type { AnimatableProps, Easing, Keyframe, Layer } from '@/types/scene' interface TimelineTrack { @@ -51,44 +52,25 @@ const snapEnabled = ref(true) const SNAP_PX = 8 -function allKeyframeTimes(): number[] { +function allKeyframeTimes(ignoreKeyframeId?: string): number[] { const out: number[] = [] for (const layer of store.scene.layers) { - for (const k of layer.keyframes) out.push(k.time) - if (layer.positionKeyframes) for (const k of layer.positionKeyframes) out.push(k.time) - if (layer.rotationKeyframes) for (const k of layer.rotationKeyframes) out.push(k.time) + for (const k of layer.keyframes) if (k.id !== ignoreKeyframeId) out.push(k.time) + if (layer.positionKeyframes) + for (const k of layer.positionKeyframes) if (k.id !== ignoreKeyframeId) out.push(k.time) + if (layer.rotationKeyframes) + for (const k of layer.rotationKeyframes) if (k.id !== ignoreKeyframeId) out.push(k.time) } return out } function snapTime(t: number, ignoreKeyframeId?: string): number { - if (!snapEnabled.value) return t - const pps = effectivePxPerSec.value - if (pps <= 0) return t - const thresholdTime = SNAP_PX / pps - let best = t - let bestDist = thresholdTime - const times = ignoreKeyframeId ? keyframeTimesExcept(ignoreKeyframeId) : allKeyframeTimes() - for (const kt of times) { - const d = Math.abs(kt - t) - if (d <= bestDist) { - bestDist = d - best = kt - } - } - return clamp(best, 0, duration.value) -} - -function keyframeTimesExcept(id: string): number[] { - const out: number[] = [] - for (const layer of store.scene.layers) { - for (const k of layer.keyframes) if (k.id !== id) out.push(k.time) - if (layer.positionKeyframes) - for (const k of layer.positionKeyframes) if (k.id !== id) out.push(k.time) - if (layer.rotationKeyframes) - for (const k of layer.rotationKeyframes) if (k.id !== id) out.push(k.time) - } - return out + return snapToCandidates(t, allKeyframeTimes(ignoreKeyframeId), { + enabled: snapEnabled.value, + pxPerSec: effectivePxPerSec.value, + pixelThreshold: SNAP_PX, + duration: duration.value, + }) } const TICK_CANDIDATES_SEC = [0.1, 0.2, 0.5, 1, 2, 5, 10, 30, 60, 300] diff --git a/src/components/WelcomeDialog.vue b/src/components/WelcomeDialog.vue new file mode 100644 index 0000000..73d5463 --- /dev/null +++ b/src/components/WelcomeDialog.vue @@ -0,0 +1,370 @@ + + + + + diff --git a/src/devtools/TestOverlay.vue b/src/devtools/TestOverlay.vue new file mode 100644 index 0000000..cb45430 --- /dev/null +++ b/src/devtools/TestOverlay.vue @@ -0,0 +1,685 @@ + + + + + diff --git a/src/devtools/testRunner.ts b/src/devtools/testRunner.ts new file mode 100644 index 0000000..548081f --- /dev/null +++ b/src/devtools/testRunner.ts @@ -0,0 +1,185 @@ +export interface TestResult { + suite: string + name: string + ok: boolean + error?: string + stack?: string + durationMs: number +} + +interface SuiteDef { + name: string + tests: { name: string; fn: () => void | Promise }[] + beforeEach?: () => void | Promise + afterEach?: () => void | Promise +} + +const suites: SuiteDef[] = [] +let current: SuiteDef | null = null + +export function suite(name: string, fn: () => void): void { + const prev = current + current = { name, tests: [] } + try { + fn() + suites.push(current) + } finally { + current = prev + } +} + +export function test(name: string, fn: () => void | Promise): void { + if (!current) throw new Error(`test("${name}") called outside of suite()`) + current.tests.push({ name, fn }) +} + +export function beforeEach(fn: () => void | Promise): void { + if (!current) throw new Error('beforeEach outside of suite()') + current.beforeEach = fn +} + +export function afterEach(fn: () => void | Promise): void { + if (!current) throw new Error('afterEach outside of suite()') + current.afterEach = fn +} + +class Expectation { + constructor(private value: unknown) {} + + toBe(expected: unknown): void { + if (!Object.is(this.value, expected)) { + throw new Error(`expected ${this.fmt(expected)}, got ${this.fmt(this.value)}`) + } + } + + toEqual(expected: unknown): void { + const a = JSON.stringify(this.value) + const b = JSON.stringify(expected) + if (a !== b) throw new Error(`expected ${b}, got ${a}`) + } + + toBeCloseTo(expected: number, precision = 4): void { + const v = this.value as number + const eps = Math.pow(10, -precision) / 2 + if (Math.abs(v - expected) > eps) { + throw new Error(`expected ≈${expected} (p=${precision}), got ${v}`) + } + } + + toBeTruthy(): void { + if (!this.value) throw new Error(`expected truthy, got ${this.fmt(this.value)}`) + } + + toBeFalsy(): void { + if (this.value) throw new Error(`expected falsy, got ${this.fmt(this.value)}`) + } + + toBeNull(): void { + if (this.value !== null) throw new Error(`expected null, got ${this.fmt(this.value)}`) + } + + toBeDefined(): void { + if (this.value === undefined) throw new Error('expected defined value, got undefined') + } + + toBeGreaterThan(n: number): void { + if (!((this.value as number) > n)) throw new Error(`expected > ${n}, got ${this.value}`) + } + + toBeLessThan(n: number): void { + if (!((this.value as number) < n)) throw new Error(`expected < ${n}, got ${this.value}`) + } + + toContain(sub: string): void { + const s = this.value as string + if (!s || !s.includes(sub)) { + throw new Error(`expected string to contain ${JSON.stringify(sub)}`) + } + } + + toHaveLength(n: number): void { + const l = (this.value as { length: number }).length + if (l !== n) throw new Error(`expected length ${n}, got ${l}`) + } + + private fmt(v: unknown): string { + if (v === undefined) return 'undefined' + try { + return JSON.stringify(v) + } catch { + return String(v) + } + } +} + +export function expect(value: unknown): Expectation { + return new Expectation(value) +} + +function cleanStack(stack: string | undefined): string | undefined { + if (!stack) return undefined + const lines = stack.split('\n') + const filtered = lines.filter((l) => { + if (l.includes('/testRunner.ts')) return false + if (l.includes('/testRunner.js')) return false + if (l.includes('node_modules')) return false + return true + }) + return filtered.slice(0, 10).join('\n') +} + +export interface RunOptions { + onProgress?: (done: number, total: number) => void + onTestStart?: (suite: string, name: string) => void + interTestDelayMs?: number +} + +export async function runAll( + register: () => void, + opts: RunOptions = {}, +): Promise { + suites.length = 0 + register() + const total = suites.reduce((a, s) => a + s.tests.length, 0) + const results: TestResult[] = [] + let done = 0 + const delay = Math.max(0, opts.interTestDelayMs ?? 0) + for (const s of suites) { + for (const t of s.tests) { + opts.onTestStart?.(s.name, t.name) + await new Promise((r) => requestAnimationFrame(() => r(null))) + const start = performance.now() + try { + if (s.beforeEach) await s.beforeEach() + await t.fn() + if (s.afterEach) await s.afterEach() + results.push({ + suite: s.name, + name: t.name, + ok: true, + durationMs: performance.now() - start, + }) + } catch (err) { + try { + if (s.afterEach) await s.afterEach() + } catch { + /* ignore cleanup errors if test already failed */ + } + const e = err as Error + results.push({ + suite: s.name, + name: t.name, + ok: false, + error: e.message || String(err), + stack: cleanStack(e.stack), + durationMs: performance.now() - start, + }) + } + done++ + opts.onProgress?.(done, total) + if (delay > 0) await new Promise((r) => setTimeout(r, delay)) + else await new Promise((r) => setTimeout(r, 0)) + } + } + return results +} diff --git a/src/devtools/tests.ts b/src/devtools/tests.ts new file mode 100644 index 0000000..20035fa --- /dev/null +++ b/src/devtools/tests.ts @@ -0,0 +1,525 @@ +import { useSceneStore } from '@/stores/scene' +import { sampleLayer, lerpColor } from '@/lib/interpolate' +import { snapToCandidates } from '@/lib/timelineSnap' +import { + generateBundledScript, + generateRuntimeScript, + generateSceneScript, +} from '@/lib/exportPlayer' +import { ProjectFileError, parseProject, serializeProject } from '@/lib/projectFile' +import { expect, suite, test } from './testRunner' + +function makeFreshStore() { + const s = useSceneStore() + s.$reset() + return s +} + +function tick(ms = 40): Promise { + return new Promise((r) => setTimeout(r, ms)) +} + +export function registerAllTests(): void { + suite('scene store — defaults', () => { + test('starts with empty scene, playhead 0, not playing', () => { + const s = makeFreshStore() + expect(s.scene.layers).toHaveLength(0) + expect(s.scene.assets).toHaveLength(0) + expect(s.playhead).toBe(0) + expect(s.playing).toBe(false) + expect(s.scene.duration).toBe(10) + expect(s.scene.fps).toBe(60) + expect(s.selectedLayerId).toBeNull() + }) + }) + + suite('scene store — playhead', () => { + test('setPlayhead clamps to [0, duration]', async () => { + const s = makeFreshStore() + s.setPlayhead(-5) + await tick() + expect(s.playhead).toBe(0) + s.setPlayhead(999) + await tick() + expect(s.playhead).toBe(s.scene.duration) + s.setPlayhead(3.5) + await tick() + expect(s.playhead).toBe(3.5) + }) + + test('setDuration pulls playhead back if past end', async () => { + const s = makeFreshStore() + s.setPlayhead(9) + await tick() + s.setDuration(5) + await tick() + expect(s.playhead).toBe(5) + }) + + test('setDuration clamps to min 0.1', () => { + const s = makeFreshStore() + s.setDuration(0) + expect(s.scene.duration).toBe(0.1) + }) + }) + + suite('scene store — layers & selection', () => { + test('addLayer with rect asset creates layer + initial keyframe + selects it', async () => { + const s = makeFreshStore() + const asset = s.addAsset({ + kind: 'rect', + name: 'TestRect', + width: 200, + height: 100, + fill: '#ff4455', + }) + await tick() + const layer = s.addLayer(asset.id) + await tick() + expect(s.scene.layers).toHaveLength(1) + expect(s.selectedLayerId).toBe(layer.id) + expect(layer.keyframes).toHaveLength(1) + expect(layer.keyframes[0].time).toBe(0) + expect(layer.offsetX).toBe(100) + expect(layer.offsetY).toBe(50) + expect(layer.base.fill).toBe('#ff4455') + }) + + test('removeLayer deselects if it was selected', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'circle', name: 'TestCircle', radius: 40, fill: '#44aaff' }) + const l = s.addLayer(a.id) + await tick() + s.removeLayer(l.id) + await tick() + expect(s.scene.layers).toHaveLength(0) + expect(s.selectedLayerId).toBeNull() + }) + + test('selectLayer toggles with null', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'circle', name: 'SelC', radius: 30, fill: '#00cc88' }) + const l = s.addLayer(a.id) + await tick() + s.selectLayer(null) + await tick() + expect(s.selectedLayerId).toBeNull() + s.selectLayer(l.id) + await tick() + expect(s.selectedLayerId).toBe(l.id) + }) + }) + + suite('scene store — keyframes', () => { + test('upsertKeyframe adds new keyframe sorted by time', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Kfs', width: 80, height: 80, fill: '#ffa500' }) + const l = s.addLayer(a.id) + await tick() + s.upsertKeyframe(l.id, 2, { x: 600 }) + await tick() + s.upsertKeyframe(l.id, 1, { x: 300 }) + await tick() + const times = l.keyframes.map((k) => k.time) + expect(times).toEqual([0, 1, 2]) + }) + + test('upsertKeyframe updates existing keyframe within epsilon', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Upd', width: 80, height: 80, fill: '#aa44ff' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 500 }) + await tick() + const before = l.keyframes.length + s.upsertKeyframe(l.id, 1.0000001, { x: 900 }) + await tick() + expect(l.keyframes).toHaveLength(before) + const kf = l.keyframes.find((k) => Math.abs(k.time - 1) < 0.01)! + expect(kf.props.x).toBe(900) + }) + + test('setKeyframeTime clamps and sorts', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Clamp', width: 60, height: 60, fill: '#ff8844' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 3, { x: 400 }) + s.upsertKeyframe(l.id, 5, { x: 800 }) + await tick() + const target = l.keyframes.find((k) => k.time === 5)! + s.setKeyframeTime(l.id, target.id, -1) + await tick() + expect(target.time).toBe(0) + const times = l.keyframes.map((k) => k.time).sort((a, b) => a - b) + expect(times).toEqual(l.keyframes.map((k) => k.time)) + }) + + test('setKeyframeTime clamps to duration upper bound', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Dur', width: 60, height: 60, fill: '#44ffaa' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 2, { x: 400 }) + await tick() + const k = l.keyframes[l.keyframes.length - 1] + s.setKeyframeTime(l.id, k.id, 999) + await tick() + expect(k.time).toBe(s.scene.duration) + }) + + test('removeKeyframe removes by id', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Rm', width: 50, height: 50, fill: '#ee4488' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 2, { x: 500 }) + await tick() + const k = l.keyframes.find((k) => k.time === 2)! + s.removeKeyframe(l.id, k.id) + await tick() + expect(l.keyframes.find((x) => x.id === k.id)).toBe(undefined) + }) + + test('duplicateKeyframe creates offset copy', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Dup', width: 50, height: 50, fill: '#22aaee' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 400 }) + await tick() + const src = l.keyframes.find((k) => k.time === 1)! + const newId = s.duplicateKeyframe(l.id, src.id) + await tick() + expect(newId).toBeTruthy() + const dup = l.keyframes.find((k) => k.id === newId)! + expect(dup.props.x).toBe(400) + expect(dup.time).toBeGreaterThan(1) + }) + + test('setKeyframeEasing updates easing field', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Ease', width: 50, height: 50, fill: '#88cc44' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 400 }) + await tick() + const k = l.keyframes[l.keyframes.length - 1] + s.setKeyframeEasing(l.id, k.id, 'easeInOut') + expect(k.easing).toBe('easeInOut') + }) + }) + + suite('scene store — separated tracks', () => { + test('setLayerSeparated splits x/y and rotation into dedicated tracks', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Sep', width: 60, height: 60, fill: '#ee66aa' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 400, y: 200, rotation: 45, opacity: 0.5 }) + await tick() + s.setLayerSeparated(l.id, true) + await tick() + expect(l.separated).toBe(true) + expect((l.positionKeyframes ?? []).length).toBeGreaterThan(0) + expect((l.rotationKeyframes ?? []).length).toBeGreaterThan(0) + for (const k of l.keyframes) { + expect((k.props as Record).x).toBe(undefined) + expect((k.props as Record).y).toBe(undefined) + expect((k.props as Record).rotation).toBe(undefined) + } + }) + + test('setLayerSeparated(false) merges tracks back together', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Merge', width: 60, height: 60, fill: '#66ccee' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 400, y: 200, rotation: 45, opacity: 0.5 }) + await tick() + s.setLayerSeparated(l.id, true) + await tick() + s.setLayerSeparated(l.id, false) + await tick() + expect(l.separated).toBe(false) + expect(l.positionKeyframes).toBe(undefined) + expect(l.rotationKeyframes).toBe(undefined) + const at1 = l.keyframes.find((k) => Math.abs(k.time - 1) < 0.001)! + expect((at1.props as Record).x).toBe(400) + expect((at1.props as Record).rotation).toBe(45) + }) + }) + + suite('interpolation — sampleLayer', () => { + test('no keyframes → returns base', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' }) + const l = s.addLayer(a.id) + l.keyframes = [] + const p = sampleLayer(l, 0.5) + expect(p.x).toBe(l.base.x) + expect(p.y).toBe(l.base.y) + }) + + test('linear midpoint is halfway', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' }) + const l = s.addLayer(a.id) + l.keyframes = [ + { id: 'k1', time: 0, props: { x: 0 }, easing: 'linear' }, + { id: 'k2', time: 2, props: { x: 100 }, easing: 'linear' }, + ] + l.base = { ...l.base, x: 0, y: 0 } + const p = sampleLayer(l, 1) + expect(p.x).toBeCloseTo(50, 2) + }) + + test('easeIn midpoint is below linear midpoint', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' }) + const l = s.addLayer(a.id) + l.base = { ...l.base, x: 0 } + l.keyframes = [ + { id: 'k1', time: 0, props: { x: 0 }, easing: 'linear' }, + { id: 'k2', time: 2, props: { x: 100 }, easing: 'easeIn' }, + ] + const p = sampleLayer(l, 1) + expect(p.x).toBeLessThan(50) + expect(p.x).toBeGreaterThan(0) + }) + + test('clamps before first kf to first props, after last to last props', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'R', width: 10, height: 10, fill: '#000' }) + const l = s.addLayer(a.id) + l.base = { ...l.base, x: 0 } + l.keyframes = [ + { id: 'k1', time: 1, props: { x: 10 }, easing: 'linear' }, + { id: 'k2', time: 2, props: { x: 20 }, easing: 'linear' }, + ] + expect(sampleLayer(l, 0).x).toBe(10) + expect(sampleLayer(l, 5).x).toBe(20) + }) + }) + + suite('interpolation — color', () => { + test('lerpColor 0 returns start', () => { + expect(lerpColor('#000000', '#ffffff', 0)).toBe('#000000') + }) + test('lerpColor 1 returns end', () => { + expect(lerpColor('#000000', '#ffffff', 1)).toBe('#ffffff') + }) + test('lerpColor 0.5 is around middle gray', () => { + const mid = lerpColor('#000000', '#ffffff', 0.5) + expect(mid).toBe('#808080') + }) + }) + + suite('timeline snap', () => { + test('disabled: returns t unchanged', () => { + const r = snapToCandidates(1.7, [2.0], { + enabled: false, + pxPerSec: 100, + pixelThreshold: 8, + duration: 10, + }) + expect(r).toBe(1.7) + }) + + test('enabled: snaps to nearest candidate within threshold', () => { + const r = snapToCandidates(1.95, [2.0, 5.0], { + enabled: true, + pxPerSec: 100, + pixelThreshold: 8, + duration: 10, + }) + expect(r).toBe(2.0) + }) + + test('enabled: leaves t alone if all candidates are outside threshold', () => { + const r = snapToCandidates(1.0, [2.0], { + enabled: true, + pxPerSec: 100, + pixelThreshold: 8, + duration: 10, + }) + expect(r).toBe(1.0) + }) + + test('clamps result to [0, duration]', () => { + const r = snapToCandidates(15, [], { + enabled: true, + pxPerSec: 100, + pixelThreshold: 8, + duration: 10, + }) + expect(r).toBe(10) + }) + }) + + suite('export — runtime & scene split', () => { + test('generateRuntimeScript exposes AnimatrPlayer', () => { + const r = generateRuntimeScript() + expect(r).toContain('window.AnimatrPlayer') + expect(r).toContain('function mount') + expect(r).toContain('__animatrPending') + }) + + test('generateSceneScript embeds scene JSON and uses AnimatrPlayer', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'UniqRect77', width: 10, height: 10, fill: '#abc' }) + s.addLayer(a.id) + const src = generateSceneScript(s.scene) + expect(src).toContain('AnimatrPlayer.mount') + expect(src).toContain('UniqRect77') + expect(src).toContain('__animatrPending') + }) + + test('scene script does NOT inline the mount implementation', () => { + const s = makeFreshStore() + const src = generateSceneScript(s.scene) + expect(src.indexOf('function mount')).toBe(-1) + }) + + test('generateBundledScript contains runtime + scene boot', () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'BundlR', width: 10, height: 10, fill: '#123' }) + s.addLayer(a.id) + const src = generateBundledScript(s.scene) + expect(src).toContain('function mount') + expect(src).toContain('AnimatrPlayer.mount') + expect(src).toContain('BundlR') + }) + }) + + suite('playback — transport', () => { + test('togglePlay toggles playing state', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Play', width: 60, height: 60, fill: '#55cc66' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 2, { x: 500 }) + await tick() + s.togglePlay() + await tick() + expect(s.playing).toBe(true) + s.togglePlay() + await tick() + expect(s.playing).toBe(false) + }) + + test('togglePlay rewinds if at end', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Rew', width: 60, height: 60, fill: '#cc5555' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 2, { x: 600 }) + s.setPlayhead(s.effectiveEnd) + await tick() + s.togglePlay() + expect(s.playhead).toBe(0) + expect(s.playing).toBe(true) + s.pause() + await tick() + }) + + test('tick advances playhead while playing', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'Tk', width: 60, height: 60, fill: '#9977dd' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 5, { x: 800 }) + s.play() + s.tick(1) + s.pause() + expect(s.playhead).toBeCloseTo(1, 3) + await tick() + }) + + test('tick stops at effectiveEnd', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'End', width: 60, height: 60, fill: '#dd7799' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 2, { x: 400 }) + s.play() + await tick() + s.tick(10) + await tick() + expect(s.playing).toBe(false) + expect(s.playhead).toBe(s.effectiveEnd) + }) + }) + + suite('project file — save & load roundtrip', () => { + test('serialize + parse roundtrip preserves scene', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'PF', width: 80, height: 60, fill: '#66ddaa' }) + const l = s.addLayer(a.id) + s.upsertKeyframe(l.id, 1, { x: 400, rotation: 30 }) + s.setDuration(7) + await tick() + const text = serializeProject(s.scene) + const parsed = parseProject(text) + expect(parsed.duration).toBe(7) + expect(parsed.layers).toHaveLength(1) + expect(parsed.assets).toHaveLength(1) + expect(parsed.layers[0].keyframes.find((k) => k.time === 1)?.props.x).toBe(400) + }) + + test('loadScene replaces store state visibly', async () => { + const s = makeFreshStore() + const a = s.addAsset({ kind: 'rect', name: 'L1', width: 80, height: 60, fill: '#aa6666' }) + s.addLayer(a.id) + await tick() + const dump = serializeProject(s.scene) + s.$reset() + await tick() + s.loadScene(parseProject(dump)) + await tick() + expect(s.scene.layers).toHaveLength(1) + expect(s.scene.assets).toHaveLength(1) + expect(s.selectedLayerId).toBeNull() + expect(s.playhead).toBe(0) + expect(s.playing).toBe(false) + }) + + test('parseProject rejects non-JSON', () => { + let caught: unknown = null + try { + parseProject('not json at all') + } catch (e) { + caught = e + } + expect(caught instanceof ProjectFileError).toBe(true) + }) + + test('parseProject rejects foreign JSON without magic', () => { + let caught: unknown = null + try { + parseProject(JSON.stringify({ foo: 'bar' })) + } catch (e) { + caught = e + } + expect(caught instanceof ProjectFileError).toBe(true) + }) + + test('parseProject rejects missing scene fields', () => { + let caught: unknown = null + try { + parseProject(JSON.stringify({ magic: 'animatr-project', fileVersion: 1, scene: {} })) + } catch (e) { + caught = e + } + expect(caught instanceof ProjectFileError).toBe(true) + }) + }) + + suite('app smoke — live DOM', () => { + test('app root, topbar, timeline, stage are mounted', () => { + expect(document.querySelector('.app')).toBeTruthy() + expect(document.querySelector('.topbar')).toBeTruthy() + expect(document.querySelector('.timeline')).toBeTruthy() + expect(document.querySelector('.stage')).toBeTruthy() + }) + + test('timeline snap toggle button is present', () => { + expect(document.querySelector('.snap-btn')).toBeTruthy() + }) + + test('topbar has save & recents buttons', () => { + const saveBtn = document.querySelector('button[title^="Projekt speichern"]') + const recentsBtn = document.querySelector('button[title="Zuletzt verwendete Projekte"]') + expect(saveBtn).toBeTruthy() + expect(recentsBtn).toBeTruthy() + }) + }) +} diff --git a/src/lib/projectFile.ts b/src/lib/projectFile.ts new file mode 100644 index 0000000..cd2d354 --- /dev/null +++ b/src/lib/projectFile.ts @@ -0,0 +1,91 @@ +import type { Scene } from '@/types/scene' + +const FILE_VERSION = 1 +const MAGIC = 'animatr-project' + +export interface ProjectFile { + magic: typeof MAGIC + fileVersion: number + savedAt: string + scene: Scene +} + +export function serializeProject(scene: Scene): string { + const payload: ProjectFile = { + magic: MAGIC, + fileVersion: FILE_VERSION, + savedAt: new Date().toISOString(), + scene, + } + return JSON.stringify(payload, null, 2) +} + +export class ProjectFileError extends Error { + constructor(message: string) { + super(message) + this.name = 'ProjectFileError' + } +} + +export function parseProject(text: string): Scene { + let data: unknown + try { + data = JSON.parse(text) + } catch { + throw new ProjectFileError('Datei ist kein gültiges JSON.') + } + if (!data || typeof data !== 'object') { + throw new ProjectFileError('Datei ist leer oder kein Objekt.') + } + const obj = data as Record + if (obj.magic !== MAGIC) { + throw new ProjectFileError('Keine Animatr-Projektdatei (magic fehlt).') + } + const scene = obj.scene + if (!scene || typeof scene !== 'object') { + throw new ProjectFileError('Projektdatei enthält keine Szene.') + } + const s = scene as Record + if (!s.canvas || typeof s.canvas !== 'object') { + throw new ProjectFileError('Szenendaten unvollständig: canvas fehlt.') + } + if (!Array.isArray(s.layers)) { + throw new ProjectFileError('Szenendaten unvollständig: layers fehlt.') + } + if (!Array.isArray(s.assets)) { + throw new ProjectFileError('Szenendaten unvollständig: assets fehlt.') + } + return scene as Scene +} + +export function downloadProject(scene: Scene, filename = 'projekt.animatr.json') { + const source = serializeProject(scene) + const blob = new Blob([source], { type: 'application/json' }) + const url = URL.createObjectURL(blob) + const a = document.createElement('a') + a.href = url + a.download = filename + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + setTimeout(() => URL.revokeObjectURL(url), 1000) +} + +export function pickProjectFile(): Promise { + return new Promise((resolve) => { + const input = document.createElement('input') + input.type = 'file' + input.accept = '.json,application/json' + input.onchange = () => { + const f = input.files?.[0] + resolve(f ?? null) + } + input.oncancel = () => resolve(null) + input.click() + }) +} + +export async function readProjectFile(file: File): Promise { + const text = await file.text() + return parseProject(text) +} diff --git a/src/lib/projectStore.ts b/src/lib/projectStore.ts new file mode 100644 index 0000000..032636e --- /dev/null +++ b/src/lib/projectStore.ts @@ -0,0 +1,124 @@ +import type { Scene } from '@/types/scene' + +const DB_NAME = 'animatr' +const DB_VERSION = 1 +const STORE = 'projects' +const MAX_RECENT = 8 + +export interface StoredProject { + id: string + name: string + scene: Scene + savedAt: number + thumbnail?: string +} + +let dbPromise: Promise | null = null + +function openDb(): Promise { + if (dbPromise) return dbPromise + dbPromise = new Promise((resolve, reject) => { + const req = indexedDB.open(DB_NAME, DB_VERSION) + req.onupgradeneeded = () => { + const db = req.result + if (!db.objectStoreNames.contains(STORE)) { + db.createObjectStore(STORE, { keyPath: 'id' }) + } + } + req.onsuccess = () => resolve(req.result) + req.onerror = () => reject(req.error ?? new Error('IndexedDB open failed')) + }) + return dbPromise +} + +function tx(mode: IDBTransactionMode, fn: (store: IDBObjectStore) => IDBRequest): Promise { + return openDb().then( + (db) => + new Promise((resolve, reject) => { + const t = db.transaction(STORE, mode) + const s = t.objectStore(STORE) + const req = fn(s) + req.onsuccess = () => resolve(req.result) + req.onerror = () => reject(req.error ?? new Error('IndexedDB request failed')) + }), + ) +} + +function uid(): string { + return Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4) +} + +export async function listRecentProjects(): Promise { + try { + const all = await tx('readonly', (s) => s.getAll() as IDBRequest) + return (all ?? []) + .slice() + .sort((a, b) => b.savedAt - a.savedAt) + .slice(0, MAX_RECENT) + } catch { + return [] + } +} + +export interface SaveOptions { + id?: string + name?: string + thumbnail?: string +} + +export async function saveProjectToStore( + scene: Scene, + opts: SaveOptions = {}, +): Promise { + const record: StoredProject = { + id: opts.id ?? uid(), + name: opts.name?.trim() || defaultName(), + scene: JSON.parse(JSON.stringify(scene)), + savedAt: Date.now(), + thumbnail: opts.thumbnail, + } + await tx('readwrite', (s) => s.put(record)) + return record +} + +export async function deleteStoredProject(id: string): Promise { + await tx('readwrite', (s) => s.delete(id)) +} + +export async function getStoredProject(id: string): Promise { + try { + const rec = await tx('readonly', (s) => + s.get(id) as IDBRequest, + ) + return rec ?? null + } catch { + return null + } +} + +function defaultName(): string { + const d = new Date() + return `Projekt ${d.toLocaleDateString()} ${d.toLocaleTimeString([], { + hour: '2-digit', + minute: '2-digit', + })}` +} + +const LAST_OPEN_KEY = 'animatr:lastOpenedId' + +export function setLastOpenedId(id: string | null): void { + try { + if (id === null) localStorage.removeItem(LAST_OPEN_KEY) + else localStorage.setItem(LAST_OPEN_KEY, id) + } catch { + /* ignore */ + } +} + +export function getLastOpenedId(): string | null { + try { + return localStorage.getItem(LAST_OPEN_KEY) + } catch { + return null + } +} diff --git a/src/lib/timelineSnap.ts b/src/lib/timelineSnap.ts new file mode 100644 index 0000000..fafc9d7 --- /dev/null +++ b/src/lib/timelineSnap.ts @@ -0,0 +1,26 @@ +export interface SnapOptions { + enabled: boolean + pxPerSec: number + pixelThreshold: number + duration: number +} + +export function snapToCandidates( + t: number, + candidates: readonly number[], + opts: SnapOptions, +): number { + if (!opts.enabled) return t + if (opts.pxPerSec <= 0) return t + const thresholdTime = opts.pixelThreshold / opts.pxPerSec + let best = t + let bestDist = thresholdTime + for (const kt of candidates) { + const d = Math.abs(kt - t) + if (d <= bestDist) { + bestDist = d + best = kt + } + } + return Math.max(0, Math.min(opts.duration, best)) +} diff --git a/src/stores/scene.ts b/src/stores/scene.ts index 05be3ce..c1aed1a 100644 --- a/src/stores/scene.ts +++ b/src/stores/scene.ts @@ -363,6 +363,12 @@ export const useSceneStore = defineStore('scene', { layer.separated = false } }, + loadScene(scene: Scene) { + this.scene = scene + this.selectedLayerId = null + this.playhead = 0 + this.playing = false + }, play() { if (this.playing) return this.playing = true diff --git a/todo b/todo index 3bfc053..125c980 100644 --- a/todo +++ b/todo @@ -19,4 +19,8 @@ der playhead soll kein gedrehtes quadrat sein so wie die keyframes sondern ein a baue eine frontent testing engine. mit shift+control+alt+t muss such die app dann selbst durchtesten. schreibe tests für die funktionen die wir bisher haben +fehlerreport mit allen relevanten informationen muss automatisch in die zwischenablage kopiert werden. schreib dir da alles rein was du zum fixen brauchst +rechtsklick auf keyframe muss die auswahl von "still frame" bieten. von einem ein still frame aus findet keine tween animation statt. das objekt bleibt einfach stehen. der keyframe wird als dot dargestellt statt als diamant + +text-objekte muss man neben rect und kreis zur verfügung haben \ No newline at end of file