@mint-ui/map 0.4.5-beta → 0.5.0-beta

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

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../provider/MintMapProvider.js');
 var MintMapCanvasRenderer = require('../MintMapCanvasRenderer.js');
-var MintMap = require('../../MintMap.js');
+var MapTypes = require('../../types/MapTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,10 +16,19 @@ var console = {
   log: function () {
   }
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapCanvasWrapper(_a) {
   var children = _a.children;
       tslib.__rest(_a, ["children"]);
-  var controller = MintMapProvider.useMintMapController();
+
+  var controller = MintMapProvider.useMintMapController(); //render switch
 
   var _b = React.useState(false),
       renderFlag = _b[0],
@@ -27,18 +36,28 @@ function MapCanvasWrapper(_a) {
 
   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();
+  }, []); //canvas renderer
+
+  var renderer = React.useRef(); //canvas container ref
+
+  var containerRef = React.useRef(null); //canvas ref
+
+  var canvasRef = React.useRef(null); //canvas context
+
+  var contextRef = React.useRef(); //clear rect
+
   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;
-  }, []);
+  }, []); //offset values
+  // const offsetProvider = useRef(new Offset(0, 0))
+  // const prevX = useRef(0)
+  // const prevY = useRef(0)
+  //scaling
+
   var scaleCanvas = React.useCallback(function (containerRef, canvasElement, canvasContext) {
     var devicePixelRatio = window.devicePixelRatio;
     var width = containerRef.offsetWidth;
@@ -48,7 +67,16 @@ function MapCanvasWrapper(_a) {
     canvasElement.style.width = "".concat(width, "px");
     canvasElement.style.height = "".concat(height, "px");
     canvasContext.scale(devicePixelRatio, devicePixelRatio);
-  }, []);
+  }, []); //init transform
+  // const initTransform = useCallback(()=>{
+  //   offsetProvider.current.x = 0
+  //   offsetProvider.current.y = 0
+  //   containerRef.current && (containerRef.current.style.transform = `translate(0px, 0px)`)
+  //   console.log('initTransform');
+  //   return true
+  // }, [])
+  //parse click param
+
   var parseClickParamToPosition = React.useCallback(function (mapType, e) {
     var latlng = e.latlng || e.latLng;
 
@@ -56,7 +84,7 @@ function MapCanvasWrapper(_a) {
       throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
     }
 
-    var clickPosition = new MintMap.Position(0, 0);
+    var clickPosition = new MapTypes.Position(0, 0);
 
     if (mapType === 'naver') {
       clickPosition.lat = latlng._lat;
@@ -72,15 +100,17 @@ function MapCanvasWrapper(_a) {
     }
 
     return clickPosition;
-  }, []);
+  }, []); //box includes
 
   var includes = function (point, targetPoint, width, height) {
+    // console.log('includes', 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;
-  };
+  }; //process mouse event
+
 
   var processMouseEvent = React.useCallback(function (clickedOffset, eventName) {
     var items = renderItemsOnView.current;
@@ -94,9 +124,10 @@ function MapCanvasWrapper(_a) {
 
         if (!event_1) {
           continue;
-        }
+        } //includes check
 
-        var pos = item.position;
+
+        var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
 
         if (pos && !pos.offset) {
           pos.offset = controller.positionToOffset(pos);
@@ -104,61 +135,92 @@ function MapCanvasWrapper(_a) {
 
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
           continue;
-        }
+        } // const propagation = 
+
 
         event_1(clickedOffset);
-        hitSet.add(item);
-        break;
+        hitSet.add(item); // if(eventName === 'onMouseOver' || propagation === false){
+
+        break; // }
       }
     }
 
     return hitSet;
-  }, []);
+  }, []); //initialize
+
   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);
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current); // initTransform()
+
         renderMain();
       });
       resizeObserver.observe(containerRef.current);
       var map = controller.getMap();
 
       if (map) {
+        // const center = controller.getCenter()
+        // center.offset = controller.positionToOffset(center)
+        // if(center.offset){
+        //   prevX.current = center.offset.x
+        //   prevY.current = center.offset.y
+        // }
+        //naver 전용 이벤트 'zooming' 일때 캔버스 클리어처리
+        //@ts-ignore
         map.addListener('zooming', function () {
           clearRect();
-        });
+        }); //kakao 전용 이벤트 'zoom_start' 일때 캔버스 클리어처리
+        //@ts-ignore
+
         map.addListener('zoom_start', function () {
           clearRect();
-        });
+        }); //@ts-ignore
+
         map.addListener('center_changed', function () {
 
           if (containerRef.current) {
+            // const pos = controller.getCenter()
+            // pos.offset = controller.positionToOffset(pos)
+            // const deltaX = prevX.current - pos.offset.x
+            // const deltaY = prevY.current - pos.offset.y
+            // offsetProvider.current.x += deltaX
+            // offsetProvider.current.y += deltaY
+            // prevX.current = pos.offset.x
+            // prevY.current = pos.offset.y
+            // containerRef.current.style.transform = `translate(${offsetProvider.current.x}px, ${offsetProvider.current.y}px)`
             containerRef.current.style.visibility = 'hidden';
           }
-        });
+        }); //@ts-ignore
+
         map.addListener('idle', function () {
 
           if (containerRef.current) {
             containerRef.current.style.visibility = '';
           }
 
-          clearRect();
+          clearRect(); // contextRef.current?.translate(offsetProvider.current.x, offsetProvider.current.y)
+          // initTransform()
+
           invokeRender();
-        });
+        }); //@ts-ignore
+
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition);
-          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
+
           renderItemsMouseOverStatus.current.forEach(function (item) {
             if (!hitSet.has(item)) {
               item.onMouseOut && item.onMouseOut(clickedOffset);
             }
           });
           renderItemsMouseOverStatus.current = hitSet;
-        });
+        }); //@ts-ignore
+
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
           var clickedOffset = controller.positionToOffset(clickPosition);
@@ -177,14 +239,18 @@ function MapCanvasWrapper(_a) {
     return function () {
       resizeObserver && resizeObserver.disconnect();
     };
-  }, []);
+  }, []); //items setting
+
   var renderItems = React.useRef([]);
   var renderItemsOnView = React.useRef([]);
   var renderItemsMouseOverStatus = React.useRef(new Set());
   React.useEffect(function () {
     renderItems.current = (Array.isArray(children) ? children : children ? [children] : []).map(function (item) {
       return item.props;
-    });
+    }); //draw 를 위한 정렬 조건
+    //1. zIndex 가 있는 것들 끼리 정렬처리
+    //2. zIndex 가 없는 것들은 원래 배열 순서대로
+
     var zIndexList = [];
     var undefinedList = [];
 
@@ -204,16 +270,19 @@ function MapCanvasWrapper(_a) {
     }).forEach(function (item) {
       renderItems.current.push(item);
     });
-  }, [children]);
+  }, [children]); //rendering main
+
   var renderMain = React.useCallback(function () {
     var ctx = contextRef.current;
     var container = containerRef.current;
 
     if (!ctx || !container || !renderer.current) {
       return;
-    }
+    } //all clear
+
+
+    clearRect(); //draw
 
-    clearRect();
     var t = new Date().getTime();
     var items = renderItems.current;
     renderItemsOnView.current.length = 0;
@@ -223,7 +292,8 @@ function MapCanvasWrapper(_a) {
       var item = items_1[_i];
 
       if (item.visible === undefined || item.visible) {
-        var pos = item.position;
+        var pos = item.position; //위치 변환
+
         pos.offset = controller.positionToOffset(pos);
 
         if (item.anchor) {
@@ -235,7 +305,8 @@ function MapCanvasWrapper(_a) {
 
         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);
@@ -249,7 +320,8 @@ function MapCanvasWrapper(_a) {
       }
     });
     console.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
-  }, []);
+  }, []); //render!!!
+
   renderMain();
   return React__default["default"].createElement("div", {
     ref: containerRef,

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

@@ -1,11 +1,18 @@
-import { PropsWithChildren } from "react";
-declare type AlignHorizontal = 'left' | 'right' | 'center';
-declare type AlignVertical = 'top' | 'bottom' | 'center';
-export interface MapControlWrapperProps {
-    width?: number | string;
-    height?: number | string;
-    positionHorizontal?: AlignHorizontal;
-    positionVertical?: AlignVertical;
-}
-export declare function MapControlWrapper({ width, height, positionHorizontal, positionVertical, children }: PropsWithChildren<MapControlWrapperProps>): JSX.Element;
-export {};
+import { PropsWithChildren } from "react";
+declare type AlignHorizontal = 'left' | 'right' | 'center';
+declare type AlignVertical = 'top' | 'bottom' | 'center';
+export interface MapControlWrapperProps {
+    width?: number | string;
+    height?: number | string;
+    positionHorizontal?: AlignHorizontal;
+    positionVertical?: AlignVertical;
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapControlWrapper({ width, height, positionHorizontal, positionVertical, children }: PropsWithChildren<MapControlWrapperProps>): JSX.Element;
+export {};

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

@@ -54,6 +54,14 @@ var getAlignPosition = function (value, align) {
 
   throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 
 function MapControlWrapper(_a) {
   var _b = _a.width,

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

@@ -1,23 +1,32 @@
-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 declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
+import { PropsWithChildren } from "react";
+import { MarkerOptions } from "../../types/MapDrawables";
+import { Position } from "../../types/MapTypes";
+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;
+    disablePointerEvent?: boolean;
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;

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

@@ -6,16 +6,25 @@ 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 MapDrawables = require('../../types/MapDrawables.js');
 
 var offsetCalibration = function (mapType, divElement, options) {
+  //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
   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)");
   } else if (mapType === 'kakao') {
     divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   }
 };
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 
 function MapMarkerWrapper(_a) {
   var startAnimationClassName = _a.startAnimationClassName,
@@ -25,20 +34,27 @@ function MapMarkerWrapper(_a) {
       _c = _a.topOnHover,
       topOnHover = _c === void 0 ? false : _c,
       movingAnimation = _a.movingAnimation,
+      _d = _a.disablePointerEvent,
+      disablePointerEvent = _d === void 0 ? false : _d,
       children = _a.children,
-      options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
+      options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
+
+
+  var controller = MintMapProvider.useMintMapController(); //element
 
-  var controller = MintMapProvider.useMintMapController();
   var divRef = React.useRef(document.createElement('div'));
-  var divElement = divRef.current;
-  var divCloneRef = React.useRef();
-  var markerRef = React.useRef();
+  var divElement = divRef.current; //element clone for animation
+
+  var divCloneRef = React.useRef(); //marker
+
+  var markerRef = React.useRef(); //moving animation
 
-  var _d = React.useState({}),
-      movingState = _d[0],
-      setMovingState = _d[1];
+  var _e = React.useState({}),
+      movingState = _e[0],
+      setMovingState = _e[1];
 
   React.useEffect(function () {
+    // console.log('movingState', movingState);
     if (movingState.autoStart) {
       setTimeout(function () {
         start();
@@ -46,18 +62,20 @@ function MapMarkerWrapper(_a) {
     }
   }, [movingState]);
   React.useEffect(function () {
+    // console.log('movingAnimation changed', movingAnimation);
     if (movingAnimation) {
       setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
         marker: markerRef.current
       }));
     }
-  }, [movingAnimation]);
-  var start = MarkerMovingHook.useMarkerMoving(movingState)[0];
+  }, [movingAnimation]); //marker moving hook
+
+  var start = MarkerMovingHook.useMarkerMoving(movingState)[0]; //event handlers
 
   var onClickHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current;
+    var marker = markerRef.current; //console.log('onClickHandler', marker);
 
     if (marker) {
       controller.setMapDragged(false);
@@ -76,7 +94,7 @@ function MapMarkerWrapper(_a) {
   var onMouseOverHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current;
+    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
 
     if (marker) {
       var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -89,20 +107,31 @@ function MapMarkerWrapper(_a) {
 
       next && topOnHover && controller.markerToTheTop(marker);
     }
-  };
+  }; //create object
+
 
   React.useEffect(function () {
+    // console.log('drawable created')
+    divElement.style.display = 'flex';
+    divElement.style.justifyContent = 'flex-start';
+    divElement.style.alignItems = 'flex-start';
+    divElement.style.flexDirection = 'column';
+    divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
+      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
+      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
+      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
       if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
         divCloneRef.current.classList.add(endAnimationClassName);
 
         var aniListener_1 = function () {
+          //console.log('animationend!!!', divCloneRef.current);
           divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
 
           if (markerRef.current) {
-            controller.clearDrawable(markerRef.current);
+            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
           }
 
           divCloneRef.current = undefined;
@@ -115,35 +144,54 @@ function MapMarkerWrapper(_a) {
         divElement.removeEventListener('mouseover', onMouseOverHandler);
 
         if (markerRef.current) {
-          controller.clearDrawable(markerRef.current);
+          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
         }
       }
     };
-  }, []);
+  }, []); //create / update object
+
   React.useEffect(function () {
     if (options) {
       if (markerRef.current) {
-        controller.updateMarker(markerRef.current, options);
-        offsetCalibration(controller.getMapType(), divElement, options);
+        //console.log('update Marker')
+        controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+        } //marker offset 보정
 
-        if (markerRef.current.options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
         }
       } else {
-        markerRef.current = new MintMap.Marker(options);
+        //console.log('create Marker')
+        markerRef.current = new MapDrawables.Marker(options);
         markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current);
-        offsetCalibration(controller.getMapType(), divElement, options);
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+        } //marker offset 보정
+
+
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        } //moving 애니메이션 시작
 
-        if (markerRef.current.options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
-        }
 
         if (movingAnimation) {
           setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
             marker: markerRef.current
           }));
-        }
+        } //start animation
+
 
         if (startAnimationClassName) {
           divElement.style.visibility = 'hidden';

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

@@ -1,5 +1,12 @@
-import { PropsWithChildren } from "react";
-import { PolygonOptions } from "../../MintMap";
-export interface MapPolygonWrapperProps extends PolygonOptions {
-}
-export declare function MapPolygonWrapper({ children, ...options }: PropsWithChildren<MapPolygonWrapperProps>): JSX.Element;
+import { PropsWithChildren } from "react";
+import { PolygonOptions } from "../../types/MapDrawables";
+export interface MapPolygonWrapperProps extends PolygonOptions {
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapPolygonWrapper({ children, ...options }: PropsWithChildren<MapPolygonWrapperProps>): JSX.Element;

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

@@ -5,32 +5,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../provider/MintMapProvider.js');
-var MintMap = require('../../MintMap.js');
+var MapDrawables = require('../../types/MapDrawables.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapPolygonWrapper(_a) {
   var children = _a.children,
-      options = tslib.__rest(_a, ["children"]);
+      options = tslib.__rest(_a, ["children"]); //controller
+
+
+  var controller = MintMapProvider.useMintMapController(); //lifecycle
 
-  var controller = MintMapProvider.useMintMapController();
   React.useEffect(function () {
     return function () {
       if (polygonRef.current) {
+        // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
       }
     };
-  }, []);
+  }, []); //create/update object
+
   var polygonRef = React.useRef();
   React.useEffect(function () {
+    //console.log('Polygon useEffect')
     if (options) {
       if (polygonRef.current) {
+        //console.log('update Polygon', options)
         controller.updatePolygon(polygonRef.current, options);
       } else {
-        var polygon = new MintMap.Polygon(options);
-        polygonRef.current = polygon;
+        var polygon = new MapDrawables.Polygon(options);
+        polygonRef.current = polygon; //console.log('create Polygon', options)
+
         controller.createPolygon(polygon);
       }
     }