Merge pull request #130 from ghackenberg/engine

Incremental LDraw model loading
ghackenberg · Jul 11, 2024 · 9244184 · 9244184
2 parents 53bfae4 + d3fdb0e
commit 9244184
Show file tree

Hide file tree

Showing 29 changed files with 376 additions and 2,992 deletions.
diff --git a/package.json b/package.json
@@ -34,9 +34,7 @@
         "packages/database",
         "packages/broker",
         "packages/backend",
-        "packages/engine",
         "packages/frontend",
-        "packages/worker",
         "packages/gateway"
     ],
     "scripts": {

diff --git a/packages/engine/.eslintrc.json b/packages/engine/.eslintrc.json
diff --git a/packages/engine/asconfig.json b/packages/engine/asconfig.json
diff --git a/packages/engine/package.json b/packages/engine/package.json
diff --git a/packages/engine/src/glue.ts b/packages/engine/src/glue.ts
diff --git a/packages/engine/src/main.ts b/packages/engine/src/main.ts
diff --git a/packages/engine/src/shader.ts b/packages/engine/src/shader.ts
diff --git a/packages/engine/src/util.ts b/packages/engine/src/util.ts
diff --git a/packages/engine/tsconfig.json b/packages/engine/tsconfig.json
diff --git a/packages/frontend/src/scripts/components/views/ProductVersionSetting.tsx b/packages/frontend/src/scripts/components/views/ProductVersionSetting.tsx
@@ -16,14 +16,15 @@ import { useMembers, useVersions } from '../../hooks/list'
 import { render } from '../../functions/render'
 import { useAsyncHistory } from '../../hooks/history'
 import { parseGLTFModel } from '../../loaders/gltf'
-import { parseLDrawModel } from '../../loaders/ldraw'
+import { parseLDrawModel, pauseLoadLDrawPath } from '../../loaders/ldraw'
 import { ButtonInput } from '../inputs/ButtonInput'
 import { FileInput } from '../inputs/FileInput'
 import { GenericInput } from '../inputs/GenericInput'
 import { NumberInput } from '../inputs/NumberInput'
 import { TextareaInput } from '../inputs/TextareaInput'
 import { LegalFooter } from '../snippets/LegalFooter'
 import { ProductFooter, ProductFooterItem } from '../snippets/ProductFooter'
+import { ModelGraph } from '../widgets/ModelGraph'
 import { clearModel } from '../widgets/FileView3D'
 import { ModelView3D } from '../widgets/ModelView3D'
 import { Column, Table } from '../widgets/Table'
@@ -34,6 +35,7 @@ import EmptyIcon from '/src/images/empty.png'
 import LoadIcon from '/src/images/load.png'
 import LeftIcon from '/src/images/setting.png'
 import RightIcon from '/src/images/part.png'
+
 const PREVIEW_WIDTH = 1000
 const PREVIEW_HEIGHT = 1000
 
@@ -78,6 +80,9 @@ export const ProductVersionSettingView = () => {
     const [text, setText] = useState<string>(null)
     const [model, setModel] = useState<GLTF>(null)
     const [group, setGroup] = useState<Group>(null)
+    const [update, setUpdate] = useState<number>()
+    const [loaded, setLoaded] = useState<number>()
+    const [total, setTotal] = useState<number>()
     const [blob, setBlob] = useState<Blob>(null) 
     const [dataUrl, setDataUrl] = useState<string>(null) 
     const [active, setActive] = useState<string>('left')
@@ -116,22 +121,31 @@ export const ProductVersionSettingView = () => {
 
     useEffect(() => {
         let exec = true
-        text && parseLDrawModel(text).then(group => exec && setGroup(group))
-        return () => { exec = false }
+        function update(_part: string, loaded: number, total: number) {
+            setUpdate(Date.now())
+            setLoaded(loaded)
+            setTotal(total)
+        }
+        const path = `${Math.random()}`
+        text && parseLDrawModel(path, text, update).then(group => exec && setGroup(group))
+        return () => {
+            exec = false
+            pauseLoadLDrawPath(path)
+        }
     }, [text])
 
     useEffect(() => { model && setGroup(model.scene) }, [model])
 
     useEffect(() => {
         let exec = true
-        group && render(group.clone(true), PREVIEW_WIDTH, PREVIEW_HEIGHT).then(result => {
+        group && loaded == total && render(group.clone(true), PREVIEW_WIDTH, PREVIEW_HEIGHT).then(result => {
             if (exec) {
                 setBlob(result.blob)
                 setDataUrl(result.dataUrl)
             }
         })
         return () => { exec = false }
-    }, [group])
+    }, [group, loaded, total])
 
     // FUNCTIONS
 
@@ -247,26 +261,64 @@ export const ProductVersionSettingView = () => {
                             {version ? (
                                 file ? (
                                     <div className="widget version_view_3d">
-                                        {!group ? (
-                                            <img src={LoadIcon} className='icon small position center animation spin'/>
-                                        ) : (
-                                            <ModelView3D model={group} highlighted={[]} marked={[]} selected={[]}/>
-                                        )}
+                                        <div className="widget file_view_3d">
+                                            {!group ? (
+                                                <img src={LoadIcon} className='icon small position center animation spin'/>
+                                            ) : (
+                                                <>
+                                                    {loaded != total ? (
+                                                        <div className='widget model_graph'>
+                                                            Loading ...
+                                                        </div>
+                                                    ) : (
+                                                        <ModelGraph model={group}/>
+                                                    )}
+
+                                                    <ModelView3D model={group} update={update}/>
+
+                                                    {loaded != total && (
+                                                        <div className='progress_bar'>
+                                                            <div className='indicator' style={{width: `${Math.floor(loaded / total * 100)}%`}}></div>
+                                                            <div className='text'>{Math.floor(loaded / total * 100)}%</div>
+                                                        </div>
+                                                    )}
+                                                </>
+                                            )}
+                                        </div>
                                     </div>
                                 ) : (
                                     <VersionView3D version={version} mouse={true}/>
                                 )
                             ) : (
                                 <div className="widget version_view_3d">
-                                    {!file ? (
-                                        <img src={EmptyIcon} className='icon medium position center'/>
-                                    ) : (
-                                        !group ? (
-                                            <img src={LoadIcon} className='icon small position center animation spin'/>
+                                    <div className="widget file_view_3d">
+                                        {!file ? (
+                                            <img src={EmptyIcon} className='icon medium position center'/>
                                         ) : (
-                                            <ModelView3D model={group} highlighted={[]} marked={[]} selected={[]}/>
-                                        )
-                                    )}
+                                            !group ? (
+                                                <img src={LoadIcon} className='icon small position center animation spin'/>
+                                            ) : (
+                                                <>
+                                                    {loaded != total ? (
+                                                        <div className='widget model_graph'>
+                                                            Loading ...
+                                                        </div>
+                                                    ) : (
+                                                        <ModelGraph model={group}/>
+                                                    )}
+
+                                                    <ModelView3D model={group} update={update}/>
+
+                                                    {loaded != total && (
+                                                        <div className='progress_bar'>
+                                                            <div className='indicator' style={{width: `${Math.floor(loaded / total * 100)}%`}}></div>
+                                                            <div className='text'>{Math.floor(loaded / total * 100)}%</div>
+                                                        </div>
+                                                    )}
+                                                </>
+                                            )
+                                        )}
+                                    </div>
                                 </div>
                             )}
                         </div>