chore(web): update switch layer block functionality (#833)

server/pkg/builtin/manifest.yml

@@ -13,7 +13,7 @@ extensions:
     schema:
       groups:
         - id: default
-          collection: Main
+          collection: main
           title: Main
           fields:
             - id: sceneMode
@@ -37,7 +37,7 @@ extensions:
               title: VR
               description: Enable VR mode to split the screen into left and right.
         - id: tiles
-          collection: Tiles
+          collection: tiles
           title: Tiles
           description: You may change the look of the Earth by obtaining map tile data and setting it here.
           list: true
@@ -92,7 +92,7 @@ extensions:
               min: 0
               max: 1
         - id: terrain
-          collection: Terrain
+          collection: terrain
           title: Terrain
           fields:
             - id: terrain
@@ -168,7 +168,7 @@ extensions:
                 type: bool
                 value: true
         - id: globeLighting
-          collection: Globe
+          collection: globe
           title: Globe Lighting
           fields:
             - id: globeLighting
@@ -177,7 +177,7 @@ extensions:
               defaultValue: false
               description: This property will support the globe receive Entitys Lighting.
         - id: globeShadow
-          collection: Globe
+          collection: globe
           title: Globe Shadow
           fields:
             - id: globeShadow
@@ -186,7 +186,7 @@ extensions:
               defaultValue: false
               description: This property will support the globe receive Entitys shadows.
         - id: globeAtmosphere
-          collection: Globe
+          collection: globe
           title: Globe Atmosphere
           fields:
             - id: globeAtmosphere
@@ -207,7 +207,7 @@ extensions:
                 type: bool
                 value: true
         - id: skyBox
-          collection: Sky
+          collection: sky
           title: Sky Box
           fields:
             - id: skyBox
@@ -216,7 +216,7 @@ extensions:
               defaultValue: true
               description: Description needed.
         - id: sun
-          collection: Sky
+          collection: sky
           title: Sun
           fields:
             - id: sun
@@ -225,7 +225,7 @@ extensions:
               defaultValue: true
               description: Description needed.
         - id: moon
-          collection: Sky
+          collection: sky
           title: Moon
           fields:
             - id: moon
@@ -234,7 +234,7 @@ extensions:
               defaultValue: true
               description: Description needed.
         - id: skyAtmosphere
-          collection: Sky
+          collection: sky
           title: Sky Atmosphere
           fields:
             - id: skyAtmosphere
@@ -255,7 +255,7 @@ extensions:
                 type: bool
                 value: true
         - id: camera
-          collection: Camera
+          collection: camera
           title: Camera
           fields:
             - id: camera

server/pkg/builtin/manifest_ja.yml

@@ -1,6 +1,137 @@
 name: Re:Earth公式プラグイン
 description: 公式プラグイン
 extensions:
+  cesium-beta:
+    name: Cesium Beta
+    description: プロジェクト概要
+    propertySchema:
+      default:
+        title: メイン
+        fields:
+          sceneMode:
+            title: シーンモード
+            description: 地球儀の表示を2D、2.5D、3Dから選択します。
+          ion:
+            title: Cesium Ion アクセストークン
+            description: ご自身の Cesium Ion アカウントからアクセストークンを発行し、ここに設定します。Cesium Ion のアセット（タイルデータ・3Dデータなど）の使用が可能になります。
+          vr:
+            title: VR
+            description: 画面を左右に分割するVRモードを有効にします。
+      tiles:
+        title: タイル
+        description: 手持ちのタイルデータを使用し、地球上に表示することができます。
+        fields:
+          tile_type:
+            title: 種類
+            choices:
+              default: デフォルト
+              default_label: ラベル付き地図
+              default_road: 道路地図
+              stamen_watercolor: Stamen Watercolor
+              stamen_toner: Stamen Toner
+              open_street_map: OpenStreetMap
+              esri_world_topo: ESRI Topography
+              black_marble: Black Marble
+              japan_gsi_standard: 地理院地図 標準地図
+              url: URL
+          tile_url:
+            title: URL
+          tile_zoomLevel:
+            title: ズームレベル
+            description: "選択したタイルマップのズームレベルを変更します。 最小値: 0 最大値: 1"
+          tile_opacity:
+            title: 不透明度
+            description: "選択したタイルマップの不透明度を変更します。 最小値: 0 最大値: 1"
+      terrain:
+        title: 地形
+        fields:
+          terrain:
+            title: 地形
+            description: 有効にすると、標高データが読み込みこまれ、立体的な地形を表現することができます。
+          terrainType:
+            title: 種類
+            description: 地形の種類を指定します。
+            choices:
+              cesium: Cesium World Terrain
+              arcgis: ArcGIS Terrain
+              cesiumion: Cesium Ion
+          terrainCesiumIonAsset:
+            title: Cesium Ion アセットID
+            description: Cesium Ion に登録されたテラインのアセットのIDを指定します。
+          terrainCesiumIonAccessToken:
+            title: Cesium Ion アクセストークン
+            description: シーン全体設定の Cesium Ion のアクセストークンをこのタイルのために上書きしたい場合は指定します。
+          terrainCesiumIonUrl:
+            title: Cesium Ion テラインURL
+            description: Cesium のテラインデータを Cesium Ion ではなくオンプレミスのサーバーで配信している場合はそのURLを指定します。アセットIDの指定よりも優先されます。
+          terrainExaggeration:
+            title: 地形の強調
+            description: 地形の強調を設定します。デフォルトは1.0（誇張しない）です。2.0は、地形を2倍に拡大します。0.0の値は地形を完全に平らにします。
+          terrainExaggerationRelativeHeight:
+            title: 地形の強調の基準
+            description: 地形が誇張される高さです。デフォルトは0.0です。この高さより上にある地形は上方に、この高さより下にある地形は下方にスケールされます。
+          depthTestAgainstTerrain:
+            title: 地形の下を非表示
+            description: 地形の下にあるオブジェクトを非表示にします。標高データの読み込み状況によってオブジェクトが表示されたり隠れたりすることがあります。
+      globeLighting:
+        title: 太陽光の明るさ
+        fields:
+          globeLighting:
+            title: 有効化
+            description: This property will support the globe receive Entitys lighting.
+      globeShadow:
+        title: 陰影
+        fields:
+          globeShadow:
+            title: 有効化
+            description: This property will support the globe receive Entitys shadows.
+      globeAtmosphere:
+        title: 大気
+        fields:
+          globeAtmosphere:
+            title: 有効化
+            description: This setting handles the so-called atmosphere effect of Earth.
+          globeAtmosphereIntensity:
+            title: 光の強さ
+            description: "選択したタイルマップの光の強さを変更します。 最小値: 0 最大値: 30"
+      skyBox:
+        title: スカイボックス
+        fields:
+          skyBox:
+            title: 有効化
+            description: 有効にすると、空に星が追加されます。
+      sun:
+        title: 太陽
+        fields:
+          sun:
+            title: 有効化
+            description: 有効にすると、空に太陽が表示されます。
+      moon:
+        title: 月
+        fields:
+          moon:
+            title: 有効化
+            description: 有効にすると、空に月が表示されます。
+      skyAtmosphere:
+        title: 上空の大気
+        fields:
+          skyAtmosphere:
+            title: 有効化
+            description: 有効にすると、リアルな上空の大気が表示されます。
+          skyAtmosphereIntensity:
+            title: 光の強さ
+            description: "選択したタイルマップの光の強さを変更します。 最小値: 0 最大値: 200"
+      camera:
+        title: カメラ
+        fields:
+          camera:
+            title: カメラの初期位置
+            description: プロジェクトを開いたときに表示される最初の位置
+          allowEnterGround:
+            title: 地下に入る
+            description: 有効にすると、カメラが地表の中に入るようになります。
+          fov:
+            title: 視野（FOV）
   cesium:
     name: Cesium
     description: 右パネルでシーン全体の設定を変更することができます。タイル、大気、ライティングなどの設定が含まれています。

web/src/beta/components/Button/index.tsx

@@ -17,7 +17,6 @@ export interface Props {
   icon?: string;
   iconPosition?: "left" | "right";
   margin?: string;
-
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;

web/src/beta/components/fields/SelectField/index.tsx

@@ -134,7 +134,7 @@ const SelectField: React.FC<Props> = ({
                   </Text>
                   <CancelIcon
                     icon="cancel"
-                    size={12}
+                    size={16}
                     onClick={() => !disabled && handleClick(key)}
                     disabled={disabled}
                   />
@@ -154,7 +154,6 @@ const ProviderWrapper = styled.div<{ multiSelect: boolean }>`
   gap: 6px;
   border-radius: 4px;
   padding: 4px;
-  border: ${({ theme, multiSelect }) => (multiSelect ? `1px solid ${theme.outline.weak}` : "none")};
 `;
 
 const InputWrapper = styled.div<{ disabled: boolean }>`
@@ -196,12 +195,12 @@ const ArrowIcon = styled(Icon)<{ open: boolean }>`
   right: 10px;
   top: 50%;
   transform: ${({ open }) => (open ? "translateY(-50%) scaleY(-1)" : "translateY(-50%)")};
+  color: ${({ theme }) => theme.content.main};
 `;
 
 const PickerWrapper = styled(Popover.Content)`
   min-width: 150px;
   border: 1px solid ${({ theme }) => theme.outline.weak};
-  gap: 4px;
   outline: none;
   border-radius: 4px;
   background: ${({ theme }) => theme.bg[1]};
@@ -215,10 +214,11 @@ const PickerWrapper = styled(Popover.Content)`
 
 const OptionWrapper = styled.div<{ selected: boolean }>`
   display: flex;
-  padding: 7px 12px;
+  padding: 4px 8px;
   align-items: center;
   cursor: "pointer";
   background: ${({ theme, selected }) => (selected ? theme.bg[2] : "inherit")};
+
   &:hover {
     background: ${({ theme, selected }) => (selected ? theme.bg[2] : theme.select.main)};
   }
@@ -231,23 +231,28 @@ const CheckIcon = styled(Icon)`
 const SelectedWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   max-height: 125px;
   overflow: auto;
 `;
 
 const Selected = styled.div<{ disabled: boolean }>`
   display: flex;
-  padding: 7px 12px;
+  padding: 4px 8px;
   align-items: center;
   justify-content: space-between;
-  border-radius: 2px;
+  border-radius: 4px;
   background: ${({ theme }) => theme.bg[2]};
   opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
 `;
 
 const CancelIcon = styled(Icon)<{ disabled: boolean }>`
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  color: ${({ theme }) => theme.content.weak};
+
+  :hover {
+    color: ${({ theme }) => theme.content.main};
+  }
 `;
 
 export default SelectField;

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

@@ -63,8 +63,8 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     <ColJustifyBetween>
       <AssetWrapper>
         <InputGroup
-          label="Source Type"
-          description="Select the type of data source you want to add.">
+          label={t("Source Type")}
+          description={t("Select the type of data source you want to add.")}>
           <SourceTypeWrapper>
             <RadioGroup
               options={DataSourceOptions}
@@ -80,7 +80,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
             description={t("URL of the data source you want to add.")}>
             <Input
               type="text"
-              placeholder="Input Text"
+              placeholder={t("Input Text")}
               value={value}
               onChange={e => setValue(e.target.value)}
             />
@@ -89,27 +89,27 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
         {sourceType == "local" && (
           <URLField fileType="asset" value={value} name={t("Asset")} onChange={handleOnChange} />
         )}
-        <Text size="body">Point coordinates</Text>
-        <InputGroup label="Latitude Field" description="Description around">
+        <Text size="body">{t("Point coordinates")}</Text>
+        <InputGroup label={t("Latitude Field")}>
           <Input
             type="text"
-            placeholder="Input Text"
+            placeholder={t("Input Text")}
             value={lat}
             onChange={e => setLat(e.target.value)}
           />
         </InputGroup>
-        <InputGroup label="Longitude Field" description="Description around">
+        <InputGroup label={t("Longitude Field")}>
           <Input
             type="text"
-            placeholder="Input Text"
+            placeholder={t("Input Text")}
             value={long}
             onChange={e => setLong(e.target.value)}
           />
         </InputGroup>
       </AssetWrapper>
       <SubmitWrapper>
         <Button
-          text="Add to Layer"
+          text={t("Add to Layer")}
           buttonType="primary"
           size="medium"
           onClick={handleSubmit}