feat: cleaned up mouse behaviour and saving

2023-03-12 15:46:18 +01:00
parent e05c95a673
commit e312eedbdc
9 changed files with 309 additions and 199 deletions
--- a/assets/svgs/download.svg
+++ b/assets/svgs/download.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
+  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+</svg>
--- 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<UITool>('track-unit-type');
+    const selectedTool = ref<UITool>("track-unit-type");
    const activeTrackUnitType = ref(0);
    const activeStickingType = ref(1);
+    const unitMouseStart = ref<string | null>(null);
    const selectingUnits = ref(false);
    const deselectingUnits = ref(false);
    
@@ -18,13 +19,14 @@ export function createAppStateStore() {
        selectedTool,
        activeTrackUnitType,
        activeStickingType,
+        unitMouseStart,
    };
 }


 export type AppStateStore = ReturnType<typeof createAppStateStore>;

-export const AppStateStoreKey = Symbol('AppStateStore') as InjectionKey<AppStateStore>;
+export const AppStateStoreKey = Symbol("AppStateStore") as InjectionKey<AppStateStore>;

 export function useAppStateStore(): AppStateStore {
    return inject(AppStateStoreKey, createAppStateStore, true);
--- 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<string, unknown>): 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<Track[]>([]);
        const barCountInternal = ref<number>(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<TrackInitOptions, 'manager'>): 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;
--- 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<Beat[]>([ defaultMainBeatGroup() ]);
+    const saveDirty = ref(false);
+
+    const manager = {
+        notifyChange() {
+            saveDirty.value = true;
+        },
+    };
+
+    const beats = shallowRef<Beat[]>([ defaultMainBeatGroup(manager) ]);
    const activeBeatIndex = ref(0);
    const activeBeat = computed<Beat | null>(() => 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<typeof createBeatStore>;

-export const BeatStoreKey = Symbol('BeatStore') as InjectionKey<BeatStore>;
+export const BeatStoreKey = Symbol("BeatStore") as InjectionKey<BeatStore>;

 export function useBeatStore(): BeatStore {
    return inject(BeatStoreKey, createBeatStore, true);
--- 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<string, unknown>) {
+export function deserialise(serial: Record<string, unknown>, manager: BeatManager) {
    if (!isTrackSerial(serial)) {
        throw new Error("Invalid track serial.");
    }
@@ -62,6 +64,7 @@ export function deserialise(serial: Record<string, unknown>) {
        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 {
--- a/src/ui/Root/Root.vue
+++ b/src/ui/Root/Root.vue
@@ -2,62 +2,63 @@
    <div 
        class="root"
        :class="{ 'sidebar-visible': sidebarActive, 'vertical-mode': currentOrientation === 'vertical' }">
-        <div class="root-sidebar">
-            <div class="root-sidebar-left-strip">
+        <div class="sidebar">
+            <div class="sidebar-left-strip">
                <div v-for="(beat, i) in beats"
                    :key="beat.name.value"
-                    class="root-sidebar-left-tab"
+                    class="sidebar-left-tab"
                    :class="{ 'active': i === activeBeatIndex }"
                    @click="activeBeatIndex = i">
                    {{ beat.name.value }}
                </div>
                <div 
-                    class="root-sidebar-add-beat"
+                    class="sidebar-add-beat"
                    @click="addNewBeat()">
                    +
                </div>
            </div> 
-            <div class="root-settings">
-                <h1 class="root-title">{{ title }}</h1>
+            <div class="settings">
+                <h1 class="title">{{ title }}</h1>
                <beat-settings :beat-index="activeBeatIndex" />
            </div>
-            <div class="root-sidebar-toggle">
+            <div class="sidebar-toggle">
                <div
-                    class="root-quick-access-button"
+                    class="quick-access-button"
                    :title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
                    @click="sidebarActive = !sidebarActive">
                    <icon icon-name="list" color="var(--color-ui-neutral-dark)" />
                </div>
                <div
-                    class="root-quick-access-button"
+                    class="quick-access-button"
                    title="Change orientation"
                    @click="toggleOrientation">
                    <icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
                </div>
                <div
-                    class="root-quick-access-button"
+                    class="quick-access-button"
                    title="Bake all tracks"
                    @click="bakeAll">
                    <icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
                </div>
                <div
-                    class="root-quick-access-button"
+                    class="quick-access-button"
                    title="Reset all"
                    @click="resetActiveBeat">
                    <icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
                </div>
                <div
-                    class="root-quick-access-button"
-                    title="Reset all"
+                    class="quick-access-button"
+                    :class="{ 'unclickable': !saveDirty }"
+                    :title="saveDirty ? 'Save changes' : 'No unsaved changes'"
                    @click="save('localStorage')">
-                    Save
+                    <icon icon-name="download" color="var(--color-ui-neutral-dark)" />
                </div>
            </div> 
        </div>

-        <div class="root-beat-stage-container">
+        <div class="beat-stage-container">
            <toolbox />
-            <div class="root-beat-stage">
+            <div class="beat-stage">
                <beat-view 
                    :beat-index="activeBeatIndex"
                    :orientation="currentOrientation" />
@@ -67,7 +68,7 @@
 </template>

 <script setup lang="ts">
-    import { onBeforeUnmount, onMounted, provide, ref } from "vue";
+    import { onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
    import BeatSettings from "@/ui/BeatSettings/BeatSettings.vue";
    import BeatView from "@/ui/Beat/Beat.vue";
    import Icon from "@/ui/Widgets/Icon/Icon.vue";
@@ -95,8 +96,19 @@
        beats,
        addNewBeat,
        bakeAll,
+        saveDirty,
    } = beatStore;

+    const TITLE = 'Drum Slayer';
+
+    watch(saveDirty, (dirty) => {
+        if (dirty) {
+            document.title = `${ TITLE } (unsaved changes)`;
+        } else {
+            document.title = TITLE;
+        }
+    });
+
    const mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
    const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => { 
        sidebarActive.value = event.matches;
@@ -107,6 +119,7 @@
    function windowMouseUp() {
        appStateStore.selectingUnits.value = false;        
        appStateStore.deselectingUnits.value = false;        
+        appStateStore.unitMouseStart.value = null;        
    }

    onMounted(() => {
@@ -134,142 +147,149 @@
        background-color: var(--color-bg-dark);
        height: 100vh;
        align-content: center;
-    }

-    .root-sidebar {
-        position: absolute;
-        left: -28em;
-        width: 30em;
-        height: 100vh;
-        display: flex;
-        transition: left 400ms;
-    }
-
-    .sidebar-visible .root-sidebar {
-        left: 0;
-    }
-
-    .root-settings {
-        z-index: 1;
-        width: 28em;
-        background-color: var(--color-bg-light);
-        overflow: scroll;
-        display: inline-block;
-    }
-
-    .root-settings .root-title {
-        color: var(--color-title-light);
-        text-align: center;
-    }
-
-    .root-sidebar-toggle {
-        z-index: 1;
-        height: 100vh;
-        min-width: 2em;
-        background-color: var(--color-bg-light);
-        left: 0;
-    }
-
-    .root-quick-access-button {
-        right: 0;
-        width: 2em;
-        height: 2em;
-        cursor: pointer;
-        margin-bottom: 0.5em;
-    }
-
-    .root-beat-stage-container {
-        position: absolute;
-        height: 100%;
-        left: 0;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        transition: left 400ms, width 400ms;
-    }
-
-    .sidebar-visible .root-beat-stage-container {
-        left: 30em;
-        width: calc(100vw - 30em);
-    }
-
-    .root-beat-stage {
-        position: relative;
-        max-height: 100vh;
-        margin: auto;
-        max-width: 100vw;
-        transition: max-width 400ms;
-        padding-left: 3em;
-    }
-
-    .vertical-mode .root-beat-stage {
-        margin: auto auto;
-        height: 100vh;
-    }
-
-    .sidebar-visible .root-beat-stage {
-        max-width: calc(100vw - 30em);
-    }
-
-    .root-sidebar-left-strip {
-        writing-mode: vertical-rl;
-        background-color: var(--color-bg-light);
-    }
-
-    .root-sidebar-left-strip > * {
-        display: inline-block;
-    }
-
-    .root-sidebar-left-tab {
-        transform: rotate(-180deg);
-        display: inline-block;
-        width: 100%;
-        padding: 8px 3px 8px 3px;
-    }
-
-    .root-sidebar-left-tab.active {
-        background-color: var(--color-bg-medium);
-        display: inline-block;
-    }
-
-    .root-sidebar-add-beat {
-        width: 100%;
-        padding: 8px 3px 8px 3px;
-    }
-
-    .root-sidebar-add-beat:hover,
-    .root-sidebar-left-tab:hover:not(.active) {
-        cursor: pointer;
-        background-color: var(--color-ui-neutral-dark);
-        transition: background-color 200ms;
-    }
-
-    @media screen and (max-width: 900px) {
-        .sidebar-visible .root-sidebar {
-            left: 0;
-            width: 100vw;
+        .sidebar {
+            position: absolute;
+            left: -28em;
+            width: 30em;
+            height: 100vh;
+            display: flex;
+            transition: left 400ms;
        }
-        .root-sidebar {
-            left: calc(-100vw + 2em);
-            width: 100vw;
+    
+        &.sidebar-visible {
+            .beat-stage {
+                max-width: calc(100vw - 30em);
+            }
+
+            .beat-stage-container {
+                left: 30em;
+                width: calc(100vw - 30em);
+            }
+
+            .sidebar {
+                left: 0;
+            }
        }
-        .root-settings {
-            width: calc(100vw - 2em);
+
+        .settings {
+            z-index: 1;
+            width: 28em;
+            background-color: var(--color-bg-light);
+            overflow: scroll;
+            display: inline-block;
        }
-        .sidebar-visible .root-beat-stage-container {
-            left: 100vw;
+
+        .settings .title {
+            color: var(--color-title-light);
+            text-align: center;
        }
-        .root-beat-stage-container {
+
+        .sidebar-toggle {
+            z-index: 1;
+            height: 100vh;
+            min-width: 2em;
+            background-color: var(--color-bg-light);
            left: 0;
        }
-        .sidebar-visible .root-beat-stage {
+
+        .quick-access-button {
+            right: 0;
+            width: 2em;
+            height: 2em;
+            cursor: pointer;
+            margin-bottom: 0.5em;
+
+            &.unclickable {
+                opacity: 50%;
+                cursor: auto;
+            }
+        }
+
+        .beat-stage-container {
+            position: absolute;
+            height: 100%;
+            left: 0;
+            width: 100vw;
+            display: flex;
+            flex-direction: column;
+            transition: left 400ms, width 400ms;
+        }
+
+        .beat-stage {
+            position: relative;
+            max-height: 100vh;
+            margin: auto;
            max-width: 100vw;
+            transition: max-width 400ms;
+            padding-left: 3em;
        }
-    }

-    * {
-        user-drag: none;
-        user-select: none;
+        &.vertical-mode .beat-stage {
+            margin: auto auto;
+            height: 100vh;
+        }
+
+        .sidebar-left-strip {
+            writing-mode: vertical-rl;
+            background-color: var(--color-bg-light);
+        }
+
+        .sidebar-left-strip > * {
+            display: inline-block;
+        }
+
+        .sidebar-left-tab {
+            transform: rotate(-180deg);
+            display: inline-block;
+            width: 100%;
+            padding: 8px 3px 8px 3px;
+        }
+
+        .sidebar-left-tab.active {
+            background-color: var(--color-bg-medium);
+            display: inline-block;
+        }
+
+        .sidebar-add-beat {
+            width: 100%;
+            padding: 8px 3px 8px 3px;
+        }
+
+        .sidebar-add-beat:hover,
+        .sidebar-left-tab:hover:not(.active) {
+            cursor: pointer;
+            background-color: var(--color-ui-neutral-dark);
+            transition: background-color 200ms;
+        }
+
+        @media screen and (max-width: 900px) {
+            &.sidebar-visible .sidebar {
+                left: 0;
+                width: 100vw;
+            }
+            .sidebar {
+                left: calc(-100vw + 2em);
+                width: 100vw;
+            }
+            .settings {
+                width: calc(100vw - 2em);
+            }
+            .sidebar-visible .beat-stage-container {
+                left: 100vw;
+            }
+            .beat-stage-container {
+                left: 0;
+            }
+            .sidebar-visible .beat-stage {
+                max-width: 100vw;
+            }
+        }
+
+        * {
+            user-drag: none;
+            user-select: none;
+        }
    }
 </style>

--- a/src/ui/Track/Track.vue
+++ b/src/ui/Track/Track.vue
@@ -3,15 +3,17 @@
        <div class="track-main">
            <div class="track-unit-block">
                <track-unit v-for="(trackUnit, i) in trackUnits" 
+                    :key="`tu${ trackIndex }${ i }`"
+                    :id="`tu${ trackIndex }${ i }`"
                    class="track-unit"
                    :class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
                    :sticking-type="trackUnit.stickingType"
                    :type="trackUnit.type"
                    :on="trackUnit.on"
                    @rotate-type="rotateTrackUnit(i)"
-                    @mouseup="applyCurrentToolToTrackUnit(i)"
-                    @mousedown="applyCurrentToolToTrackUnit(i)"
-                    @mouseover="applyCurrentToolToTrackUnit(i)" />
+                    @deactivate="deactivateUnit(i)"
+                    @toggle="toggle(i)"
+                    @apply-tool="applyCurrentToolToTrackUnit(i)" />
            </div>
        </div>
    </div>
@@ -53,27 +55,34 @@
        return units;
    });

+    function toggle(index: number) {
+        if (!track.value) return;
+        track.value.toggleUnit(index);
+        if (track.value.getUnitByIndex(index).on) {
+            applyCurrentToolToTrackUnit(index);
+        }
+    }
+
    function rotateTrackUnit(index: number) {
        track.value?.rotateUnit(index);
    }

+    function deactivateUnit(index: number) {
+        track.value?.setStickingType(index, 0);
+        track.value?.setUnitOn(index, false);
+    }
+
    function applyCurrentToolToTrackUnit(index: number) {
-        if (selectedTool.value === "sticking") {
-            if (selectingUnits.value) {
+        switch (selectedTool.value) {
+            case "sticking":
                track.value?.setStickingType(index, activeStickingType.value);
-            } else if (deselectingUnits.value) {
-                track.value?.setStickingType(index, 0);
-            }
-        } else if (selectedTool.value === "track-unit-type") {
-            if (selectingUnits.value) {
+                break;
+            case "track-unit-type":
                track.value?.updateUnit(index, { on: true, type: activeTrackUnitType.value });
-            } else if (deselectingUnits.value) {
+                break;
+            case "eraser":
                track.value?.setUnitOn(index, false);
-            }
-        } else if (selectedTool.value === "eraser") {
-            if (selectingUnits.value || deselectingUnits.value) {
-                track.value?.setUnitOn(index, false);
-            }
+                break;
        }
    }
 </script>
--- a/src/ui/TrackUnit/TrackUnit.vue
+++ b/src/ui/TrackUnit/TrackUnit.vue
@@ -2,10 +2,12 @@
    <div :class="classes" 
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
+        @mouseover="handleMouseOver"
+        @mousemove="handleMouseMove"
        @mouseout="handleMouseOut"
        @touchstart="handleTouchStart"
        @touchend="handleTouchEnd"
-        @contextmenu="() => false">
+        @contextmenu.prevent.stop="() => false">
        <icon :icon-name="iconName" />
    </div>
 </template>
@@ -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<typeof setTimeout> | 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%;
    }
--- 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,