From 3c9065ee8c4e1f13d44b24d71d30a21e52007366 Mon Sep 17 00:00:00 2001
From: Daniel Ledda <dan.j.ledda@gmail.com>
Date: Sun, 31 Mar 2024 14:56:26 +0200
Subject: [PATCH] update

---
 package.json                                  |   1 +
 {assets => src/assets}/fonts/DMSans-Bold.ttf  | Bin
 .../assets}/fonts/DMSans-BoldItalic.ttf       | Bin
 .../assets}/fonts/DMSans-Italic.ttf           | Bin
 .../assets}/fonts/DMSans-Medium.ttf           | Bin
 .../assets}/fonts/DMSans-MediumItalic.ttf     | Bin
 .../assets}/fonts/DMSans-Regular.ttf          | Bin
 {assets => src/assets}/svgs/LF.png            | Bin
 {assets => src/assets}/svgs/LH.png            | Bin
 {assets => src/assets}/svgs/RF.png            | Bin
 {assets => src/assets}/svgs/RH.png            | Bin
 .../assets}/svgs/arrow-clockwise.svg          |   0
 {assets => src/assets}/svgs/download.svg      |   0
 {assets => src/assets}/svgs/eraser-fill.svg   |   0
 {assets => src/assets}/svgs/list.svg          |   0
 {assets => src/assets}/svgs/snowflake.svg     |   0
 {assets => src/assets}/svgs/trash.svg         |   0
 src/ui/Beat/Beat.vue                          |  34 ++++++++++++++----
 src/ui/Root/Root.vue                          |   3 +-
 src/ui/TrackSettings/TrackSettings.vue        |   2 --
 src/ui/Widgets/Icon/Icon.vue                  |   2 +-
 src/ui/Widgets/Icon/icons.ts                  |  20 +++++------
 src/ui/global.css                             |   8 ++---
 tsconfig.json                                 |   6 ++--
 vite.config.ts                                |   2 +-
 25 files changed, 49 insertions(+), 29 deletions(-)
 rename {assets => src/assets}/fonts/DMSans-Bold.ttf (100%)
 rename {assets => src/assets}/fonts/DMSans-BoldItalic.ttf (100%)
 rename {assets => src/assets}/fonts/DMSans-Italic.ttf (100%)
 rename {assets => src/assets}/fonts/DMSans-Medium.ttf (100%)
 rename {assets => src/assets}/fonts/DMSans-MediumItalic.ttf (100%)
 rename {assets => src/assets}/fonts/DMSans-Regular.ttf (100%)
 rename {assets => src/assets}/svgs/LF.png (100%)
 rename {assets => src/assets}/svgs/LH.png (100%)
 rename {assets => src/assets}/svgs/RF.png (100%)
 rename {assets => src/assets}/svgs/RH.png (100%)
 rename {assets => src/assets}/svgs/arrow-clockwise.svg (100%)
 rename {assets => src/assets}/svgs/download.svg (100%)
 rename {assets => src/assets}/svgs/eraser-fill.svg (100%)
 rename {assets => src/assets}/svgs/list.svg (100%)
 rename {assets => src/assets}/svgs/snowflake.svg (100%)
 rename {assets => src/assets}/svgs/trash.svg (100%)

diff --git a/package.json b/package.json
index a7cb8df..4edd2c1 100644
--- a/package.json
+++ b/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": {
diff --git a/assets/fonts/DMSans-Bold.ttf b/src/assets/fonts/DMSans-Bold.ttf
similarity index 100%
rename from assets/fonts/DMSans-Bold.ttf
rename to src/assets/fonts/DMSans-Bold.ttf
diff --git a/assets/fonts/DMSans-BoldItalic.ttf b/src/assets/fonts/DMSans-BoldItalic.ttf
similarity index 100%
rename from assets/fonts/DMSans-BoldItalic.ttf
rename to src/assets/fonts/DMSans-BoldItalic.ttf
diff --git a/assets/fonts/DMSans-Italic.ttf b/src/assets/fonts/DMSans-Italic.ttf
similarity index 100%
rename from assets/fonts/DMSans-Italic.ttf
rename to src/assets/fonts/DMSans-Italic.ttf
diff --git a/assets/fonts/DMSans-Medium.ttf b/src/assets/fonts/DMSans-Medium.ttf
similarity index 100%
rename from assets/fonts/DMSans-Medium.ttf
rename to src/assets/fonts/DMSans-Medium.ttf
diff --git a/assets/fonts/DMSans-MediumItalic.ttf b/src/assets/fonts/DMSans-MediumItalic.ttf
similarity index 100%
rename from assets/fonts/DMSans-MediumItalic.ttf
rename to src/assets/fonts/DMSans-MediumItalic.ttf
diff --git a/assets/fonts/DMSans-Regular.ttf b/src/assets/fonts/DMSans-Regular.ttf
similarity index 100%
rename from assets/fonts/DMSans-Regular.ttf
rename to src/assets/fonts/DMSans-Regular.ttf
diff --git a/assets/svgs/LF.png b/src/assets/svgs/LF.png
similarity index 100%
rename from assets/svgs/LF.png
rename to src/assets/svgs/LF.png
diff --git a/assets/svgs/LH.png b/src/assets/svgs/LH.png
similarity index 100%
rename from assets/svgs/LH.png
rename to src/assets/svgs/LH.png
diff --git a/assets/svgs/RF.png b/src/assets/svgs/RF.png
similarity index 100%
rename from assets/svgs/RF.png
rename to src/assets/svgs/RF.png
diff --git a/assets/svgs/RH.png b/src/assets/svgs/RH.png
similarity index 100%
rename from assets/svgs/RH.png
rename to src/assets/svgs/RH.png
diff --git a/assets/svgs/arrow-clockwise.svg b/src/assets/svgs/arrow-clockwise.svg
similarity index 100%
rename from assets/svgs/arrow-clockwise.svg
rename to src/assets/svgs/arrow-clockwise.svg
diff --git a/assets/svgs/download.svg b/src/assets/svgs/download.svg
similarity index 100%
rename from assets/svgs/download.svg
rename to src/assets/svgs/download.svg
diff --git a/assets/svgs/eraser-fill.svg b/src/assets/svgs/eraser-fill.svg
similarity index 100%
rename from assets/svgs/eraser-fill.svg
rename to src/assets/svgs/eraser-fill.svg
diff --git a/assets/svgs/list.svg b/src/assets/svgs/list.svg
similarity index 100%
rename from assets/svgs/list.svg
rename to src/assets/svgs/list.svg
diff --git a/assets/svgs/snowflake.svg b/src/assets/svgs/snowflake.svg
similarity index 100%
rename from assets/svgs/snowflake.svg
rename to src/assets/svgs/snowflake.svg
diff --git a/assets/svgs/trash.svg b/src/assets/svgs/trash.svg
similarity index 100%
rename from assets/svgs/trash.svg
rename to src/assets/svgs/trash.svg
diff --git a/src/ui/Beat/Beat.vue b/src/ui/Beat/Beat.vue
index 79bd6c4..00ba6a7 100644
--- a/src/ui/Beat/Beat.vue
+++ b/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">
-                <draggable handle=".handle" :list="tracks" @change="onMove" item-key="index">
+            <div class="beat-track-container" :class="{ dragging }">
+                <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>
 
diff --git a/src/ui/Root/Root.vue b/src/ui/Root/Root.vue
index 3541cab..a66886f 100644
--- a/src/ui/Root/Root.vue
+++ b/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;
diff --git a/src/ui/TrackSettings/TrackSettings.vue b/src/ui/TrackSettings/TrackSettings.vue
index dfe191c..266e66c 100644
--- a/src/ui/TrackSettings/TrackSettings.vue
+++ b/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">
diff --git a/src/ui/Widgets/Icon/Icon.vue b/src/ui/Widgets/Icon/Icon.vue
index a80960b..5ca5c0a 100644
--- a/src/ui/Widgets/Icon/Icon.vue
+++ b/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>
 
diff --git a/src/ui/Widgets/Icon/icons.ts b/src/ui/Widgets/Icon/icons.ts
index db3d3c1..ef8809d 100644
--- a/src/ui/Widgets/Icon/icons.ts
+++ b/src/ui/Widgets/Icon/icons.ts
@@ -1,13 +1,13 @@
-import List from "assets/svgs/list.svg";
-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";
-import Eraser from "assets/svgs/eraser-fill.svg";
+import List from "@/assets/svgs/list.svg";
+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";
+import Eraser from "@/assets/svgs/eraser-fill.svg";
 
 export const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
diff --git a/src/ui/global.css b/src/ui/global.css
index 9ba5a78..b9d344d 100644
--- a/src/ui/global.css
+++ b/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');
 }
diff --git a/tsconfig.json b/tsconfig.json
index 1c66a5f..362242a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,16 +12,14 @@
     "resolveJsonModule": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": ["src/*"],
-      "assets/*": ["assets/*"]
+      "@/*": ["src/*"]
     },
     "jsxFactory": "h",
     "jsxFragmentFactory": "frag",
     "jsx": "react"
   },
   "include": [
-    "./src/**/*",
-    "./assets/**/*"
+    "./src/**/*"
   ],
   "references": [
     {
diff --git a/vite.config.ts b/vite.config.ts
index 92fca4f..968aa88 100644
--- a/vite.config.ts
+++ b/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,