@vectojs/core 1.24.0 → 1.26.0

package/dist/{chunk-ME4LB2HB.mjs → chunk-I4WQY7CJ.mjs}

@@ -1210,6 +1210,16 @@ function grow(data, needed) {
   grown.set(data);
   return grown;
 }
+function isSourceReady(source) {
+  const candidate = source;
+  if (typeof candidate.complete === "boolean") {
+    if (!candidate.complete) return false;
+    if (typeof candidate.naturalWidth === "number" && candidate.naturalWidth === 0) return false;
+    return true;
+  }
+  if (typeof candidate.readyState === "number") return candidate.readyState >= 2;
+  return true;
+}
 function createWebGLPointRenderer(canvas) {
   const gl = canvas.getContext("webgl2", {
     premultipliedAlpha: false
@@ -1445,6 +1455,7 @@ function createWebGLPointRenderer(canvas) {
     },
     setTexture(source) {
       if (source === textureSource && texture) return;
+      if (!isSourceReady(source)) return;
       if (!texture) {
         texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -1487,6 +1498,10 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      if (!isSourceReady(source)) {
+        distanceRange = range;
+        return;
+      }
       atlasSwitches++;
       drawGlyphs();
       distanceRange = range;

package/dist/{chunk-KEBYJVD6.js → chunk-KHGHP2J3.js}

@@ -1212,6 +1212,16 @@ function grow(data, needed) {
   grown.set(data);
   return grown;
 }
+function isSourceReady(source) {
+  const candidate = source;
+  if (typeof candidate.complete === "boolean") {
+    if (!candidate.complete) return false;
+    if (typeof candidate.naturalWidth === "number" && candidate.naturalWidth === 0) return false;
+    return true;
+  }
+  if (typeof candidate.readyState === "number") return candidate.readyState >= 2;
+  return true;
+}
 function createWebGLPointRenderer(canvas) {
   const gl = canvas.getContext("webgl2", {
     premultipliedAlpha: false
@@ -1447,6 +1457,7 @@ function createWebGLPointRenderer(canvas) {
     },
     setTexture(source) {
       if (source === textureSource && texture) return;
+      if (!isSourceReady(source)) return;
       if (!texture) {
         texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -1489,6 +1500,10 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      if (!isSourceReady(source)) {
+        distanceRange = range;
+        return;
+      }
       atlasSwitches++;
       drawGlyphs();
       distanceRange = range;

package/dist/{chunk-FRMLD4PP.mjs → chunk-MVFPN4Y5.mjs}

@@ -1093,6 +1093,11 @@ var MSDFTextEntity = class extends Entity {
   layoutText = "";
   text = "";
   lastRenderedSeqId = 0;
+  // Atlas-decode subscription (see watchAtlasDecode). Held so `destroy()` can
+  // release it: the handler closes over `this`, so leaving it attached to a
+  // long-lived shared atlas image would retain the whole entity.
+  atlasDecodeTarget = null;
+  atlasDecodeHandler = null;
   rgbColorCache = /* @__PURE__ */ new Map();
   fontStringCache = [];
   layoutResult = null;
@@ -1108,8 +1113,53 @@ var MSDFTextEntity = class extends Entity {
     this.maxWidth = options.maxWidth ?? 1e3;
     this.maxHeight = options.maxHeight ?? 1e3;
     this.textAlign = options.textAlign ?? "left";
+    this.watchAtlasDecode();
     this.setText(text);
   }
+  /**
+   * Repaint once the atlas raster decodes.
+   *
+   * The WebGL backend refuses to upload a not-yet-decoded atlas (it would pin an
+   * empty texture in its identity cache forever), so the upload has to happen on
+   * a LATER frame — and nothing else schedules one. Layout marks the scene dirty
+   * when the worker replies, which for a network-served atlas is long before the
+   * image lands, so the scene is already idle by then.
+   *
+   * Measured on Chromium and Firefox (2026-07-31) with a 600 ms atlas: the
+   * scene's own rAF loop never uploaded a decoded atlas in EITHER render mode.
+   * `onDemand` skips idle frames outright; `always` throttles to 2 FPS when
+   * idle, so whether it recovers is down to whether a throttled tick happens to
+   * land after the decode — Chromium got one, Firefox did not. Neither is a
+   * mechanism, which is why this listener exists rather than relying on the
+   * frame loop to come back around.
+   *
+   * Only `HTMLImageElement`-shaped sources have a decode to wait for; a canvas,
+   * `ImageBitmap`, or `VideoFrame` atlas is ready on arrival.
+   */
+  watchAtlasDecode() {
+    const source = this.texture;
+    if (typeof source.complete !== "boolean" || typeof source.addEventListener !== "function" || typeof source.removeEventListener !== "function") {
+      return;
+    }
+    if (source.complete && typeof source.naturalWidth === "number" && source.naturalWidth > 0) {
+      return;
+    }
+    const target = this.texture;
+    this.atlasDecodeHandler = () => {
+      this.detachAtlasDecodeListener();
+      this.scene?.markDirty();
+    };
+    target.addEventListener("load", this.atlasDecodeHandler);
+    target.addEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = target;
+  }
+  detachAtlasDecodeListener() {
+    if (!this.atlasDecodeTarget || !this.atlasDecodeHandler) return;
+    this.atlasDecodeTarget.removeEventListener("load", this.atlasDecodeHandler);
+    this.atlasDecodeTarget.removeEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = null;
+    this.atlasDecodeHandler = null;
+  }
   /** Change the wrap boundary and re-run layout for the current text. */
   setMaxWidth(maxWidth) {
     if (this.maxWidth === maxWidth) return;
@@ -1281,11 +1331,13 @@ var MSDFTextEntity = class extends Entity {
   }
   destroy() {
     LayoutWorkerManager.cancelLayoutForEntity(this.id);
+    this.detachAtlasDecodeListener();
     super.destroy();
   }
 };
 
 // src/text/SVGEntity.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function isSvgWhitespace(ch) {
   return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
 }
@@ -1317,12 +1369,21 @@ function readSvgAttribute(source, name) {
   return null;
 }
 var SVGEntity = class extends Entity {
+  /**
+   * Stroke colour of the fallback marker drawn when the source cannot be
+   * rasterized. Set to `'transparent'` to opt out and keep the box empty.
+   * Default `'rgba(248,113,113,0.9)'`.
+   */
+  fallbackStroke = "rgba(248,113,113,0.9)";
+  /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
+  fallbackFill = "rgba(248,113,113,0.12)";
   svgSource = "";
   imageBitmap = null;
   imageElement = null;
   blobURL = null;
   currentImg = null;
   lodTimeout = null;
+  rasterFailed = false;
   cachedDoc = null;
   baseWidth = 100;
   baseHeight = 100;
@@ -1349,6 +1410,7 @@ var SVGEntity = class extends Entity {
         const parserError = doc.querySelector("parsererror");
         if (parserError) {
           console.error("SVG Parsing error:", parserError.textContent);
+          this.rasterFailed = true;
         } else {
           this.cachedDoc = doc;
           const svgEl = doc.documentElement;
@@ -1368,6 +1430,7 @@ var SVGEntity = class extends Entity {
         }
       } catch (e) {
         console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
+        this.rasterFailed = true;
       }
     } else {
       const wAttr = readSvgAttribute(this.svgSource, "width");
@@ -1391,6 +1454,7 @@ var SVGEntity = class extends Entity {
   }
   triggerRasterization(scale) {
     if (typeof window === "undefined" || typeof Blob === "undefined") return;
+    this.rasterFailed = false;
     if (this.currentImg) {
       this.currentImg.onload = null;
       this.currentImg.onerror = null;
@@ -1414,6 +1478,7 @@ var SVGEntity = class extends Entity {
           "SVG Parsing validation error in triggerRasterization:",
           parserError.textContent
         );
+        this.rasterFailed = true;
       } else {
         const clonedDoc = doc.cloneNode(true);
         const svgEl = clonedDoc.documentElement;
@@ -1427,10 +1492,14 @@ var SVGEntity = class extends Entity {
           }
           const serializer = new XMLSerializer();
           processedSource = serializer.serializeToString(clonedDoc);
+          if (svgEl.namespaceURI === null && !/\sxmlns\s*=/.test(processedSource)) {
+            processedSource = processedSource.replace(/<svg/i, `<svg xmlns="${SVG_NAMESPACE}"`);
+          }
         }
       }
     } catch (e) {
       console.error("Failed to apply LOD scaling to SVG XML:", e);
+      this.rasterFailed = true;
     }
     const blob = new Blob([processedSource], { type: "image/svg+xml;charset=utf-8" });
     this.blobURL = URL.createObjectURL(blob);
@@ -1459,15 +1528,36 @@ var SVGEntity = class extends Entity {
       }).catch((e) => {
         console.error("Failed to create ImageBitmap from SVG:", e);
         this.currentImg = null;
+        if (!this.imageElement) this.rasterFailed = true;
+        if (this.scene) this.scene.markDirty();
       });
     };
     img.onerror = (e) => {
       if (this.currentImg !== img) return;
       console.error("Failed to load SVG Image element:", e);
       this.currentImg = null;
+      this.rasterFailed = true;
+      if (this.scene) this.scene.markDirty();
     };
     img.src = this.blobURL;
   }
+  /**
+   * Whether the source genuinely rasterized to a bitmap.
+   *
+   * Distinguishes "drew the real artwork" from "drew the fallback marker",
+   * which pixel counts alone cannot tell apart — both are non-blank.
+   */
+  hasRasterBitmap() {
+    return this.imageBitmap !== null;
+  }
+  /**
+   * Whether rasterization failed, so {@link render} draws the fallback marker.
+   *
+   * `false` while a raster is still in flight; only a settled failure sets it.
+   */
+  hasRasterFailed() {
+    return this.rasterFailed;
+  }
   isPointInside(globalX, globalY) {
     const local = this.worldToLocal(globalX, globalY);
     if (!local) return false;
@@ -1492,9 +1582,32 @@ var SVGEntity = class extends Entity {
     }
     if (this.imageBitmap) {
       r.drawImage(this.imageBitmap, 0, 0, this.width, this.height);
-    } else if (this.imageElement) {
+      return;
+    }
+    if (this.imageElement) {
       r.drawImage(this.imageElement, 0, 0, this.width, this.height);
+      return;
     }
+    if (this.rasterFailed) this.drawFallback(r);
+  }
+  /** Box outline plus a diagonal cross — the conventional "broken image" mark. */
+  drawFallback(r) {
+    const w = this.width;
+    const h = this.height;
+    if (w <= 0 || h <= 0) return;
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.fill(this.fallbackFill);
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.stroke(this.fallbackStroke, 1);
+    const inset = Math.min(w, h) * 0.2;
+    r.beginPath();
+    r.moveTo(inset, inset);
+    r.lineTo(w - inset, h - inset);
+    r.moveTo(w - inset, inset);
+    r.lineTo(inset, h - inset);
+    r.stroke(this.fallbackStroke, 1);
   }
   destroy() {
     if (this.lodTimeout) {

package/dist/{chunk-AGP4VLF4.js → chunk-Z3HFY75R.js}

@@ -1095,11 +1095,16 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   __init40() {this.layoutText = ""}
   __init41() {this.text = ""}
   __init42() {this.lastRenderedSeqId = 0}
-  __init43() {this.rgbColorCache = /* @__PURE__ */ new Map()}
-  __init44() {this.fontStringCache = []}
-  __init45() {this.layoutResult = null}
+  // Atlas-decode subscription (see watchAtlasDecode). Held so `destroy()` can
+  // release it: the handler closes over `this`, so leaving it attached to a
+  // long-lived shared atlas image would retain the whole entity.
+  __init43() {this.atlasDecodeTarget = null}
+  __init44() {this.atlasDecodeHandler = null}
+  __init45() {this.rgbColorCache = /* @__PURE__ */ new Map()}
+  __init46() {this.fontStringCache = []}
+  __init47() {this.layoutResult = null}
   constructor(text, options) {
-    super();_class3.prototype.__init39.call(this);_class3.prototype.__init40.call(this);_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);;
+    super();_class3.prototype.__init39.call(this);_class3.prototype.__init40.call(this);_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);_class3.prototype.__init46.call(this);_class3.prototype.__init47.call(this);;
     this.font = options.font;
     this.texture = options.texture;
     this.fallbackFont = _nullishCoalesce(options.fallbackFont, () => ( "sans-serif"));
@@ -1110,8 +1115,53 @@ var MSDFTextEntity = (_class3 = class extends Entity {
     this.maxWidth = _nullishCoalesce(options.maxWidth, () => ( 1e3));
     this.maxHeight = _nullishCoalesce(options.maxHeight, () => ( 1e3));
     this.textAlign = _nullishCoalesce(options.textAlign, () => ( "left"));
+    this.watchAtlasDecode();
     this.setText(text);
   }
+  /**
+   * Repaint once the atlas raster decodes.
+   *
+   * The WebGL backend refuses to upload a not-yet-decoded atlas (it would pin an
+   * empty texture in its identity cache forever), so the upload has to happen on
+   * a LATER frame — and nothing else schedules one. Layout marks the scene dirty
+   * when the worker replies, which for a network-served atlas is long before the
+   * image lands, so the scene is already idle by then.
+   *
+   * Measured on Chromium and Firefox (2026-07-31) with a 600 ms atlas: the
+   * scene's own rAF loop never uploaded a decoded atlas in EITHER render mode.
+   * `onDemand` skips idle frames outright; `always` throttles to 2 FPS when
+   * idle, so whether it recovers is down to whether a throttled tick happens to
+   * land after the decode — Chromium got one, Firefox did not. Neither is a
+   * mechanism, which is why this listener exists rather than relying on the
+   * frame loop to come back around.
+   *
+   * Only `HTMLImageElement`-shaped sources have a decode to wait for; a canvas,
+   * `ImageBitmap`, or `VideoFrame` atlas is ready on arrival.
+   */
+  watchAtlasDecode() {
+    const source = this.texture;
+    if (typeof source.complete !== "boolean" || typeof source.addEventListener !== "function" || typeof source.removeEventListener !== "function") {
+      return;
+    }
+    if (source.complete && typeof source.naturalWidth === "number" && source.naturalWidth > 0) {
+      return;
+    }
+    const target = this.texture;
+    this.atlasDecodeHandler = () => {
+      this.detachAtlasDecodeListener();
+      _optionalChain([this, 'access', _108 => _108.scene, 'optionalAccess', _109 => _109.markDirty, 'call', _110 => _110()]);
+    };
+    target.addEventListener("load", this.atlasDecodeHandler);
+    target.addEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = target;
+  }
+  detachAtlasDecodeListener() {
+    if (!this.atlasDecodeTarget || !this.atlasDecodeHandler) return;
+    this.atlasDecodeTarget.removeEventListener("load", this.atlasDecodeHandler);
+    this.atlasDecodeTarget.removeEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = null;
+    this.atlasDecodeHandler = null;
+  }
   /** Change the wrap boundary and re-run layout for the current text. */
   setMaxWidth(maxWidth) {
     if (this.maxWidth === maxWidth) return;
@@ -1177,7 +1227,7 @@ var MSDFTextEntity = (_class3 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
-        _optionalChain([this, 'access', _108 => _108.scene, 'optionalAccess', _109 => _109.markDirty, 'call', _110 => _110()]);
+        _optionalChain([this, 'access', _111 => _111.scene, 'optionalAccess', _112 => _112.markDirty, 'call', _113 => _113()]);
       }
     });
   }
@@ -1283,11 +1333,13 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   }
   destroy() {
     _layout.LayoutWorkerManager.cancelLayoutForEntity(this.id);
+    this.detachAtlasDecodeListener();
     super.destroy();
   }
 }, _class3);
 
 // src/text/SVGEntity.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function isSvgWhitespace(ch) {
   return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
 }
@@ -1319,19 +1371,28 @@ function readSvgAttribute(source, name) {
   return null;
 }
 var SVGEntity = (_class4 = class extends Entity {
-  __init46() {this.svgSource = ""}
-  __init47() {this.imageBitmap = null}
-  __init48() {this.imageElement = null}
-  __init49() {this.blobURL = null}
-  __init50() {this.currentImg = null}
-  __init51() {this.lodTimeout = null}
-  __init52() {this.cachedDoc = null}
-  __init53() {this.baseWidth = 100}
-  __init54() {this.baseHeight = 100}
-  __init55() {this.lastRasterizedScale = 1}
-  __init56() {this.targetScale = 1}
+  /**
+   * Stroke colour of the fallback marker drawn when the source cannot be
+   * rasterized. Set to `'transparent'` to opt out and keep the box empty.
+   * Default `'rgba(248,113,113,0.9)'`.
+   */
+  __init48() {this.fallbackStroke = "rgba(248,113,113,0.9)"}
+  /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
+  __init49() {this.fallbackFill = "rgba(248,113,113,0.12)"}
+  __init50() {this.svgSource = ""}
+  __init51() {this.imageBitmap = null}
+  __init52() {this.imageElement = null}
+  __init53() {this.blobURL = null}
+  __init54() {this.currentImg = null}
+  __init55() {this.lodTimeout = null}
+  __init56() {this.rasterFailed = false}
+  __init57() {this.cachedDoc = null}
+  __init58() {this.baseWidth = 100}
+  __init59() {this.baseHeight = 100}
+  __init60() {this.lastRasterizedScale = 1}
+  __init61() {this.targetScale = 1}
   constructor(svgSource, id) {
-    super(id);_class4.prototype.__init46.call(this);_class4.prototype.__init47.call(this);_class4.prototype.__init48.call(this);_class4.prototype.__init49.call(this);_class4.prototype.__init50.call(this);_class4.prototype.__init51.call(this);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);;
+    super(id);_class4.prototype.__init48.call(this);_class4.prototype.__init49.call(this);_class4.prototype.__init50.call(this);_class4.prototype.__init51.call(this);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);_class4.prototype.__init59.call(this);_class4.prototype.__init60.call(this);_class4.prototype.__init61.call(this);;
     this.setSVGSource(svgSource);
   }
   setSVGSource(svgSource) {
@@ -1351,6 +1412,7 @@ var SVGEntity = (_class4 = class extends Entity {
         const parserError = doc.querySelector("parsererror");
         if (parserError) {
           console.error("SVG Parsing error:", parserError.textContent);
+          this.rasterFailed = true;
         } else {
           this.cachedDoc = doc;
           const svgEl = doc.documentElement;
@@ -1370,6 +1432,7 @@ var SVGEntity = (_class4 = class extends Entity {
         }
       } catch (e) {
         console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
+        this.rasterFailed = true;
       }
     } else {
       const wAttr = readSvgAttribute(this.svgSource, "width");
@@ -1393,6 +1456,7 @@ var SVGEntity = (_class4 = class extends Entity {
   }
   triggerRasterization(scale) {
     if (typeof window === "undefined" || typeof Blob === "undefined") return;
+    this.rasterFailed = false;
     if (this.currentImg) {
       this.currentImg.onload = null;
       this.currentImg.onerror = null;
@@ -1416,6 +1480,7 @@ var SVGEntity = (_class4 = class extends Entity {
           "SVG Parsing validation error in triggerRasterization:",
           parserError.textContent
         );
+        this.rasterFailed = true;
       } else {
         const clonedDoc = doc.cloneNode(true);
         const svgEl = clonedDoc.documentElement;
@@ -1429,10 +1494,14 @@ var SVGEntity = (_class4 = class extends Entity {
           }
           const serializer = new XMLSerializer();
           processedSource = serializer.serializeToString(clonedDoc);
+          if (svgEl.namespaceURI === null && !/\sxmlns\s*=/.test(processedSource)) {
+            processedSource = processedSource.replace(/<svg/i, `<svg xmlns="${SVG_NAMESPACE}"`);
+          }
         }
       }
     } catch (e) {
       console.error("Failed to apply LOD scaling to SVG XML:", e);
+      this.rasterFailed = true;
     }
     const blob = new Blob([processedSource], { type: "image/svg+xml;charset=utf-8" });
     this.blobURL = URL.createObjectURL(blob);
@@ -1461,15 +1530,36 @@ var SVGEntity = (_class4 = class extends Entity {
       }).catch((e) => {
         console.error("Failed to create ImageBitmap from SVG:", e);
         this.currentImg = null;
+        if (!this.imageElement) this.rasterFailed = true;
+        if (this.scene) this.scene.markDirty();
       });
     };
     img.onerror = (e) => {
       if (this.currentImg !== img) return;
       console.error("Failed to load SVG Image element:", e);
       this.currentImg = null;
+      this.rasterFailed = true;
+      if (this.scene) this.scene.markDirty();
     };
     img.src = this.blobURL;
   }
+  /**
+   * Whether the source genuinely rasterized to a bitmap.
+   *
+   * Distinguishes "drew the real artwork" from "drew the fallback marker",
+   * which pixel counts alone cannot tell apart — both are non-blank.
+   */
+  hasRasterBitmap() {
+    return this.imageBitmap !== null;
+  }
+  /**
+   * Whether rasterization failed, so {@link render} draws the fallback marker.
+   *
+   * `false` while a raster is still in flight; only a settled failure sets it.
+   */
+  hasRasterFailed() {
+    return this.rasterFailed;
+  }
   isPointInside(globalX, globalY) {
     const local = this.worldToLocal(globalX, globalY);
     if (!local) return false;
@@ -1494,9 +1584,32 @@ var SVGEntity = (_class4 = class extends Entity {
     }
     if (this.imageBitmap) {
       r.drawImage(this.imageBitmap, 0, 0, this.width, this.height);
-    } else if (this.imageElement) {
+      return;
+    }
+    if (this.imageElement) {
       r.drawImage(this.imageElement, 0, 0, this.width, this.height);
+      return;
     }
+    if (this.rasterFailed) this.drawFallback(r);
+  }
+  /** Box outline plus a diagonal cross — the conventional "broken image" mark. */
+  drawFallback(r) {
+    const w = this.width;
+    const h = this.height;
+    if (w <= 0 || h <= 0) return;
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.fill(this.fallbackFill);
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.stroke(this.fallbackStroke, 1);
+    const inset = Math.min(w, h) * 0.2;
+    r.beginPath();
+    r.moveTo(inset, inset);
+    r.lineTo(w - inset, h - inset);
+    r.moveTo(w - inset, inset);
+    r.lineTo(inset, h - inset);
+    r.stroke(this.fallbackStroke, 1);
   }
   destroy() {
     if (this.lodTimeout) {