Rename tooltip to text-popup

mappable-world · May 8, 2024 · e2ca0f3 · e2ca0f3
1 parent df1d06a
commit e2ca0f3
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 56 deletions.
diff --git a/example/default-tooltip/common.ts b/example/default-tooltip/common.ts
@@ -2,4 +2,4 @@ import type {MMapLocationRequest, LngLat} from '@mappable-world/mappable-types';
 
 export const CENTER: LngLat = [55.442795, 25.24107];
 export const LOCATION: MMapLocationRequest = {center: CENTER, zoom: 14};
-export const TOOLTIP_TEXT = 'Default tooltip';
+export const POPUP_TEXT = 'Default text popup';
diff --git a/example/default-tooltip/react/index.tsx b/example/default-tooltip/react/index.tsx
@@ -1,5 +1,5 @@
-import {MMapTooltipMarkerProps} from '../../src';
-import {CENTER, LOCATION, TOOLTIP_TEXT} from '../common';
+import type {MMapTextPopupMarkerProps} from '../../src';
+import {CENTER, LOCATION, POPUP_TEXT} from '../common';
 
 window.map = null;
 
@@ -13,7 +13,7 @@ async function main() {
 
     const {useState, useCallback} = React;
 
-    const {MMapTooltipMarker} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+    const {MMapTextPopupMarker} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
 
     ReactDOM.render(
         <React.StrictMode>
@@ -24,7 +24,7 @@ async function main() {
 
     function App() {
         const [location] = useState(LOCATION);
-        const [position, setPosition] = useState<MMapTooltipMarkerProps['position']>(undefined);
+        const [position, setPosition] = useState<MMapTextPopupMarkerProps['position']>(undefined);
 
         const positionLeft = useCallback(() => setPosition('left'), []);
         const positionLeftTop = useCallback(() => setPosition('left top'), []);
@@ -49,7 +49,7 @@ async function main() {
                     <MMapControlButton text="Right Bottom" onClick={positionRightBottom} />
                     <MMapControlButton text="Right" onClick={positionRight} />
                 </MMapControls>
-                <MMapTooltipMarker coordinates={CENTER} draggable content={TOOLTIP_TEXT} position={position} />
+                <MMapTextPopupMarker coordinates={CENTER} draggable content={POPUP_TEXT} position={position} />
             </MMap>
         );
     }

diff --git a/example/default-tooltip/vanilla/index.ts b/example/default-tooltip/vanilla/index.ts
@@ -1,12 +1,12 @@
-import {CENTER, LOCATION, TOOLTIP_TEXT} from '../common';
+import {CENTER, LOCATION, POPUP_TEXT} from '../common';
 window.map = null;
 
 main();
 async function main() {
     await mappable.ready;
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} = mappable;
 
-    const {MMapTooltipMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
+    const {MMapTextPopupMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
 
     map = new MMap(document.getElementById('app'), {location: LOCATION});
 
@@ -15,17 +15,17 @@ async function main() {
 
     map.addChild(
         new MMapControls({position: 'top right'}, [
-            new MMapControlButton({text: 'Left', onClick: () => tooltip.update({position: 'left'})}),
-            new MMapControlButton({text: 'Left Top', onClick: () => tooltip.update({position: 'left top'})}),
-            new MMapControlButton({text: 'Left Bottom', onClick: () => tooltip.update({position: 'left bottom'})}),
-            new MMapControlButton({text: 'Bottom', onClick: () => tooltip.update({position: 'bottom'})}),
-            new MMapControlButton({text: 'Top', onClick: () => tooltip.update({position: 'top'})}),
-            new MMapControlButton({text: 'Right Top', onClick: () => tooltip.update({position: 'right top'})}),
-            new MMapControlButton({text: 'Right Bottom', onClick: () => tooltip.update({position: 'right bottom'})}),
-            new MMapControlButton({text: 'Right', onClick: () => tooltip.update({position: 'right'})})
+            new MMapControlButton({text: 'Left', onClick: () => textPopup.update({position: 'left'})}),
+            new MMapControlButton({text: 'Left Top', onClick: () => textPopup.update({position: 'left top'})}),
+            new MMapControlButton({text: 'Left Bottom', onClick: () => textPopup.update({position: 'left bottom'})}),
+            new MMapControlButton({text: 'Bottom', onClick: () => textPopup.update({position: 'bottom'})}),
+            new MMapControlButton({text: 'Top', onClick: () => textPopup.update({position: 'top'})}),
+            new MMapControlButton({text: 'Right Top', onClick: () => textPopup.update({position: 'right top'})}),
+            new MMapControlButton({text: 'Right Bottom', onClick: () => textPopup.update({position: 'right bottom'})}),
+            new MMapControlButton({text: 'Right', onClick: () => textPopup.update({position: 'right'})})
         ])
     );
 
-    const tooltip = new MMapTooltipMarker({coordinates: CENTER, draggable: true, content: TOOLTIP_TEXT});
-    map.addChild(tooltip);
+    const textPopup = new MMapTextPopupMarker({coordinates: CENTER, draggable: true, content: POPUP_TEXT});
+    map.addChild(textPopup);
 }
diff --git a/example/default-tooltip/vue/index.ts b/example/default-tooltip/vue/index.ts
@@ -1,5 +1,5 @@
-import {MMapTooltipMarkerProps} from '../../src';
-import {CENTER, LOCATION, TOOLTIP_TEXT} from '../common';
+import type {MMapTextPopupMarkerProps} from '../../src';
+import {CENTER, LOCATION, POPUP_TEXT} from '../common';
 
 window.map = null;
 
@@ -11,7 +11,7 @@ async function main() {
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} =
         vuefy.module(mappable);
 
-    const {MMapTooltipMarker} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+    const {MMapTextPopupMarker} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
 
     const app = Vue.createApp({
         components: {
@@ -20,13 +20,13 @@ async function main() {
             MMapDefaultFeaturesLayer,
             MMapControls,
             MMapControlButton,
-            MMapTooltipMarker
+            MMapTextPopupMarker
         },
         setup() {
             const refMap = (ref: any) => {
                 window.map = ref?.entity;
             };
-            const position = Vue.ref<MMapTooltipMarkerProps['position']>(undefined);
+            const position = Vue.ref<MMapTextPopupMarkerProps['position']>(undefined);
 
             const positionLeft = () => (position.value = 'left');
             const positionLeftTop = () => (position.value = 'left top');
@@ -40,7 +40,7 @@ async function main() {
             return {
                 LOCATION,
                 CENTER,
-                TOOLTIP_TEXT,
+                POPUP_TEXT,
                 position,
                 refMap,
                 positionLeft,
@@ -67,7 +67,7 @@ async function main() {
                     <MMapControlButton text="Right Bottom" :onClick="positionRightBottom" />
                     <MMapControlButton text="Right" :onClick="positionRight" />
                 </MMapControls>
-                <MMapTooltipMarker :coordinates="CENTER" :draggable="true" :content="TOOLTIP_TEXT" :position="position" />
+                <MMapTextPopupMarker :coordinates="CENTER" :draggable="true" :content="POPUP_TEXT" :position="position" />
             </MMap>`
     });
     app.mount('#app');

diff --git a/src/markers/MMapTextPopupMarker/MMapTextPopupMarker.test.ts b/src/markers/MMapTextPopupMarker/MMapTextPopupMarker.test.ts
@@ -1,8 +1,8 @@
 import {MMap} from '@mappable-world/mappable-types';
 import {CENTER, createContainer} from '../../../tests/common';
-import {MMapTooltipMarker} from './';
+import {MMapTextPopupMarker} from './';
 
-describe('MMapTooltipMarker', () => {
+describe('MMapTextPopupMarker', () => {
     let map: MMap;
     let container: HTMLElement;
 
@@ -18,20 +18,20 @@ describe('MMapTooltipMarker', () => {
     });
 
     it('add on map', () => {
-        const tooltip = new MMapTooltipMarker({coordinates: CENTER, content: 'Tooltip'});
-        map.addChild(tooltip);
+        const popup = new MMapTextPopupMarker({coordinates: CENTER, content: 'Popup'});
+        map.addChild(popup);
 
-        expect(document.querySelector('.mappable--popup-marker .mappable--default-tooltip')).not.toBeNull();
+        expect(document.querySelector('.mappable--popup-marker .mappable--default-text-popup')).not.toBeNull();
     });
     it('change content props', () => {
-        const tooltip = new MMapTooltipMarker({coordinates: CENTER, content: 'Tooltip'});
-        map.addChild(tooltip);
-        const tooltipElement = document.querySelector<HTMLElement>(
-            '.mappable--popup-marker .mappable--default-tooltip'
+        const popup = new MMapTextPopupMarker({coordinates: CENTER, content: 'Popup'});
+        map.addChild(popup);
+        const popupElement = document.querySelector<HTMLElement>(
+            '.mappable--popup-marker .mappable--default-text-popup'
         );
-        expect(tooltipElement.textContent).toBe('Tooltip');
+        expect(popupElement.textContent).toBe('Popup');
 
-        tooltip.update({content: 'New content'});
-        expect(tooltipElement.textContent).toBe('New content');
+        popup.update({content: 'New content'});
+        expect(popupElement.textContent).toBe('New content');
     });
 });
diff --git a/src/markers/MMapTextPopupMarker/index.css b/src/markers/MMapTextPopupMarker/index.css
@@ -1,4 +1,4 @@
-.mappable--default-tooltip {
+.mappable--default-text-popup {
     display: block;
     max-width: inherit;
     max-height: inherit;

diff --git a/src/markers/MMapTextPopupMarker/index.ts b/src/markers/MMapTextPopupMarker/index.ts
@@ -1,47 +1,47 @@
 import {MMapPopupMarker, MMapPopupMarkerProps} from '../MMapPopupMarker';
 import './index.css';
-import {MMapTooltipMarkerVuefyOptions} from './vue';
+import {MMapTextPopupMarkerVuefyOptions} from './vue';
 
-export type MMapTooltipMarkerProps = Omit<MMapPopupMarkerProps, 'content' | 'show' | 'onClose' | 'onOpen'> & {
-    /** The text content that the tooltip will display */
+export type MMapTextPopupMarkerProps = Omit<MMapPopupMarkerProps, 'content' | 'show' | 'onClose' | 'onOpen'> & {
+    /** The text content that the popup will display */
     content: string;
 };
 /**
- * `MMapTooltipMarker` is a default tooltip - a text popup with no ability to close.
+ * `MMapTextPopupMarker` - a text popup with no ability to close.
  * @example
  * ```js
- * const tooltip = new MMapTooltipMarker({
- *  content:'Default tooltip',
+ * const popup = new MMapTextPopupMarker({
+ *  content:'Text popup',
  *  // support MMapMarker props
- *  coordinates: TOOLTIP_COORD,
+ *  coordinates: POPUP_COORD,
  *  draggable: true,
  *  // support MMapPopupMarker props
  *  position: 'top',
  * });
- * map.addChild(tooltip);
+ * map.addChild(popup);
  * ```
  */
-export class MMapTooltipMarker extends mappable.MMapComplexEntity<MMapTooltipMarkerProps> {
-    static [mappable.optionsKeyVuefy] = MMapTooltipMarkerVuefyOptions;
+export class MMapTextPopupMarker extends mappable.MMapComplexEntity<MMapTextPopupMarkerProps> {
+    static [mappable.optionsKeyVuefy] = MMapTextPopupMarkerVuefyOptions;
     private _popup: MMapPopupMarker;
     private _element: HTMLElement;
 
     protected _onAttach(): void {
-        this._popup = new MMapPopupMarker({...this._props, content: this.__createTooltip});
+        this._popup = new MMapPopupMarker({...this._props, content: this.__createTextPopup});
         this.addChild(this._popup);
     }
 
-    protected _onUpdate(propsDiff: Partial<MMapTooltipMarkerProps>): void {
+    protected _onUpdate(propsDiff: Partial<MMapTextPopupMarkerProps>): void {
         if (propsDiff.content !== undefined) {
             this._element.textContent = this._props.content;
         }
         const {content, ...propsWithoutContent} = this._props;
         this._popup.update({...propsWithoutContent});
     }
 
-    private __createTooltip = (): HTMLElement => {
+    private __createTextPopup = (): HTMLElement => {
         this._element = document.createElement('mappable');
-        this._element.classList.add('mappable--default-tooltip');
+        this._element.classList.add('mappable--default-text-popup');
         this._element.textContent = this._props.content;
         return this._element;
     };

diff --git a/src/markers/MMapTextPopupMarker/vue/index.ts b/src/markers/MMapTextPopupMarker/vue/index.ts
@@ -1,9 +1,9 @@
 import {MMapFeatureProps, MMapMarkerEventHandler} from '@mappable-world/mappable-types';
 import {CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
 import type TVue from '@vue/runtime-core';
-import {MMapTooltipMarker, MMapTooltipMarkerProps} from '../';
+import {MMapTextPopupMarker, MMapTextPopupMarkerProps} from '../';
 
-export const MMapTooltipMarkerVuefyOptions: CustomVuefyOptions<MMapTooltipMarker> = {
+export const MMapTextPopupMarkerVuefyOptions: CustomVuefyOptions<MMapTextPopupMarker> = {
     props: {
         coordinates: {type: Object, required: true},
         source: String,
@@ -23,7 +23,7 @@ export const MMapTooltipMarkerVuefyOptions: CustomVuefyOptions<MMapTooltipMarker
         onClick: Function as TVue.PropType<MMapFeatureProps['onClick']>,
         onFastClick: Function as TVue.PropType<MMapFeatureProps['onFastClick']>,
         content: {type: String, required: true},
-        position: {type: String as TVue.PropType<MMapTooltipMarkerProps['position']>},
+        position: {type: String as TVue.PropType<MMapTextPopupMarkerProps['position']>},
         offset: {type: Number, default: 0}
     }
 };
diff --git a/src/markers/index.ts b/src/markers/index.ts
@@ -1,4 +1,4 @@
 export * from './MMapDefaultMarker';
 export {MMapDefaultPopupMarker, MMapDefaultPopupMarkerProps} from './MMapDefaultPopupMarker';
 export {MMapPopupMarker, MMapPopupMarkerProps, MMapPopupPositionProps} from './MMapPopupMarker';
-export {MMapTooltipMarker, MMapTooltipMarkerProps} from './MMapTextPopupMarker';
+export {MMapTextPopupMarker, MMapTextPopupMarkerProps} from './MMapTextPopupMarker';