@mint-ui/map 0.4.5-beta → 0.5.0-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,73 +1,73 @@
-# @mint-ui/map
-
-- React map library 
-- Control various map with one interface
-- Google, Naver, Kakao map supported now
-- Typescript supported
-- Canvas marker supported (experimental)
-
-## 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>
-
-    {/* Overlay canvas */}
-    <MapCanvasWrapper>
-      
-      {/* Canvas marker */}
-      <MapCanvasMarkerWrapper position={new Position(-25.344, 131.031)} 
-      renderer={(renderer:MintMapCanvasRenderer, offset:Offset, _payload?:TestPayload)=>{
-        const {context} = renderer
-        context.fillStyle = `hsl(${(Math.random() * 360).toFixed(0)} 100% 60%)`
-        context.fillRect(Math.floor(offset.x), Math.floor(offset.y), 8, 8)
-      }}
-      boxWidth={8} boxHeight={8}
-      payload={testItem}
-      onClick={(e)=>{
-        alert('marker 1 clicked!!!'+e.x+','+e.y)
-      }}
-      ></MapCanvasMarkerWrapper>
-      
-    </MapCanvasWrapper>
-    
-  </MintMap>
-
-}
-
-root.render((<MyMapComponent/>))
-
-```
-
-## Document / Reference Site
-- To be continue...
+# @mint-ui/map
+
+- React map library 
+- Control various map with one interface
+- Google, Naver, Kakao map supported now
+- Typescript supported
+- Canvas marker supported (experimental)
+
+## 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>
+
+    {/* Overlay canvas */}
+    <MapCanvasWrapper>
+      
+      {/* Canvas marker */}
+      <MapCanvasMarkerWrapper position={new Position(-25.344, 131.031)} 
+      renderer={(renderer:MintMapCanvasRenderer, offset:Offset, _payload?:TestPayload)=>{
+        const {context} = renderer
+        context.fillStyle = `hsl(${(Math.random() * 360).toFixed(0)} 100% 60%)`
+        context.fillRect(Math.floor(offset.x), Math.floor(offset.y), 8, 8)
+      }}
+      boxWidth={8} boxHeight={8}
+      payload={testItem}
+      onClick={(e)=>{
+        alert('marker 1 clicked!!!'+e.x+','+e.y)
+      }}
+      ></MapCanvasMarkerWrapper>
+      
+    </MapCanvasWrapper>
+    
+  </MintMap>
+
+}
+
+root.render((<MyMapComponent/>))
+
+```
+
+## Document / Reference Site
+- To be continue...

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

@@ -1,117 +1,10 @@
-/// <reference types="navermaps" />
-/// <reference types="google.maps" />
-import { PropsWithChildren } from "react";
-import { MintMapController } from "./core/MintMapController";
-export declare type MapType = 'naver' | 'google' | 'kakao';
-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;
-    center?: Position;
-    centerMoveWithPanning?: boolean;
-    zoomLevel?: number;
-    draggable?: boolean;
-    keyboardShortcuts?: boolean;
-    markerCache?: boolean;
-    markerCachePoolSize?: number;
-    boundsChangeThrottlingTime?: number;
-    dissolveEffectWhenLoaded?: boolean;
-    mapLoadingComponent?: () => JSX.Element;
-}
-export interface MintMapEvents {
-    onBoundsChanged?: (bounds: Bounds) => void;
-    onZoomChanged?: (level: number) => void;
-    onLoad?: (map: MapVendorType, controller: MintMapController) => void;
-    onClick?: (positon: Position) => void;
-    onMouseMove?: (positon: Position) => void;
-}
-export declare class Position {
-    lat: number;
-    lng: number;
-    offset?: Offset;
-    constructor(lat: number, lng: number);
-    static equals(pos1: Position, pos2: Position): boolean;
-}
-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;
-    includesPosition(pos: Position): boolean;
-    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;
-    zIndex?: number;
-}
-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({ mapLoadingComponent, dissolveEffectWhenLoaded, mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
-export interface PointLoadingProps {
-    text?: string;
-    pointCount?: number;
-    speedMs?: number;
-}
-export declare function PointLoading({ text, pointCount, speedMs }: PointLoadingProps): JSX.Element;
-export declare function MapLoadingWithImage({ size }: MapImageLoadingProps): JSX.Element;
-interface MapImageLoadingProps {
-    size?: number;
-    duration?: number;
-    delay?: number;
-}
-export {};
+import { PropsWithChildren } from "react";
+import { MintMapProps } from "./types/MintMapProps";
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MintMapProps} MintMapProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MintMap({ mapLoadingComponent, dissolveEffectWhenLoaded, mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;