update

package-lock.json

@@ -13,6 +13,7 @@
         "@vue/tsconfig": "^0.1.3",
         "sass": "^1.58.3",
         "vue": "^3.4.21",
+        "vue-draggable-next": "^2.2.1",
         "vuedraggable": "^4.1.0",
         "zod": "^3.21.4"
       },
@@ -2809,6 +2810,15 @@
         }
       }
     },
+    "node_modules/vue-draggable-next": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-next/-/vue-draggable-next-2.2.1.tgz",
+      "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
+      "peerDependencies": {
+        "sortablejs": "^1.14.0",
+        "vue": "^3.2.2"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",

package.json

@@ -20,6 +20,7 @@
     "@vue/tsconfig": "^0.1.3",
     "sass": "^1.58.3",
     "vue": "^3.4.21",
+    "vue-draggable-next": "^2.2.1",
     "vuedraggable": "^4.1.0",
     "zod": "^3.21.4"
   },

src/assets/svgs/paint-bucket.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paint-bucket" viewBox="0 0 16 16">
+  <path d="M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a3 3 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1 1 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4 4 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067S8.857 3.052 8.23 2.704c-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.3 3.3 0 0 1-.131-.673q.137.09.337.274m.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088q.081.181.183.365c.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626q.183.103.365.183l-4.861 4.862-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46s-1.168-1.32-1.46-1.846c-.147-.265-.225-.47-.251-.607l-.01-.068zm2.87-1.935a2.4 2.4 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.5 3.5 0 0 0-1.066.091 11 11 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z"/>
+</svg>

src/ui/Beat/Beat.vue

@@ -12,7 +12,7 @@
                                 :sticking-type="type + 1" />
                         </div>
                 </template>
-                <draggable v-else
+                <VueDraggableNext v-else
                            @start="dragging = true" 
                            @end="dragging = false" 
                            animation="150" 
@@ -21,18 +21,30 @@
                            :list="tracks"
                            @change="onMove" 
                            item-key="index">
-                    <template #item="{ element }">
+                    <transition-group name="fade">
-                        <div v-if="element.track.visible.value" class="beat-line">
+                        <template v-for="element in tracks">
+                            <div v-if="element.track.visible.value" class="beat-line" :key="element.index">
                                 <div class="track-actions">
-                                <span class="handle track-action"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
+                                    <span class="track-action">
-                                <span class="track-action" @click="applyToolToTrack(element.track)"><icon color="var(--color-ui-neutral-dark)" icon-name="snowflake" /></span>
+                                        <icon color="var(--color-ui-neutral-dark)" 
+                                              @click="element.track.visible.value = !element.track.visible.value"
+                                              :icon-name="element.track.visible.value ? 'eye' : 'eyeOff'" />
+                                    </span>
+                                    <span class="track-action"
+                                          @click="applyToolToTrack(element.track)">
+                                        <icon color="var(--color-ui-neutral-dark)" icon-name="paintBucket" />
+                                    </span>
+                                    <span class="handle track-action">
+                                        <icon color="var(--color-ui-neutral-dark)" icon-name="list" />
+                                    </span>
                                 </div>
                                 <editable-text-field class="track-name" v-model="element.track.name.value" />
                                 <track-view :beat-index="beatIndex" 
                                             :track-index="element.index" />
                             </div>
                         </template>
-                </draggable>
+                    </transition-group>
+                </VueDraggableNext>
             </div>
         </div>
     </div>
@@ -44,7 +56,7 @@
     import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
     import { useBeatStore } from '@/BeatStore';
     import { computed, ref } from "vue";
-    import Draggable from "vuedraggable";
+    import { VueDraggableNext } from "vue-draggable-next";
     import { TrackUnitStickingTypeList, type Track } from "@/Track";
     import Icon from "@/ui/Widgets/Icon/Icon.vue";
     import { StickingTypeIconMap } from "../TrackUnit/trackUnit";
@@ -86,7 +98,6 @@
     function applyToolToTrack(track: Track) {
         track.applySelectedTool();
     }
-
 </script>
 
 <style scoped lang="scss">
@@ -126,16 +137,20 @@
         white-space: nowrap;
     }
 
-    .handle {
-        cursor: move;
-        color: var(--color-ui-neutral-dark);
-    }
-
     .track-actions {
         opacity: 0%;
         display: flex;
     }
 
+    .track-action {
+        cursor: pointer;
+    }
+
+    .handle {
+        cursor: move;
+        color: var(--color-ui-neutral-dark);
+    }
+
     .beat-line {
         display: flex;
         flex-direction: row;
@@ -209,5 +224,15 @@
             flex-direction: row;
         }
     }
+
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 200ms ease;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
 </style>
 

src/ui/Widgets/Dropdown/Dropdown.vue

@@ -9,18 +9,17 @@
     </div>
     <Teleport to="#dropdowns">
         <div 
-            v-if="visible" 
             ref="dropdown" 
             class="dropdown" 
             :class="{ visible }"
-            @onmouseleave="visible = false">
+            @mouseleave="visible = false">
             <slot name="content" />
         </div>
     </Teleport>
 </template>
 
 <script setup lang="ts">
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
 
     const trigger = ref<HTMLDivElement>();
     const dropdown = ref<HTMLDivElement>();
@@ -28,13 +27,17 @@
     const visible = ref(false);
     const top = ref('0px');
     const left = ref('0px');
+    const effectiveTop = computed(() => visible.value ? top.value : 0);
+    const effectiveLeft = computed(() => visible.value ? left.value : 0);
 
     function onMouseEnter(e: MouseEvent | TouchEvent) {
         visible.value = true;
-        if (trigger.value) {
+        if (trigger.value && dropdown.value) {
-            const rect = trigger.value.getBoundingClientRect();
+            const rectTrigger = trigger.value.getBoundingClientRect();
-            top.value = rect.top + 'px';
+            const rectDropdown = dropdown.value.getBoundingClientRect();
-            left.value = rect.width + rect.left + 'px';
+            console.log(rectDropdown);
+            top.value = Math.min(window.innerHeight - rectDropdown.height, rectTrigger.top) + 'px';
+            left.value = rectTrigger.width + rectTrigger.left + 'px';
         }
         window.addEventListener('touchstart', onWindowClick);
         window.addEventListener('click', onWindowClick);
@@ -57,7 +60,7 @@
     }
 
     function onMouseLeave(e: MouseEvent) {
-        if (trigger.value && outside(e, trigger.value)) {
+        if (trigger.value && outside(e, trigger.value) && dropdown.value && outside(e, dropdown.value)) {
             visible.value = false;
         }
     }
@@ -66,8 +69,8 @@
 <style scoped lang="scss">
 .dropdown {
     position: absolute;
-    top: v-bind(top);
+    top: v-bind(effectiveTop);
-    left: v-bind(left);
+    left: v-bind(effectiveLeft);
     visibility: hidden;
 
     &.visible {

src/ui/Widgets/Icon/icons.ts

@@ -13,6 +13,7 @@ import Floppy from "@/assets/svgs/floppy2-fill.svg";
 import Delete from "@/assets/svgs/delete.svg";
 import Eye from "@/assets/svgs/eye.svg";
 import EyeOff from "@/assets/svgs/eye-off.svg";
+import PaintBucket from '@/assets/svgs/paint-bucket.svg';
 
 export const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
@@ -30,6 +31,7 @@ export const IconUrlMap = {
     delete: Delete,
     eye: Eye,
     eyeOff: EyeOff,
+    paintBucket: PaintBucket,
 } as const;
 
 export type IconName = keyof typeof IconUrlMap;