Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement Highlight on symbols

Browse source
This commit is contained in:
Carl Fuchs 2023-02-09 15:30:31 +01:00
parent c6c4bd1e32
commit 579422653b
7 changed files with 138 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/Components/UI/UI.tsx
View file

@ -4,17 +4,17 @@ import { History } from '../History/History';
import { Bar, BAR_WIDTH } from '../Bar/Bar';
import { Symbols } from '../Symbols/Symbols';
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
import { PropertyType } from '../../Enums/PropertyType';
import { type PropertyType } from '../../Enums/PropertyType';
import { Messages } from '../Messages/Messages';
import { Sidebar } from '../Sidebar/Sidebar';
import { Components } from '../Components/Components';
import { Viewer } from '../Viewer/Viewer';
import { Settings } from '../Settings/Settings';
import { IMessage } from '../../Interfaces/IMessage';
import { type IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { UseWorker, UseAsync } from './UseWorker';
import { FindContainerById } from '../../utils/itertools';
import { IEditorState } from '../../Interfaces/IEditorState';
import { type IEditorState } from '../../Interfaces/IEditorState';
import { GetCurrentHistoryState } from '../Editor/Editor';
import { Text } from '../Text/Text';
@ -96,6 +96,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
}
const selectedContainer = FindContainerById(current.containers, current.selectedContainerId);
const selectedSymbol = current.symbols.get(current.selectedSymbolId);
switch (selectedSidebar) {
case SidebarType.Components:
@ -116,7 +117,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectContainer={methods.selectContainer}
addContainer={methods.addContainerAt}
isExpanded ={false}
onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) }
onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } }
/>;
break;
case SidebarType.ComponentsExpanded:
@ -137,7 +138,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectContainer={methods.selectContainer}
addContainer={methods.addContainerAt}
isExpanded ={true}
onExpandChange={() => setOrToggleSidebar(SidebarType.Components) }
onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } }
/>;
break;
case SidebarType.Symbols:
@ -153,7 +154,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol}
isExpanded ={false}
onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) }
onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } }
/>;
break;
case SidebarType.SymbolsExpanded:
@ -169,7 +170,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol}
isExpanded ={true}
onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)}
onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }}
/>;
break;
@ -187,7 +188,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
leftChildren = <Messages
historyState={current}
messages={messages}
clearMessage={() => setMessages([])}
clearMessage={() => { setMessages([]); }}
/>;
break;
@ -242,11 +243,14 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
isLeftSidebarOpenClasses.add('left-sidebar-single');
}
const isComponentsOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded;
const isSymbolsOpen = selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded;
return (
<>
<Bar
isComponentsOpen={selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded}
isSymbolsOpen={selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded}
isComponentsOpen={isComponentsOpen}
isSymbolsOpen={isSymbolsOpen}
isHistoryOpen={selectedSidebar === SidebarType.History}
isMessagesOpen={selectedSidebar === SidebarType.Messages}
isSettingsOpen={selectedSidebar === SidebarType.Settings}
@ -283,8 +287,11 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
<Viewer
className={`${[...viewerMarginClasses.values()].join(' ')} w-full h-full`}
current={current}
isComponentsOpen={isComponentsOpen}
isSymbolsOpen={isSymbolsOpen}
selectedContainer={selectedContainer}
selectContainer={methods.selectContainer}
selectedSymbol={selectedSymbol}
margin={marginSidebar}
/>
<Sidebar