brep-io-kernel 1.0.0

package/src/UI/HistoryWidget.js

@@ -0,0 +1,457 @@
+import { SelectionFilter } from './SelectionFilter.js';
+import { HistoryCollectionWidget } from './history/HistoryCollectionWidget.js';
+
+const FALLBACK_INTERVAL_MS = 200;
+
+export class HistoryWidget extends HistoryCollectionWidget {
+  constructor(viewer) {
+    const partHistory = viewer?.partHistory || null;
+    super({ history: partHistory, viewer });
+    this.viewer = viewer || null;
+    this.partHistory = partHistory || null;
+
+    // Override configurable hooks from the base widget after super() so they can access `this`.
+    this._autoSyncOpenState = true;
+    this._determineExpanded = (entry) => this.#shouldExpandEntry(entry);
+    this._formOptionsProvider = (context) => this.#buildFormOptions(context);
+    this._decorateEntryHeader = (context) => this.#decorateEntryHeader(context);
+    this._buildEntryControls = null; // stick with defaults; override move/delete behaviours directly.
+    this._onEntryToggle = (entry, isOpen) => this.#handleEntryToggle(entry, isOpen);
+    this._onFormReady = (payload) => this.#handleFormReady(payload);
+    this._createEntryFunc = (type) => this.#createFeatureEntry(type);
+    this.onEntryChange = (payload) => this.#handleEntryChange(payload);
+
+    this._metaEls = new Map();
+    this._itemEls = new Map();
+    this._paramSignatures = new Map();
+    this._idsSignature = this.#computeIdsSignature();
+    this._rafHandle = null;
+    this._rafIsTimeout = false;
+    this._runPromise = null;
+
+    this.uiElement.classList.add('history-widget');
+    this.render();
+    this.#startAutoSyncLoop();
+    this.#patchRunHistory();
+    this.partHistory?.queueHistorySnapshot?.({ debounceMs: 0, reason: 'init' });
+  }
+
+  dispose() {
+    this.#stopAutoSyncLoop();
+    super.dispose();
+  }
+
+  render() {
+    if (!this._metaEls) this._metaEls = new Map();
+    if (!this._itemEls) this._itemEls = new Map();
+    if (!this._paramSignatures) this._paramSignatures = new Map();
+    this._metaEls.clear();
+    this._itemEls.clear();
+    super.render();
+    this._syncHeaderState();
+  }
+
+  async _moveEntry(id, delta) {
+    const entryInfo = this.#findEntryInfo(id);
+    if (!entryInfo) return;
+    super._moveEntry(id, delta);
+    this._idsSignature = this.#computeIdsSignature();
+    const feature = entryInfo.entry;
+    if (feature) {
+      feature.lastRunInputParams = null;
+      const featureId = this.#entryId(feature);
+      if (featureId) this.#setCurrentHistoryStep(featureId);
+    }
+    await this.#safeRunHistory();
+    this.partHistory?.queueHistorySnapshot?.({ debounceMs: 0, reason: 'move' });
+  }
+
+  _deleteEntry(id) {
+    const entryInfo = this.#findEntryInfo(id);
+    super._deleteEntry(id);
+    const featureId = entryInfo ? this.#entryId(entryInfo.entry) : null;
+    if (featureId && this.partHistory && this.partHistory.currentHistoryStepId === featureId) {
+      this.partHistory.currentHistoryStepId = null;
+    }
+    this._idsSignature = this.#computeIdsSignature();
+    const runPromise = this.#safeRunHistory();
+    if (runPromise && typeof runPromise.then === 'function') {
+      runPromise.then(() => {
+        this.partHistory?.queueHistorySnapshot?.({ debounceMs: 0, reason: 'delete' });
+      });
+    } else {
+      this.partHistory?.queueHistorySnapshot?.({ debounceMs: 0, reason: 'delete' });
+    }
+  }
+
+  _refreshAddMenu() {
+    if (!this._addMenu || !this._addBtn) return;
+    const registry = this._getFeatureRegistry();
+    const features = Array.isArray(registry?.features) ? registry.features : [];
+    this._addMenu.textContent = '';
+    if (!features.length) {
+      this._addBtn.disabled = true;
+      const empty = document.createElement('div');
+      empty.className = 'hc-menu-empty';
+      empty.textContent = 'No features registered';
+      this._addMenu.appendChild(empty);
+      return;
+    }
+    const items = [];
+    for (const FC of features) {
+      if (!FC) continue;
+      const names = this._extractDisplayNames(
+        FC,
+        FC?.shortName || FC?.name || 'Feature',
+        FC?.longName || FC?.name || 'Feature',
+      );
+      const label = names.longName || names.shortName || 'Feature';
+      const value = FC?.shortName || FC?.type || FC?.name || names.shortName || label;
+      const item = this._composeMenuItem(value, label, FC);
+      if (item) items.push(item);
+    }
+    if (!items.length) {
+      this._addBtn.disabled = true;
+      const empty = document.createElement('div');
+      empty.className = 'hc-menu-empty';
+      empty.textContent = 'No features registered';
+      this._addMenu.appendChild(empty);
+      return;
+    }
+    this._addBtn.disabled = false;
+    for (const { type, text } of items) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'hc-menu-item';
+      btn.textContent = text;
+      btn.dataset.type = type;
+      btn.addEventListener('click', async (ev) => {
+        ev.stopPropagation();
+        const targetType = ev?.currentTarget?.dataset?.type || type;
+        try {
+          await this._handleAddEntry(targetType);
+        } finally {
+          this._toggleAddMenu(false);
+        }
+      });
+      this._addMenu.appendChild(btn);
+    }
+  }
+
+  _resolveSchema(entry) {
+    const FeatureClass = this._resolveFeatureClass(entry?.type);
+    return FeatureClass?.inputParamsSchema || null;
+  }
+
+  #findEntryInfo(id) {
+    if (id == null) return null;
+    const entries = this._getEntries();
+    const stringId = String(id);
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      const entryId = this._extractEntryId(entry, i);
+      if (entryId === stringId) {
+        return { entry, index: i };
+      }
+    }
+    return null;
+  }
+
+  #startAutoSyncLoop() {
+    const useRaf = typeof requestAnimationFrame === 'function';
+    this._rafIsTimeout = !useRaf;
+    const tick = () => {
+      const sig = this.#computeIdsSignature();
+      if (sig !== this._idsSignature) {
+        this._idsSignature = sig;
+        this.render();
+      } else {
+        this.#refreshOpenForms();
+        this._syncHeaderState();
+        this.#ensureCurrentExpanded();
+      }
+      if (useRaf) this._rafHandle = requestAnimationFrame(tick);
+      else this._rafHandle = setTimeout(tick, FALLBACK_INTERVAL_MS);
+    };
+    tick();
+  }
+
+  #stopAutoSyncLoop() {
+    if (this._rafHandle == null) return;
+    if (this._rafIsTimeout) clearTimeout(this._rafHandle);
+    else if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this._rafHandle);
+    this._rafHandle = null;
+  }
+
+  #patchRunHistory() {
+    const ph = this.partHistory;
+    if (!ph || typeof ph.runHistory !== 'function' || ph.__historyWidgetPatched) return;
+    const original = ph.runHistory.bind(ph);
+    ph.runHistory = async (...args) => {
+      const res = await original(...args);
+      this.#afterPartHistoryMutated();
+      return res;
+    };
+    ph.__historyWidgetPatched = true;
+  }
+
+  #afterPartHistoryMutated() {
+    this._idsSignature = this.#computeIdsSignature();
+    this._syncHeaderState();
+    this.#refreshOpenForms();
+    try { this.viewer?._refreshAssemblyConstraintsPanelVisibility?.(); } catch { /* ignore */ }
+  }
+
+  async #createFeatureEntry(typeStr) {
+    const ph = this.partHistory;
+    if (!ph || typeof ph.newFeature !== 'function') return null;
+    try {
+      const feature = await ph.newFeature(typeStr);
+      const newId = this.#entryId(feature);
+      if (newId) this.#setCurrentHistoryStep(newId);
+      await this.#safeRunHistory();
+      this.partHistory?.queueHistorySnapshot?.({ debounceMs: 0, reason: 'add' });
+      this._idsSignature = this.#computeIdsSignature();
+      return feature;
+    } catch (error) {
+      console.warn('[HistoryWidget] Failed to create feature:', error);
+      return null;
+    }
+  }
+
+  #shouldExpandEntry(entry) {
+    const target = this.partHistory?.currentHistoryStepId;
+    if (!target) return false;
+    const id = this.#entryId(entry);
+    if (id == null || String(id) !== String(target)) return false;
+    const runtimeOpen = entry?.runtimeAttributes?.__open;
+    const paramOpen = entry?.inputParams?.__open;
+    if (runtimeOpen === false || paramOpen === false) return false;
+    return true;
+  }
+
+  #handleEntryToggle(entry, isOpen) {
+    if (!this.partHistory) return;
+    const id = this.#entryId(entry);
+    if (!id) return;
+    if (isOpen) {
+      this.#setCurrentHistoryStep(id);
+    } else {
+      if (String(this.partHistory.currentHistoryStepId) === String(id)) {
+        this.partHistory.currentHistoryStepId = null;
+      }
+    }
+    this.#safeRunHistory();
+  }
+
+  #handleEntryChange({ entry }) {
+    const id = this.#entryId(entry);
+    if (id) this.#setCurrentHistoryStep(id);
+    const runPromise = this.#safeRunHistory();
+    if (runPromise && typeof runPromise.then === 'function') {
+      runPromise.then(() => {
+        this.partHistory?.queueHistorySnapshot?.({ reason: 'edit' });
+      });
+    } else {
+      this.partHistory?.queueHistorySnapshot?.({ reason: 'edit' });
+    }
+  }
+
+  #handleFormReady({ id, entry }) {
+    if (!id || !entry) return;
+    this._paramSignatures.set(String(id), this.#computeParamsSig(entry.inputParams));
+  }
+
+  #buildFormOptions(context = {}) {
+    const entry = context?.entry || null;
+    const featureId = this.#entryId(entry);
+    return {
+      onChange: () => {
+        if (featureId) this.#setCurrentHistoryStep(featureId);
+      },
+      onAction: (_id, actionKey) => this.#handleFormAction(featureId, actionKey),
+      onReferenceChipRemove: (name) => this.#handleReferenceChipRemove(name),
+      scene: this.viewer?.scene || null,
+      viewer: this.viewer || null,
+      partHistory: this.partHistory || null,
+      featureRef: entry || null,
+    };
+  }
+
+  #handleFormAction(featureID, actionKey) {
+    if (!actionKey || !this.viewer) return;
+    try {
+      if (actionKey === 'editSketch' && typeof this.viewer.startSketchMode === 'function') {
+        this.viewer.startSketchMode(featureID);
+      } else if (actionKey === 'editSpline' && typeof this.viewer.startSplineMode === 'function') {
+        this.viewer.startSplineMode(featureID);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  #handleReferenceChipRemove(name) {
+    if (!name) return;
+    try {
+      const scene = this.viewer?.scene || null;
+      if (scene) SelectionFilter.deselectItem(scene, name);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  #decorateEntryHeader(context = {}) {
+    const id = context?.id != null ? String(context.id) : null;
+    const entry = context?.entry || null;
+    const elements = context?.elements || {};
+    this._applyDisplayInfo(entry, context?.index || 0, id, {
+      titleEl: elements.titleEl,
+      metaEl: elements.metaEl,
+      item: elements.item,
+    });
+    if (id && elements.metaEl) this._metaEls.set(id, elements.metaEl);
+    if (id && elements.item) this._itemEls.set(id, elements.item);
+    this.#decorateMissingFeaturePanel(entry, context);
+  }
+
+  #decorateMissingFeaturePanel(entry, context = {}) {
+    if (!context.isOpen) return;
+    const FeatureClass = this._resolveFeatureClass(entry?.type);
+    if (FeatureClass) return;
+    const body = context.elements?.bodyEl;
+    if (!body) return;
+    body.textContent = '';
+    const wrap = document.createElement('div');
+    wrap.className = 'missing-feature-panel';
+    const msg = document.createElement('div');
+    msg.className = 'missing-msg';
+    msg.textContent = `Feature type "${entry?.type || ''}" is not available. Remove it or install a plugin that provides it.`;
+    wrap.appendChild(msg);
+    const removeBtn = document.createElement('button');
+    removeBtn.type = 'button';
+    removeBtn.className = 'hc-btn danger';
+    removeBtn.textContent = 'Remove from history';
+    removeBtn.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      this._deleteEntry(context.id);
+    });
+    wrap.appendChild(removeBtn);
+    body.appendChild(wrap);
+  }
+
+  _syncHeaderState() {
+    const entries = this._getEntries();
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      const id = this._extractEntryId(entry, i);
+      if (id == null) continue;
+      const titleEl = this._titleEls.get(String(id));
+      const metaEl = this._metaEls.get(String(id));
+      const item = this._itemEls.get(String(id));
+      if (!titleEl && !metaEl && !item) continue;
+      this._applyDisplayInfo(entry, i, String(id), {
+        titleEl,
+        metaEl,
+        item,
+      });
+    }
+  }
+
+  #refreshOpenForms() {
+    const entries = this._getEntries();
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      const id = this._extractEntryId(entry, i);
+      if (id == null) continue;
+      const form = this.getFormForEntry(id);
+      if (!form) continue;
+      const sig = this.#computeParamsSig(entry?.inputParams);
+      if (this._paramSignatures.get(id) === sig) continue;
+      this._paramSignatures.set(id, sig);
+      try { form.refreshFromParams?.(); } catch { /* ignore */ }
+    }
+  }
+
+  #ensureCurrentExpanded() {
+    const ph = this.partHistory;
+    if (!ph) return;
+    const target = ph.currentHistoryStepId;
+    if (!target) return;
+    if (this._expandedId && String(this._expandedId) === String(target)) return;
+    const entries = this._getEntries();
+    const exists = entries.some((entry, idx) => this._extractEntryId(entry, idx) === String(target));
+    if (!exists) return;
+    this._expandedId = String(target);
+    this.render();
+  }
+
+  #computeIdsSignature() {
+    const features = this._getEntries();
+    return features
+      .map((entry, idx) => this._extractEntryId(entry, idx))
+      .filter((id) => id != null)
+      .join('|');
+  }
+
+  #computeParamsSig(params) {
+    if (!params || typeof params !== 'object') return '';
+    const keys = Object.keys(params).filter((k) => k !== 'featureID' && k !== 'id').sort();
+    const parts = [];
+    for (const key of keys) {
+      const value = params[key];
+      if (value == null) parts.push(`${key}:null`);
+      else if (typeof value === 'object' || typeof value === 'function') parts.push(`${key}:[obj]`);
+      else parts.push(`${key}:${String(value)}`);
+    }
+    return parts.join('|');
+  }
+
+  #entryId(entry) {
+    if (!entry) return null;
+    const params = entry.inputParams || {};
+    if (params.id != null) return String(params.id);
+    if (params.featureID != null) return String(params.featureID);
+    if (params.id != null) return String(params.id);
+    if (entry.id != null) return String(entry.id);
+    return null;
+  }
+
+  #setCurrentHistoryStep(id) {
+    if (!this.partHistory) return;
+    this.partHistory.currentHistoryStepId = id != null ? String(id) : null;
+  }
+
+  #safeRunHistory() {
+    if (!this.partHistory || typeof this.partHistory.runHistory !== 'function') {
+      return Promise.resolve();
+    }
+    const previous = this._runPromise || Promise.resolve();
+    const next = previous.then(async () => {
+      try {
+        await this.partHistory.runHistory();
+      } catch (error) {
+        console.warn('[HistoryWidget] runHistory failed:', error);
+      }
+    });
+    this._runPromise = next.catch((error) => {
+      console.warn('[HistoryWidget] runHistory sequence failed:', error);
+    });
+    return this._runPromise;
+  }
+
+  _getFeatureRegistry() {
+    return this.partHistory?.featureRegistry || null;
+  }
+
+  _resolveFeatureClass(type) {
+    if (!type) return null;
+    const registry = this._getFeatureRegistry();
+    if (!registry) return null;
+    try {
+      return registry.getSafe?.(type) || registry.get?.(type) || null;
+    } catch {
+      return null;
+    }
+  }
+}

package/src/UI/MainToolbar.js

@@ -0,0 +1,131 @@
+// MainToolbar.js - top toolbar that manages layout and button registration.
+// Button logic is implemented externally and registered via addCustomButton()/viewer.addToolbarButton.
+
+export class MainToolbar {
+  constructor(viewer) {
+    this.viewer = viewer;
+    // Guard against duplicate toolbars if constructed twice (e.g., hot reloads)
+    try {
+      const existing = document.getElementById('main-toolbar');
+      if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+    } catch { /* ignore */ }
+    this.root = document.createElement('div');
+    this.root.id = 'main-toolbar';
+    this._ensureStyles();
+    this._buildUI();
+    this._positionWithSidebar();
+
+    // Keep position in sync with sidebar and window resizes
+    window.addEventListener('resize', () => this._positionWithSidebar());
+    try {
+      if (window.ResizeObserver && this.viewer?.sidebar) {
+        const ro = new ResizeObserver(() => this._positionWithSidebar());
+        ro.observe(this.viewer.sidebar);
+        this._ro = ro;
+      }
+    } catch { /* ignore */ }
+  }
+
+  _ensureStyles() {
+    if (document.getElementById('main-toolbar-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'main-toolbar-styles';
+    style.textContent = `
+      #main-toolbar {
+        position: fixed;
+        top: 0; left: 0; right: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 6px;
+        padding: 6px;
+        background: rgba(20,24,30,.85);
+        border: 1px solid #262b36;
+        border-radius: 8px;
+        z-index: 10;
+        pointer-events: auto;
+        user-select: none;
+      }
+      .mtb-left, .mtb-right {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+      .mtb-left { flex: 1 1 auto; }
+      .mtb-right { margin-left: auto; justify-content: flex-end; }
+      .mtb-spacer { flex: 1; }
+
+      .mtb-btn {
+        background: transparent;
+        color: #ddd;
+        border: 1px solid #364053;
+        padding: 4px 8px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        line-height: 18px;
+        user-select: none;
+      }
+      .mtb-btn.mtb-icon {
+        min-width: 36px;
+        font-size: 16px;
+      }
+      .mtb-btn.is-active {
+        background: linear-gradient(180deg, rgba(110,168,254,.25), rgba(110,168,254,.15));
+        border-color: #6ea8fe;
+        color: #e9f0ff;
+        box-shadow: 0 0 0 1px rgba(110,168,254,.2) inset;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  _buildUI() {
+    const left = document.createElement('div');
+    left.className = 'mtb-left';
+    this._left = left;
+
+    // Buttons are provided by external modules via addCustomButton()/viewer.addToolbarButton
+
+    const right = document.createElement('div');
+    right.className = 'mtb-right';
+
+    this.root.appendChild(left);
+    this.root.appendChild(right);
+    document.body.appendChild(this.root);
+  }
+
+  _btn(label, title, onClick) {
+    const b = document.createElement('button');
+    b.className = 'mtb-btn';
+    b.textContent = label;
+    b.title = title || label;
+    b.addEventListener('click', (e) => { e.stopPropagation(); try { onClick && onClick(); } catch {} });
+    return b;
+  }
+
+  // Public: allow plugins to add custom buttons to the left cluster
+  addCustomButton({ label, title, onClick }) {
+    try {
+      const btn = this._btn(String(label ?? '🔧'), String(title || ''), onClick);
+      this._left?.appendChild(btn);
+      return btn;
+    } catch { return null; }
+  }
+
+  _positionWithSidebar() {
+    try {
+      const sb = this.viewer?.sidebar;
+      const shouldOffset = (typeof this.viewer?._getSidebarShouldShow === 'function')
+        ? this.viewer._getSidebarShouldShow()
+        : true;
+      const w = shouldOffset
+        ? Math.ceil(sb?.getBoundingClientRect?.().width || sb?.offsetWidth || 0)
+        : 0;
+      this.root.style.left = `${w}px`;
+    } catch { this.root.style.left = '0px'; }
+  }
+}