update

package.json

@@ -1,6 +1,7 @@
 {
   "name": "arne-drums",
   "version": "1.0.0",
+  "type": "module",
   "description": "Drum beat visualiser and editor",
   "main": "src/main.ts",
   "scripts": {

src/ui/Beat/Beat.vue

@@ -2,8 +2,15 @@
     <div class="beat" :class="{ vertical: false }">
         <editable-text-field node-type="h3" class="beat-title" v-model="beat!.name.value" />
         <div class="beat-main-container">
-            <div class="beat-track-container">
+            <div class="beat-track-container" :class="{ dragging }">
-                <draggable handle=".handle" :list="tracks" @change="onMove" item-key="index">
+                <draggable @start="dragging = true" 
+                           @end="dragging = false" 
+                           animation="150" 
+                           ghost-class="ghost" 
+                           handle=".handle" 
+                           :list="tracks" 
+                           @change="onMove" 
+                           item-key="index">
                     <template #item="{ element }">
                         <div class="beat-line">
                             <editable-text-field class="track-name" v-model="element.track.name.value" />
@@ -23,10 +30,10 @@
     import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
     import { useAppStateStore } from '@/AppState';
     import { useBeatStore } from '@/BeatStore';
-    import { computed } from "vue";
+    import { computed, ref } from "vue";
     import Draggable from "vuedraggable";
     import type { Track } from "@/Track";
-    import Icon from "../Widgets/Icon/Icon.vue";
+    import Icon from "@/ui/Widgets/Icon/Icon.vue";
 
     const props = defineProps<{
         beatIndex: number,
@@ -47,14 +54,16 @@
                 track: trackList[i]!,
             });
         }
-        if (props.orientation === 'horizontal')  {
+        if (props.orientation !== 'horizontal')  {
             list.reverse();
         }
         return list;
     });
 
+    const dragging = ref(false);
+
     function onMove(evt: { moved: { oldIndex: number, newIndex: number }}) {
-        if (props.orientation === 'horizontal') {
+        if (props.orientation !== 'horizontal') {
             beat.value?.insertAt(tracks.value.length - 1 - evt.moved.oldIndex, tracks.value.length - 1 - evt.moved.newIndex);
         } else {
             beat.value?.insertAt(evt.moved.oldIndex, evt.moved.newIndex);
@@ -154,10 +163,23 @@
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
+
+    }
+
+    .dragging {
+        :not(.ghost) {
+            .handle {
+                opacity: 0%;
+            }
+        }
     }
 
     .track-name {
         text-align: right;
     }
+
+    .ghost { 
+        opacity: 0;
+    }
 </style>
 

src/ui/Root/Root.vue

@@ -161,6 +161,7 @@
             height: 100vh;
             display: flex;
             transition: left 400ms;
+            top: 0;
         }
     
         &.sidebar-visible {
@@ -200,7 +201,6 @@
             display: flex;
             flex-direction: column;
 
-
             .buttons {
                 flex: 1;
 
@@ -228,6 +228,7 @@
             position: absolute;
             height: 100%;
             left: 0;
+            top: 0;
             width: 100vw;
             display: flex;
             flex-direction: column;

src/ui/TrackSettings/TrackSettings.vue

@@ -32,8 +32,6 @@
     const { beats } = useBeatStore();
     const beat = computed(() => beats.value[props.beatIndex] ?? null);
     const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
-
-    watch(track, () => console.log(track.value));
 </script>
 
 <style scoped lang="scss">

src/ui/Widgets/Icon/Icon.vue

@@ -15,7 +15,7 @@
 
     const cssText = computed(() => {
         const colorString = props.color ? `--icon-bg:${ props.color }` : "";
-        return `-webkit-mask-image: url(${ iconUrl.value }); mask-image: url(${ iconUrl.value });${ colorString ?? '' }`;
+        return `-webkit-mask-image: url("${ iconUrl.value }"); mask-image: url("${ iconUrl.value }");${ colorString ?? '' }`;
     });
 </script>
 

src/ui/Widgets/Icon/icons.ts

@@ -1,13 +1,13 @@
-import List from "assets/svgs/list.svg";
+import List from "@/assets/svgs/list.svg";
-import ArrowClockwise from "assets/svgs/arrow-clockwise.svg";
+import ArrowClockwise from "@/assets/svgs/arrow-clockwise.svg";
-import Trash from "assets/svgs/trash.svg";
+import Trash from "@/assets/svgs/trash.svg";
-import Snowflake from "assets/svgs/snowflake.svg";
+import Snowflake from "@/assets/svgs/snowflake.svg";
-import LeftHand from "assets/svgs/LH.png";
+import LeftHand from "@/assets/svgs/LH.png";
-import Download from "assets/svgs/download.svg";
+import Download from "@/assets/svgs/download.svg";
-import RightHand from "assets/svgs/RH.png";
+import RightHand from "@/assets/svgs/RH.png";
-import LeftFoot from "assets/svgs/LF.png";
+import LeftFoot from "@/assets/svgs/LF.png";
-import RightFoot from "assets/svgs/RF.png";
+import RightFoot from "@/assets/svgs/RF.png";
-import Eraser from "assets/svgs/eraser-fill.svg";
+import Eraser from "@/assets/svgs/eraser-fill.svg";
 
 export const IconUrlMap = {
     arrowClockwise: ArrowClockwise,

src/ui/global.css

@@ -113,26 +113,26 @@ body {
     font-family: 'DMSans';
     font-style: normal;
     font-weight: 400;
-    src: url(assets/fonts/DMSans-Regular.ttf) format('woff2');
+    src: url(@/assets/fonts/DMSans-Regular.ttf) format('woff2');
 }
 
 @font-face {
     font-family: 'DMSans';
     font-style: normal;
     font-weight: 600;
-    src: url(assets/fonts/DMSans-Bold.ttf) format('woff2');
+    src: url(@/assets/fonts/DMSans-Bold.ttf) format('woff2');
 }
 
 @font-face {
     font-family: 'DMSans';
     font-style: italic;
     font-weight: 400;
-    src: url(assets/fonts/DMSans-Italic.ttf) format('woff2');
+    src: url(@/assets/fonts/DMSans-Italic.ttf) format('woff2');
 }
 
 @font-face {
     font-family: 'DMSans';
     font-style: italic;
     font-weight: 600;
-    src: url(assets/fonts/DMSans-BoldItalic.ttf) format('woff2');
+    src: url(@/assets/fonts/DMSans-BoldItalic.ttf) format('woff2');
 }

tsconfig.json

@@ -12,16 +12,14 @@
     "resolveJsonModule": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": ["src/*"],
+      "@/*": ["src/*"]
-      "assets/*": ["assets/*"]
     },
     "jsxFactory": "h",
     "jsxFragmentFactory": "frag",
     "jsx": "react"
   },
   "include": [
-    "./src/**/*",
+    "./src/**/*"
-    "./assets/**/*"
   ],
   "references": [
     {

vite.config.ts

@@ -11,9 +11,9 @@ export default defineConfig({
     resolve: {
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url)),
-            'assets': fileURLToPath(new URL('./assets', import.meta.url)),
         }
     },
+    root: '.',
     base: BASE_URL,
     build: {
         minify: !DEVELOPMENT,