brep-io-kernel 1.0.0

package/src/UI/toolbarButtons/orientToFaceButton.js

@@ -0,0 +1,114 @@
+import * as THREE from 'three';
+
+const FACE_TYPES = new Set(['FACE', 'PLANE']);
+
+function _isFaceType(obj) {
+  const type = String(obj?.type || '').toUpperCase();
+  return FACE_TYPES.has(type);
+}
+
+function _getScene(viewer) {
+  return viewer?.partHistory?.scene || viewer?.scene || null;
+}
+
+function _findSelectedFace(viewer) {
+  const scene = _getScene(viewer);
+  if (!scene) return null;
+
+  const last = viewer?._lastInspectorTarget || null;
+  if (last && _isFaceType(last) && last.selected === true) return last;
+
+  let found = null;
+  scene.traverse((obj) => {
+    if (found || !obj || !obj.selected) return;
+    if (_isFaceType(obj)) found = obj;
+  });
+  return found;
+}
+
+function _computeFaceCenter(obj) {
+  if (!obj) return null;
+  try { obj.updateMatrixWorld?.(true); } catch {}
+  try {
+    const box = new THREE.Box3().setFromObject(obj);
+    if (!box.isEmpty()) return box.getCenter(new THREE.Vector3());
+  } catch {}
+  try {
+    const geom = obj.geometry;
+    const bs = geom?.boundingSphere || (geom?.computeBoundingSphere && (geom.computeBoundingSphere(), geom.boundingSphere));
+    if (bs) return obj.localToWorld(bs.center.clone());
+  } catch {}
+  try {
+    return obj.getWorldPosition?.(new THREE.Vector3()) || null;
+  } catch {}
+  return null;
+}
+
+function _computeFaceNormal(obj) {
+  if (!obj) return null;
+  let n = null;
+  if (typeof obj.getAverageNormal === 'function') {
+    try { n = obj.getAverageNormal().clone(); } catch {}
+  }
+  if (!n || n.lengthSq() < 1e-10) {
+    try {
+      const q = obj.getWorldQuaternion?.(new THREE.Quaternion());
+      if (q) n = new THREE.Vector3(0, 0, 1).applyQuaternion(q);
+    } catch {}
+  }
+  if (!n || n.lengthSq() < 1e-10) return null;
+  return n.normalize();
+}
+
+function _orientCameraToFace(viewer, face) {
+  const cam = viewer?.camera;
+  if (!viewer || !cam || !face) return false;
+
+  const target = _computeFaceCenter(face);
+  const normal = _computeFaceNormal(face);
+  if (!target || !normal) return false;
+
+  const toCam = cam.position.clone().sub(target);
+  const dir = normal.dot(toCam) < 0 ? normal.clone().multiplyScalar(-1) : normal.clone();
+  dir.normalize();
+
+  const worldUp = new THREE.Vector3(0, 1, 0);
+  const ref = Math.abs(dir.dot(worldUp)) > 0.9 ? new THREE.Vector3(1, 0, 0) : worldUp;
+  const x = new THREE.Vector3().crossVectors(ref, dir).normalize();
+  const y = new THREE.Vector3().crossVectors(dir, x).normalize();
+
+  let dist = cam.position.distanceTo(target);
+  if (!Number.isFinite(dist) || dist < 1e-3) {
+    dist = Math.max(5, (viewer.viewSize || 10) * 1.5);
+  }
+
+  const nextPos = target.clone().add(dir.multiplyScalar(dist));
+  cam.position.copy(nextPos);
+  cam.up.copy(y);
+  cam.lookAt(target);
+  cam.updateMatrixWorld(true);
+
+  const controls = viewer.controls;
+  try { if (controls?.target) controls.target.copy(target); } catch {}
+  try { if (controls?._gizmos?.position) controls._gizmos.position.copy(target); } catch {}
+  try { controls?.update?.(); } catch {}
+  try { controls?.updateMatrixState?.(); } catch {}
+  try { viewer.render?.(); } catch {}
+
+  return true;
+}
+
+export function createOrientToFaceButton(viewer) {
+  const onClick = () => {
+    const face = _findSelectedFace(viewer);
+    if (!face) {
+      viewer?._toast?.('Select a face to orient the view.');
+      return;
+    }
+    if (!_orientCameraToFace(viewer, face)) {
+      viewer?._toast?.('Unable to orient view to that face.');
+    }
+  };
+
+  return { label: 'Perp', title: 'Orient view perpendicular to selected face', onClick };
+}

package/src/UI/toolbarButtons/registerDefaultButtons.js

@@ -0,0 +1,46 @@
+// Registers the default toolbar buttons using the viewer's addToolbarButton API.
+// Each button's logic is implemented in its own module.
+
+import { createSaveButton } from './saveButton.js';
+import { createUndoButton, createRedoButton } from './undoRedoButtons.js';
+import { createZoomToFitButton } from './zoomToFitButton.js';
+import { createOrientToFaceButton } from './orientToFaceButton.js';
+import { createWireframeToggleButton } from './wireframeToggleButton.js';
+import { createInspectorToggleButton } from './inspectorToggleButton.js';
+import { createMetadataButton } from './metadataButton.js';
+import { createImportButton } from './importButton.js';
+import { createExportButton } from './exportButton.js';
+import { createFlatPatternButton } from './flatPatternButton.js';
+import { createAboutButton } from './aboutButton.js';
+import { createTestsButton } from './testsButton.js';
+import { createScriptRunnerButton } from './scriptRunnerButton.js';
+
+export function registerDefaultToolbarButtons(viewer) {
+  if (!viewer || typeof viewer.addToolbarButton !== 'function') return;
+
+  const creators = [
+    createSaveButton,
+    createZoomToFitButton,
+    createOrientToFaceButton,
+    createWireframeToggleButton,
+    createInspectorToggleButton,
+    createMetadataButton,
+    createImportButton,
+    createExportButton,
+    createFlatPatternButton,
+    createAboutButton,
+    createTestsButton,
+    createScriptRunnerButton,
+    createUndoButton,
+    createRedoButton,
+  ];
+
+  for (const make of creators) {
+    try {
+      const spec = make(viewer);
+      if (!spec) continue;
+      const { label, title, onClick } = spec;
+      viewer.addToolbarButton(label, title, onClick);
+    } catch {}
+  }
+}

package/src/UI/toolbarButtons/saveButton.js

@@ -0,0 +1,99 @@
+import { generate3MF } from '../../exporters/threeMF.js';
+import { localStorage as LS } from '../../idbStorage.js';
+import * as THREE from 'three';
+
+function _uint8ToBase64(uint8) {
+  let binary = '';
+  const chunk = 0x8000;
+  for (let i = 0; i < uint8.length; i += chunk) {
+    const sub = uint8.subarray(i, i + chunk);
+    binary += String.fromCharCode.apply(null, sub);
+  }
+  return btoa(binary);
+}
+
+
+
+export function createSaveButton(viewer) {
+  async function _captureThumbnail(size = 60) {
+    try {
+      const renderer = viewer?.renderer;
+      const canvas = renderer?.domElement;
+      const cam = viewer?.camera;
+      const controls = viewer?.controls;
+      if (!canvas || !cam) return null;
+
+      // Temporarily reorient exactly like clicking the ViewCube corner (top-front-right)
+      try {
+        const dir = new THREE.Vector3(1, 1, 1);
+        if (viewer?.viewCube && typeof viewer.viewCube._reorientCamera === 'function') {
+          viewer.viewCube._reorientCamera(dir, 'SAVE THUMBNAIL');
+        }
+        // Fit geometry within this oriented view
+        try { viewer.zoomToFit(1.1); } catch { }
+      } catch { /* ignore orientation failures */ }
+
+      // Ensure a fresh frame before capture
+      try { viewer.render(); } catch { }
+
+      // Wait one frame to be safe
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      const srcW = canvas.width || canvas.clientWidth || 1;
+      const srcH = canvas.height || canvas.clientHeight || 1;
+      const dst = document.createElement('canvas');
+      dst.width = size; dst.height = size;
+      const ctx = dst.getContext('2d');
+      if (!ctx) return null;
+      try { ctx.clearRect(0, 0, size, size); } catch { }
+      const scale = Math.min(size / srcW, size / srcH);
+      const dw = Math.max(1, Math.floor(srcW * scale));
+      const dh = Math.max(1, Math.floor(srcH * scale));
+      const dx = Math.floor((size - dw) / 2);
+      const dy = Math.floor((size - dh) / 2);
+      try { ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; } catch { }
+      ctx.drawImage(canvas, 0, 0, srcW, srcH, dx, dy, dw, dh);
+      const dataUrl = dst.toDataURL('image/png');
+      return dataUrl;
+    } catch { return null; }
+  }
+  async function onClick() {
+    // Prefer the FileManagerWidget if present
+    try {
+      if (viewer?.fileManagerWidget?.saveCurrent) {
+        await viewer.fileManagerWidget.saveCurrent();
+        return;
+      }
+    } catch { }
+    // Fallback: quick autosave to IndexedDB storage
+    try {
+      // Produce a compact 3MF that embeds feature history (now includes PMI views) only
+      const json = await viewer?.partHistory?.toJSON?.();
+      let additionalFiles = undefined;
+      let modelMetadata = undefined;
+      try {
+        if (json && typeof json === 'string') {
+          additionalFiles = { 'Metadata/featureHistory.json': json };
+          modelMetadata = { featureHistoryPath: '/Metadata/featureHistory.json' };
+        }
+        const viewFiles = await viewer?.pmiViewsWidget?.captureViewImagesForPackage?.();
+        if (viewFiles && typeof viewFiles === 'object') {
+          additionalFiles = { ...(additionalFiles || {}), ...viewFiles };
+        }
+      } catch { }
+
+      const thumbnail = await _captureThumbnail(60);
+      const bytes = await generate3MF([], { unit: 'millimeter', precision: 6, scale: 1, additionalFiles, modelMetadata, thumbnail });
+      const b64 = _uint8ToBase64(bytes);
+      // Do not persist a separate thumbnail; it's embedded in the 3MF
+      const payload = { savedAt: new Date().toISOString(), data3mf: b64 };
+      LS.setItem('__BREP_MODEL__:autosave', JSON.stringify(payload));
+      LS.setItem('__BREP_MODELS_LASTNAME__', 'autosave');
+      alert('Saved as "autosave"');
+    } catch {
+      alert('Save failed.');
+    }
+  }
+
+  return { label: '💾', title: 'Save current model', onClick };
+}

package/src/UI/toolbarButtons/scriptRunnerButton.js

@@ -0,0 +1,302 @@
+import { FloatingWindow } from '../FloatingWindow.js';
+import '../EnvMonacoEditor.js';
+
+const PANEL_KEY = Symbol('ScriptRunnerPanel');
+const DEFAULT_SNIPPET = `// Access the app environment via the global "env" object.
+console.log('env keys', Object.keys(env || {}));
+
+// Example: log the active part history entry
+console.log('active history', viewer?.partHistory?.getActiveStep?.());
+`;
+
+class ScriptRunnerPanel {
+  constructor(viewer) {
+    this.viewer = viewer;
+    this.window = null;
+    this.root = null;
+    this.editorEl = null;
+    this.editorWrap = null;
+    this.outputEl = null;
+    this.consoleWrap = null;
+    this.splitterEl = null;
+    this.contentRoot = null;
+    this.introEl = null;
+    this.statusEl = null;
+    this._initializedValue = false;
+    this._consoleHeight = 180;
+    this._lastContentRect = null;
+  }
+
+  toggle() {
+    if (this.root && this.root.style.display !== 'none') this.close();
+    else this.open();
+  }
+
+  open() {
+    this._ensureWindow();
+    if (!this.root) return;
+    this.root.style.display = 'flex';
+    try { this.editorEl?.refreshEnvAutocomplete?.(); } catch {}
+  }
+
+  close() {
+    if (!this.root) return;
+    try { this.root.style.display = 'none'; } catch {}
+  }
+
+  _ensureWindow() {
+    if (this.root) return;
+    const fw = new FloatingWindow({
+      title: 'Script Runner',
+      width: 760,
+      height: 520,
+      right: 16,
+      top: 56,
+      shaded: false,
+      onClose: () => this.close(),
+    });
+
+    const btnRun = document.createElement('button');
+    btnRun.className = 'fw-btn';
+    btnRun.textContent = 'Run';
+    btnRun.addEventListener('click', () => this._runCode());
+
+    const btnRefresh = document.createElement('button');
+    btnRefresh.className = 'fw-btn';
+    btnRefresh.textContent = 'Refresh env types';
+    btnRefresh.addEventListener('click', () => {
+      try {
+        this.editorEl?.refreshEnvAutocomplete?.();
+        this._setStatus('env typings refreshed from window.env');
+      } catch {
+        this._setStatus('Unable to refresh env typings');
+      }
+    });
+
+    fw.addHeaderAction(btnRun);
+    fw.addHeaderAction(btnRefresh);
+
+    const content = document.createElement('div');
+    content.style.display = 'flex';
+    content.style.flexDirection = 'column';
+    content.style.gap = '8px';
+    content.style.width = '100%';
+    content.style.height = '100%';
+    content.style.boxSizing = 'border-box';
+    content.style.minHeight = '0';
+    this.contentRoot = content;
+
+    const intro = document.createElement('div');
+    intro.textContent = 'Run ad-hoc JavaScript with Monaco autocomplete for window.env.';
+    intro.style.color = '#aeb6c5';
+    intro.style.font = '12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+    intro.style.opacity = '0.9';
+    this.introEl = intro;
+
+    const editorWrap = document.createElement('div');
+    editorWrap.style.display = 'flex';
+    editorWrap.style.flexDirection = 'column';
+    editorWrap.style.flex = '1 1 60%';
+    editorWrap.style.minHeight = '200px';
+    editorWrap.style.minWidth = '0';
+    editorWrap.style.position = 'relative';
+
+    const editor = document.createElement('env-monaco-editor');
+    editor.style.position = 'absolute';
+    editor.style.inset = '0';
+    editor.setAttribute('language', 'javascript');
+    if (!this._initializedValue) {
+      editor.value = DEFAULT_SNIPPET;
+      this._initializedValue = true;
+    }
+
+    const splitter = document.createElement('div');
+    splitter.style.flex = '0 0 10px';
+    splitter.style.height = '10px';
+    splitter.style.cursor = 'row-resize';
+    splitter.style.background = 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03))';
+    splitter.style.border = '1px solid #1f2530';
+    splitter.style.borderRadius = '8px';
+    splitter.style.margin = '6px 0';
+    splitter.style.position = 'relative';
+    splitter.style.zIndex = '2';
+    splitter.addEventListener('pointerdown', (ev) => this._onSplitterPointerDown(ev));
+
+    const consoleWrap = document.createElement('div');
+    consoleWrap.style.display = 'flex';
+    consoleWrap.style.flexDirection = 'column';
+    consoleWrap.style.flex = '0 0 180px';
+    consoleWrap.style.minHeight = '120px';
+    consoleWrap.style.maxHeight = '70vh';
+    consoleWrap.style.gap = '6px';
+    consoleWrap.style.position = 'relative';
+
+    const output = document.createElement('div');
+    output.style.flex = '1 1 auto';
+    output.style.background = '#0e1117';
+    output.style.border = '1px solid #1f2530';
+    output.style.borderRadius = '8px';
+    output.style.padding = '8px';
+    output.style.overflow = 'auto';
+    output.style.font = '12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+    output.style.color = '#d1d5db';
+
+    const statusRow = document.createElement('div');
+    statusRow.style.display = 'flex';
+    statusRow.style.alignItems = 'center';
+    statusRow.style.gap = '8px';
+
+    const status = document.createElement('div');
+    status.style.flex = '1';
+    status.style.color = '#9ca3af';
+    status.style.font = '12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+    status.textContent = 'Idle';
+
+    const btnClear = document.createElement('button');
+    btnClear.className = 'fw-btn';
+    btnClear.textContent = 'Clear output';
+    btnClear.addEventListener('click', () => { output.innerHTML = ''; });
+
+    statusRow.appendChild(status);
+    statusRow.appendChild(btnClear);
+
+    content.appendChild(intro);
+    editorWrap.appendChild(editor);
+    content.appendChild(editorWrap);
+    content.appendChild(splitter);
+    consoleWrap.appendChild(statusRow);
+    consoleWrap.appendChild(output);
+    content.appendChild(consoleWrap);
+
+    fw.content.appendChild(content);
+
+    this.window = fw;
+    this.root = fw.root;
+    this.editorEl = editor;
+    this.editorWrap = editorWrap;
+    this.outputEl = output;
+    this.consoleWrap = consoleWrap;
+    this.splitterEl = splitter;
+    this.statusEl = status;
+    try { this.root.style.display = 'none'; } catch {}
+    requestAnimationFrame(() => this._applySplitHeights());
+  }
+
+  async _runCode() {
+    const code = this.editorEl?.value || '';
+    if (!code.trim()) {
+      this._setStatus('Nothing to run');
+      return;
+    }
+    this._appendOutput(`>>> Running at ${new Date().toLocaleTimeString()}`);
+    this._setStatus('Running...');
+
+    const exec = () => {
+      const fn = new Function('viewer', 'env', 'monaco', `"use strict";\n${code}`);
+      return fn(this.viewer, window.env, window.monaco);
+    };
+
+    try {
+      const result = exec();
+      if (result instanceof Promise) {
+        const resolved = await result;
+        this._appendOutput(this._stringify(resolved));
+        this._setStatus('Completed (async)');
+      } else {
+        this._appendOutput(this._stringify(result));
+        this._setStatus('Completed');
+      }
+    } catch (e) {
+      const msg = e?.stack || e?.message || String(e);
+      this._appendOutput(msg, true);
+      this._setStatus('Error');
+      try { console.error('[ScriptRunner]', e); } catch {}
+    }
+  }
+
+  _appendOutput(text, isError = false) {
+    if (!this.outputEl) return;
+    const line = document.createElement('div');
+    line.textContent = text;
+    line.style.whiteSpace = 'pre-wrap';
+    line.style.color = isError ? '#fca5a5' : '#d1d5db';
+    this.outputEl.appendChild(line);
+    this.outputEl.scrollTop = this.outputEl.scrollHeight;
+  }
+
+  _setStatus(msg) {
+    if (!this.statusEl) return;
+    this.statusEl.textContent = msg;
+  }
+
+  _stringify(value) {
+    try {
+      if (typeof value === 'string') return value;
+      if (typeof value === 'function') return value.toString();
+      if (value === undefined) return 'undefined';
+      if (value === null) return 'null';
+      const json = JSON.stringify(value, null, 2);
+      return typeof json === 'string' ? json : String(value);
+    } catch {
+      try { return String(value); } catch { return '[unprintable]'; }
+    }
+  }
+
+  _onSplitterPointerDown(ev) {
+    if (ev.button !== 0) return;
+    const startY = ev.clientY;
+    const startHeight = (this.consoleWrap?.getBoundingClientRect?.().height) || this._consoleHeight;
+    const onMove = (e) => {
+      const dy = e.clientY - startY;
+      this._setConsoleHeight(startHeight - dy);
+      try { e.preventDefault(); } catch {}
+    };
+    const onUp = (e) => {
+      window.removeEventListener('pointermove', onMove, true);
+      window.removeEventListener('pointerup', onUp, true);
+      try { this._consoleHeight = (this.consoleWrap?.getBoundingClientRect?.().height) || this._consoleHeight; } catch {}
+    };
+    window.addEventListener('pointermove', onMove, true);
+    window.addEventListener('pointerup', onUp, true);
+    try { ev.preventDefault(); } catch {}
+  }
+
+  _setConsoleHeight(px) {
+    if (!this.contentRoot || !this.consoleWrap || !this.editorWrap) return;
+    const minConsole = 120;
+    const minEditor = 180;
+    const rect = this.contentRoot.getBoundingClientRect?.();
+    const contentH = rect?.height || 0;
+    const introH = this.introEl?.offsetHeight || 0;
+    const splitterH = this.splitterEl?.offsetHeight || 10;
+    const available = Math.max(0, contentH - introH - splitterH - 8); // account for gap/margins
+    if (available <= 0) return;
+    const maxConsole = Math.max(minConsole, available - minEditor);
+    const clamped = Math.min(Math.max(px, minConsole), maxConsole);
+    const editorHeight = Math.max(minEditor, available - clamped);
+    this._consoleHeight = clamped;
+    this.consoleWrap.style.flexBasis = `${clamped}px`;
+    this.consoleWrap.style.height = `${clamped}px`;
+    this.editorWrap.style.flexBasis = `${editorHeight}px`;
+    this.editorWrap.style.height = `${editorHeight}px`;
+    try { this.editorEl?.editor?.layout?.(); } catch {}
+  }
+
+  _applySplitHeights() {
+    this._setConsoleHeight(this._consoleHeight);
+    try { this.editorEl?.editor?.layout?.(); } catch {}
+  }
+}
+
+export function createScriptRunnerButton(viewer) {
+  if (!viewer) return null;
+  if (!viewer[PANEL_KEY]) {
+    viewer[PANEL_KEY] = new ScriptRunnerPanel(viewer);
+  }
+  const panel = viewer[PANEL_KEY];
+  return {
+    label: '</>',
+    title: 'Open Script Runner',
+    onClick: () => panel.toggle(),
+  };
+}

package/src/UI/toolbarButtons/testsButton.js

@@ -0,0 +1,26 @@
+// Adds a "tests" toolbar button that opens the Browser Testing window on demand.
+
+export function createTestsButton(viewer) {
+  if (!viewer) return null;
+
+  let tester = null;
+
+  return {
+    label: 'tests',
+    title: 'Open browser tests',
+    onClick: async () => {
+      try {
+        if (!tester) {
+          const mod = await import('../../tests/browserTests.js');
+          const { BrowserTesting } = mod || {};
+          if (typeof BrowserTesting !== 'function') return;
+          tester = new BrowserTesting({ viewer });
+        } else {
+          tester.toggle?.();
+        }
+      } catch (e) {
+        try { console.warn('Failed to open Browser Testing:', e); } catch {}
+      }
+    },
+  };
+}

package/src/UI/toolbarButtons/undoRedoButtons.js

@@ -0,0 +1,25 @@
+export function createUndoButton(viewer) {
+  const onClick = () => {
+    try {
+      if (typeof viewer?._runFeatureHistoryUndoRedo === 'function') {
+        viewer._runFeatureHistoryUndoRedo('undo');
+      } else {
+        viewer?.partHistory?.undoFeatureHistory?.();
+      }
+    } catch { }
+  };
+  return { label: '↶', title: 'Undo feature history (Ctrl+Z)', onClick };
+}
+
+export function createRedoButton(viewer) {
+  const onClick = () => {
+    try {
+      if (typeof viewer?._runFeatureHistoryUndoRedo === 'function') {
+        viewer._runFeatureHistoryUndoRedo('redo');
+      } else {
+        viewer?.partHistory?.redoFeatureHistory?.();
+      }
+    } catch { }
+  };
+  return { label: '↷', title: 'Redo feature history (Ctrl+Y)', onClick };
+}

package/src/UI/toolbarButtons/wireframeToggleButton.js

@@ -0,0 +1,5 @@
+export function createWireframeToggleButton(viewer) {
+  const onClick = () => { try { viewer?.toggleWireframe?.(); } catch {} };
+  return { label: '🕸️', title: 'Toggle wireframe', onClick };
+}
+

package/src/UI/toolbarButtons/zoomToFitButton.js

@@ -0,0 +1,5 @@
+export function createZoomToFitButton(viewer) {
+  const onClick = () => { try { viewer?.zoomToFit?.(); } catch {} };
+  return { label: '🔍', title: 'Frame all geometry', onClick };
+}
+