v3 temporary branch

demo/js/app.js

@@ -53,7 +53,7 @@ export const app = (window.app = createApp({
     const updateUI = async () => {
       const {
         parser,
-        layers,
+        countLayers,
         extrusionColor,
         topLayerColor,
         lastSegmentColor,
@@ -70,11 +70,11 @@ export const app = (window.app = createApp({
       const { thumbnails } = parser.metadata;
 
       thumbnail.value = thumbnails['220x124']?.src;
-      layerCount.value = layers.length;
+      layerCount.value = countLayers;
       const colors = extrusionColor instanceof Array ? extrusionColor : [extrusionColor];
       const currentSettings = {
-        maxLayer: layers.length,
-        endLayer: layers.length,
+        maxLayer: countLayers,
+        endLayer: countLayers,
         singleLayerMode,
         renderTravel,
         travelColor: '#' + travelColor.getHexString(),
@@ -93,7 +93,7 @@ export const app = (window.app = createApp({
       };
 
       Object.assign(settings.value, currentSettings);
-      preview.endLayer = layers.length;
+      preview.endLayer = countLayers;
     };
 
     const loadGCodeFromServer = async (filename) => {
@@ -112,15 +112,21 @@ export const app = (window.app = createApp({
       const prevDevMode = preview.devMode;
       preview.clear();
       preview.devMode = prevDevMode;
-      preview.parser.parseGCode(gcode);
+      const { commands } = preview.parser.parseGCode(gcode);
+      preview.interpreter.execute(commands, preview.job);
 
       render();
     };
 
     const render = async () => {
       debounce(async () => {
         if (loadProgressive) {
-          await preview.renderAnimated(Math.ceil(preview.layers.length / 60));
+          if (preview.job.layers === null) {
+            console.warn('Job is not planar');
+            preview.render();
+            return;
+          }
+          await preview.renderAnimated(2000);
         } else {
           preview.render();
         }
@@ -190,9 +196,6 @@ export const app = (window.app = createApp({
       });
 
       watchEffect(() => {
-        preview.startLayer = +settings.value.startLayer;
-        preview.endLayer = +settings.value.endLayer;
-        preview.singleLayerMode = settings.value.singleLayerMode;
         preview.renderExtrusion = settings.value.renderExtrusion;
 
         preview.travelColor = settings.value.travelColor;
@@ -207,6 +210,12 @@ export const app = (window.app = createApp({
 
         render();
       });
+
+      watchEffect(() => {
+        preview.startLayer = +settings.value.startLayer;
+        preview.endLayer = +settings.value.endLayer;
+        preview.singleLayerMode = settings.value.singleLayerMode;
+      });
     });
 
     return {

demo/js/presets.js

@@ -14,7 +14,7 @@ export const presets = {
   mach3: {
     title: 'CNC tool path',
     file: 'gcodes/mach3.gcode',
-    lineWidth: 1,
+    lineWidth: 2,
     renderExtrusion: false,
     renderTravel: true,
     travelColor: '#00FF00',
@@ -43,6 +43,8 @@ export const presets = {
     title: 'Vase mode',
     file: 'gcodes/vase.gcode',
     lineWidth: 0,
+    lineHeight: 0.4,
+    minLayerThreshold: 0.6,
     renderExtrusion: true,
     renderTubes: true,
     extrusionColor: ['rgb(84,74,187)'],
@@ -60,7 +62,7 @@ export const presets = {
   'travel-moves': {
     title: 'Travel moves',
     file: 'gcodes/plant-sign.gcode',
-    lineWidth: 0,
+    lineWidth: 1,
     renderExtrusion: true,
     renderTubes: true,
     extrusionColor: ['#777777'],