diff --git a/assets/svgs/download.svg b/assets/svgs/download.svg new file mode 100644 index 0000000..80a5817 --- /dev/null +++ b/assets/svgs/download.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/AppState.ts b/src/AppState.ts index df3bc4d..936cbcd 100644 --- a/src/AppState.ts +++ b/src/AppState.ts @@ -1,4 +1,4 @@ -import { inject, type InjectionKey, ref } from 'vue'; +import { inject, type InjectionKey, ref } from "vue"; export type UITool = | "track-unit-type" @@ -6,9 +6,10 @@ export type UITool = | "sticking"; export function createAppStateStore() { - const selectedTool = ref('track-unit-type'); + const selectedTool = ref("track-unit-type"); const activeTrackUnitType = ref(0); const activeStickingType = ref(1); + const unitMouseStart = ref(null); const selectingUnits = ref(false); const deselectingUnits = ref(false); @@ -18,13 +19,14 @@ export function createAppStateStore() { selectedTool, activeTrackUnitType, activeStickingType, + unitMouseStart, }; } export type AppStateStore = ReturnType; -export const AppStateStoreKey = Symbol('AppStateStore') as InjectionKey; +export const AppStateStoreKey = Symbol("AppStateStore") as InjectionKey; export function useAppStateStore(): AppStateStore { return inject(AppStateStoreKey, createAppStateStore, true); diff --git a/src/Beat.ts b/src/Beat.ts index db1a38b..102619e 100644 --- a/src/Beat.ts +++ b/src/Beat.ts @@ -2,7 +2,12 @@ import { deserialise as deserialiseTrack, type TrackInitOptions, createTrack, is import { greatestCommonDivisor, isPosInt } from "@/utils"; import { watch, computed, effectScope, ref, shallowRef, triggerRef } from "vue"; +export interface BeatManager { + notifyChange(): void; +} + type BeatGroupInitOptions = { + manager: BeatManager, barCount: number; isLooping: boolean; timeSigUp: number; @@ -33,11 +38,12 @@ function isBeatSerial(serial: Record): serial is BeatSerial { typeof serial.barSettingsLocked === "boolean"; } -export function deserialise(serial: {}) { +export function deserialise(serial: {}, manager: BeatManager) { if (!isBeatSerial(serial)) { throw new Error("Not a valid beat serial"); } const newBeat = createBeat({ + manager, loopLength: serial.globalLoopLength, barCount: serial.barCount, isLooping: serial.globalIsLooping, @@ -46,7 +52,7 @@ export function deserialise(serial: {}) { useAutoBeatLength: serial.useAutoBeatLength, }); serial.tracks.forEach(trackSerial => { - const track = deserialiseTrack(trackSerial); + const track = deserialiseTrack(trackSerial, manager); if (track) newBeat.tracks.value.push(track); }); return newBeat; @@ -55,6 +61,7 @@ export function deserialise(serial: {}) { export function createBeat(opts: BeatGroupInitOptions) { const scope = effectScope(); return scope.run(() => { + const manager = opts.manager; const tracks = shallowRef([]); const barCountInternal = ref(opts.barCount ?? 4); const barCount = computed({ @@ -124,17 +131,18 @@ export function createBeat(opts: BeatGroupInitOptions) { tracks.value[trackIndex2] = track1; } - function addTrack(options?: TrackInitOptions): Track | null { + function addTrack(opts?: Omit): Track | null { let newTrack: Track | null; - options = { + const options: TrackInitOptions = { + manager, bars: barCount.value, isLooping: globalIsLooping.value, loopLength: globalLoopLength.value, - ...options, + ...opts, timeSig: { up: timeSigUp.value, down: 4, - ...options?.timeSig ?? {}, + ...opts?.timeSig ?? {}, }, }; newTrack = createTrack(options) ?? null; @@ -172,6 +180,10 @@ export function createBeat(opts: BeatGroupInitOptions) { } as const; } + watch(tracks, () => { + manager.notifyChange(); + }); + watch([barCount, timeSigUp], ([newBarCount, newTimeSigUp]) => { for (const track of tracks.value) { track.barCount.value = newBarCount; diff --git a/src/BeatStore.ts b/src/BeatStore.ts index 2ad1493..bf81f14 100644 --- a/src/BeatStore.ts +++ b/src/BeatStore.ts @@ -1,8 +1,9 @@ -import { type Beat, createBeat, deserialise as deserialiseBeat } from "@/Beat"; -import { inject, computed, type InjectionKey, ref, shallowRef, triggerRef, watch } from "vue"; +import { type Beat, createBeat, deserialise as deserialiseBeat, type BeatManager } from "@/Beat"; +import { inject, computed, type InjectionKey, ref, shallowRef, triggerRef, watch, onScopeDispose } from "vue"; -function defaultMainBeatGroup(): Beat { +function defaultMainBeatGroup(manager: BeatManager): Beat { const defaultSettings = { + manager, barCount: 2, isLooping: false, timeSigUp: 8, @@ -16,15 +17,23 @@ function defaultMainBeatGroup(): Beat { } export function createBeatStore() { - const beats = shallowRef([ defaultMainBeatGroup() ]); + const saveDirty = ref(false); + + const manager = { + notifyChange() { + saveDirty.value = true; + }, + }; + + const beats = shallowRef([ defaultMainBeatGroup(manager) ]); const activeBeatIndex = ref(0); const activeBeat = computed(() => beats.value[activeBeatIndex.value] ?? null); const autoSave = ref(true); - const orientation = ref<'horizontal' | 'vertical'>('horizontal'); + const orientation = ref<"horizontal" | "vertical">("horizontal"); function resetActiveBeat(): void { const current = activeBeat.value; - beats.value[activeBeatIndex.value] = defaultMainBeatGroup(); + beats.value[activeBeatIndex.value] = defaultMainBeatGroup(manager); current?.destroy(); triggerRef(beats); } @@ -37,7 +46,7 @@ export function createBeatStore() { } function addNewBeat(): void { - const newBeat = defaultMainBeatGroup(); + const newBeat = defaultMainBeatGroup(manager); beats.value.push(newBeat); if (autoSave.value) { save("localStorage"); @@ -51,8 +60,9 @@ export function createBeatStore() { localStorage.setItem("drum-slayer-save", JSON.stringify({ beats: serials, activeBeatIndex: activeBeatIndex.value, - orientation: orientation.value ?? 'horizontal', + orientation: orientation.value ?? "horizontal", })); + saveDirty.value = false; } } @@ -62,7 +72,7 @@ export function createBeatStore() { && (typeof source.activeBeatIndex === "number" || typeof source.activeBeatIndex === "undefined") && typeof source.orientation === "string") { try { - source.beats.forEach((beat: any) => beats.value.push(deserialiseBeat(beat))); + source.beats.forEach((beat: any) => beats.value.push(deserialiseBeat(beat, manager))); if (typeof source.activeBeatIndex === "number") { activeBeatIndex.value = source.activeBeatIndex; } @@ -73,6 +83,7 @@ export function createBeatStore() { } else { resetActiveBeat(); } + saveDirty.value = false; } function bakeAll(): void { @@ -80,21 +91,35 @@ export function createBeatStore() { } watch([activeBeatIndex, orientation, beats], () => { - save('localStorage'); + save("localStorage"); }); - const savedItem = localStorage.getItem('drum-slayer-save'); + const savedItem = localStorage.getItem("drum-slayer-save"); if (savedItem) { const serial = JSON.parse(savedItem); - beats.value = [defaultMainBeatGroup()]; + beats.value = [defaultMainBeatGroup(manager)]; loadFromSave(serial); } + const saveInterval = setInterval(() => saveDirty && save("localStorage"), 5 * 60 * 1000); + + watch(saveDirty, () => console.log(saveDirty.value)); + + onScopeDispose(() => clearInterval(saveInterval)); + + window.addEventListener("beforeunload", (e) => { + if (saveDirty) { + e.preventDefault(); + e.returnValue = true; + } + }); + return { beats, activeBeatIndex, activeBeat, autoSave, + saveDirty, orientation, save, @@ -107,7 +132,7 @@ export function createBeatStore() { export type BeatStore = ReturnType; -export const BeatStoreKey = Symbol('BeatStore') as InjectionKey; +export const BeatStoreKey = Symbol("BeatStore") as InjectionKey; export function useBeatStore(): BeatStore { return inject(BeatStoreKey, createBeatStore, true); diff --git a/src/Track.ts b/src/Track.ts index 1d0272a..0f59e99 100644 --- a/src/Track.ts +++ b/src/Track.ts @@ -1,7 +1,9 @@ import { isPosInt } from "@/utils"; import { ref, shallowRef, computed, watch, reactive, triggerRef, effectScope } from "vue"; +import type { BeatManager } from "./Beat"; export type TrackInitOptions = { + manager: BeatManager, timeSig?: { up: number, down: number, @@ -52,7 +54,7 @@ function isTrackSerial(serial: any): serial is TrackSerial { return correctTypes && serial.units.isOn.length === serial.units.type.length; } -export function deserialise(serial: Record) { +export function deserialise(serial: Record, manager: BeatManager) { if (!isTrackSerial(serial)) { throw new Error("Invalid track serial."); } @@ -62,6 +64,7 @@ export function deserialise(serial: Record) { stickingType: serial.units.stickingType[i] ?? 0, })); return createTrack({ + manager, bars: serial.barCount, isLooping: serial.looping, loopLength: serial.loopLength, @@ -236,6 +239,8 @@ export function createTrack(options: TrackInitOptions) { triggerRef(unitRecord); } + const manager = options.manager; + watch(unitRecord, () => manager.notifyChange()); watch([barCount, timeSigDown, timeSigUp], () => updateTrackUnitLength(), { immediate: true }); return { diff --git a/src/ui/Root/Root.vue b/src/ui/Root/Root.vue index d6849d5..2406974 100644 --- a/src/ui/Root/Root.vue +++ b/src/ui/Root/Root.vue @@ -2,62 +2,63 @@
-
-
+
+
{{ beat.name.value }}
+
-
-

{{ title }}

+
+

{{ title }}

-
+
- Save +
-
+
-
+
@@ -67,7 +68,7 @@ diff --git a/src/ui/TrackUnit/TrackUnit.vue b/src/ui/TrackUnit/TrackUnit.vue index f0e9414..528b664 100644 --- a/src/ui/TrackUnit/TrackUnit.vue +++ b/src/ui/TrackUnit/TrackUnit.vue @@ -2,10 +2,12 @@
+ @contextmenu.prevent.stop="() => false">
@@ -18,6 +20,7 @@ import { useAppStateStore } from "@/AppState"; const props = defineProps<{ + id: string, stickingType: number, type: number, on: boolean, @@ -25,17 +28,22 @@ const emit = defineEmits<{ (e: 'rotateType'): true, - (e: 'mousedown'): true, - (e: 'mouseup'): true, + (e: 'toggle'): true, + (e: 'deactivate'): true, + (e: 'applyTool'): true, }>(); const { selectingUnits, + lastTrackUnit, deselectingUnits, + unitMouseStart, } = useAppStateStore(); let rotationTimeout: ReturnType | null = null; let blockNextMouseUp = false; + let mouseHeld = false; + let movement = 0; const classes = computed(() => getClasses({ on: props.on, @@ -47,33 +55,56 @@ const iconName = computed(() => StickingTypeIconMap[TrackUnitStickingTypeList[props.stickingType] ?? 'none']); function handleMouseDown(ev: MouseEvent): void { + blockNextMouseUp = false; if (ev.button === 0) { + unitMouseStart.value = props.id; selectingUnits.value = true; - emit('mousedown'); } else if (ev.button === 2) { + unitMouseStart.value = props.id; deselectingUnits.value = true; - emit('mousedown'); } else if (ev.button === 1) { emit('rotateType'); } } + function handleMouseUp(ev: MouseEvent): void { + if (!blockNextMouseUp && unitMouseStart.value === props.id) { + if (ev.button === 0) { + emit('toggle'); + } else if (ev.button === 2) { + emit('deactivate'); + } + } + } + + function handleMouseMove(ev: MouseEvent): void { + if (selectingUnits.value || deselectingUnits.value) { + movement += ev.movementX**2 + ev.movementY**2; + } + if (unitMouseStart.value === props.id && movement > 2**2) { + handleMouseOver(); + blockNextMouseUp = true; + } + } + + function handleMouseOver(ev?: MouseEvent): void { + if (selectingUnits.value) { + emit('applyTool'); + } else if (deselectingUnits.value) { + emit('deactivate'); + } + } + function handleMouseOut(ev: MouseEvent): void { + movement = 0; if (rotationTimeout) { clearTimeout(rotationTimeout); rotationTimeout = null; } } - function handleMouseUp(ev: MouseEvent): void { - if (!blockNextMouseUp) { - emit('mouseup'); - } - blockNextMouseUp = false; - } - function handleTouchStart(ev: TouchEvent): void { - rotationTimeout = rotationTimeout || setTimeout(() => { + rotationTimeout ??= setTimeout(() => { emit('rotateType'); rotationTimeout = null; }, 400); @@ -118,15 +149,15 @@ transition: none; } + .track-unit.on.Accent, .track-unit.on.Accent.highlightable:hover { + border-color: var(--color-ui-neutral-light); + } + .track-unit.on.highlightable:hover { border-color: var(--color-ui-accent-hover); background-color: var(--color-ui-accent-hover); } - .track-unit.on.Accent { - border-color: var(--color-ui-neutral-light); - } - .track-unit.on.Ghost { opacity: 60%; } diff --git a/src/ui/Widgets/Icon/icons.ts b/src/ui/Widgets/Icon/icons.ts index 532fb47..ad8cfb8 100644 --- a/src/ui/Widgets/Icon/icons.ts +++ b/src/ui/Widgets/Icon/icons.ts @@ -3,12 +3,14 @@ import ArrowClockwise from "assets/svgs/arrow-clockwise.svg"; import Trash from "assets/svgs/trash.svg"; import Snowflake from "assets/svgs/snowflake.svg"; import LeftHand from "assets/svgs/LH.png"; +import Download from "assets/svgs/download.svg"; import RightHand from "assets/svgs/RH.png"; import LeftFoot from "assets/svgs/LF.png"; import RightFoot from "assets/svgs/RF.png"; export const IconUrlMap = { arrowClockwise: ArrowClockwise, + download: Download, list: List, trash: Trash, snowflake: Snowflake,