fork me on github ribbon + model refactor

src/App.tsx

@@ -1,6 +1,6 @@
 // Portions of this file are Copyright 2021 Google LLC, and licensed under GPL2+. See COPYING.
 
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {ModelContext, State} from './app-state'
 import Editor, { loader, Monaco } from '@monaco-editor/react';
 import './App.css';
@@ -72,6 +72,8 @@ export function App({initialState}: {initialState: State}) {
 
   const model = new Model(state, setState);
   useEffect(() => model.init());
+
+  const stlModelRef = useRef(null);
   
   return (
     <ModelContext.Provider value={model}>
@@ -85,9 +87,14 @@ export function App({initialState}: {initialState: State}) {
                 style={{
                   flex: 1
                 }}
+                ref={stlModelRef}
                 showAxes={true}
                 orbitControls
                 shadows
+                modelProps={{
+                  color: '#f9d72c',
+
+                }}
                 url={state.output?.stlFileURL ?? ''}
                 />
           }
@@ -97,6 +104,19 @@ export function App({initialState}: {initialState: State}) {
             {model.state.previewing && 'previewing... '}
             {model.state.rendering && 'rendering... '}
             {model.state.checkingSyntax && 'checking syntax... '}
+
+            <span style={{flex: 1}}></span>
+            
+            <a target="_blank" className="text-fragment" href="http://openscad.org/documentation.html">Docs</a> |
+            <a target="_blank" className="text-fragment" href="http://openscad.org/cheatsheet/">Cheatsheet</a> |
+            <a target="_blank" href="https://github.com/openscad/openscad-playground/blob/rewrite1/LICENSE.md">LICENSES</a>
+
+            {state.output?.stlFileURL && (
+              <a href={state.output?.stlFileURL}
+                title="STL Download">
+                  Download Model
+              </a>
+            )}
         </div>
       </div>
     </ModelContext.Provider>

src/actions.ts

@@ -42,7 +42,7 @@ export type RenderArgs = {
   source: string,
   features?: string[],
   extraArgs?: string[],
-  isPreview?: boolean
+  isPreview: boolean
 }
 export const render =
  turnIntoDelayableExecution(renderDelay, (args: RenderArgs) => {

src/deep-mutate.ts

@@ -26,7 +26,8 @@ function collectObjectEntriesDeeply(o: KVObject, out: KVEntriesMap = new Map()):
     if (typeof v !== 'object') {
       continue;
     }
-    if (v instanceof RegExp) {
+    if (v instanceof RegExp ||
+      v instanceof Blob) {
       continue;
     }
     collectObjectEntriesDeeply(v, out);

src/model.ts

@@ -34,10 +34,6 @@ export class Model {
     return false;
   }
 
-  // get features() { return this.state_.params.features; }
-
-  // get source(): string { return this.state_.params.source; }
-
   set source(source: string) {
     if (this.mutate(s => { s.params.source = source; })) {
       this.processSource();
@@ -45,62 +41,48 @@ export class Model {
   }
 
   private processSource() {
-    this.mutate(s => {
-      s.previewing = true;
-      s.checkingSyntax = true;
-    });
+    this.checkSyntax();
+    this.render({isPreview: true});
+  }
+  checkSyntax() {
+    this.mutate(s => s.checkingSyntax = true);
     checkSyntax(this.state.params.source)({now: false, callback: checkerRun => this.mutate(s => {
       s.lastCheckerRun = checkerRun;
       s.checkingSyntax = false;
     })});
-    render({...this.renderArgs, isPreview: true})({now: false, callback: output => this.handleRenderOutput(output, s => {
-      s.previewing = false;
-    })});
   }
 
-  // checkSyntax() {
-  //   this.mutate(s => s.checkingSyntax = true);
-  //   checkSyntax(this.state.params.source)({now: false, callback: checkerRun => this.mutate(s => {
-  //     s.lastCheckerRun = checkerRun;
-  //     s.checkingSyntax = false;
-  //   })});
-  // }
-  // preview() {
-  //   this.mutate(s => s.previewing = true);
-  //   render({...this.renderArgs, isPreview: true})({now: false, callback: output => this.handleRenderOutput(output, s => {
-  //     s.previewing = false;
-  //   })});
-  // }
-
-  private handleRenderOutput(output: RenderOutput, extraMutations: (s: State) => void) {
-    this.mutate(s => {
-      s.lastCheckerRun = {
-        logText: output.logText,
-        markers: output.markers,
+  render({isPreview}: {isPreview: boolean}) {
+    const setRendering = (s: State, value: boolean) => {
+      if (isPreview) {
+        s.previewing = value;
+      } else {
+        s.rendering = value;
       }
-      if (s.output?.stlFileURL) {
-        URL.revokeObjectURL(s.output.stlFileURL);
-      }
-      s.output = {
-        stlFile: output.stlFile,
-        stlFileURL: URL.createObjectURL(output.stlFile),
-      };
-      extraMutations(s);
-    });
-  }
+    }
+    this.mutate(s => setRendering(s, true));
 
-  private get renderArgs(): RenderArgs {
     const source = this.state.params.source;
     const features = this.state.params.features;
-    return {source, features, extraArgs: ['-D$preview=true']};
-  }
+    const renderArgs = {source, features, extraArgs: ['-D$preview=true'], isPreview};
 
-  render() {
-    this.mutate(s => s.rendering = true);
-
-    render(this.renderArgs)({now: true, callback: output => this.handleRenderOutput(output, s => {
-      s.rendering = false;
-    })})
+    render(renderArgs)({now: !isPreview, callback: output => {
+      this.mutate(s => {
+        s.lastCheckerRun = {
+          logText: output.logText,
+          markers: output.markers,
+        }
+        if (s.output?.stlFileURL) {
+          URL.revokeObjectURL(s.output.stlFileURL);
+        }
+        s.output = {
+          isPreview: isPreview,
+          stlFile: output.stlFile,
+          stlFileURL: URL.createObjectURL(output.stlFile),
+        };
+        setRendering(s, false);
+      });
+    }})
   }
 
 }