@pascal-app/editor 0.6.0 → 0.7.0

package/src/components/editor-2d/floorplan-hotkey-handlers.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { memo, useEffect } from 'react'
+import useEditor from '../../store/use-editor'
+
+type FloorplanSiteKeyHandlerProps = {
+  onRestoreGroundLevel: () => void
+}
+
+export const FloorplanSiteKeyHandler = memo(function FloorplanSiteKeyHandler({
+  onRestoreGroundLevel,
+}: FloorplanSiteKeyHandlerProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+  const phase = useEditor((state) => state.phase)
+  const setFloorplanSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null
+      const isEditableTarget =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        Boolean(target?.isContentEditable)
+
+      if (
+        isEditableTarget ||
+        !isFloorplanHovered ||
+        phase !== 'site' ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.key.toLowerCase() !== 'v'
+      ) {
+        return
+      }
+
+      setFloorplanSelectionTool('click')
+      onRestoreGroundLevel()
+    }
+
+    window.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [isFloorplanHovered, onRestoreGroundLevel, phase, setFloorplanSelectionTool])
+
+  return null
+})
+
+type FloorplanDuplicateHotkeyProps = {
+  hasDuplicatable: boolean
+  onDuplicateSelected: () => void
+}
+
+export const FloorplanDuplicateHotkey = memo(function FloorplanDuplicateHotkey({
+  hasDuplicatable,
+  onDuplicateSelected,
+}: FloorplanDuplicateHotkeyProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'c') {
+        return
+      }
+
+      if (!(isFloorplanHovered && hasDuplicatable)) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+      const isEditableTarget =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        Boolean(target?.isContentEditable)
+
+      if (isEditableTarget) {
+        return
+      }
+
+      event.preventDefault()
+      onDuplicateSelected()
+    }
+
+    window.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [hasDuplicatable, isFloorplanHovered, onDuplicateSelected])
+
+  return null
+})

package/src/components/editor-2d/renderers/floorplan-draft-layer.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { memo } from 'react'
+
+type SvgLine = {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+type FloorplanDraftLayerProps = {
+  draftPolygonPoints: string | null
+  linearDraftSegment: SvgLine | null
+  polygonDraftPolygonPoints: string | null
+  polygonDraftPolylinePoints: string | null
+  polygonDraftClosingSegment: SvgLine | null
+  draftAnchorPoints: Array<{ x: number; y: number; isPrimary: boolean }>
+  draftFill: string
+  draftStroke: string
+  polygonDraftStroke?: string
+  polygonDraftStrokeWidth?: string
+  anchorFill: string
+  unitsPerPixel: number
+}
+
+export const FloorplanDraftLayer = memo(function FloorplanDraftLayer({
+  draftPolygonPoints,
+  linearDraftSegment,
+  polygonDraftPolygonPoints,
+  polygonDraftPolylinePoints,
+  polygonDraftClosingSegment,
+  draftAnchorPoints,
+  draftFill,
+  draftStroke,
+  polygonDraftStroke,
+  polygonDraftStrokeWidth = '0.08',
+  anchorFill,
+  unitsPerPixel,
+}: FloorplanDraftLayerProps) {
+  const primaryAnchorRadius = 6 * unitsPerPixel
+  const secondaryAnchorRadius = 5 * unitsPerPixel
+  const activePolygonDraftStroke = polygonDraftStroke ?? draftStroke
+
+  return (
+    <>
+      {draftPolygonPoints && (
+        <polygon
+          fill={draftFill}
+          fillOpacity={0.35}
+          points={draftPolygonPoints}
+          stroke={draftStroke}
+          strokeDasharray="0.24 0.12"
+          strokeWidth="0.07"
+          vectorEffect="non-scaling-stroke"
+        />
+      )}
+
+      {linearDraftSegment && (
+        <line
+          stroke={draftStroke}
+          strokeDasharray="0.2 0.12"
+          strokeLinecap="round"
+          strokeOpacity={0.95}
+          strokeWidth="0.08"
+          vectorEffect="non-scaling-stroke"
+          x1={linearDraftSegment.x1}
+          x2={linearDraftSegment.x2}
+          y1={linearDraftSegment.y1}
+          y2={linearDraftSegment.y2}
+        />
+      )}
+
+      {polygonDraftPolygonPoints && (
+        <polygon fill={draftFill} fillOpacity={0.2} points={polygonDraftPolygonPoints} stroke="none" />
+      )}
+
+      {polygonDraftPolylinePoints && (
+        <polyline
+          fill="none"
+          points={polygonDraftPolylinePoints}
+          stroke={activePolygonDraftStroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={polygonDraftStrokeWidth}
+          vectorEffect="non-scaling-stroke"
+        />
+      )}
+
+      {polygonDraftClosingSegment && (
+        <line
+          stroke={activePolygonDraftStroke}
+          strokeDasharray="0.16 0.1"
+          strokeLinecap="round"
+          strokeOpacity={0.75}
+          strokeWidth={polygonDraftStrokeWidth}
+          vectorEffect="non-scaling-stroke"
+          x1={polygonDraftClosingSegment.x1}
+          x2={polygonDraftClosingSegment.x2}
+          y1={polygonDraftClosingSegment.y1}
+          y2={polygonDraftClosingSegment.y2}
+        />
+      )}
+
+      {draftAnchorPoints.map((point, index) => (
+        <circle
+          cx={point.x}
+          cy={point.y}
+          fill={point.isPrimary ? anchorFill : draftStroke}
+          fillOpacity={0.95}
+          key={`polygon-draft-${index}`}
+          pointerEvents="none"
+          r={point.isPrimary ? primaryAnchorRadius : secondaryAnchorRadius}
+          vectorEffect="non-scaling-stroke"
+        />
+      ))}
+    </>
+  )
+})

package/src/components/editor-2d/renderers/floorplan-marquee-layer.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { memo } from 'react'
+
+type SvgSelectionBounds = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+type FloorplanMarqueeLayerProps = {
+  bounds: SvgSelectionBounds | null
+  cursorColor: string
+  outlineWidth: number
+  glowWidth: number
+}
+
+export const FloorplanMarqueeLayer = memo(function FloorplanMarqueeLayer({
+  bounds,
+  cursorColor,
+  outlineWidth,
+  glowWidth,
+}: FloorplanMarqueeLayerProps) {
+  if (!bounds) {
+    return null
+  }
+
+  return (
+    <>
+      <rect
+        fill={cursorColor}
+        fillOpacity={0.12}
+        height={bounds.height}
+        pointerEvents="none"
+        stroke={cursorColor}
+        strokeOpacity={0.26}
+        strokeWidth={glowWidth}
+        vectorEffect="non-scaling-stroke"
+        width={bounds.width}
+        x={bounds.x}
+        y={bounds.y}
+      />
+      <rect
+        fill="none"
+        height={bounds.height}
+        pointerEvents="none"
+        stroke={cursorColor}
+        strokeOpacity={0.96}
+        strokeWidth={outlineWidth}
+        vectorEffect="non-scaling-stroke"
+        width={bounds.width}
+        x={bounds.x}
+        y={bounds.y}
+      />
+    </>
+  )
+})

package/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+import { memo } from 'react'
+
+const FLOORPLAN_MEASUREMENT_LINE_WIDTH = 1.35
+const FLOORPLAN_MEASUREMENT_LINE_OPACITY = 0.95
+const FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE = 0.15
+const FLOORPLAN_MEASUREMENT_LABEL_OPACITY = 0.98
+const FLOORPLAN_MEASUREMENT_EXTENSION_DASH = '0.08 0.12'
+const FLOORPLAN_MEASUREMENT_END_TICK = 0.18
+
+export type LinearMeasurementOverlay = {
+  dashedExtensions?: boolean
+  id: string
+  dimensionLineEnd: { 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 }
+  extensionEnd: { x1: number; y1: number; x2: number; y2: number }
+  label: string
+  labelX: number
+  labelY: number
+  labelAngleDeg: number
+  extensionStroke?: string
+  isSelected?: boolean
+  labelFill?: string
+  showTicks?: boolean
+  stroke?: string
+}
+
+type FloorplanMeasurementPalette = {
+  measurementStroke: string
+}
+
+type FloorplanMeasurementLineProps = {
+  palette: FloorplanMeasurementPalette
+  segment: { x1: number; y1: number; x2: number; y2: number }
+  isSelected?: boolean
+  dashed?: boolean
+  stroke?: string
+}
+
+function FloorplanMeasurementLine({
+  palette,
+  segment,
+  isSelected,
+  dashed = false,
+  stroke,
+}: FloorplanMeasurementLineProps) {
+  const lineOpacity = isSelected
+    ? FLOORPLAN_MEASUREMENT_LINE_OPACITY
+    : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
+
+  return (
+    <line
+      shapeRendering="geometricPrecision"
+      stroke={stroke ?? palette.measurementStroke}
+      strokeDasharray={dashed ? FLOORPLAN_MEASUREMENT_EXTENSION_DASH : undefined}
+      strokeLinecap="round"
+      strokeOpacity={lineOpacity}
+      strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
+      vectorEffect="non-scaling-stroke"
+      x1={segment.x1}
+      x2={segment.x2}
+      y1={segment.y1}
+      y2={segment.y2}
+    />
+  )
+}
+
+type FloorplanMeasurementTickProps = {
+  palette: FloorplanMeasurementPalette
+  x: number
+  y: number
+  angleDeg: number
+  isSelected?: boolean
+  stroke?: string
+}
+
+function FloorplanMeasurementTick({
+  palette,
+  x,
+  y,
+  angleDeg,
+  isSelected,
+  stroke,
+}: FloorplanMeasurementTickProps) {
+  const radians = (angleDeg * Math.PI) / 180
+  const nx = -Math.sin(radians)
+  const ny = Math.cos(radians)
+  const half = FLOORPLAN_MEASUREMENT_END_TICK / 2
+
+  return (
+    <line
+      shapeRendering="geometricPrecision"
+      stroke={stroke ?? palette.measurementStroke}
+      strokeLinecap="round"
+      strokeOpacity={
+        isSelected ? FLOORPLAN_MEASUREMENT_LINE_OPACITY : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
+      }
+      strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
+      vectorEffect="non-scaling-stroke"
+      x1={x - nx * half}
+      x2={x + nx * half}
+      y1={y - ny * half}
+      y2={y + ny * half}
+    />
+  )
+}
+
+type FloorplanMeasurementsLayerProps = {
+  className: string
+  measurements: LinearMeasurementOverlay[]
+  palette: FloorplanMeasurementPalette
+}
+
+export const FloorplanMeasurementsLayer = memo(function FloorplanMeasurementsLayer({
+  className,
+  measurements,
+  palette,
+}: FloorplanMeasurementsLayerProps) {
+  if (measurements.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {measurements.map((measurement) => (
+        <g className={className} key={measurement.id} pointerEvents="none" style={{ userSelect: 'none' }}>
+          <FloorplanMeasurementLine
+            dashed={measurement.dashedExtensions ?? true}
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.extensionStart}
+            stroke={measurement.extensionStroke}
+          />
+          <FloorplanMeasurementLine
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.dimensionLineStart}
+            stroke={measurement.stroke}
+          />
+          <FloorplanMeasurementLine
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.dimensionLineEnd}
+            stroke={measurement.stroke}
+          />
+          <FloorplanMeasurementLine
+            dashed={measurement.dashedExtensions ?? true}
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.extensionEnd}
+            stroke={measurement.extensionStroke}
+          />
+          {measurement.showTicks !== false ? (
+            <>
+              <FloorplanMeasurementTick
+                angleDeg={measurement.labelAngleDeg}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                stroke={measurement.stroke}
+                x={measurement.dimensionLineStart.x1}
+                y={measurement.dimensionLineStart.y1}
+              />
+              <FloorplanMeasurementTick
+                angleDeg={measurement.labelAngleDeg}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                stroke={measurement.stroke}
+                x={measurement.dimensionLineEnd.x2}
+                y={measurement.dimensionLineEnd.y2}
+              />
+            </>
+          ) : null}
+          <text
+            dominantBaseline="central"
+            fill={measurement.labelFill ?? palette.measurementStroke}
+            fillOpacity={
+              measurement.isSelected
+                ? FLOORPLAN_MEASUREMENT_LABEL_OPACITY
+                : FLOORPLAN_MEASUREMENT_LABEL_OPACITY * 0.4
+            }
+            fontFamily="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+            fontSize={FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE}
+            fontWeight="600"
+            textAnchor="middle"
+            transform={`rotate(${measurement.labelAngleDeg} ${measurement.labelX} ${measurement.labelY}) translate(0, -0.04)`}
+            x={measurement.labelX}
+            y={measurement.labelY}
+          >
+            {measurement.label}
+          </text>
+        </g>
+      ))}
+    </>
+  )
+})

package/src/components/editor-2d/renderers/floorplan-roof-layer.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import type { Point2D, RoofNode, RoofSegmentNode } from '@pascal-app/core'
+import { memo } from 'react'
+import { toSvgX, toSvgY } from '../svg-paths'
+
+type FloorplanLineSegment = {
+  start: Point2D
+  end: Point2D
+}
+
+type FloorplanRoofSegmentEntry = {
+  segment: RoofSegmentNode
+  points: string
+  ridgeLine: FloorplanLineSegment | null
+}
+
+type FloorplanRoofEntry = {
+  roof: RoofNode
+  segments: FloorplanRoofSegmentEntry[]
+}
+
+type FloorplanRoofPalette = {
+  roofFill: string
+  roofActiveFill: string
+  roofSelectedFill: string
+  roofStroke: string
+  roofActiveStroke: string
+  roofSelectedStroke: string
+  roofRidgeStroke: string
+  roofSelectedRidgeStroke: string
+}
+
+type FloorplanRoofLayerProps = {
+  highlightedIdSet: ReadonlySet<string>
+  palette: FloorplanRoofPalette
+  roofEntries: FloorplanRoofEntry[]
+  selectedIdSet: ReadonlySet<string>
+}
+
+export const FloorplanRoofLayer = memo(function FloorplanRoofLayer({
+  highlightedIdSet,
+  palette,
+  roofEntries,
+  selectedIdSet,
+}: FloorplanRoofLayerProps) {
+  if (roofEntries.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {roofEntries.map(({ roof, segments }) => {
+        const roofSelected = selectedIdSet.has(roof.id)
+        const roofHighlighted = highlightedIdSet.has(roof.id)
+        const hasSelectedSegment = segments.some(({ segment }) => selectedIdSet.has(segment.id))
+        const hasHighlightedSegment = segments.some(({ segment }) =>
+          highlightedIdSet.has(segment.id),
+        )
+        const isRoofActive =
+          roofSelected || roofHighlighted || hasSelectedSegment || hasHighlightedSegment
+
+        return (
+          <g key={roof.id} pointerEvents="none">
+            {segments.map(({ points, ridgeLine, segment }) => {
+              const isSegmentSelected = selectedIdSet.has(segment.id)
+              const isSegmentHighlighted = highlightedIdSet.has(segment.id)
+              const isSegmentActive = isSegmentSelected || isSegmentHighlighted
+
+              return (
+                <g key={segment.id}>
+                  <polygon
+                    fill={
+                      isSegmentActive
+                        ? palette.roofSelectedFill
+                        : isRoofActive
+                          ? palette.roofActiveFill
+                          : palette.roofFill
+                    }
+                    points={points}
+                    stroke={
+                      isSegmentActive
+                        ? palette.roofSelectedStroke
+                        : isRoofActive
+                          ? palette.roofActiveStroke
+                          : palette.roofStroke
+                    }
+                    strokeWidth={isSegmentActive ? '2.25' : isRoofActive ? '1.75' : '1.1'}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  {ridgeLine ? (
+                    <line
+                      fill="none"
+                      stroke={
+                        isSegmentActive ? palette.roofSelectedRidgeStroke : palette.roofRidgeStroke
+                      }
+                      strokeWidth={isSegmentActive ? '2' : '1.4'}
+                      vectorEffect="non-scaling-stroke"
+                      x1={toSvgX(ridgeLine.start.x)}
+                      x2={toSvgX(ridgeLine.end.x)}
+                      y1={toSvgY(ridgeLine.start.y)}
+                      y2={toSvgY(ridgeLine.end.y)}
+                    />
+                  ) : null}
+                </g>
+              )
+            })}
+          </g>
+        )
+      })}
+    </>
+  )
+})