@liquidcars/atlas 0.1.49 → 0.1.50

package/package.json

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

package/src/diagram-svg.js

@@ -539,7 +539,7 @@ export function renderDiagramSvg(atlas, options = {}) {
     if (hiddenByFocus(box.node.id)) return "";
     const baseColor = box.node.material?.color || new THREE.Color("#58788d");
     const color = `#${baseColor.getHexString()}`;
-    const ink = `#${baseColor.clone().lerp(new THREE.Color("#254253"), .48).getHexString()}`;
+    const ink = `#${baseColor.clone().lerp(new THREE.Color(options.containerInk || "#254253"), options.containerInk ? .65 : .48).getHexString()}`;
     let parent = box.node.parent, guard = 0;
     while (parent && !boxBackdrops.has(parent) && guard++ < atlas.nodes.size) parent = atlas.nodes.get(parent)?.parent;
     const parentBackdrop = boxBackdrops.get(parent) || canvasColor;

package/src/diagram-view.js

@@ -1,4 +1,5 @@
 /** The document's 2D presentation. The SVG is also the source of SVG/PNG exports. */
+import * as THREE from "./three.module.js";
 const escapeHtml = value => String(value ?? "").replace(/[&<>"']/g, char => ({
   "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
 })[char]);
@@ -6,7 +7,8 @@ const escapeHtml = value => String(value ?? "").replace(/[&<>"']/g, char => ({
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 
 export const DIAGRAM_VIEW_CSS = `
-  .diagram-view{position:absolute;inset:0;overflow:auto;background-color:#f5f5f5;background-image:radial-gradient(circle,#b3b3b3 .8px,transparent 1px);background-size:16px 16px;color:#172c3a;cursor:grab;touch-action:none}
+  .toolbar button[hidden],.toolbar-menu[hidden]{display:none!important}
+  .diagram-view{position:absolute;inset:0;overflow:auto;background-color:var(--lc-diagram-background,#f5f5f5);background-image:radial-gradient(circle,var(--lc-diagram-dot,#b3b3b3) .8px,transparent 1px);background-size:16px 16px;color:#172c3a;cursor:grab;touch-action:none}
   .diagram-view[hidden],:host(:not([data-view-mode="2d"])) .diagram-view{display:none!important}
   :host([data-view-mode="2d"]) .viewport>canvas,:host([data-view-mode="2d"]) .atlas-jump{visibility:hidden;pointer-events:none}
   :host([data-view-mode="2d"]) .toolbar-group[data-toolbar-group="camera"],
@@ -37,7 +39,7 @@ export const DIAGRAM_VIEW_CSS = `
   .diagram-orientation-cube circle{fill:#132b3b;stroke:#50758b}
   .diagram-toolbar .diagram-orbit,.diagram-toolbar .diagram-camera-zoom{display:block;padding:6px 9px;color:#dbe7ec;font-size:12px}
   .diagram-toolbar .diagram-orbit select,.diagram-toolbar .diagram-camera-zoom input{display:block;width:100%;margin-top:4px}
-  :host([data-view-mode="2d"]) .hint{color:#527286}
+  :host([data-view-mode="2d"]) .hint{color:var(--lc-diagram-hint,#527286)}
   @media print{:host([data-view-mode="2d"]) .diagram-view{display:block!important;overflow:hidden}.diagram-orientation-cube{display:none!important}}
 `;
 
@@ -56,6 +58,7 @@ export const DIAGRAM_TOOLBAR = `<div class="toolbar-group diagram-toolbar" data-
 const DEFAULT_VIEW = Object.freeze({
   cameraView: { position: [0, 0, 30], target: [0, 0, 0] },
   cameraZoom: 1, gap: 20, labels: true, relations: "all", showOrientationCube: true,
+  theme: "auto", grid: true,
   focus: { mode: "all", effect: "dim", layout: "preserve", opacity: .2 }
 });
 
@@ -69,6 +72,8 @@ export function normalizedDiagramView(value = {}) {
     cameraZoom: clamp(Number(view.cameraZoom) || 1, .5, 5),
     gap: clamp(Number(view.gap ?? 20) || 0, 0, 150),
     labels: view.labels !== false,
+    theme: ["auto", "light", "dark"].includes(view.theme) ? view.theme : "auto",
+    grid: view.grid !== false,
     showOrientationCube: view.showOrientationCube !== false,
     relations: ["all", "within", "selected", "callers", "called", "none"].includes(view.relations) ? view.relations : "all",
     focus: {
@@ -188,13 +193,22 @@ export class DiagramView {
   renderOptions(extra = {}) {
     const state = this.config;
     const focused = this._focusedIds();
+    const background = state.background || (state.theme === "dark" ? "#2d2f31" : state.theme === "light" ? "#f5f5f5" : null)
+      || globalThis.getComputedStyle?.(this.root).backgroundColor || "#f5f5f5";
+    const color = new THREE.Color(background);
+    const dark = color.r * .2126 + color.g * .7152 + color.b * .0722 < .32;
+    // Computed CSS colours are rgb(...); SVG backdrop blending requires #rrggbb.
+    const canvasColor = `#${color.getHexString()}`;
     return {
       cameraView: state.cameraView, cameraFrame: { zoom: state.cameraZoom, aspect: state.frameAspect || this.root.clientWidth / Math.max(1, this.root.clientHeight) },
       includeIds: state.includeIds, relationGroups: state.relationGroups,
       relations: state.relations, relationIndexes: this._relationIndexes(),
       focus: focused ? { ids: [...focused], ...state.focus } : null,
       gap: state.gap, labels: state.labels, placements: state.placements,
-      background: "#f5f5f5", ...extra
+      background: canvasColor, canvasColor,
+      labelColor: dark ? "#e9f0f5" : "#172c3a",
+      connectionColor: dark ? "#b1c7d3" : "#58788d",
+      ...(dark ? { containerInk: "#e9f0f5" } : {}), ...extra
     };
   }
 
@@ -250,9 +264,23 @@ export class DiagramView {
     this._refreshQueued = false;
     if (this.atlas.viewMode !== "2d" || !this.atlas.ready || !this.root.clientWidth) return false;
     this._syncControls();
+    this.root.style.backgroundColor = this.config.background || (this.config.theme === "dark" ? "#2d2f31" : this.config.theme === "light" ? "#f5f5f5" : "");
+    this.root.style.backgroundImage = this.config.grid ? "" : "none";
+    if (this.config.theme === "auto") this.root.style.removeProperty("--lc-diagram-dot");
+    else this.root.style.setProperty("--lc-diagram-dot", this.config.theme === "dark" ? "#73777c" : "#b3b3b3");
     const options = this.renderOptions({ faceCache: new Map(), background: null, maskGrid: true });
     const viewport = { width: this.root.clientWidth, height: this.root.clientHeight };
-    const fit = result => Math.min(1, (viewport.width - 32) / result.width, (viewport.height - 32) / result.height);
+    const toolbar = this.atlas.toolbar;
+    const insets = {
+      top: this.atlas.shadowRoot.querySelector(".hint")?.hidden ? 16 : 34,
+      right: 16,
+      bottom: this.atlas.toolbarVisible && !toolbar.hidden ? toolbar.offsetHeight + 44 : 16,
+      left: this.cube.hidden ? 16 : 132
+    };
+    this.content.style.padding = `${insets.top}px ${insets.right}px ${insets.bottom}px ${insets.left}px`;
+    const fit = result => Math.min(1,
+      (viewport.width - insets.left - insets.right) / result.width,
+      (viewport.height - insets.top - insets.bottom) / result.height);
     const initial = this.atlas.exportDiagramSvg({ ...options, measureOnly: true });
     let zoom = this.zoom === "fit" ? fit(initial) : this.zoom;
     for (let i = 0; i < (this.zoom === "fit" ? 8 : 1); i += 1) {
@@ -264,6 +292,7 @@ export class DiagramView {
       zoom = next;
     }
     const result = this.atlas.exportDiagramSvg({ ...options, observerScale: zoom });
+    if (this.zoom === "fit") this._lastFitZoom = zoom;
     this.result = result;
     const previousX = this.root.scrollLeft, previousY = this.root.scrollTop;
     this.content.innerHTML = result.svg;
@@ -339,8 +368,7 @@ export class DiagramView {
 
   focusSelection() {
     if (this.zoom === "fit" && this.result) {
-      const fit = Math.min(1, (this.root.clientWidth - 32) / this.result.width,
-        (this.root.clientHeight - 32) / this.result.height);
+      const fit = this._lastFitZoom || 1;
       this.zoom = clamp(Math.max(.75, fit * 1.8), .08, 4);
       this.refresh();
     }
@@ -358,8 +386,8 @@ export class DiagramView {
     if (!action) return false;
     if (action === "diagram-fit") { this.zoom = "fit"; this.refresh(); return true; }
     if (action === "diagram-plus" || action === "diagram-minus") {
-      const current = this.zoom === "fit" ? Math.min(1, (this.root.clientWidth - 32) / (this.result?.width || 1), (this.root.clientHeight - 32) / (this.result?.height || 1)) : this.zoom;
-      this.zoom = clamp(current * (action === "diagram-plus" ? 1.4 : 1 / 1.4), .08, 4);
+      const current = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom;
+      this.zoom = clamp(current * (action === "diagram-plus" ? 1.15 : 1 / 1.15), .08, 4);
       this.refresh(); return true;
     }
     if (action === "labels") { this.setConfig({ labels: !this.config.labels }, { layout: true }); return true; }
@@ -479,8 +507,7 @@ export class DiagramView {
         const remainingY = dy + this.root.scrollTop - oldY;
         if ((remainingX || remainingY) && this.config.cameraZoom > 1) {
           const angles = cameraAngles(this.config.cameraView);
-          const zoom = this.zoom === "fit" ? Math.min(1, this.root.clientWidth / (this.result?.width || 1),
-            this.root.clientHeight / (this.result?.height || 1)) : this.zoom;
+          const zoom = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom;
           const target = panTarget(this.config.cameraView.target, angles, remainingX, remainingY, 80 * Math.max(.08, zoom));
           this.setConfig({ cameraView: cameraView(target, angles.yaw, angles.pitch) }, { layout: true, defer: true });
         }
@@ -494,7 +521,7 @@ export class DiagramView {
     this.root.addEventListener("wheel", event => {
       if (!event.altKey && !event.ctrlKey) return;
       event.preventDefault();
-      const zoom = this.zoom === "fit" ? Math.min(1, this.root.clientWidth / (this.result?.width || 1), this.root.clientHeight / (this.result?.height || 1)) : this.zoom;
+      const zoom = this.zoom === "fit" ? this._lastFitZoom || 1 : this.zoom;
       this.zoom = clamp(zoom * (event.deltaY < 0 ? 1.15 : 1 / 1.15), .08, 4);
       this.scheduleRefresh();
     }, { passive: false });

package/src/liquidcars-atlas.js

@@ -944,9 +944,11 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
     let cachedImage = null;
     if (typeof image === "string" && image) {
       cachedImage = cachedGeometryImage(image);
-      material.map = new THREE.Texture(cachedImage?.canvas || new Image());
+      material.map = cachedImage
+        ? new THREE.CanvasTexture(cachedImage.canvas)
+        : part.fallbackIcon ? iconTexture(part.fallbackIcon) : new THREE.Texture(new Image());
       if (!cachedImage) {
-        const bitmap = material.map.image;
+        const bitmap = part.fallbackIcon ? new Image() : material.map.image;
         bitmap.crossOrigin = "anonymous";
         let cancelled = false;
         let objectUrl = null;
@@ -964,6 +966,7 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
         const onLoad = () => {
           removeListeners();
           if (cancelled || !material.map) { releaseObjectUrl(); return; }
+          let loadedImage = bitmap;
           if (svgSource) {
             try {
               const aspect = (bitmap.naturalWidth || 1) / Math.max(1, bitmap.naturalHeight || 1);
@@ -975,16 +978,27 @@ function createGeometryContent(definition, entity, modelPalette, invalidate, rep
               if (!context) throw new Error("Canvas 2D is unavailable");
               context.clearRect(0, 0, canvas.width, canvas.height);
               context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-              material.map.image = canvas;
+              loadedImage = canvas;
               rememberGeometryImage(image, canvas, bitmap.naturalWidth / Math.max(1, bitmap.naturalHeight));
             } catch (error) {
               reportWarning?.({ code: "SVG_RASTERIZE_FAILED", geometry: definition.id, entityId: entity.id, image, error });
+              if (part.fallbackIcon) loadedImage = null;
             }
           }
           releaseObjectUrl();
           const imageAspect = bitmap.naturalWidth / Math.max(1, bitmap.naturalHeight);
-          fitGeometryImage(part, mesh, material.map, imageAspect);
-          material.map.needsUpdate = true;
+          if (loadedImage) {
+            // A 2D projection may have read the fallback map already. Swap the
+            // complete texture so WebGL also uploads the decoded image.
+            const previousMap = material.map;
+            const nextMap = loadedImage === bitmap ? new THREE.Texture(bitmap) : new THREE.CanvasTexture(loadedImage);
+            nextMap.colorSpace = THREE.SRGBColorSpace;
+            fitGeometryImage(part, mesh, nextMap, imageAspect);
+            nextMap.needsUpdate = true;
+            material.map = nextMap;
+            material.needsUpdate = true;
+            previousMap.dispose();
+          }
           invalidate?.();
         };
         const onError = () => {
@@ -1658,7 +1672,8 @@ class LiquidCarsAtlas extends HTMLElement {
   }
 
   _syncDocumentToolbar() {
-    const canNavigate = Boolean(this.documentResolver) && this._visitIndex >= 0;
+    const canNavigate = Boolean(this.documentResolver) && this._visitIndex >= 0
+      && (!this._toolbarControls || this._toolbarControls.has("navigation"));
     const group = this.navigationToolbar?.querySelector('[data-toolbar-group="navigation"]');
     if (group) group.hidden = !canNavigate;
     if (this.navigationToolbar) this.navigationToolbar.hidden = !canNavigate || !this.toolbarVisible;
@@ -2147,9 +2162,37 @@ class LiquidCarsAtlas extends HTMLElement {
     return this.setFocusFilter({ mode: "all" }, options);
   }
 
+  _setToolbarControls(value) {
+    const controls = Array.isArray(value) ? new Set(value.map(item => String(item).trim())) : null;
+    this._toolbarControls = controls;
+    if (!this.toolbar) return;
+    const allowed = (...names) => !controls || controls.has("all") || names.some(name => controls.has(name));
+    const group = this.toolbar;
+    const buttons = {
+      "view-mode": ["mode", "view-mode"],
+      minus: ["zoom", "minus"], plus: ["zoom", "plus"], fit: ["fit"], front: ["front"],
+      "diagram-minus": ["zoom", "diagram-minus"], "diagram-plus": ["zoom", "diagram-plus"],
+      "diagram-fit": ["fit", "diagram-fit"]
+    };
+    for (const button of group.querySelectorAll('.toolbar-group > button[data-action]')) {
+      button.hidden = !allowed(...(buttons[button.dataset.action] || [button.dataset.action]));
+    }
+    for (const menu of group.querySelectorAll('.toolbar-group > .toolbar-menu')) {
+      const name = menu.dataset.toolbarMenu;
+      menu.hidden = !allowed(name, name?.replace(/^diagram-/, ""));
+      if (menu.hidden) menu.open = false;
+    }
+    for (const section of group.querySelectorAll('.toolbar-group:not([data-toolbar-group="navigation"])')) {
+      section.hidden = !section.querySelector(':scope > button[data-action]:not([hidden]), :scope > .toolbar-menu:not([hidden])');
+    }
+    this._syncDocumentToolbar();
+  }
+
   _applyModelRenderOptions() {
     const render = { ...this.modelData?.render, ...this.modelData?.render?.views?.["3d"] };
     if (!render || typeof render !== "object") return this;
+    const toolbar = this.modelData?.render?.ui?.toolbar ?? render.toolbar;
+    this._setToolbarControls(Array.isArray(toolbar) ? toolbar : this.modelData?.render?.ui?.controls);
     if (RELATION_DISPLAY_MODES.includes(render.relationMode) && render.relationMode !== this.relationMode) this.setRelationMode(render.relationMode);
     if (normalizeRelationMarker(render.relationMarker) !== this.relationMarker) this.setRelationMarker(render.relationMarker, { emit: false, source: "model" });
     if (Array.isArray(render.visibleRelationGroups)) this.setVisibleRelationGroups(render.visibleRelationGroups, { emit: false, source: "model" });
@@ -2157,7 +2200,7 @@ class LiquidCarsAtlas extends HTMLElement {
     if (Object.hasOwn(render, "selectionMode") && render.selectionMode !== this.selectionMode) this.setSelectionMode(render.selectionMode);
     const selectionNavigation = render.navigation?.onSelect ?? render.selectionNavigation;
     if (selectionNavigation != null && selectionNavigation !== this.selectionNavigation) this.setSelectionNavigation(selectionNavigation);
-    if (Object.hasOwn(render, "toolbar") && (render.toolbar !== false) !== this.toolbarVisible) this.setToolbarVisible(render.toolbar !== false);
+    if (toolbar !== undefined && (toolbar !== false) !== this.toolbarVisible) this.setToolbarVisible(toolbar !== false);
     if (Object.hasOwn(render, "shellLabels") && (render.shellLabels !== false) !== this.showShellLabels) this.setShellLabels(render.shellLabels !== false);
     if (Object.hasOwn(render, "itemFacing") && normalizeItemFacing(render.itemFacing) !== this.itemFacing) this.setItemFacing(render.itemFacing, { emit: false, source: "model" });
     if (render.focus) this.setFocusFilter(render.focus, { emit: false });
@@ -2676,7 +2719,7 @@ class LiquidCarsAtlas extends HTMLElement {
     if (atlas) atlas.dataset.panel = this.panelVisible ? "visible" : "hidden";
     const toolbarVisible = this.toolbarVisible;
     const panelVisible = this.panelVisible;
-    const hintVisible = theme.ui.hint !== false;
+    const hintVisible = (this.modelData?.render?.ui?.hint ?? theme.ui.hint) !== false;
     if (toolbar) {
       toolbar.dataset.hidden = String(!toolbarVisible);
       toolbar.hidden = !toolbarVisible;