improve 2D sheet erganimics to edit PMI views.

mmiscool · mmiscool · commit 10ad9151efe9 · 2026-03-17T21:38:25.000-04:00
diff --git a/src/UI/pmi/PMIViewsWidget.js b/src/UI/pmi/PMIViewsWidget.js
@@ -15,6 +15,9 @@ const PMI_EXPORT_CAPTURE_WIDTH_PX = 2400;
 const PMI_EXPORT_CAPTURE_HEIGHT_PX = 1800;
 const DEFAULT_PMI_VIEW_TEXT_SIZE_PT = 12;
 const SVG_NS = 'http://www.w3.org/2000/svg';
+const CSS_COLOR_RE = /^#[0-9a-f]{3,8}$/i;
+const CSS_FUNCTION_COLOR_RE = /^(rgb|rgba|hsl|hsla)\([^)]+\)$/i;
+const CSS_NAMED_COLOR_RE = /^[a-zA-Z]+$/;
 
 export class PMIViewsWidget {
   constructor(viewer, { readOnly = false } = {}) {
@@ -309,6 +312,21 @@ export class PMIViewsWidget {
     return this._isMonochromeExport(renderContext) && renderContext?.showCenterLines === true;
   }
 
+  _normalizeExportBackdropColor(color, fallback = null) {
+    const text = String(color ?? '').trim();
+    if (!text) return fallback;
+    if (/^transparent$/i.test(text)) return null;
+    if (CSS_COLOR_RE.test(text) || CSS_FUNCTION_COLOR_RE.test(text) || CSS_NAMED_COLOR_RE.test(text)) {
+      return text;
+    }
+    return fallback;
+  }
+
+  _getMonochromeLabelBackdropColor(renderContext = null) {
+    if (!this._isMonochromeExport(renderContext)) return null;
+    return this._normalizeExportBackdropColor(renderContext?.labelBackdropColor, null);
+  }
+
   _createTransparentImageDataUrl(width, height) {
     const canvas = document.createElement('canvas');
     canvas.width = Math.max(1, Number(width) || 1);
@@ -711,19 +729,20 @@ export class PMIViewsWidget {
       fontSize,
       layout,
     } = layoutData;
+    const monochromeBackdrop = this._getMonochromeLabelBackdropColor(renderContext);
 
     for (const entry of layout) {
-      if (!isMonochrome) {
+      if (!isMonochrome || monochromeBackdrop) {
         const rect = document.createElementNS(SVG_NS, 'rect');
         rect.setAttribute('x', entry.x.toFixed(3));
         rect.setAttribute('y', entry.y.toFixed(3));
         rect.setAttribute('rx', String(radius));
         rect.setAttribute('ry', String(radius));
         rect.setAttribute('width', entry.boxWidth.toFixed(3));
         rect.setAttribute('height', entry.boxHeight.toFixed(3));
-        rect.setAttribute('fill', 'rgba(17,24,39,0.92)');
-        rect.setAttribute('stroke', '#111827');
-        rect.setAttribute('stroke-width', '1');
+        rect.setAttribute('fill', isMonochrome ? monochromeBackdrop : 'rgba(17,24,39,0.92)');
+        rect.setAttribute('stroke', isMonochrome ? 'none' : '#111827');
+        rect.setAttribute('stroke-width', isMonochrome ? '0' : '1');
         labelGroup.appendChild(rect);
       }
 
@@ -995,6 +1014,7 @@ export class PMIViewsWidget {
       viewport,
       renderMode,
       showCenterLines,
+      labelBackdropColor: this._normalizeExportBackdropColor(options?.labelBackdropColor, null),
       targetFrameWidthIn: Number(options?.targetFrameWidthIn) > 0 ? Number(options.targetFrameWidthIn) : null,
       targetFrameHeightIn: Number(options?.targetFrameHeightIn) > 0 ? Number(options.targetFrameHeightIn) : null,
       dispose: () => {
@@ -1459,6 +1479,7 @@ export class PMIViewsWidget {
     hideViewCube = true,
     renderMode = 'shaded',
     showCenterLines = false,
+    labelBackdropColor = null,
     targetFrameWidthIn = null,
     targetFrameHeightIn = null,
   } = {}) {
@@ -1470,6 +1491,7 @@ export class PMIViewsWidget {
     const renderContext = this._createExportRenderContext(captureViewport, view, {
       renderMode,
       showCenterLines,
+      labelBackdropColor,
       targetFrameWidthIn,
       targetFrameHeightIn,
     });
@@ -1609,8 +1631,7 @@ export class PMIViewsWidget {
           this._applyView(v, { index: idx });
           return;
         }
-        this._enterEditMode(v, idx);
-        setTimeout(() => this._enterEditMode(v, idx), 200);
+        this.enterEditMode(v, idx);
       });
       row.appendChild(nameButton);
 
@@ -2275,8 +2296,12 @@ export class PMIViewsWidget {
     }
 
     const escape = (s) => this._escapeXML(String(s));
+    const monochromeBackdrop = this._getMonochromeLabelBackdropColor(renderContext);
     const rects = isMonochrome
-      ? ''
+      ? (monochromeBackdrop
+        ? layout.map(({ x, y, boxWidth, boxHeight }) =>
+          `<rect x="${x.toFixed(3)}" y="${y.toFixed(3)}" rx="${radius}" ry="${radius}" width="${boxWidth.toFixed(3)}" height="${boxHeight.toFixed(3)}" fill="${escape(monochromeBackdrop)}" stroke="none" stroke-width="0"/>`).join('')
+        : '')
       : layout.map(({ x, y, boxWidth, boxHeight }) =>
         `<rect x="${x.toFixed(3)}" y="${y.toFixed(3)}" rx="${radius}" ry="${radius}" width="${boxWidth.toFixed(3)}" height="${boxHeight.toFixed(3)}" fill="rgba(17,24,39,0.92)" stroke="#111827" stroke-width="1"/>`).join('');
 
@@ -2687,6 +2712,11 @@ export class PMIViewsWidget {
     try { this.viewer.startPMIMode?.(view, index, this, { fromViewClick: true }); } catch {}
   }
 
+  enterEditMode(view, index) {
+    this._enterEditMode(view, index);
+    setTimeout(() => this._enterEditMode(view, index), 200);
+  }
+
   // --- Helpers: view settings ---
   _isFaceObject(obj) {
     return !!obj && (obj.type === 'FACE' || (obj.isMesh && typeof obj.userData?.faceName === 'string'));
diff --git a/src/UI/sheets/Sheet2DEditorWindow.js b/src/UI/sheets/Sheet2DEditorWindow.js
@@ -2826,6 +2826,10 @@ export class Sheet2DEditorWindow {
     }
 
     if (addedTableItems) this._appendContextMenuSeparator(menu);
+    if (singleSelection?.type === "pmiInset") {
+      this._appendContextMenuItem(menu, "Edit view", () => this._editPmiViewElement(singleSelection));
+      this._appendContextMenuSeparator(menu);
+    }
     if (this._canGroupSelectedElements()) {
       this._appendContextMenuItem(menu, "Group", () => this._groupSelectedElements());
     }
@@ -2841,6 +2845,32 @@ export class Sheet2DEditorWindow {
     this._appendContextMenuItem(menu, "Delete", () => this._deleteSelectedElement(), { danger: true });
   }
 
+  _editPmiViewElement(element) {
+    if (!element || element.type !== "pmiInset") return false;
+    this._refreshPmiViews();
+    const view = this._resolvePmiViewForElement(element);
+    const viewIndex = this._resolvePmiViewIndexForElement(element, view);
+    const widget = this.viewer?.pmiViewsWidget || null;
+    const editView = typeof widget?.enterEditMode === "function"
+      ? widget.enterEditMode.bind(widget)
+      : null;
+    if (!view || viewIndex < 0 || !editView) {
+      this._setStatus("PMI view unavailable");
+      return false;
+    }
+
+    const previousSheetId = this.sheetId;
+    this.close();
+    try {
+      editView(view, viewIndex);
+      return true;
+    } catch {
+      this.open(previousSheetId || null);
+      this._setStatus("Could not open PMI view");
+      return false;
+    }
+  }
+
   _openPmiPicker() {
     this._refreshPmiViews();
     this._pmiPickerOpen = true;
@@ -6964,13 +6994,14 @@ export class Sheet2DEditorWindow {
   _getPmiImageCaptureKey(element, view = this._resolvePmiViewForElement(element), viewIndex = this._resolvePmiViewIndexForElement(element, view)) {
     const frame = this._getMediaFrameBox(element);
     return [
-      "trim-v5",
+      "trim-v6",
       this._getCurrentModelRevision(),
       this._pmiViewRevision,
       Number.isInteger(viewIndex) ? viewIndex : -1,
       String(view?.viewName || view?.name || element?.pmiViewName || "PMI View"),
       this._getPmiRenderMode(element),
       this._getPmiShowCenterLines(element) ? "centerlines:on" : "centerlines:off",
+      `labelbg:${isTransparentColor(element?.fill) ? "transparent" : toCssColor(element?.fill, "#ffffff").toLowerCase()}`,
       `frame:${toFiniteNumber(frame?.w, 0).toFixed(4)}x${toFiniteNumber(frame?.h, 0).toFixed(4)}`,
       this._getPmiViewStateSignature(view),
     ].join(":");
@@ -6992,6 +7023,7 @@ export class Sheet2DEditorWindow {
       .then(() => this._capturePmiViewImage(view, viewIndex, {
         renderMode: this._getPmiRenderMode(element),
         showCenterLines: this._getPmiShowCenterLines(element),
+        labelBackdropColor: element?.fill,
         targetFrameWidthIn: this._getMediaFrameBox(element)?.w,
         targetFrameHeightIn: this._getMediaFrameBox(element)?.h,
       }))
@@ -7131,6 +7163,7 @@ export class Sheet2DEditorWindow {
         const dataUrl = cached || await this._capturePmiViewImage(group.view, group.viewIndex, {
           renderMode: this._getPmiRenderMode(group.elementSnapshot),
           showCenterLines: this._getPmiShowCenterLines(group.elementSnapshot),
+          labelBackdropColor: group.elementSnapshot?.fill,
           targetFrameWidthIn: this._getMediaFrameBox(group.elementSnapshot)?.w,
           targetFrameHeightIn: this._getMediaFrameBox(group.elementSnapshot)?.h,
         });
@@ -7189,6 +7222,7 @@ export class Sheet2DEditorWindow {
   async _capturePmiViewImage(view, viewIndex, {
     renderMode = "shaded",
     showCenterLines = false,
+    labelBackdropColor = null,
     targetFrameWidthIn = null,
     targetFrameHeightIn = null,
   } = {}) {
@@ -7200,6 +7234,7 @@ export class Sheet2DEditorWindow {
       dataUrl = await widget.captureViewImageDataUrl(view, viewIndex, {
         renderMode: normalizePmiRenderMode(renderMode, "shaded"),
         showCenterLines: !!showCenterLines,
+        labelBackdropColor: String(labelBackdropColor ?? "").trim() || null,
         targetFrameWidthIn: Number(targetFrameWidthIn) > 0 ? Number(targetFrameWidthIn) : null,
         targetFrameHeightIn: Number(targetFrameHeightIn) > 0 ? Number(targetFrameHeightIn) : null,
       });
diff --git a/src/tests/test_pmiViewsWidget.js b/src/tests/test_pmiViewsWidget.js
@@ -0,0 +1,60 @@
+import * as THREE from 'three';
+import { PMIViewsWidget } from '../UI/pmi/PMIViewsWidget.js';
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || 'Assertion failed.');
+  }
+}
+
+export function test_pmi_monochrome_label_svg_uses_backdrop_color() {
+  const widget = Object.create(PMIViewsWidget.prototype);
+  widget.viewer = null;
+
+  const camera = new THREE.OrthographicCamera(-10, 10, 10, -10, 0.1, 100);
+  camera.position.set(0, 0, 10);
+  camera.lookAt(0, 0, 0);
+  camera.updateProjectionMatrix();
+  camera.updateMatrixWorld(true);
+
+  const svg = widget._composeLabelSVG(
+    'data:image/png;base64,',
+    [{ world: new THREE.Vector3(0, 0, 0), text: 'R1.500', anchor: 'center middle' }],
+    400,
+    300,
+    400,
+    {
+      viewer: { camera },
+      renderMode: 'monochrome',
+      labelBackdropColor: '#ff0000',
+    },
+  );
+
+  assert(svg.includes('fill="#ff0000"'), 'Expected monochrome PMI label mask to use the view backdrop color.');
+  assert(svg.includes('stroke="none"'), 'Expected monochrome PMI label mask to avoid drawing a border.');
+}
+
+export function test_pmi_enter_edit_mode_reuses_shared_flow() {
+  const widget = Object.create(PMIViewsWidget.prototype);
+  const calls = [];
+  const view = { viewName: 'View 1' };
+  const originalSetTimeout = globalThis.setTimeout;
+
+  widget._enterEditMode = (viewArg, indexArg) => {
+    calls.push({ view: viewArg, index: indexArg });
+  };
+
+  try {
+    globalThis.setTimeout = (fn, _delay) => {
+      fn();
+      return 0;
+    };
+    widget.enterEditMode(view, 3);
+  } finally {
+    globalThis.setTimeout = originalSetTimeout;
+  }
+
+  assert(calls.length === 2, 'Expected shared PMI edit flow to invoke the edit handoff twice.');
+  assert(calls[0]?.view === view && calls[1]?.view === view, 'Expected shared PMI edit flow to forward the same view.');
+  assert(calls[0]?.index === 3 && calls[1]?.index === 3, 'Expected shared PMI edit flow to forward the same view index.');
+}
diff --git a/src/tests/tests.js b/src/tests/tests.js
@@ -132,6 +132,10 @@ import {
     test_wire_harness_formboard_insert,
 } from './test_wireHarnessFormboard.js';
 import { test_pmi_view_text_size_setting_normalizes } from './test_pmiViewsManager.js';
+import {
+    test_pmi_enter_edit_mode_reuses_shared_flow,
+    test_pmi_monochrome_label_svg_uses_backdrop_color,
+} from './test_pmiViewsWidget.js';
 import {
     test_feature_dimension_overlay_supports_port,
     test_port_extension_annotation_geometry_preserves_extension_value,
@@ -264,6 +268,8 @@ export const testFunctions = [
     { test: test_wire_harness_connection_endpoint_resolution, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
     { test: test_sheet_custom_size_persists, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
     { test: test_pmi_view_text_size_setting_normalizes, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
+    { test: test_pmi_monochrome_label_svg_uses_backdrop_color, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
+    { test: test_pmi_enter_edit_mode_reuses_shared_flow, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
     { test: test_sheet_clipboard_image_utils, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
     { test: test_wire_harness_formboard_insert, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
     { test: test_wire_harness_sheet_table_insert, printArtifacts: false, exportFaces: false, exportSolids: false, resetHistory: true },
