@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.21

package/lib/cjs/appui-react/content/ContentLayout.scss

@@ -1,99 +1,99 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/base/base";
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
-
-$resizer-size: 6px;
-$resizer-size-large: 14px;
-
-#uifw-contentlayout-div {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  pointer-events: auto;
-
-  .Pane2 {
-    height: 100%;
-  }
-
-  .Resizer {
-    background: rgb(180, 180, 180);
-    box-sizing: border-box;
-    background-clip: padding-box;
-    margin: 0;
-
-    &:hover {
-      transition: all 2s ease;
-    }
-
-    &.horizontal {
-      height: $resizer-size;
-      min-height: $resizer-size;
-      cursor: ns-resize;
-      width: 100%;
-
-      @include for-tablet-landscape-down {
-        height: $resizer-size-large;
-        min-height: $resizer-size-large;
-      }
-    }
-
-    &.vertical {
-      width: $resizer-size;
-      min-width: $resizer-size;
-      cursor: ew-resize;
-
-      @include for-tablet-landscape-down {
-        width: $resizer-size-large;
-        min-width: $resizer-size-large;
-      }
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  .uifw-contentlayout-full-size {
-    @include uicore-full-size;
-  }
-}
-
-div.uifw-contentlayout-full-size div.SplitPane div.Pane {
-  overflow: hidden;
-}
-
-.uifw-contentlayout-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .uifw-contentlayout-overlay-div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-style: solid;
-    border-width: 4px 0 0 0;
-    box-sizing: border-box;
-    pointer-events: none;
-
-    &.uifw-contentlayout-overlay-active {
-      border-color: $uicore-orange;
-    }
-
-    &.uifw-contentlayout-overlay-inactive {
-      border-color: transparent;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+
+$resizer-size: 6px;
+$resizer-size-large: 14px;
+
+#uifw-contentlayout-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: auto;
+
+  .Pane2 {
+    height: 100%;
+  }
+
+  .Resizer {
+    background-color: var(--iui-color-border);
+    box-sizing: border-box;
+    background-clip: padding-box;
+    margin: 0;
+    transition: all var(--iui-duration-1) ease;
+
+    &:hover {
+      background-color: var(--iui-color-border-accent);
+    }
+
+    &.horizontal {
+      height: $resizer-size;
+      min-height: $resizer-size;
+      cursor: ns-resize;
+      width: 100%;
+
+      @include for-tablet-landscape-down {
+        height: $resizer-size-large;
+        min-height: $resizer-size-large;
+      }
+    }
+
+    &.vertical {
+      width: $resizer-size;
+      min-width: $resizer-size;
+      cursor: ew-resize;
+
+      @include for-tablet-landscape-down {
+        width: $resizer-size-large;
+        min-width: $resizer-size-large;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+  }
+
+  .uifw-contentlayout-full-size {
+    @include uicore-full-size;
+  }
+}
+
+div.uifw-contentlayout-full-size div.SplitPane div.Pane {
+  overflow: hidden;
+}
+
+.uifw-contentlayout-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .uifw-contentlayout-overlay-div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-style: solid;
+    border-width: 4px 0 0 0;
+    box-sizing: border-box;
+    pointer-events: none;
+
+    &.uifw-contentlayout-overlay-active {
+      border-color: var(--iui-color-border-warning);
+    }
+
+    &.uifw-contentlayout-overlay-inactive {
+      border-color: transparent;
+    }
+  }
+}

package/lib/cjs/appui-react/content/DefaultViewOverlay.js

@@ -22,7 +22,6 @@ const useAnalysisAnimationDataProvider_1 = require("../hooks/useAnalysisAnimatio
  */
 // istanbul ignore next
 function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }) {
-    var _a, _b, _c;
     const solarDataTimelineProvider = (0, useSolarDataProvider_1.useSolarDataProvider)(viewport);
     const analysisAnimationTimelineDataProvider = (0, useAnalysisAnimationDataProvider_1.useAnalysisAnimationDataProvider)(viewport);
     const scheduleTimelineDataProvider = (0, useScheduleAnimationDataProvider_1.useScheduleAnimationDataProvider)(viewport);
@@ -30,17 +29,17 @@ function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }) {
     if (!currentViewport)
         return null;
     // Solar gets first shot
-    if (solarDataTimelineProvider && !!((_a = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _a === void 0 ? void 0 : _a.enableSolarTimelineViewOverlay)) {
+    if (solarDataTimelineProvider && !!featureOptions?.defaultViewOverlay?.enableSolarTimelineViewOverlay) {
         return (React.createElement("div", { className: "uifw-view-overlay" },
             React.createElement("div", { className: "uifw-animation-overlay" },
                 React.createElement(imodel_components_react_1.SolarTimeline, { dataProvider: solarDataTimelineProvider }))));
     }
-    if (analysisAnimationTimelineDataProvider && !!((_b = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _b === void 0 ? void 0 : _b.enableAnalysisTimelineViewOverlay)) {
+    if (analysisAnimationTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableAnalysisTimelineViewOverlay) {
         return (React.createElement("div", { className: "uifw-view-overlay" },
             React.createElement("div", { className: "uifw-animation-overlay" },
                 React.createElement(imodel_components_react_1.TimelineComponent, { startDate: analysisAnimationTimelineDataProvider.start, endDate: analysisAnimationTimelineDataProvider.end, initialDuration: analysisAnimationTimelineDataProvider.initialDuration, totalDuration: analysisAnimationTimelineDataProvider.duration, minimized: true, onChange: analysisAnimationTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));
     }
-    if (scheduleTimelineDataProvider && !!((_c = featureOptions === null || featureOptions === void 0 ? void 0 : featureOptions.defaultViewOverlay) === null || _c === void 0 ? void 0 : _c.enableScheduleAnimationViewOverlay)) {
+    if (scheduleTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableScheduleAnimationViewOverlay) {
         return (React.createElement("div", { className: "uifw-view-overlay" },
             React.createElement("div", { className: "uifw-animation-overlay" },
                 React.createElement(imodel_components_react_1.TimelineComponent, { startDate: scheduleTimelineDataProvider.start, endDate: scheduleTimelineDataProvider.end, initialDuration: scheduleTimelineDataProvider.initialDuration, totalDuration: scheduleTimelineDataProvider.duration, minimized: true, onChange: scheduleTimelineDataProvider.onAnimationFractionChanged, onPlayPause: onPlayPause }))));

package/lib/cjs/appui-react/content/DefaultViewOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultViewOverlay.js","sourceRoot":"","sources":["../../../../src/appui-react/content/DefaultViewOverlay.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,qCAAmC;AACnC,+BAA+B;AAE/B,4EAAkF;AAClF,gGAA6F;AAC7F,kEAA+D;AAC/D,wEAAqE;AACrE,gGAA6F;AAW7F;;;;GAIG;AACH,uBAAuB;AACvB,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAoB;;IAC5F,MAAM,yBAAyB,GAAG,IAAA,2CAAoB,EAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,qCAAqC,GAAG,IAAA,mEAAgC,EAAC,QAAQ,CAAC,CAAC;IACzF,MAAM,4BAA4B,GAAG,IAAA,mEAAgC,EAAC,QAAQ,CAAC,CAAC;IAChF,MAAM,eAAe,GAAG,IAAA,qCAAiB,GAAE,CAAC;IAE5C,IAAI,CAAC,eAAe;QAClB,OAAO,IAAI,CAAC;IAEd,wBAAwB;IACxB,IAAI,yBAAyB,IAAI,CAAC,CAAC,CAAA,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,kBAAkB,0CAAE,8BAA8B,CAAA,EAAE;QACrG,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,uCAAa,IAAC,YAAY,EAAE,yBAAyB,GAAI,CACtD,CACF,CACP,CAAC;KACH;IAED,IAAI,qCAAqC,IAAI,CAAC,CAAC,CAAA,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,kBAAkB,0CAAE,iCAAiC,CAAA,EAAE;QACpH,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,2CAAiB,IAChB,SAAS,EAAE,qCAAqC,CAAC,KAAK,EACtD,OAAO,EAAE,qCAAqC,CAAC,GAAG,EAClD,eAAe,EAAE,qCAAqC,CAAC,eAAe,EACtE,aAAa,EAAE,qCAAqC,CAAC,QAAQ,EAC7D,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,qCAAqC,CAAC,0BAA0B,EAC1E,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAC;KACH;IAED,IAAI,4BAA4B,IAAI,CAAC,CAAC,CAAA,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,kBAAkB,0CAAE,kCAAkC,CAAA,EAAE;QAC5G,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,2CAAiB,IAChB,SAAS,EAAE,4BAA4B,CAAC,KAAK,EAC7C,OAAO,EAAE,4BAA4B,CAAC,GAAG,EACzC,eAAe,EAAE,4BAA4B,CAAC,eAAe,EAC7D,aAAa,EAAE,4BAA4B,CAAC,QAAQ,EACpD,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,4BAA4B,CAAC,0BAA0B,EACjE,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAzDD,gDAyDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ContentView\n */\n\nimport \"./DefaultViewOverlay.scss\";\nimport * as React from \"react\";\nimport { ScreenViewport } from \"@itwin/core-frontend\";\nimport { SolarTimeline, TimelineComponent } from \"@itwin/imodel-components-react\";\nimport { useScheduleAnimationDataProvider } from \"../hooks/useScheduleAnimationDataProvider\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { useSolarDataProvider } from \"../hooks/useSolarDataProvider\";\nimport { useAnalysisAnimationDataProvider } from \"../hooks/useAnalysisAnimationDataProvider\";\n\n/** Props of Viewport Overlay Control that show timelines\n * @public\n */\nexport interface ViewOverlayProps {\n  viewport: ScreenViewport;\n  onPlayPause?: (playing: boolean) => void; // callback with play/pause button is pressed\n  featureOptions?: { [key: string]: any };\n}\n\n/**\n * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding\n * data provider is attached to the TimelineComponent and the overlay is made visible.\n * @public\n */\n// istanbul ignore next\nexport function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }: ViewOverlayProps) {\n  const solarDataTimelineProvider = useSolarDataProvider(viewport);\n  const analysisAnimationTimelineDataProvider = useAnalysisAnimationDataProvider(viewport);\n  const scheduleTimelineDataProvider = useScheduleAnimationDataProvider(viewport);\n  const currentViewport = useActiveViewport();\n\n  if (!currentViewport)\n    return null;\n\n  // Solar gets first shot\n  if (solarDataTimelineProvider && !!featureOptions?.defaultViewOverlay?.enableSolarTimelineViewOverlay) {\n    return (\n      <div className=\"uifw-view-overlay\">\n        <div className=\"uifw-animation-overlay\">\n          <SolarTimeline dataProvider={solarDataTimelineProvider} />\n        </div>\n      </div>\n    );\n  }\n\n  if (analysisAnimationTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableAnalysisTimelineViewOverlay) {\n    return (\n      <div className=\"uifw-view-overlay\">\n        <div className=\"uifw-animation-overlay\">\n          <TimelineComponent\n            startDate={analysisAnimationTimelineDataProvider.start}\n            endDate={analysisAnimationTimelineDataProvider.end}\n            initialDuration={analysisAnimationTimelineDataProvider.initialDuration}\n            totalDuration={analysisAnimationTimelineDataProvider.duration}\n            minimized={true}\n            onChange={analysisAnimationTimelineDataProvider.onAnimationFractionChanged}\n            onPlayPause={onPlayPause}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (scheduleTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableScheduleAnimationViewOverlay) {\n    return (\n      <div className=\"uifw-view-overlay\">\n        <div className=\"uifw-animation-overlay\">\n          <TimelineComponent\n            startDate={scheduleTimelineDataProvider.start}\n            endDate={scheduleTimelineDataProvider.end}\n            initialDuration={scheduleTimelineDataProvider.initialDuration}\n            totalDuration={scheduleTimelineDataProvider.duration}\n            minimized={true}\n            onChange={scheduleTimelineDataProvider.onAnimationFractionChanged}\n            onPlayPause={onPlayPause}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return null;\n}\n"]}
+{"version":3,"file":"DefaultViewOverlay.js","sourceRoot":"","sources":["../../../../src/appui-react/content/DefaultViewOverlay.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,qCAAmC;AACnC,+BAA+B;AAE/B,4EAAkF;AAClF,gGAA6F;AAC7F,kEAA+D;AAC/D,wEAAqE;AACrE,gGAA6F;AAW7F;;;;GAIG;AACH,uBAAuB;AACvB,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAoB;IAC5F,MAAM,yBAAyB,GAAG,IAAA,2CAAoB,EAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,qCAAqC,GAAG,IAAA,mEAAgC,EAAC,QAAQ,CAAC,CAAC;IACzF,MAAM,4BAA4B,GAAG,IAAA,mEAAgC,EAAC,QAAQ,CAAC,CAAC;IAChF,MAAM,eAAe,GAAG,IAAA,qCAAiB,GAAE,CAAC;IAE5C,IAAI,CAAC,eAAe;QAClB,OAAO,IAAI,CAAC;IAEd,wBAAwB;IACxB,IAAI,yBAAyB,IAAI,CAAC,CAAC,cAAc,EAAE,kBAAkB,EAAE,8BAA8B,EAAE;QACrG,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,uCAAa,IAAC,YAAY,EAAE,yBAAyB,GAAI,CACtD,CACF,CACP,CAAC;KACH;IAED,IAAI,qCAAqC,IAAI,CAAC,CAAC,cAAc,EAAE,kBAAkB,EAAE,iCAAiC,EAAE;QACpH,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,2CAAiB,IAChB,SAAS,EAAE,qCAAqC,CAAC,KAAK,EACtD,OAAO,EAAE,qCAAqC,CAAC,GAAG,EAClD,eAAe,EAAE,qCAAqC,CAAC,eAAe,EACtE,aAAa,EAAE,qCAAqC,CAAC,QAAQ,EAC7D,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,qCAAqC,CAAC,0BAA0B,EAC1E,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAC;KACH;IAED,IAAI,4BAA4B,IAAI,CAAC,CAAC,cAAc,EAAE,kBAAkB,EAAE,kCAAkC,EAAE;QAC5G,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;YAChC,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,2CAAiB,IAChB,SAAS,EAAE,4BAA4B,CAAC,KAAK,EAC7C,OAAO,EAAE,4BAA4B,CAAC,GAAG,EACzC,eAAe,EAAE,4BAA4B,CAAC,eAAe,EAC7D,aAAa,EAAE,4BAA4B,CAAC,QAAQ,EACpD,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,4BAA4B,CAAC,0BAA0B,EACjE,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAzDD,gDAyDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport \"./DefaultViewOverlay.scss\";\r\nimport * as React from \"react\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { SolarTimeline, TimelineComponent } from \"@itwin/imodel-components-react\";\r\nimport { useScheduleAnimationDataProvider } from \"../hooks/useScheduleAnimationDataProvider\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { useSolarDataProvider } from \"../hooks/useSolarDataProvider\";\r\nimport { useAnalysisAnimationDataProvider } from \"../hooks/useAnalysisAnimationDataProvider\";\r\n\r\n/** Props of Viewport Overlay Control that show timelines\r\n * @public\r\n */\r\nexport interface ViewOverlayProps {\r\n  viewport: ScreenViewport;\r\n  onPlayPause?: (playing: boolean) => void; // callback with play/pause button is pressed\r\n  featureOptions?: { [key: string]: any };\r\n}\r\n\r\n/**\r\n * Default viewport overlay that examines ViewState of the active view for a schedule script, analysis data, or solar data. If one of these is detected, the corresponding\r\n * data provider is attached to the TimelineComponent and the overlay is made visible.\r\n * @public\r\n */\r\n// istanbul ignore next\r\nexport function DefaultViewOverlay({ viewport, onPlayPause, featureOptions }: ViewOverlayProps) {\r\n  const solarDataTimelineProvider = useSolarDataProvider(viewport);\r\n  const analysisAnimationTimelineDataProvider = useAnalysisAnimationDataProvider(viewport);\r\n  const scheduleTimelineDataProvider = useScheduleAnimationDataProvider(viewport);\r\n  const currentViewport = useActiveViewport();\r\n\r\n  if (!currentViewport)\r\n    return null;\r\n\r\n  // Solar gets first shot\r\n  if (solarDataTimelineProvider && !!featureOptions?.defaultViewOverlay?.enableSolarTimelineViewOverlay) {\r\n    return (\r\n      <div className=\"uifw-view-overlay\">\r\n        <div className=\"uifw-animation-overlay\">\r\n          <SolarTimeline dataProvider={solarDataTimelineProvider} />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (analysisAnimationTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableAnalysisTimelineViewOverlay) {\r\n    return (\r\n      <div className=\"uifw-view-overlay\">\r\n        <div className=\"uifw-animation-overlay\">\r\n          <TimelineComponent\r\n            startDate={analysisAnimationTimelineDataProvider.start}\r\n            endDate={analysisAnimationTimelineDataProvider.end}\r\n            initialDuration={analysisAnimationTimelineDataProvider.initialDuration}\r\n            totalDuration={analysisAnimationTimelineDataProvider.duration}\r\n            minimized={true}\r\n            onChange={analysisAnimationTimelineDataProvider.onAnimationFractionChanged}\r\n            onPlayPause={onPlayPause}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (scheduleTimelineDataProvider && !!featureOptions?.defaultViewOverlay?.enableScheduleAnimationViewOverlay) {\r\n    return (\r\n      <div className=\"uifw-view-overlay\">\r\n        <div className=\"uifw-animation-overlay\">\r\n          <TimelineComponent\r\n            startDate={scheduleTimelineDataProvider.start}\r\n            endDate={scheduleTimelineDataProvider.end}\r\n            initialDuration={scheduleTimelineDataProvider.initialDuration}\r\n            totalDuration={scheduleTimelineDataProvider.duration}\r\n            minimized={true}\r\n            onChange={scheduleTimelineDataProvider.onAnimationFractionChanged}\r\n            onPlayPause={onPlayPause}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return null;\r\n}\r\n"]}

package/lib/cjs/appui-react/content/DefaultViewOverlay.scss

@@ -1,43 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-
-// 40px is used to ensure scrubber is not drawn behind a widget tab
-.uifw-view-overlay {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: calc(100% - 80px);
-  height: auto;
-  position: absolute;
-  bottom: 10px;
-  left: 40px;
-  right: 40px;
-  pointer-events: none;
-  @include uicore-z-index(view-overlay);
-}
-
-$widget-transparency: 0.9;
-
-.uifw-animation-overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  max-width: 1000px;
-  height: auto;
-  background: $buic-background-dialog;
-  border: 1px solid $buic-background-dialog-stroke;
-  border-radius: var(--iui-border-radius-1);
-  // overflow: hidden;
-  opacity: $widget-transparency;
-  pointer-events: auto;
-
-  &:hover {
-    opacity: 1;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+// 40px is used to ensure scrubber is not drawn behind a widget tab
+
+$uifw-view-overlay-indent: calc(var(--iui-size-l) * 2);
+
+.uifw-view-overlay {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - #{$uifw-view-overlay-indent} * 2);
+  height: auto;
+  position: absolute;
+  bottom: var(--iui-size-s);
+  left: $uifw-view-overlay-indent;
+  right: $uifw-view-overlay-indent;
+  pointer-events: none;
+  @include uicore-z-index(view-overlay);
+}
+
+$widget-transparency: 0.9;
+
+.uifw-animation-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  max-width: 1000px;
+  height: auto;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border);
+  border-radius: var(--iui-border-radius-1);
+  // overflow: hidden;
+  opacity: $widget-transparency;
+  transition: opacity var(--iui-duration-1) ease;
+  pointer-events: auto;
+
+  &:hover {
+    opacity: 1;
+  }
+}

package/lib/cjs/appui-react/content/FloatingViewportContent.d.ts

@@ -1,9 +1,9 @@
 /** @packageDocumentation
  * @module ContentView
  */
-import "./FloatingViewportContent.css";
 import * as React from "react";
-import { ViewState } from "@itwin/core-frontend";
+import { ScreenViewport } from "@itwin/core-frontend";
+import { ViewStateProp } from "@itwin/imodel-components-react";
 /**
  * @beta
  */
@@ -12,14 +12,21 @@ export interface FloatingViewportContentProps {
     onContextMenu?: (e: React.MouseEvent) => boolean;
     /** viewport/content control uniqueId */
     contentId: string;
-    /** The initial view state used to create the viewport */
-    initialViewState: ViewState;
+    /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */
+    initialViewState: ViewStateProp;
+    /** Function to get a reference to the ScreenViewport */
+    viewportRef?: React.Ref<ScreenViewport>;
 }
-/**
- * FloatingViewportContent component that creates its own [FloatingViewportContentControl].
- * This allows it to be recognized as an "active" content control so that tools operate on this
- * content.
- * @beta
- */
+/** @beta */
 export declare function FloatingViewportContent(props: FloatingViewportContentProps): JSX.Element;
+/** @alpha */
+export interface FloatingViewportContentWrapperProps {
+    readonly children?: React.ReactNode;
+}
+/** @alpha */
+export declare function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps): JSX.Element;
+/** @alpha */
+export declare function useFloatingViewport(args: FloatingViewportContentProps): {
+    viewportControl: JSX.Element;
+};
 //# sourceMappingURL=FloatingViewportContent.d.ts.map

package/lib/cjs/appui-react/content/FloatingViewportContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,+BAA+B,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAW5E;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,gBAAgB,EAAE,SAAS,CAAC;CAC7B;AAED;;;;;GAKG;AAEH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eA2D1E"}
+{"version":3,"file":"FloatingViewportContent.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAqB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAMlF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,wFAAwF;IACxF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC;IACjD,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iIAAiI;IACjI,gBAAgB,EAAE,aAAa,CAAC;IAChC,wDAAwD;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,YAAY;AACZ,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,eAO1E;AAED,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE,mCAAmC,eAM/F;AAED,aAAa;AACb,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,4BAA4B;;EA2DrE"}

package/lib/cjs/appui-react/content/FloatingViewportContent.js

@@ -7,67 +7,73 @@
  * @module ContentView
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingViewportContent = void 0;
-require("./FloatingViewportContent.css");
+exports.useFloatingViewport = exports.FloatingViewportContentWrapper = exports.FloatingViewportContent = void 0;
 const React = require("react");
 const core_frontend_1 = require("@itwin/core-frontend");
-const presentation_components_1 = require("@itwin/presentation-components");
 const imodel_components_react_1 = require("@itwin/imodel-components-react");
 const ViewportContentControl_1 = require("./ViewportContentControl");
-const ContentViewManager_1 = require("./ContentViewManager");
-const UiShowHideManager_1 = require("../utils/UiShowHideManager");
 const ContentLayout_1 = require("./ContentLayout");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const FloatingViewport = (0, presentation_components_1.viewWithUnifiedSelection)(imodel_components_react_1.ViewportComponent);
-/**
- * FloatingViewportContent component that creates its own [FloatingViewportContentControl].
- * This allows it to be recognized as an "active" content control so that tools operate on this
- * content.
- * @beta
- */
-// istanbul ignore next
+const UiFramework_1 = require("../UiFramework");
+const core_react_1 = require("@itwin/core-react");
+/** @beta */
 function FloatingViewportContent(props) {
-    const { contentId, initialViewState } = props;
+    const { viewportControl } = useFloatingViewport(props);
+    return (React.createElement(FloatingViewportContentWrapper, null, viewportControl));
+}
+exports.FloatingViewportContent = FloatingViewportContent;
+/** @alpha */
+function FloatingViewportContentWrapper({ children }) {
+    return (React.createElement("div", { onMouseMove: UiFramework_1.UiFramework.visibility.handleContentMouseMove, className: "uifw-dialog-imodel-content", style: { height: "100%", position: "relative" } },
+        React.createElement(ContentLayout_1.ContentWrapper, { content: children, style: { height: "100%", position: "relative" } })));
+}
+exports.FloatingViewportContentWrapper = FloatingViewportContentWrapper;
+/** @alpha */
+function useFloatingViewport(args) {
+    const { contentId, initialViewState, onContextMenu, viewportRef } = args;
     const [viewport, setViewport] = React.useState();
     const contentControl = React.useRef();
-    const onViewportRef = React.useCallback((v) => setViewport(v), []);
+    const viewState = React.useMemo(() => typeof initialViewState === "function" ? initialViewState() : initialViewState, [initialViewState]);
+    const ref = React.useCallback((v) => {
+        setViewport(v);
+    }, []);
+    const refs = (0, core_react_1.useRefs)(ref, viewportRef);
+    const viewportControl = React.useMemo(() => {
+        const node = React.createElement(imodel_components_react_1.ViewportComponent, { key: contentId, imodel: viewState.iModel, viewState: viewState, controlId: contentId, onContextMenu: onContextMenu, viewportRef: refs });
+        return node;
+    }, [refs, onContextMenu, viewState, contentId]);
     React.useEffect(() => {
         if (!contentControl.current) {
             contentControl.current = new ViewportContentControl_1.FloatingViewportContentControl(contentId, contentId, null);
-            ContentViewManager_1.ContentViewManager.addFloatingContentControl(contentControl.current);
+            UiFramework_1.UiFramework.content.addFloatingContentControl(contentControl.current);
         }
         return () => {
             if (contentControl.current) {
-                ContentViewManager_1.ContentViewManager.dropFloatingContentControl(contentControl.current);
+                UiFramework_1.UiFramework.content.dropFloatingContentControl(contentControl.current);
                 contentControl.current = undefined;
             }
         };
     }, [contentId]);
-    const viewPortControl = React.useMemo(() => initialViewState ? (React.createElement(FloatingViewport, { viewportRef: onViewportRef, imodel: initialViewState.iModel, viewState: initialViewState, onContextMenu: props.onContextMenu, controlId: contentId })) : undefined, [onViewportRef, props.onContextMenu, initialViewState, contentId]);
     React.useEffect(() => {
         if (viewport && contentControl.current) {
             contentControl.current.viewport = viewport;
             if (null === contentControl.current.reactNode) {
-                contentControl.current.reactNode = viewPortControl;
-            }
-            if (initialViewState) {
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                contentControl.current.processViewSelectorChange(initialViewState.iModel, initialViewState.id, initialViewState, initialViewState.name);
+                contentControl.current.reactNode = viewportControl;
             }
+            void contentControl.current.viewport.changeView(viewState);
         }
-    }, [initialViewState, viewPortControl, viewport]);
+    }, [viewState, viewport, viewportControl]);
     React.useEffect(() => {
         const onViewClose = (vp) => {
-            var _a;
-            if (((_a = contentControl.current) === null || _a === void 0 ? void 0 : _a.viewport) === vp) {
-                ContentViewManager_1.ContentViewManager.dropFloatingContentControl(contentControl.current);
+            if (contentControl.current?.viewport === vp) {
+                UiFramework_1.UiFramework.content.dropFloatingContentControl(contentControl.current);
                 contentControl.current = undefined;
             }
         };
         return core_frontend_1.IModelApp.viewManager.onViewClose.addListener(onViewClose);
     }, []);
-    return (React.createElement("div", { onMouseMove: UiShowHideManager_1.UiShowHideManager.handleContentMouseMove, className: "uifw-dialog-imodel-content", style: { height: "100%", position: "relative" } },
-        React.createElement(ContentLayout_1.ContentWrapper, { content: viewPortControl, style: { height: "100%", position: "relative" } })));
+    return {
+        viewportControl,
+    };
 }
-exports.FloatingViewportContent = FloatingViewportContent;
+exports.useFloatingViewport = useFloatingViewport;
 //# sourceMappingURL=FloatingViewportContent.js.map

package/lib/cjs/appui-react/content/FloatingViewportContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ContentView\n */\n\nimport \"./FloatingViewportContent.css\";\nimport * as React from \"react\";\nimport { IModelApp, ScreenViewport, ViewState } from \"@itwin/core-frontend\";\nimport { viewWithUnifiedSelection } from \"@itwin/presentation-components\";\nimport { ViewportComponent } from \"@itwin/imodel-components-react\";\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\nimport { ContentViewManager } from \"./ContentViewManager\";\nimport { UiShowHideManager } from \"../utils/UiShowHideManager\";\nimport { ContentWrapper } from \"./ContentLayout\";\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst FloatingViewport = viewWithUnifiedSelection(ViewportComponent);\n\n/**\n * @beta\n */\nexport interface FloatingViewportContentProps {\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\n  onContextMenu?: (e: React.MouseEvent) => boolean;\n  /** viewport/content control uniqueId */\n  contentId: string;\n  /** The initial view state used to create the viewport */\n  initialViewState: ViewState;\n}\n\n/**\n * FloatingViewportContent component that creates its own [FloatingViewportContentControl].\n * This allows it to be recognized as an \"active\" content control so that tools operate on this\n * content.\n * @beta\n */\n// istanbul ignore next\nexport function FloatingViewportContent(props: FloatingViewportContentProps) { // eslint-disable-line @typescript-eslint/naming-convention\n  const { contentId, initialViewState } = props;\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\n\n  const onViewportRef = React.useCallback((v: ScreenViewport) => setViewport(v), []);\n\n  React.useEffect(() => {\n    if (!contentControl.current) {\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\n      ContentViewManager.addFloatingContentControl(contentControl.current);\n    }\n    return () => {\n      if (contentControl.current) {\n        ContentViewManager.dropFloatingContentControl(contentControl.current);\n        contentControl.current = undefined;\n      }\n    };\n  }, [contentId]);\n\n  const viewPortControl = React.useMemo(() =>\n    initialViewState ? (\n      <FloatingViewport\n        viewportRef={onViewportRef}\n        imodel={initialViewState.iModel}\n        viewState={initialViewState}\n        onContextMenu={props.onContextMenu}\n        controlId={contentId}\n      />\n    ) : undefined, [onViewportRef, props.onContextMenu, initialViewState, contentId]);\n\n  React.useEffect(() => {\n    if (viewport && contentControl.current) {\n      contentControl.current.viewport = viewport;\n      if (null === contentControl.current.reactNode) {\n        contentControl.current.reactNode = viewPortControl;\n      }\n      if (initialViewState) {\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        contentControl.current.processViewSelectorChange(initialViewState.iModel, initialViewState.id, initialViewState, initialViewState.name);\n      }\n    }\n  }, [initialViewState, viewPortControl, viewport]);\n\n  React.useEffect(() => {\n    const onViewClose = (vp: ScreenViewport) => {\n      if (contentControl.current?.viewport === vp) {\n        ContentViewManager.dropFloatingContentControl(contentControl.current);\n        contentControl.current = undefined;\n      }\n    };\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\n  }, []);\n\n  return (\n    <div onMouseMove={UiShowHideManager.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\n      <ContentWrapper content={viewPortControl} style={{ height: \"100%\", position: \"relative\" }} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"FloatingViewportContent.js","sourceRoot":"","sources":["../../../../src/appui-react/content/FloatingViewportContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module ContentView\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IModelApp, ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ViewportComponent, ViewStateProp } from \"@itwin/imodel-components-react\";\r\nimport { FloatingViewportContentControl } from \"./ViewportContentControl\";\r\nimport { ContentWrapper } from \"./ContentLayout\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { useRefs } from \"@itwin/core-react\";\r\n\r\n/**\r\n * @beta\r\n */\r\nexport interface FloatingViewportContentProps {\r\n  /** callback used to construct context menu when user right-clicks on canvas/viewport */\r\n  onContextMenu?: (e: React.MouseEvent) => boolean;\r\n  /** viewport/content control uniqueId */\r\n  contentId: string;\r\n  /** The initial view state used to create the viewport, or a function that returns it (will refresh when the function changes) */\r\n  initialViewState: ViewStateProp;\r\n  /** Function to get a reference to the ScreenViewport */\r\n  viewportRef?: React.Ref<ScreenViewport>;\r\n}\r\n\r\n/** @beta */\r\nexport function FloatingViewportContent(props: FloatingViewportContentProps) {\r\n  const { viewportControl } = useFloatingViewport(props);\r\n  return (\r\n    <FloatingViewportContentWrapper>\r\n      {viewportControl}\r\n    </FloatingViewportContentWrapper>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport interface FloatingViewportContentWrapperProps {\r\n  readonly children?: React.ReactNode;\r\n}\r\n\r\n/** @alpha */\r\nexport function FloatingViewportContentWrapper({ children }: FloatingViewportContentWrapperProps) {\r\n  return (\r\n    <div onMouseMove={UiFramework.visibility.handleContentMouseMove} className=\"uifw-dialog-imodel-content\" style={{ height: \"100%\", position: \"relative\" }}>\r\n      <ContentWrapper content={children} style={{ height: \"100%\", position: \"relative\" }} />\r\n    </div>\r\n  );\r\n}\r\n\r\n/** @alpha */\r\nexport function useFloatingViewport(args: FloatingViewportContentProps) {\r\n  const { contentId, initialViewState, onContextMenu, viewportRef } = args;\r\n  const [viewport, setViewport] = React.useState<ScreenViewport | undefined>();\r\n  const contentControl = React.useRef<FloatingViewportContentControl | undefined>();\r\n\r\n  const viewState = React.useMemo(() => typeof initialViewState === \"function\" ? initialViewState() : initialViewState, [initialViewState]);\r\n  const ref = React.useCallback((v: ScreenViewport) => {\r\n    setViewport(v);\r\n  }, []);\r\n\r\n  const refs = useRefs(ref, viewportRef);\r\n  const viewportControl = React.useMemo(() => {\r\n    const node = <ViewportComponent\r\n      key={contentId}\r\n      imodel={viewState.iModel}\r\n      viewState={viewState}\r\n      controlId={contentId}\r\n      onContextMenu={onContextMenu}\r\n      viewportRef={refs}\r\n    />;\r\n    return node;\r\n  }, [refs, onContextMenu, viewState, contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (!contentControl.current) {\r\n      contentControl.current = new FloatingViewportContentControl(contentId, contentId, null);\r\n      UiFramework.content.addFloatingContentControl(contentControl.current);\r\n    }\r\n    return () => {\r\n      if (contentControl.current) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n  }, [contentId]);\r\n\r\n  React.useEffect(() => {\r\n    if (viewport && contentControl.current) {\r\n      contentControl.current.viewport = viewport;\r\n      if (null === contentControl.current.reactNode) {\r\n        contentControl.current.reactNode = viewportControl;\r\n      }\r\n      void contentControl.current.viewport.changeView(viewState);\r\n    }\r\n  }, [viewState, viewport, viewportControl]);\r\n\r\n  React.useEffect(() => {\r\n    const onViewClose = (vp: ScreenViewport) => {\r\n      if (contentControl.current?.viewport === vp) {\r\n        UiFramework.content.dropFloatingContentControl(contentControl.current);\r\n        contentControl.current = undefined;\r\n      }\r\n    };\r\n    return IModelApp.viewManager.onViewClose.addListener(onViewClose);\r\n  }, []);\r\n\r\n  return {\r\n    viewportControl,\r\n  };\r\n}\r\n"]}

package/lib/cjs/appui-react/content/IModelViewport.d.ts

@@ -4,13 +4,13 @@
 import * as React from "react";
 import { Id64String } from "@itwin/core-bentley";
 import { IModelConnection, ScreenViewport, ViewState } from "@itwin/core-frontend";
-import { ViewStateProp } from "@itwin/imodel-components-react";
+import { ViewportComponent, ViewStateProp } from "@itwin/imodel-components-react";
 import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
 import { ViewportContentControl } from "./ViewportContentControl";
 /** Viewport that is connected to the IModelConnection property in the Redux store. The application must set up the Redux store and include the FrameworkReducer.
  * @public
  */
-export declare const IModelConnectedViewport: import("react-redux").ConnectedComponent<React.ComponentType<import("@itwin/imodel-components-react").ViewportProps & import("@itwin/presentation-components").ViewWithUnifiedSelectionProps>, any>;
+export declare const IModelConnectedViewport: import("react-redux").ConnectedComponent<typeof ViewportComponent, any>;
 /** [[IModelViewportControl]] options. These options are set in the applicationData property of the [[ContentProps]].
  * @public
  */

package/lib/cjs/appui-react/content/IModelViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IModelViewport.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/IModelViewport.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"IModelViewport.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/content/IModelViewport.tsx"],"names":[],"mappings":"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"}