@mint-ui/map 0.1.7-beta → 0.1.9-beta

package/.eslintrc.js

@@ -1,110 +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' }
-	}
+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

@@ -1,21 +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.
+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

@@ -1,53 +1,53 @@
-# @mint-ui/map
-
-- React map library 
-- Control various map with one interface
-- Google, Naver map supported now
-- Typescript supported
-
-## Installation
-
-``` bash
-yarn add @mint-ui/map
-
-npm install @mint-ui/map
-```
-
-## Examples
-
-``` javascript
-...
-...
-
-import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root')
-)
-
-function MyMapComponent(){
-
-  return <MintMap 
-    mapType={'google'} 
-    mapKey={'YOUR_GOOGLE_MAP_KEY'}
-    mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
-    base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
-  >
-    {/* Your marker */}
-    <MapMarkerWrapper position={new Position(-25.344, 131.031)}>
-    
-      {/* Your marker elements */}
-      <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
-      
-    </MapMarkerWrapper>
-    
-  </MintMap>
-
-}
-
-root.render((<MyMapComponent/>))
-
-```
-
-## Document / Reference Site
-- To be continue...
+# @mint-ui/map
+
+- React map library 
+- Control various map with one interface
+- Google, Naver map supported now
+- Typescript supported
+
+## Installation
+
+``` bash
+yarn add @mint-ui/map
+
+npm install @mint-ui/map
+```
+
+## Examples
+
+``` javascript
+...
+...
+
+import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+)
+
+function MyMapComponent(){
+
+  return <MintMap 
+    mapType={'google'} 
+    mapKey={'YOUR_GOOGLE_MAP_KEY'}
+    mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
+    base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
+  >
+    {/* Your marker */}
+    <MapMarkerWrapper position={new Position(-25.344, 131.031)}>
+    
+      {/* Your marker elements */}
+      <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
+      
+    </MapMarkerWrapper>
+    
+  </MintMap>
+
+}
+
+root.render((<MyMapComponent/>))
+
+```
+
+## Document / Reference Site
+- To be continue...

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

@@ -1,88 +1,92 @@
-/// <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;
-    markerCache?: 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;
-    ne: Position;
-    sw: Position;
-    constructor(nw?: Position, se?: Position, ne?: Position, sw?: Position);
-    static fromNWSE(nw: Position, se: Position): Bounds;
-    static fromNESW(ne: Position, sw: Position): Bounds;
-    private covertNWSEtoNESW;
-    private covertNESWtoNWSE;
-    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 declare function MintMap({ mapType, children, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
+/// <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;
+    markerCache?: boolean;
+    markerCachePoolSize?: number;
+}
+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;
+    ne: Position;
+    sw: Position;
+    constructor(nw?: Position, se?: Position, ne?: Position, sw?: Position);
+    static fromNWSE(nw: Position, se: Position): Bounds;
+    static fromNESW(ne: Position, sw: Position): Bounds;
+    private covertNWSEtoNESW;
+    private covertNESWtoNWSE;
+    getCenter(): Position;
+    getIncludedPositions(positions: Position[]): Position[];
+    includes(positions: Position | 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;
+    maxZoomLevel?: number;
+    minZoomLevel?: 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 declare function MintMap({ mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;

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

@@ -68,10 +68,26 @@ var Bounds = function () {
     return new Position(this.nw.lat + (this.se.lat - this.nw.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
   };
 
-  Bounds.prototype.includes = function (positions) {
+  Bounds.prototype.getIncludedPositions = function (positions) {
+    var result = [];
+
     for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
       var pos = positions_1[_i];
 
+      if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
+        result.push(pos);
+      }
+    }
+
+    return result;
+  };
+
+  Bounds.prototype.includes = function (positions) {
+    positions = Array.isArray(positions) ? positions : [positions];
+
+    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+      var pos = positions_2[_i];
+
       if (this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng) {
         return false;
       }
@@ -81,8 +97,8 @@ var Bounds = function () {
   };
 
   Bounds.prototype.includesOnlyOnePoint = function (positions) {
-    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
-      var pos = positions_2[_i];
+    for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
+      var pos = positions_3[_i];
 
       if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
         return true;
@@ -164,23 +180,36 @@ var Polygon = function (_super) {
   return Polygon;
 }(Drawable);
 var cn = classNames__default["default"].bind(MintMap_module);
+var DEFAULT_CENTER = {
+  lat: 37.5036845,
+  lng: 127.0448698
+};
 function MintMap(_a) {
   var mapType = _a.mapType,
       children = _a.children,
-      props = tslib.__rest(_a, ["mapType", "children"]);
+      _b = _a.base,
+      base = _b === void 0 ? {
+    center: DEFAULT_CENTER,
+    zoomLevel: 12
+  } : _b,
+      props = tslib.__rest(_a, ["mapType", "children", "base"]);
 
-  var _b = React.useState(),
-      controller = _b[0],
-      setController = _b[1];
+  var _c = React.useState(),
+      controller = _c[0],
+      setController = _c[1];
 
   React.useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
-      var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign({
+      var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign(tslib.__assign({
         mapType: mapType
-      }, props)) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign({
+      }, props), {
+        base: base
+      })) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign(tslib.__assign({
         mapType: mapType
-      }, props)) : null;
+      }, props), {
+        base: base
+      })) : null;
 
       if (newController_1) {
         newController_1.loadMapApi().then(function () {
@@ -197,7 +226,9 @@ function MintMap(_a) {
     controller: controller
   }, React__default["default"].createElement(MintMapCore.MintMapCore, tslib.__assign({
     mapType: mapType
-  }, props), children)) : React__default["default"].createElement(PointLoading, {
+  }, props, {
+    base: base
+  }), children)) : React__default["default"].createElement(PointLoading, {
     text: "Loading"
   }));
 }