@reearth/core 0.0.1

package/src/engines/Cesium/Feature/Resource/utils.ts

@@ -0,0 +1,377 @@
+import {
+  Entity,
+  Cartesian3,
+  PolygonHierarchy,
+  PointGraphics,
+  BillboardGraphics,
+  JulianDate,
+} from "cesium";
+
+import { EvalFeature } from "../../..";
+import { AppearanceTypes, ComputedFeature, ComputedLayer, Feature } from "../../../../mantle";
+import { heightReference, shadowMode, toColor } from "../../common";
+import { convertEntityDescription, convertEntityProperties } from "../../utils/utils";
+import { attachTag, extractSimpleLayer, getTag, Tag } from "../utils";
+
+export function overrideOriginalProperties(
+  entity: Entity,
+  tag: Tag | undefined,
+  name: string,
+  properties: any,
+) {
+  const originalProperties = tag?.originalProperties || {};
+  attachTag(entity, {
+    ...(tag || {}),
+    originalProperties: {
+      ...originalProperties,
+      [name]: {
+        ...originalProperties[name],
+        ...properties,
+      },
+    },
+  });
+}
+
+type CesiumEntityAppearanceKey = "polygon" | "polyline";
+type SupportedAppearanceKey = "marker" | keyof Pick<Entity, CesiumEntityAppearanceKey>;
+
+type EntityAppearanceKey<AName extends SupportedAppearanceKey> = AName extends "marker"
+  ? keyof Pick<Entity, "point" | "billboard" | "label">
+  : keyof Pick<Entity, CesiumEntityAppearanceKey>;
+
+type AppearancePropertyKeyType = "color" | "heightReference" | "shadows";
+
+export function attachProperties<
+  AName extends SupportedAppearanceKey,
+  PName extends EntityAppearanceKey<AName>,
+>(
+  entity: Entity,
+  computedFeature: ComputedFeature | undefined,
+  namePair: [appearanceName: AName, propertyName: PName],
+  propertyMap: {
+    [K in keyof Exclude<Entity[PName], undefined>]?: {
+      name: keyof AppearanceTypes[AName];
+      type?: AppearancePropertyKeyType;
+      override?: any;
+      default?: any;
+    };
+  },
+) {
+  const [appearanceName, propertyName] = namePair;
+  const property = entity[propertyName] ?? {};
+  if (!entity[propertyName]) {
+    return;
+  }
+
+  const tag = getTag(entity);
+
+  // Backup original properties
+  overrideOriginalProperties(
+    entity,
+    tag,
+    propertyName,
+    Object.keys(propertyMap).reduce(
+      (r, k) => {
+        r[k] = (property as any)[k];
+        return r;
+      },
+      {} as Record<string, any>,
+    ),
+  );
+
+  Object.entries(propertyMap).forEach(([entityPropertyKey, appearancePropertyKey]) => {
+    const appearanceKeyName = appearancePropertyKey.name;
+    const appearanceKeyType = appearancePropertyKey.type as AppearancePropertyKeyType;
+
+    let value =
+      appearancePropertyKey.override ??
+      (computedFeature?.[appearanceName] as any)?.[appearanceKeyName] ??
+      appearancePropertyKey.default;
+    switch (appearanceKeyType) {
+      case "color":
+        value = toColor(value);
+        break;
+      case "shadows":
+        value = shadowMode(value);
+        break;
+      case "heightReference":
+        value = heightReference(value);
+    }
+
+    (entity[propertyName] as any)[entityPropertyKey] =
+      value ?? (property as any)[entityPropertyKey];
+  });
+}
+
+const hasAppearance = <
+  AName extends SupportedAppearanceKey,
+  PName extends EntityAppearanceKey<AName>,
+>(
+  layer: ComputedLayer | undefined,
+  entity: Entity,
+  namePair: [appearanceName: AName, propertyName: PName],
+): boolean => {
+  return !!(extractSimpleLayer(layer)?.[namePair[0]] || entity[namePair[1]]);
+};
+
+export const makeFeatureId = (e: Entity) => String(e.id);
+
+export const attachStyle = (
+  entity: Entity,
+  layer: ComputedLayer | undefined,
+  evalFeature: EvalFeature,
+  currentTime: JulianDate,
+): [Feature, ComputedFeature] | void => {
+  if (!layer) {
+    return;
+  }
+
+  // TODO: make it DRY
+  const point = hasAppearance(layer, entity, ["marker", "point"]);
+  const billboard = hasAppearance(layer, entity, ["marker", "billboard"]);
+  const label = hasAppearance(layer, entity, ["marker", "label"]);
+  if (point || billboard || label) {
+    const position = entity.position?.getValue(currentTime);
+    const coordinates = [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+    const feature: Feature = {
+      type: "feature",
+      id: makeFeatureId(entity),
+      geometry: {
+        type: "Point",
+        coordinates,
+      },
+      properties: convertEntityProperties(currentTime, entity),
+      metaData: {
+        description: convertEntityDescription(currentTime, entity),
+      },
+      range: {
+        x: coordinates[0],
+        y: coordinates[1],
+        z: coordinates[2],
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    if (point) {
+      const isPointStyle = computedFeature?.marker?.style === "point";
+      if (isPointStyle && !entity.point) {
+        entity.point = new PointGraphics();
+        entity.billboard = undefined;
+      }
+
+      attachProperties(entity, computedFeature, ["marker", "point"], {
+        show: {
+          name: "show",
+          ...(computedFeature?.marker?.style
+            ? {
+                override:
+                  computedFeature?.marker?.style === "point" &&
+                  (computedFeature?.marker.show ?? true),
+              }
+            : {}),
+        },
+        pixelSize: {
+          name: "pointSize",
+        },
+        color: {
+          name: "pointColor",
+          type: "color",
+        },
+        outlineColor: {
+          name: "pointOutlineColor",
+          type: "color",
+        },
+        outlineWidth: {
+          name: "pointOutlineWidth",
+        },
+        heightReference: {
+          name: "heightReference",
+          type: "heightReference",
+        },
+      });
+    }
+
+    if (billboard) {
+      const isImageStyle = computedFeature?.marker?.style === "image";
+      if (isImageStyle && !entity.billboard) {
+        entity.billboard = new BillboardGraphics();
+        entity.point = undefined;
+      }
+
+      attachProperties(entity, computedFeature, ["marker", "billboard"], {
+        show: {
+          name: "show",
+          ...(computedFeature?.marker?.style
+            ? {
+                override:
+                  computedFeature?.marker?.style === "image" &&
+                  (computedFeature?.marker.show ?? true),
+              }
+            : {}),
+        },
+        image: {
+          name: "image",
+        },
+        color: {
+          name: "imageColor",
+          type: "color",
+        },
+        scale: {
+          name: "imageSize",
+        },
+        sizeInMeters: {
+          name: "imageSizeInMeters",
+        },
+        heightReference: {
+          name: "heightReference",
+          type: "heightReference",
+        },
+        horizontalOrigin: {
+          name: "imageHorizontalOrigin",
+        },
+        verticalOrigin: {
+          name: "imageVerticalOrigin",
+        },
+      });
+
+      if (label) {
+        attachProperties(entity, computedFeature, ["marker", "label"], {
+          show: {
+            name: "show",
+            default: true,
+          },
+          text: {
+            name: "labelText",
+          },
+          backgroundColor: {
+            name: "labelBackground",
+            type: "color",
+          },
+          heightReference: {
+            name: "heightReference",
+            type: "heightReference",
+          },
+        });
+      }
+    }
+    return [feature, computedFeature];
+  }
+
+  if (hasAppearance(layer, entity, ["polyline", "polyline"])) {
+    const entityPosition = entity.position?.getValue(currentTime);
+    const positions = entity.polyline?.positions?.getValue(currentTime) as Cartesian3[];
+    const coordinates = positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+    const feature: Feature = {
+      type: "feature",
+      id: makeFeatureId(entity),
+      geometry: {
+        type: "LineString",
+        coordinates,
+      },
+      properties: convertEntityProperties(currentTime, entity),
+      metaData: {
+        description: convertEntityDescription(currentTime, entity),
+      },
+      range: {
+        x: entityPosition?.x ?? 0,
+        y: entityPosition?.y ?? 0,
+        z: entityPosition?.z ?? 0,
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    attachProperties(entity, computedFeature, ["polyline", "polyline"], {
+      show: {
+        name: "show",
+        default: true,
+      },
+      width: {
+        name: "strokeWidth",
+      },
+      material: {
+        name: "strokeColor",
+        type: "color",
+      },
+      shadows: {
+        name: "shadows",
+        type: "shadows",
+      },
+      clampToGround: {
+        name: "clampToGround",
+      },
+    });
+    return [feature, computedFeature];
+  }
+
+  if (hasAppearance(layer, entity, ["polygon", "polygon"])) {
+    const entityPosition = entity.position?.getValue(currentTime);
+    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
+    const coordinates = hierarchy?.holes?.map(hole =>
+      hole.positions.map(position => [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0]),
+    );
+    const feature: Feature = {
+      type: "feature",
+      id: makeFeatureId(entity),
+      geometry: {
+        type: "Polygon",
+        coordinates,
+      },
+      properties: convertEntityProperties(currentTime, entity),
+      metaData: {
+        description: convertEntityDescription(currentTime, entity),
+      },
+      range: {
+        x: entityPosition?.x ?? 0,
+        y: entityPosition?.y ?? 0,
+        z: entityPosition?.z ?? 0,
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    attachProperties(entity, computedFeature, ["polygon", "polygon"], {
+      show: {
+        name: "show",
+        default: true,
+      },
+      fill: {
+        name: "fill",
+      },
+      material: {
+        name: "fillColor",
+        type: "color",
+      },
+      outline: {
+        name: "stroke",
+      },
+      outlineColor: {
+        name: "strokeColor",
+        type: "color",
+      },
+      outlineWidth: {
+        name: "strokeWidth",
+      },
+      shadows: {
+        name: "shadows",
+        type: "shadows",
+      },
+      heightReference: {
+        name: "heightReference",
+        type: "heightReference",
+      },
+      extrudedHeight: {
+        name: "extrudedHeight",
+      },
+    });
+    return [feature, computedFeature];
+  }
+};

package/src/engines/Cesium/Feature/Tileset/DrawClippingPolygon/index.tsx

@@ -0,0 +1,77 @@
+import { Cartesian3, PolygonHierarchy } from "cesium";
+import { Position } from "geojson";
+import { isEqual } from "lodash-es";
+import { FC, useMemo } from "react";
+import { PolygonGraphics } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
+
+import { EntityExt, toColor } from "../../utils";
+
+export type ClippingPolygonStyle = {
+  fill?: boolean;
+  fillColor?: string;
+  stroke?: boolean;
+  strokeColor?: string;
+  strokeWidth?: number;
+};
+
+type DrawClippingPolygonProps = {
+  coordiantes: Position[];
+  top?: number;
+  bottom?: number;
+  visible?: boolean;
+  style?: ClippingPolygonStyle;
+  ready?: boolean;
+};
+
+const DEFAULT_CLIPPING_POLYGON_STYLE = {
+  fill: true,
+  fillColor: "#FFFFFF22",
+  stroke: true,
+  strokeColor: "#FFFFFF",
+  strokeWidth: 1,
+};
+
+export const DrawClippingPolygon: FC<DrawClippingPolygonProps> = ({
+  coordiantes,
+  top = 0,
+  bottom = 0,
+  visible,
+  style,
+  ready,
+}) => {
+  const hierarchy = useCustomCompareMemo(
+    () =>
+      coordiantes
+        ? new PolygonHierarchy(coordiantes.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)))
+        : undefined,
+    [coordiantes ?? []],
+    isEqual,
+  );
+
+  const memoizedStyle = useMemo(
+    () => ({
+      ...DEFAULT_CLIPPING_POLYGON_STYLE,
+      ...style,
+      fillColor: toColor(style?.fillColor ?? DEFAULT_CLIPPING_POLYGON_STYLE.fillColor),
+      strokeColor: toColor(style?.strokeColor ?? DEFAULT_CLIPPING_POLYGON_STYLE.strokeColor),
+    }),
+    [style],
+  );
+
+  return (
+    <EntityExt hideIndicator>
+      <PolygonGraphics
+        hierarchy={hierarchy}
+        fill={memoizedStyle.fill}
+        material={memoizedStyle.fillColor}
+        outline={memoizedStyle.stroke}
+        outlineColor={memoizedStyle.strokeColor}
+        outlineWidth={memoizedStyle.strokeWidth}
+        height={bottom}
+        extrudedHeight={top}
+        show={visible && ready}
+      />
+    </EntityExt>
+  );
+};

package/src/engines/Cesium/Feature/Tileset/TilesetFeatureIndex.ts

@@ -0,0 +1,46 @@
+import { type Cesium3DTileContent } from "cesium";
+
+import { FeatureIndex } from "../../FeatureIndex";
+import { InternalCesium3DTileFeature } from "../../types";
+
+interface IndexRecord {
+  content: Cesium3DTileContent;
+  batchId: number;
+}
+
+export class TilesetFeatureIndex extends FeatureIndex<IndexRecord, InternalCesium3DTileFeature> {
+  has(key: string): boolean {
+    return this.records.has(key);
+  }
+
+  find(key: string) {
+    const record = this.records.get(key);
+    if (record == null) {
+      return;
+    }
+    return record.map(
+      ({ content, batchId }) => content.getFeature(batchId) as InternalCesium3DTileFeature,
+    );
+  }
+
+  addFeature(content: Cesium3DTileContent, batchId: number, key?: string): void {
+    if (key == null) {
+      return;
+    }
+    const record = this.records.get(key);
+    if (record == null) {
+      this.records.set(key, [{ content, batchId }]);
+    } else {
+      record.push({ content, batchId });
+    }
+  }
+
+  deleteFeature(key: string | undefined): void {
+    if (key == null) {
+      return;
+    }
+    if (this.records.has(key)) {
+      this.records.delete(key);
+    }
+  }
+}