Merged PR 169: Fix bugs with flex + Disable obnoxious swals + Add selector text + Sort SVG scss to different files

- Disable PushBehavior and set it in a different file
- Fix behviors when parent === undefined
- Fix flex behavrios when using anchors
- Fix siblings not applying flex to theirs children on container delete
- Fix flex behavior when using anchors
- Enable flex by default
- Disable obnoxious swals
- Add selector text
- Sort SVG scss to different files

Others: Add some todos

src/Components/SVG/Elements/Selector/Selector.scss

@@ -0,0 +1,4 @@
+@keyframes fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}

src/Components/SVG/Elements/Selector/Selector.tsx

@@ -1,7 +1,9 @@
+import './Selector.scss';
 import * as React from 'react';
-import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { getAbsolutePosition } from '../../../utils/itertools';
-import { RemoveMargin } from '../../../utils/svg';
+import { IContainerModel } from '../../../../Interfaces/IContainerModel';
+import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
+import { getAbsolutePosition } from '../../../../utils/itertools';
+import { RemoveMargin } from '../../../../utils/svg';
 
 interface ISelectorProps {
   selected?: IContainerModel
@@ -28,6 +30,9 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     props.selected.properties.margin.right
   ));
 
+  const xText = x + width / 2;
+  const yText = y + height / 2;
+
   const style: React.CSSProperties = {
     stroke: '#3B82F6', // tw blue-500
     strokeWidth: 4,
@@ -39,13 +44,23 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
   };
 
   return (
-    <rect
-      x={x}
-      y={y}
-      width={width}
-      height={height}
-      style={style}
-    >
-    </rect>
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        style={style}
+      >
+      </rect>
+      {SHOW_SELECTOR_TEXT
+        ? <text
+          x={xText}
+          y={yText}
+        >
+          {props.selected.properties.displayedText}
+        </text>
+        : null}
+    </>
   );
 };

src/Components/SVG/SVG.scss

@@ -0,0 +1,14 @@
+text {
+  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 18px;
+  font-weight: 800;
+  fill: #fff;
+  fill-opacity: 1;
+  stroke: #000000;
+  stroke-width: 1px;
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  stroke-opacity: 1;
+  transform: translateX(-50%);
+  transform-box: fill-box;
+}

src/Components/SVG/SVG.tsx

@@ -1,8 +1,9 @@
+import './SVG.scss';
 import * as React from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
-import { Selector } from './Elements/Selector';
+import { Selector } from './Elements/Selector/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
 import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';