fork me on github ribbon + model refactor
This commit is contained in:
parent
42d0d0a5d2
commit
f5ba146688
8 changed files with 75 additions and 82 deletions
29
LICENSE.md
29
LICENSE.md
|
|
@ -14,7 +14,6 @@ Please file an issue if you think a license or credits are missing or misreprese
|
|||
The WASM build was made possible by https://github.com/DSchroer/openscad-wasm.
|
||||
|
||||
* [Monaco Editor](#monaco-editor)
|
||||
* [Viewstl Plugin](#viewstl-plugin)
|
||||
* [React Stl Viewer](#react-stl-viewer)
|
||||
* [Three.js](#threejs)
|
||||
* [Boost](#boost)
|
||||
|
|
@ -79,34 +78,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|||
SOFTWARE.
|
||||
```
|
||||
|
||||
## Viewstl Plugin
|
||||
|
||||
https://github.com/omrips/viewstl
|
||||
|
||||
```
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 omrips
|
||||
|
||||
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.
|
||||
```
|
||||
|
||||
## React STL Viewer
|
||||
|
||||
https://github.com/gabotechs/react-stl-viewer
|
||||
|
|
|
|||
|
|
@ -13,5 +13,13 @@ Prerequisites:
|
|||
* deno
|
||||
|
||||
```bash
|
||||
make clean
|
||||
|
||||
# When doing local development, ensure the import.meta.url is replaced to localhost:
|
||||
# (otherwise will get cryptic `RangeError: WebAssembly.Table.get(): invalid index 999948 into function table`)
|
||||
dev=1 make public
|
||||
npm start
|
||||
|
||||
# When building a release
|
||||
make
|
||||
```
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="OpenSCAD Playground: edit .scad models and render them to STL from the browser (WebAssembly build OpenSCAD, with Monaco editor and STL Viewer)"
|
||||
|
|
@ -38,8 +40,17 @@
|
|||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<style>.github-fork-ribbon:before { background-color: #333; }</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" class="github-fork-ribbon"
|
||||
href="https://github.com/openscad/openscad-playground/tree/rewrite1"
|
||||
data-ribbon="Fork me on GitHub"
|
||||
title="Fork me on GitHub">
|
||||
Fork me on GitHub
|
||||
</a>
|
||||
|
||||
<noscript>You need to enable JavaScript to run the OpenSCAD Playground.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
|
|
|
|||
22
src/App.tsx
22
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';
|
||||
|
|
@ -73,6 +73,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}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', flex: 1}}>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export type RenderArgs = {
|
|||
source: string,
|
||||
features?: string[],
|
||||
extraArgs?: string[],
|
||||
isPreview?: boolean
|
||||
isPreview: boolean
|
||||
}
|
||||
export const render =
|
||||
turnIntoDelayableExecution(renderDelay, (args: RenderArgs) => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
62
src/model.ts
62
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,34 +41,32 @@ 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;
|
||||
// })});
|
||||
// }
|
||||
render({isPreview}: {isPreview: boolean}) {
|
||||
const setRendering = (s: State, value: boolean) => {
|
||||
if (isPreview) {
|
||||
s.previewing = value;
|
||||
} else {
|
||||
s.rendering = value;
|
||||
}
|
||||
}
|
||||
this.mutate(s => setRendering(s, true));
|
||||
|
||||
private handleRenderOutput(output: RenderOutput, extraMutations: (s: State) => void) {
|
||||
const source = this.state.params.source;
|
||||
const features = this.state.params.features;
|
||||
const renderArgs = {source, features, extraArgs: ['-D$preview=true'], isPreview};
|
||||
|
||||
render(renderArgs)({now: !isPreview, callback: output => {
|
||||
this.mutate(s => {
|
||||
s.lastCheckerRun = {
|
||||
logText: output.logText,
|
||||
|
|
@ -82,25 +76,13 @@ export class Model {
|
|||
URL.revokeObjectURL(s.output.stlFileURL);
|
||||
}
|
||||
s.output = {
|
||||
isPreview: isPreview,
|
||||
stlFile: output.stlFile,
|
||||
stlFileURL: URL.createObjectURL(output.stlFile),
|
||||
};
|
||||
extraMutations(s);
|
||||
setRendering(s, false);
|
||||
});
|
||||
}
|
||||
|
||||
private get renderArgs(): RenderArgs {
|
||||
const source = this.state.params.source;
|
||||
const features = this.state.params.features;
|
||||
return {source, features, extraArgs: ['-D$preview=true']};
|
||||
}
|
||||
|
||||
render() {
|
||||
this.mutate(s => s.rendering = true);
|
||||
|
||||
render(this.renderArgs)({now: true, callback: output => this.handleRenderOutput(output, s => {
|
||||
s.rendering = false;
|
||||
})})
|
||||
}})
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,6 @@
|
|||
},
|
||||
"include": [
|
||||
"src/*.ts",
|
||||
"public"
|
||||
// "public"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue