Change opacity to string

maplibre · Jan 28, 2024 · f8a52d7 · f8a52d7
1 parent 09e500c
commit f8a52d7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/ui/marker.test.ts b/src/ui/marker.test.ts
@@ -850,7 +850,7 @@ describe('marker', () => {
 
     test('Sets opacity according to options.opacity', () => {
         const map = createMap();
-        const marker = new Marker({opacity: 0.7})
+        const marker = new Marker({opacity: '0.7'})
             .setLngLat([0, 0])
             .addTo(map);
         expect(marker.getElement().style.opacity).toMatch('.7');
@@ -859,17 +859,17 @@ describe('marker', () => {
 
     test('Changes opacity to a new value provided by setOpacity', () => {
         const map = createMap();
-        const marker = new Marker({opacity: 0.7})
+        const marker = new Marker({opacity: '0.7'})
             .setLngLat([0, 0])
             .addTo(map);
-        marker.setOpacity(0.6);
+        marker.setOpacity('0.6');
         expect(marker.getElement().style.opacity).toMatch('.6');
         map.remove();
     });
 
     test('Resets opacity to default when setOpacity is called without arguments', () => {
         const map = createMap();
-        const marker = new Marker({opacity: 0.7})
+        const marker = new Marker({opacity: '0.7'})
             .setLngLat([0, 0])
             .addTo(map);
         marker.setOpacity();
@@ -912,7 +912,7 @@ describe('marker', () => {
     test('Applies options.opacity when 3d terrain is enabled and marker is in clear view', () => {
         const map = createMap();
         map.transform.lngLatToCameraDepth = () => .95; // Mocking distance to marker
-        const marker = new Marker({opacity: 0.7})
+        const marker = new Marker({opacity: '0.7'})
             .setLngLat([0, 0])
             .addTo(map);
 
@@ -929,7 +929,7 @@ describe('marker', () => {
     test('Applies options.opacityWhenCovered when marker is hidden by 3d terrain', () => {
         const map = createMap();
         map.transform.lngLatToCameraDepth = () => .95; // Mocking distance to marker
-        const marker = new Marker({opacity: 0.7, opacityWhenCovered: 0.3})
+        const marker = new Marker({opacity: '0.7', opacityWhenCovered: '0.3'})
             .setLngLat([0, 0])
             .addTo(map);
 
@@ -946,7 +946,7 @@ describe('marker', () => {
     test('Applies new "opacityWhenCovered" provided by setOpacity when marker is hidden by 3d terrain', async () => {
         const map = createMap();
         map.transform.lngLatToCameraDepth = () => .95; // Mocking distance to marker
-        const marker = new Marker({opacityWhenCovered: 0.15})
+        const marker = new Marker({opacityWhenCovered: '0.15'})
             .setLngLat([0, 0])
             .addTo(map);
 
@@ -956,7 +956,7 @@ describe('marker', () => {
         } as any as Terrain;
         map.fire('terrain');
 
-        marker.setOpacity(undefined, 0.35);
+        marker.setOpacity(undefined, '0.35');
 
         expect(marker.getElement().style.opacity).toMatch('0.35');
         map.remove();

diff --git a/src/ui/marker.ts b/src/ui/marker.ts
@@ -77,12 +77,12 @@ type MarkerOptions = {
      * Marker's opacity when it's in clear view (not behind 3d terrain)
      * @defaultValue 1
      */
-    opacity?: number;
+    opacity?: string;
     /**
      * Marker's opacity when it's behind 3d terrain
      * @defaultValue 0.2
      */
-    opacityWhenCovered?: number;
+    opacityWhenCovered?: string;
 };
 
 /**
@@ -138,8 +138,8 @@ export class Marker extends Evented {
     _pitchAlignment: Alignment;
     _rotationAlignment: Alignment;
     _originalTabIndex: string; // original tabindex of _element
-    _opacity: number;
-    _opacityWhenCovered: number;
+    _opacity: string;
+    _opacityWhenCovered: string;
     _opacityTimeout: ReturnType<typeof setTimeout>;
 
     /**
@@ -523,7 +523,7 @@ export class Marker extends Evented {
     _updateOpacity(force: boolean = false) {
         const terrain = this._map.terrain;
         if (!terrain) {
-            if (this._element.style.opacity !== String(this._opacity)) { this._element.style.opacity = String(this._opacity); }
+            if (this._element.style.opacity !== this._opacity) { this._element.style.opacity = this._opacity; }
             return;
         }
         if (force) {
@@ -545,7 +545,7 @@ export class Marker extends Evented {
 
         const forgiveness = .006;
         if (markerDistance - terrainDistance < forgiveness) {
-            this._element.style.opacity = String(this._opacity);
+            this._element.style.opacity = this._opacity;
             return;
         }
         // If the base is obscured, use the offset to check if the marker's center is obscured.
@@ -555,7 +555,7 @@ export class Marker extends Evented {
         const markerDistanceCenter = map.transform.lngLatToCameraDepth(this._lngLat, elevation + elevationToCenter);
         // Display at full opacity if center is visible.
         const centerIsInvisible = markerDistanceCenter - terrainDistanceCenter > forgiveness;
-        this._element.style.opacity = centerIsInvisible ? String(this._opacityWhenCovered) : String(this._opacity);
+        this._element.style.opacity = centerIsInvisible ? this._opacityWhenCovered : this._opacity;
     }
 
     _update = (e?: { type: 'move' | 'moveend' | 'terrain' | 'render' }) => {
@@ -819,10 +819,10 @@ export class Marker extends Evented {
      * @param opacityWhenCovered - Sets the `opacityWhenCovered` property of the marker.
      * @returns `this`
      */
-    setOpacity(opacity?: number, opacityWhenCovered?: number): this {
+    setOpacity(opacity?: string, opacityWhenCovered?: string): this {
         if (opacity === undefined && opacityWhenCovered === undefined) {
-            this._opacity = 1;
-            this._opacityWhenCovered = 0.2;
+            this._opacity = '1';
+            this._opacityWhenCovered = '0.2';
         }
         if (opacity !== undefined) {
             this._opacity = opacity;