Merge branch 'develop' into introduce-indexers

Author: sophiedeziel

demo/js/app.js

@@ -12,7 +12,6 @@ const statsContainer = () => document.querySelector('.sidebar');
 const loadProgressive = true;
 let observer = null;
 let preview = null;
-let firstRender = true;
 
 export const app = (window.app = createApp({
   setup() {
@@ -113,19 +112,20 @@ export const app = (window.app = createApp({
       const prevDevMode = preview.devMode;
       preview.clear();
       preview.devMode = prevDevMode;
+      const { commands } = preview.parser.parseGCode(gcode);
+      preview.interpreter.execute(commands, preview.job);
 
-      if (loadProgressive) {
-        const { commands } = preview.parser.parseGCode(gcode);
-        preview.interpreter.execute(commands, preview.job);
-        if (preview.job.layers === null) {
-          console.warn('Job is not planar');
+      render();
+    };
+
+    const render = async () => {
+      debounce(async () => {
+        if (loadProgressive) {
+          await preview.renderAnimated(Math.ceil(preview.job.layers.length / 60));
+        } else {
           preview.render();
-          return;
         }
-        await preview.renderAnimated(Math.ceil(preview.job.layers.length / 60));
-      } else {
-        preview.processGCode(gcode);
-      }
+      });
     };
 
     const loadDroppedFile = async (file) => {
@@ -138,7 +138,6 @@ export const app = (window.app = createApp({
     };
 
     const selectPreset = async (presetName) => {
-      firstRender = true;
       const canvas = document.querySelector('canvas.preview');
       const preset = presets[presetName];
       fileName.value = preset.file.replace(/^.*?\//, '');
@@ -188,11 +187,7 @@ export const app = (window.app = createApp({
         preview.buildVolume = settings.value.drawBuildVolume ? settings.value.buildVolume : undefined;
         preview.backgroundColor = settings.value.backgroundColor;
 
-        if (!firstRender) {
-          preview.render();
-        } else {
-          firstRender = false;
-        }
+        render();
       });
 
       watchEffect(() => {
@@ -211,9 +206,7 @@ export const app = (window.app = createApp({
         preview.topLayerColor = settings.value.highlightTopLayer ? settings.value.topLayerColor : undefined;
         preview.lastSegmentColor = settings.value.highlightLastSegment ? settings.value.lastSegmentColor : undefined;
 
-        debounce(() => {
-          preview.renderAnimated(Math.ceil(preview.job.layers.length / 60));
-        });
+        render();
       });
     });
 

src/__tests__/build-volume.ts

@@ -0,0 +1,94 @@
+import { test, describe, expect, vi } from 'vitest';
+import { BuildVolume } from '../build-volume';
+import { AxesHelper } from 'three';
+import { Grid } from '../helpers/grid';
+import { LineBox } from '../helpers/line-box';
+
+describe('BuildVolume', () => {
+  test('it has a default color', () => {
+    const buildVolume = new BuildVolume();
+
+    expect(buildVolume.color).toEqual(0x888888);
+  });
+
+  test('it has size properties', () => {
+    const buildVolume = new BuildVolume(10, 20, 30);
+
+    expect(buildVolume.x).toEqual(10);
+    expect(buildVolume.y).toEqual(20);
+    expect(buildVolume.z).toEqual(30);
+  });
+
+  describe('.createAxes', () => {
+    test('it creates an AxesHelper', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes).toBeDefined();
+      expect(axes).toBeInstanceOf(AxesHelper);
+    });
+
+    test('it scales the axes', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes.scale).toEqual({ x: 1, y: 1, z: -1 });
+    });
+
+    test('it positions the axes', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes.position).toEqual({ x: -5, y: 0, z: 10 });
+    });
+  });
+
+  describe('.createGrid', () => {
+    test('it creates a Grid', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const grid = buildVolume.createGrid();
+
+      expect(grid).toBeDefined();
+      expect(grid).toBeInstanceOf(Grid);
+    });
+  });
+
+  describe('.createGroup', () => {
+    test('it creates a group for all the objects', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const group = buildVolume.createGroup();
+
+      expect(group).toBeDefined();
+      expect(group.children.length).toEqual(3);
+
+      expect(group.children[0]).toBeInstanceOf(LineBox);
+      expect(group.children[1]).toBeInstanceOf(Grid);
+      expect(group.children[2]).toBeInstanceOf(AxesHelper);
+    });
+  });
+
+  describe('.dispose', () => {
+    test('it calls dispose on all disposables', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+      const grid = buildVolume.createGrid();
+      const lineBox = buildVolume.createLineBox();
+
+      const axesSpy = vi.spyOn(axes, 'dispose');
+      const gridSpy = vi.spyOn(grid, 'dispose');
+      const lineBoxSpy = vi.spyOn(lineBox, 'dispose');
+
+      buildVolume.dispose();
+
+      expect(axesSpy).toHaveBeenCalled();
+      expect(gridSpy).toHaveBeenCalled();
+      expect(lineBoxSpy).toHaveBeenCalled();
+    });
+  });
+});

src/build-volume.ts

@@ -0,0 +1,59 @@
+import { Grid } from './helpers/grid';
+import { AxesHelper, Group, Vector3 } from 'three';
+import { LineBox } from './helpers/line-box';
+import { type Disposable } from './helpers/three-utils';
+
+export class BuildVolume {
+  x: number;
+  y: number;
+  z: number;
+  color: number;
+  private disposables: Disposable[] = [];
+
+  constructor(x: number, y: number, z: number, color: number = 0x888888) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.color = color;
+  }
+
+  createAxes(): AxesHelper {
+    const axes = new AxesHelper(10);
+
+    const scale = new Vector3(1, 1, 1);
+    scale.z *= -1;
+
+    axes.scale.multiply(scale);
+    axes.position.setZ(this.y / 2);
+    axes.position.setX(-this.x / 2);
+
+    this.disposables.push(axes);
+
+    return axes;
+  }
+
+  createGrid(): Grid {
+    const grid = new Grid(this.x, 10, this.y, 10, this.color);
+    this.disposables.push(grid);
+    return grid;
+  }
+
+  createLineBox(): LineBox {
+    const lineBox = new LineBox(this.x, this.z, this.y, this.color);
+    this.disposables.push(lineBox);
+    return lineBox;
+  }
+
+  createGroup(): Group {
+    const group = new Group();
+    group.add(this.createLineBox());
+    group.add(this.createGrid());
+    group.add(this.createAxes());
+
+    return group;
+  }
+
+  dispose(): void {
+    this.disposables.forEach((disposable) => disposable.dispose());
+  }
+}

src/gridHelper.ts

@@ -0,0 +1,88 @@
+import { BufferGeometry, Color, Float32BufferAttribute, LineBasicMaterial, LineSegments } from 'three';
+
+class Grid extends LineSegments {
+  constructor(
+    sizeX: number, // Size along the X axis
+    stepX: number, // Step distance along the X axis
+    sizeZ: number, // Size along the Z axis
+    stepZ: number, // Step distance along the Z axis
+    color: Color | string | number = 0x888888 // Single color for all grid lines
+  ) {
+    // Convert color input to a Color object
+    color = new Color(color);
+
+    // Calculate the number of steps along each axis
+    const xSteps = Math.round(sizeX / stepX);
+    const zSteps = Math.round(sizeZ / stepZ);
+
+    // Adjust sizes to center the grid
+    const halfSizeX = (xSteps * stepX) / 2;
+    const halfSizeZ = (zSteps * stepZ) / 2;
+
+    const vertices: number[] = [];
+    const colors: number[] = [];
+    let j = 0;
+
+    // Generate vertices and colors for lines parallel to the X-axis (moving along Z)
+    for (let z = -halfSizeZ; z <= halfSizeZ; z += stepZ) {
+      vertices.push(
+        -halfSizeX,
+        0,
+        z, // Start point (on the X-axis)
+        halfSizeX,
+        0,
+        z // End point (on the X-axis)
+      );
+
+      // Assign the same color to all lines
+      color.toArray(colors, j);
+      j += 3;
+      color.toArray(colors, j);
+      j += 3;
+    }
+
+    // Generate vertices and colors for lines parallel to the Z-axis (moving along X)
+    for (let x = -halfSizeX; x <= halfSizeX; x += stepX) {
+      vertices.push(
+        x,
+        0,
+        -halfSizeZ, // Start point (on the Z-axis)
+        x,
+        0,
+        halfSizeZ // End point (on the Z-axis)
+      );
+
+      // Assign the same color to all lines
+      color.toArray(colors, j);
+      j += 3;
+      color.toArray(colors, j);
+      j += 3;
+    }
+
+    // Create BufferGeometry and assign the vertices and colors
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('color', new Float32BufferAttribute(colors, 3));
+
+    // Create material for the grid lines
+    const material = new LineBasicMaterial({ vertexColors: true, toneMapped: false });
+
+    // Call the parent class constructor with the geometry and material
+    super(geometry, material);
+  }
+
+  // Override the type property for clarity and identification
+  override readonly type = 'GridHelper';
+
+  // Add dispose method for resource management
+  dispose() {
+    this.geometry.dispose();
+    if (Array.isArray(this.material)) {
+      this.material.forEach((material) => material.dispose());
+    } else {
+      this.material.dispose();
+    }
+  }
+}
+
+export { Grid };