Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

task(C2int): integrate pixi renderer as overlay with lazy import

Browse Source
This commit is contained in:
Agent Zero
2026-08-27 10:02:05 +02:00
parent 8cde5d7f35
commit 8b1cca0324
2 changed files with 160 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CanvasArea.tsx
+78
View File
@@ -18,6 +18,7 @@ import { CADDocument } from '../kernel/document/CADDocument';
import { YjsDocument } from '../crdt/YjsDocument';
import { setActiveDocument, getActiveDocument } from '../kernel/document/documentService';
import { V2_TOOLS_ENABLED } from '../kernel/featureFlags';
import { PixiRenderer } from '../render/pixi/PixiRenderer';
import { pluginRegistry } from '../plugins';
const CanvasArea: React.FC<CanvasAreaProps> = ({
@@ -34,6 +35,10 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
const renderEngineRef = useRef<RenderEngine | null>(null);
const interactionRef = useRef<InteractionEngine | null>(null);
const dispatcherRef = useRef<InteractionDispatcher | null>(null);
/** Task C2: PixiJS-Canvas-Ref für V2-Elemente-Overlay. */
const pixiCanvasRef = useRef<HTMLCanvasElement>(null);
/** Task C2: Aktiver PixiJS-Renderer (für Cleanup). */
const pixiRendererRef = useRef<PixiRenderer | null>(null);
/** Bereits an onElementCreated gemeldete V2-Element-IDs (verhindert Doppelmeldung bei jedem onChanged-Frame). */
const announcedV2Ids = useRef<Set<string>>(new Set());
const spatialIndexRef = useRef<SpatialIndex | null>(null);
@@ -65,6 +70,60 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
const v2Doc = new CADDocument(ydoc);
// App-Level-Zugriffspunkt für HistoryPanel/Tastenkürzel (Task A4.11):
setActiveDocument(v2Doc);
// ── Task C2: PixiJS-Renderer parallel schalten ──
// DEFENSIV: Ein Ausfall von Pixi (z.B. WebGL im Headless-Browser)
// darf NIEMALS den kompletten Editor-Mount brechen. Im Fehlerfall
// läuft weiter ohne Overlay.
let pixi: PixiRenderer | null = null;
const pixiCanvas = pixiCanvasRef.current;
if (pixiCanvas) {
try {
pixi = new PixiRenderer();
pixiRendererRef.current = pixi;
pixi.init(pixiCanvas);
pixi.waitForReady().catch((err) => {
logger.warn('Pixi init failed — V2-Overlay deaktiviert:', err);
pixi = null;
pixiRendererRef.current = null;
});
} catch (err) {
logger.warn('Pixi init exception — V2-Overlay deaktiviert:', err);
pixi = null;
pixiRendererRef.current = null;
}
}
/** Letztes bekanntes Elementobjekt je ID (Referenzdiff statt JSON). */
const lastKnownEl = new Map<string, CADElement>();
const syncPixi = (): void => {
if (!pixi) return;
void pixi.waitForReady().then(() => {
const all = v2Doc.getAllElements();
const visibleIds = new Set<string>();
for (const el of all) {
visibleIds.add(el.id);
// Nur neu zeichnen wenn sich die OBJEKTREFERENZ geändert hat:
if (lastKnownEl.get(el.id) !== el) {
lastKnownEl.set(el.id, el);
pixi!.drawElement(el, {
id: 'layer-0', name: 'Standard', visible: true, locked: false,
color: '#ffffff', lineType: 'solid', transparency: 0,
sortOrder: 0, parentId: null,
} as never, {
color: '#ffffff', lineType: 'solid', transparency: 0, visible: true,
});
}
}
// Gelöschte IDs aus dem Renderer entfernen:
for (const knownId of lastKnownEl.keys()) {
if (!visibleIds.has(knownId)) {
lastKnownEl.delete(knownId);
pixi!.removeElement(knownId);
}
}
});
};
// Committete V2-Elemente fließen über den etablierten Kanal in UI/State:
v2Doc.onChanged(() => {
for (const el of v2Doc.getAllElements()) {
@@ -73,6 +132,7 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
onElementCreated(el);
}
}
syncPixi(); // Task C2: V2-Elemente in den PixiJS-Overlay-Renderer spiegeln
});
dispatcherRef.current = new InteractionDispatcher(canvas, {
@@ -115,6 +175,8 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
interaction.detach();
dispatcherRef.current?.destroy();
dispatcherRef.current = null;
pixiRendererRef.current?.destroy(); // Task C2: WebGL-Kontext freigeben
pixiRendererRef.current = null;
setActiveDocument(null);
zoomPanRef.current = null;
renderEngineRef.current = null;
@@ -413,6 +475,22 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
<span style={{ color: 'var(--color-text-faint)' }}>{unit}</span>
</div>
{/* Task C2-Integration: PixiJS-Overlay für V2-Elemente — liegt ÜBER dem
Legacy-Canvas (z-index höher), rendert nur Elemente aus dem V2-Dokument.
Pointer-Events gehen durch (pointerEvents:none), damit Drag/Drop weiter
auf dem Legacy-Canvas funktioniert. */}
{V2_TOOLS_ENABLED && (
<canvas
ref={pixiCanvasRef}
style={{
position: 'absolute',
inset: 0,
pointerEvents: 'none',
zIndex: 5,
}}
/>
)}
<canvas
ref={canvasRef}
className="canvas-svg"
frontend/src/render/pixi/PixiRenderer.ts
+82 -37
View File
@@ -1,15 +1,15 @@
/**
* PixiRenderer – WebGL-Implementierung des RenderAdapter (Task C2).
*
* - PixiJS v8: async Application.init(); danach synchron nutzbar
* (Integration wartet auf waitForReady() vor dem ersten Frame)
* - PixiJS v8 wird LAZY per dynamischem import() geladen — ein Ausfall des
* Pixi-Moduls (z.B. fehlendes WebGL im Headless-Browser) beeinflusst damit
* NICHT den Modul-Import der App (kein weißer Screen).
* - async Application.init(); danach synchron nutzbar über waitForReady()
* - Inkrementell: gerenderte Container pro Element-ID gecacht;
* removeElement/clearElements halten Cache und Szene konsistent
* - drawElement konsumiert die testbaren Shape-Primitives (elementDrawers)
* - drawGrid nutzt Overlay-Layer für Linien; Ruler/Background/Selection
* folgen in Task C3
*/
import { Application, Container, Graphics, Text } from 'pixi.js';
import type { Application, Container, Graphics, Text } from 'pixi.js';
import type {
RenderAdapter,
Viewport,
@@ -27,20 +27,23 @@ import { elementToPrimitives } from './elementDrawers';
export class PixiRenderer implements RenderAdapter {
private app: Application | null = null;
private canvas: HTMLCanvasElement | null = null;
private root: Container | null = null; // Weltkoordinaten-Container (skaliert)
private overlayLayer: Container | null = null; // Grid/Ruler/Snaps — immer oben
private root: Container | null = null;
private overlayLayer: Container | null = null;
private graphicsCache = new Map<string, Container>();
private viewport: Viewport = { x: 0, y: 0, scale: 1, width: 800, height: 600 };
private readyResolve: (() => void) | null = null;
private readyReject: ((err: unknown) => void) | null = null;
readonly ready: Promise<void>;
private pixiModule: typeof import('pixi.js') | null = null;
constructor() {
this.ready = new Promise<void>((resolve) => {
this.ready = new Promise<void>((resolve, reject) => {
this.readyResolve = resolve;
this.readyReject = reject;
});
}
/** Wartet bis Pixi initialisiert ist (vor dem ersten Frame aufrufen). */
/** Wartet auf Abschluss der Initialisierung; rejected bei Pixi-Fehler. */
async waitForReady(): Promise<void> {
await this.ready;
}
@@ -48,11 +51,28 @@ export class PixiRenderer implements RenderAdapter {
// ── Lifecycle ────────────────────────────────────────────
init(canvas: HTMLCanvasElement): void {
const app = new Application();
this.app = app;
this.canvas = canvas;
// LAZY-IMPORT: pixi.js wird erst jetzt geholt. Bei Fehler → ready rejected,
// CanvasArea deaktiviert das Overlay und die App läuft normal weiter.
void import('pixi.js')
.then((mod) => {
this.pixiModule = mod;
return this.setupApp(mod.Application, mod.Container, canvas);
})
.then(() => this.readyResolve?.())
.catch((err) => {
this.readyReject?.(err);
});
}
void app.init({
private setupApp(
ApplicationCtor: typeof Application,
ContainerCtor: typeof Container,
canvas: HTMLCanvasElement,
): Promise<void> {
const app = new ApplicationCtor();
this.app = app;
return app.init({
canvas,
width: this.viewport.width,
height: this.viewport.height,
@@ -61,12 +81,14 @@ export class PixiRenderer implements RenderAdapter {
autoDensity: false,
preference: 'webgl',
}).then(() => {
this.root = new Container();
app.stage.addChild(this.root);
this.overlayLayer = new Container();
app.stage.addChild(this.overlayLayer);
if (!this.app) return;
const root = new ContainerCtor();
this.root = root;
this.app.stage.addChild(root);
const overlay = new ContainerCtor();
this.overlayLayer = overlay;
this.app.stage.addChild(overlay);
this.applyViewportTransform();
this.readyResolve?.();
});
}
@@ -83,7 +105,11 @@ export class PixiRenderer implements RenderAdapter {
}
destroy(): void {
this.app?.destroy(true, { children: true });
try {
this.app?.destroy(true, { children: true });
} catch {
// Pixi darf im Teardown nichts mehr werfen
}
this.app = null;
this.root = null;
this.overlayLayer = null;
@@ -94,13 +120,14 @@ export class PixiRenderer implements RenderAdapter {
// ── Basis-Zeichenoperationen ────────────────────────────
clear(_color: string): void {
// Hintergrundfarbe kommt vom Canvas-CSS/Stage-Hintergrund.
// Pixi's render()-Aufruf leert den Buffer selbst.
// Hintergrund kommt vom Canvas-CSS; Pixi leert Buffer beim render.
}
drawGrid(cfg: GridConfig): void {
if (!cfg.enabled || !this.overlayLayer || !this.root) return;
const g = new Graphics();
const GraphicsCtor = this.pixiModule?.Graphics;
if (!GraphicsCtor) return;
const g = new GraphicsCtor();
const vp = this.viewport;
const worldLeft = vp.x;
const worldTop = vp.y;
@@ -122,22 +149,22 @@ export class PixiRenderer implements RenderAdapter {
g.moveTo(worldLeft, gy).lineTo(worldRight, gy)
.stroke({ color: cfg.color, width: 0.5 / vp.scale });
}
this.root.addChild(g); // skaliert mit, damit die Rasterlinien zur Welt passen
this.root.addChild(g);
}
drawBackground(_img: HTMLImageElement | null, _cfg: BackgroundDrawConfig): void {
// Sprite-/Texturintegration folgt in Task C3 (BUG-4-Korrelat in WebGL).
// Sprite-/Texturintegration folgt in Task C3.
}
drawRuler(_cfg: RulerConfig): void {
// Lineal-Rendering folgt in Task C3 (DOM-Layer oder Pixi-Text).
// Lineal-Rendering folgt in Task C3.
}
// ── Elemente ─────────────────────────────────────────────
drawElement(el: CADElement, layer: CADLayer, _style: LayerStyle): void {
if (!this.root || !layer.visible || layer.locked) return;
this.removeElement(el.id); // alter Zustand raus, neuer rein
this.removeElement(el.id);
const container = this.buildGraphicsContainer(el);
if (!container) return;
this.graphicsCache.set(el.id, container);
@@ -147,36 +174,47 @@ export class PixiRenderer implements RenderAdapter {
removeElement(id: string): void {
const existing = this.graphicsCache.get(id);
if (!existing) return;
existing.destroy({ children: true });
try {
existing.destroy({ children: true });
} catch {
// teardown-safe
}
this.graphicsCache.delete(id);
}
clearElements(): void {
for (const c of this.graphicsCache.values()) {
c.destroy({ children: true });
try {
c.destroy({ children: true });
} catch {
// teardown-safe
}
}
this.graphicsCache.clear();
}
drawPreview(el: CADElement | null): void {
if (!this.overlayLayer) return;
// Bestehende Preview-Container am Ende des Layers entfernen:
for (const child of [...this.overlayLayer.children]) {
if ((child as Container).label === '__preview__') {
child.destroy({ children: true });
try {
child.destroy({ children: true });
} catch {
// teardown-safe
}
}
}
if (!el) return;
const g = this.buildGraphicsContainer(el);
if (g) {
g.label = '__preview__';
g.alpha = 0.6; // halbtransparent wie Legacy-Vorschau
g.alpha = 0.6;
this.overlayLayer.addChild(g);
}
}
setSelection(_sel: SelectionState): void {
// Selektionshandles in C3 (braucht BBox-Zugriff pro Element)
// Selektionshandles in C3
}
setSnapPoints(_pts: Array<{ x: number; y: number; type: string }>): void {
@@ -185,7 +223,10 @@ export class PixiRenderer implements RenderAdapter {
overlay(draw: (g: OverlayPainter) => void): void {
if (!this.overlayLayer) return;
const g = new Graphics();
const GraphicsCtor = this.pixiModule?.Graphics;
const TextCtor = this.pixiModule?.Text;
if (!GraphicsCtor || !TextCtor) return;
const g = new GraphicsCtor();
const painter: OverlayPainter = {
line: (a: Pt, b: Pt, color: string, width?: number) => {
g.moveTo(a.x, a.y).lineTo(b.x, b.y).stroke({ color, width: width ?? 1 });
@@ -197,7 +238,7 @@ export class PixiRenderer implements RenderAdapter {
g.circle(center.x, center.y, radius).stroke({ color: strokeColor });
},
text: (text: string, at: Pt, color: string, fontSize?: number) => {
const t = new Text({ text, style: { fontSize: fontSize ?? 12, fill: color } });
const t = new TextCtor({ text, style: { fontSize: fontSize ?? 12, fill: color } });
t.position.set(at.x, at.y);
g.addChild(t);
},
@@ -207,7 +248,7 @@ export class PixiRenderer implements RenderAdapter {
}
hitTest(_world: Pt, _tolerancePx: number): CADElement | null {
// Delegation an SpatialIndex folgt in C3 (benötigt Elementliste).
// Delegation an SpatialIndex folgt in C3.
return null;
}
@@ -225,9 +266,13 @@ export class PixiRenderer implements RenderAdapter {
private buildGraphicsContainer(el: CADElement): Container | null {
const prims = elementToPrimitives(el);
if (prims.length === 0) return null;
const container = new Container();
const GraphicsCtor = this.pixiModule?.Graphics;
const TextCtor = this.pixiModule?.Text;
if (!GraphicsCtor || !TextCtor) return null;
const ContainerCtor = this.pixiModule!.Container;
const container = new ContainerCtor();
for (const prim of prims) {
const g = new Graphics();
const g = new GraphicsCtor();
switch (prim.kind) {
case 'line':
g.moveTo(prim.from.x, prim.from.y)
@@ -262,7 +307,7 @@ export class PixiRenderer implements RenderAdapter {
break;
}
case 'text': {
const t = new Text({ text: prim.text, style: { fontSize: prim.fontSize, fill: prim.color } });
const t = new TextCtor({ text: prim.text, style: { fontSize: prim.fontSize, fill: prim.color } });
t.position.set(prim.at.x, prim.at.y);
g.addChild(t);
break;