leafer-ui: LeaferJS und leafer-ui: eine TypeScript-Canvas-Engine für grafische Interaktion

Positionierung: eine Canvas-Engine für grafische Interaktion und Bearbeitung

LeaferJS ist eine in TypeScript geschriebene Open-Source-Canvas-Engine. Das README beschreibt sie als eine einfach zu nutzende Canvas-Engine zum Aufbau grafischer Interaktion und Bearbeitung und als "unendliche Canvas-Engine" für das KI-Zeitalter. Das Repository leaferjs/leafer-ui wird als UI-Schicht in einer Gruppe verwandter Repositories beschrieben, mit einer Homepage unter leaferjs.com. Das README behauptet, die Engine könne eine Million Grafiken im Browser verarbeiten und Editoren auf Figma-Niveau bauen, und wirbt mit null Abhängigkeiten und einer Größe von 70 KB (min+gzip). Das Repository zeigt derzeit 4.323 Sterne, 186 Forks und 82 offene Issues; das README nennt keine Versionsnummer und keine Release-Historie, was über die npm-Registry oder die Release-Seiten bestätigt werden müsste. leafer-ui ist die UI-Schicht der LeaferJS-Familie. Das README nennt Szenenbaum, SVG-Pfade, Hit-Testing, Editor-Funktionen, Animation und Flexbox-Layout. Die Million-Rechtecke-Zahlen sind README-Angaben aus einem Chrome-V143-Test auf einem 2K-Laptop und keine unabhängige Messung.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 1 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Leistungsaussagen und der veröffentlichte Benchmark

Das README macht konkrete Leistungsaussagen und veröffentlicht eine Benchmark-Tabelle für einen Test mit einer Million interaktiver Rechtecke. In diesem Test meldet LeaferJS eine anfängliche Renderzeit von 1,28 Sekunden gegenüber etwa 9 bis 15 Sekunden für traditionelle Canvas-Bibliotheken, einen Speicherverbrauch von 320 MB gegenüber etwa 2 bis 4 GB und eine Drag-Bildrate von 60 FPS gegenüber 0 bis 4 FPS. Das README merkt an, dass die Testumgebung ein 2K-Laptop-Bildschirm mit Chrome V143.0 war und die Ergebnisse nur zur Referenz dienen und von der Hardware abhängen. Die Vergleichsbibliotheken werden im README nicht benannt, daher ist die genaue Basis nicht festgelegt; um die Basis zu bestimmen, wäre ein externer Benchmark-Lauf nötig. Das README sagt außerdem, die Engine hebe die Obergrenze der Web-Grafikverarbeitung um etwa das Zehnfache an; diese Behauptung wird außer der einen Tabelle ohne detaillierte Methodik präsentiert. Installiere leafer-ui über npm und beginne mit dem dokumentierten Rect-Beispiel: Leafer erhält window als View, ein Rechteck mit x, y, width, height, fill und draggable wird hinzugefügt. Miss erst danach deine eigene Szene, weil das README keine vollständige Vergleichsmethodik liefert.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 2 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Kernfunktionen: Szenenbaum, Editor-Plugin, Layout und Animation

Zu den im README aufgeführten Kernfunktionen gehören ein Szenenbaum, der Vektorgrafiken, SVG-Pfade und Pixeloperationen unterstützt; native Drag-, Zoom- und Multi-Touch-Interaktion mit Hit-Testing im Millisekundenbereich; und ein integriertes Editor-Plugin, das Skalieren, Drehen, Verschieben und Mehrfachauswahl bietet. Die Engine enthält außerdem ein zustandsgesteuertes Animationssystem für Übergänge und Pfadanimationen und beansprucht native Flexbox-Layout-Unterstützung, die das README als selten in einer Canvas-Engine bezeichnet. Die Cross-Platform-Unterstützung wird für Web, Node.js, WeChat-Miniprogramme und mobiles H5 aufgelistet; das README erläutert nicht, wie diese Ziele verpackt oder getestet werden, was über die Projektdokumentation verifiziert werden müsste. Das README erwähnt auch eine DOM-ähnliche API. Bei leafer-ui sind Angaben zu Architektur, Leistung und Langzeitpflege nur insoweit belastbar, wie sie im README konkret genannt werden. Die Repository-Metadaten liefern Kontext, aber keinen Ersatz für einen Test des dokumentierten Ablaufs.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 3 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Schnellstart: Installation und erstes Rechteck

Der Schnellstart im README installiert leafer-ui über npm. Für die Plugin-Nutzung empfiehlt es, leafer-ui zusammen mit @leafer-ui/core und @leafer-ui/draw zu installieren, um Versionskonflikte zu vermeiden, erklärt aber nicht, was diese Pakete enthalten oder wie Plugins registriert werden; diese Details müssten aus der Paketdokumentation bestätigt werden. Das Beispiel importiert Leafer und Rect aus leafer-ui, erstellt eine Leafer-Instanz mit dem Fenster als View, konstruiert ein ziehbares Rechteck mit den Eigenschaften x, y, width, height, fill und draggable und fügt das Rechteck zur Leafer-Instanz hinzu. Das README verlinkt eine Online-Version dieses Beispiels und ein Editor-Beispiel, enthält aber keine vollständige Plugin-Installationsanleitung. Die Einordnung bleibt auf leaferjs/leafer-ui begrenzt: Nicht beschriebene Integrationen, Garantien und Betriebsgrenzen werden nicht als vorhandene Funktionen ausgegeben.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 4 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Repository-Aufbau und kommerzielles Ökosystem

Das README stellt leafer-ui in eine größere Projektfamilie. Es listet das Haupt-Integrationsrepository LeaferJS, die Kern-Engine leafer, die UI-Schicht leafer-ui (dieses Repository), offizielle Plugins in leafer-in, eine Community-Plugin-Showcase in leafer-x sowie separate Repositories für automatisierte Tests, Beispielcode und Dokumentation. Zum kommerziellen Support sagt das README, LeaferJS sei dauerhaft unter MIT Open Source und Kernfunktionen sowie wesentliche Plugins blieben Open Source, während ein Unternehmen namens PxGrow optionale kommerzielle Plugins für industrielle Anwendungen anbietet. Preise, Plugin-Namen oder welche Funktionen den kommerziellen Angeboten vorbehalten sind, werden im README nicht angegeben; diese Einzelheiten müssten bei PxGrow bestätigt werden. Für leafer-ui ist die wichtigste Beobachtung, ob der README-Ablauf mit den eigenen Eingaben reproduzierbar ist. Abweichungen sollten an der konkreten Datei oder Ausgabe untersucht werden.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 5 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Lizenz und Beitragsstatus

Die Repository-Metadaten listen die Lizenz als MIT, und das README sagt, die MIT-Lizenz erlaube die freie Nutzung, einschließlich kommerzieller Anwendungen. Der Lizenztext gewährt das Recht, Kopien der Software zu verwenden, zu kopieren, zu modifizieren, zu mergen, zu veröffentlichen, zu verteilen, zu unterlizenzieren und zu verkaufen, und verlangt, den Copyright-Hinweis einzuschließen. Die Copyright-Zeile lautet 2023-present, Chao (Leafer) Wan. Die Lizenz enthält den üblichen Haftungsausschluss, dass die Software ohne jegliche Gewährleistung bereitgestellt wird und die Autoren nicht für Schäden haften. Das README bittet um Sterne, Issue-Meldungen und Community-Beteiligung und listet einen Verhaltenskodex und eine Commit-Konvention auf, beschreibt aber über diese Links hinaus keinen formalen Beitragsprozess; die Erwartungen der Maintainer an neue Beitragende müssten aus dem Repository bestätigt werden. Die Quellenliste verweist auf das Repository und die dort genannte Dokumentation. So lassen sich leafer-ui, Branch main und die konkrete README-Version gemeinsam nachlesen.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 6 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

leafer-ui: dokumentierter Prüfpfad

Installiere leafer-ui über npm und beginne mit dem dokumentierten Rect-Beispiel: Leafer erhält window als View, ein Rechteck mit x, y, width, height, fill und draggable wird hinzugefügt. Miss erst danach deine eigene Szene, weil das README keine vollständige Vergleichsmethodik liefert. leafer-ui ist die UI-Schicht der LeaferJS-Familie. Das README nennt Szenenbaum, SVG-Pfade, Hit-Testing, Editor-Funktionen, Animation und Flexbox-Layout. Die Million-Rechtecke-Zahlen sind README-Angaben aus einem Chrome-V143-Test auf einem 2K-Laptop und keine unabhängige Messung.

leafer-ui verlangt eine enge Lesart der jeweiligen README-Stelle. Abschnitt 7 betrifft den konkret beschriebenen Teil des Projekts. Nicht genannte Eigenschaften bleiben offen. Diese Begrenzung ist bei der Planung relevant, weil ein Lernbeispiel, eine Bibliothek, ein Desktopprogramm oder eine Datenpipeline unterschiedliche Erwartungen an Eingaben, Abhängigkeiten und Ausgaben stellt. Die vorhandene Quelle liefert den Ausgangspunkt, aber keine Zusage für fremde Integrationen. Ein sinnvoller Vergleich bleibt deshalb an leaferjs/leafer-ui, den Branch main und die genannten Pfade gebunden.

Redaktionelles Fazit

Geeignet ist leafer-ui für den im README beschriebenen Zweck und für Leser, die die genannten Dateien oder Befehle selbst nachvollziehen können. Ungeeignet ist das Projekt als Ersatz für nicht dokumentierte Betriebsversprechen. Prüfe zuerst Installiere leafer-ui über npm und beginne mit dem dokumentierten Rect-Beispiel: Leafer erhält window als View, ein Rechteck mit x, y, width, height, fill und draggable wird hinzugefügt.

Offizielle Quellen

1. Official documentation
2. Official README
3. Project repository
4. Release notes