Merge pull request #922 from vorth/zometool-fixes

Fixing zometool-instructions defects
vZome · Sep 26, 2024 · eac3358 · eac3358
2 parents 1dea7ca + 8780f99
commit eac3358
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 37 deletions.
diff --git a/online/serve/app/test/cases/zometool-model/index.html b/online/serve/app/test/cases/zometool-model/index.html
@@ -27,7 +27,9 @@ <h1>Zometool Model Demo</h1>
       <div class="zometool-model-difficulty" data-difficulty="medium">
       </div>
 
-      <zometool-instructions src="https://raw.githubusercontent.com/vorth/vzome-sharing/main/2024/09/01/21-01-21-623Z-standard-colors-and-lengths/standard-colors-and-lengths.vZome">
+      <zometool-instructions src="https://raw.githubusercontent.com/vorth/vzome-sharing/main/2024/09/25/23-37-59-596Z-standard-colors-and-lengths-instructions/standard-colors-and-lengths-instructions.vZome">
+      <!-- <zometool-instructions src="https://raw.githubusercontent.com/vorth/vzome-sharing/main/2024/09/01/21-01-21-623Z-standard-colors-and-lengths/standard-colors-and-lengths.vZome"> -->
+      <!-- <zometool-instructions src="https://raw.githubusercontent.com/vorth/vzome-sharing/main/2024/09/24/02-42-34-519Z-hyperdo-steps-correct-scale/hyperdo-steps-correct-scale.vZome"> -->
       </zometool-instructions>      
 
       <zometool-parts-required></zometool-parts-required>

diff --git a/online/src/wc/zometool/index.jsx b/online/src/wc/zometool/index.jsx
@@ -29,13 +29,15 @@ const StepControls = props =>
   const atStart = () => index() === 1;  // NOTE: scene 0 is the default scene, which we ignore
   const atEnd = () => index() === maxIndex();
 
-  createEffect( () => setMaxIndex( scenes?.length - 1 ) );
+  createEffect( () => {
+    setMaxIndex( scenes?.length - 1 ) 
+  });
 
   createEffect( () => {
     if ( props.show ) {
       requestScene( '#' + index(), { camera: false } );
     } else {
-      requestScene( '#' + maxIndex(), { camera: true } );
+      requestScene( '#' + maxIndex(), { camera: true, bom: true } );
     }
   } );
 
@@ -93,33 +95,35 @@ const StepControls = props =>
 
 const ZometoolInstructions = props =>
 {
+  const { scenes } = useViewer();
+  const [ hasScenes, setHasScenes ] = createSignal( false );
   const [ steps, setSteps ] = createSignal( false );
   const toggleSteps = () => setSteps( v => !v );
 
+  createEffect( () => {
+    setHasScenes( scenes?.length > 1 ) 
+  });
+
   return (
-    <CameraProvider>
-      <WorkerProvider>
-        <ViewerProvider config={{ url: props.url, preview: true, debug: false, showScenes: false, labels: true, source: true }}>
-          <div class='zometool-instructions'>
-
-            <Switch class="switch" checked={steps()} onChange={toggleSteps}>
-              <Switch.Label class="step_switch__label">Show Build Steps</Switch.Label>
-              <Switch.Input class="switch__input" />
-              <Switch.Control class="switch__control">
-                <Switch.Thumb class="switch__thumb" />
-              </Switch.Control>
-            </Switch>
-
-            <DesignViewer config={ { ...props.config, download: !steps(), allowFullViewport: true } }
-                componentRoot={props.componentRoot}
-                height="100%" width="100%" >
-            </DesignViewer>
-
-            <StepControls show={steps()} dispatch={props.dispatch} />
-          </div>
-        </ViewerProvider>
-      </WorkerProvider>
-    </CameraProvider>
+    <div class='zometool-instructions'>
+
+      <Show when={hasScenes()} fallback={<div class="step-buttons"></div>}>
+        <Switch class="switch" checked={steps()} onChange={toggleSteps} >
+          <Switch.Label class="step_switch__label">Show Build Steps</Switch.Label>
+          <Switch.Input class="switch__input" />
+          <Switch.Control class="switch__control">
+            <Switch.Thumb class="switch__thumb" />
+          </Switch.Control>
+        </Switch>
+      </Show>
+
+      <DesignViewer config={ { ...props.config, download: !steps(), allowFullViewport: true } }
+          componentRoot={props.componentRoot}
+          height="100%" width="100%" >
+      </DesignViewer>
+
+      <StepControls show={steps()} dispatch={props.dispatch} />
+    </div>
   );
 }
 
@@ -128,8 +132,14 @@ const renderComponent = ( url, container, dispatch ) =>
     const bindComponent = () =>
     {
       return (
-        <ZometoolInstructions url={url} dispatch={dispatch} >
-        </ZometoolInstructions>
+        <CameraProvider>
+          <WorkerProvider>
+            <ViewerProvider config={{ url, preview: true, debug: false, showScenes: false, labels: true, source: true }}>
+              <ZometoolInstructions dispatch={dispatch} >
+              </ZometoolInstructions>
+            </ViewerProvider>
+          </WorkerProvider>
+        </CameraProvider>
       );
     }
 

diff --git a/online/src/worker/vzome-worker-static.js b/online/src/worker/vzome-worker-static.js
@@ -55,6 +55,13 @@ const filterScene = ( report, load ) => event =>
     event.payload.scene = { shapes, embedding, polygons };
     if ( load.camera )   event.payload.scene.camera   = camera;
     if ( load.lighting ) event.payload.scene.lighting = lighting;
+
+    if ( load.bom ) {
+      partsPromise .then( ({ colors }) => {
+        const bom = assemblePartsList( shapes, colors );
+        report( { type: 'BOM_CHANGED', payload: bom } );
+      });
+    }
   }
   report( event );
 }
@@ -119,14 +126,7 @@ const partsPromise = fetch( parts_catalog_url ) .then( response => response.text
 
 const clientEvents = report =>
 {
-  const sceneChanged = ( scene, edit='--START--' ) =>
-  {
-    report( { type: 'SCENE_RENDERED', payload: { scene, edit } } );
-    partsPromise .then( ({ colors }) => {
-      const bom = assemblePartsList( scene.shapes, colors );
-      report( { type: 'BOM_CHANGED', payload: bom } );
-    });
-  }
+  const sceneChanged = ( scene, edit='--START--' ) => report( { type: 'SCENE_RENDERED', payload: { scene, edit } } );
 
   const shapeDefined = shape => report( { type: 'SHAPE_DEFINED', payload: shape } );
 
@@ -327,7 +327,7 @@ const fileImporter = ( report, payload ) =>
     } )
 }
 
-const defaultLoad = { camera: true, lighting: true, design: true, };
+const defaultLoad = { camera: true, lighting: true, design: true, bom: false, };
 
 const urlLoader = async ( report, payload ) =>
 {