Fix popup in reactify marker

mappable-world · May 14, 2024 · 0dde0dc · 0dde0dc
1 parent 047437d
commit 0dde0dc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/markers/MMapDefaultMarker/react/index.tsx b/src/markers/MMapDefaultMarker/react/index.tsx
@@ -41,7 +41,7 @@ export const MMapDefaultMarkerReactifyOverride: CustomReactify<MMapDefaultMarker
             }
 
             return {content: () => popupElement};
-        }, [props.popup.content, popupElement]);
+        }, [props.popup, popupElement]);
 
         return (
             <>

diff --git a/src/markers/MMapPopupMarker/index.css b/src/markers/MMapPopupMarker/index.css
@@ -50,6 +50,9 @@
     --mappable-default-tail-height-and-offset: calc(
         var(--mappable-default-tail-height) + var(--mappable-default-offset)
     );
+    --mappable-default-popup-tail-rotate-offset: calc(
+        var(--mappable-default-tail-width) / 2 - var(--mappable-default-tail-height) / 2
+    );
 
     --mappable-default-popup-tail-transform-top: translate(-50%, calc(-100% - var(--mappable-default-offset)))
         rotate(180deg);
@@ -184,7 +187,11 @@
         transform: translate(calc(-100% - var(--mappable-default-tail-height-and-offset)), -50%);
     }
     .mappable--popup-marker_tail {
-        transform: translate(calc(-100% - var(--mappable-default-offset)), -50%) rotate(90deg);
+        transform: translate(
+                calc(-100% - var(--mappable-default-offset) + var(--mappable-default-popup-tail-rotate-offset)),
+                -50%
+            )
+            rotate(90deg);
     }
 }
 
@@ -195,6 +202,10 @@
         transform: translate(var(--mappable-default-tail-height-and-offset), -50%);
     }
     .mappable--popup-marker_tail {
-        transform: translate(var(--mappable-default-offset), -50%) rotate(-90deg);
+        transform: translate(
+                calc(var(--mappable-default-offset) - var(--mappable-default-popup-tail-rotate-offset)),
+                -50%
+            )
+            rotate(-90deg);
     }
 }