fix: dnd layer on reearth/core (#440)

reearth · Feb 8, 2023 · a5a2b40 · a5a2b40
1 parent 12ce636
commit a5a2b40
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 20 deletions.
diff --git a/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts b/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts
@@ -226,13 +226,13 @@ export default (isBuilt?: boolean) => {
   }, [isBuilt, title]);
 
   const handleDropLayer = useCallback(
-    async (layerId: string, propertyKey: string, position?: LatLng) => {
+    async (propertyId: string, propertyKey: string, position?: LatLng) => {
       // propertyKey will be "default.location" for example
       const [schemaGroupId, fieldId] = propertyKey.split(".", 2);
 
       await updatePropertyValue({
         variables: {
-          propertyId: layerId,
+          propertyId,
           schemaGroupId,
           fieldId,
           type: ValueType.Latlng,

diff --git a/src/core/Map/types/index.ts b/src/core/Map/types/index.ts
@@ -103,8 +103,12 @@ export type EngineProps = {
     options?: LayerSelectionReason,
   ) => void;
   onCameraChange?: (camera: Camera) => void;
-  onLayerDrag?: (layerId: string, position: LatLng) => void;
-  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
+  onLayerDrop?: (
+    layerId: string,
+    featureId: string | undefined,
+    position: LatLng | undefined,
+  ) => void;
   onLayerEdit?: (e: LayerEditEvent) => void;
 };
 

diff --git a/src/core/Visualizer/hooks.ts b/src/core/Visualizer/hooks.ts
@@ -5,7 +5,7 @@ import { type DropOptions, useDrop } from "@reearth/util/use-dnd";
 
 import type { Block, BuiltinWidgets } from "../Crust";
 import { getBuiltinWidgetOptions } from "../Crust/Widgets/Widget";
-import type { ComputedFeature, Feature } from "../mantle";
+import type { ComputedFeature, Feature, LatLng } from "../mantle";
 import type {
   Ref as MapRef,
   LayerSelectionReason,
@@ -33,6 +33,7 @@ export default function useHooks({
   onBlockSelect,
   onCameraChange,
   onZoomToLayer,
+  onLayerDrop,
 }: {
   selectedBlockId?: string;
   camera?: Camera;
@@ -50,6 +51,7 @@ export default function useHooks({
   onBlockSelect?: (blockId?: string) => void;
   onCameraChange?: (camera: Camera) => void;
   onZoomToLayer?: (layerId: string | undefined) => void;
+  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
 }) {
   const mapRef = useRef<MapRef>(null);
 
@@ -162,6 +164,27 @@ export default function useHooks({
     }
   }, [zoomedLayerId, onZoomToLayer]);
 
+  // dnd
+  const [isLayerDragging, setIsLayerDragging] = useState(false);
+  const handleLayerDrag = useCallback(() => {
+    setIsLayerDragging(true);
+  }, []);
+  const handleLayerDrop = useCallback(
+    (layerId: string, _featureId: string | undefined, latlng: LatLng | undefined) => {
+      setIsLayerDragging(false);
+      const layer = mapRef.current?.layers.findById(layerId);
+      const propertyKey = layer?.property.default.location
+        ? "default.location"
+        : layer?.property.default.position
+        ? "default.position"
+        : undefined;
+      if (latlng && layer && layer.propertyId && propertyKey) {
+        onLayerDrop?.(layer.propertyId, propertyKey, latlng);
+      }
+    },
+    [onLayerDrop, mapRef],
+  );
+
   // shouldRender
   const shouldRender = useMemo(() => {
     const shouldWidgetAnimate = ownBuiltinWidgets?.some(
@@ -183,10 +206,13 @@ export default function useHooks({
     overriddenSceneProperty,
     isDroppable,
     infobox,
+    isLayerDragging,
     shouldRender,
     handleLayerSelect,
     handleBlockSelect: selectBlock,
     handleCameraChange: changeCamera,
+    handleLayerDrag,
+    handleLayerDrop,
     overrideSceneProperty,
     handleLayerEdit,
     onLayerEdit,

diff --git a/src/core/Visualizer/index.tsx b/src/core/Visualizer/index.tsx
@@ -55,8 +55,6 @@ export type Props = {
   sceneProperty?: SceneProperty;
   layers?: Layer[];
   clusters?: Cluster[];
-  isLayerDraggable?: boolean;
-  isLayerDragging?: boolean;
   camera?: Camera;
   meta?: Record<string, unknown>;
   style?: CSSProperties;
@@ -73,7 +71,6 @@ export type Props = {
   hiddenLayers?: string[];
   zoomedLayerId?: string;
   onCameraChange?: (camera: Camera) => void;
-  onLayerDrag?: (layerId: string, position: LatLng) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
     layerId: string | undefined,
@@ -128,16 +125,13 @@ export default function Visualizer({
   selectedLayerId,
   selectedWidgetArea,
   hiddenLayers,
-  isLayerDraggable,
-  isLayerDragging,
   camera: initialCamera,
   meta,
   style,
   pluginBaseUrl,
   pluginProperty,
   zoomedLayerId,
   layerSelectionReason,
-  onLayerDrag,
   onLayerDrop,
   onLayerSelect,
   onCameraChange,
@@ -165,11 +159,14 @@ export default function Visualizer({
     isMobile,
     overriddenSceneProperty,
     isDroppable,
+    isLayerDragging,
     infobox,
     shouldRender,
     handleLayerSelect,
     handleBlockSelect,
     handleCameraChange,
+    handleLayerDrag,
+    handleLayerDrop,
     overrideSceneProperty,
     handleLayerEdit,
     onLayerEdit,
@@ -185,6 +182,7 @@ export default function Visualizer({
     onBlockSelect,
     onCameraChange,
     onZoomToLayer,
+    onLayerDrop,
   });
 
   return (
@@ -240,8 +238,8 @@ export default function Visualizer({
         camera={camera}
         clusters={clusters}
         hiddenLayers={hiddenLayers}
-        isLayerDraggable={isLayerDraggable}
         isLayerDragging={isLayerDragging}
+        isLayerDraggable={isEditable}
         meta={meta}
         style={style}
         shouldRender={shouldRender}
@@ -252,8 +250,8 @@ export default function Visualizer({
         small={small}
         ready={ready}
         onCameraChange={handleCameraChange}
-        onLayerDrag={onLayerDrag}
-        onLayerDrop={onLayerDrop}
+        onLayerDrag={handleLayerDrag}
+        onLayerDrop={handleLayerDrop}
         onLayerSelect={handleLayerSelect}
         onLayerEdit={handleLayerEdit}
       />

diff --git a/src/core/engines/Cesium/common.ts b/src/core/engines/Cesium/common.ts
@@ -504,7 +504,7 @@ export function isSelectable(e: Entity | undefined): boolean {
 }
 
 export function isDraggable(e: Entity): string | undefined {
-  return e.properties?.getValue(new JulianDate())?.[draggableTag];
+  return e.properties?.[draggableTag];
 }
 
 export function attachTag(entity: Entity | undefined, tag: string, value: any) {

diff --git a/src/core/engines/Cesium/hooks.ts b/src/core/engines/Cesium/hooks.ts
@@ -51,8 +51,12 @@ export default ({
   meta?: Record<string, unknown>;
   onLayerSelect?: (layerId?: string, featureId?: string, options?: LayerSelectionReason) => void;
   onCameraChange?: (camera: Camera) => void;
-  onLayerDrag?: (layerId: string, position: LatLng) => void;
-  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
+  onLayerDrop?: (
+    layerId: string,
+    featureId: string | undefined,
+    position: LatLng | undefined,
+  ) => void;
   onLayerEdit?: (e: LayerEditEvent) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
@@ -292,7 +296,10 @@ export default ({
       const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
       if (!pos) return false;
 
-      onLayerDrag?.(e.id, pos);
+      const tag = getTag(e);
+      if (!tag) return false;
+
+      onLayerDrag?.(tag.layerId || "", tag.featureId, pos);
     },
     [onLayerDrag],
   );
@@ -302,9 +309,9 @@ export default ({
       const viewer = cesium.current?.cesiumElement;
       if (!viewer || viewer.isDestroyed()) return false;
 
-      const key = isDraggable(e);
+      const tag = getTag(e);
       const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
-      onLayerDrop?.(e.id, key || "", pos);
+      onLayerDrop?.(tag?.layerId || "", tag?.featureId || "", pos);
 
       return false; // let apollo-client handle optimistic updates
     },