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

Implemtation in progress, UIX working , replacing in ContainerOperations.ts working but not properly need fix

Browse source
This commit is contained in:
Carl Fuchs 2023-02-06 16:45:34 +01:00
parent 62abd3ff03
commit e789300090
9 changed files with 139 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,13 +17,15 @@ import { FindContainerById } from '../../utils/itertools';
import { IEditorState } from '../../Interfaces/IEditorState';
import { GetCurrentHistoryState } from '../Editor/Editor';
import { Text } from '../Text/Text';
import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
import { Dispatch } from 'react';
export interface IUIProps {
editorState: IEditorState
selectContainer: (containerId: string) => void
deleteContainer: (containerId: string) => void
onPropertyChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void
addContainer: (type: string) => void
addOrReplaceContainer: (type: string) => void
addContainerAt: (index: number, type: string, parent: string) => void
addSymbol: (type: string) => void
onSymbolPropertyChange: (key: string, value: string | number | boolean) => void
@ -32,6 +34,9 @@ export interface IUIProps {
saveEditorAsJSON: () => void
saveEditorAsSVG: () => void
loadState: (move: number) => void
replaceContainer: IReplaceContainer
setReplaceContainer: Dispatch<React.SetStateAction<IReplaceContainer>>
}
export enum SidebarType {
@ -57,8 +62,9 @@ function UseSetOrToggleSidebar(
};
}
export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
export function UI({ editorState, replaceContainer, setReplaceContainer, ...methods }: IUIProps): JSX.Element {
const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
const [messages, setMessages] = React.useState<IMessage[]>([]);
const current = GetCurrentHistoryState(editorState.history, editorState.historyCurrentStep);
const configuration = editorState.configuration;
@ -98,15 +104,13 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
case SidebarType.Components:
leftSidebarTitle = Text({ textId: '@Components' });
const AllowedReplaceCategory = undefined;
leftChildren = <Components
selectedContainer={selectedContainer}
componentOptions={configuration.AvailableContainers}
categories={configuration.Categories}
buttonOnClick={methods.addContainer}
replaceableCategoryName={AllowedReplaceCategory}
/>;
buttonOnClick={methods.addOrReplaceContainer}
replaceContainer={replaceContainer}
setReplaceContainer={setReplaceContainer}/>;
rightSidebarTitle = Text({ textId: '@Elements' });
rightChildren = <ElementsList
containers={current.containers}
@ -187,9 +191,12 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
isLeftSidebarOpenClasses.add('left-sidebar-single');
}
const clickRestrictionsClasses = replaceContainer.isReplacing ? 'pointer-events-none opacity-50' : '';
return (
<>
<Bar
className={clickRestrictionsClasses}
isComponentsOpen={selectedSidebar === SidebarType.Components}
isSymbolsOpen={selectedSidebar === SidebarType.Symbols}
isHistoryOpen={selectedSidebar === SidebarType.History}
@ -218,6 +225,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
{ leftChildren }
</Sidebar>
<Viewer
className={clickRestrictionsClasses}
isLeftSidebarOpen={isLeftSidebarOpen}
isRightSidebarOpen={isRightSidebarOpen}
current={current}
@ -225,7 +233,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectContainer={methods.selectContainer}
/>
<Sidebar
className={`right-sidebar ${isRightSidebarOpenClasses}`}
className={`right-sidebar ${isRightSidebarOpenClasses} ${clickRestrictionsClasses}`}
title={rightSidebarTitle}
>
{ rightChildren }