diff --git a/src/App.tsx b/src/App.tsx index 6245066..eaebbb1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar'; import { AvailableContainer } from './Interfaces/AvailableContainer'; import { Configuration } from './Interfaces/Configuration'; import { Container } from './Components/SVG/Elements/Container'; +import { MainContainer } from './Components/SVG/Elements/MainContainer'; import { SVG } from './Components/SVG/SVG'; interface IAppProps { @@ -14,7 +15,7 @@ interface IAppState { isSidebarOpen: boolean, isSVGSidebarOpen: boolean, configuration: Configuration, - MainContainer: Container | null + MainContainer: MainContainer | null } class App extends React.Component { @@ -39,18 +40,11 @@ class App extends React.Component { this.setState(prevState => ({ ...prevState, configuration, - MainContainer: new Container( + MainContainer: new MainContainer( { - id: 'main', - x: 0, - y: 0, width: configuration.MainContainer.Width, height: configuration.MainContainer.Height, - children: [], - style: { - fillOpacity: 0, - stroke: 'black' - } as React.CSSProperties + children: [] } ) })); @@ -94,13 +88,9 @@ class App extends React.Component { } }); - const newMainContainer = new Container({ - id: this.state.MainContainer.props.id, - x: this.state.MainContainer.props.x, - y: this.state.MainContainer.props.y, + const newMainContainer = new MainContainer({ width: this.state.MainContainer.props.width, height: this.state.MainContainer.props.height, - style: this.state.MainContainer.props.style, children: this.state.MainContainer.props.children.concat([container]) }); @@ -119,7 +109,7 @@ class App extends React.Component { buttonOnClick={(type: string) => this.AddContainer(type)} /> - this.ToggleSVGSidebar()}/> + this.ToggleSVGSidebar()}/> { this.state.MainContainer } diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 86f69cd..c3374ca 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -9,7 +9,7 @@ interface IContainerProps { width: number, height: number, style?: React.CSSProperties, - userData?: Record + userData?: Record } export class Container extends React.Component { diff --git a/src/Components/SVG/Elements/MainContainer.tsx b/src/Components/SVG/Elements/MainContainer.tsx new file mode 100644 index 0000000..725a032 --- /dev/null +++ b/src/Components/SVG/Elements/MainContainer.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { Container } from './Container'; + +interface IMainContainerProps { + children: Container[], + width: number, + height: number, +} + +export class MainContainer extends React.Component { + public render() { + const style: React.CSSProperties = { + fillOpacity: 0, + stroke: 'black' + }; + + return ( + + { this.props.children } + + ); + } +} diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 4555da2..3edb8cd 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; +import { MainContainer } from './Elements/MainContainer'; import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom'; -import { Container } from './Elements/Container'; interface ISVGProps { - children: Container | Container[] | null, + children: MainContainer | MainContainer[] | null, } interface ISVGState { diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx index e4107b7..5d1b184 100644 --- a/src/Components/SVGSidebar/SVGSidebar.tsx +++ b/src/Components/SVGSidebar/SVGSidebar.tsx @@ -1,49 +1,13 @@ import * as React from 'react'; -import { Container } from '../SVG/Elements/Container'; interface ISVGSidebarProps { - MainContainer: Container | null, - isOpen: boolean, - onClick: () => void + isOpen: boolean; + onClick: () => void; } export class SVGSidebar extends React.Component { - public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode { - const root = this.props.MainContainer; - if (!root) { - return null; - } - - const queue = [root]; - const visited = new Set([root]); - while (queue.length > 0) { - const container = queue.pop() as Container; - - handleContainer(container); - - container.props.children.forEach((child) => { - if (visited.has(child)) { - return; - } - visited.add(child); - queue.push(child); - }); - } - } - public render() { const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64'; - - const containerRows: React.ReactNode[] = []; - this.iterateChilds((container: Container) => { - const key = container.props.id.toString(); - containerRows.push( - - ); - }); - return (
@@ -52,7 +16,6 @@ export class SVGSidebar extends React.Component {
Liste des éléments
- { containerRows }
); }