From 8792c8bee54ef710cd6929a4bae933d9c28fb195 Mon Sep 17 00:00:00 2001 From: Siklos Date: Tue, 2 Aug 2022 23:31:08 +0200 Subject: [PATCH 1/4] Moved ElementsSidebar dfs to iterator in Container --- .../ElementsSidebar/ElementsSidebar.tsx | 19 +++---------------- src/Components/SVG/Elements/Container.tsx | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 9f8bcc9..eefa336 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -14,26 +14,13 @@ interface IElementsSidebarProps { export class ElementsSidebar extends React.Component { public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode { - const root = this.props.MainContainer; - if (!root) { + if (!this.props.MainContainer) { return null; } - const queue = [root]; - const visited = new Set([root]); - while (queue.length > 0) { - const container = queue.pop() as Container; - + const it = this.props.MainContainer.MakeIterator(); + for (const container of it) { handleContainer(container); - - // if this reverse() gets costly, replace it by a simple for - container.props.children.reverse().forEach((child) => { - if (visited.has(child)) { - return; - } - visited.add(child); - queue.push(child); - }); } } diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index ab23a7d..67d3d32 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -21,6 +21,25 @@ export class Container extends React.Component { return properties; } + public * MakeIterator() { + const queue: Container[] = [this]; + const visited = new Set(queue); + while (queue.length > 0) { + const container = queue.pop() as Container; + + yield container; + + // if this reverse() gets costly, replace it by a simple for + container.props.children.reverse().forEach((child) => { + if (visited.has(child)) { + return; + } + visited.add(child); + queue.push(child); + }); + } + } + public render(): React.ReactNode { const containersElements = this.props.children.map(child => child.render()); const defaultStyle = { From be0049658125afd0626ea42dd47c0d14cc82ec92 Mon Sep 17 00:00:00 2001 From: Siklos Date: Tue, 2 Aug 2022 23:36:31 +0200 Subject: [PATCH 2/4] Moved static GetDepth to getDepth class method --- .../ElementsSidebar/ElementsSidebar.tsx | 2 +- src/Components/SVG/Elements/Container.tsx | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index eefa336..afec90a 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -29,7 +29,7 @@ export class ElementsSidebar extends React.Component { const containerRows: React.ReactNode[] = []; this.iterateChilds((container: Container) => { - const depth: number = Container.getDepth(container); + const depth: number = container.getDepth(); const key = container.props.properties.id.toString(); const text = '|\t'.repeat(depth) + key; const selectedClass: string = this.props.SelectedContainer !== null && diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 67d3d32..a3fd191 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -40,6 +40,18 @@ export class Container extends React.Component { } } + public getDepth() { + let depth = 0; + + let current: Container | null = this.props.parent; + while (current != null) { + depth++; + current = current.props.parent; + } + + return depth; + } + public render(): React.ReactNode { const containersElements = this.props.children.map(child => child.render()); const defaultStyle = { @@ -69,16 +81,4 @@ export class Container extends React.Component { ); } - - 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; - } } From c54e9ff3cb43f45eac8fa510e036ea2f9abd67ea Mon Sep 17 00:00:00 2001 From: Siklos Date: Wed, 3 Aug 2022 00:02:41 +0200 Subject: [PATCH 3/4] Implement dimension --- src/Components/SVG/Elements/Dimension.tsx | 52 +++++++++++++++++++ .../SVG/Elements/DimensionLayer.tsx | 52 +++++++++++++++++++ src/Components/SVG/SVG.tsx | 2 + 3 files changed, 106 insertions(+) create mode 100644 src/Components/SVG/Elements/Dimension.tsx create mode 100644 src/Components/SVG/Elements/DimensionLayer.tsx diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx new file mode 100644 index 0000000..276345f --- /dev/null +++ b/src/Components/SVG/Elements/Dimension.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; + +interface IDimensionProps { + id: string; + xStart: number; + xEnd: number; + y: number; + text: string; + strokeWidth: number; +} + +export class Dimension extends React.Component { + public render() { + const style = { + stroke: 'black' + } as React.CSSProperties; + return ( + + + + + + {this.props.text} + + + ); + } +} diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx new file mode 100644 index 0000000..a7708f8 --- /dev/null +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { Container } from './Container'; +import { Dimension } from './Dimension'; + +interface IDimensionLayerProps { + isHidden: boolean, + roots: Container | Container[] | null, +} + +const GAP: number = 50; + +const getDimensionsNodes = (root: Container): React.ReactNode[] => { + const it = root.MakeIterator(); + const dimensions: React.ReactNode[] = []; + for (const container of it) { + // WARN: this might be dangerous later when using other units/rules + const width = Number(container.props.properties.width); + + const id = `dim-${container.props.properties.id}`; + const xStart: number = container.props.properties.x; + const xEnd = xStart + width; + const y = -(GAP * (container.getDepth() + 1)); + const strokeWidth = 1; + const text = width.toString(); + const dimension = new Dimension({ + id, + xStart, + xEnd, + y, + strokeWidth, + text + }); + dimensions.push(dimension.render()); + } + return dimensions; +}; + +export const DimensionLayer: React.FC = (props: IDimensionLayerProps) => { + let dimensions: React.ReactNode[] = []; + if (Array.isArray(props.roots)) { + props.roots.forEach(child => { + dimensions.concat(getDimensionsNodes(child)); + }); + } else if (props.roots !== null) { + dimensions = getDimensionsNodes(props.roots); + } + return ( + + { dimensions } + + ); +}; diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 4555da2..dd5f568 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom'; import { Container } from './Elements/Container'; +import { DimensionLayer } from './Elements/DimensionLayer'; interface ISVGProps { children: Container | Container[] | null, @@ -79,6 +80,7 @@ export class SVG extends React.Component { > { children } + ); From 06ab515e7181d6b7fc556cb126bf6efc8052d3ff Mon Sep 17 00:00:00 2001 From: Siklos Date: Wed, 3 Aug 2022 00:02:59 +0200 Subject: [PATCH 4/4] Changed MainContainer dimension to something more respectable --- test-server/http.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test-server/http.js b/test-server/http.js index e331d23..04eed05 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -254,7 +254,7 @@ const GetSVGLayoutConfiguration = () => { ContainerActions: null, ContainerDimensionning: null, DefaultChildrenContainers: null, - Height: 1600, + Height: 200, IsPositionFixed: false, IsWidthFixed: false, MaxHeight: 0, @@ -263,7 +263,7 @@ const GetSVGLayoutConfiguration = () => { MinWidth: 0, Type: 'Trou', TypeChildContainerDefault: null, - Width: 20000, + Width: 1000, XPositionReference: 0 } };