Converts project to being bundled by webpack

some of the current files in node_modules will be moved to static_node_modules so they can continue to be used
zalo · Jan 22, 2021 · ef2a708 · ef2a708
1 parent 8f9f787
commit ef2a708
Show file tree

Hide file tree

Showing 188 changed files with 8,921 additions and 196,025 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}
diff --git a/.eslintrc.json b/.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"
+  }
+}
diff --git a/.gitignore b/.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/

diff --git a/README.md b/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
+```
diff --git a/index.html b/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!');
-            }
-
-            // 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>

diff --git a/js/CADWorker/CascadeStudioFileUtils.js b/js/CADWorker/CascadeStudioFileUtils.js
@@ -1,4 +1,17 @@
 // File Import and Export Utilities
+import {
+  oc,
+  messageHandlers,
+  externalShapes,
+  resetExternalShapes,
+  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.*/
@@ -25,7 +38,7 @@ const loadFileSync = async (file) => {
  * `externalShapes` dictionary and renders them to the viewport. */
 function loadFiles(files) {
   let extFiles = {};
-  sceneShapes = [];
+  resetSceneShapes();
   for (let i = 0; i < files.length; i++) {
     var lastImportedShape = null;
     loadFileSync(files[i]).then(async (fileText) => {
@@ -149,4 +162,4 @@ function saveShapeSTEP (filename = "CascadeStudioPart.step") {
 messageHandlers["saveShapeSTEP"] = saveShapeSTEP;
 
 /** Removes the externally imported shapes/files from the project. */ 
-messageHandlers["clearExternalFiles"] = () => { externalShapes = {}; };
+messageHandlers["clearExternalFiles"] = resetExternalShapes;
diff --git a/js/CADWorker/CascadeStudioFontLoader.js b/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);
+    });
+  }
+);