@reearth/core 0.0.1

package/src/engines/Cesium/Feature/PhotoOverlay/index.tsx

@@ -0,0 +1,163 @@
+import { Cartesian3 } from "cesium";
+import { useMemo } from "react";
+import nl2br from "react-nl2br";
+import { BillboardGraphics } from "resium";
+
+import type { LegacyPhotooverlayAppearance } from "../../..";
+import { heightReference, ho, useIcon, vo } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+import useHooks, { photoDuration, photoExitDuration } from "./hooks";
+import defaultImage from "./primPhotoIcon.svg";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = LegacyPhotooverlayAppearance;
+
+export default function PhotoOverlay({
+  id,
+  isVisible,
+  property,
+  geometry,
+  isSelected,
+  layer,
+  feature,
+}: Props) {
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.location
+          ? [property.location.lng, property.location.lat, property.height ?? 0]
+          : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const {
+    show = true,
+    image,
+    imageSize,
+    imageHorizontalOrigin,
+    imageVerticalOrigin,
+    imageCrop,
+    imageShadow,
+    imageShadowColor,
+    imageShadowBlur,
+    imageShadowPositionX,
+    imageShadowPositionY,
+    heightReference: hr,
+    camera,
+    photoOverlayImage,
+    photoOverlayDescription,
+  } = property ?? {};
+
+  const [canvas] = useIcon({
+    image: image || defaultImage,
+    imageSize: image ? imageSize : undefined,
+    crop: image ? imageCrop : undefined,
+    shadow: image ? imageShadow : undefined,
+    shadowColor: image ? imageShadowColor : undefined,
+    shadowBlur: image ? imageShadowBlur : undefined,
+    shadowOffsetX: image ? imageShadowPositionX : undefined,
+    shadowOffsetY: image ? imageShadowPositionY : undefined,
+  });
+
+  const pos = useMemo(
+    () =>
+      coordinates
+        ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+        : undefined,
+    [coordinates],
+  );
+
+  const { photoOverlayImageTransiton, exitPhotoOverlay } = useHooks({
+    camera,
+    isSelected: isSelected && !!photoOverlayImage,
+  });
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !show || !pos ? null : (
+    <>
+      <EntityExt
+        id={id}
+        position={pos}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        draggable
+        properties={feature?.properties}
+        availability={availability}>
+        <BillboardGraphics
+          image={canvas}
+          horizontalOrigin={ho(imageHorizontalOrigin)}
+          verticalOrigin={vo(imageVerticalOrigin)}
+          heightReference={heightReference(hr)}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      {photoOverlayImageTransiton === "unmounted" ? null : (
+        <div
+          onClick={exitPhotoOverlay}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            transition:
+              photoOverlayImageTransiton === "entering" || photoOverlayImageTransiton === "exiting"
+                ? `all ${photoOverlayImageTransiton === "exiting" ? photoExitDuration : photoDuration}s ease`
+                : undefined,
+            opacity:
+              photoOverlayImageTransiton === "entering" || photoOverlayImageTransiton === "entered"
+                ? 1
+                : 0,
+          }}>
+          <img src={photoOverlayImage} style={PhotoStyle} />
+          {photoOverlayDescription && (
+            <p style={DescriptionStyle}>{nl2br(photoOverlayDescription)}</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+const PhotoStyle = {
+  maxWidth: "95%",
+  maxHeight: "80%",
+  boxShadow: "0 0 15px rgba(0, 0, 0, 1)",
+};
+
+const DescriptionStyle = {
+  position: "absolute" as const,
+  bottom: "10px",
+  left: "20px",
+  right: "20px",
+  textAlign: "left" as const,
+  userSelect: "none" as const,
+  color: "rgba(0,0,0,.2)",
+  fontFamily:
+    "Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem, sans-serif;",
+  fontSize: "12px",
+  fontWeight: "normal",
+  lineHeight: "20px",
+};
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/PhotoOverlay/primPhotoIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H19C20.6569 2 22 3.34315 22 5V14.9971C22 14.999 22 15.001 22 15.0029V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM20 12.5858V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19C4 19.4288 4.2699 19.7946 4.64909 19.9367L15.2929 9.29289C15.6834 8.90236 16.3166 8.90236 16.7071 9.29289L20 12.5858ZM7.41421 20L16 11.4142L20 15.4142V19C20 19.5523 19.5523 20 19 20H7.41421ZM6 8.5C6 9.88071 7.11928 11 8.5 11C9.88071 11 11 9.88071 11 8.5C11 7.11928 9.88071 6 8.5 6C7.11928 6 6 7.11928 6 8.5ZM8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9Z" fill="currentColor"/>
+</svg>

package/src/engines/Cesium/Feature/Polygon/index.stories.tsx

@@ -0,0 +1,174 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { engine } from "../..";
+import { Map, Props } from "../../../../Map";
+
+export default {
+  component: Map,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: StoryFn<Props> = args => <Map {...args} />;
+
+export const Basic = Template.bind([]);
+Basic.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [0, 0],
+                [0, 10],
+                [10, 10],
+                [10, 0],
+                [0, 0],
+              ],
+              [
+                [5, 5],
+                [7, 5],
+                [7, 7],
+                [5, 7],
+                [5, 5],
+              ],
+            ],
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const Excluded = Template.bind([]);
+Excluded.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [0, 0],
+                [0, 10],
+                [10, 10],
+                [10, 0],
+                [0, 0],
+              ],
+              [
+                [5, 5],
+                [7, 5],
+                [7, 7],
+                [5, 7],
+                [5, 5],
+              ],
+            ],
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+        extrudedHeight: 100000,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const ClampToGround = Template.bind([]);
+ClampToGround.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            coordinates: [
+              [
+                [137.74631070393525, 35.654778982881425],
+                [137.74631070393525, 35.56614718408652],
+                [137.81686198363366, 35.56614718408652],
+                [137.81686198363366, 35.654778982881425],
+                [137.74631070393525, 35.654778982881425],
+              ],
+            ],
+            type: "Polygon",
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+        heightReference: "clamp",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+    terrain: {
+      terrain: true,
+      terrainType: "cesium",
+      depthTestAgainstTerrain: true,
+    },
+  },
+};

package/src/engines/Cesium/Feature/Polygon/index.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Cartesian3, Entity as CesiumEntity, PolygonHierarchy } from "cesium";
+import { isEqual } from "lodash-es";
+import { useEffect, useMemo, useRef } from "react";
+import { CesiumComponentRef, Entity, PolygonGraphics, PolylineGraphics } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
+
+import type { PolygonAppearance } from "../../..";
+import { Polygon as PolygonValue, toColor } from "../../../../utils";
+import { classificationType, heightReference, shadowMode } from "../../common";
+import { useContext } from "../context";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+  getTag,
+} from "../utils";
+
+export type Props = FeatureProps<Property> & {
+  disableWorkaround?: boolean;
+};
+
+export type Property = PolygonAppearance & {
+  polygon?: PolygonValue;
+};
+
+export default function Polygon({
+  id,
+  isVisible,
+  property,
+  geometry,
+  layer,
+  feature,
+  disableWorkaround,
+}: Props) {
+  const coordiantes = useMemo(
+    () =>
+      geometry?.type === "Polygon"
+        ? geometry.coordinates
+        : property?.polygon
+          ? property.polygon.map(p => p.map(q => [q.lng, q.lat, q.height]))
+          : undefined,
+    [geometry?.coordinates, geometry?.type, property?.polygon],
+  );
+
+  const { requestRender } = useContext();
+
+  const {
+    show = true,
+    fill = true,
+    stroke,
+    fillColor,
+    strokeColor,
+    strokeWidth = 1,
+    heightReference: hr,
+    shadows,
+    extrudedHeight,
+    classificationType: ct,
+    hideIndicator,
+  } = property ?? {};
+
+  const hierarchy = useCustomCompareMemo(
+    () =>
+      coordiantes?.[0]
+        ? new PolygonHierarchy(
+            coordiantes[0].map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)),
+            coordiantes
+              .slice(1)
+              .map(
+                p =>
+                  new PolygonHierarchy(p.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0))),
+              ),
+          )
+        : undefined,
+    [coordiantes ?? []],
+    isEqual,
+  );
+
+  const strokes = useMemo(
+    () =>
+      coordiantes && stroke && !disableWorkaround
+        ? coordiantes.flatMap(hole => [
+            // bottom
+            hole.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)),
+            ...(extrudedHeight
+              ? [
+                  // top
+                  hole.map(c => Cartesian3.fromDegrees(c[0], c[1], extrudedHeight)),
+                  // vertical
+                  ...hole
+                    .slice(0, -1)
+                    .map(c => [
+                      Cartesian3.fromDegrees(c[0], c[1], 0),
+                      Cartesian3.fromDegrees(c[0], c[1], extrudedHeight),
+                    ]),
+                ]
+              : []),
+          ])
+        : [],
+    [coordiantes, stroke, disableWorkaround],
+  );
+
+  const memoStrokeColor = useMemo(
+    () => (stroke ? toColor(strokeColor) : undefined),
+    [stroke, strokeColor],
+  );
+
+  const entityRef = useRef<CesiumComponentRef<CesiumEntity>>(null);
+  const tag = getTag(entityRef.current?.cesiumElement);
+
+  const memoFillColor = useMemo(
+    () =>
+      fill
+        ? tag?.isFeatureSelected && typeof layer?.["polygon"]?.selectedFeatureColor === "string"
+          ? toColor(layer["polygon"]?.selectedFeatureColor)
+          : toColor(fillColor)
+        : undefined,
+    [fill, fillColor, layer?.id, feature?.id, tag?.isFeatureSelected],
+  );
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  const extrudedHeightProperty: { extrudedHeight: number } | undefined = useMemo(
+    () => (extrudedHeight ? { extrudedHeight } : undefined),
+    [extrudedHeight],
+  );
+
+  useEffect(() => {
+    requestRender?.();
+  });
+
+  return !isVisible || !coordiantes || !show ? null : (
+    <>
+      <EntityExt
+        id={id}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        ref={entityRef}
+        availability={availability}
+        properties={feature?.properties}
+        hideIndicator={hideIndicator}>
+        <PolygonGraphics
+          hierarchy={hierarchy}
+          fill={fill}
+          material={memoFillColor}
+          outline={!!memoStrokeColor}
+          outlineColor={memoStrokeColor}
+          outlineWidth={strokeWidth}
+          heightReference={heightReference(hr)}
+          shadows={shadowMode(shadows)}
+          distanceDisplayCondition={distanceDisplayCondition}
+          classificationType={classificationType(ct)}
+          {...extrudedHeightProperty}
+        />
+      </EntityExt>
+      {/* workaround */}
+      {strokes?.map((p, i) => (
+        <Entity key={i} id={`${id}-stroke${i}`}>
+          <PolylineGraphics
+            positions={p}
+            clampToGround={hr == "clamp" || hr == "relative"}
+            width={strokeWidth}
+            material={memoStrokeColor}
+            shadows={shadowMode(shadows)}
+            distanceDisplayCondition={distanceDisplayCondition}
+            classificationType={classificationType(ct)}
+          />
+        </Entity>
+      ))}
+    </>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Polyline/index.tsx

@@ -0,0 +1,98 @@
+import { Cartesian3, Entity } from "cesium";
+import { isEqual } from "lodash-es";
+import { useEffect, useMemo, useRef } from "react";
+import { CesiumComponentRef, PolylineGraphics } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
+
+import type { PolylineAppearance } from "../../..";
+import { Coordinates, toColor } from "../../../../utils";
+import { classificationType, shadowMode } from "../../common";
+import { useContext } from "../context";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+  getTag,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+export type Property = PolylineAppearance & {
+  coordinates?: Coordinates;
+};
+
+export default function Polyline({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property || {};
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "LineString"
+        ? geometry.coordinates
+        : property?.coordinates
+          ? property.coordinates.map(p => [p.lng, p.lat, p.height])
+          : undefined,
+    [geometry?.coordinates, geometry?.type, property?.coordinates],
+  );
+
+  const { requestRender } = useContext();
+
+  const {
+    clampToGround,
+    strokeColor,
+    strokeWidth = 1,
+    shadows,
+    classificationType: ct,
+    hideIndicator,
+  } = property ?? {};
+
+  const positions = useCustomCompareMemo(
+    () => coordinates?.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2])),
+    [coordinates ?? []],
+    isEqual,
+  );
+
+  const entityRef = useRef<CesiumComponentRef<Entity>>(null);
+  const tag = getTag(entityRef.current?.cesiumElement);
+
+  const material = useMemo(
+    () =>
+      tag?.isFeatureSelected && typeof layer?.["polyline"]?.selectedFeatureColor === "string"
+        ? toColor(layer["polyline"]?.selectedFeatureColor)
+        : toColor(strokeColor),
+    [strokeColor, layer, tag?.isFeatureSelected],
+  );
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  useEffect(() => {
+    requestRender?.();
+  });
+
+  return !isVisible || !coordinates || !show ? null : (
+    <EntityExt
+      id={id}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      ref={entityRef}
+      availability={availability}
+      properties={feature?.properties}
+      hideIndicator={hideIndicator}>
+      <PolylineGraphics
+        positions={positions}
+        width={strokeWidth}
+        material={material}
+        clampToGround={clampToGround}
+        shadows={shadowMode(shadows)}
+        distanceDisplayCondition={distanceDisplayCondition}
+        classificationType={classificationType(ct)}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Raster/hooks.ts

@@ -0,0 +1,52 @@
+import { ImageryLayerCollection, ImageryProvider } from "cesium";
+import { useEffect, useMemo } from "react";
+import { useCesium } from "resium";
+
+import type { ComputedLayer, RasterAppearance } from "../../..";
+import { attachTag, extractSimpleLayerData } from "../utils";
+
+export const useImageryProvider = (
+  imageryProvider: ImageryProvider | undefined,
+  layerId: string | undefined,
+  property: RasterAppearance | undefined,
+) => {
+  const { hideIndicator } = property ?? {};
+  const { viewer } = useCesium();
+  const alpha = property?.alpha;
+  useEffect(() => {
+    if (!imageryProvider || !viewer) return;
+    const imageryLayers: ImageryLayerCollection = viewer.imageryLayers;
+    const imageryLayer = imageryLayers.addImageryProvider(imageryProvider);
+    Object.assign(imageryLayer, {
+      bringToFront: () => {
+        imageryLayers.raiseToTop(imageryLayer);
+      },
+      sendToBack: () => {
+        imageryLayers.lowerToBottom(imageryLayer);
+      },
+    });
+    if (alpha !== undefined && typeof alpha === "number") {
+      imageryLayer.alpha = alpha;
+    }
+    attachTag(imageryLayer, { layerId, hideIndicator });
+    return () => {
+      imageryLayers.remove(imageryLayer);
+    };
+  }, [imageryProvider, viewer, layerId, alpha, hideIndicator]);
+};
+
+export const useData = (layer: ComputedLayer | undefined) => {
+  return useMemo(() => {
+    const data = extractSimpleLayerData(layer);
+    return {
+      type: data?.type,
+      url: data?.url,
+      layers: data?.layers
+        ? Array.isArray(data.layers)
+          ? data.layers.join(",")
+          : data?.layers
+        : undefined,
+      parameters: data?.parameters,
+    };
+  }, [layer]);
+};