Implement new features for svg components + improve form properties (#25)

- Make Dimension an actual svg line
- Implement XPositionReference
- Select the container above after delete
- Remove DimensionLayer
- Improve form properties

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/25

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { ContainerModel } from '../../../Interfaces/ContainerModel';
-import { getDepth, MakeIterator } from '../../../utils/itertools';
-import { Dimension } from './Dimension';
-
-interface IDimensionLayerProps {
-  isHidden: boolean
-  roots: ContainerModel | ContainerModel[] | null
-}
-
-const GAP: number = 50;
-
-const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
-  const it = MakeIterator(root);
-  const dimensions: React.ReactNode[] = [];
-  for (const container of it) {
-    // WARN: this might be dangerous later when using other units/rules
-    const width = Number(container.properties.width);
-
-    const id = `dim-${container.properties.id}`;
-    const xStart: number = container.properties.x;
-    const xEnd = xStart + width;
-    const y = -(GAP * (getDepth(container) + 1));
-    const strokeWidth = 1;
-    const text = width.toString();
-    dimensions.push(
-      <Dimension
-        id={id}
-        xStart={xStart}
-        xEnd={xEnd}
-        y={y}
-        strokeWidth={strokeWidth}
-        text={text}
-      />
-    );
-  }
-  return dimensions;
-};
-
-/**
- * A layer containing all dimension
- *
- * @deprecated In order to avoid adding complexity
- * with computing the position in a group hierarchy,
- * use Dimension directly inside the Container,
- * Currently it is glitched as
- * it does not take parents into account,
- * and will not work correctly
- * @param props
- * @returns
- */
-export const DimensionLayer: React.FC<IDimensionLayerProps> = (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 (
-    <g visibility={props.isHidden ? 'hidden' : 'visible'}>
-      { dimensions }
-    </g>
-  );
-};