mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated config page.

Browse Source
This commit is contained in:
Michael Mainguy 2024-08-29 15:18:14 -05:00
parent e69d008bfa
commit 4e6c3a63d0
5 changed files with 95 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/diagram/diagramManager.ts
View File

@ -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();

1
src/diagram/diagramObject.ts
View File

@ -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,

2
src/diagram/types/diagramEntity.ts
View File

@ -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;

1
src/menus/connectionPreview.ts
View File

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

102
src/react/pages/configModal.tsx
View File

@ -1,5 +1,5 @@
import {Group, Modal, NumberInput, SegmentedControl, Slider, Switch} from "@mantine/core";
import {useState} from "react";
import {Group, Modal, SegmentedControl, Stack, Switch} from "@mantine/core";
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 [locationSnapEnabled, setLocationSnapEnabled] = useState(true);
const [locationSnap, setLocationSnap] = useState(defaultConfig.locationSnap);
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>
<label>Location Snap</label>
<Switch checked={locationSnapEnabled} onChange={(e) => {
<Stack>
<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 key='stepper' data={locationSnaps} color='blue' value={locationSnap.toFixed(2)}
onChange={(e) => {
setLocationSnap(parseFloat(e));
}}/>
<NumberInput hideControls allowNegative={false} key='value'
w={64} step={.01} value={locationSnap.toFixed(2)} decimalScale={2} min={.01} max={1}
<SegmentedControl disabled={!locationSnapEnabled} key='stepper' data={locationSnaps}
value={locationSnap}
color={locationSnapEnabled ? "myColor" : "gray.9"}
onChange={setLocationSnap}/>
/>
</Group>
<Slider defaultValue={.1} label='Object Rotation Snap' max={1} min={.01}/>
<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)
}}/>
<Group key="snapturn">
<label key="label">Snap Turn</label>
<Switch w={128} label={snapTurnSnapEnabled ? 'Enabled' : 'Disabled'} key="switch"
checked={snapTurnSnapEnabled} onChange={(e) => {
setSnapTurnSnapEnabled(e.currentTarget.checked)
}}/>
<SegmentedControl key='stepper'
data={rotationSnaps}
color={snapTurnSnapEnabled ? "myColor" : "gray.9"}
value={snapTurnSnap}
onChange={setSnapTurnSnap}/>
</Group>
</Stack>
</Modal>
)