andras/floor-planner
Watch
1
0
Fork
You've already forked floor-planner
 0
Code Issues Pull requests 10 Projects Releases Packages Wiki Activity Actions

reviewed

Browse source
This commit is contained in:
Andras Schmelczer 2026-09-11 17:57:03 +01:00
commit 7959fe85cc
29 changed files with 1679 additions and 498 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/CutPreview.tsx
View file

@ -1,6 +1,7 @@
import { Fragment } from 'react';
import type { FlooringPiece, SkirtingPiece } from '../lib/types';
import { cutMm, degree } from '../lib/format';
import { skirtingEndLabel } from '../lib/cut-list';
import {
dimensionedOutline,
flooringTemplate,
@ -114,7 +115,10 @@ export function FlooringPreview({
const template = flooringTemplate(piece);
const dimensions = compact
? undefined
: dimensionedOutline(template, piece.shaped ? undefined : [0, 1]);
: dimensionedOutline(template, piece.shaped ? undefined : [0, 1], {
length: piece.blankLength,
width: piece.blankWidth,
});
const Wrapper = compact ? 'span' : 'figure';
return (
<Wrapper className={`flooring-preview-figure ${compact ? 'compact-preview' : 'exact-preview'}`}>
@ -137,7 +141,7 @@ export function FlooringPreview({
</svg>
{!compact && (
<figcaption>
{cutMm(piece.length)} × {cutMm(piece.width)} mm
{cutMm(piece.length, piece.blankLength)} × {cutMm(piece.width, piece.blankWidth)} mm
{dimensions?.dimensions.some((dimension) => dimension.angle !== undefined) &&
' · angles from horizontal'}
</figcaption>
@ -160,12 +164,13 @@ export function SkirtingPreview({
const EndWrapper = compact ? 'span' : 'figure';
const Grid = compact ? 'span' : 'div';
if (template.length !== 4) return <span className="helper">Shape template unavailable</span>;
const boxes = skirtingEndBoxes(template, thickness);
const boxes = skirtingEndBoxes(template, thickness, piece.installedTemplate);
const dimensions = compact
? undefined
: dimensionedOutline(
[template[0], template[1], { x: piece.length, y: thickness }, { x: 0, y: thickness }],
[0, 2],
{ length: piece.blankLength, width: thickness },
);
// The lower dimension measures the overall blank, between its actual longest points.
const overall = dimensions?.dimensions.find((dimension) => dimension.edge === 2);
@ -175,8 +180,24 @@ export function SkirtingPreview({
}
const points = template.map((point) => `${point.x},${point.y}`).join(' ');
const ends = [
{ side: 'left', back: template[0], front: template[3], box: boxes.left },
{ side: 'right', back: template[1], front: template[2], box: boxes.right },
{
side: 'left',
back: template[0],
front: template[3],
box: boxes.left,
type: piece.leftType,
installedBack: piece.installedTemplate?.[0],
installedFront: piece.installedTemplate?.[3],
},
{
side: 'right',
back: template[1],
front: template[2],
box: boxes.right,
type: piece.rightType,
installedBack: piece.installedTemplate?.[1],
installedFront: piece.installedTemplate?.[2],
},
] as const;
return (
<Wrapper className={`skirting-preview ${compact ? 'compact-preview' : 'exact-preview'}`}>
@ -198,7 +219,10 @@ export function SkirtingPreview({
<Dimensions dimensions={dimensions!.dimensions} font={dimensions!.font} />
</svg>
<figcaption>
{cutMm(piece.length)} × {cutMm(thickness)} mm · wall side above
{cutMm(piece.length, piece.blankLength)} × {cutMm(thickness, thickness)} mm · wall side
above
{(piece.leftType === 'cope' || piece.rightType === 'cope') &&
' · preparation before coping'}
</figcaption>
</figure>
)}
@ -217,7 +241,7 @@ export function SkirtingPreview({
aria-label={
compact
? undefined
: `${end.side === 'left' ? 'Left' : 'Right'} mitre close-up ${piece.id}`
: `${end.side === 'left' ? 'Left' : 'Right'} ${end.type === 'cope' ? 'cope preparation' : 'mitre'} close-up ${piece.id}`
}
>
<polygon
@ -238,12 +262,24 @@ export function SkirtingPreview({
strokeWidth={compact ? 1.5 : 2.5}
vectorEffect="non-scaling-stroke"
/>
{end.type === 'cope' && end.installedBack && end.installedFront && (
<line
className="skirting-cope-body"
data-end={end.side}
x1={end.installedBack.x}
y1={end.installedBack.y}
x2={end.installedFront.x}
y2={end.installedFront.y}
stroke="#9a3412"
strokeWidth={1.5}
strokeDasharray="3 2"
vectorEffect="non-scaling-stroke"
/>
)}
</svg>
{!compact && (
<figcaption>
{index === 0 ? 'Left' : 'Right'} ·{' '}
{degree(index === 0 ? piece.leftMitre : piece.rightMitre)}{' '}
{index === 0 ? piece.leftType : piece.rightType}
{index === 0 ? 'Left' : 'Right'} · {skirtingEndLabel(piece, end.side)}
</figcaption>
)}
</EndWrapper>