How to implement a "hidden" side panel?
You can implement a side panel that becomes visible only when triggered that you can define (e.g. triggered by element selection).
// define the new custom section
const CustomSection = {
name: 'custom-text',
// we don't need "Tab" property, because it will be hidden from the list
visibleInList: false,
// we need observer to update component automatically on any store changes
Panel: observer(({ store }) => {
const text = store.selectedElements[0]?.text;
return (
<div>
<InputGroup
value={text}
onChange={() => {
store.selectedElements[0].set({ text: e.target.value });
}}
/>
</div>
);
}),
};
// add new section to side bar
const sections = [...DEFAULT_SECTIONS, CustomSection];
// use mobx API to react to selection changes
autorun(() => {
const textSelected = store.selectedElements[0]?.type === 'text';
if (textSelected) {
store.openSidePanel('custom-text');
}
});
export const App = () => {
return (
<PolotnoContainer className="polotno-app-container">
<SidePanelWrap>
<SidePanel store={store} sections={sections} />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} downloadButtonEnabled />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
};
News, updates and promos – be the first to get 'em
News, updates and promos – be the first to get 'em
Copyright © 2024 Polotno