flow/vue3js-app-proposal-for-sdk-claude
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multi-pane Sub-objects driven by SLOT of SLOT.SUBTYPE

Browse Source 
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).
This commit is contained in:
c0dev0id
2026-06-28 15:42:08 +02:00
parent b23e243225
commit 913114bb02
4 changed files with 169 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
static/components/PaneSubObjects.js
View File

@@ -1,90 +1,23 @@
import { h } from 'vue';
import { ObjectShort } from './ObjectShort.js';
import { getKindGroups } from '../subobject-kinds.js';
export const PaneSubObjects = {
props: ['store', 'onFocusFO'],
props: ['store', 'kind', '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 || v.motifs.some(m => m.isStatic),
}));
}
if (node.type === 'voice') {
return [
...node.motifs
.filter(m => m.isStatic)
.map(m => ({ kind: 'motif', node: m, label: m.label, hasChildren: m.stemNotes.length > 0 })),
...node.offsets.map((o, idx) => ({
kind: 'offset', node: o, label: `tick ${o.tick ?? idx}`, hasChildren: o.stemNotes.length > 0,
})),
];
}
if (node.type === 'motif') {
return node.stemNotes.map(sn => ({
kind: 'stem_note', node: sn,
label: `pitch ${sn.pitch}${sn.clauses.length ? ` (${sn.clauses.length} clause${sn.clauses.length > 1 ? 's' : ''})` : ''}`,
hasChildren: false,
}));
}
if (node.type === 'offset') {
return node.stemNotes.map(sn => ({
kind: 'stem_note', node: sn,
label: `pitch ${sn.pitch}${sn.clauses.length ? ` (${sn.clauses.length} clause${sn.clauses.length > 1 ? 's' : ''})` : ''}`,
hasChildren: false,
}));
}
return [];
}
return () => {
const node = focused();
const items = subItems(node);
const groups = getKindGroups(node);
const group = props.kind
? groups.find(g => g.kind === props.kind)
: groups[0];
const items = group?.items ?? [];
if (!items.length) return h('div', null, h('em', null, 'No sub-objects'));
return h('div', null,
@@ -95,6 +28,7 @@ export const PaneSubObjects = {
typeTag: item.kind,
focused: props.store.focusPath.includes(item.node),
hasChildren: item.hasChildren,
readOnly: item.readOnly ?? false,
onFocus: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
onDrillDown: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
})