@mlightcad/cad-simple-viewer 1.6.3 → 1.7.0

package/lib/view/AcTrView2d.js

@@ -104,12 +104,16 @@ import * as THREE from 'three';
 import Stats from 'three/examples/jsm/libs/stats.module';
 import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { AcApDocManager, AcApSettingManager } from '../app';
+import { AcApZoomCmd } from '../command/AcApZoomCmd';
 import { isMarkupHtmlTextEditing } from '../command/markup/AcApMarkupTextEdit';
-import { AcEdBaseView, AcEdConditionWaiter, AcEdCorsorType, AcEdGripManager, AcEdMTextEditor, AcEdOpenMode, AcEdViewMode, eventBus, resolvePointerSelectionAction } from '../editor';
+import { notifyMeasurementLayoutChanged } from '../command/measure/AcApMeasurementStore';
+import { acedAttachMobileBoxGesture, AcEdBaseView, AcEdConditionWaiter, AcEdCorsorType, AcEdGripManager, acedInteractionStrategy, acedIsTouchDerivedMouseEvent, AcEdMTextEditor, AcEdOpenMode, acedShouldIgnoreCompatMouse, AcEdViewMode, eventBus, resolvePointerSelectionAction } from '../editor';
 import { ACGI_MODEL_SPACE_BACKGROUND, isModelSpaceDatabase, readLayoutBackgroundColor } from '../editor/global/AcEdUiColor';
+import { ML_UI_Z_CANVAS_HTML_OVERLAY } from '../editor/global/AcEdUiLayout';
 import { isEffectiveSpatialQueryHit } from '../editor/view/AcEdSpatialQueryResult';
 import { AcTrGeometryUtil } from '../util';
 import { acapRunDatabaseEdit } from '../util/AcApDatabaseEdit';
+import { ACAP_READING_MODE_BACKGROUND, AcApReadingModeState } from './AcApReadingMode';
 import { trySelectReviewOverlay, trySelectReviewOverlaysByBox } from './AcEdReviewOverlayPick';
 import { AcEdViewKeyHandler } from './AcEdViewKeyHandler';
 import { shouldExtendBboxForDirectEntity, tryBuildDirectEntityMeta } from './AcTrDirectBatch';
@@ -177,6 +181,12 @@ var AcTrView2d = /** @class */ (function (_super) {
         renderer.domElement.style.display = 'block';
         renderer.domElement.style.maxWidth = '100%';
         renderer.domElement.style.maxHeight = '100%';
+        // Keep one-finger picks (measure snap loupe) from being stolen by the
+        // browser scroll / long-press context-menu gesture.
+        renderer.domElement.style.touchAction = 'none';
+        renderer.domElement.style.userSelect = 'none';
+        renderer.domElement.style.setProperty('-webkit-user-select', 'none');
+        renderer.domElement.style.setProperty('-webkit-touch-callout', 'none');
         _this = _super.call(this, renderer.domElement, container) || this;
         /**
          * ID of the currently scheduled requestAnimationFrame callback.
@@ -269,6 +279,15 @@ var AcTrView2d = /** @class */ (function (_super) {
          * Counted separately so linework convert can continue while text waits.
          */
         _this._pendingGeometryJobs = 0;
+        /** Transient reading mode forces black linework on a white canvas. */
+        _this._readingMode = new AcApReadingModeState({
+            getCurrentBackgroundColor: function () { return _this._renderer.currentBackgroundColor; },
+            applyViewClearColor: function (value) { return _this.applyViewClearColor(value); },
+            setCompareDisplay: function (options) { return _this.setCompareDisplay(options); },
+            markDirty: function () {
+                _this._isDirty = true;
+            }
+        });
         _this.animate = function () {
             var _a;
             _this._rafId = requestAnimationFrame(_this.animate);
@@ -321,6 +340,10 @@ var AcTrView2d = /** @class */ (function (_super) {
                 count: (_a = args.count) !== null && _a !== void 0 ? _a : 0
             });
         });
+        _this._renderer.events.fontLoaded.addEventListener(function () {
+            // Lazy load success clears FontManager.missedFonts; refresh status-bar state.
+            eventBus.emit('missed-data-changed', {});
+        });
         _this._scene = _this.createScene();
         _this._layerAppearance = new AcTrLayerAppearanceController(_this._scene, _this._renderer);
         _this._inheritedLayerMaterialMapper = new AcTrInheritedLayerMaterialMapper(function (layerName) { return _this._layerAppearance.getEffectiveLayerTraits(layerName); }, _this._renderer);
@@ -355,36 +378,45 @@ var AcTrView2d = /** @class */ (function (_super) {
         var selectionStartWcs = null;
         var selectionStartCanvas = null;
         var selectionPreviewEl = null;
-        var canHandleSelectionGesture = function () {
-            return (_this.mode === AcEdViewMode.SELECTION &&
-                !_this.editor.isActive &&
+        var canHandleIdlePointer = function () {
+            return (!_this.editor.isActive &&
                 !AcEdMTextEditor.getActiveInputBox() &&
                 !isMarkupHtmlTextEditing() &&
                 !_this._gripManager.isDragging);
         };
+        var canHandleSelectionGesture = function () {
+            return _this.mode === AcEdViewMode.SELECTION && canHandleIdlePointer();
+        };
+        var canHandleMobileBoxGesture = function () {
+            return (canHandleIdlePointer() &&
+                acedInteractionStrategy().canIdleTouchBox(_this.mode));
+        };
         var clearSelectionPreview = function () {
             selectionPreviewEl === null || selectionPreviewEl === void 0 ? void 0 : selectionPreviewEl.remove();
             selectionPreviewEl = null;
         };
-        _this.canvas.addEventListener('mousedown', function (e) {
-            if (e.button !== 0)
-                return;
-            if (!canHandleSelectionGesture())
-                return;
+        var resetSelectionDrag = function () {
+            selectionStartWcs = null;
+            selectionStartCanvas = null;
+            clearSelectionPreview();
+        };
+        var beginSelectionPreview = function (clientX, clientY) {
             selectionStartCanvas = _this.viewportToCanvas({
-                x: e.clientX,
-                y: e.clientY
+                x: clientX,
+                y: clientY
             });
             selectionStartWcs = _this.screenToWorld(selectionStartCanvas);
+            clearSelectionPreview();
             selectionPreviewEl = document.createElement('div');
             selectionPreviewEl.className = 'ml-jig-preview-rect';
             _this.container.appendChild(selectionPreviewEl);
-        });
-        _this.canvas.addEventListener('mousemove', function (e) {
+        };
+        var updateSelectionPreview = function (clientX, clientY, action) {
+            if (action === void 0) { action = 'replace'; }
             if (!selectionStartWcs || !selectionPreviewEl || !selectionStartCanvas) {
                 return;
             }
-            var curCanvas = _this.viewportToCanvas({ x: e.clientX, y: e.clientY });
+            var curCanvas = _this.viewportToCanvas({ x: clientX, y: clientY });
             var curWcs = _this.screenToWorld(curCanvas);
             var p1 = _this.worldToScreen(selectionStartWcs);
             var p2 = _this.worldToScreen(curWcs);
@@ -393,7 +425,6 @@ var AcTrView2d = /** @class */ (function (_super) {
             var width = Math.abs(p1.x - p2.x);
             var height = Math.abs(p1.y - p2.y);
             var mode = _this.getSelectionMode(selectionStartCanvas, curCanvas);
-            var action = _this.getPointerSelectionAction(e);
             var style = _this.getSelectionPreviewStyle(mode, action);
             Object.assign(selectionPreviewEl.style, {
                 left: "".concat(left, "px"),
@@ -404,24 +435,17 @@ var AcTrView2d = /** @class */ (function (_super) {
                 background: style.background
             });
             selectionPreviewEl.style.setProperty('--line-color', style.lineColor);
-        });
-        _this.canvas.addEventListener('mouseup', function (e) {
-            if (_this._gripManager.isDragging) {
-                selectionStartWcs = null;
-                selectionStartCanvas = null;
-                clearSelectionPreview();
-                return;
-            }
+        };
+        var finishSelection = function (clientX, clientY, action, isClick) {
             if (!selectionStartWcs || !selectionStartCanvas)
                 return;
             var endCanvas = _this.viewportToCanvas({
-                x: e.clientX,
-                y: e.clientY
+                x: clientX,
+                y: clientY
             });
             var endWcs = _this.screenToWorld(endCanvas);
             clearSelectionPreview();
-            var action = _this.getPointerSelectionAction(e);
-            if (_this.isSelectionClick(selectionStartCanvas, endCanvas)) {
+            if (isClick) {
                 if (trySelectReviewOverlay(_this, endCanvas.x, endCanvas.y, action)) {
                     if (action === 'replace') {
                         _this.selectionSet.clear();
@@ -455,6 +479,70 @@ var AcTrView2d = /** @class */ (function (_super) {
             }
             selectionStartWcs = null;
             selectionStartCanvas = null;
+        };
+        _this.canvas.addEventListener('mousedown', function (e) {
+            if (e.button !== 0)
+                return;
+            if (!canHandleSelectionGesture())
+                return;
+            if (acedIsTouchDerivedMouseEvent(e) || acedShouldIgnoreCompatMouse()) {
+                return;
+            }
+            beginSelectionPreview(e.clientX, e.clientY);
+        });
+        _this.canvas.addEventListener('mousemove', function (e) {
+            if (!selectionStartWcs || !selectionPreviewEl || !selectionStartCanvas) {
+                return;
+            }
+            if (acedIsTouchDerivedMouseEvent(e) || acedShouldIgnoreCompatMouse()) {
+                return;
+            }
+            updateSelectionPreview(e.clientX, e.clientY, _this.getPointerSelectionAction(e));
+        });
+        _this.canvas.addEventListener('mouseup', function (e) {
+            if (_this._gripManager.isDragging) {
+                resetSelectionDrag();
+                return;
+            }
+            if (!selectionStartWcs || !selectionStartCanvas)
+                return;
+            if (acedIsTouchDerivedMouseEvent(e) || acedShouldIgnoreCompatMouse()) {
+                return;
+            }
+            var endCanvas = _this.viewportToCanvas({
+                x: e.clientX,
+                y: e.clientY
+            });
+            var action = _this.getPointerSelectionAction(e);
+            finishSelection(e.clientX, e.clientY, action, _this.isSelectionClick(selectionStartCanvas, endCanvas));
+        });
+        acedAttachMobileBoxGesture({
+            element: _this.canvas,
+            shouldStart: function () { return canHandleMobileBoxGesture(); },
+            setNavigationEnabled: function (enabled) {
+                _this.setNavigationEnabled(enabled);
+            },
+            onActivate: function (clientX, clientY) {
+                beginSelectionPreview(clientX, clientY);
+                updateSelectionPreview(clientX, clientY);
+            },
+            onMove: function (clientX, clientY) {
+                updateSelectionPreview(clientX, clientY);
+            },
+            onBoxEnd: function (clientX, clientY, moved) {
+                finishSelection(clientX, clientY, 'replace', !moved);
+            },
+            onTap: function (clientX, clientY) {
+                selectionStartCanvas = _this.viewportToCanvas({
+                    x: clientX,
+                    y: clientY
+                });
+                selectionStartWcs = _this.screenToWorld(selectionStartCanvas);
+                finishSelection(clientX, clientY, 'replace', true);
+            },
+            onAbort: function () {
+                resetSelectionDrag();
+            }
         });
         _this.canvas.addEventListener('dblclick', function (e) {
             if (e.button !== 0)
@@ -523,7 +611,8 @@ var AcTrView2d = /** @class */ (function (_super) {
         _this._css2dRenderer.domElement.style.top = '0px';
         _this._css2dRenderer.domElement.style.left = '0px';
         _this._css2dRenderer.domElement.style.pointerEvents = 'none';
-        _this._css2dRenderer.domElement.style.zIndex = '99998';
+        // Below command line / mobile chrome / dialogs; above the WebGL canvas.
+        _this._css2dRenderer.domElement.style.zIndex = String(ML_UI_Z_CANVAS_HTML_OVERLAY);
         _this._css2dRenderer.domElement.style.maxWidth = '100%';
         _this._css2dRenderer.domElement.style.maxHeight = '100%';
         container.appendChild(_this._css2dRenderer.domElement);
@@ -557,9 +646,16 @@ var AcTrView2d = /** @class */ (function (_super) {
      * @protected
      */
     AcTrView2d.prototype.initialize = function () {
+        var _this = this;
         // This method is called after camera and render are created.
         // Children class can override this method to add its own logic
         this.setCursor(AcEdCorsorType.Crosshair);
+        this.editor.events.commandWillStart.addEventListener(function () {
+            _this.htmlTransientManager.setHitTestEnabled(false);
+        });
+        this.editor.events.commandEnded.addEventListener(function () {
+            _this.htmlTransientManager.setHitTestEnabled(true);
+        });
     };
     Object.defineProperty(AcTrView2d.prototype, "mode", {
         /**
@@ -583,6 +679,37 @@ var AcTrView2d = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    /**
+     * Enables or disables OrbitControls on the active layout view.
+     *
+     * @param enabled - When false, pan and zoom are disabled (e.g. while the
+     *   snap loupe is tracking a long-press).
+     */
+    AcTrView2d.prototype.setNavigationEnabled = function (enabled) {
+        var layoutView = this.activeLayoutView;
+        if (layoutView)
+            layoutView.enabled = enabled;
+    };
+    /**
+     * Shows or hides the screen-fixed snap loupe overlay viewport.
+     *
+     * @param state - Loupe screen rectangle and world box, or `null` to hide.
+     */
+    AcTrView2d.prototype.setSnapLoupe = function (state) {
+        var _a;
+        var overlay = (_a = this.activeLayoutView) === null || _a === void 0 ? void 0 : _a.overlayViewport;
+        if (!overlay)
+            return;
+        if (!state) {
+            overlay.visible = false;
+            this._isDirty = true;
+            return;
+        }
+        overlay.setScreenRect(state.x, state.y, state.size, state.size);
+        overlay.setViewBox(state.viewBox);
+        overlay.visible = true;
+        this._isDirty = true;
+    };
     Object.defineProperty(AcTrView2d.prototype, "renderer", {
         /**
          * Gets the Three.js renderer wrapper used for CAD rendering.
@@ -833,11 +960,24 @@ var AcTrView2d = /** @class */ (function (_super) {
      * manager. Does not touch `COLORTHEME` / UI chrome.
      */
     AcTrView2d.prototype.applyCanvasBackground = function (value) {
-        this._renderer.setClearColor(value);
-        // Updates style-manager background, repaints ACI-7 / bg-follow materials.
         this._renderer.currentBackgroundColor = value;
         this._layerAppearance.refreshTextMaterialsInObjectTree(this._scene.internalScene);
         this.resyncForegroundLayersForBackground();
+        if (this._readingMode.isEnabled) {
+            this._readingMode.noteLayoutBackground(value);
+            this.applyViewClearColor(ACAP_READING_MODE_BACKGROUND);
+            return;
+        }
+        this.applyViewClearColor(value);
+    };
+    /**
+     * Updates only the WebGL clear colour and cursor chrome.
+     *
+     * Reading mode uses this so the white canvas is visual-only and does not
+     * repaint cached entity materials via the style manager.
+     */
+    AcTrView2d.prototype.applyViewClearColor = function (value) {
+        this._renderer.setClearColor(value);
         this.editor.syncCursorBackground(value);
         this._isDirty = true;
     };
@@ -901,6 +1041,29 @@ var AcTrView2d = /** @class */ (function (_super) {
     AcTrView2d.prototype.syncDisplaySysVars = function (database) {
         this.bindDrawDatabase(database);
         this.applyCanvasBackground(readLayoutBackgroundColor(database, this.isModelSpaceLayout(database)));
+        this._readingMode.reapplyIfEnabled();
+    };
+    Object.defineProperty(AcTrView2d.prototype, "readingModeEnabled", {
+        /** Whether transient reading mode is active on this view. */
+        get: function () {
+            return this._readingMode.isEnabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** Toggles transient reading mode on or off. */
+    AcTrView2d.prototype.toggleReadingMode = function () {
+        this._readingMode.toggle();
+    };
+    /**
+     * Enables or disables transient reading mode (black linework, white canvas).
+     *
+     * @param enabled - When true, snapshots the current canvas background and
+     *   forces monochrome display; when false, restores the snapshot and
+     *   original entity colors.
+     */
+    AcTrView2d.prototype.setReadingMode = function (enabled) {
+        this._readingMode.setEnabled(enabled);
     };
     /**
      * Converts and renders model-space entities from a standalone, independently
@@ -1054,10 +1217,14 @@ var AcTrView2d = /** @class */ (function (_super) {
             return this._scene.activeLayoutBtrId;
         },
         set: function (value) {
+            var previous = this._scene.activeLayoutBtrId;
             this._layoutViewManager.activeLayoutBtrId = value;
             this._scene.activeLayoutBtrId = value;
             this.htmlTransientManager.setActiveLayoutId(value);
             this._isDirty = true;
+            if (previous !== value) {
+                notifyMeasurementLayoutChanged();
+            }
         },
         enumerable: false,
         configurable: true
@@ -1277,6 +1444,10 @@ var AcTrView2d = /** @class */ (function (_super) {
             }
             _this._progressiveOpenFit.applyFinalFit(function () { return _this.resolveLayoutFitBox(); });
             _this.endProgressiveOpenFit();
+            var originalBtrId = layoutBtrId !== null && layoutBtrId !== void 0 ? layoutBtrId : _this.activeLayoutBtrId;
+            if (originalBtrId) {
+                AcApZoomCmd.rememberOriginalView(_this, originalBtrId);
+            }
         }, 300, // check every 300 ms
         timeout);
         waiter.start();
@@ -1360,9 +1531,10 @@ var AcTrView2d = /** @class */ (function (_super) {
     };
     AcTrView2d.prototype.editMTextEntity = function (mtext) {
         return __awaiter(this, void 0, void 0, function () {
-            var db, editor, applied, result_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var db, editor, applied, result_1, _a, _b;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         db = mtext.database;
                         if (mtext.lineSpacingFactor !== AcEdMTextEditor.defaultLineSpacingFactor) {
@@ -1379,20 +1551,23 @@ var AcTrView2d = /** @class */ (function (_super) {
                         this._isDirty = true;
                         editor = new AcEdMTextEditor();
                         applied = false;
-                        _a.label = 1;
+                        _d.label = 1;
                     case 1:
-                        _a.trys.push([1, , 3, 4]);
-                        return [4 /*yield*/, editor.open({
-                                view: this,
-                                location: mtext.location,
-                                width: this.resolveMTextEditorWidth(mtext),
-                                textHeight: this.resolveMTextEditorTextHeight(mtext),
-                                initialText: mtext.contents,
-                                initialAttachmentPoint: mtext.attachmentPoint,
-                                toolbarFontFamilies: this.getMTextToolbarFontFamilies()
-                            })];
-                    case 2:
-                        result_1 = _a.sent();
+                        _d.trys.push([1, , 4, 5]);
+                        _b = (_a = editor).open;
+                        _c = {
+                            view: this,
+                            location: mtext.location,
+                            width: this.resolveMTextEditorWidth(mtext),
+                            textHeight: this.resolveMTextEditorTextHeight(mtext),
+                            initialText: mtext.contents,
+                            initialAttachmentPoint: mtext.attachmentPoint
+                        };
+                        return [4 /*yield*/, this.getMTextToolbarFontFamilies()];
+                    case 2: return [4 /*yield*/, _b.apply(_a, [(_c.toolbarFontFamilies = _d.sent(),
+                                _c)])];
+                    case 3:
+                        result_1 = _d.sent();
                         if (!result_1)
                             return [2 /*return*/];
                         acapRunDatabaseEdit(db, 'Edit MText', function () {
@@ -1407,14 +1582,14 @@ var AcTrView2d = /** @class */ (function (_super) {
                             opened.attachmentPoint = result_1.attachmentPoint;
                         });
                         applied = true;
-                        return [3 /*break*/, 4];
-                    case 3:
+                        return [3 /*break*/, 5];
+                    case 4:
                         if (!applied) {
                             this.updateEntity(mtext);
                             this._isDirty = true;
                         }
                         return [7 /*endfinally*/];
-                    case 4: return [2 /*return*/];
+                    case 5: return [2 /*return*/];
                 }
             });
         });
@@ -1437,10 +1612,21 @@ var AcTrView2d = /** @class */ (function (_super) {
         return Math.max(Math.abs(p1.y - p0.y), 1e-4);
     };
     AcTrView2d.prototype.getMTextToolbarFontFamilies = function () {
-        return Array.from(new Set(AcApDocManager.instance.avaiableFonts
-            .flatMap(function (fontInfo) { return fontInfo.name; })
-            .map(function (fontName) { return fontName.trim(); })
-            .filter(function (fontName) { return fontName.length > 0; })));
+        return __awaiter(this, void 0, void 0, function () {
+            var availableFonts;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, AcApDocManager.instance.getAvaiableFonts()];
+                    case 1:
+                        availableFonts = (_a = (_b.sent())) !== null && _a !== void 0 ? _a : [];
+                        return [2 /*return*/, Array.from(new Set(availableFonts
+                                .flatMap(function (fontInfo) { return fontInfo.name; })
+                                .map(function (fontName) { return fontName.trim(); })
+                                .filter(function (fontName) { return fontName.length > 0; })))];
+                }
+            });
+        });
     };
     /**
      * @inheritdoc
@@ -2018,6 +2204,7 @@ var AcTrView2d = /** @class */ (function (_super) {
                 }
             }
             _this._isDirty = true;
+            AcApZoomCmd.rememberOriginalView(_this, btrId);
         }, 300, 0);
         waiter.start();
     };
@@ -2038,6 +2225,7 @@ var AcTrView2d = /** @class */ (function (_super) {
         this._externallyFramedLayouts.clear();
         this._loadingLayouts.clear();
         this._renderer.dispose();
+        eventBus.emit('missed-data-changed', {});
     };
     /**
      * Captures GPU/camera/selection state so another document can occupy this view.
@@ -2052,6 +2240,7 @@ var AcTrView2d = /** @class */ (function (_super) {
             externallyFramedLayouts: this._externallyFramedLayouts,
             loadingLayouts: this._loadingLayouts,
             missedImages: this._missedImages,
+            missedFonts: this._renderer.snapshotMissedFonts(),
             selectionIds: this.selectionSet.ids
         };
     };
@@ -2061,6 +2250,7 @@ var AcTrView2d = /** @class */ (function (_super) {
      * @param state - Snapshot previously returned by {@link captureSessionState} or {@link beginNewSession}.
      */
     AcTrView2d.prototype.restoreSessionState = function (state) {
+        var _a;
         this._convertEpoch++;
         this._convertQueue.length = 0;
         this._numOfEntitiesToProcess = 0;
@@ -2071,6 +2261,7 @@ var AcTrView2d = /** @class */ (function (_super) {
         this._externallyFramedLayouts = state.externallyFramedLayouts;
         this._loadingLayouts = state.loadingLayouts;
         this._missedImages = state.missedImages;
+        this._renderer.replaceMissedFonts((_a = state.missedFonts) !== null && _a !== void 0 ? _a : {});
         this.rebindLayerAppearance();
         this._layoutViewManager.resize(this.width, this.height);
         this.selectionSet.clear();
@@ -2078,6 +2269,7 @@ var AcTrView2d = /** @class */ (function (_super) {
             this.selectionSet.add(state.selectionIds);
         }
         this._isDirty = true;
+        eventBus.emit('missed-data-changed', {});
     };
     /**
      * Detaches the current scene and installs an empty one for a newly opened document.
@@ -2096,9 +2288,11 @@ var AcTrView2d = /** @class */ (function (_super) {
         this._externallyFramedLayouts = new Set();
         this._loadingLayouts = new Set();
         this._missedImages = new Map();
+        this._renderer.clearMissedFonts();
         this.rebindLayerAppearance();
         this.selectionSet.clear();
         this._isDirty = true;
+        eventBus.emit('missed-data-changed', {});
         return parked;
     };
     /**
@@ -2113,6 +2307,7 @@ var AcTrView2d = /** @class */ (function (_super) {
         state.externallyFramedLayouts.clear();
         state.loadingLayouts.clear();
         state.missedImages.clear();
+        state.missedFonts = {};
         state.selectionIds = [];
     };
     /**
@@ -2272,11 +2467,21 @@ var AcTrView2d = /** @class */ (function (_super) {
         return stats;
     };
     AcTrView2d.prototype.onWindowResize = function () {
-        _super.prototype.onWindowResize.call(this);
+        // Refresh size first, then sync WebGL / CSS2D / frustum before notifying
+        // listeners so `worldToScreen` consumers see the new projection.
+        this.refreshViewSize();
         this._renderer.setSize(this.width, this.height);
         this._css2dRenderer.setSize(this.width, this.height);
         this._layoutViewManager.resize(this.width, this.height);
         this._isDirty = true;
+        this.events.viewResize.dispatch({
+            width: this.width,
+            height: this.height
+        });
+        // CSS2D badges reproject via `_isDirty`. Canvas overlays (measure /
+        // markup strokes, live preview) paint with `worldToScreen` and listen to
+        // `viewChanged` only — resize must notify them too.
+        this.events.viewChanged.dispatch();
     };
     AcTrView2d.prototype.startAnimationLoop = function () {
         if (this._rafId == null) {