@inweb/viewer-three 25.12.1 → 25.12.2

package/dist/viewer-three.module.js

@@ -1,7 +1,9 @@
-import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Controls, Clock, Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, DoubleSide, Plane, Object3D, Matrix4, Vector4, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, Group, Matrix4, Scene, PerspectiveCamera, BufferGeometry, BufferAttribute, Mesh, LineBasicMaterial, Line, Color, Loader, FileLoader, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Controls, Clock, Float32BufferAttribute, DoubleSide, Plane, Object3D, Vector4, AmbientLight, DirectionalLight, PMREMGenerator, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, WebGLRenderer, LinearToneMapping } from "three";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
+import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader.js";
+
 import Konva from "konva";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
@@ -43,7 +45,7 @@ class Commands {
         }
         const {handler: handler, thisArg: thisArg} = command;
         const result = handler.apply(thisArg, [ viewer, ...args ]);
-        viewer === null || viewer === void 0 ? void 0 : viewer.emit({
+        viewer === null || viewer === undefined ? undefined : viewer.emit({
             type: "command",
             data: id,
             args: args
@@ -569,12 +571,12 @@ commands("ThreeJS").registerCommand("explode", explode);
 commands("ThreeJS").registerCommand("collect", (viewer => explode(viewer, 0)));
 
 const defaultViewPositions = {
-    top: new Vector3(0, 0, 1),
-    bottom: new Vector3(0, 0, -1),
+    top: new Vector3(0, 1, 0),
+    bottom: new Vector3(0, -1, 0),
     left: new Vector3(-1, 0, 0),
     right: new Vector3(1, 0, 0),
-    front: new Vector3(0, -1, 0),
-    back: new Vector3(0, 1, 0),
+    front: new Vector3(0, 0, 1),
+    back: new Vector3(0, 0, -1),
     sw: new Vector3(-.5, -.5, 1).normalize(),
     se: new Vector3(.5, -.5, 1).normalize(),
     ne: new Vector3(.5, .5, 1).normalize(),
@@ -658,7 +660,7 @@ commands("ThreeJS").registerCommand("getModels", getModels);
 function getSelected(viewer) {
     return viewer.selected.map((object => {
         var _a;
-        return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle;
+        return (_a = object.userData) === null || _a === undefined ? undefined : _a.handle;
     })).filter((handle => handle));
 }
 
@@ -750,7 +752,7 @@ function setSelected(viewer, handles = []) {
     const objects = [];
     viewer.scene.traverseVisible((child => {
         var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+        if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle)) objects.push(child);
     }));
     const selection = new SelectionComponent(viewer);
     selection.clearSelection();
@@ -800,7 +802,7 @@ function zoomToObjects(viewer, handles = []) {
     const objects = [];
     viewer.scene.traverseVisible((child => {
         var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+        if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle)) objects.push(child);
     }));
     const extents = objects.reduce(((result, object) => result.expandByObject(object)), new Box3);
     const center = extents.getCenter(new Vector3);
@@ -859,7 +861,7 @@ class GLTFLoadingManager extends LoadingManager {
         this.setURLModifier((url => {
             const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
             const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+            return dataURL !== null && dataURL !== undefined ? dataURL : url;
         }));
     }
     dispose() {
@@ -867,6 +869,404 @@ class GLTFLoadingManager extends LoadingManager {
     }
 }
 
+class USDZLoader2 extends USDZLoader {
+    parse(buffer) {
+        const scene = super.parse(buffer);
+        let handle = 0;
+        scene.traverse((object => {
+            object.userData = {
+                ...object.userData,
+                handle: handle
+            };
+            handle++;
+        }));
+        return scene;
+    }
+    load(url, onLoad, onProgress, onError) {
+        super.load(url, (scene => onLoad({
+            scene: scene
+        })), onProgress, onError);
+    }
+}
+
+const THREE = {
+    Box3: Box3,
+    BufferAttribute: BufferAttribute,
+    BufferGeometry: BufferGeometry,
+    Color: Color,
+    Group: Group,
+    Line: Line,
+    LineBasicMaterial: LineBasicMaterial,
+    Matrix4: Matrix4,
+    Mesh: Mesh,
+    MeshBasicMaterial: MeshBasicMaterial,
+    PerspectiveCamera: PerspectiveCamera,
+    Scene: Scene,
+    Vector3: Vector3
+};
+
+let scene, camera;
+
+let datas = [];
+
+let autoCamera = true;
+
+function init() {
+    scene = new THREE.Scene;
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100);
+    camera.up.set(0, 0, 1);
+    camera.position.set(50, 50, 50);
+    camera.lookAt(0, 0, 0);
+    return scene;
+}
+
+function getChildByName(root, childName, skip = 0) {
+    let fragments = childName.replace(/^<\/|^\/|>$/g, "").split("/");
+    for (let i = 0; i < skip; ++i) {
+        fragments.shift();
+    }
+    while (fragments.length && root) {
+        let f = fragments.shift();
+        root = root.children.find((i => i.name.split("/").reverse()[0] === f));
+    }
+    return root;
+}
+
+function createMaterialFromParent(parent, root) {
+    let reference = parent.attributes["UsdShade:MaterialBindingAPI:material:binding"];
+    let material = {
+        color: new THREE.Color(.6, .6, .6)
+    };
+    if (reference) {
+        const materialNode = getChildByName(root, reference.ref);
+        let shader = materialNode.children.find((i => i.type === "UsdShade:Shader"));
+        let color = shader.attributes["inputs:diffuseColor"];
+        material.color = new THREE.Color(...color);
+        if (shader.attributes["inputs:opacity"]) {
+            material.transparent = true;
+            material.opacity = shader.attributes["inputs:opacity"];
+        }
+    }
+    return material;
+}
+
+function createCurveFromJson(node, parent, root) {
+    let points = new Float32Array(node.attributes["UsdGeom:BasisCurves:points"].flat());
+    const geometry = new THREE.BufferGeometry;
+    geometry.setAttribute("position", new THREE.BufferAttribute(points, 3));
+    const material = createMaterialFromParent(parent, root);
+    let lineMaterial = new THREE.LineBasicMaterial({
+        ...material
+    });
+    lineMaterial.color.multiplyScalar(.8);
+    return new THREE.Line(geometry, lineMaterial);
+}
+
+function createMeshFromJson(node, parent, root) {
+    let points = new Float32Array(node.attributes["UsdGeom:Mesh:points"].flat());
+    let indices = new Uint16Array(node.attributes["UsdGeom:Mesh:faceVertexIndices"]);
+    const geometry = new THREE.BufferGeometry;
+    geometry.setAttribute("position", new THREE.BufferAttribute(points, 3));
+    geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+    geometry.computeVertexNormals();
+    const material = createMaterialFromParent(parent, root);
+    let meshMaterial = new THREE.MeshBasicMaterial({
+        ...material
+    });
+    return new THREE.Mesh(geometry, meshMaterial);
+}
+
+function traverseTree(node, parent, root, parentNode) {
+    let elem;
+    if (node.type === "UsdGeom:Xform") {
+        elem = new THREE.Group;
+    } else if (node.type === "UsdGeom:Mesh" || node.type === "UsdGeom:BasisCurves") {
+        if (node.attributes["UsdGeom:VisibilityAPI:visibility:visibility"] === "invisible") {
+            return;
+        }
+        if (node.type === "UsdGeom:Mesh") {
+            elem = createMeshFromJson(node, parentNode, root);
+        } else {
+            elem = createCurveFromJson(node, parentNode, root);
+        }
+    } else if (node !== root) {
+        return;
+    }
+    if (node !== root) {
+        parent.add(elem);
+        elem.matrixAutoUpdate = false;
+        let matrixNode = node.attributes && node.attributes["xformOp:transform"] ? node.attributes["xformOp:transform"].flat() : null;
+        if (matrixNode) {
+            let matrix = new THREE.Matrix4;
+            matrix.set(...matrixNode);
+            matrix.transpose();
+            elem.matrix = matrix;
+        }
+    }
+    (node.children || []).forEach((child => traverseTree(child, elem || parent, root, node)));
+}
+
+function* collectNames(node) {
+    yield node.name;
+    for (const child of node.children || []) {
+        yield* collectNames(child);
+    }
+}
+
+function compose(datas) {
+    let compositionEdges = {};
+    function flattenAttributes(prim) {
+        if (prim.name !== "Shader" && prim.attributes) {
+            const [k, vs] = Object.entries(prim.attributes)[0];
+            const attrs = Object.fromEntries(Object.entries(vs).map((([kk, vv]) => [ `${k}:${kk}`, vv ])));
+            return {
+                ...prim,
+                attributes: attrs
+            };
+        } else {
+            return {
+                ...prim
+            };
+        }
+    }
+    function addEdge(a, b) {
+        (compositionEdges[a] = compositionEdges[a] || []).push(b);
+    }
+    function collectPaths(nodes) {
+        const paths = {};
+        function traverse(node, parentPathStr) {
+            if (node.name) {
+                const isFullyQualified = node.name.split("/").length > 2;
+                const reverseWhenFullyQualified = isFullyQualified ? a => a.reverse() : a => a;
+                const pathStr = `${parentPathStr}/${node.name.replace(/^\//, "")}`;
+                let nodeId = pathStr;
+                let nodeIdComplete = `${pathStr} complete`;
+                const N = flattenAttributes(node);
+                N.name = pathStr;
+                if (node.def === "over") {
+                    nodeId = `${pathStr} over`;
+                    addEdge(...reverseWhenFullyQualified([ nodeId, pathStr ]));
+                    addEdge(nodeIdComplete, nodeId);
+                }
+                addEdge(nodeIdComplete, pathStr);
+                (paths[nodeId] = paths[nodeId] || []).push(N);
+                for (let ih of node.inherits || []) {
+                    const target = ih.substring(1, ih.length - 1);
+                    addEdge(nodeId, `${target} complete`);
+                }
+                (node.children || []).forEach((child => {
+                    if (child.name && child.def === "def") {
+                        const childName = `${pathStr}/${child.name}`;
+                        addEdge(...reverseWhenFullyQualified([ pathStr, `${childName} complete` ]));
+                        if (nodeId.endsWith("over")) {
+                            if (pathStr.split("/").length > 2) {
+                                addEdge(childName, `/${pathStr.split("/")[1]}`);
+                            }
+                        }
+                    }
+                    traverse(child, pathStr);
+                }));
+            }
+        }
+        nodes.forEach((n => traverse(n, "")));
+        nodes.filter((n => n.name && n.def === "def")).forEach((n => {
+            addEdge("", `/${n.name} complete`);
+        }));
+        return paths;
+    }
+    function removeDuplicates(map_of_arrays) {
+        return Object.fromEntries(Object.entries(map_of_arrays).map((([k, vs]) => [ k, vs.filter(((value, index, array) => array.indexOf(value) === index)) ])));
+    }
+    const maps = datas.map(collectPaths);
+    let compositionEdgesOrig = removeDuplicates(compositionEdges);
+    function composePrim(right, left) {
+        return {
+            def: left.def || (right !== null ? right.def : null),
+            type: left.type || (right !== null ? right.type : null),
+            name: right ? right.name : left.name,
+            attributes: {
+                ...right !== null ? right.attributes : {},
+                ...left !== null ? left.attributes : {}
+            },
+            children: (left.children || []).concat(right ? right.children || [] : [])
+        };
+    }
+    compositionEdges = Object.fromEntries(Object.entries(compositionEdgesOrig).map((([item, dep]) => [ item, new Set([ ...dep ].filter((e => e !== item))) ])));
+    const extraItemsInDeps = new Set([ ...Object.values(compositionEdges).map((st => Array.from(st))).flat() ].filter((value => !compositionEdges.hasOwnProperty(value))));
+    extraItemsInDeps.forEach((item => {
+        if (maps.map((m => m[item])).some((i => i))) {
+            compositionEdges[item] = new Set;
+        }
+    }));
+    const composed = {};
+    const built = new Set;
+    Object.keys(compositionEdges).forEach((p => {
+        const opinions = maps.map((m => m[p])).filter((a => a)).flat(1);
+        if (p == "") {
+            composed[p] = {
+                name: p
+            };
+        } else if (opinions.length === 0) {
+            return;
+        } else if (opinions.length == 1) {
+            composed[p] = composePrim(null, opinions[0]);
+        } else {
+            composed[p] = opinions.reverse().reduce(composePrim);
+        }
+        delete composed[p].children;
+    }));
+    const updateName = (oldPrefix, newPrefix, prim) => ({
+        ...prim,
+        name: prim.name.replace(new RegExp(`^${oldPrefix}(?=/)`), newPrefix),
+        children: prim.children.map((c => updateName(oldPrefix, newPrefix, c)))
+    });
+    let maxIterations = 100;
+    while (maxIterations--) {
+        const bottomRankNodes = Object.entries(compositionEdges).filter((([_, dep]) => dep.size === 0 && (composed[_] || built.has(_) || _.endsWith(" complete")))).map((([k, v]) => k));
+        console.log("Bottom rank prims to resolve:", ...bottomRankNodes);
+        if (bottomRankNodes.length === 0) {
+            break;
+        }
+        const definedPrims = new Set;
+        bottomRankNodes.forEach((k => {
+            Array.from(compositionEdgesOrig[k] || []).forEach((v => {
+                console.log("Processing edge:", k, " --- ", v);
+                if (k.endsWith(" complete") && v.endsWith(" over")) ; else if (v.startsWith(k + "/")) {
+                    if (k.split("/").length > 2) ; else {
+                        v = v.replace(/ complete$/, "");
+                        composed[k].children = composed[k].children || [];
+                        composed[k].children.push(composed[v]);
+                        Array.from(collectNames(composed[k])).forEach((a => definedPrims.add(a.substring(k.length))));
+                    }
+                } else if (k.startsWith(v + "/")) {
+                    if (k.endsWith(" complete")) {
+                        let child = getChildByName(composed[`/${v.split("/")[1]}`], v, 1);
+                        if (child) {
+                            k = k.replace(/ complete$/, "");
+                            child.children.push(composed[k]);
+                        } else {
+                            console.error(v, "--\x3e", k, "not applied");
+                        }
+                        Array.from(collectNames(child)).forEach((a => definedPrims.add(a.substring(child.name.length))));
+                    }
+                } else if (k.search(/over$/) !== -1) {
+                    if (k.split("/").length > 2) {
+                        let child = getChildByName(composed[`/${v.split("/")[1]}`], k.split(" ")[0], 1);
+                        if (child) {
+                            Object.assign(child.attributes, composed[k].attributes);
+                        } else {
+                            console.error(k, "--\x3e", v, "not applied");
+                        }
+                    } else {
+                        composed[v] = composePrim(composed[v], composed[k]);
+                    }
+                } else if (v.search(/over$/) !== -1) {
+                    if (v.split("/").length > 2) {
+                        let child = getChildByName(composed[`/${k.split("/")[1]}`], v.split(" ")[0], 1);
+                        if (child) {
+                            Object.assign(child.attributes, composed[v].attributes);
+                        } else {
+                            console.error(v, "--\x3e", k, "not registered");
+                        }
+                    } else {
+                        composed[k] = composePrim(composed[k], composed[v]);
+                    }
+                } else {
+                    if (v.endsWith("complete")) {
+                        v = v.replace(/ complete$/, "");
+                        composed[k] = updateName(composed[v].name, composed[k].name, composePrim(composed[k], composed[v]));
+                        Array.from(collectNames(composed[k])).forEach((a => definedPrims.add(a.substring(k.length))));
+                    }
+                }
+            }));
+        }));
+        console.log("Constructed prims:", ...definedPrims);
+        Array.from(definedPrims).forEach((a => built.add(a)));
+        let orderedSet = new Set(bottomRankNodes);
+        compositionEdges = Object.fromEntries(Object.entries(compositionEdges).filter((([item]) => !orderedSet.has(item))).map((([item, dep]) => [ item, new Set([ ...dep ].filter((d => !orderedSet.has(d) && !definedPrims.has(d)))) ])));
+    }
+    if (Object.keys(compositionEdges).length !== 0) {
+        console.error("Unresolved nodes:", ...Object.keys(compositionEdges));
+    }
+    console.log(composed[""]);
+    return composed[""];
+}
+
+function composeAndRender() {
+    if (scene) {
+        scene.children = [];
+    }
+    if (datas.length === 0) {
+        return;
+    }
+    const tree = compose(datas.map((arr => arr[1])));
+    if (!tree) {
+        console.error("No result from composition");
+        return;
+    }
+    traverseTree(tree, scene || init(), tree);
+    if (autoCamera) {
+        const boundingBox = new THREE.Box3;
+        boundingBox.setFromObject(scene);
+        if (!boundingBox.isEmpty()) {
+            let avg = boundingBox.min.clone().add(boundingBox.max).multiplyScalar(.5);
+            let ext = boundingBox.max.clone().sub(boundingBox.min).length();
+            camera.position.copy(avg.clone().add(new THREE.Vector3(1, 1, 1).normalize().multiplyScalar(ext)));
+            camera.far = ext * 3;
+            camera.updateProjectionMatrix();
+            autoCamera = false;
+        }
+    }
+}
+
+function addModel(name, m) {
+    datas.push([ name, m ]);
+    composeAndRender();
+    return scene;
+}
+
+function clear() {
+    scene = undefined;
+    camera = undefined;
+    datas.length = 0;
+    autoCamera = true;
+}
+
+class IFCXLoader extends Loader {
+    load(url, onLoad, onProgress, onError) {
+        const loader = new FileLoader(this.manager);
+        loader.setPath(this.path);
+        loader.setResponseType("json");
+        loader.setRequestHeader(this.requestHeader);
+        loader.setWithCredentials(this.withCredentials);
+        loader.load(url, (buffer => {
+            try {
+                const scene = addModel("", buffer);
+                let handle = 0;
+                scene.traverse((object => {
+                    object.userData = {
+                        ...object.userData,
+                        handle: handle
+                    };
+                    handle++;
+                }));
+                onLoad({
+                    scene: scene
+                });
+            } catch (e) {
+                if (onError) {
+                    onError(e);
+                } else {
+                    console.error(e);
+                }
+                this.manager.itemError(url);
+            } finally {
+                clear();
+            }
+        }), onProgress, onError);
+    }
+}
+
 class EventEmitter2 {
     constructor() {
         this._listeners = {};
@@ -978,8 +1378,8 @@ class KonvaLine {
         const konvaPoints = [];
         params.points.forEach((point => konvaPoints.push(point.x, point.y)));
         this._ref = new Konva.Line({
-            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-            strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+            strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
@@ -1086,12 +1486,12 @@ class KonvaText {
             x: params.position.x,
             y: params.position.y,
             text: params.text,
-            fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
+            fontSize: (_a = params.fontSize) !== null && _a !== undefined ? _a : 34,
             fontFamily: this.TEXT_FONT_FAMILY,
-            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
             align: "left",
             draggable: true,
-            rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
+            rotation: (_c = params.rotation) !== null && _c !== undefined ? _c : 0
         });
         this._ref.width(this._ref.getTextWidth());
         this._ref.on("transform", (e => {
@@ -1189,15 +1589,15 @@ class KonvaRectangle {
             y: 100
         };
         this._ref = new Konva.Rect({
-            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
             x: params.position.x,
             y: params.position.y,
-            width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
-            height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
+            width: (_c = params.width) !== null && _c !== undefined ? _c : 200,
+            height: (_d = params.height) !== null && _d !== undefined ? _d : 200,
             draggable: true,
             strokeScaleEnabled: false
         });
@@ -1307,8 +1707,8 @@ class KonvaEllipse {
             y: 25
         };
         this._ref = new Konva.Ellipse({
-            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
@@ -1437,8 +1837,8 @@ class KonvaArrow {
             y: 100
         };
         this._ref = new Konva.Arrow({
-            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
-            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
             strokeWidth: 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
@@ -1578,8 +1978,8 @@ class KonvaImage {
             x: params.position.x,
             y: params.position.y,
             image: this._canvasImage,
-            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
-            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+            width: (_a = params.width) !== null && _a !== undefined ? _a : 0,
+            height: (_b = params.height) !== null && _b !== undefined ? _b : 0,
             draggable: true
         });
         this._ref.on("transform", (e => {
@@ -1689,10 +2089,10 @@ class KonvaCloud {
         this._ref = new Konva.Shape({
             x: params.position.x,
             y: params.position.y,
-            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 : 4,
+            width: (_a = params.width) !== null && _a !== undefined ? _a : 200,
+            height: (_b = params.height) !== null && _b !== undefined ? _b : 200,
+            stroke: (_c = params.color) !== null && _c !== undefined ? _c : "#ff0000",
+            strokeWidth: (_d = params.lineWidth) !== null && _d !== undefined ? _d : 4,
             draggable: true,
             strokeScaleEnabled: false,
             globalCompositeOperation: "source-over",
@@ -1941,9 +2341,9 @@ class KonvaMarkup {
     initialize(container, containerEvents, viewer, worldTransformer) {
         if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
         this._viewer = viewer;
-        this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
+        this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform;
         this._container = container;
-        this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
+        this._containerEvents = containerEvents !== null && containerEvents !== undefined ? containerEvents : [];
         this._markupContainer = document.createElement("div");
         this._markupContainer.id = "markup-container";
         this._markupContainer.style.position = "absolute";
@@ -1971,9 +2371,9 @@ class KonvaMarkup {
             this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
         }
         this.destroyKonva();
-        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_a = this._resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
         this._resizeObserver = undefined;
-        (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
+        (_b = this._markupContainer) === null || _b === undefined ? undefined : _b.remove();
         this._markupContainer = undefined;
         this._container = undefined;
         this._viewer = undefined;
@@ -2005,14 +2405,14 @@ class KonvaMarkup {
         const hexColor = new MarkupColor(r, g, b).asHex();
         this.getObjects().filter((obj => {
             var _a;
-            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+            return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
         }));
     }
     colorizeSelectedMarkups(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).asHex();
         this.getSelectedObjects().filter((obj => {
             var _a;
-            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+            return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
         }));
     }
     setViewpoint(viewpoint) {
@@ -2028,13 +2428,13 @@ class KonvaMarkup {
             x: 0,
             y: 0
         });
-        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
+        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === undefined ? undefined : _a.markup_color) || {
             r: 255,
             g: 0,
             b: 0
         };
         this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line => {
+        (_b = viewpoint.lines) === null || _b === undefined ? undefined : _b.forEach((line => {
             const linePoints = [];
             line.points.forEach((point => {
                 const screenPoint = this._worldTransformer.worldToScreen(point);
@@ -2043,28 +2443,28 @@ class KonvaMarkup {
             }));
             this.addLine(linePoints, line.color, line.type, line.width, line.id);
         }));
-        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text => {
+        (_c = viewpoint.texts) === null || _c === undefined ? undefined : _c.forEach((text => {
             const screenPoint = this._worldTransformer.worldToScreen(text.position);
             this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
         }));
-        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect => {
+        (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect => {
             const screenPoint = this._worldTransformer.worldToScreen(rect.position);
             this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
         }));
-        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse => {
+        (_e = viewpoint.ellipses) === null || _e === undefined ? undefined : _e.forEach((ellipse => {
             const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
             this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
         }));
-        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow => {
+        (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow => {
             const startPoint = this._worldTransformer.worldToScreen(arrow.start);
             const endPoint = this._worldTransformer.worldToScreen(arrow.end);
             this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
         }));
-        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud => {
+        (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud => {
             const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
             this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
         }));
-        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image => {
+        (_h = viewpoint.images) === null || _h === undefined ? undefined : _h.forEach((image => {
             const screenPoint = this._worldTransformer.worldToScreen(image.position);
             this.addImage(screenPoint, image.src, image.width, image.height, image.id);
         }));
@@ -2358,7 +2758,7 @@ class KonvaMarkup {
         this.removeTextInput();
         this.removeImageInput();
         this.clearOverlay();
-        (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_a = this._konvaStage) === null || _a === undefined ? undefined : _a.destroy();
         this._groupImages = undefined;
         this._groupGeometry = undefined;
         this._groupTexts = undefined;
@@ -2608,7 +3008,7 @@ class KonvaMarkup {
     }
     removeTextInput() {
         var _a;
-        (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        (_a = this._textInputRef) === null || _a === undefined ? undefined : _a.remove();
         this._textInputRef = null;
         this._textInputPos = null;
         this._textInputAngle = 0;
@@ -2651,14 +3051,14 @@ class KonvaMarkup {
     }
     removeImageInput() {
         var _a;
-        (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        (_a = this._imageInputRef) === null || _a === undefined ? undefined : _a.remove();
         this._imageInputRef = null;
         this._imageInputPos = null;
     }
     addText(text, position, angle, color, textSize, fontSize, id) {
         var _a;
         if (!text) return;
-        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
         this.clearSelected();
         this.removeTextInput();
         const tolerance = 1e-6;
@@ -2733,7 +3133,7 @@ class KonvaMarkup {
     addImage(position, src, width, height, id) {
         var _a;
         if (!position || !src) return;
-        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
         this.clearSelected();
         this.removeImageInput();
         const konvaImage = new KonvaImage({
@@ -4194,7 +4594,8 @@ class MeasureProjector {
 class ExtentsComponent {
     constructor(viewer) {
         this.syncExtents = () => {
-            const extents = this.viewer.models.reduce(((result, gltf) => result.expandByObject(gltf.scene)), new Box3);
+            const extents = new Box3;
+            this.viewer.models.forEach((model => model.scene.traverseVisible((object => !object.children.length && extents.expandByObject(object)))));
             this.viewer.extents.copy(extents);
             this.viewer.target.copy(extents.getCenter(new Vector3));
         };
@@ -4202,11 +4603,17 @@ class ExtentsComponent {
         this.viewer.addEventListener("geometryend", this.syncExtents);
         this.viewer.addEventListener("clear", this.syncExtents);
         this.viewer.on("explode", this.syncExtents);
+        this.viewer.on("isolate", this.syncExtents);
+        this.viewer.on("hide", this.syncExtents);
+        this.viewer.on("showall", this.syncExtents);
     }
     dispose() {
         this.viewer.removeEventListener("geometryend", this.syncExtents);
         this.viewer.removeEventListener("clear", this.syncExtents);
         this.viewer.off("explode", this.syncExtents);
+        this.viewer.off("isolate", this.syncExtents);
+        this.viewer.off("hide", this.syncExtents);
+        this.viewer.off("showall", this.syncExtents);
     }
 }
 
@@ -4258,7 +4665,7 @@ class DefaultPositionComponent {
             this.viewer.camera.far = size * 100;
             this.viewer.camera.updateMatrixWorld();
             this.viewer.camera.updateProjectionMatrix();
-            this.viewer.executeCommand("setDefaultViewPosition", "sw");
+            this.viewer.executeCommand("setDefaultViewPosition", "front");
             this.viewer.executeCommand("zoomToExtents");
         };
         this.viewer = viewer;
@@ -4556,19 +4963,23 @@ class Viewer extends EventEmitter2 {
             file: file,
             model: file
         });
-        let model = undefined;
-        if (file) {
-            const models = await file.getModels() || [];
-            model = models.find((model => model.default)) || models[0];
+        if (!file) throw new Error("No default model found");
+        let database = "";
+        let path = "";
+        const models = await file.getModels() || [];
+        const model = models.find((model => model.default)) || models[0];
+        if (model) {
+            database = model.database;
+            path = model.path;
+        } else {
+            database = file.id + file.type;
+            path = `${file.path}/downloads`;
         }
-        if (!model) throw new Error("No default model found");
-        const geometryType = model.database.split(".").pop();
-        if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
-        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+        const url = `${file.httpClient.serverUrl}${path}/${database}`;
         const params = {
-            requestHeader: model.httpClient.headers
+            requestHeader: file.httpClient.headers
         };
-        await this.loadReferences(model);
+        await this.loadReferences(file);
         await this.loadGltfFile(url, undefined, params);
         return this;
     }
@@ -4593,12 +5004,22 @@ class Viewer extends EventEmitter2 {
             this.emitEvent({
                 type: "geometrystart"
             });
-            const loader = new GLTFLoader(manager);
+            const loaders = {
+                gltf: GLTFLoader,
+                usdz: USDZLoader2,
+                ifcx: IFCXLoader
+            };
+            let format = params.fileFormat;
+            if (!format && typeof file === "string") format = file.split(".").pop().toLocaleLowerCase();
+            if (!format && file instanceof globalThis.File) format = file.name.split(".").pop().toLocaleLowerCase();
+            if (!format) format = "gltf";
+            if (!loaders[format]) throw new Error(`Unknown geometry type: ${format}`);
+            const loader = new loaders[format](manager);
             loader.setPath(manager.path);
             loader.setRequestHeader(params.requestHeader);
             loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
             loader.setWithCredentials(params.withCredentials || loader.withCredentials);
-            const gltf = await loader.loadAsync(manager.fileURL, (event => {
+            const model = await loader.loadAsync(manager.fileURL, (event => {
                 const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
                 const progress = lengthComputable ? loaded / total : 1;
                 this.emitEvent({
@@ -4607,18 +5028,19 @@ class Viewer extends EventEmitter2 {
                 });
             }));
             if (!this.scene) return this;
-            if (!gltf.scene) throw new Error("No glTF scene found");
-            this.models.push(gltf);
-            this.scene.add(gltf.scene);
+            if (!model.scene) throw new Error("No scene found");
+            this.models.push(model);
+            this.scene.add(model.scene);
             this.syncOptions();
             this.syncOverlay();
             this.update();
+            setTimeout(this.update, 0);
             this.emitEvent({
                 type: "databasechunk"
             });
             this.emitEvent({
                 type: "geometryend",
-                data: gltf.scene
+                data: model.scene
             });
         } catch (error) {
             this.emitEvent({
@@ -4649,8 +5071,8 @@ class Viewer extends EventEmitter2 {
         this.clearSelected();
         this.helpers.traverse(disposeObject);
         this.helpers.clear();
-        this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));
-        this.models.forEach((gltf => gltf.scene.removeFromParent()));
+        this.models.forEach((model => model.scene.traverse(disposeObject)));
+        this.models.forEach((model => model.scene.removeFromParent()));
         this.models = [];
         this.scene.clear();
         this.syncOptions();
@@ -4798,16 +5220,16 @@ class Viewer extends EventEmitter2 {
             }
         };
         const setClippingPlanes = clipping_planes => {
-            clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane => {
+            clipping_planes === null || clipping_planes === undefined ? undefined : clipping_planes.forEach((clipping_plane => {
                 const plane = new Plane;
                 plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
                 this.renderer.clippingPlanes.push(plane);
             }));
         };
         const setSelection = selection => {
-            this.setSelected(selection === null || selection === void 0 ? void 0 : selection.map((component => component.handle)));
+            this.setSelected(selection === null || selection === undefined ? undefined : selection.map((component => component.handle)));
         };
-        const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
+        const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
         this.setActiveDragger();
         this.clearSlices();
         this.clearOverlay();
@@ -4818,7 +5240,7 @@ class Viewer extends EventEmitter2 {
         setClippingPlanes(viewpoint.clipping_planes);
         setSelection(viewpoint.selection);
         this._markup.setViewpoint(viewpoint);
-        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
+        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === undefined ? undefined : _b.camera_target) !== null && _c !== undefined ? _c : this.target);
         this.setActiveDragger(draggerName);
         this.emitEvent({
             type: "drawviewpoint",