Files
web-cad/frontend/tests/gripEditing.test.ts
T

245 lines
9.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* Task D9 GripEditing: Vertex-/Center-Grips im select-Tool.
*
* getGripPoints: element-spezifische Griff-Punkte (line=Endpunkte,
* polyline=Vertices, circle/arc=Zentrum, rect=BBox-Ecken).
* Drag eines Vertex-Grips verschiebt NUR diesen Punkt in einer
* Transaktion (undo-fähig); BBox-Skalierung (C3fin) bleibt parallel
* für Elemente ohne Vertex-Grips (rect u.a.).
*/
import { describe, it, expect, beforeEach } from 'vitest';
import { selectTool, getGripPoints } from '../src/plugins/builtin/core-modify';
import { CADDocument } from '../src/kernel/document/CADDocument';
import { createInMemoryDoc } from './helpers/inMemoryDoc';
import type { CADElement, Pt } from '../src/types/cad.types';
function mkCtx() {
const { ydoc } = createInMemoryDoc();
const doc = new CADDocument(ydoc);
const selectedIds = new Set<string>();
const previews: (CADElement | null)[] = [];
const statuses: string[] = [];
const ctx: any = {
doc,
options: {},
setStatus: (m: string) => statuses.push(m),
setPreview: (el: CADElement | null) => previews.push(el),
selection: {
getIds: () => Array.from(selectedIds),
setIds: (ids: string[]) => {
selectedIds.clear();
for (const id of ids) selectedIds.add(id);
},
hitTest: (x: number, y: number, tol: number) => {
// Einfacher Hit-Test: trifft wenn ein Element-BBox den Punkt enthaelt
for (const el of doc.getAllElements()) {
const p = el.properties as Record<string, unknown>;
if (p.x1 !== undefined) {
const minX = Math.min(p.x1 as number, p.x2 as number);
const maxX = Math.max(p.x1 as number, p.x2 as number);
const minY = Math.min(p.y1 as number, p.y2 as number);
const maxY = Math.max(p.y1 as number, p.y2 as number);
if (x >= minX - tol && x <= maxX + tol && y >= minY - tol && y <= maxY + tol) return el;
}
if (x >= el.x - el.width / 2 - tol && x <= el.x + el.width / 2 + tol &&
y >= el.y - el.height / 2 - tol && y <= el.y + el.height / 2 + tol) return el;
}
return null;
},
},
};
return { ctx, doc, selectedIds, previews, statuses };
}
function pe(x: number, y: number, mods: { shift?: boolean; ctrl?: boolean } = {}): { world: Pt; shift: boolean; ctrl: boolean } {
return { world: { x, y }, shift: mods.shift ?? false, ctrl: mods.ctrl ?? false } as never;
}
beforeEach(() => {
selectTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
});
// ─── getGripPoints (reine Funktion) ────────────────────────
describe('D9: getGripPoints', () => {
it('line: beide Endpunkte als Grips', () => {
const el = {
id: 'l1', type: 'line', layerId: 'l', x: 50, y: 50, width: 100, height: 0,
properties: { x1: 0, y1: 50, x2: 100, y2: 50 },
} as unknown as CADElement;
const grips = getGripPoints(el);
expect(grips.map((g) => g.kind)).toEqual(['vertex', 'vertex']);
expect(grips[0].point).toEqual({ x: 0, y: 50 });
expect(grips[1].point).toEqual({ x: 100, y: 50 });
});
it('polyline: alle Vertices als Grips', () => {
const el = {
id: 'p1', type: 'polyline', layerId: 'l', x: 50, y: 0, width: 100, height: 100,
properties: { points: [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }] },
} as unknown as CADElement;
const grips = getGripPoints(el);
expect(grips.length).toBe(3);
expect(grips.every((g) => g.kind === 'vertex')).toBe(true);
expect(grips[2].point).toEqual({ x: 100, y: 100 });
});
it('circle: Zentrum als Center-Grip', () => {
const el = {
id: 'c1', type: 'circle', layerId: 'l', x: 30, y: 40, width: 20, height: 20,
properties: { radius: 10 },
} as unknown as CADElement;
const grips = getGripPoints(el);
expect(grips).toHaveLength(1);
expect(grips[0].kind).toBe('center');
expect(grips[0].point).toEqual({ x: 30, y: 40 });
});
it('rect: BBox-Ecken als Corner-Grips (C3fin bleibt)', () => {
const el = {
id: 'r1', type: 'rect', layerId: 'l', x: 50, y: 25, width: 100, height: 50,
properties: {},
} as unknown as CADElement;
const grips = getGripPoints(el);
expect(grips.length).toBe(4);
expect(grips.every((g) => g.kind === 'corner')).toBe(true);
expect(grips[0].point).toEqual({ x: 0, y: 0 });
expect(grips[2].point).toEqual({ x: 100, y: 50 });
});
it('Grips tragen index fuer Drag-Zuordnung', () => {
const el = {
id: 'p1', type: 'polyline', layerId: 'l', x: 0, y: 0, width: 10, height: 10,
properties: { points: [{ x: 0, y: 0 }, { x: 10, y: 10 }] },
} as unknown as CADElement;
const grips = getGripPoints(el);
expect(grips[0].index).toBe(0);
expect(grips[1].index).toBe(1);
});
});
// ─── Drag-Interaktion: Vertex-Zug (undo-faehig) ─────────────
describe('D9: Vertex-Drag im selectTool', () => {
it('Linien-Endpunkt ziehen verschiebt NUR diesen Punkt (1 Undo)', () => {
const { ctx, doc, selectedIds } = mkCtx();
const line = {
id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
} as unknown as CADElement;
doc.addElement(line);
selectedIds.add('l1');
// Klick auf Endpunkt (100,0) startet Vertex-Drag
selectTool.handlers.down!(pe(100, 0), ctx);
selectTool.handlers.up!(pe(120, 30), ctx);
const updated = doc.getElement('l1')!;
expect(updated.properties.x2).toBe(120);
expect(updated.properties.y2).toBe(30);
// Anderer Endpunkt unveraendert
expect(updated.properties.x1).toBe(0);
expect(updated.properties.y1).toBe(0);
// Undo stellt her
doc.undo();
const restored = doc.getElement('l1')!;
expect(restored.properties.x2).toBe(100);
expect(restored.properties.y2).toBe(0);
});
it('Polyline-Vertex ziehen aktualisiert nur diesen Vertex', () => {
const { ctx, doc, selectedIds } = mkCtx();
const poly = {
id: 'p1', type: 'polyline', layerId: 'l', x: 50, y: 50, width: 100, height: 100,
properties: { points: [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }] },
} as unknown as CADElement;
doc.addElement(poly);
selectedIds.add('p1');
// Mittleren Vertex (100,0) greifen und auf (100,50) ziehen
selectTool.handlers.down!(pe(100, 0), ctx);
selectTool.handlers.up!(pe(100, 50), ctx);
const pts = doc.getElement('p1')!.properties.points as Pt[];
expect(pts[1]).toEqual({ x: 100, y: 50 });
expect(pts[0]).toEqual({ x: 0, y: 0 });
expect(pts[2]).toEqual({ x: 100, y: 100 });
});
it('Kreis-Zentrum ziehen verschiebt x/y (Radius bleibt)', () => {
const { ctx, doc, selectedIds } = mkCtx();
const circle = {
id: 'c1', type: 'circle', layerId: 'l', x: 30, y: 40, width: 20, height: 20,
properties: { radius: 10 },
} as unknown as CADElement;
doc.addElement(circle);
selectedIds.add('c1');
selectTool.handlers.down!(pe(30, 40), ctx);
selectTool.handlers.up!(pe(60, 80), ctx);
const updated = doc.getElement('c1')!;
expect(updated.x).toBe(60);
expect(updated.y).toBe(80);
expect(updated.properties.radius).toBe(10);
});
it('BBox-Corner-Drag bei rect funktioniert weiterhin (Skalierung)', () => {
const { ctx, doc, selectedIds } = mkCtx();
const rect = {
id: 'r1', type: 'rect', layerId: 'l', x: 50, y: 25, width: 100, height: 50,
properties: {},
} as unknown as CADElement;
doc.addElement(rect);
selectedIds.add('r1');
// Ecke unten-rechts (100,50) greifen und auf (150,75) ziehen
selectTool.handlers.down!(pe(100, 50), ctx);
selectTool.handlers.up!(pe(150, 75), ctx);
const updated = doc.getElement('r1')!;
expect(updated.width).toBeCloseTo(150, 0);
expect(updated.height).toBeCloseTo(75, 0);
});
it('Vertex-Grip gewinnt gegen BBox-Corner bei Ueberlappung (line-Endpunkt am BBox-Rand)', () => {
// line (0,0)-(100,0): Endpunkt (0,0) ist AUCH BBox-Ecke.
// Der Drag muss als Vertex (Punkt verschieben) wirken, nicht als Scale.
const { ctx, doc, selectedIds } = mkCtx();
const line = {
id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
} as unknown as CADElement;
doc.addElement(line);
selectedIds.add('l1');
selectTool.handlers.down!(pe(0, 0), ctx);
selectTool.handlers.up!(pe(-30, -20), ctx);
const updated = doc.getElement('l1')!;
// x1/y1 verschoben, x2 unveraendert → Vertex-Drag, kein Scale
expect(updated.properties.x1).toBe(-30);
expect(updated.properties.y1).toBe(-20);
expect(updated.properties.x2).toBe(100);
});
it('Preview bei Vertex-Drag zeigt aktualisiertes Element', () => {
const { ctx, doc, selectedIds, previews } = mkCtx();
const line = {
id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
} as unknown as CADElement;
doc.addElement(line);
selectedIds.add('l1');
selectTool.handlers.down!(pe(100, 0), ctx);
selectTool.handlers.move!(pe(90, 40), ctx);
expect(previews.length).toBeGreaterThanOrEqual(1);
const last = previews[previews.length - 1];
expect(last).not.toBeNull();
const lastProps = last!.properties as Record<string, unknown>;
expect(lastProps.x2).toBe(90);
expect(lastProps.y2).toBe(40);
});
});