djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2024-06-02 17:37:58 +02:00
parent cac5d1c5e0
commit adbc1b8dd3
6 changed files with 81 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"sass": "^1.58.3", "sass": "^1.58.3",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-draggable-next": "^2.2.1",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",
"zod": "^3.21.4" "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": { "node_modules/vue-eslint-parser": {
"version": "9.4.2", "version": "9.4.2",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",

1
package.json
View File

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

3
src/assets/svgs/paint-bucket.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

79
src/ui/Beat/Beat.vue
View File

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

23
src/ui/Widgets/Dropdown/Dropdown.vue
View File

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

2
src/ui/Widgets/Icon/icons.ts
View File

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