Implement more options + Add depth dimension (revert DimensionLayer) (#37)

- Displayed text
- Enable Shortcuts
- Hide text
- Disable Dimension
- Depth dimension

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

src/utils/default.ts

@@ -4,6 +4,23 @@ import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
 import IProperties from '../Interfaces/IProperties';
 
+/// CONTAINRE DEFAULTS ///
+
+export const SHOW_TEXT = true;
+
+/// DIMENSIONS DEFAULTS ///
+
+export const SHOW_PARENT_DIMENSION = true;
+export const SHOW_CHILDREN_DIMENSIONS = false;
+export const SHOW_DIMENSIONS_PER_DEPTH = true;
+export const DIMENSION_MARGIN = 50;
+export const NOTCHES_LENGTH = 4;
+
+/// EDITOR DEFAULTS ///
+
+export const ENABLE_SHORTCUTS = true;
+export const MAX_HISTORY = 200;
+
 export const DEFAULT_CONFIG: IConfiguration = {
   AvailableContainers: [
     {
@@ -31,6 +48,7 @@ export const DEFAULT_CONFIG: IConfiguration = {
 export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   id: 'main',
   parentId: 'null',
+  displayedText: 'main',
   x: 0,
   y: 0,
   minWidth: 1,
@@ -55,6 +73,7 @@ export const GetDefaultContainerProps = (
 ): IProperties => ({
   id: `${type}-${typeCount}`,
   parentId: parent.properties.id,
+  displayedText: `${type}-${typeCount}`,
   x,
   y,
   width: containerConfig.Width ?? containerConfig.MinWidth ?? parent.properties.width,
@@ -67,8 +86,3 @@ export const GetDefaultContainerProps = (
   style: containerConfig.Style,
   userData: containerConfig.UserData
 });
-
-export const DIMENSION_MARGIN = 50;
-export const NOTCHES_LENGTH = 4;
-
-export const MAX_HISTORY = 200;

src/utils/itertools.ts

@@ -22,6 +22,34 @@ export function * MakeIterator(root: IContainerModel): Generator<IContainerModel
   }
 }
 
+export interface ContainerAndDepth {
+  container: IContainerModel
+  depth: number
+}
+/**
+ * Returns a Generator iterating of over the children depth-first
+ */
+export function * MakeBFSIterator(root: IContainerModel): Generator<ContainerAndDepth, void, unknown> {
+  const queue: IContainerModel[] = [root];
+  let depth = 0;
+  while (queue.length > 0) {
+    let levelSize = queue.length;
+    while (levelSize-- !== 0) {
+      const container = queue.shift() as IContainerModel;
+      yield {
+        container,
+        depth
+      };
+
+      for (let i = container.children.length - 1; i >= 0; i--) {
+        const child = container.children[i];
+        queue.push(child);
+      }
+    }
+    depth++;
+  }
+}
+
 /**
  * Returns the depth of the container
  * @returns The depth of the container