Add axes

axes.scad

@@ -0,0 +1,46 @@
+module arrow(length=30, shaft_radius=1, head_radius=2, head_length=5) {
+    cylinder(h=length-head_length, r=shaft_radius, center=false);
+
+    translate([0, 0, length-head_length])
+        cylinder(h=head_length, r1=head_radius, r2=0, center=false);
+}
+
+color("red")
+    rotate([0, 90, 0])
+        arrow();
+
+color("green")
+    rotate([-90, 0, 0])
+        arrow();
+
+color("blue")
+    rotate([0, 0, 90])
+        arrow();
+
+module letter(text)
+    linear_extrude(1) text(text, halign="center", valign="center");
+
+letter_dist = 38;
+union() {
+    color("red")
+        translate([letter_dist, 0, 0])
+            rotate([45, 0, 45])
+                letter("X");
+    color("green")
+        rotate([0, 0, 90])
+            translate([letter_dist, 0, 0])
+                rotate([45, 0, -45])
+                    letter("Y");
+    color("blue")
+        rotate([0, -90, 0])
+            translate([letter_dist, 0, 0])
+                rotate([90+45, 0, 0])
+                    rotate([0, 0, -90])
+                        letter("Z");
+}
+
+color("grey")
+    cube(10, center=true);
+
+color([0, 0, 0, $preview ? 0.05 : 0])
+    sphere(r=43);

package.json

@@ -22,8 +22,7 @@
     "primeicons": "^6.0.1",
     "primereact": "9.3.x",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-stl-viewer": "^2.2.5"
+    "react-dom": "^18.2.0"
   },
   "scripts": {
     "test:e2e": "jest",
@@ -70,7 +69,7 @@
     "rollup-plugin-css": "^1.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-watch": "^3.2.2",
     "serve": "^14.2.0",
     "style-loader": "^3.3.3",

src/components/Footer.tsx

@@ -10,6 +10,7 @@ import { Menu } from 'primereact/menu';
 import { Toast } from 'primereact/toast';
 import HelpMenu from './HelpMenu';
 import ExportButton from './ExportButton';
+import SettingsMenu from './SettingsMenu';
 
 
 export default function Footer({style}: {style?: CSSProperties}) {
@@ -76,6 +77,8 @@ export default function Footer({style}: {style?: CSSProperties}) {
 
       <div style={{flex: 1}}></div>
 
+      <SettingsMenu />
+
       <HelpMenu style={{
           position: 'absolute',
           right: 0,

src/components/SettingsMenu.tsx

@@ -30,16 +30,10 @@ export default function SettingsMenu({className, style}: {className?: string, st
         },  
         {
           label: state.view.showAxes ? 'Hide axes' : 'Show axes',
-          icon: 'pi pi-box',
+          icon: 'pi pi-asterisk',
           // disabled: true,
           command: () => model.mutate(s => s.view.showAxes = !s.view.showAxes)
         },
-        {
-          label: state.view.showShadows ? 'Hide shadows' : 'Add shadows',
-          icon: 'pi pi-box',
-          // disabled: true,
-          command: () => model.mutate(s => s.view.showShadows = !s.view.showShadows)
-        },
         {
           label: state.view.lineNumbers ? 'Hide line numbers' : 'Show line numbers',
           icon: 'pi pi-list',

src/components/ViewerPanel.tsx

@@ -1,10 +1,7 @@
 // Portions of this file are Copyright 2021 Google LLC, and licensed under GPL2+. See COPYING.
 
-import { CSSProperties, useContext, useRef } from 'react';
+import { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
 import { ModelContext } from './contexts';
-import { StlViewer} from "react-stl-viewer";
-import { ColorPicker } from 'primereact/colorpicker';
-import { defaultModelColor } from '../state/initial-state';
 
 declare global {
   namespace JSX {
@@ -19,62 +16,80 @@ export default function ViewerPanel({className, style}: {className?: string, sty
   if (!model) throw new Error('No model');
 
   const state = model.state;
-  const modelRef = useRef();
+  const modelViewerRef = useRef<any>();
+  const axesViewerRef = useRef<any>();
 
+  for (const ref of [modelViewerRef, axesViewerRef]) {
+    const otherRef = ref === modelViewerRef ? axesViewerRef : modelViewerRef;
+    useEffect(() => {
+      function handleCameraChange(e: any) {
+        if (e.detail.source === 'user-interaction') {
+          const cameraOrbit = ref.current.getCameraOrbit();
+          cameraOrbit.radius = otherRef.current.getCameraOrbit().radius;
+
+          otherRef.current.cameraOrbit = cameraOrbit.toString();
+        }
+      }
+      ref.current.addEventListener('camera-change', handleCameraChange);
+      return () => ref.current.removeEventListener('camera-change', handleCameraChange);
+    }, [ref.current, otherRef.current]);
+  }
+
   return (
     <div className={className}
           style={{
               display: 'flex',
               flexDirection: 'column', 
+              position: 'relative',
               flex: 1, 
               width: '100%',
               ...(style ?? {})
           }}>
-      {(state.output?.displayFileURL || state.output?.outFile && state.output.outFile.name.endsWith('.glb') && state.output?.outFileURL) && (
-            <model-viewer
-              orientation="0deg -90deg 0deg"
-              src={state.output?.displayFileURL ?? state.output?.outFileURL ?? ''}
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-              environment-image="./skybox-lights.jpg"
-              max-camera-orbit="auto 180deg auto"
-              min-camera-orbit="auto 0deg auto"
-              camera-controls
-              ar
-              ref={(ref: any) => {
-                modelRef.current = ref;
-              }}
-            />
+      <model-viewer
+        orientation="0deg -90deg 0deg"
+        class="main-viewer"
+        src={state.output?.displayFileURL ?? state.output?.outFileURL ?? ''}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        environment-image="./skybox-lights.jpg"
+        max-camera-orbit="auto 180deg auto"
+        min-camera-orbit="auto 0deg auto"
+        camera-controls
+        ar
+        ref={modelViewerRef}
+      >
+        <span slot="progress-bar"></span>
+      </model-viewer>
+      {state.view.showAxes && (
+        <model-viewer
+                orientation="0deg -90deg 0deg"
+                src="./axes.glb"
+                style={{
+                  position: 'absolute',
+                  bottom: 0,
+                  right: 0,
+                  zIndex: 10,
+                  height: '200px',
+                  width: '200px',
+                }}
+                loading="eager"
+                interpolation-decay="0"
+                environment-image="./skybox-lights.jpg"
+                max-camera-orbit="auto 180deg auto"
+                min-camera-orbit="auto 0deg auto"
+                orbit-sensitivity="5"
+                interaction-prompt="none"
+                disable-zoom
+                camera-controls="false"
+                disable-tap 
+                disable-pan
+                ref={axesViewerRef}
+        >
+          <span slot="progress-bar"></span>
+        </model-viewer>
       )}
-      {state.output?.outFile && state.output.outFile.name.endsWith('.stl') && state.output?.outFileURL && (
-        <>
-         <StlViewer
-             style={{
-              width: '100%',
-              height: '100%',
-             }}
-             showAxes={state.view.showAxes}
-             orbitControls
-             shadows={state.view.showShadows}
-             modelProps={{
-               color: model.state.view.color,
-             }}
-             url={state.output?.outFileURL ?? ''}
-             />
-            <ColorPicker
-              className={`opacity-animated ${!model.isComponentFullyVisible('viewer') ? 'opacity-0' : ''}`}
-              value={model.state.view.color}
-              style={{
-                position: 'absolute',
-                top: '12px',
-                left: '12px',
-              }}
-              onChange={(e) => model.mutate(s => s.view.color = `#${e.value ?? defaultModelColor}`)}
-            />
-            </>
-        )}
     </div>
   )
 }

src/language/openscad-completions.ts

@@ -216,15 +216,15 @@ export async function buildOpenSCADCompletionItemProvider(fs: FS, workingDir: st
               const isFolder = !file.endsWith('.scad');
               const completion = file + (isFolder ? '' : '>\n'); // don't append '/' as it's a useful trigger char
 
-              console.log(JSON.stringify({
-                prefix,
-                folder,
-                filePrefix,
-                folderPrefix,
-                // files,
-                completion,
-                file,
-              }, null, 2));
+              // console.log(JSON.stringify({
+              //   prefix,
+              //   folder,
+              //   filePrefix,
+              //   folderPrefix,
+              //   // files,
+              //   completion,
+              //   file,
+              // }, null, 2));
 
               suggestions.push({
                 label: file,