Updated config page.

src/diagram/diagramManager.ts

@@ -79,6 +79,7 @@ export class DiagramManager {
                 template: '#image-template',
                 image: event.detail.data,
                 text: event.detail.name,
+                type: 'entity',
                 position: {x: 0, y: 1.6, z: 0},
                 rotation: {x: 0, y: Math.PI, z: 0},
                 scale: {x: 1, y: 1, z: 1},
@@ -138,7 +139,7 @@ export class DiagramManager {
         let diagramObject = this._diagramObjects.get(event?.entity?.id);
         switch (event.type) {
             case DiagramEventType.CLEAR:
-                this._diagramObjects.forEach((value, key) => {
+                this._diagramObjects.forEach((value) => {
                     value.dispose();
                 });
                 this._diagramObjects.clear();

src/diagram/diagramObject.ts

@@ -177,6 +177,7 @@ export class DiagramObject {
             position: oldEntity.position,
             rotation: oldEntity.rotation,
             scale: oldEntity.scale,
+            type: 'entity',
             image: oldEntity.image,
             template: oldEntity.template,
             color: oldEntity.color,

src/diagram/types/diagramEntity.ts

@@ -50,7 +50,7 @@ export type DiagramEntity = {
     position?: { x: number, y: number, z: number };
     rotation?: { x: number, y: number, z: number };
     template?: string;
-    type: 'Entity'
+    type: 'entity'
     text?: string;
     scale?: { x: number, y: number, z: number };
     parent?: string;

src/menus/connectionPreview.ts

@@ -101,6 +101,7 @@ export class ConnectionPreview {
                 entity: {
                     from: this._fromId,
                     to: mesh.id,
+                    type: 'entity',
                     template: DiagramTemplates.CONNECTION,
                     color: '#000000'
                 }

src/react/pages/configModal.tsx

@@ -1,5 +1,5 @@
-import {Group, Modal, NumberInput, SegmentedControl, Slider, Switch} from "@mantine/core";
+import {Group, Modal, SegmentedControl, Stack, Switch} from "@mantine/core";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 const locationSnaps = [
     {value: ".01", label: '1cm'},
@@ -8,29 +8,101 @@ const locationSnaps = [
     {value: ".5", label: '50cm'},
     {value: "1", label: '1m'},
 ]
+const rotationSnaps = [
+    {value: "22.5", label: '22.5°'},
+    {value: "45", label: '45°'},
+    {value: "90", label: '90°'},
+    {value: "180", label: '180°'},
+    {value: "360", label: '360°'},
+]
+let defaultConfig =
+    {
+        locationSnap: '.1',
+        locationSnapEnabled: true,
+        rotationSnap: '90',
+        rotationSnapEnabled: true,
+        flyModeEnabled: true,
+        snapTurnSnap: '45',
+        snapTurnSnapEnabled: false
+    }
+try {
+    const newConfig = JSON.parse(localStorage.getItem('config'));
+    defaultConfig = {...defaultConfig, ...newConfig};
+    console.log(defaultConfig);
+} catch (e) {
+
+}
 
 export default function ConfigModal({configOpened, closeConfig}) {
-    const [locationSnap, setLocationSnap] = useState(.1);
+    const [locationSnap, setLocationSnap] = useState(defaultConfig.locationSnap);
-    const [locationSnapEnabled, setLocationSnapEnabled] = useState(true);
+    const [locationSnapEnabled, setLocationSnapEnabled] = useState(defaultConfig.locationSnapEnabled);
+    const [snapTurnSnap, setSnapTurnSnap] = useState(defaultConfig.snapTurnSnap);
+    const [snapTurnSnapEnabled, setSnapTurnSnapEnabled] = useState(defaultConfig.snapTurnSnapEnabled);
+    const [rotationSnap, setRotationSnap] = useState(defaultConfig.rotationSnap);
+    const [rotationSnapEnabled, setRotationSnapEnabled] = useState(defaultConfig.rotationSnapEnabled);
+    const [flyModeEnabled, setFlyModeEnabled] = useState(defaultConfig.flyModeEnabled);
+    useEffect(() => {
+        const config = {
+            locationSnap: locationSnap,
+            locationSnapEnabled: locationSnapEnabled,
+            rotationSnap: rotationSnap,
+            rotationSnapEnabled: rotationSnapEnabled,
+            snapTurnSnap: snapTurnSnap,
+            snapTurnSnapEnabled: snapTurnSnapEnabled,
+            flyModeEnabled: flyModeEnabled
+        }
+        localStorage.setItem('config', JSON.stringify(config))
+    }, [locationSnap, locationSnapEnabled, rotationSnap, rotationSnapEnabled, snapTurnSnap, snapTurnSnapEnabled, flyModeEnabled]);
     return (
         <Modal onClose={closeConfig} opened={configOpened}>
             <h1>Configuration</h1>
-            <Group>
+            <Stack>
-                <label>Location Snap</label>
+
-                <Switch checked={locationSnapEnabled} onChange={(e) => {
+
-                    setLocationSnapEnabled(e.currentTarget.checked)
+                <Group key="location">
+                    <label key="label">Location Snap</label>
+                    <Switch w={128} label={locationSnapEnabled ? 'Enabled' : 'Disabled'} key="switch"
+                            checked={locationSnapEnabled} onChange={(e) => {
+                        setLocationSnapEnabled(e.currentTarget.checked)
+                    }}/>
+                    <SegmentedControl disabled={!locationSnapEnabled} key='stepper' data={locationSnaps}
+                                      value={locationSnap}
+                                      color={locationSnapEnabled ? "myColor" : "gray.9"}
+                                      onChange={setLocationSnap}/>
+
+                </Group>
+
+                <Group key="rotation">
+                    <label key="label">Rotation Snap</label>
+                    <Switch w={128} label={rotationSnapEnabled ? 'Enabled' : 'Disabled'} key="switch"
+
+                            checked={rotationSnapEnabled} onChange={(e) => {
+                        setRotationSnapEnabled(e.currentTarget.checked)
+                    }}/>
+                    <SegmentedControl key='stepper'
+                                      data={rotationSnaps}
+                                      color={rotationSnapEnabled ? "myColor" : "gray.9"}
+                                      value={rotationSnap}
+                                      onChange={setRotationSnap}/>
+                </Group>
+                <Switch w={256} label={flyModeEnabled ? 'Fly Mode Enabled' : 'Fly Mode Disabled'} key="switch"
+                        checked={flyModeEnabled} onChange={(e) => {
+                    setFlyModeEnabled(e.currentTarget.checked)
                 }}/>
-                <SegmentedControl key='stepper' data={locationSnaps} color='blue' value={locationSnap.toFixed(2)}
+                <Group key="snapturn">
-                                  onChange={(e) => {
+                    <label key="label">Snap Turn</label>
-                                      setLocationSnap(parseFloat(e));
+                    <Switch w={128} label={snapTurnSnapEnabled ? 'Enabled' : 'Disabled'} key="switch"
-                                  }}/>
-                <NumberInput hideControls allowNegative={false} key='value'
-                             w={64} step={.01} value={locationSnap.toFixed(2)} decimalScale={2} min={.01} max={1}
 
-                />
+                            checked={snapTurnSnapEnabled} onChange={(e) => {
-            </Group>
+                        setSnapTurnSnapEnabled(e.currentTarget.checked)
-
+                    }}/>
-            <Slider defaultValue={.1} label='Object Rotation Snap' max={1} min={.01}/>
+                    <SegmentedControl key='stepper'
+                                      data={rotationSnaps}
+                                      color={snapTurnSnapEnabled ? "myColor" : "gray.9"}
+                                      value={snapTurnSnap}
+                                      onChange={setSnapTurnSnap}/>
+                </Group>
+            </Stack>
         </Modal>
     )