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

Rename isSVGSidebarOpen to isElementsSidebarOpen + fix position with export button

Browse source
This commit is contained in:
Siklos 2022-08-04 19:03:31 +02:00
parent 8081e7fee9
commit 7b704fa33d
1 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/Editor.tsx
View file

@ -18,7 +18,7 @@ interface IEditorProps {
export interface IEditorState {
isSidebarOpen: boolean,
isSVGSidebarOpen: boolean,
isElementsSidebarOpen: boolean,
isHistoryOpen: boolean,
history: Array<IHistoryState>,
historyCurrentStep: number,
@ -34,7 +34,7 @@ class Editor extends React.Component<IEditorProps> {
super(props);
this.state = {
isSidebarOpen: true,
isSVGSidebarOpen: false,
isElementsSidebarOpen: false,
isHistoryOpen: false,
configuration: Object.assign({}, props.configuration),
history: [...props.history],
@ -59,7 +59,7 @@ class Editor extends React.Component<IEditorProps> {
*/
public ToggleElementsSidebar() {
this.setState({
isSVGSidebarOpen: !this.state.isSVGSidebarOpen
isElementsSidebarOpen: !this.state.isElementsSidebarOpen
} as IEditorState);
}
@ -259,6 +259,13 @@ class Editor extends React.Component<IEditorProps> {
*/
render() {
const current = this.getCurrentHistoryState();
let buttonRightOffsetClasses = 'right-12';
if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) {
buttonRightOffsetClasses = 'right-72';
}
if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) {
buttonRightOffsetClasses = 'right-[544px]';
}
return (
<div className="App font-sans h-full">
<Sidebar
@ -277,7 +284,7 @@ class Editor extends React.Component<IEditorProps> {
<ElementsSidebar
MainContainer={current.MainContainer}
SelectedContainer={current.SelectedContainer}
isOpen={this.state.isSVGSidebarOpen}
isOpen={this.state.isElementsSidebarOpen}
isHistoryOpen={this.state.isHistoryOpen}
onClick={() => this.ToggleElementsSidebar()}
onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
@ -307,7 +314,7 @@ class Editor extends React.Component<IEditorProps> {
{ current.MainContainer }
</SVG>
<button
className='fixed transition-all right-12 bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'
className={`fixed transition-all ${buttonRightOffsetClasses} bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
title='Export as JSON'
onClick={() => this.SaveEditor()}
>
@ -321,6 +328,10 @@ class Editor extends React.Component<IEditorProps> {
const getCircularReplacer = () => {
const seen = new WeakSet();
return (key: any, value: object | null) => {
if (key === 'parent') {
return;
}
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) {
return;