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

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { MarkerOptions, Offset, Position } from "../../../types";
+export interface CanvasMarkerRendererParams<T> {
+    context: CanvasRenderingContext2D;
+    offset: Offset;
+    payload?: T;
+}
+export interface CanvasMarkerOption<T> {
+    position: Position;
+    anchor?: Offset;
+    visible?: boolean;
+    payload?: T;
+}
+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>[];
+}
+export declare function CanvasMarker<T>({ renderer, data, ...options }: CanvasMarkerProps<T>): React.ReactPortal;

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

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapDrawables = require('../../../types/MapDrawables.js');
+require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var reactDom = require('react-dom');
+var canvasUtil = require('./draw/canvas-util.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function CanvasMarker(_a) {
+  var renderer = _a.renderer,
+      data = _a.data,
+      options = tslib.__rest(_a, ["renderer", "data"]); //controller
+
+
+  var controller = MintMapProvider.useMintMapController(); //element
+
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current; //canvas container ref
+
+  var containerRef = React.useRef(null); //canvas ref
+
+  var canvasRef = React.useRef(null); //canvas context
+
+  var contextRef = React.useRef(); //marker
+
+  var markerRef = React.useRef(); //create object
+
+  React.useEffect(function () {
+    divElement.style.width = 'fit-content';
+    divElement.style.pointerEvents = 'none';
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); //create / update object
+
+  React.useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new MapDrawables.Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = 'none';
+          divElement.parentElement.style.pointerEvents = 'none';
+        } //z-index 처리
+
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      }
+    }
+  }, [options]);
+
+  var handleIdle = function () {
+    // 클리어
+    canvasUtil.clearRect(canvasRef.current, contextRef.current); // 마커 이동
+
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = tslib.__assign({
+      position: bounds.nw
+    }, options);
+
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
+
+    canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+  }; //initialize
+
+
+  React.useEffect(function () {
+    var resizeObserver;
+
+    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 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+
+      contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+      if (contextRef.current) {
+        canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+    };
+  }, []); // data ref
+
+  var dataRef = React.useRef(data);
+  React.useEffect(function () {
+    dataRef.current = data;
+  }, [data]); // renderer ref
+
+  var rendererRef = React.useRef(renderer);
+  React.useEffect(function () {
+    rendererRef.current = renderer;
+  }, [renderer]);
+  canvasUtil.renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, data);
+  return reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }, React__default["default"].createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  })), divElement);
+}
+
+exports.CanvasMarker = CanvasMarker;

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

@@ -0,0 +1,5 @@
+import { MintMapController } from "../../../MintMapController";
+import { CanvasMarkerOption, 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;

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+//scaling
+var scaleCanvas = function (controller, canvasElement, canvasContext) {
+  var devicePixelRatio = window.devicePixelRatio;
+  var container = controller.mapDivElement;
+  var width = container.offsetWidth;
+  var height = container.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);
+}; //clear rect
+
+var clearRect = function (canvas, context) {
+  if (canvas && context) {
+    context.clearRect(canvas.width * -1, canvas.height * -1, canvas.width * 3, canvas.height * 3);
+  }
+
+  return true;
+};
+function renderMain(controller, renderer, container, canvas, context, data) {
+  if (!container || !canvas || !context || !data) {
+    return;
+  } //all clear
+
+
+  clearRect(canvas, context); //draw
+
+  data.forEach(function (item) {
+    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;
+      } //그리기
+
+
+      renderer({
+        context: context,
+        offset: pos.offset,
+        payload: item.payload
+      });
+    }
+  });
+}
+
+exports.clearRect = clearRect;
+exports.renderMain = renderMain;
+exports.scaleCanvas = scaleCanvas;

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

@@ -0,0 +1 @@
+export * from './CanvasMarker';

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

@@ -1,3 +1,4 @@
 export * from './shapes';
+export * from './canvas';
 export * from './MapBuildingProjection';
 export * from './MapLoadingComponents';

package/dist/index.es.js

@@ -4830,6 +4830,186 @@ function PolygonMarker(_a) {
   }, children)));
 }
 
+//scaling
+var scaleCanvas = function (controller, canvasElement, canvasContext) {
+  var devicePixelRatio = window.devicePixelRatio;
+  var container = controller.mapDivElement;
+  var width = container.offsetWidth;
+  var height = container.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);
+}; //clear rect
+
+var clearRect = function (canvas, context) {
+  if (canvas && context) {
+    context.clearRect(canvas.width * -1, canvas.height * -1, canvas.width * 3, canvas.height * 3);
+  }
+
+  return true;
+};
+function renderMain(controller, renderer, container, canvas, context, data) {
+  if (!container || !canvas || !context || !data) {
+    return;
+  } //all clear
+
+
+  clearRect(canvas, context); //draw
+
+  data.forEach(function (item) {
+    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;
+      } //그리기
+
+
+      renderer({
+        context: context,
+        offset: pos.offset,
+        payload: item.payload
+      });
+    }
+  });
+}
+
+function CanvasMarker(_a) {
+  var renderer = _a.renderer,
+      data = _a.data,
+      options = __rest(_a, ["renderer", "data"]); //controller
+
+
+  var controller = useMintMapController(); //element
+
+  var divRef = useRef(document.createElement('div'));
+  var divElement = divRef.current; //canvas container ref
+
+  var containerRef = useRef(null); //canvas ref
+
+  var canvasRef = useRef(null); //canvas context
+
+  var contextRef = useRef(); //marker
+
+  var markerRef = useRef(); //create object
+
+  useEffect(function () {
+    divElement.style.width = 'fit-content';
+    divElement.style.pointerEvents = 'none';
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); //create / update object
+
+  useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = __assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = 'none';
+          divElement.parentElement.style.pointerEvents = 'none';
+        } //z-index 처리
+
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      }
+    }
+  }, [options]);
+
+  var handleIdle = function () {
+    // 클리어
+    clearRect(canvasRef.current, contextRef.current); // 마커 이동
+
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
+
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
+
+    renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+  }; //initialize
+
+
+  useEffect(function () {
+    var resizeObserver;
+
+    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 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+
+      contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+      if (contextRef.current) {
+        scaleCanvas(controller, canvasRef.current, contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+    };
+  }, []); // data ref
+
+  var dataRef = useRef(data);
+  useEffect(function () {
+    dataRef.current = data;
+  }, [data]); // renderer ref
+
+  var rendererRef = useRef(renderer);
+  useEffect(function () {
+    rendererRef.current = renderer;
+  }, [renderer]);
+  renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, data);
+  return createPortal(React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }, React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  })), divElement);
+}
+
 /**
  * Mint Map 컴포넌트
  *
@@ -5702,4 +5882,4 @@ function MapCanvasMarkerWrapper(_props) {
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Status, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CanvasMarker, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Status, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -11,6 +11,7 @@ var SVGPolygon = require('./components/mint-map/core/advanced/shapes/base/SVGPol
 var SVGRect = require('./components/mint-map/core/advanced/shapes/base/SVGRect.js');
 var CircleMarker = require('./components/mint-map/core/advanced/shapes/CircleMarker.js');
 var PolygonMarker = require('./components/mint-map/core/advanced/shapes/PolygonMarker.js');
+var CanvasMarker = require('./components/mint-map/core/advanced/canvas/CanvasMarker.js');
 var MapBuildingProjection = require('./components/mint-map/core/advanced/MapBuildingProjection.js');
 var MapLoadingComponents = require('./components/mint-map/core/advanced/MapLoadingComponents.js');
 var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
@@ -46,6 +47,7 @@ exports.SVGPolygon = SVGPolygon.SVGPolygon;
 exports.SVGRect = SVGRect.SVGRect;
 exports.CircleMarker = CircleMarker.CircleMarker;
 exports.PolygonMarker = PolygonMarker.PolygonMarker;
+exports.CanvasMarker = CanvasMarker.CanvasMarker;
 exports.MapBuildingProjection = MapBuildingProjection.MapBuildingProjection;
 exports.MapLoadingWithImage = MapLoadingComponents.MapLoadingWithImage;
 exports.PointLoading = MapLoadingComponents.PointLoading;

package/dist/index.umd.js

@@ -4834,6 +4834,186 @@
     }, children)));
   }
 
+  //scaling
+  var scaleCanvas = function (controller, canvasElement, canvasContext) {
+    var devicePixelRatio = window.devicePixelRatio;
+    var container = controller.mapDivElement;
+    var width = container.offsetWidth;
+    var height = container.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);
+  }; //clear rect
+
+  var clearRect = function (canvas, context) {
+    if (canvas && context) {
+      context.clearRect(canvas.width * -1, canvas.height * -1, canvas.width * 3, canvas.height * 3);
+    }
+
+    return true;
+  };
+  function renderMain(controller, renderer, container, canvas, context, data) {
+    if (!container || !canvas || !context || !data) {
+      return;
+    } //all clear
+
+
+    clearRect(canvas, context); //draw
+
+    data.forEach(function (item) {
+      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;
+        } //그리기
+
+
+        renderer({
+          context: context,
+          offset: pos.offset,
+          payload: item.payload
+        });
+      }
+    });
+  }
+
+  function CanvasMarker(_a) {
+    var renderer = _a.renderer,
+        data = _a.data,
+        options = tslib.__rest(_a, ["renderer", "data"]); //controller
+
+
+    var controller = useMintMapController(); //element
+
+    var divRef = React.useRef(document.createElement('div'));
+    var divElement = divRef.current; //canvas container ref
+
+    var containerRef = React.useRef(null); //canvas ref
+
+    var canvasRef = React.useRef(null); //canvas context
+
+    var contextRef = React.useRef(); //marker
+
+    var markerRef = React.useRef(); //create object
+
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      divElement.style.pointerEvents = 'none';
+      return function () {
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined;
+        }
+      };
+    }, []); //create / update object
+
+    React.useEffect(function () {
+      if (options) {
+        var bounds = controller.getCurrBounds();
+
+        var markerOptions = tslib.__assign({
+          position: bounds.nw
+        }, options);
+
+        if (markerRef.current) {
+          controller.updateMarker(markerRef.current, markerOptions);
+        } else {
+          markerRef.current = new Marker(markerOptions);
+          markerRef.current.element = divElement;
+          controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+          if (divElement.parentElement) {
+            divElement.style.pointerEvents = 'none';
+            divElement.parentElement.style.pointerEvents = 'none';
+          } //z-index 처리
+
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          }
+        }
+      }
+    }, [options]);
+
+    var handleIdle = function () {
+      // 클리어
+      clearRect(canvasRef.current, contextRef.current); // 마커 이동
+
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링
+
+      renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, dataRef.current);
+    }; //initialize
+
+
+    React.useEffect(function () {
+      var resizeObserver;
+
+      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 이벤트 등록
+
+        controller.addEventListener('IDLE', handleIdle); // 2d 컨텍스트
+
+        contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+        if (contextRef.current) {
+          scaleCanvas(controller, canvasRef.current, contextRef.current);
+        }
+      }
+
+      return function () {
+        resizeObserver && resizeObserver.disconnect();
+        controller.removeEventListener('IDLE', handleIdle);
+      };
+    }, []); // data ref
+
+    var dataRef = React.useRef(data);
+    React.useEffect(function () {
+      dataRef.current = data;
+    }, [data]); // renderer ref
+
+    var rendererRef = React.useRef(renderer);
+    React.useEffect(function () {
+      rendererRef.current = renderer;
+    }, [renderer]);
+    renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, data);
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+      }
+    }, React__default["default"].createElement("canvas", {
+      ref: canvasRef,
+      style: {
+        pointerEvents: 'revert-layer'
+      }
+    })), divElement);
+  }
+
   /**
    * Mint Map 컴포넌트
    *
@@ -5708,6 +5888,7 @@
 
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
+  exports.CanvasMarker = CanvasMarker;
   exports.CircleMarker = CircleMarker;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;

package/package.json

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