@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import { memo, useMemo } from 'react'
+import useEditor, { type FloorplanSelectionTool } from '../../store/use-editor'
+import { furnishTools } from '../ui/action-menu/furnish-tools'
+import { tools as structureTools } from '../ui/action-menu/structure-tools'
+
+type SvgPoint = {
+  x: number
+  y: number
+}
+
+type FloorplanCursorIndicator =
+  | {
+      kind: 'asset'
+      iconSrc: string
+    }
+  | {
+      kind: 'icon'
+      icon: string
+    }
+
+type FloorplanCursorIndicatorOverlayProps = {
+  cursorPosition: SvgPoint | null
+  cursorAnchorPosition: SvgPoint | null
+  floorplanSelectionTool: FloorplanSelectionTool
+  movingOpeningType: 'door' | 'window' | null
+  isPanning: boolean
+  cursorColor: string
+  indicatorLineHeight?: number
+  indicatorBadgeOffsetX?: number
+  indicatorBadgeOffsetY?: number
+}
+
+export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndicatorOverlay({
+  cursorPosition,
+  cursorAnchorPosition,
+  floorplanSelectionTool,
+  movingOpeningType,
+  isPanning,
+  cursorColor,
+  indicatorLineHeight = 18,
+  indicatorBadgeOffsetX = 14,
+  indicatorBadgeOffsetY = 14,
+}: FloorplanCursorIndicatorOverlayProps) {
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const structureLayer = useEditor((state) => state.structureLayer)
+  const catalogCategory = useEditor((state) => state.catalogCategory)
+
+  const activeFloorplanToolConfig = useMemo(() => {
+    if (movingOpeningType) {
+      return structureTools.find((entry) => entry.id === movingOpeningType) ?? null
+    }
+
+    if (mode !== 'build' || !tool) {
+      return null
+    }
+
+    if (tool === 'item' && catalogCategory) {
+      return furnishTools.find((entry) => entry.catalogCategory === catalogCategory) ?? null
+    }
+
+    return structureTools.find((entry) => entry.id === tool) ?? null
+  }, [catalogCategory, mode, movingOpeningType, tool])
+
+  const indicator = useMemo<FloorplanCursorIndicator | null>(() => {
+    if (activeFloorplanToolConfig) {
+      return { kind: 'asset', iconSrc: activeFloorplanToolConfig.iconSrc }
+    }
+
+    if (mode === 'select' && floorplanSelectionTool === 'marquee' && structureLayer !== 'zones') {
+      return { kind: 'icon', icon: 'mdi:select-drag' }
+    }
+
+    if (mode === 'delete') {
+      return { kind: 'icon', icon: 'mdi:trash-can-outline' }
+    }
+
+    return null
+  }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
+
+  const position = mode === 'delete' ? cursorPosition : cursorAnchorPosition
+
+  if (!(indicator && position) || isPanning) {
+    return null
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute z-20"
+      style={{ left: position.x, top: position.y }}
+    >
+      {mode === 'delete' ? (
+        <div
+          className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
+          style={{
+            boxShadow: `0 8px 16px -4px rgba(0,0,0,0.3), 0 4px 8px -4px rgba(0,0,0,0.2), 0 0 18px ${cursorColor}22`,
+            transform: `translate(${indicatorBadgeOffsetX}px, ${indicatorBadgeOffsetY}px)`,
+          }}
+        >
+          {indicator.kind === 'asset' ? (
+            <img
+              alt=""
+              aria-hidden="true"
+              className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+              src={indicator.iconSrc}
+            />
+          ) : (
+            <Icon
+              aria-hidden="true"
+              className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+              color={cursorColor}
+              height={18}
+              icon={indicator.icon}
+              width={18}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          <div
+            className="absolute top-0 left-1/2 w-px -translate-x-1/2 -translate-y-full"
+            style={{
+              backgroundColor: cursorColor,
+              boxShadow: `0 0 12px ${cursorColor}55`,
+              height: indicatorLineHeight,
+            }}
+          />
+          <div
+            className="absolute top-0 left-1/2 flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
+            style={{
+              transform: `translate(-50%, calc(-100% - ${indicatorLineHeight}px))`,
+            }}
+          >
+            {indicator.kind === 'asset' ? (
+              <img
+                alt=""
+                aria-hidden="true"
+                className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+                src={indicator.iconSrc}
+              />
+            ) : (
+              <Icon
+                aria-hidden="true"
+                className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+                color="white"
+                height={18}
+                icon={indicator.icon}
+                width={18}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+})

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,124 @@
+'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,202 @@
+'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>
+      ))}
+    </>
+  )
+})