karim/DOSSIER-STANDALONE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Werkzeuge: Bogen-Werkzeug (arcCommand, 3-Klick CCW) + Toolbar/Icon/i18n verdrahtet

Browse Source
This commit is contained in:
Karim
2026-07-05 15:44:05 +02:00
parent 5130a050ff
commit bd2b12bfb7
8 changed files with 207 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1
View File
@@ -213,6 +213,7 @@ const TOOL_COMMAND: Partial<Record<ToolId, string>> = {
polyline: "polyline",
rect: "rect",
circle: "circle",
arc: "arc",
};
/** Befehlsname für ein gekoppeltes Werkzeug (oder null, wenn keiner). */
function coupledCommandFor(id: ToolId): string | null {
src/commands/cmds/arc.ts
+166
View File
@@ -0,0 +1,166 @@
// Arc — Mittelpunkt + Startpunkt + Endpunkt. Schritte:
// 1) „Mittelpunkt:" → Punkt
// 2) „Startpunkt:" → Punkt (setzt Radius r = |P1−Center| UND Startwinkel a0)
// 3) „Endpunkt:" → Punkt (setzt Endwinkel a1; Radius bleibt) → commit
//
// Der Bogen läuft CCW von a0 nach a1 (wie DXF-ARC und das `{shape:"arc"}`-
// Rendering in PlanView). Der Endpunkt wird nur für seinen WINKEL genutzt (auf
// den Kreis mit Radius r projiziert). In generatePlan/PlanView als glatter
// SVG-Bogen (`drawingArc`) gerendert.
import type { Drawing2D } from "../../model/types";
import { uniqueId } from "../../tools/types";
import type {
Command,
CommandContext,
CommandResult,
CommandState,
DraftShape,
Project,
ToolDraft,
Vec2,
} from "../types";
const EPS = 1e-6;
interface ArcCenter extends CommandState {
phase: "center";
}
interface ArcStart extends CommandState {
phase: "start";
center: Vec2;
cursor: Vec2 | null;
}
interface ArcEnd extends CommandState {
phase: "end";
center: Vec2;
r: number;
a0: number;
cursor: Vec2 | null;
}
type ArcState = ArcCenter | ArcStart | ArcEnd;
const dist = (a: Vec2, b: Vec2): number => Math.hypot(b.x - a.x, b.y - a.y);
const angle = (c: Vec2, p: Vec2): number => Math.atan2(p.y - c.y, p.x - c.x);
/** CCW-Spanne von a0 nach a1, normiert auf (0, 2π]. */
function sweepOf(a0: number, a1: number): number {
const TAU = Math.PI * 2;
const s = ((a1 - a0) % TAU + TAU) % TAU;
return s < EPS ? TAU : s;
}
/** Punkte eines Bogens (CCW a0→a1) für die Vorschau. */
function arcPts(center: Vec2, r: number, a0: number, a1: number): Vec2[] {
const sweep = sweepOf(a0, a1);
const N = Math.max(2, Math.ceil(sweep / (Math.PI / 32)));
const pts: Vec2[] = [];
for (let i = 0; i <= N; i++) {
const t = a0 + (sweep * i) / N;
pts.push({ x: center.x + r * Math.cos(t), y: center.y + r * Math.sin(t) });
}
return pts;
}
/** Punkte einer vollen Kreis-Approximation (Radius-Vorschau im „start"-Schritt). */
function circlePts(center: Vec2, r: number): Vec2[] {
const N = 48;
const pts: Vec2[] = [];
for (let i = 0; i < N; i++) {
const t = (i / N) * Math.PI * 2;
pts.push({ x: center.x + r * Math.cos(t), y: center.y + r * Math.sin(t) });
}
return pts;
}
/** Vorschau (offener Bogen) + HUD (Spanne in Grad). */
function arcDraft(center: Vec2, r: number, a0: number, a1: number, at: Vec2 | null): ToolDraft {
if (r < EPS) return { preview: [], vertices: [center] };
const preview: DraftShape[] = [{ kind: "poly", pts: arcPts(center, r, a0, a1), closed: false }];
const draft: ToolDraft = { preview, vertices: [center] };
if (at) {
const deg = (sweepOf(a0, a1) * 180) / Math.PI;
draft.hud = { at, text: `${deg.toFixed(0)}°` };
}
return draft;
}
function appendArc(p: Project, center: Vec2, r: number, a0: number, a1: number, ctx: CommandContext): Project {
if (r < EPS) return p;
const d: Drawing2D = {
id: uniqueId("dr2d"),
type: "drawing2d",
levelId: ctx.level.id,
categoryCode: ctx.defaultCategoryCode,
geom: { shape: "arc", center, r, a0, a1 },
};
return { ...p, drawings2d: [...p.drawings2d, d] };
}
const idle = (): [CommandState, CommandResult] => [
{ phase: "center", lastPoint: null },
{ draft: null, done: true },
];
export const arcCommand: Command = {
name: "arc",
labelKey: "cmd.arc.label",
prompt: (s) => {
const phase = (s as ArcState).phase;
return phase === "start" ? "cmd.arc.start" : phase === "end" ? "cmd.arc.end" : "cmd.arc.center";
},
accepts: () => ["point"],
options: () => [],
init: (): ArcCenter => ({ phase: "center", lastPoint: null }),
onInput: (state, input, ctx): [CommandState, CommandResult] => {
const s = state as ArcState;
if (input.kind !== "point") return [s, { draft: null }];
const pt = input.point;
if (s.phase === "center") {
const ns: ArcStart = { phase: "start", center: pt, cursor: pt, lastPoint: pt };
return [ns, { draft: { preview: [], vertices: [pt] } }];
}
if (s.phase === "start") {
const r = dist(s.center, pt);
if (r < EPS) return [s, { draft: null }];
const a0 = angle(s.center, pt);
const ns: ArcEnd = { phase: "end", center: s.center, r, a0, cursor: pt, lastPoint: pt };
return [ns, { draft: arcDraft(s.center, r, a0, a0, pt) }];
}
// Endpunkt: Endwinkel setzen, Bogen committen.
const a1 = angle(s.center, pt);
const { center, r, a0 } = s;
return [
{ phase: "center", lastPoint: null },
{ draft: null, done: true, commit: (p) => appendArc(p, center, r, a0, a1, ctx) },
];
},
onMove: (state, point): [CommandState, CommandResult] => {
const s = state as ArcState;
if (s.phase === "start") {
const r = dist(s.center, point);
const ns: ArcStart = { ...s, cursor: point };
return [
ns,
{
draft: {
preview: [{ kind: "poly", pts: circlePts(s.center, r), closed: true }],
vertices: [s.center],
hud: { at: point, text: `r ${r.toFixed(2)} m` },
},
},
];
}
if (s.phase === "end") {
const a1 = angle(s.center, point);
const ns: ArcEnd = { ...s, cursor: point };
return [ns, { draft: arcDraft(s.center, s.r, s.a0, a1, point) }];
}
return [s, { draft: null }];
},
onConfirm: (): [CommandState, CommandResult] => idle(),
onCancel: (): [CommandState, CommandResult] => idle(),
};
src/commands/registry.ts
+4
View File
@@ -13,6 +13,7 @@ import { stairCommand } from "./cmds/stair";
import { roomCommand } from "./cmds/room";
import { rectCommand } from "./cmds/rect";
import { circleCommand } from "./cmds/circle";
import { arcCommand } from "./cmds/arc";
import { moveCommand } from "./cmds/move";
import { mirrorCommand } from "./cmds/mirror";
import { joinCommand } from "./cmds/join";
@@ -35,6 +36,7 @@ export const COMMANDS: Record<string, Command> = {
polyline: polylineCommand,
rect: rectCommand,
circle: circleCommand,
arc: arcCommand,
move: moveCommand,
mirror: mirrorCommand,
join: joinCommand,
@@ -67,6 +69,8 @@ export const ALIASES: Record<string, string> = {
pl: "polyline",
rec: "rect",
c: "circle",
a: "arc",
bogen: "arc",
m: "move",
s: "mirror",
spiegeln: "mirror",
src/i18n/de.ts
+6
View File
@@ -118,6 +118,8 @@ export const de = {
"tool.rect": "Rechteck",
"tool.circle": "Kreis",
"tool.circle.hint": "Kreis: Mittelpunkt setzen, dann Radius",
"tool.arc": "Bogen",
"tool.arc.hint": "Bogen: Mittelpunkt, Startpunkt, dann Endpunkt (CCW)",
"tool.select.hint": "Auswahl — Elemente klicken/aufziehen",
"tool.window.hint": "Fenster: Wand wählen, dann Position setzen",
"tool.door.hint": "Tür: Wand wählen, dann Position setzen",
@@ -709,6 +711,10 @@ export const de = {
"cmd.circle.label": "Kreis",
"cmd.circle.center": "Mittelpunkt:",
"cmd.circle.radius": "Radius:",
"cmd.arc.label": "Bogen",
"cmd.arc.center": "Mittelpunkt:",
"cmd.arc.start": "Startpunkt (Radius + Startwinkel):",
"cmd.arc.end": "Endpunkt (Endwinkel):",
// Editierbefehle (Tier 1): Move/Copy/Offset operieren auf der Auswahl.
"cmd.move.label": "Verschieben",
"cmd.move.base": "Basispunkt:",
src/i18n/en.ts
+6
View File
@@ -117,6 +117,8 @@ export const en: Record<TranslationKey, string> = {
"tool.rect": "Rectangle",
"tool.circle": "Circle",
"tool.circle.hint": "Circle: set center, then radius",
"tool.arc": "Arc",
"tool.arc.hint": "Arc: center, start point, then end point (CCW)",
"tool.select.hint": "Select — click/drag elements",
"tool.window.hint": "Window: pick a wall, then set the position",
"tool.door.hint": "Door: pick a wall, then set the position",
@@ -699,6 +701,10 @@ export const en: Record<TranslationKey, string> = {
"cmd.circle.label": "Circle",
"cmd.circle.center": "Center:",
"cmd.circle.radius": "Radius:",
"cmd.arc.label": "Arc",
"cmd.arc.center": "Center:",
"cmd.arc.start": "Start point (radius + start angle):",
"cmd.arc.end": "End point (end angle):",
"cmd.move.label": "Move",
"cmd.move.base": "Base point:",
"cmd.move.target": "Target point:",
src/panels/ToolsPanel.tsx
+7
View File
@@ -118,6 +118,13 @@ function ToolIcon({ id }: { id: ToolId }) {
<circle cx="8" cy="8" r="5.5" />
</svg>
);
case "arc":
// Offener Halbbogen.
return (
<svg {...common}>
<path d="M 2.5 12 A 5.5 5.5 0 0 1 13.5 12" fill="none" />
</svg>
);
default:
return null;
}
src/tools/tools.ts
+15
View File
@@ -541,6 +541,19 @@ const circleTool: Tool = {
onCancel: (s) => [s, { draft: null, done: true }],
};
// Bogen: Platzhalter-Werkzeug, gekoppelt an den `arc`-Befehl (3 Klicks:
// Mitte → Start/Radius → Ende). Wie Kreis nicht floorOnly.
const arcTool: Tool = {
id: "arc",
labelKey: "tool.arc",
hintKey: () => "tool.arc.hint",
init: () => ({ phase: "idle" }),
onClick: (s) => [s, { draft: null }],
onMove: (s) => [s, { draft: null }],
onCommitGesture: (s) => [s, { draft: null, done: true }],
onCancel: (s) => [s, { draft: null, done: true }],
};
// ── Registry ─────────────────────────────────────────────────────────────────
const TOOLS: Record<ToolId, Tool> = {
@@ -555,6 +568,7 @@ const TOOLS: Record<ToolId, Tool> = {
polyline: polylineTool,
rect: rectTool,
circle: circleTool,
arc: arcTool,
};
/** Liefert das Werkzeug zur ID. */
@@ -575,4 +589,5 @@ export const TOOL_ORDER: ToolId[] = [
"polyline",
"rect",
"circle",
"arc",
];
src/tools/types.ts
+2 -1
View File
@@ -19,7 +19,8 @@ export type ToolId =
| "line"
| "polyline"
| "rect"
| "circle";
| "circle"
| "arc";
// ── Snapping ───────────────────────────────────────────────────────────────