@reearth/core 0.0.7-alpha.14 → 0.0.7-alpha.16

package/src/Map/Sketch/useSketchFeature.ts

@@ -0,0 +1,198 @@
+import { Dispatch, RefObject, SetStateAction, useCallback } from "react";
+
+import { LazyLayer } from "../Layers";
+import { LayersRef } from "../types";
+
+import { SketchEventProps, SketchFeature, SketchOptions, SketchType } from "./types";
+
+import { OnLayerSelectType } from ".";
+
+type Props = {
+  sketchOptions: SketchOptions;
+  from: "editor" | "plugin";
+  updateType: Dispatch<SetStateAction<SketchType | undefined>>;
+  layersRef: RefObject<LayersRef>;
+  pluginSketchLayerCreate: (feature: SketchFeature) => {
+    layerId: string | undefined;
+    featureId: string;
+  };
+  pluginSketchLayerFeatureAdd: (
+    layer: LazyLayer,
+    feature: SketchFeature,
+  ) =>
+    | {
+        layerId?: undefined;
+        featureId?: undefined;
+      }
+    | {
+        layerId: string;
+        featureId: string;
+      };
+  pluginSketchLayerFeatureUpdate: (
+    layer: LazyLayer,
+    feature: SketchFeature,
+  ) =>
+    | {
+        layerId?: undefined;
+        featureId?: undefined;
+      }
+    | {
+        layerId: string;
+        featureId: string;
+      };
+  pluginSketchLayerFeatureRemove: (layer: LazyLayer, featureId: string) => void;
+  onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature) => void;
+  onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
+  onSketchPluginFeatureCreate?: (props: SketchEventProps) => void;
+  onSketchPluginFeatureUpdate?: (props: SketchEventProps) => void;
+  onSketchPluginFeatureDelete?: (props: { layerId: string; featureId: string }) => void;
+  onLayerSelect?: OnLayerSelectType;
+};
+
+export default ({
+  sketchOptions,
+  from,
+  updateType,
+  layersRef,
+  onSketchFeatureCreate,
+  pluginSketchLayerCreate,
+  pluginSketchLayerFeatureAdd,
+  pluginSketchLayerFeatureUpdate,
+  pluginSketchLayerFeatureRemove,
+  onSketchPluginFeatureCreate,
+  onSketchPluginFeatureUpdate,
+  onSketchPluginFeatureDelete,
+  onSketchFeatureUpdate,
+  onSketchFeatureDelete,
+  onLayerSelect,
+}: Props) => {
+  const handleFeatureCreate = useCallback(
+    (feature: SketchFeature) => {
+      if (sketchOptions.autoResetInteractionMode) {
+        updateType(undefined);
+      }
+
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureCreate?.(feature);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const selectedLayer = layersRef.current?.selectedLayer();
+        const { layerId, featureId } =
+          !layersRef?.current?.isTempLayer(selectedLayer?.id) ||
+          selectedLayer?.type !== "simple" ||
+          selectedLayer.computed?.layer.type !== "simple"
+            ? pluginSketchLayerCreate(feature)
+            : pluginSketchLayerFeatureAdd(selectedLayer, feature);
+
+        if (layerId && featureId) {
+          requestAnimationFrame(() => {
+            onLayerSelect?.(
+              layerId,
+              featureId,
+              layerId
+                ? () =>
+                    new Promise(resolve => {
+                      // Wait until computed feature is ready
+                      queueMicrotask(() => {
+                        resolve(layersRef.current?.findById?.(layerId)?.computed);
+                      });
+                    })
+                : undefined,
+              undefined,
+              undefined,
+            );
+          });
+
+          onSketchPluginFeatureCreate?.({ layerId, featureId, feature });
+        }
+      } else {
+        onSketchPluginFeatureCreate?.({ feature });
+      }
+    },
+    [
+      layersRef,
+      from,
+      sketchOptions.dataOnly,
+      sketchOptions.autoResetInteractionMode,
+      pluginSketchLayerCreate,
+      pluginSketchLayerFeatureAdd,
+      onSketchFeatureCreate,
+      onSketchPluginFeatureCreate,
+      onLayerSelect,
+      updateType,
+    ],
+  );
+
+  const handleFeatureUpdate = useCallback(
+    (feature: SketchFeature) => {
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureUpdate?.(feature);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const selectedLayer = layersRef.current?.selectedLayer();
+        if (!selectedLayer) return;
+
+        const { layerId, featureId } = pluginSketchLayerFeatureUpdate(selectedLayer, feature);
+
+        if (layerId && featureId) {
+          setTimeout(() => {
+            layersRef.current?.selectFeatures([
+              {
+                layerId,
+                featureId: [featureId],
+              },
+            ]);
+          }, 20);
+
+          onSketchPluginFeatureUpdate?.({ layerId, featureId, feature });
+        }
+      } else {
+        onSketchPluginFeatureUpdate?.({ feature });
+      }
+    },
+    [
+      from,
+      sketchOptions.dataOnly,
+      layersRef,
+      pluginSketchLayerFeatureUpdate,
+      onSketchFeatureUpdate,
+      onSketchPluginFeatureUpdate,
+    ],
+  );
+
+  const handleFeatureDelete = useCallback(
+    (layerId: string, featureId: string) => {
+      if (from === "editor" && sketchOptions.dataOnly) {
+        onSketchFeatureDelete?.(layerId, featureId);
+        return;
+      }
+
+      if (!sketchOptions.dataOnly) {
+        const layer = layersRef.current?.findById(layerId);
+        if (!layer) return;
+        pluginSketchLayerFeatureRemove(layer, featureId);
+        layersRef.current?.selectFeatures([]);
+      }
+      onSketchPluginFeatureDelete?.({ layerId, featureId });
+    },
+    [
+      from,
+      sketchOptions.dataOnly,
+      layersRef,
+      pluginSketchLayerFeatureRemove,
+      onSketchFeatureDelete,
+      onSketchPluginFeatureDelete,
+    ],
+  );
+
+  return {
+    handleFeatureCreate,
+    handleFeatureUpdate,
+    handleFeatureDelete,
+  };
+};

package/src/Map/hooks.ts

@@ -13,7 +13,7 @@ import type {
 } from "./types";
 import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
 
-import { CursorType } from ".";
+import { CursorType, SketchEditingFeature } from ".";
 
 export type { MapRef } from "./ref";
 
@@ -26,6 +26,8 @@ export default function ({
   timelineManagerRef,
   cursor,
   onLayerSelect,
+  onMount,
+  onAPIReady,
 }: {
   ref: Ref<MapRef>;
   timelineManagerRef?: TimelineManagerRef;
@@ -37,7 +39,10 @@ export default function ({
     options?: LayerSelectionReason,
     info?: SelectedFeatureInfo,
   ) => void;
+  onMount?: () => void;
+  onAPIReady?: () => void;
 }) {
+  const [mapAPIReady, setMapAPIReady] = useState({ engine: false, layers: false, sketch: false });
   const engineRef = useRef<EngineRef>(null);
   const layersRef = useRef<LayersRef>(null);
   const sketchRef = useRef<SketchRef>(null);
@@ -55,6 +60,12 @@ export default function ({
     [timelineManagerRef],
   );
 
+  useEffect(() => {
+    if (onAPIReady && mapAPIReady.engine && mapAPIReady.layers && mapAPIReady.sketch) {
+      onAPIReady?.();
+    }
+  }, [onAPIReady, mapAPIReady]);
+
   // selectLayer logic
   // 1. Map/hooks(here) is the source
   //    1.2 State updates propagate up, through onLayerSelect, to update
@@ -111,6 +122,21 @@ export default function ({
     }
   }, [cursor]);
 
+  const [sketchEditingFeature, setSketchEditingFeature] = useState<
+    SketchEditingFeature | undefined
+  >();
+
+  const handleEngineMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, engine: true }));
+    onMount?.();
+  }, [onMount]);
+  const handleLayersMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, layers: true }));
+  }, []);
+  const handleSketchMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, sketch: true }));
+  }, []);
+
   return {
     engineRef,
     layersRef,
@@ -119,5 +145,10 @@ export default function ({
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
   };
 }

package/src/Map/index.tsx

@@ -34,6 +34,7 @@ export type CursorType = "auto" | "grab" | "crosshair";
 export type Props = {
   engines?: Record<string, Engine>;
   engine?: string;
+  onAPIReady?: () => void;
 } & Omit<
   LayersProps,
   | "Feature"
@@ -67,7 +68,13 @@ function MapFn(
     onSketchTypeChange,
     onSketchFeatureCreate,
     onSketchPluginFeatureCreate,
+    onSketchFeatureUpdate,
+    onSketchPluginFeatureUpdate,
+    onSketchFeatureDelete,
+    onSketchPluginFeatureDelete,
     featureFlags = INTERACTION_MODES.default,
+    onMount,
+    onAPIReady,
     ...props
   }: Props,
   ref: Ref<MapRef>,
@@ -82,11 +89,18 @@ function MapFn(
     requestingRenderMode,
     handleLayerSelect,
     handleEngineLayerSelect,
+    sketchEditingFeature,
+    setSketchEditingFeature,
+    handleEngineMount,
+    handleLayersMount,
+    handleSketchMount,
   } = useHooks({
     ref,
     timelineManagerRef,
     cursor,
     onLayerSelect,
+    onMount,
+    onAPIReady,
   });
 
   const selectedLayerIds = useMemo(
@@ -111,6 +125,7 @@ function MapFn(
       timelineManagerRef={timelineManagerRef}
       onLayerSelect={handleEngineLayerSelect}
       featureFlags={featureFlags}
+      onMount={handleEngineMount}
       {...props}>
       <Layers
         ref={layersRef}
@@ -128,7 +143,9 @@ function MapFn(
         meta={props.meta}
         viewerProperty={props.property}
         requestingRenderMode={requestingRenderMode}
+        sketchEditingFeature={sketchEditingFeature}
         onLayerSelect={handleLayerSelect}
+        onMount={handleLayersMount}
       />
       <Sketch
         ref={sketchRef}
@@ -142,6 +159,13 @@ function MapFn(
         onSketchTypeChange={onSketchTypeChange}
         onSketchFeatureCreate={onSketchFeatureCreate}
         onSketchPluginFeatureCreate={onSketchPluginFeatureCreate}
+        onSketchFeatureUpdate={onSketchFeatureUpdate}
+        onSketchPluginFeatureUpdate={onSketchPluginFeatureUpdate}
+        onSketchFeatureDelete={onSketchFeatureDelete}
+        onSketchPluginFeatureDelete={onSketchPluginFeatureDelete}
+        sketchEditingFeature={sketchEditingFeature}
+        onSketchEditFeature={setSketchEditingFeature}
+        onMount={handleSketchMount}
       />
     </Engine>
   ) : null;

package/src/Map/ref.ts

@@ -82,6 +82,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   unselectFeatures: 1,
   pickManyFromViewport: 1,
   getExtrudedHeight: 1,
+  getExtrudedPoint: 1,
   getSurfaceDistance: 1,
   equalsEpsilon2d: 1,
   equalsEpsilon3d: 1,
@@ -89,6 +90,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   setCursor: 1,
   bringToFront: 1,
   sendToBack: 1,
+  calcRectangleControlPoint: 1,
 };
 
 const layersRefKeys: FunctionKeys<LayersRef> = {
@@ -104,6 +106,7 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   hide: 1,
   isLayer: 1,
   isComputedLayer: 1,
+  isTempLayer: 1,
   layers: 1,
   override: 1,
   replace: 1,
@@ -122,6 +125,11 @@ const sketchRefKeys: FunctionKeys<SketchRef> = {
   setType: 1,
   getOptions: 1,
   overrideOptions: 1,
+  editFeature: 1,
+  applyEdit: 1,
+  cancelEdit: 1,
+  deleteFeature: 1,
+  onEditFeatureChange: 1,
 };
 
 export function mapRef({

package/src/Map/types/index.ts

@@ -38,7 +38,13 @@ import type {
   LayerSelectionReason,
   Ref as LayersRef,
 } from "../Layers";
-import { SketchType, SketchOptions, SketchComponentType } from "../Sketch/types";
+import {
+  SketchType,
+  SketchOptions,
+  SketchComponentType,
+  SketchEditFeatureChangeCb,
+  SketchEditingFeature,
+} from "../Sketch/types";
 import type { TimelineManagerRef } from "../useTimelineManager";
 
 import type { SceneMode, ViewerProperty } from "./viewerProperty";
@@ -114,6 +120,10 @@ export type EngineRef = {
     position: [x: number, y: number, z: number],
     windowPosition: [x: number, y: number],
   ) => number | undefined;
+  getExtrudedPoint: (
+    position: [x: number, y: number, z: number],
+    extrutedHeight: number,
+  ) => Position3d | undefined;
   getSurfaceDistance: (point1: Cartesian3, point2: Cartesian3) => number | undefined;
   equalsEpsilon2d: (
     point1: Position2d,
@@ -196,6 +206,11 @@ export type EngineRef = {
     // TODO: Get condition as expression for plugin
     condition?: (f: PickedFeature) => boolean,
   ) => PickedFeature[] | undefined;
+  calcRectangleControlPoint: (
+    p1: Position3d,
+    p2: Position3d,
+    p3: Position3d,
+  ) => [p1: Position3d, p2: Position3d, p3: Position3d];
 } & MouseEventHandles;
 
 export type EngineProps = {
@@ -220,6 +235,7 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  displayCredits?: boolean;
   layersRef?: RefObject<LayersRef>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
@@ -243,6 +259,7 @@ export type EngineProps = {
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export type LayerEditEvent = {
@@ -360,4 +377,13 @@ export type SketchRef = {
   setType: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
   getOptions: () => SketchOptions;
   overrideOptions: (options: SketchOptions) => void;
+  editFeature: (feature: SketchEditingFeature | undefined) => void;
+  cancelEdit: (ignoreAutoReSelect?: boolean) => void;
+  applyEdit: () => void;
+  deleteFeature: (layerId: string, featureId: string) => void;
+  onEditFeatureChange: (cb: SketchEditFeatureChangeCb) => void;
+};
+
+export type Credit = {
+  html?: string;
 };

package/src/Visualizer/coreContext.tsx

@@ -26,6 +26,8 @@ type CoreContext = {
   handleCameraForceHorizontalRollChange?: (enable?: boolean) => void;
   handleInteractionModeChange?: (mode?: InteractionModeType | undefined) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureUpdate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureDelete?: (cb: SketchEventCallback) => void;
   onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
   onLayerVisibility?: (cb: (e: LayerVisibilityEvent) => void) => void;
   onLayerLoad?: (cb: (e: LayerLoadEvent) => void) => void;

package/src/Visualizer/hooks.ts

@@ -206,6 +206,25 @@ export default function useHooks(
     onSketchPluginFeatureCreateCallbacksRef.current.forEach(fn => fn(props));
   }, []);
 
+  const onSketchPluginFeatureUpdateCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureUpdate = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureUpdate = useCallback((props: SketchEventProps) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.forEach(fn => fn(props));
+  }, []);
+
+  const onSketchPluginFeatureDeleteCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureDelete = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureDeleteCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureDelete = useCallback(
+    (props: { layerId: string; featureId: string }) => {
+      onSketchPluginFeatureDeleteCallbacksRef.current.forEach(fn => fn(props));
+    },
+    [],
+  );
+
   const onSketchTypeChangeCallbacksRef = useRef<((type: SketchType | undefined) => void)[]>([]);
   const onSketchTypeChange = useCallback((cb: (type: SketchType | undefined) => void) => {
     onSketchTypeChangeCallbacksRef.current.push(cb);
@@ -256,6 +275,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       handleInteractionModeChange: changeInteractionMode,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -273,6 +294,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       onLayerEdit,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -313,6 +336,8 @@ export default function useHooks(
     handleCameraChange: changeCamera,
     handleInteractionModeChange: changeInteractionMode,
     handleSketchPluginFeatureCreate,
+    handleSketchPluginFeatureUpdate,
+    handleSketchPluginFeatureDelete,
     handleSketchTypeChange,
     handleLayerVisibility,
     handleLayerLoad,

package/src/Visualizer/index.tsx

@@ -12,6 +12,7 @@ import {
   type LatLng,
   type Cluster,
   type ComputedLayer,
+  type Credit,
 } from "../Map";
 import { SketchFeature, SketchType } from "../Map/Sketch/types";
 
@@ -46,6 +47,7 @@ export type CoreVisualizerProps = {
   ready?: boolean;
   hiddenLayers?: string[];
   zoomedLayerId?: string;
+  displayCredits?: boolean;
   onCameraChange?: (camera: Camera) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
@@ -58,7 +60,11 @@ export type CoreVisualizerProps = {
   onMount?: () => void;
   onSketchTypeChangeProp?: (type: SketchType | undefined) => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
   onInteractionModeChange?: (mode: InteractionModeType) => void;
+  onAPIReady?: () => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export const CoreVisualizer = memo(
@@ -79,6 +85,7 @@ export const CoreVisualizer = memo(
         interactionMode,
         shouldRender,
         meta,
+        displayCredits = true,
         style,
         zoomedLayerId,
         children,
@@ -90,6 +97,10 @@ export const CoreVisualizer = memo(
         onMount,
         onSketchTypeChangeProp,
         onSketchFeatureCreate,
+        onSketchFeatureUpdate,
+        onSketchFeatureDelete,
+        onAPIReady,
+        onCreditsUpdate,
       },
       ref: Ref<MapRef | null>,
     ) => {
@@ -112,6 +123,8 @@ export const CoreVisualizer = memo(
         handleCameraChange,
         handleInteractionModeChange,
         handleSketchPluginFeatureCreate,
+        handleSketchPluginFeatureUpdate,
+        handleSketchPluginFeatureDelete,
         handleSketchTypeChange,
         handleLayerVisibility,
         handleLayerLoad,
@@ -152,6 +165,7 @@ export const CoreVisualizer = memo(
                 isLayerDragging={isLayerDragging}
                 isLayerDraggable={isEditable}
                 meta={meta}
+                displayCredits={displayCredits}
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
@@ -171,6 +185,10 @@ export const CoreVisualizer = memo(
                 overrideInteractionMode={handleInteractionModeChange}
                 onSketchFeatureCreate={onSketchFeatureCreate}
                 onSketchPluginFeatureCreate={handleSketchPluginFeatureCreate}
+                onSketchFeatureUpdate={onSketchFeatureUpdate}
+                onSketchPluginFeatureUpdate={handleSketchPluginFeatureUpdate}
+                onSketchFeatureDelete={onSketchFeatureDelete}
+                onSketchPluginFeatureDelete={handleSketchPluginFeatureDelete}
                 onSketchTypeChange={handleSketchTypeChange}
                 onMount={onMount}
                 onLayerVisibility={handleLayerVisibility}
@@ -178,6 +196,8 @@ export const CoreVisualizer = memo(
                 onLayerSelectWithRectStart={handleLayerSelectWithRectStart}
                 onLayerSelectWithRectMove={handleLayerSelectWithRectMove}
                 onLayerSelectWithRectEnd={handleLayerSelectWithRectEnd}
+                onAPIReady={onAPIReady}
+                onCreditsUpdate={onCreditsUpdate}
               />
               <coreContext.Provider value={coreContextValue}>{children}</coreContext.Provider>
             </div>

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

@@ -96,6 +96,7 @@ const FEATURE_DELEGATE_THRESHOLD = 6000;
 export default function Feature({
   layer,
   isHidden,
+  sketchEditingFeature,
   ...props
 }: FeatureComponentProps): JSX.Element | null {
   const data = extractSimpleLayerData(layer);
@@ -131,7 +132,10 @@ 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 +
@@ -140,7 +144,7 @@ export default function Feature({
           f?.id ?? ""
         }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
-        }_${JSON.stringify(layer.transition) ?? ""}`,
+        }_${JSON.stringify(layer.transition) ?? ""}_${JSON.stringify(f?.geometry) ?? ""}`,
       );
 
     if (cacheable) {