Updated config page.

src/controllers/functions/snapAll.ts

@@ -1,15 +1,24 @@
 import {TransformNode, Vector3} from "@babylonjs/core";
-import {AppConfig} from "../../util/appConfig";
+import {getAppConfig} from "../../util/appConfig";
 import {snapRotateVal} from "../../util/functions/snapRotateVal";
 import {snapGridVal} from "../../util/functions/snapGridVal";
 
-export function snapAll(node: TransformNode, config: AppConfig, pickPoint: Vector3) {
+export function snapAll(node: TransformNode, pickPoint: Vector3) {
+    const config = getAppConfig();
     const transform = new TransformNode('temp', node.getScene());
     transform.position = pickPoint;
     node.setParent(transform);
-    node.rotation = snapRotateVal(node.absoluteRotationQuaternion.toEulerAngles(), config.current.rotateSnap);
+    if (config.rotationSnapEnabled) {
-    transform.position = snapGridVal(transform.absolutePosition, config.current.gridSnap);
+        node.rotation = snapRotateVal(node.absoluteRotationQuaternion.toEulerAngles(), parseFloat(config.rotationSnap));
+    }
+    if (config.locationSnapEnabled) {
+        transform.position = snapGridVal(transform.absolutePosition, parseFloat(config.locationSnap));
+    }
+
     node.setParent(null);
-    node.position = snapGridVal(node.absolutePosition, config.current.gridSnap);
+    if (config.locationSnapEnabled) {
+        node.position = snapGridVal(node.absolutePosition, parseFloat(config.locationSnap));
+    }
+
     transform.dispose();
 }

src/diagram/functions/dropMesh.ts

@@ -21,7 +21,7 @@ export function dropMesh(mesh: AbstractMesh,
         case MeshTypeEnum.ENTITY:
             if (diagramObject) {
                 diagramObject.baseTransform.setParent(null);
-                snapAll(grabbedObject.baseTransform, diagramManager.config, pickPoint);
+                snapAll(grabbedObject.baseTransform, pickPoint);
                 diagramObject.mesh.computeWorldMatrix(true);
                 const event: DiagramEvent =
                     {
@@ -36,7 +36,7 @@ export function dropMesh(mesh: AbstractMesh,
             break;
         case MeshTypeEnum.TOOL:
             grabbedObject.baseTransform.setParent(null);
-            snapAll(grabbedObject.baseTransform, diagramManager.config, pickPoint);
+            snapAll(grabbedObject.baseTransform, pickPoint);
             diagramObject.mesh.computeWorldMatrix(true);
             const event: DiagramEvent =
                 {

src/integration/database/pouchdbPersistenceManager.ts

@@ -93,7 +93,7 @@ export class PouchdbPersistenceManager {
 
         this.onDBEntityUpdateObservable.add((evt) => {
             this._logger.debug(evt);
-            if (evt.id != 'metadata' && evt.type != 'user') {
+            if (evt.id != 'metadata' && evt.type = 'user') {
                 diagramManager.onDiagramEventObservable.notifyObservers({
                     type: DiagramEventType.ADD,
                     entity: evt

src/react/marketing/about.tsx

@@ -1,82 +1,50 @@
-import {Accordion, Card, Center} from "@mantine/core";
+import {Card} from "@mantine/core";
 import PageTemplate from "../pageTemplate";
 
 export default function About() {
     return (
         <PageTemplate>
             <Card m={64}>
-                <Card.Section>
+                <p>
-                    <Center>
+                    Introducing Das Fad: Your Creative Hub for Digital Architecture and Collaboration
-                        <h1>VisuaLab VR: Unleash the Power of Immersive Diagramming</h1>
+                </p>
-                    </Center>
+                <p>
-                </Card.Section>
+                    Das Fad is a groundbreaking platform designed to enable collaboration between software architects,
-                <Card.Section>
+                    security professionals, software development teams, and risk management teams.
-                    <h3>Diagram complex systems effortlessly with VisuaLab VR – fast, intuitive, and 40x more
+                </p>
-                        effective.</h3>
+                <p>
-                </Card.Section>
+                    Combining cutting-edge technology with a user-friendly interface,
-                <Card.Section>
+                    Das Fad empowers professionals to push the boundaries of creativity
-                    <Accordion defaultValue="1">
+                    while ensuring robust security and seamless collaboration.
-                        <Accordion.Item key="1" value="1">
+                </p>
-                            <Accordion.Control>What is VisuaLab VR?</Accordion.Control>
+                <p>
-                            <Accordion.Panel>
+                    With our intuitive tools, you can quickly build and share designs for new
-                                Step into a world where complex ideas come to life in 3D. With VisuaLab VR, you’re not
+                    software platforms and instantly get feedback from different
-                                just
+                    stakeholders. Whether you are working on a simple layout or an intricate global network,
-                                creating diagrams – you’re immersing yourself in them. Our cutting-edge VR technology
+                    you can quickly vet, change, and share your system designs with your team.
-                                transforms the
+                </p>
-                                way you visualize, understand, and communicate complex systems. Whether you’re mapping
+                <p>
-                                out intricate
+                    Our solution is secure by design, ensuring that your
-                                workflows, designing sophisticated models, or explaining multifaceted processes,
+                    intellectual property and sensitive data are protected at all times.
-                                VisuaLab VR makes
+                    Das Fad employs advanced encryption and secure access protocols
-                                it easy.
+                    to ensure that your information remains confidential and secure.
-                            </Accordion.Panel>
+                </p>
-                        </Accordion.Item>
+                <p>
-                        <Accordion.Item key="2" value="2">
+                    Dive deep into your projects with our forensic analysis tools.
-                            <Accordion.Control>Why Choose VisuaLab VR?</Accordion.Control>
+                    Identify potential design flaws, assess structural integrity,
-                            <Accordion.Panel>
+                    and integrate with your incident tracking tools to quickly
-                                Immersive Experience: Traditional 2D diagrams can’t compare to the power of full
+                    assess and mitigate risks.
-                                immersion. When you
+                </p>
-                                step into VisuaLab VR, you interact with your diagrams in three dimensions, making it 40
+                <p>
-                                times more
+                    Our model is collaboration first and all aspects are designed to be used
-                                effective at explaining complex systems. See every connection, understand every
+                    with multiple users while retaining all audit history of changes.
-                                relationship, and
-                                explore every detail as if you’re inside the system itself.
-                            </Accordion.Panel>
-                        </Accordion.Item>
-                        <Accordion.Item key="3" value="3">
-                            <Accordion.Control>Fast and Intuitive</Accordion.Control>
-                            <Accordion.Panel>
-                                No steep learning curve here. VisuaLab VR is designed for speed and simplicity.
-                                Drag, drop, and connect elements with ease, all in a visually rich environment. Create
-                                stunning
-                                diagrams in minutes, not hours.
-                            </Accordion.Panel>
-                        </Accordion.Item>
-                        <Accordion.Item key="4" value="4">
-                            <Accordion.Control>Affordable Innovation</Accordion.Control>
-                            <Accordion.Panel>
-                                High-quality VR doesn’t have to break the bank. VisuaLab VR offers premium
-                                features at a fraction of the cost, making it accessible for everyone from solo creators
-                                to large
-                            </Accordion.Panel>
-                        </Accordion.Item>
 
-                        <Accordion.Item key="5" value="5">
+                </p>
-                            <Accordion.Control>The Science Behind It</Accordion.Control>
+                <p>
-                            <Accordion.Panel>
+                    Designed by software professionals for software professionals,
-                                Studies show that immersive environments increase the ability to
+                    the experience is tailored to your needs.
-                                comprehension and retention by up to 40 times compared to traditional 2D methods. By
+
-                                engaging
+                </p>
-                                multiple senses and providing a spatial understanding, VisuaLab VR allows you to grasp
-                                complex
-                                systems faster and with greater clarity. You’re not just looking at a diagram; you’re
-                                experiencing
-                                it. This deep engagement leads to quicker insights, more efficient problem-solving, and
-                                better
-                                decision-making.
-                            </Accordion.Panel>
-                        </Accordion.Item>
-                    </Accordion>
-                </Card.Section>
             </Card>
         </PageTemplate>
     )

src/react/pages/configModal.tsx

@@ -1,5 +1,6 @@
 import {Group, Modal, SegmentedControl, Stack, Switch} from "@mantine/core";
 import {useEffect, useState} from "react";
+import {setAppConfig} from "../../util/appConfig";
 
 const locationSnaps = [
     {value: ".01", label: '1cm'},
@@ -51,7 +52,8 @@ export default function ConfigModal({configOpened, closeConfig}) {
             snapTurnSnapEnabled: snapTurnSnapEnabled,
             flyModeEnabled: flyModeEnabled
         }
-        localStorage.setItem('config', JSON.stringify(config))
+        setAppConfig(config);
+
     }, [locationSnap, locationSnapEnabled, rotationSnap, rotationSnapEnabled, snapTurnSnap, snapTurnSnapEnabled, flyModeEnabled]);
     return (
         <Modal onClose={closeConfig} opened={configOpened}>

src/util/appConfig.ts

@@ -78,4 +78,40 @@ export class AppConfig {
         localStorage.setItem('appConfig', JSON.stringify(this._currentConfig));
         this.onConfigChangedObservable.notifyObservers(this._currentConfig, -1);
     }
+}
+
+let defaultConfig: ConfigType =
+    {
+        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};
+
+} catch (e) {
+
+}
+
+export type ConfigType = {
+    locationSnap: string,
+    locationSnapEnabled: boolean,
+    rotationSnap: string,
+    rotationSnapEnabled: boolean,
+    flyModeEnabled: boolean,
+    snapTurnSnap: string,
+    snapTurnSnapEnabled: boolean
+}
+
+export function getAppConfig(): ConfigType {
+    return defaultConfig;
+}
+
+export function setAppConfig(config: ConfigType) {
+    localStorage.setItem('config', JSON.stringify(config));
 }

src/util/customEnvironment.ts

@@ -29,19 +29,12 @@ export class CustomEnvironment {
     constructor(name: string = "default", config: AppConfig) {
         this.scene = DefaultScene.Scene;
         this.name = name;
-        const loading = document.querySelector('#loadingGrid');
+
-        if (loading) {
-            loading.remove();
-        }
         this.scene.ambientColor = new Color3(.1, .1, .1);
         const light = new HemisphericLight("light1", new Vector3(.5, 1, 1).normalize(), this.scene);
         light.groundColor = new Color3(0, 0, 0);
         light.diffuse = new Color3(1, 1, 1);
         light.intensity = .8;
-        //light.setDirectionToTarget(new Vector3(.4, .5, .5).normalize());
-        //light.intensity = .7;
-        //const light = new PointLight("light1", new Vector3(0, 10, 10), this.scene);
-        //const light2 = new PointLight("light1", new Vector3(0, 10, -10), this.scene);
         const physics = new CustomPhysics(this.scene, config);
         physics
             .initializeAsync()

src/util/customPhysics.ts

@@ -1,17 +1,16 @@
 import {HavokPlugin, Quaternion, Scene, Vector3} from "@babylonjs/core";
 import HavokPhysics from "@babylonjs/havok";
-import {AppConfig} from "./appConfig";
 import {snapGridVal} from "./functions/snapGridVal";
 import {snapRotateVal} from "./functions/snapRotateVal";
 import {isDiagramEntity} from "../diagram/functions/isDiagramEntity";
+import {getAppConfig} from "./appConfig";
 
 export class CustomPhysics {
     private readonly scene: Scene;
-    private config: AppConfig;
 
-    constructor(scene: Scene, config: AppConfig) {
+
+    constructor(scene: Scene) {
         this.scene = scene;
-        this.config = config;
     }
 
     public async initializeAsync() {
@@ -32,12 +31,12 @@ export class CustomPhysics {
                             body.disablePreStep = false;
                             const pos: Vector3 = body.getObjectCenterWorld();
                             const val: Vector3 = snapGridVal(pos,
-                                this.config.current.gridSnap);
+                                parseFloat(getAppConfig().locationSnap));
                             body.transformNode.position.set(val.x, val.y, val.z);
                             const rot: Quaternion =
                                 Quaternion.FromEulerVector(
                                     snapRotateVal(body.transformNode.rotationQuaternion.toEulerAngles(),
-                                        this.config.current.rotateSnap))
+                                        parseFloat(getAppConfig().rotationSnap)))
 
                             body.transformNode.rotationQuaternion.set(
                                 rot.x, rot.y, rot.z, rot.w

src/util/functions/groundMeshObserver.ts

@@ -4,6 +4,7 @@ import {WebController} from "../../controllers/webController";
 import {Rigplatform} from "../../controllers/rigplatform";
 import {DiagramManager} from "../../diagram/diagramManager";
 import {Spinner} from "../../objects/spinner";
+import {getAppConfig} from "../appConfig";
 
 
 export async function groundMeshObserver(ground: AbstractMesh,
@@ -70,14 +71,9 @@ export async function groundMeshObserver(ground: AbstractMesh,
     });
 
     const rig = new Rigplatform(xr, diagramManager);
-    const currentConfig = diagramManager.config.current;
+    const config = getAppConfig();
-    rig.flyMode = currentConfig.flyMode;
+    rig.flyMode = config.flyModeEnabled;
-    rig.turnSnap = currentConfig.turnSnap;
+    rig.turnSnap = parseFloat(config.snapTurnSnap);
-    diagramManager.config.onConfigChangedObservable.add((config) => {
-        rig.flyMode = config.flyMode;
-        rig.turnSnap = config.turnSnap;
-    }, -1, false, this);
-
     const webController = new WebController(ground.getScene(), rig, diagramManager);
 
 }