feat(web): new layer style final step (#1175)

Co-authored-by: airslice <icesunex@hotmail.com>
reearth · Oct 11, 2024 · b1c2db4 · b1c2db4
1 parent e1f1b0f
commit b1c2db4
Show file tree

Hide file tree

Showing 15 changed files with 658 additions and 63 deletions.
diff --git a/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/ConditionsTab.tsx b/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/ConditionsTab.tsx
@@ -212,7 +212,7 @@ const ConditionsTab: FC<Props> = ({
     <InfoWrapper>
       <Typography size="body" color="weak">
         {t(
-          "UI doesn't support conditions on this property, please edit code directly."
+          "Condition is incompatible with the current system for this node or value."
         )}
       </Typography>
     </InfoWrapper>

diff --git a/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/ExpressionTab.tsx b/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/ExpressionTab.tsx
@@ -18,7 +18,7 @@ const ExpressionTab: FC<Props> = ({ expression, disabled, onUpdate }) => {
         <InfoWrapper>
           <Typography size="body" color="weak">
             {t(
-              "UI doesn't support expression on this property, please edit code directly."
+              "Expression is incompatible with the current system for this node or value."
             )}
           </Typography>
         </InfoWrapper>

diff --git a/...ures/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/Field/TypographyInput.tsx b/...ures/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/Field/TypographyInput.tsx
@@ -7,7 +7,7 @@ import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
 
-import { Typography } from "../../types";
+import { FontWeight, Typography } from "../../types";
 
 import BooleanSelectorField from "./BooleanSelectorInput";
 
@@ -22,12 +22,16 @@ const fontFamilyOptions = [
   { value: "Verdana", label: "Verdana" },
   { value: "YuGothic", label: "游ゴシック" }
 ];
-
 const fontWeightOptions = [
-  { value: "lighter", label: "lighter" },
-  { value: "normal", label: "normal" },
-  { value: "bold", label: "bold" },
-  { value: "bolder", label: "bolder" }
+  { value: "100", label: "Thin (100)" },
+  { value: "200", label: "Extra Light (200)" },
+  { value: "300", label: "Light (300)" },
+  { value: "400", label: "Normal (400)" },
+  { value: "500", label: "Medium (500)" },
+  { value: "600", label: "Semi Bold (600)" },
+  { value: "700", label: "Bold (700)" },
+  { value: "800", label: "Extra Bold (800)" },
+  { value: "900", label: "Black (900)" }
 ];
 
 type Props = {
@@ -59,7 +63,7 @@ const TypographyInput: FC<Props> = ({ value, onChange }) => {
           onChange={(v) =>
             onChange?.({
               ...value,
-              fontWeight: v as "lighter" | "normal" | "bold" | "bolder"
+              fontWeight: v as FontWeight
             })
           }
         />

diff --git a/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/constant.ts b/...eta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/constant.ts
@@ -1,3 +1,4 @@
 export const HEIGHT_REFERENCES = ["none", "clamp", "relative"];
 export const DEFAULT_SELECTED_FEATURE_COLOR = "#ff0000";
 export const SHADOWS = ["disabled", "enabled", "cast_only", "receive_only"];
+export const CLASSIFICATION_TYPE = ["both", "terrain", "3dtiles"];
diff --git a/.../beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/marker.ts b/.../beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/marker.ts
@@ -66,48 +66,165 @@ export const markerNodes: AppearanceNode[] = [
     defaultValue: 100
   },
   {
-    id: "imageSizeMeters",
-    title: "Image Size Meters",
-    field: "number",
-    defaultValue: 10
+    id: "imageSizeInMeters",
+    title: "Image Size In Meters",
+    field: "switch",
+    defaultValue: false
+  },
+
+  {
+    id: "imageHorizontalOrigin",
+    title: "Image Horizontal Origin",
+    field: "select",
+    defaultValue: "center",
+    valueOptions: ["left", "center", "right"]
   },
   {
-    id: "hideIndicator",
-    title: "Hide Indicator",
+    id: "imageVerticalOrigin",
+    title: "Image Vertical Origin",
+    field: "select",
+    defaultValue: "center",
+    valueOptions: ["top", "center", "baseline", "bottom"]
+  },
+  {
+    id: "imageColor",
+    title: "Image Color",
+    field: "color",
+    defaultValue: "#ffffff"
+  },
+  {
+    id: "imageCrop",
+    title: "Image Crop",
+    field: "select",
+    defaultValue: "none",
+    valueOptions: ["none", "rounded", "circle"]
+  },
+  {
+    id: "imageShadow",
+    title: "Image Shadow",
     field: "switch",
     defaultValue: false
   },
   {
-    id: "selectedFeatureColor",
-    title: "Selected Feature Color",
+    id: "imageShadowColor",
+    title: "Image Shadow Color",
     field: "color",
-    defaultValue: DEFAULT_SELECTED_FEATURE_COLOR
+    defaultValue: "#ffffff"
+  },
+  {
+    id: "imageShadowBlur",
+    title: "Image Shadow Blur",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "imageShadowPositionX",
+    title: "Image Shadow PositionX",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "imageShadowPositionY",
+    title: "Image Shadow PositionY",
+    field: "number",
+    defaultValue: 0
   },
   {
     id: "label",
     title: "Label",
     field: "switch",
-    defaultValue: true
+    defaultValue: false
   },
   {
     id: "labelText",
     title: "Label Text",
     field: "text",
-    defaultValue: ""
+    defaultValue: "marker"
+  },
+  {
+    id: "labelPosition",
+    title: "Label Position",
+    field: "select",
+    defaultValue: "left",
+    valueOptions: [
+      "left",
+      "right",
+      "top",
+      "bottom",
+      "lefttop",
+      "leftbottom",
+      "righttop",
+      "rightbottom"
+    ]
   },
   {
     id: "labelTypography",
     title: "Label Typography",
     field: "typography",
     defaultValue: {
-      fontFamily: "Arial",
-      fontSize: 12,
-      fontWeight: "normal",
-      color: "#000000",
-      italic: false,
-      underline: false
+      fontFamily: "noto sans",
+      fontSize: 14,
+      fontWeight: "400",
+      color: "#FFFFFF",
+      italic: false
     },
     disableExpression: true,
     disableConditions: true
+  },
+  {
+    id: "labelBackground",
+    title: "Label Background ",
+    field: "switch",
+    defaultValue: false
+  },
+  {
+    id: "labelBackgroundColor",
+    title: "Label Background Color",
+    field: "color",
+    defaultValue: "#FFFFFF"
+  },
+  {
+    id: "labelBackgroundPaddingHorizontal",
+    title: "Label Background Padding Horizontal",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "labelBackgroundPaddingVertical",
+    title: "Label Background Padding Vertical",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "extrude",
+    title: "Extrude",
+    field: "switch",
+    defaultValue: false
+  },
+  {
+    id: "near",
+    title: "Near",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "far",
+    title: "Far",
+    field: "number",
+    defaultValue: 10000
+  },
+  {
+    id: "hideIndicator",
+    title: "Hide Indicator",
+    field: "switch",
+    defaultValue: false
+  },
+  {
+    id: "selectedFeatureColor",
+    title: "Selected Feature Color",
+    field: "color",
+    defaultValue: DEFAULT_SELECTED_FEATURE_COLOR,
+    disableExpression: true,
+    disableConditions: true
   }
 ];
diff --git a/...c/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/model.ts b/...c/beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/model.ts
@@ -46,11 +46,72 @@ export const modelNodes: AppearanceNode[] = [
     field: "number",
     defaultValue: 1
   },
+  {
+    id: "maximumScale",
+    title: "Maximum Scale",
+    field: "number",
+    defaultValue: 10
+  },
+  {
+    id: "minimumPixelSize",
+    title: "Minimum Pixel Size",
+    field: "number",
+    defaultValue: 100
+  },
+  {
+    id: "animation",
+    title: "Animation",
+    field: "switch",
+    defaultValue: false
+  },
   {
     id: "shadows",
     title: "Shadows",
     field: "select",
     defaultValue: "disabled",
     valueOptions: SHADOWS
+  },
+  {
+    id: "colorBlend",
+    title: "Color Blend",
+    field: "select",
+    defaultValue: "none",
+    valueOptions: ["none", "highlight", "replace", "mix"]
+  },
+  {
+    id: "color",
+    title: "Color",
+    field: "color",
+    defaultValue: "#ffffff"
+  },
+  {
+    id: "colorBlendAmount",
+    title: "Color Blend Amount",
+    field: "number",
+    defaultValue: 0.5
+  },
+  {
+    id: "lightColor",
+    title: "Light Color",
+    field: "color",
+    defaultValue: "#ffffff"
+  },
+  {
+    id: "near",
+    title: "Near",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "far",
+    title: "Far",
+    field: "number",
+    defaultValue: 10000
+  },
+  {
+    id: "pbr",
+    title: "Pbr",
+    field: "switch",
+    defaultValue: true
   }
 ];
diff --git a/...beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/polygon.ts b/...beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/appearanceNodes/polygon.ts
@@ -1,6 +1,11 @@
 import { AppearanceNode } from "../types";
 
-import { DEFAULT_SELECTED_FEATURE_COLOR } from "./constant";
+import {
+  CLASSIFICATION_TYPE,
+  DEFAULT_SELECTED_FEATURE_COLOR,
+  HEIGHT_REFERENCES,
+  SHADOWS
+} from "./constant";
 
 export const polygonNodes: AppearanceNode[] = [
   {
@@ -44,7 +49,33 @@ export const polygonNodes: AppearanceNode[] = [
     title: "Height Reference",
     field: "select",
     defaultValue: "clamp",
-    valueOptions: ["none", "clamp", "relative"]
+    valueOptions: HEIGHT_REFERENCES
+  },
+  {
+    id: "shadows",
+    title: "Shadows",
+    field: "select",
+    defaultValue: "disabled",
+    valueOptions: SHADOWS
+  },
+  {
+    id: "near",
+    title: "Near",
+    field: "number",
+    defaultValue: 0
+  },
+  {
+    id: "far",
+    title: "Far",
+    field: "number",
+    defaultValue: 10000
+  },
+  {
+    id: "classificationType",
+    title: "Classification Type",
+    field: "select",
+    defaultValue: "both",
+    valueOptions: CLASSIFICATION_TYPE
   },
   {
     id: "extrudedHeight",
@@ -62,6 +93,8 @@ export const polygonNodes: AppearanceNode[] = [
     id: "selectedFeatureColor",
     title: "Selected Feature Color",
     field: "color",
-    defaultValue: DEFAULT_SELECTED_FEATURE_COLOR
+    defaultValue: DEFAULT_SELECTED_FEATURE_COLOR,
+    disableExpression: true,
+    disableConditions: true
   }
 ];