From f2b9e78e459ba815e816e66bde3688e5a9ca56d7 Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Fri, 30 Aug 2024 12:43:08 -0500 Subject: [PATCH] Updated config page. --- src/controllers/functions/snapAll.ts | 19 ++- src/diagram/functions/dropMesh.ts | 4 +- .../database/pouchdbPersistenceManager.ts | 2 +- src/react/marketing/about.tsx | 112 +++++++----------- src/react/pages/configModal.tsx | 4 +- src/util/appConfig.ts | 36 ++++++ src/util/customEnvironment.ts | 9 +- src/util/customPhysics.ts | 11 +- src/util/functions/groundMeshObserver.ts | 12 +- 9 files changed, 106 insertions(+), 103 deletions(-) diff --git a/src/controllers/functions/snapAll.ts b/src/controllers/functions/snapAll.ts index bbd95d2..27e4961 100644 --- a/src/controllers/functions/snapAll.ts +++ b/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); - transform.position = snapGridVal(transform.absolutePosition, config.current.gridSnap); + if (config.rotationSnapEnabled) { + 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(); } diff --git a/src/diagram/functions/dropMesh.ts b/src/diagram/functions/dropMesh.ts index f416cb7..766852f 100644 --- a/src/diagram/functions/dropMesh.ts +++ b/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 = { diff --git a/src/integration/database/pouchdbPersistenceManager.ts b/src/integration/database/pouchdbPersistenceManager.ts index 4d6b5ef..560b852 100644 --- a/src/integration/database/pouchdbPersistenceManager.ts +++ b/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 diff --git a/src/react/marketing/about.tsx b/src/react/marketing/about.tsx index 6a9593b..5548d91 100644 --- a/src/react/marketing/about.tsx +++ b/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 ( - -
-

VisuaLab VR: Unleash the Power of Immersive Diagramming

-
- - -

Diagram complex systems effortlessly with VisuaLab VR – fast, intuitive, and 40x more - effective.

- - - - - What is VisuaLab VR? - - Step into a world where complex ideas come to life in 3D. With VisuaLab VR, you’re not - just - creating diagrams – you’re immersing yourself in them. Our cutting-edge VR technology - transforms the - way you visualize, understand, and communicate complex systems. Whether you’re mapping - out intricate - workflows, designing sophisticated models, or explaining multifaceted processes, - VisuaLab VR makes - it easy. - - - - Why Choose VisuaLab VR? - - Immersive Experience: Traditional 2D diagrams can’t compare to the power of full - immersion. When you - step into VisuaLab VR, you interact with your diagrams in three dimensions, making it 40 - times more - effective at explaining complex systems. See every connection, understand every - relationship, and - explore every detail as if you’re inside the system itself. - - - - Fast and Intuitive - - 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. - - - - Affordable Innovation - - 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 - - +

+ Introducing Das Fad: Your Creative Hub for Digital Architecture and Collaboration +

+

+ Das Fad is a groundbreaking platform designed to enable collaboration between software architects, + security professionals, software development teams, and risk management teams. +

+

+ Combining cutting-edge technology with a user-friendly interface, + Das Fad empowers professionals to push the boundaries of creativity + while ensuring robust security and seamless collaboration. +

+

+ With our intuitive tools, you can quickly build and share designs for new + software platforms and instantly get feedback from different + stakeholders. Whether you are working on a simple layout or an intricate global network, + you can quickly vet, change, and share your system designs with your team. +

+

+ Our solution is secure by design, ensuring that your + intellectual property and sensitive data are protected at all times. + Das Fad employs advanced encryption and secure access protocols + to ensure that your information remains confidential and secure. +

+

+ Dive deep into your projects with our forensic analysis tools. + Identify potential design flaws, assess structural integrity, + and integrate with your incident tracking tools to quickly + assess and mitigate risks. +

+

+ Our model is collaboration first and all aspects are designed to be used + with multiple users while retaining all audit history of changes. - - The Science Behind It - - Studies show that immersive environments increase the ability to - comprehension and retention by up to 40 times compared to traditional 2D methods. By - engaging - 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. - - - - +

+

+ Designed by software professionals for software professionals, + the experience is tailored to your needs. + +

) diff --git a/src/react/pages/configModal.tsx b/src/react/pages/configModal.tsx index e2298ec..176d886 100644 --- a/src/react/pages/configModal.tsx +++ b/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 ( diff --git a/src/util/appConfig.ts b/src/util/appConfig.ts index 53f9f85..4c8a2a2 100644 --- a/src/util/appConfig.ts +++ b/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)); } \ No newline at end of file diff --git a/src/util/customEnvironment.ts b/src/util/customEnvironment.ts index 652aa29..c0ae66f 100644 --- a/src/util/customEnvironment.ts +++ b/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() diff --git a/src/util/customPhysics.ts b/src/util/customPhysics.ts index f8b54ec..c2b9207 100644 --- a/src/util/customPhysics.ts +++ b/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 diff --git a/src/util/functions/groundMeshObserver.ts b/src/util/functions/groundMeshObserver.ts index e70438f..a288c4f 100644 --- a/src/util/functions/groundMeshObserver.ts +++ b/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; - rig.flyMode = currentConfig.flyMode; - rig.turnSnap = currentConfig.turnSnap; - diagramManager.config.onConfigChangedObservable.add((config) => { - rig.flyMode = config.flyMode; - rig.turnSnap = config.turnSnap; - }, -1, false, this); - + const config = getAppConfig(); + rig.flyMode = config.flyModeEnabled; + rig.turnSnap = parseFloat(config.snapTurnSnap); const webController = new WebController(ground.getScene(), rig, diagramManager); } \ No newline at end of file