Merge branch 'main' into feat/associate-project-asset

reearth · Feb 26, 2025 · 1292bf2 · 1292bf2
2 parents 0dd2eab + 38a43cf
commit 1292bf2
Show file tree

Hide file tree

Showing 24 changed files with 512 additions and 92 deletions.
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx
@@ -1,6 +1,6 @@
 import useDoubleClick from "@reearth/beta/hooks/useDoubleClick";
 import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
-import Tooltip from "@reearth/beta/ui/components/Tooltip";
+import Tooltip from "@reearth/beta/lib/reearth-ui/components/Tooltip";
 import {
   useStorytellingFetcher,
   useProjectFetcher

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -7,7 +7,7 @@ import {
   ManagerWrapper
 } from "@reearth/beta/ui/components/ManagerBase";
 import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
-import Tooltip from "@reearth/beta/ui/components/Tooltip";
+import Tooltip from "@reearth/beta/lib/reearth-ui/components/Tooltip";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useMemo, useRef, Fragment } from "react";

diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
@@ -1,5 +1,5 @@
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
-import Tooltip from "@reearth/beta/ui/components/Tooltip";
+import Tooltip from "@reearth/beta/lib/reearth-ui/components/Tooltip";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useMemo } from "react";

diff --git a/...spectorPanel/LayerInspector/DataSource/SketchCustomProperties/CustomPropertyFieldItem.tsx b/...spectorPanel/LayerInspector/DataSource/SketchCustomProperties/CustomPropertyFieldItem.tsx
@@ -59,6 +59,7 @@ const CustomPropertyFieldItem: FC<CustomPropertyFieldItemProps> = ({
                   icon="dotsThreeVertical"
                   size="small"
                   appearance="simple"
+                  tooltipText={t("More")}
                 />
               }
               placement="bottom-start"

diff --git a/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx b/web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx
@@ -7,6 +7,7 @@ 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 { useT } from "@reearth/services/i18n";
 import { FC, useCallback, useMemo, useState } from "react";
 
 import { LayerConfigUpdateProps } from "../../../hooks/useLayers";
@@ -46,6 +47,7 @@ const InspectorTabs: FC<Props> = ({
   onSketchGeometryEditCancel,
   onSketchGeometryEditApply
 }) => {
+  const t = useT();
   const selectedFeature = useMemo(() => {
     if (!selectedLayer?.computedFeature?.id) return;
     const { id, geometry, properties } =
@@ -86,13 +88,17 @@ const InspectorTabs: FC<Props> = ({
       {
         id: "dataSource",
         icon: "data",
+        tooltipText: t("Layer"),
+        placement: "left",
         children: selectedLayer?.layer && (
           <DataSource selectedLayer={selectedLayer.layer} />
         )
       },
       {
         id: "featureInspector",
         icon: "mapPin",
+        placement: "left",
+        tooltipText: t("Feature"),
         children: selectedFeature && (
           <FeatureInspector
             selectedFeature={selectedFeature}
@@ -113,6 +119,8 @@ const InspectorTabs: FC<Props> = ({
       {
         id: "layerStyle",
         icon: "palette",
+        placement: "left",
+        tooltipText: t("Layer Style"),
         children: selectedLayer?.layer?.id && (
           <LayerStyle
             layerStyles={layerStyles}
@@ -126,6 +134,8 @@ const InspectorTabs: FC<Props> = ({
       {
         id: "infoboxSettings",
         icon: "article",
+        placement: "left",
+        tooltipText: t("Infobox"),
         children: selectedLayer?.layer?.id && (
           <InfoboxSettings
             selectedLayerId={selectedLayer.layer.id}
@@ -135,19 +145,20 @@ const InspectorTabs: FC<Props> = ({
       }
     ],
     [
-      selectedLayer,
+      t,
+      selectedLayer?.layer,
       selectedFeature,
       selectedSketchFeature,
-      layerStyles,
-      layers,
-      sceneId,
-      onLayerConfigUpdate,
+      sketchEditingFeature?.feature?.id,
       onGeoJsonFeatureUpdate,
       onGeoJsonFeatureDelete,
-      sketchEditingFeature,
       onSketchGeometryEditStart,
+      onSketchGeometryEditApply,
       onSketchGeometryEditCancel,
-      onSketchGeometryEditApply
+      layerStyles,
+      layers,
+      sceneId,
+      onLayerConfigUpdate
     ]
   );
 

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/index.tsx
@@ -1,5 +1,6 @@
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { SetStateAction } from "jotai";
 import { Dispatch, FC, useCallback, useEffect, useMemo, useState } from "react";
@@ -30,7 +31,7 @@ const StyleInterface: FC<LayerStyleProps> = ({
   setLayerStyle
 }) => {
   const theme = useTheme();
-
+  const t = useT();
   const [styleNodes, setStyleNodes] = useState<StyleNodes>(
     convertToStyleNodes(layerStyle)
   );
@@ -104,23 +105,38 @@ const StyleInterface: FC<LayerStyleProps> = ({
     [layerStyle, layerStyleWithActiveTab]
   );
 
+  const styleLabels: Record<AppearanceType, string> = useMemo(
+    () => ({
+      marker: t("Marker style"),
+      polyline: t("Polyline style"),
+      polygon: t("Polygon style"),
+      "3dtiles": t("3dtiles style"),
+      model: t("3D model style")
+    }),
+    [t]
+  );
+
   const appearanceTypeTabs: TabItem[] = useMemo(
     () =>
-      appearanceTypes.map((type) => ({
-        id: type,
-        icon: appearanceTypeIcons[type],
-        children: (
-          <StylePanel
-            key={type}
-            type={type}
-            editMode={editMode}
-            appearanceNodes={appearanceNodes[type]}
-            styleNodes={styleNodes[type]}
-            onStyleNodesUpdate={handleStyleNodesUpdate}
-          />
-        )
-      })),
-    [editMode, handleStyleNodesUpdate, styleNodes]
+      appearanceTypes.map((type) => {
+        return {
+          id: type,
+          icon: appearanceTypeIcons[type],
+          tooltipText: styleLabels[type],
+          placement: "top",
+          children: (
+            <StylePanel
+              key={type}
+              type={type}
+              editMode={editMode}
+              appearanceNodes={appearanceNodes[type]}
+              styleNodes={styleNodes[type]}
+              onStyleNodesUpdate={handleStyleNodesUpdate}
+            />
+          )
+        };
+      }),
+    [editMode, handleStyleNodesUpdate, styleLabels, styleNodes]
   );
 
   return layerStyle ? (

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/PresetLayerStyle/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/PresetLayerStyle/index.tsx
@@ -4,6 +4,7 @@ import {
   PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { useEffect, FC, useCallback, useRef } from "react";
 
 import { LayerStyleAddProps } from "../../../hooks/useLayerStyles";
@@ -34,7 +35,7 @@ const PresetLayerStyle: FC<PresetLayerStyleProps> = ({
   onLayerStyleSelect
 }) => {
   const layerStyleAddedRef = useRef<string | undefined>(undefined);
-
+  const t = useT();
   const handleLayerStyleAddition = useCallback(
     (value?: Record<string, unknown>, styleName?: string) => {
       const name = getLayerStyleName(
@@ -148,7 +149,14 @@ const PresetLayerStyle: FC<PresetLayerStyleProps> = ({
   return (
     <PopupMenu
       menu={menuItems}
-      label={<IconButton icon="plus" size="large" />}
+      label={
+        <IconButton
+          icon="plus"
+          size="large"
+          placement="top"
+          tooltipText={t("New style")}
+        />
+      }
     />
   );
 };

diff --git a/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx b/web/src/beta/features/Editor/Map/LayerStylePanel/index.tsx
@@ -72,6 +72,8 @@ const StylesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
             disabled={!selectedLayer || !selectedLayerStyleId}
             onClick={handleApplyLayerStyle}
             stopPropagationOnClick
+            placement="top"
+            tooltipText={t("Assign style")}
           />
         </ActionsWrapper>
         <StylesWrapper>

diff --git a/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx b/web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx
@@ -92,6 +92,8 @@ const LayerItem: FC<LayerItemProps> = ({
                   icon="crosshair"
                   size="small"
                   appearance="simple"
+                  tooltipText={t("Fly to")}
+                  placement="top"
                   onClick={handleZoomToLayer}
                 />
               )
@@ -103,6 +105,8 @@ const LayerItem: FC<LayerItemProps> = ({
                   icon={layer.visible ? "eye" : "eyeSlash"}
                   size="small"
                   appearance="simple"
+                  placement="top"
+                  tooltipText={t("Visibility")}
                   onClick={handleToggleLayerVisibility}
                 />
               ),
@@ -111,9 +115,10 @@ const LayerItem: FC<LayerItemProps> = ({
           ]
         : undefined,
     [
+      editingLayerNameId,
       layer.id,
       layer.visible,
-      editingLayerNameId,
+      t,
       handleZoomToLayer,
       handleToggleLayerVisibility
     ]

diff --git a/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx b/web/src/beta/features/Editor/Map/ToolsPanel/index.tsx
@@ -1,5 +1,7 @@
+import { Placement } from "@floating-ui/react";
 import { IconButton, IconName } from "@reearth/beta/lib/reearth-ui";
 import { Panel } from "@reearth/beta/ui/layout";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useEffect, useMemo } from "react";
 
@@ -8,56 +10,74 @@ import { useMapPage } from "../context";
 type SketchTool = {
   icon: IconName;
   selected: boolean;
+  tooltipText: string;
+  placement?: Placement;
   onClick: () => void;
 };
 
 const ToolsPanel: FC = () => {
   const { sketchEnabled, sketchType, handleSketchTypeChange } = useMapPage();
-
+  const t = useT();
   const sketchTools: SketchTool[] = useMemo(
     () => [
       {
         icon: "mapPin",
         selected: sketchEnabled && sketchType === "marker",
+        tooltipText: t("Marker"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("marker")
       },
       {
         icon: "polyline",
         selected: sketchEnabled && sketchType === "polyline",
+        tooltipText: t("Polyline"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("polyline")
       },
       {
         icon: "circle",
         selected: sketchEnabled && sketchType === "circle",
+        tooltipText: t("Circle"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("circle")
       },
       {
         icon: "square",
         selected: sketchEnabled && sketchType === "rectangle",
+        tooltipText: t("Rectangle"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("rectangle")
       },
       {
         icon: "polygon",
         selected: sketchEnabled && sketchType === "polygon",
+        tooltipText: t("Polygon"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("polygon")
       },
       {
         icon: "cylinder",
         selected: sketchEnabled && sketchType === "extrudedCircle",
+        tooltipText: t("Extruded circle"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("extrudedCircle")
       },
       {
         icon: "cube",
         selected: sketchEnabled && sketchType === "extrudedRectangle",
+        tooltipText: t("Extruded rectangle"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("extrudedRectangle")
       },
       {
         icon: "extrude",
         selected: sketchEnabled && sketchType === "extrudedPolygon",
+        tooltipText: t("Extruded polygon"),
+        placement: "top",
         onClick: () => handleSketchTypeChange("extrudedPolygon")
       }
     ],
-    [sketchEnabled, sketchType, handleSketchTypeChange]
+    [sketchEnabled, sketchType, t, handleSketchTypeChange]
   );
 
   useEffect(() => {
@@ -67,16 +87,20 @@ const ToolsPanel: FC = () => {
   return (
     <Panel storageId="editor-map-tools-panel" extend>
       <SketchToolsWrapper>
-        {sketchTools.map(({ icon, selected, onClick }) => (
-          <IconButton
-            key={icon}
-            icon={icon}
-            disabled={!sketchEnabled}
-            appearance={"simple"}
-            active={selected}
-            onClick={onClick}
-          />
-        ))}
+        {sketchTools.map(
+          ({ icon, selected, tooltipText, placement, onClick }) => (
+            <IconButton
+              key={icon}
+              icon={icon}
+              disabled={!sketchEnabled}
+              appearance={"simple"}
+              active={selected}
+              tooltipText={tooltipText}
+              placement={placement}
+              onClick={onClick}
+            />
+          )
+        )}
       </SketchToolsWrapper>
     </Panel>
   );

diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -63,11 +63,21 @@ const LeftSection: React.FC<Props> = ({
         to={`/dashboard/${currentWorkspace?.id}`}
         disabled={!currentWorkspace?.id}
       >
-        <IconButton icon="grid" appearance="simple" size="large" />
+        <IconButton
+          icon="grid"
+          appearance="simple"
+          size="large"
+          tooltipText={t("Dashboard")}
+        />
       </StyledLink>
       {page === "projectSettings" && (
         <StyledLink to={`/scene/${sceneId}/map`} disabled={!sceneId}>
-          <IconButton icon="editor" appearance="simple" size="large" />
+          <IconButton
+            icon="editor"
+            appearance="simple"
+            size="large"
+              tooltipText={t("Editor")}
+          />
         </StyledLink>
       )}
       <Profile