drawnui-react 0.1.0-preview.14 → 0.1.0-preview.15

package/dist/core/Canvas.d.ts

@@ -47,6 +47,13 @@ export declare class Canvas {
     private frameId;
     private disposed;
     private readonly observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    private contextLost;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch: number;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element: HTMLCanvasElement, init?: (canvas: Canvas) => void);
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
@@ -61,6 +68,17 @@ export declare class Canvas {
      * redrawn content lands in the same paint and no blank frame is ever shown while dragging.
      */
     private OnResized;
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    private readonly onContextLost;
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    private readonly onContextRestored;
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     private DrawNow;
     private Draw;

package/dist/core/Canvas.js

@@ -54,19 +54,28 @@ export class Canvas {
     frameId = 0;
     disposed = false;
     observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    contextLost = false;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch = 0;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element, init) {
         this.Element = Element;
         if (!Super.CK)
             throw new Error("DrawnUi: call Super.UseDrawnUi()...BuildAsync() before creating a Canvas");
         init?.(this);
+        Element.addEventListener("webglcontextlost", this.onContextLost);
+        Element.addEventListener("webglcontextrestored", this.onContextRestored);
         this.observer = new ResizeObserver(() => this.OnResized());
         this.observer.observe(Element);
         this.OnResized();
     }
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
     Update() {
-        if (this.frameId || !this.surface || this.disposed)
+        if (this.frameId || !this.surface || this.disposed || this.contextLost)
             return;
         const surface = this.surface;
         this.frameId = surface.requestAnimationFrame((c) => {
@@ -117,16 +126,53 @@ export class Canvas {
         this.RenderingScale = dpr;
         this.Element.width = w;
         this.Element.height = h;
+        if (this.contextLost)
+            return; // the restore makes the surface at this size
         this.ReleaseSurface();
         this.surface = this.CreateSurface(w, h);
         if (!this.surface)
             throw new Error("DrawnUi: cannot create surface");
         this.DrawNow();
     }
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    onContextLost = (e) => {
+        e.preventDefault();
+        this.contextLost = true;
+        if (this.frameId) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+    };
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    onContextRestored = () => {
+        if (this.disposed)
+            return;
+        if (this.grContext)
+            this.grContext.releaseResourcesAndAbandonContext();
+        this.surface?.delete();
+        this.surface = undefined;
+        this.grContext?.delete();
+        this.grContext = undefined;
+        if (this.glHandle) {
+            Super.CK.deleteContext(this.glHandle);
+            this.glHandle = undefined;
+        }
+        this.contextLost = false;
+        this.GpuEpoch++;
+        this.surface = this.CreateSurface(this.Element.width, this.Element.height);
+        this.DrawNow();
+    };
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     DrawNow() {
         const surface = this.surface;
-        if (!surface || this.disposed)
+        if (!surface || this.disposed || this.contextLost)
             return;
         this.Draw(surface.getCanvas());
         surface.flush();
@@ -260,6 +306,8 @@ export class Canvas {
     }
     Dispose() {
         this.disposed = true;
+        this.Element.removeEventListener("webglcontextlost", this.onContextLost);
+        this.Element.removeEventListener("webglcontextrestored", this.onContextRestored);
         this.Gestures = "Disabled";
         this.observer.disconnect();
         this.content?.Dispose();

package/dist/core/SkiaControl.d.ts

@@ -36,6 +36,8 @@ export declare class CachedObject {
     constructor(Type: SkiaCacheType, 
     /** Rect the content was recorded for, canvas pixels at recording time. */
     Bounds: SKRect, Scale: number, Picture?: SkPicture | undefined, Image?: Image | undefined);
+    /** Canvas.GpuEpoch it was made in: after a WebGL context restore it is remade (a picture may replay old GPU images). */
+    Epoch: number;
     /** Replays the cache with its top-left moved to (left, top). */
     Draw(canvas: SkCanvas, left: number, top: number): void;
     Dispose(): void;

package/dist/core/SkiaControl.js

@@ -22,6 +22,8 @@ export class CachedObject {
         this.Picture = Picture;
         this.Image = Image;
     }
+    /** Canvas.GpuEpoch it was made in: after a WebGL context restore it is remade (a picture may replay old GPU images). */
+    Epoch = 0;
     /** Replays the cache with its top-left moved to (left, top). */
     Draw(canvas, left, top) {
         const CK = Super.CK;
@@ -691,7 +693,10 @@ export class SkiaControl {
         }
         else {
             const r = cacheType === "Operations" ? this.ExpandedCacheRect(ctx.Scale) : this.AlignedCacheRect(ctx.Scale);
-            const stale = this.cacheDirty || !this.RenderObject || this.RenderObject.Type !== cacheType
+            const epoch = this.Superview?.GpuEpoch ?? 0;
+            if (this.RenderObjectPrevious && this.RenderObjectPrevious.Epoch !== epoch)
+                this.DisposePrevious(); // made on a lost GPU context
+            const stale = this.cacheDirty || !this.RenderObject || this.RenderObject.Type !== cacheType || this.RenderObject.Epoch !== epoch
                 || this.RenderObject.Scale !== ctx.Scale
                 || Math.round(this.RenderObject.Bounds.Width) !== Math.round(r.Width) || Math.round(this.RenderObject.Bounds.Height) !== Math.round(r.Height);
             if (stale)
@@ -750,6 +755,7 @@ export class SkiaControl {
             const picture = recorder.finishRecordingAsPicture();
             recorder.delete();
             this.RenderObject = new CachedObject("Operations", r, ctx.Scale, picture);
+            this.RenderObject.Epoch = this.Superview?.GpuEpoch ?? 0;
         }
         else if (cacheType === "ImageComposite") {
             this.CreateCompositeRenderingObject(ctx, r, w, h);
@@ -773,6 +779,7 @@ export class SkiaControl {
             const image = offscreen.makeImageSnapshot();
             offscreen.delete();
             this.RenderObject = new CachedObject(cacheType, r, ctx.Scale, undefined, image);
+            this.RenderObject.Epoch = this.Superview?.GpuEpoch ?? 0;
         }
         this.cacheDirty = false;
     }
@@ -791,7 +798,9 @@ export class SkiaControl {
         }
         let surface = this.compositeSurface;
         const prev = this.RenderObject;
-        const sameGeometry = !!surface && !!prev && prev.Type === "ImageComposite" && prev.Scale === ctx.Scale
+        const epoch = this.Superview?.GpuEpoch ?? 0;
+        // the kept surface belongs to the GPU context it was made on: after a context restore it is made again
+        const sameGeometry = !!surface && !!prev && prev.Type === "ImageComposite" && prev.Scale === ctx.Scale && prev.Epoch === epoch
             && Math.round(prev.Bounds.Width) === w && Math.round(prev.Bounds.Height) === h;
         if (!sameGeometry) {
             surface?.delete();
@@ -871,6 +880,7 @@ export class SkiaControl {
         const image = surface.makeImageSnapshot();
         const old = this.RenderObject;
         this.RenderObject = new CachedObject("ImageComposite", r, ctx.Scale, undefined, image);
+        this.RenderObject.Epoch = epoch;
         if (old) {
             const sv = this.Superview;
             if (sv)

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,9 @@ export declare class SkiaShaderEffect extends SkiaEffect implements IPostRendere
     protected ApplyShaderSource(): void;
     /** Snapshot of what the parent painted (C# CreateSnapshot): the surface the pixels are on, mapped through its origin. */
     protected CreateSnapshot(ctx: DrawingContext, destination: SKRect): CachedTexture | undefined;
+    private frozenEpoch;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    protected GpuEpoch(): number;
     /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
     private frozenAt?;
     private ParentOrigin;

package/dist/core/SkiaEffect.js

@@ -159,6 +159,9 @@ export class SkiaShaderEffect extends SkiaEffect {
             return undefined;
         return { Image: image, Bounds: destination, Origin: { X: ox, Y: oy } };
     }
+    frozenEpoch = 0;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    GpuEpoch() { return this.Parent?.Superview?.GpuEpoch ?? 0; }
     /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
     frozenAt;
     ParentOrigin() { const r = this.Parent?.DrawingRect; return { X: r?.Left ?? 0, Y: r?.Top ?? 0 }; }
@@ -176,7 +179,7 @@ export class SkiaShaderEffect extends SkiaEffect {
         switch (this.UseBackground) {
             case "Never": return undefined;
             case "Once":
-                if (!this.AquiredBackground || !this.frozen) {
+                if (!this.AquiredBackground || !this.frozen || this.frozenEpoch !== this.GpuEpoch()) { // a frozen texture of a lost GPU context is taken again
                     this.ReleaseFrozenSnapshot();
                     let snapshot = this.Parent?.CachedImage;
                     let owned = false;
@@ -189,6 +192,7 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
                         this.frozenAt = this.ParentOrigin();
+                        this.frozenEpoch = this.GpuEpoch();
                     }
                 }
                 return this.FollowParent(this.frozen);
@@ -434,7 +438,8 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
             return undefined;
         const w = Math.round(d.Width), h = Math.round(d.Height);
         const cur = slot === "p" ? this.resizedPrimary : this.resizedSecondary;
-        if (cur && cur.source === source && cur.w === w && cur.h === h)
+        const epoch = this.GpuEpoch();
+        if (cur && cur.source === source && cur.w === w && cur.h === h && cur.epoch === epoch)
             return cur.image;
         const main = ctx.Context.Surface;
         if (!main)
@@ -449,7 +454,7 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
         const image = surface.makeImageSnapshot();
         surface.delete();
         cur?.image.delete();
-        const entry = { source, w, h, image };
+        const entry = { source, w, h, epoch, image };
         if (slot === "p")
             this.resizedPrimary = entry;
         else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.14",
+  "version": "0.1.0-preview.15",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",