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

Disabled service worker, enhanced management console.

Browse Source
This commit is contained in:
Michael Mainguy 2024-08-28 15:24:34 -05:00
parent 2397ddcd4c
commit 4f39030ed4
15 changed files with 344 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
LICENSE.txt Normal file
View File

@ -0,0 +1,30 @@
Permissions Conditions Limitations
Commercial use
Distribution
Modification
Private use
License and copyright notice
Liability
Warranty
MIT License
Copyright (c) [2024] [Michael Mainguy]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

7
index.html
View File

@ -24,7 +24,10 @@
<body> <body>
<script> <script>
if (typeof navigator.serviceWorker !== 'undefined') {
/* if (typeof navigator.serviceWorker !== 'undefined') {
if (localStorage.getItem('serviceWorkerVersion') !== '11') { if (localStorage.getItem('serviceWorkerVersion') !== '11') {
caches.keys().then(cacheNames => { caches.keys().then(cacheNames => {
cacheNames.forEach(cacheName => { cacheNames.forEach(cacheName => {
@ -35,6 +38,8 @@
} }
navigator.serviceWorker.register('/sw.js', {updateViaCache: 'none'}); navigator.serviceWorker.register('/sw.js', {updateViaCache: 'none'});
} }
*/
</script> </script>
<div class="webApp" id="webApp"> <div class="webApp" id="webApp">

97
package-lock.json generated
View File

@ -45,6 +45,7 @@
"rfc4648": "^1.5.3", "rfc4648": "^1.5.3",
"round": "^2.0.1", "round": "^2.0.1",
"uint8-to-b64": "^1.0.2", "uint8-to-b64": "^1.0.2",
"use-pouchdb": "^2.0.2",
"uuid": "^9.0.1", "uuid": "^9.0.1",
"websocket": "^1.0.34", "websocket": "^1.0.34",
"websocket-ts": "^2.1.5" "websocket-ts": "^2.1.5"
@ -1297,6 +1298,14 @@
"react": ">= 16" "react": ">= 16"
} }
}, },
"node_modules/@types/debug": {
"version": "4.1.12",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
"integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
"dependencies": {
"@types/ms": "*"
}
},
"node_modules/@types/dom-to-image": { "node_modules/@types/dom-to-image": {
"version": "2.6.7", "version": "2.6.7",
"resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz", "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz",
@ -1314,6 +1323,11 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true "dev": true
}, },
"node_modules/@types/ms": {
"version": "0.7.34",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
"integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.19.46", "version": "18.19.46",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.46.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.46.tgz",
@ -1327,6 +1341,31 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
}, },
"node_modules/@types/pouchdb-core": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/pouchdb-core/-/pouchdb-core-7.0.15.tgz",
"integrity": "sha512-gq1Qbqn9nCaAKRRv6fRHZ4/ER+QYEwSXBZlDQcxwdbPrtZO8EhIn2Bct0AlguaSEdFcABfbaxxyQwFINkNQ9dQ==",
"dependencies": {
"@types/debug": "*",
"@types/pouchdb-find": "*"
}
},
"node_modules/@types/pouchdb-find": {
"version": "7.3.3",
"resolved": "https://registry.npmjs.org/@types/pouchdb-find/-/pouchdb-find-7.3.3.tgz",
"integrity": "sha512-U7zXk67s9Ar+9Pwj5kSbuMnn8zif0AOOIPy4KRFeJ/S/Tk+mNS90soj+3OV21H8xyB7WTxjvS1JLablZC6C6ow==",
"dependencies": {
"@types/pouchdb-core": "*"
}
},
"node_modules/@types/pouchdb-mapreduce": {
"version": "6.1.10",
"resolved": "https://registry.npmjs.org/@types/pouchdb-mapreduce/-/pouchdb-mapreduce-6.1.10.tgz",
"integrity": "sha512-AgYVqCnaA5D7cWkWyzZVuk0137N4yZsmIQTD/i3DmuMxYYoFrtWUoQu0tbA52SpTRGdL8ubQ7JFQXzA13fA6IQ==",
"dependencies": {
"@types/pouchdb-core": "*"
}
},
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.12", "version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@ -3180,6 +3219,16 @@
"buffer-from": "1.1.2" "buffer-from": "1.1.2"
} }
}, },
"node_modules/pouchdb-changes-filter": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-changes-filter/-/pouchdb-changes-filter-8.0.1.tgz",
"integrity": "sha512-UKgH6YRA9PnvIGHb0FuDEEqeTewgHugbbBt5vpVo0QmbWKxNiau/JiTC9mY5Hj9l7ghaIUpO0TFG95a6RXWsQA==",
"dependencies": {
"pouchdb-errors": "8.0.1",
"pouchdb-selector-core": "8.0.1",
"pouchdb-utils": "8.0.1"
}
},
"node_modules/pouchdb-collate": { "node_modules/pouchdb-collate": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-8.0.1.tgz", "resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-8.0.1.tgz",
@ -3190,6 +3239,28 @@
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-8.0.1.tgz", "resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-8.0.1.tgz",
"integrity": "sha512-TlkQ2GGHJApJgL0b7bJMQcwX6eMfVenLeoK9mqHfC2fJssui+HWJJ5LYKHOWan11SeB90BQVFbO6rHN6CJQeDg==" "integrity": "sha512-TlkQ2GGHJApJgL0b7bJMQcwX6eMfVenLeoK9mqHfC2fJssui+HWJJ5LYKHOWan11SeB90BQVFbO6rHN6CJQeDg=="
}, },
"node_modules/pouchdb-core": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-core/-/pouchdb-core-8.0.1.tgz",
"integrity": "sha512-Qkcmh3eoMHiKUma5Y/rH0Z7kjxXrr6p54j/WOH+TZ/RlJAchmdVY1TRfqay5CoK+8Ka0m8eibP+wD1DKZKJbDg==",
"dependencies": {
"pouchdb-changes-filter": "8.0.1",
"pouchdb-collections": "8.0.1",
"pouchdb-errors": "8.0.1",
"pouchdb-fetch": "8.0.1",
"pouchdb-merge": "8.0.1",
"pouchdb-utils": "8.0.1",
"uuid": "8.3.2"
}
},
"node_modules/pouchdb-core/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/pouchdb-errors": { "node_modules/pouchdb-errors": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-8.0.1.tgz", "resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-8.0.1.tgz",
@ -3237,6 +3308,14 @@
"spark-md5": "3.0.2" "spark-md5": "3.0.2"
} }
}, },
"node_modules/pouchdb-merge": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-merge/-/pouchdb-merge-8.0.1.tgz",
"integrity": "sha512-79dw6+K7js2+/kt9u4hKOkGCnz+ov0+yft2k21n6M+ylFEQyMKuWHEZRoFWr72o1vxwjhIXhUM1PB2PIdxIh0Q==",
"dependencies": {
"pouchdb-utils": "8.0.1"
}
},
"node_modules/pouchdb-selector-core": { "node_modules/pouchdb-selector-core": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-selector-core/-/pouchdb-selector-core-8.0.1.tgz", "resolved": "https://registry.npmjs.org/pouchdb-selector-core/-/pouchdb-selector-core-8.0.1.tgz",
@ -4115,6 +4194,24 @@
} }
} }
}, },
"node_modules/use-pouchdb": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/use-pouchdb/-/use-pouchdb-2.0.2.tgz",
"integrity": "sha512-V1zfglhosqJCQZ1EXpBXrgcix5IAur0MItceN9DV1bW8xztebEmS1BkJUA9ogr1DgKA/XKwVC8mS2vSWewaUZw==",
"dependencies": {
"@types/pouchdb-core": "^7.0.11",
"@types/pouchdb-find": "^7.3.0",
"@types/pouchdb-mapreduce": "^6.1.6",
"@types/react": "^18.0.14",
"fast-deep-equal": "^3.1.3",
"pouchdb-core": "^8.0.1",
"pouchdb-errors": "^8.0.1",
"pouchdb-utils": "^8.0.1"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/use-sidecar": { "node_modules/use-sidecar": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",

2
package.json
View File

@ -3,6 +3,7 @@
"private": true, "private": true,
"version": "0.0.8-17", "version": "0.0.8-17",
"type": "module", "type": "module",
"license": "MIT",
"engines": { "engines": {
"node": ">=18.0.0" "node": ">=18.0.0"
}, },
@ -45,6 +46,7 @@
"loglevel": "^1.9.1", "loglevel": "^1.9.1",
"meaningful-string": "^1.4.0", "meaningful-string": "^1.4.0",
"peer-lite": "2.0.2", "peer-lite": "2.0.2",
"use-pouchdb": "^2.0.2",
"pouchdb": "^8.0.1", "pouchdb": "^8.0.1",
"pouchdb-find": "^8.0.1", "pouchdb-find": "^8.0.1",
"query-string": "^8.1.0", "query-string": "^8.1.0",

13
public/sw.js
View File

@ -1,5 +1,5 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js'); importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js');
const VERSION = '0.0.8-18'; const VERSION = '0.0.8-19';
const CACHE = "deepdiagram"; const CACHE = "deepdiagram";
const IMAGEDELIVERY_CACHE = "deepdiagram-images"; const IMAGEDELIVERY_CACHE = "deepdiagram-images";
const MAPTILE_CACHE = 'maptiler'; const MAPTILE_CACHE = 'maptiler';
@ -66,32 +66,35 @@ workbox.routing.registerRoute(
}) })
); );
workbox.routing.registerRoute( /*workbox.routing.registerRoute(
new RegExp('/assets/.*'), new RegExp('/assets/.*'),
new workbox.strategies.StaleWhileRevalidate({ new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE cacheName: CACHE
}) })
); );
*/
/*workbox.routing.registerRoute(
workbox.routing.registerRoute(
new RegExp('/db/.*'), new RegExp('/db/.*'),
new workbox.strategies.StaleWhileRevalidate({ new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE cacheName: CACHE
}) })
); );
*/
workbox.routing.registerRoute( workbox.routing.registerRoute(
new RegExp('/.*\\.glb'), new RegExp('/.*\\.glb'),
new workbox.strategies.StaleWhileRevalidate({ new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE cacheName: CACHE
}) })
); );
/*
workbox.routing.registerRoute( workbox.routing.registerRoute(
new RegExp('/.*\\.css'), new RegExp('/.*\\.css'),
new workbox.strategies.StaleWhileRevalidate({ new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE cacheName: CACHE
}) })
); );
*/

3
src/integration/database/pouchdbPersistenceManager.ts
View File

@ -263,12 +263,11 @@ export class PouchdbPersistenceManager {
let sync = false; let sync = false;
let current = getPath(); let current = getPath();
if (current && current != 'localdb') { if (current && current != 'localdb') {
sync = true; //sync = true;
} else { } else {
current = 'localdb'; current = 'localdb';
} }
this.db = new PouchDB(current, {auto_compaction: true}); this.db = new PouchDB(current, {auto_compaction: true});
//await this.db.compact();
if (sync) { if (sync) {
if (await this.setupMetadata(current)) { if (await this.setupMetadata(current)) {
await this.beginSync(current); await this.beginSync(current);

3
src/integration/functions/syncDoc.ts
View File

@ -45,8 +45,11 @@ export async function syncDoc(info: any, onDBRemoveObservable: Observable<Diagra
template: doc.template template: doc.template
}, DiagramEventObserverMask.FROM_DB); }, DiagramEventObserverMask.FROM_DB);
} else { } else {
if (doc.template) {
onDBUpdateObservable.notifyObservers(doc, DiagramEventObserverMask.FROM_DB); onDBUpdateObservable.notifyObservers(doc, DiagramEventObserverMask.FROM_DB);
} }
}
} }
} }
} }

7
src/react/pageHeader.tsx
View File

@ -1,4 +1,4 @@
import {Anchor, AppShell, Button, Group, Image} from "@mantine/core"; import {Anchor, AppShell, Burger, Button, Group, Image} from "@mantine/core";
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
@ -12,7 +12,7 @@ export default function PageHeader() {
<Group justify="space-between"> <Group justify="space-between">
<Image w={64} src="/assets/ddd.svg"/> <Image w={64} src="/assets/ddd.svg"/>
<Group justify="flex-end"> <Group justify="flex-end">
<Button key="signup">Sign up for Free</Button>
<Group visibleFrom="sm"> <Group visibleFrom="sm">
<Anchor component={Link} key="examples" to="/examples" p={5} c="myColor" bg="none" <Anchor component={Link} key="examples" to="/examples" p={5} c="myColor" bg="none"
underline="hover">Examples</Anchor> underline="hover">Examples</Anchor>
@ -25,7 +25,8 @@ export default function PageHeader() {
<Anchor component={Link} key="vrexperience" to="/db/local" p={5} c="myColor" bg="none" <Anchor component={Link} key="vrexperience" to="/db/local" p={5} c="myColor" bg="none"
underline="hover">VR Experience</Anchor> underline="hover">VR Experience</Anchor>
</Group> </Group>
<Burger hiddenFrom="sm"/>
<Button key="signup">Sign up for Free</Button>
<Button>Login</Button> <Button>Login</Button>
</Group> </Group>
</Group> </Group>

5
src/react/pageTemplate.tsx
View File

@ -1,9 +1,11 @@
import {AppShell} from "@mantine/core"; import {AppShell, MantineProvider} from "@mantine/core";
import PageHeader from "./pageHeader"; import PageHeader from "./pageHeader";
import React from "react"; import React from "react";
import {theme} from "./theme";
export default function PageTemplate(props: { children: React.ReactNode }) { export default function PageTemplate(props: { children: React.ReactNode }) {
return ( return (
<MantineProvider defaultColorScheme="dark" theme={theme}>
<AppShell <AppShell
header={{height: 64}}> header={{height: 64}}>
<PageHeader/> <PageHeader/>
@ -11,5 +13,6 @@ export default function PageTemplate(props: { children: React.ReactNode }) {
{props.children} {props.children}
</AppShell.Main> </AppShell.Main>
</AppShell> </AppShell>
</MantineProvider>
) )
} }

89
src/react/pages/createDiagramModal.tsx
View File

@ -1,37 +1,96 @@
import {Anchor, Button, Checkbox, Group, Modal, Pill, Stack, Textarea, TextInput} from "@mantine/core"; import {Anchor, Button, Checkbox, Group, Modal, Pill, Stack, Textarea, TextInput} from "@mantine/core";
import {usePouch} from "use-pouchdb";
import {useState} from "react";
import {v4} from "uuid";
export default function CreateDiagramModal({createOpened, setCreateOpened}) { export default function CreateDiagramModal({createOpened, closeCreate}) {
const db = usePouch();
const createDiagram = () => { const [diagram, setDiagram] = useState({
setCreateOpened(false); name: '',
description: '',
private: false,
encrypted: false,
invite: false
});
const createDiagram = async () => {
let doc = null;
try {
doc = await db.get('directory')
} catch (err) {
console.error(err);
}
const id = 'diagram-' + v4();
const newDiagram = {...diagram, _id: id}
if (!doc) {
await db.put({_id: 'directory', diagrams: [newDiagram]});
} else {
if (doc.diagrams) {
doc.diagrams.push(newDiagram);
} else {
doc.diagrams = [newDiagram];
}
console.log(doc);
await db.put(doc);
}
closeCreate();
} }
return ( return (
<Modal opened={createOpened} onClose={() => { <Modal opened={createOpened} onClose={closeCreate}>
setCreateOpened(false)
}}>
<Stack> <Stack>
<TextInput key="name"
label="Name"
<TextInput key="name" label="Name" placeholder="Enter diagram name" required/> placeholder="Enter diagram name"
<Textarea key="description" label="Description" placeholder="Enter diagram description"/> value={diagram.name}
onChange={(e) => {
setDiagram({...diagram, name: e.currentTarget.value})
}}
required/>
<Textarea key="description"
label="Description"
value={diagram.description}
onChange={(e) => {
setDiagram({...diagram, description: e.currentTarget.value})
}}
placeholder="Enter diagram description"/>
<Group> <Group>
<Checkbox w={250} key="private" label="Private" disabled={true}/> <Checkbox w={250}
key="private"
label="Private"
checked={diagram.private}
onChange={(e) => {
setDiagram({...diagram, private: e.currentTarget.checked})
}}
disabled={true}/>
<Pill>Basic</Pill> <Pill>Basic</Pill>
</Group> </Group>
<Group> <Group>
<Checkbox w={250} key="encrypted" label="Encrypted" disabled={true}/> <Checkbox w={250}
key="encrypted"
label="Encrypted"
checked={diagram.encrypted}
onChange={(e) => {
setDiagram({...diagram, encrypted: e.currentTarget.checked})
}}
disabled={true}/>
<Pill>Pro</Pill> <Pill>Pro</Pill>
</Group> </Group>
<Group> <Group>
<Checkbox w={250} key="invite" label="Invite Collaborators" disabled={true}/> <Checkbox w={250}
key="invite"
label="Invite Collaborators"
checked={diagram.invite}
onChange={(e) => {
setDiagram({...diagram, invite: e.currentTarget.checked})
}}
disabled={true}/>
<Pill>Pro</Pill> <Pill>Pro</Pill>
</Group> </Group>
<Group> <Group>
<Button key="create" onClick={createDiagram}>Create</Button> <Button key="create" onClick={createDiagram}>Create</Button>
<Anchor p={5} size="sm" key="cancel" onClick={(e) => { <Anchor p={5} size="sm" key="cancel" onClick={(e) => {
e.preventDefault(); e.preventDefault();
setCreateOpened(false) closeCreate()
}}>Cancel</Anchor> }}>Cancel</Anchor>
</Group> </Group>
</Stack> </Stack>

60
src/react/pages/manageDiagramsModal.tsx
View File

@ -1,36 +1,56 @@
import {Button, Card, Modal, Paper, SimpleGrid, Stack} from "@mantine/core"; import {Button, Card, Container, Group, Modal, Paper, SimpleGrid, Stack} from "@mantine/core";
import React from "react"; import React from "react";
import {useDoc, usePouch} from "use-pouchdb";
import {IconPencilBolt, IconTrash} from "@tabler/icons-react";
export default function ManageDiagramsModal({manageOpened, setManageOpened}) { export default function ManageDiagramsModal({openCreate, manageOpened, closeManage}) {
const diagrams = [ const {doc: diagram, error} = useDoc('directory', {}, {_id: 'directory', diagrams: []});
{name: "Diagram 1", description: "Description 1"}, const [selected, setSelected] = React.useState(null);
{name: "Diagram 1", description: "Description 1"}, const db = usePouch();
{name: "Diagram 1", description: "Description 1"}, if (error) {
{name: "Diagram 1", description: "Description 1"}, console.error('Error getting diagram document');
{name: "Diagram 1", description: "Description 1"}, if (error.status === 404) {
{name: "Diagram 1", description: "Description 1"}, console.log('Creating new diagram document');
] db.put({_id: 'directory', diagrams: []});
}
return <></>;
}
const diagrams = diagram.diagrams || [];
console.log(diagrams);
const cards = diagrams.map((diagram) => { const cards = diagrams.map((diagram) => {
return (<Card><h1>{diagram.name}</h1></Card>) return (
<Card key={diagram._id}>
<Card.Section>
<Container w={512} h={64}>{diagram.name}</Container>
</Card.Section>
<Card.Section>
<Container w={512} h={128}>
{diagram.description}
</Container>
</Card.Section>
<Card.Section>
<Group justify="space-evenly">
<Button leftSection={<IconPencilBolt size={16}/>} size="xs">Select</Button>
<Button bg="red" size="xs"><IconTrash size={16}/></Button>
</Group>
</Card.Section>
</Card>
)
}); });
const buildCreateButton = () => { const buildCreateButton = () => {
if (diagrams.length < 6) { if (diagrams.length < 6) {
return <Button size="lg" disabled={false}>Create</Button> return <Button size="lg" onClick={openCreate} disabled={false}>Create</Button>
} else { } else {
return (<Stack> return (<Stack>
<Button size="lg" disabled={true}>Create</Button> <Button key="create" size="lg" disabled={true}>Create</Button>
<Paper>You've reached the max number of diagrams for this Tier.</Paper> <Paper key="upgrademessage">You've reached the max number of diagrams for this Tier.</Paper>
<Button size="xl">Upgrade To Pro</Button> <Button key="upgradebutton" size="xl">Upgrade To Pro</Button>
</Stack>) </Stack>)
} }
} }
return ( return (
<Modal opened={manageOpened} size="lg" onClose={() => { <Modal opened={manageOpened} size="lg" onClose={closeManage}>
setManageOpened(false)
}}>
<h1>Select a Diagram</h1> <h1>Select a Diagram</h1>
<SimpleGrid cols={3}> <SimpleGrid cols={3}>
{cards} {cards}

68
src/react/pages/vrExperience.tsx
View File

@ -1,24 +1,33 @@
import VrApp from '../../vrApp'; //import VrApp from '../../vrApp';
import {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
import {Affix, Burger, Group, Menu, useMantineTheme} from "@mantine/core"; import {Affix, Burger, Group, Menu} from "@mantine/core";
import VrTemplate from "../vrTemplate"; import VrTemplate from "../vrTemplate";
import {IconStar} from "@tabler/icons-react"; import {IconStar} from "@tabler/icons-react";
import VrMenuItem from "../components/vrMenuItem"; import VrMenuItem from "../components/vrMenuItem";
import CreateDiagramModal from "./createDiagramModal"; import CreateDiagramModal from "./createDiagramModal";
import ManageDiagramsModal from "./manageDiagramsModal"; import ManageDiagramsModal from "./manageDiagramsModal";
import {useNavigate} from "react-router-dom";
import {useDisclosure} from "@mantine/hooks";
export default function VrExperience() { export default function VrExperience() {
const theme = useMantineTheme(); const [createOpened, {open: openCreate, close: closeCreate}] = useDisclosure(false);
const [createDiagram, setCreateDiagram] = useState(false); const [manageOpened, {open: openManage, close: closeManage}] = useDisclosure(false);
const [manageDiagrams, setManageDiagrams] = useState(false);
const [immersiveDisabled, setImmersiveDisabled] = useState(true);
useEffect(() => { useEffect(() => {
const vrApp = new VrApp(document.querySelector('#gameCanvas')); // code to run after render goes here const data = window.localStorage.getItem('createOpened');
}, []); if (data === 'true') {
openCreate();
}
navigator.xr.isSessionSupported('immersive-vr').then((supported) => { navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
setImmersiveDisabled(!supported); setImmersiveDisabled(!supported);
}); });
}, []);
useEffect(() => {
console.log('Create Opened: ', createOpened);
window.localStorage.setItem('createOpened', createOpened ? 'true' : 'false');
}, [createOpened])
const [immersiveDisabled, setImmersiveDisabled] = useState(true);
const navigate = useNavigate();
const availableInFree = () => { const availableInFree = () => {
return null return null
@ -36,14 +45,40 @@ export default function VrExperience() {
const event = new CustomEvent('enterXr', {bubbles: true}); const event = new CustomEvent('enterXr', {bubbles: true});
window.dispatchEvent(event); window.dispatchEvent(event);
} }
const createModal = () => {
if (createOpened) {
return <CreateDiagramModal createOpened={createOpened} closeCreate={closeCreate}/>
} else {
return <></>
}
}
const manageModal = () => {
if (manageOpened) {
return <ManageDiagramsModal openCreate={openCreate}
manageOpened={manageOpened} closeManage={closeManage}/>
} else {
return <></>
}
}
console.log('VrExperience');
return ( return (
<React.StrictMode>
<VrTemplate> <VrTemplate>
{createModal()}
{manageModal()}
<Affix position={{top: 30, left: 60}}> <Affix position={{top: 30, left: 60}}>
<Menu trigger="hover" openDelay={50} closeDelay={400}> <Menu trigger="hover" openDelay={50} closeDelay={400}>
<Menu.Target> <Menu.Target>
<Burger size="xl"/> <Burger size="xl"/>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<VrMenuItem
tip={"Exit modeling environment and go back to main site"}
onClick={() => {
navigate("/")
}}
label="Home"
availableIcon={availableInFree()}/>
<VrMenuItem <VrMenuItem
tip={immersiveDisabled ? "Browser does not support WebXR. Immersive experience best viewed with Meta Quest headset" : "Enter Immersive Mode"} tip={immersiveDisabled ? "Browser does not support WebXR. Immersive experience best viewed with Meta Quest headset" : "Enter Immersive Mode"}
onClick={enterImmersive} onClick={enterImmersive}
@ -66,9 +101,7 @@ export default function VrExperience() {
<VrMenuItem <VrMenuItem
tip="Create a new diagram from scratch" tip="Create a new diagram from scratch"
label="Create" label="Create"
onClick={() => { onClick={openCreate}
setCreateDiagram(!createDiagram)
}}
availableIcon={availableInFree()}/> availableIcon={availableInFree()}/>
<VrMenuItem <VrMenuItem
tip="Create a new diagram from predefined template" tip="Create a new diagram from predefined template"
@ -78,9 +111,7 @@ export default function VrExperience() {
<VrMenuItem <VrMenuItem
tip="Manage Diagrams" tip="Manage Diagrams"
label="Manage" label="Manage"
onClick={() => { onClick={openManage}
setManageDiagrams(!manageDiagrams)
}}
availableIcon={availableInFree()}/> availableIcon={availableInFree()}/>
<Menu.Divider/> <Menu.Divider/>
<VrMenuItem <VrMenuItem
@ -92,8 +123,9 @@ export default function VrExperience() {
</Menu> </Menu>
</Affix> </Affix>
<canvas id="gameCanvas" style={{width: '100%', height: '100vh'}}/> <canvas id="gameCanvas" style={{width: '100%', height: '100vh'}}/>
<CreateDiagramModal createOpened={createDiagram} setCreateOpened={setCreateDiagram}/>
<ManageDiagramsModal manageOpened={manageDiagrams} setManageOpened={setManageDiagrams}/>
</VrTemplate> </VrTemplate>
</React.StrictMode>
) )
} }

2
src/react/theme.ts
View File

@ -18,7 +18,7 @@ export const theme = createTheme({
}, },
breakpoints: { breakpoints: {
xs: '30em', xs: '30em',
sm: '45em', sm: '54em',
md: '64em', md: '64em',
lg: '74em', lg: '74em',
xl: '90em', xl: '90em',

11
src/react/vrTemplate.tsx
View File

@ -1,11 +1,20 @@
import {Container} from "@mantine/core"; import {Container, MantineProvider} from "@mantine/core";
import React from "react"; import React from "react";
import {theme} from "./theme";
import {Provider} from "use-pouchdb";
import PouchDB from 'pouchdb';
const db = new PouchDB('mydb');
export default function VrTemplate(props: { children: React.ReactNode }) { export default function VrTemplate(props: { children: React.ReactNode }) {
return ( return (
<Provider pouchdb={db}>
<MantineProvider defaultColorScheme="dark" theme={theme}>
<Container fluid={true}> <Container fluid={true}>
{props.children} {props.children}
</Container> </Container>
</MantineProvider>
</Provider>
) )
} }

5
src/react/webApp.tsx
View File

@ -3,8 +3,6 @@ import '@mantine/core/styles.css';
import React from "react"; import React from "react";
import {RouterProvider} from "react-router-dom"; import {RouterProvider} from "react-router-dom";
import {webRouter} from "./webRouter"; import {webRouter} from "./webRouter";
import {theme} from "./theme";
import {MantineProvider} from "@mantine/core";
export default function WebApp() { export default function WebApp() {
document.addEventListener('promptpassword', () => { document.addEventListener('promptpassword', () => {
@ -14,8 +12,7 @@ export default function WebApp() {
} }
}); });
return (<MantineProvider defaultColorScheme="dark" theme={theme}> return (
<RouterProvider router={webRouter}/> <RouterProvider router={webRouter}/>
</MantineProvider>
) )
} }