913114bb02
The bottom handle bar is now dynamic. Fixed CP + FO handles, then one
handle per kind of sub-object the focused node has. "Kind" is the SLOT
part of the AST's SLOT.SUBTYPE namespace: sub-objects sharing a SLOT
(e.g. `line.stem_note` + `line.motif`, or `articles.<subtypeA>` +
`articles.<subtypeB>`) collapse into one pane; different SLOTs split.
Score-level kinds emit, in this order: TU (tuning), ST (stage cone +
voices), IN (instruments — linked ones listed read-only), AR (articles),
BA (bars). info metadata is folded into the FO pane (was previously
listed as a sub-object).
Handles are 2-letter labels for now, intended as alt-text for icons in
a later release.
- `subobject-kinds.js` new: `getKindGroups(node)` returns ordered
`[{ kind, items }]`; `KIND_LABEL` maps kind -> 2-letter label.
- `PaneSubObjects.js` now parameterized by `kind` prop; renders one group.
- `AppShell.js` builds the handle bar from `getKindGroups(focusedNode)`;
drops back to FO when the active sub-pane disappears after a focus change.
- `ObjectShort.js` accepts a `readOnly` flag (used for linked instruments).
83 lines
3.1 KiB
JavaScript
83 lines
3.1 KiB
JavaScript
import { h, ref, computed, onMounted, watch } from 'vue';
|
|
import { PaneCP } from './PaneCP.js';
|
|
import { PaneFO } from './PaneFO.js';
|
|
import { PaneSubObjects } from './PaneSubObjects.js';
|
|
import { ImportDialog } from './ImportDialog.js';
|
|
import { getKindGroups, KIND_LABEL } from '../subobject-kinds.js';
|
|
|
|
const FIXED_PANES = [
|
|
{ id: 'cp', label: 'CP', title: 'Current position' },
|
|
{ id: 'fo', label: 'FO', title: 'Focused object' },
|
|
];
|
|
|
|
export const AppShell = {
|
|
props: ['store', 'importOnLoad'],
|
|
setup(props) {
|
|
const activePane = ref('cp');
|
|
const showImport = ref(false);
|
|
|
|
function focusedNode() {
|
|
const fp = props.store.focusPath;
|
|
return fp.length ? fp[fp.length - 1] : props.store.scoreModel;
|
|
}
|
|
|
|
const subPanes = computed(() => getKindGroups(focusedNode()).map(g => ({
|
|
id: `sub:${g.kind}`,
|
|
kind: g.kind,
|
|
label: KIND_LABEL[g.kind] ?? g.kind.slice(0, 2).toUpperCase(),
|
|
title: g.kind,
|
|
})));
|
|
|
|
const panes = computed(() => [...FIXED_PANES, ...subPanes.value]);
|
|
|
|
// If active pane disappears after focus change, drop back to FO.
|
|
watch(panes, ps => {
|
|
if (!ps.some(p => p.id === activePane.value)) activePane.value = 'fo';
|
|
});
|
|
|
|
function openImport() {
|
|
if (!props.store.isDirty) showImport.value = true;
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.importOnLoad && !props.store.isDirty) showImport.value = true;
|
|
});
|
|
|
|
return () => {
|
|
const store = props.store;
|
|
const ap = activePane.value;
|
|
|
|
const subPaneNodes = subPanes.value.map(p =>
|
|
h('div', { key: p.id, class: ['se-pane', ap === p.id ? 'active' : null] },
|
|
h(PaneSubObjects, { store, kind: p.kind, onFocusFO: () => { activePane.value = 'fo'; } })));
|
|
|
|
return h('div', { class: 'se-shell' }, [
|
|
h('div', { class: 'se-pane-area' }, [
|
|
h('div', { class: ['se-pane', ap === 'cp' ? 'active' : null] },
|
|
h(PaneCP, { store, onImportClick: openImport, onFocusFO: () => { activePane.value = 'fo'; } })),
|
|
h('div', { class: ['se-pane', ap === 'fo' ? 'active' : null] },
|
|
h(PaneFO, { store })),
|
|
...subPaneNodes,
|
|
]),
|
|
|
|
h('div', { class: 'se-handle-bar' }, panes.value.map(p =>
|
|
h('button', {
|
|
key: p.id,
|
|
class: ['se-handle', ap === p.id ? 'active' : null],
|
|
title: p.title,
|
|
onClick: () => { activePane.value = p.id; },
|
|
}, p.label)
|
|
)),
|
|
|
|
store.errorMessage
|
|
? h('div', { class: 'se-error', style: 'margin:0' }, store.errorMessage)
|
|
: null,
|
|
|
|
showImport.value
|
|
? h(ImportDialog, { store, onClose: () => { showImport.value = false; } })
|
|
: null,
|
|
]);
|
|
};
|
|
},
|
|
};
|