+
+
+
+ {/* The cut sheet stays mounted behind the 3D view: Download SVG reads
+ the drawing straight out of the DOM, so hiding it beats unmounting
+ it. */}
+
+
-
Calibration square is {table.calibrationSquareSize} {table.units}
-
-
-
-
-
-
+ {view3D && (
+
+ Loading the 3D view…}>
+
+
+
+ )}
+
+
)
}
diff --git a/src/components/SVGDownloadButton.tsx b/src/components/SVGDownloadButton.tsx
index cc8ef95..f394f6f 100644
--- a/src/components/SVGDownloadButton.tsx
+++ b/src/components/SVGDownloadButton.tsx
@@ -1,52 +1,47 @@
+import { Table } from '../models/Table';
+import { downloadBlob } from '../lib/download';
+import { exportFilename } from '../lib/filename';
+import { buttonClasses } from '../lib/styles';
-export default function SVGDownloadButton(props: {className: string}) {
+export default function SVGDownloadButton(props: {className: string, table: Table}) {
const handleDownload = () => {
- // Find the SVG element
- const svgElement = document.getElementById(props.className);
-
- if (!svgElement) {
+ // Find the container holding the on-screen SVG.
+ const container = document.getElementById(props.className);
+
+ if (!container) {
console.error('SVG element not found');
return;
}
- // Get the SVG content
- const svgContent = svgElement.innerHTML;
-
- // Create a Blob from the SVG content
- const blob = new Blob([svgContent], { type: 'image/svg+xml' });
-
- // Create a URL for the Blob
- const url = URL.createObjectURL(blob);
-
- // Create a temporary link element
- const link = document.createElement('a');
- link.href = url;
- link.download = 'layout.svg';
-
- // Append link to body, click it, and remove it
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
-
- // Clean up the URL object
- URL.revokeObjectURL(url);
+ const svg = container.querySelector('svg');
+
+ if (!svg) {
+ console.error('SVG element not found');
+ return;
+ }
+
+ // Clone so we can give the exported file a real-world size without
+ // touching the responsive on-screen version. Setting width/height with
+ // the unit suffix makes 1 user unit = 1 unit of length, so drawings
+ // exported in mm come out at 1px = 1mm.
+ const clone = svg.cloneNode(true) as SVGSVGElement;
+ const viewBox = clone.getAttribute('viewBox');
+ if (viewBox) {
+ const [, , width, height] = viewBox.split(/\s+/).map(Number);
+ clone.setAttribute('width', `${width}${props.table.units}`);
+ clone.setAttribute('height', `${height}${props.table.units}`);
+ }
+ clone.removeAttribute('class');
+
+ // Serialize the cleaned-up SVG.
+ const svgContent = new XMLSerializer().serializeToString(clone);
+
+ downloadBlob(new Blob([svgContent], { type: 'image/svg+xml' }), exportFilename(props.table, 'svg'));
};
return (
- <>
-
-
-
);
};
diff --git a/src/components/SideRail.tsx b/src/components/SideRail.tsx
index 0c3e20d..36c3a16 100644
--- a/src/components/SideRail.tsx
+++ b/src/components/SideRail.tsx
@@ -28,7 +28,8 @@ export default class SideRail extends SVGComponent {
pathstr += `M ${length - sparInset} ${thickness * 0.25}`;
pathstr += `L ${length - sparInset} ${thickness * 0.75}`;
} else {
- const buffer = material / 2;
+ // Gap between the two pieces a too-long rail is split into.
+ const buffer = this.props.table.effectivePartMargin;
let firstLength = maxLength;
const safeCutPoint = xSparGap + (4 * material) + sparInset;
if (length - firstLength < safeCutPoint) {
diff --git a/src/components/Table3DView.tsx b/src/components/Table3DView.tsx
new file mode 100644
index 0000000..45b154a
--- /dev/null
+++ b/src/components/Table3DView.tsx
@@ -0,0 +1,789 @@
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
+import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
+import { Table } from '../models/Table';
+import { crossLayout } from '../lib/layout3d';
+import * as THREE from 'three';
+import { useEffect, useRef, useState, useMemo } from 'react';
+
+type Table3DViewProps = {
+ table: Table;
+};
+
+// One colour per part, so a crowded frame is still readable: warm tones for the
+// sheet goods you are cutting, grey for the machine's own rails.
+const partColors = {
+ ySpar: '#e0b888',
+ xSpar: '#8b5a3c',
+ sideRail: '#999999',
+ topRail1: '#bbbbbb',
+ topRail2: '#999999',
+ tubeRail1: '#aaaaaa',
+ tubeRail2: '#888888',
+ spoilboard: '#d4a574',
+};
+
+// Turned a little off square, so the first thing you see is a three-quarter
+// view with some depth to it rather than a flat elevation.
+const defaultViewRotation = -0.42;
+
+// Y Spar component (base layer)
+function YSpar3D({ table, index, color }: { table: Table; index: number; color: string }) {
+ const thickness = table.thickness;
+ const material = table.material;
+ const overhang = table.overhang;
+ const yCut = table.yCut - (2 * overhang);
+ const ySparGap = table.ySparGap;
+ const xSparCount = table.xSparCount;
+ const xSparGap = table.xSparGap;
+ // Slots are open at the top here, so their floor sits this far up from the
+ // bottom edge. Reads the same slot depth the cut paths use, so the overcut
+ // setting shows up in the model.
+ const slotFloor = thickness - table.slotDepth;
+
+ // Position along X axis
+ const xPosition = (index * ySparGap) + overhang - (table.xCut / 2);
+
+ // Create geometry with mortises for X spars - standing on edge
+ // Y spars run along Z direction (yCut length)
+ const shape = new THREE.Shape();
+ shape.moveTo(0, 0);
+ shape.lineTo(0, slotFloor);
+
+ // Mortises are gaps in the top half
+ const xMortises = xSparCount - 1;
+ for (let i = 0; i < xMortises; i++) {
+ const z = (i * xSparGap);
+ shape.lineTo(z + material, slotFloor);
+ shape.lineTo(z + material, thickness);
+ shape.lineTo(z + xSparGap, thickness);
+ shape.lineTo(z + xSparGap, slotFloor);
+ }
+
+ shape.lineTo(yCut, slotFloor);
+ shape.lineTo(yCut, 0);
+ shape.lineTo(0, 0);
+
+ const extrudeSettings = {
+ depth: material,
+ bevelEnabled: false,
+ };
+
+ const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+ geometry.rotateY(-Math.PI / 2);
+ geometry.rotateX(-Math.PI / 2);
+ geometry.rotateY(Math.PI);
+ geometry.translate(-material / 2, -yCut / 2, 0);
+
+ // xPosition is the spar's near face, matching the mortise it drops into, so
+ // shift by half its thickness to place the middle of the part.
+ return (
+
+
+
+ );
+}
+
+// X Spar component (top layer)
+function XSpar3D({ table, index, color }: { table: Table; index: number; color: string }) {
+ const thickness = table.thickness;
+ const material = table.material;
+ const flatBuffer = table.flatBuffer;
+ const railBuffer = table.railBuffer;
+ const xShrink = table.xSparRailShrink;
+ const flatOutsideBuffer = table.flatOutsideBuffer;
+ const railOutsideBuffer = table.railOutsideBuffer;
+ const xCut = table.xCut + flatBuffer + railBuffer - xShrink + flatOutsideBuffer + railOutsideBuffer;
+ const overhang = table.overhang;
+ const ySparCount = table.ySparCount;
+ const ySparGap = table.ySparGap;
+ const xSparGap = table.xSparGap;
+ const yCut = table.yCut;
+ // Slots are open at the bottom here, so this is how far up they reach.
+ const slotDepth = table.slotDepth;
+
+ // Position along Z axis (perpendicular to Y spars)
+ const zPosition = (index * xSparGap) + overhang - (yCut / 2);
+
+ // Create geometry - stands on edge, runs along X axis, notches at bottom
+ const shape = new THREE.Shape();
+ const start = flatBuffer + flatOutsideBuffer + overhang - (xShrink / 2);
+
+ // Build path starting from bottom left
+ if (start == 0) {
+ shape.moveTo(0, slotDepth);
+ } else {
+ shape.moveTo(0, 0);
+ }
+
+ // Create notches from the bottom edge for Y spars
+ for (let i = 0; i < ySparCount; i++) {
+ const x = (i * ySparGap) + start;
+ if (x != 0) {
+ shape.lineTo(x, 0);
+ }
+ shape.lineTo(x, slotDepth);
+ shape.lineTo(x + material, slotDepth);
+
+ if (x + material != xCut) {
+ shape.lineTo(x + material, 0);
+ }
+ }
+
+ if (start != 0) {
+ shape.lineTo(xCut, 0);
+ }
+
+ shape.lineTo(xCut, thickness);
+ shape.lineTo(0, thickness);
+ shape.lineTo(0, start == 0 ? slotDepth : 0);
+
+ const extrudeSettings = {
+ depth: material,
+ bevelEnabled: false,
+ };
+
+ const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+ // Stand on edge, running along X axis. After the quarter turn the part
+ // occupies x 0..xCut along the table, y -material..0 across it, and
+ // z 0..thickness vertically; the translate puts its left end on the spar
+ // anchor, its near face on zero, and its underside on the ground.
+ geometry.rotateX(Math.PI / 2);
+ geometry.translate(crossLayout(table).sparLeft, material, 0);
+
+ return (
+
+
+
+ );
+}
+
+// Helper function to create rail geometry with mounting holes
+function createRailWithHoles(table: Table, width: number, length: number, thickness: number, isRail: boolean, startOffset: number = 0) {
+ const holeSize = table.holeSize;
+ const outsideBuffer = isRail ? table.railOutsideBuffer : table.flatOutsideBuffer;
+ const trackWidth = isRail ? table.railTrackWidth : table.flatTrackWidth;
+
+ // Get hole coordinates from table. The setbacks run along the rail and are
+ // the same whichever side it is on; the positions across it get adjusted
+ // below, so only those are reassigned.
+ const frontHoles = table.frontHoleCoordinates;
+ const backHoles = table.backHoleCoordinates;
+
+ const [yFrontSetback] = frontHoles;
+ const [yBackFirstSetback, yBackSecondSetback] = backHoles;
+
+ let [, yFrontFirstX, yFrontSecondX] = frontHoles;
+ let [, , yBackFirstX, yBackSecondX] = backHoles;
+
+ // Adjust hole positions based on rail type
+ if (isRail) {
+ yFrontFirstX = trackWidth - yFrontFirstX - outsideBuffer;
+ yFrontSecondX = trackWidth - yFrontSecondX - outsideBuffer;
+ yBackFirstX = trackWidth - yBackFirstX - outsideBuffer;
+ yBackSecondX = trackWidth - yBackSecondX - outsideBuffer;
+ } else {
+ yFrontFirstX += outsideBuffer;
+ yFrontSecondX += outsideBuffer;
+ yBackFirstX += outsideBuffer;
+ yBackSecondX += outsideBuffer;
+ }
+
+ const shape = new THREE.Shape();
+ shape.moveTo(0, 0);
+ shape.lineTo(width, 0);
+ shape.lineTo(width, length);
+ shape.lineTo(0, length);
+ shape.lineTo(0, 0);
+
+ const holes: Array<{x: number, y: number}> = [];
+
+ // Add holes for front mounting points (only if within this piece)
+ if (yFrontSetback >= startOffset && yFrontSetback <= startOffset + length) {
+ const localY = yFrontSetback - startOffset;
+ const hole1 = new THREE.Path();
+ hole1.absarc(yFrontFirstX, localY, holeSize / 2, 0, Math.PI * 2, false);
+ shape.holes.push(hole1);
+ holes.push({x: yFrontFirstX, y: localY});
+
+ const hole2 = new THREE.Path();
+ hole2.absarc(yFrontSecondX, localY, holeSize / 2, 0, Math.PI * 2, false);
+ shape.holes.push(hole2);
+ holes.push({x: yFrontSecondX, y: localY});
+ }
+
+ // Add holes for back mounting points (only if within this piece)
+ const totalLength = table.yCut + table.yBuffer;
+ const backHoleY1 = totalLength - yBackFirstSetback;
+ const backHoleY2 = totalLength - yBackSecondSetback;
+
+ if (backHoleY1 >= startOffset && backHoleY1 <= startOffset + length) {
+ const localY = backHoleY1 - startOffset;
+ const hole3 = new THREE.Path();
+ hole3.absarc(yBackFirstX, localY, holeSize / 2, 0, Math.PI * 2, false);
+ shape.holes.push(hole3);
+ holes.push({x: yBackFirstX, y: localY});
+ }
+
+ if (backHoleY2 >= startOffset && backHoleY2 <= startOffset + length) {
+ const localY = backHoleY2 - startOffset;
+ const hole4 = new THREE.Path();
+ hole4.absarc(yBackSecondX, localY, holeSize / 2, 0, Math.PI * 2, false);
+ shape.holes.push(hole4);
+ holes.push({x: yBackSecondX, y: localY});
+ }
+
+ // Add clip holes for tube rail (only those within this piece)
+ if (isRail) {
+ const offset = trackWidth - table.clipOffset - table.railOutsideBuffer;
+ const holeStart = table.clipsFrontSetback;
+ const clipCount = table.clipCount;
+ const clipGap = table.clipGap;
+
+ for (let clip = 0; clip < clipCount; clip++) {
+ const clipY = (clip * clipGap) + holeStart;
+ if (clipY >= startOffset && clipY <= startOffset + length) {
+ const localY = clipY - startOffset;
+ const clipHole = new THREE.Path();
+ clipHole.absarc(offset, localY, holeSize / 2, 0, Math.PI * 2, false);
+ shape.holes.push(clipHole);
+ holes.push({x: offset, y: localY});
+ }
+ }
+ }
+
+ const extrudeSettings = {
+ depth: thickness,
+ bevelEnabled: false
+ };
+
+ const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+
+ // Calculate spar alignment marks positions
+ const sparInset = table.overhang + (table.yBuffer / 2);
+ const marks: Array<{y: number}> = [];
+
+ // Front mark (only if within this piece)
+ if (sparInset >= startOffset && sparInset <= startOffset + length) {
+ marks.push({y: sparInset - startOffset});
+ }
+
+ // Back mark (only if within this piece)
+ const railTotalLength = table.yCut + table.yBuffer;
+ const backMarkY = railTotalLength - sparInset;
+ if (backMarkY >= startOffset && backMarkY <= startOffset + length) {
+ marks.push({y: backMarkY - startOffset});
+ }
+
+ return { geometry, holes, marks };
+}
+
+// Rails component - SideRails that connect to ends of X spars
+function Rails3D({ table, showSideRails, showTopRail1, showTopRail2, showTubeRail1, showTubeRail2 }: {
+ table: Table;
+ showSideRails: boolean;
+ showTopRail1: boolean;
+ showTopRail2: boolean;
+ showTubeRail1: boolean;
+ showTubeRail2: boolean;
+}) {
+ const thickness = table.thickness;
+ const railMaterialThickness = table.railMaterialThickness;
+ const material = table.material;
+ const yCut = table.yCut;
+ const overhang = table.overhang;
+ const xSparGap = table.xSparGap;
+ const yBuffer = table.yBuffer;
+ const length = yCut + yBuffer;
+ const railTrackWidth = table.railTrackWidth;
+ const flatTrackWidth = table.flatTrackWidth;
+
+ const rails = [];
+
+ // Side rails cap the ends of the X spars, so they run along Y at the two
+ // ends of the shared cross-table layout.
+ const layout = crossLayout(table);
+ const leftEnd = layout.sparLeft - (railMaterialThickness / 2);
+ const rightEnd = layout.sparRight + (railMaterialThickness / 2);
+
+ // Alignment marks: a nick proud of the rail's inner face, sized off the rail
+ // stock so it stays visible whatever units the table is in.
+ const markDepth = railMaterialThickness * 0.15;
+ const markWidth = railMaterialThickness * 0.25;
+
+ // Left side rail (at left end of X spars)
+ if (showSideRails) {
+ const sparInset = overhang + (yBuffer / 2);
+ rails.push(
+
+
+
+
+
+ {/* Alignment marks at sparInset positions (front and back) */}
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ // Right side rail (at right end of X spars)
+ if (showSideRails) {
+ const sparInset = overhang + (yBuffer / 2);
+ rails.push(
+
+
+
+
+
+ {/* Alignment marks at sparInset positions (front and back) */}
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ // Top rails sit flat on top of side rails and X spars
+ // Left gets flat rail (wider), right gets tube rail (narrower)
+ // Rails lay flat, not on edge, aligned with inner edge of side rails
+
+ // Check if rails need to be split into two pieces
+ const maxLength = table.trackCutPoint;
+ const sparInset = overhang + (yBuffer / 2);
+ const needsSplit = length > maxLength;
+
+ let firstLength = maxLength;
+ if (needsSplit) {
+ const safeCutPoint = xSparGap + (4 * material) + sparInset;
+ if (length - firstLength < safeCutPoint) {
+ firstLength = length - safeCutPoint;
+ }
+ }
+
+ const secondLength = length - firstLength;
+
+ // Pre-compute all geometries (must be unconditional for React hooks)
+ const flatRailData1 = useMemo(() =>
+ createRailWithHoles(table, flatTrackWidth, firstLength, railMaterialThickness, false, 0),
+ [table, flatTrackWidth, firstLength, railMaterialThickness]);
+
+ const flatRailData2 = useMemo(() =>
+ createRailWithHoles(table, flatTrackWidth, secondLength, railMaterialThickness, false, firstLength),
+ [table, flatTrackWidth, secondLength, railMaterialThickness, firstLength]);
+
+ const flatRailDataSingle = useMemo(() =>
+ createRailWithHoles(table, flatTrackWidth, length, railMaterialThickness, false, 0),
+ [table, flatTrackWidth, length, railMaterialThickness]);
+
+ const tubeRailData1 = useMemo(() =>
+ createRailWithHoles(table, railTrackWidth, firstLength, railMaterialThickness, true, 0),
+ [table, railTrackWidth, firstLength, railMaterialThickness]);
+
+ const tubeRailData2 = useMemo(() =>
+ createRailWithHoles(table, railTrackWidth, secondLength, railMaterialThickness, true, firstLength),
+ [table, railTrackWidth, secondLength, railMaterialThickness, firstLength]);
+
+ const tubeRailDataSingle = useMemo(() =>
+ createRailWithHoles(table, railTrackWidth, length, railMaterialThickness, true, 0),
+ [table, railTrackWidth, length, railMaterialThickness]);
+
+ // Rails are a Lowrider 4 thing. Bailing out here rather than at the top
+ // of the component keeps the hooks above unconditional.
+ if (table.configuration !== "LR4") return null;
+
+ // Left flat rail (wider) - laying flat, aligned with inner edge
+ // Outer edge on the outside of the left side rail. The outside buffer is
+ // part of flatTrackWidth, so the track datum stays put as it changes.
+ const xPos = layout.railLeft + (flatTrackWidth / 2);
+
+ if (needsSplit) {
+ // First piece
+ if (showTopRail1) {
+ const pos: [number, number, number] = [xPos - flatTrackWidth / 2, -length / 2, thickness];
+ rails.push(
+
+
+
+
+
+ {flatRailData1.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {flatRailData1.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+
+ // Second piece
+ if (showTopRail2) {
+ const pos: [number, number, number] = [xPos - flatTrackWidth / 2, length / 2 - secondLength, thickness];
+ rails.push(
+
+
+
+
+
+ {flatRailData2.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {flatRailData2.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+ } else {
+ // Single piece - use first piece settings when not split
+ if (showTopRail1) {
+ const pos: [number, number, number] = [xPos - flatTrackWidth / 2, -length / 2, thickness];
+ rails.push(
+
+
+
+
+
+ {flatRailDataSingle.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {flatRailDataSingle.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+ }
+
+ // Right tube rail (narrower) - laying flat, aligned with inner edge
+ // Mirror of the flat rail: outer edge on the outside of the right side rail.
+ const xPosRight = layout.railRight - (railTrackWidth / 2);
+
+ if (needsSplit) {
+ // First piece
+ if (showTubeRail1) {
+ const pos: [number, number, number] = [xPosRight - railTrackWidth / 2, -length / 2, thickness];
+ rails.push(
+
+
+
+
+
+ {tubeRailData1.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {tubeRailData1.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+
+ // Second piece
+ if (showTubeRail2) {
+ const pos: [number, number, number] = [xPosRight - railTrackWidth / 2, length / 2 - secondLength, thickness];
+ rails.push(
+
+
+
+
+
+ {tubeRailData2.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {tubeRailData2.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+ } else {
+ // Single piece - use first piece settings when not split
+ if (showTubeRail1) {
+ const pos: [number, number, number] = [xPosRight - railTrackWidth / 2, -length / 2, thickness];
+ rails.push(
+
+
+
+
+
+ {tubeRailDataSingle.holes.map((hole, i) => (
+
+
+
+
+ ))}
+ {tubeRailDataSingle.marks.map((mark, i) => (
+
+
+
+
+ ))}
+
+ );
+ }
+ }
+
+ return <>{rails};
+}
+
+// Spoilboard component (top surface)
+function Spoilboard({ table, color }: { table: Table; color: string }) {
+ const xCut = table.xCut;
+ const yCut = table.yCut;
+ const thickness = table.thickness;
+ const railMaterialThickness = table.railMaterialThickness;
+
+ // Spoilboard sits on top of everything
+ const zPosition = thickness + railMaterialThickness / 2;
+
+ return (
+
+
+
+
+ );
+}
+
+export default function Table3DView(props: Table3DViewProps) {
+ const table = props.table;
+ const ySparCount = table.ySparCount;
+ const xSparCount = table.xSparCount;
+
+ // Scale factor to normalize view regardless of units (scale to inches as baseline)
+ const scaleToInches = {
+ "mm": 1 / 25.4,
+ "cm": 1 / 2.54,
+ "in": 1,
+ }[table.units];
+
+ // Visibility state for each part type
+ const [showYSpars, setShowYSpars] = useState(true);
+ const [showXSpars, setShowXSpars] = useState(true);
+ const [showSideRails, setShowSideRails] = useState(true);
+ const [showTopRail1, setShowTopRail1] = useState(true);
+ const [showTopRail2, setShowTopRail2] = useState(true);
+ const [showTubeRail1, setShowTubeRail1] = useState(true);
+ const [showTubeRail2, setShowTubeRail2] = useState(true);
+ const [showSpoilboard, setShowSpoilboard] = useState(true);
+ const [showGrid, setShowGrid] = useState(true);
+
+ // Z-axis rotation state
+ const groupRef = useRef(null);
+ const orbitControlsRef = useRef(null);
+ const cameraRef = useRef(null);
+ const [isRotating, setIsRotating] = useState(false);
+ const [lastMouseX, setLastMouseX] = useState(0);
+
+ // The scene is drawn in table units and the group is scaled to inches, so
+ // everything about the framing is worked out from the table's longest side.
+ // A 4x8 sheet and a small bench table then both open filling the view.
+ const span = Math.max(table.xCut, table.yCut) * scaleToInches;
+ const cameraPosition: [number, number, number] = [0, -1.35 * span, 0.62 * span];
+ const cameraTarget: [number, number, number] = [0, -0.2 * span, -0.2 * span];
+
+ // Reset view to default
+ const resetView = () => {
+ if (cameraRef.current && orbitControlsRef.current) {
+ cameraRef.current.position.set(...cameraPosition);
+ orbitControlsRef.current.target.set(...cameraTarget);
+ orbitControlsRef.current.update();
+ }
+ if (groupRef.current) {
+ groupRef.current.rotation.z = defaultViewRotation;
+ }
+ };
+
+ // Handle Z-axis rotation with Shift + Right Click
+ useEffect(() => {
+ const handleMouseDown = (e: MouseEvent) => {
+ if (e.button === 2 && e.shiftKey) { // Right click + Shift
+ e.preventDefault();
+ setIsRotating(true);
+ setLastMouseX(e.clientX);
+ }
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (isRotating && groupRef.current) {
+ const deltaX = e.clientX - lastMouseX;
+ groupRef.current.rotation.z += deltaX * 0.01;
+ setLastMouseX(e.clientX);
+ }
+ };
+
+ const handleMouseUp = (e: MouseEvent) => {
+ if (e.button === 2) {
+ setIsRotating(false);
+ }
+ };
+
+ const handleContextMenu = (e: MouseEvent) => {
+ if (e.shiftKey) {
+ e.preventDefault();
+ }
+ };
+
+ window.addEventListener('mousedown', handleMouseDown);
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ window.addEventListener('contextmenu', handleContextMenu);
+
+ return () => {
+ window.removeEventListener('mousedown', handleMouseDown);
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ window.removeEventListener('contextmenu', handleContextMenu);
+ };
+ }, [isRotating, lastMouseX]);
+
+ // Generate Y spars (base layer)
+ const ySpars = [];
+ if (showYSpars) {
+ for (let i = 0; i < ySparCount; i++) {
+ ySpars.push();
+ }
+ }
+
+ // Generate X spars (top layer)
+ const xSpars = [];
+ if (showXSpars) {
+ for (let i = 0; i < xSparCount; i++) {
+ xSpars.push();
+ }
+ }
+
+ // One row each, so the panel is a list rather than eight copies of the same
+ // six lines of markup.
+ const partToggles: [string, boolean, (on: boolean) => void][] = [
+ ['X spars', showXSpars, setShowXSpars],
+ ['Y spars', showYSpars, setShowYSpars],
+ ['Side rails', showSideRails, setShowSideRails],
+ ['Flat rail 1', showTopRail1, setShowTopRail1],
+ ['Flat rail 2', showTopRail2, setShowTopRail2],
+ ['Tube rail 1', showTubeRail1, setShowTubeRail1],
+ ['Tube rail 2', showTubeRail2, setShowTubeRail2],
+ ['Spoilboard', showSpoilboard, setShowSpoilboard],
+ ];
+
+ const toggleRow = ([label, checked, setChecked]: [string, boolean, (on: boolean) => void]) => (
+
+ );
+
+ return (
+
+ {/* Kept small and in the corner: the model is what you came for. */}
+
+
Show parts
+ {partToggles.map(toggleRow)}
+
+ {toggleRow(['Grid', showGrid, setShowGrid])}
+
+
+
Drag: orbit
+
Right-drag: pan
+
Shift right-drag: spin
+
Scroll: zoom
+
+
+
Red left–right
+
Green front–back
+
Blue up
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/TableConfigButtons.tsx b/src/components/TableConfigButtons.tsx
new file mode 100644
index 0000000..0d2050b
--- /dev/null
+++ b/src/components/TableConfigButtons.tsx
@@ -0,0 +1,71 @@
+import { useRef } from "react";
+import { Table, parseTableSnapshot } from "../models/Table";
+import { downloadBlob } from "../lib/download";
+import { exportFilename } from "../lib/filename";
+import { smallButtonClasses } from "../lib/styles";
+
+type TableConfigButtonsProps = {
+ table: Table,
+ updateTable: (c: Table) => void,
+}
+
+// Export/import of the parameter set as JSON, so a design can be kept in a file
+// or handed to someone else. Parameters are also saved in the browser on every
+// change (see lib/storage.ts) - this is for moving them between browsers.
+export default function TableConfigButtons(props: TableConfigButtonsProps) {
+ const fileInput = useRef(null);
+
+ const handleExport = () => {
+ const json = JSON.stringify(props.table.snapshot, null, 2);
+ downloadBlob(new Blob([json], { type: "application/json" }), exportFilename(props.table, "json"));
+ };
+
+ const handleImport = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+
+ // Clear the input so picking the same file twice in a row still fires.
+ e.target.value = '';
+
+ if (!file) {
+ return;
+ }
+
+ let snapshot = null;
+ try {
+ snapshot = parseTableSnapshot(JSON.parse(await file.text()));
+ } catch {
+ alert(`${file.name} is not valid JSON.`);
+ return;
+ }
+
+ if (snapshot === null) {
+ alert(`${file.name} is not a table configuration. Export one to see the expected format.`);
+ return;
+ }
+
+ props.updateTable(Table.fromSnapshot(snapshot));
+ };
+
+ return (
+
+
+ {/* Amber, not slate: importing replaces the table you have open. */}
+
+
+
+ );
+}
diff --git a/src/components/TableEditor.tsx b/src/components/TableEditor.tsx
index 2a3fdda..5024bf7 100644
--- a/src/components/TableEditor.tsx
+++ b/src/components/TableEditor.tsx
@@ -22,17 +22,67 @@ function propertyNameToLabel(name: keyof TableEditable): string {
case "flatOutsideBuffer": return "Flat rail outside buffer"
case "railInsideBuffer": return "Tube rail inside buffer"
case "railOutsideBuffer": return "Tube rail outside buffer"
+ case "bitDiameter": return "CNC bit diameter"
+ case "partMargin": return "Margin between parts"
+ case "overcut": return "Spar slot overcut"
}
}
+type SettingsGroup = {
+ title: string,
+ description: string,
+ fields: (keyof TableEditable)[],
+ // Groups that only affect the Lowrider 4 rails are hidden for a plain table.
+ lr4Only?: boolean,
+}
+
+// Notes shown under individual fields, for behaviour a label cannot carry.
+const fieldHints: Partial> = {
+ bitDiameter: "Set to 0 to switch off automatic dog-bones and leave inside corners square.",
+ partMargin: "Set to 0 to use 4× the bit diameter, or 20mm when the bit diameter is also 0.",
+ overcut: "Extra depth cut into both halves of every slot, so the spars pull together face to face instead of bottoming out. 0 makes the two slots meet exactly. Cut the test parts to find the value your material needs.",
+};
+
+const settingsGroups: SettingsGroup[] = [
+ {
+ title: "Material",
+ description: "The sheet you are cutting and the tool cutting it. Slots are cut as wide as the material, the bit diameter sizes the dog-bone reliefs in the inside corners, and the margin is the clear space left between parts on the sheet.",
+ fields: ["material", "bitDiameter", "partMargin"],
+ },
+ {
+ title: "Table size",
+ description: "The finished tabletop. The spar frame underneath is inset from these dimensions by the overhang on every side, and the thickness sets how deep the spars are.",
+ fields: ["xCut", "yCut", "thickness", "overhang"],
+ },
+ {
+ title: "Spars",
+ description: "The egg-crate frame. Spars are never spaced further apart than these gaps; the spacing that comes out is divided evenly across the table, so it is usually tighter. The overcut sets how much clearance is left at the bottom of the slots where the spars cross.",
+ fields: ["xSparMinGap", "ySparMinGap", "overcut"],
+ },
+ {
+ title: "Rails",
+ description: "Rail stock, the longest piece your machine can cut in one go before a rail is split in two, and the spacing of the clips that hold the rails down.",
+ fields: ["railMaterialThickness", "trackCutPoint", "clipMinGap"],
+ lr4Only: true,
+ },
+ {
+ title: "Track fit",
+ description: "Padding added to the flat and tube track cut-outs. Increase these if the machine binds on the rails, decrease them if it has play.",
+ fields: ["flatInsideBuffer", "flatOutsideBuffer", "railInsideBuffer", "railOutsideBuffer"],
+ lr4Only: true,
+ },
+];
+
function updateUnits(table: Table, target: Units): Table {
return {
- "mm": table.inMillimeters,
+ "mm": table.inMillimeters,
"cm": table.inCentimeters,
"in": table.inInches,
}[target];
}
+const selectClasses = "block w-full text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg p-1.5 focus:ring-blue-500 focus:border-blue-500";
+
export default function TableEditor(props: TableEditorProps) {
const updateConfiguration = (configuration: Configuration) => {
let overhang = 0;
@@ -44,138 +94,69 @@ export default function TableEditor(props: TableEditorProps) {
}[props.table.units];
}
- props.table.overhang = overhang;
- props.table.configuration = configuration;
-
- props.updateTable(props.table)
+ // A fresh Table, not a mutation of the current one: React bails out of
+ // re-rendering if it is handed back the same object.
+ props.updateTable(Table.fromSnapshot({
+ ...props.table.snapshot,
+ overhang,
+ configuration,
+ }))
};
+ const groups = settingsGroups.filter(
+ (group) => !group.lr4Only || props.table.configuration == "LR4"
+ );
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Machine
+
+ What you are building for, and the units every dimension below is
+ given in. Switching units converts the values you have already
+ entered, rounding to something cuttable.
+
+
+
+
+
+ {groups.map((group) => (
+
+
{group.title}
+
{group.description}
+ {group.fields.map((field) => (
+
+ ))}
+
+ ))}
-
)
-}
\ No newline at end of file
+}
diff --git a/src/components/TableLayout.tsx b/src/components/TableLayout.tsx
index 286bd03..2ed105b 100644
--- a/src/components/TableLayout.tsx
+++ b/src/components/TableLayout.tsx
@@ -16,7 +16,8 @@ export default function TableLayout(props: TableLayoutProps) {
const strokeWidth = props.strokeWidth;
const tableThickness = props.table.thickness;
const materialThickness = props.table.material
- const kerfWidth = materialThickness / 2;
+ // Clear space between neighbouring parts on the sheet.
+ const kerfWidth = props.table.effectivePartMargin;
const yCut = props.table.yCut;
const flatTrackWidth = props.table.flatTrackWidth;
const railTrackWidth = props.table.railTrackWidth;
@@ -44,9 +45,6 @@ export default function TableLayout(props: TableLayoutProps) {
}
const firstRail = ((kerfWidth + tableThickness) * (xSparCount + ySparCount)) + (strokeWidth / 2);
- const width = yCut + strokeWidth + yBuffer;
- const height = (tableThickness + strokeWidth) * (ySparCount + xSparCount) + (4 * kerfWidth) + (2 * tableThickness) + flatTrackWidth + railTrackWidth;
- const viewBox = `0 0 ${width} ${height * 1.5}`
const rails = [];
if (configuration == "LR4") {
@@ -63,14 +61,32 @@ export default function TableLayout(props: TableLayoutProps) {
const calibrationSquareX = (strokeWidth / 2) + (7 * materialThickness);
+ // Exact extent of the drawn parts, so the view fits them with no dead space.
+ // Rails that are too long for the sheet are split into two pieces, the
+ // second of which sits a kerf further right than the rail's own length.
+ const railLength = yCut + yBuffer;
+ const railSplitBuffer = railLength > props.table.trackCutPoint ? kerfWidth : 0;
+ const contentWidth = railLength + railSplitBuffer + strokeWidth;
+ // The test parts and the calibration square share the last row.
+ const lastRowHeight = Math.max(tableThickness, props.table.calibrationSquareSize);
+ const contentHeight = testPartY + lastRowHeight + (strokeWidth / 2);
+
+ // Stand the sheet up: a quarter turn counter-clockwise maps (x, y) to
+ // (y, contentWidth - x), so the width and height of the view swap. Doing it
+ // here rather than in CSS keeps the SVG's aspect ratio honest, so it scales
+ // to fit its container, and keeps the downloaded file at real-world size.
+ const viewBox = `0 0 ${contentHeight} ${contentWidth}`;
+
return (
<>
-