Ansichtsfenster

Viewport-Komponenten

apps/desktop/src/viewport/index.ts exporte Editor2D, View3D, ihre Requisitentypen, verfügbare Werkzeugkennungen und solidsFromProfiles. Beide Komponenten füllen ihre übergeordnete Komponente: Stellen Sie einen Container mit einer Breite und Höhe ungleich Null bereit. Kern-CAD-Entitäten und CAM-Programme sind das gemeinsame Datenmodell.

Der 2D-Editor rendert auf Canvas 2D und behält seinen eigenen Auswahl-, Kamera- und Befehlsverlauf bei. Der 3D-Viewer verwendet Three.js, Orbit- und Transformationssteuerelemente, asynchrone Mesh-Jobs und Programmwiedergabe. Das Rendern eines Pfads oder Volumenkörpers erfolgt unabhängig vom Speichern oder Überprüfen eines Fertigungsvorgangs.

Integrationsvertrag

Editor2DProps erfordert drawing, onChange, und selectedTool. Füttere ausgegebene Zeichnungen zurück in die Requisite. Die Komponente erkennt ihre eigenen ausgegebenen Dokumentobjekte; Durch das externe Ersetzen des Dokuments wird die neue Zeichnung geladen und der Editorstatus zurückgesetzt.

import { createSignal } from "solid-js"
import { Editor2D, type ToolId } from "./viewport/index.ts"

const [drawing, setDrawing] = createSignal(initialDrawing)
const [tool, setTool] = createSignal<ToolId>("select")

<Editor2D drawing={drawing()} onChange={setDrawing} selectedTool={tool()} />

Die Auswahl schließt gesperrte Elemente und Elemente auf gesperrten Ebenen aus. Unsichtbare Elemente und verborgene Ebenen werden vom gerenderten räumlichen Index ausgeschlossen. Neue Entitäten erhalten dokumentenspezifische Kennungen und werden einer sichtbaren, nicht gesperrten Ebene zugewiesen, sofern eine verfügbar ist.

Zeichenwerkzeuge und Gesten

Die Werkzeugregistrierung verfügt über Fabriken für Auswählen, Linie, Rechteck, Kreis, Ellipse, Polylinie, Bogen, Text, Bemaßung, Verschieben, Drehen, Skalieren, Spiegeln, Versatz, Trimmen und Verrunden. AVAILABLE_TOOLS wird von diesen registrierten Fabriken abgeleitet. startTool erkennt zusätzlich chamfer durch die Fillet-Tool-Factory, aber Fase wird in diesem Array nicht angekündigt. Verbraucher sollten die tatsächliche Registrierung verwenden, um zu entscheiden, welche Tools aktiviert werden sollen.

• Rad- oder Pinch-Zoom; Ziehen Sie mit der Leertaste, mit der mittleren Maustaste und ziehen Sie mit der rechten Maustaste.
• F passt zur indizierten Zeichnung. Durch Löschen oder Rücktaste wird die entsperrte Auswahl entfernt.
• Cmd/Ctrl+Z macht rückgängig; Cmd/Ctrl+Shift+Z oder Cmd/Ctrl+Y wiederholt.
• Enter legt eine Polylinie fest. Escape wird an das aktive Werkzeug übermittelt, um dessen aktuelle Geste abzubrechen.
• Geben Sie bei aktivem Text vor der Platzierung Zeichen oder die Rücktaste ein. Der Ausgangstext lautet Text.

Zeigerpositionen werden vor dem Werkzeugversand in Weltkoordinaten umgewandelt. Beim Einrasten werden der räumliche Index, geometrische Kandidaten und ein kameraabhängiges Raster kombiniert. Die Auswahltreffertoleranz entspricht acht Bildschirmpixeln. Werkzeugmaschinen erzeugen Befehle und Vorschauen, anstatt Dateien zu schreiben oder die API aufzurufen.

3D-Rendering und Wiedergabe

View3D akzeptiert Zeichnungen, Volumenkörper, optionale Profilextrusion usw cam.Program, rohteilabmessungen und Werkzeugdefinitionen. Es unterstützt Voreinstellungen für die Perspektive, oben, unten, vorne, hinten, links, rechts, isometrisch und vier Ansichten. Die Anzeigemodi sind schattiert, mit Kanten schattiert, Drahtmodell und Röntgen. Beleuchtung, Materialeigenschaften, Schnittabschnitte, Raster, Achsen und Ursprung können über Requisiten konfiguriert werden.

Steuern Sie die Wiedergabe mit playing, playbackTime in Sekunden, playbackRate, und onPlaybackTimeChange. Die Wiedergabe erweitert Bohrzyklen, tesselliert kreisförmige/schraubenförmige Bewegungen, bewahrt die Verweilzeit und zeichnet schnelle Bewegungen deutlich auf. Werkzeugkarten und eine optionale Standard-Fräserversorgung für Fräser-, Schaft- und Haltergeometrie; angenommene Geometrie wird optisch unterschieden.

Auswahlrückrufe melden einen soliden Index. Transformationssteuerelemente geben Position, Drehung und Skalierung aus onTransformCommit; anrufer entscheiden, wie diese Transformation beibehalten werden soll. Werkzeugwegüberlagerungen können Punkte und Beschriftungen, Punktartfilter, Bogenmittelpunkte, Bogenradien und Rohteiltransparenz anzeigen.

Koordinaten und Einheiten

Kernzeichnungskoordinaten und Rohteilgrößen verwenden Millimeter. Zeichnungswinkel und Three.js-Rotationskomponenten verwenden Bogenmaß; Wenden Sie diese Konvention nicht auf CAM-Rotationsachsenwerte oder Feature-Eingaben an, die explizit Grad verwenden. viewport/units.ts enthält Umrechnungshilfen für angezeigte Millimeter und Zoll. Konvertieren Sie an Eingabe-/Ausgabegrenzen, sodass Fangen, Geometrie und Werkzeugwegbewegung ein konsistentes Einheitensystem beibehalten.

Die 2D-Kamera ordnet Weltkoordinaten CSS-Pixeln zu; Die Abmessungen der Trägerleinwand berücksichtigen das Pixelverhältnis des Geräts. Durch die Größenänderung werden die Kamera und der Backing-Puffer aktualisiert ResizeObserver. Die Kameraskalierung bestimmt den Rasterabstand und die Treffertoleranzen im Bildschirmbereich.

Die Zollanzeige wird mit genau 25,4 mm pro Zoll umgerechnet und die Längen werden standardmäßig mit 3 Dezimalstellen angegeben (apps/desktop/src/viewport/units.ts). Im 2D-Editor zoomt jeder Radschritt um den Faktor 1.15, der Maßstab wird zwischen 0.001 und 100,000 eingeklemmt, und die Anpassung an die Ansicht lässt einen Spielraum von 10 % (editor2d/camera.ts).

Ressourcen und Lebenszyklus

Die 2D-Komponente bricht Animationsframes in der Warteschlange ab und trennt ihren Größenänderungsbeobachter beim Aufheben der Bereitstellung. Die 3D-Komponente veröffentlicht Größen- und Sichtbarkeits-Listener, Orbit- und Transformationssteuerelemente, Mesh-Worker, Animationsplanung, Geometrien, Materialien, Sprites, Werkzeugnetze und den WebGL-Renderer.

Ein Frame-Scheduler führt Ungültigmachungen zusammen und fordert weitere Frames an, während die Kameradämpfung oder die Wiedergabe diese benötigt. Sichtbarkeitsänderungen unterbrechen die Arbeit. Hierbei handelt es sich um eine Planungsrichtlinie und nicht um ein garantiertes Bildratenbudget für jedes Modell und Gerät.

Modulkarte

• editor2d/editor2d.tsx: kontrollierte Komponente, Zeigerversand, Kamera, Auswahl, Verlauf und Leinwandmalerei.
• editor2d/tools/: gestenzustandsmaschinen und Befehlskonstruktion.
• editor2d/camera.ts, render.ts, und snap-pipeline.ts: koordinatentransformationen, Entity-Rendering, Auswahl und Snap-Orchestrierung.
• spatial/grid.ts: raumindex zeichnen.
• view3d/view3d.tsx: szenenkomposition, Kamerasteuerung, Auswahl, Transformationen, Stock und Werkzeuge.
• view3d/playback.ts, toolpath-overlays.ts, und modeling.ts: bewegungszeitleiste, Overlay-Daten und Profil-zu-Volumen-Konvertierung.
• view3d/mesh-jobs.ts und mesh-worker.ts: hintergrundgeometriekonstruktion und Auftragsverantwortung.

Werkzeugverfügbarkeit

ToolId beschreibt das größere Werkzeugvokabular; AVAILABLE_TOOLS beschreibt die registrierte Teilmenge. Für interaktive Tools verwenden Sie startTool(id, lookup, context, text). Auswahlsuche fragt Kandidatenentitäten ab; context liefert die aktuelle Auswahl und den Entitätszugriff; Text liefert den Anmerkungsinhalt.

Eine verschwundene Fabrik kehrt zurück undefined. Behandeln Sie dies explizit, anstatt ein deaktiviertes oder nicht implementiertes Tool als aktiven Bearbeitungsmodus darzustellen. Werkzeuge, die vorhandene Geometrie ändern, erfordern eine aktuelle Auswahl und einen aktuellen Objektkontext. Der Aufruf einer Factory ohne diese Abhängigkeiten reicht für eine sinnvolle Bearbeitung nicht aus.

Vernetzung und Verifizierung

Bei Volumenkörpern mit einer geschätzten Scheitelpunktzahl über 50,000 und Browser-Worker-Unterstützung stellt der Betrachter die Netzkonstruktion in einem Modul-Worker in die Warteschlange. Kleinere Körper greifen synchron ineinander. Die Mesh-Warteschlange kümmert sich um den Abschluss, veraltete Jobs, Worker-Fehler und die Bereinigung. Der Schwellenwert ist eine für die Planung verwendete Schätzung und keine dokumentierte Modellgrößenbeschränkung.

bun test apps/desktop/src/viewport
bun run --filter @cadcamfun/desktop typecheck

Logiktests umfassen Rendering-Helfer, Werkzeuggesten, räumliche Indizierung, Wiedergabe und Überlagerungen. Das Browser-/WebGL-Verhalten hängt auch von der Grafikumgebung ab; Überprüfen Sie die tatsächliche Interaktion mit dem Ansichtsfenster, wenn Sie die Kamerasteuerung, den Szenenlebenszyklus oder das Rendering ändern.

Beispiel für kontrollierte Wiedergabe

Ein Elternteil kann Transportsteuerungen besitzen, ohne die Bewegungszeitleiste des Betrachters zu duplizieren. Diese Komponente akzeptiert ein bereits erstelltes CAM-Programm und steuert Zeit, Wiedergabestatus, Geschwindigkeit und die Ansichtsfenstervoreinstellung. Seine Importpfade setzen eine Datei direkt darunter voraus apps/desktop/src.

import { createSignal } from "solid-js"
import { cam } from "@cadcamfun/core"
import { View3D } from "./viewport/index.ts"

export function ProgramPreview(props: { program: cam.Program }) {
  const [seconds, setSeconds] = createSignal(0)
  const [playing, setPlaying] = createSignal(false)
  return <div style={{ height: "600px" }}>
    <button onClick={() => setPlaying(value => !value)}>Play / pause</button>
    <button onClick={() => { setSeconds(0); setPlaying(true) }}>Restart</button>
    <View3D
      program={props.program}
      preset="isometric"
      playing={playing()}
      playbackTime={seconds()}
      playbackRate={1}
      onPlaybackTimeChange={setSeconds}
      stock={{ origin: { x: 0, y: 0, z: -10 }, size: { x: 100, y: 80, z: 10 } }}
    />
  </div>
}

Der Playback-Builder beginnt am Ursprung, erweitert Zyklen zu Zügen und berechnet die Dauer aus Weglänge und Vorschub. Die Standardgeschwindigkeit beträgt 5,000 mm/min und die Standardtoleranz für die Bogentesselierung beträgt 0,1 mm. Hierbei handelt es sich um Vorschauannahmen, nicht um gemessene Maschinenbeschleunigung oder Controller-Timing. Verweilbefehle behalten ihre angegebenen Sekunden; Kommentare und reine Orientierungseinträge fügen keine lineare Bewegung hinzu.

Werkzeugfarben werden beim ersten Vorkommen jedes Werkzeugbezeichners zugewiesen und über seine Pfade hinweg beibehalten. Stellen Sie eine Werkzeugkarte/ein Standardwerkzeug für die Baugruppengeometrie bereit. Ein farbiger Pfad allein bestimmt nicht die Abmessungen des Fräsers oder Halters, die bei der Überprüfung verwendet werden.

Bearbeiten von Rezepten und aktuellen Werkzeuggrenzen

Diese Details stammen aus den Gestenimplementierungen und nicht aus ihren Palettenbezeichnungen. Überprüfen Sie die Vorschau vor dem Festschreiben und verwenden Sie „Rückgängig“, wenn das Ergebnis von der beabsichtigten Geometrie abweicht. Wenn ein Werkzeug keinen Befehl zurückgibt, kann das bedeuten, dass seine geometrischen Voraussetzungen nicht erfüllt wurden, nicht aber, dass der Editor das Zeigerereignis verloren hat.

Rendering- und Vernetzungsfehler

Die Hintergrund-Mesh-Warteschlange lässt standardmäßig höchstens 128 ausstehende Jobs zu, führt einen nach dem anderen aus und weist standardmäßig ein Zeitlimit von 15 Sekunden pro Job auf. Durch das Zurücksetzen einer Szene wird der Worker beendet und die Arbeit in der Warteschlange gelöscht. Veraltete Antworten werden ignoriert. Ungültige Worker-Antworten, Nachrichtendecodierungsfehler, Zeitüberschreitungen und Ausfälle bei der Warteschlangenkapazität melden Fehler über den Warteschlangenrückruf.

Relevante Tests umfassen editor2d/tools/offset.test.ts, annotation-transform.test.ts, spatial/grid.test.ts, view3d/playback.test.ts, und toolpath-overlays.test.ts. Die Implementierung der Mesh-Warteschlange ist view3d/mesh-jobs.ts.

Einheiten im Detail anzeigen

Der Editor arbeitet immer in Millimetern. Nur das, was der Benutzer liest und eingibt, wird unter Verwendung der unten aufgeführten genauen Faktoren konvertiert. Die eigene Einheit einer gespeicherten Zeichnung bleibt erhalten mm oder inch; bei den zusätzlichen Einheiten handelt es sich lediglich um Anzeigeoptionen.

import { formatLength, parseLength, formatAngle, programUnitsOf } from "./units"

formatLength(25.4, "inch")     // "1.0000 inch"
formatLength(12.5)             // "12.500 mm"
formatLength(0.0254, "thou")   // "1.00 thou"
parseLength("2 in", "inch")    // 50.8  (a trailing unit word is ignored)
parseLength("abc")             // undefined
formatAngle(Math.PI / 2)       // "90.0°"
programUnitsOf("thou")         // "inch"

2D-Kamera und Raster

const camera = createCamera({ x: 0, y: 0 }, 2, 800, 600)   // 2 px per mm
worldToScreen(camera, { x: 10, y: 10 })   // { x: 420, y: 280 }
screenToWorld(camera, { x: 420, y: 280 }) // { x: 10, y: 10 }
gridStep(2)    // 5   -> 5 mm apart = 10 px
gridStep(0.5)  // 20  -> 20 mm apart = 10 px

Beim Rendern werden Entitäten aussortiert visibleBounds(camera). Durch das Einrasten wird auch das Scannen der gesamten Zeichnung vermieden: Ein einheitliches räumliches Raster gibt Elemente zurück, deren Grenzen innerhalb der Einrasttoleranz plus einem Kandidatenrand von 2 mm liegen, und nur diese werden an den Kern übergeben findSnap. Dies sorgt dafür, dass sich der Zeiger in Zeichnungen mit vielen Elementen schnell bewegt.

Snapping-Referenz

Snap-Typen werden in der Reihenfolge ihrer Priorität ausprobiert. Die Standardreihenfolge entspricht dem alten Editor: endpoint, midpoint, center, intersection, perpendicular, tangent, nearest, und quadrant. Endpunkte sind die Scheitelpunkte der Quellentität, nicht die ihrer Tessellation.

Die Pipeline gibt den Snap, die IDs der Entitäten unter dem Cursor (die nächsten zuerst, die vom Auswahltool verwendet werden) und die Anzahl der berücksichtigten Kandidaten zurück.

Wie die Wiedergabe des Werkzeugwegs zeitlich gesteuert wird

const playback = buildPlayback(program)          // rapids at 5000 mm/min
playback.duration                                // total seconds
positionAt(playback, 12.5)                       // tool position at t = 12.5 s
toolAt(playback, 12.5)                           // toolId cutting at that time
toolColors(program)                              // Map toolId -> colour, first use order

// A 10 mm feed move at 600 mm/min lasts 10 / 600 × 60 = 1 s.
// The same 10 mm as a rapid lasts 10 / 5000 × 60 = 0.12 s.

Viewport-Praktiken

• Konvertieren am Rand: Speichern und berechnen Sie in Millimetern und Bogenmaß und formatieren Sie es nur zur Anzeige mit formatLength und formatAngle.
• Verwenden Sie eine geparste Länge danach nie wieder parseLength kehrt zurück undefined; behalten Sie den vorherigen Wert bei und zeigen Sie einen Validierungshinweis an.
• Wenn Sie ein Zeichenwerkzeug hinzufügen, registrieren Sie es in der Tool-Factory-Tabelle, damit die Symbolleiste, Verknüpfungen und Tests es mit derselben ID ansprechen.
• Halten Sie schnelle Kandidatenabfragen räumlich. Übergabe jeder Entität an findSnap bei jeder Zeigerbewegung besiegt er den Index.
• Behandeln Sie die Wiedergabedauer als Vorschau und nicht als Zykluszeitangebot.

Hit-Testing im Maßstab: das räumliche Raster

Der 2D-Editor zielt auf 60 fps mit 10,000-Entitäten ab, sodass Treffertests und Aussortierungen niemals jede Entität pro Zeigerereignis scannen. viewport/spatial/grid.ts behält ein einheitliches Raster bei: Jedes Element wird in jeder Zelle registriert, die sein Begrenzungsrahmen berührt, und eine Abfrage gibt alle Elemente zurück, deren Grenzen den Abfragerahmen schneiden, in der Reihenfolge der Einfügung. Das Ergebnis ist exakt, niemals eine Probe.

Zellen, die durch das gestrichelte Abfragefeld berührt werden, werden besucht; A und die lange Linie werden zurückgegeben, weil ihre Grenzen sie schneiden, B jedoch nicht.

3D-Vernetzungswarteschlange

Volumenkörper werden in einem Web Worker vernetzt, sodass der UI-Thread niemals blockiert. MeshWorkerQueue in view3d/mesh-jobs.ts führt jeweils einen Job aus:

Jeder Fehler beendet den Worker und löscht die gesamte Warteschlange, sodass veraltete Szenenarbeiten nach einer neueren Bearbeitung nie landen; Die nächste Übermittlung startet einen neuen Arbeiter. Antworten werden anhand der Job-ID abgeglichen, sodass eine verspätete Antwort eines gekündigten Mitarbeiters ignoriert wird.

2D-Tool-Implementierungen

Jedes Werkzeug ist eine kleine Zustandsmaschine mit onPointerDown, onPointerMove und onPointerUp, hergestellt von einer Fabrik in tools/index.ts, eine pro Paletteneintrag. Zeigerpositionen durchlaufen snap-pipeline.ts bevor ein Werkzeug sie sieht.