@inweb/viewer-visualize 25.3.13 → 25.3.17

package/README.md

@@ -1,8 +1,8 @@
 # Viewer.visualize
 
-`Viewer.visualize` is a JavaScript library for visualization of 3D CAD and BIM data from `VSFX` files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), on the web, or in local files.
+`Viewer.visualize` is JavaScript library powered by [Visualize](https://www.opendesign.com/products/visualize) for in-browser visualization of 3D CAD and BIM data in browser from `VSFX` files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), on the web, or on your local computer.
 
-This library enables you to integrate advanced [Visualize](https://www.opendesign.com/products/visualize) capabilities into your applications, including user interaction with scenes and objects, and collaboration using the [inWEB Open Cloud](https://www.opendesign.com/products/open-cloud) platform.
+This library enables you to integrate advanced visualization capabilities into your web applications, including user interaction with scenes and objects, markups, and collaboration using the [inWEB Open Cloud](https://www.opendesign.com/products/open-cloud) platform.
 
 > `VSFX` is an internal [Visualize SDK](https://cloud.opendesign.com/docs/index.html#/visualizejs) file format with support for streaming and partial viewing.
 
@@ -10,10 +10,10 @@ This library enables you to integrate advanced [Visualize](https://www.opendesig
 
 ### CDN or static hosting
 
-For CDN, you can use [unpkg](https://unpkg.com/) or [jsDelivr](https://www.jsdelivr.com/) (replace `25.2` with a version you need):
+For CDN, you can use [unpkg](https://unpkg.com/) or [jsDelivr](https://www.jsdelivr.com/) (replace `25.3` with a version you need):
 
-```javascript
-<script src="https://unpkg.com/@inweb/viewer-visualize@25.2/dist/viewer-visualize.js"></script>
+```html
+<script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>
 ```
 
 The global namespace for `Viewer.visualize` is `ODA.Visualize`.
@@ -36,24 +36,24 @@ import { Viewer } from "@inweb/viewer-visualize";
 
 Download and render file from the `Open Cloud Server`:
 
-```javascript
-// create instance of the Client class for working with server
-const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });
-
-// login to the server
-await client.signInWithEmail("email", "password");
-
-// get file list from the server
-const files = await client.getFiles();
+```html
+<script src="https://unpkg.com/@inweb/client@25.3/dist/client.js"></script>
+<script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>
 
-// create instance of Viewer class for rendering drawing files
-const viewer = new ODA.Visualize.Viewer(client);
+<script>
+  const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });
+  const viewer = new ODA.Visualize.Viewer(client);
 
-// initialize Viewer it with the specified <canvas> element
-await viewer.initialize(canvas);
+  init();
 
-// open the first file in the list
-await viewer.open(files.result[0]);
+  async function init() {
+    await client.signInWithEmail("email", "password");
+    const files = await client.getFiles();
+    await viewer.initialize(canvas);
+    await viewer.open(files.result[0]);
+    viewer.setActiveDragger("Orbit");
+  }
+</script>
 ```
 
 To learn more, see [First application guide](https://cloud.opendesign.com/docs/index.html#/guide).

package/dist/viewer-visualize.js

@@ -356,6 +356,317 @@
 
     const CANVAS_EVENTS = [ "click", "dblclick", "mousedown", "mousemove", "mouseup", "mouseleave", "pointerdown", "pointermove", "pointerup", "pointerleave", "pointercancel", "wheel", "touchstart", "touchmove", "touchend", "touchcancel" ];
 
+    ///////////////////////////////////////////////////////////////////////////////
+    const composeMatrixFromTransform = (translate, rotate, scale, modelCenter, matrix) => {
+        const translateMatrix = matrix.setTranslation([translate.x, translate.y, translate.z]);
+        const rotateMatrix = matrix.setToRotation(rotate.angle, [rotate.x, rotate.y, rotate.z], modelCenter);
+        const scaleMatrix = matrix.setToScaling(scale, modelCenter);
+        return translateMatrix.postMultBy(rotateMatrix).postMultBy(scaleMatrix);
+    };
+    function applyModelTransform(viewer, model) {
+        var _a;
+        if (!viewer.visualizeJs)
+            return;
+        if (!model.getModelTransformMatrix)
+            return; // Model.getModelTransformMatrix() since 24.3.14
+        const visLib = viewer.visLib();
+        const visViewer = visLib.getViewer();
+        const modelItr = visViewer.getModelIterator();
+        for (; !modelItr.done(); modelItr.step()) {
+            const modelPtr = modelItr.getModel();
+            const transform = model.getModelTransformMatrix(modelPtr.getDatabaseHandle());
+            if (transform) {
+                const extents = modelPtr.getExtents();
+                const matrix = composeMatrixFromTransform(transform.translate, transform.rotation, transform.scale, extents.center(), new visLib.Matrix3d());
+                modelPtr.setModelingMatrix(matrix, true);
+            }
+        }
+        modelItr.delete();
+        (_a = visViewer.clearViewExtentsCache) === null || _a === void 0 ? void 0 : _a.call(visViewer);
+        viewer.update();
+    }
+    commands("VisualizeJS").registerCommand("applyModelTransform", applyModelTransform);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    commands("VisualizeJS").registerCommand("clearMarkup", (viewer) => viewer.clearOverlay());
+    commands("VisualizeJS").registerCommandAlias("clearMarkup", "clearOverlay");
+
+    ///////////////////////////////////////////////////////////////////////////////
+    commands("VisualizeJS").registerCommand("clearSlices", (viewer) => viewer.clearSlices());
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function createPreview(viewer, type = "image/jpeg", encoderOptions = 0.25) {
+        var _a;
+        if (!viewer.visualizeJs)
+            return "";
+        return ((_a = viewer.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL(type, encoderOptions)) || "";
+    }
+    commands("VisualizeJS").registerCommand("createPreview", createPreview);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function explode(viewer, index = 0) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.explode(index);
+        viewer.update();
+        viewer.emit({ type: "explode", data: index });
+    }
+    commands("VisualizeJS").registerCommand("explode", explode);
+    commands("VisualizeJS").registerCommand("collect", (viewer) => explode(viewer, 0));
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function getDefaultViewPositions(viewer) {
+        if (!viewer.visualizeJs)
+            return [];
+        const visLib = viewer.visLib();
+        const defViewPos = visLib.DefaultViewPosition;
+        return Object.keys(defViewPos).filter((x) => x !== "values");
+    }
+    commands("VisualizeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function getModels(viewer) {
+        if (!viewer.visualizeJs)
+            return [];
+        const visViewer = viewer.visViewer();
+        const handles = [];
+        const modelItr = visViewer.getModelIterator();
+        for (; !modelItr.done(); modelItr.step()) {
+            const modelPtr = modelItr.getModel();
+            if (modelPtr.getName()[0] !== "$")
+                handles.push(modelPtr.getDatabaseHandle());
+        }
+        modelItr.delete();
+        return handles;
+    }
+    commands("VisualizeJS").registerCommand("getModels", getModels);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function getSelected(viewer) {
+        if (!viewer.visualizeJs)
+            return [];
+        const visViewer = viewer.visViewer();
+        const handles = [];
+        const selectionSet = visViewer.getSelected();
+        if (!selectionSet.isNull() && selectionSet.numItems() !== 0) {
+            const itr = selectionSet.getIterator();
+            for (; !itr.done(); itr.step()) {
+                const entityId = itr.getEntity();
+                const entityPtr = entityId.getType() === 1
+                    ? entityId.openObject()
+                    : entityId.getType() === 2
+                        ? entityId.openObjectAsInsert()
+                        : null;
+                if (entityPtr) {
+                    const handle = entityPtr.getNativeDatabaseHandle();
+                    if (handle !== "-1")
+                        handles.push(handle);
+                    entityPtr.delete();
+                }
+            }
+            itr.delete();
+        }
+        return handles;
+    }
+    commands("VisualizeJS").registerCommand("getSelected", getSelected);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function hideSelected(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.hideSelectedObjects(false);
+        viewer.update();
+        viewer.emit({ type: "hide" });
+    }
+    commands("VisualizeJS").registerCommand("hideSelected", hideSelected);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function isolateSelected(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.isolateSelectedObjects(false);
+        viewer.update();
+        viewer.emit({ type: "isolate" });
+    }
+    commands("VisualizeJS").registerCommand("isolateSelected", isolateSelected);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function regenerateAll(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.regenAll();
+        viewer.update();
+        viewer.emit({ type: "regenerateall" });
+    }
+    commands("VisualizeJS").registerCommand("regenerateAll", regenerateAll);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function resetView(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        viewer.executeCommand("setActiveDragger", "");
+        viewer.executeCommand("clearSlices");
+        viewer.executeCommand("clearOverlay");
+        viewer.executeCommand("setMarkupColor");
+        viewer.executeCommand("unselect");
+        viewer.executeCommand("showAll");
+        viewer.executeCommand("explode", 0);
+        viewer.executeCommand("zoomToExtents", true);
+        viewer.executeCommand("k3DViewSW");
+        viewer.emit({ type: "resetview" });
+    }
+    commands("VisualizeJS").registerCommand("resetView", resetView);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function selectModel(viewer, handle) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        const activeView = visViewer.activeView;
+        const modelItr = visViewer.getModelIterator();
+        for (; !modelItr.done(); modelItr.step()) {
+            const modelPtr = modelItr.getModel();
+            if (modelPtr.getDatabaseHandle() === handle) {
+                const selectionSet = activeView.selectCrossing([0, 9999, 9999, 0], modelPtr);
+                visViewer.setSelected(selectionSet);
+                const handles = viewer.getSelected();
+                viewer.update();
+                viewer.emitEvent({ type: "select", data: selectionSet, handles });
+                selectionSet.delete();
+                break;
+            }
+        }
+        modelItr.delete();
+    }
+    commands("VisualizeJS").registerCommand("selectModel", selectModel);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    commands("VisualizeJS").registerCommand("setActiveDragger", (viewer, dragger = "") => {
+        viewer.setActiveDragger(dragger);
+    });
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function setDefaultViewPosition(viewer, position = "") {
+        if (!viewer.visualizeJs)
+            return;
+        const visLib = viewer.visLib();
+        const visViewer = viewer.visViewer();
+        const defViewPos = visLib.DefaultViewPosition;
+        visViewer.setDefaultViewPositionWithAnimation(defViewPos[position]);
+        viewer.update();
+        viewer.emit({ type: "viewposition", data: position });
+    }
+    commands("VisualizeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
+    commands("VisualizeJS").registerCommand("k3DViewTop", (viewer) => setDefaultViewPosition(viewer, "k3DViewTop"));
+    commands("VisualizeJS").registerCommand("k3DViewBottom", (viewer) => setDefaultViewPosition(viewer, "k3DViewBottom"));
+    commands("VisualizeJS").registerCommand("k3DViewLeft", (viewer) => setDefaultViewPosition(viewer, "k3DViewLeft"));
+    commands("VisualizeJS").registerCommand("k3DViewRight", (viewer) => setDefaultViewPosition(viewer, "k3DViewRight"));
+    commands("VisualizeJS").registerCommand("k3DViewFront", (viewer) => setDefaultViewPosition(viewer, "k3DViewFront"));
+    commands("VisualizeJS").registerCommand("k3DViewBack", (viewer) => setDefaultViewPosition(viewer, "k3DViewBack"));
+    commands("VisualizeJS").registerCommand("k3DViewSE", (viewer) => setDefaultViewPosition(viewer, "k3DViewSE"));
+    commands("VisualizeJS").registerCommand("k3DViewSW", (viewer) => setDefaultViewPosition(viewer, "k3DViewSW"));
+    commands("VisualizeJS").registerCommand("k3DViewNE", (viewer) => setDefaultViewPosition(viewer, "k3DViewNE"));
+    commands("VisualizeJS").registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));
+
+    ///////////////////////////////////////////////////////////////////////////////
+    commands("VisualizeJS").registerCommand("setMarkupColor", (viewer, r = 255, g = 0, b = 0) => {
+        viewer.setMarkupColor(r, g, b);
+    });
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function setSelected(viewer, handles = []) {
+        if (!viewer.visualizeJs)
+            return;
+        const visLib = viewer.visLib();
+        const visViewer = visLib.getViewer();
+        const selectionSet = new visLib.OdTvSelectionSet();
+        handles === null || handles === void 0 ? void 0 : handles.forEach((handle) => {
+            const entityId = visViewer.getEntityByOriginalHandle(handle + "");
+            if (!entityId.isNull())
+                selectionSet.appendEntity(entityId);
+        });
+        visViewer.setSelected(selectionSet);
+        viewer.update();
+        viewer.emitEvent({ type: "select", data: selectionSet, handles });
+        selectionSet.delete();
+    }
+    commands("VisualizeJS").registerCommand("setSelected", setSelected);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function showAll(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.unisolateSelectedObjects(false);
+        viewer.update();
+        viewer.emit({ type: "showall" });
+    }
+    commands("VisualizeJS").registerCommand("showAll", showAll);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function unselect(viewer) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        visViewer.unselect();
+        viewer.update();
+        viewer.emitEvent({ type: "select", data: visViewer.getSelected(), handles: [] });
+    }
+    commands("VisualizeJS").registerCommand("unselect", unselect);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function zoomToExtents(viewer, force = false, animate = viewer.options.cameraAnimation) {
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        const saveEnableAmination = visViewer.getEnableAnimation();
+        visViewer.setEnableAnimation(animate);
+        visViewer.zoomExtents(force);
+        visViewer.update();
+        visViewer.setEnableAnimation(saveEnableAmination);
+        viewer.update();
+        viewer.emitEvent({ type: "zoom" });
+    }
+    commands("VisualizeJS").registerCommand("zoomToExtents", zoomToExtents);
+    commands("VisualizeJS").registerCommandAlias("zoomToExtents", "zoomExtents");
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function zoomToObjects(viewer, handles = []) {
+        var _a;
+        if (!viewer.visualizeJs)
+            return;
+        const visLib = viewer.visLib();
+        const visViewer = viewer.visViewer();
+        const selectionSet = new visLib.OdTvSelectionSet();
+        handles.forEach((handle) => {
+            const entityId = visViewer.getEntityByOriginalHandle(handle + "");
+            if (!entityId.isNull())
+                selectionSet.appendEntity(entityId);
+        });
+        (_a = visViewer.zoomToObjects) === null || _a === void 0 ? void 0 : _a.call(visViewer, selectionSet);
+        viewer.update();
+        viewer.emitEvent({ type: "zoom" });
+        selectionSet.delete();
+    }
+    commands("VisualizeJS").registerCommand("zoomToObjects", zoomToObjects);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    function zoomToSelected(viewer) {
+        var _a;
+        if (!viewer.visualizeJs)
+            return;
+        const visViewer = viewer.visViewer();
+        const selectionSet = visViewer.getSelected();
+        (_a = visViewer.zoomToObjects) === null || _a === void 0 ? void 0 : _a.call(visViewer, selectionSet);
+        viewer.update();
+        viewer.emitEvent({ type: "zoom" });
+    }
+    commands("VisualizeJS").registerCommand("zoomToSelected", zoomToSelected);
+
     class EventEmitter2 {
         constructor() {
             this._listeners = undefined;
@@ -14728,7 +15039,7 @@
                 width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
                 height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
                 stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
-                strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 5,
+                strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
                 draggable: true,
                 strokeScaleEnabled: false,
                 globalCompositeOperation: "source-over",
@@ -16973,6 +17284,7 @@
     }
 
     exports.OdBaseDragger = OdBaseDragger;
+    exports.Options = Options;
     exports.Viewer = Viewer;
     exports.commands = commands;