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-01 20:16:48 +02:00
parent 80fa033a88
commit 87d53591f6
8 changed files with 97 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,18 @@
<editable-text-field node-type="h3" class="beat-title" v-model="beat.name.value" />
<div class="beat-main-container">
<div class="beat-track-container" :class="{ dragging }">
<draggable @start="dragging = true"
<template v-if="beat.displaySticking.value">
<div v-for="(_, type) in TrackUnitStickingTypeList.slice(1)"
class="beat-line">
<div class="track-name">{{ TrackUnitStickingTypeList[type + 1]?.toUpperCase() }}</div>
<span class="handle"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
<sticking-track-view
:beat-index="beatIndex"
:sticking-type="type + 1" />
</div>
</template>
<draggable v-else
@start="dragging = true"
@end="dragging = false"
animation="150"
ghost-class="ghost"
@@ -27,11 +38,12 @@
<script setup lang="ts">
import TrackView from "@/ui/Track/Track.vue";
import StickingTrackView from "@/ui/Track/StickingTrack.vue";
import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
import { useBeatStore } from '@/BeatStore';
import { computed, ref } from "vue";
import Draggable from "vuedraggable";
import type { Track } from "@/Track";
import { TrackUnitStickingTypeList, type Track } from "@/Track";
import Icon from "@/ui/Widgets/Icon/Icon.vue";
const props = defineProps<{
@@ -43,7 +55,7 @@
const beat = computed(() => beats.value[props.beatIndex] ?? null);
const tracks = computed(() => {
const trackList = beat.value?.tracks.value ?? [];
const trackList = beat.value?.getTracks() ?? [];
const length = trackList.length;
const list: { index: number, track: Track }[] = [];
for (let i = 0; i < length; i++) {

3
src/ui/BeatSettings/BeatSettings.vue
View File

@@ -7,6 +7,9 @@
<div class="beat-settings-bar-count beat-settings-option">
<number-input label="Boxes per bar: " v-model="beat.timeSigUp.value" />
</div>
<div class="beat-settings-bar-count beat-settings-option">
<bool-box label="Sticking mode: " v-model="beat.displaySticking.value" />
</div>
<div class="beat-settings-bar-count beat-settings-option">
<bool-box label="Auto beat length: " v-model="beat.useAutoBeatLength.value" />
</div>

15
src/ui/Root/Toolbox.vue
View File

@@ -7,7 +7,6 @@
@click="selectedTool = 'track-unit-type'">
<track-unit-box
v-if="activeTrackUnitType !== null"
class="paint-button"
:sticking-type="null" :on="true" :type="activeTrackUnitType" />
<icon v-else class="paint-button" icon-name="eraser" />
</div>
@@ -17,7 +16,7 @@
:key="type ?? 'eraser'"
class="toolbox-button track-unit-type"
:class="{ active: i === activeTrackUnitType || type === null && activeTrackUnitType === null }"
@click="activeTrackUnitType = type === null ? null : i; selectedTool = 'track-unit-type'">
@click="activeTrackUnitType = (type === null ? null : i); selectedTool = 'track-unit-type'">
<track-unit-box v-if="type !== null" :sticking-type="null" :on="true" :type="i" />
<icon v-else icon-name="eraser" />
</div>
@@ -27,16 +26,16 @@
<dropdown>
<icon
class="toolbox-button"
:icon-name="activeStickingType ? (PaintableTrackUnitStickingTypeList[activeStickingType] ?? 'eraser') : 'eraser'"
:icon-name="activeStickingType ? StickingTypeIconMap[TrackUnitStickingTypeList[activeStickingType]!] : 'eraser'"
:class="{ active: selectedTool === 'sticking' }"
@click="selectedTool = 'sticking'" />
<template #content>
<div class="details">
<div v-for="(stickingType, i) in PaintableTrackUnitStickingTypeList"
:key="stickingType"
<div v-for="(stickingType, i) in TrackUnitStickingTypeList.slice(1)"
:key="stickingType ?? 'none'"
class="toolbox-button"
:class="{ active: i === activeStickingType }"
@click="activeStickingType = i; selectedTool = 'sticking'">
:class="{ active: i + 1 === activeStickingType }"
@click="activeStickingType = i + 1; selectedTool = 'sticking'">
<icon :icon-name="StickingTypeIconMap[stickingType]" />
</div>
<div
@@ -54,7 +53,7 @@
<script setup lang="ts">
import { useAppStateStore } from "@/AppState";
import { PaintableTrackUnitStickingTypeList, TrackUnitTypeList } from "@/Track";
import { TrackUnitStickingTypeList, TrackUnitTypeList } from "@/Track";
import { StickingTypeIconMap } from "@/ui/TrackUnit/trackUnit";
import Icon from "@/ui/Widgets/Icon/Icon.vue";
import Dropdown from '@/ui/Widgets/Dropdown/Dropdown.vue';

103
src/ui/Track/Track.vue
View File

@@ -1,32 +1,42 @@
<template>
<div class="track">
<div class="track-main">
<div class="track-unit-block">
<track-unit v-for="(trackUnit, i) in trackUnits"
:key="`tu${ trackIndex }${ i }`"
:id="`tu${ trackIndex }${ i }`"
class="track-unit"
:class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
:sticking-type="trackUnit.stickingType"
:type="trackUnit.type"
:on="trackUnit.on"
@rotate-type="rotateTrackUnit(i)"
@deactivate="deactivateUnit(i)"
@toggle="toggle(i)"
@apply-tool="applyCurrentToolToTrackUnit(i)" />
</div>
</div>
</div>
<track-container>
<template v-if="!locked">
<track-unit v-for="(trackUnit, i) in trackUnits"
:key="`tu${ trackIndex }${ i }`"
:id="`tu${ trackIndex }${ i }`"
class="track-unit"
:class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
:sticking-type="trackUnit.stickingType"
:type="trackUnit.type"
:on="trackUnit.on"
@rotate-type="rotateTrackUnit(i)"
@deactivate="deactivateUnit(i)"
@toggle="toggle(i)"
@apply-tool="applyCurrentToolToTrackUnit(i)" />
</template>
<template v-else>
<track-unit v-for="(trackUnit, i) in trackUnits"
:key="`tu${ trackIndex }${ i }`"
:id="`tu${ trackIndex }${ i }`"
class="track-unit"
:class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
:sticking-type="trackUnit.stickingType"
:type="trackUnit.type"
:on="trackUnit.on" />
</template>
</track-container>
</template>
<script setup lang="ts">
import TrackUnit from "@/ui/TrackUnit/TrackUnit.vue";
import TrackContainer from "@/ui/Track/TrackContainer.vue";
import { useBeatStore } from "@/BeatStore";
import { computed } from 'vue';
import { useAppStateStore } from "@/AppState";
const props = defineProps<{
beatIndex: number,
locked?: boolean,
trackIndex: number,
}>();
@@ -35,6 +45,7 @@
activeStickingType,
activeTrackUnitType,
} = useAppStateStore();
const { beats } = useBeatStore();
const beat = computed(() => beats.value[props.beatIndex] ?? null);
const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
@@ -42,7 +53,7 @@
const trackUnits = computed(() => {
const units = [];
if (track.value) {
for (let i = 0; i < track.value.unitRecord.value.length; i++) {
for (let i = 0; i < track.value.unitCount(); i++) {
const unit = track.value.getUnitByIndex(i);
if (unit) {
units.push(unit);
@@ -90,61 +101,7 @@
margin-right: 1em;
}
}
.track-unit-block {
height: 2em;
}
.track-spacer {
display: inline-block;
width: 1em;
height: 2em;
}
.track-main {
height: 36px;
}
.track-settings-container {
display: flex;
}
.track {
width: max-content;
& > * {
padding-right: 1em;
padding-left: 1em;
}
}
.vertical-mode {
.track-spacer {
display: block;
width: 2em;
height: 1em;
}
.track-unit-block {
height: auto;
width: 2em;
}
.track-main {
width: 2em;
margin-right: 4px;
display: block;
}
.track {
display: inline-block;
height: 36px;
& > * {
padding-right: 0;
padding-left: 0;
}
}
.track-unit {
&.spaced {
margin-bottom: 1em;

3
src/ui/TrackUnit/trackUnit.ts
View File

@@ -4,6 +4,7 @@ import type { IconName } from "@/ui/Widgets/Icon/icons";
export const TypeClasses = [ "Ghost", "Accent" ] as const;
export const StickingTypeIconMap = {
none: null,
lf: 'lf',
lh: 'lh',
rf: 'rf',
@@ -17,7 +18,7 @@ export const TrackUnitTypeClassMap = {
"GhostNoteAccent": ["Ghost", "Accent"],
} as const satisfies Record<TrackUnitType, Readonly<string[]>>;
export function getClasses(options: { on: boolean, stickingType: TrackUnitStickingType | null, type: TrackUnitType, highlightable?: boolean }) {
export function getClasses(options: { on: boolean, stickingType: TrackUnitStickingType, type: TrackUnitType, highlightable?: boolean }) {
const classes = ["track-unit"];
if (options.on) {
classes.push("on");