feat: label background color and padding property for markers (#426

* feat: label background color for markers * padding
reearth · Feb 7, 2023 · 72cd0da · 72cd0da
1 parent 3060cfd
commit 72cd0da
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 18 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx
@@ -67,6 +67,9 @@ type Property = {
       | "rightbottom";
     labelTypography?: Typography;
     labelBackground?: boolean;
+    labelBackgroundColor?: string;
+    labelBackgroundPaddingHorizontal?: number;
+    labelBackgroundPaddingVertical?: number;
     extrude?: boolean;
   };
 };
@@ -87,6 +90,9 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     labelText,
     labelPosition: labelPos = "right",
     labelBackground,
+    labelBackgroundColor,
+    labelBackgroundPaddingHorizontal,
+    labelBackgroundPaddingVertical,
     image = marker,
     imageSize,
     imageHorizontalOrigin: horizontalOrigin,
@@ -126,11 +132,6 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     shadowOffsetY,
   });
 
-  const cesiumImageColor = useMemo(
-    () => (imageColor ? Color.fromCssColorString(imageColor) : undefined),
-    [imageColor],
-  );
-
   const pixelOffset = useMemo(() => {
     const padding = 15;
     const x = (isStyleImage ? imgw : pointSize) / 2 + padding;
@@ -161,6 +162,21 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     return Color.WHITE.withAlpha(0.4);
   }, []);
 
+  const imageColorCesium = useMemo(() => toColor(imageColor), [imageColor]);
+  const pointColorCesium = useMemo(() => toColor(pointColor), [pointColor]);
+  const pointOutlineColorCesium = useMemo(() => toColor(pointOutlineColor), [pointOutlineColor]);
+  const labelColorCesium = useMemo(() => toColor(labelTypography?.color), [labelTypography?.color]);
+  const labelBackgroundColorCesium = useMemo(
+    () => toColor(labelBackgroundColor),
+    [labelBackgroundColor],
+  );
+  const labelBackgroundPadding = useMemo(
+    // https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html?classFilter=labelgra#backgroundPadding
+    () =>
+      new Cartesian2(labelBackgroundPaddingHorizontal || 7, labelBackgroundPaddingVertical || 5),
+    [labelBackgroundPaddingHorizontal, labelBackgroundPaddingVertical],
+  );
+
   return !pos || !isVisible ? null : (
     <>
       {extrudePoints && (
@@ -176,15 +192,15 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
         {style === "point" ? (
           <PointGraphics
             pixelSize={pointSize}
-            color={toColor(pointColor)}
-            outlineColor={toColor(pointOutlineColor)}
+            color={pointColorCesium}
+            outlineColor={pointOutlineColorCesium}
             outlineWidth={pointOutlineWidth}
             heightReference={heightReference(hr)}
           />
         ) : (
           <BillboardGraphics
             image={icon}
-            color={cesiumImageColor}
+            color={imageColorCesium}
             horizontalOrigin={ho(horizontalOrigin)}
             verticalOrigin={vo(verticalOrigin)}
             heightReference={heightReference(hr)}
@@ -207,10 +223,12 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
                 : VerticalOrigin.CENTER
             }
             pixelOffset={pixelOffset}
-            fillColor={toColor(labelTypography?.color)}
+            fillColor={labelColorCesium}
             font={toCSSFont(labelTypography, { fontSize: 30 })}
             text={labelText}
             showBackground={labelBackground}
+            backgroundColor={labelBackgroundColorCesium}
+            backgroundPadding={labelBackgroundPadding}
             heightReference={heightReference(hr)}
           />
         )}

diff --git a/src/core/engines/Cesium/Feature/Marker/index.tsx b/src/core/engines/Cesium/Feature/Marker/index.tsx
@@ -41,6 +41,9 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     labelText,
     labelPosition: labelPos = "right",
     labelBackground,
+    labelBackgroundColor,
+    labelBackgroundPaddingHorizontal,
+    labelBackgroundPaddingVertical,
     image = marker,
     imageSize,
     imageHorizontalOrigin: horizontalOrigin,
@@ -82,11 +85,6 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     shadowOffsetY,
   });
 
-  const cesiumImageColor = useMemo(
-    () => (imageColor ? Color.fromCssColorString(imageColor) : undefined),
-    [imageColor],
-  );
-
   const pixelOffset = useMemo(() => {
     const padding = 15;
     const x = (isStyleImage ? imgw : pointSize) / 2 + padding;
@@ -105,6 +103,21 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     return Color.WHITE.withAlpha(0.4);
   }, []);
 
+  const imageColorCesium = useMemo(() => toColor(imageColor), [imageColor]);
+  const pointColorCesium = useMemo(() => toColor(pointColor), [pointColor]);
+  const pointOutlineColorCesium = useMemo(() => toColor(pointOutlineColor), [pointOutlineColor]);
+  const labelColorCesium = useMemo(() => toColor(labelTypography?.color), [labelTypography?.color]);
+  const labelBackgroundColorCesium = useMemo(
+    () => toColor(labelBackgroundColor),
+    [labelBackgroundColor],
+  );
+  const labelBackgroundPadding = useMemo(
+    // https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html?classFilter=labelgra#backgroundPadding
+    () =>
+      new Cartesian2(labelBackgroundPaddingHorizontal || 7, labelBackgroundPaddingVertical || 5),
+    [labelBackgroundPaddingHorizontal, labelBackgroundPaddingVertical],
+  );
+
   return !pos || !isVisible ? null : (
     <>
       {extrudePoints && (
@@ -120,15 +133,15 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
         {style === "point" ? (
           <PointGraphics
             pixelSize={pointSize}
-            color={toColor(pointColor)}
-            outlineColor={toColor(pointOutlineColor)}
+            color={pointColorCesium}
+            outlineColor={pointOutlineColorCesium}
             outlineWidth={pointOutlineWidth}
             heightReference={heightReference(hr)}
           />
         ) : (
           <BillboardGraphics
             image={icon}
-            color={cesiumImageColor}
+            color={imageColorCesium}
             horizontalOrigin={ho(horizontalOrigin)}
             verticalOrigin={vo(verticalOrigin)}
             heightReference={heightReference(hr)}
@@ -151,10 +164,12 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
                 : VerticalOrigin.CENTER
             }
             pixelOffset={pixelOffset}
-            fillColor={toColor(labelTypography?.color)}
+            fillColor={labelColorCesium}
             font={toCSSFont(labelTypography, { fontSize: 30 })}
             text={labelText}
             showBackground={labelBackground}
+            backgroundColor={labelBackgroundColorCesium}
+            backgroundPadding={labelBackgroundPadding}
             heightReference={heightReference(hr)}
           />
         )}

diff --git a/src/core/mantle/types/appearance.ts b/src/core/mantle/types/appearance.ts
@@ -55,6 +55,9 @@ export type MarkerAppearance = {
     | "rightbottom";
   labelTypography?: Typography;
   labelBackground?: boolean;
+  labelBackgroundColor?: string;
+  labelBackgroundPaddingHorizontal?: number;
+  labelBackgroundPaddingVertical?: number;
   extrude?: boolean;
 };