Update

src/components/App.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {useEventListener} from '@vueuse/core'
 import {Bndr} from 'bndr-js'
 import {scalar} from 'linearly'
 import Tq, {useTweeq} from 'tweeq'
@@ -53,16 +52,17 @@ actions.onBeforePerform(action => {
 	}
 })
 
-useEventListener(window, 'beforeunload', e => {
-	if (project.hasModified) {
-		e.preventDefault()
-		e.returnValue =
-			'There are unsaved changes. Are you sure you want to reload?'
-	}
-})
-
 //------------------------------------------------------------------------------
 actions.register([
+	{
+		id: 'create_new',
+		icon: 'mdi:file',
+		input: 'command+n',
+		async perform() {
+			await project.createNew()
+			viewport.currentFrame = project.captureFrame
+		},
+	},
 	{
 		id: 'open_project',
 		icon: 'material-symbols:folder-open-rounded',

src/stores/project.ts

@@ -4,7 +4,7 @@ import {mat2d} from 'linearly'
 import {clamp, cloneDeep} from 'lodash'
 import {defineStore} from 'pinia'
 import {ConfigType} from 'tethr'
-import {computed, reactive, ref, shallowRef, toRaw, toRefs, watch} from 'vue'
+import {computed, reactive, shallowRef, toRaw, toRefs, watch} from 'vue'
 
 import {
 	getDirectoryHandle,
@@ -109,8 +109,11 @@ const emptyProject: Project = {
 export const useProjectStore = defineStore('project', () => {
 	const directoryHandle = shallowRef<FileSystemDirectoryHandle | null>(null)
 
+	const isSavedInOriginPrivateDirectory = computed(() => {
+		return directoryHandle.value?.name === ''
+	})
+
 	const project = reactive<Project>(cloneDeep(emptyProject))
-	const hasModified = ref(false)
 
 	navigator.storage.getDirectory().then(handler => {
 		open(handler)
@@ -141,6 +144,20 @@ export const useProjectStore = defineStore('project', () => {
 	})
 
 	// Open and Save Projects
+	async function createNew() {
+		for (const key of Object.keys(emptyProject)) {
+			;(project as any)[key] = (emptyProject as any)[key]
+		}
+
+		history.clear()
+
+		if (directoryHandle.value?.name === '') {
+			for await (const key of directoryHandle.value.keys()) {
+				directoryHandle.value.removeEntry(key)
+			}
+		}
+	}
+
 	async function open(handler?: FileSystemDirectoryHandle) {
 		directoryHandle.value = handler ?? (await getDirectoryHandle())
 
@@ -188,7 +205,15 @@ export const useProjectStore = defineStore('project', () => {
 		await save()
 	}
 
+	let isSaving = false
 	async function save() {
+		if (isSaving) {
+			console.warn('Saving is already in progress')
+			return
+		}
+
+		isSaving = true
+
 		if (directoryHandle.value === null) {
 			directoryHandle.value = await navigator.storage.getDirectory()
 		}
@@ -213,6 +238,8 @@ export const useProjectStore = defineStore('project', () => {
 		}
 
 		await saveJson(directoryHandle, flatProject, 'project.json')
+
+		isSaving = false
 	}
 
 	async function openShot(shot: Shot<string>): Promise<Shot> {
@@ -281,7 +308,7 @@ export const useProjectStore = defineStore('project', () => {
 		...toRefs(project),
 		undo: history.undo,
 		redo: history.redo,
-		hasModified,
+		createNew,
 		open,
 		saveAs,
 		allKomas,

src/stores/viewport.ts

@@ -44,6 +44,9 @@ export const useViewportStore = defineStore('viewport', () => {
 	// Play
 	watch(isPlaying, () => {
 		if (!isPlaying.value) {
+			if (!project.isLooping && temporalFrame.value) {
+				currentFrame.value = temporalFrame.value
+			}
 			temporalFrame.value = null
 			return
 		}

src/util.ts

@@ -42,7 +42,14 @@ export async function saveBlob(
 ) {
 	if (!handler.value) throw new Error('No directory handler')
 
-	if (savedFilenameForBlob.get(blob) !== filename) {
+	let map = savedFilenameForBlob.get(handler.value)
+
+	if (!map) {
+		map = new WeakMap()
+		savedFilenameForBlob.set(handler.value, map)
+	}
+
+	if (map.get(blob) !== filename) {
 		const fileHandle = await handler.value.getFileHandle(filename, {
 			create: true,
 		})
@@ -53,12 +60,17 @@ export async function saveBlob(
 		await w.write(blob)
 		await w.close()
 
-		savedFilenameForBlob.set(blob, filename)
+		map.set(blob, filename)
 	}
 
 	return filename
 }
 
+const savedFilenameForBlob = new WeakMap<
+	FileSystemDirectoryHandle,
+	WeakMap<Blob, string>
+>()
+
 // File System Access API utils
 export async function loadJson<T>(
 	handler: Ref<FileSystemDirectoryHandle | null>,
@@ -91,8 +103,6 @@ export async function saveJson<T>(
 	await w.close()
 }
 
-const savedFilenameForBlob = new WeakMap<Blob, string>()
-
 /**
  * Query and request readwrite permission for a FileSystemhandle
  */