vue3js-app/static/components/PaneSubObjects.js

import { h } from 'vue';
import { ObjectShort } from './ObjectShort.js';

export const PaneSubObjects = {
    props: ['store', 'onFocusFO'],
    setup(props) {
        function focused() {
            const fp = props.store.focusPath;
            return fp.length ? fp[fp.length - 1] : props.store.scoreModel;
        }

        function subItems(node) {
            if (!node) return [];
            if (node.type === 'score') {
                const items = [];
                if (node.info)
                    items.push({ kind: 'info',       node: node.info,  label: node.info.title ?? '(no title)', hasChildren: false });
                if (node.tuning)
                    items.push({ kind: 'tuning',     node: node.tuning, label: `base ${node.tuning.base ?? '?'}`, hasChildren: false });
                for (const a of (node.articles ?? []))
                    items.push({ kind: 'article',    node: a,  label: a.name,  hasChildren: false });
                for (const sv of (node.stageVoices ?? []))
                    items.push({ kind: 'stage',      node: sv, label: sv.name, hasChildren: false });
                for (const i of node.instruments)
                    items.push({ kind: 'instrument', node: i,  label: i.name,  hasChildren: true });
                for (const b of node.bars)
                    items.push({ kind: 'bar',        node: b,  label: b.id,    hasChildren: Object.keys(b.voices).length > 0 });
                return items;
            }
            if (node.type === 'instrument') {
                return node.variations.map((v, idx) => ({
                    kind: 'variation',
                    node: v,
                    label: `variation ${idx + 1}${v.dependsOn ? ` (${v.dependsOn})` : ''}`,
                    hasChildren: true,
                }));
            }
            if (node.type === 'variation') {
                return [
                    ...node.labelSpecs.map(ls => ({
                        kind: 'label_spec', node: ls, label: ls.label ?? '(no label)', hasChildren: false,
                    })),
                    ...node.subvariations.map((sv, idx) => {
                        const dep = sv.dependsOn;
                        const label = dep == null ? `subvariation ${idx + 1}`
                            : isNaN(Number(dep)) ? `ATTR: ${dep}`
                            : String(dep);
                        return { kind: 'variation', node: sv, label, hasChildren: true };
                    }),
                ];
            }
            if (node.type === 'bar') {
                return Object.entries(node.voices).map(([name, v]) => ({
                    kind: 'voice', node: v, label: name, hasChildren: v.offsets.length > 0,
                }));
            }
            if (node.type === 'voice') {
                return node.offsets.map((o, idx) => ({
                    kind: 'offset', node: o, label: `tick ${o.tick ?? idx}`, hasChildren: false,
                }));
            }
            return [];
        }

        return () => {
            const node = focused();
            const items = subItems(node);
            if (!items.length) return h('div', null, h('em', null, 'No sub-objects'));

            return h('div', null,
                h('ul', { class: 'se-object-list' }, items.map((item, idx) =>
                    h(ObjectShort, {
                        key: idx,
                        label: item.label,
                        typeTag: item.kind,
                        focused: props.store.focusPath.includes(item.node),
                        hasChildren: item.hasChildren,
                        onFocus:    () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
                        onDrillDown: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
                    })
                ))
            );
        };
    },
};