morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine window corner shape support

Browse Source
This commit is contained in:
sudhir
2026-05-07 13:34:16 +05:30
parent eef19804d1
commit 133d81e563
13 changed files with 3034 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor/src/components/editor/floorplan-panel.tsx
+81
View File
@@ -6,6 +6,7 @@ import {
type AnyNodeId,
type BuildingNode,
type CeilingNode,
type ColumnNode,
calculateLevelMiters,
DoorNode,
emitter,
@@ -589,6 +590,7 @@ type FloorplanItemEntry = {
type ReferenceFloorData = {
ceilingPolygons: CeilingPolygonEntry[]
columnEntries: ReferenceFloorColumnEntry[]
fenceEntries: FloorplanFenceEntry[]
itemEntries: FloorplanItemEntry[]
openingPolygons: OpeningPolygonEntry[]
@@ -596,6 +598,12 @@ type ReferenceFloorData = {
wallPolygons: WallPolygonEntry[]
}
type ReferenceFloorColumnEntry = {
column: ColumnNode
points: string
polygon: Point2D[]
}
type FloorplanStairSegmentEntry = {
centerLine: FloorplanLineSegment | null
innerPoints: string
@@ -1644,6 +1652,51 @@ function getRotatedRectanglePolygon(
})
}
function getColumnPlanFootprint(column: ColumnNode): Point2D[] {
const center = { x: column.position[0], y: column.position[2] }
const shaftWidth =
column.crossSection === 'round' ||
column.crossSection === 'octagonal' ||
column.crossSection === 'sixteen-sided'
? column.radius * 2
: column.width
const shaftDepth =
column.crossSection === 'round' ||
column.crossSection === 'octagonal' ||
column.crossSection === 'sixteen-sided'
? column.radius * 2
: column.depth
const width = Math.max(
shaftWidth,
column.width * column.baseWidthScale,
column.width * column.capitalWidthScale,
)
const depth = Math.max(
shaftDepth,
column.depth * column.baseDepthScale,
column.depth * column.capitalDepthScale,
)
if (column.crossSection === 'square' || column.crossSection === 'rectangular') {
return getRotatedRectanglePolygon(center, width, depth, column.rotation)
}
const segmentCount =
column.crossSection === 'octagonal' ? 8 : column.crossSection === 'sixteen-sided' ? 16 : 32
return Array.from({ length: segmentCount }, (_, index) => {
const angle = (index / segmentCount) * Math.PI * 2
const localX = Math.cos(angle) * (width / 2)
const localY = Math.sin(angle) * (depth / 2)
const [offsetX, offsetY] = rotatePlanVector(localX, localY, column.rotation)
return {
x: center.x + offsetX,
y: center.y + offsetY,
}
})
}
function interpolatePlanPoint(start: Point2D, end: Point2D, t: number): Point2D {
return {
x: start.x + (end.x - start.x) * t,
@@ -3711,6 +3764,17 @@ const FloorplanReferenceFloorLayer = memo(function FloorplanReferenceFloorLayer(
/>
))}
{data.columnEntries.map(({ column, points }) => (
<polygon
fill="rgba(124, 58, 237, 0.12)"
key={column.id}
points={points}
stroke="rgba(88, 28, 135, 0.55)"
strokeWidth={1.1}
vectorEffect="non-scaling-stroke"
/>
))}
{data.openingPolygons.map(({ opening, points }) => (
<polygon
fill="rgba(255, 255, 255, 0.72)"
@@ -7783,6 +7847,7 @@ export function FloorplanPanel() {
)
const referenceWalls = children.filter((node): node is WallNode => node.type === 'wall')
const referenceFences = children.filter((node): node is FenceNode => node.type === 'fence')
const referenceColumns = children.filter((node): node is ColumnNode => node.type === 'column')
const referenceSlabs = children.filter((node): node is SlabNode => node.type === 'slab')
const referenceCeilings = children.filter(
(node): node is CeilingNode => node.type === 'ceiling',
@@ -7886,6 +7951,21 @@ export function FloorplanPanel() {
return [{ fence, centerline, markerFrames: [], path }]
})
const columnEntries = referenceColumns.flatMap((column) => {
const polygon = getColumnPlanFootprint(column)
if (polygon.length < 3) {
return []
}
return [
{
column,
points: formatPolygonPoints(polygon),
polygon,
},
]
})
const transformCache = new Map<string, SharedFloorplanNodeTransform | null>()
const itemEntries = referenceDescendants.flatMap((node) => {
if (
@@ -7920,6 +8000,7 @@ export function FloorplanPanel() {
return {
ceilingPolygons,
columnEntries,
fenceEntries,
itemEntries,
openingPolygons,
packages/editor/src/components/tools/window/move-window-tool.tsx
+5
View File
@@ -294,6 +294,11 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
parentId: event.node.id,
width: movingWindowNode.width,
height: movingWindowNode.height,
windowType: movingWindowNode.windowType,
operationState: movingWindowNode.operationState,
awningDirection: movingWindowNode.awningDirection,
casementStyle: movingWindowNode.casementStyle,
hingesSide: movingWindowNode.hingesSide,
frameThickness: movingWindowNode.frameThickness,
frameDepth: movingWindowNode.frameDepth,
columnRatios: movingWindowNode.columnRatios,
packages/editor/src/components/tools/window/window-tool.tsx
+5
View File
@@ -262,6 +262,11 @@ export const WindowTool: React.FC = () => {
parentId: event.node.id,
width: draft.width,
height: draft.height,
windowType: draft.windowType,
operationState: draft.operationState,
awningDirection: draft.awningDirection,
casementStyle: draft.casementStyle,
hingesSide: draft.hingesSide,
frameThickness: draft.frameThickness,
frameDepth: draft.frameDepth,
columnRatios: draft.columnRatios,
packages/editor/src/components/ui/panels/window-panel.tsx
+140 -1
View File
@@ -4,6 +4,7 @@ import {
type AnyNode,
type AnyNodeId,
emitter,
useInteractive,
useScene,
WindowNode,
} from '@pascal-app/core'
@@ -11,6 +12,7 @@ import { useViewer } from '@pascal-app/viewer'
import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
import { useCallback, useRef } from 'react'
import { usePresetsAdapter } from '../../../contexts/presets-context'
import { cn } from '../../../lib/utils'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
@@ -67,6 +69,26 @@ function isSameRadiusTuple(
return current.every((value, index) => Math.abs(value - (next[index] ?? 0)) < 1e-6)
}
const windowTypeOptions: Array<{ label: string; value: WindowNode['windowType'] }> = [
{ label: 'Fixed', value: 'fixed' },
{ label: 'Sliding', value: 'sliding' },
{ label: 'Casement', value: 'casement' },
{ label: 'Awning', value: 'awning' },
{ label: 'Single Hung', value: 'single-hung' },
{ label: 'Double Hung', value: 'double-hung' },
{ label: 'Bay', value: 'bay' },
{ label: 'Bow', value: 'bow' },
{ label: 'Louvered', value: 'louvered' },
]
const rectangleOnlyWindowTypes = new Set<WindowNode['windowType']>([
'sliding',
'single-hung',
'double-hung',
'bay',
'bow',
])
export function WindowPanel() {
const selectedId = useViewer((s) => s.selection.selectedIds[0])
const setSelection = useViewer((s) => s.setSelection)
@@ -182,6 +204,11 @@ export function WindowPanel() {
parentId: node.parentId,
width: node.width,
height: node.height,
windowType: node.windowType,
operationState: node.operationState,
awningDirection: node.awningDirection,
casementStyle: node.casementStyle,
hingesSide: node.hingesSide,
frameThickness: node.frameThickness,
frameDepth: node.frameDepth,
openingKind: node.openingKind,
@@ -210,6 +237,11 @@ export function WindowPanel() {
return {
width: node.width,
height: node.height,
windowType: node.windowType,
operationState: node.operationState,
awningDirection: node.awningDirection,
casementStyle: node.casementStyle,
hingesSide: node.hingesSide,
frameThickness: node.frameThickness,
frameDepth: node.frameDepth,
openingKind: node.openingKind,
@@ -274,6 +306,22 @@ export function WindowPanel() {
const archHeight = node.archHeight ?? 0.35
const openingRevealRadius = node.openingRevealRadius ?? 0.025
const maxRoundedRadius = Math.max(0.01, getMaxSharedWindowRadius(node.width, node.height))
const displayedWindowType = node.windowType === 'hopper' ? 'awning' : (node.windowType ?? 'fixed')
const awningDirection = node.windowType === 'hopper' ? 'down' : (node.awningDirection ?? 'up')
const isOperableWindow =
node.windowType === 'sliding' ||
node.windowType === 'casement' ||
node.windowType === 'awning' ||
node.windowType === 'hopper' ||
node.windowType === 'single-hung' ||
node.windowType === 'double-hung' ||
node.windowType === 'louvered'
const setOperationState = (value: number) => {
useInteractive.getState().cancelWindowAnimation(node.id)
useInteractive.getState().removeWindowOpenState(node.id)
handleUpdate({ operationState: Math.max(0, Math.min(1, value)) })
}
const getDimensionUpdates = (updates: Partial<Pick<WindowNode, 'width' | 'height'>>) => {
const nextWidth = updates.width ?? node.width
@@ -398,6 +446,96 @@ export function WindowPanel() {
/>
</PanelSection>
{!isOpening && (
<PanelSection title="Window Type">
<div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
{windowTypeOptions.map((option) => {
const isSelected = displayedWindowType === option.value
return (
<button
className={cn(
'flex min-h-12 items-center rounded-lg border px-2.5 text-left text-xs transition-colors',
isSelected
? 'border-orange-400/60 bg-orange-400/10 text-foreground'
: 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
)}
key={option.value}
onClick={() =>
handleUpdate({
windowType: option.value,
...(option.value === 'awning' ? { awningDirection } : {}),
...(rectangleOnlyWindowTypes.has(option.value)
? { openingShape: 'rectangle' }
: {}),
})
}
type="button"
>
<span className="truncate font-medium">{option.label}</span>
</button>
)
})}
</div>
{displayedWindowType === 'awning' && (
<div className="mt-2">
<SegmentedControl
onChange={(value) =>
handleUpdate({
windowType: 'awning',
awningDirection: value as WindowNode['awningDirection'],
})
}
options={[
{ value: 'up', label: 'Up' },
{ value: 'down', label: 'Down' },
]}
value={awningDirection}
/>
</div>
)}
{node.windowType === 'casement' && (
<div className="mt-2 space-y-2">
<SegmentedControl
onChange={(value) =>
handleUpdate({ casementStyle: value as WindowNode['casementStyle'] })
}
options={[
{ value: 'single', label: 'Single' },
{ value: 'french', label: 'French' },
]}
value={node.casementStyle ?? 'single'}
/>
{(node.casementStyle ?? 'single') === 'single' && (
<SegmentedControl
onChange={(value) =>
handleUpdate({ hingesSide: value as WindowNode['hingesSide'] })
}
options={[
{ value: 'left', label: 'Left' },
{ value: 'right', label: 'Right' },
]}
value={node.hingesSide ?? 'left'}
/>
)}
</div>
)}
{isOperableWindow && (
<div className="mt-2">
<SliderControl
label="Open"
max={1}
min={0}
onChange={setOperationState}
precision={2}
restoreOnCommit={false}
step={0.05}
value={Math.round((node.operationState ?? 0) * 100) / 100}
/>
</div>
)}
</PanelSection>
)}
<PanelSection title="Position">
<SliderControl
label={
@@ -458,7 +596,7 @@ export function WindowPanel() {
/>
</PanelSection>
{!isOpening && (
{!isOpening && !rectangleOnlyWindowTypes.has(node.windowType) && (
<PanelSection title="Corner Shape">
<SegmentedControl
onChange={(value) =>
@@ -470,6 +608,7 @@ export function WindowPanel() {
openingCornerRadii,
cornerRadius: Math.min(cornerRadius, maxRoundedRadius),
openingRevealRadius,
sill: false,
}
: {}),
...(value === 'arch' ? { archHeight } : {}),
packages/editor/src/hooks/use-keyboard.ts
+30 -1
View File
@@ -4,6 +4,7 @@ import { useEffect } from 'react'
import { closeDoorOpenState, toggleDoorOpenState } from '../lib/door-interaction'
import { runRedo, runUndo } from '../lib/history'
import { sfxEmitter } from '../lib/sfx-bus'
import { closeWindowOpenState, toggleWindowOpenState } from '../lib/window-interaction'
import useEditor from '../store/use-editor'
// Tools call this in their onCancel handler when they have an active mid-action to cancel,
@@ -146,7 +147,7 @@ export const useKeyboard = ({
}
} else if ((e.key === 'r' || e.key === 'R') && !isVersionPreviewMode) {
// Rotate selected node clockwise if it supports rotation (items, roofs, etc.)
// Doors use R to toggle their leaf open/closed around the hinge.
// Operable doors/windows use R to toggle their open/closed state.
const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
if (selectedNodeIds.length === 1) {
const node = useScene.getState().nodes[selectedNodeIds[0]!]
@@ -156,6 +157,20 @@ export const useKeyboard = ({
toggleDoorOpenState(node.id)
sfxEmitter.emit('sfx:item-rotate')
}
} else if (
node?.type === 'window' &&
node.openingKind !== 'opening' &&
(node.windowType === 'sliding' ||
node.windowType === 'casement' ||
node.windowType === 'awning' ||
node.windowType === 'hopper' ||
node.windowType === 'single-hung' ||
node.windowType === 'double-hung' ||
node.windowType === 'louvered')
) {
e.preventDefault()
toggleWindowOpenState(node.id)
sfxEmitter.emit('sfx:item-rotate')
} else if (node && 'rotation' in node) {
e.preventDefault()
const ROTATION_STEP = Math.PI / 4
@@ -182,6 +197,20 @@ export const useKeyboard = ({
closeDoorOpenState(node.id)
sfxEmitter.emit('sfx:item-rotate')
}
} else if (
node?.type === 'window' &&
node.openingKind !== 'opening' &&
(node.windowType === 'sliding' ||
node.windowType === 'casement' ||
node.windowType === 'awning' ||
node.windowType === 'hopper' ||
node.windowType === 'single-hung' ||
node.windowType === 'double-hung' ||
node.windowType === 'louvered')
) {
e.preventDefault()
closeWindowOpenState(node.id)
sfxEmitter.emit('sfx:item-rotate')
} else if (node && 'rotation' in node) {
e.preventDefault()
const ROTATION_STEP = Math.PI / 4
packages/editor/src/lib/window-interaction.ts
+86
View File
@@ -0,0 +1,86 @@
import {
type AnyNodeId,
useInteractive,
useScene,
type WindowInteractiveState,
} from '@pascal-app/core'
export const WINDOW_TOGGLE_ANIMATION_MS = 520
type WindowOpenAnimationOptions = {
persist?: boolean
}
function isOperableWindowType(windowType: string | undefined) {
return (
windowType === 'sliding' ||
windowType === 'casement' ||
windowType === 'awning' ||
windowType === 'hopper' ||
windowType === 'single-hung' ||
windowType === 'double-hung' ||
windowType === 'louvered'
)
}
function getDisplayedWindowValue(windowId: AnyNodeId, nodeValue: number | undefined) {
const interactive = useInteractive.getState()
const runtimeValue = interactive.windows[windowId]?.operationState
if (runtimeValue !== undefined) return runtimeValue
const queuedValue = interactive.windowAnimations[windowId]?.from
if (queuedValue !== undefined) return queuedValue
return nodeValue ?? 0
}
function startWindowOpenAnimation(
windowId: AnyNodeId,
field: keyof WindowInteractiveState,
from: number,
to: number,
options?: WindowOpenAnimationOptions,
) {
useInteractive.getState().startWindowAnimation(windowId, {
field,
from,
to,
startedAt: null,
durationMs: WINDOW_TOGGLE_ANIMATION_MS,
persist: options?.persist ?? true,
})
}
export function toggleWindowOpenState(windowId: AnyNodeId, options?: WindowOpenAnimationOptions) {
const node = useScene.getState().nodes[windowId]
if (
node?.type !== 'window' ||
node.openingKind === 'opening' ||
!isOperableWindowType(node.windowType)
) {
return
}
const currentOpenAmount = getDisplayedWindowValue(windowId, node.operationState)
startWindowOpenAnimation(
windowId,
'operationState',
currentOpenAmount,
currentOpenAmount >= 0.5 ? 0 : 1,
options,
)
}
export function closeWindowOpenState(windowId: AnyNodeId, options?: WindowOpenAnimationOptions) {
const node = useScene.getState().nodes[windowId]
if (
node?.type !== 'window' ||
node.openingKind === 'opening' ||
!isOperableWindowType(node.windowType)
) {
return
}
const currentOpenAmount = getDisplayedWindowValue(windowId, node.operationState)
startWindowOpenAnimation(windowId, 'operationState', currentOpenAmount, 0, options)
}