diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 59cb6e6..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - extends: [ - // add more generic rulesets here, such as: - 'eslint:recommended', - 'plugin:vue/vue3-recommended', - ], -}; diff --git a/src/AppState.ts b/src/AppState.ts index eed23ef..1b14f28 100644 --- a/src/AppState.ts +++ b/src/AppState.ts @@ -1,4 +1,4 @@ -import {inject, type InjectionKey, ref, getCurrentInstance, watch} from "vue"; +import { inject, type InjectionKey, ref, getCurrentInstance, watch } from "vue"; import { Bound } from "./utils"; export type UITool = diff --git a/src/BeatStore.ts b/src/BeatStore.ts index 62d1da8..3b7d263 100644 --- a/src/BeatStore.ts +++ b/src/BeatStore.ts @@ -31,11 +31,13 @@ export class BeatStore extends Bound { activeBeatIndex = ref(0); activeBeat = computed(() => this.beats.value[this.activeBeatIndex.value] ?? null); orientation = ref<"horizontal" | "vertical">("horizontal"); + trackSettingsOpen = ref(null); constructor() { super(); watch([this.activeBeatIndex, this.orientation, this.beats], () => { this.saveDirtyGlobal.value = true; + this.trackSettingsOpen.value = null; }); const saveInterval = setInterval(() => this.saveDirtyGlobal.value && this.save("localStorage"), 5 * 60 * 1000); diff --git a/src/Track.ts b/src/Track.ts index 3a70e00..7cc899c 100644 --- a/src/Track.ts +++ b/src/Track.ts @@ -2,7 +2,7 @@ import { isPosInt, EffectScoped } from "@/utils"; import { ref, shallowRef, computed, watch, reactive, triggerRef, type Ref, type ShallowRef } from "vue"; import type { BeatManager } from "./Beat"; import { z } from "zod"; -import { useAppStateStore, type UITool } from "./AppState"; +import { useAppStateStore } from "./AppState"; export type TrackInitOptions = { visible?: boolean, diff --git a/src/ui/Beat/Beat.vue b/src/ui/Beat/Beat.vue index 18dc975..967185f 100644 --- a/src/ui/Beat/Beat.vue +++ b/src/ui/Beat/Beat.vue @@ -1,5 +1,5 @@ - - - + + + + @@ -60,13 +70,14 @@ import { TrackUnitStickingTypeList, type Track } from "@/Track"; import Icon from "@/ui/Widgets/Icon/Icon.vue"; import { StickingTypeIconMap } from "../TrackUnit/trackUnit"; + import TrackSettingsView from "@/ui/TrackSettings/TrackSettings.vue"; const props = defineProps<{ beatIndex: number, orientation?: "horizontal" | "vertical", }>(); - const { beats } = useBeatStore(); + const { beats, trackSettingsOpen } = useBeatStore(); const beat = computed(() => beats.value[props.beatIndex] ?? null); const tracks = computed(() => { @@ -87,6 +98,14 @@ const dragging = ref(false); + function toggleTrackSettings(trackIndex: number) { + if (trackSettingsOpen.value === trackIndex) { + trackSettingsOpen.value = null; + } else { + trackSettingsOpen.value = trackIndex; + } + } + function onMove(evt: { moved: { oldIndex: number, newIndex: number }}) { if (props.orientation !== 'horizontal') { beat.value?.insertAt(tracks.value.length - 1 - evt.moved.oldIndex, tracks.value.length - 1 - evt.moved.newIndex); @@ -110,6 +129,11 @@ width: 100%; } + .beat-wrap-row { + display: inline-block; + margin-bottom: 30px; + } + .beat-title { color: var(--color-title-light); text-align: center; @@ -124,7 +148,7 @@ .beat-main-container { display: flex; - white-space: nowrap; + //white-space: nowrap; } .track-name { diff --git a/src/ui/Track/Track.vue b/src/ui/Track/Track.vue index afa006c..c5385ae 100644 --- a/src/ui/Track/Track.vue +++ b/src/ui/Track/Track.vue @@ -38,6 +38,7 @@ beatIndex: number, locked?: boolean, trackIndex: number, + bars?: { start: number, count: number }, }>(); const { @@ -52,8 +53,16 @@ const trackUnits = computed(() => { const units = []; - if (track.value) { - for (let i = 0; i < track.value.unitCount(); i++) { + let start = 0; + let end = 0; + if (track.value && beat.value) { + if (props.bars) { + start = beat.value.timeSigUp.value * props.bars.start; + end = start + beat.value.timeSigUp.value * props.bars.count; + } else { + end = track.value.unitCount(); + } + for (let i = start; i < end; i++) { const unit = track.value.getUnitByIndex(i); if (unit) { units.push(unit); diff --git a/src/ui/TrackSettings/TrackSettings.vue b/src/ui/TrackSettings/TrackSettings.vue index 7f12c26..dd95ab2 100644 --- a/src/ui/TrackSettings/TrackSettings.vue +++ b/src/ui/TrackSettings/TrackSettings.vue @@ -1,30 +1,20 @@ diff --git a/src/ui/Widgets/Icon/icons.ts b/src/ui/Widgets/Icon/icons.ts index 9649075..9365fd3 100644 --- a/src/ui/Widgets/Icon/icons.ts +++ b/src/ui/Widgets/Icon/icons.ts @@ -13,9 +13,13 @@ 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'; -import Sun from '@/assets/svgs/sun.svg'; -import Moon from '@/assets/svgs/moon.svg'; +import PaintBucket from "@/assets/svgs/paint-bucket.svg"; +import Sun from "@/assets/svgs/sun.svg"; +import Moon from "@/assets/svgs/moon.svg"; +import Up from "@/assets/svgs/chevron-up.svg"; +import Down from "@/assets/svgs/chevron-down.svg"; +import Left from "@/assets/svgs/chevron-left.svg"; +import Right from "@/assets/svgs/chevron-right.svg"; export const IconUrlMap = { arrowClockwise: ArrowClockwise, @@ -36,6 +40,10 @@ export const IconUrlMap = { paintBucket: PaintBucket, sun: Sun, moon: Moon, + up: Up, + down: Down, + left: Left, + right: Right, } as const; export type IconName = keyof typeof IconUrlMap; diff --git a/src/ui/global.css b/src/ui/global.css index 6534f75..d07b7a8 100644 --- a/src/ui/global.css +++ b/src/ui/global.css @@ -13,7 +13,7 @@ html, body { --color-ui-neutral-dark-hover: #a1a1a1; --color-ui-neutral-dark-active: #c1c1c1; --color-bg-light: #e0e0e0; - --color-bg-medium: #fff; + --color-bg-medium: #eee; --color-bg-dark: #fff; --color-p-light: #282828; --color-p-light-hover: #fafafa;