Allowing some 3D tools to stretch to the dimensions of their container.

libraries/3d-tools/app/app.json

@@ -6,6 +6,11 @@
             "id": "map-config-1",
             "initialViewMode": "scene",
             "webScene": "https://www.arcgis.com/home/item.html?id=94e00add11334767afb0abdce49c9a43"
+        },
+        {
+            "$type": "branding",
+            "id": "branding",
+            "activeTheme": "dark"
         }
     ]
 }

libraries/3d-tools/app/layout.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<layout xmlns="https://geocortex.com/layout/v1" xmlns:incubator="vertigis.web.incubator">
+<layout xmlns="https://geocortex.com/layout/v1" xmlns:incubator="vertigis.web.incubator" xmlns:web="https://geocortex.com/layout/web/v1">
     <split resizable="true">
         <panel width="25" show-close-button="false" show-back-button="false">
             <tabs xmlns="https://geocortex.com/layout/web/v1">
@@ -10,8 +10,9 @@
                 <incubator:line-of-sight-3d scrollContainerY="true" config="line-of-sight-3d" />
                 <incubator:shadow-cast-3d scrollContainerY="true" config="shadow-cast-3d" />
                 <incubator:slice-3d scrollContainerY="true" config="slice-3d" />
+                <web:user-preferences />
             </tabs>
         </panel>
-        <map id="map-1" config="map-config-1" />
+        <map id="map-1" config="map-config-1"/>
     </split>
 </layout>

libraries/3d-tools/package.json

@@ -8,6 +8,7 @@
     },
     "devDependencies": {
         "@vertigis/web-sdk": "^1.8.0",
+        "@vertigis/web": "^5.26.0",
         "typescript": "~4.9.4"
     }
 }

libraries/3d-tools/src/components/AreaMeasurement/AreaMeasurement.tsx

@@ -2,6 +2,7 @@ import { ReactElement, useState, useEffect } from "react";
 import { useWatchAndRerender } from "@vertigis/web/ui";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 import Link from "@vertigis/web/ui/Link";
@@ -13,10 +14,11 @@ export type AreaMeasurementProps = MapWidgetProps<
     AreaMeasurementModel & Accessor
 >;
 
-const AreaMeasurement3DWrapper = createEsriMapWidget<
-    AreaMeasurementModel & Accessor,
-    AreaMeasurement3DWidget
->(AreaMeasurement3DWidget, true, true);
+const AreaMeasurement3DWrapper = createEsriMapWidget(
+    AreaMeasurement3DWidget as MapWidgetConstructor<AreaMeasurement3DWidget>,
+    true,
+    true
+);
 
 export default function AreaMeasurement3D(
     props: AreaMeasurementProps
@@ -42,11 +44,11 @@ export default function AreaMeasurement3D(
         <AreaMeasurement3DWrapper
             onWidgetCreated={setWidget}
             {...props}
-            sx={{ background: "white", pb: "1.5rem" }}
+            sx={{ pb: 2 }}
         >
             {widget?.viewModel?.state === "measured" && (
                 <Link
-                    sx={{ m: "1.5rem", cursor: "pointer" }}
+                    sx={{ m: 2, cursor: "pointer" }}
                     onClick={() => widget.viewModel.clear()}
                 >
                     language-web-incubator-common-clear

libraries/3d-tools/src/components/Daylight/Daylight.tsx

@@ -1,19 +1,28 @@
 import { ReactElement, useEffect, useState } from "react";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 import DaylightWidget from "@arcgis/core/widgets/Daylight";
 import type Accessor from "@arcgis/core/core/Accessor";
-import { useWatchAndRerender } from "@vertigis/web/ui";
+import { useWatchAndRerender, styled } from "@vertigis/web/ui";
 import DaylightModel from "./DaylightModel";
 
 export type DaylightWidgetProps = MapWidgetProps<DaylightModel & Accessor>;
 
-const DaylightWidgetWrapper = createEsriMapWidget<
-    DaylightModel & Accessor,
-    DaylightWidget
->(DaylightWidget, true, true);
+const DaylightWidgetWrapper = createEsriMapWidget(
+    DaylightWidget as MapWidgetConstructor<DaylightWidget>,
+    true,
+    true
+);
+
+const StyledDaylightWrapper = styled(DaylightWidgetWrapper)({
+    "--calcite-ui-text-1": "var(--primaryForeground)",
+    "& .esri-widget": {
+        width: "100%",
+    },
+});
 
 export default function Daylight(props: DaylightWidgetProps): ReactElement {
     const { model } = props;
@@ -60,9 +69,9 @@ export default function Daylight(props: DaylightWidgetProps): ReactElement {
     }
 
     return (
-        <DaylightWidgetWrapper
+        <StyledDaylightWrapper
             onWidgetCreated={setWidget}
             {...props}
-        ></DaylightWidgetWrapper>
+        ></StyledDaylightWrapper>
     );
 }

libraries/3d-tools/src/components/LineMeasurement/LineMeasurement.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, useState, useEffect } from "react";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 import Link from "@vertigis/web/ui/Link";
@@ -13,10 +14,11 @@ export type AreaMeasurementProps = MapWidgetProps<
     LineMeasurementModel & Accessor
 >;
 
-const DirectLineMeasurement3DWidgetWrapper = createEsriMapWidget<
-    LineMeasurementModel & Accessor,
-    DirectLineMeasurement3DWidget
->(DirectLineMeasurement3DWidget, true, true);
+const DirectLineMeasurement3DWidgetWrapper = createEsriMapWidget(
+    DirectLineMeasurement3DWidget as MapWidgetConstructor<DirectLineMeasurement3DWidget>,
+    true,
+    true
+);
 
 export default function LineMeasurement(
     props: AreaMeasurementProps
@@ -42,11 +44,11 @@ export default function LineMeasurement(
         <DirectLineMeasurement3DWidgetWrapper
             onWidgetCreated={setWidget}
             {...props}
-            sx={{ background: "white", pb: "1.5rem" }}
+            sx={{ pb: 2 }}
         >
             {widget?.viewModel?.state === "measured" && (
                 <Link
-                    sx={{ m: "1.5rem", cursor: "pointer" }}
+                    sx={{ m: 2, cursor: "pointer" }}
                     onClick={() => widget.viewModel.clear()}
                 >
                     language-web-incubator-common-clear

libraries/3d-tools/src/components/LineOfSight/LineOfSight.tsx

@@ -5,6 +5,7 @@ import Link from "@vertigis/web/ui/Link";
 import type Accessor from "@arcgis/core/core/Accessor";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 import LineOfSightModel from "./LineOfSightModel";
@@ -13,10 +14,11 @@ export type LineOfSightWidgetProps = MapWidgetProps<
     LineOfSightModel & Accessor
 >;
 
-const LineOfSightWrapper = createEsriMapWidget<
-    LineOfSightModel & Accessor,
-    LineOfSightWidget
->(LineOfSightWidget, true, true);
+const LineOfSightWrapper = createEsriMapWidget(
+    LineOfSightWidget as MapWidgetConstructor<LineOfSightWidget>,
+    true,
+    true
+);
 
 export default function LineOfSight(
     props: LineOfSightWidgetProps
@@ -46,11 +48,11 @@ export default function LineOfSight(
         <LineOfSightWrapper
             onWidgetCreated={setWidget}
             {...props}
-            sx={{ background: "white", pb: "1.5rem" }}
+            sx={{ pb: 2 }}
         >
             {widgetIsActive && (
                 <Link
-                    sx={{ m: "1.5rem", cursor: "pointer" }}
+                    sx={{ m: 2, cursor: "pointer" }}
                     onClick={() => widget.viewModel.clear()}
                 >
                     language-web-incubator-common-clear

libraries/3d-tools/src/components/ShadowCast/ShadowCast.tsx

@@ -1,11 +1,12 @@
 import { ReactElement } from "react";
 
 import ShadowCastWidget from "@arcgis/core/widgets/ShadowCast";
-import { Theme, useWatchAndRerender } from "@vertigis/web/ui";
+import { useWatchAndRerender, styled } from "@vertigis/web/ui";
 import type Accessor from "@arcgis/core/core/Accessor";
 import { useEffect, useState } from "react";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 import ShadowCastModel from "./ShadowCastModel";
@@ -14,19 +15,24 @@ export type ShadowCastModelWidgetProps = MapWidgetProps<
     ShadowCastModel & Accessor
 >;
 
-const ShadowCastWrapper = createEsriMapWidget<
-    ShadowCastModel & Accessor,
-    ShadowCastWidget
->(ShadowCastWidget, true, true);
+const ShadowCastWrapper = createEsriMapWidget(
+    ShadowCastWidget as MapWidgetConstructor<ShadowCastWidget>,
+    true,
+    true
+);
 
-const widgetStyle = (theme: Theme) => ({
-    "& calcite-select": {
-        "--calcite-select-font-size": theme.typography.fontSize,
-    },
-    "&": {
-        "--calcite-font-size--2": theme.typography.fontSize,
-    },
-});
+const StyledShadowCastWrapper = styled(ShadowCastWrapper)(
+    ({ theme: { typography } }) => ({
+        "--calcite-ui-text-1": "var(--primaryForeground)",
+        "--calcite-font-size--2": typography.fontSize,
+        "& .esri-widget": {
+            width: "100%",
+        },
+        "& .calcite-select": {
+            "--calcite-select-font-size": typography.fontSize,
+        },
+    })
+);
 
 export default function ShadowCast(
     props: ShadowCastModelWidgetProps
@@ -81,10 +87,9 @@ export default function ShadowCast(
     }
 
     return (
-        <ShadowCastWrapper
+        <StyledShadowCastWrapper
             onWidgetCreated={setWidget}
-            sx={widgetStyle}
             {...props}
-        ></ShadowCastWrapper>
+        ></StyledShadowCastWrapper>
     );
 }

libraries/3d-tools/src/components/Slice/Slice.tsx

@@ -1,28 +1,29 @@
-import { ReactElement, useEffect, useState, useRef } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import SliceWidget from "@arcgis/core/widgets/Slice";
 import { useWatchAndRerender } from "@vertigis/web/ui";
 import Link from "@vertigis/web/ui/Link";
 import type Accessor from "@arcgis/core/core/Accessor";
 import {
     createEsriMapWidget,
+    MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
 
 import SliceModel from "./SliceModel";
 
 export type SliceWidgetProps = MapWidgetProps<SliceModel & Accessor>;
 
-const SliceWidgetWrapper = createEsriMapWidget<
-    SliceModel & Accessor,
-    SliceWidget
->(SliceWidget, true, true);
+const SliceWidgetWrapper = createEsriMapWidget(
+    SliceWidget as MapWidgetConstructor<SliceWidget>,
+    true,
+    true
+);
 
 export default function Slice(props: SliceWidgetProps): ReactElement {
     const { model } = props;
     const { map } = model;
     const [widget, setWidget] = useState<SliceWidget>();
 
-    const containerRef = useRef<HTMLDivElement>();
     useWatchAndRerender(map, ["map", "isSwitchingViewMode"]);
     useWatchAndRerender(model, ["title", "tiltEnabled"]);
     useWatchAndRerender(widget?.viewModel, "state");
@@ -39,7 +40,7 @@ export default function Slice(props: SliceWidgetProps): ReactElement {
     }, [map, model.tiltEnabled, model.title, widget, widget?.viewModel]);
 
     useEffect(() => {
-        if (!containerRef.current) {
+        if (!widget?.container) {
             return;
         }
 
@@ -66,7 +67,7 @@ export default function Slice(props: SliceWidgetProps): ReactElement {
                 }
             });
         });
-        observer.observe(containerRef.current, {
+        observer.observe(widget.container as HTMLElement, {
             subtree: true,
             childList: true,
         });
@@ -86,21 +87,19 @@ export default function Slice(props: SliceWidgetProps): ReactElement {
         widget?.viewModel?.state === "slicing";
 
     return (
-        <div ref={containerRef} className="gcx-component">
-            <SliceWidgetWrapper
-                onWidgetCreated={setWidget}
-                {...props}
-                sx={{ background: "white", pb: "1.5rem" }}
-            >
-                {widgetIsSlicing && (
-                    <Link
-                        sx={{ m: "1.5rem", cursor: "pointer" }}
-                        onClick={() => widget.viewModel.clear()}
-                    >
-                        language-web-incubator-common-clear
-                    </Link>
-                )}
-            </SliceWidgetWrapper>
-        </div>
+        <SliceWidgetWrapper
+            onWidgetCreated={setWidget}
+            {...props}
+            sx={{ pb: 2 }}
+        >
+            {widgetIsSlicing && (
+                <Link
+                    sx={{ m: 2, cursor: "pointer" }}
+                    onClick={() => widget.viewModel.clear()}
+                >
+                    language-web-incubator-common-clear
+                </Link>
+            )}
+        </SliceWidgetWrapper>
     );
 }

libraries/mapillary/package.json

@@ -7,7 +7,7 @@
         "start": "vertigis-web-sdk start"
     },
     "dependencies": {
-        "@vertigis/web": "^5.21.0",
+        "@vertigis/web": "^5.26.0",
         "mapillary-js": "^4.1.1"
     },
     "devDependencies": {

libraries/timeslider/package.json

@@ -10,7 +10,7 @@
         "@arcgis/core": "^4.24.7",
         "@vertigis/arcgis-extensions": "^37.5.0",
         "@vertigis/viewer-spec": "^51.3.0",
-        "@vertigis/web": "^5.21.0"
+        "@vertigis/web": "^5.26.0"
     },
     "devDependencies": {
         "@vertigis/web-sdk": "^1.8.0",

package.json

@@ -31,11 +31,11 @@
         "cross-env": "^7.0.3",
         "cypress": "^12.3.0",
         "lint-staged": "^13.1.0",
+        "postcss": "^8.4.21",
+        "postcss-loader": "^7.0.2",
         "prettier": "^2.8.3",
         "simple-git-hooks": "^2.8.1",
-        "typescript": "~4.9.4",
-        "postcss-loader": "^7.0.2",
-        "postcss": "^8.4.21"
+        "typescript": "~4.9.4"
     },
     "resolutions": {
         "@types/react": "^18.0.27"