diff --git a/docs/plans/2026-06-01-skeleton-roofline-edit-design.md b/docs/plans/2026-06-01-skeleton-roofline-edit-design.md
index 82414cae..3164c6b2 100644
--- a/docs/plans/2026-06-01-skeleton-roofline-edit-design.md
+++ b/docs/plans/2026-06-01-skeleton-roofline-edit-design.md
@@ -1,7 +1,7 @@
# 용마루(skeleton) 경로 외곽 지붕선 편집 기능 — 설계
- 작성일: 2026-06-01
-- 대상 브랜치: `feature/redo-undo`
+- 대상 브랜치: `feature/roofline-edit`
- 관련 파일: `src/util/skeleton-utils.js`, `src/util/qpolygon-utils.js`, `src/hooks/useContextMenu.js`
## 1. 배경 / 문제
@@ -66,13 +66,13 @@ splitRoofLinesToInnerLines(roof, canvas, textMode) → QLine[]
- **`drawRoofByAttribute` 교체**: 인라인 블록을 함수 호출로 교체. 순수 추출이므로 변별 경로 동작 불변.
### 3-2. skeleton 경로 변경
-- `createInnerLinesFromSkeleton` 의 `isOuterEdge` 숨김 처리(`:1636-1643` 의 `visible:false`, `:1624` 의 `selectable:false`) 제거.
-- 내부선(용마루/추녀) 생성 완료 후 `splitRoofLinesToInnerLines(roof, canvas, textMode)` 호출 → 외곽 지붕선이 변별 경로와 동일한 형태로 `roof.innerLines` 에 합류.
+- `createInnerLinesFromSkeleton` 의 `isOuterEdge`(SK eaves) 숨김 처리는 **유지**. (§9 정정: SK eaves 라인은 baseLine 기준이라, 노출하면 처마변 split 결과와 offset 만큼 어긋나 이중 표시됨. 처마 외곽선은 아래 split 으로 별도 innerLine 화.)
+- **추녀 연장(`drawBaselineToRooflineHelpers`, `:1285`) 완료 후** `splitRoofLinesToInnerLines(roof, canvas, textMode)` 호출 → 추녀 종점이 처마변 위에 있는 상태라 split 정합 성립, 외곽 지붕선이 변별 경로와 동일한 형태로 `roof.innerLines` 에 합류. (⚠️ 연장 **전**에 호출하면 종점이 baseLine 위라 분할점을 못 잡음 — §9 참조)
- `drawHelpLine` 재호출 시마다 자동 재실행되어 편집 후 재그리기에도 외곽 지붕선 유지.
## 4. 리스크 & 구현 전 검증
-1. **SK 추녀 끝점 ↔ `roof.lines` 정합성**: split 은 "innerLine 끝점이 `roof.lines` 위에 있다"(`isPointOnLineNew`, tol 0.1)를 전제로 한다. SK 가 만든 hip 끝점이 처마 외곽선 위에 실제로 떨어지는지 **실측 확인 필요**. 안 맞으면 split 이 헛돌아 외곽선이 통째로 roofLine 1개로만 그려진다. → 구현 첫 단계에서 검증.
+1. **SK 추녀 끝점 ↔ `roof.lines` 정합성** — ✅ **검증 완료 (2026-06-12, §9 참조)**: **연장 후 정합 OK**. SK 골조는 `wall.baseLines` 기준이라 추녀 끝점이 처음엔 baseLine 코너에 있으나(연장 전 `onRoof=false`), `drawBaselineToRooflineHelpers`(`:1285`)가 추녀를 처마변까지 **연장**해 종점을 처마변 위로 옮긴다(연장 후 4코너 전부 `diffRoof=0`, `onRoof=true`). → **split 을 연장 다음에 호출하면 정합 자동 성립**. (초기 측정이 연장 전에 찍혀 "구조적 불일치"로 오판했음 — §9-0 참조)
2. **순환 import**: `qpolygon-utils ↔ skeleton-utils` 상호 import 여부 점검. 순환이면 split 함수를 제3의 모듈(예: canvas-util)로 추출하거나 의존성 정리.
3. **기존 `isOuterEdge` roofLine 제거 영향**: 숨긴 라인을 참조하는 곳(치수 계산, 플랜 저장/복원 등)이 있는지 확인 후 제거.
@@ -159,3 +159,91 @@ opts.degreeOf?: (parentLine) => number // 부모 외곽변 → 경사각(도).
### 8-5. 리스크
- **분할점 부재**: 한쪽흐름은 내부 보조선이 없어 외곽변이 1:1 통짜 라인으로 그려진다 → 부모 변 type 매칭이 단순(분할 시에도 조각은 부모 type 상속). split 의 끝점 정합성(`isPointOnLineNew`, tol 0.1) 자체는 분할점이 없으면 무의미하므로 `else` 통짜 경로(`:5493`)로 안전하게 떨어진다.
- **`isGable` 판정원**: `drawShedRoof` 의 `gables` 분류(`:1653`)와 동일 기준(`attributes.type === GABLE`)을 써야 보정 대상이 일치.
+
+---
+
+## 9. SK 끝점 ↔ 처마변 정합 — 실측 결과 (2026-06-12, 측정 시점 정정)
+
+§4 리스크1 을 임시 계측(`skeleton-utils.js` 의 `logSkRoofLineAlignment`)으로 추녀 연장 **전/후** 2단계 실측한 결과.
+
+### 9-0. ⚠️ 측정 시점 정정 (중요)
+1차 측정은 `createInnerLinesFromSkeleton` **직후**(`:1279`, 추녀 연장 전)에 찍혀, 추녀 종점이 baseLine 코너에 있는 상태(`onRoof=false`, `perpRoof=offset`)만 보고 **"구조적 불일치 → 투영 보정 필요"로 오판**했다. 실제로는 그 직후 `drawBaselineToRooflineHelpers`(`:1285`)가 추녀를 처마변까지 연장한다. 연장 **후**(`afterExt`) 측정에서 정합이 성립함을 확인 → 아래는 정정된 결론. **(투영 보정·SK 입력 교체·연장 보정 설계는 모두 폐기. 불필요했음.)**
+
+### 9-1. 실측 결과 (용마루 우진각, 변별 offset 50px)
+처마변 x∈[357.5,1147.6]·y∈[115.2,636.7] vs baseLine x∈[407.5,1097.6]·y∈[165.2,586.7] (전 변 50px 안쪽).
+
+| 추녀 끝점 | beforeExt (`:1279`, 연장 전) | afterExt (`:1285`, 연장 후) |
+|---|---|---|
+| **바깥** 끝점(4코너) | baseLine 코너 — `onRoof=false`, `diffRoof=22.4`, `onBase=true` | **처마 코너로 연장 — `onRoof=true`, `diffRoof=0`** |
+| 안쪽·용마루(내부점) | `onRoof=false` (260.7) | `onRoof=false` (260.7) — 내부점이라 정상 |
+
+예: 추녀 바깥 끝 `(407.5,165.2)`(baseLine) → `(357.5,115.2)`(처마 코너) 로 연장. 4코너 전부 `diffRoof=0`, `onRoof=true`.
+
+### 9-2. 추녀 연장 메커니즘 (이미 구현됨)
+`drawBaselineToRooflineHelpers`(`:685`, 플래그 `DRAW_BASELINE_TO_ROOFLINE_HELPER=true`, `:25`):
+- `hipLines` 추출(`:734`) → baseLine 코너에 닿는 hip 만(`CORNER_EPS`, `:773`) → 추녀 진행 방향으로 ray cast(`rayHitSegment`, `:693`) → 처마변 교점까지 hip 좌표를 **연장**(`:861-865`).
+- `actualSize` 비율 보정(`:871`) + `__extended`/`attributes.extended` 플래그로 save/load 영속(`:879`).
+- 즉 "추녀는 roof.lines 까지 연결되는 선" 이 이미 코드에 있다. SK 골조 자체는 baseLine 기준(동기화 유지) + 추녀 종점만 처마변까지 연장.
+
+### 9-3. 결론 — split 은 추녀 연장 **다음**에 호출
+- 추녀 종점은 연장 후 처마변 위(`onRoof=true`, `diffRoof=0`)에 정확히 앉으므로, **split/외곽선 innerLine화의 정합은 깨지지 않는다.**
+- **유일한 요건**: `splitRoofLinesToInnerLines` 호출을 `createInnerLinesFromSkeleton` 직후가 아니라 **`drawBaselineToRooflineHelpers`(`:1285`) 다음에** 둘 것. §3-2 가 호출 위치를 연장 전으로 잡은 것이 유일한 함정이었음.
+- **단순 우진각**: 추녀가 처마 **코너**(변 끝점)에 닿으므로 split 분할점 없음 → 처마 4변 통짜 innerLine(정상).
+- **복합 형상**(L자·凸자): 추녀가 처마변 **중간**에 닿으면 그 점에서 분할. 연장 후 종점이 처마변 위이므로 분할점으로 정상 인식.
+
+### 9-4. 검증 기준 (구현 시)
+- split 을 연장 후 호출 → 처마 4변이 innerLine 으로 등록, select+우클릭 편집 가능.
+- 복합 형상: 처마변 중간 접점에서 분할, 각 조각 독립 편집.
+- offset=0 / offset≠0 양쪽 동작.
+- 마루이동/벽이동 후 재그리기에도 유지(연장은 `__extended`/`attributes.extended` 로 영속).
+- **임시 계측(`logSkRoofLineAlignment` 정의 + 호출부 3곳 `:1279`/`:1285`/`:1413`) 제거** 후 커밋.
+
+---
+
+## 10. 육각형 등 비직교 형상에서 외곽 지붕선 소실 — 진단 (2026-06-22 추가)
+
+### 10-1. 증상
+**육각형(wall 6변) 용마루 지붕** 설정 시 오른쪽 위 외곽 지붕선 2개가 화면에서 사라진다.
+단순 우진각(사각형)은 정상(§9-1 실측 검증 완료) — 비직교(대각선) 변이 많은 형상에서만 발생.
+
+### 10-2. 가설 (코드 분석, 1순위)
+`splitRoofLinesToInnerLines`(`qpolygon-utils.js:5485`) 는 처마변을 innerLine 으로 등록한 뒤
+**roof 원본 외곽선을 `stroke:'transparent'` 로 숨긴다**(`:5563`). 따라서 어떤 처마변이
+innerLine 으로 **재등록되지 못하면** 원본 대체선도 없어 그 자리에 선이 완전히 사라진다.
+
+누락 1순위 지점 = `hasOverlapLine` 가드(`:5511-5523`). 이는 **축정렬 bounding-box 포함관계**로만
+overlap 을 판정하는데, 이 블록은 원래 **변별 경로(`drawRoofByAttribute`, 주로 직교 형상)** 의
+인라인 코드를 `1bf5f45b` 에서 공용 추출한 것이다. 직교 변은 bbox 가 선분에 딱 맞아 false positive 가
+드물지만, **육각형의 대각선 처마변 + 대각선 추녀(hip)** 는 bbox 가 큰 사각형이라 코너를 공유할 때
+서로의 bbox 를 포함하기 쉬워 `hasOverlapLine=true` 오발동 → 해당 처마변 `return`(skip).
+오른쪽 위 짧은 대각선 변 2개가 인접 추녀 bbox 에 함께 포함되어 동시 skip 된 것으로 추정.
+
+### 10-3. 진단 결과 — 가설 확정 (2026-06-22)
+육각형(직사각형 우상단 모서리를 계단으로 자른 형상) 재현 `[HEXDIAG]` 로그:
+
+ split entry roof.lines=6 innerLines=9
+ line#0 WHOLE (386,35)→(386,1335) ← 좌 수직변, 정상
+ line#1 WHOLE (386,1335)→(1286,1335) ← 하 수평변, 정상
+ line#2 WHOLE (1286,1335)→(1286,235) ← 우 수직변, 정상
+ line#3 SKIP (1286,235)→(1086,235) overlapBy=inner⊇curr hip(1286,235)→(836,685) ✗
+ line#4 SKIP (1086,235)→(1086,35) overlapBy=inner⊇curr hip(1086,35)→(736,385) ✗
+ line#5 WHOLE (1086,35)→(386,35) ← 상 수평변, 정상
+
+- 사라진 line#3(수평, y두께 0)·line#4(수직, x두께 0) = 잘린 계단의 짧은 변 2개.
+- 둘 다 `inner⊇curr`: 끝점 코너를 공유한 **대각선 추녀(hip)의 bbox 가 0-두께 처마변 bbox 를 포함**.
+ 예) line#3 bbox `x[1086,1286]·y[235,235]` ⊂ hip bbox `x[836,1286]·y[235,685]`.
+- line#0·1·2·5 가 멀쩡한 건 길어서 어떤 hip bbox 로도 통째로 못 감싸기 때문. → **가설 확정.**
+- 1순위 정정: 범인은 "대각선 처마변"이 아니라 **축정렬(수평/수직) 짧은 처마변 + 대각선 추녀** 조합.
+
+### 10-4. 수정 (적용 완료, 2026-06-22)
+`hasOverlapLine` 판정을 **bbox 포함 → 공선 + 구간 덮음**으로 교체(`qpolygon-utils.js:5507-5519`):
+한쪽 선분의 **양 끝점이 모두 상대 선분 위**(`isPointOnLineNew`, tol 0.1)일 때만 overlap 인정.
+대각선 추녀는 처마변과 공선이 아니라 통과 → 처마변 정상 등록. `[HEXDIAG]` 계측·`logger` import 전량 제거.
+
+**회귀 영향 분석** (이 함수를 쓰는 4경로):
+- **변별**(`drawRoofByAttribute` → `:5447`): 가드 원사용처. 원래 bbox 가 잡던 "진짜 같은 선 위 겹침"은 공선이라 새 판정으로도 잡힘. bbox-만-겹침(공선 아님)은 원래 false positive → 제거가 곧 개선. 회귀 위험 = 공선인데 부동소수로 tol 0.1 초과하는 경계뿐(드묾).
+- **한쪽흐름**(`drawShedRoof` → `:1731`): 내부 보조선 없어 `innerLines` 거의 비어 가드 트리거 자체가 드묾. 영향 미미.
+- **용마루**(skeleton `:1288`): 대상 케이스. 사각형 우진각·육각형 양쪽 확인.
+- **박공**(`drawGableRoof`): split 미사용 → 무영향.
+
+**재현 검증 체크리스트**: ① 육각형 용마루 6변 전부 등록(소실 없음) ② 단순 사각형 우진각 4변 유지(회귀 없음) ③ 변별 지붕 외곽선·추녀 정상 ④ 한쪽흐름 경사변 actual=plane/cos 유지. (캔버스 인터랙션이라 런타임 확인은 재현 필요 — 정적 분석상 ①만 동작 변화, ②③④ 불변 예상.)
diff --git a/package.json b/package.json
index e990626b..7e51dd5d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"start:cluster1": "env-cmd -f .env.production next start -p 5000",
"start:cluster2": "env-cmd -f .env.production next start -p 5001",
"start:dev": "env-cmd -f .env.development next start -p 5010",
+ "start:ur": "env-cmd -f .env.development next start -p 5050",
"start:btob": "env-cmd -f .env.development next start -p 5060",
"lint": "next lint",
"serve": "node server.js"
diff --git a/src/common/common.js b/src/common/common.js
index 2e4bb98c..df8be1a2 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -227,6 +227,11 @@ export const SAVE_KEY = [
'outerLineFix',
'adjustRoofLines',
'northModuleYn',
+ // SK 빌드 시 hip 이 ext 끝점까지 연장된 상태임을 표시.
+ // undo/redo 시 보존되어야 integrateExtensionLines 가 중복 merge 를 스킵할 수 있다.
+ // (없으면 undo 후 지붕면 할당 시 hip 이 다시 merge 되어 corner 가 inner mesh 와 분리되며
+ // path-finding 이 실패 → 4 면 분할 안 됨)
+ '__extended',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]
diff --git a/src/components/common/ErrorBoundary.jsx b/src/components/common/ErrorBoundary.jsx
index 677a67fa..dad497a0 100644
--- a/src/components/common/ErrorBoundary.jsx
+++ b/src/components/common/ErrorBoundary.jsx
@@ -40,7 +40,7 @@ class ErrorBoundary extends React.Component {
Timestamp: {new Date().toISOString()}
Error: {this.state.error && this.state.error.toString()}
Stack Trace:
- {this.state.errorInfo.componentStack}
+ {this.state.errorInfo?.componentStack}
this.setState({ hasError: false, error: null, errorInfo: null })}
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index fc2bb168..5486c54b 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -44,17 +44,9 @@ function __classifyLineForLabel(obj) {
if (name === LINE_TYPE.SUBLINE.VALLEY || lineName === LINE_TYPE.SUBLINE.VALLEY) return 'V'
if (name === LINE_TYPE.SUBLINE.GABLE || lineName === LINE_TYPE.SUBLINE.GABLE) return 'G'
if (name === LINE_TYPE.SUBLINE.VERGE || lineName === LINE_TYPE.SUBLINE.VERGE) return 'VG'
- if (
- type === LINE_TYPE.WALLLINE.EAVE_HELP_LINE ||
- lineName === LINE_TYPE.WALLLINE.EAVE_HELP_LINE ||
- name === LINE_TYPE.WALLLINE.EAVE_HELP_LINE
- ) return 'E'
- if (
- typeof obj.x1 === 'number' &&
- typeof obj.y1 === 'number' &&
- typeof obj.x2 === 'number' &&
- typeof obj.y2 === 'number'
- ) return 'SK'
+ if (type === LINE_TYPE.WALLLINE.EAVE_HELP_LINE || lineName === LINE_TYPE.WALLLINE.EAVE_HELP_LINE || name === LINE_TYPE.WALLLINE.EAVE_HELP_LINE)
+ return 'E'
+ if (typeof obj.x1 === 'number' && typeof obj.y1 === 'number' && typeof obj.x2 === 'number' && typeof obj.y2 === 'number') return 'SK'
return null
}
@@ -241,7 +233,6 @@ export function reattachRoofFaceDebugLabels(canvas) {
canvas.renderAll()
}
-
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
type: 'QPolygon',
// lines: [],
@@ -421,11 +412,13 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.setCoords()
// 보조선 / 자식 객체들도 같이 이동시킨다 (ROOF 가 아닌 WALL 등에서도 동작하도록)
+ // 단, fabric.Group(도머 등)은 절대 위치 유지해야 하므로 제외
if ((dxModified !== 0 || dyModified !== 0) && this.canvas) {
const directChildren = this.canvas.getObjects().filter((obj) => {
if (obj === this) return false
if (obj.parentId !== this.id) return false
if (obj.name === 'lengthText') return false
+ if (obj.type === 'group') return false // 도머 등 Group 은 이동 대상에서 제외
return true
})
const childIds = new Set(directChildren.map((c) => c.id).filter(Boolean))
@@ -456,6 +449,59 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
movedTextCount++
}
})
+
+ // [WALL→ROOF 동기 이동]
+ // 지붕형상 설정 후 wall 과 roof 는 별개의 폴리곤이고, hip/ridge/baseLine 같은 보조선은
+ // 모두 parentId=roof.id 로 묶여 있어 wall 의 directChildren 에 포함되지 않는다.
+ // wall 만 단독 이동시키면 roof+보조선이 옛 위치에 남아 시각적으로 어긋나므로
+ // wall 이동 시 연결된 roof 를 찾아 polygonMoved 로 같은 delta 만큼 이동시킨다.
+ // (polygonMoved 가 자체적으로 직속 자식 평행이동까지 처리하므로 별도 순회 불필요)
+ if (this.name === POLYGON_TYPE.WALL) {
+ const linkedRoof = this.canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.ROOF && obj.wall === this)
+ if (linkedRoof) {
+ linkedRoof._preDragLeft = linkedRoof.left
+ linkedRoof._preDragTop = linkedRoof.top
+ linkedRoof.set({
+ left: (linkedRoof.left ?? 0) + dxModified,
+ top: (linkedRoof.top ?? 0) + dyModified,
+ })
+ linkedRoof.fire('polygonMoved')
+ // polygonMoved 가 ROOF 분기에서 _preDragLeft 를 정리하지 않으므로 여기서 정리
+ linkedRoof._preDragLeft = null
+ linkedRoof._preDragTop = null
+
+ // roof 의 attributes.roofId 매칭 객체(예: 일부 baseLine, 텍스트류)는
+ // roof.id 와 다른 식별자로 묶여 polygonMoved 의 parentId === roof.id 필터에
+ // 잡히지 않을 수 있다. 누락 방지를 위해 추가 평행이동.
+ const extraKids = this.canvas.getObjects().filter((obj) => {
+ if (obj === linkedRoof) return false
+ if (obj.parentId === linkedRoof.id) return false // 이미 polygonMoved 가 처리
+ return obj.attributes?.roofId === linkedRoof.id
+ })
+ extraKids.forEach((obj) => {
+ const next = {}
+ if (obj.left != null) next.left = obj.left + dxModified
+ if (obj.top != null) next.top = obj.top + dyModified
+ if (obj.x1 != null) next.x1 = obj.x1 + dxModified
+ if (obj.y1 != null) next.y1 = obj.y1 + dyModified
+ if (obj.x2 != null) next.x2 = obj.x2 + dxModified
+ if (obj.y2 != null) next.y2 = obj.y2 + dyModified
+ obj.set(next)
+ if (obj.startPoint)
+ obj.startPoint = {
+ x: obj.startPoint.x + dxModified,
+ y: obj.startPoint.y + dyModified,
+ }
+ if (obj.endPoint) obj.endPoint = { x: obj.endPoint.x + dxModified, y: obj.endPoint.y + dyModified }
+ if (obj.minX != null) obj.minX += dxModified
+ if (obj.maxX != null) obj.maxX += dxModified
+ if (obj.minY != null) obj.minY += dyModified
+ if (obj.maxY != null) obj.maxY += dyModified
+ obj.setCoords?.()
+ })
+ }
+ }
+
this.canvas.renderAll()
// ROOF 의 경우 polygonMoved 가 같은 일을 다시 하므로, _preDragLeft 는 거기서 정리됨
@@ -552,6 +598,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
if (obj === this) return false
if (obj.parentId !== this.id) return false
if (obj.name === 'lengthText') return false // 이미 재생성됨
+ if (obj.type === 'group') return false // 도머 등 Group 은 절대 위치 유지
return true
})
@@ -593,6 +640,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
movedTextCount++
}
})
+
this.canvas.renderAll()
}
@@ -879,7 +927,28 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
const degree = Big(Math.atan2(dy.toNumber(), dx.toNumber())).times(180).div(Math.PI).toNumber()
+ // 이동/undo/redo 시 기하학 drift(round-off)로 text 수치가 변동되지 않도록
+ // 저장된 attributes 우선 사용. 현재 corridorDimension.column에 맞춰 값 결정:
+ // - realDimension(배치면 메뉴): actualSize 우선
+ // - corridorDimension(지붕덮개 메뉴): planeSize 우선
+ const preservedActualSize = this.lines[i]?.attributes?.actualSize
+ const preservedPlaneSize = this.lines[i]?.attributes?.planeSize
+ const currentColumn = (typeof window !== 'undefined' && window.__currentCorridorColumn) || 'corridorDimension'
+ const displayValue =
+ currentColumn === 'realDimension'
+ ? preservedActualSize != null
+ ? preservedActualSize
+ : preservedPlaneSize != null
+ ? preservedPlaneSize
+ : length
+ : preservedPlaneSize != null
+ ? preservedPlaneSize
+ : preservedActualSize != null
+ ? preservedActualSize
+ : length
+
// Create a new text object if it doesn't exist
+
const text = new fabric.Text(__display, {
left: midPoint.x,
top: midPoint.y,
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 0718ea52..17b2e890 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -36,7 +36,12 @@ import {
import { sessionStore } from '@/store/commonAtom'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
+import {
+ addedRoofsState,
+ basicSettingState,
+ selectedRoofMaterialSelector,
+ settingModalFirstOptionsState,
+} from '@/store/settingAtom'
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
import { commonUtilsState } from '@/store/commonUtilsAtom'
import { menusState } from '@/store/menuAtom'
@@ -52,6 +57,7 @@ import { QcastContext } from '@/app/QcastProvider'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { usePolygon } from '@/hooks/usePolygon'
import { useTrestle } from '@/hooks/module/useTrestle'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
export default function CanvasMenu(props) {
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
@@ -73,6 +79,7 @@ export default function CanvasMenu(props) {
const { handleZoomClear, handleZoom } = useCanvasEvent()
const { setAllModuleSurfaceIsComplete, isAllComplete } = useTrestle()
const { handleMenu } = useMenu()
+ const { undo, redo, canUndo, canRedo } = useUndoRedo()
// const urlParams = useSearchParams()
const { handleEstimateSubmit, fetchSetting, estimateContextState, setEstimateContextState } = useEstimateController()
const estimateRecoilState = useRecoilValue(estimateState)
@@ -600,6 +607,20 @@ export default function CanvasMenu(props) {
{!['estimate', 'simulation'].some((num) => num === selectedMenu) && (
<>
+
+
+
+
+
+
+
+
+
+
{
{getMessage('plan.mode.vertical.horizontal')}
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index d6bb2477..9e02df75 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -9,6 +9,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { subMenusState } from '@/store/menuAtom'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { commonUtilsState } from '@/store/commonUtilsAtom'
+import { isUndoRedoRestoring } from '@/hooks/useUndoRedo'
export default function MenuDepth01() {
const canvas = useRecoilValue(canvasState)
@@ -29,6 +30,10 @@ export default function MenuDepth01() {
}
useEffect(() => {
+ // undo/redo 복원 중에는 메뉴 변경에 따른 팝업 자동 오픈을 건너뛴다.
+ // 그렇지 않으면 그리기 팝업이 다시 열리며 setDrawing(true) 가 호출되어
+ // redo 버튼이 비활성화되는 문제가 발생한다.
+ if (isUndoRedoRestoring()) return
handleMenu(selectedMenu)
canvas?.discardActiveObject()
}, [currentMenu])
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
index 9648ef2e..77e09e8f 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
@@ -10,6 +10,7 @@ import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
import { useSwal } from '@/hooks/useSwal'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
export default function AuxiliaryEdit(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -23,8 +24,10 @@ export default function AuxiliaryEdit(props) {
const [arrow2, setArrow2] = useState(null)
const currentObject = useRecoilValue(currentObjectState)
const { swalFire } = useSwal()
+ const { saveSnapshot } = useUndoRedo()
const [useCalcPad, setUseCalcPad] = useState(false)
const disableKeypad = !useCalcPad
+
const handleSave = () => {
if ((!arrow1 && !arrow2) || (+verticalSize === 0 && +horizonSize === 0)) {
swalFire({ title: getMessage('length.direction.is.required'), type: 'alert' })
@@ -41,6 +44,7 @@ export default function AuxiliaryEdit(props) {
return
}
+ saveSnapshot()
if (type === 'copy') {
if (currentObject) {
copy(
@@ -81,7 +85,7 @@ export default function AuxiliaryEdit(props) {
disableKeypad={disableKeypad}
options={{
allowNegative: false,
- allowDecimal: false
+ allowDecimal: false,
}}
/>
@@ -91,14 +95,12 @@ export default function AuxiliaryEdit(props) {
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
- document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
>
{
setArrow1('↓')
- document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
>
{
setArrow2('→')
- document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
>
@@ -143,7 +143,12 @@ export default function AuxiliaryEdit(props) {
setUseCalcPad((prev) => !prev)}>
-
{getMessage('modal.common.save')}
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index f73cc038..3bdd9ce2 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -8,7 +8,9 @@ import { useEffect, useState } from 'react'
import Image from 'next/image'
import Big from 'big.js'
import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
+import { syncOuterBoundaryTwin } from '@/util/canvas-util'
import { normalizeDigits } from '@/util/input-utils'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function AuxiliarySize(props) {
@@ -56,7 +58,9 @@ export default function AuxiliarySize(props) {
}
}
+ const { saveSnapshot } = useUndoRedo()
const handleSave = () => {
+ saveSnapshot()
const { x1, y1, x2, y2 } = currentObject
// 선택한 선분의 planeSize와 actualSize의 사잇각을 구한다.
@@ -85,15 +89,26 @@ export default function AuxiliarySize(props) {
// 현재 선분의 길이와 입력된 길이의 차이를 구한다.
const scaleFactor = Big(size).div(distance)
- //1지점 선택일때는 2지점의 좌표, 2지점 선택일때는 1지점의 좌표를 조정한다.
+ // [SIZE-ANCHOR 2026-06-22] 저장된 x1/x2 끝점 순서가 라인마다 달라(왼쪽 선은 1지점이 위, 오른쪽 선은 1지점이 아래)
+ // 동일하게 늘려도 방향이 반대로 보이던 문제 수정. 화면 기준으로 1지점=왼쪽 위, 2지점=오른쪽 아래로 통일한다.
+ // (외벽선 오프셋 useWallLineOffsetSetting 의 "1지점=down/right, 2지점=up/left" 컨벤션과 동일)
+ // 수직선(x 동일)은 위쪽을, 그 외는 왼쪽을 1지점(왼쪽 위)으로 판별한다.
+ const VERTICAL_EPS = 1 // 캔버스 단위(≈10mm) — 이 이하의 x 차이는 수직선으로 간주
+ const p1IsTopLeft = Math.abs(x1 - x2) > VERTICAL_EPS ? x1 < x2 : y1 <= y2
+ const topLeft = p1IsTopLeft ? { x: x1, y: y1 } : { x: x2, y: y2 }
+ const bottomRight = p1IsTopLeft ? { x: x2, y: y2 } : { x: x1, y: y1 }
+
+ //1지점(왼쪽 위) 고정 → 오른쪽 아래 끝점을 늘린다(down/right). 2지점(오른쪽 아래) 고정 → 왼쪽 위 끝점을 늘린다(up/left).
if (checkedRadio === 1) {
- const newX2 = Big(x1).plus(dx.times(scaleFactor)).toNumber()
- const newY2 = Big(y1).plus(dy.times(scaleFactor)).toNumber()
- currentObject.set({ x2: newX2, y2: newY2 })
+ const newBrX = Big(topLeft.x).plus(Big(bottomRight.x).minus(topLeft.x).times(scaleFactor)).toNumber()
+ const newBrY = Big(topLeft.y).plus(Big(bottomRight.y).minus(topLeft.y).times(scaleFactor)).toNumber()
+ if (p1IsTopLeft) currentObject.set({ x2: newBrX, y2: newBrY })
+ else currentObject.set({ x1: newBrX, y1: newBrY })
} else if (checkedRadio === 2) {
- const newX1 = Big(x2).minus(dx.times(scaleFactor)).toNumber()
- const newY1 = Big(y2).minus(dy.times(scaleFactor)).toNumber()
- currentObject.set({ x1: newX1, y1: newY1 })
+ const newTlX = Big(bottomRight.x).plus(Big(topLeft.x).minus(bottomRight.x).times(scaleFactor)).toNumber()
+ const newTlY = Big(bottomRight.y).plus(Big(topLeft.y).minus(bottomRight.y).times(scaleFactor)).toNumber()
+ if (p1IsTopLeft) currentObject.set({ x1: newTlX, y1: newTlY })
+ else currentObject.set({ x2: newTlX, y2: newTlY })
}
//planeSize와 actualSize를 재계산한다.
currentObject.attributes.planeSize = calcLinePlaneSize({
@@ -112,6 +127,12 @@ export default function AuxiliarySize(props) {
degree,
)
currentObject.addLengthText()
+
+ // [BOUNDARY-SYNC 2026-06-23] currentObject 가 처마 외곽선(polygon.lines)과 좌표가 같은 "경계 복제본"이면,
+ // 편집 전 동일 좌표였던 처마선 쌍둥이도 변경 후 좌표로 함께 갱신해 두 경계 표현을 동기화한다.
+ // 미동기화 시 처마선이 옛 위치에 남아 지붕면 할당 split 에서 경계가 2벌이 되어 바깥 사각형이 가짜 면으로 잡힌다.
+ // (일반 보조선은 동일 좌표 처마선이 없어 매칭 안 됨 → 영향 없음)
+ syncOuterBoundaryTwin(canvas, currentObject, { x: x1, y: y1 }, { x: x2, y: y2 })
}
canvas.renderAll()
}
diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index 983492bf..f668acfb 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -11,6 +11,7 @@ import { useModuleSelection } from '@/hooks/module/useModuleSelection'
import { useOrientation } from '@/hooks/module/useOrientation'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import {
canvasState,
checkedModuleState,
@@ -32,6 +33,7 @@ import Trestle from './step/Trestle'
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
+ const { clearStacks } = useUndoRedo()
const [tabNum, setTabNum] = useState(1)
const orientationRef = useRef(null)
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
@@ -84,6 +86,11 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
useModuleBasicSetting(tabNum)
const { updateObjectDate } = useMasterController()
+ // 모듈/가대설정 팝업 첫 진입 시 undo/redo 스택 초기화
+ useEffect(() => {
+ clearStacks()
+ }, [])
+
useEffect(() => {
const moduleTabNum = basicSetting.roofSizeSet != 3 ? 3 : 2
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index a74abbdf..9f1baec0 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -18,6 +18,7 @@ import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedM
import { v4 as uuidv4 } from 'uuid'
import { useEstimate } from '@/hooks/useEstimate'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
import { QcastContext } from '@/app/QcastProvider'
@@ -34,6 +35,7 @@ export default function CircuitTrestleSetting({ id }) {
const { apply, setViewCircuitNumberTexts, getEstimateData, clear: clearTrestle, setAllModuleSurfaceIsComplete } = useTrestle()
const { swalFire } = useSwal()
const { saveEstimate } = useEstimate()
+ const { clearStacks } = useUndoRedo()
const canvas = useRecoilValue(canvasState)
const setCurrentMenu = useSetRecoilState(currentMenuState)
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
@@ -722,6 +724,7 @@ export default function CircuitTrestleSetting({ id }) {
setIsGlobalLoading(false)
}
+ clearStacks()
// removeNotAllocationModules()
}
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index e9f57869..8c30afe1 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -9,6 +9,7 @@ import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
const FLOW_DIRECTION_TYPE = {
EIGHT_AZIMUTH: 'eightAzimuth',
@@ -24,6 +25,7 @@ export default function FlowDirectionSetting(props) {
const { setPolygonLinesActualSize } = usePolygon()
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+ const { saveSnapshot } = useUndoRedo()
useEffect(() => {
return () => {
@@ -77,6 +79,7 @@ export default function FlowDirectionSetting(props) {
const [type, setType] = useState(target.surfaceCompassType ?? FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
+ saveSnapshot()
roof.set({
direction: direction,
surfaceCompass: orientation,
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
index dd2a1d2a..712b8b88 100644
--- a/src/components/floor-plan/modal/module/PanelEdit.jsx
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -8,7 +8,6 @@ import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useModule } from '@/hooks/module/useModule'
import { useSwal } from '@/hooks/useSwal'
-
export const PANEL_EDIT_TYPE = {
MOVE: 'move',
MOVE_ALL: 'moveAll',
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
index 0c160656..869e7032 100644
--- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -1,3 +1,4 @@
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
@@ -14,7 +15,9 @@ export default function ColumnInsert(props) {
const [selectedType, setSelectedType] = useState(MODULE_INSERT_TYPE.LEFT)
const { getMessage } = useMessage()
const { moduleColumnInsert } = useModule()
+ const { saveSnapshot } = useUndoRedo()
const handleApply = () => {
+ saveSnapshot()
moduleColumnInsert(selectedType)
closePopup(id)
}
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
index e9fb799c..ff7cb813 100644
--- a/src/components/floor-plan/modal/module/row/RowInsert.jsx
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -1,3 +1,4 @@
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import Image from 'next/image'
import { useState } from 'react'
@@ -14,7 +15,9 @@ export default function RowInsert(props) {
const [selectedType, setSelectedType] = useState(MODULE_INSERT_TYPE.TOP)
const { getMessage } = useMessage()
const { muduleRowInsert } = useModule()
+ const { saveSnapshot } = useUndoRedo()
const handleApply = () => {
+ saveSnapshot()
muduleRowInsert(selectedType)
closePopup(id)
}
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
index 5cf95b3f..a6d61188 100644
--- a/src/components/floor-plan/modal/module/row/RowRemove.jsx
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -21,7 +21,6 @@ export default function RowRemove(props) {
{ name: getMessage('modal.row.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
]
const handleApply = () => {
- // if (apply) apply()
moduleRowRemove(selectedType)
closePopup(id)
}
diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index 00fb8e34..da7d818d 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -16,7 +16,7 @@ import { useSwal } from '@/hooks/useSwal'
export default function SizeSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const [settingTarget, setSettingTarget] = useState(props.side || 1)
- const { id, pos = contextPopupPosition, target } = props
+ const { id, pos = contextPopupPosition, target, initialPlacement = false } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { resizeObjectBatch } = useObjectBatch({})
@@ -58,7 +58,7 @@ export default function SizeSetting(props) {
}
if (target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW) {
- resizeObjectBatch(settingTarget, target, width, height, id)
+ resizeObjectBatch(settingTarget, target, width, height, id, initialPlacement)
} else if (target.name === POLYGON_TYPE.ROOF) {
resizeSurfaceShapeBatch(settingTarget, target, width, height, id)
}
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 58ffcea5..33ee5cca 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -13,6 +13,7 @@ import { addedRoofsState, roofDisplaySelector, roofMaterialsAtom } from '@/store
import { useCommonCode } from '@/hooks/common/useCommonCode'
import QSelectBox from '@/components/common/select/QSelectBox'
import { globalLocaleStore } from '@/store/localeAtom'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
import { usePolygon } from '@/hooks/usePolygon'
@@ -72,6 +73,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
/** usePopup에서 closePopup 함수 가져오기 */
const { drawDirectionArrow } = usePolygon()
const { setSurfaceShapePattern } = useRoofFn()
+ const { clearStacks } = useUndoRedo()
const canvas = useRecoilValue(canvasState)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
@@ -442,6 +444,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
/* 저장 후 화면 닫기 */
closePopup(id)
await saveCanvas(false)
+
+ // 지붕재 변경 저장 후 undo/redo stack 초기화
+ clearStacks()
}
return (
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index 62f9574b..efe063b2 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -242,7 +242,9 @@ export function useCanvasConfigInitialize() {
obj.type === 'QLine' &&
obj.attributes?.type !== 'pitchSizeLine' &&
obj.attributes?.roofId === roof.id &&
- innerLineTypes.includes(obj.name),
+ // [보조선 복원 fix] 저장→불러오기 후 지붕면 할당이 보조선을 쓰려면 auxiliaryLine 도 innerLines 에
+ // 재연결해야 한다. 기존엔 SUBLINE(hip/ridge) 만 포함해 보조선이 빠져, 불러온 직후 할당이 실패했다.
+ (innerLineTypes.includes(obj.name) || obj.name === 'auxiliaryLine'),
)
})
}
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index fc4c907b..ff2ca0e5 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -14,6 +14,7 @@ import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { BATCH_TYPE } from '@/common/common'
import { useMouse } from '@/hooks/useMouse'
import { QPolygon } from '@/components/fabric/QPolygon'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
export function useCommonUtils() {
const canvas = useRecoilValue(canvasState)
@@ -28,6 +29,7 @@ export function useCommonUtils() {
const { drawDirectionArrow, addLengthText } = usePolygon()
const { applyDormers } = useObjectBatch({})
const { getIntersectMousePoint } = useMouse()
+ const { saveSnapshot } = useUndoRedo()
useEffect(() => {
commonTextMode()
@@ -556,6 +558,12 @@ export function useCommonUtils() {
if (object.id) {
const group = canvas.getObjects().filter((obj) => obj.id === object.id)
group.forEach((obj) => canvas?.remove(obj))
+ // QLine 보조선은 lengthText 를 this.text(단수)에 저장해 아래 texts(배열) 제거에 안 걸린다.
+ // lengthText 는 parentId === line.id 로 연결되므로 parentId 매칭으로 함께 제거 (삭제 시 text 잔존 방지).
+ canvas
+ .getObjects()
+ .filter((obj) => obj.parentId === object.id && obj.name === 'lengthText')
+ .forEach((obj) => canvas?.remove(obj))
}
if (object.type === 'group') {
@@ -617,7 +625,8 @@ export function useCommonUtils() {
}
const buttonAct = dormerName == BATCH_TYPE.TRIANGLE_DORMER ? 3 : 4
- applyDormers(dormerParams, buttonAct)
+ // [undo 중복 fix] copyObject 에서 이미 saveSnapshot 을 호출했으므로 applyDormers 의 스냅샷은 건너뛴다.
+ applyDormers(dormerParams, buttonAct, true)
} else if (obj.name === 'roof' && obj.type === 'QPolygon') {
// roof(QPolygon) 객체는 순환 참조(lines[].parent -> polygon)로 인해
// fabric.clone() 사용 시 Maximum call stack size exceeded 에러 발생
@@ -834,6 +843,7 @@ export function useCommonUtils() {
}
const deleteObject = () => {
+ saveSnapshot()
const selectedObj = canvas?.getActiveObjects()
if (selectedObj) {
selectedObj.forEach((obj) => {
@@ -863,6 +873,7 @@ export function useCommonUtils() {
}
const copyObject = () => {
+ saveSnapshot()
const obj = canvas?.getActiveObject()
commonCopyObject(obj)
}
diff --git a/src/hooks/common/useMenu.js b/src/hooks/common/useMenu.js
index 40c1b6a0..9ba54255 100644
--- a/src/hooks/common/useMenu.js
+++ b/src/hooks/common/useMenu.js
@@ -21,6 +21,7 @@ import { MENU } from '@/common/common'
import { useTrestle } from '@/hooks/module/useTrestle'
import { useOrientation } from '@/hooks/module/useOrientation'
import { corridorDimensionSelector } from '@/store/settingAtom'
+import { useUndoRedo, isUndoRedoRestoring } from '@/hooks/useUndoRedo'
/**
* 메뉴 처리 훅
@@ -36,6 +37,7 @@ export default function useMenu() {
const { clear: trestleClear, setAllModuleSurfaceIsComplete } = useTrestle()
const { nextStep } = useOrientation()
const [corridorDimension, setCorridorDimension] = useRecoilState(corridorDimensionSelector)
+ const { saveSnapshot } = useUndoRedo()
const handleMenu = (type) => {
closeAll()
if (type === 'outline') {
@@ -67,6 +69,8 @@ export default function useMenu() {
addPopup(popupId, 1, )
break
case MENU.ROOF_COVERING.ALL_REMOVE:
+ // undo/redo 복원 중에는 confirm 창을 띄우지 않는다
+ if (isUndoRedoRestoring()) break
deleteAllSurfacesAndObjects()
break
}
@@ -89,6 +93,8 @@ export default function useMenu() {
addPopup(popupId, 1, )
break
case MENU.BATCH_CANVAS.ALL_REMOVE:
+ // undo/redo 복원 중에는 confirm 창을 띄우지 않는다
+ if (isUndoRedoRestoring()) break
deleteAllSurfacesAndObjects()
break
}
diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js
index 88c5f6ea..8d611eaf 100644
--- a/src/hooks/common/useRoofFn.js
+++ b/src/hooks/common/useRoofFn.js
@@ -8,6 +8,7 @@ import { useLine } from '@/hooks/useLine'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { useText } from '@/hooks/useText'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
const ROOF_COLOR = {
0: 'rgb(199,240,213)',
@@ -26,6 +27,7 @@ export function useRoofFn() {
const { setPolygonLinesActualSize } = usePolygon()
const { changeCorridorDimensionText } = useText()
const [outerLinePoints, setOuterLinePoints] = useRecoilState(outerLinePointsState)
+ const { saveSnapshot } = useUndoRedo()
//면형상 선택 클릭시 지붕 패턴 입히기
function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial, isForceChange = false, isDisplay = false) {
@@ -248,6 +250,9 @@ export function useRoofFn() {
})
canvas.on('mouse:down', (event) => {
+ // checkPolygon 을 캔버스에서 제거한 뒤 스냅샷을 찍어야 빨간 사각형이 포함되지 않음
+ canvas.remove(checkPolygon)
+ saveSnapshot()
let mousePos = canvas.getPointer(event.e)
mousePos = { x: Math.round(mousePos.x), y: Math.round(mousePos.y) }
@@ -275,6 +280,12 @@ export function useRoofFn() {
originY: 'center',
objectCaching: false,
})
+ // [보조선 이중이동 fix] 지붕선 클릭 시 설정된 _preDragLeft 가 남아 있으면 polygonMoved 핸들러가
+ // 내부 보조선(ridge 등 parentId===roof.id)을 delta 만큼 한 번 이동시키고, 아래 allRoofObject
+ // 평행이동이 또 이동시켜 보조선이 2×delta 로 어긋난다(줌 축소+원거리 이동 시 크게 틀어짐).
+ // fire 전에 정리해 polygonMoved 의 자식 이동을 막고, 평행이동은 아래에서 한 번만 수행한다.
+ roof._preDragLeft = null
+ roof._preDragTop = null
roof.fire('polygonMoved')
roof.fire('modified')
diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js
index 7f1a9ecc..d3794dec 100644
--- a/src/hooks/module/useModule.js
+++ b/src/hooks/module/useModule.js
@@ -3,7 +3,6 @@ import { QPolygon } from '@/components/fabric/QPolygon'
import { canvasState } from '@/store/canvasAtom'
import { polygonToTurfPolygon } from '@/util/canvas-util'
import { useRecoilValue } from 'recoil'
-import { v4 as uuidv4 } from 'uuid'
import * as turf from '@turf/turf'
import { useSwal } from '../useSwal'
import { useModuleBasicSetting } from './useModuleBasicSetting'
@@ -12,6 +11,7 @@ import { selectedModuleState } from '@/store/selectedModuleOptions'
import { useCircuitTrestle } from '../useCirCuitTrestle'
import { useTrestle } from './useTrestle'
import { useTurf } from '@/hooks/common/useTurf'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { logger } from '@/util/logger'
// [MODULE-NAN-DIAG 2026-05-18] NaN 좌표가 어디서 module 로 진입하는지 추적용.
@@ -62,6 +62,7 @@ export function useModule() {
const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle()
const { clear: removeTrestleMaterials } = useTrestle()
const { checkModuleDisjointSurface } = useTurf()
+ const { saveSnapshot } = useUndoRedo()
// clone() 대신 직접 새 QPolygon을 생성하여 Maximum call stack 방지
const createModuleCopy = (module, newLeft, newTop, overrides = {}) => {
@@ -121,6 +122,7 @@ export function useModule() {
})
return
}
+ saveSnapshot()
// canvas.discardActiveObject() //선택해제
const isSetupModules = getOtherModules(selectedObj)
@@ -200,6 +202,7 @@ export function useModule() {
removeTrestleMaterials()
}
+ saveSnapshot()
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = getOtherModules(modules)
const objects = getObjects()
@@ -250,6 +253,7 @@ export function useModule() {
}
const moduleMoveAll = (length, direction, surfaceArray) => {
+ saveSnapshot()
surfaceArray.forEach((surface) => {
const modules = canvas
.getObjects()
@@ -301,6 +305,7 @@ export function useModule() {
}
const moduleCopyAll = (length, direction, surfaceArray) => {
+ saveSnapshot()
surfaceArray.forEach((surface) => {
const modules = canvas
.getObjects()
@@ -356,6 +361,7 @@ export function useModule() {
const moduleCopy = (length, direction) => {
if (canvas.getActiveObjects().length === 0) return
+ saveSnapshot()
const activeModuleIds = canvas.getActiveObjects().map((obj) => obj.id)
const modules = canvas.getObjects().filter((obj) => activeModuleIds.includes(obj.id))
const objects = getObjects()
@@ -428,6 +434,7 @@ export function useModule() {
removeTrestleMaterials()
}
+ saveSnapshot()
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
const objects = getObjects()
@@ -500,6 +507,7 @@ export function useModule() {
if (surfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
}
+ saveSnapshot()
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
canvas.remove(...columnModules)
@@ -634,6 +642,7 @@ export function useModule() {
if (surfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
}
+ saveSnapshot()
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
canvas.remove(...rowModules)
@@ -994,10 +1003,12 @@ export function useModule() {
return
}
+ saveSnapshot()
+ // [MODULE-MULTI-SELECT fix 2026-06-18] 단수 버전 잔재(surface/modules/activeModule 미정의 참조)로 인한
+ // ReferenceError 제거. 모듈 제거는 아래 activeModules.forEach, surface.modules 갱신은 affectedSurfaces
+ // 루프가 이미 처리하므로 중복이기도 함.
const surfaceIds = [...new Set(activeModules.map((module) => module.surfaceId))]
- const affectedSurfaces = canvas
- .getObjects()
- .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && surfaceIds.includes(obj.id))
+ const affectedSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && surfaceIds.includes(obj.id))
if (affectedSurfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js
index 1a8eb36a..c389f3e8 100644
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import {
canvasSettingState,
@@ -33,18 +33,21 @@ import { isObjectNotEmpty } from '@/util/common-utils'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { useMode } from '@/hooks/useMode'
import { useTurf } from '@/hooks/common/useTurf'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
export function useModuleBasicSetting(tabNum) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const roofDisplay = useRecoilValue(roofDisplaySelector)
const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
+ const resetModuleSetupSurface = useResetRecoilState(moduleSetupSurfaceState)
const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent()
const { swalFire } = useSwal()
const compasDeg = useRecoilValue(compasDegAtom)
const { setSurfaceShapePattern } = useRoofFn()
const checkedModule = useRecoilValue(checkedModuleState)
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+
const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
const canvasSetting = useRecoilValue(canvasSettingState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
@@ -62,9 +65,11 @@ export function useModuleBasicSetting(tabNum) {
const setModuleRowColArray = useSetRecoilState(moduleRowColArrayState)
const { checkModuleDisjointSurface } = useTurf()
+ const { saveSnapshot } = useUndoRedo()
useEffect(() => {
initEvent()
+ resetModuleSetupSurface()
return () => {
//수동 설치시 초기화
removeMouseEvent('mouse:up')
@@ -585,7 +590,7 @@ export function useModuleBasicSetting(tabNum) {
*/
const manualModuleSetup = () => {
//레이아웃 수동설치 토글
- const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
+ let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const isChidori = moduleSetupOption.isChidori
if (isManualModuleSetup) {
@@ -641,6 +646,9 @@ export function useModuleBasicSetting(tabNum) {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
+ // undo 후 캔버스 객체가 교체될 수 있으므로 매번 다시 가져옴
+ moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) || []
+
for (let i = 0; i < moduleSetupSurfaces.length; i++) {
//배치면이 여러개 일때 옮겨가면서 동작해야함
const moduleSetupSurface = moduleSetupSurfaces[i]
@@ -931,8 +939,10 @@ export function useModuleBasicSetting(tabNum) {
addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true
+ if (!trestlePolygon) return
+
// 혼합 설치 불가능한 모듈인지 확인 Y는 Y끼리 N은 N끼리만 설치 가능
- if (trestlePolygon.modules.length > 0) {
+ if (trestlePolygon.modules && trestlePolygon.modules.length > 0) {
//이미 설치된 모듈중에 한개만 가져옴
const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn
//현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능
@@ -965,10 +975,10 @@ export function useModuleBasicSetting(tabNum) {
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
-
- //도머 객체를 가져옴
- if (batchObjects) {
- batchObjects.forEach((object) => {
+ //도머 객체를 가져옴 (undo 후 캔버스 객체가 교체될 수 있으므로 다시 가져옴)
+ const currentBatchObjects = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.OBJECT_SURFACE)
+ if (currentBatchObjects) {
+ currentBatchObjects.forEach((object) => {
// [OPENING-MIN-SIZE 2026-05-08] 0-면적 객체는 turf 변환 시 throw 위험 → skip
const _pts = object.getCurrentPoints?.() || object.points || []
if (_pts.length >= 2 && _pts.every((p) => p.x === _pts[0].x && p.y === _pts[0].y)) {
@@ -1013,6 +1023,7 @@ export function useModuleBasicSetting(tabNum) {
toFixed: 2,
})
+ saveSnapshot()
canvas?.add(manualModule)
canvas.bringToFront(manualModule)
manualDrawModules.push(manualModule)
@@ -1050,7 +1061,7 @@ export function useModuleBasicSetting(tabNum) {
//단 열수 지정배치
const manualModuleLayoutSetup = (layoutSetupRef) => {
- const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
+ let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const isChidori = moduleSetupOption.isChidori //치도리 여부
const setupLocation = moduleSetupOption.setupLocation //모듈 설치 위치 처마, 용마루
@@ -1148,6 +1159,9 @@ export function useModuleBasicSetting(tabNum) {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
+ // undo 후 캔버스 객체가 교체될 수 있으므로 매번 다시 가져옴
+ moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) || []
+
for (let i = 0; i < moduleSetupSurfaces.length; i++) {
//배치면이 여러개 일때 옮겨가면서 동작해야함
const moduleSetupSurface = moduleSetupSurfaces[i]
@@ -1425,7 +1439,9 @@ export function useModuleBasicSetting(tabNum) {
})
addCanvasMouseEventListener('mouse:up', (e) => {
- if (trestlePolygon.modules.length > 0) {
+ if (!trestlePolygon) return
+
+ if (trestlePolygon.modules && trestlePolygon.modules.length > 0) {
//이미 설치된 모듈중에 한개만 가져옴
const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn
//현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능
@@ -1479,6 +1495,7 @@ export function useModuleBasicSetting(tabNum) {
}
if (tempModule) {
+ saveSnapshot()
let startX, startY
let installedLastHeightCoord = 0 //마지막으로 설치된 모듈의 좌표
let installedHeightModuleCount = 0
@@ -2930,6 +2947,7 @@ export function useModuleBasicSetting(tabNum) {
return orderA - orderB
})
+ saveSnapshot()
sortedModuleSetupSurfaces.forEach((moduleSetupSurface, index) => {
moduleSetupSurface.fire('mousedown')
const moduleSetupArray = []
@@ -3764,6 +3782,7 @@ export function useModuleBasicSetting(tabNum) {
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
setModuleStatisticsData()
+ saveSnapshot()
} else {
swalFire({ text: getMessage('module.place.overlab'), icon: 'warning' })
}
@@ -3775,6 +3794,7 @@ export function useModuleBasicSetting(tabNum) {
}
// getModuleStatistics()
setModuleStatisticsData()
+ saveSnapshot()
} else {
if (moduleSetupSurfaces) {
//수동모드 해제시 모듈 설치면 선택 잠금
@@ -4083,6 +4103,7 @@ export function useModuleBasicSetting(tabNum) {
})
}
+ saveSnapshot()
moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
moduleSetupSurface.fire('mousedown')
const moduleSetupArray = []
diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js
index cc71a3b8..1bf9c6b1 100644
--- a/src/hooks/object/useObjectBatch.js
+++ b/src/hooks/object/useObjectBatch.js
@@ -25,6 +25,7 @@ import { usePopup } from '@/hooks/usePopup'
import { useMouse } from '@/hooks/useMouse'
import { useTurf } from '@/hooks/common/useTurf'
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
@@ -41,6 +42,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const { getIntersectMousePoint } = useMouse()
const { checkModuleDisjointSurface } = useTurf()
const currentObject = useRecoilValue(currentObjectState)
+ const { saveSnapshot, popLastSnapshot } = useUndoRedo()
useEffect(() => {
if (canvas) {
@@ -99,6 +101,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
let rect, isDown, origX, origY
let selectedSurface
+
+ saveSnapshot()
//프리입력
if (selectedType === INPUT_TYPE.FREE) {
@@ -205,7 +209,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
initEvent()
closeAll()
- addPopup(popupId, 1, )
+ // 초기 배치 흐름에서 연 사이즈 설정: 배치 시작(applyOpeningAndShadow)이 이미 "오브젝트 없음" 스냅샷을
+ // 찍어뒀으므로, 이 사이즈 확정은 중복 스냅샷을 만들지 않게 한다(undo 한 번에 제거되도록).
+ addPopup(popupId, 1, )
}
})
} else if (selectedType === INPUT_TYPE.DIMENSION) {
@@ -307,7 +313,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
* @param {*} surfaceShapePolygons
* @returns
*/
- const applyDormers = ({ height, width, pitch, offsetRef, offsetWidthRef, directionRef }, buttonAct) => {
+ const applyDormers = ({ height, width, pitch, offsetRef, offsetWidthRef, directionRef }, buttonAct, skipSnapshot = false) => {
const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER
const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP
@@ -325,6 +331,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
return
}
+ // [undo 중복 fix] 도머 복사(commonCopyObject)는 copyObject 에서 이미 saveSnapshot 을 호출한 뒤
+ // applyDormers 를 재사용하므로, 복사 경로에서는 skipSnapshot=true 로 중복 스냅샷을 막는다.
+ if (!skipSnapshot) saveSnapshot()
+
let theta = 0
let bottomLength = 0,
@@ -1299,7 +1309,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
return { leftPoints, rightPoints, groupPoints }
}
- const resizeObjectBatch = (side, target, width, height, popupId) => {
+ const resizeObjectBatch = (side, target, width, height, popupId, skipSnapshot = false) => {
+ // 초기 배치(applyOpeningAndShadow)에서 열린 사이즈 설정이면 배치 시작 스냅샷과 중복되므로 건너뛴다.
+ // 컨텍스트 메뉴 "사이즈 수정"으로 기존 오브젝트를 수정할 땐 skipSnapshot=false 라 별개 undo 로 남는다.
+ if (!skipSnapshot) saveSnapshot()
const objectWidth = target.width
const objectHeight = target.height
@@ -1421,6 +1434,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const parentSurface = canvas?.getObjects().filter((item) => item.name === POLYGON_TYPE.ROOF && item.id === obj.parentId)[0]
if (obj) {
+ saveSnapshot()
obj.set({
lockMovementX: false,
lockMovementY: false,
@@ -1428,8 +1442,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const originObj = { ...obj }
const turfSurface = pointsToTurfPolygon(parentSurface.getCurrentPoints())
- const originLeft = obj.left
- const originTop = obj.top
addCanvasMouseEventListener('mouse:up', (e) => {
//개구, 그림자 타입일 경우 폴리곤 타입 변경
@@ -1474,15 +1486,11 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
- const calcLeft = obj.left - originLeft
- const calcTop = obj.top - originTop
-
- const currentDormerPoints = obj.getCurrentPoints().map((item) => {
- return {
- x: item.x + calcLeft,
- y: item.y + calcTop,
- }
- })
+ // getCurrentPoints() 는 calcTransformMatrix() 기반으로 이미 이동된 월드 좌표를 반환한다.
+ // 과거 코드에서 (obj.left - originLeft) delta 를 다시 더해 2배 이동된 좌표로 검사 →
+ // 빠르게 이동 시 도머가 지붕 내부에 있어도 within=false 가 되어 alert 오발생.
+ obj.setCoords()
+ const currentDormerPoints = obj.getCurrentPoints()
const turfObject = pointsToTurfPolygon(currentDormerPoints)
@@ -1513,6 +1521,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const copyObjectBatch = () => {
const obj = canvas.getActiveObject()
if (obj) {
+ saveSnapshot()
let clonedObj = null
const parentSurface = canvas?.getObjects().filter((item) => item.name === POLYGON_TYPE.ROOF && item.id === obj.parentId)[0]
@@ -1595,6 +1604,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
const dormerOffset = (arrow1, arrow2, length1, length2) => {
+ // [undo fix] 도머 이동 전 상태를 스냅샷으로 저장해야 undo 시 도머가 원위치로 복원된다.
+ // (이동 후 저장하면 undo 해도 도머는 그 자리에 남는다.) 검증 실패 시 popLastSnapshot 으로 제거.
+ saveSnapshot()
length1 = parseInt(length1) / 10
length2 = parseInt(length2) / 10
@@ -1623,22 +1635,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
}
+ // [좌표 검증 fix] moveObjectBatch 와 동일하게 setCoords()+getCurrentPoints() 로 실제 이동된
+ // 월드좌표를 검사한다. 과거처럼 groupPoints+delta 로 검사하면 2배 이동된 좌표가 되어
+ // 도머가 지붕 내부에 있어도 within=false → '지붕내 설치' alert 오발생.
+ dormer.setCoords()
const parentSurface = canvas?.getObjects().filter((item) => item.name === POLYGON_TYPE.ROOF && item.id === dormer.parentId)[0]
const turfSurface = pointsToTurfPolygon(parentSurface.getCurrentPoints())
let turfDormer = pointsToTurfPolygon(rectToPolygon(dormer))
let currentPoints = []
if (dormer.name === BATCH_TYPE.TRIANGLE_DORMER || dormer.name === BATCH_TYPE.PENTAGON_DORMER) {
- const calcLeft = dormer.left - left
- const calcTop = dormer.top - top
-
- currentPoints = dormer.groupPoints.map((item) => {
- return {
- x: item.x + calcLeft,
- y: item.y + calcTop,
- }
- })
-
+ currentPoints = dormer.getCurrentPoints()
turfDormer = pointsToTurfPolygon(currentPoints)
}
@@ -1651,7 +1658,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
//위치 원복`
dormer.left = left
dormer.top = top
+ dormer.setCoords()
+ // [undo 중복 fix] 검증 실패(원복) 시 위에서 저장한 스냅샷을 제거해 불필요한 undo 단계를 막는다.
+ popLastSnapshot()
return
}
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index d47b8f47..fbf077ef 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -5,11 +5,12 @@ import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
-import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine, translateOuterBoundaryTwin } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
import { POLYGON_TYPE } from '@/common/common'
import { useMessage } from '../useMessage'
@@ -36,6 +37,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
const { getAdsorptionPoints } = useAdsorptionPoint()
const { closePopup } = usePopup()
const { getMessage } = useMessage()
+ const { saveSnapshot, setDrawing, popLastSnapshot } = useUndoRedo()
const adsorptionRange = useRecoilValue(adsorptionRangeState)
@@ -44,6 +46,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
const mousePointerArr = useRef([])
const roofAdsorptionPoints = useRef([])
const lineHistory = useRef([])
+ const isFix = useRef(false)
const length1Ref = useRef(0)
const length2Ref = useRef(0)
@@ -117,6 +120,24 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
}
}, [])
+ // 보조선 그리기 시작 시 스냅샷 저장 (undo 하면 보조선 적용 전 상태로 복원).
+ // 그리기 진행 중에는 undo/redo/snapshot 을 차단하므로 force 로 저장한다.
+ // 편집 모달(AuxiliaryEdit) 은 id 없이 hook 을 호출하므로 제외한다.
+ useEffect(() => {
+ if (!id) return
+ const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+ if (!roofs || roofs.length === 0) return
+ setDrawing(true)
+ saveSnapshot(null, { force: true })
+ return () => {
+ setDrawing(false)
+ // 확정(완료)하지 않고 닫은 경우 스냅샷 제거
+ if (!isFix.current) {
+ popLastSnapshot()
+ }
+ }
+ }, [])
+
useEffect(() => {
if (type === null) {
return
@@ -151,6 +172,11 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
roof.innerLines = roof.innerLines.filter((inner) => inner !== object)
})
+ // [BOUNDARY-SYNC 2026-06-23] object 가 처마 외곽선(polygon.lines)과 좌표가 같은 "경계 복제본"이면,
+ // 그 처마선 쌍둥이도 같은 delta(x,y)로 함께 이동시켜 두 경계 표현을 동기화한다(지붕면 할당 가짜 면 방지).
+ // 일반 보조선은 동일 좌표 처마선이 없어 매칭 안 됨 → 영향 없음.
+ translateOuterBoundaryTwin(canvas, object, x, y)
+
canvas.remove(object)
canvas.setActiveObject(line)
}
@@ -164,6 +190,13 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
name: 'auxiliaryLine',
})
+ // [복사본 roofId 유실 fix] addLine 이 내부에서 attributes 를 {} 로 초기화하므로,
+ // 원본 attributes(roofId 등)를 복사해 복원한다. 미복원 시 복사본의 roofId 가 없어
+ // 우클릭 '보조선 전체삭제' 등 roofId 기반 처리가 누락된다.
+ if (newLine) {
+ newLine.attributes = { ...object.attributes }
+ }
+
// roofs의 innerLines에서 object와 같은 것을 찾아서 newLine으로 변경
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
roofs.forEach((roof) => {
@@ -887,6 +920,18 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
return
}
+ // lineHistory가 비어있으면 캔버스에서 직접 미확정 보조선을 찾아 제거
+ if (lineHistory.current.length === 0) {
+ const unfixedLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isAuxiliaryFixed)
+ if (unfixedLines.length > 0) {
+ const lastLine = unfixedLines[unfixedLines.length - 1]
+ canvas.remove(lastLine)
+ canvas.renderAll()
+ }
+ addCanvasMouseEventListener('mouse:move', mouseMove)
+ return
+ }
+
const lastLine = lineHistory.current.pop()
if (lastLine) {
roofAdsorptionPoints.current = roofAdsorptionPoints.current.filter(
@@ -906,6 +951,9 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
return
}
+ // 완료 확정 → 마운트 시 저장한 "보조선 적용 전" 스냅샷을 유지 (언마운트 cleanup 에서 pop 하지 않음)
+ isFix.current = true
+
// cutAuxiliary()
const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@@ -966,6 +1014,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
roofBase.innerLines = lineHistory.current.length !== 0 ? [...roofInnerLines] : roofBase.innerLines
canvas.renderAll()
})
+
closePopup(id)
}
diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index 35221da3..aadbea50 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -11,12 +11,14 @@ import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
import { fabric } from 'fabric'
import { QLine } from '@/components/fabric/QLine'
import { reattachDebugLabels } from '@/components/fabric/QPolygon'
import { calcLinePlaneSize } from '@/util/qpolygon-utils'
import { findInteriorPoint } from '@/util/skeleton-utils'
import { logger } from '@/util/logger'
+import { checkKerabRules } from '@/util/kerab-rule-checker'
import { debugCapture } from '@/util/debugCapture'
import { applyKerabOffsetSurgical } from '@/util/kerab-offset-surgical'
@@ -45,6 +47,7 @@ export function useEavesGableEdit(id) {
const typeRef = useRef(TYPES.EAVES)
const { removeLine, addPitchTextsByOuterLines } = useLine()
const { swalFire } = useSwal()
+ const { saveSnapshot } = useUndoRedo()
const { drawRoofPolygon } = useMode()
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
@@ -459,6 +462,8 @@ export function useEavesGableEdit(id) {
} else {
logger.log('[KERAB-RULE-CHECK] ' + phase + ' PASS')
}
+ // 기하 불변식 체커(R-45HIP/R-AXISRIDGE/R-CROSS/R-WEDGE). 위 R1~R4 와 상호보완.
+ checkKerabRules(roof.innerLines, { roofId: roof.id, label: phase })
} catch (err) {
logger.warn('[KERAB-RULE-CHECK] error', err)
}
@@ -550,6 +555,7 @@ export function useEavesGableEdit(id) {
break
}
+ saveSnapshot()
// [KERAB-STATE-DUMP 2026-06-11] A/B타입(가로/세로 케라바) 토글 진입 시점 지붕 상태 진단.
// 벽 type 지정은 있는데 내부 skLine 이 0인 "무에서 유" 케이스 파악용 — 사용자 설명 전 사실 수집.
// 읽기 전용(좌표/visible/type 만 덤프), 동작 변경 없음. logger 게이트(local 만 출력).
@@ -2749,6 +2755,8 @@ export function useEavesGableEdit(id) {
// 변은 出幅만큼 평행이동(delta)했으므로, 옛 변 위 끝점만 동일 delta 로 평행이동(= NORMAL-ABS 동치).
// 단, cMid(변 중점)에 걸린 비-collinear 선의 끝점은 apex 로 수렴해야 한다(힙 사이 마루 금지).
// 케라바패턴 라인(내 hip)은 surgicalAfter 의 ray-cast 가 이미 처리 → 제외.
+ // [KERAB-TYPE-EAVES-RIDGE-VANISH-FLAG 2026-06-23] apexRes 를 항상 넘긴다. relocate 가 apexRes.ridgeHidden
+ // 플래그로 골짜기 세로 힙(H-8) 끝점을 apex 로 끌어올리지 않고 제자리 앵커(위로 반전 방지)하기 때문.
moveStaleEdgeInnerLines(roof, c1, c2, _edgeIdx, apexRes)
// [KERAB-TYPE-EAVES-STRAIGHT 2026-06-12] apex 는 벽기준 고정. 힙을 벽교점 방향 45° 그대로 roofLine 까지 직선 연장.
extendTypeGableHipsStraightToRoofLine(roof, target, apexRes)
@@ -3146,12 +3154,325 @@ export function useEavesGableEdit(id) {
}
return touched
}
- const ridgeOps = resolveRidgeEndpoints()
+ // 5a') 골짜기 마름모 생성 — A,B타입 골짜기 라인은 케라바+처마 조합이라
+ // 라인변경(케라바→처마) 시 두 평행 힙( / / ) + 잇는 마루 = 마름모(힙—마루—힙)가 되어야 한다.
+ // 두 힙은 *같은 방향*(평행)이고 *같은 깊이*면 끝점을 잇는 마루가 골짜기 라인과 평행
+ // = 항상 수평/수직(마루 비대각 불변식 충족). 깊이 = 두 raycast hit 중 *짧은 쪽(min)*.
+ // 짧은 쪽 = 먼저 닫히는 인접면 — 긴 쪽에 맞추면 짧은 면을 넘어 ><(R3 위반)이 되므로 min.
+ // (사용자 확정 2026-06-22: 가로·세로 골짜기 변경 시 양쪽 다 마름모 생성.)
+ // 마름모 깊이 산출 진단(로그/검증용).
+ let adjHipDbg = null
+ const buildValleyDiamond = () => {
+ if (!resA || !resA.hip || !resA.hit || !resB || !resB.hip || !resB.hit) return null
+ // 두 힙이 평행해야 마름모(잇는 마루 = 골짜기 라인과 평행). 방향이 다르면 마름모 아님 → 폴백.
+ if (Math.hypot(resA.dir.x - resB.dir.x, resA.dir.y - resB.dir.y) > 0.05) return null
+ // [KERAB-VALLEY-EAVES-RULE1 MIDLINE 2026-06-22] 마름모 깊이 = *결정적 중앙선 공식*.
+ // 잇는 마루(수평/수직 불변식)는 골짜기 처마 roofLine 과 그 맞은편 평행 건물변의 *정확히 중앙*에 놓인다.
+ // (straight-skeleton: 두 평행 처마변 사이 ridge 는 중앙선). 인접 힙 매칭·내부 ridge clamp(min raycast)는
+ // 값이 매 실행마다 흔들려 폐기(사용자 확정 2026-06-22: "힙길이가 자꾸 바뀐다", 2820/3930 결정값 기대).
+ // depth(축) = |중앙선축 − offset 코너축|, 힙길이 = depth × √2 (45° 불변식).
+ // 중앙선축 = (원래 골짜기 roofLine 축 + 맞은편 평행변 축)/2.
+ // · 원래 골짜기 roofLine 축: c1(=surgical offset 이전 nearestRoofPoint) — 가로 골짜기는 c1.y, 세로는 c1.x.
+ // · 맞은편 평행변 축: 골짜기 중점에서 *안쪽(힙 방향 부호)* 으로 축정렬 ray 를 쏴 처음 만나는 *외곽 폴리곤 변*.
+ // 내부선(transient HIP/RIDGE)은 제외 — 그게 값 흔들림의 근본원인이었음.
+ const valleyHorizontal =
+ Math.abs(pts[(edgeIdx + 1) % NP].x - pts[edgeIdx].x) >= Math.abs(pts[(edgeIdx + 1) % NP].y - pts[edgeIdx].y)
+ // 원래 골짜기 roofLine 의 축값 + 중점(c1/c2 = surgical offset 이전 코너).
+ const origValleyAxis = valleyHorizontal ? c1.y : c1.x
+ const midX = (c1.x + c2.x) / 2
+ const midY = (c1.y + c2.y) / 2
+ // 안쪽 방향 부호 = 힙 진행 방향(가로 골짜기→y, 세로 골짜기→x).
+ const sgn = valleyHorizontal ? Math.sign(resA.dir.y) || 1 : Math.sign(resA.dir.x) || 1
+ // 골짜기 중점에서 축정렬 ray 를 외곽 폴리곤 변에만 쏴 맞은편 평행변 축값을 구함.
+ const EPS = 0.01
+ let oppAxis = null
+ for (let i = 0; i < NP; i++) {
+ const a = pts[i]
+ const b = pts[(i + 1) % NP]
+ if (valleyHorizontal) {
+ // 변이 x=midX 를 가로지르나? 가로지른다면 그 지점의 y.
+ if ((a.x - midX) * (b.x - midX) > EPS) continue
+ if (Math.abs(a.x - b.x) < EPS) continue
+ const t = (midX - a.x) / (b.x - a.x)
+ if (t < -EPS || t > 1 + EPS) continue
+ const y = a.y + t * (b.y - a.y)
+ if (sgn * (y - midY) <= EPS) continue // 안쪽(힙 방향)만
+ if (oppAxis === null || sgn * (y - oppAxis) < 0) oppAxis = y
+ } else {
+ if ((a.y - midY) * (b.y - midY) > EPS) continue
+ if (Math.abs(a.y - b.y) < EPS) continue
+ const t = (midY - a.y) / (b.y - a.y)
+ if (t < -EPS || t > 1 + EPS) continue
+ const x = a.x + t * (b.x - a.x)
+ if (sgn * (x - midX) <= EPS) continue
+ if (oppAxis === null || sgn * (x - oppAxis) < 0) oppAxis = x
+ }
+ }
+ const cornerAxis = valleyHorizontal ? newC1.y : newC1.x
+ // raycast 폴백(중앙선 못 구한 경우의 null-safety 만): 두 raycast hit 중 짧은 쪽.
+ const depthA = Math.hypot(resA.hit.x - newC1.x, resA.hit.y - newC1.y)
+ const depthB = Math.hypot(resB.hit.x - newC2.x, resB.hit.y - newC2.y)
+ const fallbackD = Math.min(depthA, depthB)
+ // [KERAB-VALLEY-EAVES-RULE1 CLAMP 2026-06-22] 두 힙은 *각자 독립적으로* 중앙선까지 확장하되,
+ // 가는 길에 *마루/힙* 을 먼저 만나면 *그 힙만* 거기서 멈춤(사용자 확정: "만나는 그 힙만 멈추고,
+ // 다른 힙은 계속 중앙까지"). 넘어가면 R3(교차/오버슈트) 위반.
+ // ★ roofLine 히트는 막는 대상 아님(중앙선이 지붕 안이면 정상) → 마루/힙 hit 만 obstruction.
+ // ★ 두 힙 길이가 *다를 수 있음* → 끝을 잇는 게 축정렬이면 마루, 아니면 힙으로 연결(아래).
+ const isObstr = (kind) => kind === LINE_TYPE.SUBLINE.HIP || kind === LINE_TYPE.SUBLINE.RIDGE
+ let dA = depthA
+ let dB = depthB
+ let source = 'fallback-min-raycast'
+ let midlineAxis = null
+ let dDet = null
+ if (oppAxis !== null) {
+ midlineAxis = (origValleyAxis + oppAxis) / 2
+ const dM = Math.abs(midlineAxis - cornerAxis) * Math.SQRT2
+ if (dM >= 1) {
+ dDet = dM
+ dA = resA.hit && isObstr(resA.hitKind) ? Math.min(dM, depthA) : dM
+ dB = resB.hit && isObstr(resB.hitKind) ? Math.min(dM, depthB) : dM
+ source = dA < dM - 1e-6 || dB < dM - 1e-6 ? 'midline-clamped' : 'midline'
+ }
+ }
+ adjHipDbg = {
+ valleyHorizontal,
+ origValleyAxis: Math.round(origValleyAxis * 10) / 10,
+ oppAxis: oppAxis === null ? null : Math.round(oppAxis * 10) / 10,
+ midlineAxis: midlineAxis === null ? null : Math.round(midlineAxis * 10) / 10,
+ cornerAxis: Math.round(cornerAxis * 10) / 10,
+ dDet: dDet === null ? null : Math.round(dDet),
+ depthA: Math.round(depthA),
+ depthB: Math.round(depthB),
+ obstr: { a: resA.hitKind, b: resB.hitKind },
+ usedDA: Math.round(dA),
+ usedDB: Math.round(dB),
+ source,
+ }
+ if (dA < 1 || dB < 1) return null
+ // [KERAB-VALLEY-EAVES-RULE1 CASCADE 2026-06-22] 힙이 *중앙선 전에* 마루/힙을 만나는 경우
+ // (depth < 중앙선 depth): 마름모(중앙 clamp + connector) 가 아니라 *순차 절삭 연쇄*.
+ // 사용자 확정: CCW 로 먼저 그린 힙이 그 마루를 *흡수측 절삭*(--< : 경계=박공 출발측 보존,
+ // 노치측 흡수) → 그 절삭으로 다른 힙의 장애물(마루 근측)이 사라져 다른 힙은 *다음 라인까지 확장*.
+ // ★ 2820 대칭 마름모 케이스(장애물이 중앙선 *너머*)는 depth ≥ dDet 라 여기 안 걸림 → 기존 경로 보존.
+ const cascadeA = !!(resA.hit && isObstr(resA.hitKind) && dDet !== null && depthA < dDet - 1e-6)
+ const cascadeB = !!(resB.hit && isObstr(resB.hitKind) && dDet !== null && depthB < dDet - 1e-6)
+ if (cascadeA || cascadeB) {
+ const cops = []
+ const rptsC = roof.points || []
+ const TOLC = 2.0
+ const d2s = (p, a, b) => {
+ const ex = b.x - a.x
+ const ey = b.y - a.y
+ const l2 = ex * ex + ey * ey || 1
+ let t = ((p.x - a.x) * ex + (p.y - a.y) * ey) / l2
+ t = Math.max(0, Math.min(1, t))
+ return Math.hypot(p.x - (a.x + t * ex), p.y - (a.y + t * ey))
+ }
+ const minEd = (pt) => {
+ let m = Infinity
+ for (let i = 0, j = rptsC.length - 1; i < rptsC.length; j = i++) {
+ const d = d2s(pt, rptsC[j], rptsC[i])
+ if (d < m) m = d
+ }
+ return m
+ }
+ const hipsC = [resA, resB].filter((r) => r && r.hip)
+ // 0) ★ 내부확장박스(kerabValleyOverlapLine) 삭제 — 케라바 적용 때 그려진 골짜기 겹침 사각형은
+ // 처마로 되돌릴 때 사라져야 한다(사용자 확정 2026-06-22: "내부확장박스를 삭제하지?").
+ // 삭제 후, 이 박스를 *지탱하던 마루* 는 따로 확장(아래 [지탱마루확장]) 한다.
+ const boxLines = (canvas?.getObjects() || []).filter(
+ (o) => o && o.parentId === roof.id && (o.lineName === 'kerabValleyOverlapLine' || o.attributes?.type === 'kerabValleyOverlapLine'),
+ )
+ for (const bl of boxLines) {
+ cops.push({ act: 'box-remove', ln: bl.lineName || '-', p1: { x: Math.round(bl.x1), y: Math.round(bl.y1) }, p2: { x: Math.round(bl.x2), y: Math.round(bl.y2) } })
+ removeLine(bl)
+ if (Array.isArray(roof.innerLines)) roof.innerLines = roof.innerLines.filter((l) => l !== bl)
+ }
+ // 코너에서 dir 로 가는 무한 ray ↔ 마루 선분 교점(마루 내부 u∈[0,1], ray 앞쪽 t>0).
+ const rayRidgeCross = (corner, dir, rg) => {
+ const ax = rg.x1
+ const ay = rg.y1
+ const ex = rg.x2 - rg.x1
+ const ey = rg.y2 - rg.y1
+ const den = dir.x * ey - dir.y * ex
+ if (Math.abs(den) < 1e-9) return null
+ const t = ((ax - corner.x) * ey - (ay - corner.y) * ex) / den
+ const u = ((ax - corner.x) * dir.y - (ay - corner.y) * dir.x) / den
+ if (t <= 1e-6 || u < -1e-6 || u > 1 + 1e-6) return null
+ return { x: corner.x + dir.x * t, y: corner.y + dir.y * t }
+ }
+ // 1) ★ 마루확장 + 흡수측 절삭(사용자 확정 2026-06-22: "박스삭제→RG-1·RG-2 확장→힙생성 절삭").
+ // 각 마루의 *비경계(free)* 끝을 먼저 roof bbox 까지 바깥확장 → 힙 교점들이 세그먼트 안에
+ // 들어오게 한 뒤, *free 끝에서 가장 먼* 교점까지 당겨 절삭(--<). 보존측 = 경계(박공 출발측).
+ // ★ RG-1 이 짧아 H-8 교점(611)을 못 잡던 문제 해소: 확장하면 farthest-from-free 가 611 을 준다.
+ // free/keep 판정은 *확장 전* 좌표로 1회 고정(확장 후 bbox 끝이 경계로 재인식되는 것 방지).
+ const ridgesC = (roof.innerLines || []).filter((l) => l && l.visible !== false && l.name === LINE_TYPE.SUBLINE.RIDGE)
+ let bx0 = Infinity
+ let bx1 = -Infinity
+ let by0 = Infinity
+ let by1 = -Infinity
+ for (const p of rptsC) {
+ if (p.x < bx0) bx0 = p.x
+ if (p.x > bx1) bx1 = p.x
+ if (p.y < by0) by0 = p.y
+ if (p.y > by1) by1 = p.y
+ }
+ for (const rg of ridgesC) {
+ const E1 = { x: rg.x1, y: rg.y1 }
+ const E2 = { x: rg.x2, y: rg.y2 }
+ const b1 = minEd(E1) <= TOLC
+ const b2 = minEd(E2) <= TOLC
+ if (b1 === b2) continue // 보존/흡수측 판별 불가(둘 다/둘 다 아님) → 절삭 보류
+ const keep = b1 ? E1 : E2 // 경계측 보존
+ const free = b1 ? E2 : E1 // 비경계측 = 흡수(절삭) 대상
+ // free 끝을 ridge 방향(keep→free) 으로 bbox 경계까지 확장.
+ const dxR = free.x - keep.x
+ const dyR = free.y - keep.y
+ const lenR = Math.hypot(dxR, dyR) || 1
+ const ux = dxR / lenR
+ const uy = dyR / lenR
+ let tMax = Infinity
+ if (ux > 1e-9) tMax = Math.min(tMax, (bx1 - keep.x) / ux)
+ else if (ux < -1e-9) tMax = Math.min(tMax, (bx0 - keep.x) / ux)
+ if (uy > 1e-9) tMax = Math.min(tMax, (by1 - keep.y) / uy)
+ else if (uy < -1e-9) tMax = Math.min(tMax, (by0 - keep.y) / uy)
+ const absorbed = isFinite(tMax) && tMax > lenR ? { x: keep.x + ux * tMax, y: keep.y + uy * tMax } : free
+ const setFree = b1 ? (p) => rg.set({ x2: p.x, y2: p.y }) : (p) => rg.set({ x1: p.x, y1: p.y })
+ setFree(absorbed) // 임시 확장(아래에서 교점까지 다시 당김)
+ const crossings = []
+ for (const r of hipsC) {
+ const corner = r === resA ? newC1 : newC2
+ const cx = rayRidgeCross(corner, r.dir, rg)
+ if (cx) crossings.push(cx)
+ }
+ if (!crossings.length) {
+ // 교점 없으면 확장 취소(원복) — 잘못된 bbox 확장 잔재 방지.
+ setFree(free)
+ rg.setLength?.()
+ rg.setCoords?.()
+ rg.addLengthText?.()
+ continue
+ }
+ // 흡수측(확장된 free) 에서 *가장 먼* 교점까지 절삭 = 노치측 세그먼트 최대 제거.
+ let far = null
+ let farD = -1
+ for (const c of crossings) {
+ const d = Math.hypot(c.x - absorbed.x, c.y - absorbed.y)
+ if (d > farD) {
+ farD = d
+ far = c
+ }
+ }
+ setFree(far)
+ if (b1) rg.endPoint = { x: far.x, y: far.y }
+ else rg.startPoint = { x: far.x, y: far.y }
+ const nsz = calcLinePlaneSize({ x1: rg.x1, y1: rg.y1, x2: rg.x2, y2: rg.y2 })
+ rg.attributes = { ...(rg.attributes || {}), planeSize: nsz, actualSize: nsz }
+ rg.setLength?.()
+ rg.setCoords?.()
+ rg.addLengthText?.()
+ cops.push({ act: 'extend-trim', ln: rg.lineName || '-', to: { x: Math.round(far.x), y: Math.round(far.y) }, sz: nsz })
+ }
+ // 2) ★ 삭제 금지(사용자 확정 2026-06-22: "확장하라고 했지 삭제하니?"). 절삭으로 anchor 잃은
+ // 라인은 *제거하지 않고* 확장해 형상을 닫는다. (확장 타깃 확정 전까지 보류 — 삭제만 차단.)
+ const orphans = []
+ // 3) 갱신된 형상으로 두 힙을 *재-raycast* 후 다시 그림(앞 힙 절삭이 뒤 힙 장애물을 없앤 결과 반영).
+ for (const r of hipsC) {
+ const corner = r === resA ? newC1 : newC2
+ const hit2 = rayFirstHit(corner, r.dir)
+ if (!hit2) continue
+ const sz = calcLinePlaneSize({ x1: corner.x, y1: corner.y, x2: hit2.x, y2: hit2.y })
+ r.hip.set({ x1: corner.x, y1: corner.y, x2: hit2.x, y2: hit2.y })
+ r.hip.startPoint = { x: corner.x, y: corner.y }
+ r.hip.endPoint = { x: hit2.x, y: hit2.y }
+ r.hip.attributes = { ...(r.hip.attributes || {}), planeSize: sz, actualSize: sz }
+ r.hip.setLength?.()
+ r.hip.setCoords?.()
+ r.hip.addLengthText?.()
+ r.hit = hit2
+ r.hitLine = hit2.line
+ r.hitKind = hit2.kind
+ cops.push({ act: 'hip-recast', ln: r.hip.lineName || '-', to: { x: Math.round(hit2.x), y: Math.round(hit2.y) }, kind: hit2.kind, sz })
+ }
+ // 4) ★ 마지막: 서로 다른 길의 두 힙 끝점(마루 안착점)을 잇는 45° 연결 힙
+ // (사용자 확정 2026-06-22: "다른 길의 힙과 힙을 이어주는 라인은 힙이 된다, 45도" = 반삭합).
+ // 각 힙이 마루에 안착한 뒤 두 안착점을 연결해 노치 형상을 닫는다.
+ const eA = resA && resA.hit ? { x: resA.hit.x, y: resA.hit.y } : null
+ const eB = resB && resB.hit ? { x: resB.hit.x, y: resB.hit.y } : null
+ if (eA && eB) {
+ const cdx = Math.abs(eB.x - eA.x)
+ const cdy = Math.abs(eB.y - eA.y)
+ const dist = Math.hypot(eB.x - eA.x, eB.y - eA.y)
+ if (dist > 1 && Math.abs(cdx - cdy) <= 1.0) {
+ const conn = mkValleyHip(eA, eB)
+ canvas.add(conn)
+ conn.bringToFront()
+ roof.innerLines.push(conn)
+ cops.push({ act: 'connector-hip', from: { x: Math.round(eA.x), y: Math.round(eA.y) }, to: { x: Math.round(eB.x), y: Math.round(eB.y) }, sz: conn.attributes?.planeSize })
+ } else {
+ cops.push({ act: 'connector-skip', reason: Math.abs(cdx - cdy) > 1.0 ? 'not-45' : 'too-short', from: { x: Math.round(eA.x), y: Math.round(eA.y) }, to: { x: Math.round(eB.x), y: Math.round(eB.y) } })
+ }
+ }
+ adjHipDbg.cascade = { cascadeA, cascadeB, orphans: orphans.length, ops: cops }
+ return { ops: cops, cascade: true }
+ }
+ const ops = []
+ const setLen = (res, corner, len) => {
+ const ex = corner.x + res.dir.x * len
+ const ey = corner.y + res.dir.y * len
+ const sz = calcLinePlaneSize({ x1: corner.x, y1: corner.y, x2: ex, y2: ey })
+ res.hip.set({ x1: corner.x, y1: corner.y, x2: ex, y2: ey })
+ res.hip.startPoint = { x: corner.x, y: corner.y }
+ res.hip.endPoint = { x: ex, y: ey }
+ res.hip.attributes = { ...(res.hip.attributes || {}), planeSize: sz, actualSize: sz }
+ res.hip.setLength?.()
+ if (typeof res.hip.setCoords === 'function') res.hip.setCoords()
+ res.hip.addLengthText?.()
+ ops.push({ ln: res.hip.lineName || '-', to: { x: Math.round(ex), y: Math.round(ey) } })
+ return { x: ex, y: ey }
+ }
+ const e1 = setLen(resA, newC1, dA)
+ const e2 = setLen(resB, newC2, dB)
+ const rlen = Math.hypot(e2.x - e1.x, e2.y - e1.y)
+ if (rlen >= 1) {
+ // 두 힙 끝을 잇는 선: 축정렬(수평/수직)이면 마루, 아니면 힙으로 연결(두 힙 길이가 달라진 경우).
+ const CTOL = 1.0
+ const axisAligned = Math.abs(e1.x - e2.x) < CTOL || Math.abs(e1.y - e2.y) < CTOL
+ const rpts = [e1.x, e1.y, e2.x, e2.y]
+ const rsz = calcLinePlaneSize({ x1: rpts[0], y1: rpts[1], x2: rpts[2], y2: rpts[3] })
+ const conn = new QLine(rpts, {
+ parentId: roof.id,
+ fontSize: roof.fontSize,
+ stroke: '#1083E3',
+ strokeWidth: axisAligned ? 4 : 3,
+ name: axisAligned ? LINE_TYPE.SUBLINE.RIDGE : LINE_TYPE.SUBLINE.HIP,
+ textMode: roof.textMode,
+ attributes: { roofId: roof.id, ...(axisAligned ? {} : { type: LINE_TYPE.SUBLINE.HIP }), planeSize: rsz, actualSize: rsz },
+ })
+ conn.lineName = axisAligned ? 'kerabPatternRidge' : 'kerabPatternHip'
+ conn.startPoint = { x: conn.x1, y: conn.y1 }
+ conn.endPoint = { x: conn.x2, y: conn.y2 }
+ canvas.add(conn)
+ conn.bringToFront()
+ roof.innerLines.push(conn)
+ ops.push({ [axisAligned ? 'ridge' : 'connHip']: { from: { x: Math.round(e1.x), y: Math.round(e1.y) }, to: { x: Math.round(e2.x), y: Math.round(e2.y) } } })
+ }
+ return { ops, e1, e2 }
+ }
+ const diamond = buildValleyDiamond()
+ // 깊이 산출 진단 — 큰 applied 로그에 묻혀 잘리지 않도록 별도 짧은 줄로 먼저 출력.
+ logger.log('[KERAB-VALLEY-EAVES-RULE1 MIDLINE] ' + JSON.stringify(adjHipDbg))
+ // 마름모를 만든 경우에도 resolveRidgeEndpoints 를 *이어서* 실행한다 — 새 힙·마루로
+ // anchor 잃은 기존 세로/가로 마루를 절삭(또는 확장)해 dangling(R1) 을 해소(사용자 확정 2026-06-22:
+ // "세로도 그려야지" = 가로 마름모만 만들고 세로 마루를 떠 있게 두면 안 됨).
+ // cascade 경로는 마루 절삭/힙 재-raycast 를 자체 처리했으므로 resolveRidgeEndpoints 를 건너뛴다(이중 절삭 방지).
+ const ridgeOps = diamond ? (diamond.cascade ? diamond.ops : [...diamond.ops, ...resolveRidgeEndpoints()]) : resolveRidgeEndpoints()
// 5c) Y 반사 힙 — 새 힙이 *기존 마루(RIDGE)에 직접 부딪힌* 경우만(=raycast hit 가 RIDGE),
// 그 마루를 대칭축으로 반대편 면에 반사 힙 1개 생성(R7: 마루+hip 교점 반사).
// ★ 마루를 *확장*해서 만난 힙(hit 가 roofLine 이던 resA)은 Y 아님 → 반사 안 함(사용자 확정 2026-06-16).
const reflectOps = []
for (const res of [resA, resB]) {
+ if (diamond) break // 마름모를 만든 경우 힙을 인접 처마 힙 길이로 재설정했으므로 반사 불필요
if (!res || !res.hip || res.hitKind !== LINE_TYPE.SUBLINE.RIDGE || !res.hitLine) continue
const M = { x: res.hit.x, y: res.hit.y }
const rg = res.hitLine
@@ -3174,8 +3495,42 @@ export function useEavesGableEdit(id) {
runKerabRuleCheck(roof, 'valley-eaves-rule1', kerabRevertBeforeSnap)
logger.log(
'[KERAB-VALLEY-EAVES-RULE1] applied ' +
- JSON.stringify({ edgeIdx, removed: gableWallLines.length, cleaned, newC1, newC2, resA, resB, ridgeOps, reflectOps }),
+ JSON.stringify({ edgeIdx, removed: gableWallLines.length, cleaned, newC1, newC2, resA, resB, adjHipDbg, ridgeOps, reflectOps }),
)
+ // [KERAB-LABEL-MAP 2026-06-22] 화면 라벨(H-n/RG-n/B-n…)↔좌표 맵 — QPolygon.__attachDebugLabels 와
+ // *동일 분류·동일 카운터 순서*(canvas 오브젝트 순서)로 재현. 좌표 대신 라벨로 대화하기 위함(local 전용).
+ try {
+ const classify = (o) => {
+ const nm = o.name
+ const ln = o.lineName
+ const ty = o.attributes?.type
+ if (nm === 'baseLine') return 'B'
+ if (nm === 'outerLine' || nm === 'eaves' || ln === 'roofLine') return 'R'
+ if (nm === LINE_TYPE.SUBLINE.HIP || ln === LINE_TYPE.SUBLINE.HIP) return 'H'
+ if (nm === LINE_TYPE.SUBLINE.RIDGE || ln === LINE_TYPE.SUBLINE.RIDGE) return 'RG'
+ if (nm === LINE_TYPE.SUBLINE.VALLEY || ln === LINE_TYPE.SUBLINE.VALLEY) return 'V'
+ if (nm === LINE_TYPE.SUBLINE.GABLE || ln === LINE_TYPE.SUBLINE.GABLE) return 'G'
+ if (typeof o.x1 === 'number' && typeof o.y1 === 'number' && typeof o.x2 === 'number' && typeof o.y2 === 'number') return 'SK'
+ return null
+ }
+ const ctr = {}
+ const lmap = []
+ for (const o of canvas.getObjects()) {
+ if (!o || o.parentId !== roof.id || o.name === '__debugLabel') continue
+ const pfx = classify(o)
+ if (!pfx) continue
+ ctr[pfx] = (ctr[pfx] || 0) + 1
+ lmap.push({
+ label: `${pfx}-${ctr[pfx]}`,
+ p1: { x: Math.round(o.x1), y: Math.round(o.y1) },
+ p2: { x: Math.round(o.x2), y: Math.round(o.y2) },
+ sz: o.attributes?.planeSize ?? null,
+ })
+ }
+ logger.log('[KERAB-LABEL-MAP] ' + JSON.stringify(lmap))
+ } catch (e) {
+ logger.warn('[KERAB-LABEL-MAP] failed ' + (e?.message || e))
+ }
return
}
}
@@ -3991,30 +4346,109 @@ export function useEavesGableEdit(id) {
const u = ((A.x - P.x) * dy - (A.y - P.y) * dx) / den
if (t > 1e-6 && u >= -1e-6 && u <= 1 + 1e-6 && t < best) best = t
}
+ // [KERAB-VALLEY-BOX-RELATIVE-ROOFLINE 2026-06-23] 골짜기 박스(kerabValleyOverlapLine)는 인접
+ // 두 sub-roof 의 *겹침(union)* 이라, 각 sub-roof 입장에서 박스 변이 곧 자기 roofLine 경계다
+ // (상대 roofLine). 따라서 절대 roofLine 뿐 아니라 더 가까운 박스 변에서도 apex/힙이 멈춰야
+ // 한다(사용자 확정 2026-06-23: "roofLine 이 상대적"). roofLine 변과 동급으로 ray 교차에 포함.
+ const boxSegs = (canvas.getObjects() || []).filter(
+ (o) =>
+ o &&
+ (o.lineName === 'kerabValleyOverlapLine' || o.attributes?.type === 'kerabValleyOverlapLine') &&
+ (o.parentId === roof.id || o.roofId === roof.id || o.attributes?.roofId === roof.id),
+ )
+ for (const o of boxSegs) {
+ const ax = o.x2 - o.x1
+ const ay = o.y2 - o.y1
+ const den = dx * ay - dy * ax
+ if (Math.abs(den) < 1e-9) continue
+ const t = ((o.x1 - P.x) * ay - (o.y1 - P.y) * ax) / den
+ const u = ((o.x1 - P.x) * dy - (o.y1 - P.y) * dx) / den
+ if (t > 1e-6 && u >= -1e-6 && u <= 1 + 1e-6 && t < best) best = t
+ }
return best
}
const oppDist = oppRayDist(mid, ix, iy)
const apexDepth = Math.min(L / 2, Number.isFinite(oppDist) ? oppDist : L / 2)
const apex = { x: mid.x + ix * apexDepth, y: mid.y + iy * apexDepth }
- // 마루 단축: 케라바변쪽 끝점 → apex.
- if (midIsA) ridge.set({ x1: apex.x, y1: apex.y })
- else ridge.set({ x2: apex.x, y2: apex.y })
- // [KERAB-TYPE-EAVES-RIDGE-ZERO 2026-06-15] apex 가 반대편 roofLine 에 클램프되면 native 마루가
- // 거기로 단축돼 zero-length 가 될 수 있다(R2 위반). 객체는 revert 위해 보존하되 invisible 처리
- // (R2 체크는 visible 만 검사). 마루 형상 재구성은 완전 우진각 시 reconstruct 가 담당.
- const ridgeLen = Math.hypot(ridge.x2 - ridge.x1, ridge.y2 - ridge.y1)
- if (ridgeLen < 1) ridge.visible = false
- const rsz = calcLinePlaneSize({ x1: ridge.x1, y1: ridge.y1, x2: ridge.x2, y2: ridge.y2 })
- if (ridge.attributes) {
- ridge.attributes.planeSize = rsz
- ridge.attributes.actualSize = rsz
+ // [KERAB-TYPE-EAVES-BOX-CLIP 2026-06-23] 골짜기 박스(지붕의 겹침)는 인접 면 입장에서 자기
+ // roofLine 경계 = "상대 roofLine"(사용자 확정 2026-06-23). apex 로 향하는 힙이 박스 경계를
+ // 만나면 거기서 멈춰야 하고 뚫고 지나가면 안 된다. apex 자체는 45° 이등변 유지를 위해 보존하되,
+ // 각 힙을 corner→apex 로 쏴 박스 경계 교차점으로 절삭한다.
+ // 박스 경계 식별: 마루(ridge)의 박스측 고정 끝점 Bp(= apex 로 단축되지 않는 끝)을 공유하는
+ // inner HIP/RIDGE 변(H-6/H-7 류). RG-2(415)가 이 Bp 에서 박스 안으로 올라가므로 Bp 가 곧
+ // 박스 코너다. 일반 내부선(H-2 등, Bp 미공유)은 힙이 가로질러야 하므로 제외 → 정상 切妻
+ // (Bp=roofLine 코너, 공유 inner 없음)은 무영향. ridge(단축 대상)·invisible 제외.
+ const boxCorner = midIsA ? rB : rA
+ const clipHipToBox = (corner) => {
+ const dx0 = apex.x - corner.x
+ const dy0 = apex.y - corner.y
+ const dlen = Math.hypot(dx0, dy0)
+ if (dlen < 1e-6) return { x: apex.x, y: apex.y }
+ const dx = dx0 / dlen
+ const dy = dy0 / dlen
+ let best = dlen
+ let bestPt = { x: apex.x, y: apex.y }
+ for (const il of roof.innerLines || []) {
+ if (!il || il === ridge || il.visible === false) continue
+ if (il.name !== LINE_TYPE.SUBLINE.HIP && il.name !== LINE_TYPE.SUBLINE.RIDGE) continue
+ const sharesBp =
+ (Math.abs(il.x1 - boxCorner.x) < 0.5 && Math.abs(il.y1 - boxCorner.y) < 0.5) ||
+ (Math.abs(il.x2 - boxCorner.x) < 0.5 && Math.abs(il.y2 - boxCorner.y) < 0.5)
+ // [KERAB-TYPE-EAVES-HIPMEET 2026-06-23] 신규 힙은 (1) 박스 변(Bp 공유) 또는 (2) 직전 변경에서
+ // 생성된 기존 케라바 힙(kerabPatternHip)과의 최근접 교점에서 멈춘다 → ">" 모양. 둘 다 방향 무관
+ // 후보로 같은 best(t 최소) 누산기에 경쟁시켜 가장 가까운 교점이 절삭점이 된다. 1차 변경 때는
+ // 기존 힙이 없어 박스 변만 후보 → 동작 불변(무영향).
+ const isPriorHip = il.lineName === 'kerabPatternHip'
+ if (!sharesBp && !isPriorHip) continue
+ const ax = il.x2 - il.x1
+ const ay = il.y2 - il.y1
+ if (Math.hypot(ax, ay) < 1e-6) continue
+ const den = dx * ay - dy * ax
+ if (Math.abs(den) < 1e-9) continue
+ const t = ((il.x1 - corner.x) * ay - (il.y1 - corner.y) * ax) / den
+ const u = ((il.x1 - corner.x) * dy - (il.y1 - corner.y) * dx) / den
+ if (t > 1.0 && t < best - 1e-6 && u >= -1e-6 && u <= 1 + 1e-6) {
+ best = t
+ bestPt = { x: corner.x + dx * t, y: corner.y + dy * t }
+ }
+ }
+ return bestPt
}
- if (typeof ridge.setCoords === 'function') ridge.setCoords()
- if (typeof ridge.setLength === 'function') ridge.setLength()
- if (typeof ridge.addLengthText === 'function') ridge.addLengthText()
- // hip 2개: wA→apex, wB→apex. pts=[corner, apex] 라 corner 끝(x1,y1)이 outer(=which 1).
- const mkHip = (corner, side) => {
- const pts = [corner.x, corner.y, apex.x, apex.y]
+ // 박스 절삭점 선계산 → 마루 처리 분기 판단에 사용.
+ const endA = clipHipToBox(wA)
+ const endB = clipHipToBox(wB)
+ const hipClipped = Math.hypot(endA.x - apex.x, endA.y - apex.y) > 1 || Math.hypot(endB.x - apex.x, endB.y - apex.y) > 1
+ if (hipClipped) {
+ // [KERAB-TYPE-EAVES-RIDGE-VANISH 2026-06-23] 박스(겹침)가 상대 roofLine 이라 신규 힙이 박스/직전 힙에서
+ // 멈추면, 가운데 마루(RG-1)는 양쪽 코너 힙이 이미 생성됐으므로 "삭제 대상"이다(사용자 규칙 2026-06-23:
+ // "RG-1 은 마루 = 삭제, 양쪽에 힙 생성됨"). visible=false 숨기기는 객체가 innerLines 에 남아
+ // 디버그 라벨 재부착/LABEL-MAP 이 visible 무시하고 RG-1 을 다시 노출 → "삭제 안 됨" 으로 보였다.
+ // revert 스냅샷은 좌표 값만 복사하고 revert 경로가 라인을 재생성하므로 진짜 삭제해도 무해하다.
+ // → reconstruct(4820) 와 동일하게 canvas.remove + innerLines splice 로 실제 삭제한다.
+ canvas.remove(ridge)
+ const _ridx = roof.innerLines.indexOf(ridge)
+ if (_ridx >= 0) roof.innerLines.splice(_ridx, 1)
+ } else {
+ // 마루 단축: 케라바변쪽 끝점 → apex.
+ if (midIsA) ridge.set({ x1: apex.x, y1: apex.y })
+ else ridge.set({ x2: apex.x, y2: apex.y })
+ // [KERAB-TYPE-EAVES-RIDGE-ZERO 2026-06-15] apex 가 반대편 roofLine 에 클램프되면 native 마루가
+ // 거기로 단축돼 zero-length 가 될 수 있다(R2 위반). 객체는 revert 위해 보존하되 invisible 처리
+ // (R2 체크는 visible 만 검사). 마루 형상 재구성은 완전 우진각 시 reconstruct 가 담당.
+ const ridgeLen = Math.hypot(ridge.x2 - ridge.x1, ridge.y2 - ridge.y1)
+ if (ridgeLen < 1) ridge.visible = false
+ const rsz = calcLinePlaneSize({ x1: ridge.x1, y1: ridge.y1, x2: ridge.x2, y2: ridge.y2 })
+ if (ridge.attributes) {
+ ridge.attributes.planeSize = rsz
+ ridge.attributes.actualSize = rsz
+ }
+ if (typeof ridge.setCoords === 'function') ridge.setCoords()
+ if (typeof ridge.setLength === 'function') ridge.setLength()
+ if (typeof ridge.addLengthText === 'function') ridge.addLengthText()
+ }
+ // hip 2개: wA→endA, wB→endB. pts=[corner, end] 라 corner 끝(x1,y1)이 outer.
+ const mkHip = (corner, side, end) => {
+ const pts = [corner.x, corner.y, end.x, end.y]
const sz = calcLinePlaneSize({ x1: pts[0], y1: pts[1], x2: pts[2], y2: pts[3] })
const hip = new QLine(pts, {
parentId: roof.id,
@@ -4032,8 +4466,8 @@ export function useEavesGableEdit(id) {
hip.__kerabRevertOuterSide = side
return hip
}
- const hip1 = mkHip(wA, 'A')
- const hip2 = mkHip(wB, 'B')
+ const hip1 = mkHip(wA, 'A', endA)
+ const hip2 = mkHip(wB, 'B', endB)
canvas.add(hip1)
canvas.add(hip2)
hip1.bringToFront()
@@ -4044,8 +4478,91 @@ export function useEavesGableEdit(id) {
canvas.renderAll()
logger.log(
'[KERAB-TYPE-EAVES] applied ' +
- JSON.stringify({ L: Math.round(L), mid, apex, inward: { ix: Number(ix.toFixed(3)), iy: Number(iy.toFixed(3)) } }),
+ JSON.stringify({
+ L: Math.round(L),
+ mid,
+ apex: { x: Math.round(apex.x), y: Math.round(apex.y) },
+ inward: { ix: Number(ix.toFixed(3)), iy: Number(iy.toFixed(3)) },
+ hipA: { x: Math.round(hip1.x2), y: Math.round(hip1.y2), clipped: Math.hypot(hip1.x2 - apex.x, hip1.y2 - apex.y) > 1 },
+ hipB: { x: Math.round(hip2.x2), y: Math.round(hip2.y2), clipped: Math.hypot(hip2.x2 - apex.x, hip2.y2 - apex.y) > 1 },
+ ridgeDeleted: hipClipped,
+ ridgeHidden: ridge.visible === false,
+ }),
)
+ // [KERAB-LABEL-MAP 2026-06-23] 경로 A(일반 라인→처마) 진단 — 화면 라벨(H-n/RG-n/V-n…)↔좌표 맵.
+ // 골짜기 박스(kerabValleyOverlapLine)는 V 로 분류되어 V-n 으로 노출 → 힙이 박스를 통과/멈추는지
+ // 라벨로 대조하기 위함(local 전용, 로깅만).
+ try {
+ const classify = (o) => {
+ const nm = o.name
+ const ln = o.lineName
+ if (nm === 'baseLine') return 'B'
+ if (nm === 'outerLine' || nm === 'eaves' || ln === 'roofLine') return 'R'
+ if (nm === LINE_TYPE.SUBLINE.HIP || ln === LINE_TYPE.SUBLINE.HIP) return 'H'
+ if (nm === LINE_TYPE.SUBLINE.RIDGE || ln === LINE_TYPE.SUBLINE.RIDGE) return 'RG'
+ if (nm === LINE_TYPE.SUBLINE.VALLEY || ln === LINE_TYPE.SUBLINE.VALLEY) return 'V'
+ if (nm === LINE_TYPE.SUBLINE.GABLE || ln === LINE_TYPE.SUBLINE.GABLE) return 'G'
+ if (typeof o.x1 === 'number' && typeof o.y1 === 'number' && typeof o.x2 === 'number' && typeof o.y2 === 'number') return 'SK'
+ return null
+ }
+ const ctr = {}
+ const lmap = []
+ for (const o of canvas.getObjects()) {
+ if (!o || o.parentId !== roof.id || o.name === '__debugLabel') continue
+ const pfx = classify(o)
+ if (!pfx) continue
+ ctr[pfx] = (ctr[pfx] || 0) + 1
+ lmap.push({
+ label: `${pfx}-${ctr[pfx]}`,
+ p1: { x: Math.round(o.x1), y: Math.round(o.y1) },
+ p2: { x: Math.round(o.x2), y: Math.round(o.y2) },
+ ln: o.lineName || null,
+ sz: o.attributes?.planeSize ?? null,
+ })
+ }
+ logger.log('[KERAB-LABEL-MAP] ' + JSON.stringify(lmap))
+ } catch (e) {
+ logger.warn('[KERAB-LABEL-MAP] failed ' + (e?.message || e))
+ }
+ // [KERAB-BOX-DUMP 2026-06-23] 진단 — canvas 전체의 골짜기 박스(kerabValleyOverlapLine) + 모든 ROOF
+ // 폴리곤 외곽 bbox 를 roofId 와 함께 덤프. 힙이 뚫은 "박스"가 현재 roof 소속인지, 다른 roof/겹침
+ // 소속이라 oppRayDist 필터에서 빠졌는지 판별하기 위함(local 전용, 로깅만).
+ try {
+ const allBox = (canvas.getObjects() || [])
+ .filter((o) => o && (o.lineName === 'kerabValleyOverlapLine' || o.attributes?.type === 'kerabValleyOverlapLine'))
+ .map((o) => ({
+ p1: { x: Math.round(o.x1), y: Math.round(o.y1) },
+ p2: { x: Math.round(o.x2), y: Math.round(o.y2) },
+ parentId: o.parentId || null,
+ roofId: o.roofId || o.attributes?.roofId || null,
+ name: o.name || null,
+ }))
+ const allRoofs = (canvas.getObjects() || [])
+ .filter((o) => o && o.name === POLYGON_TYPE.ROOF)
+ .map((o) => {
+ const ps = o.points || []
+ let x0 = Infinity
+ let x1 = -Infinity
+ let y0 = Infinity
+ let y1 = -Infinity
+ for (const p of ps) {
+ if (p.x < x0) x0 = p.x
+ if (p.x > x1) x1 = p.x
+ if (p.y < y0) y0 = p.y
+ if (p.y > y1) y1 = p.y
+ }
+ return { id: o.id, isFixed: !!o.isFixed, bbox: { x0: Math.round(x0), y0: Math.round(y0), x1: Math.round(x1), y1: Math.round(y1) }, n: ps.length }
+ })
+ logger.log('[KERAB-BOX-DUMP] ' + JSON.stringify({ curRoof: roof.id, box: allBox, roofs: allRoofs }))
+ } catch (e) {
+ logger.warn('[KERAB-BOX-DUMP] failed ' + (e?.message || e))
+ }
+ // [KERAB-TYPE-EAVES-RIDGE-VANISH-FLAG 2026-06-23] 마루(RG-1)를 삭제한 케이스. moveStaleEdgeInnerLines
+ // 의 relocate 가 이 플래그로 박스 세로선(H-8)의 과길게 뻗은 끝점을 박스 바닥(boxCorner=RG-1 의
+ // 박스측 끝점, 예 (747,266))으로 내려 H-7↔H-2 사이만 막도록 만든다(사용자 규칙 2026-06-23:
+ // "H-8 은 힙이 아니라 박스를 막는 세로 roofLine, H-2 와 H-7 사이만").
+ apex.ridgeHidden = hipClipped
+ apex.boxCorner = hipClipped ? boxCorner : null
return apex
}
@@ -4102,9 +4619,17 @@ export function useEavesGableEdit(id) {
let movedCnt = 0
for (const il of roof.innerLines || []) {
if (!il || isKerabPattern(il.lineName)) continue
+ // [KERAB-TYPE-EAVES-EDGEMOVE-SKIPHIDDEN 2026-06-23] 숨긴 마루(hipClipped 시 visible=false)는
+ // 옮기지 않는다. 옮기면 cMid→apex 수렴 후 addLengthText 가 박스 위에 "415" 라벨을 되살린다.
+ if (il.visible === false) continue
const collinear = isCollinearWithEdge(il.x1, il.y1, il.x2, il.y2)
// 非평행 라인의 cMid 끝점은 apex 로 수렴, 그 외는 出幅 delta 로 평행이동.
const relocate = (px, py) => {
+ // [KERAB-TYPE-EAVES-EDGEMOVE-BOXCLOSE 2026-06-23] 마루(RG-1) 삭제 케이스(apex.ridgeHidden)는
+ // 박스 세로선(H-8)이 옛 처마변까지 과길게 뻗어 있다(에러). 그 과길게 뻗은 끝점(cMid 측)을
+ // apex 로 올리지도 평행이동하지도 않고, 박스 바닥(boxCorner=RG-1 박스측 끝점)으로 내려
+ // H-7↔H-2 사이만 막는 짧은 세로선으로 만든다.
+ if (apex && apex.ridgeHidden && apex.boxCorner && !collinear && nearMid(px, py)) return { x: apex.boxCorner.x, y: apex.boxCorner.y }
if (apex && !collinear && nearMid(px, py)) return { x: apex.x, y: apex.y }
return { x: px + dxE, y: py + dyE }
}
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index c84e1cf4..cf06ba57 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -10,6 +10,7 @@ import Big from 'big.js'
import { calcLinePlaneSize } from '@/util/qpolygon-utils'
import { getSelectLinePosition } from '@/util/skeleton-utils'
import { useMouse } from '@/hooks/useMouse'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
// [정책 flag] 오버 이동(인접 라인 반전 = polygon self-cross) 입력 처리 방법.
// 'clamp' : (기본/2026-04-24 최종) 평행 위치-OVER_EPS 까지 클램핑. wall.baseLines 는 항상 정상 polygon, SK 확장 정상.
@@ -40,6 +41,7 @@ export function useMovementSetting(id) {
const [type, setType] = useState(TYPE.FLOW_LINE)
const typeRef = useRef(type)
const { swalFire } = useSwal()
+ const { saveSnapshot } = useUndoRedo()
const FLOW_LINE_REF = {
POINTER_INPUT_REF: useRef(null),
@@ -154,23 +156,7 @@ export function useMovementSetting(id) {
canvas.remove(CONFIRM_LINE_REF.current)
CONFIRM_LINE_REF.current = null
}
- const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
- roofs.forEach((roof) => {
- roof.set({ stroke: '#1083E3' })
- roof.innerLines.forEach((line) => line.set({ selectable: true, strokeWidth: 2, stroke: '#1083E3' }))
- })
- const walls = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
- walls.forEach((wall) => {
- if (wall.baseLines.length === 0) {
- wall.baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.attributes.wallId === wall.id)
- }
- wall.baseLines.forEach((baseLine) => {
- baseLine.set({ selectable: false, visible: false })
- })
- })
- const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
- outerLines.forEach((line) => line.set({ visible: true }))
- canvas.renderAll()
+ restoreLineStyles()
initEvent()
}
}, [])
@@ -228,6 +214,28 @@ export function useMovementSetting(id) {
canvas.renderAll()
}, [currentObject])
+ /** 동선이동/형올림내림 적용 전(평상) 선 스타일로 되돌린다.
+ * saveSnapshot 직전과 팝업 cleanup 양쪽에서 호출해, undo 시 강조색이 스냅샷에 박혀 복원되지 않도록 한다. */
+ const restoreLineStyles = () => {
+ const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+ roofs.forEach((roof) => {
+ roof.set({ stroke: '#1083E3' })
+ roof.innerLines.forEach((line) => line.set({ selectable: true, strokeWidth: 2, stroke: '#1083E3' }))
+ })
+ const walls = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
+ walls.forEach((wall) => {
+ if (wall.baseLines.length === 0) {
+ wall.baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.attributes.wallId === wall.id)
+ }
+ wall.baseLines.forEach((baseLine) => {
+ baseLine.set({ selectable: false, visible: false })
+ })
+ })
+ const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+ outerLines.forEach((line) => line.set({ visible: true }))
+ canvas.renderAll()
+ }
+
const clearRef = () => {
if (type === TYPE.FLOW_LINE) {
// 안전한 ref 접근
@@ -532,6 +540,11 @@ export function useMovementSetting(id) {
canvas.renderAll()
}
+ // [undo 색상 fix] 스냅샷은 동선이동/형올림내림 적용 직전 상태를 저장한다.
+ // 팝업 오픈 시 입힌 강조색이 스냅샷에 박히면 undo 시 강조색이 복원되므로,
+ // 스냅샷 저장 전에 평상 선 스타일로 되돌린다.
+ restoreLineStyles()
+ saveSnapshot()
const target = selectedObject.current !== null ? selectedObject.current : CONFIRM_LINE_REF.current?.target
if (!target) return
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
index c330caac..9fcd56a2 100644
--- a/src/hooks/roofcover/useOuterLineWall.js
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -6,9 +6,11 @@ import {
adsorptionPointModeState,
adsorptionRangeState,
canvasState,
+ currentMenuState,
dotLineIntervalSelector,
verticalHorizontalModeState,
} from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
@@ -35,6 +37,7 @@ import { useMessage } from '@/hooks/useMessage'
import Big from 'big.js'
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import { useObject } from '@/hooks/useObject'
+import { useUndoRedo } from '@/hooks/useUndoRedo'
//외벽선 그리기
export function useOuterLineWall(id, propertiesId) {
@@ -60,6 +63,7 @@ export function useOuterLineWall(id, propertiesId) {
const { tempGridMode } = useTempGrid()
const { addPolygonByLines } = usePolygon()
const { handleSelectableObjects } = useObject()
+ const { saveSnapshot, setDrawing } = useUndoRedo()
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@@ -90,6 +94,7 @@ export function useOuterLineWall(id, propertiesId) {
const { getMessage } = useMessage()
const setOuterLineFix = useSetRecoilState(outerLineFixState)
+ const setCurrentMenu = useSetRecoilState(currentMenuState)
const outerLineDiagonalLengthRef = useRef(null)
@@ -116,6 +121,15 @@ export function useOuterLineWall(id, propertiesId) {
}
}, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
+ // 외벽선 그리기 진행 중에는 undo/redo/스냅샷을 차단한다.
+ // 그리기 전 스냅샷은 첫 클릭(mouseDown) 에서 force 로 저장한다 (기존 동작 유지).
+ useEffect(() => {
+ setDrawing(true)
+ return () => {
+ setDrawing(false)
+ }
+ }, [])
+
useEffect(() => {
arrow1Ref.current = arrow1
}, [arrow1])
@@ -153,6 +167,9 @@ export function useOuterLineWall(id, propertiesId) {
pointer = { x: Big(pointer.x).toNumber(), y: Big(pointer.y).toNumber() }
if (points.length === 0) {
+ // 그리기 진행 중에는 스냅샷이 차단되므로 force 로 저장한다.
+ // (처음 한 번만 저장되고 이후 추가 클릭은 points.length > 0 분기로 빠지므로 중복 저장 안 됨)
+ saveSnapshot(null, { force: true })
setPoints((prev) => [...prev, pointer])
} else {
const lastPoint = points[points.length - 1]
@@ -258,6 +275,8 @@ export function useOuterLineWall(id, propertiesId) {
canvas.outerLineFix = true
closePopup(id)
ccwCheck()
+ // 외벽선 완료 → 지붕형상 설정 메뉴로 전환
+ setCurrentMenu(MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS)
addPopup(propertiesId, 1, } innerLines - 내부선 배열 (split 결과가 여기에 in-place 추가됨)
+ * @param {fabric.Canvas} canvas
+ * @param {string} textMode
+ * @param {{degreeOf?: (parentLine) => number}} [opts] - degreeOf: 부모 외곽변 → 경사각(도).
+ * 한쪽흐름 경사변(gable)처럼 평면길이≠실제길이인 변을 통짜로 그릴 때 drawHipLine 으로 실제길이 보정(plane/cos) — docs §8.
+ * 미전달 시 기존 동작(분할점 인접 pitch 기반).
+ * @returns {Array} innerLines
+ */
+export const splitRoofLinesToInnerLines = (roof, innerLines, canvas, textMode, opts = {}) => {
+ const { degreeOf } = opts
+ // 분할점이 처마변 끝점(코너)과 이 거리(px) 이내면 분할에서 제외.
+ // SK 추녀 연장이 처마 코너에 닿을 때 ray cast 부동소수 오차(관측 0.02px)로 코너와 미세하게
+ // 어긋나면, 기존 almostEqual(1e-10)은 "끝점 아님"으로 오판 → 0 길이 조각 생성. END_EPS 로 흡수.
+ // 변별 경로의 진짜 분할점은 끝점에서 수백 px 떨어져 있어 영향 없음.
+ const END_EPS = 1.0
const innerLinesPoints = []
innerLines.forEach((line) => {
const hasCoord1 = innerLinesPoints.find((p) => p.x === line.x1 && p.y === line.y1)
@@ -5445,36 +5527,32 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
const splitPoint = []
let hasOverlapLine = false
- const minX = Math.min(currentLine.x1, currentLine.x2)
- const maxX = Math.max(currentLine.x1, currentLine.x2)
- const minY = Math.min(currentLine.y1, currentLine.y2)
- const maxY = Math.max(currentLine.y1, currentLine.y2)
innerLines.forEach((innerLine) => {
- const innerLineMinX = Math.min(innerLine.x1, innerLine.x2)
- const innerLineMaxX = Math.max(innerLine.x1, innerLine.x2)
- const innerLineMinY = Math.min(innerLine.y1, innerLine.y2)
- const innerLineMaxY = Math.max(innerLine.y1, innerLine.y2)
- if (innerLineMinX <= minX && innerLineMaxX >= maxX && innerLineMinY <= minY && innerLineMaxY >= maxY) {
- hasOverlapLine = true
- }
- if (minX <= innerLineMinX && maxX >= innerLineMaxX && minY <= innerLineMinY && maxY >= innerLineMaxY) {
- hasOverlapLine = true
- }
+ // [docs §10] overlap 판정: 축정렬 bbox 포함 → "공선 + 구간 덮음" 으로 변경.
+ // 기존 bbox 포함은 수평/수직 짧은 처마변(bbox 한 축 두께 0)을 대각선 추녀(hip) bbox 가
+ // 삼켜 false positive(처마변 skip → 원본 transparent → 지붕선 소실)를 냈다(육각형 잘린 모서리).
+ // 원 가드 의도("같은 선 위 더 긴 내부선이 처마변을 덮으면 중복이니 skip")는 공선이 전제이므로,
+ // 공선 아닌 추녀는 애초에 skip 대상이 아니다. 양 끝점이 상대 선분 위(isPointOnLineNew)면 덮음.
+ const innerCoversCurr =
+ isPointOnLineNew(innerLine, { x: currentLine.x1, y: currentLine.y1 }) &&
+ isPointOnLineNew(innerLine, { x: currentLine.x2, y: currentLine.y2 })
+ const currCoversInner =
+ isPointOnLineNew(currentLine, { x: innerLine.x1, y: innerLine.y1 }) &&
+ isPointOnLineNew(currentLine, { x: innerLine.x2, y: innerLine.y2 })
+ if (innerCoversCurr || currCoversInner) hasOverlapLine = true
})
if (hasOverlapLine) return
innerLinesPoints.forEach((point) => {
- if (
- isPointOnLineNew(currentLine, point) &&
- !(almostEqual(currentLine.x1, point.x) && almostEqual(currentLine.y1, point.y)) &&
- !(almostEqual(currentLine.x2, point.x) && almostEqual(currentLine.y2, point.y))
- ) {
- const distance = Math.sqrt((point.x - currentLine.x1) ** 2 + (point.y - currentLine.y1) ** 2)
- splitPoint.push({ point, distance })
+ const distToStart = Math.hypot(point.x - currentLine.x1, point.y - currentLine.y1)
+ const distToEnd = Math.hypot(point.x - currentLine.x2, point.y - currentLine.y2)
+ // 변 위 점이면서 양 끝점(코너)에서 END_EPS 보다 멀 때만 진짜 분할점으로 채택.
+ if (isPointOnLineNew(currentLine, point) && distToStart > END_EPS && distToEnd > END_EPS) {
+ splitPoint.push({ point, distance: distToStart })
}
})
if (splitPoint.length > 0) {
- splitPoint.sort((a, b) => a[1] - b[1])
+ splitPoint.sort((a, b) => a.distance - b.distance)
let startPoint = { x: currentLine.x1, y: currentLine.y1 }
for (let i = 0; i < splitPoint.length; i++) {
const point = splitPoint[i].point
@@ -5491,18 +5569,22 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
innerLines.push(drawHipLine([startPoint.x, startPoint.y, currentLine.x2, currentLine.y2], canvas, roof, textMode, nextDegree, nextDegree))
}
} else {
- innerLines.push(drawRoofLine([currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2], canvas, roof, textMode))
+ // 분할점 없는 통짜 변. degreeOf 가 주어지면(한쪽흐름) 경사변은 drawHipLine(plane/cos) 으로 실제길이 보정.
+ const deg = degreeOf ? degreeOf(currentLine) : 0
+ if (deg > 0) {
+ innerLines.push(drawHipLine([currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2], canvas, roof, textMode, deg, deg))
+ } else {
+ innerLines.push(drawRoofLine([currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2], canvas, roof, textMode))
+ }
}
})
- //지붕 innerLines에 추가.
- roof.innerLines = innerLines
+ // 처마선 innerLine 이 외곽선/치수를 전담하므로 roof 원본 외곽(stroke) 숨김 + 지붕선 치수(roof lengthText) 제거.
+ // (안 숨기면 처마선 삭제 시 roof 기본 stroke:'black'(usePolygon.js) 노출. 외벽선 wall 치수는 유지)
+ roof.set({ stroke: 'transparent' })
+ removeRoofLengthText(roof, canvas)
- canvas
- .getObjects()
- .filter((object) => object.name === 'check')
- .forEach((object) => canvas.remove(object))
- canvas.renderAll()
+ return innerLines
}
/**
diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js
index e283c472..06ad38ff 100644
--- a/src/util/skeleton-utils.js
+++ b/src/util/skeleton-utils.js
@@ -1,6 +1,6 @@
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { SkeletonBuilder } from '@/lib/skeletons'
-import { calcLineActualSize, calcLineActualSize2, calcLinePlaneSize, toGeoJSON } from '@/util/qpolygon-utils'
+import { calcLineActualSize, calcLineActualSize2, calcLinePlaneSize, splitRoofLinesToInnerLines, toGeoJSON } from '@/util/qpolygon-utils'
import { QLine } from '@/components/fabric/QLine'
import { getDegreeByChon } from '@/util/canvas-util'
import Big from 'big.js'
@@ -1283,6 +1283,10 @@ export const skeletonBuilder = (roofId, canvas, textMode) => {
// gap 을 시각화. innerLines 와 별개 collection. 기존 working code (processInBoth 등) 무영향.
drawBaselineToRooflineHelpers(roof, canvas, changRoofLinePoints, roofLinePoints)
+ // [docs §9-3] 추녀 연장 후 처마변(roof.lines)을 split → 편집 가능한 innerLine(hip/roofLine)으로 등록.
+ // 단순 우진각: 추녀가 처마 코너(변 끝점)에 닿아 분할점 없음 → 처마 4변 통짜. 복합 형상: 중간 접점에서 분할.
+ splitRoofLinesToInnerLines(roof, roof.innerLines, canvas, textMode)
+
// 캔버스에 스켈레톤 상태 저장
if (!canvas.skeletonStates) {
canvas.skeletonStates = {}
diff --git a/startscript-ur.js b/startscript-ur.js
new file mode 100644
index 00000000..fc940e28
--- /dev/null
+++ b/startscript-ur.js
@@ -0,0 +1,2 @@
+var exec = require('child_process').exec
+exec('yarn start:ur', { windowsHide: true })