@vectojs/core 0.2.4 → 0.2.6

package/dist/{chunk-TQ4H357Q.js → chunk-4BO5XBJL.js}

@@ -1,8 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7;
 
-var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
+var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 // src/math/SpringPhysics.ts
+var MAX_FRAME_DT = 0.25;
+var MAX_STEP_DT = 1 / 120;
 var SpringPhysics = (_class = class {
   
   
@@ -22,11 +24,22 @@ var SpringPhysics = (_class = class {
       this.velocity = 0;
       return;
     }
-    const forceSpring = -this.stiffness * (this.value - this.target);
-    const forceDamping = -this.damping * this.velocity;
-    const acceleration = (forceSpring + forceDamping) / this.mass;
-    this.velocity += acceleration * dt;
-    this.value += this.velocity * dt;
+    if (!(dt > 0)) return;
+    let remaining = dt < MAX_FRAME_DT ? dt : MAX_FRAME_DT;
+    while (remaining > 0) {
+      const step = remaining < MAX_STEP_DT ? remaining : MAX_STEP_DT;
+      const forceSpring = -this.stiffness * (this.value - this.target);
+      const forceDamping = -this.damping * this.velocity;
+      const acceleration = (forceSpring + forceDamping) / this.mass;
+      this.velocity += acceleration * step;
+      this.value += this.velocity * step;
+      remaining -= step;
+      if (this.isAtRest()) {
+        this.value = this.target;
+        this.velocity = 0;
+        return;
+      }
+    }
   }
   isAtRest() {
     return Math.abs(this.value - this.target) < this.valEpsilon && Math.abs(this.velocity) < this.velEpsilon;
@@ -117,6 +130,14 @@ var SpringDriver = class {
 };
 
 // src/tree/Entity.ts
+var ANIMATABLE_PROPS = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "scaleX",
+  "scaleY",
+  "rotation",
+  "opacity"
+]);
 var VectoJSEvent = (_class3 = class {
   /** The event name. */
   
@@ -568,7 +589,12 @@ var Entity = (_class4 = class {
         const end = anim.target[key];
         if (typeof start === "number" && typeof end === "number") {
           const easeOut = progress * (2 - progress);
-          this[key] = start + (end - start) * easeOut;
+          const value = start + (end - start) * easeOut;
+          if (ANIMATABLE_PROPS.has(key)) {
+            this._applyAnimated(key, value);
+          } else {
+            this[key] = value;
+          }
         }
       }
       if (progress >= 1) {
@@ -619,6 +645,10 @@ var Entity = (_class4 = class {
    */
   destroy() {
     this.animations = [];
+    for (const driver of this._drivers.values()) {
+      this._settleDriver(driver);
+    }
+    this._drivers.clear();
     this.listeners.clear();
     this.captureListeners.clear();
     if (this.parent) {
@@ -989,6 +1019,8 @@ var MSDFTextEntity = (_class6 = class extends Entity {
   
   
   
+  
+  
   __init35() {this.text = ""}
   __init36() {this.lastRenderedSeqId = 0}
   __init37() {this.rgbColorCache = /* @__PURE__ */ new Map()}
@@ -1003,17 +1035,27 @@ var MSDFTextEntity = (_class6 = class extends Entity {
     this.color = _nullishCoalesce(options.color, () => ( "#ffffff"));
     this.letterSpacing = _nullishCoalesce(options.letterSpacing, () => ( 0));
     this.lineHeight = options.lineHeight;
+    this.maxWidth = _nullishCoalesce(options.maxWidth, () => ( 1e3));
+    this.maxHeight = _nullishCoalesce(options.maxHeight, () => ( 1e3));
     this.setText(text);
   }
+  /** Change the wrap boundary and re-run layout for the current text. */
+  setMaxWidth(maxWidth) {
+    if (this.maxWidth === maxWidth) return;
+    this.maxWidth = maxWidth;
+    this.queueLayout();
+  }
   setText(text) {
     if (this.text === text && this.layoutResult) return;
     this.text = text;
-    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
+    this.queueLayout();
+  }
+  queueLayout() {
+    _chunkCTZQOM5Zjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
       fontId: this.font.id,
       fontSize: this.fontSize,
-      maxWidth: 1e3,
-      // standard wrap boundary
-      maxHeight: 1e3,
+      maxWidth: this.maxWidth,
+      maxHeight: this.maxHeight,
       fontData: this.font.data,
       letterSpacing: this.letterSpacing,
       lineHeight: this.lineHeight,
@@ -1042,6 +1084,8 @@ var MSDFTextEntity = (_class6 = class extends Entity {
     if (scene && scene.pointRenderer && scene.glCanvas && canUsePointGlyphs) {
       scene.pointRenderer.setMSDFTexture(this.texture, this.font.distanceRange);
       const worldRot = Math.atan2(world.b, world.a);
+      let worldOpacity = this.opacity;
+      for (let p = this.parent; p; p = p.parent) worldOpacity *= p.opacity;
       const len2 = this.layoutResult.codePoints.length;
       for (let i = 0; i < len2; i++) {
         const code = this.layoutResult.codePoints[i];
@@ -1080,7 +1124,7 @@ var MSDFTextEntity = (_class6 = class extends Entity {
           ab.right / aw,
           v1,
           runColor,
-          this.opacity,
+          worldOpacity,
           worldRot
         );
       }
@@ -1112,7 +1156,7 @@ var MSDFTextEntity = (_class6 = class extends Entity {
     }
   }
   destroy() {
-    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
+    _chunkCTZQOM5Zjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
     super.destroy();
   }
 }, _class6);

package/dist/{chunk-IKLYTHAL.js → chunk-BWLNEJJW.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
 
 
-var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
+var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 // src/layout/LayoutEngine.ts
 function computeLineSegments(top, bottom, maxWidth, exclusions) {
@@ -79,6 +79,12 @@ var LayoutEngine = (_class = class {
     if (this.measurer) return this.measurer.measure(char, fontSize);
     return fontSize * 0.5;
   }
+  glyphKeyFor(grapheme, fontAtlas) {
+    if (fontAtlas[grapheme]) return grapheme;
+    const firstCodePoint = Array.from(grapheme)[0];
+    if (firstCodePoint && fontAtlas[firstCodePoint]) return firstCodePoint;
+    return grapheme;
+  }
   getGraphemes(word) {
     const cached = this.graphemeCache.get(word);
     if (cached) return cached;
@@ -142,8 +148,8 @@ var LayoutEngine = (_class = class {
         offset += paragraph.length + 1;
         continue;
       }
-      const { shapedText, indexMap } = _chunk76NMTLYLjs.ArabicShaper.shapeArabic(paragraph);
-      const levels = _chunk76NMTLYLjs.BidiResolver.resolveLevels(shapedText);
+      const { shapedText, indexMap } = _chunkCTZQOM5Zjs.ArabicShaper.shapeArabic(paragraph);
+      const levels = _chunkCTZQOM5Zjs.BidiResolver.resolveLevels(shapedText);
       const words = [];
       let shapedCharIdx = 0;
       let pFallback = false;
@@ -158,25 +164,20 @@ var LayoutEngine = (_class = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, fontSize);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, fontSize);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -192,7 +193,7 @@ var LayoutEngine = (_class = class {
         words,
         isEmpty: false,
         fallbackToCanvas: pFallback || void 0,
-        baseLevel: _chunk76NMTLYLjs.BidiResolver.getBaseLevel(shapedText)
+        baseLevel: _chunkCTZQOM5Zjs.BidiResolver.getBaseLevel(shapedText)
       };
       if (this.paragraphCache.size > 1e3) this.paragraphCache.clear();
       this.paragraphCache.set(key, prepared);
@@ -264,8 +265,8 @@ var LayoutEngine = (_class = class {
         offset += paragraph.length + 1;
         continue;
       }
-      const { shapedText, indexMap } = _chunk76NMTLYLjs.ArabicShaper.shapeArabic(paragraph);
-      const levels = _chunk76NMTLYLjs.BidiResolver.resolveLevels(shapedText);
+      const { shapedText, indexMap } = _chunkCTZQOM5Zjs.ArabicShaper.shapeArabic(paragraph);
+      const levels = _chunkCTZQOM5Zjs.BidiResolver.resolveLevels(shapedText);
       const words = [];
       let shapedCharIdx = 0;
       let pFallback = false;
@@ -280,28 +281,23 @@ var LayoutEngine = (_class = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
           const style = styleAt[offset + rawStart];
           const gfs = _nullishCoalesce(_optionalChain([style, 'optionalAccess', _ => _.fontSize]), () => ( baseFontSize));
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, gfs);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, gfs);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             style,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -317,7 +313,7 @@ var LayoutEngine = (_class = class {
         words,
         isEmpty: false,
         fallbackToCanvas: pFallback || void 0,
-        baseLevel: _chunk76NMTLYLjs.BidiResolver.getBaseLevel(shapedText)
+        baseLevel: _chunkCTZQOM5Zjs.BidiResolver.getBaseLevel(shapedText)
       };
       if (this.richParagraphCache.size > 1e3) this.richParagraphCache.clear();
       this.richParagraphCache.set(key, prepared);
@@ -372,7 +368,7 @@ var LayoutEngine = (_class = class {
       }
       for (const run of runs) {
         const runStartX = run[0].x;
-        _chunk76NMTLYLjs.BidiResolver.reorderVisual(run, paragraphBaseLevel);
+        _chunkCTZQOM5Zjs.BidiResolver.reorderVisual(run, paragraphBaseLevel);
         let x = runStartX;
         for (const node of run) {
           node.x = x;

package/dist/{chunk-76NMTLYL.js → chunk-CTZQOM5Z.js}

@@ -296,7 +296,7 @@ var BidiResolver = class _BidiResolver {
 };
 
 // src/layout/LayoutWorkerSource.ts
-var WORKER_SOURCE_STRING = '"use strict";(()=>{var k=new Map;function n(t){return typeof t=="number"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&n(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n';
+var WORKER_SOURCE_STRING = '"use strict";(()=>{var C=new Map;function f(t){return typeof t=="number"&&Number.isFinite(t)}function U(t){return t.origin?t.origin===self.location.origin:!0}function j(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&f(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&f(e.maxWidth)&&f(e.maxHeight)&&f(e.fontSize)&&(e.lineHeight===void 0||f(e.lineHeight))&&(e.letterSpacing===void 0||f(e.letterSpacing))}self.onmessage=t=>{if(!U(t)||!j(t.data))return;let{id:e,seqId:D,text:L,fontId:k,fontData:S,maxWidth:H,maxHeight:z,fontSize:d,lineHeight:I,letterSpacing:M}=t.data;S&&C.set(k,S);let g=C.get(k);if(!g)return;let m=[],i=[],h=[],w=[],n=0,c=0,r=0,o=-1,p=g.metrics?.ascender??.8,R=g.metrics?.descender??-.2,b=I??d*(p-R),P=M??0,F=new Map;for(let s of g.glyphs??[])F.set(s.unicode,s.advance);let x=()=>{n>r&&(r=n),n=0,c++,o=-1},A=Array.from(L);for(let s=0;s<A.length;s++){let a=A[s].codePointAt(0);if(a===10){x();continue}let W=(F.get(a)??1)*d,q=a>=11904;if(q&&(o=-1),n+W>H&&n>0){if(a===32){x();continue}if(o>=0&&i[o]>0){let l=i[o];l>r&&(r=l),c++;let v=c*b+p*d;for(let y=o;y<i.length;y++)i[y]-=l,h[y]=v;n-=l}else x()}a===32?o=-1:o===-1&&!q&&(o=m.length),m.push(a),i.push(n),h.push(c*b+p*d),w.push(-256),n+=W+P}n>r&&(r=n);let u={id:e,seqId:D,width:r,height:(c+1)*b,codePoints:new Uint32Array(m),xCoords:new Float32Array(i),yCoords:new Float32Array(h),packedStyles:new Uint32Array(w)};self.postMessage(u,[u.codePoints.buffer,u.xCoords.buffer,u.yCoords.buffer,u.packedStyles.buffer])};})();\n';
 
 // src/layout/LayoutWorkerManager.ts
 var LayoutWorkerManager = (_class2 = class _LayoutWorkerManager {

package/dist/{chunk-TPNADFNN.js → chunk-GADBN53Z.js}

@@ -20,10 +20,18 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   __init2() {this.batchColor = ""}
   __init3() {this.batchAlpha = 1}
   __init4() {this.batchCount = 0}
-  constructor(canvas) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
+  /**
+   * @param canvas - The target canvas. Its backing store is resized to the
+   *   logical size × devicePixelRatio.
+   * @param size - Explicit logical size. Without it the renderer assumes a
+   *   fullscreen canvas and sizes to the window — pass this for embedded /
+   *   custom-container canvases (the Scene does when `disableWindowResize` is
+   *   set) so the canvas's own dimensions aren't clobbered by the window's.
+   */
+  constructor(canvas, size) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
     const dpr = getDevicePixelRatio();
-    this.width = typeof window !== "undefined" ? window.innerWidth : canvas.width || 0;
-    this.height = typeof window !== "undefined" ? window.innerHeight : canvas.height || 0;
+    this.width = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _ => _.width]), () => ( (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0)));
+    this.height = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _2 => _2.height]), () => ( (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0)));
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
     const ctx = canvas.getContext("2d");
@@ -414,18 +422,19 @@ var SVGRenderer = (_class2 = class {
     } else {
       this.currentPath.push(`L ${xs} ${ys}`);
     }
-    const deltaAngle = Math.abs(endAngle - startAngle);
-    if (deltaAngle >= Math.PI * 2 - 1e-4) {
+    const TWO_PI2 = Math.PI * 2;
+    const directedDelta = ccw ? startAngle - endAngle : endAngle - startAngle;
+    const sweepAngle = directedDelta >= TWO_PI2 ? TWO_PI2 : (directedDelta % TWO_PI2 + TWO_PI2) % TWO_PI2;
+    const sweep = ccw ? 0 : 1;
+    if (sweepAngle >= TWO_PI2 - 1e-4) {
       const xm = x - r * Math.cos(startAngle);
       const ym = y - r * Math.sin(startAngle);
-      const sweep = ccw ? 0 : 1;
       this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xm} ${ym}`);
       this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xs} ${ys}`);
     } else {
       const xe = x + r * Math.cos(endAngle);
       const ye = y + r * Math.sin(endAngle);
-      const largeArc = deltaAngle > Math.PI ? 1 : 0;
-      const sweep = ccw ? 0 : 1;
+      const largeArc = sweepAngle > Math.PI ? 1 : 0;
       this.currentPath.push(`A ${r} ${r} 0 ${largeArc} ${sweep} ${xe} ${ye}`);
     }
   }
@@ -537,8 +546,8 @@ var SVGRenderer = (_class2 = class {
   }
   drawImage(source, dx, dy, dw, dh) {
     this.flush();
-    const fromCanvas2 = typeof _optionalChain([source, 'optionalAccess', _ => _.toDataURL]) === "function";
-    const rawHref = fromCanvas2 ? source.toDataURL() : _optionalChain([source, 'optionalAccess', _2 => _2.src]) || "";
+    const fromCanvas2 = typeof _optionalChain([source, 'optionalAccess', _3 => _3.toDataURL]) === "function";
+    const rawHref = fromCanvas2 ? source.toDataURL() : _optionalChain([source, 'optionalAccess', _4 => _4.src]) || "";
     const href = fromCanvas2 && this.isSafeRasterDataUrl(rawHref) ? rawHref : sanitizeUrl(String(rawHref));
     const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
     if (href) {
@@ -723,6 +732,7 @@ function fromCanvas(css) {
   if (typeof document === "undefined") return null;
   if (!fallbackCtx) fallbackCtx = document.createElement("canvas").getContext("2d");
   if (!fallbackCtx) return null;
+  fallbackCtx.clearRect(0, 0, 1, 1);
   fallbackCtx.fillStyle = css;
   fallbackCtx.fillRect(0, 0, 1, 1);
   const d = fallbackCtx.getImageData(0, 0, 1, 1).data;
@@ -869,7 +879,9 @@ function grow(data, needed) {
   return grown;
 }
 function createWebGLPointRenderer(canvas) {
-  const gl = canvas.getContext("webgl2");
+  const gl = canvas.getContext("webgl2", {
+    premultipliedAlpha: false
+  });
   if (!gl) return null;
   const pointProgram = link(gl, POINT_VERT, POINT_FRAG);
   const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
@@ -937,7 +949,9 @@ function createWebGLPointRenderer(canvas) {
   gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
   let texture = null;
+  let textureSource = null;
   let msdfTexture = null;
+  let msdfSource = null;
   let distanceRange = 4;
   let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
   let pointCount = 0;
@@ -951,6 +965,22 @@ function createWebGLPointRenderer(canvas) {
   let logicalH = 0;
   let dpr = 1;
   let destroyed = false;
+  const drawGlyphs = () => {
+    if (glyphCount === 0 || !msdfTexture) return;
+    const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+    gl.useProgram(msdfProgram);
+    gl.bindVertexArray(glyphVAO);
+    gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
+    gl.uniform1i(gUTex, 0);
+    gl.uniform2f(gURes, logicalW, logicalH);
+    gl.uniform1f(gURange, distanceRange);
+    gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
+    gl.bindVertexArray(null);
+    glyphCount = 0;
+  };
   return {
     resize(width, height) {
       logicalW = width;
@@ -967,8 +997,11 @@ function createWebGLPointRenderer(canvas) {
       rectCount = 0;
       spriteCount = 0;
       glyphCount = 0;
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
     },
     setTexture(source) {
+      if (source === textureSource && texture) return;
       if (!texture) {
         texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -980,6 +1013,7 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, texture);
       }
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      textureSource = source;
     },
     addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!texture) return;
@@ -1016,6 +1050,11 @@ function createWebGLPointRenderer(canvas) {
       spriteCount++;
     },
     setMSDFTexture(source, range) {
+      if (source === msdfSource && msdfTexture) {
+        distanceRange = range;
+        return;
+      }
+      drawGlyphs();
       distanceRange = range;
       if (!msdfTexture) {
         msdfTexture = gl.createTexture();
@@ -1028,6 +1067,7 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
       }
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      msdfSource = source;
     },
     addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!msdfTexture) return;
@@ -1105,8 +1145,6 @@ function createWebGLPointRenderer(canvas) {
       rectCount++;
     },
     flush() {
-      gl.clearColor(0, 0, 0, 0);
-      gl.clear(gl.COLOR_BUFFER_BIT);
       if (rectCount > 0) {
         const floats = rectCount * VERTS_PER_RECT * FLOATS_PER_RECT_VERT;
         gl.useProgram(rectProgram);
@@ -1141,20 +1179,8 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(sURes, logicalW, logicalH);
         gl.drawArrays(gl.TRIANGLES, 0, spriteCount * VERTS_PER_SPRITE);
       }
-      if (glyphCount > 0 && msdfTexture) {
-        const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
-        gl.useProgram(msdfProgram);
-        gl.bindVertexArray(glyphVAO);
-        gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
-        gl.uniform1i(gUTex, 0);
-        gl.uniform2f(gURes, logicalW, logicalH);
-        gl.uniform1f(gURange, distanceRange);
-        gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
-      }
       gl.bindVertexArray(null);
+      drawGlyphs();
     },
     destroy() {
       if (destroyed) return;

package/dist/{chunk-WEQRBXT2.mjs → chunk-PK5EYWIT.mjs}

@@ -20,10 +20,18 @@ var CanvasRenderer = class _CanvasRenderer {
   batchColor = "";
   batchAlpha = 1;
   batchCount = 0;
-  constructor(canvas) {
+  /**
+   * @param canvas - The target canvas. Its backing store is resized to the
+   *   logical size × devicePixelRatio.
+   * @param size - Explicit logical size. Without it the renderer assumes a
+   *   fullscreen canvas and sizes to the window — pass this for embedded /
+   *   custom-container canvases (the Scene does when `disableWindowResize` is
+   *   set) so the canvas's own dimensions aren't clobbered by the window's.
+   */
+  constructor(canvas, size) {
     const dpr = getDevicePixelRatio();
-    this.width = typeof window !== "undefined" ? window.innerWidth : canvas.width || 0;
-    this.height = typeof window !== "undefined" ? window.innerHeight : canvas.height || 0;
+    this.width = size?.width ?? (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0);
+    this.height = size?.height ?? (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0);
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
     const ctx = canvas.getContext("2d");
@@ -414,18 +422,19 @@ var SVGRenderer = class {
     } else {
       this.currentPath.push(`L ${xs} ${ys}`);
     }
-    const deltaAngle = Math.abs(endAngle - startAngle);
-    if (deltaAngle >= Math.PI * 2 - 1e-4) {
+    const TWO_PI2 = Math.PI * 2;
+    const directedDelta = ccw ? startAngle - endAngle : endAngle - startAngle;
+    const sweepAngle = directedDelta >= TWO_PI2 ? TWO_PI2 : (directedDelta % TWO_PI2 + TWO_PI2) % TWO_PI2;
+    const sweep = ccw ? 0 : 1;
+    if (sweepAngle >= TWO_PI2 - 1e-4) {
       const xm = x - r * Math.cos(startAngle);
       const ym = y - r * Math.sin(startAngle);
-      const sweep = ccw ? 0 : 1;
       this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xm} ${ym}`);
       this.currentPath.push(`A ${r} ${r} 0 0 ${sweep} ${xs} ${ys}`);
     } else {
       const xe = x + r * Math.cos(endAngle);
       const ye = y + r * Math.sin(endAngle);
-      const largeArc = deltaAngle > Math.PI ? 1 : 0;
-      const sweep = ccw ? 0 : 1;
+      const largeArc = sweepAngle > Math.PI ? 1 : 0;
       this.currentPath.push(`A ${r} ${r} 0 ${largeArc} ${sweep} ${xe} ${ye}`);
     }
   }
@@ -723,6 +732,7 @@ function fromCanvas(css) {
   if (typeof document === "undefined") return null;
   if (!fallbackCtx) fallbackCtx = document.createElement("canvas").getContext("2d");
   if (!fallbackCtx) return null;
+  fallbackCtx.clearRect(0, 0, 1, 1);
   fallbackCtx.fillStyle = css;
   fallbackCtx.fillRect(0, 0, 1, 1);
   const d = fallbackCtx.getImageData(0, 0, 1, 1).data;
@@ -869,7 +879,9 @@ function grow(data, needed) {
   return grown;
 }
 function createWebGLPointRenderer(canvas) {
-  const gl = canvas.getContext("webgl2");
+  const gl = canvas.getContext("webgl2", {
+    premultipliedAlpha: false
+  });
   if (!gl) return null;
   const pointProgram = link(gl, POINT_VERT, POINT_FRAG);
   const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
@@ -937,7 +949,9 @@ function createWebGLPointRenderer(canvas) {
   gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
   let texture = null;
+  let textureSource = null;
   let msdfTexture = null;
+  let msdfSource = null;
   let distanceRange = 4;
   let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
   let pointCount = 0;
@@ -951,6 +965,22 @@ function createWebGLPointRenderer(canvas) {
   let logicalH = 0;
   let dpr = 1;
   let destroyed = false;
+  const drawGlyphs = () => {
+    if (glyphCount === 0 || !msdfTexture) return;
+    const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+    gl.useProgram(msdfProgram);
+    gl.bindVertexArray(glyphVAO);
+    gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
+    gl.uniform1i(gUTex, 0);
+    gl.uniform2f(gURes, logicalW, logicalH);
+    gl.uniform1f(gURange, distanceRange);
+    gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
+    gl.bindVertexArray(null);
+    glyphCount = 0;
+  };
   return {
     resize(width, height) {
       logicalW = width;
@@ -967,8 +997,11 @@ function createWebGLPointRenderer(canvas) {
       rectCount = 0;
       spriteCount = 0;
       glyphCount = 0;
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
     },
     setTexture(source) {
+      if (source === textureSource && texture) return;
       if (!texture) {
         texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -980,6 +1013,7 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, texture);
       }
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      textureSource = source;
     },
     addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!texture) return;
@@ -1016,6 +1050,11 @@ function createWebGLPointRenderer(canvas) {
       spriteCount++;
     },
     setMSDFTexture(source, range) {
+      if (source === msdfSource && msdfTexture) {
+        distanceRange = range;
+        return;
+      }
+      drawGlyphs();
       distanceRange = range;
       if (!msdfTexture) {
         msdfTexture = gl.createTexture();
@@ -1028,6 +1067,7 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
       }
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      msdfSource = source;
     },
     addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!msdfTexture) return;
@@ -1105,8 +1145,6 @@ function createWebGLPointRenderer(canvas) {
       rectCount++;
     },
     flush() {
-      gl.clearColor(0, 0, 0, 0);
-      gl.clear(gl.COLOR_BUFFER_BIT);
       if (rectCount > 0) {
         const floats = rectCount * VERTS_PER_RECT * FLOATS_PER_RECT_VERT;
         gl.useProgram(rectProgram);
@@ -1141,20 +1179,8 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(sURes, logicalW, logicalH);
         gl.drawArrays(gl.TRIANGLES, 0, spriteCount * VERTS_PER_SPRITE);
       }
-      if (glyphCount > 0 && msdfTexture) {
-        const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
-        gl.useProgram(msdfProgram);
-        gl.bindVertexArray(glyphVAO);
-        gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
-        gl.uniform1i(gUTex, 0);
-        gl.uniform2f(gURes, logicalW, logicalH);
-        gl.uniform1f(gURange, distanceRange);
-        gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
-      }
       gl.bindVertexArray(null);
+      drawGlyphs();
     },
     destroy() {
       if (destroyed) return;