304 lines
14 KiB
TypeScript
304 lines
14 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_RouteEdit_Label.ts
|
|
* 고른 꺾임점 옆에 뜨는 **곡선 조작 패널** — 반지름·곡선 길이를 보고 고치고 붙든다.
|
|
*
|
|
* 왜 옆인가(2026-09-07 사용자 지시 ③) — 예전에는 모달 **맨 아래 줄**이라 지금 고른 것이
|
|
* 지도 어디인지 눈으로 안 이어졌다.
|
|
*
|
|
* **R 과 곡선 길이는 한 쌍**(L = R·Δ, Δ 는 앞뒤 직선이 정하는 교각) — 한쪽을 고치면 다른
|
|
* 쪽이 따라온다. 「자동」 단추는 없다: 칸을 비우는 것이 곧 자동이다. 어느 쪽을 붙들지는
|
|
* **고정 단추**로 정한다(둘 다 붙들 수는 없다 — `_Edits.ts` 설명 참고).
|
|
*
|
|
* **자리**(2026-09-07 사용자 지시)
|
|
* · 몸통은 `document.body` 에 `position: fixed` 로 띄운다 — 모달이 `overflow: hidden` 이라
|
|
* 안에 두면 가장자리에서 **잘린다**.
|
|
* · 다만 **지도 칸 밖으로는 안 나간다**(2026-09-12 사용자 지적 ⑨) — 상자 밖이나 하단
|
|
* 정보행 위로 넘어가면 지금 무엇을 고치는지 모달 안에서 안 보인다. 「잘리지 않게」와
|
|
* 「상자 밖으로 나가게」는 다른 문제여서 자리 계산에서만 가둔다.
|
|
* · 자동 자리는 **곡선 중심의 반대쪽**, **16방위**로 잡는다(4방위는 대각 자리에서 곡선을 물었다).
|
|
* · 머리를 잡아 **손으로 옮길 수 있다**. 옮긴 자리는 그 꺾임점을 보는 동안 유지되고,
|
|
* 다른 꺾임점을 고르면 자동 자리로 돌아간다.
|
|
* ========================================================================== */
|
|
|
|
import type { CurveLock } from "./B05_Profile_UI_RouteEdit_Edits";
|
|
|
|
/** 그 꺾임점의 **교각 Δ**(라디안) — 내각의 나머지. 곡선 길이 L = R·Δ 에 쓴다. */
|
|
export function deflectionRad(innerAngleDeg: number | null | undefined): number {
|
|
if (innerAngleDeg === null || innerAngleDeg === undefined) return 0;
|
|
return ((180 - innerAngleDeg) * Math.PI) / 180;
|
|
}
|
|
|
|
/** 곡선 중심이 있는 **화면 방향**(단위벡터) — 패널을 그 반대쪽에 붙이는 데 쓴다.
|
|
*
|
|
* 중심은 접선점 둘이 이루는 각의 이등분선 위에 있다. 접선점은 교각점에서 앞뒤 직선을 따라
|
|
* 뻗은 자리이므로, 두 방향의 단위벡터를 더하면 그대로 중심 쪽이다. 셋이 한 점이면 null. */
|
|
export function centerDirectionOf(
|
|
apex: [number, number],
|
|
start: [number, number],
|
|
end: [number, number],
|
|
): [number, number] | null {
|
|
const arm = (point: [number, number]): [number, number] => {
|
|
const dx = point[0] - apex[0];
|
|
const dy = point[1] - apex[1];
|
|
const length = Math.hypot(dx, dy);
|
|
return length <= 1e-9 ? [0, 0] : [dx / length, dy / length];
|
|
};
|
|
const [ux, uy] = arm(start);
|
|
const [vx, vy] = arm(end);
|
|
const sx = ux + vx;
|
|
const sy = uy + vy;
|
|
const length = Math.hypot(sx, sy);
|
|
return length <= 1e-9 ? null : [sx / length, sy / length];
|
|
}
|
|
|
|
/** 꺾임점과 패널 사이 여백(px) — 손잡이(접선점 네모)를 가리지 않을 만큼 띄운다. */
|
|
const GAP_PX = 40;
|
|
/** 자동 자리를 고를 방위 수 — 16방위(22.5°마다). */
|
|
const COMPASS_STEPS = 16;
|
|
|
|
export interface CurveLabelState {
|
|
/** 몇 번째 꺾임점인지 — 0부터 센 자리. 표시는 +1 해서 낸다. */
|
|
seat: number;
|
|
/** 그 꺾임점의 **화면(viewport) 좌표** px — 패널이 `position: fixed` 라서. */
|
|
at: [number, number];
|
|
/** **곡선 중심이 있는 쪽**(화면 기준 방향벡터). 패널은 이 반대쪽에 붙는다. */
|
|
centerDirection: [number, number] | null;
|
|
/** 패널이 넘어가면 안 되는 테두리(화면 좌표) — 보통 모달의 지도 칸. 없으면 안 가둔다. */
|
|
bounds?: { left: number; top: number; right: number; bottom: number };
|
|
curveOn: boolean;
|
|
radiusShown: number | null;
|
|
/** 곡선 길이(m) = R·Δ. 곡선이 없으면 null. */
|
|
arcLengthShown: number | null;
|
|
lock: CurveLock;
|
|
innerAngleDeg: number | null;
|
|
/** **못 넘는** 반지름·곡선 길이 하한(m). 0이면 제한 없음(계획서 0-9 ④). */
|
|
limitRadiusM?: number;
|
|
limitArcM?: number;
|
|
}
|
|
|
|
export interface CurveLabelHandlers {
|
|
/** 닫기 단추 — 고른 꺾임점을 푼다(계획서 0-9 ㉖). */
|
|
onClose: () => void;
|
|
onRadius: (value: number | null) => void;
|
|
onArcLength: (value: number | null) => void;
|
|
onCurveOn: (on: boolean) => void;
|
|
/** 무엇을 붙들지 바꿨다 — 같은 것을 다시 누르면 null(품). */
|
|
onLock: (lock: CurveLock) => void;
|
|
}
|
|
|
|
export interface CurveLabel {
|
|
show: (state: CurveLabelState) => void;
|
|
hide: () => void;
|
|
/** 창을 닫을 때 — 몸통이 `document.body` 에 붙어 있어 스스로 안 사라진다. */
|
|
destroy: () => void;
|
|
}
|
|
|
|
/** 방향을 16방위 중 가장 가까운 것으로 맞춘다. */
|
|
function quantize(dx: number, dy: number): [number, number] {
|
|
const step = (2 * Math.PI) / COMPASS_STEPS;
|
|
const angle = Math.round(Math.atan2(dy, dx) / step) * step;
|
|
return [Math.cos(angle), Math.sin(angle)];
|
|
}
|
|
|
|
/** 가운데에서 그 방향으로 상자 가장자리까지의 거리 — 방위마다 다르다. */
|
|
function boxReach(dx: number, dy: number, width: number, height: number): number {
|
|
const byX = Math.abs(dx) < 1e-9 ? Infinity : width / 2 / Math.abs(dx);
|
|
const byY = Math.abs(dy) < 1e-9 ? Infinity : height / 2 / Math.abs(dy);
|
|
return Math.min(byX, byY);
|
|
}
|
|
|
|
/** 패널을 만든다. 몸통은 `document.body` 에 붙어 모달 밖으로도 넘어간다. */
|
|
export function createCurveLabel(handlers: CurveLabelHandlers): CurveLabel {
|
|
const root = document.createElement("div");
|
|
root.className = "b05-routeedit__label";
|
|
root.hidden = true;
|
|
root.innerHTML = `
|
|
<div class="b05-routeedit__label-head">
|
|
<span class="b05-routeedit__curve-label"></span>
|
|
<button type="button" class="b05-routeedit__label-toggle" data-act="curve-toggle"></button>
|
|
<button type="button" class="b05-routeedit__label-close" data-act="curve-close"
|
|
aria-label="닫기" title="닫기">✕</button>
|
|
</div>
|
|
<label class="b05-routeedit__curve-field">반지름
|
|
<input type="number" class="b05-routeedit__curve-radius" min="1" step="0.5" />
|
|
<span>m</span>
|
|
<button type="button" class="b05-routeedit__lock" data-act="lock-radius"
|
|
title="반지름 고정 — 노드를 옮겨도 안 바뀝니다">고정</button>
|
|
</label>
|
|
<label class="b05-routeedit__curve-field">곡선 길이
|
|
<input type="number" class="b05-routeedit__curve-arc" min="1" step="0.5" />
|
|
<span>m</span>
|
|
<button type="button" class="b05-routeedit__lock" data-act="lock-arc"
|
|
title="곡선 길이 고정 — 노드를 옮겨도 안 바뀝니다">고정</button>
|
|
</label>
|
|
<span class="b05-routeedit__curve-info"></span>`;
|
|
document.body.append(root);
|
|
|
|
const head = root.querySelector<HTMLElement>(".b05-routeedit__label-head")!;
|
|
const seatText = root.querySelector<HTMLElement>(".b05-routeedit__curve-label")!;
|
|
const toggle = root.querySelector<HTMLButtonElement>('[data-act="curve-toggle"]')!;
|
|
const radius = root.querySelector<HTMLInputElement>(".b05-routeedit__curve-radius")!;
|
|
const arc = root.querySelector<HTMLInputElement>(".b05-routeedit__curve-arc")!;
|
|
const lockRadius = root.querySelector<HTMLButtonElement>('[data-act="lock-radius"]')!;
|
|
const lockArc = root.querySelector<HTMLButtonElement>('[data-act="lock-arc"]')!;
|
|
const info = root.querySelector<HTMLElement>(".b05-routeedit__curve-info")!;
|
|
|
|
// 패널 위에서 누른 것이 캔버스로 새어 나가면 노드가 딸려 움직인다.
|
|
for (const type of ["pointerdown", "dblclick", "contextmenu", "wheel"] as const) {
|
|
root.addEventListener(type, (event) => event.stopPropagation());
|
|
}
|
|
|
|
let curveOn = true;
|
|
let lock: CurveLock = null;
|
|
let seat = -1;
|
|
/** 손으로 옮긴 자리 — 꺾임점 기준 어긋남(px). 다른 꺾임점을 고르면 지운다. */
|
|
let manual: [number, number] | null = null;
|
|
let anchor: [number, number] = [0, 0];
|
|
/** 지금 자리의 하한 — 칸이 여기서 멈춘다. 0이면 제한 없음. */
|
|
let limitRadius = 0;
|
|
let limitArc = 0;
|
|
/** 마지막으로 받은 테두리 — 손으로 끌 때도 같은 자리를 지키려고 들고 있는다. */
|
|
let limit: CurveLabelState["bounds"];
|
|
|
|
/** 칸에서 읽은 값. **하한 아래는 하한에서 멈추고, 멈춘 값을 칸에 되적어 보인다**
|
|
* (2026-09-12 사용자 확정 「아예 못 넘게 막음」) — 조용히 바꾸면 왜 안 먹었는지 모른다. */
|
|
const numberOf = (input: HTMLInputElement, floor: number): number | null => {
|
|
const value = Number(input.value);
|
|
if (input.value.trim() === "" || !Number.isFinite(value) || value <= 0) return null;
|
|
if (floor > 0 && value < floor) {
|
|
input.value = String(floor);
|
|
return floor;
|
|
}
|
|
return value;
|
|
};
|
|
radius.addEventListener("change", () => handlers.onRadius(numberOf(radius, limitRadius)));
|
|
arc.addEventListener("change", () => handlers.onArcLength(numberOf(arc, limitArc)));
|
|
toggle.addEventListener("click", () => handlers.onCurveOn(!curveOn));
|
|
root
|
|
.querySelector('[data-act="curve-close"]')!
|
|
.addEventListener("click", () => handlers.onClose());
|
|
lockRadius.addEventListener("click", () => handlers.onLock(lock === "radius" ? null : "radius"));
|
|
lockArc.addEventListener("click", () => handlers.onLock(lock === "arc" ? null : "arc"));
|
|
|
|
// ── 머리를 잡아 옮기기 — 곡선을 가리면 손으로 치울 수 있어야 한다 ──
|
|
let dragFrom: { x: number; y: number; left: number; top: number } | null = null;
|
|
head.addEventListener("pointerdown", (event) => {
|
|
if ((event.target as HTMLElement).closest("button")) return; // 단추는 단추대로.
|
|
dragFrom = {
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
left: root.offsetLeft,
|
|
top: root.offsetTop,
|
|
};
|
|
head.setPointerCapture(event.pointerId);
|
|
event.preventDefault();
|
|
});
|
|
head.addEventListener("pointermove", (event) => {
|
|
if (!dragFrom) return;
|
|
// 끄는 동안에도 테두리를 지킨다 — 놓은 뒤에만 가두면 손이 간 자리에서 패널이 튄다.
|
|
const [left, top] = clamp(
|
|
dragFrom.left + event.clientX - dragFrom.x,
|
|
dragFrom.top + event.clientY - dragFrom.y,
|
|
root.offsetWidth,
|
|
root.offsetHeight,
|
|
limit,
|
|
);
|
|
root.style.left = `${Math.round(left)}px`;
|
|
root.style.top = `${Math.round(top)}px`;
|
|
// 꺾임점 기준으로 기억한다 — 지도를 옮기거나 확대해도 같은 자리에 따라온다.
|
|
manual = [left - anchor[0], top - anchor[1]];
|
|
});
|
|
const stopDrag = (event: PointerEvent): void => {
|
|
if (head.hasPointerCapture(event.pointerId)) head.releasePointerCapture(event.pointerId);
|
|
dragFrom = null;
|
|
};
|
|
head.addEventListener("pointerup", stopDrag);
|
|
head.addEventListener("pointercancel", stopDrag);
|
|
|
|
/** 자동 자리 — 곡선 중심의 반대쪽, 16방위. 손으로 옮겼으면 그 어긋남을 얹는다.
|
|
* 마지막에 **테두리 안으로 가둔다** — 자동 자리든 손으로 옮긴 자리든 같이 갇힌다. */
|
|
function place(state: CurveLabelState): void {
|
|
const width = root.offsetWidth;
|
|
const height = root.offsetHeight;
|
|
const [nx, ny] = state.at;
|
|
const away = state.centerDirection
|
|
? quantize(-state.centerDirection[0], -state.centerDirection[1])
|
|
: ([1, 0] as [number, number]);
|
|
const distance = GAP_PX + boxReach(away[0], away[1], width, height);
|
|
anchor = [nx + away[0] * distance - width / 2, ny + away[1] * distance - height / 2];
|
|
const [left, top] = clamp(
|
|
anchor[0] + (manual ? manual[0] : 0),
|
|
anchor[1] + (manual ? manual[1] : 0),
|
|
width,
|
|
height,
|
|
state.bounds,
|
|
);
|
|
root.style.left = `${Math.round(left)}px`;
|
|
root.style.top = `${Math.round(top)}px`;
|
|
}
|
|
|
|
/** 테두리 안으로 민다. 패널이 테두리보다 크면 왼쪽·위를 맞춰 **머리가 먼저 보이게** 한다. */
|
|
function clamp(
|
|
left: number,
|
|
top: number,
|
|
width: number,
|
|
height: number,
|
|
bounds: CurveLabelState["bounds"],
|
|
): [number, number] {
|
|
if (!bounds) return [left, top];
|
|
return [
|
|
Math.max(bounds.left, Math.min(left, bounds.right - width)),
|
|
Math.max(bounds.top, Math.min(top, bounds.bottom - height)),
|
|
];
|
|
}
|
|
|
|
return {
|
|
show(state) {
|
|
if (state.seat !== seat) {
|
|
seat = state.seat;
|
|
manual = null; // 다른 꺾임점이면 자동 자리부터 다시.
|
|
}
|
|
curveOn = state.curveOn;
|
|
lock = state.lock;
|
|
limit = state.bounds;
|
|
limitRadius = state.limitRadiusM ?? 0;
|
|
limitArc = state.limitArcM ?? 0;
|
|
// 칸 자체에도 하한을 박아 화살표·스피너가 그 아래로 안 내려가게 한다.
|
|
radius.min = limitRadius > 0 ? String(limitRadius) : "1";
|
|
arc.min = limitArc > 0 ? String(limitArc) : "1";
|
|
root.hidden = false;
|
|
seatText.textContent = `${state.seat + 1}번째 꺾임점`;
|
|
toggle.textContent = state.curveOn ? "곡선 지우기" : "곡선 넣기";
|
|
radius.disabled = !state.curveOn;
|
|
arc.disabled = !state.curveOn;
|
|
lockRadius.disabled = !state.curveOn;
|
|
lockArc.disabled = !state.curveOn;
|
|
lockRadius.classList.toggle("is-on", lock === "radius");
|
|
lockArc.classList.toggle("is-on", lock === "arc");
|
|
radius.value =
|
|
state.radiusShown === null ? "" : String(Math.round(state.radiusShown * 10) / 10);
|
|
arc.value =
|
|
state.arcLengthShown === null ? "" : String(Math.round(state.arcLengthShown * 10) / 10);
|
|
const inner = state.innerAngleDeg;
|
|
// 하단에는 **내각만** 남긴다(2026-09-12 사용자 지시 ㉗) — 고정 여부는 단추 색으로,
|
|
// 하한은 칸이 이미 막으므로 글로 또 적을 까닭이 없다.
|
|
info.textContent = state.curveOn
|
|
? inner
|
|
? `내각 ${Math.round(inner)}°`
|
|
: ""
|
|
: "곡선 없음 — 직선이 그대로 꺾입니다";
|
|
place(state);
|
|
// 글자가 바뀌면 상자 높이가 한 박자 늦게 자란다 — 다음 그림 직전에 한 번 더 맞춘다.
|
|
requestAnimationFrame(() => {
|
|
if (!root.hidden) place(state);
|
|
});
|
|
},
|
|
hide() {
|
|
root.hidden = true;
|
|
},
|
|
destroy() {
|
|
root.remove();
|
|
},
|
|
};
|
|
}
|