task(H5): polygon area calculation - shoelace polygonArea, formatArea with quadratic scaling, measure-area tool, properties panel area display

frontend/src/plugins/builtin/core-measure/index.ts

@@ -6,7 +6,8 @@
  * Distanzformatierung via bestehendem formatDistance(unit, scaleFactor).
  */
 import type { PluginV2, ToolExtensionV2, FullToolContext } from '../../types';
-import { formatDistance } from '../../../utils/format';
+import { formatDistance, formatArea } from '../../../utils/format';
+import { polygonArea } from '../../../tools/modification/geometry';
 
 type MeasurePhase = 0 | 1; // 0=wartet auf Start, 1=wartet auf Ende
 let measureStart: import('../../../tools/modification/geometry').Pt | null = null;
@@ -46,6 +47,70 @@ export const measureTool: ToolExtensionV2 = {
 };
 
 /** V2-Plugin: Messwerkzeuge. */
+// ─────────────────────────────────────────────────────────────
+// Task H5: measure-area — Polygon-Fläche messen (Status-only).
+// Klick: Punkt hinzufügen; ENTER: committet Fläche ab 3 Punkten;
+// ESC/Rechtsklick: Abbruch. Kein Element-Commit (wie measure).
+// ─────────────────────────────────────────────────────────────
+let areaPts: Array<{ x: number; y: number }> = [];
+
+export const measureAreaTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'measure-area',
+    label: 'Fläche messen',
+    icon: '\u25a9',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Polygon-Fläche messen: Punkte klicken, ENTER schließt ab',
+  },
+  optionsSchema: [
+    { key: 'unit', label: 'Einheit', type: 'select', options: [
+      { value: 'mm', label: 'mm' }, { value: 'cm', label: 'cm' }, { value: 'm', label: 'm' },
+    ] },
+    { key: 'scaleFactor', label: 'Maßstab (Welt→mm)', type: 'number' },
+  ],
+  handlers: {
+    down(e, ctx) {
+      areaPts.push({ x: e.world.x, y: e.world.y });
+      if (areaPts.length === 1) {
+        ctx.setStatus(`Flächenmessung gestartet (1 Punkt) — weitere Punkte klicken, ENTER schließt ab`);
+      } else if (areaPts.length >= 3) {
+        const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+        const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+        ctx.setStatus(`Fläche: ${formatArea(polygonArea(areaPts), unit as never, scale)} — weiter klicken oder ENTER`);
+      } else {
+        ctx.setStatus(`${areaPts.length} Punkte — mindestens 3 benötigt, weitere Punkte klicken`);
+      }
+    },
+    move(e, ctx) {
+      if (areaPts.length < 2) return;
+      const probe = [...areaPts, { x: e.world.x, y: e.world.y }];
+      if (probe.length < 3) return;
+      const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+      const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+      ctx.setStatus(`Fläche: ${formatArea(polygonArea(probe), unit as never, scale)}`);
+    },
+    key(k, ctx) {
+      if (k.key === 'Enter' || k.key === 'ENTER') {
+        if (areaPts.length >= 3) {
+          const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+          const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+          ctx.setStatus(`Flächenmessung: ${formatArea(polygonArea(areaPts), unit as never, scale)} (${areaPts.length} Punkte)`);
+          areaPts = [];
+        } else {
+          ctx.setStatus(`Flächenmessung benötigt mindestens 3 Punkte (aktuell ${areaPts.length})`);
+        }
+        return true; // ENTER konsumiert
+      }
+      return false;
+    },
+    cancel(ctx) {
+      areaPts = [];
+      ctx.setStatus('Flächenmessung abgebrochen');
+    },
+  },
+};
+
 export const coreMeasurePlugin: PluginV2 = {
   manifest: {
     id: 'core-measure',
@@ -56,5 +121,5 @@ export const coreMeasurePlugin: PluginV2 = {
     category: 'tools',
     enabledByDefault: true,
   },
-  tools: [measureTool],
+  tools: [measureTool, measureAreaTool],
 };