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",
"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",

1
package.json
View File

@@ -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"
},

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-track-container" :class="{ dragging }">
<template v-if="beat.displaySticking.value">
<div v-for="(_, type) in TrackUnitStickingTypeList.slice(1)"
class="beat-line">
<icon color="var(--color-ui-neutral-light)" :icon-name="StickingTypeIconMap[TrackUnitStickingTypeList[type + 1]!]" />
<sticking-track-view
:beat-index="beatIndex"
:sticking-type="type + 1" />
</div>
<div v-for="(_, type) in TrackUnitStickingTypeList.slice(1)"
class="beat-line">
<icon color="var(--color-ui-neutral-light)" :icon-name="StickingTypeIconMap[TrackUnitStickingTypeList[type + 1]!]" />
<sticking-track-view
:beat-index="beatIndex"
:sticking-type="type + 1" />
</div>
</template>
<draggable v-else
<VueDraggableNext v-else
@start="dragging = true"
@end="dragging = false"
animation="150"
ghost-class="ghost"
handle=".handle"
:list="tracks"
:list="tracks"
@change="onMove"
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>
<transition-group name="fade">
<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="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>
<editable-text-field class="track-name" v-model="element.track.name.value" />
<track-view :beat-index="beatIndex"
:track-index="element.index" />
</div>
</template>
</draggable>
</template>
</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>

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

@@ -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) {
const rect = trigger.value.getBoundingClientRect();
top.value = rect.top + 'px';
left.value = rect.width + rect.left + 'px';
if (trigger.value && dropdown.value) {
const rectTrigger = trigger.value.getBoundingClientRect();
const rectDropdown = dropdown.value.getBoundingClientRect();
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);
left: v-bind(left);
top: v-bind(effectiveTop);
left: v-bind(effectiveLeft);
visibility: hidden;
&.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 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;