feat(web): support edit sketch geometry on editor

web/package.json

@@ -124,7 +124,7 @@
     "@lexical/utils": "0.12.0",
     "@monaco-editor/react": "4.6.0",
     "@popperjs/core": "2.11.8",
-    "@reearth/core": "0.0.7-alpha.14",
+    "@reearth/core": "0.0.7-alpha.15",
     "@rot1024/use-transition": "1.0.0",
     "@sentry/browser": "7.77.0",
     "@seznam/compose-react-refs": "1.0.6",

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/FeatureInspector/index.tsx

@@ -1,4 +1,4 @@
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import "react18-json-view/src/style.css";
 import "react18-json-view/src/dark.css";
 
@@ -19,12 +19,16 @@
   selectedFeature?: {
     id: string;
     geometry: Geometry | undefined;
     properties: any;
   };
   layer?: NLSLayer;
   sketchFeature?: SketchFeature;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
   onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
+  isEditingGeometry?: boolean;
+  onSketchGeometryEditStart?: () => void;
+  onSketchGeometryEditApply?: () => void;
+  onSketchGeometryEditCancel?: () => void;
 };
 
 export type ValueProp = string | number | boolean | undefined;
@@ -40,7 +44,11 @@
   layer,
   sketchFeature,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete
+  onGeoJsonFeatureDelete,
+  isEditingGeometry,
+  onSketchGeometryEditStart,
+  onSketchGeometryEditApply,
+  onSketchGeometryEditCancel
 }) => {
   const t = useT();
   const theme = useTheme();
@@ -110,6 +118,7 @@
       newProperties,
       ...fields.map((f) => ({ [f.title]: f.value }))
     );
+
     onGeoJsonFeatureUpdate?.({
       layerId: layer.id,
       featureId: sketchFeature.id,
@@ -144,6 +153,42 @@
 
   return (
     <Wrapper>
+      {!!layer?.isSketch && sketchFeature?.id && (
+        <SketchFeatureButtons>
+          {isEditingGeometry ? (
+            <>
+              <Button
+                onClick={onSketchGeometryEditApply}
+                size="small"
+                icon="check"
+                appearance="primary"
+                extendWidth
+              />
+              <Button
+                onClick={onSketchGeometryEditCancel}
+                size="small"
+                icon="close"
+                extendWidth
+              />
+            </>
+          ) : (
+            <>
+              <Button
+                onClick={onSketchGeometryEditStart}
+                size="small"
+                icon="pencilLine"
+                extendWidth
+              />
+              <Button
+                onClick={handleDeleteSketchFeature}
+                size="small"
+                icon="trash"
+                extendWidth
+              />
+            </>
+          )}
+        </SketchFeatureButtons>
+      )}
       {!!layer?.isSketch && (
         <Collapse
           title={t("Custom Properties")}
@@ -208,15 +253,6 @@
           />
         </ValueWrapper>
       </Collapse>
-      {!!layer?.isSketch && sketchFeature?.id && (
-        <Button
-          title={t("Delete Feature")}
-          onClick={handleDeleteSketchFeature}
-          size="small"
-          icon="trash"
-          extendWidth
-        />
-      )}
     </Wrapper>
   );
 };
@@ -244,3 +280,9 @@
   background: theme.bg[1],
   padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`
 }));
+
+const SketchFeatureButtons = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  gap: theme.spacing.small
+}));

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx

@@ -4,6 +4,7 @@ import {
   GeoJsonFeatureUpdateProps
 } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
+import { SketchEditingFeature } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle as LayerStyleType } from "@reearth/services/api/layerStyleApi/utils";
 import { FC, useCallback, useMemo, useState } from "react";
@@ -26,6 +27,10 @@ type Props = {
   onLayerConfigUpdate?: (inp: LayerConfigUpdateProps) => void;
   onGeoJsonFeatureUpdate?: (inp: GeoJsonFeatureUpdateProps) => void;
   onGeoJsonFeatureDelete?: (inp: GeoJsonFeatureDeleteProps) => void;
+  sketchEditingFeature?: SketchEditingFeature;
+  onSketchGeometryEditStart?: () => void;
+  onSketchGeometryEditCancel?: () => void;
+  onSketchGeometryEditApply?: () => void;
 };
 
 const InspectorTabs: FC<Props> = ({
@@ -35,7 +40,11 @@ const InspectorTabs: FC<Props> = ({
   sceneId,
   onLayerConfigUpdate,
   onGeoJsonFeatureUpdate,
-  onGeoJsonFeatureDelete
+  onGeoJsonFeatureDelete,
+  sketchEditingFeature,
+  onSketchGeometryEditStart,
+  onSketchGeometryEditCancel,
+  onSketchGeometryEditApply
 }) => {
   const selectedFeature = useMemo(() => {
     if (!selectedLayer?.computedFeature?.id) return;
@@ -87,8 +96,15 @@ const InspectorTabs: FC<Props> = ({
             selectedFeature={selectedFeature}
             layer={selectedLayer?.layer}
             sketchFeature={selectedSketchFeature}
+            isEditingGeometry={
+              selectedSketchFeature?.properties?.id ===
+              sketchEditingFeature?.feature?.id
+            }
             onGeoJsonFeatureUpdate={onGeoJsonFeatureUpdate}
             onGeoJsonFeatureDelete={onGeoJsonFeatureDelete}
+            onSketchGeometryEditStart={onSketchGeometryEditStart}
+            onSketchGeometryEditApply={onSketchGeometryEditApply}
+            onSketchGeometryEditCancel={onSketchGeometryEditCancel}
           />
         )
       },
@@ -125,7 +141,11 @@ const InspectorTabs: FC<Props> = ({
       sceneId,
       onLayerConfigUpdate,
       onGeoJsonFeatureUpdate,
-      onGeoJsonFeatureDelete
+      onGeoJsonFeatureDelete,
+      sketchEditingFeature,
+      onSketchGeometryEditStart,
+      onSketchGeometryEditCancel,
+      onSketchGeometryEditApply
     ]
   );
 

web/src/beta/features/Editor/Map/InspectorPanel/index.tsx

@@ -18,10 +18,14 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
     selectedSceneSetting,
     sceneSettings,
     selectedLayer,
+    sketchEditingFeature,
     handleFlyTo,
     handleLayerConfigUpdate,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete
+    handleGeoJsonFeatureDelete,
+    handleSketchGeometryEditStart,
+    handleSketchGeometryEditCancel,
+    handleSketchGeometryEditApply
   } = useMapPage();
 
   const t = useT();
@@ -57,6 +61,10 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
           onLayerConfigUpdate={handleLayerConfigUpdate}
           onGeoJsonFeatureUpdate={handleGeoJsonFeatureUpdate}
           onGeoJsonFeatureDelete={handleGeoJsonFeatureDelete}
+          sketchEditingFeature={sketchEditingFeature}
+          onSketchGeometryEditStart={handleSketchGeometryEditStart}
+          onSketchGeometryEditCancel={handleSketchGeometryEditCancel}
+          onSketchGeometryEditApply={handleSketchGeometryEditApply}
         />
       )}
     </Panel>

web/src/beta/features/Editor/Map/context.tsx

@@ -1,5 +1,5 @@
 import { AreaSize } from "@reearth/beta/ui/layout";
-import { FlyTo, SketchType } from "@reearth/core";
+import { FlyTo, SketchEditingFeature, SketchType } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 import { Item } from "@reearth/services/api/propertyApi/utils";
@@ -48,6 +48,10 @@ export interface MapPageContextType {
   sketchEnabled: boolean;
   sketchType: SketchType | undefined;
   handleSketchTypeChange: (type: SketchType | undefined) => void;
+  sketchEditingFeature?: SketchEditingFeature;
+  handleSketchGeometryEditStart: () => void;
+  handleSketchGeometryEditCancel: () => void;
+  handleSketchGeometryEditApply: () => void;
   sceneSettings?: Item[];
   layerStyles?: LayerStyle[];
   sceneId?: string;

web/src/beta/features/Editor/Visualizer/index.tsx

@@ -32,8 +32,10 @@ export type Props = {
   onStoryBlockMove: (id: string, targetId: number, blockId: string) => void;
   onSketchTypeChange?: (type: SketchType | undefined) => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
   onVisualizerReady: (value: boolean) => void;
   onCoreLayerSelect: (props: LayerSelectProps) => void;
+  onCoreAPIReady?: () => void;
   setSelectedStoryPageId: (value: string | undefined) => void;
   selectWidgetArea: (
     update?: SetStateAction<WidgetAreaState | undefined>
@@ -57,8 +59,10 @@ const EditorVisualizer: React.FC<Props> = ({
   onStoryBlockMove: handleStoryBlockMove,
   onSketchTypeChange,
   onSketchFeatureCreate,
+  onSketchFeatureUpdate,
   onVisualizerReady,
   onCoreLayerSelect,
+  onCoreAPIReady,
   setSelectedStoryPageId,
   selectWidgetArea
 }) => {
@@ -126,7 +130,9 @@ const EditorVisualizer: React.FC<Props> = ({
       handleZoomToLayer={zoomToLayer}
       handleSketchTypeChange={onSketchTypeChange}
       handleSketchFeatureCreate={onSketchFeatureCreate}
+      handleSketchFeatureUpdate={onSketchFeatureUpdate}
       handleMount={handleMount}
+      handleCoreAPIReady={onCoreAPIReady}
       // story
       showStoryPanel={showStoryPanel}
       storyPanelRef={storyPanelRef}

web/src/beta/features/Editor/hooks/index.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { Tab } from "../../Navbar";
 import { MapPageContextType } from "../Map/context";
@@ -59,13 +59,19 @@ export default ({ sceneId, projectId, tab }: Props) => {
   const {
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     sketchType,
     handleGeoJsonFeatureUpdate,
-    handleGeoJsonFeatureDelete
+    handleGeoJsonFeatureDelete,
+    sketchEditingFeature,
+    handleSketchGeometryEditStart,
+    handleSketchGeometryEditCancel,
+    handleSketchGeometryEditApply,
+    initSketch
   } = useSketch({
     tab,
     nlsLayers,
-    selectedLayer: selectedLayer?.layer,
+    selectedLayer,
     ignoreCoreLayerUnselect,
     visualizerRef
   });
@@ -110,7 +116,9 @@ export default ({ sceneId, projectId, tab }: Props) => {
     tab,
     handleLayerSelect,
     handleCoreLayerSelect,
-    handleSceneSettingSelect
+    handleSceneSettingSelect,
+    handleSketchTypeChange,
+    handleSketchGeometryEditCancel
   });
 
   const {
@@ -162,6 +170,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
       sketchEnabled: !!selectedLayer?.layer?.isSketch,
       sketchType,
       handleSketchTypeChange,
+      sketchEditingFeature,
+      handleSketchGeometryEditStart,
+      handleSketchGeometryEditCancel,
+      handleSketchGeometryEditApply,
       sceneSettings,
       layerStyles,
       sceneId,
@@ -198,6 +210,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
       handleFlyTo,
       sketchType,
       handleSketchTypeChange,
+      sketchEditingFeature,
+      handleSketchGeometryEditStart,
+      handleSketchGeometryEditCancel,
+      handleSketchGeometryEditApply,
       sceneSettings,
       layerStyles,
       sceneId,
@@ -297,6 +313,10 @@ export default ({ sceneId, projectId, tab }: Props) => {
     ]
   );
 
+  const handleCoreAPIReady = useCallback(() => {
+    initSketch();
+  }, [initSketch]);
+
   return {
     visualizerSize,
     isVisualizerResizing,
@@ -311,6 +331,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleStoryBlockMove,
     handleSketchTypeChange,
     handleSketchFeatureCreate,
+    handleSketchFeatureUpdate,
     handleIsVisualizerUpdate,
     handleCoreLayerSelectFromUI,
     selectStoryPage,
@@ -329,6 +350,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     layerStyles,
     layers: nlsLayers,
     layerId,
-    handleCustomPropertySchemaUpdate
+    handleCustomPropertySchemaUpdate,
+    handleCoreAPIReady
   };
 };