@liquidcars/atlas 0.1.39 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liquidcars/atlas",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "scripts": {

package/src/liquidcars-atlas.js

@@ -491,8 +491,227 @@ function iconTexture(value, foreground = "#ffffff", background = "transparent")
   return texture;
 }
 
+const SVG_PATH_COMMAND = /^[AaCcHhLlMmQqSsTtVvZz]$/;
+const SVG_PATH_TOKEN = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?|[AaCcHhLlMmQqSsTtVvZz]/g;
+
+function svgArcPoints(x1, y1, rxValue, ryValue, rotation, largeArc, sweep, x2, y2) {
+  let rx = Math.abs(Number(rxValue));
+  let ry = Math.abs(Number(ryValue));
+  if (!rx || !ry || (x1 === x2 && y1 === y2)) return [[x2, y2]];
+  const phi = Number(rotation || 0) * Math.PI / 180;
+  const cosPhi = Math.cos(phi);
+  const sinPhi = Math.sin(phi);
+  const dx = (x1 - x2) / 2;
+  const dy = (y1 - y2) / 2;
+  const xPrime = cosPhi * dx + sinPhi * dy;
+  const yPrime = -sinPhi * dx + cosPhi * dy;
+  const scale = Math.sqrt(Math.max(1, xPrime * xPrime / (rx * rx) + yPrime * yPrime / (ry * ry)));
+  rx *= scale;
+  ry *= scale;
+  const numerator = Math.max(0, rx * rx * ry * ry - rx * rx * yPrime * yPrime - ry * ry * xPrime * xPrime);
+  const denominator = Math.max(Number.EPSILON, rx * rx * yPrime * yPrime + ry * ry * xPrime * xPrime);
+  const sign = Boolean(largeArc) === Boolean(sweep) ? -1 : 1;
+  const coefficient = sign * Math.sqrt(numerator / denominator);
+  const centerPrimeX = coefficient * rx * yPrime / ry;
+  const centerPrimeY = coefficient * -ry * xPrime / rx;
+  const centerX = cosPhi * centerPrimeX - sinPhi * centerPrimeY + (x1 + x2) / 2;
+  const centerY = sinPhi * centerPrimeX + cosPhi * centerPrimeY + (y1 + y2) / 2;
+  const angleBetween = (ux, uy, vx, vy) => {
+    const divisor = Math.max(Number.EPSILON, Math.hypot(ux, uy) * Math.hypot(vx, vy));
+    const angle = Math.acos(Math.max(-1, Math.min(1, (ux * vx + uy * vy) / divisor)));
+    return ux * vy - uy * vx < 0 ? -angle : angle;
+  };
+  const startX = (xPrime - centerPrimeX) / rx;
+  const startY = (yPrime - centerPrimeY) / ry;
+  const endX = (-xPrime - centerPrimeX) / rx;
+  const endY = (-yPrime - centerPrimeY) / ry;
+  const startAngle = angleBetween(1, 0, startX, startY);
+  let deltaAngle = angleBetween(startX, startY, endX, endY);
+  if (!sweep && deltaAngle > 0) deltaAngle -= Math.PI * 2;
+  if (sweep && deltaAngle < 0) deltaAngle += Math.PI * 2;
+  const steps = Math.max(6, Math.ceil(Math.abs(deltaAngle) / (Math.PI / 12)));
+  return Array.from({ length: steps }, (_, index) => {
+    const angle = startAngle + deltaAngle * (index + 1) / steps;
+    const cosAngle = Math.cos(angle);
+    const sinAngle = Math.sin(angle);
+    return [
+      centerX + cosPhi * rx * cosAngle - sinPhi * ry * sinAngle,
+      centerY + sinPhi * rx * cosAngle + cosPhi * ry * sinAngle
+    ];
+  });
+}
+
+function svgShapePath(pathData) {
+  const tokens = String(pathData || "").match(SVG_PATH_TOKEN) || [];
+  const shapePath = new THREE.ShapePath();
+  let index = 0;
+  let command = "";
+  let previousCommand = "";
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  let cubicControlX = 0;
+  let cubicControlY = 0;
+  let quadraticControlX = 0;
+  let quadraticControlY = 0;
+  const hasNumber = () => index < tokens.length && !SVG_PATH_COMMAND.test(tokens[index]);
+  const number = () => Number(tokens[index++]);
+  const flag = () => {
+    const token = tokens[index];
+    // SVG permits arc flags to touch one another and the following coordinate
+    // (for example `0 003.839 0` means flags 0/0 and x=3.839).
+    if (/^[01].+/.test(token)) {
+      tokens[index] = token.slice(1);
+      return token[0] === "1";
+    }
+    return number() !== 0;
+  };
+  const point = (nextX, nextY, relative) => [relative ? x + nextX : nextX, relative ? y + nextY : nextY];
+
+  while (index < tokens.length) {
+    if (SVG_PATH_COMMAND.test(tokens[index])) command = tokens[index++];
+    if (!command) break;
+    const lower = command.toLowerCase();
+    const relative = command === lower;
+
+    if (lower === "z") {
+      shapePath.currentPath?.closePath();
+      x = startX;
+      y = startY;
+      previousCommand = command;
+      command = "";
+      continue;
+    }
+
+    if (!hasNumber()) break;
+    if (lower === "m") {
+      let first = true;
+      while (hasNumber()) {
+        const [nextX, nextY] = point(number(), number(), relative);
+        x = nextX;
+        y = nextY;
+        if (first) {
+          shapePath.moveTo(x, -y);
+          startX = x;
+          startY = y;
+          first = false;
+        } else shapePath.lineTo(x, -y);
+      }
+    } else if (lower === "l") {
+      while (hasNumber()) {
+        [x, y] = point(number(), number(), relative);
+        shapePath.lineTo(x, -y);
+      }
+    } else if (lower === "h") {
+      while (hasNumber()) {
+        const value = number();
+        x = relative ? x + value : value;
+        shapePath.lineTo(x, -y);
+      }
+    } else if (lower === "v") {
+      while (hasNumber()) {
+        const value = number();
+        y = relative ? y + value : value;
+        shapePath.lineTo(x, -y);
+      }
+    } else if (lower === "c") {
+      while (hasNumber()) {
+        const [control1X, control1Y] = point(number(), number(), relative);
+        const [control2X, control2Y] = point(number(), number(), relative);
+        const [nextX, nextY] = point(number(), number(), relative);
+        shapePath.currentPath?.bezierCurveTo(control1X, -control1Y, control2X, -control2Y, nextX, -nextY);
+        x = nextX;
+        y = nextY;
+        cubicControlX = control2X;
+        cubicControlY = control2Y;
+        previousCommand = command;
+      }
+    } else if (lower === "s") {
+      while (hasNumber()) {
+        const reflectedX = ["c", "s"].includes(previousCommand.toLowerCase()) ? x * 2 - cubicControlX : x;
+        const reflectedY = ["c", "s"].includes(previousCommand.toLowerCase()) ? y * 2 - cubicControlY : y;
+        const [control2X, control2Y] = point(number(), number(), relative);
+        const [nextX, nextY] = point(number(), number(), relative);
+        shapePath.currentPath?.bezierCurveTo(reflectedX, -reflectedY, control2X, -control2Y, nextX, -nextY);
+        x = nextX;
+        y = nextY;
+        cubicControlX = control2X;
+        cubicControlY = control2Y;
+        previousCommand = command;
+      }
+    } else if (lower === "q") {
+      while (hasNumber()) {
+        const [controlX, controlY] = point(number(), number(), relative);
+        const [nextX, nextY] = point(number(), number(), relative);
+        shapePath.currentPath?.quadraticCurveTo(controlX, -controlY, nextX, -nextY);
+        x = nextX;
+        y = nextY;
+        quadraticControlX = controlX;
+        quadraticControlY = controlY;
+        previousCommand = command;
+      }
+    } else if (lower === "t") {
+      while (hasNumber()) {
+        const controlX = ["q", "t"].includes(previousCommand.toLowerCase()) ? x * 2 - quadraticControlX : x;
+        const controlY = ["q", "t"].includes(previousCommand.toLowerCase()) ? y * 2 - quadraticControlY : y;
+        const [nextX, nextY] = point(number(), number(), relative);
+        shapePath.currentPath?.quadraticCurveTo(controlX, -controlY, nextX, -nextY);
+        x = nextX;
+        y = nextY;
+        quadraticControlX = controlX;
+        quadraticControlY = controlY;
+        previousCommand = command;
+      }
+    } else if (lower === "a") {
+      while (hasNumber()) {
+        const rx = number();
+        const ry = number();
+        const rotation = number();
+        const largeArc = flag();
+        const sweep = flag();
+        const [nextX, nextY] = point(number(), number(), relative);
+        for (const [arcX, arcY] of svgArcPoints(x, y, rx, ry, rotation, largeArc, sweep, nextX, nextY)) {
+          shapePath.lineTo(arcX, -arcY);
+        }
+        x = nextX;
+        y = nextY;
+        previousCommand = command;
+      }
+    } else break;
+
+    previousCommand = command;
+  }
+  return shapePath;
+}
+
+export function createSvgExtrudeGeometry(source, options = {}) {
+  const pathTags = String(source || "").match(/<path\b[^>]*>/gi) || [];
+  const shapes = [];
+  for (const tag of pathTags) {
+    const match = tag.match(/\bd\s*=\s*(["'])([\s\S]*?)\1/i);
+    if (!match) continue;
+    const shapePath = svgShapePath(match[2]);
+    shapes.push(...shapePath.toShapes(true, false));
+  }
+  if (!shapes.length) return new THREE.BoxGeometry(1, 1, .12);
+  const bevel = Math.max(0, Math.min(.2, Number(options.bevel) || .055));
+  const geometry = new THREE.ExtrudeGeometry(shapes, {
+    depth: 1,
+    steps: 1,
+    curveSegments: Math.max(2, Math.round(Number(options.curveSegments) || 8)),
+    bevelEnabled: bevel > 0,
+    bevelSegments: Math.max(1, Math.round(Number(options.bevelSegments) || 2)),
+    bevelSize: bevel,
+    bevelThickness: bevel
+  });
+  geometry.center();
+  return geometry;
+}
+
 function partGeometry(part) {
   if (part.shape === "plane") return new THREE.PlaneGeometry(1, 1);
+  if (part.shape === "svg-extrude") return createSvgExtrudeGeometry(part.svg, part);
   return makeGeometry(part.shape || part.geometry || "box", part.radius, part.segments, part.size);
 }
 
@@ -518,8 +737,14 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
     normalizeGeometry(geometry);
     const colorValue = part.color || "component";
     const color = resolveGeometryColor(colorValue, localPalette, modelPalette.component || DEFAULT_PALETTE.component);
+    const emissiveValue = part.emissive || "#000000";
+    const emissive = resolveGeometryColor(emissiveValue, localPalette, "#000000");
     const material = new THREE.MeshStandardMaterial({
       color,
+      emissive,
+      emissiveIntensity: Number.isFinite(Number(part.emissiveIntensity))
+        ? Math.max(0, Number(part.emissiveIntensity))
+        : 0,
       roughness: Number.isFinite(Number(part.roughness)) ? Number(part.roughness) : .72,
       metalness: Number.isFinite(Number(part.metalness)) ? Number(part.metalness) : .06,
       transparent: part.transparent === true || Number(part.opacity) < 1,
@@ -646,7 +871,7 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
     if (Array.isArray(part.rotation)) mesh.rotation.set(...part.rotation.map(Number));
     root.add(mesh);
     meshes.push(mesh);
-    colorBindings.push({ material, value: colorValue, palette: localPalette });
+    colorBindings.push({ material, value: colorValue, emissiveValue, palette: localPalette });
     if (part.edges !== false && part.shape !== "plane") {
       const edgeMaterial = new THREE.LineBasicMaterial({ color, transparent: true, opacity: Number.isFinite(Number(part.edgeOpacity)) ? Number(part.edgeOpacity) : .55 });
       const edge = new THREE.LineSegments(new THREE.EdgesGeometry(geometry, 22), edgeMaterial);
@@ -1880,6 +2105,9 @@ class LiquidCarsAtlas extends HTMLElement {
       for (const binding of node.colorBindings || []) {
         const palette = { ...this.modelData.palette, ...(node.geometryPalette || {}), ...(node.geometryPaletteOverrides || {}) };
         binding.material.color.set(resolveGeometryColor(binding.value, palette, color));
+        if (binding.material.emissive && binding.emissiveValue) {
+          binding.material.emissive.set(resolveGeometryColor(binding.emissiveValue, palette, "#000000"));
+        }
       }
     }
   }