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

Implement add on selected container

Browse source
This commit is contained in:
Siklos 2022-08-01 11:02:44 +02:00
parent 092b156cc0
commit 893b525d45
3 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/Components/SVG/Elements/Container.tsx
View file

@ -35,4 +35,16 @@ export class Container extends React.Component<IContainerProps> {
</g>
);
}
public static getDepth(container: Container): number {
let depth = 0;
let current: Container | null = container.props.parent;
while (current != null) {
depth++;
current = current.props.parent;
}
return depth;
}
}

6
src/Components/SVGSidebar/SVGSidebar.tsx
View file

@ -4,11 +4,13 @@ import { Container } from '../SVG/Elements/Container';
interface ISVGSidebarProps {
MainContainer: Container | null,
isOpen: boolean,
onClick: () => void
onClick: () => void,
selectContainer: (container: Container) => void
}
export class SVGSidebar extends React.Component<ISVGSidebarProps> {
public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
// TODO: fix this by using dfs or sort
const root = this.props.MainContainer;
if (!root) {
return null;
@ -45,7 +47,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
const key = container.props.id.toString();
const text = '\t\t'.repeat(depth) + key;
containerRows.push(
<button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key}>
<button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key} onClick={() => this.props.selectContainer(container)}>
{ text }
</button>
);