update

src/Track.ts

@@ -2,6 +2,7 @@ import { isPosInt, EffectScoped } from "@/utils";
 import { ref, shallowRef, computed, watch, reactive, triggerRef, type Ref, type ShallowRef } from "vue";
 import type { BeatManager } from "./Beat";
 import { z } from "zod";
+import { useAppStateStore, type UITool } from "./AppState";
 
 export type TrackInitOptions = {
     visible?: boolean,
@@ -80,6 +81,8 @@ export class Track extends EffectScoped {
     private timeSig: { up: number, down: number };
     private manager: BeatManager;
     private unitRecord: ShallowRef<TrackUnit[]>;
+    private appState = useAppStateStore();
+
     name: Ref<string>;
     timeSigUp: Ref<number>;
     timeSigDown: Ref<number>;
@@ -207,6 +210,39 @@ export class Track extends EffectScoped {
         triggerRef(this.unitRecord);
     }
 
+    /**
+     * Not specifying the index will apply the tool to the whole track
+     */
+    applySelectedTool(index?: number) {
+        switch (this.appState.selectedTool.value) {
+            case "sticking":
+                if (typeof index !== 'number') {
+                    this.unitRecord.value.forEach(unit => unit.stickingType = this.appState.activeStickingType.value);
+                    triggerRef(this.unitRecord);
+                } else {
+                    this.setStickingType(index, this.appState.activeStickingType.value);
+                }
+                break;
+            case "track-unit-type":
+                const activeTrackUnitType = this.appState.activeTrackUnitType.value;
+                if (typeof index !== 'number') {
+                    this.unitRecord.value.forEach(unit => {
+                        unit.on = activeTrackUnitType === null ? false : true;
+                        if (activeTrackUnitType !== null) {
+                            unit.type = activeTrackUnitType;
+                        }
+                    });
+                    triggerRef(this.unitRecord);
+                } else {
+                    this.updateUnit(index, { 
+                        on: activeTrackUnitType === null ? false : true, 
+                        type: activeTrackUnitType === null ? undefined : activeTrackUnitType,
+                    });
+                }
+                break;
+        }
+    }
+
     setUnitOn(index: number, on: boolean): void {
         const unit = this.getUnitByIndex(index);
         if (!unit) {

src/ui/Beat/Beat.vue

@@ -23,8 +23,11 @@
                            item-key="index">
                     <template #item="{ element }">
                         <div v-if="element.track.visible.value" class="beat-line">
+                            <div class="track-actions">
+                                <span class="handle track-action"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
+                                <span class="track-action" @click="applyToolToTrack(element.track)"><icon color="var(--color-ui-neutral-dark)" icon-name="snowflake" /></span>
+                            </div>
                             <editable-text-field class="track-name" v-model="element.track.name.value" />
-                            <span class="handle"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
                             <track-view :beat-index="beatIndex" 
                                         :track-index="element.index" />
                         </div>
@@ -80,6 +83,10 @@
         }
     }
 
+    function applyToolToTrack(track: Track) {
+        track.applySelectedTool();
+    }
+
 </script>
 
 <style scoped lang="scss">
@@ -122,11 +129,11 @@
     .handle {
         cursor: move;
         color: var(--color-ui-neutral-dark);
-        opacity: 0%;
-
-        &:hover {
-            opacity: 100%;
     }
+
+    .track-actions {
+        opacity: 0%;
+        display: flex;
     }
 
     .beat-line {
@@ -134,6 +141,17 @@
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
+
+        &:hover .track-actions {
+            opacity: 100%;
+            .track-action {
+                opacity: 30%;
+
+                &:hover {
+                    opacity: 100%;
+                }
+            }
+        }
     }
 
     .dragging {

src/ui/Track/Track.vue

@@ -83,14 +83,7 @@
     }
 
     function applyCurrentToolToTrackUnit(index: number) {
-        switch (selectedTool.value) {
-            case "sticking":
-                track.value?.setStickingType(index, activeStickingType.value);
-                break;
-            case "track-unit-type":
-                track.value?.updateUnit(index, { on: activeTrackUnitType.value === null ? false : true, type: activeTrackUnitType.value === null ? undefined : activeTrackUnitType.value });
-                break;
-        }
+        track.value?.applySelectedTool(index);
     }
 </script>