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 { export interface IEditorState {
isSidebarOpen: boolean, isSidebarOpen: boolean,
isSVGSidebarOpen: boolean, isElementsSidebarOpen: boolean,
isHistoryOpen: boolean, isHistoryOpen: boolean,
history: Array<IHistoryState>, history: Array<IHistoryState>,
historyCurrentStep: number, historyCurrentStep: number,
@ -34,7 +34,7 @@ class Editor extends React.Component<IEditorProps> {
super(props); super(props);
this.state = { this.state = {
isSidebarOpen: true, isSidebarOpen: true,
isSVGSidebarOpen: false, isElementsSidebarOpen: false,
isHistoryOpen: false, isHistoryOpen: false,
configuration: Object.assign({}, props.configuration), configuration: Object.assign({}, props.configuration),
history: [...props.history], history: [...props.history],
@ -59,7 +59,7 @@ class Editor extends React.Component<IEditorProps> {
*/ */
public ToggleElementsSidebar() { public ToggleElementsSidebar() {
this.setState({ this.setState({
isSVGSidebarOpen: !this.state.isSVGSidebarOpen isElementsSidebarOpen: !this.state.isElementsSidebarOpen
} as IEditorState); } as IEditorState);
} }
@ -259,6 +259,13 @@ class Editor extends React.Component<IEditorProps> {
*/ */
render() { render() {
const current = this.getCurrentHistoryState(); 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 ( return (
<div className="App font-sans h-full"> <div className="App font-sans h-full">
<Sidebar <Sidebar
@ -277,7 +284,7 @@ class Editor extends React.Component<IEditorProps> {
<ElementsSidebar <ElementsSidebar
MainContainer={current.MainContainer} MainContainer={current.MainContainer}
SelectedContainer={current.SelectedContainer} SelectedContainer={current.SelectedContainer}
isOpen={this.state.isSVGSidebarOpen} isOpen={this.state.isElementsSidebarOpen}
isHistoryOpen={this.state.isHistoryOpen} isHistoryOpen={this.state.isHistoryOpen}
onClick={() => this.ToggleElementsSidebar()} onClick={() => this.ToggleElementsSidebar()}
onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)} onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
@ -307,7 +314,7 @@ class Editor extends React.Component<IEditorProps> {
{ current.MainContainer } { current.MainContainer }
</SVG> </SVG>
<button <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' title='Export as JSON'
onClick={() => this.SaveEditor()} onClick={() => this.SaveEditor()}
> >
@ -321,6 +328,10 @@ class Editor extends React.Component<IEditorProps> {
const getCircularReplacer = () => { const getCircularReplacer = () => {
const seen = new WeakSet(); const seen = new WeakSet();
return (key: any, value: object | null) => { return (key: any, value: object | null) => {
if (key === 'parent') {
return;
}
if (typeof value === 'object' && value !== null) { if (typeof value === 'object' && value !== null) {
if (seen.has(value)) { if (seen.has(value)) {
return; return;