@mint-ui/map 0.9.2-beta-test1 → 0.9.2-beta-test2

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

@@ -2,18 +2,17 @@ import React from "react";
 import { MarkerOptions, Offset, Position } from "../../../types";
 export interface CanvasMarkerRendererParams<T> {
     context: CanvasRenderingContext2D;
-    offset: Offset;
-    payload?: T;
+    offset: Offset[];
+    payload?: CanvasMarkerData<T>;
 }
-export interface CanvasMarkerOption<T> {
-    position: Position;
-    anchor?: Offset;
+export interface CanvasMarkerOption {
+    position?: Position[];
     visible?: boolean;
-    payload?: T;
 }
+export declare type CanvasMarkerData<T> = T & CanvasMarkerOption;
 export declare type CanvasMarkerRenderFunction<T> = (params: CanvasMarkerRendererParams<T>) => void;
 export interface CanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     renderer: CanvasMarkerRenderFunction<T>;
-    data: CanvasMarkerOption<T>[];
+    data: CanvasMarkerData<T>[];
 }
 export declare function CanvasMarker<T>({ renderer, data, ...options }: CanvasMarkerProps<T>): React.ReactPortal;

package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.js

@@ -86,6 +86,14 @@ function CanvasMarker(_a) {
     markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
 
     canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+  };
+
+  var handleZoomStart = function () {
+    containerRef.current && (containerRef.current.style.visibility = 'hidden');
+  };
+
+  var handleZoomEnd = function () {
+    containerRef.current && (containerRef.current.style.visibility = '');
   }; //initialize
 
 
@@ -95,17 +103,19 @@ function CanvasMarker(_a) {
     if (canvasRef.current && containerRef.current) {
       // 리사이즈 처리
       resizeObserver = new ResizeObserver(function () {
-        console.log('on resize'); // 클리어
-
+        // 클리어
         canvasUtil.clearRect(canvasRef.current, contextRef.current); // 스케일링
 
         canvasRef.current && contextRef.current && canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링
 
         canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
       });
-      resizeObserver.observe(containerRef.current); // IDLE 이벤트 등록
+      resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 줌 처리
 
-      controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
 
       contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
 
@@ -117,6 +127,8 @@ function CanvasMarker(_a) {
     return function () {
       resizeObserver && resizeObserver.disconnect();
       controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
     };
   }, []); // data ref
 

package/dist/components/mint-map/core/advanced/canvas/draw/canvas-util.d.ts

@@ -1,5 +1,5 @@
 import { MintMapController } from "../../../MintMapController";
-import { CanvasMarkerOption, CanvasMarkerRenderFunction } from "../CanvasMarker";
+import { CanvasMarkerData, CanvasMarkerRenderFunction } from "../CanvasMarker";
 export declare const scaleCanvas: (controller: MintMapController, canvasElement: HTMLCanvasElement, canvasContext: CanvasRenderingContext2D) => void;
 export declare const clearRect: (canvas: HTMLCanvasElement | null, context?: CanvasRenderingContext2D | null) => boolean;
-export declare function renderMain<T>(controller: MintMapController, renderer: CanvasMarkerRenderFunction<T>, container?: HTMLDivElement | null, canvas?: HTMLCanvasElement | null, context?: CanvasRenderingContext2D | null, data?: CanvasMarkerOption<T>[]): void;
+export declare function renderMain<T>(controller: MintMapController, renderer: CanvasMarkerRenderFunction<T>, container?: HTMLDivElement | null, canvas?: HTMLCanvasElement | null, context?: CanvasRenderingContext2D | null, data?: CanvasMarkerData<T>[]): void;

package/dist/components/mint-map/core/advanced/canvas/draw/canvas-util.js

@@ -31,21 +31,19 @@ function renderMain(controller, renderer, container, canvas, context, data) {
   clearRect(canvas, context); //draw
 
   data.forEach(function (item) {
-    if (item.visible === undefined || item.visible) {
-      var pos = item.position; //위치 변환
-
-      pos.offset = controller.positionToOffset(pos);
+    var _a; // 그리기 대상이면
 
-      if (item.anchor) {
-        pos.offset.x += item.anchor.x;
-        pos.offset.y += item.anchor.y;
-      } //그리기
 
+    if (item.visible === undefined || item.visible) {
+      //위치 변환
+      var offset = ((_a = item.position) === null || _a === void 0 ? void 0 : _a.map(function (pos) {
+        return controller.positionToOffset(pos);
+      })) || []; //그리기
 
       renderer({
         context: context,
-        offset: pos.offset,
-        payload: item.payload
+        offset: offset,
+        payload: item
       });
     }
   });

package/dist/index.es.js

@@ -4859,21 +4859,19 @@ function renderMain(controller, renderer, container, canvas, context, data) {
   clearRect(canvas, context); //draw
 
   data.forEach(function (item) {
-    if (item.visible === undefined || item.visible) {
-      var pos = item.position; //위치 변환
-
-      pos.offset = controller.positionToOffset(pos);
+    var _a; // 그리기 대상이면
 
-      if (item.anchor) {
-        pos.offset.x += item.anchor.x;
-        pos.offset.y += item.anchor.y;
-      } //그리기
 
+    if (item.visible === undefined || item.visible) {
+      //위치 변환
+      var offset = ((_a = item.position) === null || _a === void 0 ? void 0 : _a.map(function (pos) {
+        return controller.positionToOffset(pos);
+      })) || []; //그리기
 
       renderer({
         context: context,
-        offset: pos.offset,
-        payload: item.payload
+        offset: offset,
+        payload: item
       });
     }
   });
@@ -4950,6 +4948,14 @@ function CanvasMarker(_a) {
     markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
 
     renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+  };
+
+  var handleZoomStart = function () {
+    containerRef.current && (containerRef.current.style.visibility = 'hidden');
+  };
+
+  var handleZoomEnd = function () {
+    containerRef.current && (containerRef.current.style.visibility = '');
   }; //initialize
 
 
@@ -4959,17 +4965,19 @@ function CanvasMarker(_a) {
     if (canvasRef.current && containerRef.current) {
       // 리사이즈 처리
       resizeObserver = new ResizeObserver(function () {
-        console.log('on resize'); // 클리어
-
+        // 클리어
         clearRect(canvasRef.current, contextRef.current); // 스케일링
 
         canvasRef.current && contextRef.current && scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링
 
         renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
       });
-      resizeObserver.observe(containerRef.current); // IDLE 이벤트 등록
+      resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 줌 처리
 
-      controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
 
       contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
 
@@ -4981,6 +4989,8 @@ function CanvasMarker(_a) {
     return function () {
       resizeObserver && resizeObserver.disconnect();
       controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
     };
   }, []); // data ref
 

package/dist/index.umd.js

@@ -4863,21 +4863,19 @@
     clearRect(canvas, context); //draw
 
     data.forEach(function (item) {
-      if (item.visible === undefined || item.visible) {
-        var pos = item.position; //위치 변환
-
-        pos.offset = controller.positionToOffset(pos);
+      var _a; // 그리기 대상이면
 
-        if (item.anchor) {
-          pos.offset.x += item.anchor.x;
-          pos.offset.y += item.anchor.y;
-        } //그리기
 
+      if (item.visible === undefined || item.visible) {
+        //위치 변환
+        var offset = ((_a = item.position) === null || _a === void 0 ? void 0 : _a.map(function (pos) {
+          return controller.positionToOffset(pos);
+        })) || []; //그리기
 
         renderer({
           context: context,
-          offset: pos.offset,
-          payload: item.payload
+          offset: offset,
+          payload: item
         });
       }
     });
@@ -4954,6 +4952,14 @@
       markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
 
       renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+    };
+
+    var handleZoomStart = function () {
+      containerRef.current && (containerRef.current.style.visibility = 'hidden');
+    };
+
+    var handleZoomEnd = function () {
+      containerRef.current && (containerRef.current.style.visibility = '');
     }; //initialize
 
 
@@ -4963,17 +4969,19 @@
       if (canvasRef.current && containerRef.current) {
         // 리사이즈 처리
         resizeObserver = new ResizeObserver(function () {
-          console.log('on resize'); // 클리어
-
+          // 클리어
           clearRect(canvasRef.current, contextRef.current); // 스케일링
 
           canvasRef.current && contextRef.current && scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링
 
           renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
         });
-        resizeObserver.observe(containerRef.current); // IDLE 이벤트 등록
+        resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+        controller.addEventListener('IDLE', handleIdle); // 줌 처리
 
-        controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+        controller.addEventListener('ZOOMSTART', handleZoomStart);
+        controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
 
         contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
 
@@ -4985,6 +4993,8 @@
       return function () {
         resizeObserver && resizeObserver.disconnect();
         controller.removeEventListener('IDLE', handleIdle);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
       };
     }, []); // data ref
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.9.2-beta-test1",
+  "version": "0.9.2-beta-test2",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",