Woche 6 Erste Demo

[mohid-1311]

Kernfunktion: Grid-basiertes Drag & Drop und Linien darstellen

Ziel

Wir haben zwei zentrale Funktionen für unseren Schaltplan-Editor BitFlow implementiert:

1. Grid-basiertes Drag & Drop von logischen Bausteinen (Gates) -> Mohid Syed
2. Linien darstellen (Wires), Canvas-UI, Gatesdarstellung -> Florian Blum

Damit können Benutzer erstmals interaktiv mit der Schaltungsoberfläche (Canvas) arbeiten.

Umgesetzte Funktionen

Grid-basiertes Drag & Drop für Gates

Gates können per Maus angefasst und verschoben werden.
Während des Ziehens rasten sie automatisch am Grid ein, sodass sie sich präzise entlang der Gitterlinien bewegen.
Die Canvas selbst ist eine SVG-Fläche, auf der das Grid als SVG-Pattern dargestellt wird.

Linienziehen (Wires)

Zusätzlich können Verbindungen (Wires) durch Ziehen mit der Maus erstellt werden.
Beim Klicken auf die Canvas startet eine Vorschau-Linie, die der Maus folgt.
Beim Loslassen der Maus wird daraus eine feste Verbindung.

Demo

In der aktuellen Version:

• Gates lassen sich ziehen und bewegen und rasten während der Bewegung automatisch am SVG-Grid ein.
• Linien (Wires) können dargestellt und gelöscht werden
• Die Canvas ist ein SVG mit Grid-Pattern, das sowohl visuell als auch logisch für das Snapping genutzt wird.

[Justin-X5]

Hi,
sehr spannend zu sehen, wie das Projekt nun Interaktivität erhält. Sehr gut finde ich die Einrastfunktion, da diese beim Bauen von Schaltungen sehr praktisch ist.
Wie in der Demo sichtbar, können bereits Wires erstellt werden. Müssen diese in Zukunft zwingend, um zu existieren, an ein Bauteil angeschlossen sein, oder können sie auch ins Leere führen?
Wie stellt ihr sicher, dass auch bei verschachtelten und komplexen Schaltungen die Wires übersichtlich bleiben?

In der Demo ist aktuell nicht sichtbar, um welche Bauteile es sich handelt. Werden diese in Zukunft ein Logo zur Identifizierung erhalten?

Grüße
Caesars Gambit