Files
Aislo/B07_DesignDetail/openwebcad/src/helpers/grips.ts
T
eomsangdonandClaude Opus 5 ea5ce92725 feat(B07): 표를 객체로 만들어 도면의 표가 진짜 표가 되게 한다
표가 DXF의 표로 나가야 한다(사용자 확정). 지금까지 도면의 표는 선과 문자 뭉치라
내보낼 때 고를 수 있는 길이 하나뿐이었다.

- TableEntity: 열별 폭·행별 높이·칸 문자·병합을 한 객체가 들고 있다. 격자선은 담지
  않고 병합 자리에서 선을 끊는 규칙을 표가 스스로 안다(helpers/table-geometry.ts).
  회전·대칭은 지원하지 않는다 — 표는 축에 붙어 있다.
- 명령: TABLE을 표 객체 생성으로 다시 쓰고 TABLEEDIT(칸 문자)·TABLEROW·TABLECOL·
  TABLEMERGE·TABLEUNMERGE를 더했다. EXPLODE는 표를 선과 문자로 흩는다.
- 그립: 좌측 상단으로 표를 옮기고, 열·행 경계로 폭·높이를 바꾼다.
- 백엔드: 유역 정보표와 횡단 수량 산출표를 표 객체로 낸다. 횡단표는 머리행이 폭
  8등분, 본문이 11열 가중치로 격자가 서로 달라 두 경계를 합친 18열로 만들고 병합으로
  원래 칸을 되살렸다 — 손으로 하던 가로선 끊기가 사라졌다.
- 수량 역추출: 값 Text의 결정적 id로 읽던 것을 칸에 실은 key로 읽도록 옮겼다. 이미
  저장된 도면을 위해 옛 방식을 폴백으로 남겼다.

토적도·종단표는 값이 칸이 아니라 측점 위치에 놓이는 성격이라 이관하지 않았다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-30 15:12:19 +09:00

233 lines
9.0 KiB
TypeScript

/**
* 그립 — 선택한 객체에 붙는 편집점. 집어서 다음 클릭 위치로 옮긴다.
* 형상 필드가 전부 private이라 좌표를 고칠 때는 공개 생성자로 같은 객체를 다시 만들어
* 배열에서 바꿔 끼운다(id는 그대로 둬서 선택·그룹이 유지된다).
* ponytail: 호·해치·이미지·치수는 그립을 만들지 않는다 — 각각 각도·경계·비율·연관 규칙이
* 따로 있어 점 하나를 옮기는 것으로 정의되지 않는다. 필요해지면 그때 붙인다.
*/
import { type Circle, Point, type Polygon, type Segment } from '@flatten-js/core';
import { CircleEntity } from '../entities/CircleEntity';
import type { Entity } from '../entities/Entity';
import { LineEntity } from '../entities/LineEntity';
import { PointEntity } from '../entities/PointEntity';
import { PolyLineEntity } from '../entities/PolyLineEntity';
import { RectangleEntity } from '../entities/RectangleEntity';
import { TableEntity } from '../entities/TableEntity';
import { TextEntity } from '../entities/TextEntity';
import { columnEdges, rowEdges } from './table-geometry';
/** 두 점의 가운데 */
function midpoint(a: Point, b: Point): Point {
return new Point((a.x + b.x) / 2, (a.y + b.y) / 2);
}
export type GripKind = 'vertex' | 'midpoint' | 'center' | 'radius' | 'base' | 'column' | 'row';
export interface Grip {
point: Point;
kind: GripKind;
/** 같은 종류 안에서의 순번 (정점 번호, 세그먼트 번호) */
index: number;
}
/** 새로 만든 객체가 원본의 정체성과 표시 특성을 그대로 물려받게 한다 */
function inherit<T extends Entity>(source: Entity, target: T): T {
target.id = source.id;
target.layerId = source.layerId;
target.lineColor = source.lineColor;
target.lineWidth = source.lineWidth;
target.lineDash = source.lineDash;
target.opacity = source.opacity;
target.groupId = source.groupId;
return target;
}
/** 선으로만 이뤄진 폴리선의 정점 목록. 호가 섞여 있으면 null */
function polylineVertices(entity: PolyLineEntity): Point[] | null {
const children = entity.getEntities();
if (!children.length) return null;
const vertices: Point[] = [];
for (const child of children) {
if (!(child instanceof LineEntity)) return null;
const segment = child.getShape() as Segment;
if (!vertices.length) vertices.push(segment.start);
vertices.push(segment.end);
}
return vertices;
}
function polylineFromVertices(source: Entity, vertices: Point[]): PolyLineEntity | null {
if (vertices.length < 2) return null;
const segments: LineEntity[] = [];
for (let index = 0; index < vertices.length - 1; index += 1) {
const line = new LineEntity(source.layerId, vertices[index], vertices[index + 1]);
line.lineColor = source.lineColor;
line.lineWidth = source.lineWidth;
line.lineDash = source.lineDash;
segments.push(line);
}
return inherit(source, new PolyLineEntity(source.layerId, segments));
}
export function getGrips(entity: Entity): Grip[] {
if (entity instanceof LineEntity) {
const segment = entity.getShape() as Segment;
return [
{ point: segment.start, kind: 'vertex', index: 0 },
{ point: segment.end, kind: 'vertex', index: 1 },
{ point: midpoint(segment.start, segment.end), kind: 'midpoint', index: 0 },
];
}
if (entity instanceof RectangleEntity) {
const polygon = entity.getShape() as Polygon;
return polygon.vertices.map((vertex, index) => ({
point: vertex,
kind: 'vertex' as GripKind,
index,
}));
}
if (entity instanceof CircleEntity) {
const circle = entity.getShape() as Circle;
const { center, r } = circle;
return [
{ point: center, kind: 'center', index: 0 },
{ point: new Point(center.x + r, center.y), kind: 'radius', index: 0 },
{ point: new Point(center.x - r, center.y), kind: 'radius', index: 1 },
{ point: new Point(center.x, center.y + r), kind: 'radius', index: 2 },
{ point: new Point(center.x, center.y - r), kind: 'radius', index: 3 },
];
}
if (entity instanceof PolyLineEntity) {
const vertices = polylineVertices(entity);
if (!vertices) return [];
const grips: Grip[] = vertices.map((point, index) => ({ point, kind: 'vertex', index }));
for (let index = 0; index < vertices.length - 1; index += 1) {
grips.push({
point: midpoint(vertices[index], vertices[index + 1]),
kind: 'midpoint',
index,
});
}
return grips;
}
if (entity instanceof TableEntity) {
// 좌측 상단은 표 전체를 옮기고, 열·행 경계는 폭·높이를 바꾼다
const origin = entity.getOrigin();
const xs = columnEdges(origin.x, entity.getColumnWidths());
const ys = rowEdges(origin.y, entity.getRowHeights());
const grips: Grip[] = [{ point: new Point(xs[0], ys[0]), kind: 'base', index: 0 }];
for (let index = 1; index < xs.length; index += 1) {
grips.push({ point: new Point(xs[index], ys[0]), kind: 'column', index: index - 1 });
}
for (let index = 1; index < ys.length; index += 1) {
grips.push({ point: new Point(xs[0], ys[index]), kind: 'row', index: index - 1 });
}
return grips;
}
if (entity instanceof TextEntity || entity instanceof PointEntity) {
const point = entity.getFirstPoint();
return point ? [{ point, kind: 'base', index: 0 }] : [];
}
return [];
}
/** 그립을 target 위치로 옮긴 결과 객체. 원본은 건드리지 않는다 */
export function applyGrip(entity: Entity, grip: Grip, target: Point): Entity | null {
if (entity instanceof LineEntity) {
const segment = entity.getShape() as Segment;
if (grip.kind === 'midpoint') {
const center = midpoint(segment.start, segment.end);
return moveCopy(entity, target.x - center.x, target.y - center.y);
}
const start = grip.index === 0 ? target : segment.start;
const end = grip.index === 1 ? target : segment.end;
return inherit(entity, new LineEntity(entity.layerId, start, end));
}
if (entity instanceof RectangleEntity) {
const polygon = entity.getShape() as Polygon;
const vertices = polygon.vertices;
// 끈 모서리와 마주 보는 모서리로 새 사각형을 만든다 — 직사각형을 유지한다
const opposite = vertices[(grip.index + 2) % vertices.length];
return inherit(entity, new RectangleEntity(entity.layerId, target, opposite));
}
if (entity instanceof CircleEntity) {
const circle = entity.getShape() as Circle;
if (grip.kind === 'center') {
return moveCopy(entity, target.x - circle.center.x, target.y - circle.center.y);
}
const radius = circle.center.distanceTo(target)[0];
if (radius <= 0) return null;
return inherit(entity, new CircleEntity(entity.layerId, circle.center.clone(), radius));
}
if (entity instanceof PolyLineEntity) {
const vertices = polylineVertices(entity);
if (!vertices) return null;
if (grip.kind === 'midpoint') {
// 세그먼트 중점을 끌면 그 자리에 정점이 하나 생긴다 (다기능 그립)
const inserted = [...vertices];
inserted.splice(grip.index + 1, 0, target);
return polylineFromVertices(entity, inserted);
}
const moved = vertices.map((vertex, index) => (index === grip.index ? target : vertex));
return polylineFromVertices(entity, moved);
}
if (entity instanceof TableEntity) {
const copy = inherit(entity, entity.clone());
const origin = entity.getOrigin();
if (grip.kind === 'base') {
copy.move(target.x - origin.x, target.y - origin.y);
return copy;
}
if (grip.kind === 'column') {
// 끈 경계 왼쪽 열의 폭만 바꾼다 — 오른쪽 열들은 따라 밀린다
const left = columnEdges(origin.x, entity.getColumnWidths())[grip.index];
copy.setColumnWidth(grip.index, target.x - left);
return copy;
}
const top = rowEdges(origin.y, entity.getRowHeights())[grip.index];
copy.setRowHeight(grip.index, top - target.y);
return copy;
}
if (entity instanceof TextEntity || entity instanceof PointEntity) {
const base = entity.getFirstPoint();
if (!base) return null;
return moveCopy(entity, target.x - base.x, target.y - base.y);
}
return null;
}
/** 폴리선 정점 하나를 없앤다 (다기능 그립의 Ctrl+클릭) */
export function removePolylineVertex(entity: Entity, grip: Grip): Entity | null {
if (!(entity instanceof PolyLineEntity) || grip.kind !== 'vertex') return null;
const vertices = polylineVertices(entity);
if (!vertices || vertices.length <= 2) return null;
return polylineFromVertices(
entity,
vertices.filter((_, index) => index !== grip.index)
);
}
function moveCopy(entity: Entity, dx: number, dy: number): Entity {
const copy = inherit(entity, entity.clone());
copy.move(dx, dy);
return copy;
}
/** 클릭 지점에 가장 가까운 그립 (maxDistance는 월드 거리) */
export function findGripAt(
entities: Entity[],
worldPoint: Point,
maxDistance: number
): { entity: Entity; grip: Grip } | null {
let best: { entity: Entity; grip: Grip; distance: number } | null = null;
for (const entity of entities) {
for (const grip of getGrips(entity)) {
const distance = grip.point.distanceTo(worldPoint)[0];
if (distance < maxDistance && (!best || distance < best.distance)) {
best = { entity, grip, distance };
}
}
}
return best ? { entity: best.entity, grip: best.grip } : null;
}