Implement basic selector + fix text position

src/Components/SVG/Elements/Container.tsx

@@ -14,9 +14,6 @@ interface IContainerProps {
 const GAP = 50;
 
 export class Container extends React.Component<IContainerProps> {
-  componentWillUnMount() {
-  }
-
   public GetProperties(): Properties {
     const properties : Properties = {
       ...this.props.properties
@@ -55,10 +52,22 @@ export class Container extends React.Component<IContainerProps> {
     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 = {

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<ISelectorProps> = (props) => {
+  if (props.selected === undefined || props.selected === null) {
+    return (
+      <rect visibility={'hidden'}>
+      </rect>
+    );
+  }
+
+  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 (
+    <rect
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      style={style}
+    >
+    </rect>
+  );
+};