@mint-ui/map 0.1.1-beta

package/dist/components/mint-map/core/wrapper/MapControlWrapper.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var MintMapWrapper_module = require('./MintMapWrapper.module.scss.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var cn = classNames__default["default"].bind(MintMapWrapper_module);
+
+var getSizeString = function (size) {
+  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
+};
+
+var getAlignPosition = function (value, align) {
+  if (typeof value === 'string') {
+    var trimmed = value.replace(/ /g, '');
+    console.log('trimmed:', trimmed);
+    var isPercent = trimmed.endsWith('%');
+
+    if (!isPercent && !trimmed.endsWith('px')) {
+      throw new Error("Size [".concat(value, "] is not valid string value."));
+    }
+
+    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
+    var unit = isPercent ? '%' : 'px';
+    var numberValue = Number(numberPart);
+
+    if (isNaN(numberValue)) {
+      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
+    }
+
+    if (align === 'center') {
+      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(numberValue).concat(unit, ")");
+    } else {
+      return '0px';
+    }
+  } else if (typeof value === 'number') {
+    if (align === 'center') {
+      return "calc(50% - ".concat(value / 2, "px)");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(value, "px)");
+    } else {
+      return '0px';
+    }
+  }
+
+  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
+};
+
+function MapControlWrapper(_a) {
+  var _b = _a.width,
+      width = _b === void 0 ? 100 : _b,
+      _c = _a.height,
+      height = _c === void 0 ? 40 : _c,
+      _d = _a.positionHorizontal,
+      positionHorizontal = _d === void 0 ? 'left' : _d,
+      _e = _a.positionVertical,
+      positionVertical = _e === void 0 ? 'top' : _e,
+      children = _a.children;
+  return React__default["default"].createElement("div", {
+    className: cn('mint-map-control-wrapper'),
+    style: {
+      width: getSizeString(width),
+      height: getSizeString(height),
+      left: getAlignPosition(width, positionHorizontal),
+      top: getAlignPosition(height, positionVertical)
+    }
+  }, children);
+}
+
+module.exports = MapControlWrapper;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from "react";
+import { MarkerOptions, Position } from "../../MintMap";
+export declare type MovingEventFunciton = () => void;
+export interface MapMarkerMoving {
+    positions?: Position[];
+    positionClosed?: boolean;
+    startPositionIndex?: number;
+    velocity?: number;
+    loop?: boolean;
+    delay?: number;
+    autoStart?: boolean;
+    fps?: number;
+    onMovingStart?: MovingEventFunciton;
+    onMovingEnd?: MovingEventFunciton;
+}
+export interface MapMarkerWrapperProps extends MarkerOptions {
+    topOnClick?: boolean;
+    topOnHover?: boolean;
+    startAnimationClassName?: string;
+    endAnimationClassName?: string;
+    movingAnimation?: MapMarkerMoving;
+}
+export default function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var MintMapProvider = require('../provider/MintMapProvider.js');
+var MintMap = require('../../MintMap.js');
+var MarkerMovingHook = require('../hooks/MarkerMovingHook.js');
+
+var offsetCalibration = function (mapType, divElement, options) {
+  if (mapType === 'google') {
+    divElement.style.transform = "translate(50%, 100%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
+  }
+};
+
+function MapMarkerWrapper(_a) {
+  var startAnimationClassName = _a.startAnimationClassName,
+      endAnimationClassName = _a.endAnimationClassName,
+      _b = _a.topOnClick,
+      topOnClick = _b === void 0 ? false : _b,
+      _c = _a.topOnHover,
+      topOnHover = _c === void 0 ? false : _c,
+      movingAnimation = _a.movingAnimation,
+      children = _a.children,
+      options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var divCloneRef = React.useRef();
+  var markerRef = React.useRef();
+
+  var _d = React.useState({}),
+      movingState = _d[0],
+      setMovingState = _d[1];
+
+  React.useEffect(function () {
+    if (movingState.autoStart) {
+      setTimeout(function () {
+        start();
+      }, movingState.delay);
+    }
+  }, [movingState]);
+  React.useEffect(function () {
+    setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
+      marker: markerRef.current
+    }));
+  }, [movingAnimation]);
+  var start = MarkerMovingHook.useMarkerMoving(movingState)[0];
+
+  var onClickHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      controller.setMapDragged(false);
+      var clickHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('click');
+      var next = true;
+
+      if (clickHandler) {
+        var hasNext = clickHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && !topOnHover && topOnClick && controller.markerToTheTop(marker);
+    }
+  };
+
+  var onMouseOverHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
+      var next = true;
+
+      if (mouseOverHandler) {
+        var hasNext = mouseOverHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.markerToTheTop(marker);
+    }
+  };
+
+  React.useEffect(function () {
+    divElement.addEventListener('click', onClickHandler);
+    divElement.addEventListener('mouseover', onMouseOverHandler);
+    return function () {
+      if (divCloneRef.current && endAnimationClassName) {
+        divCloneRef.current.classList.add(endAnimationClassName);
+
+        var aniListener_1 = function () {
+          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
+
+          if (markerRef.current) {
+            console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+          }
+
+          divCloneRef.current = undefined;
+        };
+
+        divCloneRef.current.addEventListener('animationend', aniListener_1);
+        divElement.append(divCloneRef.current);
+      } else {
+        divElement.removeEventListener('click', onClickHandler);
+        divElement.removeEventListener('mouseover', onMouseOverHandler);
+
+        if (markerRef.current) {
+          console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+        }
+      }
+    };
+  }, []);
+  React.useEffect(function () {
+    if (options) {
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, options);
+        offsetCalibration(controller.getMapType(), divElement, options);
+      } else {
+        markerRef.current = new MintMap.Marker(options);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current);
+        offsetCalibration(controller.getMapType(), divElement, options);
+
+        if (movingAnimation) {
+          setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
+            marker: markerRef.current
+          }));
+        }
+
+        if (startAnimationClassName) {
+          divElement.style.visibility = 'hidden';
+          setTimeout(function () {
+            var _a, _b;
+
+            divCloneRef.current = divElement.firstElementChild;
+            divElement.style.visibility = 'visible';
+            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+
+            var aniListener = function () {
+              var _a, _b;
+
+              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
+              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
+            };
+
+            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
+          });
+        } else {
+          setTimeout(function () {
+            divCloneRef.current = divElement.firstElementChild;
+          });
+        }
+      }
+    }
+  }, [options]);
+  return reactDom.createPortal(children, divElement);
+}
+
+module.exports = MapMarkerWrapper;

package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+import { PolygonOptions } from "../../MintMap";
+export interface MapPolygonWrapperProps extends PolygonOptions {
+}
+export default function MapPolygonWrapper({ children, ...options }: PropsWithChildren<MapPolygonWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../provider/MintMapProvider.js');
+var MintMap = require('../../MintMap.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MapPolygonWrapper(_a) {
+  var children = _a.children,
+      options = tslib.__rest(_a, ["children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  React.useEffect(function () {
+    return function () {
+      if (polygonRef.current) {
+        console.log('polygon cleared', controller.clearDrawable(polygonRef.current));
+      }
+    };
+  }, []);
+  var polygonRef = React.useRef();
+  React.useEffect(function () {
+    if (options) {
+      if (polygonRef.current) {
+        controller.updatePolygon(polygonRef.current, options);
+      } else {
+        var polygon = new MintMap.Polygon(options);
+        polygonRef.current = polygon;
+        controller.createPolygon(polygon);
+      }
+    }
+  }, [options]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, options && children);
+}
+
+module.exports = MapPolygonWrapper;

package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+import { PolylineOptions } from "../../MintMap";
+export interface MapPolylineWrapperProps extends PolylineOptions {
+}
+export default function MapPolylineWrapper({ children, ...options }: PropsWithChildren<MapPolylineWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../provider/MintMapProvider.js');
+var MintMap = require('../../MintMap.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MapPolylineWrapper(_a) {
+  var children = _a.children,
+      options = tslib.__rest(_a, ["children"]);
+
+  var controller = MintMapProvider.useMintMapController();
+  React.useEffect(function () {
+    return function () {
+      if (polylineRef.current) {
+        console.log('polyline cleared', controller.clearDrawable(polylineRef.current));
+      }
+    };
+  }, []);
+  var polylineRef = React.useRef();
+  React.useEffect(function () {
+    if (options) {
+      if (polylineRef.current) {
+        controller.updatePolyline(polylineRef.current, options);
+      } else {
+        var polyline = new MintMap.Polyline(options);
+        polylineRef.current = polyline;
+        controller.createPolyline(polyline);
+      }
+    }
+  }, [options]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, options && children);
+}
+
+module.exports = MapPolylineWrapper;

package/dist/components/mint-map/core/wrapper/MintMapWrapper.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var styleInject = require('style-inject');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+
+var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
+styleInject__default["default"](css_248z);
+
+module.exports = styles;

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="google.maps" />
+import MintMapController from "../core/MintMapController";
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+export default class GoogleMintMapController extends MintMapController {
+    type: MapType;
+    map: google.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    constructor(props: MintMapProps);
+    polylineEvents: string[];
+    createPolyline(polyline: Polyline): void;
+    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    private getValidOptions;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    loadMapApi(): Promise<boolean>;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    destroyMap: () => void;
+    private fromGoogleBounds;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+}

package/dist/components/mint-map/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MintMap } from './MintMap';
+export * from './core';

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="navermaps" />
+import MintMapController from "../core/MintMapController";
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+export default class NaverMintMapController extends MintMapController {
+    type: MapType;
+    map: naver.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    constructor(props: MintMapProps);
+    polylineEvents: string[];
+    createPolyline(polyline: Polyline): void;
+    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragStartPoint;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    loadMapApi(): Promise<boolean>;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    destroyMap(): void;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/mint-map';