Added the props for the popup in MMapDefaultMarker (#26)

1. Added the props for the popup in MMapDefaultMarker 2. The marker with the `normal` size did not display the popup correctly, I corrected it --------- Co-authored-by: MokujinMap <mokujin@mappable.world>
mappable-world · Jul 16, 2024 · 199648f · 199648f
1 parent 4e2ca8e
commit 199648f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/markers/MMapDefaultMarker/index.ts b/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';
 
@@ -32,15 +32,19 @@ 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};
 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 +216,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,13 +306,22 @@ 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 = NORMAL_SIZE_MARKER_HEIGHT + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                } else if (popupPosition.includes('bottom')) {
+                    offset = DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                } else {
+                    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/react/index.tsx b/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)}
             </>
         );

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>}
     }
 };
 
@@ -43,11 +48,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 +65,7 @@ export const MMapDefaultMarkerVuefyOverride: CustomVuefyFn<MMapDefaultMarker> =
                     return undefined;
                 }
                 content.value = slots.popupContent();
-                return {content: () => popupHTMLElement};
+                return {...props.popup, content: () => popupHTMLElement};
             });
             expose({entity: markerEntity});
             return () =>