@mint-ui/map 0.1.1-beta

package/.eslintrc.js

@@ -0,0 +1,110 @@
+module.exports = {
+	env: {
+		browser: true,
+		node: true
+	},
+	extends: [ 'airbnb', 'airbnb/hooks', 'eslint:recommended', 'plugin:react/recommended', 'plugin:import/recommended', 'plugin:storybook/recommended' ],
+	ignorePatterns: [ '.storybook', '*.d.ts', 'node_modules', 'build', 'dist', '**/env/*.js' ],
+	overrides: [
+		{
+			files: [ '*.ts', '*.tsx' ],
+			rules: { 'no-undef': 'off' }
+		}
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: { warnOnUnsupportedTypeScriptVersion: false },
+	plugins: [ '@typescript-eslint', 'sort-keys-fix', 'prettier' ],
+	rules: {
+		'@typescript-eslint/ban-ts-comment': [
+			'error',
+			{ 'ts-ignore': 'allow-with-description' }
+		],
+		'@typescript-eslint/no-explicit-any': 'warn',
+		'@typescript-eslint/no-unused-vars': 'error',
+		'array-bracket-spacing': [
+			'error',
+			'always',
+			{
+				arraysInArrays: false,
+				objectsInArrays: false
+			}
+		],
+		'brace-style': [ 'error', 'allman' ],
+		'class-methods-use-this': 'off',
+		'comma-dangle': [ 'error', 'never' ],
+		'eol-last': [ 'error', 'never' ],
+		'import/extensions': 'off',
+		'import/named': 'off',
+		'import/no-anonymous-default-export': 'off',
+		'import/no-cycle': 'off',
+		'import/no-extraneous-dependencies': 'off',
+		'import/no-named-as-default': 'off',
+		'import/no-unresolved': 'off',
+		'import/order': [
+			'error',
+			{
+				alphabetize: {
+					caseInsensitive: true,
+					order: 'asc'
+				},
+				groups: [ 'external', 'builtin', 'internal', 'sibling', 'parent', 'index' ],
+				'newlines-between': 'always'
+			}
+		],
+		indent: [ 'error', 'tab', { SwitchCase: 1 }],
+		'jsx-a11y/control-has-associated-label': 'off',
+		'jsx-quotes': [ 'error', 'prefer-single' ],
+		'linebreak-style': 'off',
+		'max-len': 'off',
+		'no-console': 'off',
+		'no-plusplus': 'off',
+		'no-restricted-exports': 'off',
+		'no-tabs': [ 'error', { allowIndentationTabs: true }],
+		'no-unused-vars': 'off',
+		'object-curly-newline': [ 'error', {
+			ExportDeclaration: 'never',
+			ImportDeclaration: 'never',
+			ObjectExpression: {
+				minProperties: 3,
+				multiline: true
+			},
+			ObjectPattern: { multiline: true }
+		}],
+		'react-hooks/exhaustive-deps': 'off',
+		'react/button-has-type': 'off',
+		'react/destructuring-assignment': 'off',
+		'react/function-component-definition': 'off',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{
+				children: 'never',
+				props: 'never'
+			}
+		],
+		'react/jsx-filename-extension': 'off',
+		'react/jsx-indent': [ 'error', 'tab' ],
+		'react/jsx-indent-props': [ 2, 'tab' ],
+		'react/jsx-props-no-spreading': 'off',
+		'react/jsx-sort-props': [
+			'error',
+			{
+				callbacksLast: true,
+				ignoreCase: true,
+				multiline: 'last',
+				noSortAlphabetically: false,
+				reservedFirst: false,
+				shorthandFirst: false,
+				shorthandLast: true
+			}
+		],
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'react/require-default-props': 'off',
+		'require-jsdoc': 'off',
+		'sort-keys-fix/sort-keys-fix': 'error'
+	},
+	settings: {
+		'import/parsers': { '@typescript-eslint/parser': [ '.ts', '.tsx', '.js' ] },
+		react: { version: 'detect' }
+	}
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 itcode.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+<h1>@mint-ui/map</h1>
+
+**@mint-ui**
+React map library
+
+## Installation
+
+``` bash
+yarn add @mint-ui/map
+
+npm install @mint-ui/map
+```
+
+### Document / Reference Site
+- To be continue...

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

@@ -0,0 +1,81 @@
+/// <reference types="navermaps" />
+/// <reference types="google.maps" />
+import { PropsWithChildren } from "react";
+import MintMapController from "./core/MintMapController";
+export declare type MapType = 'naver' | 'google';
+export declare type MapVendorType = naver.maps.Map | google.maps.Map;
+export interface MintMapProps extends MintMapEvents {
+    mapType: MapType | null;
+    mapKey: string;
+    mapId?: string;
+    base?: BaseProps;
+    visible?: boolean;
+}
+export interface MintMapEvents {
+    onBoundsChanged?: (bounds: Bounds) => void;
+    onZoomChanged?: (level: number) => void;
+    onLoad?: (map: MapVendorType, controller: MintMapController) => void;
+    onClick?: (positon: Position) => void;
+}
+export declare class Position {
+    lat: number;
+    lng: number;
+    offset?: Offset;
+    constructor(lat: number, lng: number);
+}
+export declare class Bounds {
+    nw: Position;
+    se: Position;
+    constructor(nw: Position, se: Position);
+    getCenter(): Position;
+    includes(positions: Position[]): boolean;
+    includesOnlyOnePoint(positions: Position[]): boolean;
+    intersects(positions: Position[]): boolean;
+}
+export declare class Offset {
+    x: number;
+    y: number;
+    constructor(x: number, y: number);
+}
+export interface BaseProps {
+    center?: Position;
+    zoomLevel?: number;
+}
+export interface DrawableOptions {
+    position: Position | Position[] | [number, number][];
+    visible?: boolean;
+    event?: Map<keyof DocumentEventMap, (e: Event) => boolean | void>;
+}
+export declare abstract class Drawable {
+    native?: any;
+    abstract options: DrawableOptions;
+}
+export interface MarkerOptions extends DrawableOptions {
+    anchor?: Offset;
+}
+export declare class Marker extends Drawable {
+    options: MarkerOptions;
+    element?: string | HTMLElement;
+    constructor(options: MarkerOptions);
+}
+export interface PolylineOptions extends DrawableOptions {
+    lineColor?: string;
+    lineSize?: number;
+    lineOpacity?: number;
+    editable?: boolean;
+}
+export declare class Polyline extends Drawable {
+    options: PolylineOptions;
+    constructor(options: PolylineOptions);
+}
+export interface PolygonOptions extends PolylineOptions {
+    innerPositions?: Position[][];
+    fillColor?: string;
+    fillOpacity?: number;
+}
+export declare class Polygon extends Drawable {
+    options: PolygonOptions;
+    constructor(options: PolygonOptions);
+    getCenter(): Position;
+}
+export default function MintMap({ mapType, children, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/MintMap.js

@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var MintMap_module = require('./MintMap.module.scss.js');
+var MintMapCore = require('./core/MintMapCore.js');
+var MintMapProvider = require('./core/provider/MintMapProvider.js');
+var calculate = require('./core/util/calculate.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var Position = function () {
+  function Position(lat, lng) {
+    this.lat = 0;
+    this.lng = 0;
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return Position;
+}();
+
+var Drawable = function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var Marker = function (_super) {
+  tslib.__extends(Marker, _super);
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var Polyline = function (_super) {
+  tslib.__extends(Polyline, _super);
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var Polygon = function (_super) {
+  tslib.__extends(Polygon, _super);
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+      });
+      return calculate.PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
+var cn = classNames__default["default"].bind(MintMap_module);
+function MintMap(_a) {
+  var _this = this;
+
+  var mapType = _a.mapType,
+      children = _a.children,
+      props = tslib.__rest(_a, ["mapType", "children"]);
+
+  var _b = React.useState(),
+      controller = _b[0],
+      setController = _b[1];
+
+  React.useEffect(function () {
+    if (mapType && mapType.length > 0) {
+      setController(undefined);
+
+      (function () {
+        return tslib.__awaiter(_this, void 0, void 0, function () {
+          var moduleName, controllerModule, newController;
+          return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                moduleName = getMapModulePrefix(mapType);
+                return [4, (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })("./".concat(mapType, "/").concat(moduleName, "MintMapController"))];
+
+              case 1:
+                controllerModule = _a.sent();
+                newController = new controllerModule.default(tslib.__assign({
+                  mapType: mapType
+                }, props));
+                newController.loadMapApi().then(function () {
+                  setController(newController);
+                });
+                return [2];
+            }
+          });
+        });
+      })();
+    } else {
+      setController(undefined);
+    }
+  }, [mapType]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, controller ? React__default["default"].createElement(MintMapProvider["default"], {
+    controller: controller
+  }, React__default["default"].createElement(MintMapCore, tslib.__assign({
+    mapType: mapType
+  }, props), children)) : React__default["default"].createElement(PointLoading, {
+    text: "Loading"
+  }));
+}
+
+function PointLoading(_a) {
+  var text = _a.text,
+      _b = _a.pointCount,
+      pointCount = _b === void 0 ? 4 : _b,
+      _c = _a.speedMs,
+      speedMs = _c === void 0 ? 200 : _c;
+  var pointStringPool = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+    return Array.from(Array(idx + 1)).map(function () {
+      return '.';
+    }).join('');
+  }))[0];
+
+  var _d = React.useState(''),
+      pointString = _d[0],
+      setPointString = _d[1];
+
+  React.useEffect(function () {
+    var pointStringIndex = 0;
+    var interval = setInterval(function () {
+      pointStringIndex += 1;
+
+      if (pointStringIndex >= pointCount) {
+        pointStringIndex = 0;
+      }
+
+      setPointString(pointStringPool[pointStringIndex]);
+    }, speedMs);
+    return function () {
+      interval && clearInterval(interval);
+    };
+  }, []);
+  return React__default["default"].createElement("div", {
+    className: cn('loading-point-container')
+  }, React__default["default"].createElement("div", {
+    style: {
+      width: '300px',
+      fontSize: '16px',
+      fontWeight: 600,
+      color: 'gray',
+      transform: 'translateX(130px)'
+    }
+  }, "".concat(text, " ").concat(pointString)));
+}
+
+var getMapModulePrefix = function (mapType) {
+  return mapType.substring(0, 1).toUpperCase() + mapType.substring(1).toLowerCase();
+};
+
+exports.Drawable = Drawable;
+exports.Marker = Marker;
+exports.Polygon = Polygon;
+exports.Polyline = Polyline;
+exports.Position = Position;
+exports["default"] = MintMap;

package/dist/components/mint-map/MintMap.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 = ".MintMap-module_loading-point-container__znk6l {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.MintMap-module_ani-blink__K89JK {\n  animation: MintMap-module_blink__mqfeV infinite 0.6s;\n}\n\n@keyframes MintMap-module_blink__mqfeV {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-in__lpHuy {\n  animation: MintMap-module_fade-in__jHpv1 1s;\n}\n\n@keyframes MintMap-module_fade-in__jHpv1 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-out__5-esw {\n  animation: MintMap-module_fade-out__CIjGe 1s;\n}\n\n@keyframes MintMap-module_fade-out__CIjGe {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.MintMap-module_ani-expansion__S2vOZ {\n  animation: MintMap-module_expansion__WMo5- ease 0.6s;\n}\n\n@keyframes MintMap-module_expansion__WMo5- {\n  0% {\n    width: 0%;\n  }\n  100% {\n    width: 100%;\n  }\n}";
+var styles = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
+styleInject__default["default"](css_248z);
+
+module.exports = styles;

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -0,0 +1,32 @@
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+export default abstract class MintMapController {
+    abstract type: MapType;
+    abstract map: MapVendorType | null;
+    abstract scriptUrl: string;
+    abstract initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    abstract destroyMap(): void;
+    abstract loadMapApi(): Promise<boolean>;
+    abstract getCurrBounds(): Bounds;
+    abstract panningTo(targetCenter: Position): void;
+    abstract getZoomLevel(): number;
+    abstract createMarker(marker: Marker): void;
+    abstract updateMarker(marker: Marker, options: MarkerOptions): void;
+    abstract clearDrawable(drawable: Drawable): boolean;
+    abstract markerToTheTop(marker: Marker): void;
+    abstract isMapDragged(): boolean;
+    abstract setMapDragged(value: boolean): void;
+    abstract createPolyline(polyline: Polyline): void;
+    abstract updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    abstract createPolygon(polygon: Polygon): void;
+    abstract updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    mapProps: MintMapProps;
+    mapApiLoaded: boolean;
+    mapInitialized: boolean;
+    constructor(props: MintMapProps);
+    getMap(): MapVendorType | null;
+    getMapType(): MapType;
+    loadScript(url: string, id?: string): Promise<void>;
+    buildUrl(baseUrl: string, param: {
+        [key: string]: string | string[];
+    }): string;
+}

package/dist/components/mint-map/core/MintMapController.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var tslib = require('tslib');
+
+var MintMapController = function () {
+  function MintMapController(props) {
+    this.mapApiLoaded = false;
+    this.mapInitialized = false;
+    this.mapProps = props;
+  }
+
+  MintMapController.prototype.getMap = function () {
+    return this.map;
+  };
+
+  MintMapController.prototype.getMapType = function () {
+    return this.type;
+  };
+
+  MintMapController.prototype.loadScript = function (url, id) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      return tslib.__generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          if (id && document.getElementById(id)) {
+            console.log("already loaded script => ".concat(id));
+            resolve();
+            return;
+          }
+
+          var script = document.createElement('script');
+          script.src = url;
+          script.async = true;
+          script.defer = true;
+          script.addEventListener('load', function () {
+            resolve();
+          });
+          document.body.appendChild(script);
+        })];
+      });
+    });
+  };
+
+  MintMapController.prototype.buildUrl = function (baseUrl, param) {
+    var params = Object.entries(param).map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      return "".concat(key, "=").concat(temp);
+    }).join('&');
+    return "".concat(baseUrl, "?").concat(params);
+  };
+
+  return MintMapController;
+}();
+
+module.exports = MintMapController;

package/dist/components/mint-map/core/MintMapCore.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { MintMapProps } from "../MintMap";
+export default function MintMapCore({ onLoad, visible, children }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/core/MintMapCore.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var tslib = require('tslib');
+var classNames = require('classnames/bind');
+var React = require('react');
+var MintMapProvider = require('./provider/MintMapProvider.js');
+var MintMapCore_module = require('./MintMapCore.module.scss.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var cn = classNames__default["default"].bind(MintMapCore_module);
+function MintMapCore(_a) {
+  var _this = this;
+
+  var onLoad = _a.onLoad,
+      _b = _a.visible,
+      visible = _b === void 0 ? true : _b,
+      children = _a.children;
+  var controller = MintMapProvider.useMintMapController();
+  var elementRef = React.useRef(null);
+
+  var _c = React.useState(false),
+      mapInitialized = _c[0],
+      setMapInitialized = _c[1];
+
+  React.useEffect(function () {
+    (function () {
+      return tslib.__awaiter(_this, void 0, void 0, function () {
+        var map_1;
+        return tslib.__generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(elementRef && elementRef.current)) return [3, 2];
+              return [4, controller.initializingMap(elementRef.current)];
+
+            case 1:
+              map_1 = _a.sent();
+              setTimeout(function () {
+                setMapInitialized(true);
+                onLoad && onLoad(map_1, controller);
+              }, 100);
+              _a.label = 2;
+
+            case 2:
+              return [2];
+          }
+        });
+      });
+    })();
+
+    return function () {
+      controller && controller.destroyMap();
+    };
+  }, [controller, elementRef]);
+  return React__default["default"].createElement("div", {
+    className: cn('mint-map-root'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    }
+  }, mapInitialized && children, React__default["default"].createElement("div", {
+    className: cn('mint-map-container'),
+    ref: elementRef
+  }));
+}
+
+module.exports = MintMapCore;

package/dist/components/mint-map/core/MintMapCore.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 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n}\n\n.MintMapCore-module_mint-map-container__8MIIr {\n  height: 100%;\n}";
+var styles = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
+styleInject__default["default"](css_248z);
+
+module.exports = styles;

package/dist/components/mint-map/core/advanced/MapBuildingProjection.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Position } from "../../MintMap";
+interface MapBuildingProjectionProps {
+    basePolygonPath: Position[];
+    numberOfFloor: number;
+    heightOfFloor?: number;
+    lineColor?: string;
+    lineOpacity?: number;
+    fillColor?: string;
+    fillOpacity?: number;
+    title?: string;
+    titleElement?: JSX.Element;
+}
+export declare function MapBuildingProjection(props: MapBuildingProjectionProps): JSX.Element;
+export {};