@liquidcars/atlas 0.1.39 → 0.1.41

package/package.json

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

package/src/liquidcars-atlas.js

@@ -76,6 +76,48 @@ function normalizeGeometryResource(resource, index, sourceIds) {
   };
 }
 
+function normalizeGeometryShowcase(pack, namespace) {
+  if (!pack.showcase || typeof pack.showcase !== "object") return null;
+  const value = cloneGeometryMetadata(pack.showcase);
+  const groups = Array.isArray(value.groups) ? value.groups : [];
+  const groupIds = new Set();
+  const itemIds = new Set();
+  const normalizedGroups = groups.map((source, groupIndex) => {
+    const group = source && typeof source === "object" ? source : {};
+    const id = String(group.id || `group-${groupIndex + 1}`).trim();
+    if (!id || groupIds.has(id)) throw new TypeError(`Geometry pack '${namespace}' showcase contains a duplicate or empty group id.`);
+    groupIds.add(id);
+    const items = Array.isArray(group.items) ? group.items : Array.isArray(group.children) ? group.children : [];
+    return {
+      ...group,
+      id,
+      name: String(group.name || group.title || id),
+      items: items.map((sourceItem, itemIndex) => {
+        const item = sourceItem && typeof sourceItem === "object" ? sourceItem : {};
+        const geometry = String(item.geometry || item.kind || "").trim();
+        if (!geometry) throw new TypeError(`Geometry pack '${namespace}' showcase item ${itemIndex + 1} in '${id}' requires a geometry.`);
+        const itemId = String(item.id || `${id}-${itemIndex + 1}`).trim();
+        if (!itemId || itemIds.has(itemId)) throw new TypeError(`Geometry pack '${namespace}' showcase contains a duplicate or empty item id.`);
+        itemIds.add(itemId);
+        return {
+          ...item,
+          id: itemId,
+          geometry: geometry.includes(".") ? geometry : `${namespace}.${geometry}`,
+          geometryOptions: cloneGeometryMetadata(item.geometryOptions || item.options || item.parameters || {}),
+          geometryPalette: cloneGeometryMetadata(item.geometryPalette || item.palette || {})
+        };
+      })
+    };
+  });
+  return {
+    ...value,
+    title: String(value.title || pack.name || namespace),
+    description: String(value.description || ""),
+    groups: normalizedGroups,
+    relations: cloneGeometryMetadata(Array.isArray(value.relations) ? value.relations : [])
+  };
+}
+
 function normalizeGeometryPackMetadata(pack, namespace) {
   const sources = (Array.isArray(pack.sources) ? pack.sources : []).map(normalizeGeometrySource);
   const sourceIds = new Set(sources.map(source => source.id));
@@ -96,6 +138,7 @@ function normalizeGeometryPackMetadata(pack, namespace) {
     license: normalizeGeometryLicense(pack.license),
     attribution: String(pack.attribution || ""),
     collections: cloneGeometryMetadata(Array.isArray(pack.collections) ? pack.collections : []),
+    showcase: normalizeGeometryShowcase(pack, namespace),
     sources,
     resources,
     geometries: []
@@ -491,8 +534,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 +780,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 +914,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);
@@ -666,6 +934,27 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
   return { root, meshes, colorBindings, parameters, descriptor };
 }
 
+const LABEL_ANCHORS = Object.freeze(["auto", "top", "bottom", "left", "right"]);
+
+export function normalizeLabelAnchor(value) {
+  const anchor = String(value || "auto").trim().toLowerCase();
+  return LABEL_ANCHORS.includes(anchor) ? anchor : "auto";
+}
+
+export function labelPlacementForAnchor(value, dimensions, labelWidth, labelHeight, gap = .025) {
+  const anchor = normalizeLabelAnchor(value);
+  if (anchor === "auto") return null;
+  const width = Math.max(0, Number(dimensions?.x) || 0);
+  const height = Math.max(0, Number(dimensions?.y) || 0);
+  const textWidth = Math.max(0, Number(labelWidth) || 0);
+  const textHeight = Math.max(0, Number(labelHeight) || 0);
+  const spacing = Math.max(0, Number(gap) || 0);
+  if (anchor === "top") return { x: 0, y: height / 2 + spacing + textHeight / 2, frontRotation: 0, backRotation: 0 };
+  if (anchor === "bottom") return { x: 0, y: -height / 2 - spacing - textHeight / 2, frontRotation: 0, backRotation: 0 };
+  if (anchor === "left") return { x: -width / 2 - spacing - textHeight / 2, y: 0, frontRotation: Math.PI / 2, backRotation: -Math.PI / 2 };
+  return { x: width / 2 + spacing + textHeight / 2, y: 0, frontRotation: -Math.PI / 2, backRotation: Math.PI / 2 };
+}
+
 function makeLabel(text, color, dimensions, type = "", outlined = true) {
   const bitmap = document.createElement("canvas");
   const context = bitmap.getContext("2d");
@@ -1880,6 +2169,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"));
+        }
       }
     }
   }
@@ -1969,6 +2261,7 @@ class LiquidCarsAtlas extends HTMLElement {
         node.group.add(node.edge);
       }
       node.label = makeLabel(entity.name, color, node.labelSize, entity.type, this.showShellLabels);
+      node.labelAnchor = normalizeLabelAnchor(entity.style?.label?.anchor ?? entity.labelAnchor ?? entity.label_anchor);
       node.label.userData.node = node;
       node.label.traverse(labelFace => { labelFace.userData.node = node; });
       node.group.add(node.label);
@@ -2299,6 +2592,7 @@ class LiquidCarsAtlas extends HTMLElement {
       const textOffsetX = node.label.userData.textOffsetX || 0;
       const textOffsetY = node.label.userData.textOffsetY || 0;
       const labelSize = node.labelSize || new THREE.Vector3().fromArray(node.s);
+      const floatingLabel = labelPlacementForAnchor(node.labelAnchor, labelSize, labelWidth, labelHeight);
       node.label.visible = visible;
       // Only paint the face that is oriented towards the camera.  Both faces
       // used to be depth-test disabled, so the back label could be drawn over
@@ -2308,7 +2602,23 @@ class LiquidCarsAtlas extends HTMLElement {
         ? true
         : this.camera.position.z >= center.z;
       const cameraAbove = this.camera.position.y > center.y + .25;
-      if (isContainerType(node.type)) {
+      if (floatingLabel) {
+        front.visible = cameraOnFront;
+        back.visible = !cameraOnFront;
+        top.visible = false;
+        front.scale.setScalar(1);
+        back.scale.setScalar(1);
+        front.position.set(floatingLabel.x, floatingLabel.y, labelSize.z / 2 + .025);
+        back.position.set(floatingLabel.x, floatingLabel.y, -labelSize.z / 2 - .025);
+        front.rotation.z = floatingLabel.frontRotation;
+        back.rotation.z = floatingLabel.backRotation;
+        front.material.color.set(0xf2fafc);
+        back.material.color.set(0xf2fafc);
+        front.material.opacity = focusAlpha;
+        back.material.opacity = focusAlpha;
+      } else if (isContainerType(node.type)) {
+        front.rotation.z = 0;
+        back.rotation.z = 0;
         front.visible = cameraOnFront && (!transparentLabel || displayTransparentLabel);
         back.visible = !cameraOnFront && (!transparentLabel || displayTransparentLabel);
         // The upper label is useful only when the camera actually sees the
@@ -2342,12 +2652,18 @@ class LiquidCarsAtlas extends HTMLElement {
         top.material.color.set(displayTransparentLabel ? 0xa4b0bb : 0xf2fafc);
         top.material.opacity = (displayTransparentLabel ? .82 : 1) * focusAlpha;
       } else {
+        front.rotation.z = 0;
+        back.rotation.z = 0;
         front.visible = cameraOnFront && !opened;
         back.visible = !cameraOnFront && !opened;
         top.visible = false;
         front.scale.setScalar(1);
         front.position.x = 0;
         front.position.y = labelSize.y / 2 - .09 - labelHeight / 2;
+        front.position.z = labelSize.z / 2 + .012;
+        back.position.x = 0;
+        back.position.y = labelSize.y / 2 - .09 - labelHeight / 2;
+        back.position.z = -labelSize.z / 2 - .012;
         front.material.color.set(0xf2fafc);
         front.material.opacity = focusAlpha;
         back.material.opacity = focusAlpha;