From 6b6157d7866dfae014b12c5f70a5b1905994c442 Mon Sep 17 00:00:00 2001 From: th Date: Sun, 19 Apr 2026 22:32:06 +0200 Subject: [PATCH] bak --- src/App.vue | 50 ++-- src/components/AssetSidebar.vue | 137 ++++----- src/components/CanvasStage.vue | 40 ++- src/components/DocumentSettings.vue | 35 +-- src/components/ExportDialog.vue | 33 ++- src/components/FullscreenPreview.vue | 7 +- src/components/PropertiesPanel.vue | 9 +- src/components/Timeline.vue | 422 +++++++++++++++++++++++---- src/components/WelcomeDialog.vue | 33 ++- src/components/ui/DialogsHost.vue | 176 +++++++++++ src/components/ui/Modal.vue | 3 +- src/components/ui/dialogs.ts | 71 +++++ src/components/ui/index.ts | 3 + src/devtools/TestOverlay.vue | 23 +- src/devtools/tests.ts | 4 +- src/i18n/index.ts | 44 +++ src/i18n/messages.ts | 232 +++++++++++++++ src/lib/exportPlayer.ts | 16 +- src/lib/projectFile.ts | 14 +- src/lib/projectStore.ts | 2 +- src/lib/serverExport.ts | 8 +- src/lib/videoExport.ts | 2 +- todo | 13 +- 23 files changed, 1140 insertions(+), 237 deletions(-) create mode 100644 src/components/ui/DialogsHost.vue create mode 100644 src/components/ui/dialogs.ts create mode 100644 src/i18n/index.ts create mode 100644 src/i18n/messages.ts diff --git a/src/App.vue b/src/App.vue index 37441c1..d2c17f2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,7 +24,8 @@ 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 { IconButton, Toast } from './components/ui' +import { confirmDialog, DialogsHost, IconButton, promptDialog, Toast } from './components/ui' +import { t } from './i18n' import { useHistory } from './composables/useHistory' import { usePlaybackLoop } from './composables/usePlaybackLoop' import { @@ -140,8 +141,13 @@ 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) + const suggested = t('app.saveDialog.defaultName', { date: new Date().toLocaleDateString() }) + const entered = await promptDialog({ + title: t('app.saveDialog.title'), + message: t('app.saveDialog.message'), + defaultValue: suggested, + confirmLabel: t('app.saveDialog.confirm'), + }) if (entered === null) return name = entered.trim() || suggested } @@ -152,7 +158,7 @@ async function saveProject() { currentProjectId.value = rec.id currentProjectName.value = rec.name setLastOpenedId(rec.id) - showSavedToast(`"${rec.name}" gespeichert`) + showSavedToast(t('app.savedToast', { name: rec.name })) } function exportProjectFile() { @@ -167,9 +173,12 @@ async function importFromFile() { 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?', - ) + const ok = await confirmDialog({ + title: t('app.replaceDialog.title'), + message: t('app.replaceDialog.message'), + confirmLabel: t('app.replaceDialog.confirm'), + variant: 'danger', + }) if (!ok) return } try { @@ -285,7 +294,7 @@ onBeforeUnmount(() => { icon-weight="bold" size="md" :disabled="!history.canUndo.value" - title="Rückgängig (Ctrl+Z)" + :title="t('app.undo')" @click="history.undo" /> { icon-weight="bold" size="md" :disabled="!history.canRedo.value" - title="Wiederholen (Ctrl+Shift+Z)" + :title="t('app.redo')" @click="history.redo" />
@@ -301,7 +310,7 @@ onBeforeUnmount(() => { :icon="PhSkipBack" icon-weight="fill" size="md" - title="Zum Anfang" + :title="t('app.jumpToStart')" @click="rewind" /> { icon-weight="fill" size="md" variant="primary" - :title="store.playing ? 'Pause (Space)' : 'Play (Space)'" + :title="store.playing ? t('app.pause') : t('app.play')" @click="store.togglePlay()" /> {{ store.playhead.toFixed(2) }}s / {{ store.scene.duration }}s @@ -325,18 +334,18 @@ onBeforeUnmount(() => { {{ currentProjectName }} - - - - @@ -345,7 +354,7 @@ onBeforeUnmount(() => {
@@ -359,7 +368,7 @@ onBeforeUnmount(() => {
{ + { @export="exportProjectFile" /> - Projekt konnte nicht geladen werden. + {{ t('app.loadFailed') }} {{ loadError }} diff --git a/src/components/AssetSidebar.vue b/src/components/AssetSidebar.vue index 209ea18..fcd7751 100644 --- a/src/components/AssetSidebar.vue +++ b/src/components/AssetSidebar.vue @@ -16,6 +16,8 @@ import { import { useSceneStore } from '@/stores/scene' import { isSvgFile, loadImage, parseSvgDimensions, readAsDataUrl } from '@/lib/fileLoader' import type { Asset } from '@/types/scene' +import { confirmDialog, promptDialog } from '@/components/ui' +import { t } from '@/i18n' const store = useSceneStore() @@ -54,10 +56,15 @@ function addSampleCircle() { store.addLayer(asset.id) } -function addSampleText() { - const input = prompt('Text?', 'Hallo') +async function addSampleText() { + const input = await promptDialog({ + title: t('sidebar.newTextDialog.title'), + message: t('sidebar.newTextDialog.message'), + defaultValue: t('sidebar.newTextDialog.default'), + confirmLabel: t('sidebar.newTextDialog.confirm'), + }) if (input === null) return - const text = input.trim() || 'Text' + const text = input.trim() || t('sidebar.newTextDialog.fallback') const asset = store.addAsset({ kind: 'text', name: text.length > 24 ? text.slice(0, 24) + '…' : text, @@ -70,20 +77,35 @@ function addSampleText() { const clips = computed(() => store.scene.clips ?? []) -function addClip() { - const input = prompt('Name des Clips?', 'Clip') +async function addClip() { + const input = await promptDialog({ + title: t('sidebar.newClipDialog.title'), + message: t('sidebar.newClipDialog.message'), + defaultValue: t('sidebar.newClipDialog.default'), + confirmLabel: t('sidebar.newClipDialog.confirm'), + }) if (input === null) return store.addClip(input) } -function renameClipPrompt(clipId: string, current: string) { - const input = prompt('Neuer Name?', current) +async function renameClipPrompt(clipId: string, current: string) { + const input = await promptDialog({ + title: t('sidebar.renameClipDialog.title'), + defaultValue: current, + confirmLabel: t('sidebar.renameClipDialog.confirm'), + }) if (input === null) return store.renameClip(clipId, input) } -function deleteClip(clipId: string) { - if (!confirm('Clip und alle Instanzen wirklich löschen?')) return +async function deleteClip(clipId: string) { + const ok = await confirmDialog({ + title: t('sidebar.deleteClipDialog.title'), + message: t('sidebar.deleteClipDialog.message'), + confirmLabel: t('sidebar.deleteClipDialog.confirm'), + variant: 'danger', + }) + if (!ok) return store.removeClip(clipId) } @@ -149,34 +171,17 @@ const assetIconMap: Record = { text: PhTextT, } -const assetsWithUsage = computed(() => - store.scene.assets.map((a) => ({ - asset: a, - inUse: store.scene.layers.some((l) => l.assetId === a.id), - })), +const imageAssets = computed(() => + store.scene.assets.filter((a): a is Extract => a.kind === 'image'), ) -const THUMB_SIZE = 40 - -function rectPreviewStyle(asset: Extract) { - const scale = Math.min(THUMB_SIZE / asset.width, THUMB_SIZE / asset.height) * 0.9 - return { - width: `${Math.max(6, asset.width * scale)}px`, - height: `${Math.max(6, asset.height * scale)}px`, - background: asset.fill, - borderRadius: '2px', - } as const +function onAssetDragStart(e: DragEvent, assetId: string) { + if (!e.dataTransfer) return + e.dataTransfer.effectAllowed = 'copy' + e.dataTransfer.setData('application/x-animatr-asset', assetId) + e.dataTransfer.setData('text/plain', assetId) } -function circlePreviewStyle(asset: Extract) { - const d = Math.min(THUMB_SIZE, asset.radius * 2) * 0.9 - return { - width: `${d}px`, - height: `${d}px`, - background: asset.fill, - borderRadius: '50%', - } as const -} diff --git a/src/components/CanvasStage.vue b/src/components/CanvasStage.vue index 871cade..d500e9b 100644 --- a/src/components/CanvasStage.vue +++ b/src/components/CanvasStage.vue @@ -6,6 +6,7 @@ import { useSceneStore } from '@/stores/scene' import { sampleLayer } from '@/lib/interpolate' import { loadImage } from '@/lib/fileLoader' import type { AnimatableProps, Asset, Layer } from '@/types/scene' +import { t } from '@/i18n' const store = useSceneStore() @@ -606,6 +607,29 @@ function onContainerPointerUp(e: PointerEvent) { if (container.value) container.value.style.cursor = '' } +function onContainerDragOver(e: DragEvent) { + if (!e.dataTransfer) return + if (!e.dataTransfer.types.includes('application/x-animatr-asset')) return + e.preventDefault() + e.dataTransfer.dropEffect = 'copy' +} + +function onContainerDrop(e: DragEvent) { + const assetId = e.dataTransfer?.getData('application/x-animatr-asset') + if (!assetId) return + e.preventDefault() + const rect = container.value?.getBoundingClientRect() + if (!rect) return + const sx = e.clientX - rect.left + const sy = e.clientY - rect.top + const worldX = (sx - viewX.value) / zoom.value + const worldY = (sy - viewY.value) / zoom.value + const layer = store.addLayer(assetId) + if (layer) { + store.upsertKeyframe(layer.id, 0, { x: worldX, y: worldY }) + } +} + function zoomBy(factor: number) { const cw = containerSize.value.width const ch = containerSize.value.height @@ -638,6 +662,8 @@ onMounted(() => { container.value.addEventListener('pointermove', onContainerPointerMove) container.value.addEventListener('pointerup', onContainerPointerUp) container.value.addEventListener('pointercancel', onContainerPointerUp) + container.value.addEventListener('dragover', onContainerDragOver) + container.value.addEventListener('drop', onContainerDrop) }) onBeforeUnmount(() => { @@ -649,6 +675,8 @@ onBeforeUnmount(() => { container.value?.removeEventListener('pointermove', onContainerPointerMove) container.value?.removeEventListener('pointerup', onContainerPointerUp) container.value?.removeEventListener('pointercancel', onContainerPointerUp) + container.value?.removeEventListener('dragover', onContainerDragOver) + container.value?.removeEventListener('drop', onContainerDrop) }) @@ -736,21 +764,21 @@ onBeforeUnmount(() => {
- - + - +
- - +
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index bc719d5..f33e931 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -14,6 +14,8 @@ import { import { useSceneStore } from '@/stores/scene' import { sampleLayer } from '@/lib/interpolate' import { snapToCandidates } from '@/lib/timelineSnap' +import { confirmDialog } from '@/components/ui' +import { t } from '@/i18n' import type { AnimatableProps, Clip, @@ -263,8 +265,8 @@ const tracks = computed(() => { out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex }) } else { out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex }) - out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: 'Position', isParent: false, orderIndex }) - out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: 'Rotation', isParent: false, orderIndex }) + out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: t('timeline.position'), isParent: false, orderIndex }) + out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: t('timeline.rotation'), isParent: false, orderIndex }) } }) return out @@ -279,14 +281,14 @@ const tracks = computed(() => { out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex }) } else { out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex }) - out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: 'Position', isParent: false, orderIndex }) - out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: 'Rotation', isParent: false, orderIndex }) + out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: t('timeline.position'), isParent: false, orderIndex }) + out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: t('timeline.rotation'), isParent: false, orderIndex }) } return } const ct = clipTrackById.value.get(id) if (ct) { - out.push({ type: 'clip', clipTrackId: ct.id, name: ct.name ?? 'Clip-Spur', orderIndex }) + out.push({ type: 'clip', clipTrackId: ct.id, name: ct.name ?? t('timeline.clipTrackName'), orderIndex }) } }) return out @@ -316,33 +318,110 @@ function isDropAfter(track: TimelineTrack, nextTrack: TimelineTrack | undefined) return true } +interface SelectionKey { + layerId: string + kind: 'main' | 'position' | 'rotation' + keyframeId: string +} + +const selectedKfs = ref([]) + +function selectionKey(k: SelectionKey): string { + return `${k.layerId}:${k.kind}:${k.keyframeId}` +} + +const selectedKfSet = computed(() => { + const s = new Set() + for (const k of selectedKfs.value) s.add(selectionKey(k)) + return s +}) + +function isKfSelected(layerId: string, kind: 'main' | 'position' | 'rotation', keyframeId: string): boolean { + return selectedKfSet.value.has(`${layerId}:${kind}:${keyframeId}`) +} + +function clearKfSelection() { + selectedKfs.value = [] +} + +interface SelectionSnapshotEntry { + layerId: string + keyframeId: string + kind: 'main' | 'position' | 'rotation' + initialTime: number +} + +function snapshotSelection(): SelectionSnapshotEntry[] { + const out: SelectionSnapshotEntry[] = [] + for (const s of selectedKfs.value) { + const layer = store.activeLayers.find((l) => l.id === s.layerId) + if (!layer) continue + const arr = + s.kind === 'position' + ? layer.positionKeyframes + : s.kind === 'rotation' + ? layer.rotationKeyframes + : layer.keyframes + const kf = arr?.find((k) => k.id === s.keyframeId) + if (kf) out.push({ ...s, initialTime: kf.time }) + } + return out +} + interface KfDrag { layerId: string keyframeId: string + kind: 'main' | 'position' | 'rotation' lane: HTMLElement pointerId: number startX: number moved: boolean + initialTime: number + snapshot: SelectionSnapshotEntry[] } const kfDrag = ref(null) -function onKeyframePointerDown(e: PointerEvent, layerId: string, keyframeId: string) { +function onKeyframePointerDown( + e: PointerEvent, + layerId: string, + keyframeId: string, + kind: 'main' | 'position' | 'rotation', +) { if (e.button !== 0) return const layer = store.activeLayers.find((l) => l.id === layerId) if (layer?.locked) return const kfEl = e.currentTarget as HTMLElement const lane = kfEl.parentElement if (!lane) return + + // If this keyframe isn't in the current selection, replace selection with just this one. + const key = `${layerId}:${kind}:${keyframeId}` + if (!selectedKfSet.value.has(key)) { + selectedKfs.value = [{ layerId, kind, keyframeId }] + } + + const arr = + kind === 'position' + ? layer?.positionKeyframes + : kind === 'rotation' + ? layer?.rotationKeyframes + : layer?.keyframes + const srcKf = arr?.find((k) => k.id === keyframeId) + const initialTime = srcKf?.time ?? 0 + e.stopPropagation() kfEl.setPointerCapture(e.pointerId) kfDrag.value = { layerId, keyframeId, + kind, lane, pointerId: e.pointerId, startX: e.clientX, moved: false, + initialTime, + snapshot: snapshotSelection(), } store.selectLayer(layerId) } @@ -355,9 +434,50 @@ function onKeyframePointerMove(e: PointerEvent) { const rect = d.lane.getBoundingClientRect() if (rect.width <= 0) return const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)) - const newTime = snapTime(ratio * duration.value, d.keyframeId) - store.setKeyframeTime(d.layerId, d.keyframeId, newTime) - store.setPlayhead(newTime) + const rawNewTime = ratio * duration.value + // For snapping, ignore all currently selected kfs so we don't snap to ourselves + const ignoreIds = new Set() + for (const s of d.snapshot) ignoreIds.add(s.keyframeId) + const snappedPrimary = snapToCandidates( + rawNewTime, + allKeyframeTimesExcluding(ignoreIds), + { + enabled: snapEnabled.value, + pxPerSec: effectivePxPerSec.value, + pixelThreshold: SNAP_PX, + duration: duration.value, + }, + ) + // Group delta clamped so nothing leaves [0, duration] + let delta = snappedPrimary - d.initialTime + let minDelta = -Infinity + let maxDelta = Infinity + for (const s of d.snapshot) { + if (-s.initialTime > minDelta) minDelta = -s.initialTime + if (duration.value - s.initialTime < maxDelta) maxDelta = duration.value - s.initialTime + } + delta = Math.max(minDelta, Math.min(maxDelta, delta)) + + if (d.snapshot.length <= 1) { + store.setKeyframeTime(d.layerId, d.keyframeId, d.initialTime + delta) + } else { + for (const s of d.snapshot) { + store.setKeyframeTime(s.layerId, s.keyframeId, s.initialTime + delta) + } + } + store.setPlayhead(d.initialTime + delta) +} + +function allKeyframeTimesExcluding(ignoreIds: Set): number[] { + const out: number[] = [] + for (const layer of store.activeLayers) { + for (const k of layer.keyframes) if (!ignoreIds.has(k.id)) out.push(k.time) + if (layer.positionKeyframes) + for (const k of layer.positionKeyframes) if (!ignoreIds.has(k.id)) out.push(k.time) + if (layer.rotationKeyframes) + for (const k of layer.rotationKeyframes) if (!ignoreIds.has(k.id)) out.push(k.time) + } + return out } function onKeyframePointerUp(e: PointerEvent) { @@ -404,10 +524,10 @@ function segmentStyle(seg: KfSegment) { } const EASING_OPTIONS: { value: Easing; label: string }[] = [ - { value: 'linear', label: 'Linear' }, - { value: 'easeIn', label: 'Ease In' }, - { value: 'easeOut', label: 'Ease Out' }, - { value: 'easeInOut', label: 'Ease In-Out' }, + { value: 'linear', label: t('timeline.easingLinear') }, + { value: 'easeIn', label: t('timeline.easingEaseIn') }, + { value: 'easeOut', label: t('timeline.easingEaseOut') }, + { value: 'easeInOut', label: t('timeline.easingEaseInOut') }, ] interface KfMenuState { @@ -498,16 +618,16 @@ interface TrackMenuState { } const TRACK_COLORS: Array<{ value: string | null; label: string }> = [ - { value: null, label: 'Keine' }, - { value: '#ff6b6b', label: 'Rot' }, - { value: '#ffa94d', label: 'Orange' }, - { value: '#ffd43b', label: 'Gelb' }, - { value: '#51cf66', label: 'Grün' }, - { value: '#4dc4ff', label: 'Türkis' }, - { value: '#6ea8ff', label: 'Blau' }, - { value: '#b197fc', label: 'Lila' }, - { value: '#ff8cc6', label: 'Pink' }, - { value: '#adb5bd', label: 'Grau' }, + { value: null, label: t('timeline.colors.none') }, + { value: '#ff6b6b', label: t('timeline.colors.red') }, + { value: '#ffa94d', label: t('timeline.colors.orange') }, + { value: '#ffd43b', label: t('timeline.colors.yellow') }, + { value: '#51cf66', label: t('timeline.colors.green') }, + { value: '#4dc4ff', label: t('timeline.colors.cyan') }, + { value: '#6ea8ff', label: t('timeline.colors.blue') }, + { value: '#b197fc', label: t('timeline.colors.purple') }, + { value: '#ff8cc6', label: t('timeline.colors.pink') }, + { value: '#adb5bd', label: t('timeline.colors.gray') }, ] const dragTrackId = ref(null) @@ -559,6 +679,105 @@ function onTrackDragEnd() { dropIndex.value = null } +interface BoxSelectState { + pointerId: number + originClientX: number + originClientY: number + currentClientX: number + currentClientY: number + tracksEl: HTMLElement + moved: boolean +} + +const boxSelect = ref(null) + +const boxRectStyle = computed(() => { + const b = boxSelect.value + if (!b || !b.moved) return null + const tRect = b.tracksEl.getBoundingClientRect() + const left = Math.min(b.originClientX, b.currentClientX) - tRect.left + const top = Math.min(b.originClientY, b.currentClientY) - tRect.top + const width = Math.abs(b.currentClientX - b.originClientX) + const height = Math.abs(b.currentClientY - b.originClientY) + return { + left: left + 'px', + top: top + 'px', + width: width + 'px', + height: height + 'px', + } +}) + +function onTracksPointerDown(e: PointerEvent) { + if (e.button !== 0) return + const target = e.target as HTMLElement | null + if (!target) return + if ( + target.closest( + '.kf, .clip-block, .clip-handle, .track-name, .drag-handle, .add-clip-btn, .playhead', + ) + ) { + return + } + const tracksEl = e.currentTarget as HTMLElement + tracksEl.setPointerCapture(e.pointerId) + boxSelect.value = { + pointerId: e.pointerId, + originClientX: e.clientX, + originClientY: e.clientY, + currentClientX: e.clientX, + currentClientY: e.clientY, + tracksEl, + moved: false, + } +} + +function onTracksPointerMove(e: PointerEvent) { + const b = boxSelect.value + if (!b || b.pointerId !== e.pointerId) return + b.currentClientX = e.clientX + b.currentClientY = e.clientY + if (!b.moved) { + const dx = b.currentClientX - b.originClientX + const dy = b.currentClientY - b.originClientY + if (Math.abs(dx) > 3 || Math.abs(dy) > 3) b.moved = true + } +} + +function onTracksPointerUp(e: PointerEvent) { + const b = boxSelect.value + if (!b || b.pointerId !== e.pointerId) return + if (b.tracksEl.hasPointerCapture(e.pointerId)) b.tracksEl.releasePointerCapture(e.pointerId) + if (b.moved) { + commitBoxSelection(b) + } else { + // bare click on empty space → clear selection + clearKfSelection() + } + boxSelect.value = null +} + +function commitBoxSelection(b: BoxSelectState) { + const left = Math.min(b.originClientX, b.currentClientX) + const right = Math.max(b.originClientX, b.currentClientX) + const top = Math.min(b.originClientY, b.currentClientY) + const bottom = Math.max(b.originClientY, b.currentClientY) + + const nodes = b.tracksEl.querySelectorAll('.kf[data-kf-id]') + const next: SelectionKey[] = [] + for (const node of Array.from(nodes)) { + const r = node.getBoundingClientRect() + const cx = r.left + r.width / 2 + const cy = r.top + r.height / 2 + if (cx < left || cx > right || cy < top || cy > bottom) continue + const layerId = node.dataset.layerId + const kind = node.dataset.kind as 'main' | 'position' | 'rotation' | undefined + const keyframeId = node.dataset.kfId + if (!layerId || !kind || !keyframeId) continue + next.push({ layerId, kind, keyframeId }) + } + selectedKfs.value = next +} + function pixelTimeFromEvent(e: DragEvent | PointerEvent, el: HTMLElement): number { const rect = el.getBoundingClientRect() if (rect.width <= 0) return 0 @@ -665,10 +884,10 @@ function trimTooltip(ci: ClipInstance): string { const name = clipById.value.get(ci.clipId)?.name ?? '?' const dur = visibleDurationOf(ci).toFixed(2) const trims: string[] = [] - if ((ci.trimStart ?? 0) > 0) trims.push(`Start -${(ci.trimStart ?? 0).toFixed(2)}s`) - if ((ci.trimEnd ?? 0) > 0) trims.push(`Ende -${(ci.trimEnd ?? 0).toFixed(2)}s`) - const suffix = trims.length ? ` · ${trims.join(' · ')}` : '' - return `${name} · ${dur}s${suffix} · Kanten ziehen zum Verkürzen, Doppelklick zum Öffnen` + if ((ci.trimStart ?? 0) > 0) trims.push(t('timeline.trimStart', { value: (ci.trimStart ?? 0).toFixed(2) })) + if ((ci.trimEnd ?? 0) > 0) trims.push(t('timeline.trimEnd', { value: (ci.trimEnd ?? 0).toFixed(2) })) + const trimsStr = trims.length ? ` · ${trims.join(' · ')}` : '' + return t('timeline.trimTooltip', { name, duration: dur, trims: trimsStr }) } interface ClipTrimState { @@ -734,9 +953,21 @@ function onClipBlockDblClick(ci: ClipInstance) { store.enterClip(ci.clipId) } -function onClipBlockContextMenu(e: MouseEvent, ci: ClipInstance) { +async function onClipBlockContextMenu(e: MouseEvent, ci: ClipInstance) { e.preventDefault() - if (!confirm('Clip-Instanz entfernen?')) return + const clip = clipById.value.get(ci.clipId) + const ok = await confirmDialog({ + title: t('timeline.removeInstanceDialog.title'), + message: clip + ? t('timeline.removeInstanceDialog.message', { + name: clip.name, + time: ci.startTime.toFixed(2), + }) + : t('timeline.removeInstanceDialog.generic'), + confirmLabel: t('timeline.removeInstanceDialog.confirm'), + variant: 'danger', + }) + if (!ok) return store.removeClipInstance(ci.id) } @@ -829,6 +1060,12 @@ function onKeyDown(e: KeyboardEvent) { } } +function onDocumentKeyDown(e: KeyboardEvent) { + if (e.key === 'Escape' && selectedKfs.value.length) { + selectedKfs.value = [] + } +} + watch([menu, trackMenu], ([m, tm]) => { if (m || tm) { document.addEventListener('pointerdown', onDocumentPointerDown, true) @@ -874,6 +1111,7 @@ onMounted(() => { viewportWidth.value = rect.width }) ro.observe(scrollEl.value) + document.addEventListener('keydown', onDocumentKeyDown) }) onBeforeUnmount(() => { @@ -881,6 +1119,7 @@ onBeforeUnmount(() => { ro = null document.removeEventListener('pointerdown', onDocumentPointerDown, true) document.removeEventListener('keydown', onKeyDown) + document.removeEventListener('keydown', onDocumentKeyDown) }) @@ -890,7 +1129,7 @@ onBeforeUnmount(() => {
-
+
-
+
+
-

Noch keine Tracks.

+

{{ t('timeline.noTracks') }}

-
@@ -1141,31 +1393,31 @@ onBeforeUnmount(() => { {{ opt.label }} -
Erster Keyframe — Easing ohne Effekt
-
Still Frame — Easing deaktiviert
+
{{ t('timeline.firstKfHint') }}
+
{{ t('timeline.holdDisabledHint') }}
@@ -1176,7 +1428,7 @@ onBeforeUnmount(() => { :style="{ left: trackMenu.x + 'px', top: trackMenu.y + 'px' }" >
-
Farbe
+
{{ t('timeline.color') }}
@@ -1405,6 +1657,26 @@ onBeforeUnmount(() => { .tracks { display: flex; flex-direction: column; + position: relative; +} + +.box-select-rect { + position: absolute; + z-index: 50; + border: 1px solid var(--accent); + background: rgba(110, 168, 255, 0.12); + pointer-events: none; + border-radius: 2px; +} + +.kf.selected { + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +.kf.hold.selected { + outline: 2px solid var(--accent); + outline-offset: 2px; } .track { @@ -1495,6 +1767,58 @@ onBeforeUnmount(() => { opacity: 0.85; } +/* Neutralize hover states on locked tracks */ +.track.locked .track-name:hover { + background: var(--panel); + color: var(--text-dim); +} + +.track.locked .track-name.selected:hover { + background: + linear-gradient(var(--accent-soft), var(--accent-soft)), + var(--panel); + color: var(--accent); +} + +.track.locked.sub-track .track-name:hover { + background: var(--panel-alt); +} + +.track.locked.inactive:hover .track-lane { + opacity: 0.4; +} + +.track.locked .clip-block:hover { + background: color-mix(in srgb, var(--track-color, var(--accent)) 14%, transparent); + transform: none; +} + +.track.locked .clip-block:hover .clip-handle { + opacity: 0; +} + +.track.locked .clip-block.trimmed-start:hover .clip-handle.start, +.track.locked .clip-block.trimmed-end:hover .clip-handle.end { + opacity: 0.55; +} + +.track.locked .clip-handle:hover, +.track.locked .clip-handle:active { + background: transparent !important; + opacity: 0 !important; +} + +.track.locked .kf:hover { + background: var(--track-color, var(--accent)); + transform: rotate(45deg); +} + +.track.locked .kf.hold:hover { + background: var(--panel); + border-color: var(--track-color, var(--accent)); + transform: none; +} + .track-name { position: sticky; left: 0; diff --git a/src/components/WelcomeDialog.vue b/src/components/WelcomeDialog.vue index 59c1615..a284f34 100644 --- a/src/components/WelcomeDialog.vue +++ b/src/components/WelcomeDialog.vue @@ -12,7 +12,8 @@ import { listRecentProjects, type StoredProject, } from '@/lib/projectStore' -import { Modal } from '@/components/ui' +import { confirmDialog, Modal } from '@/components/ui' +import { t } from '@/i18n' const props = defineProps<{ modelValue: boolean }>() const emit = defineEmits<{ @@ -43,7 +44,9 @@ function formatDate(ts: number): string { d.getMonth() === now.getMonth() && d.getDate() === now.getDate() if (sameDay) { - return `heute ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` + return t('welcome.today', { + time: d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), + }) } return d.toLocaleString([], { day: '2-digit', @@ -65,7 +68,13 @@ function openProject(p: StoredProject) { async function removeProject(e: MouseEvent, p: StoredProject) { e.stopPropagation() - if (!confirm(`"${p.name}" wirklich löschen?`)) return + const ok = await confirmDialog({ + title: t('welcome.deleteDialog.title'), + message: t('welcome.deleteDialog.message', { name: p.name }), + confirmLabel: t('welcome.deleteDialog.confirm'), + variant: 'danger', + }) + if (!ok) return await deleteStoredProject(p.id) await reload() } @@ -108,14 +117,14 @@ watch( >
-
Laden…
+
{{ t('welcome.loading') }}
- Keine gespeicherten Projekte vorhanden. + {{ t('welcome.empty') }}
  • {{ p.name }}
    - {{ layerCount(p) }} Layer · {{ formatDate(p.savedAt) }} + {{ t('welcome.layerCount', { n: layerCount(p) }) }} · {{ formatDate(p.savedAt) }}