refactor(web): disable tile opacity controls when Google Map tiles are present[VIZ-DEV-71] (#167)

Co-authored-by: lby <icesunex@hotmail.com>

Author: mkumbobeaty

web/src/classic/components/molecules/EarthEditor/PropertyPane/PropertyField/SliderField/index.tsx

@@ -136,6 +136,7 @@ const SliderField: React.FC<Props> = ({
             max={max}
             step={calculatedStep}
             marks={opacityMarkers}
+            disabled={disabled}
             onAfterChange={onChange}
             onChange={handleSliderChange}
             dotStyle={{ display: "none" }}
@@ -208,14 +209,20 @@ const StyledInput = styled.input<InputProps>`
   }
 `;
 
-const StyledSlider = styled(RCSlider)`
+const StyledSlider = styled(RCSlider)<{ disabled?: boolean }>`
   .rc-slider-mark-text {
     color: ${({ theme }) => theme.classic.properties.text};
   }
 
   .rc-slider-mark-text-active {
     color: ${({ theme }) => theme.classic.text.pale};
   }
+
+  &.rc-slider-disabled {
+    background-color: transparent;
+    opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+    cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
+  }
 `;
 
 export default SliderField;

web/src/classic/components/molecules/EarthEditor/PropertyPane/PropertyField/index.tsx

@@ -46,6 +46,7 @@ export type SchemaField<T extends ValueType = ValueType> = {
   suffix?: string;
   name?: string;
   description?: string;
+  disabled?: boolean;
   isLinkable?: boolean;
   isTemplate?: boolean;
   ui?:
@@ -92,6 +93,7 @@ export type Props<T extends ValueType = ValueType> = {
   linkedDatasetSchemaId?: string;
   linkedDatasetId?: string;
   hidden?: boolean;
+  disabled?: boolean;
   isLinkable?: boolean;
   isTemplate?: boolean;
   isCapturing?: boolean;
@@ -116,6 +118,7 @@ const PropertyField: React.FC<Props> = ({
   onUploadFile,
   onRemoveFile,
   hidden,
+  disabled,
   isCapturing,
   onIsCapturingChange,
   camera,
@@ -147,6 +150,7 @@ const PropertyField: React.FC<Props> = ({
       !!field?.link || (isTemplate && !!field?.value) || (!!field?.mergedValue && !field?.value),
     linkedFieldName: field?.id,
     overridden: !!field?.overridden,
+    disabled,
     value: field?.mergedValue ?? field?.value ?? schema?.defaultValue,
     onChange: useCallback(
       (value: ValueTypes[keyof ValueTypes] | undefined) => {

web/src/classic/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx

@@ -208,6 +208,7 @@ const PropertyItem: React.FC<Props> = ({
         .filter((g): g is PropertyListItem => !!g),
     [groups, layerMode, item],
   );
+
   const schemaFields = useMemo(
     () =>
       selectedItem
@@ -226,11 +227,13 @@ const PropertyItem: React.FC<Props> = ({
               condf?.mergedValue ??
               condsf?.defaultValue ??
               (condsf?.type ? zeroValues[condsf.type] : undefined);
+
             return {
               schemaField: f,
               field,
               events,
               hidden: f.only && (!condv || condv !== f.only.value),
+              disabled: !!f.disabled,
             };
           })
         : [],
@@ -315,6 +318,7 @@ const PropertyItem: React.FC<Props> = ({
               field={f.field}
               schema={f.schemaField}
               hidden={f.hidden}
+              disabled={f.disabled}
               isTemplate={isTemplate}
               {...f.events}
               {...props}

web/src/classic/components/molecules/Visualizer/hooks.ts

@@ -126,11 +126,34 @@ export default ({
   //
   // Terrain:
   //   - terrainType "cesium" → "reearth_terrain"
-  const overriddenSceneProperty = useMemo(
+  const fallbackAppliedSceneProperty = useMemo(
     () => applyFallbacks(backwardCompatibleSceneProperty),
     [backwardCompatibleSceneProperty],
   );
 
+  // Step 3b: Override tile opacity for Google Map tiles (google_satellite, google_roadmap)
+  // Google Maps API does not support opacity — force tile_opacity to 1 to avoid rendering issues.
+  const overriddenSceneProperty = useMemo(() => {
+    const tiles = fallbackAppliedSceneProperty?.tiles;
+    if (!tiles) return fallbackAppliedSceneProperty;
+
+    const hasGoogleMapTiles = tiles.some(
+      tile =>
+        ["google_satellite", "google_roadmap"].includes(tile.tile_type ?? "") &&
+        tile.tile_opacity !== 1,
+    );
+
+    if (!hasGoogleMapTiles) return fallbackAppliedSceneProperty;
+
+    return {
+      ...fallbackAppliedSceneProperty,
+      tiles: tiles.map(tile => ({
+        ...tile,
+        tile_opacity: 1,
+      })),
+    };
+  }, [fallbackAppliedSceneProperty]);
+
   // Step 4: Apply layer fallbacks when Cesium Ion token is not available
   // Data flow: rootLayer → (backward compatibility - not needed) → fallbacks → consumers
   // Fallback rules (only when no Cesium Ion token):

web/src/classic/components/organisms/EarthEditor/PropertyPane/convert.ts

@@ -232,6 +232,32 @@ const toUi = (ui: PropertySchemaFieldUi | null | undefined): SchemaField["ui"] =
   return undefined;
 };
 
+const GOOGLE_MAP_TILE_TYPES = ["google_satellite", "google_roadmap"];
+
+export const withGoogleMapTileOpacityDisabled = (
+  items: Item[] | undefined,
+  disabledDescription: string,
+): Item[] | undefined => {
+  if (!items) return items;
+  return items.map(item => {
+    if (!("items" in item)) return item;
+    const tileTypeSchemaField = item.schemaFields.find(f => f.id === "tile_type");
+    const hasGoogleMapTile = item.items.some(listItem => {
+      const tileTypeField = listItem.fields.find(f => f.id === "tile_type");
+      const value =
+        tileTypeField?.value ?? tileTypeField?.mergedValue ?? tileTypeSchemaField?.defaultValue;
+      return typeof value === "string" && GOOGLE_MAP_TILE_TYPES.includes(value);
+    });
+    if (!hasGoogleMapTile) return item;
+    return {
+      ...item,
+      schemaFields: item.schemaFields.map(f =>
+        f.id === "tile_opacity" ? { ...f, disabled: true, description: disabledDescription } : f,
+      ),
+    };
+  });
+};
+
 export const convertLinkableDatasets = (
   data?: GetLinkableDatasetsQuery,
 ): DatasetSchema[] | undefined => {

web/src/classic/components/organisms/EarthEditor/PropertyPane/hooks-queries.ts

@@ -6,9 +6,16 @@ import {
   useGetLinkableDatasetsQuery,
   useGetLayersFromLayerIdQuery,
 } from "@reearth/classic/gql";
+import { useT } from "@reearth/services/i18n";
 import { Selected } from "@reearth/services/state";
 
-import { convert, Pane, convertLinkableDatasets, convertLayers } from "./convert";
+import {
+  convert,
+  Pane,
+  convertLinkableDatasets,
+  convertLayers,
+  withGoogleMapTileOpacityDisabled,
+} from "./convert";
 
 export type Mode = "infobox" | "scene" | "layer" | "block" | "widgets" | "widget" | "cluster";
 
@@ -94,7 +101,17 @@ export default ({
   const propertyId = property?.id;
   const mergedProperty = layerMergedProperty ?? infoboxMergedProperty ?? blockMergedProperty;
 
-  const items = useMemo(() => convert(property, mergedProperty), [property, mergedProperty]);
+  const t = useT();
+  const items = useMemo(
+    () =>
+      withGoogleMapTileOpacityDisabled(
+        convert(property, mergedProperty),
+        t(
+          "Disabled: Opacity adjustments are not available when Google Maps tiles are present, to comply with Google Maps Map Tiles API Policies.",
+        ),
+      ),
+    [property, mergedProperty, t],
+  );
 
   const loading = scenePropertyLoading || layerPropertyLoading || layerLoading;
   const error = scenePropertyError ?? layerPropertyError ?? layerError;

web/src/services/i18n/translations/en.yml

@@ -449,6 +449,7 @@ No selectable items: No selectable items
 Font family: Font family
 Font size: Font size
 Field set: Field set
+'Disabled: Opacity adjustments are not available when Google Maps tiles are present, to comply with Google Maps Map Tiles API Policies.': 'Disabled: Opacity adjustments are not available when Google Maps tiles are present, to comply with Google Maps Map Tiles API Policies.'
 Basic: Basic
 Template: Template
 template: template

web/src/services/i18n/translations/ja.yml

@@ -416,6 +416,7 @@ No selectable items: 選択可能なアイテムがありません
 Font family: フォント
 Font size: サイズ
 Field set: 設定
+'Disabled: Opacity adjustments are not available when Google Maps tiles are present, to comply with Google Maps Map Tiles API Policies.': '無効：Google マップのタイルが存在する場合、Google マップ タイル API ポリシーに準拠するため、不透明度の調整はご利用いただけません。'
 Basic: インフォボックス
 Template: テンプレート
 template: テンプレート