@mint-ui/map 0.4.0-beta → 0.4.2-beta

package/README.md

@@ -2,8 +2,9 @@
 
 - React map library 
 - Control various map with one interface
-- Google, Naver map supported now
+- Google, Naver, Kakao map supported now
 - Typescript supported
+- Canvas marker supported (experimental)
 
 ## Installation
 
@@ -40,6 +41,25 @@ function MyMapComponent(){
       <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>
 

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

@@ -11,6 +11,7 @@ export interface MintMapProps extends MintMapEvents {
     base?: BaseProps;
     visible?: boolean;
     center?: Position;
+    centerMoveWithPanning?: boolean;
     zoomLevel?: number;
     draggable?: boolean;
     keyboardShortcuts?: boolean;

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

@@ -0,0 +1,4 @@
+export declare class MintMapCanvasRenderer {
+    context: CanvasRenderingContext2D;
+    constructor(context: CanvasRenderingContext2D);
+}

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MintMapCanvasRenderer = function () {
+  function MintMapCanvasRenderer(context) {
+    this.context = context;
+  }
+
+  return MintMapCanvasRenderer;
+}();
+
+exports.MintMapCanvasRenderer = MintMapCanvasRenderer;

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

@@ -1,4 +1,4 @@
-import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Offset, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
 export declare abstract class MintMapController {
     abstract type: MapType;
     abstract map: MapVendorType | null;
@@ -26,9 +26,12 @@ export declare abstract class MintMapController {
     mapProps: MintMapProps;
     mapApiLoaded: boolean;
     mapInitialized: boolean;
+    mapDivElement: HTMLDivElement;
     constructor(props: MintMapProps);
     getMap(): MapVendorType | null;
     getMapType(): MapType;
+    positionToOffset(position: Position): Offset;
+    offsetToPosition(offset: Offset): Position;
     loadScript(url: string, id?: string): Promise<void>;
     buildUrl(baseUrl: string, param: {
         [key: string]: string | string[];

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var MintMap = require('../MintMap.js');
 
 var MintMapController = function () {
   function MintMapController(props) {
@@ -20,12 +21,43 @@ var MintMapController = function () {
     return this.type;
   };
 
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new MintMap.Offset(x, y);
+  };
+
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new MintMap.Position(latVal, lngVal);
+  };
+
   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;
           }

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

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

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

@@ -23,13 +23,15 @@ function MintMapCore(_a) {
       visible = _b === void 0 ? true : _b,
       zoomLevel = _a.zoomLevel,
       center = _a.center,
+      _c = _a.centerMoveWithPanning,
+      centerMoveWithPanning = _c === void 0 ? false : _c,
       children = _a.children;
   var controller = MintMapProvider.useMintMapController();
   var elementRef = React.useRef(null);
 
-  var _c = React.useState(false),
-      mapInitialized = _c[0],
-      setMapInitialized = _c[1];
+  var _d = React.useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
 
   React.useEffect(function () {
     (function () {
@@ -74,7 +76,7 @@ function MintMapCore(_a) {
       var prevCenter = controller.getCenter();
 
       if (!MintMap.Position.equals(prevCenter, center)) {
-        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
       }
     }
   }, [center]);

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

@@ -1,5 +1,6 @@
 export * from "./MintMapCore";
 export * from "./MintMapController";
+export * from './MintMapCanvasRenderer';
 export * from "./advanced";
 export * from "./hooks";
 export * from "./provider";

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MarkerOptions, Offset } from "../../MintMap";
+import { MintMapCanvasRenderer } from "../MintMapCanvasRenderer";
+export declare type CanvasMarkerRenderer<T> = (ctx: MintMapCanvasRenderer, offset: Offset, payload?: T) => void;
+export interface CanvasMarkerMouseEvent {
+    x: number;
+    y: number;
+}
+export declare type CanvasMarkerMouseEventCallback = (e: CanvasMarkerMouseEvent) => boolean | undefined | void;
+export interface MapCanvasMarkerWrapperProps<T> extends MarkerOptions {
+    renderer: CanvasMarkerRenderer<T>;
+    payload?: T;
+    boxWidth: number;
+    boxHeight: number;
+    onClick?: CanvasMarkerMouseEventCallback;
+    onMouseOver?: CanvasMarkerMouseEventCallback;
+    onMouseOut?: CanvasMarkerMouseEventCallback;
+}
+export declare function MapCanvasMarkerWrapper<T>(_props: MapCanvasMarkerWrapperProps<T>): JSX.Element;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MapCanvasMarkerWrapper(_props) {
+  return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
+exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;

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

@@ -0,0 +1,4 @@
+import React from "react";
+export interface MapCanvasWrapperProps {
+}
+export declare function MapCanvasWrapper<T>({ children, ...props }: React.PropsWithChildren<MapCanvasWrapperProps>): JSX.Element;

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

@@ -0,0 +1,271 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../provider/MintMapProvider.js');
+var MintMapCanvasRenderer = require('../MintMapCanvasRenderer.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);
+
+var console = {
+  log: function () {
+  }
+};
+function MapCanvasWrapper(_a) {
+  var children = _a.children;
+      tslib.__rest(_a, ["children"]);
+  var controller = MintMapProvider.useMintMapController();
+
+  var _b = React.useState(false),
+      renderFlag = _b[0],
+      setRenderFlag = _b[1];
+
+  var invokeRender = React.useCallback(function () {
+    setRenderFlag(!renderFlag);
+  }, []);
+  var renderer = React.useRef();
+  var containerRef = React.useRef(null);
+  var canvasRef = React.useRef(null);
+  var contextRef = React.useRef();
+  var clearRect = React.useCallback(function () {
+    if (contextRef.current && canvasRef.current) {
+      contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
+    }
+
+    return true;
+  }, []);
+  var scaleCanvas = React.useCallback(function (containerRef, canvasElement, canvasContext) {
+    var devicePixelRatio = window.devicePixelRatio;
+    var width = containerRef.offsetWidth;
+    var height = containerRef.offsetHeight;
+    canvasElement.width = width * devicePixelRatio;
+    canvasElement.height = height * devicePixelRatio;
+    canvasElement.style.width = "".concat(width, "px");
+    canvasElement.style.height = "".concat(height, "px");
+    canvasContext.scale(devicePixelRatio, devicePixelRatio);
+  }, []);
+  var parseClickParamToPosition = React.useCallback(function (mapType, e) {
+    var latlng = e.latlng || e.latLng;
+
+    if (!latlng) {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
+    }
+
+    var clickPosition = new MintMap.Position(0, 0);
+
+    if (mapType === 'naver') {
+      clickPosition.lat = latlng._lat;
+      clickPosition.lng = latlng._lng;
+    } else if (mapType === 'google') {
+      clickPosition.lat = latlng.lat();
+      clickPosition.lng = latlng.lng();
+    } else if (mapType === 'kakao') {
+      clickPosition.lat = latlng.Ma;
+      clickPosition.lng = latlng.La;
+    } else {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported"));
+    }
+
+    return clickPosition;
+  }, []);
+
+  var includes = function (point, targetPoint, width, height) {
+    if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var processMouseEvent = React.useCallback(function (clickedOffset, eventName) {
+    var items = renderItemsOnView.current;
+    var hitSet = new Set();
+
+    for (var i = items.length - 1; i >= 0; i--) {
+      var item = items[i];
+
+      if (item.visible === undefined || item.visible) {
+        var event_1 = item[eventName];
+
+        if (!event_1) {
+          continue;
+        }
+
+        var pos = item.position;
+
+        if (pos && !pos.offset) {
+          pos.offset = controller.positionToOffset(pos);
+        }
+
+        if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
+          continue;
+        }
+
+        event_1(clickedOffset);
+        hitSet.add(item);
+        break;
+      }
+    }
+
+    return hitSet;
+  }, []);
+  React.useEffect(function () {
+    var resizeObserver;
+
+    if (canvasRef.current && containerRef.current) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var elem = entries[0];
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        renderMain();
+      });
+      resizeObserver.observe(containerRef.current);
+      var map = controller.getMap();
+
+      if (map) {
+        map.addListener('zooming', function () {
+          clearRect();
+        });
+        map.addListener('zoom_start', function () {
+          clearRect();
+        });
+        map.addListener('center_changed', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = 'hidden';
+          }
+        });
+        map.addListener('idle', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = '';
+          }
+
+          clearRect();
+          invokeRender();
+        });
+        map.addListener('mousemove', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          renderItemsMouseOverStatus.current.forEach(function (item) {
+            if (!hitSet.has(item)) {
+              item.onMouseOut && item.onMouseOut(clickedOffset);
+            }
+          });
+          renderItemsMouseOverStatus.current = hitSet;
+        });
+        map.addListener('click', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          processMouseEvent(clickedOffset, 'onClick');
+        });
+      }
+
+      contextRef.current = canvasRef.current.getContext('2d');
+
+      if (contextRef.current) {
+        scaleCanvas(containerRef.current, canvasRef.current, contextRef.current);
+        renderer.current = new MintMapCanvasRenderer.MintMapCanvasRenderer(contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  var renderItems = React.useRef([]);
+  var renderItemsOnView = React.useRef([]);
+  var renderItemsMouseOverStatus = React.useRef(new Set());
+  React.useEffect(function () {
+    renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+      return item.props;
+    });
+    var zIndexList = [];
+    var undefinedList = [];
+
+    for (var _i = 0, _a = renderItems.current; _i < _a.length; _i++) {
+      var item = _a[_i];
+
+      if (item.zIndex !== undefined) {
+        zIndexList.push(item);
+      } else {
+        undefinedList.push(item);
+      }
+    }
+
+    renderItems.current = undefinedList;
+    zIndexList.sort(function (a, b) {
+      return a > b ? 1 : -1;
+    }).forEach(function (item) {
+      renderItems.current.push(item);
+    });
+  }, [children]);
+  var renderMain = React.useCallback(function () {
+    var ctx = contextRef.current;
+    var container = containerRef.current;
+
+    if (!ctx || !container || !renderer.current) {
+      return;
+    }
+
+    clearRect();
+    var t = new Date().getTime();
+    var items = renderItems.current;
+    renderItemsOnView.current.length = 0;
+    var newSet = new Set();
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i];
+
+      if (item.visible === undefined || item.visible) {
+        var pos = item.position;
+        pos.offset = controller.positionToOffset(pos);
+
+        if (item.anchor) {
+          pos.offset.x += item.anchor.x;
+          pos.offset.y += item.anchor.y;
+        }
+
+        console.log('canvas marker', pos.offset);
+
+        if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
+          continue;
+        }
+
+        item.renderer(renderer.current, pos.offset, item.payload);
+        renderItemsOnView.current.push(item);
+        newSet.add(item);
+      }
+    }
+
+    renderItemsMouseOverStatus.current.forEach(function (item) {
+      if (!newSet.has(item)) {
+        renderItemsMouseOverStatus.current.delete(item);
+      }
+    });
+    console.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
+  }, []);
+  renderMain();
+  return React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      pointerEvents: 'none'
+    }
+  }, React__default["default"].createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
+}
+
+exports.MapCanvasWrapper = MapCanvasWrapper;

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

@@ -2,3 +2,5 @@ export * from './MapControlWrapper';
 export * from './MapMarkerWrapper';
 export * from './MapPolygonWrapper';
 export * from './MapPolylineWrapper';
+export * from './MapCanvasWrapper';
+export * from './MapCanvasMarkerWrapper';

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -28,11 +28,8 @@ var GoogleMintMapController = function (_super) {
       } catch (e) {
         console.log('google map destroy error', e);
       }
-
-      console.log("".concat(_this.type, " map destroyed"));
     };
 
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -328,7 +325,6 @@ var GoogleMintMapController = function (_super) {
                   loaded = false;
 
                   window[callbackName] = function () {
-                    console.log('google api loaded');
                     loaded = true;
                     delete window[callbackName];
                   };
@@ -357,7 +353,6 @@ var GoogleMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script api loaded"));
                   return [2];
               }
             });
@@ -372,6 +367,7 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var map;
@@ -432,7 +428,6 @@ var GoogleMintMapController = function (_super) {
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
               }

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -23,7 +23,6 @@ var KakaoMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -341,7 +340,6 @@ var KakaoMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script loaded"));
                   return [2];
               }
             });
@@ -356,6 +354,7 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -433,7 +432,6 @@ var KakaoMintMapController = function (_super) {
                   });
                   this.mapInitialized = true;
                   this.initMarkerPool();
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
               }
@@ -464,8 +462,6 @@ var KakaoMintMapController = function (_super) {
     } catch (e) {
       console.log('kakao map destroy error', e);
     }
-
-    console.log("".concat(this.type, " map destroyed"));
   };
 
   KakaoMintMapController.prototype.getCurrBounds = function () {

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -23,7 +23,6 @@ var NaverMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -309,7 +308,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2, new Promise(function (resolve, error) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, ok;
             return tslib.__generator(this, function (_a) {
@@ -319,7 +318,6 @@ var NaverMintMapController = function (_super) {
                   loaded = false;
 
                   window[callbackName] = function () {
-                    console.log('naver api loaded');
                     loaded = true;
                     delete window[callbackName];
                   };
@@ -342,12 +340,11 @@ var NaverMintMapController = function (_super) {
                   ok = _a.sent();
 
                   if (!ok) {
-                    throw new Error('naver script api load failed!!');
+                    error('naver script api load failed!!');
                   }
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script loaded"));
                   return [2];
               }
             });
@@ -362,6 +359,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -454,7 +452,6 @@ var NaverMintMapController = function (_super) {
                   });
                   this.mapInitialized = true;
                   this.initMarkerPool();
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   map.trigger('idle');
                   return [2];
@@ -485,8 +482,6 @@ var NaverMintMapController = function (_super) {
     } catch (e) {
       console.log('naver map destroy error', e);
     }
-
-    console.log("".concat(this.type, " map destroyed"));
   };
 
   NaverMintMapController.prototype.getCurrBounds = function () {