brep-io-kernel 1.0.0

package/src/UI/pmi/LabelOverlay.css

@@ -0,0 +1,102 @@
+.pmi-label-root {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 5;
+  overflow: hidden;
+  contain: layout paint size;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.pmi-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  background: rgba(17, 24, 39, 0.92);
+  color: #ffffff;
+  border: 1px solid #111827;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 14px;
+  font-weight: 700;
+  pointer-events: auto;
+  cursor: grab;
+  user-select: none;
+  line-height: 1.2;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-align: left;
+  width: max-content;
+}
+
+.pmi-label[data-anchor-position="Left Top"] {
+  transform: translate(-100%, 0);
+  text-align: right;
+}
+
+.pmi-label[data-anchor-position="Left Middle"] {
+  transform: translate(-100%, -50%);
+  text-align: right;
+}
+
+.pmi-label[data-anchor-position="Left Bottom"] {
+  transform: translate(-100%, -100%);
+  text-align: right;
+}
+
+.pmi-label[data-anchor-position="Right Top"] {
+  transform: translate(0, 0);
+  text-align: left;
+}
+
+.pmi-label[data-anchor-position="Right Middle"] {
+  transform: translate(0, -50%);
+  text-align: left;
+}
+
+.pmi-label[data-anchor-position="Right Bottom"] {
+  transform: translate(0, -100%);
+  text-align: left;
+}
+
+.pmi-label:active {
+  cursor: grabbing;
+}
+
+.pmi-label-edit {
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  outline: 2px solid #3b82f6;
+  background: rgba(17, 24, 39, 0.95);
+  color: #ffffff;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  padding: 2px 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.pmi-label.constraint-label {
+  background: rgba(15, 17, 23, 0.92);
+  border: 1px solid rgba(110, 168, 254, 0.45);
+  border-radius: 8px;
+  padding: 4px 8px;
+  color: #e6f1ff;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.pmi-label.constraint-label:hover {
+  background: rgba(17, 20, 27, 0.96);
+  border-color: rgba(110, 168, 254, 0.8);
+}

package/src/UI/pmi/LabelOverlay.js

@@ -0,0 +1,191 @@
+// LabelOverlay.js
+// Manages creation and positioning of PMI label overlays in viewer container.
+
+import './LabelOverlay.css';
+
+export class LabelOverlay {
+  constructor(viewer, onPointerDown, onDblClick, onClick, onDragEnd) {
+    this.viewer = viewer;
+    this.onPointerDown = typeof onPointerDown === 'function' ? onPointerDown : null;
+    this.onDblClick = typeof onDblClick === 'function' ? onDblClick : null;
+    this.onClick = typeof onClick === 'function' ? onClick : null;
+    this.onDragEnd = typeof onDragEnd === 'function' ? onDragEnd : null;
+    this._labelMap = new Map(); // idx -> HTMLElement
+    this._root = null;
+    this._visible = true;
+    this._activePointers = new Map(); // pointerId -> { idx, ann, startX, startY, moved }
+    this._onGlobalPointerMove = (ev) => this.#handleGlobalPointerMove(ev);
+    this._onGlobalPointerUp = (ev) => this.#handleGlobalPointerUp(ev);
+    this._ensureRoot();
+  }
+
+  _ensureRoot() {
+    if (this._root && this._root.parentNode) return;
+    const host = this.viewer?.container;
+    if (!host) return;
+    try { if (!host.style.position || host.style.position === 'static') host.style.position = 'relative'; } catch {}
+    const div = document.createElement('div');
+    div.className = 'pmi-label-root';
+    try {
+      div.style.overflow = 'hidden';
+      div.style.contain = 'layout paint size';
+      div.style.maxWidth = '100%';
+      div.style.maxHeight = '100%';
+    } catch {}
+    host.appendChild(div);
+    this._root = div;
+    if (!this._visible) {
+      try {
+        this._root.style.display = 'none';
+        this._root.style.pointerEvents = 'none';
+      } catch {}
+    }
+  }
+
+  updateLabel(idx, text, worldPos, ann) {
+    this._ensureRoot();
+    let el = this._labelMap.get(idx);
+    if (!el) {
+      el = document.createElement('div');
+      el.className = 'pmi-label';
+      try { el.style.width = 'max-content'; } catch {}
+      if (text != null) {
+        const normalized = String(text).replace(/\r\n/g, '\n');
+        el.textContent = normalized;
+      }
+      if (this.onPointerDown || this.onClick) {
+        el.addEventListener('pointerdown', (e) => {
+          try {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation?.();
+          } catch {}
+          if (this.onClick || this.onPointerDown) {
+            this.#trackPointerDown(e, idx, ann);
+          }
+        });
+      }
+      if (this.onDblClick) el.addEventListener('dblclick', (e) => this.onDblClick(idx, ann, e));
+      try { this._root.appendChild(el); this._labelMap.set(idx, el); } catch {}
+    } else if (text != null) {
+      const normalized = String(text).replace(/\r\n/g, '\n');
+      el.textContent = normalized;
+    }
+
+    if (ann && typeof ann.anchorPosition === 'string' && ann.anchorPosition) {
+      el.dataset.anchorPosition = ann.anchorPosition;
+    } else {
+      delete el.dataset.anchorPosition;
+    }
+    if (worldPos) this._position(el, worldPos);
+  }
+
+  getElement(idx) {
+    return this._labelMap.get(idx) || null;
+  }
+
+  #trackPointerDown(e, idx, ann) {
+    if (typeof e !== 'object') return;
+    if (e.button != null && e.button !== 0) return; // left-click only
+    const entry = {
+      idx,
+      ann,
+      startX: typeof e.clientX === 'number' ? e.clientX : 0,
+      startY: typeof e.clientY === 'number' ? e.clientY : 0,
+      hasMoved: false,
+      dragStarted: false,
+      initialEvent: e,
+    };
+    this._activePointers.set(e.pointerId ?? 'mouse', entry);
+    try { window.addEventListener('pointermove', this._onGlobalPointerMove, true); } catch { }
+    try { window.addEventListener('pointerup', this._onGlobalPointerUp, true); } catch { }
+  }
+
+  #handleGlobalPointerMove(ev) {
+    const id = ev.pointerId ?? 'mouse';
+    const state = this._activePointers.get(id);
+    if (!state) return;
+    const cx = ev.clientX;
+    const cy = ev.clientY;
+    if (cx == null || cy == null) {
+      state.hasMoved = true;
+      return;
+    }
+    const dx = cx - state.startX;
+    const dy = cy - state.startY;
+    const threshold = 4;
+    if (!state.hasMoved && (dx * dx + dy * dy) >= threshold * threshold) {
+      state.hasMoved = true;
+      if (!state.dragStarted && this.onPointerDown) {
+        state.dragStarted = true;
+        try { this.onPointerDown(state.idx, state.ann, state.initialEvent); } catch {}
+      }
+    }
+  }
+
+  #handleGlobalPointerUp(ev) {
+    const id = ev.pointerId ?? 'mouse';
+    const state = this._activePointers.get(id);
+    if (!state) return;
+    this._activePointers.delete(id);
+    if (this._activePointers.size === 0) {
+      try { window.removeEventListener('pointermove', this._onGlobalPointerMove, true); } catch { }
+      try { window.removeEventListener('pointerup', this._onGlobalPointerUp, true); } catch { }
+    }
+
+    if (state.dragStarted) {
+      if (this.onDragEnd) {
+        try { this.onDragEnd(state.idx, state.ann, ev); } catch {}
+      }
+      return;
+    }
+    if (!this.onClick) return;
+    if (state.hasMoved) return;
+    if (ev.button != null && ev.button !== 0) return;
+    try { this.onClick(state.idx, state.ann, ev); } catch { }
+  }
+
+  _position(el, world) {
+    try {
+      const v = this.viewer; if (!v) return;
+      const vec = world.clone().project(v.camera);
+      const canvasRect = v.renderer.domElement.getBoundingClientRect();
+      const rootRect = this._root?.getBoundingClientRect?.() || canvasRect;
+      const x = rootRect.left + (vec.x * 0.5 + 0.5) * canvasRect.width;
+      const y = rootRect.top + (-vec.y * 0.5 + 0.5) * canvasRect.height;
+      const relX = x - rootRect.left;
+      const relY = y - rootRect.top;
+      el.style.left = `${relX}px`;
+      el.style.top = `${relY}px`;
+    } catch {}
+  }
+
+  clear() {
+    try { this._labelMap.forEach((el) => el?.remove()); } catch {}
+    try { this._labelMap.clear(); } catch {}
+  }
+
+  setVisible(visible) {
+    this._visible = !!visible;
+    this._ensureRoot();
+    if (!this._root) return;
+    const display = this._visible ? '' : 'none';
+    try {
+      this._root.style.display = display;
+      this._root.style.pointerEvents = this._visible ? '' : 'none';
+    } catch {}
+  }
+
+  isVisible() {
+    return this._visible;
+  }
+
+  dispose() {
+    this.clear();
+    try { this._root?.remove(); } catch {}
+    this._root = null;
+    this._activePointers.clear();
+    try { window.removeEventListener('pointermove', this._onGlobalPointerMove, true); } catch {}
+    try { window.removeEventListener('pointerup', this._onGlobalPointerUp, true); } catch {}
+  }
+}