diff --git a/src/App.tsx b/src/App.tsx index a9066fb..f7f74a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -228,7 +228,7 @@ class App extends React.Component { selectContainer={(container: Container) => this.SelectContainer(container)} /> - + { this.state.MainContainer } diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index d5671e2..f36553f 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -14,9 +14,6 @@ interface IContainerProps { const GAP = 50; export class Container extends React.Component { - componentWillUnMount() { - } - public GetProperties(): Properties { const properties : Properties = { ...this.props.properties @@ -55,10 +52,22 @@ export class Container extends React.Component { return depth; } + public getAbsolutePosition(): [number, number] { + let x = Number(this.props.properties.x); + let y = Number(this.props.properties.y); + let current = this.props.parent; + while (current != null) { + x += Number(current.props.properties.x); + y += Number(current.props.properties.y); + current = current.props.parent; + } + return [x, y]; + } + public render(): React.ReactNode { const containersElements = this.props.children.map(child => child.render()); - const xText = (this.props.properties.x * 2 + Number(this.props.properties.width)) / 2; - const yText = (this.props.properties.y * 2 + Number(this.props.properties.height)) / 2; + const xText = Number(this.props.properties.width) / 2; + const yText = Number(this.props.properties.height) / 2; // g style const defaultStyle = { diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx new file mode 100644 index 0000000..863317a --- /dev/null +++ b/src/Components/SVG/Elements/Selector.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { Container } from './Container'; + +interface ISelectorProps { + selected: Container | null +} + +export const Selector: React.FC = (props) => { + if (props.selected === undefined || props.selected === null) { + return ( + + + ); + } + + const [x, y] = props.selected.getAbsolutePosition(); + const [width, height] = [ + props.selected.props.properties.width, + props.selected.props.properties.height + ]; + const style = { + strokeDasharray: '8, 10', + stroke: '#3B82F6', // tw blue-500 + strokeWidth: 4, + fillOpacity: 0, + transitionProperty: 'all', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '150ms' + } as React.CSSProperties; + + return ( + + + ); +}; diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 6e0da86..64a3246 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,10 +1,11 @@ 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'; +import { Selector } from './Elements/Selector'; interface ISVGProps { children: Container | Container[] | null, + selected: Container | null } interface ISVGState { @@ -80,6 +81,7 @@ export class SVG extends React.Component { > { children } + );