brep-io-kernel 1.0.0-ci.10

package/src/UI/assembly/AssemblyConstraintCollectionWidget.js

@@ -0,0 +1,329 @@
+import { HistoryCollectionWidget } from '../history/HistoryCollectionWidget.js';
+import { resolveEntryId } from '../history/historyDisplayInfo.js';
+import { SelectionFilter } from '../SelectionFilter.js';
+import { constraintLabelText } from './constraintLabelUtils.js';
+
+const COLLECTION_EXTRA_CSS = `
+  .constraint-enable-toggle {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 8px;
+    padding-right: 4px;
+  }
+  .constraint-enable-toggle .hc-entry-toggle-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--accent);
+  }
+  .hc-item.constraint-disabled .hc-title {
+    opacity: 0.7;
+  }
+  .hc-item.constraint-disabled .hc-meta {
+    opacity: 0.7;
+  }
+  .hc-item.has-error .hc-meta {
+    color: var(--danger);
+    font-weight: 600;
+  }
+  .constraint-dialog-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 12px;
+  }
+  .constraint-dialog-actions .btn {
+    appearance: none;
+    border: 1px solid var(--border);
+    background: rgba(255,255,255,.03);
+    color: var(--text);
+    border-radius: 8px;
+    padding: 6px 12px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
+  }
+  .constraint-dialog-actions .btn:hover {
+    border-color: var(--focus);
+  }
+  .constraint-dialog-actions .btn:active {
+    transform: translateY(1px);
+  }
+  .constraint-dialog-actions .highlight-btn {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .constraint-dialog-actions .highlight-btn:hover {
+    background: rgba(110,168,254,.15);
+  }
+`;
+
+export class AssemblyConstraintCollectionWidget extends HistoryCollectionWidget {
+  constructor({
+    history = null,
+    viewer = null,
+    partHistory = null,
+    onEntryChange = null,
+    onCollectionChange = null,
+    onEntryToggle = null,
+    onHighlightRequest = null,
+    onClearHighlight = null,
+    onBeforeConstraintChange = null,
+  } = {}) {
+    const historyRef = history;
+    const viewerRef = viewer;
+    const beforeChangeHook = typeof onBeforeConstraintChange === 'function' ? onBeforeConstraintChange : null;
+    const callBeforeChange = (payload = {}) => {
+      if (!beforeChangeHook) return Promise.resolve();
+      try {
+        const result = beforeChangeHook(payload);
+        if (result && typeof result.then === 'function') {
+          return result.catch((error) => {
+            console.warn('[AssemblyConstraintCollectionWidget] before change hook rejected:', error);
+          });
+        }
+        return Promise.resolve(result);
+      } catch (error) {
+        console.warn('[AssemblyConstraintCollectionWidget] before change hook failed:', error);
+        return Promise.resolve();
+      }
+    };
+    const formOptionsProvider = (context = {}) => {
+      const entry = context.entry || null;
+      const constraintId = resolveEntryId(entry);
+      return {
+        excludeKeys: ['id', 'constraintID', 'applyImmediately'],
+        onReferenceChipRemove: (name) => {
+          try { SelectionFilter.deselectItem?.(viewerRef?.scene, name); }
+          catch { /* ignore */ }
+        },
+        onChange: async (_entryId, details) => {
+          if (!constraintId) return;
+          const key = details?.key;
+          if (!key || !Object.prototype.hasOwnProperty.call(details, 'value')) return;
+          await callBeforeChange({ entry, reason: 'params', key, value: details.value });
+          historyRef?.updateConstraintParams?.(constraintId, (params) => {
+            if (!params || typeof params !== 'object') return;
+            params[key] = details.value;
+          });
+        },
+      };
+    };
+
+    const externalEntryChange = typeof onEntryChange === 'function' ? onEntryChange : null;
+    const externalCollectionChange = typeof onCollectionChange === 'function' ? onCollectionChange : null;
+    const externalToggle = typeof onEntryToggle === 'function' ? onEntryToggle : null;
+
+    super({
+      history,
+      viewer,
+      autoSyncOpenState: true,
+      formOptions: formOptionsProvider,
+      createEntry: async (typeStr) => {
+        if (!typeStr) return null;
+        if (typeof historyRef?.addConstraint !== 'function') return null;
+        return historyRef.addConstraint(typeStr);
+      },
+      entryToggle: {
+        className: 'constraint-enable-toggle',
+        getTitle: () => 'Enable or disable this constraint',
+        isEnabled: ({ entry }) => entry?.enabled !== false,
+        setEnabled: async ({ entry }, value) => {
+          const entryId = resolveEntryId(entry);
+          if (!entryId) return;
+          await callBeforeChange({ entry, reason: value ? 'enable' : 'disable' });
+          historyRef?.setConstraintEnabled?.(entryId, value);
+        },
+      },
+      onEntryChange: (payload) => {
+        if (payload?.entry?.inputParams) {
+          payload.entry.inputParams.applyImmediately = true;
+        }
+        if (externalEntryChange) {
+          try { externalEntryChange(payload); } catch { /* ignore */ }
+        }
+      },
+      onCollectionChange: (payload) => {
+        if (externalCollectionChange) {
+          try { externalCollectionChange(payload); } catch { /* ignore */ }
+        }
+      },
+      onEntryToggle: (entry, isOpen) => {
+        const entryId = resolveEntryId(entry);
+        if (entryId && typeof historyRef?.setOpenState === 'function') {
+          historyRef.setOpenState(entryId, isOpen);
+        }
+        if (externalToggle) {
+          try { externalToggle(entry, isOpen); } catch { /* ignore */ }
+        }
+      },
+      decorateEntryHeader: (context) => { this.#decorateEntry(context); },
+      buildEntryControls: (context) => this.#buildControls(context),
+      onFormReady: (payload) => { this.#handleFormReady(payload); },
+    });
+
+    this.partHistory = partHistory || null;
+    this.viewer = viewer || null;
+    this._highlightCallback = typeof onHighlightRequest === 'function' ? onHighlightRequest : null;
+    this._clearHighlightCallback = typeof onClearHighlight === 'function' ? onClearHighlight : null;
+    this._beforeConstraintChangeHandler = callBeforeChange;
+    this.#injectAdditionalStyles();
+  }
+
+  setPartHistory(partHistory) {
+    this.partHistory = partHistory || null;
+  }
+
+  focusEntryById(targetId, { behavior = 'smooth' } = {}) {
+    if (targetId == null) return;
+    const id = String(targetId);
+    if (!id) return;
+    this._expandedId = id;
+    this.render();
+    const root = this._shadow || null;
+    if (!root) return;
+    const selector = `.hc-item[data-entry-id="${CSS?.escape ? CSS.escape(id) : id}"]`;
+    const el = root.querySelector(selector);
+    if (el && typeof el.scrollIntoView === 'function') {
+      el.scrollIntoView({ behavior, block: 'center' });
+    }
+  }
+
+  #decorateEntry(context = {}) {
+    const { entry = null, elements = {}, index = 0 } = context;
+    if (!elements || !elements.item) return;
+    const info = this._applyDisplayInfo(entry, index, resolveEntryId(entry, index), {
+      titleEl: elements.titleEl,
+      metaEl: elements.metaEl,
+      item: elements.item,
+    });
+    const constraintClass = entry?.constraintClass || null;
+    elements.item.classList.toggle('constraint-disabled', entry?.enabled === false);
+    elements.item.dataset.constraintId = resolveEntryId(entry) || '';
+
+    if (info && info.name && elements.titleEl) {
+      elements.titleEl.textContent = info.name;
+    } else if (elements.titleEl) {
+      elements.titleEl.textContent =
+        constraintLabelText(entry, constraintClass, this.partHistory) || `Constraint ${index + 1}`;
+    }
+  }
+
+  #buildControls(context = {}) {
+    const entryId = resolveEntryId(context.entry);
+    const total = context.totalCount || 0;
+    const index = context.index || 0;
+    const controls = [];
+    controls.push({
+      key: 'move-up',
+      label: '△',
+      title: 'Move up',
+      disabled: index <= 0,
+      onClick: async () => {
+        await this.#notifyBeforeChange({ entry: context.entry, reason: 'move-up' });
+        if (entryId) this.history?.moveConstraint?.(entryId, -1);
+      },
+    });
+    controls.push({
+      key: 'move-down',
+      label: '▽',
+      title: 'Move down',
+      disabled: index >= total - 1,
+      onClick: async () => {
+        await this.#notifyBeforeChange({ entry: context.entry, reason: 'move-down' });
+        if (entryId) this.history?.moveConstraint?.(entryId, 1);
+      },
+    });
+    controls.push({
+      key: 'delete',
+      label: '✕',
+      className: 'hc-btn danger',
+      title: 'Delete',
+      onClick: async () => {
+        await this.#notifyBeforeChange({ entry: context.entry, reason: 'delete' });
+        if (entryId) this.history?.removeConstraint?.(entryId);
+      },
+    });
+    return controls;
+  }
+
+  #notifyBeforeChange(payload = {}) {
+    const handler = this._beforeConstraintChangeHandler;
+    if (!handler) return Promise.resolve();
+    try {
+      const result = handler(payload);
+      if (result && typeof result.then === 'function') {
+        return result.catch((error) => {
+          console.warn('[AssemblyConstraintCollectionWidget] before change hook rejected:', error);
+        });
+      }
+      return Promise.resolve(result);
+    } catch (error) {
+      console.warn('[AssemblyConstraintCollectionWidget] before change hook threw:', error);
+      return Promise.resolve();
+    }
+  }
+
+  _resolveSchema(entry) {
+    const constraintClass = entry?.constraintClass || null;
+    if (constraintClass?.inputParamsSchema) return constraintClass.inputParamsSchema;
+    const registry = this.history?.registry || null;
+    const type = entry?.type || entry?.inputParams?.type;
+    if (registry && type) {
+      const resolved =
+        (typeof registry.getSafe === 'function' && registry.getSafe(type))
+        || (typeof registry.get === 'function' && registry.get(type));
+      if (resolved?.inputParamsSchema) return resolved.inputParamsSchema;
+    }
+    return super._resolveSchema(entry);
+  }
+
+  #handleFormReady({ entry, form }) {
+    if (!form?.uiElement) return;
+    if (entry?.inputParams) entry.inputParams.applyImmediately = true;
+    const host = form.uiElement.parentElement;
+    if (!host) return;
+    let actions = host.querySelector(':scope > .constraint-dialog-actions');
+    if (!actions) {
+      actions = document.createElement('div');
+      actions.className = 'constraint-dialog-actions';
+      host.appendChild(actions);
+    } else {
+      actions.textContent = '';
+    }
+
+    const highlightBtn = document.createElement('button');
+    highlightBtn.type = 'button';
+    highlightBtn.className = 'btn highlight-btn';
+    highlightBtn.textContent = 'Highlight Selection';
+    highlightBtn.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (this._highlightCallback) {
+        try { this._highlightCallback(entry); } catch { /* ignore */ }
+      }
+    });
+    actions.appendChild(highlightBtn);
+
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.className = 'btn';
+    clearBtn.textContent = 'Clear Highlight';
+    clearBtn.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (this._clearHighlightCallback) {
+        try { this._clearHighlightCallback(); } catch { /* ignore */ }
+      }
+    });
+    actions.appendChild(clearBtn);
+  }
+
+  #injectAdditionalStyles() {
+    if (!this._shadow) return;
+    const style = document.createElement('style');
+    style.textContent = COLLECTION_EXTRA_CSS;
+    this._shadow.appendChild(style);
+  }
+
+}

package/src/UI/assembly/AssemblyConstraintControlsWidget.js

@@ -0,0 +1,282 @@
+export class AssemblyConstraintControlsWidget {
+  constructor(host) {
+    this.host = host || null;
+    this.element = this.#buildControlsPanel();
+  }
+
+  #buildControlsPanel() {
+    const wrap = document.createElement('div');
+    wrap.className = 'constraints-control-panel';
+
+    wrap.appendChild(this.#buildSolverControls());
+    wrap.appendChild(this.#buildVisualizationControls());
+    wrap.appendChild(this.#buildDebugControls());
+
+    return wrap;
+  }
+
+  #buildSolverControls() {
+    const host = this.host;
+    const wrap = document.createElement('div');
+    wrap.className = 'control-panel-section solver-controls';
+
+    const mainRow = document.createElement('div');
+    mainRow.className = 'solver-row solver-row-main';
+
+    const label = document.createElement('label');
+    label.className = 'solver-iterations';
+
+    const labelText = document.createElement('span');
+    labelText.className = 'solver-iterations-label';
+    labelText.textContent = 'Iterations';
+
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.min = '1';
+    input.step = '1';
+    input.inputMode = 'numeric';
+    input.value = String(host?._defaultIterations ?? 1);
+    input.style.width = '5em';
+    input.addEventListener('change', () => {
+      const value = Number(input.value);
+      if (!Number.isFinite(value) || value < 1) {
+        input.value = String(host?._defaultIterations ?? 1);
+      }
+    });
+
+    label.appendChild(labelText);
+    label.appendChild(input);
+
+    const buttonGroup = document.createElement('div');
+    buttonGroup.className = 'solver-button-group';
+
+    const startBtn = document.createElement('button');
+    startBtn.type = 'button';
+    startBtn.className = 'btn solver-start-btn';
+    startBtn.textContent = 'Start';
+    startBtn.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const promise = host?._handleStartClick?.call(host);
+      if (promise?.catch) {
+        try { promise.catch(() => { }); } catch { /* ignore */ }
+      }
+    });
+
+    const stopBtn = document.createElement('button');
+    stopBtn.type = 'button';
+    stopBtn.className = 'btn solver-stop-btn';
+    stopBtn.textContent = 'Stop';
+    stopBtn.disabled = true;
+    stopBtn.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const stopPromise = host?._stopSolver?.call(host, { wait: false });
+      if (stopPromise?.catch) {
+        try { stopPromise.catch(() => { }); } catch { /* ignore */ }
+      }
+    });
+
+    buttonGroup.appendChild(startBtn);
+    buttonGroup.appendChild(stopBtn);
+
+    mainRow.appendChild(label);
+    mainRow.appendChild(buttonGroup);
+
+    const statusRow = document.createElement('div');
+    statusRow.className = 'solver-row solver-row-status';
+
+    const statusLabel = document.createElement('span');
+    statusLabel.className = 'solver-status-label';
+    statusLabel.textContent = 'Status: Idle';
+
+    const loopLabel = document.createElement('span');
+    loopLabel.className = 'solver-loop-label';
+    loopLabel.textContent = 'Loop: -';
+
+    const constraintLabel = document.createElement('span');
+    constraintLabel.className = 'solver-constraint-label';
+    constraintLabel.textContent = 'Constraint: -';
+
+    statusRow.appendChild(statusLabel);
+    statusRow.appendChild(loopLabel);
+    statusRow.appendChild(constraintLabel);
+
+    const autoSolveRow = document.createElement('div');
+    autoSolveRow.className = 'solver-row solver-row-autosolve';
+
+    const autoSolveLabel = document.createElement('label');
+    autoSolveLabel.className = 'toggle-control solver-autosolve-toggle';
+
+    const autoSolveCheckbox = document.createElement('input');
+    autoSolveCheckbox.type = 'checkbox';
+    autoSolveCheckbox.checked = !!host?._fullSolveOnChange;
+    autoSolveCheckbox.addEventListener('change', () => {
+      host?._handleFullSolveToggleChange?.call(host, autoSolveCheckbox.checked);
+    });
+
+    const autoSolveText = document.createElement('span');
+    autoSolveText.textContent = 'Full solve on change';
+
+    autoSolveLabel.appendChild(autoSolveCheckbox);
+    autoSolveLabel.appendChild(autoSolveText);
+    autoSolveRow.appendChild(autoSolveLabel);
+
+    const animateRow = document.createElement('div');
+    animateRow.className = 'solver-row solver-row-animate';
+
+    const animateLabel = document.createElement('label');
+    animateLabel.className = 'toggle-control solver-animate-toggle';
+
+    const animateCheckbox = document.createElement('input');
+    animateCheckbox.type = 'checkbox';
+    animateCheckbox.checked = host?._animateEnabled !== false;
+    animateCheckbox.addEventListener('change', () => {
+      host?._handleAnimateCheckboxChange?.call(host);
+    });
+
+    const animateText = document.createElement('span');
+    animateText.textContent = 'Animate solve';
+
+    animateLabel.appendChild(animateCheckbox);
+    animateLabel.appendChild(animateText);
+
+    const delayContainer = document.createElement('div');
+    delayContainer.className = 'solver-animate-delay';
+
+    const delayLabel = document.createElement('span');
+    delayLabel.textContent = 'Step speed (ms)';
+
+    const delayInput = document.createElement('input');
+    delayInput.type = 'number';
+    delayInput.min = '0';
+    delayInput.step = '1';
+    delayInput.inputMode = 'numeric';
+    delayInput.value = String(host?._animateDelayMs ?? 0);
+    delayInput.addEventListener('change', () => {
+      host?._handleAnimateDelayChange?.call(host);
+    });
+
+    delayContainer.appendChild(delayLabel);
+    delayContainer.appendChild(delayInput);
+
+    animateRow.appendChild(animateLabel);
+    animateRow.appendChild(delayContainer);
+
+    const pauseRow = document.createElement('div');
+    pauseRow.className = 'solver-row solver-row-pause';
+
+    const pauseLabel = document.createElement('label');
+    pauseLabel.className = 'toggle-control solver-pause-toggle';
+
+    const pauseCheckbox = document.createElement('input');
+    pauseCheckbox.type = 'checkbox';
+    pauseCheckbox.addEventListener('change', () => {
+      host?._handlePauseCheckboxChange?.call(host);
+    });
+
+    const pauseText = document.createElement('span');
+    pauseText.textContent = 'Pause between loops';
+
+    pauseLabel.appendChild(pauseCheckbox);
+    pauseLabel.appendChild(pauseText);
+
+    const continueBtn = document.createElement('button');
+    continueBtn.type = 'button';
+    continueBtn.className = 'btn solver-continue-btn';
+    continueBtn.textContent = 'Continue';
+    continueBtn.disabled = true;
+    continueBtn.style.display = 'none';
+    continueBtn.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      host?._handleContinueClick?.call(host);
+    });
+
+    pauseRow.appendChild(pauseLabel);
+    pauseRow.appendChild(continueBtn);
+
+    wrap.appendChild(mainRow);
+    wrap.appendChild(statusRow);
+    wrap.appendChild(autoSolveRow);
+    wrap.appendChild(animateRow);
+    wrap.appendChild(pauseRow);
+
+    if (host) {
+      host._iterationInput = input;
+      host._startButton = startBtn;
+      host._stopButton = stopBtn;
+      host._solverStatusLabel = statusLabel;
+      host._solverLoopLabel = loopLabel;
+      host._solverConstraintLabel = constraintLabel;
+      host._pauseCheckbox = pauseCheckbox;
+      host._solverContinueButton = continueBtn;
+      host._animateCheckbox = animateCheckbox;
+      host._animateDelayInput = delayInput;
+      host._animateDelayContainer = delayContainer;
+      host._fullSolveCheckbox = autoSolveCheckbox;
+      host._animateEnabled = animateCheckbox.checked !== false;
+      host._updateSolverUI?.();
+    }
+
+    return wrap;
+  }
+
+  #buildVisualizationControls() {
+    const host = this.host;
+    const wrap = document.createElement('div');
+    wrap.className = 'control-panel-section visualization-controls';
+
+    const label = document.createElement('label');
+    label.className = 'toggle-control';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = host?._constraintGraphicsEnabled ?? false;
+    checkbox.addEventListener('change', () => {
+      host?._setConstraintGraphicsEnabled?.call(host, checkbox.checked);
+    });
+
+    const span = document.createElement('span');
+    span.textContent = 'Show Constraint Graphics';
+
+    label.appendChild(checkbox);
+    label.appendChild(span);
+    wrap.appendChild(label);
+
+    if (host) {
+      host._constraintGraphicsCheckbox = checkbox;
+    }
+
+    return wrap;
+  }
+
+  #buildDebugControls() {
+    const host = this.host;
+    const wrap = document.createElement('div');
+    wrap.className = 'control-panel-section debug-controls';
+
+    const label = document.createElement('label');
+    label.className = 'toggle-control';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.addEventListener('change', () => {
+      host?._handleDebugCheckboxChange?.call(host, checkbox.checked);
+    });
+
+    const span = document.createElement('span');
+    span.textContent = 'Debug Normals';
+
+    label.appendChild(checkbox);
+    label.appendChild(span);
+    wrap.appendChild(label);
+
+    return wrap;
+  }
+
+  dispose() {
+    this.host = null;
+    this.element = null;
+  }
+}