@reearth/core 0.0.1

package/src/engines/Cesium/constants.ts

@@ -0,0 +1,25 @@
+import { CameraEventType, KeyboardEventModifier } from "cesium";
+
+export const DEFAULT_SCREEN_SPACE_CAMERA_ASSIGNMENTS = {
+  translateEventTypes: CameraEventType.LEFT_DRAG,
+  zoomEventTypes: [CameraEventType.RIGHT_DRAG, CameraEventType.WHEEL, CameraEventType.PINCH],
+  rotateEventTypes: CameraEventType.LEFT_DRAG,
+  tiltEventTypes: [
+    CameraEventType.MIDDLE_DRAG,
+    CameraEventType.PINCH,
+    {
+      eventType: CameraEventType.LEFT_DRAG,
+      modifier: KeyboardEventModifier.CTRL,
+    },
+    {
+      eventType: CameraEventType.RIGHT_DRAG,
+      modifier: KeyboardEventModifier.CTRL,
+    },
+  ],
+  lookEventTypes: [
+    {
+      eventType: CameraEventType.LEFT_DRAG,
+      modifier: KeyboardEventModifier.SHIFT,
+    },
+  ],
+};

package/src/engines/Cesium/core/Clock.tsx

@@ -0,0 +1,58 @@
+import { Clock as CesiumClock, ClockRange, ClockStep, JulianDate } from "cesium";
+import { useCallback, useMemo } from "react";
+import { Clock } from "resium";
+
+import { TimelineManagerRef } from "../../../Map/useTimelineManager";
+
+export type Props = {
+  timelineManagerRef?: TimelineManagerRef;
+};
+
+export default function ReearthClock({ timelineManagerRef }: Props): JSX.Element | null {
+  const { start, stop, current } = timelineManagerRef?.current?.computedTimeline ?? {};
+  const { animation, stepType, rangeType, multiplier } = timelineManagerRef?.current?.options ?? {};
+
+  const startTime = useMemo(() => (start ? JulianDate.fromDate(start) : undefined), [start]);
+  const stopTime = useMemo(() => (stop ? JulianDate.fromDate(stop) : undefined), [stop]);
+  const currentTime = useMemo(
+    () => (current ? JulianDate.fromDate(current) : undefined),
+    [current],
+  );
+  const clockStep =
+    stepType === "fixed" ? ClockStep.TICK_DEPENDENT : ClockStep.SYSTEM_CLOCK_MULTIPLIER;
+  const clockMultiplier = multiplier ?? 1;
+
+  const handleTick = useCallback(
+    (clock: CesiumClock) => {
+      const start = JulianDate.toDate(clock.startTime);
+      const stop = JulianDate.toDate(clock.stopTime);
+
+      // NOTE: Must not update state. This event will be called every frame.
+      timelineManagerRef?.current?.handleTick?.(JulianDate.toDate(clock.currentTime), {
+        start,
+        stop,
+      });
+    },
+    [timelineManagerRef],
+  );
+
+  return (
+    <Clock
+      shouldAnimate={animation}
+      canAnimate={animation}
+      startTime={startTime}
+      stopTime={stopTime}
+      currentTime={currentTime}
+      clockStep={clockStep}
+      multiplier={clockMultiplier}
+      clockRange={rangeType ? rangeTypes[rangeType] : undefined}
+      onTick={handleTick}
+    />
+  );
+}
+
+const rangeTypes = {
+  unbounded: ClockRange.UNBOUNDED,
+  clamped: ClockRange.CLAMPED,
+  bounced: ClockRange.LOOP_STOP,
+};

package/src/engines/Cesium/core/Globe.tsx

@@ -0,0 +1,136 @@
+import {
+  ArcGISTiledElevationTerrainProvider,
+  CesiumTerrainProvider,
+  EllipsoidTerrainProvider,
+  IonResource,
+  TerrainProvider,
+} from "cesium";
+import { pick } from "lodash-es";
+import { useMemo } from "react";
+import { Globe as CesiumGlobe } from "resium";
+
+import type { SceneProperty, TerrainProperty } from "../..";
+import { objKeys } from "../../../utils";
+import { toColor } from "../common";
+
+export type Props = {
+  property?: SceneProperty;
+  cesiumIonAccessToken?: string;
+};
+
+export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.Element | null {
+  const terrainProperty = useMemo(
+    (): TerrainProperty => ({
+      ...property?.terrain,
+      ...pick(property?.default, terrainPropertyKeys),
+    }),
+    [property?.terrain, property?.default],
+  );
+
+  const terrainProvider = useMemo((): Promise<TerrainProvider> | TerrainProvider | undefined => {
+    const opts = {
+      terrain: terrainProperty?.terrain,
+      terrainType: terrainProperty?.terrainType,
+      terrainNormal: terrainProperty?.terrainNormal,
+      terrainCesiumIonAccessToken:
+        terrainProperty?.terrainCesiumIonAccessToken || cesiumIonAccessToken,
+      terrainCesiumIonAsset: terrainProperty?.terrainCesiumIonAsset,
+      terrainCesiumIonUrl: terrainProperty?.terrainCesiumIonUrl,
+    };
+    const provider = opts.terrain ? terrainProviders[opts.terrainType || "cesium"] : undefined;
+    return (typeof provider === "function" ? provider(opts) : provider) ?? defaultTerrainProvider;
+  }, [
+    terrainProperty?.terrain,
+    terrainProperty?.terrainType,
+    terrainProperty?.terrainCesiumIonAccessToken,
+    terrainProperty?.terrainCesiumIonAsset,
+    terrainProperty?.terrainCesiumIonUrl,
+    terrainProperty?.terrainNormal,
+    cesiumIonAccessToken,
+  ]);
+
+  const baseColor = useMemo(
+    () => toColor(property?.atmosphere?.globeBaseColor),
+    [property?.atmosphere?.globeBaseColor],
+  );
+
+  return (
+    <CesiumGlobe
+      baseColor={baseColor}
+      enableLighting={
+        !!(property?.atmosphere?.enable_lighting ?? property?.globeLighting?.globeLighting)
+      }
+      showGroundAtmosphere={
+        property?.atmosphere?.ground_atmosphere ??
+        property?.globeAtmosphere?.globeAtmosphere ??
+        true
+      }
+      atmosphereLightIntensity={property?.globeAtmosphere?.globeAtmosphereIntensity}
+      atmosphereSaturationShift={property?.atmosphere?.surturation_shift}
+      atmosphereHueShift={property?.atmosphere?.hue_shift}
+      atmosphereBrightnessShift={property?.atmosphere?.brightness_shift}
+      terrainProvider={terrainProvider}
+      depthTestAgainstTerrain={!!terrainProperty.depthTestAgainstTerrain}
+    />
+  );
+}
+
+const terrainPropertyKeys = objKeys<TerrainProperty>({
+  terrain: 0,
+  terrainType: 0,
+  terrainExaggeration: 0,
+  terrainExaggerationRelativeHeight: 0,
+  depthTestAgainstTerrain: 0,
+  terrainCesiumIonAsset: 0,
+  terrainCesiumIonAccessToken: 0,
+  terrainCesiumIonUrl: 0,
+  terrainUrl: 0,
+});
+
+const defaultTerrainProvider = new EllipsoidTerrainProvider();
+
+const terrainProviders: {
+  [k in NonNullable<TerrainProperty["terrainType"]>]:
+    | TerrainProvider
+    | ((
+        opts: Pick<
+          TerrainProperty,
+          | "terrainCesiumIonAccessToken"
+          | "terrainCesiumIonAsset"
+          | "terrainCesiumIonUrl"
+          | "terrainNormal"
+        >,
+      ) => Promise<TerrainProvider> | TerrainProvider | null);
+} = {
+  cesium: ({ terrainCesiumIonAccessToken, terrainNormal }) =>
+    CesiumTerrainProvider.fromUrl(
+      IonResource.fromAssetId(1, {
+        accessToken: terrainCesiumIonAccessToken,
+      }),
+      {
+        requestVertexNormals: terrainNormal,
+        requestWaterMask: false,
+      },
+    ),
+  arcgis: () =>
+    ArcGISTiledElevationTerrainProvider.fromUrl(
+      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+    ),
+  cesiumion: ({
+    terrainCesiumIonAccessToken,
+    terrainCesiumIonAsset,
+    terrainCesiumIonUrl,
+    terrainNormal,
+  }) =>
+    terrainCesiumIonAsset
+      ? CesiumTerrainProvider.fromUrl(
+          terrainCesiumIonUrl ||
+            IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
+              accessToken: terrainCesiumIonAccessToken,
+            }),
+          {
+            requestVertexNormals: terrainNormal,
+          },
+        )
+      : null,
+};

package/src/engines/Cesium/core/Imagery.test.ts

@@ -0,0 +1,102 @@
+import { renderHook } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+import { type Tile, useImageryProviders } from "./Imagery";
+
+test("useImageryProviders", () => {
+  const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
+  const provider2 = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge2: url }));
+  const presets = { default: provider, foobar: provider2 };
+  const { result, rerender } = renderHook(
+    ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
+      useImageryProviders({
+        tiles,
+        presets,
+        cesiumIonAccessToken,
+      }),
+    { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
+  );
+
+  expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(1);
+  const prevImageryProvider = result.current.providers["1"][2];
+
+  // re-render with same tiles
+  rerender({ tiles: [{ id: "1", tile_type: "default" }] });
+
+  expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(1);
+
+  // update a tile URL
+  rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
+
+  expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
+  expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(2);
+  expect(provider).toBeCalledWith({ url: "a" });
+  const prevImageryProvider2 = result.current.providers["1"][2];
+
+  // add a tile with URL
+  rerender({
+    tiles: [
+      { id: "2", tile_type: "default" },
+      { id: "1", tile_type: "default", tile_url: "a" },
+    ],
+  });
+
+  expect(result.current.providers).toEqual({
+    "2": ["default", undefined, { hoge: undefined }],
+    "1": ["default", "a", { hoge: "a" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(3);
+
+  // sort tiles
+  rerender({
+    tiles: [
+      { id: "1", tile_type: "default", tile_url: "a" },
+      { id: "2", tile_type: "default" },
+    ],
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["default", "a", { hoge: "a" }],
+    "2": ["default", undefined, { hoge: undefined }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(3);
+
+  // delete a tile
+  rerender({
+    tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
+    cesiumIonAccessToken: "a",
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["default", "a", { hoge: "a" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider2);
+  expect(provider).toBeCalledTimes(4);
+
+  // update a tile type
+  rerender({
+    tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
+    cesiumIonAccessToken: "a",
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["foobar", "u", { hoge2: "u" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(4);
+  expect(provider2).toBeCalledTimes(1);
+
+  rerender({ tiles: [] });
+  expect(result.current.providers).toEqual({});
+});

package/src/engines/Cesium/core/Imagery.tsx

@@ -0,0 +1,184 @@
+import {
+  Color,
+  ImageryProvider,
+  TextureMagnificationFilter,
+  TextureMinificationFilter,
+} from "cesium";
+import { isEqual } from "lodash-es";
+import { useCallback, useMemo, useRef, useLayoutEffect, useState } from "react";
+import { ImageryLayer } from "resium";
+
+import { tiles as tilePresets } from "./presets";
+
+export type ImageryLayerData = {
+  id: string;
+  provider: ImageryProvider;
+  min?: number;
+  max?: number;
+  opacity?: number;
+};
+
+export type Tile = {
+  id: string;
+  tile_url?: string;
+  tile_type?: string;
+  tile_opacity?: number;
+  tile_zoomLevel?: number[];
+  tile_zoomLevelForURL?: number[];
+  heatmap?: boolean;
+};
+
+export type Props = {
+  tiles?: Tile[];
+  cesiumIonAccessToken?: string;
+};
+
+export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
+  const { providers, updated } = useImageryProviders({
+    tiles,
+    cesiumIonAccessToken,
+    presets: tilePresets,
+  });
+
+  // force rerendering all layers when any provider is updated
+  // since Resium does not sort layers according to ImageryLayer component order
+  const [counter, setCounter] = useState(0);
+  useLayoutEffect(() => {
+    if (updated) setCounter(c => c + 1);
+  }, [providers, updated]);
+
+  return (
+    <>
+      {tiles
+        ?.map(({ id, ...tile }) => ({
+          ...tile,
+          id,
+          provider: providers[id]?.[2],
+        }))
+        .map(({ id, tile_opacity: opacity, tile_zoomLevel, provider, heatmap }, i) =>
+          provider ? (
+            <ImageryLayer
+              key={`${id}_${i}_${counter}`}
+              imageryProvider={provider}
+              minimumTerrainLevel={tile_zoomLevel?.[0]}
+              maximumTerrainLevel={tile_zoomLevel?.[1]}
+              alpha={opacity}
+              index={i}
+              colorToAlpha={heatmap ? Color.WHITE : undefined}
+              colorToAlphaThreshold={heatmap ? 1 : undefined}
+              magnificationFilter={heatmap ? TextureMagnificationFilter.LINEAR : undefined}
+              minificationFilter={heatmap ? TextureMinificationFilter.NEAREST : undefined}
+            />
+          ) : null,
+        )}
+    </>
+  );
+}
+
+type Providers = { [id: string]: [string | undefined, string | undefined, ImageryProvider] };
+
+export function useImageryProviders({
+  tiles = [],
+  cesiumIonAccessToken,
+  presets,
+}: {
+  tiles?: Tile[];
+  cesiumIonAccessToken?: string;
+  presets: {
+    [key: string]: (opts?: {
+      url?: string;
+      cesiumIonAccessToken?: string;
+      heatmap?: boolean;
+      tile_zoomLevel?: number[];
+    }) => Promise<ImageryProvider> | ImageryProvider | null;
+  };
+}): { providers: Providers; updated: boolean } {
+  const newTile = useCallback(
+    (t: Tile, ciat?: string) =>
+      presets[t.tile_type || "default"]({
+        url: t.tile_url,
+        cesiumIonAccessToken: ciat,
+        heatmap: t.heatmap,
+        tile_zoomLevel: t.tile_zoomLevelForURL,
+      }),
+    [presets],
+  );
+
+  const prevCesiumIonAccessToken = useRef(cesiumIonAccessToken);
+  const tileKeys = tiles.map(t => t.id).join(",");
+  const prevTileKeys = useRef(tileKeys);
+  const prevProviders = useRef<Providers>({});
+
+  // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
+  const { providers, updated } = useMemo(() => {
+    const isCesiumAccessTokenUpdated = prevCesiumIonAccessToken.current !== cesiumIonAccessToken;
+    const prevProvidersKeys = Object.keys(prevProviders.current);
+    const added = tiles.map(t => t.id).filter(t => t && !prevProvidersKeys.includes(t));
+
+    const rawProviders = [
+      ...Object.entries(prevProviders.current),
+      ...added.map(a => [a, undefined] as const),
+    ].map(([k, v]) => ({
+      key: k,
+      added: added.includes(k),
+      prevType: v?.[0],
+      prevUrl: v?.[1],
+      prevProvider: v?.[2],
+      tile: tiles.find(t => t.id === k),
+    }));
+
+    const providers = Object.fromEntries(
+      rawProviders
+        .map(
+          ({
+            key,
+            added,
+            prevType,
+            prevUrl,
+            prevProvider,
+            tile,
+          }):
+            | [
+                string,
+                [
+                  string | undefined,
+                  string | undefined,
+                  Promise<ImageryProvider> | ImageryProvider | null | undefined,
+                ],
+              ]
+            | null =>
+            !tile
+              ? null
+              : [
+                  key,
+                  added ||
+                  prevType !== tile.tile_type ||
+                  prevUrl !== tile.tile_url ||
+                  (isCesiumAccessTokenUpdated && (!tile.tile_type || tile.tile_type === "default"))
+                    ? [tile.tile_type, tile.tile_url, newTile(tile, cesiumIonAccessToken)]
+                    : [prevType, prevUrl, prevProvider],
+                ],
+        )
+        .filter(
+          (e): e is [string, [string | undefined, string | undefined, ImageryProvider]] =>
+            !!e?.[1][2],
+        ),
+    );
+
+    const updated =
+      !!added.length ||
+      !!isCesiumAccessTokenUpdated ||
+      !isEqual(prevTileKeys.current, tileKeys) ||
+      rawProviders.some(
+        p => p.tile && (p.prevType !== p.tile.tile_type || p.prevUrl !== p.tile.tile_url),
+      );
+
+    prevTileKeys.current = tileKeys;
+    prevCesiumIonAccessToken.current = cesiumIonAccessToken;
+
+    return { providers, updated };
+  }, [cesiumIonAccessToken, tiles, tileKeys, newTile]);
+
+  prevProviders.current = providers;
+  return { providers, updated };
+}

package/src/engines/Cesium/core/Indicator/Indicator.tsx

@@ -0,0 +1,141 @@
+/// <reference types="vite-plugin-svgr/client" />
+import useTransition from "@rot1024/use-transition";
+import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2, JulianDate } from "cesium";
+import { useEffect, useState } from "react";
+import { useCesium } from "resium";
+
+import type { SceneProperty } from "../../..";
+import { TimelineManagerRef } from "../../../../Map/useTimelineManager";
+import { useIcon } from "../../common";
+
+import Crosshair from "./crosshair.svg?react";
+
+export type Props = {
+  className?: string;
+  property?: SceneProperty;
+  timelineManagerRef?: TimelineManagerRef;
+};
+
+export default function Indicator({
+  className,
+  property,
+  timelineManagerRef,
+}: Props): JSX.Element | null {
+  const { viewer } = useCesium();
+  const [isVisible, setIsVisible] = useState(true);
+  const [pos, setPos] = useState<Cartesian2>();
+
+  const transition = useTransition(!!pos && isVisible, 500, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+  });
+  const { indicator_type, indicator_image, indicator_image_scale } = property?.indicator ?? {};
+  const [img, w, h] = useIcon({ image: indicator_image, imageSize: indicator_image_scale });
+
+  useEffect(() => {
+    !(!indicator_type || indicator_type === "default")
+      ? viewer?.selectionIndicator.viewModel.selectionIndicatorElement.setAttribute(
+          "hidden",
+          "true",
+        )
+      : viewer?.selectionIndicator.viewModel.selectionIndicatorElement.removeAttribute("hidden");
+  }, [indicator_type, viewer, viewer?.selectionIndicator]);
+
+  useEffect(() => {
+    if (!viewer) return;
+    const handleTick = () => {
+      if (viewer.isDestroyed()) return;
+      const selected = viewer.selectedEntity;
+      const currentTime = timelineManagerRef?.current?.timeline?.current
+        ? JulianDate.fromDate(timelineManagerRef?.current?.timeline.current)
+        : undefined;
+      if (
+        !selected?.isShowing ||
+        (currentTime && !selected.isAvailable(currentTime)) ||
+        !selected.position
+      ) {
+        setIsVisible(false);
+        return;
+      }
+
+      // https://github.com/CesiumGS/cesium/blob/1.94/Source/Widgets/Viewer/Viewer.js#L1839
+      let position: Cartesian3 | undefined = undefined;
+      const boundingSphere = new BoundingSphere();
+      const state = (viewer.dataSourceDisplay as any).getBoundingSphere(
+        selected,
+        true,
+        boundingSphere,
+      );
+      // https://github.com/CesiumGS/cesium/blob/main/Source/DataSources/BoundingSphereState.js#L24
+      if (state !== 2 /* BoundingSphereState.FAILED */) {
+        position = boundingSphere.center;
+      } else if (selected.position && currentTime) {
+        position = selected.position.getValue(currentTime, position);
+      }
+
+      if (position) {
+        const pos = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
+        setPos(pos);
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    const timelineManager = timelineManagerRef?.current;
+    timelineManager?.onTick(handleTick);
+    return () => {
+      timelineManager?.offTick(handleTick);
+    };
+  }, [viewer, timelineManagerRef]);
+
+  return transition !== "unmounted" && pos ? (
+    indicator_type === "crosshair" ? (
+      <div
+        className={className}
+        style={{
+          width: 48,
+          height: 48,
+          fontSize: 0,
+          display: "inline-block",
+          transitionProperty: "color, background",
+          left: pos.x + "px",
+          top: pos.y + "px",
+          position: "absolute",
+          transform: "translate(-50%, -50%)",
+          transition: transition === "entering" || transition === "exiting" ? "all 0.5s ease" : "",
+          opacity: transition === "entering" || transition === "entered" ? 1 : 0,
+          pointerEvents: "none",
+        }}>
+        <Crosshair />
+      </div>
+    ) : indicator_type === "custom" ? (
+      <img
+        src={img}
+        width={w}
+        height={h}
+        style={{
+          left: pos.x + "px",
+          top: pos.y + "px",
+          position: "absolute",
+          transform: "translate(-50%, -50%)",
+          transition: transition === "entering" || transition === "exiting" ? "all 0.5s ease" : "",
+          opacity: transition === "entering" || transition === "entered" ? 1 : 0,
+          pointerEvents: "none",
+        }}
+      />
+    ) : (
+      <div
+        style={{
+          left: pos.x + "px",
+          top: pos.y + "px",
+          position: "absolute",
+          transform: "translate(-50%, -50%)",
+          transition: transition === "entering" || transition === "exiting" ? "all 0.5s ease" : "",
+          opacity: transition === "entering" || transition === "entered" ? 1 : 0,
+          pointerEvents: "none",
+        }}
+      />
+    )
+  ) : null;
+}

package/src/engines/Cesium/core/Indicator/crosshair.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 5.02586C34.6974 5.52871 42.4713 13.3026 42.9741 23H47C47.5523 23 48 23.4477 48 24C48 24.5523 47.5523 25 47 25H42.9741C42.4713 34.6974 34.6974 42.4713 25 42.9741V47C25 47.5523 24.5523 48 24 48C23.4477 48 23 47.5523 23 47V42.9741C13.3026 42.4713 5.52871 34.6974 5.02586 25H1C0.447715 25 0 24.5523 0 24C0 23.4477 0.447715 23 1 23H5.02586C5.52871 13.3026 13.3026 5.52871 23 5.02586V1C23 0.447715 23.4477 0 24 0C24.5523 0 25 0.447715 25 1V5.02586ZM41.5 24C41.5 33.665 33.665 41.5 24 41.5C14.335 41.5 6.5 33.665 6.5 24C6.5 14.335 14.335 6.5 24 6.5C33.665 6.5 41.5 14.335 41.5 24Z" fill="white"/>
+</svg>