@expofp/renderer 2.0.0 → 2.0.1

package/dist/index.d.ts

@@ -408,8 +408,6 @@ export declare type RenderableDefCollection<T = RenderableDef> = T extends Rende
  * Main class for rendering the content of a {@link SceneDef}
  */
 export declare class Renderer {
-    /** Whether to log debug information */
-    readonly debugLog: boolean;
     /** {@link HTMLCanvasElement} that this renderer is rendering to */
     readonly canvas: HTMLCanvasElement;
     private ui?;
@@ -523,8 +521,6 @@ export declare interface RendererOptions {
     canvas: HTMLCanvasElement;
     /** Optional {@link WebGLRenderingContext} to use (e.g. for Mapbox GL JS) */
     gl?: WebGLRenderingContext;
-    /** Whether to log debug information */
-    debugLog?: boolean;
     /** Optional partial {@link UI} configuration */
     ui?: Partial<UI>;
 }

package/dist/index.js

@@ -5,6 +5,7 @@ var _a;
 import { Color, Matrix4, Vector3, DataTexture, RGBAFormat, FloatType, RedFormat, UnsignedIntType, IntType, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Mesh, LessEqualDepth, Quaternion, BufferGeometry, LinearSRGBColorSpace, Plane, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Camera, Scene, MathUtils, Clock, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
+import createLog from "debug";
 import { LineMaterial, LineSegmentsGeometry } from "three/examples/jsm/Addons.js";
 import { MaxRectsPacker, Rectangle } from "maxrects-packer";
 import { converter, parse } from "culori";
@@ -366,6 +367,34 @@ const dimColorFrag = (
     return vec4(m * col.a, col.a);
   }`
 );
+function createLogger(namespace) {
+  const info = createLog(namespace);
+  info.log = console.info.bind(console);
+  const debug = info.extend("debug");
+  debug.log = console.debug.bind(console);
+  const warn = info.extend("warn");
+  warn.log = console.warn.bind(console);
+  const error = info.extend("error");
+  error.log = console.error.bind(console);
+  return {
+    debug,
+    info,
+    warn,
+    error
+  };
+}
+function printTree(object, logger2) {
+  if (!logger2.enabled) return;
+  const isGroup = object.isGroup;
+  const name = object.name.split(":").at(-1);
+  if (isGroup) {
+    console.groupCollapsed(name);
+    object.children.forEach((child) => printTree(child, logger2));
+    console.groupEnd();
+  } else {
+    logger2.log(`${name}<${object.type}>, render order: ${object.renderOrder}`);
+  }
+}
 function isObject(item) {
   return !!item && typeof item === "object" && !Array.isArray(item);
 }
@@ -394,7 +423,7 @@ function getSquareTextureSize(capacity, pixelsPerInstance) {
 }
 function getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity) {
   if (channels === 3) {
-    console.warn('"channels" cannot be 3. Set to 4. More info: https://github.com/mrdoob/three.js/pull/23228');
+    logger$b.debug('"channels" cannot be 3. Set to 4. More info: https://github.com/mrdoob/three.js/pull/23228');
     channels = 4;
   }
   const size = getSquareTextureSize(capacity, pixelsPerInstance);
@@ -416,6 +445,7 @@ function getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity)
   }
   return { array, size, type, format };
 }
+const logger$b = createLogger("SquareDataTexture");
 class SquareDataTexture extends DataTexture {
   /**
    * @param arrayType The constructor for the TypedArray.
@@ -453,7 +483,7 @@ class SquareDataTexture extends DataTexture {
   setUniformAt(id, name, value) {
     const schema = this.uniformMap.get(name);
     if (!schema) {
-      console.warn(`SquareDataTexture.setUniformAt: uniform ${name} not found`);
+      logger$b.debug(`setUniformAt: uniform ${name} not found`);
       return;
     }
     const { offset, size } = schema;
@@ -474,7 +504,7 @@ class SquareDataTexture extends DataTexture {
   getUniformAt(id, name, target) {
     const schema = this.uniformMap.get(name);
     if (!schema) {
-      console.warn(`SquareDataTexture.getUniformAt: uniform ${name} not found`);
+      logger$b.debug(`getUniformAt: uniform ${name} not found`);
       return 0;
     }
     const { offset, size } = schema;
@@ -620,6 +650,7 @@ class SquareDataTexture extends DataTexture {
 }
 const componentsArray = ["r", "g", "b", "a"];
 const batchIdName = "batchId";
+const logger$a = createLogger("BatchedMesh");
 const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
   /**
    * @param instanceCount the max number of individual geometries planned to be added.
@@ -699,7 +730,7 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
     if (_BatchedMesh.useMultiDraw) return;
     const batchCount = this.batchCount;
     const gl = renderer.getContext();
-    if (geometry.index == null) return console.warn("No index buffer", (_a2 = this.parent) == null ? void 0 : _a2.name);
+    if (geometry.index == null) return logger$a.debug("No index buffer", (_a2 = this.parent) == null ? void 0 : _a2.name);
     const type = this.getIndexType(gl, geometry.index);
     gl.drawElements(gl.TRIANGLES, batchCount, type, 0);
     renderer.info.update(batchCount, gl.TRIANGLES, 1);
@@ -714,7 +745,7 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
    */
   getUniformAt(id, name, target) {
     if (!this.uniformsTexture) {
-      console.warn(`BatchedMesh.getUniformAt: uniforms texture not initialized`);
+      logger$a.debug(`getUniformAt: uniforms texture not initialized`);
       return 0;
     }
     return this.uniformsTexture.getUniformAt(id, name, target);
@@ -727,7 +758,7 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
    */
   setUniformAt(instanceId, name, value) {
     if (!this.uniformsTexture) {
-      console.warn(`BatchedMesh.setUniformAt: uniforms texture not initialized`);
+      logger$a.debug(`setUniformAt: uniforms texture not initialized`);
       return;
     }
     this.uniformsTexture.setUniformAt(instanceId, name, value);
@@ -1086,12 +1117,14 @@ class RenderableSystem {
   /**
    * @param type readable name of the system's type for debugging
    * @param renderer {@link Renderer}
+   * @param logger {@link Logger}
    */
-  constructor(type, renderer) {
+  constructor(type, renderer, logger2) {
     __publicField(this, "mapDefToObject", /* @__PURE__ */ new Map());
     __publicField(this, "mapObjectToDefs", /* @__PURE__ */ new Map());
     this.type = type;
     this.renderer = renderer;
+    this.logger = logger2;
   }
   /**
    * Update a def with its current properties.
@@ -1118,7 +1151,7 @@ class RenderableSystem {
    * @param layerDef {@link TypedLayerDef} layer definition to update
    */
   updateLayer(group, layerDef) {
-    if (this.renderer.debugLog) console.log(`Updating ${this.type} layer ${layerDef.name}`, layerDef);
+    this.logger.debug(`Updating layer ${layerDef.name} %O`, layerDef);
     this.updateLayerImpl(group, layerDef);
   }
   /**
@@ -1223,7 +1256,7 @@ class RenderableSystem {
   registerDefObject(def, object, instanceIds) {
     const ids = Array.isArray(instanceIds) ? instanceIds : [instanceIds];
     if (ids.length === 0) {
-      console.warn(`[RenderableSystem] Tried to register def with empty instanceIds:`, def);
+      this.logger.debug(`Tried to register def with empty instanceIds %O`, def);
       return;
     }
     this.mapDefToObject.set(def, { object, instanceIds: ids });
@@ -1282,7 +1315,7 @@ class RenderableSystem {
   getObjectInstanceByDef(def) {
     const mapping = this.mapDefToObject.get(def);
     if (!mapping) {
-      console.warn(`[RenderableSystem] No object mapping found for def:`, def);
+      this.logger.debug(`No object mapping found for def %O`, def);
       return void 0;
     }
     return mapping;
@@ -1303,13 +1336,14 @@ class RenderableSystem {
     return Array.from(this.mapObjectToDefs.keys());
   }
 }
+const logger$9 = createLogger("image");
 class ImageSystem extends RenderableSystem {
   /**
    * @param materialSystem {@link MaterialSystem}
    * @param renderer {@link Renderer}
    */
   constructor(materialSystem, renderer) {
-    super("image", renderer);
+    super("image", renderer, logger$9);
     /** Textures memory limit in megabytes */
     __publicField(this, "memoryLimitMb");
     __publicField(this, "packer");
@@ -1319,7 +1353,7 @@ class ImageSystem extends RenderableSystem {
     __publicField(this, "scaleMatrix", new Matrix4());
     this.materialSystem = materialSystem;
     const atlasTextureSize = renderer.context.capabilities.maxTextureSize;
-    console.log(`Max texture size: ${atlasTextureSize}`);
+    logger$9.debug(`Max texture size: ${atlasTextureSize}`);
     const padding = 1;
     this.packer = new MaxRectsPacker(atlasTextureSize, atlasTextureSize, padding, { pot: false });
   }
@@ -1369,10 +1403,10 @@ class ImageSystem extends RenderableSystem {
   resizeTextures() {
     var _a2;
     if (!this.memoryLimitMb) {
-      console.warn("Memory limit is not set, unable to resize textures.");
+      logger$9.debug("Memory limit is not set, unable to resize textures.");
       return;
     }
-    console.log(`Resizing textures to fit memory limit: ${this.memoryLimitMb} MB`);
+    logger$9.debug(`Resizing textures to fit memory limit: ${this.memoryLimitMb} MB`);
     const texturesToResize = [];
     let totalResizable = 0;
     let totalNonResizable = 0;
@@ -1389,15 +1423,15 @@ class ImageSystem extends RenderableSystem {
     }
     const budget = this.memoryLimitMb * 1024 * 1024 - totalNonResizable;
     if (budget < 0) {
-      console.warn("Memory limit is too low, unable to resize textures.");
+      logger$9.debug("Memory limit is too low, unable to resize textures.");
       return;
     }
     const resizeFactor = Math.sqrt(budget / totalResizable);
     if (resizeFactor >= 1) {
-      console.log("Textures are already within the memory limit, no need to resize");
+      logger$9.debug("Textures are already within the memory limit, no need to resize");
       return;
     }
-    console.log(`Resize factor: ${resizeFactor}`);
+    logger$9.debug(`Resize factor: ${resizeFactor}`);
     let newTotal = totalNonResizable;
     for (const mesh of texturesToResize) {
       const material = mesh.material;
@@ -1405,14 +1439,14 @@ class ImageSystem extends RenderableSystem {
       const resizedTexture = resizeTexture(texture, resizeFactor);
       const textureDim = `${texture.image.width}x${texture.image.height}`;
       const resizedDim = `${resizedTexture.image.width}x${resizedTexture.image.height}`;
-      console.log(`Resized atlas for ${mesh.name || ((_a2 = mesh.parent) == null ? void 0 : _a2.name)}, from ${textureDim} to ${resizedDim}`);
+      logger$9.debug(`Resized atlas for ${mesh.name || ((_a2 = mesh.parent) == null ? void 0 : _a2.name)}, from ${textureDim} to ${resizedDim}`);
       newTotal += getTextureSizeBytes(resizedTexture);
       material.map = resizedTexture;
       material.needsUpdate = true;
       texture.dispose();
       mesh.userData["nonResizable"] = true;
     }
-    console.log(`New memory usage after resizing: ${newTotal} bytes`);
+    logger$9.debug(`New memory usage after resizing: ${newTotal} bytes`);
   }
   updateDefImpl(imageDef, mesh, instanceIds) {
     const bounds = imageDef.bounds;
@@ -1441,8 +1475,8 @@ class ImageSystem extends RenderableSystem {
         const boundsArea = boundsWidth * boundsHeight;
         const ratio = sourceArea / boundsArea;
         if (ratio > 1e3) {
-          console.log(`Image bounds: ${boundsWidth}x${boundsHeight}`, `Image source: ${sourceWidth}x${sourceHeight}`);
-          console.warn(`Image bounds area is ${ratio.toFixed(2)} times smaller than the image.`);
+          logger$9.debug(`Image bounds: ${boundsWidth}x${boundsHeight}`, `Image source: ${sourceWidth}x${sourceHeight}`);
+          logger$9.warn(`Image bounds area is ${ratio.toFixed(2)} times smaller than the image.`);
         }
         const rect = new Rectangle(image.source.width, image.source.height);
         rect.data = [imageWithIndex];
@@ -1453,7 +1487,7 @@ class ImageSystem extends RenderableSystem {
       }
     }
     this.packer.addArray(rectangles);
-    this.packer.bins.forEach((bin) => console.log(`Bin: ${bin.width}x${bin.height}, ${bin.rects.length} rectangles`));
+    this.packer.bins.forEach((bin) => logger$9.debug(`Bin: ${bin.width}x${bin.height}, ${bin.rects.length} rectangles`));
     return this.packer.bins;
   }
 }
@@ -1467,7 +1501,7 @@ function createAtlas(bin) {
     ctx.drawImage(rect.data[0].def.source, rect.x, rect.y, rect.width, rect.height);
   }
   const t1 = performance.now();
-  console.log(`Create atlas took ${(t1 - t0).toFixed(2)} milliseconds.`);
+  logger$9.debug(`Create atlas took ${(t1 - t0).toFixed(2)} milliseconds.`);
   return createTexture(canvas);
 }
 function resizeTexture(texture, resizeFactor) {
@@ -1490,13 +1524,14 @@ function getTextureSizeBytes(texture) {
   const imageBytes = texture.image.width * texture.image.height * 4 * (texture.generateMipmaps ? 1.33 : 1);
   return Math.ceil(imageBytes);
 }
+const logger$8 = createLogger("line");
 class LineSystem extends RenderableSystem {
   /**
    * @param materialSystem {@link MaterialSystem}
    * @param renderer {@link Renderer}
    */
   constructor(materialSystem, renderer) {
-    super("line", renderer);
+    super("line", renderer, logger$8);
     __publicField(this, "lineColor", new Color());
     this.materialSystem = materialSystem;
   }
@@ -1685,13 +1720,14 @@ class Polygon {
     return this;
   }
 }
+const logger$7 = createLogger("mesh");
 class MeshSystem extends RenderableSystem {
   /**
    * @param materialSystem {@link MaterialSystem}
    * @param renderer {@link Renderer}
    */
   constructor(materialSystem, renderer) {
-    super("mesh", renderer);
+    super("mesh", renderer, logger$7);
     __publicField(this, "toRgbConverter", converter("rgb"));
     __publicField(this, "meshColor", new Color());
     this.materialSystem = materialSystem;
@@ -1802,13 +1838,14 @@ class MeshSystem extends RenderableSystem {
     });
   }
 }
+const logger$6 = createLogger("text");
 class TextSystem extends RenderableSystem {
   /**
    * @param materialSystem {@link MaterialSystem}
    * @param renderer {@link Renderer}
    */
   constructor(materialSystem, renderer) {
-    super("text", renderer);
+    super("text", renderer, logger$6);
     __publicField(this, "initialTextScale", new Vector2(1, -1));
     __publicField(this, "textColor", new Color());
     __publicField(this, "pendingUpdates", /* @__PURE__ */ new Map());
@@ -1996,6 +2033,7 @@ function setAnchorsAndAlignment(text, alignment) {
   text.anchorY = alignment.vertical === "bottom" ? "bottom" : "top";
   text.textAlign = alignment.text ?? alignment.horizontal;
 }
+const logger$5 = createLogger("layer");
 class LayerSystem {
   /**
    * @param renderer {@link Renderer}
@@ -2067,12 +2105,8 @@ class LayerSystem {
       this.updateDef(def);
       processed++;
     }
-    const took = performance.now() - startTime;
-    if (processed && this.renderer.debugLog) {
-      console.log(
-        `LayerSystem: processed ${processed} defs in ${took.toFixed(2)}ms, ${this.pendingDefs.size} remaining`
-      );
-    }
+    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;
   }
   /**
@@ -2082,11 +2116,8 @@ class LayerSystem {
    */
   buildScene(sceneDef) {
     this.initRenderOrder(sceneDef.rootLayer);
-    if (this.renderer.debugLog)
-      console.log(
-        "Render order",
-        this.layerDefRenderOrder.map((layer) => this.getFullLayerName(layer))
-      );
+    const renderOrder = this.layerDefRenderOrder.map((layer) => this.getFullLayerName(layer));
+    logger$5.debug("Render order %O", renderOrder);
     const rootGroup = new Group();
     rootGroup.name = sceneDef.rootLayer.name;
     this.mapLayerDefsToObjects.set(sceneDef.rootLayer, rootGroup);
@@ -2095,7 +2126,7 @@ class LayerSystem {
       rootGroup.add(this.buildLayer(child));
     }
     this.updateLayer(sceneDef.rootLayer, false);
-    if (this.renderer.debugLog) printTree(rootGroup);
+    printTree(rootGroup, logger$5.debug);
     if (sceneDef.memoryLimit) {
       this.imageSystem.memoryLimitMb = sceneDef.memoryLimit;
       this.imageSystem.resizeTextures();
@@ -2139,7 +2170,7 @@ class LayerSystem {
   }
   buildLayer(layerDef, parentPrefix = "") {
     const layerFullName = parentPrefix + layerDef.name;
-    console.log(`Building layer ${layerFullName}...`);
+    logger$5.debug(`Building layer ${layerFullName}...`);
     let layerObject;
     if (isShapeLayer(layerDef)) layerObject = this.meshSystem.buildLayer(layerDef);
     else if (isImageLayer(layerDef)) layerObject = this.imageSystem.buildLayer(layerDef);
@@ -2209,19 +2240,6 @@ class LayerSystem {
     return fullName;
   }
 }
-function printTree(object, fullName = false) {
-  object.traverse((obj) => {
-    let s = "";
-    let obj2 = obj;
-    while (obj2 !== object) {
-      s = "|___ " + s;
-      obj2 = (obj2 == null ? void 0 : obj2.parent) ?? null;
-    }
-    const renderOrder = obj.isGroup ? "" : `, RO: ${obj.renderOrder}`;
-    const name = fullName ? obj.name : obj.name.split(":").at(-1);
-    console.log(`${s}${name}<${obj.type}>${renderOrder}`);
-  });
-}
 /*!
  * camera-controls
  * https://github.com/yomotsu/camera-controls
@@ -4750,14 +4768,13 @@ const subsetOfTHREE = {
   Plane
 };
 CameraControls.install({ THREE: subsetOfTHREE });
+const logger$4 = createLogger("cameraController");
 class CameraController extends CameraControls {
   /**
    * @param camera {@link PerspectiveCamera} instance
-   * @param renderer {@link Renderer} instance
    */
-  constructor(camera, renderer) {
+  constructor(camera) {
     super(camera);
-    this.renderer = renderer;
     this.dollyToCursor = true;
     this.draggingSmoothTime = 0;
     void this.rotatePolarTo(0, false);
@@ -4774,15 +4791,13 @@ class CameraController extends CameraControls {
     };
   }
   update(delta) {
-    var _a2;
     const needsUpdate = super.update(delta);
-    if (needsUpdate && ((_a2 = this.renderer) == null ? void 0 : _a2.debugLog)) {
-      const position = this.camera.position.toArray().map((value) => value.toFixed(2)).join(", ");
-      const target = this._target.toArray().map((value) => value.toFixed(2)).join(", ");
-      const spherical = [this._spherical.theta * RAD2DEG, this._spherical.phi * RAD2DEG, this._spherical.radius].map((value) => value.toFixed(2)).join(", ");
-      console.log(`position: [${position}]
-target: [${target}]
-spherical: [${spherical}]`);
+    if (needsUpdate) {
+      const position = this.camera.position.toArray().map((value) => +value.toFixed(2));
+      const target = this._target.toArray().map((value) => +value.toFixed(2));
+      const { theta, phi, radius } = this._spherical;
+      const spherical = [theta * RAD2DEG, phi * RAD2DEG, radius].map((value) => +value.toFixed(2));
+      logger$4.debug("camera update %O", { position, target, spherical });
     }
     return needsUpdate;
   }
@@ -4810,7 +4825,7 @@ class CameraSystem {
     this.prevViewportHeightPx = h;
     this.camera = new PerspectiveCamera(this.defaultFov);
     this.camera.up.set(0, 0, -1);
-    this.controller = new CameraController(this.camera, this.renderer);
+    this.controller = new CameraController(this.camera);
     this.controller.distance = this.zoomIdentityDistance;
   }
   /** Current camera zoom factor. */
@@ -4823,6 +4838,7 @@ class CameraSystem {
    * @returns Corresponding camera distance on the Z axis
    */
   zoomFactorToDistance(zoomFactor) {
+    if (zoomFactor <= 0) return this.zoomIdentityDistance;
     return this.zoomIdentityDistance / zoomFactor;
   }
   /**
@@ -4878,6 +4894,7 @@ class CameraSystem {
     return zid / (this.controller.distance || zid);
   }
 }
+const logger$3 = createLogger("external");
 class ExternalSystem {
   /**
    * @param pickingSystem {@link PickingSystem} instance
@@ -4974,7 +4991,7 @@ class ExternalSystem {
   }
   validateMatrix(matrix, name) {
     if (matrix.length !== 16) {
-      console.warn(`[ViewportSystem.${name}]: Matrix must be 16 elements long`);
+      logger$3.warn(`${name}: Matrix must be 16 elements long`);
       return false;
     }
     return true;
@@ -5102,6 +5119,7 @@ class SceneSystem {
     this.scene.matrixWorldNeedsUpdate = true;
   }
 }
+const logger$2 = createLogger("viewport");
 class ViewportSystem {
   /**
    * @param renderer {@link Renderer} instance
@@ -5172,7 +5190,7 @@ class ViewportSystem {
   updatePtScale() {
     const pxToSvgScale = this.pxToSvgScale;
     if (Math.abs(pxToSvgScale - (this.prevPxToSvgScale ?? 0)) < this.pxToSvgScaleThreshold) return;
-    if (this.renderer.debugLog) console.log("pxToSvgScale", +pxToSvgScale.toFixed(3));
+    logger$2.debug(`pxToSvgScale ${+pxToSvgScale.toFixed(3)}`);
     this.eventSystem.emit("viewport:ptscale", pxToSvgScale);
     this.prevPxToSvgScale = pxToSvgScale;
   }
@@ -5219,9 +5237,13 @@ class ViewportSystem {
    * @returns Point in NDC space
    */
   canvasToNDC(point, out = new Vector2()) {
+    const [w, h] = this.renderer.size;
+    if (w <= 0 || h <= 0) {
+      logger$2.warn("canvasToNDC: renderer size is 0");
+      return out.set(0, 0);
+    }
     const dpr = this.renderer.context.getPixelRatio();
-    const [width, height] = [this.renderer.size[0] / dpr, this.renderer.size[1] / dpr];
-    const uv = [point.x / width, point.y / height];
+    const uv = [point.x / (w / dpr), point.y / (h / dpr)];
     const ndc = [uv[0] * 2 - 1, -uv[1] * 2 + 1];
     return out.set(MathUtils.clamp(ndc[0], -1, 1), MathUtils.clamp(ndc[1], -1, 1));
   }
@@ -5271,6 +5293,7 @@ function asViewportAPI(viewportSystem) {
 function eventToCanvas(event) {
   return { x: event.offsetX, y: event.offsetY };
 }
+const logger$1 = createLogger("controls");
 class ControlsSystem {
   /**
    * @param renderer {@link Renderer} instance
@@ -5321,6 +5344,10 @@ class ControlsSystem {
       [Math.min(...xValues), Math.min(...yValues)],
       [Math.max(...xValues), Math.max(...yValues)]
     );
+    if (sourceRect.size.x <= 0 || sourceRect.size.y <= 0) {
+      logger$1.warn("zoomTo: sourceRect size is 0");
+      return;
+    }
     const targetRect = visibleRect ? new Rect(visibleRect.min.clone().multiplyScalar(dpr), visibleRect.max.clone().multiplyScalar(dpr)) : new Rect([0, 0], [...this.renderer.size]);
     if (paddingPercent) targetRect.addPadding(targetRect.size.x * paddingPercent, targetRect.size.y * paddingPercent);
     const zoomByWidth = targetRect.size.x / sourceRect.size.x;
@@ -5329,7 +5356,7 @@ class ControlsSystem {
     const zoom = maxZoom ? Math.min(minZoom, maxZoom) : minZoom;
     const translate = sourceRect.center;
     if (visibleRect) {
-      const offset = new Vector2(...this.renderer.size).multiplyScalar(0.5).sub(targetRect.center).multiplyScalar(1 / zoom).rotateAround({ x: 0, y: 0 }, bearingAngle);
+      const offset = new Vector2(...this.renderer.size).multiplyScalar(0.5).sub(targetRect.center).multiplyScalar(1 / (zoom || 1)).rotateAround({ x: 0, y: 0 }, bearingAngle);
       translate.add(offset);
     }
     const enableTransition = !immediate;
@@ -5390,7 +5417,6 @@ class ControlsSystem {
     const spherical = this.controller.getSpherical(new Spherical());
     const azimuthAngle = spherical.theta;
     const deltaAngleRad = shortestRotationAngle(targetAngleRad, azimuthAngle);
-    console.log("rollTo", deltaAngleRad * RAD2DEG, targetAngleRad * RAD2DEG, azimuthAngle * RAD2DEG);
     return this.rollBy(-deltaAngleRad * RAD2DEG, immediate);
   }
   /**
@@ -6186,14 +6212,12 @@ class InteractionsSystem {
     this.canvasListeners = void 0;
   }
 }
+const logger = createLogger("renderer");
 class Renderer {
   /**
    * @param opts {@link RendererOptions}
    */
   constructor(opts) {
-    /** Whether to log debug information */
-    __publicField(this, "debugLog");
-    //FIXME: Add https://www.npmjs.com/package/debug
     /** {@link HTMLCanvasElement} that this renderer is rendering to */
     __publicField(this, "canvas");
     __publicField(this, "ui");
@@ -6214,9 +6238,8 @@ class Renderer {
     __publicField(this, "initialized", false);
     __publicField(this, "disposed", false);
     __publicField(this, "needsRedraw", true);
-    const { canvas, gl, debugLog = false, ui } = opts;
+    const { canvas, gl, ui } = opts;
     this.canvas = canvas;
-    this.debugLog = debugLog;
     this.ui = ui;
     this.gl = gl;
     const rendererOptions = {
@@ -6234,6 +6257,8 @@ class Renderer {
     this.layerSystem = new LayerSystem(this);
     this.interactionsSystem = new InteractionsSystem(this, this.eventSystem, this.viewportSystem, this.layerSystem);
     this.controlsSystem = new ControlsSystem(this, this.viewportSystem, this.interactionsSystem);
+    this.canvas.addEventListener("webglcontextlost", (e) => this.onContextLost(e), false);
+    this.canvas.addEventListener("webglcontextrestored", (e) => this.onContextRestored(e), false);
     this.initContext(this.renderer.getContext());
     BatchedMesh.useMultiDraw = this.renderer.extensions.has("WEBGL_multi_draw");
   }
@@ -6353,6 +6378,7 @@ class Renderer {
     this.interactionsSystem.init();
     this.viewportSystem.scene.add(this.layerSystem.buildScene(sceneDef));
     this.initialized = true;
+    logger.info("initialized");
   }
   /**
    * Start the rendering loop
@@ -6363,6 +6389,7 @@ class Renderer {
     if (this.clock.running) return;
     this.clock.start();
     this.renderer.setAnimationLoop(() => this.render());
+    logger.info("started");
   }
   /**
    * Update the given defs to make them reflect the current state
@@ -6402,6 +6429,7 @@ class Renderer {
   stop() {
     this.renderer.setAnimationLoop(null);
     this.clock.stop();
+    logger.info("stopped");
   }
   /**
    * Dispose all WebGL resources. This calls {@link Renderer.stop} internally.
@@ -6419,6 +6447,7 @@ class Renderer {
     this.renderer.dispose();
     this.updateMemoryInfo();
     this.disposed = true;
+    logger.info("disposed");
   }
   // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
   resizeCanvasToDisplaySize() {
@@ -6427,7 +6456,7 @@ class Renderer {
     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) {
-      if (this.debugLog) console.log("renderer resize", width, height, dpr);
+      logger.debug("renderer resize", width, height, dpr);
       this.renderer.setSize(width, height, false);
       this.renderer.setPixelRatio(dpr);
       this.viewportSystem.updateViewport();
@@ -6442,7 +6471,7 @@ class Renderer {
       if (memoryInfo.memory["texture"] !== ((_b = this.memoryInfo) == null ? void 0 : _b.memory["texture"]) || memoryInfo.memory["buffer"] !== ((_c = this.memoryInfo) == null ? void 0 : _c.memory["buffer"]) || memoryInfo.memory["renderbuffer"] !== ((_d = this.memoryInfo) == null ? void 0 : _d.memory["renderbuffer"])) {
         const elapsedTime = this.clock.getElapsedTime() * 1e3;
         const logMarker = `memoryInfo [${elapsedTime.toFixed(2)}ms since start]`;
-        if (this.debugLog) console.log(logMarker, memoryInfo);
+        logger.debug(logMarker, memoryInfo);
         this.memoryInfo = memoryInfo;
         this.ui.memoryInfoPanel.textContent = JSON.stringify(memoryInfo, null, 2);
       }
@@ -6451,7 +6480,7 @@ class Renderer {
   onContextLost(event) {
     var _a2, _b;
     event.preventDefault();
-    console.log("webglcontextlost event", event);
+    logger.debug("webglcontextlost event", event);
     const stats = (_a2 = this.ui) == null ? void 0 : _a2.stats;
     const context = this.renderer.getContext();
     if (stats && "deleteQuery" in context) {
@@ -6470,7 +6499,7 @@ class Renderer {
   }
   onContextRestored(event) {
     event.preventDefault();
-    console.log("webglcontextrestored event", event);
+    logger.debug("webglcontextrestored event", event);
     this.initContext(this.renderer.getContext());
     this.needsRedraw = true;
     this.start();
@@ -6482,35 +6511,35 @@ class Renderer {
   }
   assertNotDisposed(funcName) {
     if (this.disposed) {
-      console.warn(`[Renderer.${funcName}]: Renderer is used after being disposed. Please create a new instance.`);
+      logger.warn(`[${funcName}]: Renderer is used after being disposed. Please create a new instance.`);
       return false;
     }
     return true;
   }
   assertInitialized(funcName) {
     if (!this.initialized) {
-      console.warn(`[Renderer.${funcName}]: Renderer is not initialized. Please call init() before using it.`);
+      logger.warn(`${funcName}: Renderer is not initialized. Please call init() before using it.`);
       return false;
     }
     return true;
   }
   assertNotInitialized(funcName) {
     if (this.initialized) {
-      console.warn(`[Renderer.${funcName}]: Renderer is already initialized. Please call init() only once.`);
+      logger.warn(`${funcName}: Renderer is already initialized. Please call init() only once.`);
       return false;
     }
     return true;
   }
   assertNotExternalMode(funcName) {
     if (this.isExternalMode) {
-      console.warn(`[Renderer.${funcName}]: This operation is not supported in external mode.`);
+      logger.warn(`${funcName}: This operation is not supported in external mode.`);
       return false;
     }
     return true;
   }
   assertExternalMode(funcName) {
     if (!this.isExternalMode) {
-      console.warn(`[Renderer.${funcName}]: This operation is only supported in external mode.`);
+      logger.warn(`${funcName}: This operation is only supported in external mode.`);
       return false;
     }
     return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "files": [
     "dist"
@@ -11,6 +11,7 @@
   "exports": "./dist/index.js",
   "devDependencies": {
     "@types/culori": "^2.1.1",
+    "@types/debug": "^4.1.12",
     "@types/object-hash": "^3.0.6",
     "@types/three": "^0.174.0",
     "stats-gl": "^3.6.0",
@@ -22,6 +23,7 @@
   "dependencies": {
     "camera-controls": "^3.1.1",
     "culori": "^4.0.1",
+    "debug": "^4.4.3",
     "maxrects-packer": "^2.7.3",
     "mjolnir.js": "^3.0.0",
     "three": "^0.174.0",