@expofp/renderer 2.2.1 → 2.3.1

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { default as default_2 } from 'stats-gl';
-import { Vector2 } from 'three';
 import { Vector2Like } from 'three';
 import { Vector2Tuple } from 'three';
-import { Vector3 } from 'three';
 import { Vector3Like } from 'three';
 import { Vector3Tuple } from 'three';
 import { WebGLRenderer } from 'three';
@@ -132,20 +130,6 @@ export declare interface ControlsAPI {
     getCameraState: () => CameraState;
 }
 
-/**
- * Converts multiple vector2 representations to a {@link Vector2} instance.
- * @param vector2 Vector2 representation as a tuple/POJO
- * @returns Vector2 instance
- */
-export declare function createVector2(vector2: IVector2): Vector2;
-
-/**
- * Converts multiple vector3 representations to a {@link Vector3} instance.
- * @param vector3 Vector3 representation as a tuple/POJO
- * @returns Vector3 instance
- */
-export declare function createVector3(vector3: IVector3 | IVector2): Vector3;
-
 /**
  * Mapping of engine-wide events to their payloads
  */
@@ -691,6 +675,16 @@ export declare interface ViewportAPI {
      * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
      */
     setDynamicTransform: (dynamicTransformMatrix: number[]) => void;
+    /**
+     * Set the maximum zoom factor. Default is 35.
+     * @param maxZoom Maximum zoom factor
+     */
+    setMaxZoom: (maxZoom: number) => void;
+    /**
+     * Set the minimum zoom factor. Default is 0.1.
+     * @param minZoom Minimum zoom factor
+     */
+    setMinZoom: (minZoom: number) => void;
 }
 
 /** Options for the {@link ControlsAPI.zoomTo} method. */

package/dist/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
-import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, Mesh, LessEqualDepth, LinearSRGBColorSpace, Plane, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Camera, Scene, MathUtils, Clock, WebGLRenderer } from "three";
+import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Frustum, Sphere, Box3, DynamicDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, Mesh, LessEqualDepth, LinearSRGBColorSpace, Plane, Raycaster, Spherical, PerspectiveCamera, Camera, Scene, MathUtils, Clock, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import createLog from "debug";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
@@ -540,20 +540,57 @@ class BatchedMesh extends BatchedMesh$1 {
 /** Whether to use WebGL_multi_draw extension or less performant fallback */
 __publicField(BatchedMesh, "useMultiDraw", true);
 const floatsPerMember = 32;
-const tempColor = new Color();
 const defaultStrokeColor = 8421504;
+const defaultOrient = "+x+y";
+const glyphBoundsAttrName = "aTroikaGlyphBounds";
+const glyphIndexAttrName = "aTroikaGlyphIndex";
+const memberIndexAttrName = "aTroikaTextBatchMemberIndex";
+const syncStartEvent = { type: "syncstart" };
+const syncCompleteEvent = { type: "synccomplete" };
+const SYNCABLE_PROPS = [
+  "font",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "lang",
+  "letterSpacing",
+  "lineHeight",
+  "maxWidth",
+  "overflowWrap",
+  "text",
+  "direction",
+  "textAlign",
+  "textIndent",
+  "whiteSpace",
+  "anchorX",
+  "anchorY",
+  "colorRanges",
+  "sdfGlyphSize"
+];
+const tempColor = new Color();
 const tempMat4 = new Matrix4();
 const tempVec3a = new Vector3();
 const tempVec3b = new Vector3();
 const origin = new Vector3();
-const defaultOrient = "+x+y";
+const frustum = new Frustum();
+const sphere = new Sphere();
+const box = new Box3();
 class BatchedText extends BatchedText$1 {
   // eslint-disable-next-line jsdoc/require-jsdoc
   constructor() {
     super();
-    __publicField(this, "mapInstanceIdToText", /* @__PURE__ */ new Map());
+    __publicField(this, "_needsRepack", false);
     __publicField(this, "textArray", []);
     __publicField(this, "textureNeedsUpdate", false);
+    __publicField(this, "boundsNeedsUpdate", false);
+    __publicField(this, "batchNeedsSync", true);
+    this.addEventListener("synccomplete", () => {
+      this.boundsNeedsUpdate = true;
+    });
+  }
+  /** Mark the batch as needing a sync pass. */
+  requestSync() {
+    this.batchNeedsSync = true;
   }
   /** Number of texts in the batch */
   get size() {
@@ -569,7 +606,13 @@ class BatchedText extends BatchedText$1 {
    * @returns Text object
    */
   getText(instanceId) {
-    return this.mapInstanceIdToText.get(instanceId);
+    return this.textArray[instanceId];
+  }
+  /**
+   * Mark this BatchedText as needing bounds update. This should be called when changing text transforms.
+   */
+  invalidateBounds() {
+    this.boundsNeedsUpdate = true;
   }
   /**
    * Set the visibility of the {@link Text} object by instance id.
@@ -583,17 +626,112 @@ class BatchedText extends BatchedText$1 {
   }
   addText(text, instanceId) {
     super.addText(text);
-    if (instanceId !== void 0) {
-      this.mapInstanceIdToText.set(instanceId, text);
-    }
-    this.textArray.push(text);
+    text._batchParent = this;
+    if (instanceId !== void 0) this.textArray[instanceId] = text;
+    this.batchNeedsSync = true;
+    this.boundsNeedsUpdate = true;
+  }
+  removeText(text) {
+    super.removeText(text);
+    if (text._batchParent === this) text._batchParent = void 0;
+    this.textArray.splice(this.textArray.indexOf(text), 1);
+    this.batchNeedsSync = true;
+    this.boundsNeedsUpdate = true;
   }
   dispose() {
     super.dispose();
+    this.textArray.length = 0;
     this.dispatchEvent({ type: "dispose" });
   }
-  // TODO: Check performance
-  _prepareForRender(material) {
+  updateBounds() {
+    if (this.boundsNeedsUpdate) {
+      const bbox = this.geometry.boundingBox.makeEmpty();
+      for (const text of this.textArray) {
+        if (!text.visible) continue;
+        if (text.matrixAutoUpdate) text.updateMatrix();
+        box.copy(text.geometry.boundingBox).applyMatrix4(text.matrix);
+        bbox.union(box);
+      }
+      bbox.getBoundingSphere(this.geometry.boundingSphere);
+      this.boundsNeedsUpdate = false;
+    }
+  }
+  onBeforeRender(renderer, scene, camera, geometry, material) {
+    if (this.batchNeedsSync) this.sync();
+    if ("isTroikaTextMaterial" in material && material.isTroikaTextMaterial) {
+      this.prepareForRender(material, scene, camera);
+    }
+  }
+  /**
+   * Sync members and repack the batched geometry if needed.
+   * @param callback Optional callback invoked after sync completes.
+   */
+  sync(callback) {
+    if (!this.batchNeedsSync) return;
+    this.batchNeedsSync = false;
+    let needsRepack = this._needsRepack;
+    this._needsRepack = false;
+    const pendingSyncs = [];
+    this._members.forEach((packingInfo, text) => {
+      const needsMemberSync = text._needsSync;
+      if (packingInfo.dirty || needsMemberSync) {
+        packingInfo.dirty = false;
+        needsRepack = true;
+        if (needsMemberSync) pendingSyncs.push(new Promise((resolve) => text.sync(resolve)));
+      }
+    });
+    if (!needsRepack) return;
+    this.dispatchEvent(syncStartEvent);
+    const repack = () => {
+      this.repackBatchedGeometry();
+      this.dispatchEvent(syncCompleteEvent);
+      if (callback) callback();
+    };
+    if (pendingSyncs.length) {
+      void Promise.all(pendingSyncs).then(repack);
+    } else {
+      repack();
+    }
+  }
+  repackBatchedGeometry() {
+    var _a2, _b, _c;
+    const geometry = this.geometry;
+    const batchedAttributes = geometry.attributes;
+    let memberIndexes = ((_a2 = batchedAttributes[memberIndexAttrName]) == null ? void 0 : _a2.array) ?? new Uint16Array(0);
+    let batchedGlyphIndexes = ((_b = batchedAttributes[glyphIndexAttrName]) == null ? void 0 : _b.array) ?? new Float32Array(0);
+    let batchedGlyphBounds = ((_c = batchedAttributes[glyphBoundsAttrName]) == null ? void 0 : _c.array) ?? new Float32Array(0);
+    let totalGlyphCount = 0;
+    this._members.forEach((_, { textRenderInfo }) => {
+      if (textRenderInfo) {
+        totalGlyphCount += textRenderInfo.glyphAtlasIndices.length;
+        this._textRenderInfo = textRenderInfo;
+      }
+    });
+    if (totalGlyphCount !== memberIndexes.length) {
+      memberIndexes = cloneAndResize(memberIndexes, totalGlyphCount);
+      batchedGlyphIndexes = cloneAndResize(batchedGlyphIndexes, totalGlyphCount);
+      batchedGlyphBounds = cloneAndResize(batchedGlyphBounds, totalGlyphCount * 4);
+    }
+    let memberIndex = 0;
+    let glyphIndex = 0;
+    this._members.forEach((packingInfo, { textRenderInfo }) => {
+      if (textRenderInfo) {
+        const glyphCount = textRenderInfo.glyphAtlasIndices.length;
+        memberIndexes.fill(memberIndex, glyphIndex, glyphIndex + glyphCount);
+        batchedGlyphIndexes.set(textRenderInfo.glyphAtlasIndices, glyphIndex);
+        batchedGlyphBounds.set(textRenderInfo.glyphBounds, glyphIndex * 4);
+        glyphIndex += glyphCount;
+        packingInfo.index = memberIndex++;
+      }
+    });
+    geometry.updateAttributeData(memberIndexAttrName, memberIndexes, 1);
+    geometry.getAttribute(memberIndexAttrName).setUsage(DynamicDrawUsage);
+    geometry.updateAttributeData(glyphIndexAttrName, batchedGlyphIndexes, 1);
+    geometry.updateAttributeData(glyphBoundsAttrName, batchedGlyphBounds, 4);
+    this.boundsNeedsUpdate = true;
+    this.updateBounds();
+  }
+  prepareForRender(material, scene, camera) {
     var _a2;
     const isOutline = material.isTextOutlineMaterial;
     material.uniforms.uTroikaIsOutline.value = isOutline;
@@ -612,12 +750,15 @@ class BatchedText extends BatchedText$1 {
     }
     const texData = texture.image.data;
     this.textureNeedsUpdate = false;
+    tempMat4.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).multiply(scene.matrixWorld);
+    frustum.setFromProjectionMatrix(tempMat4, camera.coordinateSystem);
     for (const text of this.textArray) {
       const index = ((_a2 = this._members.get(text)) == null ? void 0 : _a2.index) ?? -1;
       const textRenderInfo = text.textRenderInfo;
       if (index < 0 || !textRenderInfo) continue;
       const startIndex = index * floatsPerMember;
-      if (!text.visible) {
+      const isHidden = !text.visible || !frustum.intersectsSphere(sphere.copy(text.geometry.boundingSphere).applyMatrix4(text.matrix));
+      if (isHidden) {
         for (let i = 0; i < 16; i++) {
           this.setTexData(startIndex + i, 0, texData);
         }
@@ -675,6 +816,11 @@ class BatchedText extends BatchedText$1 {
   }
 }
 class Text extends Text$1 {
+  constructor() {
+    super(...arguments);
+    /** Parent batch for sync invalidation. */
+    __publicField(this, "_batchParent");
+  }
   _prepareForRender(material) {
     const isOutline = material.isTextOutlineMaterial;
     const uniforms = material.uniforms;
@@ -732,7 +878,7 @@ class Text extends Text$1 {
           blockBounds[3] + pad
         );
       }
-      this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
+      if (!this._batchParent) this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
     }
     uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
     material.polygonOffset = !!this.depthOffset;
@@ -764,6 +910,29 @@ class Text extends Text$1 {
     }
   }
 }
+SYNCABLE_PROPS.forEach((prop) => {
+  const privateKey = `_private_${prop}`;
+  Object.defineProperty(Text.prototype, prop, {
+    get() {
+      return this[privateKey];
+    },
+    set(value) {
+      var _a2;
+      const target = this;
+      if (value !== target[privateKey]) {
+        target[privateKey] = value;
+        target._needsSync = true;
+        (_a2 = target._batchParent) == null ? void 0 : _a2.requestSync();
+      }
+    }
+  });
+});
+function cloneAndResize(source, newLength) {
+  const constructor = source.constructor;
+  const copy = new constructor(newLength);
+  copy.set(source.subarray(0, newLength));
+  return copy;
+}
 function setDimming(root, dim) {
   root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
 }
@@ -2001,19 +2170,30 @@ class TextSystem extends RenderableSystem {
     group.add(newBatchedText);
   }
   updateDefImpl(textDef, mesh, instanceIds) {
-    for (const [i, line] of textDef.lines.entries()) {
+    const lines = [];
+    for (let i = 0; i < textDef.lines.length; i++) {
+      const line = textDef.lines[i];
       const text = mesh.getText(instanceIds[i]);
-      if (text) {
-        text.text = line.text;
-        text.color = this.textColor.set(line.color).getHex(LinearSRGBColorSpace);
-        text.font = line.fontUrl;
-        if (line.stroke) {
-          text.outlineColor = line.stroke.color;
-          text.outlineWidth = line.stroke.width / line.fontSize;
-        }
+      if (line.fontSize === 0) {
+        text.visible = false;
+        continue;
       }
+      text.visible = true;
+      text.text = line.text;
+      text.color = this.textColor.set(line.color).getHex(LinearSRGBColorSpace);
+      text.font = line.fontUrl;
+      if (line.stroke) {
+        text.outlineColor = line.stroke.color;
+        text.outlineWidth = line.fontSize == 0 ? 0 : line.stroke.width / line.fontSize;
+      }
+      const fontSize = line.fontSize;
+      const height = line.text.split("\n").length * text.lineHeight * fontSize;
+      lines.push({ text, fontSize, height });
+    }
+    if (lines.length > 0) {
+      if (textDef.alignment.vertical === "bottom") lines.reverse();
+      this.updateScale(textDef, mesh, lines);
     }
-    this.updateScale(textDef);
   }
   buildBatchedText(layer) {
     const textDefs = layer.children;
@@ -2028,6 +2208,7 @@ class TextSystem extends RenderableSystem {
         text.fontSize = 1;
         text.lineHeight = 1.1;
         text.whiteSpace = "nowrap";
+        text.clipRect = [0, 0, 0, 0];
         batchedText.addText(text, instanceId);
         instanceIds.push(instanceId);
         instanceId++;
@@ -2047,9 +2228,8 @@ class TextSystem extends RenderableSystem {
     return batchedText;
   }
   // TODO: Simplify
-  updateScale(textDef) {
+  updateScale(textDef, mesh, lines) {
     const dpr = this.renderer.context.getPixelRatio();
-    const lines = this.getTextLines(textDef);
     this.calculateStartInBoundsPosition(
       textDef,
       lines,
@@ -2057,41 +2237,18 @@ class TextSystem extends RenderableSystem {
       this.alignmentOffset,
       this.localPosition
     );
-    for (const { text, fontSize, height, alignment } of lines) {
-      if (!fontSize || !height) {
-        text.visible = false;
-        continue;
-      }
-      text.visible = true;
-      setAnchorsAndAlignment(text, alignment);
+    for (const { text, fontSize, height } of lines) {
+      setAnchorsAndAlignment(text, textDef.alignment);
       this.worldPosition.copy(this.localPosition).rotateAround({ x: 0, y: 0 }, textDef.bounds.rotation).add(textDef.bounds.center);
       this.textScale.copy(this.initialTextScale).multiplyScalar(fontSize * dpr);
       text.scale.set(this.textScale.x, this.textScale.y, 1);
       text.position.set(this.worldPosition.x, this.worldPosition.y, 0);
       text.rotation.set(0, 0, textDef.bounds.rotation);
-      text.clipRect = this.calculateClipRect(
-        textDef,
-        this.localPosition,
-        this.textScale,
-        this.localToMin,
-        this.localToMax
-      );
+      this.calculateClipRect(text, textDef, this.localPosition, this.textScale, this.localToMin, this.localToMax);
       this.localPosition.y += height * dpr;
+      mesh.invalidateBounds();
     }
   }
-  getTextLines(textDef) {
-    const { object: mesh, instanceIds } = this.getObjectInstanceByDef(textDef);
-    const alignment = textDef.alignment;
-    const lines = instanceIds.map((instanceId, i) => {
-      const text = mesh.getText(instanceId);
-      const line = textDef.lines[i];
-      const fontSize = line.fontSize;
-      const height = fontSize ? text.text.split("\n").length * text.lineHeight * fontSize : 0;
-      return { text, fontSize, height, alignment };
-    });
-    if (alignment.vertical === "bottom") lines.reverse();
-    return lines;
-  }
   calculateStartInBoundsPosition(textDef, lines, alignmentDirection, alignmentOffset, inBoundsPosition) {
     const padding = textDef.padding;
     const alignment = textDef.alignment;
@@ -2106,10 +2263,13 @@ class TextSystem extends RenderableSystem {
     }
     inBoundsPosition.multiply(alignmentDirection);
   }
-  calculateClipRect(textDef, inBoundsPosition, textScale, toMin, toMax) {
+  calculateClipRect(text, textDef, inBoundsPosition, textScale, toMin, toMax) {
     toMin.subVectors(textDef.bounds.min, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
     toMax.subVectors(textDef.bounds.max, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
-    return [toMin.x, toMin.y, toMax.x, toMax.y];
+    text.clipRect[0] = toMin.x;
+    text.clipRect[1] = toMin.y;
+    text.clipRect[2] = toMax.x;
+    text.clipRect[3] = toMax.y;
   }
 }
 function getAlignmentDirection(alignment) {
@@ -2147,7 +2307,8 @@ class LayerSystem {
     __publicField(this, "mapLayerDefToParent", /* @__PURE__ */ new Map());
     __publicField(this, "layerDefRenderOrder", []);
     __publicField(this, "pendingDefs", /* @__PURE__ */ new Set());
-    __publicField(this, "useUpdateBuffering", false);
+    __publicField(this, "culledDefs", /* @__PURE__ */ new Set());
+    __publicField(this, "useUpdateBuffering", true);
     this.renderer = renderer;
     this.materialSystem = new MaterialSystem();
     this.meshSystem = new MeshSystem(this.materialSystem, this.renderer);
@@ -2181,30 +2342,57 @@ class LayerSystem {
    */
   updateDefs(defs) {
     for (const def of defs) {
-      if (this.useUpdateBuffering) this.pendingDefs.add(def);
-      else this.updateDef(def);
+      if (this.useUpdateBuffering) {
+        this.pendingDefs.add(def);
+        this.culledDefs.delete(def);
+      } else this.updateDef(def);
     }
   }
   /**
    * Drain the queued updates within a time budget.
    * Returns true if any def was updated during this call.
+   * @param scene {@link Scene} instance to get the world matrix from
+   * @param camera {@link Camera} instance to do frustum culling against
    * @param timeBudgetMs frame time budget to perform updates in milliseconds
    * @returns true if any def was updated during this call
    */
-  processPendingUpdates(timeBudgetMs = 5) {
+  processPendingUpdates(scene, camera, timeBudgetMs = -1) {
     if (!this.useUpdateBuffering) return false;
-    if (this.pendingDefs.size === 0) return false;
+    if (this.pendingDefs.size === 0 && this.culledDefs.size === 0) return false;
     const startTime = performance.now();
-    let processed = 0;
-    while (this.pendingDefs.size && performance.now() - startTime < timeBudgetMs) {
-      const def = this.pendingDefs.values().next().value;
+    _matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).multiply(scene.matrixWorld);
+    _frustum.setFromProjectionMatrix(_matrix, camera.coordinateSystem);
+    let processedCount = 0;
+    const overBudget = () => timeBudgetMs > 0 && performance.now() - startTime >= timeBudgetMs;
+    for (const def of this.pendingDefs) {
+      if (overBudget()) break;
+      let culled = false;
       this.pendingDefs.delete(def);
+      if (isTextDef(def) || isImageDef(def)) {
+        const bounds = def.bounds;
+        _box.min.set(bounds.min.x, bounds.min.y, 0);
+        _box.max.set(bounds.max.x, bounds.max.y, 0);
+        culled = !_frustum.intersectsBox(_box);
+      }
+      if (culled) this.culledDefs.add(def);
+      else {
+        this.updateDef(def);
+        processedCount++;
+      }
+    }
+    for (const def of this.culledDefs) {
+      if (overBudget()) break;
+      this.culledDefs.delete(def);
       this.updateDef(def);
-      processed++;
+      processedCount++;
     }
     const took = (performance.now() - startTime).toFixed(2);
-    if (processed) logger$5.debug(`processed ${processed} defs in ${took}ms, ${this.pendingDefs.size} remaining`);
-    return processed > 0;
+    if (processedCount > 0) {
+      const culled = this.culledDefs.size;
+      const remaining = this.pendingDefs.size;
+      logger$5.debug(`processed ${processedCount} defs (${culled} culled, ${remaining} remaining) in ${took}ms`);
+    }
+    return processedCount > 0;
   }
   /**
    * Build the scene graph from the given scene definition.
@@ -2337,6 +2525,9 @@ class LayerSystem {
     return fullName;
   }
 }
+const _matrix = new Matrix4();
+const _frustum = new Frustum();
+const _box = new Box3();
 /*!
  * camera-controls
  * https://github.com/yomotsu/camera-controls
@@ -4947,6 +5138,17 @@ class CameraSystem {
     if (zoomFactor <= 0) return this.zoomIdentityDistance;
     return this.zoomIdentityDistance / zoomFactor;
   }
+  /**
+   * Set the zoom factor bounds.
+   * @param minZoom Minimum zoom factor. Default is 0.1.
+   * @param maxZoom Maximum zoom factor. Default is 35.
+   */
+  setZoomBounds(minZoom, maxZoom) {
+    if (!this.zoomBounds) return;
+    if (minZoom) this.zoomBounds[0] = minZoom;
+    if (maxZoom) this.zoomBounds[1] = maxZoom;
+    this.updateCamera();
+  }
   /**
    * Initializes the camera with the given zoom bounds.
    * @param zoomBounds [minZoom, maxZoom]
@@ -5292,7 +5494,7 @@ class ViewportSystem {
    */
   initViewport(sceneDef) {
     if (!this.renderer.isExternalMode) this.sceneSystem.initScene(sceneDef.viewbox);
-    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.x > 1e5 ? 100 : 35]);
+    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.x > 1e4 ? 100 : 35]);
   }
   /** Updates the viewport when the renderer size changes. */
   updateViewport() {
@@ -5397,12 +5599,28 @@ class ViewportSystem {
   zoomFactorToDistance(zoomFactor) {
     return this.cameraSystem.zoomFactorToDistance(zoomFactor);
   }
+  /**
+   * Set the maximum zoom factor. Default is 35.
+   * @param maxZoom Maximum zoom factor
+   */
+  setMaxZoom(maxZoom) {
+    this.cameraSystem.setZoomBounds(void 0, maxZoom);
+  }
+  /**
+   * Set the minimum zoom factor. Default is 0.1.
+   * @param minZoom Minimum zoom factor
+   */
+  setMinZoom(minZoom) {
+    this.cameraSystem.setZoomBounds(minZoom, void 0);
+  }
 }
 function asViewportAPI(viewportSystem) {
   return {
     canvasToSvg: viewportSystem.canvasToSvg.bind(viewportSystem),
     setStaticTransform: viewportSystem.setStaticTransform.bind(viewportSystem),
-    setDynamicTransform: viewportSystem.setDynamicTransform.bind(viewportSystem)
+    setDynamicTransform: viewportSystem.setDynamicTransform.bind(viewportSystem),
+    setMaxZoom: viewportSystem.setMaxZoom.bind(viewportSystem),
+    setMinZoom: viewportSystem.setMinZoom.bind(viewportSystem)
   };
 }
 function eventToCanvas(event) {
@@ -6418,10 +6636,13 @@ class Renderer {
     const api = asViewportAPI(this.viewportSystem);
     const guard = (name) => this.assertInitialized(`viewport.${name}`) && this.assertNotDisposed(`viewport.${name}`);
     const guardExternal = (name) => guard(name) && this.assertExternalMode(`viewport.${name}`);
+    const guardNotExternal = (name) => guard(name) && this.assertNotExternalMode(`viewport.${name}`);
     this.viewportAPI = {
       canvasToSvg: guardFn(guard, api.canvasToSvg, { x: 0, y: 0 }),
       setStaticTransform: guardFn(guardExternal, api.setStaticTransform),
-      setDynamicTransform: guardFn(guardExternal, api.setDynamicTransform)
+      setDynamicTransform: guardFn(guardExternal, api.setDynamicTransform),
+      setMaxZoom: guardFn(guardNotExternal, api.setMaxZoom),
+      setMinZoom: guardFn(guardNotExternal, api.setMinZoom)
     };
     return this.viewportAPI;
   }
@@ -6521,12 +6742,13 @@ class Renderer {
     (_b = (_a2 = this.ui) == null ? void 0 : _a2.stats) == null ? void 0 : _b.begin();
     if (this.isExternalMode) this.renderer.resetState();
     else this.resizeCanvasToDisplaySize();
-    this.viewportSystem.updatePtScale();
-    const hasDefsUpdated = this.layerSystem.processPendingUpdates();
+    const { scene, camera } = this.viewportSystem;
     const hasControlsUpdated = this.interactionsSystem.updateControls(this.clock.getDelta());
+    this.viewportSystem.updatePtScale();
+    const hasDefsUpdated = this.layerSystem.processPendingUpdates(scene, camera, 3);
     const needsRedraw = this.needsRedraw || hasControlsUpdated || hasDefsUpdated || this.isExternalMode || this.ui;
     if (needsRedraw) {
-      this.renderer.render(this.viewportSystem.scene, this.viewportSystem.camera);
+      this.renderer.render(scene, camera);
       this.needsRedraw = false;
     }
     (_d = (_c = this.ui) == null ? void 0 : _c.stats) == null ? void 0 : _d.end();
@@ -6562,7 +6784,8 @@ class Renderer {
   // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
   resizeCanvasToDisplaySize() {
     const dpr = window.devicePixelRatio;
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = this.canvas.clientWidth;
+    const height = this.canvas.clientHeight;
     const displayWidth = Math.floor(width * dpr);
     const displayHeight = Math.floor(height * dpr);
     if (this.canvas.width !== displayWidth || this.canvas.height !== displayHeight || this.renderer.getPixelRatio() !== dpr) {
@@ -6670,8 +6893,6 @@ export {
   Polygon,
   Rect,
   Renderer,
-  createVector2,
-  createVector3,
   isImageDef,
   isImageLayer,
   isLayerDef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "type": "module",
   "files": [
     "dist"