@vertexvis/viewer 1.0.2-canary.21 → 1.0.2-canary.22

package/dist/cjs/vertex-viewer.cjs.entry.js

@@ -3100,7 +3100,7 @@ function getElementPropertyValue(element, property) {
     return value !== '' ? value : undefined;
 }
 
-const viewerCss = () => `:host{--image-background:var(--image-background);--viewer-background:var(--viewer-background);display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px;user-select:none;-webkit-user-select:none}.canvas-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative}.enable-pointer-events{touch-action:none}.viewer-container{width:100%;height:100%;overflow:hidden}.error-message{position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}`;
+const viewerCss = () => `button{border:none;background:transparent;cursor:pointer;margin:0;padding:0}.button{padding:0.5rem;border-radius:0.25rem}.button-secondary{color:var(--neutral-800);background-color:var(--neutral-300)}.button-secondary:hover{color:var(--neutral-900)}.button-secondary:hover:enabled{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.button-secondary:disabled{opacity:0.8}.button-secondary:hover:disabled{cursor:not-allowed}:host{--image-background:var(--image-background);--viewer-background:var(--viewer-background);display:block;position:relative;width:300px;height:300px;min-width:1px;min-height:1px;user-select:none;-webkit-user-select:none}.canvas-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative}.enable-pointer-events{touch-action:none}.viewer-container{width:100%;height:100%;overflow:hidden}.error-message-wrapper{align-items:center;display:flex;flex-direction:column;gap:1rem;position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}.error-message{font-size:0.875rem}`;
 
 const Viewer = class {
     constructor(hostRef) {
@@ -3232,6 +3232,11 @@ const Viewer = class {
                 }, streamAttributesUpdateThrottleInMilliseconds);
             }
         };
+        this.handleRetry = () => {
+            this.reload().catch((e) => {
+                console.error('Error reloading scene', e);
+            });
+        };
         this.handleElementResize = this.handleElementResize.bind(this);
         this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
     }
@@ -3309,12 +3314,12 @@ const Viewer = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'cf89e8922ecbc6a4f024197ec20ff2d1a987953e' }, index.h("div", { key: '779eab813e3515178e51f729a952bd5b02978507', ref: (ref) => (this.viewerContainerElement = ref), class: "viewer-container", style: { cursor: dom.cssCursor((_a = this.cursor) !== null && _a !== void 0 ? _a : '') }, onContextMenu: (event) => event.preventDefault() }, index.h("div", { key: '78f19335302d21fcb339e420779695ccd4045407', ref: (ref) => (this.canvasContainerElement = ref), class: index$1.classname('canvas-container', {
+        return (index.h(index.Host, { key: '32586b76e959c2a93aac583691d2a88ab78f296e' }, index.h("div", { key: 'e5f461c1c610e189be5743bcfb898e228a9dd90a', ref: (ref) => (this.viewerContainerElement = ref), class: "viewer-container", style: { cursor: dom.cssCursor((_a = this.cursor) !== null && _a !== void 0 ? _a : '') }, onContextMenu: (event) => event.preventDefault() }, index.h("div", { key: '6beff5f3ef84c05b8f4237378b50083af6dad971', ref: (ref) => (this.canvasContainerElement = ref), class: index$1.classname('canvas-container', {
                 'enable-pointer-events ': window.PointerEvent != null,
-            }) }, index.h("canvas", { key: '6de64c9e82d6e1a9843bb3f263a27ccdd5614314', ref: (ref) => {
+            }) }, index.h("canvas", { key: '47aedb0ef4e45a54af3d0749ad4f5542f3706e01', ref: (ref) => {
                 this.canvasElement = ref;
                 this.stateMap.interactionTarget = ref;
-            }, class: "canvas" }), this.errorMessage != null ? (index.h("div", { class: "error-message" }, this.errorMessage)) : null), index.h("slot", { key: '35e36b86ae1bba5b85695354506bb9dcc3375b3f' }))));
+            }, class: "canvas" }), this.errorMessage != null ? (index.h("div", { class: "error-message-wrapper", role: "alert" }, index.h("span", { class: "error-message" }, this.errorMessage), index.h("slot", { name: "retry" }, index.h("button", { class: "button button-secondary", type: "button", onClick: this.handleRetry }, "Retry")))) : null), index.h("slot", { key: 'aeab63c7fd184e2ccb920011cee235d5c101446f' }))));
     }
     /**
      * @internal