@expofp/renderer 2.0.1 → 2.1.1

package/dist/index.js

@@ -8,7 +8,8 @@ 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";
+import { extend, colord } from "colord";
+import namesPlugin from "colord/plugins/names";
 import { RAD2DEG, DEG2RAD as DEG2RAD$1 } from "three/src/math/MathUtils.js";
 import { EventManager, Rotate, Pan } from "mjolnir.js";
 const floatsPerMember = 32;
@@ -368,7 +369,8 @@ const dimColorFrag = (
   }`
 );
 function createLogger(namespace) {
-  const info = createLog(namespace);
+  const fullNamespace = namespace ? `renderer:${namespace}` : "renderer";
+  const info = createLog(fullNamespace);
   info.log = console.info.bind(console);
   const debug = info.extend("debug");
   debug.log = console.debug.bind(console);
@@ -1721,6 +1723,7 @@ class Polygon {
   }
 }
 const logger$7 = createLogger("mesh");
+extend([namesPlugin]);
 class MeshSystem extends RenderableSystem {
   /**
    * @param materialSystem {@link MaterialSystem}
@@ -1728,7 +1731,6 @@ class MeshSystem extends RenderableSystem {
    */
   constructor(materialSystem, renderer) {
     super("mesh", renderer, logger$7);
-    __publicField(this, "toRgbConverter", converter("rgb"));
     __publicField(this, "meshColor", new Color());
     this.materialSystem = materialSystem;
   }
@@ -1743,10 +1745,10 @@ class MeshSystem extends RenderableSystem {
       shapes,
       (shapeDef) => {
         var _a2;
-        return (((_a2 = mapShapeToNormColor.get(shapeDef)) == null ? void 0 : _a2.alpha) ?? 1) === 1;
+        return (((_a2 = mapShapeToNormColor.get(shapeDef)) == null ? void 0 : _a2.a) ?? 1) === 1;
       }
     );
-    const transparentShapesGrouped = groupBy(transparentShapes, (shapeDef) => mapShapeToNormColor.get(shapeDef).alpha);
+    const transparentShapesGrouped = groupBy(transparentShapes, (shapeDef) => mapShapeToNormColor.get(shapeDef).a);
     const group = new Group();
     for (const [opacity, shapes2] of transparentShapesGrouped) {
       const transparentMesh = this.buildBatchedMesh(shapes2, opacity);
@@ -1768,9 +1770,12 @@ class MeshSystem extends RenderableSystem {
   }
   updateDefImpl(shapeDef, mesh, instanceIds) {
     const color = this.normalizeColor(shapeDef.color);
-    if (color === void 0) return;
+    if (!color) {
+      logger$7.warn(`Invalid color: ${shapeDef.color} %O`, shapeDef);
+      return;
+    }
     for (const instanceId of instanceIds) {
-      mesh.setColorAt(instanceId, this.meshColor.setRGB(color.r, color.g, color.b, SRGBColorSpace));
+      mesh.setColorAt(instanceId, this.meshColor.setRGB(color.r / 255, color.g / 255, color.b / 255, SRGBColorSpace));
     }
   }
   buildBatchedMesh(shapes, opacity = 1) {
@@ -1801,7 +1806,9 @@ class MeshSystem extends RenderableSystem {
     const rotation = new Quaternion();
     const scale = new Vector3();
     const matrix = new Matrix4();
-    for (const shapeDef of shapes) {
+    const [rects, polygons] = partition(shapes, (shapeDef) => shapeDef.shape instanceof Rect);
+    const sortedShapes = [...rects, ...polygons];
+    for (const shapeDef of sortedShapes) {
       let instanceId = void 0;
       if (shapeDef.shape instanceof Rect && rectGeometryId !== void 0) {
         instanceId = batchedMesh.addInstance(rectGeometryId);
@@ -1820,8 +1827,11 @@ class MeshSystem extends RenderableSystem {
     }
     return batchedMesh;
   }
-  normalizeColor(color) {
-    return typeof color === "string" ? this.toRgbConverter(parse(color)) : this.toRgbConverter(parse(`#${color.toString(16).padStart(6, "0")}`));
+  normalizeColor(colorInput) {
+    const colorString = typeof colorInput === "string" ? colorInput : `#${colorInput.toString(16).padStart(6, "0")}`;
+    const color = colord(colorString);
+    if (!color.isValid()) return void 0;
+    return color.toRgb();
   }
   buildPolygonGeometry(polygon) {
     const geometry = new BufferGeometry().setFromPoints(polygon.vertices).setIndex(polygon.indices.flat());
@@ -6212,7 +6222,7 @@ class InteractionsSystem {
     this.canvasListeners = void 0;
   }
 }
-const logger = createLogger("renderer");
+const logger = createLogger("");
 class Renderer {
   /**
    * @param opts {@link RendererOptions}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "type": "module",
   "files": [
     "dist"
@@ -10,19 +10,19 @@
   },
   "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",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
+    "vite-bundle-analyzer": "^1.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.9.0"
   },
   "dependencies": {
     "camera-controls": "^3.1.1",
-    "culori": "^4.0.1",
+    "colord": "^2.9.3",
     "debug": "^4.4.3",
     "maxrects-packer": "^2.7.3",
     "mjolnir.js": "^3.0.0",