Render curved wall measurements along the wall

This commit is contained in:
sudhir
2026-05-20 00:41:18 +00:00
committed by open-pascal
parent 6af3a0aa82
commit db5c743e1c
5 changed files with 23 additions and 4 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

@@ -12,6 +12,8 @@ const FLOORPLAN_MEASUREMENT_END_TICK = 0.18
export type LinearMeasurementOverlay = { export type LinearMeasurementOverlay = {
dashedExtensions?: boolean dashedExtensions?: boolean
id: string id: string
dimensionPathEnd?: string | null
dimensionPathStart?: string | null
dimensionLineEnd: { x1: number; y1: number; x2: number; y2: number } dimensionLineEnd: { x1: number; y1: number; x2: number; y2: number }
dimensionLineStart: { x1: number; y1: number; x2: number; y2: number } dimensionLineStart: { x1: number; y1: number; x2: number; y2: number }
extensionStart: { x1: number; y1: number; x2: number; y2: number } extensionStart: { x1: number; y1: number; x2: number; y2: number }
@@ -34,6 +36,7 @@ type FloorplanMeasurementPalette = {
type FloorplanMeasurementLineProps = { type FloorplanMeasurementLineProps = {
palette: FloorplanMeasurementPalette palette: FloorplanMeasurementPalette
segment: { x1: number; y1: number; x2: number; y2: number } segment: { x1: number; y1: number; x2: number; y2: number }
path?: string | null
isSelected?: boolean isSelected?: boolean
dashed?: boolean dashed?: boolean
stroke?: string stroke?: string
@@ -42,6 +45,7 @@ type FloorplanMeasurementLineProps = {
function FloorplanMeasurementLine({ function FloorplanMeasurementLine({
palette, palette,
segment, segment,
path,
isSelected, isSelected,
dashed = false, dashed = false,
stroke, stroke,
@@ -50,7 +54,20 @@ function FloorplanMeasurementLine({
? FLOORPLAN_MEASUREMENT_LINE_OPACITY ? FLOORPLAN_MEASUREMENT_LINE_OPACITY
: FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4 : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
return ( return path ? (
<path
d={path}
fill="none"
shapeRendering="geometricPrecision"
stroke={stroke ?? palette.measurementStroke}
strokeDasharray={dashed ? FLOORPLAN_MEASUREMENT_EXTENSION_DASH : undefined}
strokeLinecap="round"
strokeLinejoin="round"
strokeOpacity={lineOpacity}
strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
vectorEffect="non-scaling-stroke"
/>
) : (
<line <line
shapeRendering="geometricPrecision" shapeRendering="geometricPrecision"
stroke={stroke ?? palette.measurementStroke} stroke={stroke ?? palette.measurementStroke}
@@ -141,12 +158,14 @@ export const FloorplanMeasurementsLayer = memo(function FloorplanMeasurementsLay
<FloorplanMeasurementLine <FloorplanMeasurementLine
isSelected={measurement.isSelected} isSelected={measurement.isSelected}
palette={palette} palette={palette}
path={measurement.dimensionPathStart}
segment={measurement.dimensionLineStart} segment={measurement.dimensionLineStart}
stroke={measurement.stroke} stroke={measurement.stroke}
/> />
<FloorplanMeasurementLine <FloorplanMeasurementLine
isSelected={measurement.isSelected} isSelected={measurement.isSelected}
palette={palette} palette={palette}
path={measurement.dimensionPathEnd}
segment={measurement.dimensionLineEnd} segment={measurement.dimensionLineEnd}
stroke={measurement.stroke} stroke={measurement.stroke}
/> />
@@ -13,7 +13,7 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
slab: { icon: '/icons/floor.png', label: 'Slab' }, slab: { icon: '/icons/floor.png', label: 'Slab' },
ceiling: { icon: '/icons/ceiling.png', label: 'Ceiling' }, ceiling: { icon: '/icons/ceiling.png', label: 'Ceiling' },
column: { icon: '/icons/column.png', label: 'Column' }, column: { icon: '/icons/column.png', label: 'Column' },
elevator: { icon: '/icons/elevator.svg', label: 'Elevator' }, elevator: { icon: '/icons/elevator.png', label: 'Elevator' },
fence: { icon: '/icons/fence.png', label: 'Fence' }, fence: { icon: '/icons/fence.png', label: 'Fence' },
roof: { icon: '/icons/roof.png', label: 'Roof' }, roof: { icon: '/icons/roof.png', label: 'Roof' },
'roof-segment': { icon: '/icons/roof.png', label: 'Roof segment' }, 'roof-segment': { icon: '/icons/roof.png', label: 'Roof segment' },
@@ -49,7 +49,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
expanded={false} expanded={false}
hasChildren={false} hasChildren={false}
icon={ icon={
<Image alt="" className="object-contain" height={14} src="/icons/elevator.svg" width={14} /> <Image alt="" className="object-contain" height={14} src="/icons/elevator.png" width={14} />
} }
isHovered={isHovered} isHovered={isHovered}
isLast={isLast} isLast={isLast}
+1 -1
View File
@@ -474,7 +474,7 @@ export default function ElevatorPanel() {
return ( return (
<PanelWrapper <PanelWrapper
icon="/icons/elevator.svg" icon="/icons/elevator.png"
onClose={handleClose} onClose={handleClose}
title={node.name || 'Elevator'} title={node.name || 'Elevator'}
width={300} width={300}