sdk/vue3js-app
1
0
Fork 0
forked from flow/vue3js-app-proposal-for-sdk-claude
Code Pull Requests Activity

Switch to FO pane on any label click in CP or SubObjects panes

Browse Source
This commit is contained in:
c0dev0id 2026-06-23 21:36:46 +02:00
parent 4c392927cf
commit c52b0bf9cf
3 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/components/AppShell.js
View File

@ -31,11 +31,11 @@ export const AppShell = {
// Pane area // Pane area
h('div', { class: 'se-pane-area' }, [ h('div', { class: 'se-pane-area' }, [
h('div', { class: ['se-pane', activePane.value === 'cp' ? 'active' : null] }, h('div', { class: ['se-pane', activePane.value === 'cp' ? 'active' : null] },
h(PaneCP, { store, onImportClick: openImport })), h(PaneCP, { store, onImportClick: openImport, onFocusFO: () => { activePane.value = 'fo'; } })),
h('div', { class: ['se-pane', activePane.value === 'fo' ? 'active' : null] }, h('div', { class: ['se-pane', activePane.value === 'fo' ? 'active' : null] },
h(PaneFO, { store })), h(PaneFO, { store })),
h('div', { class: ['se-pane', activePane.value === 'sub' ? 'active' : null] }, h('div', { class: ['se-pane', activePane.value === 'sub' ? 'active' : null] },
h(PaneSubObjects, { store })), h(PaneSubObjects, { store, onFocusFO: () => { activePane.value = 'fo'; } })),
]), ]),
// Handle bar (tab switcher at bottom) // Handle bar (tab switcher at bottom)

3
static/components/PaneCP.js
View File

@ -32,7 +32,7 @@ function shortView(node) {
} }
export const PaneCP = { export const PaneCP = {
props: ['store', 'onImportClick'], props: ['store', 'onImportClick', 'onFocusFO'],
setup(props) { setup(props) {
const exporting = ref(false); const exporting = ref(false);
const exportError = ref(''); const exportError = ref('');
@ -92,6 +92,7 @@ export const PaneCP = {
onClick: () => { onClick: () => {
if (idx === -1) store.setFocus([]); if (idx === -1) store.setFocus([]);
else store.setFocus(fp.slice(0, idx + 1)); else store.setFocus(fp.slice(0, idx + 1));
props.onFocusFO?.();
}, },
}, [ }, [
h('span', { class: 'se-object-type' }, typeTag), h('span', { class: 'se-object-type' }, typeTag),

6
static/components/PaneSubObjects.js
View File

@ -3,7 +3,7 @@ import { ObjectShort } from './ObjectShort.js';
// Shows sub-objects of the currently focused node — variations, bars, voices, etc. // Shows sub-objects of the currently focused node — variations, bars, voices, etc.
export const PaneSubObjects = { export const PaneSubObjects = {
props: ['store'], props: ['store', 'onFocusFO'],
setup(props) { setup(props) {
function focused() { function focused() {
const fp = props.store.focusPath; const fp = props.store.focusPath;
@ -71,8 +71,8 @@ export const PaneSubObjects = {
typeTag: item.kind, typeTag: item.kind,
focused: props.store.focusPath.includes(item.node), focused: props.store.focusPath.includes(item.node),
hasChildren: item.hasChildren ?? (item.kind !== 'bar' && item.kind !== 'voice'), hasChildren: item.hasChildren ?? (item.kind !== 'bar' && item.kind !== 'voice'),
onFocus: () => props.store.pushFocus(item.node), onFocus: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
onDrillDown: () => props.store.pushFocus(item.node), onDrillDown: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
}) })
)), )),
]); ]);