diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 43dd9b6fd4a060fbc5e2a4cbf1689456cd26978e..a3f2d07830113a3a8259a33980a1a2964be89e9c 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -397,8 +397,8 @@
/* Selected */
.dome-xToolBar-control.dome-selected {
- fill: var(--info-text);
- color: var(--info-text);
+ fill: var(--text);
+ color: var(--text);
border: 1px solid transparent ;
background-color: var(--selected-button-img) ;
background-image: none ;
diff --git a/ivette/src/dome/renderer/frame/toolbars.tsx b/ivette/src/dome/renderer/frame/toolbars.tsx
index 71ec6d292685dca541d8bcd3c25aa582249c9cdc..9204057d63cd0a6d748223fd8acf6ca7d3631a10 100644
--- a/ivette/src/dome/renderer/frame/toolbars.tsx
+++ b/ivette/src/dome/renderer/frame/toolbars.tsx
@@ -163,6 +163,8 @@ export interface ButtonProps<A> {
onClick?: (value: A | undefined, evt:React.MouseEvent) => void;
/** Right-Click callback. Receives the button's value. */
onContextMenu?: (value: A | undefined, evt:React.MouseEvent) => void;
+ /** Further Styling */
+ className?: string;
/** Button contents */
children?: React.ReactNode;
}
@@ -176,13 +178,16 @@ export function Button<A = undefined>(
const { enabled = true, disabled = false } = props;
const { selected, value, selection, onClick, onContextMenu } = props;
const isSelected = selected !== undefined
- ? selected
- : (value !== undefined && value === selection);
+ ? selected : (value !== undefined && value === selection);
+ const className = classes(
+ isSelected ? SELECT : (BUTTON + KIND(props.kind)),
+ props.className,
+ );
return (
<button
type="button"
disabled={disabled || !enabled}
- className={isSelected ? SELECT : (BUTTON + KIND(props.kind))}
+ className={className}
onClick={onClick && ((evt) => onClick(value, evt))}
onContextMenu={onContextMenu && ((evt) => onContextMenu(value, evt))}
title={props.title}
diff --git a/ivette/src/renderer/Laboratory.tsx b/ivette/src/renderer/Laboratory.tsx
index f93019bef899e7ccf85104614df2be197183cb77..63e062b1f4a152c962e20389f6385adaf61fd7fd 100644
--- a/ivette/src/renderer/Laboratory.tsx
+++ b/ivette/src/renderer/Laboratory.tsx
@@ -48,7 +48,7 @@ interface Layout { A: compId, B: compId, C: compId, D: compId }
interface TabViewState {
view: viewId,
- custom: number,
+ custom: number, /* -1: transient, 0: favorite, n: custom */
scroll: Scroll,
layout: Layout,
}
@@ -73,7 +73,7 @@ const LAB = new States.GlobalState<LabViewState>({
panels: new Set(),
docked: new Map(),
tabs: [],
- tabIndex: 0,
+ tabIndex: -1,
sideView: '',
sideComp: '',
});
@@ -112,7 +112,7 @@ function addLayoutComponent(
}
}
-function addLayoutView(m: Layout, view: Ivette.Layout): Layout
+function makeViewLayout(view: Ivette.Layout): Layout
{
type Unstructured = {
A ?: compId, B ?: compId, C ?: compId, D ?: compId,
@@ -120,10 +120,10 @@ function addLayoutView(m: Layout, view: Ivette.Layout): Layout
ABCD ?: compId
};
const u = view as Unstructured;
- const A : compId = u.A ?? u.AB ?? u.AC ?? u.ABCD ?? m.A;
- const B : compId = u.B ?? u.AB ?? u.BD ?? u.ABCD ?? m.B;
- const C : compId = u.C ?? u.AC ?? u.CD ?? u.ABCD ?? m.C;
- const D : compId = u.D ?? u.CD ?? u.BD ?? u.ABCD ?? m.D;
+ const A : compId = u.A ?? u.AB ?? u.AC ?? u.ABCD ?? '';
+ const B : compId = u.B ?? u.AB ?? u.BD ?? u.ABCD ?? '';
+ const C : compId = u.C ?? u.AC ?? u.CD ?? u.ABCD ?? '';
+ const D : compId = u.D ?? u.CD ?? u.BD ?? u.ABCD ?? '';
return { A, B, C, D };
}
@@ -163,6 +163,49 @@ function getLayoutPosition(
return undefined;
}
+/* -------------------------------------------------------------------------- */
+/* --- Tabs Utilities --- */
+/* -------------------------------------------------------------------------- */
+
+function findTab(tabs: TabViewState[], viewId: viewId) : number
+{
+ return tabs.findIndex(({ view, custom }) => view === viewId && custom <= 0);
+}
+
+/*
+function duplicateTab(tabs: TabViewState[], viewId: viewId): number
+{
+ return 1 + tabs.reduce((n, { view, custom }) => (
+ view === viewId ? Math.max(n, custom) : n
+ ), 0);
+}
+*/
+
+function newTab(
+ tabs: TabViewState[],
+ view: Ivette.ViewLayoutProps,
+ custom: number,
+): TabViewState[]
+{
+ return tabs.concat({
+ view: view.id, custom,
+ scroll: defaultScroll,
+ layout: makeViewLayout(view.layout)
+ });
+}
+
+function saveTab(
+ newTabs: TabViewState[],
+ oldState: LabViewState,
+): void {
+ const oldIndex = oldState.tabIndex;
+ const toSave = newTabs[oldIndex];
+ if (toSave !== undefined) {
+ const { layout, scroll } = oldState;
+ newTabs[oldIndex] = { ...toSave, layout, scroll };
+ }
+}
+
/* -------------------------------------------------------------------------- */
/* --- LabView Actions --- */
/* -------------------------------------------------------------------------- */
@@ -190,16 +233,50 @@ function setCurrentComp(compId: compId = ''):void {
LAB.setValue({ ...state, sideComp: compId, sideView: '' });
}
+function applyTab(index = -1): void {
+ const state = LAB.getValue();
+ const old = state.tabIndex;
+ if (old === index) return;
+ const tab = state.tabs[index];
+ if (tab === undefined) return;
+ const { view, layout, scroll } = tab;
+ const tabs = [...state.tabs];
+ saveTab(tabs, state);
+ LAB.setValue({
+ ...state,
+ tabIndex: index,
+ tabs, layout, scroll,
+ sideView: view,
+ sideComp: '',
+ });
+}
+
function applyView(view: Ivette.ViewLayoutProps): void {
const state = LAB.getValue();
- const layout = addLayoutView(state.layout, view.layout);
- const panels =
- copySet(state.panels)
- .add(layout.A)
- .add(layout.B)
- .add(layout.C)
- .add(layout.D);
- LAB.setValue({ ...state, panels, layout, sideView: view.id, sideComp: '' });
+ const viewId = view.id;
+ const index = findTab(state.tabs, viewId);
+ if (0 <= index) {
+ applyTab(index);
+ } else {
+ const layout = makeViewLayout(view.layout);
+ const panels =
+ copySet(state.panels)
+ .add(layout.A)
+ .add(layout.B)
+ .add(layout.C)
+ .add(layout.D);
+ const tabs = newTab(state.tabs, view, -1);
+ const tabIndex = tabs.length - 1;
+ saveTab(tabs, state);
+ LAB.setValue({
+ panels, layout,
+ scroll: state.scroll,
+ docked: state.docked,
+ tabs, tabIndex,
+ sideView: view.id,
+ sideComp: '',
+ });
+ }
}
function applyComponent(
@@ -722,21 +799,24 @@ export function Dock(): JSX.Element {
interface TabViewProps {
tab: TabViewState;
index: number;
- selected: number;
+ selection: number;
}
function TabView(props: TabViewProps): JSX.Element | null {
- const { tab, index, selected } = props;
+ const { tab, index, selection } = props;
const { view: id, custom } = tab;
const view = Ext.useElement(VIEW, id);
+ if (custom < 0 && index !== selection) return null;
const name = view?.label ?? id;
const label = custom > 0 ? `${name} — ${custom}` : name;
return (
<Toolbar.Button
+ className='labview-tab'
icon='DISPLAY'
label={label}
value={index}
- selection={selected}
+ selection={selection}
+ onClick={applyTab}
/>
);
}
@@ -748,7 +828,7 @@ export function Tabs(): JSX.Element {
key={tab.view}
tab={tab}
index={k}
- selected={tabIndex} />
+ selection={tabIndex} />
));
return <>{items}</>;
}
diff --git a/ivette/src/renderer/style.css b/ivette/src/renderer/style.css
index 0d01daa9249fb96e3a52b290bbfdcccd5bf5acb4..402e7c518e538ff6723e6555b47abd9e9691fbe1 100644
--- a/ivette/src/renderer/style.css
+++ b/ivette/src/renderer/style.css
@@ -162,6 +162,31 @@
fill: var(--text);
}
+/* -------------------------------------------------------------------------- */
+/* --- Dock & Tabs --- */
+/* -------------------------------------------------------------------------- */
+
+.labview-tab {
+ fill: var(--info-text);
+ color: var(--info-text);
+ background: var(--background);
+ background-image: none;
+ border-radius: 8px;
+}
+
+.labview-tab:hover {
+ fill: var(--text);
+ color: var(--text);
+}
+
+.labview-tab.dome-selected:hover {
+ background: var(--default-button-hover);
+}
+
+.labview-tab.dome-selected {
+ background: var(--background-softer);
+}
+
.labview-docked {
font-size: smaller;
background: var(--background-softer);