Added the props for the popup in MMapDefaultMarker

src/markers/MMapDefaultMarker/index.ts

@@ -1,6 +1,6 @@
 import {LngLat, MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types';
 import {IconColor, IconName, iconColors, icons} from '../../icons';
-import {MMapPopupContentProps, MMapPopupMarker} from '../MMapPopupMarker';
+import {MMapPopupMarkerProps, MMapPopupMarker} from '../MMapPopupMarker';
 import {MMapDefaultMarkerReactifyOverride} from './react';
 import {MMapDefaultMarkerVuefyOptions, MMapDefaultMarkerVuefyOverride} from './vue';
 
@@ -37,10 +37,7 @@ const DISTANCE_BETWEEN_POPUP_AND_MARKER = 8;
 export type ThemesColor = {day: string; night: string};
 export type MarkerColorProps = IconColor | ThemesColor;
 export type MarkerSizeProps = 'normal' | 'small' | 'micro';
-export type MarkerPopupProps = {
-    /** The function of creating popup content */
-    content: MMapPopupContentProps;
-};
+export type MarkerPopupProps = Omit<MMapPopupMarkerProps, keyof MMapMarkerProps>;
 
 export type MMapDefaultMarkerProps = MMapMarkerProps & {
     iconName?: IconName;
@@ -212,8 +209,8 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         return new MMapPopupMarker({
             ...this._props,
             ...this._props.popup,
-            offset: this._getPopupOffset(),
-            show: false,
+            show: this._props.popup.show ?? false,
+            offset: this._props.popup.offset ?? this._getPopupOffset(),
             zIndex: 1000
         });
     }
@@ -302,7 +299,16 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         let offset: number;
         switch (size) {
             case 'normal':
-                offset = 59 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                const popupPosition = this._props.popup.position ?? 'top';
+
+                if (popupPosition.includes('top')) {
+                    offset = 59 + 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;
+                }
+
                 break;
             case 'small':
                 offset = 24 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;

src/markers/MMapDefaultMarker/react/index.tsx

@@ -1,13 +1,13 @@
 import {MMapEntity} from '@mappable-world/mappable-types';
 import {CustomReactify, OverrideProps, Prettify} from '@mappable-world/mappable-types/reactify/reactify';
 import type TReact from 'react';
-import {MMapDefaultMarkerProps, MMapDefaultMarker as MMapDefaultMarkerI} from '..';
+import {MMapDefaultMarkerProps, MarkerPopupProps, MMapDefaultMarker as MMapDefaultMarkerI} from '..';
 
 type MMapDefaultMarkerReactifiedProps = Prettify<
     OverrideProps<
         MMapDefaultMarkerProps,
         {
-            popup?: {
+            popup?: Omit<MarkerPopupProps, 'content'> & {
                 /** The function of creating popup content */
                 content: string | (() => TReact.ReactElement);
             };
@@ -29,7 +29,7 @@ export const MMapDefaultMarkerReactifyOverride: CustomReactify<MMapDefaultMarker
         const [popupElement] = React.useState(document.createElement('mappable'));
         const [content, setContent] = React.useState<React.ReactElement>();
 
-        const popupContent = React.useMemo(() => {
+        const popup = React.useMemo(() => {
             if (props.popup === undefined) {
                 return undefined;
             }
@@ -40,12 +40,12 @@ export const MMapDefaultMarkerReactifyOverride: CustomReactify<MMapDefaultMarker
                 setContent(props.popup.content());
             }
 
-            return {content: () => popupElement};
+            return {...props.popup, content: () => popupElement};
         }, [props.popup, popupElement]);
 
         return (
             <>
-                <MMapDefaultMarkerReactified {...props} popup={popupContent} ref={ref} />
+                <MMapDefaultMarkerReactified {...props} popup={popup} ref={ref} />
                 {ReactDOM.createPortal(content, popupElement)}
             </>
         );

src/markers/MMapDefaultMarker/vue/index.ts

@@ -43,11 +43,10 @@ export const MMapDefaultMarkerVuefyOverride: CustomVuefyFn<MMapDefaultMarker> =
     {vuefy, Vue}
 ) => {
     const MMapDefaultMarkerV = vuefy.entity(MMapDefaultMarkerI);
-    const {popup, ...overridedProps} = props;
 
     return Vue.defineComponent({
         name: 'MMapDefaultMarker',
-        props: overridedProps,
+        props,
         slots: Object as TVue.SlotsType<MMapDefaultMarkerSlots>,
         setup(props, {slots, expose}) {
             const content: TVue.Ref<TVue.VNodeChild | null> = Vue.ref(null);
@@ -61,7 +60,7 @@ export const MMapDefaultMarkerVuefyOverride: CustomVuefyFn<MMapDefaultMarker> =
                     return undefined;
                 }
                 content.value = slots.popupContent();
-                return {content: () => popupHTMLElement};
+                return {...props.popup, content: () => popupHTMLElement};
             });
             expose({entity: markerEntity});
             return () =>