react-iiif-vault 0.9.8 → 0.9.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/index.js +989 -271
  2. package/dist/esm/index.mjs +925 -219
  3. package/dist/index.d.ts +101 -26
  4. package/dist/index.umd.js +27593 -26878
  5. package/package.json +14 -11
package/dist/esm/index.mjs CHANGED
@@ -1,23 +1,215 @@
1
- import React, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment } from 'react';
2
- import { globalVault, Vault } from '@iiif/vault';
1
+ import React$1, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from 'react';
3
2
  import { AtlasAuto, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
3
+ import { globalVault, Vault } from '@iiif/vault';
4
4
  import { createAction } from 'typesafe-actions';
5
+ import require$$0 from 'react-dom';
5
6
  import { createEventsHelper, createStylesHelper, createThumbnailHelper } from '@iiif/vault-helpers';
6
7
  import { ImageServiceLoader, getImageServices } from '@atlas-viewer/iiif-image-api';
7
8
 
8
- var __defProp$8 = Object.defineProperty;
9
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
10
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
11
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues$8 = (a, b) => {
9
+ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
10
+
11
+ var reactErrorBoundary_umd = {exports: {}};
12
+
13
+ (function (module, exports) {
14
+ (function (global, factory) {
15
+ factory(exports, React$1) ;
16
+ })(commonjsGlobal, (function (exports, React) {
17
+ function _interopNamespace(e) {
18
+ if (e && e.__esModule) return e;
19
+ var n = Object.create(null);
20
+ if (e) {
21
+ Object.keys(e).forEach(function (k) {
22
+ if (k !== 'default') {
23
+ var d = Object.getOwnPropertyDescriptor(e, k);
24
+ Object.defineProperty(n, k, d.get ? d : {
25
+ enumerable: true,
26
+ get: function () { return e[k]; }
27
+ });
28
+ }
29
+ });
30
+ }
31
+ n["default"] = e;
32
+ return Object.freeze(n);
33
+ }
34
+
35
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
36
+
37
+ function _setPrototypeOf(o, p) {
38
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
39
+ o.__proto__ = p;
40
+ return o;
41
+ };
42
+
43
+ return _setPrototypeOf(o, p);
44
+ }
45
+
46
+ function _inheritsLoose(subClass, superClass) {
47
+ subClass.prototype = Object.create(superClass.prototype);
48
+ subClass.prototype.constructor = subClass;
49
+ _setPrototypeOf(subClass, superClass);
50
+ }
51
+
52
+ var changedArray = function changedArray(a, b) {
53
+ if (a === void 0) {
54
+ a = [];
55
+ }
56
+
57
+ if (b === void 0) {
58
+ b = [];
59
+ }
60
+
61
+ return a.length !== b.length || a.some(function (item, index) {
62
+ return !Object.is(item, b[index]);
63
+ });
64
+ };
65
+
66
+ var initialState = {
67
+ error: null
68
+ };
69
+
70
+ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
71
+ _inheritsLoose(ErrorBoundary, _React$Component);
72
+
73
+ function ErrorBoundary() {
74
+ var _this;
75
+
76
+ for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
77
+ _args[_key] = arguments[_key];
78
+ }
79
+
80
+ _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
81
+ _this.state = initialState;
82
+
83
+ _this.resetErrorBoundary = function () {
84
+ var _this$props;
85
+
86
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
87
+ args[_key2] = arguments[_key2];
88
+ }
89
+
90
+ _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
91
+
92
+ _this.reset();
93
+ };
94
+
95
+ return _this;
96
+ }
97
+
98
+ ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
99
+ return {
100
+ error: error
101
+ };
102
+ };
103
+
104
+ var _proto = ErrorBoundary.prototype;
105
+
106
+ _proto.reset = function reset() {
107
+ this.setState(initialState);
108
+ };
109
+
110
+ _proto.componentDidCatch = function componentDidCatch(error, info) {
111
+ var _this$props$onError, _this$props2;
112
+
113
+ (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
114
+ };
115
+
116
+ _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
117
+ var error = this.state.error;
118
+ var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
119
+ // happens to *also* be in the resetKeys array, we'd end up resetting
120
+ // the error boundary immediately. This would likely trigger a second
121
+ // error to be thrown.
122
+ // So we make sure that we don't check the resetKeys on the first call
123
+ // of cDU after the error is set
124
+
125
+ if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
126
+ var _this$props$onResetKe, _this$props3;
127
+
128
+ (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
129
+ this.reset();
130
+ }
131
+ };
132
+
133
+ _proto.render = function render() {
134
+ var error = this.state.error;
135
+ var _this$props4 = this.props,
136
+ fallbackRender = _this$props4.fallbackRender,
137
+ FallbackComponent = _this$props4.FallbackComponent,
138
+ fallback = _this$props4.fallback;
139
+
140
+ if (error !== null) {
141
+ var _props = {
142
+ error: error,
143
+ resetErrorBoundary: this.resetErrorBoundary
144
+ };
145
+
146
+ if ( /*#__PURE__*/React__namespace.isValidElement(fallback)) {
147
+ return fallback;
148
+ } else if (typeof fallbackRender === 'function') {
149
+ return fallbackRender(_props);
150
+ } else if (FallbackComponent) {
151
+ return /*#__PURE__*/React__namespace.createElement(FallbackComponent, _props);
152
+ } else {
153
+ throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
154
+ }
155
+ }
156
+
157
+ return this.props.children;
158
+ };
159
+
160
+ return ErrorBoundary;
161
+ }(React__namespace.Component);
162
+
163
+ function withErrorBoundary(Component, errorBoundaryProps) {
164
+ var Wrapped = function Wrapped(props) {
165
+ return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__namespace.createElement(Component, props));
166
+ }; // Format for display in DevTools
167
+
168
+
169
+ var name = Component.displayName || Component.name || 'Unknown';
170
+ Wrapped.displayName = "withErrorBoundary(" + name + ")";
171
+ return Wrapped;
172
+ }
173
+
174
+ function useErrorHandler(givenError) {
175
+ var _React$useState = React__namespace.useState(null),
176
+ error = _React$useState[0],
177
+ setError = _React$useState[1];
178
+
179
+ if (givenError != null) throw givenError;
180
+ if (error != null) throw error;
181
+ return setError;
182
+ }
183
+ /*
184
+ eslint
185
+ @typescript-eslint/sort-type-union-intersection-members: "off",
186
+ @typescript-eslint/no-throw-literal: "off",
187
+ @typescript-eslint/prefer-nullish-coalescing: "off"
188
+ */
189
+
190
+ exports.ErrorBoundary = ErrorBoundary;
191
+ exports.useErrorHandler = useErrorHandler;
192
+ exports.withErrorBoundary = withErrorBoundary;
193
+
194
+ Object.defineProperty(exports, '__esModule', { value: true });
195
+
196
+ }));
197
+
198
+ }(reactErrorBoundary_umd, reactErrorBoundary_umd.exports));
199
+
200
+ var __defProp$a = Object.defineProperty;
201
+ var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
202
+ var __hasOwnProp$a = Object.prototype.hasOwnProperty;
203
+ var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
204
+ var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
205
+ var __spreadValues$a = (a, b) => {
14
206
  for (var prop in b || (b = {}))
15
- if (__hasOwnProp$8.call(b, prop))
16
- __defNormalProp$8(a, prop, b[prop]);
17
- if (__getOwnPropSymbols$8)
18
- for (var prop of __getOwnPropSymbols$8(b)) {
19
- if (__propIsEnum$8.call(b, prop))
20
- __defNormalProp$8(a, prop, b[prop]);
207
+ if (__hasOwnProp$a.call(b, prop))
208
+ __defNormalProp$a(a, prop, b[prop]);
209
+ if (__getOwnPropSymbols$a)
210
+ for (var prop of __getOwnPropSymbols$a(b)) {
211
+ if (__propIsEnum$a.call(b, prop))
212
+ __defNormalProp$a(a, prop, b[prop]);
21
213
  }
22
214
  return a;
23
215
  };
@@ -28,26 +220,32 @@ const defaultResourceContext = {
28
220
  canvas: void 0,
29
221
  annotation: void 0
30
222
  };
31
- const ResourceReactContext = React.createContext(defaultResourceContext);
223
+ const ResourceReactContext = React$1.createContext(defaultResourceContext);
32
224
  const useResourceContext = () => {
33
225
  return useContext(ResourceReactContext);
34
226
  };
35
- const ResourceProvider = ({ value, children }) => {
227
+ function ResourceProvider({ value, children }) {
36
228
  const parentContext = useResourceContext();
37
229
  const newContext = useMemo(() => {
38
- return __spreadValues$8(__spreadValues$8({}, parentContext), value);
230
+ return __spreadValues$a(__spreadValues$a({}, parentContext), value);
39
231
  }, [value, parentContext]);
40
- return /* @__PURE__ */ React.createElement(ResourceReactContext.Provider, {
232
+ return /* @__PURE__ */ React$1.createElement(ResourceReactContext.Provider, {
41
233
  value: newContext
42
234
  }, children);
43
- };
235
+ }
44
236
 
45
- const ReactVaultContext = React.createContext({
237
+ const ReactVaultContext = React$1.createContext({
46
238
  vault: null,
47
239
  setVaultInstance: (vault) => {
48
240
  }
49
241
  });
50
- const VaultProvider = ({ vault, vaultOptions, useGlobal, resources, children }) => {
242
+ function VaultProvider({
243
+ vault,
244
+ vaultOptions,
245
+ useGlobal,
246
+ resources,
247
+ children
248
+ }) {
51
249
  const [vaultInstance, setVaultInstance] = useState(() => {
52
250
  if (vault) {
53
251
  return vault;
@@ -60,12 +258,12 @@ const VaultProvider = ({ vault, vaultOptions, useGlobal, resources, children })
60
258
  }
61
259
  return new Vault();
62
260
  });
63
- return /* @__PURE__ */ React.createElement(ReactVaultContext.Provider, {
261
+ return /* @__PURE__ */ React$1.createElement(ReactVaultContext.Provider, {
64
262
  value: { vault: vaultInstance, setVaultInstance }
65
- }, /* @__PURE__ */ React.createElement(ResourceProvider, {
263
+ }, /* @__PURE__ */ React$1.createElement(ResourceProvider, {
66
264
  value: resources || {}
67
265
  }, children));
68
- };
266
+ }
69
267
 
70
268
  const useVault = () => {
71
269
  const { vault } = useContext(ReactVaultContext);
@@ -133,28 +331,30 @@ function useExternalManifest(idOrRef, options) {
133
331
  return { id, isLoaded, error, manifest: resource, requestId, cached };
134
332
  }
135
333
 
136
- const ManifestContext = ({ manifest, children }) => {
137
- return /* @__PURE__ */ React.createElement(ResourceProvider, {
334
+ function ManifestContext({ manifest, children }) {
335
+ return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
138
336
  value: { manifest }
139
337
  }, children);
140
- };
338
+ }
141
339
 
142
- const CanvasContext = ({ canvas, children }) => {
143
- return /* @__PURE__ */ React.createElement(ResourceProvider, {
340
+ function CanvasContext({ canvas, children }) {
341
+ return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
144
342
  value: { canvas }
145
343
  }, children);
146
- };
344
+ }
147
345
 
148
346
  function useVaultSelector(selector, deps = []) {
149
347
  const vault = useVault();
150
348
  const [selectedState, setSelectedState] = useState(() => selector(vault.getState(), vault));
151
349
  useEffect(() => {
152
- return vault.subscribe((s) => selector(s, vault), setSelectedState, false);
350
+ return vault.subscribe((s) => selector(s, vault), (s) => {
351
+ setSelectedState(s);
352
+ }, false);
153
353
  }, deps);
154
354
  return selectedState;
155
355
  }
156
356
 
157
- const VisibleCanvasReactContext = React.createContext([]);
357
+ const VisibleCanvasReactContext = React$1.createContext([]);
158
358
  function useVisibleCanvases() {
159
359
  const ids = useContext(VisibleCanvasReactContext);
160
360
  return useVaultSelector((state) => {
@@ -173,7 +373,7 @@ const SimpleViewerReactContext = createContext({
173
373
  totalCanvases: 0,
174
374
  pagingView: true
175
375
  });
176
- const SimpleViewerProvider = (props) => {
376
+ function SimpleViewerProvider(props) {
177
377
  const manifest = useExternalManifest(props.manifest);
178
378
  const [currentCanvasId, setCurrentCanvasId] = useState("");
179
379
  const [visible, setVisible] = useState([]);
@@ -256,21 +456,21 @@ const SimpleViewerProvider = (props) => {
256
456
  }), [nextCanvas, previousCanvas, currentCanvasIndex, canvasList, setCurrentCanvasIndex, internalSetCurrentCanvasId]);
257
457
  if (!manifest.manifest) {
258
458
  console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
259
- return /* @__PURE__ */ React.createElement("div", null, "Sorry, something went wrong.");
459
+ return /* @__PURE__ */ React$1.createElement("div", null, "Sorry, something went wrong.");
260
460
  }
261
461
  if (!manifest.isLoaded) {
262
- return /* @__PURE__ */ React.createElement("div", null, "Loading...");
462
+ return /* @__PURE__ */ React$1.createElement("div", null, "Loading...");
263
463
  }
264
- return /* @__PURE__ */ React.createElement(SimpleViewerReactContext.Provider, {
464
+ return /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
265
465
  value: ctx
266
- }, /* @__PURE__ */ React.createElement(VisibleCanvasReactContext.Provider, {
466
+ }, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
267
467
  value: visible
268
- }, /* @__PURE__ */ React.createElement(ManifestContext, {
468
+ }, /* @__PURE__ */ React$1.createElement(ManifestContext, {
269
469
  manifest: manifest.manifest.id
270
- }, /* @__PURE__ */ React.createElement(CanvasContext, {
470
+ }, /* @__PURE__ */ React$1.createElement(CanvasContext, {
271
471
  canvas: currentCanvasId
272
472
  }, props.children))));
273
- };
473
+ }
274
474
  function useSimpleViewer() {
275
475
  return useContext(SimpleViewerReactContext);
276
476
  }
@@ -283,16 +483,16 @@ function useContextBridge() {
283
483
  VisibleCanvasReactContext: useContext(VisibleCanvasReactContext)
284
484
  };
285
485
  }
286
- const ContextBridge = (props) => {
287
- return /* @__PURE__ */ React.createElement(VaultProvider, {
486
+ function ContextBridge(props) {
487
+ return /* @__PURE__ */ React$1.createElement(VaultProvider, {
288
488
  vault: props.bridge.VaultContext.vault || void 0,
289
489
  resources: props.bridge.ResourceContext
290
- }, /* @__PURE__ */ React.createElement(VisibleCanvasReactContext.Provider, {
490
+ }, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
291
491
  value: props.bridge.VisibleCanvasReactContext
292
- }, /* @__PURE__ */ React.createElement(SimpleViewerReactContext.Provider, {
492
+ }, /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
293
493
  value: props.bridge.SimpleViewerReactContext
294
494
  }, props.children)));
295
- };
495
+ }
296
496
 
297
497
  const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
298
498
  const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
@@ -456,49 +656,160 @@ function useVirtualAnnotationPageContext() {
456
656
  }
457
657
  function VirtualAnnotationProvider({ children }) {
458
658
  const [fullPage, { addAnnotation, removeAnnotation }] = useVirtualAnnotationPage();
459
- return /* @__PURE__ */ React.createElement(VirtualAnnotationPageContext.Provider, {
659
+ return /* @__PURE__ */ React$1.createElement(VirtualAnnotationPageContext.Provider, {
460
660
  value: useMemo(() => ({ fullPage, addAnnotation, removeAnnotation }), [fullPage])
461
661
  }, children);
462
662
  }
463
663
 
464
- var __defProp$7 = Object.defineProperty;
465
- var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
466
- var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
467
- var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
468
- var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
469
- var __spreadValues$7 = (a, b) => {
664
+ var __defProp$9 = Object.defineProperty;
665
+ var __defProps$7 = Object.defineProperties;
666
+ var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
667
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
668
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
669
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
670
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
671
+ var __spreadValues$9 = (a, b) => {
470
672
  for (var prop in b || (b = {}))
471
- if (__hasOwnProp$7.call(b, prop))
472
- __defNormalProp$7(a, prop, b[prop]);
473
- if (__getOwnPropSymbols$7)
474
- for (var prop of __getOwnPropSymbols$7(b)) {
475
- if (__propIsEnum$7.call(b, prop))
476
- __defNormalProp$7(a, prop, b[prop]);
673
+ if (__hasOwnProp$9.call(b, prop))
674
+ __defNormalProp$9(a, prop, b[prop]);
675
+ if (__getOwnPropSymbols$9)
676
+ for (var prop of __getOwnPropSymbols$9(b)) {
677
+ if (__propIsEnum$9.call(b, prop))
678
+ __defNormalProp$9(a, prop, b[prop]);
679
+ }
680
+ return a;
681
+ };
682
+ var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
683
+ function DefaultCanvasFallback({ width, style, height }) {
684
+ return /* @__PURE__ */ React$1.createElement("div", {
685
+ style: __spreadProps$7(__spreadValues$9({ width, height, minHeight: 500 }, style || {}), { background: "#f9f9f9" })
686
+ }, "Unknown error");
687
+ }
688
+
689
+ var createRoot;
690
+
691
+ var m = require$$0;
692
+ {
693
+ var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
694
+ createRoot = function(c, o) {
695
+ i.usingClientEntryPoint = true;
696
+ try {
697
+ return m.createRoot(c, o);
698
+ } finally {
699
+ i.usingClientEntryPoint = false;
700
+ }
701
+ };
702
+ }
703
+
704
+ const ViewerPresetContext = createContext(null);
705
+ function useViewerPreset() {
706
+ return useContext(ViewerPresetContext);
707
+ }
708
+
709
+ const PortalContext = React$1.createContext(null);
710
+ const OverlayPortalContext = React$1.createContext(null);
711
+ function CanvasPortal({ children, overlay }) {
712
+ const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
713
+ const rootRef = useRef(null);
714
+ const preset = useViewerPreset();
715
+ useLayoutEffect(() => {
716
+ if (!rootRef.current) {
717
+ rootRef.current = htmlElement ? createRoot(htmlElement) : null;
718
+ }
719
+ }, []);
720
+ useLayoutEffect(() => {
721
+ return () => {
722
+ var _a;
723
+ (_a = rootRef.current) == null ? void 0 : _a.unmount();
724
+ rootRef.current = null;
725
+ };
726
+ }, []);
727
+ useLayoutEffect(() => {
728
+ if (rootRef.current) {
729
+ rootRef.current.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
730
+ value: preset
731
+ }, children));
732
+ }
733
+ }, [children, preset]);
734
+ return null;
735
+ }
736
+
737
+ var __defProp$8 = Object.defineProperty;
738
+ var __defProps$6 = Object.defineProperties;
739
+ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
740
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
741
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
742
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
743
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
744
+ var __spreadValues$8 = (a, b) => {
745
+ for (var prop in b || (b = {}))
746
+ if (__hasOwnProp$8.call(b, prop))
747
+ __defNormalProp$8(a, prop, b[prop]);
748
+ if (__getOwnPropSymbols$8)
749
+ for (var prop of __getOwnPropSymbols$8(b)) {
750
+ if (__propIsEnum$8.call(b, prop))
751
+ __defNormalProp$8(a, prop, b[prop]);
477
752
  }
478
753
  return a;
479
754
  };
755
+ var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
480
756
  var __objRest = (source, exclude) => {
481
757
  var target = {};
482
758
  for (var prop in source)
483
- if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
759
+ if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
484
760
  target[prop] = source[prop];
485
- if (source != null && __getOwnPropSymbols$7)
486
- for (var prop of __getOwnPropSymbols$7(source)) {
487
- if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
761
+ if (source != null && __getOwnPropSymbols$8)
762
+ for (var prop of __getOwnPropSymbols$8(source)) {
763
+ if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
488
764
  target[prop] = source[prop];
489
765
  }
490
766
  return target;
491
767
  };
492
768
  function Viewer(_a) {
493
769
  var _b = _a, {
494
- children
770
+ children,
771
+ errorFallback,
772
+ outerContainerProps = {}
495
773
  } = _b, props = __objRest(_b, [
496
- "children"
774
+ "children",
775
+ "errorFallback",
776
+ "outerContainerProps"
497
777
  ]);
778
+ const portal = useRef(null);
779
+ const [portalElement, setPortalElement] = useState();
780
+ const [viewerPreset, setViewerPreset] = useState();
781
+ const overlayPortal = useRef(null);
782
+ const [overlayPortalElement, setOverlayPortalElement] = useState();
498
783
  const bridge = useContextBridge();
499
- return /* @__PURE__ */ React.createElement(AtlasAuto, __spreadValues$7({}, props), /* @__PURE__ */ React.createElement(ContextBridge, {
784
+ const ErrorFallback = errorFallback || DefaultCanvasFallback;
785
+ useLayoutEffect(() => {
786
+ setPortalElement(portal.current);
787
+ setOverlayPortalElement(overlayPortal.current);
788
+ }, []);
789
+ return /* @__PURE__ */ React$1.createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
790
+ fallbackRender: () => /* @__PURE__ */ React$1.createElement(ErrorFallback, __spreadValues$8({}, props))
791
+ }, /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
792
+ containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
793
+ htmlChildren: /* @__PURE__ */ React$1.createElement("div", {
794
+ ref: overlayPortal
795
+ }),
796
+ onCreated: (preset) => {
797
+ setViewerPreset(preset);
798
+ if (props.onCreated) {
799
+ props.onCreated(preset);
800
+ }
801
+ }
802
+ }), /* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
803
+ value: viewerPreset
804
+ }, /* @__PURE__ */ React$1.createElement(PortalContext.Provider, {
805
+ value: portalElement
806
+ }, /* @__PURE__ */ React$1.createElement(OverlayPortalContext.Provider, {
807
+ value: overlayPortalElement
808
+ }, /* @__PURE__ */ React$1.createElement(ContextBridge, {
500
809
  bridge
501
- }, /* @__PURE__ */ React.createElement(VirtualAnnotationProvider, null, children)));
810
+ }, /* @__PURE__ */ React$1.createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React$1.createElement("div", {
811
+ ref: portal
812
+ }));
502
813
  }
503
814
 
504
815
  function useResourceEvents(resource, scope) {
@@ -616,25 +927,25 @@ function parseSelector(source) {
616
927
  };
617
928
  }
618
929
 
619
- var __defProp$6 = Object.defineProperty;
620
- var __defProps$4 = Object.defineProperties;
621
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
622
- var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
623
- var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
624
- var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
625
- var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
626
- var __spreadValues$6 = (a, b) => {
930
+ var __defProp$7 = Object.defineProperty;
931
+ var __defProps$5 = Object.defineProperties;
932
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
933
+ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
934
+ var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
935
+ var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
936
+ var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
937
+ var __spreadValues$7 = (a, b) => {
627
938
  for (var prop in b || (b = {}))
628
- if (__hasOwnProp$6.call(b, prop))
629
- __defNormalProp$6(a, prop, b[prop]);
630
- if (__getOwnPropSymbols$6)
631
- for (var prop of __getOwnPropSymbols$6(b)) {
632
- if (__propIsEnum$6.call(b, prop))
633
- __defNormalProp$6(a, prop, b[prop]);
939
+ if (__hasOwnProp$7.call(b, prop))
940
+ __defNormalProp$7(a, prop, b[prop]);
941
+ if (__getOwnPropSymbols$7)
942
+ for (var prop of __getOwnPropSymbols$7(b)) {
943
+ if (__propIsEnum$7.call(b, prop))
944
+ __defNormalProp$7(a, prop, b[prop]);
634
945
  }
635
946
  return a;
636
947
  };
637
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
948
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
638
949
  function expandTarget(target, options = {}) {
639
950
  if (Array.isArray(target)) {
640
951
  return expandTarget(target[0]);
@@ -691,7 +1002,7 @@ function expandTarget(target, options = {}) {
691
1002
  if (!fragment) {
692
1003
  return {
693
1004
  type: "SpecificResource",
694
- source: __spreadProps$4(__spreadValues$6({}, target), {
1005
+ source: __spreadProps$5(__spreadValues$7({}, target), {
695
1006
  id
696
1007
  }),
697
1008
  selector: null,
@@ -700,7 +1011,7 @@ function expandTarget(target, options = {}) {
700
1011
  }
701
1012
  return expandTarget({
702
1013
  type: "SpecificResource",
703
- source: __spreadProps$4(__spreadValues$6({}, target), {
1014
+ source: __spreadProps$5(__spreadValues$7({}, target), {
704
1015
  id
705
1016
  }),
706
1017
  selector: {
@@ -717,25 +1028,25 @@ function expandTarget(target, options = {}) {
717
1028
  };
718
1029
  }
719
1030
 
720
- var __defProp$5 = Object.defineProperty;
721
- var __defProps$3 = Object.defineProperties;
722
- var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
723
- var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
724
- var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
725
- var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
726
- var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
727
- var __spreadValues$5 = (a, b) => {
1031
+ var __defProp$6 = Object.defineProperty;
1032
+ var __defProps$4 = Object.defineProperties;
1033
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
1034
+ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
1035
+ var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
1036
+ var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
1037
+ var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1038
+ var __spreadValues$6 = (a, b) => {
728
1039
  for (var prop in b || (b = {}))
729
- if (__hasOwnProp$5.call(b, prop))
730
- __defNormalProp$5(a, prop, b[prop]);
731
- if (__getOwnPropSymbols$5)
732
- for (var prop of __getOwnPropSymbols$5(b)) {
733
- if (__propIsEnum$5.call(b, prop))
734
- __defNormalProp$5(a, prop, b[prop]);
1040
+ if (__hasOwnProp$6.call(b, prop))
1041
+ __defNormalProp$6(a, prop, b[prop]);
1042
+ if (__getOwnPropSymbols$6)
1043
+ for (var prop of __getOwnPropSymbols$6(b)) {
1044
+ if (__propIsEnum$6.call(b, prop))
1045
+ __defNormalProp$6(a, prop, b[prop]);
735
1046
  }
736
1047
  return a;
737
1048
  };
738
- var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
1049
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
739
1050
  function useAnnotation(options = {}, deps = []) {
740
1051
  const { id, selector } = options;
741
1052
  const ctx = useResourceContext();
@@ -747,7 +1058,7 @@ function useAnnotation(options = {}, deps = []) {
747
1058
  if (!annotation) {
748
1059
  return void 0;
749
1060
  }
750
- const newAnnotation = __spreadProps$3(__spreadValues$5({}, annotation), {
1061
+ const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
751
1062
  body,
752
1063
  target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
753
1064
  });
@@ -774,19 +1085,19 @@ function useCanvas(options = {}, deps = []) {
774
1085
  }, [canvas, selector, ...deps]);
775
1086
  }
776
1087
 
777
- var __defProp$4 = Object.defineProperty;
778
- var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
779
- var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
780
- var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
781
- var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
782
- var __spreadValues$4 = (a, b) => {
1088
+ var __defProp$5 = Object.defineProperty;
1089
+ var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
1090
+ var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
1091
+ var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
1092
+ var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1093
+ var __spreadValues$5 = (a, b) => {
783
1094
  for (var prop in b || (b = {}))
784
- if (__hasOwnProp$4.call(b, prop))
785
- __defNormalProp$4(a, prop, b[prop]);
786
- if (__getOwnPropSymbols$4)
787
- for (var prop of __getOwnPropSymbols$4(b)) {
788
- if (__propIsEnum$4.call(b, prop))
789
- __defNormalProp$4(a, prop, b[prop]);
1095
+ if (__hasOwnProp$5.call(b, prop))
1096
+ __defNormalProp$5(a, prop, b[prop]);
1097
+ if (__getOwnPropSymbols$5)
1098
+ for (var prop of __getOwnPropSymbols$5(b)) {
1099
+ if (__propIsEnum$5.call(b, prop))
1100
+ __defNormalProp$5(a, prop, b[prop]);
790
1101
  }
791
1102
  return a;
792
1103
  };
@@ -808,7 +1119,7 @@ const RenderAnnotation = ({
808
1119
  if (!isValid) {
809
1120
  return null;
810
1121
  }
811
- return /* @__PURE__ */ React.createElement(RegionHighlight, __spreadValues$4({
1122
+ return /* @__PURE__ */ React$1.createElement(RegionHighlight, __spreadValues$5({
812
1123
  id: annotation.id,
813
1124
  isEditing: true,
814
1125
  region: annotation.target.selector.spatial,
@@ -829,8 +1140,8 @@ const RenderAnnotationPage = ({
829
1140
  const style = useStyles(page, "atlas");
830
1141
  const html = useStyles(page, "html");
831
1142
  useVaultSelector((state) => page.id ? state.iiif.entities.AnnotationPage[page.id] : null, []);
832
- return /* @__PURE__ */ React.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
833
- return /* @__PURE__ */ React.createElement(RenderAnnotation, {
1143
+ return /* @__PURE__ */ React$1.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
1144
+ return /* @__PURE__ */ React$1.createElement(RenderAnnotation, {
834
1145
  key: annotation.id,
835
1146
  id: annotation.id,
836
1147
  style,
@@ -847,23 +1158,24 @@ function RenderImage({
847
1158
  isStatic,
848
1159
  x = 0,
849
1160
  y = 0,
850
- annotations
1161
+ annotations,
1162
+ children
851
1163
  }) {
852
1164
  var _a, _b, _c, _d;
853
- return /* @__PURE__ */ React.createElement(Fragment, {
1165
+ return /* @__PURE__ */ React$1.createElement(Fragment, {
854
1166
  key: id
855
- }, !image.service ? /* @__PURE__ */ React.createElement(Fragment, {
1167
+ }, !image.service ? /* @__PURE__ */ React$1.createElement(Fragment, {
856
1168
  key: "no-service"
857
- }, /* @__PURE__ */ React.createElement("world-image", {
1169
+ }, /* @__PURE__ */ React$1.createElement("world-image", {
858
1170
  uri: image.id,
859
1171
  target: image.target.spatial,
860
1172
  display: image.width && image.height ? {
861
1173
  width: image.width,
862
1174
  height: image.height
863
1175
  } : void 0
864
- }), annotations) : /* @__PURE__ */ React.createElement(Fragment, {
1176
+ }), annotations, children) : /* @__PURE__ */ React$1.createElement(Fragment, {
865
1177
  key: "service"
866
- }, /* @__PURE__ */ React.createElement(TileSet, {
1178
+ }, /* @__PURE__ */ React$1.createElement(TileSet, {
867
1179
  viewport: isStatic,
868
1180
  tiles: {
869
1181
  id: image.service.id || image.service["@id"],
@@ -876,7 +1188,7 @@ function RenderImage({
876
1188
  y: ((_b = image.target) == null ? void 0 : _b.spatial.y) + y,
877
1189
  width: (_c = image.target) == null ? void 0 : _c.spatial.width,
878
1190
  height: (_d = image.target) == null ? void 0 : _d.spatial.height
879
- }), annotations));
1191
+ }), annotations, children));
880
1192
  }
881
1193
 
882
1194
  function parseSpecificResource(resource) {
@@ -1016,25 +1328,25 @@ function flattenAnnotationPageIds({
1016
1328
  return foundIds;
1017
1329
  }
1018
1330
 
1019
- var __defProp$3 = Object.defineProperty;
1020
- var __defProps$2 = Object.defineProperties;
1021
- var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
1022
- var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
1023
- var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
1024
- var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
1025
- var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1026
- var __spreadValues$3 = (a, b) => {
1331
+ var __defProp$4 = Object.defineProperty;
1332
+ var __defProps$3 = Object.defineProperties;
1333
+ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
1334
+ var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
1335
+ var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
1336
+ var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
1337
+ var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1338
+ var __spreadValues$4 = (a, b) => {
1027
1339
  for (var prop in b || (b = {}))
1028
- if (__hasOwnProp$3.call(b, prop))
1029
- __defNormalProp$3(a, prop, b[prop]);
1030
- if (__getOwnPropSymbols$3)
1031
- for (var prop of __getOwnPropSymbols$3(b)) {
1032
- if (__propIsEnum$3.call(b, prop))
1033
- __defNormalProp$3(a, prop, b[prop]);
1340
+ if (__hasOwnProp$4.call(b, prop))
1341
+ __defNormalProp$4(a, prop, b[prop]);
1342
+ if (__getOwnPropSymbols$4)
1343
+ for (var prop of __getOwnPropSymbols$4(b)) {
1344
+ if (__propIsEnum$4.call(b, prop))
1345
+ __defNormalProp$4(a, prop, b[prop]);
1034
1346
  }
1035
1347
  return a;
1036
1348
  };
1037
- var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
1349
+ var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
1038
1350
  function getMeta(state, resourceId) {
1039
1351
  var _a;
1040
1352
  const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
@@ -1065,7 +1377,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
1065
1377
  if (existingResources && !existingResources[resourceId]) {
1066
1378
  return existingResources;
1067
1379
  }
1068
- return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
1380
+ return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
1069
1381
  [resourceId]: false
1070
1382
  });
1071
1383
  });
@@ -1092,7 +1404,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
1092
1404
  if (existingResources && existingResources[resourceId]) {
1093
1405
  return existingResources;
1094
1406
  }
1095
- return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
1407
+ return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
1096
1408
  [resourceId]: true
1097
1409
  });
1098
1410
  });
@@ -1109,30 +1421,30 @@ function useResources(ids, type) {
1109
1421
  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
1110
1422
  }
1111
1423
 
1112
- const ImageServiceLoaderContext = React.createContext(new ImageServiceLoader());
1424
+ const ImageServiceLoaderContext = React$1.createContext(new ImageServiceLoader());
1113
1425
  function useImageServiceLoader() {
1114
1426
  return useContext(ImageServiceLoaderContext);
1115
1427
  }
1116
1428
 
1117
- var __defProp$2 = Object.defineProperty;
1118
- var __defProps$1 = Object.defineProperties;
1119
- var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
1120
- var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
1121
- var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
1122
- var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
1123
- var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1124
- var __spreadValues$2 = (a, b) => {
1429
+ var __defProp$3 = Object.defineProperty;
1430
+ var __defProps$2 = Object.defineProperties;
1431
+ var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
1432
+ var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
1433
+ var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
1434
+ var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
1435
+ var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1436
+ var __spreadValues$3 = (a, b) => {
1125
1437
  for (var prop in b || (b = {}))
1126
- if (__hasOwnProp$2.call(b, prop))
1127
- __defNormalProp$2(a, prop, b[prop]);
1128
- if (__getOwnPropSymbols$2)
1129
- for (var prop of __getOwnPropSymbols$2(b)) {
1130
- if (__propIsEnum$2.call(b, prop))
1131
- __defNormalProp$2(a, prop, b[prop]);
1438
+ if (__hasOwnProp$3.call(b, prop))
1439
+ __defNormalProp$3(a, prop, b[prop]);
1440
+ if (__getOwnPropSymbols$3)
1441
+ for (var prop of __getOwnPropSymbols$3(b)) {
1442
+ if (__propIsEnum$3.call(b, prop))
1443
+ __defNormalProp$3(a, prop, b[prop]);
1132
1444
  }
1133
1445
  return a;
1134
1446
  };
1135
- var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
1447
+ var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
1136
1448
  function useLoadImageService() {
1137
1449
  const loader = useImageServiceLoader();
1138
1450
  const [imageServiceStatus, setImageServiceStatus] = useState({});
@@ -1148,14 +1460,15 @@ function useLoadImageService() {
1148
1460
  const syncLoaded = loader.loadServiceSync({
1149
1461
  id: imageServiceId,
1150
1462
  width: imageService.width || width,
1151
- height: imageService.height || height
1463
+ height: imageService.height || height,
1464
+ source: imageService
1152
1465
  });
1153
1466
  if (syncLoaded) {
1154
1467
  imageService = syncLoaded;
1155
1468
  } else if (!imageServiceStatus[imageServiceId]) {
1156
1469
  if (!didUnmount.current) {
1157
1470
  setImageServiceStatus((r) => {
1158
- return __spreadProps$1(__spreadValues$2({}, r), {
1471
+ return __spreadProps$2(__spreadValues$3({}, r), {
1159
1472
  [imageServiceId]: "loading"
1160
1473
  });
1161
1474
  });
@@ -1167,7 +1480,7 @@ function useLoadImageService() {
1167
1480
  }).then(() => {
1168
1481
  if (!didUnmount.current) {
1169
1482
  setImageServiceStatus((r) => {
1170
- return __spreadProps$1(__spreadValues$2({}, r), {
1483
+ return __spreadProps$2(__spreadValues$3({}, r), {
1171
1484
  [imageServiceId]: "done"
1172
1485
  });
1173
1486
  });
@@ -1316,37 +1629,126 @@ function getImageStrategy(canvas, paintables, loadImageService) {
1316
1629
  const supportedFormats = ["model/gltf-binary"];
1317
1630
  function get3dStrategy(canvas, paintables) {
1318
1631
  const first = paintables.items[0];
1319
- if (!first.format) {
1632
+ const resource = first.resource;
1633
+ if (!resource.format) {
1320
1634
  return unsupportedStrategy("Unknown format");
1321
1635
  }
1322
- if (supportedFormats.indexOf(first.format) === -1) {
1323
- return unsupportedStrategy(`3D format: ${first.format} is unsupported`);
1636
+ if (supportedFormats.indexOf(resource.format) === -1) {
1637
+ return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
1324
1638
  }
1325
1639
  return {
1326
1640
  type: "3d-model",
1327
- model: first
1641
+ model: resource
1328
1642
  };
1329
1643
  }
1330
1644
 
1331
- var __defProp$1 = Object.defineProperty;
1332
- var __defProps = Object.defineProperties;
1333
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
1334
- var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
1335
- var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
1336
- var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
1337
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1338
- var __spreadValues$1 = (a, b) => {
1645
+ function getAudioStrategy(canvas, paintables) {
1646
+ var _a;
1647
+ if (!canvas.duration) {
1648
+ return unsupportedStrategy("No duration on canvas");
1649
+ }
1650
+ if (paintables.items.length > 1) {
1651
+ return unsupportedStrategy("Only one audio source supported");
1652
+ }
1653
+ const audioResource = (_a = paintables.items[0]) == null ? void 0 : _a.resource;
1654
+ if (!audioResource) {
1655
+ return unsupportedStrategy("Unknown audio");
1656
+ }
1657
+ if (!audioResource.format) {
1658
+ return unsupportedStrategy("Audio does not have format");
1659
+ }
1660
+ return {
1661
+ type: "media",
1662
+ media: {
1663
+ duration: canvas.duration,
1664
+ url: audioResource.id,
1665
+ type: "Sound",
1666
+ target: {
1667
+ type: "TemporalSelector",
1668
+ temporal: {
1669
+ startTime: 0,
1670
+ endTime: canvas.duration
1671
+ }
1672
+ },
1673
+ format: audioResource.format,
1674
+ selector: {
1675
+ type: "TemporalSelector",
1676
+ temporal: {
1677
+ startTime: 0,
1678
+ endTime: canvas.duration
1679
+ }
1680
+ }
1681
+ },
1682
+ annotations: {
1683
+ pages: []
1684
+ }
1685
+ };
1686
+ }
1687
+
1688
+ function getVideoStrategy(canvas, paintables) {
1689
+ var _a;
1690
+ const videoPaintables = paintables.items.filter((t) => t.type === "video");
1691
+ if (!canvas.duration) {
1692
+ return unsupportedStrategy("No duration on canvas");
1693
+ }
1694
+ if (videoPaintables.length > 1) {
1695
+ return unsupportedStrategy("Only one video source supported");
1696
+ }
1697
+ const audioResource = (_a = videoPaintables[0]) == null ? void 0 : _a.resource;
1698
+ if (!audioResource) {
1699
+ return unsupportedStrategy("Unknown video");
1700
+ }
1701
+ if (!audioResource.format) {
1702
+ return unsupportedStrategy("Video does not have format");
1703
+ }
1704
+ return {
1705
+ type: "media",
1706
+ media: {
1707
+ duration: canvas.duration,
1708
+ url: audioResource.id,
1709
+ type: "Video",
1710
+ items: [],
1711
+ target: {
1712
+ type: "TemporalSelector",
1713
+ temporal: {
1714
+ startTime: 0,
1715
+ endTime: canvas.duration
1716
+ }
1717
+ },
1718
+ format: audioResource.format,
1719
+ selector: {
1720
+ type: "TemporalSelector",
1721
+ temporal: {
1722
+ startTime: 0,
1723
+ endTime: canvas.duration
1724
+ }
1725
+ }
1726
+ },
1727
+ annotations: {
1728
+ pages: []
1729
+ }
1730
+ };
1731
+ }
1732
+
1733
+ var __defProp$2 = Object.defineProperty;
1734
+ var __defProps$1 = Object.defineProperties;
1735
+ var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
1736
+ var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
1737
+ var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
1738
+ var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
1739
+ var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1740
+ var __spreadValues$2 = (a, b) => {
1339
1741
  for (var prop in b || (b = {}))
1340
- if (__hasOwnProp$1.call(b, prop))
1341
- __defNormalProp$1(a, prop, b[prop]);
1342
- if (__getOwnPropSymbols$1)
1343
- for (var prop of __getOwnPropSymbols$1(b)) {
1344
- if (__propIsEnum$1.call(b, prop))
1345
- __defNormalProp$1(a, prop, b[prop]);
1742
+ if (__hasOwnProp$2.call(b, prop))
1743
+ __defNormalProp$2(a, prop, b[prop]);
1744
+ if (__getOwnPropSymbols$2)
1745
+ for (var prop of __getOwnPropSymbols$2(b)) {
1746
+ if (__propIsEnum$2.call(b, prop))
1747
+ __defNormalProp$2(a, prop, b[prop]);
1346
1748
  }
1347
1749
  return a;
1348
1750
  };
1349
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
1751
+ var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
1350
1752
  function useRenderingStrategy(options) {
1351
1753
  const manifest = useManifest();
1352
1754
  const canvas = useCanvas();
@@ -1363,10 +1765,14 @@ function useRenderingStrategy(options) {
1363
1765
  return unknownResponse;
1364
1766
  }
1365
1767
  if (paintables.types.length !== 1) {
1366
- if (supports.indexOf("complex-timeline") === -1) {
1367
- return unsupportedStrategy("Complex timeline not supported");
1768
+ if (paintables.types.length === 2 && paintables.types.indexOf("text") !== -1) {
1769
+ paintables.types = paintables.types.filter((t) => t !== "text");
1770
+ } else {
1771
+ if (supports.indexOf("complex-timeline") === -1) {
1772
+ return unsupportedStrategy("Complex timeline not supported");
1773
+ }
1774
+ return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
1368
1775
  }
1369
- return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
1370
1776
  }
1371
1777
  const mainType = paintables.types[0];
1372
1778
  if (mainType === "image") {
@@ -1375,23 +1781,23 @@ function useRenderingStrategy(options) {
1375
1781
  }
1376
1782
  return getImageStrategy(canvas, paintables, loadImageService);
1377
1783
  }
1378
- if (mainType === "Model") {
1784
+ if (mainType === "Model" || mainType === "model") {
1379
1785
  if (supports.indexOf("3d-model") === -1) {
1380
1786
  return unsupportedStrategy("3D not supported");
1381
1787
  }
1382
1788
  return get3dStrategy(canvas, paintables);
1383
1789
  }
1384
- if (mainType === "audio") {
1790
+ if (mainType === "sound" || mainType === "audio") {
1385
1791
  if (supports.indexOf("media") === -1) {
1386
1792
  return unsupportedStrategy("Media not supported");
1387
1793
  }
1388
- return unsupportedStrategy("Audio strategy not yet supported");
1794
+ return getAudioStrategy(canvas, paintables);
1389
1795
  }
1390
1796
  if (mainType === "video") {
1391
1797
  if (supports.indexOf("media") === -1) {
1392
1798
  return unsupportedStrategy("Media not supported");
1393
1799
  }
1394
- return unsupportedStrategy("Video strategy not yet supported");
1800
+ return getVideoStrategy(canvas, paintables);
1395
1801
  }
1396
1802
  return unknownResponse;
1397
1803
  }, [canvas, paintables, vault, actions.makeChoice]);
@@ -1400,7 +1806,7 @@ function useRenderingStrategy(options) {
1400
1806
  return [strategy, emptyActions];
1401
1807
  }
1402
1808
  return [
1403
- __spreadProps(__spreadValues$1({}, strategy), {
1809
+ __spreadProps$1(__spreadValues$2({}, strategy), {
1404
1810
  annotations: { pages: enabledPages }
1405
1811
  }),
1406
1812
  actions
@@ -1442,6 +1848,283 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
1442
1848
  return thumbnail;
1443
1849
  }
1444
1850
 
1851
+ var __defProp$1 = Object.defineProperty;
1852
+ var __defProps = Object.defineProperties;
1853
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
1854
+ var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
1855
+ var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
1856
+ var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
1857
+ var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1858
+ var __spreadValues$1 = (a, b) => {
1859
+ for (var prop in b || (b = {}))
1860
+ if (__hasOwnProp$1.call(b, prop))
1861
+ __defNormalProp$1(a, prop, b[prop]);
1862
+ if (__getOwnPropSymbols$1)
1863
+ for (var prop of __getOwnPropSymbols$1(b)) {
1864
+ if (__propIsEnum$1.call(b, prop))
1865
+ __defNormalProp$1(a, prop, b[prop]);
1866
+ }
1867
+ return a;
1868
+ };
1869
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
1870
+ function getDefaultState(duration) {
1871
+ return { isMuted: false, playRequested: false, isPlaying: false, isFinished: false, volume: 100, duration };
1872
+ }
1873
+ function reducer(state, action) {
1874
+ switch (action.type) {
1875
+ case "FINISHED":
1876
+ return __spreadProps(__spreadValues$1({}, state), { isFinished: true, isPlaying: false, playRequested: false });
1877
+ case "PLAY_PAUSE":
1878
+ return __spreadProps(__spreadValues$1({}, state), { isFinished: false, isPlaying: !state.isPlaying });
1879
+ case "PLAY_REQUESTED":
1880
+ return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: true });
1881
+ case "PAUSE":
1882
+ return __spreadProps(__spreadValues$1({}, state), { isPlaying: false });
1883
+ case "PLAY":
1884
+ return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: false, isPlaying: true });
1885
+ case "MUTE":
1886
+ return __spreadProps(__spreadValues$1({}, state), { isMuted: true });
1887
+ case "SET_VOLUME":
1888
+ return __spreadProps(__spreadValues$1({}, state), { volume: action.volume, isMuted: action.volume === 0 });
1889
+ case "TOGGLE_MUTE":
1890
+ return __spreadProps(__spreadValues$1({}, state), { isMuted: !state.isMuted });
1891
+ case "UNMUTE":
1892
+ return __spreadProps(__spreadValues$1({}, state), { isMuted: false });
1893
+ }
1894
+ return state;
1895
+ }
1896
+ function formatTime(time) {
1897
+ const seconds = Math.round(time);
1898
+ return `${Math.floor(seconds / 60)}:${`${seconds % 60}`.padStart(2, "0")}`;
1899
+ }
1900
+ function useSimpleMediaPlayer(props) {
1901
+ const [state, dispatch] = useReducer(reducer, getDefaultState(props.duration));
1902
+ const media = useRef(null);
1903
+ const currentTime = useRef(null);
1904
+ const progress = useRef(null);
1905
+ const _isMuted = useRef(false);
1906
+ const _updateCurrentTime = useCallback(() => {
1907
+ if (currentTime.current && media.current) {
1908
+ currentTime.current.innerHTML = formatTime(media.current.currentTime);
1909
+ if (progress.current) {
1910
+ progress.current.style.width = `${media.current.currentTime / props.duration * 100}%`;
1911
+ }
1912
+ if (_isMuted.current !== media.current.muted) {
1913
+ _isMuted.current = media.current.muted;
1914
+ dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
1915
+ }
1916
+ }
1917
+ }, [props.duration]);
1918
+ const play = useCallback(() => {
1919
+ if (media.current) {
1920
+ dispatch({ type: "PLAY_REQUESTED" });
1921
+ media.current.play().then(() => {
1922
+ dispatch({ type: "PLAY" });
1923
+ });
1924
+ _updateCurrentTime();
1925
+ }
1926
+ }, [_updateCurrentTime]);
1927
+ const playPause = useCallback(() => {
1928
+ if (media.current) {
1929
+ if (media.current.duration > 0 && media.current.paused) {
1930
+ play();
1931
+ } else {
1932
+ pause();
1933
+ }
1934
+ }
1935
+ }, [_updateCurrentTime]);
1936
+ const pause = useCallback(() => {
1937
+ if (media.current) {
1938
+ media.current.pause();
1939
+ dispatch({ type: "PAUSE" });
1940
+ _updateCurrentTime();
1941
+ }
1942
+ }, [_updateCurrentTime]);
1943
+ const toggleMute = useCallback(() => {
1944
+ if (media.current) {
1945
+ media.current.muted = !media.current.muted;
1946
+ dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
1947
+ }
1948
+ }, []);
1949
+ const mute = useCallback(() => {
1950
+ if (media.current) {
1951
+ media.current.muted = true;
1952
+ dispatch({ type: "MUTE" });
1953
+ }
1954
+ }, []);
1955
+ const unmute = useCallback(() => {
1956
+ if (media.current) {
1957
+ media.current.muted = false;
1958
+ dispatch({ type: "UNMUTE" });
1959
+ }
1960
+ }, []);
1961
+ const setVolume = useCallback((newVolume) => {
1962
+ if (media.current) {
1963
+ media.current.muted = false;
1964
+ media.current.volume = newVolume / 100;
1965
+ dispatch({ type: "SET_VOLUME", volume: newVolume });
1966
+ }
1967
+ }, []);
1968
+ const setDurationPercent = useCallback((percent) => {
1969
+ if (media.current) {
1970
+ media.current.currentTime = Math.max(0, Math.min(percent * props.duration, props.duration));
1971
+ _updateCurrentTime();
1972
+ }
1973
+ }, []);
1974
+ const setTime = useCallback((time) => {
1975
+ if (media.current) {
1976
+ media.current.currentTime = Math.max(0, Math.min(time, props.duration));
1977
+ _updateCurrentTime();
1978
+ }
1979
+ }, []);
1980
+ useEffect(() => {
1981
+ const interval = setInterval(() => {
1982
+ _updateCurrentTime();
1983
+ }, 350);
1984
+ return () => clearInterval(interval);
1985
+ }, [_updateCurrentTime, props.duration]);
1986
+ useEffect(() => {
1987
+ const ended = () => {
1988
+ dispatch({ type: "FINISHED" });
1989
+ };
1990
+ const _media = media.current;
1991
+ _media == null ? void 0 : _media.addEventListener("ended", ended);
1992
+ return () => _media == null ? void 0 : _media.removeEventListener("ended", ended);
1993
+ }, []);
1994
+ return [
1995
+ { element: media, currentTime, progress },
1996
+ state,
1997
+ {
1998
+ play,
1999
+ pause,
2000
+ playPause,
2001
+ mute,
2002
+ unmute,
2003
+ toggleMute,
2004
+ setVolume,
2005
+ setDurationPercent,
2006
+ setTime
2007
+ }
2008
+ ];
2009
+ }
2010
+
2011
+ const MediaReactContextState = createContext(null);
2012
+ const MediaReactContextActions = createContext(null);
2013
+ const MediaReactContextElements = createContext(null);
2014
+ function useMediaState() {
2015
+ const ctx = useContext(MediaReactContextState);
2016
+ if (!ctx) {
2017
+ throw new Error("Ctx not found");
2018
+ }
2019
+ return ctx;
2020
+ }
2021
+ function useMediaActions() {
2022
+ const ctx = useContext(MediaReactContextActions);
2023
+ if (!ctx) {
2024
+ throw new Error("Ctx not found");
2025
+ }
2026
+ return ctx;
2027
+ }
2028
+ function useMediaElements() {
2029
+ const ctx = useContext(MediaReactContextElements);
2030
+ if (!ctx) {
2031
+ throw new Error("Ctx not found");
2032
+ }
2033
+ return ctx;
2034
+ }
2035
+ function MediaPlayerProvider({
2036
+ actions,
2037
+ state,
2038
+ children,
2039
+ currentTime,
2040
+ progress,
2041
+ element
2042
+ }) {
2043
+ return /* @__PURE__ */ React.createElement(MediaReactContextElements.Provider, {
2044
+ value: { currentTime, progress, element }
2045
+ }, /* @__PURE__ */ React.createElement(MediaReactContextActions.Provider, {
2046
+ value: actions
2047
+ }, /* @__PURE__ */ React.createElement(MediaReactContextState.Provider, {
2048
+ value: state
2049
+ }, children)));
2050
+ }
2051
+
2052
+ function Audio({ media, children }) {
2053
+ const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
2054
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
2055
+ state,
2056
+ actions,
2057
+ currentTime,
2058
+ progress,
2059
+ element
2060
+ }, /* @__PURE__ */ React.createElement("audio", {
2061
+ ref: element,
2062
+ src: media.url
2063
+ }), children)));
2064
+ }
2065
+
2066
+ function Video({ media, children }) {
2067
+ const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
2068
+ const Component = "div";
2069
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, {
2070
+ overlay: true
2071
+ }, /* @__PURE__ */ React.createElement("style", null, `
2072
+ .video-container {
2073
+ position: absolute;
2074
+ top: 0;
2075
+ bottom: 0;
2076
+ left: 0;
2077
+ right: 0;
2078
+ background: #000;
2079
+ z-index: 13;
2080
+ display: flex;
2081
+ justify-content: center;
2082
+ pointer-events: visible;
2083
+ }
2084
+ `), /* @__PURE__ */ React.createElement(Component, {
2085
+ className: "video-container",
2086
+ part: "video-container",
2087
+ onClick: () => actions.playPause()
2088
+ }, /* @__PURE__ */ React.createElement("video", {
2089
+ ref: element,
2090
+ src: media.url,
2091
+ style: { width: "100%", objectFit: "contain" }
2092
+ }))), /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
2093
+ state,
2094
+ actions,
2095
+ currentTime,
2096
+ progress,
2097
+ element
2098
+ }, children)));
2099
+ }
2100
+
2101
+ function Model({ model }) {
2102
+ return /* @__PURE__ */ React.createElement(CanvasPortal, {
2103
+ overlay: true
2104
+ }, /* @__PURE__ */ React.createElement("style", null, `
2105
+ .model-container {
2106
+ position: absolute;
2107
+ top: 0;
2108
+ bottom: 0;
2109
+ left: 0;
2110
+ right: 0;
2111
+ background: #000;
2112
+ z-index: 13;
2113
+ display: flex;
2114
+ justify-content: center;
2115
+ pointer-events: visible;
2116
+ }
2117
+ `), /* @__PURE__ */ React.createElement("div", {
2118
+ className: "model-container"
2119
+ }, /* @__PURE__ */ React.createElement("model-viewer", {
2120
+ "interaction-prompt": "none",
2121
+ style: { width: "100%", height: "100%" },
2122
+ "camera-controls": "",
2123
+ "ar-status": "not-presenting",
2124
+ src: model.id
2125
+ })));
2126
+ }
2127
+
1445
2128
  var __defProp = Object.defineProperty;
1446
2129
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
1447
2130
  var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -1458,14 +2141,25 @@ var __spreadValues = (a, b) => {
1458
2141
  }
1459
2142
  return a;
1460
2143
  };
1461
- function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, isStatic }) {
2144
+ function RenderCanvas({
2145
+ x,
2146
+ y,
2147
+ onChoiceChange,
2148
+ registerActions,
2149
+ defaultChoices,
2150
+ isStatic,
2151
+ renderViewerControls,
2152
+ renderMediaControls,
2153
+ strategies,
2154
+ children
2155
+ }) {
1462
2156
  const canvas = useCanvas();
1463
2157
  const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
1464
2158
  const [virtualPage] = useVirtualAnnotationPageContext();
1465
2159
  const vault = useVault();
1466
2160
  const helper = useMemo(() => createStylesHelper(vault), [vault]);
1467
2161
  const [strategy, actions] = useRenderingStrategy({
1468
- strategies: ["images"],
2162
+ strategies: strategies || ["images"],
1469
2163
  defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
1470
2164
  });
1471
2165
  const choice = strategy.type === "images" ? strategy.choice : void 0;
@@ -1494,40 +2188,42 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
1494
2188
  if (!canvas) {
1495
2189
  return null;
1496
2190
  }
2191
+ const accompanyingCanvas = canvas.accompanyingCanvas;
2192
+ const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ React$1.createElement("world-object", {
2193
+ height: canvas.height,
2194
+ width: canvas.width,
2195
+ x,
2196
+ y
2197
+ }, /* @__PURE__ */ React$1.createElement("world-image", {
2198
+ uri: thumbnail.id,
2199
+ target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
2200
+ display: thumbnail.width && thumbnail.height ? {
2201
+ width: thumbnail.width,
2202
+ height: thumbnail.height
2203
+ } : void 0
2204
+ })) : null;
1497
2205
  if (strategy.type === "unknown") {
1498
- if (thumbnail && thumbnail.type === "fixed") {
1499
- return /* @__PURE__ */ React.createElement("world-object", {
1500
- height: canvas.height,
1501
- width: canvas.width,
1502
- x,
1503
- y
1504
- }, /* @__PURE__ */ React.createElement("world-image", {
1505
- uri: thumbnail.id,
1506
- target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
1507
- display: thumbnail.width && thumbnail.height ? {
1508
- width: thumbnail.width,
1509
- height: thumbnail.height
1510
- } : void 0
1511
- }));
1512
- }
1513
- throw new Error("Unknown image strategy");
2206
+ if (thumbnailFallbackImage) {
2207
+ return thumbnailFallbackImage;
2208
+ }
2209
+ throw new Error(strategy.reason || "Unknown image strategy");
1514
2210
  }
1515
- const annotations = /* @__PURE__ */ React.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
2211
+ const annotations = /* @__PURE__ */ React$1.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
1516
2212
  page: virtualPage
1517
2213
  }) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
1518
- return /* @__PURE__ */ React.createElement(RenderAnnotationPage, {
2214
+ return /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
1519
2215
  key: page.id,
1520
2216
  page
1521
2217
  });
1522
- }) : null);
1523
- return /* @__PURE__ */ React.createElement("world-object", __spreadValues({
2218
+ }) : null, children);
2219
+ return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("world-object", __spreadValues({
1524
2220
  key: strategy.type,
1525
2221
  height: canvas.height,
1526
2222
  width: canvas.width,
1527
2223
  x,
1528
2224
  y
1529
- }, elementProps), strategy.type === "images" ? strategy.images.map((image, idx) => {
1530
- return /* @__PURE__ */ React.createElement(RenderImage, {
2225
+ }, elementProps), strategy.type === "images" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.images.map((image, idx) => {
2226
+ return /* @__PURE__ */ React$1.createElement(RenderImage, {
1531
2227
  isStatic,
1532
2228
  key: image.id,
1533
2229
  image,
@@ -1535,7 +2231,17 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
1535
2231
  thumbnail: idx === 0 ? thumbnail : void 0,
1536
2232
  annotations
1537
2233
  });
1538
- }) : null);
2234
+ }), renderViewerControls ? /* @__PURE__ */ React$1.createElement(CanvasPortal, {
2235
+ overlay: true
2236
+ }, renderViewerControls(strategy)) : null) : null, strategy.type === "3d-model" ? /* @__PURE__ */ React$1.createElement(Model, {
2237
+ model: strategy.model
2238
+ }) : null, strategy.type === "media" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.media.type === "Sound" ? /* @__PURE__ */ React$1.createElement(Audio, {
2239
+ media: strategy.media
2240
+ }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : strategy.media.type === "Video" ? /* @__PURE__ */ React$1.createElement(Video, {
2241
+ media: strategy.media
2242
+ }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : null) : null), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ React$1.createElement(CanvasContext, {
2243
+ canvas: accompanyingCanvas.id
2244
+ }, /* @__PURE__ */ React$1.createElement(RenderCanvas, null)) : null);
1539
2245
  }
1540
2246
 
1541
2247
  const CanvasPanel = {
@@ -1546,23 +2252,23 @@ const CanvasPanel = {
1546
2252
  Viewer
1547
2253
  };
1548
2254
 
1549
- const AnnotationContext = ({ annotation, children }) => {
1550
- return /* @__PURE__ */ React.createElement(ResourceProvider, {
2255
+ function AnnotationContext({ annotation, children }) {
2256
+ return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
1551
2257
  value: { annotation }
1552
2258
  }, children);
1553
- };
2259
+ }
1554
2260
 
1555
- const CollectionContext = ({ collection, children }) => {
1556
- return /* @__PURE__ */ React.createElement(ResourceProvider, {
2261
+ function CollectionContext({ collection, children }) {
2262
+ return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
1557
2263
  value: { collection }
1558
2264
  }, children);
1559
- };
2265
+ }
1560
2266
 
1561
- const RangeContext = ({ range, children }) => {
1562
- return /* @__PURE__ */ React.createElement(ResourceProvider, {
2267
+ function RangeContext({ range, children }) {
2268
+ return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
1563
2269
  value: { range }
1564
2270
  }, children);
1565
- };
2271
+ }
1566
2272
 
1567
2273
  function useAnnotationsAtTime(time, options = {}) {
1568
2274
  const allAnnotations = usePaintingAnnotations(options);
@@ -1749,4 +2455,4 @@ function useStyleHelper() {
1749
2455
  return useMemo(() => createStylesHelper(vault), [vault]);
1750
2456
  }
1751
2457
 
1752
- export { AnnotationContext, CanvasContext, CanvasPanel, CollectionContext, ContextBridge, ImageServiceLoaderContext, ManifestContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, expandTarget, flattenAnnotationPageIds, getImageStrategy, getPaintables, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
2458
+ export { AnnotationContext, CanvasContext, CanvasPanel, CanvasPortal, CollectionContext, ContextBridge, ImageServiceLoaderContext, ManifestContext, MediaPlayerProvider, OverlayPortalContext, PortalContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, ViewerPresetContext, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, expandTarget, flattenAnnotationPageIds, formatTime, getImageStrategy, getPaintables, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, useMediaActions, useMediaElements, useMediaState, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleMediaPlayer, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useViewerPreset, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };