Cleanups

Author: sophiedeziel

demo/index.html

@@ -244,7 +244,7 @@ <h1 class="text-center m-3 mb-5">GCode Preview
         v-model="enableDevMode" type="checkbox" /> </div>
     <div class="absolute left bottom m-3 has-text-grey slide-in-up">Drop a gcode file to preview it</div>
     <div class="wrapper">
-      <canvas class="preview" :class="{ 'dragging': settings.dragging }" @update.prevent="update"></canvas>
+      <canvas class="preview" :class="{ 'dragging': settings.dragging }"></canvas>
     </div>
   </div>
   <script type="importmap">

demo/js/app.js

@@ -35,31 +35,10 @@ export const app = (window.app = createApp({
 
     const removeColor = () => settings.value.colors.pop();
 
-    const update = async (evt) => {
-      model.value = {
-        name: evt.detail.filename
-      };
-      applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
-      updateUI();
-    };
-
     // Update UI with current preview settings
     const updateUI = async () => {
-      const { parser, sceneManager, countLayers } = preview;
-      const {
-        topLayerColor,
-        lastSegmentColor,
-        buildVolume,
-        singleLayerMode,
-        renderTravel,
-        travelColor,
-        renderExtrusion,
-        lineWidth,
-        renderTubes,
-        extrusionWidth,
-        extrusionColor,
-        backgroundColor
-      } = sceneManager;
+      console.log('Updating UI');
+      const { parser, countLayers, sceneManager } = preview;
       const { thumbnails } = parser.metadata;
 
       // thumbnail.value = thumbnails['220x124']?.src;
@@ -70,33 +49,14 @@ export const app = (window.app = createApp({
       thumbnail.value = thumbnails[largestThumbnailKey]?.src;
 
       layerCount.value = countLayers;
-      const colors = extrusionColor instanceof Array ? extrusionColor : [extrusionColor];
+      sceneManager.endLayer = countLayers;
+
       const currentSettings = {
-        startLayer: 1,
-        enableStartLayer: false,
         maxLayer: countLayers || 1000,
-        endLayer: countLayers,
-        enableEndLayer: false,
-        singleLayerMode,
-        renderTravel,
-        travelColor: '#' + travelColor.getHexString(),
-        renderExtrusion,
-        lineWidth,
-        renderTubes,
-        extrusionWidth,
-        colors: colors.map((c) => '#' + c.getHexString()),
-        topLayerColor: '#' + topLayerColor?.getHexString(),
-        highlightTopLayer: !!topLayerColor,
-        lastSegmentColor: '#' + lastSegmentColor?.getHexString(),
-        highlightLastSegment: !!lastSegmentColor,
-        buildVolume: buildVolume,
-        drawBuildVolume: !!buildVolume,
-        backgroundColor: '#' + backgroundColor.getHexString()
+        endLayer: countLayers
       };
 
-      console.debug('app settings:', currentSettings);
       Object.assign(settings.value, currentSettings);
-      sceneManager.endLayer = countLayers;
 
       applyDevMode(enableDevMode.value);
     };
@@ -166,8 +126,8 @@ export const app = (window.app = createApp({
       observer = new ResizeObserver(() => preview.sceneManager.resize());
       observer.observe(canvas);
 
-      // to update the layer count
-      preview.addEventListener('jobUpdated', () => {
+      // to update the layer count and the thumbnail when available
+      preview.addEventListener(['jobUpdated', 'streamReadEnd'], () => {
         updateUI();
       });
 
@@ -248,7 +208,6 @@ export const app = (window.app = createApp({
       selectTab,
       addColor,
       removeColor,
-      update,
       resetUI: updateUI,
       loadGCodeFromServer,
       selectPreset

src/gcode-preview.ts

@@ -19,9 +19,13 @@ type LibOptions = {
 };
 
 export type GCodePreviewOptions = LibOptions & SceneManagerOptions;
+enum GCodePreviewEvent {
+  STREAM_READ_END = 'streamReadEnd'
+}
 export const EventName = {
   ...SceneManagerEvent,
-  ...InterpreterEvent
+  ...InterpreterEvent,
+  ...GCodePreviewEvent
 };
 
 export type EventNameType = (typeof EventName)[keyof typeof EventName];
@@ -203,6 +207,7 @@ export class GCodePreview {
     } while (!result.done);
 
     console.debug('total read from stream', Math.floor(size / 1024), 'kB');
+    this.eventsDispatcher.emit(EventName.STREAM_READ_END, null);
   }
 
   /**