@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

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

@@ -1,5 +1,5 @@
-import LRUCache from "lru-cache";
-import { useEffect, useMemo } from "react";
+import { LRUCache } from "lru-cache";
+import { useEffect, useMemo, type JSX } from "react";
 
 import type { AppearanceTypes, FeatureComponentProps, ComputedLayer } from "../..";
 import { ComputedFeature, DataType, guessType } from "../../../mantle";
@@ -65,6 +65,7 @@ const displayConfig: Record<DataType, (keyof typeof components)[] | "auto"> = {
   tms: ["raster"],
   "3dtiles": ["3dtiles"],
   "osm-buildings": ["3dtiles"],
+  "reearth-buildings": ["3dtiles"],
   "google-photorealistic": ["3dtiles"],
   gpx: "auto",
   shapefile: "auto",
@@ -96,6 +97,7 @@ const FEATURE_DELEGATE_THRESHOLD = 6000;
 export default function Feature({
   layer,
   isHidden,
+  sketchEditingFeature,
   ...props
 }: FeatureComponentProps): JSX.Element | null {
   const data = extractSimpleLayerData(layer);
@@ -110,7 +112,19 @@ export default function Feature({
     displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
   const useTransition = !!layer?.transition?.useTransition;
   const cacheable = !data?.updateInterval && !useTransition;
-  const urlMD5 = useMemo(() => (data?.url ? generateIDWithMD5(data.url) : ""), [data?.url]);
+  const dataSourceKey = useMemo(
+    () =>
+      generateIDWithMD5(
+        JSON.stringify({
+          type: data?.type,
+          url: data?.url,
+          layers: data?.layers,
+          provider: data?.provider,
+          googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
+        }),
+      ),
+    [data?.type, data?.url, data?.layers, data?.provider, data?.serviceTokens?.googleMapApiKey],
+  );
 
   const { requestRender } = useContext();
   // TODO: Find a way to wait updating the entity
@@ -131,16 +145,19 @@ export default function Feature({
     const useSceneSpecularEnvironmentMaps =
       !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
 
-    const isVisible = layer.layer.visible !== false && !isHidden;
+    const isVisible =
+      layer.layer.visible !== false &&
+      !isHidden &&
+      !(sketchEditingFeature?.layerId === layer.id && sketchEditingFeature?.feature?.id === f?.id);
 
     const componentId =
-      urlMD5 +
+      dataSourceKey +
       generateIDWithMD5(
         `${layer.id}_${
           f?.id ?? ""
         }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
-        }_${JSON.stringify(layer.transition) ?? ""}`,
+        }_${JSON.stringify(layer.transition) ?? ""}_${JSON.stringify(f?.geometry) ?? ""}`,
       );
 
     if (cacheable) {
@@ -172,7 +189,7 @@ export default function Feature({
         <C
           {...props}
           key={!useTransition ? componentId : undefined}
-          id={!useTransition ? componentId : f?.id ?? layer.id}
+          id={!useTransition ? componentId : (f?.id ?? layer.id)}
           property={f ? f[k] : layer[k] || pickProperty(k, layer)}
           geometry={f?.geometry}
           feature={f}
@@ -216,9 +233,9 @@ export default function Feature({
             layer?.layer?.type === "simple" && !!layer?.layer?.["3dtiles"]?.specularEnvironmentMaps;
 
           // "noFeature" component should be recreated when the following value is changed.
-          // data.url, isVisible
+          // data source, Cesium Ion token, isVisible
           const key =
-            urlMD5 +
+            dataSourceKey +
             generateIDWithMD5(
               `${
                 layer?.id || ""
@@ -238,7 +255,7 @@ export default function Feature({
         })}
       </>
     );
-  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, urlMD5, props]);
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, dataSourceKey, props]);
 
   return (
     <>

package/src/engines/Cesium/Feature/utils.tsx

@@ -16,16 +16,17 @@ import {
   Primitive,
   GroundPrimitive,
 } from "cesium";
-import md5 from "js-md5";
-import { pick } from "lodash-es";
+import { md5 } from "js-md5";
+import { cloneDeep, pick } from "lodash-es";
 import {
   ComponentProps,
   ComponentType,
   ForwardedRef,
   forwardRef,
+  useCallback,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useState,
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
@@ -86,10 +87,11 @@ function EntityExtComponent(
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
 ) {
-  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+  const [entity, setEntity] = useState<CesiumComponentRef<CesiumEntity> | null>(null);
 
   useLayoutEffect(() => {
-    attachTag(r.current?.cesiumElement, {
+    if (!entity?.cesiumElement) return;
+    attachTag(entity.cesiumElement, {
       layerId: layerId || props.id,
       featureId,
       draggable,
@@ -105,10 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current?.cesiumElement,
+    entity,
   ]);
 
-  return <Entity ref={composeRefs(ref, r)} {...props} />;
+  const handleRef = useCallback((r: CesiumComponentRef<CesiumEntity>) => setEntity(r), []);
+
+  return <Entity ref={composeRefs(ref, handleRef)} {...props} />;
 }
 
 export function attachTag(
@@ -232,13 +236,20 @@ export const extractSimpleLayer = (
   if (l?.type !== "simple") {
     return;
   }
-  return l;
+  // Proxy object lead to issues when creating mvt imagery provider, so convert to plain object
+  // Not sure for other types, but to keep consistency, convert all simple layers here
+  // It should be okey since simple layer data is supposed to be simple enough and computed data should not be included
+  return toPlainObject(l);
 };
 
 export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | undefined => {
   return extractSimpleLayer(layer)?.data;
 };
 
+export const toPlainObject = <T,>(obj: T): T => {
+  return cloneDeep(obj);
+};
+
 export const toColor = (c?: string) => {
   if (!c || typeof c !== "string") return undefined;
 
@@ -274,10 +285,7 @@ export const toDistanceDisplayCondition = (
 };
 
 export const generateIDWithMD5 = (id: string) => {
-  const hash = md5.create();
-  hash.update(id);
-
-  return hash.hex();
+  return md5(id);
 };
 
 export const usePick = <T extends object, U extends keyof T>(

package/src/engines/Cesium/PostProcesses/hbao/AmbientOcclusion.tsx

@@ -12,8 +12,7 @@ import {
 } from "./createAmbientOcclusionStage";
 
 export interface AmbientOcclusionProps
-  extends Omit<AmbientOcclusionStageOptions, "prefix">,
-    Partial<AmbientOcclusionStageUniforms> {
+  extends Omit<AmbientOcclusionStageOptions, "prefix">, Partial<AmbientOcclusionStageUniforms> {
   enabled?: boolean;
 }
 
@@ -83,7 +82,11 @@ export const AmbientOcclusionStage = ({
 
   usePreRender(() => {
     const frustum = scene?.camera.frustum;
-    if (frustum instanceof PerspectiveFrustum) {
+    if (
+      frustum instanceof PerspectiveFrustum &&
+      frustum.fovy !== undefined &&
+      frustum.aspectRatio !== undefined
+    ) {
       const cotFovy = 1 / Math.tan(frustum.fovy / 2);
       stage.uniforms.focalLength.x = cotFovy * frustum.aspectRatio;
       stage.uniforms.focalLength.y = cotFovy;
@@ -111,7 +114,7 @@ export const AmbientOcclusion: FC<AmbientOcclusionProps> = props => {
     // Screen-space camera controller should detect collision
     const cameraHeight = scene.camera.positionCartographic.height - globeHeight;
     const frustum = scene?.camera.frustum;
-    if (frustum instanceof PerspectiveFrustum) {
+    if (frustum instanceof PerspectiveFrustum && frustum.fov !== undefined) {
       scene.camera.frustum.near =
         CesiumMath.clamp(cameraHeight - 1, 1, 5) / Math.tan(frustum.fov / 2);
     }

package/src/engines/Cesium/Sketch/ControlPoint.tsx

@@ -5,37 +5,42 @@ import {
   type PositionProperty,
   type Property,
 } from "@cesium/engine";
-import { useMemo, useRef, type FC } from "react";
+import { useCallback, useMemo, useRef, type FC } from "react";
 import { Entity } from "resium";
 import invariant from "tiny-invariant";
 
 import { useConstant } from "../../../utils";
 
-let image: HTMLCanvasElement | undefined;
+import { ADDING_POINT_COLOR, DEFAULT_EDIT_COLOR, SELECTED_EDIT_COLOR } from "./constants";
 
-function getImage(): HTMLCanvasElement {
-  if (image != null) {
-    return image;
-  }
-  image = document.createElement("canvas");
-  image.width = 16;
-  image.height = 16;
-  const context = image.getContext("2d");
-  invariant(context != null);
-  context.fillStyle = "white";
-  context.fillRect(3, 3, 10, 10);
-  context.strokeStyle = "black";
-  context.lineWidth = 2;
-  context.strokeRect(3, 3, 10, 10);
-  return image;
-}
+import { ControlPointMouseEventHandler } from ".";
+
+let drawPointImage: HTMLCanvasElement | undefined;
+let editPointImage: HTMLCanvasElement | undefined;
+let selectedPointImage: HTMLCanvasElement | undefined;
+let addingPointImage: HTMLCanvasElement | undefined;
 
 export interface ControlPointProps {
   position: Property | Cartesian3;
   clampToGround?: boolean;
+  index: number;
+  isEditing?: boolean;
+  isSelected?: boolean;
+  isAddingPoint?: boolean;
+  isExtrudedControlPoint?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround = false }) => {
+export const ControlPoint: FC<ControlPointProps> = ({
+  position,
+  clampToGround = false,
+  index,
+  isEditing,
+  isSelected,
+  isAddingPoint,
+  isExtrudedControlPoint,
+  handleControlPointMouseEvent,
+}) => {
   const positionRef = useRef(position);
   positionRef.current = position;
   const positionProperty = useConstant(
@@ -53,15 +58,114 @@ export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround =
     () => ({
       position: positionProperty,
       billboard: {
-        image: getImage(),
-        width: 8,
-        height: 8,
+        image: isEditing
+          ? isAddingPoint
+            ? getAddingPointImage()
+            : isSelected
+              ? getSelectedPointImage()
+              : getEditPointImage()
+          : getDrawPointImage(),
+        width: isEditing ? 16 : 8,
+        height: isEditing ? 16 : 8,
         heightReference: clampToGround ? HeightReference.CLAMP_TO_GROUND : HeightReference.NONE,
         disableDepthTestDistance: Infinity,
       },
     }),
-    [clampToGround, positionProperty],
+    [clampToGround, positionProperty, isAddingPoint, isEditing, isSelected],
   );
 
-  return <Entity {...options} />;
+  const handleMouseDown = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "mousedown");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  const handleMouseClick = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "click");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  return <Entity {...options} onMouseDown={handleMouseDown} onClick={handleMouseClick} />;
 };
+
+function getDrawPointImage(): HTMLCanvasElement {
+  if (drawPointImage != null) {
+    return drawPointImage;
+  }
+  drawPointImage = document.createElement("canvas");
+  drawPointImage.width = 16;
+  drawPointImage.height = 16;
+  const ctx = drawPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.fillStyle = "white";
+  ctx.fillRect(3, 3, 10, 10);
+  ctx.strokeStyle = "black";
+  ctx.lineWidth = 2;
+  ctx.strokeRect(3, 3, 10, 10);
+  return drawPointImage;
+}
+
+function getEditPointImage(): HTMLCanvasElement {
+  return getImage(editPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: DEFAULT_EDIT_COLOR,
+  });
+}
+
+function getSelectedPointImage(): HTMLCanvasElement {
+  return getImage(selectedPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: SELECTED_EDIT_COLOR,
+  });
+}
+
+function getAddingPointImage(): HTMLCanvasElement {
+  if (addingPointImage != null) {
+    return addingPointImage;
+  }
+  addingPointImage = document.createElement("canvas");
+  addingPointImage.width = 32;
+  addingPointImage.height = 32;
+  const ctx = addingPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(16, 16, 12, 0, 2 * Math.PI);
+  ctx.fillStyle = "white";
+  ctx.fill();
+  ctx.strokeStyle = ADDING_POINT_COLOR;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(16, 8);
+  ctx.lineTo(16, 24);
+  ctx.stroke();
+  ctx.moveTo(8, 16);
+  ctx.lineTo(24, 16);
+  ctx.stroke();
+  return addingPointImage;
+}
+
+function getImage(
+  canvas: HTMLCanvasElement | undefined,
+  options: {
+    size: number;
+    color: string;
+    strokeColor: string;
+  },
+): HTMLCanvasElement {
+  if (canvas != null) {
+    return canvas;
+  }
+  canvas = document.createElement("canvas");
+  canvas.width = options.size;
+  canvas.height = options.size;
+  const ctx = canvas.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(options.size / 2, options.size / 2, options.size / 2 - 4, 0, 2 * Math.PI);
+  ctx.fillStyle = options.color;
+  ctx.fill();
+  ctx.strokeStyle = options.strokeColor;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  return canvas;
+}

package/src/engines/Cesium/Sketch/ExtrudedControlPoints.tsx

@@ -1,46 +1,91 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
-import { useCesium } from "resium";
-import invariant from "tiny-invariant";
 
+import { Position3d } from "../../../types";
+
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { ExtrudedMeasurement } from "./ExtrudedMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface ExtrudedControlPointsProps {
   geometryOptions: GeometryOptions;
   extrudedHeight: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  catchedExtrudedPoint?: boolean;
   color?: Color;
+  isEditing?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-const cartesianScratch = new Cartesian3();
-
 const ExtrudedControlPoints: FC<ExtrudedControlPointsProps> = memo(
-  ({ geometryOptions: { controlPoints }, extrudedHeight, color }) => {
-    const { viewer } = useCesium();
+  ({
+    geometryOptions: { controlPoints, type },
+    extrudedHeight,
+    color,
+    isEditing,
+    extrudedPoint: extrudedPointPosition,
+    centroidBasePoint: extrudeBasePointPosition,
+    centroidExtrudedPoint: extrudeControlPointPosition,
+    catchedExtrudedPoint,
+    handleControlPointMouseEvent,
+  }) => {
     const controlPoint = controlPoints[controlPoints.length - 1];
-    const normal = viewer?.scene?.globe.ellipsoid.geodeticSurfaceNormal(
-      controlPoint,
-      cartesianScratch,
-    );
 
-    invariant(normal !== undefined);
-    const extrudedPoint = Cartesian3.add(
-      controlPoint,
-      Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
-      cartesianScratch,
-    );
+    const extrudedPoint = extrudedPointPosition
+      ? new Cartesian3(...extrudedPointPosition)
+      : undefined;
+
+    const heightBasePoint = extrudeBasePointPosition
+      ? new Cartesian3(...extrudeBasePointPosition)
+      : undefined;
+
+    const centroidExtrudedPoint = extrudeControlPointPosition
+      ? new Cartesian3(...extrudeControlPointPosition)
+      : undefined;
 
     return (
       <>
-        <ControlPoint position={controlPoint} clampToGround />
-        <ControlPoint position={extrudedPoint} />
-        <ExtrudedMeasurement
-          a={controlPoint}
-          b={extrudedPoint}
-          extrudedHeight={extrudedHeight}
-          color={color}
-        />
+        {extrudedPoint && (
+          <>
+            <ControlPoint
+              index={-1}
+              position={extrudedPoint}
+              isEditing={isEditing}
+              isExtrudedControlPoint
+              handleControlPointMouseEvent={handleControlPointMouseEvent}
+            />
+            {(!isEditing || catchedExtrudedPoint) && (
+              <ExtrudedMeasurement
+                a={controlPoint}
+                b={extrudedPoint}
+                extrudedHeight={extrudedHeight}
+                color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
+                showLine={type !== "extrudedPolygon"}
+              />
+            )}
+          </>
+        )}
+        {heightBasePoint && (
+          <ControlPoint
+            index={-1}
+            position={heightBasePoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
+        {centroidExtrudedPoint && (
+          <ControlPoint
+            index={-1}
+            position={centroidExtrudedPoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
       </>
     );
   },

package/src/engines/Cesium/Sketch/ExtrudedMeasurement.tsx

@@ -46,6 +46,7 @@ export interface ExtrudedMeasurementProps {
   b: Cartesian3;
   extrudedHeight: number;
   color?: Color;
+  showLine?: boolean;
 }
 
 export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
@@ -53,6 +54,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
   b,
   extrudedHeight,
   color,
+  showLine,
 }) => {
   const position = useConstant(() => new Cartesian3());
   return (
@@ -64,7 +66,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
             : `${(extrudedHeight / 1000).toFixed(1)} km`}
         </MeasurementText>
       </ScreenSpaceElement>
-      <MeasurementLine a={a} b={b} color={color} />
+      {showLine && <MeasurementLine a={a} b={b} color={color} />}
     </>
   );
 };

package/src/engines/Cesium/Sketch/ExtrudedPolygonEntity.tsx

@@ -1,10 +1,10 @@
 import {
   CallbackProperty,
   ClassificationType,
+  Color,
   ColorMaterialProperty,
   HeightReference,
   ShadowMode,
-  type Color,
   type PolygonHierarchy,
 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
@@ -12,60 +12,60 @@ import { useMemo, useRef, type FC } from "react";
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface ExtrudedPolygonEntityProps {
-  dynamic?: boolean;
   id?: string;
   hierarchy: PolygonHierarchy;
   extrudedHeight: number;
   color?: Color;
   disableShadow?: boolean;
-  enableRelativeHeight?: boolean;
+  isEditing?: boolean;
 }
 
 export const ExtrudedPolygonEntity: FC<ExtrudedPolygonEntityProps> = ({
-  dynamic = false,
   id,
   hierarchy: hierarchyProp,
   extrudedHeight: extrudedHeightProp,
   color,
   disableShadow = false,
-  enableRelativeHeight = false,
+  isEditing,
 }) => {
   const hierarchyRef = useRef(hierarchyProp);
   hierarchyRef.current = hierarchyProp;
   const hierarchyProperty = useConstant(
     () => new CallbackProperty(() => hierarchyRef.current, false),
   );
-  const hierarchy = dynamic ? hierarchyProperty : hierarchyProp;
+  const hierarchy = hierarchyProperty;
 
   const extrudedHeightRef = useRef(extrudedHeightProp);
   extrudedHeightRef.current = extrudedHeightProp;
   const extrudedHeightProperty = useConstant(
     () => new CallbackProperty(() => extrudedHeightRef.current, false),
   );
-  const extrudedHeight = dynamic ? extrudedHeightProperty : extrudedHeightProp;
+  const extrudedHeight = extrudedHeightProperty;
 
   const options = useMemo(
     (): EntityProps => ({
       polygon: {
         hierarchy,
+        heightReference: HeightReference.RELATIVE_TO_TERRAIN,
         extrudedHeight,
-        extrudedHeightReference: HeightReference.RELATIVE_TO_GROUND,
+        extrudedHeightReference: HeightReference.RELATIVE_TO_TERRAIN,
+        // extrudedHeightReference: HeightReference.NONE,
         fill: true,
         outline: true,
         outlineWidth: 1,
-        outlineColor: color?.withAlpha(1),
-        material: new ColorMaterialProperty(color),
+        outlineColor: isEditing
+          ? Color.fromCssColorString(DEFAULT_EDIT_COLOR)
+          : color?.withAlpha(1),
+        material: new ColorMaterialProperty(isEditing ? color?.withAlpha(0.2) : color),
         classificationType: ClassificationType.TERRAIN,
         shadows: disableShadow ? ShadowMode.DISABLED : ShadowMode.ENABLED,
-        ...(enableRelativeHeight
-          ? { height: 0, heightReference: HeightReference.RELATIVE_TO_GROUND }
-          : undefined),
       },
     }),
-    [extrudedHeight, disableShadow, hierarchy, color, enableRelativeHeight],
+    [extrudedHeight, disableShadow, hierarchy, color, isEditing],
   );
 
   const { requestRender } = useContext();

package/src/engines/Cesium/Sketch/PolylineEntity.tsx

@@ -1,21 +1,24 @@
-import { CallbackProperty, ClassificationType, type Cartesian3, type Color } from "@cesium/engine";
+import { CallbackProperty, ClassificationType, Color, type Cartesian3 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
 
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface PolylineEntityProps {
   dynamic?: boolean;
   positions: Cartesian3[];
   color?: Color;
+  isEditing?: boolean;
 }
 
 export const PolylineEntity: FC<PolylineEntityProps> = ({
   dynamic = false,
   positions: positionsProp,
   color,
+  isEditing,
 }) => {
   const positionsRef = useRef(positionsProp);
   positionsRef.current = positionsProp;
@@ -28,13 +31,13 @@ export const PolylineEntity: FC<PolylineEntityProps> = ({
     (): EntityProps => ({
       polyline: {
         positions,
-        width: 1.5,
-        material: color,
+        width: isEditing ? 1.5 : 1.5,
+        material: isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color,
         classificationType: ClassificationType.TERRAIN,
         clampToGround: true,
       },
     }),
-    [color, positions],
+    [color, positions, isEditing],
   );
 
   const { requestRender } = useContext();