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

This commit is contained in:
Agent Zero
2026-08-29 03:09:35 +02:00
parent 21e18b81d8
commit b210ccc5b8
5 changed files with 254 additions and 3 deletions
+9 -1
View File
@@ -1,4 +1,6 @@
import React, { useState, useEffect } from 'react';
import { polygonArea } from '../tools/modification/geometry';
import { formatArea } from '../utils/format';
import type { PropertiesPanelProps } from '../types/ui.types';
import { formatInputValue, parseDistance, type UnitType } from '../utils/format';
@@ -69,7 +71,13 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
<>
<div className="panel-section">
<div className="panel-section-title">
<span>Auswahl {el ? `· ${el.type}` : ''}</span>
<span>Auswahl {el ? `· ${el.type}
{((el.type === 'polygon' || el.type === 'polyline') && ((el.properties.points as Array<{ x: number; y: number }> | undefined)?.length ?? 0) >= 3) && (
<div className="prop-row">
<label className="prop-label">Fläche</label>
<span className="prop-value">{formatArea(polygonArea(el.properties.points as Array<{ x: number; y: number }>), unit, scaleFactor)}</span>
</div>
)}` : ''}</span>
<div style={{ display: 'flex', gap: '4px' }}>
{onDelete && el && (
<button