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

/**
 * 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);
  });
});