feat: add util function createSettings

src/components/VpEditor.vue

@@ -1,10 +1,3 @@
-<script lang="ts">
-const defaultSettings: Settings = {
-  tool: 'freehand',
-  thickness: 5,
-  color: '#c82d2d'
-}
-</script>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
@@ -13,6 +6,7 @@ import VpImage from './VpImage.vue'
 import VpToolbar from './VpToolbar.vue'
 import { useDraw } from '@/composables/useDraw'
 import { randomId } from '@/utils/randomId'
+import { defaultSettings } from '@/utils/createSettings'
 
 const emit = defineEmits<{
   (e: 'save', { svg, tools, history }: SaveParameters): void

src/main.ts

@@ -24,6 +24,7 @@ export { createDataUrl } from './utils/createDataUrl'
 export { urlToBlob } from './utils/urlToBlob'
 export { canvasToBlob } from './utils/canvasToBlob'
 export { randomId } from './utils/randomId'
+export { createSettings } from './utils/createSettings'
 
 // Types
 export * from './types'

src/utils/createSettings.test.ts

@@ -0,0 +1,17 @@
+import { useLine } from "@/composables/tools/useLine/useLine";
+import { createSettings } from "./createSettings";
+import { describe, expect, it } from "vitest";
+import { useBackground } from "@/composables/tools/useBackground/useBackground";
+
+
+describe('createSettings', () => {
+    it('should return defaultSettings', () => {
+        const settings = createSettings([])
+        expect(settings.value.color).toBe("#c82d2d")
+    })
+
+    it('should pick the first usable tool', () => {
+        const settings = createSettings([useBackground({blob: new Blob()}), useLine()])
+        expect(settings.value.tool).toBe("line")
+    })
+})

src/utils/createSettings.ts

@@ -0,0 +1,20 @@
+import type { Settings, Tool } from "@/types";
+import { ref, type Ref } from "vue";
+
+export const defaultSettings: Settings = {
+  tool: 'freehand',
+  thickness: 5,
+  color: '#c82d2d'
+}
+
+/** Use this function to create your settings ref. It will use the default settings as a base and merge in the settings you provide. */
+export function createSettings<Tools extends Tool<any>[]>(tools: Tools, settings: Partial<Settings> = {}): Ref<Settings> {
+    // TODO: let the tools declare what settings they need, and merge them in here
+    const usableTool = tools.find(t => t.icon)
+    return ref(Object.assign(
+        {},
+        defaultSettings,
+        { tool: usableTool?.type ?? 'freehand'},
+        settings
+    ))
+}