chore(web): layer style panel (#1025)

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

@@ -8,7 +8,7 @@ import URLField from "@reearth/beta/components/fields/URLField";
 import { Feature } from "@reearth/core";
 import { useT } from "@reearth/services/i18n";
 
-import { FieldProp, ValueProp } from "./FeatureData";
+import { FieldProp, ValueProp } from ".";
 
 type Props = {
   field: any;

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

@@ -0,0 +1,54 @@
+import { FC, useCallback, useMemo } from "react";
+
+import { Selector } from "@reearth/beta/lib/reearth-ui/components/Selector";
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+
+import { LayerConfigUpdateProps } from "../../../../hooks/useLayers";
+
+type LayerStyleSelectorProps = {
+  layerStyles?: LayerStyle[];
+  layers?: NLSLayer[];
+  selectedLayerId: string;
+  sceneId?: string;
+  onLayerConfigUpdate?: (inp: LayerConfigUpdateProps) => void;
+};
+
+const LayerStyleTab: FC<LayerStyleSelectorProps> = ({
+  layers,
+  layerStyles,
+  selectedLayerId,
+  onLayerConfigUpdate,
+}) => {
+  const layerStyleOptions = useMemo(
+    () => [
+      { value: "", label: "NO STYLE" },
+      ...(layerStyles?.map(ls => ({ value: ls.id, label: ls.name })) ?? []),
+    ],
+    [layerStyles],
+  );
+
+  const handleLayerStyleChange = useCallback(
+    (value?: string | string[]) => {
+      if (typeof value !== "string") return;
+      onLayerConfigUpdate?.({
+        layerId: selectedLayerId,
+        config: {
+          layerStyleId: value,
+        },
+      });
+    },
+    [selectedLayerId, onLayerConfigUpdate],
+  );
+
+  const currentValue = useMemo(
+    () => layers?.find(a => a.id === selectedLayerId)?.config?.layerStyleId,
+    [layers, selectedLayerId],
+  );
+
+  return (
+    <Selector options={layerStyleOptions} value={currentValue} onChange={handleLayerStyleChange} />
+  );
+};
+
+export default LayerStyleTab;

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

@@ -5,18 +5,18 @@ import { SelectedLayer } from "@reearth/beta/features/Editor/hooks/useLayers";
 import { GeoJsonFeatureUpdateProps } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { Feature } from "@reearth/core";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
-import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
+import { LayerStyle as LayerStyleType } from "@reearth/services/api/layerStyleApi/utils";
 import { useT } from "@reearth/services/i18n"; // If needed
 
 import { LayerConfigUpdateProps } from "../../../hooks/useLayers";
 
-import FeatureData from "./FeatureData";
-import Infobox from "./infobox";
-import LayerData from "./LayerData";
-import LayerTab from "./LayerStyle";
+import DataSource from "./DataSource";
+import FeatureInspector from "./FeatureInspector";
+import InfoboxSettings from "./InfoboxSettings";
+import LayerStyle from "./LayerStyle";
 
 type Props = {
-  layerStyles?: LayerStyle[];
+  layerStyles?: LayerStyleType[];
   layers?: NLSLayer[];
   selectedLayer?: SelectedLayer;
   sceneId?: string;
@@ -33,7 +33,7 @@ const InspectorTabs: React.FC<Props> = ({
   onGeoJsonFeatureUpdate,
 }) => {
   const t = useT();
-  const [selectedTab, setSelectedTab] = useState("layerData");
+  const [selectedTab, setSelectedTab] = useState("dataSource");
 
   const handleTabChange = useCallback((newTab: string) => {
     setSelectedTab(newTab);
@@ -73,18 +73,18 @@ const InspectorTabs: React.FC<Props> = ({
   const tabs: TabObject[] = useMemo(
     () => [
       {
-        id: "layerData",
+        id: "dataSource",
         name: t("Data"),
         component: selectedLayer?.layer ? (
-          <LayerData selectedLayer={selectedLayer.layer} />
+          <DataSource selectedLayer={selectedLayer.layer} />
         ) : undefined,
         icon: "layerInspector",
       },
       {
-        id: "featureData",
+        id: "featureInspector",
         name: t("Feature"),
         component: selectedFeature ? (
-          <FeatureData
+          <FeatureInspector
             selectedFeature={selectedFeature}
             isSketchLayer={selectedLayer?.layer?.isSketch}
             customProperties={selectedLayer?.layer?.sketch?.customPropertySchema}
@@ -96,10 +96,10 @@ const InspectorTabs: React.FC<Props> = ({
         icon: "marker",
       },
       {
-        id: "layerStyleSelector",
+        id: "layerStyle",
         name: t("Styling"),
         component: selectedLayer?.layer?.id ? (
-          <LayerTab
+          <LayerStyle
             layerStyles={layerStyles}
             layers={layers}
             sceneId={sceneId}
@@ -110,9 +110,9 @@ const InspectorTabs: React.FC<Props> = ({
         icon: "layerStyle",
       },
       {
-        id: "infobox",
+        id: "infoboxSettings",
         component: selectedLayer?.layer?.id ? (
-          <Infobox
+          <InfoboxSettings
             selectedLayerId={selectedLayer.layer.id}
             infobox={selectedLayer.layer?.infobox}
           />

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

@@ -6,7 +6,6 @@ import { useT } from "@reearth/services/i18n";
 import { useMapPage } from "../context";
 
 import LayerInspector from "./LayerInspector";
-import LayerStyleEditor from "./LayerStyleEditor";
 import SceneSettings from "./SceneSettings";
 
 type Props = Pick<PanelProps, "showCollapseArea" | "areaRef">;
@@ -17,12 +16,10 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
     layers,
     layerStyles,
     sceneId,
-    selectedLayerStyleId,
     selectedSceneSetting,
     sceneSettings,
     selectedLayer,
     handleFlyTo,
-    handleLayerStyleValueUpdate,
     handleLayerConfigUpdate,
     handleGeoJsonFeatureUpdate,
   } = useMapPage();
@@ -58,13 +55,6 @@ const InspectorPanel: FC<Props> = ({ areaRef, showCollapseArea }) => {
           onGeoJsonFeatureUpdate={handleGeoJsonFeatureUpdate}
         />
       )}
-      {selectedLayerStyleId && (
-        <LayerStyleEditor
-          selectedLayerStyleId={selectedLayerStyleId}
-          sceneId={sceneId}
-          onLayerStyleValueUpdate={handleLayerStyleValueUpdate}
-        />
-      )}
     </Panel>
   );
 };

web/src/beta/features/Editor/Map/InspectorPanel/LayerStyleEditor.tsx → web/src/beta/features/Editor/Map/LayerStylePanel/LayerStyleEditor.tsx

@@ -1,8 +1,6 @@
-import MonacoEditor from "@monaco-editor/react";
 import { FC, useCallback, useState, useEffect } from "react";
 
-import Button from "@reearth/beta/components/Button";
-import Loading from "@reearth/beta/components/Loading";
+import { Button, CodeInput } from "@reearth/beta/lib/reearth-ui";
 import { useLayerStylesFetcher } from "@reearth/services/api";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -15,17 +13,6 @@ type LayerStyleEditorProps = {
   onLayerStyleValueUpdate?: (inp: LayerStyleValueUpdateProps) => void;
 };
 
-const options = {
-  bracketPairColorization: {
-    enabled: true,
-  },
-  automaticLayout: true,
-  minimap: {
-    enabled: false,
-  },
-  selectOnLineNumbers: true,
-};
-
 const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
   selectedLayerStyleId,
   sceneId,
@@ -56,33 +43,26 @@ const LayerStyleEditor: FC<LayerStyleEditorProps> = ({
 
   return (
     <EditorContainer>
-      <MonacoEditor
-        height="90%"
-        language="json"
-        theme="vs-dark"
-        value={styleCode}
-        loading={<Loading />}
-        options={options}
-        onChange={setStyleCode}
+      <CodeInput value={styleCode} onChange={setStyleCode} language="json" />
+      <Button
+        title={t("Save")}
+        extendWidth
+        size="small"
+        appearance="primary"
+        onClick={handleSubmit}
       />
-      <CenteredButton size="small" onClick={handleSubmit}>
-        {t("Save")}
-      </CenteredButton>
     </EditorContainer>
   );
 };
 
-const EditorContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-`;
-
-const CenteredButton = styled(Button)`
-  align-self: center;
-  margin-top: 16px;
-`;
+const EditorContainer = styled("div")(({ theme }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing.small,
+}));
 
 export default LayerStyleEditor;