Merge branch 'develop' into feature/export-stl

Author: remcoder

demo/index.html

@@ -72,26 +72,35 @@ <h1 class="text-center m-3 mb-5">GCode Preview
             <div class="panel" v-cloak v-show="activeTab == 'layers'">
               <section>
                 <div class="controls">
-                  <label :class="{'has-text-grey' : settings.singleLayerMode}" >Start layer <output id="start-layer-value" >{{settings.startLayer}}</output></label>&nbsp;
+                  <label>
+                    Start Layer
+                  <input type="checkbox" v-model="settings.enableStartLayer" />
+                  </label>
+                  <label :class="{'has-text-grey' : !settings.enableStartLayer}" ><output id="start-layer-value" >{{settings.startLayer}}</output></label>&nbsp;
                   <input 
-                    type="range"
-                    min="1"
-                    :max="settings.maxLayer"
-                    id="start-layer"
-                    v-model="settings.startLayer"
-                    :disabled="settings.singleLayerMode"
+                  type="range"
+                  min="1"
+                  :max="settings.maxLayer"
+                  id="start-layer"
+                  v-model="settings.startLayer"
+                  :disabled="!settings.enableStartLayer"
                   />
                 </div>
                 <div class="controls">
-                  <label>End layer <output id="end-layer-value" >{{settings.endLayer}}</output></label>&nbsp;
+                  <label>
+                    End Layer
+                  <input type="checkbox" v-model="settings.enableEndLayer" />
+                  </label>
+                  <label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output id="end-layer-value" >{{settings.endLayer}}</output></label>&nbsp;
                   <!-- HACK: extra :value binding to ensure the value is set after the max is updated -->
                   <input
-                    v-model="settings.endLayer"
-                    type="range"
-                    min="1"
-                    :max="settings.maxLayer"
-                    id="end-layer"
-                    :value="settings.endLayer"
+                  v-model="settings.endLayer"
+                  type="range"
+                  min="1"
+                  :max="settings.maxLayer"
+                  id="end-layer"
+                  :value="settings.endLayer"
+                  :disabled="!settings.enableEndLayer"
                   /> 
                 </div>
                 <div class="controls">

demo/js/app.js

@@ -82,8 +82,11 @@ export const app = (window.app = createApp({
       layerCount.value = countLayers;
       const colors = extrusionColor instanceof Array ? extrusionColor : [extrusionColor];
       const currentSettings = {
+        startLayer: 1,
+        enableStartLayer: false,
         maxLayer: countLayers,
         endLayer: countLayers,
+        enableEndLayer: false,
         singleLayerMode,
         renderTravel,
         travelColor: '#' + travelColor.getHexString(),
@@ -223,8 +226,8 @@ export const app = (window.app = createApp({
       });
 
       watchEffect(() => {
-        preview.startLayer = +settings.value.startLayer;
-        preview.endLayer = +settings.value.endLayer;
+        preview.startLayer = settings.value.enableStartLayer ? +settings.value.startLayer : undefined;
+        preview.endLayer = settings.value.enableEndLayer ? +settings.value.endLayer : undefined;
       });
 
       watchEffect(() => {

demo/js/presets.js

@@ -23,6 +23,7 @@ export const presets = {
       original: 'https://www.thingiverse.com/thing:387266'
     },
     extrusionWidth: 0.5,
+    lineHeight: 0.3,
     extrusionColor: ['#95dfa1'],
     travelColor: 'red',
     topLayerColor: undefined,
@@ -69,6 +70,7 @@ export const presets = {
       original: 'https://www.thingiverse.com/thing:1013494'
     },
     lineWidth: 1,
+    lineHeight: 0.3,
     renderExtrusion: true,
     renderTubes: true,
     extrusionColor: ['#919191'],

demo/style.css

@@ -309,3 +309,7 @@ footer {
 .is-size-8 {
   font-size: 0.6rem !important;
 }
+
+.widget.right.bottom {
+  max-width: 25vw;
+}

package-lock.json

@@ -28,7 +28,8 @@ import {
   Scene,
   ShaderMaterial,
   Vector3,
-  WebGLRenderer
+  WebGLRenderer,
+  MathUtils
 } from 'three';
 
 /**
@@ -402,77 +403,114 @@ export class WebGLPreview {
    * Gets the current start layer (1-based index)
    * @returns Start layer number
    */
-  get startLayer(): number {
+  get startLayer(): number | undefined {
     return this._startLayer;
   }
 
   /**
    * Sets the start layer (1-based index)
    * @param value - Layer number to start rendering from
    */
-  set startLayer(value: number) {
-    if (this.countLayers > 1 && value > 0) {
-      this._startLayer = value;
-      if (value <= this.countLayers) {
-        const layer = this.job.layers[value - 1];
-        this.materials.forEach((material) => {
-          material.uniforms.clipMinY.value = layer.z;
-        });
-        this.updateLineClipping();
-      } else {
-        this.materials.forEach((material) => {
-          material.uniforms.clipMinY.value = -Infinity;
-        });
-        this.updateLineClipping();
-      }
+  set startLayer(value: number | undefined) {
+    if (typeof value === 'number') {
+      this._startLayer = MathUtils.clamp(value, 1, this.countLayers);
+    } else {
+      this._startLayer = undefined;
     }
+
+    this.updateClippingPlanes();
   }
 
-  private updateLineClipping() {
-    if (this._startLayer && this._endLayer) {
-      const minZ = this.job.layers[this._startLayer - 1]?.z || 0;
-      const maxZ = this.job.layers[this._endLayer - 1]?.z || 0;
+  /**
+   * Updates the clipping planes for the 3D preview based on the start and end layers.
+   *
+   * This method calculates the minimum and maximum Z values from the specified start and end layers.
+   * If the start layer is not defined, the minimum Z value defaults to 0.
+   * If the end layer is not defined, the maximum Z value defaults to Infinity.
+   *
+   * It then updates the clipping planes for shader materials and line clipping using these Z values.
+   *
+   * @private
+   */
+  private updateClippingPlanes() {
+    const minZ = !this._startLayer ? 0 : this.job.layers[this._startLayer - 1]?.z ?? 0;
 
-      this.scene.traverse((obj) => {
-        if (obj instanceof LineSegments2) {
-          const material = obj.material as LineMaterial;
-          material.clippingPlanes = [new Plane(new Vector3(0, 1, 0), -minZ), new Plane(new Vector3(0, -1, 0), maxZ)];
-        }
-      });
-    }
+    const maxZ = !this._endLayer ? Infinity : this.job.layers[this._endLayer - 1]?.z ?? Infinity;
+
+    this.updateClippingPlanesForShaderMaterials(minZ, maxZ);
+    this.updateLineClipping(minZ, maxZ);
+  }
+
+  /**
+   * Updates the clipping planes for all shader materials in the scene.
+   * This method sets the min and max Z values for the clipping planes in the shader materials.
+   *
+   * @param minZ - The minimum Z value for the clipping plane.
+   * @param maxZ - The maximum Z value for the clipping plane
+   */
+
+  private updateClippingPlanesForShaderMaterials(minZ: number, maxZ: number) {
+    this.materials.forEach((material) => {
+      material.uniforms.clipMinY.value = minZ;
+      material.uniforms.clipMaxY.value = maxZ;
+    });
+  }
+
+  /**
+   * Applies clipping planes to the specified material based on the minimum and maximum Z values.
+   *
+   * This method creates clipping planes for the top and bottom of the specified Z range,
+   * then applies them to the material's clippingPlanes property.
+   *
+   * @param material - Shader material to apply clipping planes to
+   * @param minZ - The minimum Z value for the clipping plane.
+   * @param maxZ - The maximum Z value for the clipping plane.
+   */
+  private applyMinMaxClippingPlanes(material: Material, minZ: number, maxZ: number) {
+    material.clippingPlanes = [new Plane(new Vector3(0, 1, 0), -minZ), new Plane(new Vector3(0, -1, 0), maxZ)];
+  }
+
+  /**
+   * Updates the clipping planes for all `LineSegments2` objects in the scene.
+   * This method filters the scene's children to find instances of `LineSegments2`,
+   * then applies the clipping planes to their materials.
+   *
+   * @param minZ - The minimum Z value for the clipping plane.
+   * @param maxZ - The maximum Z value for the clipping plane.
+   */
+  private updateLineClipping(minZ: number, maxZ: number) {
+    this.scene.traverse((obj) => {
+      if (obj instanceof LineSegments2) {
+        const material = obj.material as LineMaterial;
+        this.applyMinMaxClippingPlanes(material, minZ, maxZ);
+      }
+    });
   }
 
   /**
    * Gets the current end layer (1-based index)
    * @returns End layer number
    */
-  get endLayer(): number {
+  get endLayer(): number | undefined {
     return this._endLayer;
   }
 
   /**
    * Sets the end layer (1-based index)
    * @param value - Layer number to end rendering at
    */
-  set endLayer(value: number) {
-    if (this.countLayers > 1 && value > 0) {
-      this._endLayer = value;
-      if (this._singleLayerMode === true) {
-        this.startLayer = this._endLayer - 1;
-      }
-      if (value <= this.countLayers) {
-        const layer = this.job.layers[value - 1];
-        this.materials.forEach((material) => {
-          material.uniforms.clipMaxY.value = layer.z;
-        });
-        this.updateLineClipping();
-      } else {
-        this.materials.forEach((material) => {
-          material.uniforms.clipMaxY.value = Infinity;
-        });
-        this.updateLineClipping();
-      }
+  set endLayer(value: number | undefined) {
+    if (typeof value === 'number') {
+      this._endLayer = MathUtils.clamp(value, 1, this.countLayers);
+    } else {
+      this._endLayer = undefined;
+    }
+
+    if (this._singleLayerMode === true) {
+      this.startLayer = this._endLayer - 1;
     }
+
+    this.updateClippingPlanes();
   }
 
   /**
@@ -778,15 +816,16 @@ export class WebGLPreview {
    * @param color - Color to use for the lines
    */
   private renderPathsAsLines(paths: Path[], color: Color): void {
+    const minZ = this.job.layers[this._startLayer - 1]?.z ?? 0;
+    const maxZ = this.job.layers[this._endLayer - 1]?.z ?? Infinity;
+
     const material = new LineMaterial({
       color: Number(color.getHex()),
-      linewidth: this.lineWidth,
-      clippingPlanes: [
-        new Plane(new Vector3(0, 1, 0), this._startLayer ? -this.job.layers[this._startLayer - 1].z : 0),
-        new Plane(new Vector3(0, -1, 0), this._endLayer ? this.job.layers[this._endLayer - 1].z : 0)
-      ]
+      linewidth: this.lineWidth
     });
 
+    this.applyMinMaxClippingPlanes(material, minZ, maxZ);
+
     const lineVertices: number[] = [];
 
     // lines need to be offset.
@@ -819,12 +858,6 @@ export class WebGLPreview {
     const colorNumber = Number(color.getHex());
     const geometries: BufferGeometry[] = [];
 
-    // const material = new MeshLambertMaterial({
-    //   color: colorNumber,
-    //   wireframe: this._wireframe,
-    //   clippingPlanes: this.clippingPlanes
-    // });
-
     const material = createColorMaterial(colorNumber, this.ambientLight, this.directionalLight, this.brightness);
 
     this.materials.push(material);
@@ -840,7 +873,6 @@ export class WebGLPreview {
 
     const batchedMesh = this.createBatchMesh(geometries, material);
     this.disposables.push(material);
-    // this.disposables.push(batchedMesh);
 
     this.group?.add(batchedMesh);
   }