modules/webpack conversion.

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "rules": {},
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  }
+}

.gitignore

@@ -6,6 +6,9 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+# webpack bundle output file
+dist/*
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
@@ -38,70 +41,21 @@ bower_components
 build/Release
 
 # Dependency directories
+static_node_modules/**/*
 node_modules/**/*
 CascadeStudio/
 
-# Three.js Build
-!node_modules/three/
-!node_modules/three/*/
-!node_modules/three/build/*
-# Three.js Controls
-!node_modules/three/examples/*/
-!node_modules/three/examples/js/
-!node_modules/three/examples/js/*/
-!node_modules/three/examples/js/controls/
-!node_modules/three/examples/js/controls/*
-!node_modules/three/examples/js/exporters/
-!node_modules/three/examples/js/exporters/*
-
-# Golden-Layout Scripts
-!node_modules/golden-layout/
-!node_modules/golden-layout/*/
-!node_modules/golden-layout/index.d.ts
-!node_modules/golden-layout/dist/
-!node_modules/golden-layout/dist/*
-# Golden-Layout Scripts
-!node_modules/golden-layout/src/
-!node_modules/golden-layout/src/*/
-!node_modules/golden-layout/src/css/
-!node_modules/golden-layout/src/css/*
-
-# Monaco Editor Scripts
-!node_modules/monaco-editor
-!node_modules/monaco-editor/*
-!node_modules/monaco-editor/min/
-!node_modules/monaco-editor/min/**
-!node_modules/monaco-editor/min-maps/
-!node_modules/monaco-editor/min-maps/**
-
-# JQuery Scripts
-!node_modules/jquery/
-!node_modules/jquery/*/
-!node_modules/jquery/dist/
-!node_modules/jquery/dist/*
-
 # Raw Inflate and Deflate
-!node_modules/rawflate/
-!node_modules/rawflate/*
-
-# OpenType.js Scripts
-!node_modules/opentype.js/
-!node_modules/opentype.js/*/
-!node_modules/opentype.js/dist/
-!node_modules/opentype.js/dist/*
-
-# ControlKit Bin
-!node_modules/controlkit/
-!node_modules/controlkit/*/
-!node_modules/controlkit/bin/
-!node_modules/controlkit/bin/*
+!static_node_modules/rawflate/
+!static_node_modules/rawflate/*
 
 # opencascade.js Bin
-!node_modules/opencascade.js/
-!node_modules/opencascade.js/*/
-!node_modules/opencascade.js/dist/
-!node_modules/opencascade.js/dist/*
-node_modules/opencascade.js/dist/opencascade.js
+!static_node_modules/opencascade.js/index.js
+!static_node_modules/opencascade.js/
+!static_node_modules/opencascade.js/*/
+!static_node_modules/opencascade.js/dist/
+!static_node_modules/opencascade.js/dist/*
+static_node_modules/opencascade.js/dist/opencascade.js
 # Add the above line for now, can take it out if necessary
 
 jspm_packages/

README.md

@@ -61,8 +61,6 @@ Model code is saved to the URL upon every successful evaluation, so you can copy
 
 ## Contributing
 
-Cascade Studio is entirely static assets and vanilla javascript, so running it locally is as simple as running a server from the root directory (such as the [VS Code Live Server](https://github.com/ritwickdey/vscode-live-server), [Python live-server](https://pypi.org/project/live-server/), or [Node live-server](https://www.npmjs.com/package/live-server) ).
-
 Pull Requests to this repo are automatically hosted to Vercel instances, so other users will be able to test and benefit from your modifications as soon as the PR is submitted.
 
 ## Credits
@@ -78,3 +76,45 @@ Cascade Studio uses:
  - [rawinflate/rawdeflate](https://github.com/dankogai/js-deflate) (URL Code Serialization)
 
 Cascade Studio is maintained by [Johnathon Selstad @zalo](https://github.com/zalo)
+
+
+## Building and running on localhost
+
+Quick start:
+```sh
+yarn install
+yarn dev
+```
+
+
+Install dependencies:
+
+```sh
+yarn install
+```
+
+To create a production build:
+
+```sh
+yarn build-prod
+```
+
+To create a development build:
+
+```sh
+yarn build-dev
+```
+
+## Running
+
+```sh
+yarn dev
+```
+
+## Testing
+
+To run unit tests:
+
+```sh
+yarn test
+```

index.html

@@ -10,80 +10,27 @@
         <meta name="viewport"           content="width=device-width, initial-scale=1.0">
         <meta name="theme-color"        content="#1e1e1e">
 
-        <!-- Include these early and directly so they happen first -->
-        <script>
-            // Install Cascade Studio as a Progressive Web App for Offline Access
-            // This needs to be put before ANY HTTP Requests are made, so it can cache them.
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker.register('service-worker.js').then(function(registration) {
-                    registration.update(); // Always update the registration for the latest assets
-                }, function() {
-                    console.log('Could not register Cascade Studio for offline use!');
-                });
-            } else {
-                console.log('Browser does not support offline access!');
-            }
+        <link rel='shortcut icon'      href='icon/favicon.ico' type='image/x-icon' >
+        <link rel="manifest"           href="manifest.webmanifest">
+        <link rel="apple-touch-icon"   href="icon/apple-touch-icon.png">
 
-            // Begins loading the CAD Kernel Web Worker
-            if (window.Worker) {
-                var cascadeStudioWorker = new Worker('./js/CADWorker/CascadeStudioMainWorker.js');
-                // Ping Pong Messages Back and Forth based on their registration in messageHandlers
-                var messageHandlers = {};
-                cascadeStudioWorker.onmessage = function (e) {
-                    if(e.data.type in messageHandlers){
-                        let response = messageHandlers[e.data.type](e.data.payload);
-                        if (response) { cascadeStudioWorker.postMessage({ "type": e.data.type, payload: response }) };
-                    }
-                }
-            }
-        </script>
-
-        <link rel='shortcut icon'      href='./icon/favicon.ico' type='image/x-icon' >
-        <link rel="manifest"           href="./manifest.webmanifest">
-        <link rel="apple-touch-icon"   href="./icon/apple-touch-icon.png">
-
-        <script type="text/javascript" src="./node_modules/three/build/three.min.js"></script>
-        <script type="text/javascript" src="./node_modules/three/examples/js/controls/DragControls.js"></script>
-        <script type="text/javascript" src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>
-        <script type="text/javascript" src="./node_modules/three/examples/js/controls/TransformControls.js"></script>
-        <script type="text/javascript" src="./node_modules/three/examples/js/exporters/STLExporter.js"></script>
-        <script type="text/javascript" src="./node_modules/three/examples/js/exporters/OBJExporter.js"></script>
-
-        <script type="text/javascript" src="./node_modules/controlkit/bin/controlKit.min.js"></script>
-
-        <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
-        <script type="text/javascript" src="./node_modules/golden-layout/dist/goldenlayout.min.js"></script>
-        <link type="text/css" rel="stylesheet" href="./node_modules/golden-layout/src/css/goldenlayout-base.css" />
-        <link type="text/css" rel="stylesheet" href="./node_modules/golden-layout/src/css/goldenlayout-dark-theme.css" />
-        <link type="text/css" rel="stylesheet" href="./css/main.css" />
-
-        <script type="text/javascript" src="./node_modules/rawflate/rawdeflate.js"></script>
-        <script type="text/javascript" src="./node_modules/rawflate/rawinflate.js"></script>
-        <script type="text/javascript" src="./js/MainPage/CascadeViewHandles.js"></script>
-        <script type="text/javascript" src="./js/MainPage/CascadeView.js"></script>
     </head>
 
-    <body onload="initialize();" style="margin:0px; background-color:rgb(34, 34, 34); "><!--overflow:hidden; position:fixed;-->
+    <body style="margin:0px; background-color:rgb(34, 34, 34); "><!--overflow:hidden; position:fixed;-->
         <h1 hidden></h1> <!-- Puts the Lighthouse Score over 90 heheh-->
         <div id="topnav" class="topnav">
             <a href="https://github.com/zalo/CascadeStudio">Cascade Studio 0.0.6</a>
-            <a href="#" title="Save Project to .json" onmouseup="saveProject();">Save Project</a>
-            <a href="#" title="Load Project from .json" onmouseup="loadProject();">Load Project</a>
-            <a href="#" onmouseup="threejsViewport.saveShapeSTEP();">Save STEP</a>
-            <a href="#" onmouseup="threejsViewport.saveShapeSTL();">Save STL</a>
-            <a href="#" onmouseup="threejsViewport.saveShapeOBJ();">Save OBJ</a>
+            <a href="#" id="save-project" title="Save Project to .json">Save Project</a>
+            <a href="#" id="load-project" title="Load Project from .json">Load Project</a>
+            <a href="#" id="save-step">Save STEP</a>
+            <a href="#" id="save-stl">Save STL</a>
+            <a href="#" id="save-obj">Save OBJ</a>
             <label for="files" title="Import STEP, IGES, or (ASCII) STL from File">Import STEP/IGES/STL
-                <input id="files" name="files" type="file" accept=".iges,.step,.igs,.stp,.stl" multiple style="display:none;" oninput="loadFiles();"/>
+                <input id="files" name="files" type="file" accept=".iges,.step,.igs,.stp,.stl" multiple style="display:none;"/>
             </label>
-            <a href="#" title="Clears the external step/iges/stl files stored in the project." onmouseup="clearExternalFiles();">Clear Imported Files</a>
+            <a href="#" id="clear-external-files" title="Clears the external step/iges/stl files stored in the project.">Clear Imported Files</a>
         </div>
         <div id="appbody" style="height:auto">
-            <link data-name="vs/editor/editor.main" rel="stylesheet" href="./node_modules/monaco-editor/min/vs/editor/editor.main.css">
-            <script>var require = { paths: { 'vs': 'node_modules/monaco-editor/min/vs' } };</script>
-            <script type="text/javascript" src="./node_modules/monaco-editor/min/vs/loader.js"></script>
-            <script type="text/javascript" src="./node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
-            <script type="text/javascript" src="./node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
-            <script type="text/javascript" src="./js/MainPage/CascadeMain.js"></script>
         </div>
 
     </body>

js/CADWorker/CascadeStudioFileUtils.js

@@ -1,8 +1,20 @@
 // File Import and Export Utilities
+import {
+  oc,
+  messageHandlers,
+  externalShapes,
+  GUIState,
+  currentShape
+} from "./CascadeStudioWorkerState";
+import {
+  sceneShapes,
+  resetSceneShapes
+} from "./CascadeStudioSceneShapesService";
+import { stringToHash } from "./CascadeStudioStandardUtils.js";
 
 /** This function synchronously loads the "files" in the 
  * current project into the `externalFiles` dictionary upon startup.*/
-function loadPrexistingExternalFiles(externalFileDict) {
+export function loadPrexistingExternalFiles(externalFileDict) {
   console.log("Loading Pre-Existing external files...");
   for (let key in externalFileDict) {
     if (key.includes(".stl")) {
@@ -12,7 +24,6 @@ function loadPrexistingExternalFiles(externalFileDict) {
     }
   }
 }
-messageHandlers["loadPrexistingExternalFiles"] = loadPrexistingExternalFiles;
 
 /** This function synchronously reads the text contents of a file. */
 const loadFileSync = async (file) => {
@@ -23,9 +34,9 @@ const loadFileSync = async (file) => {
 
 /** This function synchronously loads a list of files into the 
  * `externalShapes` dictionary and renders them to the viewport. */
-function loadFiles(files) {
+export function loadFiles(files) {
   let extFiles = {};
-  sceneShapes = [];
+  resetSceneShapes();
   for (let i = 0; i < files.length; i++) {
     var lastImportedShape = null;
     loadFileSync(files[i]).then(async (fileText) => {
@@ -53,7 +64,6 @@ function loadFiles(files) {
     });
   };
 }
-messageHandlers["loadFiles"] = loadFiles;
 
 /** This function parses the ASCII contents of a `.STEP` or `.IGES` 
  * File as a Shape into the `externalShapes` dictionary. */
@@ -125,7 +135,7 @@ function importSTL(fileName, fileText) {
 
 /** This function returns `currentShape` `.STEP` file content.  
  * `currentShape` is set upon the successful completion of `combineAndRenderShapes()`.  */
-function saveShapeSTEP (filename = "CascadeStudioPart.step") {
+export function saveShapeSTEP (filename = "CascadeStudioPart.step") {
   let writer = new oc.STEPControl_Writer();
   // Convert to a .STEP File
   let transferResult = writer.Transfer(currentShape, 0);
@@ -146,7 +156,3 @@ function saveShapeSTEP (filename = "CascadeStudioPart.step") {
     console.error("TRANSFER TO STEP WRITER FAILED.");
   }
 }
-messageHandlers["saveShapeSTEP"] = saveShapeSTEP;
-
-/** Removes the externally imported shapes/files from the project. */ 
-messageHandlers["clearExternalFiles"] = () => { externalShapes = {}; };

js/CADWorker/CascadeStudioFontLoader.js

@@ -0,0 +1,22 @@
+import openType from "opentype.js";
+
+export const fonts = {};
+
+// Preload the Various Fonts that are available via Text3D
+var preloadedFonts = [
+  "fonts/Roboto.ttf",
+  "fonts/Papyrus.ttf",
+  "fonts/Consolas.ttf"
+];
+
+Promise.all(preloadedFonts.map(async fontURL => fetch("/" + fontURL))).then(
+  async responses => {
+    const arrayBuffers = await Promise.all(
+      responses.map(response => response.arrayBuffer())
+    );
+    arrayBuffers.forEach((buffer, index) => {
+      let fontName = preloadedFonts[index].split("fonts/")[1].split(".ttf")[0];
+      fonts[fontName] = openType.parse(buffer);
+    });
+  }
+);