Merge pull request #309 from xyz-tools/refactor-to-class-export

Redefine the main class/init to extract many responsibilities out of the renderer

Author: remcoder

README.md

@@ -33,9 +33,9 @@ Click to see the [full-fledged demo](https://gcode-preview.web.app/):
 ### Quick start
 
 ```  
-  import * as GCodePreview from 'gcode-preview';
+  import { GCodePreview } from 'gcode-preview';
 
-  const preview = GCodePreview.init({
+  const preview = new GCodePreview({
       canvas: document.querySelector('canvas'),
       extrusionColor: 'hotpink'
   });

demo/js/app.js

@@ -1,6 +1,6 @@
 import { createApp, ref, watch, onMounted, watchEffect } from 'vue';
 import { presets } from './presets.js';
-import * as GCodePreview from 'gcode-preview';
+import { GCodePreview } from 'gcode-preview';
 import { defaultSettings } from './default-settings.js';
 import { parseIntOrDefault } from './utils.js';
 
@@ -46,23 +46,22 @@ export const app = (window.app = createApp({
 
     // Update UI with current preview settings
     const updateUI = async () => {
+      const { parser, sceneManager, countLayers } = preview;
       const {
-        parser,
-        countLayers,
-        extrusionColor,
         topLayerColor,
         lastSegmentColor,
         buildVolume,
-        backgroundColor,
         singleLayerMode,
         renderTravel,
         travelColor,
         renderExtrusion,
         lineWidth,
         renderTubes,
         extrusionWidth,
-        boundingBoxColor
-      } = preview;
+        boundingBoxColor,
+        extrusionColor,
+        backgroundColor
+      } = sceneManager;
       const { thumbnails } = parser.metadata;
 
       // thumbnail.value = thumbnails['220x124']?.src;
@@ -99,7 +98,7 @@ export const app = (window.app = createApp({
       };
       console.debug('app settings:', currentSettings);
       Object.assign(settings.value, currentSettings);
-      preview.endLayer = countLayers;
+      sceneManager.endLayer = countLayers;
 
       applyDevMode(enableDevMode.value);
     };
@@ -117,12 +116,12 @@ export const app = (window.app = createApp({
       // preview.clear();
       preview.devMode = prevDevMode;
 
-      await preview.processGCode(gcodeStream, { render: false }); // rendering will be done reactively
+      await preview.processGCodeStream(gcodeStream, { render: false }); // rendering will be done reactively
     };
 
     const render = async () => {
       if (loadProgressive.value && preview.job.layers !== null) {
-        await preview.renderAnimated();
+        await preview.sceneManager.renderAnimated();
       } else {
         preview.render();
       }
@@ -153,11 +152,11 @@ export const app = (window.app = createApp({
       if (defaultSettings.devMode) defaultSettings.devMode.statsContainer = statsContainer();
       preview?.dispose();
 
-      window['_preview'] = preview = new GCodePreview.init(options);
+      window['_preview'] = preview = new GCodePreview(options);
 
       // resize preview on canvas resize (TODO: move to GCodePreview)
       if (observer) observer.disconnect();
-      observer = new ResizeObserver(() => preview.resize());
+      observer = new ResizeObserver(() => preview.sceneManager.resize());
       observer.observe(canvas);
 
       applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
@@ -178,39 +177,47 @@ export const app = (window.app = createApp({
       await selectPreset(defaultPreset);
 
       watchEffect(() => {
-        preview.backgroundColor = settings.value.backgroundColor;
-
-        if (preview.buildVolume && settings.value.drawBuildVolume) {
-          preview.buildVolume.smallGrid = settings.value.buildVolume.smallGrid;
-          preview.buildVolume.x = +settings.value.buildVolume.x;
-          preview.buildVolume.y = +settings.value.buildVolume.y;
-          preview.buildVolume.z = +settings.value.buildVolume.z;
+        if (!preview) return;
+        preview.sceneManager.backgroundColor = settings.value.backgroundColor;
+
+        if (preview.sceneManager.buildVolume && settings.value.drawBuildVolume) {
+          preview.sceneManager.buildVolume.smallGrid = settings.value.buildVolume.smallGrid;
+          preview.sceneManager.buildVolume.x = +settings.value.buildVolume.x;
+          preview.sceneManager.buildVolume.y = +settings.value.buildVolume.y;
+          preview.sceneManager.buildVolume.z = +settings.value.buildVolume.z;
         }
 
-        if (!preview.buildVolume && settings.value.drawBuildVolume) {
-          preview.buildVolume = {
+        if (!preview.sceneManager.buildVolume && settings.value.drawBuildVolume) {
+          preview.sceneManager.buildVolume = {
             x: +settings.value.buildVolume.x,
             y: +settings.value.buildVolume.y,
             z: +settings.value.buildVolume.z,
             smallGrid: settings.value.buildVolume.smallGrid
           };
-        } else if (preview.buildVolume && !settings.value.drawBuildVolume) {
-          preview.buildVolume = undefined;
+        } else if (preview.sceneManager.buildVolume && !settings.value.drawBuildVolume) {
+          preview.sceneManager.buildVolume = undefined;
         }
-        preview.boundingBoxColor = drawBoundingBox.value ? (settings.value.boundingBoxColor ?? 'magenta') : undefined;
+        preview.sceneManager.boundingBoxColor = drawBoundingBox.value
+          ? (settings.value.boundingBoxColor ?? 'magenta')
+          : undefined;
       });
 
       watchEffect(() => {
-        preview.renderTravel = settings.value.renderTravel;
-        preview.travelColor = settings.value.travelColor;
-        preview.lineWidth = +settings.value.lineWidth;
-
-        preview.renderExtrusion = settings.value.renderExtrusion;
-        preview.renderTubes = settings.value.renderTubes;
-        preview.extrusionWidth = +settings.value.extrusionWidth;
-
-        preview.topLayerColor = settings.value.highlightTopLayer ? settings.value.topLayerColor : undefined;
-        preview.lastSegmentColor = settings.value.highlightLastSegment ? settings.value.lastSegmentColor : undefined;
+        if (!preview) return;
+        preview.sceneManager.renderTravel = settings.value.renderTravel;
+        preview.sceneManager.travelColor = settings.value.travelColor;
+        preview.sceneManager.lineWidth = +settings.value.lineWidth;
+
+        preview.sceneManager.renderExtrusion = settings.value.renderExtrusion;
+        preview.sceneManager.renderTubes = settings.value.renderTubes;
+        preview.sceneManager.extrusionWidth = +settings.value.extrusionWidth;
+
+        preview.sceneManager.topLayerColor = settings.value.highlightTopLayer
+          ? settings.value.topLayerColor
+          : undefined;
+        preview.sceneManager.lastSegmentColor = settings.value.highlightLastSegment
+          ? settings.value.lastSegmentColor
+          : undefined;
 
         // run render after settings have been applied
         // this is needed to prevent reactivity attaching the render function
@@ -220,19 +227,23 @@ export const app = (window.app = createApp({
       });
 
       watchEffect(() => {
+        if (!preview) return;
         const startLayer = parseIntOrDefault(settings.value.startLayer, undefined);
         const endLayer = parseIntOrDefault(settings.value.endLayer, undefined);
 
-        preview.startLayer = settings.value.enableStartLayer ? startLayer : undefined;
-        preview.endLayer = settings.value.enableEndLayer ? endLayer : undefined;
+        preview.sceneManager.startLayer = settings.value.enableStartLayer ? startLayer : undefined;
+        preview.sceneManager.endLayer = settings.value.enableEndLayer ? endLayer : undefined;
       });
 
       watchEffect(() => {
-        preview.singleLayerMode = settings.value.singleLayerMode;
+        if (!preview) return;
+        preview.sceneManager.singleLayerMode = settings.value.singleLayerMode;
       });
 
       watchEffect(() => {
-        preview.extrusionColor = settings.value.colors.length === 1 ? settings.value.colors[0] : settings.value.colors;
+        if (!preview) return;
+        preview.sceneManager.extrusionColor =
+          settings.value.colors.length === 1 ? settings.value.colors[0] : settings.value.colors;
       });
     });