custom color

mappable-world · Apr 4, 2024 · 870c388 · 870c388
1 parent 7e15568
commit 870c388
Showing 1 changed file with 28 additions and 8 deletions.
diff --git a/src/MMapDefaultMarker/index.ts b/src/MMapDefaultMarker/index.ts
@@ -3,9 +3,12 @@ import {IconColor, IconName, iconColors, icons, glyphColors} from '../icons';
 import './index.css';
 import pin from './pin.svg';
 
+export type ThemesColor = {day: string; night: string};
+export type MarkerColorProps = IconColor | ThemesColor;
+
 export type MMapDefaultMarkerProps = MMapMarkerProps & {
     iconName?: IconName;
-    color?: IconColor;
+    color?: MarkerColorProps;
 };
 
 const defaultProps = Object.freeze({color: 'darkgray'});
@@ -18,7 +21,7 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
     private _markerElement: HTMLElement;
     private _pin: HTMLElement;
     private _icon: HTMLElement;
-    private _color: {day: string; night: string};
+    private _color: ThemesColor;
 
     constructor(props: MMapDefaultMarkerProps) {
         super(props);
@@ -29,7 +32,7 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
     }
 
     protected _onAttach(): void {
-        this._color = iconColors[this._props.color];
+        this._color = this._getColor();
         this._markerElement = document.createElement('mappable');
         this._pin = document.createElement('mappable');
         this._icon = document.createElement('mappable');
@@ -40,9 +43,7 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         this._pin.innerHTML = pin;
 
         this._icon.classList.add('mappable--icon');
-        if (this._props.iconName !== undefined) {
-            this._icon.innerHTML = icons[this._props.iconName].normal;
-        }
+        this._icon.innerHTML = this._getIcon();
 
         this._pin.appendChild(this._icon);
         this._markerElement.appendChild(this._pin);
@@ -54,11 +55,11 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
 
     protected _onUpdate(propsDiff: Partial<MMapDefaultMarkerProps>): void {
         if (propsDiff.color !== undefined) {
-            this._color = iconColors[this._props.color];
+            this._color = this._getColor();
             this._updateTheme();
         }
 
-        this._icon.innerHTML = this._props.iconName !== undefined ? icons[this._props.iconName].normal : '';
+        this._icon.innerHTML = this._getIcon();
 
         this._marker.update(this._props);
     }
@@ -69,4 +70,23 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         this._markerElement.style.borderColor = '#f8f8f8';
         this._icon.style.color = glyphColors.day;
     }
+
+    private _getIcon(): string {
+        return this._props.iconName !== undefined ? icons[this._props.iconName].normal : '';
+    }
+
+    private _getColor(): ThemesColor {
+        const color = this._props.color as MarkerColorProps;
+
+        if (typeof color === 'string') {
+            if (!iconColors[color]) {
+                throw new Error(
+                    'The color should be one of the available color presets. If you need a custom color, pass it as an object with fields for day and night.'
+                );
+            }
+            return iconColors[color];
+        }
+
+        return color;
+    }
 }