fix vue type and add size variables

mappable-world · Jul 15, 2024 · f03edf3 · f03edf3
1 parent e9f1d49
commit f03edf3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/example/marker-popup/react/index.tsx b/example/marker-popup/react/index.tsx
@@ -25,14 +25,18 @@ async function main() {
     function App() {
         const [location] = useState(LOCATION);
         const [size, setSize] = useState<MarkerSizeProps>('normal');
-        const popup = useMemo(() => ({content: () => <span>Marker popup</span>}), []);
 
         return (
             <MMap location={location} ref={(x) => (map = x)}>
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
 
-                <MMapDefaultMarker coordinates={CENTER} iconName="fallback" size={size} popup={popup} />
+                <MMapDefaultMarker
+                    coordinates={CENTER}
+                    iconName="fallback"
+                    size={size}
+                    popup={{content: () => <span>Marker popup</span>, position: 'bottom'}}
+                />
 
                 <MMapControls position="top left">
                     <MMapControlButton text="Normal" onClick={useCallback(() => setSize('normal'), [])} />

diff --git a/src/markers/MMapDefaultMarker/index.ts b/src/markers/MMapDefaultMarker/index.ts
@@ -32,6 +32,13 @@ const HINT_SUBTITLE_CLASS = 'mappable--hint-subtitle';
 const HINT_STABLE = 'mappable--hint__stable';
 const HINT_HOVERED = 'mappable--hint__hovered';
 
+const NORMAL_SIZE_MARKER_HEIGHT = 59;
+const NORMAL_SIZE_MARKER_WIDTH = 44;
+
+const SMALL_SIZE_MARKER_WIDTH = 24;
+
+const MICRO_SIZE_MARKER_WIDTH = 14;
+
 const DISTANCE_BETWEEN_POPUP_AND_MARKER = 8;
 
 export type ThemesColor = {day: string; night: string};
@@ -302,19 +309,19 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
                 const popupPosition = this._props.popup.position ?? 'top';
 
                 if (popupPosition.includes('top')) {
-                    offset = 59 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                    offset = NORMAL_SIZE_MARKER_HEIGHT + DISTANCE_BETWEEN_POPUP_AND_MARKER;
                 } else if (popupPosition.includes('bottom')) {
                     offset = DISTANCE_BETWEEN_POPUP_AND_MARKER;
                 } else {
-                    offset = 44 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                    offset = NORMAL_SIZE_MARKER_WIDTH / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
                 }
 
                 break;
             case 'small':
-                offset = 24 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                offset = SMALL_SIZE_MARKER_WIDTH / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
                 break;
             case 'micro':
-                offset = 14 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                offset = MICRO_SIZE_MARKER_WIDTH / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
                 break;
         }
         return offset;

diff --git a/src/markers/MMapDefaultMarker/vue/index.ts b/src/markers/MMapDefaultMarker/vue/index.ts
@@ -4,7 +4,12 @@ import type TVue from '@vue/runtime-core';
 import {MMapDefaultMarker, MMapDefaultMarkerProps, MarkerColorProps, MarkerPopupProps, MarkerSizeProps} from '../';
 import {IconName} from '../../../icons';
 
-export const MMapDefaultMarkerVuefyOptions: CustomVuefyOptions<MMapDefaultMarker> = {
+type VuefyMarkerPopup = Omit<MarkerPopupProps, 'content'>;
+
+export const MMapDefaultMarkerVuefyOptions: CustomVuefyOptions<
+    MMapDefaultMarker,
+    Omit<MMapDefaultMarkerProps, 'popup'> & {popup: VuefyMarkerPopup}
+> = {
     props: {
         coordinates: {type: Object, required: true},
         source: String,
@@ -29,7 +34,7 @@ export const MMapDefaultMarkerVuefyOptions: CustomVuefyOptions<MMapDefaultMarker
         title: {type: String},
         subtitle: {type: String},
         staticHint: {type: Boolean, default: true},
-        popup: {type: Object as TVue.PropType<MarkerPopupProps>}
+        popup: {type: Object as TVue.PropType<VuefyMarkerPopup>}
     }
 };