Zum Inhalt springen
SheetForge

SheetForge Web

SheetForge bringt eine begleitende Web-App unter web.sheetforge.workers.dev mit. Sie bringt Authoring, Validierung und Sheet-Reflection in den Browser — kein Unity, keine Installation.

Derselbe Core, keine Neuimplementierung

Die Web-App kompiliert exakt dieselben C#-Core-Quellen — dieselben, die der Headless-.NET-Test-Harness ausführt — zu einer .NET-browser-wasm-Assembly. Es gibt keine zweite Kopie von Parser oder Validator, sodass beide niemals auseinanderdriften können: Eine einmal behobene Regel ist an beiden Stellen behoben.

Zwei Dinge folgen direkt aus diesem Design.

  • Ihre kompilierten Plugin-DLLs laden unverändert und aktivieren hier dieselben Slots wie im Editor (unten).
  • Die Sheet-Syntax-Regeln dieser Website gelten im Browser identisch. Markierungen, das Typsystem, @overlap, @style, @enum, @loc und die Referenzintegrität verhalten sich alle auf dieselbe Weise, weil derselbe Code antwortet. Das schließt die IntId@Tab, LocRef@Tab-Parität ein — siehe Tabellensyntax.

Ein Plugin, zwölf Slots, zwei Hosts

Ein Plugin hat keine „Web-Teilmenge". Die Zusammenstellung — Instanziierung, Reihenfolge, Isolation und das Kompatibilitäts-Gate — ist eine einzige reine Core-Funktion, die beide Hosts aufrufen. Nur die Entdeckung unterscheidet sich: Unity indiziert die Typen des Projekts, während der Browser die von Ihnen hochgeladene Assembly scannt.

Die zwölf Slots, die ein Plugin füllen kann, sind daher auf beiden Seiten dieselben:

SlotIm Browser
Enums · Zell-Parser · Wrapper-TypenZellen parsen, validieren und durchlaufen den Round-Trip über Ihre eigene Notation
Domänen-ValidatorenIhre Regeln erscheinen in Problems neben den Core-eigenen
Kanten-ContributorIn Ihrer Notation vergrabene Links werden auf der Canvas gezeichnet und im Referenzindex gezählt
StrukturmarkierungenIhre @marker-Zeilen werden akzeptiert und validiert
Sheet-VorlagenIhre Vorlagen erscheinen in Sheet erstellen
Canvas-AugmenterVirtuelle Nodes, zusätzliche Kanten, Layer- und Anzeige-Hinweise
Code-RegistriesSchlüssel, die im Code leben, werden nicht mehr als defekte Referenzen gezeichnet
Farb-PresetsAuf die CSS-Variablen der App abgebildet
Deklarative Studio-UIIhre Aktionen, Panels, Spalten-Badges und Cell-Editor-Hints, in React gerendert
UI-StringsIhre Labels folgen der Sprache des Nutzers über dasselbe Overlay, das t() konsultiert
Pipeline-BeobachterAm Ende eines Import-Zyklus benachrichtigt, genau wie im Editor

Die deklarativen Oberflächen sind der Grund, warum die Authoring-Erweiterungen eines Plugins hier überhaupt existieren. Ein Vertrag, der ein UIToolkit-Element zurückgäbe, könnte niemals im Browser laden, daher wird die Hülle als Daten beschrieben — eine Id, ein Label-Schlüssel, eine Platzierung, ein Ton — und jeder Host zeichnet sie mit seinen eigenen Widgets.

Braucht ein Paket etwas, das das Vokabular nicht ausdrücken kann, registriert es ein editor-only umfangreiches Panel unter derselben Id. Der Editor zeichnet dieses, der Browser zeichnet das beschriebene, und die Erweiterung fehlt niemals einfach.

Zwei Regeln gelten zur Renderzeit. Von einem Plugin kommender Text wird escaped, und eine Aktion, deren Situation sich seit dem Zeichnen geändert hat, antwortet mit einem ehrlichen No-op statt auf einer veralteten Id zu handeln.

Eine Plugin-Assembly kann außerdem angeben, für welche Generation des Plugin-Formats sie gebaut wurde. Fällt das außerhalb dessen, was dieser Host liest, wird die gesamte Assembly mit einem lesbaren Grund abgelehnt, statt halb geladen zu werden. Es ist dasselbe Gate, das dieselbe Deklaration liest, auf dem Markt-Pfad, dem Sideload-Pfad und bei einer lokalen Datei. Siehe Plugin-Erstellung.

Was in Unity bleibt

Dieselbe Ehrlichkeit gilt für die Lokalisierung: Eine Lokalisierungstabelle wird hier vollständig verfasst und validiert, aber die Synchronisierung von Unity-Localization-StringTables ist Aufgabe des Editors – der Browser hat kein Unity-Projekt, in das er Tabellen schreiben könnte.

Codegen und Bake bleiben eine reine Unity-Aufgabe. Der Browser kann keine .cs-Dateien ausgeben oder ScriptableObjects schreiben, und er gibt das auch nicht vor. Dasselbe gilt für alles, was das Projekt selbst braucht: Der Asset-Picker, Drag-and-Drop aus dem Project-Fenster und die Addressables-Registrierungen, die sie vormerken, existieren nur im Editor; der <Type> von AssetRef@Group<Type> wird im Browser geparst und angezeigt, aber nur dort aufgelöst — und typgeprüft —, wo die Typen des Projekts geladen sind; und die Miniaturansichten, vergrößerten Vorschauen und die Audio-Wiedergabe von Assets im Editor haben kein Web-Gegenstück, weil der Browser keine Projekt-Assets zum Lesen hat — eine Asset-Zelle im Web-Grid ist ihr Adresstext.

Die Web-Ausgabe ist die gespiegelte Tabelle — die validierte, im Round-Trip verarbeitete Quelle — nicht per Bake erzeugte Assets. Sie verfassen und validieren im Browser und führen dann einen Import in Unity aus, wenn Sie stark typisierte Klassen und per Bake erzeugte SOs möchten. Die Tabelle ist so oder so die einzige Quelle der Wahrheit, daher treffen sich die beiden Oberflächen an der Tabelle.

Was die Web-App tut

Alles durchläuft den Round-Trip über einen einzigen JSON-Grenzvertrag zum WebAssembly-Core, sodass die Browser-UI nie eine Regel neu ableitet, die der Core bereits besitzt.

BereichWas Sie bekommen
Authoring-SessionImport, Projektion und ein Problems-Panel, gespeist vom selben Import-Validator — Vorab-Diagnosen, keine separate Prüfung. Der Import nimmt TSV- und CSV-Dateien sowie .xlsx-Arbeitsmappen entgegen — jedes Sheet in einer Arbeitsmappe kommt als eigener Tab an, gelesen vom selben Reader, den der Editor verwendet (zu WebAssembly kompiliert), und wenn etwas interpretiert werden musste — der zwischengespeicherte Wert einer Formel, ein Datum als yyyy-MM-dd-Text, nicht gelesene Formatierung —, sagt der Import-Dialog das in einem Hinweis „Wie diese Arbeitsmappe gelesen wurde".
TabellenbearbeitungZell-Widgets pro Typ, Undo, Spalten-Anheften, Sortieren, Suche, @style-Gruppierung und -Farbe — plus dasselbe Set an Tabellenkalkulations-Spaltenfunktionen wie der Editor: Ziehen des Kopfzeilengriffs, um die Breite einer Spalte festzulegen (Doppelklick zum Anpassen; pro Tabelle in diesem Browser gespeichert), Spalten ein- und ausblenden, wobei die Buchstaben und eine Grenzmarkierung ehrlich bleiben, spaltenweise Wertfilter, die sich mit der Suche kombinieren, und Spaltendaten-Leeren als ein Undo-Schritt. + Row merkt auf einmal eine Zeile mit einem vorgeschlagenen Schlüssel vor — Integer-Id-Spalten vorausgefüllt —, bereit zum Umbenennen in der Schlüsselzelle, und eine Tabelle ohne Schlüsselspalte deaktiviert es mit dem Grund. Enum- und optionale-Bool-Zellen öffnen denselben durchsuchbaren Picker, den auch Referenzzellen verwenden — und es ist immer nur ein Picker-Fenster gleichzeitig geöffnet: Ein weiteres zu öffnen schließt das letzte, und ein Klick daneben oder Esc schließt es. Zeilennummern und Spaltenbuchstaben wählen aus (Strg schaltet um, Umschalt spannt), der Header und der Körper heben die Auswahl hervor, die ausgewählte Zelle zeichnet einen Rahmen, der der Tastatur folgt, und eine Auswahl lässt sich mit einer Einfügelinie an eine neue Position ziehen — eine nicht zusammenhängende Auswahl kommt am Ablagepunkt gesammelt an, in der Reihenfolge, in der sie ausgewählt wurde, als ein Undo-Schritt —, während die Rechtsklick-Menüs Breite, Anpassen, Ausblenden, Verschieben, Löschen und Daten-Leeren auf jede ausgewählte Spalte anwenden (Verschieben und Löschen auf jede ausgewählte Zeile), wobei Einzelziel-Einträge für sich in ihrem eigenen Abschnitt stehen. Enum-Definitionstabellen haben dieselbe Spaltenbreiten-Achse wie Datentabellen — ziehen, Doppelklick zum Anpassen, exakte Breite, an Daten anpassen, Ausblenden. Jenseits von 200 Zeilen rendert das Grid nur das sichtbare Fenster (plus Overscan), mit Platzhaltern, die die wahre Scroll-Höhe halten — dieselbe Schwelle, die auch die Editor-Tabelle verwendet, sodass sich beide bei einer großen Tabelle gleich anfühlen.
Visuelle WerteColor-, AnimationCurve- und Gradient-Zellen zeigen eine Vorschau, die die Zelle ausfüllt — ein Farbmuster, eine Kurven-Polylinie, ein Verlaufsbalken — und öffnen einen vollständigen Editor in einem Popover: ein Farb-Editor mit einem HSV-Quadrat, Farbton- und Alpha-Reglern und einem Hex-Feld (die native Farbeingabe des Browsers hat kein Alpha, wird also nicht verwendet); ein Kurven-Editor mit einem zoombaren Raster, ziehbaren Schlüsselpunkten und Tangentengriffen, Tangentenmodi (Free, Auto, Linear, Constant, ClampedAuto — Rechtsklick auf einen Schlüsselpunkt oder die Auswahl verwenden), Getrennt- und Gewichtet-Toggles, numerischen Feldern, Vor-/Nach-Wrap und den Voreinstellungen Linear / Sanfter Ein-/Ausklang / Konstant; ein Verlaufs-Editor mit ziehbaren Farb- und Alpha-Schlüsselpunkten (je bis zu 8), einer Modus-Auswahl und einer Farbraum-Auswahl. Jede Änderung wird über den WebAssembly-Core im Round-Trip verarbeitet — Parsen, Tangenten-Neuberechnung und Sampling sind C#, nicht JavaScript —, und der committete Text ist byte-genau dieselbe kanonische Form, die der Editor schreibt. Änderungen committen in dem Moment, in dem Sie sie vornehmen, genau wie die nativen Felder des Editors: Die Zelle, die Canvas und Problems folgen mit, solange der Editor geöffnet ist, eine Bearbeitungssitzung verschmilzt zu einem einzigen Undo-Schritt, egal wie viele Änderungen sie vornimmt, und das erneute Öffnen des Editors beginnt einen neuen Schritt. Es gibt kein Apply — die einzige Schaltfläche ist Schließen (Esc schließt ebenfalls, und im Farb-Editor stellt Esc zusätzlich den Wert von vor der Sitzung wieder her); das Rückgängigmachen erfolgt über Ctrl+Z. Öffnen und Schließen ohne jede Änderung merkt nichts vor. Eine optionale Spalte zeigt bei Leere und bietet Leeren (Standard) in einem Rechtsklick-Menü an; ein List<> der drei ist eine Chip-Liste, deren Hinzufügen-/Entfernen-/Neuordnen-/Bearbeiten-Gesten je ein Undo-Schritt sind. Der Vorschau-Streifen bleibt innerhalb der Standard-Zeilenhöhe, wie in der Tabelle des Editors. Die Wertzeilen der Canvas verwenden dieselben Komponenten.
StrukturbearbeitungSpalten hinzufügen / entfernen / verschieben, das -Vier-Felder-Spaltenformular, Tab-Umbenennung (gegenseitige Vertauschungen und Zyklen eingeschlossen; xlsx-Tabs sind blockiert), Sheet erstellen / löschen und ein Dropdown für aktive Einstellungen — jeweils als ein Undo-Schritt vorgemerkt. Enum-Definitionstabellen werden auf dieselbe Weise bearbeitet — ein neues Enum definieren, umbenennen (wobei jedes verweisende @type im selben Batch umgeschrieben wird), löschen, Spalten neu anordnen, den zugrunde liegenden Typ und die Beschreibung bearbeiten — unter denselben Regeln wie der Editor, weil derselbe Code entscheidet.
Sheet-übergreifende SucheDer All-Eintrag der Seitenleiste durchsucht die Ids und Feldwerte jeder Tabelle per Teilübereinstimmung, aufgelistet als Tabelle · Schlüssel · Feld · Wert, 50 Zeilen pro Seite — dieselbe Übereinstimmungslogik, Reihenfolge und Seitengröße wie der Editor. Er liest die Werte, die die Sitzung gerade jetzt zeigt, vorgemerkte Bearbeitungen eingeschlossen, sodass ein gerade geänderter Wert sofort gefunden wird. Doppelklicken Sie ein Ergebnis — oder wählen Sie es aus und drücken Sie Enter — und diese Tabelle öffnet sich mit der markierten Zelle ausgewählt; da die Suche die Sitzung selbst liest, lässt sich jedes Ergebnis ansteuern.
LokalisierungLokalisierungstabellen sind hier gewöhnliche Tabellen – Authoring, Validierung und Abdeckung pro Sprache inklusive. Die LocRef-Zelle einer Datentabelle zeigt den Text des Eintrags in der Quellsprache inline an und öffnet denselben Schlüssel-Picker wie andere Referenzen; das Eintippen in eine leere Zelle prägt den Schlüssel, seinen Quelltext und die Referenz als einen einzigen Undo-Schritt, genau wie im Editor. Die Sprachlinse schaltet sichtbare Sprachspalten um (nur Anzeige), und die Übersetzungs-Arbeitsmappe exportiert gewählte Sprachen nach xlsx und importiert die zurückgegebene Datei als reinen Sprachspalten-Merge erneut. Das Synchronisieren von Unity-Localization-StringTables bleibt dem Editor vorbehalten.
Record-CanvasDie Materialien und Verbraucher eines Datensatzes sind Karten, die Sie durch Ziehen von Verbindungen verknüpfen — die Canvas verwendet denselben reinen Layout-, Verkabelungs- und Bearbeitungsketten-Code wie der Editor, sodass die Pixel-Mathematik in C# lebt, nicht in einer JS-Graph-Bibliothek. Karten zeigen dieselbe Projektion wie die Tabelle: Eine in diesem Batch vorgemerkte Spalte steht bereits auf der Karte, markiert als ausstehend, eine vorgemerkte Umbenennung zeigt den neuen Namen über dem ursprünglichen Wert, und ein vorgemerktes Löschen entfernt die Zeile auch hier.
AusgabeTSV-/CSV-Download pro Sheet, ein .xlsx-Arbeitsmappen-Download, der jedes gewählte Sheet in einer Datei bündelt (ein Sheet-Name, den die Regeln der Arbeitsmappe nicht fassen können, wird angepasst und gemeldet, niemals stillschweigend umbenannt), und Google-Sheets-Lesen/Schreiben, wobei die Datenvalidierungs-Dropdowns der Tabelle nach jedem Push automatisch aktualisiert werden (siehe unten).

Identisch gemacht, nicht bloß ähnlich

Die Web-UI entspricht dem Data Studio im Editor mit Absicht, bis hinein in die gemeinsame Logik.

  • Gemeinsame Antworten. Die Header-Prädikate (pending / edited), das Diff-Modal und die Reihenfolge der Projektions-Komposition sind gemeinsames C#, sodass beide Oberflächen auf dieselbe Frage dieselbe Antwort geben.
  • Gemeinsame Sätze. Wo die Web-App einen Studio-Bildschirm spiegelt, verwendet sie die eigenen String-Schlüssel des Studios, und die Werte werden zur Build-Zeit aus den Sprachtabellen des Editors generiert statt neu getippt. Einen Satz hinzuzufügen, den beide Oberflächen zeigen, ist ein Schlüssel in Lang*.cs; Abdrift ist strukturell unmöglich statt nur unerwünscht. Zwei Dinge werden bewusst getrennt gehalten, und eine Build-Zeit-Sperre erzwingt die Grenze:
    • Strings, die wirklich nur im Web vorkommen, bleiben im Web-Katalog;
    • Diagnosen und Berichte werden vom WebAssembly-Core gerendert, nicht in der UI neu formuliert.
  • Gemeinsames Aussehen. Graph und Tabelle werden gemeinsam in einem größenveränderbaren geteilten Panel gezeigt, das das Canvas-Clamp-Verhalten des Editors spiegelt, und jede Farbe stammt aus dem .aw-root-Token-Satz des Editors als einziger Quelle der Wahrheit — keine fest codierte Palette.
  • Gemeinsames Komponenten-Kit. Die UI baut auf einem hauseigenen aw-Kit auf, dessen Klassennamen, Tokens und Popup-Platzierung eins zu eins zum USS des Editors und zum kanonischen HTML-Mockup passen. Ein Mockup speist jetzt zwei Ports — die Web-App und den UIToolkit-Editor —, statt dass das Web für sich allein abdriftet. web/Docs/ui-parity.md hält fest, wie das Web dem Studio folgt, wenn es sich ändert.
  • Gemeinsame Cell-Editoren. Welches Widget eine Zelle bekommt, entscheidet der Cell-Editor-Hint des Core — zuerst die Registrierung eines Pakets, dann die eingebaute Tabelle (BuiltinCellEditorHints) —, sodass ein Plugin-Typ, der den Archetyp ColorPicker, CurveEditor oder GradientEditor deklariert, hier dieselben Editoren öffnet, die er in Unity öffnet, und die beiden Hosts für denselben Typnamen kein unterschiedliches Widget wählen können.
  • Canvas-Parität. Drag-and-Drop erreichte volle Parität mit dem Editor: Schwenken per Mittel-Ziehen oder Alt-Ziehen, Kaskadenmenüs auf leerem Raum, Verbindungs- und Node-Inspektoren, das Aufleuchten der ausgewählten Verbindung und Endpunkt-Löschen mit Bestätigungsdialog. Der Zoombereich entspricht dem des Editors (25–200 %), und die Karten-Metriken stammen aus dem Core statt aus einer zweiten Kopie in JavaScript.
  • Gemeinsame Typliste. Das @type-Dropdown bietet, was die Parser-Registry tatsächlich kennt, gruppiert genau so, wie der Editor gruppiert: die eingebauten Skalare (Color, AnimationCurve und Gradient eingeschlossen), RecordId-/IntId-Schlüssel, RecordId@Tab- und IntId@Tab-Referenzen, Enum<…>, AssetRef@Group und jeder Typ oder Wrapper, den ein geladenes Plugin registriert hat. Ein Plugin, das einen neuen Typ registriert, erscheint daher im Browser ohne Web-Änderung. (Bevor der WebAssembly-Core mit dem Booten fertig ist, fällt das allererste Rendern auf die vier eingebauten Skalare zurück.)

Wann welches verwenden

  • Nutzen Sie den Browser für schnelles Authoring, Validierung und Tabellenbearbeitungen von überall aus, sowie für Teammitglieder, die kein Unity öffnen.
  • Nutzen Sie Unity, wenn Sie generierte C#-Klassen und per Bake erzeugte ScriptableObjects benötigen — die Schritte Import, Codegen und Bake.

Beide schreiben in dieselbe Tabelle, sodass eine in einer Oberfläche vorgenommene Änderung von der anderen beim nächsten Lesen übernommen wird.

Verwandte Seiten