Merge branch 'main' of github.com:reearth/reearth-visualizer into fea…

…t/project-recylebin

web/src/beta/features/AccountSetting/index.tsx

@@ -12,6 +12,8 @@ import { useWorkspace } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
 import { FC, useState } from "react";
 
+import CursorStatus from "../CursorStatus";
+
 import useHook from "./hooks";
 import PasswordModal from "./PasswordModal";
 
@@ -105,6 +107,7 @@ const AccountSetting: FC = () => {
           handleUpdateUserPassword={handleUpdateUserPassword}
         />
       </InnerPage>
+      <CursorStatus />
     </SettingBase>
   );
 };

web/src/beta/features/CursorStatus/index.tsx

@@ -0,0 +1,74 @@
+import { useHasActiveGQLTasks } from "@reearth/services/state";
+import { keyframes, styled } from "@reearth/services/theme";
+import { FC, useCallback, useEffect, useState } from "react";
+
+const offsetX = 16;
+const offsetY = 16;
+
+const CursorStatus: FC = () => {
+  const [mousePosition, setMousePosition] = useState({ x: -100, y: -100 });
+  const [inView, setInView] = useState(true);
+  const [enabled] = useHasActiveGQLTasks();
+
+  const handleMouseMove = useCallback((event: MouseEvent) => {
+    setMousePosition({
+      x: event.clientX,
+      y: event.clientY
+    });
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    setInView(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setInView(false);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseenter", handleMouseEnter);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseenter", handleMouseEnter);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [handleMouseMove, handleMouseEnter, handleMouseLeave]);
+
+  return (
+    enabled &&
+    inView && (
+      <Wrapper left={mousePosition.x + offsetX} top={mousePosition.y + offsetY}>
+        <Loader />
+      </Wrapper>
+    )
+  );
+};
+
+export default CursorStatus;
+
+const Wrapper = styled("div")<{ left: number; top: number }>(
+  ({ left, top, theme }) => ({
+    position: "absolute",
+    left: `${left}px`,
+    top: `${top}px`,
+    pointerEvents: "none",
+    zIndex: theme.zIndexes.editor.loading
+  })
+);
+
+const loaderKeyframes = keyframes`
+  100%{transform: rotate(1turn)}
+`;
+
+const loaderColor = "#ccc";
+
+const Loader = styled("div")(() => ({
+  width: 24,
+  aspectRatio: 1,
+  borderRadius: "50%",
+  background: `radial-gradient(farthest-side,${loaderColor} 100%,#0000) top/6px 6px no-repeat, conic-gradient(#0000 30%,${loaderColor})`,
+  WebkitMask: "radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0)",
+  animation: `${loaderKeyframes} 1s infinite linear`
+}));

web/src/beta/features/Dashboard/index.tsx

@@ -2,6 +2,8 @@ import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
 import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
+import CursorStatus from "../CursorStatus";
+
 import ContentsContainer from "./ContentsContainer";
 import useHooks from "./hooks";
 import LeftSidePanel from "./LeftSidePanel";
@@ -61,6 +63,7 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
         workspaceId={workspaceId}
         currentWorkspace={currentWorkspace}
       />
+      <CursorStatus />
     </Wrapper>
   );
 };

web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/ConditionsTab.tsx

@@ -28,10 +28,10 @@ type Props = {
 export const styleConditionOperators: StyleConditionOperator[] = [
   "===",
   "!==",
-  "<",
   "<=",
-  ">",
   ">=",
+  "<",
+  ">",
   "startsWith"
 ];
 

web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/Field/TypographyInput.tsx

@@ -80,12 +80,6 @@ const TypographyInput: FC<Props> = ({ value, onChange }) => {
           onChange={(v) => onChange?.({ ...value, italic: v })}
         />
       </PropertyItem>
-      <PropertyItem title={t("underline")}>
-        <BooleanSelectorField
-          value={value?.underline}
-          onChange={(v) => onChange?.({ ...value, underline: v })}
-        />
-      </PropertyItem>
     </Wrapper>
   );
 };

web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/marker.ts

@@ -97,7 +97,7 @@ export const markerNodes: AppearanceNode[] = [
     title: "Image Crop",
     field: "select",
     defaultValue: "none",
-    valueOptions: ["none", "rounded", "circle"]
+    valueOptions: ["none", "circle"]
   },
   {
     id: "imageShadow",

web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/types.ts

@@ -73,7 +73,6 @@ export type Typography = {
   fontWeight?: FontWeight;
   color?: string;
   italic?: boolean;
-  underline?: boolean;
 };
 
 export type Expression = {

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

@@ -99,7 +99,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     currentProjectType,
     handleProjectTypeChange,
     handleLayerSelectFromUI,
-    handleCoreLayerSelectFromUI,
+    handleCoreLayerSelectFromMap,
     handleSceneSettingSelectFromUI,
     dataSourceLayerCreatorShown,
     openDataSourceLayerCreator,
@@ -333,7 +333,7 @@ export default ({ sceneId, projectId, tab }: Props) => {
     handleSketchFeatureCreate,
     handleSketchFeatureUpdate,
     handleIsVisualizerUpdate,
-    handleCoreLayerSelectFromUI,
+    handleCoreLayerSelectFromMap,
     selectStoryPage,
     selectWidgetArea,
     mapPageValue,

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

@@ -120,7 +120,9 @@ export default ({
 
   useEffect(() => {
     // Workaround: in order to show the indicator of the selected sketch feature we need to unselect it first.
-    visualizerRef?.current?.layers.select(undefined);
+    if (pendingSketchSelectionRef.current) {
+      visualizerRef?.current?.layers.select(undefined);
+    }
     // Workaround: we can't get an notice from core after nlsLayers got updated.
     // Therefore we need to get and select the latest sketch feature manually delayed.
     setTimeout(() => {

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

@@ -68,7 +68,7 @@ export default ({
     ]
   );
 
-  const handleCoreLayerSelectFromUI = useCallback(
+  const handleCoreLayerSelectFromMap = useCallback(
     (props: LayerSelectProps) => {
       handleSceneSettingSelect(undefined);
       handleCoreLayerSelect(props);
@@ -142,7 +142,7 @@ export default ({
     currentProjectType,
     handleProjectTypeChange,
     handleLayerSelectFromUI,
-    handleCoreLayerSelectFromUI,
+    handleCoreLayerSelectFromMap,
     handleSceneSettingSelectFromUI,
     dataSourceLayerCreatorShown,
     openDataSourceLayerCreator,

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

@@ -14,29 +14,25 @@ export const useUISelection = ({
 }) => {
   const handleLayerStyleSelected = useCallback(
     (layerStyleId: string) => {
-      handleLayerSelect(undefined);
-      handleSceneSettingSelect(undefined);
       handleLayerStyleSelect(layerStyleId);
     },
-    [handleLayerStyleSelect, handleSceneSettingSelect, handleLayerSelect]
+    [handleLayerStyleSelect]
   );
 
   const handleLayerSelected = useCallback(
     (layerId: string) => {
-      handleLayerStyleSelect(undefined);
       handleSceneSettingSelect(undefined);
       handleLayerSelect({ layerId });
     },
-    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect]
+    [handleLayerSelect, handleSceneSettingSelect]
   );
 
   const handleSceneSettingSelected = useCallback(
     (collection?: string) => {
-      handleLayerStyleSelect(undefined);
       handleLayerSelect(undefined);
       handleSceneSettingSelect(collection);
     },
-    [handleLayerSelect, handleSceneSettingSelect, handleLayerStyleSelect]
+    [handleLayerSelect, handleSceneSettingSelect]
   );
 
   return {

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

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 import { FC } from "react";
 
+import CursorStatus from "../CursorStatus";
 import Navbar, { Tab } from "../Navbar";
 
 import useHooks from "./hooks";
@@ -42,7 +43,7 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handleSketchFeatureCreate,
     handleSketchFeatureUpdate,
     handleIsVisualizerUpdate,
-    handleCoreLayerSelectFromUI,
+    handleCoreLayerSelectFromMap,
     selectStoryPage,
     selectWidgetArea,
     mapPageValue,
@@ -92,7 +93,7 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
               onSketchFeatureCreate={handleSketchFeatureCreate}
               onSketchFeatureUpdate={handleSketchFeatureUpdate}
               onVisualizerReady={handleIsVisualizerUpdate}
-              onCoreLayerSelect={handleCoreLayerSelectFromUI}
+              onCoreLayerSelect={handleCoreLayerSelectFromMap}
               onCoreAPIReady={handleCoreAPIReady}
               setSelectedStoryPageId={selectStoryPage}
               selectWidgetArea={selectWidgetArea}
@@ -144,6 +145,7 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
             onCustomPropertySchemaUpdate={handleCustomPropertySchemaUpdate}
           />
         )}
+        <CursorStatus />
       </Wrapper>
     </DndProvider>
   );

web/src/beta/features/ProjectSettings/index.tsx

@@ -10,6 +10,8 @@ import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { useMemo } from "react";
 
+import CursorStatus from "../CursorStatus";
+
 import useHooks from "./hooks";
 import GeneralSettings from "./innerPages/GeneralSettings";
 import PluginSettings from "./innerPages/PluginSettings";
@@ -138,6 +140,7 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
           )}
         </Content>
       </MainSection>
+      <CursorStatus />
     </Wrapper>
   );
 };

web/src/beta/features/Visualizer/Crust/Plugins/hooks/index.ts

@@ -111,7 +111,6 @@ export default function ({
     addLayer,
     findFeatureById,
     findFeaturesByIds,
-    layersInViewport,
     selectLayer,
     selectFeature,
     selectFeatures,
@@ -218,7 +217,6 @@ export default function ({
         addLayer,
         findFeatureById,
         findFeaturesByIds,
-        layersInViewport,
         selectLayer,
         selectFeature,
         selectFeatures,
@@ -259,15 +257,13 @@ export default function ({
     }),
     [
       engineName,
-      // viewer
       getViewerProperty,
       overrideViewerPropertyCommon,
       getViewport,
       captureScreen,
       getInteractionMode,
       getInEditor,
       getIsBuilt,
-      // viewer tools
       getLocationFromScreenCoordinate,
       getScreenCoordinateFromPosition,
       getTerrainHeightAsync,
@@ -277,10 +273,8 @@ export default function ({
       cartesianToCartographic,
       transformByOffsetOnScreen,
       isPositionVisibleOnGlobe,
-      // viewer events
       viewerEventsOn,
       viewerEventsOff,
-      // camera
       getCameraPosition,
       getCameraFov,
       getCameraAspectRatio,
@@ -300,19 +294,15 @@ export default function ({
       move,
       moveOverTerrain,
       enableForceHorizontalRoll,
-      // camera events
       cameraEventsOn,
       cameraEventsOff,
-      // timeline
       getTimeline,
-      // layers
       getLayers,
       hideLayer,
       showLayer,
       addLayer,
       findFeatureById,
       findFeaturesByIds,
-      layersInViewport,
       selectLayer,
       selectFeature,
       selectFeatures,
@@ -321,25 +311,19 @@ export default function ({
       getFeaturesInScreenRect,
       bringToFront,
       sendToBack,
-      // layers events
       layersEventsOn,
       layersEventsOff,
-      // sketch
       getSketchTool,
       setSketchTool,
       getSketchOptions,
       overrideSketchOptions,
-      // sketch events
       sketchEventsOn,
       sketchEventsOff,
-      // extension
       getExtensionList,
-      // deprecated
       deprecated,
       cameraDeprecated,
       layersDeprecated,
       sketchDeprecated,
-      // others
       overrideViewerProperty,
       pluginInstances,
       clientStorage,

web/src/beta/features/Visualizer/Crust/Plugins/hooks/useLayers.ts

@@ -64,11 +64,6 @@ export default ({
     [engineRef]
   );
 
-  const layersInViewport = useCallback(() => {
-    return layersRef?.findAll(
-      (layer) => !!engineRef?.inViewport(layer?.property?.default?.location)
-    );
-  }, [engineRef, layersRef]);
 
   const selectLayer = useCallback(
     (layerId: string | undefined) => {
@@ -189,7 +184,6 @@ export default ({
     addLayer,
     findFeatureById,
     findFeaturesByIds,
-    layersInViewport,
     selectLayer,
     selectFeature,
     selectFeatures,