Files
Aislo/B07_DesignDetail/openwebcad/src/inputController/input-controller.ts
T

596 lines
22 KiB
TypeScript

import { Point } from '@flatten-js/core';
import { compact, round } from 'es-toolkit';
import { MouseButton } from '../App.types.ts';
import { describeCommand, matchCommandPrefixes } from '../commands/registry.ts';
import { logLine, runCommandInput } from '../commands/run-command.ts';
import { requestHostSave } from '../integration/aislo-drawing-bridge.ts';
import type { ScreenCanvasDrawController } from '../drawControllers/screenCanvas.drawController.ts';
import { calculateAngleGuidesAndSnapPoints } from '../helpers/calculate-angle-guides-and-snap-points.ts';
import { findClosestEntity } from '../helpers/find-closest-entity.ts';
import { pickRadius } from '../helpers/pick-radius.ts';
import {
getActiveToolActor,
getAngleGuideOriginPoint,
getAngleStep,
getCanvas,
getHighlightedEntityIds,
getPickableEntities,
getGridEnabled,
getPanStartLocation,
getScreenCanvasDrawController,
getSnapEnabled,
isHostSave,
isViewOnly,
setAngleStep,
setGridEnabled,
setHighlightedEntityIds,
setPanStartLocation,
setSelectedEntityIds,
setShouldDrawCursor,
setSnapEnabled,
} from '../state.ts';
import { Tool } from '../tools.ts';
import { SelectState } from '../tools/select-tool.ts';
import { ActorEvent, type MouseClickEvent } from '../tools/tool.types.ts';
import { activeToolWantsFreeText, activeToolWantsIme, ImeSink, isImeKey, isPlainSpace } from './ime-sink.ts';
import { drawInputField, dynamicInputLine } from './input-field-draw.ts';
import { cadCtrlCommand, ctrlShortcut } from './input-shortcut.ts';
import { wheelZoom } from './input-wheel.ts';
import { isObjectSnap, noteShift, snapAt } from './ortho.ts';
import { isWaitingForSecondSelectPoint, selectingActor } from './selecting.ts';
import { openSnapMenu } from './snap-menu.ts';
import { isMiddleDouble, zoomExtents } from './zoom-prompt.ts';
import { attachTouch } from './input-touch.ts';
import { NUMBER_REGEXP, type PointTextEvent } from './input-patterns.ts';
import { commandCandidate, pushInput, recallInput } from './input-history.ts';
import {
angleLockHint,
getAngleLock,
getDynamicField,
getLockedLength,
releaseOnePoint,
tabDynamicInput,
} from './input-angle-lock.ts';
import {
getSnapOverride,
setSnapOverride,
snapOverrideHint,
snapOverridePoint,
} from './input-snap-override.ts';
import {
cancelActiveCommand,
closeSubPrompt,
currentNotice,
currentPrompt,
dynamicInputApplies,
isIdle,
notice,
redoCommand,
routeTyped,
sendPoint,
undoCommand,
} from './prompt-input.ts';
/** 이만큼 넘게 끌면 클릭이 아니라 드래그로 본다 (화면 픽셀) */
const DRAG_SELECT_MIN_PX = 4;
export class InputController {
private text = '';
/** ↑↓ · Tab 돌림 — 기록인가 후보인가 · 후보의 처음 친 글 · 몇째 */
private browsing: 'history' | 'candidates' | null = null;
private candidateBase = '';
private candidateIndex = 0;
/** 왼쪽 버튼을 누른 화면 좌표 — 놓을 때 끌었는지 판단한다 */
private leftPressLocation: Point | null = null;
public readonly ime = new ImeSink((data) => {
this.text += data;
});
constructor() {
if (typeof process === 'object' && process?.env?.NODE_ENV === 'test') {
return; // used during unit testing
}
this.ime.attach();
// Listen for keystrokes
document.addEventListener('keydown', (evt) => {
this.handleKeyStroke(evt);
});
// Listen for right mouse button click => perform the same action as ENTER
const canvas = getCanvas();
canvas?.addEventListener('mousedown', (evt: MouseEvent) => this.handleMouseDown(evt));
canvas?.addEventListener('mousemove', (evt: MouseEvent) => this.handleMouseMove(evt));
canvas?.addEventListener('mouseup', (evt: MouseEvent) => this.handleMouseUp(evt));
// passive:false — 핀치·휠의 브라우저 기본 확대/스크롤을 막아야 한다.
canvas?.addEventListener('wheel', (evt: WheelEvent) => this.handleMouseWheel(evt), {
passive: false,
});
canvas?.addEventListener('mouseout', () => this.handleMouseOut());
canvas?.addEventListener('mouseenter', () => this.handleMouseEnter());
// Stop the context menu from appearing when right-clicking
canvas?.addEventListener('contextmenu', (evt) => {
evt.preventDefault();
});
// 가운데 단추 — 브라우저 자동 스크롤(페이지가 같이 움직임) · 붙여넣기를 막는다.
// 막는 자리는 mousedown(아래 handleMouseDown) — pointerdown 을 막으면 mousedown 이 안 와 팬이 끊긴다.
canvas?.addEventListener('auxclick', (evt: MouseEvent) => {
if (evt.button === MouseButton.Middle) evt.preventDefault();
});
// 캔버스 밖(리본·패널) 위에서의 트랙패드 핀치도 브라우저를 확대시키지 않는다.
// ctrl이 없는 휠은 그대로 둬서 패널 스크롤은 살린다.
document.addEventListener(
'wheel',
(evt: WheelEvent) => {
if (evt.ctrlKey) evt.preventDefault();
},
{ passive: false }
);
attachTouch(this); // 손가락(기기대응 4-1) — 마우스 경로는 그대로
}
public draw(drawController: ScreenCanvasDrawController) {
this.ime.sync(activeToolWantsIme());
const toolInstruction = currentPrompt().line;
const texts: string[] = [];
if (toolInstruction) {
// Draw tool instruction
texts.push(toolInstruction);
}
texts.push(...compact([currentNotice()])); // 거절 · 안내 — 둘째 줄
if (toolInstruction) {
const roundedX = round(drawController.getWorldMouseLocation().x, 2);
const roundedY = round(drawController.getWorldMouseLocation().y, 2);
texts.push(`${roundedX},${roundedY}`);
}
const base = getAngleGuideOriginPoint();
if (base && dynamicInputApplies()) {
texts.push(
dynamicInputLine(
base,
drawController.getWorldMouseLocation(),
getDynamicField(),
this.text,
getLockedLength(),
getAngleLock()
)
);
}
texts.push(...compact([angleLockHint(), snapOverrideHint()]));
// 입력 중인 문자로 시작하는 명령 후보. 예: C => CIRCLE (C), COPY (CO)
texts.push(...this.getCommandSuggestions());
// 입력 글(조합 중인 한글도 함께)
drawInputField(drawController, this.text + this.ime.composing, texts);
}
public submitText(value: string) {
// 명령 해석은 대소문자를 가리지 않으므로 원문을 그대로 둔다 (문자 주석의 대소문자 보존)
this.text = value.trim();
this.handleEnterKey();
}
public handleMouseUp(evt: MouseEvent) {
if (evt.button === MouseButton.Right) {
// 우클릭 = Enter(명령 중 확정 · 쉴 때 반복) · Shift+우클릭 = 점 물음에서 한 번 스냅 메뉴
evt.preventDefault();
evt.stopPropagation();
if (evt.shiftKey && currentPrompt().kind === 'point') {
openSnapMenu(evt.clientX, evt.clientY, (name) => this.submitText(name));
} else {
this.handleEnterKey(true);
}
}
// If ancestor parent exist with class .controls => ignore clicks, since a button was clicked instead of the canvas
const controlsParent = (evt?.target as HTMLElement)?.closest('.controls');
if (controlsParent) {
return;
}
if (evt.button === MouseButton.Middle) {
setPanStartLocation(null);
}
if (evt.button === MouseButton.Left && isViewOnly()) {
setPanStartLocation(null);
return;
}
if (evt.button === MouseButton.Left) {
const pressLocation = this.leftPressLocation;
if (pressLocation) {
// 고르기는 누를 때 첫 점을 이미 보냈다 — 끌었으면 놓는 자리로 상자를 닫거나 집은 그립을 놓음 ·
// 안 끌고 떼면 그대로(상자 클릭-클릭 · 뜨거운 그립은 다음 누름에 놓음 — H3)
this.leftPressLocation = null;
const releaseLocation = this.getCanvasPoint(evt);
const dragged =
Math.hypot(releaseLocation.x - pressLocation.x, releaseLocation.y - pressLocation.y) >
DRAG_SELECT_MIN_PX;
if (dragged && (this.isGripEditActive() || isWaitingForSecondSelectPoint())) {
this.sendMouseClick(evt);
}
return;
}
this.sendMouseClick(evt);
this.ime.sync(activeToolWantsIme()); // 클릭으로 문자 단계에 들면 바로 한글 받개로
}
}
/** 활성 도구가 선택 도구인가 */
private isSelectToolActive(): boolean {
return getActiveToolActor()?.getSnapshot()?.context?.type === Tool.SELECT;
}
/** 집은 그립을 옮기는 중인가 */
private isGripEditActive(): boolean {
return getActiveToolActor()?.getSnapshot()?.context?.type === Tool.GRIP_EDIT;
}
/** 스냅을 반영한 클릭 한 번을 활성 도구에 보낸다 — snapped = 객체 스냅에 잡힘(직교가 안 덮음) */
private sendMouseClick(evt: MouseEvent) {
const screenCanvasDrawController = getScreenCanvasDrawController();
const closestSnapPoint = snapAt(screenCanvasDrawController.getWorldMouseLocation());
const worldMouseLocationTemp = screenCanvasDrawController.targetToWorld(
this.getCanvasPoint(evt)
);
let worldMouseLocation = closestSnapPoint ? closestSnapPoint.point : worldMouseLocationTemp;
let snapped = isObjectSnap(closestSnapPoint);
if (getSnapOverride()) {
const overridden = snapOverridePoint(worldMouseLocationTemp, getAngleGuideOriginPoint());
if (!overridden) return; // 맞는 점 없음 — 다시 누르기를 기다림
worldMouseLocation = overridden;
snapped = true;
}
this.sendPointEvent({
type: ActorEvent.MOUSE_CLICK,
worldMouseLocation,
screenMouseLocation: screenCanvasDrawController.worldToTarget(worldMouseLocation),
holdingCtrl: evt.ctrlKey,
holdingShift: evt.shiftKey,
snapped,
} as MouseClickEvent);
}
public handleMouseEnter() {
setShouldDrawCursor(true);
}
public handleMouseMove(evt: MouseEvent) {
setShouldDrawCursor(true);
noteShift(evt);
const screenCanvasDrawController = getScreenCanvasDrawController();
const newScreenMouseLocation = this.getCanvasPoint(evt);
screenCanvasDrawController.setScreenMouseLocation(newScreenMouseLocation);
// If the middle mouse button is pressed, pan the screen
const panStartLocation = getPanStartLocation();
if (panStartLocation) {
screenCanvasDrawController.panScreen(
newScreenMouseLocation.x - panStartLocation.x,
newScreenMouseLocation.y - panStartLocation.y
);
setPanStartLocation(newScreenMouseLocation);
}
// 미리보기는 보기만 — 스냅 · 가까운 개체 강조를 하지 않는다.
if (isViewOnly()) return;
// 가이드 · 스냅 — 가이드(직교 · 극)는 늘 · 객체 스냅점은 F3 일 때만(안에서 가름 · H8)
calculateAngleGuidesAndSnapPoints();
// 스침 강조 — 쉴 때 · 명령 안 고르기 단계 모두(H5)
if (selectingActor()) {
const closestEntityInfo = findClosestEntity(
screenCanvasDrawController.targetToWorld(newScreenMouseLocation),
getPickableEntities()
);
if (closestEntityInfo.distance < pickRadius()) {
setHighlightedEntityIds([closestEntityInfo.entity.id]);
} else {
setHighlightedEntityIds([]);
}
} else if (getHighlightedEntityIds().length) {
setHighlightedEntityIds([]);
}
}
public handleMouseOut() {
setShouldDrawCursor(false);
}
/**
* Change the zoom level of screen space
* @param evt
*/
public handleMouseWheel(evt: WheelEvent) {
// 확대는 도면만 — 트랙패드 핀치(ctrl+휠)가 브라우저 전체를 키우던 것을 막는다.
evt.preventDefault();
const zoom = wheelZoom(evt);
if (zoom) getScreenCanvasDrawController().zoomScreen(zoom.delta, zoom.exponent);
}
public handleMouseDown(evt: MouseEvent) {
noteShift(evt);
if (evt.button === MouseButton.Middle) {
evt.preventDefault(); // 자동 스크롤로 부모 페이지가 같이 굴러가던 것
// 휠 두 번 = 범위 줌(오토캐드)
if (isMiddleDouble(this.getCanvasPoint(evt))) {
setPanStartLocation(null);
zoomExtents();
return;
}
setPanStartLocation(this.getCanvasPoint(evt));
return;
}
if (evt.button !== MouseButton.Left) return;
if ((evt.target as HTMLElement | null)?.closest('.controls')) return;
if (isViewOnly()) {
// 미리보기 — 왼쪽 끌기는 선택 상자 대신 화면 옮기기.
evt.preventDefault();
setPanStartLocation(this.getCanvasPoint(evt));
return;
}
// AutoCAD처럼 누른 자리에서 사각형이 시작되도록 고르기(쉼 · 명령 안 고르기 단계)에만 첫 점을 미리 보낸다.
// 다른 물음은 예전처럼 놓을 때 한 점을 받는다 (끌다가 점이 두 개 찍히지 않게).
if (!selectingActor()) return;
this.leftPressLocation = this.getCanvasPoint(evt);
this.sendMouseClick(evt);
}
private getCanvasPoint(evt: MouseEvent): Point {
const bounds = getCanvas()?.getBoundingClientRect();
return new Point(
evt.clientX - (bounds?.left ?? 0),
(bounds?.bottom ?? getScreenCanvasDrawController().getCanvasSize().y) - evt.clientY
);
}
/**
* Returns a distance to pan the screen when a directional arrow is pressed
* Offset is based on shift key being pressed (larger offset)
* and zoom level
* @private
*/
private getScreenPanStep(
direction: 'up' | 'right' | 'down' | 'left',
shiftPressed: boolean
): Point {
const screenOffset = getScreenCanvasDrawController().getScreenOffset();
const screenZoom = getScreenCanvasDrawController().getScreenScale();
let step = 20;
if (shiftPressed) {
step = 100;
}
step *= screenZoom;
switch (direction) {
case 'up':
return new Point(screenOffset.x, screenOffset.y - step);
case 'right':
return new Point(screenOffset.x - step, screenOffset.y);
case 'down':
return new Point(screenOffset.x, screenOffset.y + step);
case 'left':
return new Point(screenOffset.x + step, screenOffset.y);
}
}
public handleKeyStroke(evt: KeyboardEvent) {
const target = evt.target as HTMLElement | null;
if (target !== this.ime.element && target?.closest('input, textarea, select')) {
return;
}
const shortcut = ctrlShortcut(evt);
const cadCommand = cadCtrlCommand(evt);
// 한글 조합 중 — 단축키가 먹지 않게 IME 에 넘김(Ctrl 단축키는 조합 중에도 먹음)
if (isImeKey(evt) && !shortcut && !cadCommand) return;
if (!['Shift', 'Control', 'Alt', 'Meta'].includes(evt.key)) notice(null); // 알림 줄은 다음 키까지
console.log(`key pressed: ${evt.key}`);
if (evt.key === 'F12') {
// F12 => open developer tools
return;
}
if (evt.key === 'F5') {
// F5 => reload the page
return;
}
if (evt.key === 'F11') {
// F11 => toggle fullscreen
// ponytail: AutoCAD는 F11이 객체 스냅 추적이지만 브라우저 전체화면이 우선이다.
// 스냅 추적은 상태막대 버튼으로 켜고 끈다.
return;
}
// 제도 보조 토글 (AutoCAD 상태막대 기능키)
if (evt.key === 'F3') {
evt.preventDefault();
setSnapEnabled(!getSnapEnabled());
return;
}
if (evt.key === 'F7') {
evt.preventDefault();
setGridEnabled(!getGridEnabled());
return;
}
if (evt.key === 'F8') {
evt.preventDefault();
setAngleStep(getAngleStep() === 90 ? 0 : 90);
return;
}
if (evt.key === 'F10') {
evt.preventDefault();
setAngleStep(getAngleStep() === 45 ? 0 : 45);
return;
}
if (evt.key === 'Tab') {
// 쉼 + 친 글 = 명령 후보 돌림 · 점 단계(기준점 있음) = 동적 입력 칸 넘김 · 그 밖 = 브라우저 초점 이동
if (isIdle() && this.text) {
evt.preventDefault();
this.cycleCandidate(1);
return;
}
if (!dynamicInputApplies()) return;
evt.preventDefault();
const isNumber = NUMBER_REGEXP.test(this.text);
if (this.text && !isNumber) return; // 숫자 아닌 글(@x,y 등)은 그대로 둠
tabDynamicInput(isNumber ? Number.parseFloat(this.text) : null);
this.text = '';
return;
}
if (cadCommand) {
// Ctrl+C · X · Shift+C · Shift+V · 1 — 오토캐드 클립보드 · 특성
evt.preventDefault();
runCommandInput(cadCommand);
return;
}
if (evt.ctrlKey && evt.code === 'KeyV') {
// 막지 않음 — 브라우저가 `paste` 를 쏘고 `integration/dxf-clip-paste.ts` 가 받음(한글 자판도 code 로)
return;
}
evt.preventDefault();
evt.stopPropagation();
if (shortcut === 'undo') {
// User wants to undo the last action
this.handleUndo(evt);
} else if (shortcut === 'redo') {
// User wants to redo the last action
this.handleRedo(evt);
} else if (shortcut === 'save') {
// 부모 페이지가 저장을 맡은 화면(M02 양식)만 — B07 은 예전처럼 아무 일 없음
if (isHostSave()) requestHostSave();
} else if (shortcut === 'selectAll') {
// User wants to select everything
setSelectedEntityIds(getPickableEntities().map((entity) => entity.id));
} else if (evt.key === 'Backspace') {
// Remove the last character from the input field
evt.preventDefault();
this.text = this.text.slice(0, this.text.length - 1);
this.browsing = null;
} else if (evt.key === 'Delete') {
// User wants to delete the current selection
evt.preventDefault();
getActiveToolActor()?.send({
type: ActorEvent.DELETE,
});
} else if (evt.key === 'Escape') {
// User wants to cancel the current action
this.handleEscapeKey();
} else if (evt.key === 'Enter') {
// User wants to submit the input or submit the action
this.handleEnterKey(true);
this.ime.sync(activeToolWantsIme());
} else if (evt.key === ' ' && !activeToolWantsFreeText()) {
// Space = Enter(오토캐드) · 글 단계는 아래 띄어쓰기 · 수정키 · 길게 눌러 반복은 무시
if (isPlainSpace(evt)) {
this.handleEnterKey(true);
this.ime.sync(activeToolWantsIme());
}
} else if ((evt.key === 'ArrowUp' || evt.key === 'ArrowDown') && !evt.shiftKey) {
// ↑↓ = 기록 · 최근 값 · 후보(오토캐드) — 화면 옮김은 Shift+↑↓ · ← →
this.recall(evt.key === 'ArrowUp' ? -1 : 1);
} else if (evt.key === 'ArrowDown') {
// Move the screen down
getScreenCanvasDrawController().setScreenOffset(this.getScreenPanStep('down', evt.shiftKey));
} else if (evt.key === 'ArrowUp') {
// Move the screen up
getScreenCanvasDrawController().setScreenOffset(this.getScreenPanStep('up', evt.shiftKey));
} else if (evt.key === 'ArrowLeft') {
// Move the screen left
getScreenCanvasDrawController().setScreenOffset(this.getScreenPanStep('left', evt.shiftKey));
} else if (evt.key === 'ArrowRight') {
// Move the screen right
getScreenCanvasDrawController().setScreenOffset(this.getScreenPanStep('right', evt.shiftKey));
} else if (evt.key?.length === 1 && !evt.ctrlKey && !evt.altKey && !evt.metaKey) {
// +·-는 확대·축소 단축키로 쓰지 않는다 — 음수 좌표(-100,-50)의 첫 글자를
// 먹어 버렸다. 줌은 휠·뷰 막대·ZOOMIN/ZOOMOUT 명령으로 한다.
// User entered a single character => add to input field text
// 글 단계(TEXT·MTEXT)는 친 그대로 — 명령 입력일 때만 대문자로 바꾼다(보이는 글만 · 맞추기는 prompt.ts).
// Ctrl · Alt · ⌘ 와 함께 누른 글자는 쌓지 않음(Ctrl+C → 원이 되던 것).
this.text += activeToolWantsFreeText() ? evt.key : evt.key.toUpperCase();
this.browsing = null;
}
}
/** ↑↓ — 후보 보일 때 = 후보 돌림 · 아니면 기록(쉼 = 친 명령 · 명령 중 = 그 물음 최근 값) */
private recall(dir: -1 | 1) {
const candidatesShown = isIdle() && !!this.text && !!commandCandidate(this.text, 0);
if (this.browsing === 'candidates' || (this.browsing === null && candidatesShown)) {
this.cycleCandidate(dir);
return;
}
const value = recallInput(dir, this.text);
if (value === null) return;
this.text = value;
this.browsing = 'history';
}
/** 명령 후보 돌림 — 처음 친 글로 시작하는 명령 이름을 차례로 친 글 자리에 */
private cycleCandidate(dir: -1 | 1) {
if (this.browsing !== 'candidates') {
this.candidateBase = this.text;
this.candidateIndex = dir > 0 ? -1 : 0;
}
const name = commandCandidate(this.candidateBase, this.candidateIndex + dir);
if (!name) return;
this.candidateIndex += dir;
this.text = name;
this.browsing = 'candidates';
}
/** Esc 한 번 = 명령 끝(오토캐드) — 친 글 · 조합 · 각도 잠금 · 한 번 스냅 · 덧물음도 함께 풂 */
public handleEscapeKey() {
this.text = '';
this.browsing = null;
this.ime.composing = '';
const boxing =
this.isSelectToolActive() &&
getActiveToolActor()?.getSnapshot()?.value === SelectState.WAITING_FOR_SECOND_SELECT_POINT;
if (boxing) {
getActiveToolActor()?.send({ type: ActorEvent.ESC }); // 상자 취소
} else if (isIdle()) {
setSelectedEntityIds([]); // 쉴 때 = 고름 풂
} else {
cancelActiveCommand();
}
releaseOnePoint();
setSnapOverride(null);
closeSubPrompt();
logLine('*취소*');
}
/** 커서 옆에 띄울 명령 후보 (이름·별칭 접두사 일치) — 쉴 때만 */
private getCommandSuggestions(): string[] {
if (this.text === '' || !isIdle()) {
return [];
}
const picking = this.browsing === 'candidates';
const candidates = matchCommandPrefixes(picking ? this.candidateBase : this.text);
const picked = picking ? candidates.findIndex((command) => command.id === this.text) : -1;
return candidates
.slice(0, 6)
.map((command, index) => `${index === picked ? '▸ ' : ''}${describeCommand(command)}`);
}
/**
* 친 글 제출(Enter · Space · 우클릭 · 명령행) — 해석은 `prompt-input.routeTyped` 한 곳.
* @param _repeatIfIdle 옛 꼴 — 빈 입력 + 쉼이면 늘 마지막 명령 반복(우클릭 포함)
*/
public handleEnterKey(_repeatIfIdle = false) {
const text = this.text;
this.text = '';
this.browsing = null;
pushInput(text); // ↑↓ 기록(지금 물음 묶음 — 해석 전에)
routeTyped(text);
}
/** 점 하나를 도구에 보냄(덧물음 먼저) — 각도 고정 · 한 번 스냅은 이 한 점으로 끝 */
private sendPointEvent(event: PointTextEvent | MouseClickEvent) {
sendPoint(event);
}
public handleUndo(evt: KeyboardEvent) {
evt.preventDefault();
undoCommand();
}
public handleRedo(evt: KeyboardEvent) {
evt.preventDefault();
redoCommand();
}
}