@mint-ui/map 1.2.0-test.49 → 1.2.0-test.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.49",
+  "version": "1.2.0-test.50",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { MarkerOptions, Offset, Position } from "../../../types";
-export interface CanvasMarkerRendererParamsHanquf<T> {
-    context: CanvasRenderingContext2D;
-    offset: Offset[];
-    payload?: CanvasMarkerDataHanquf<T>;
-}
-export interface CanvasMarkerOptionHanquf {
-    position?: Position[];
-    visible?: boolean;
-    hitRadius?: number;
-}
-export declare type CanvasMarkerDataHanquf<T> = T & CanvasMarkerOptionHanquf;
-export declare type CanvasMarkerRenderFunctionHanquf<T> = (params: CanvasMarkerRendererParamsHanquf<T>) => void;
-export interface CanvasMarkerPropsHanquf<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
-    renderer: CanvasMarkerRenderFunctionHanquf<T>;
-    data: CanvasMarkerDataHanquf<T>[];
-    onMouseOver?: (item: CanvasMarkerDataHanquf<T>) => void;
-    onMouseOut?: (item: CanvasMarkerDataHanquf<T>) => void;
-    onClick?: (item: CanvasMarkerDataHanquf<T>) => void;
-}
-export declare function CanvasMarkerHanquf<T>({ renderer, data, onMouseOver, onMouseOut, onClick, ...options }: CanvasMarkerPropsHanquf<T>): React.ReactPortal;

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

@@ -1,413 +0,0 @@
-'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');
-var geohash = require('../../util/geohash.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function CanvasMarkerHanquf(_a) {
-  var renderer = _a.renderer,
-      data = _a.data,
-      onMouseOver = _a.onMouseOver,
-      onMouseOut = _a.onMouseOut,
-      onClick = _a.onClick,
-      options = tslib.__rest(_a, ["renderer", "data", "onMouseOver", "onMouseOut", "onClick"]); //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(); // interaction states
-
-  var hoveredRef = React.useRef(null);
-  var clickedRef = React.useRef(null); // geohash index: hash -> items
-
-  var geoIndexRef = React.useRef(new Map());
-  var geoPrecisionRef = React.useRef(6); // drag translate state
-
-  var prevCenterOffsetRef = React.useRef(null);
-  var accumTranslateRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  var draggingRef = React.useRef(false); //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); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
-
-    containerRef.current && (containerRef.current.style.visibility = ''); // 드래그 종료 처리: 변환 초기화 및 기준 위치 갱신
-
-    draggingRef.current = false;
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-    } // 마커 이동
-
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = tslib.__assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링 (hover/click item last)
-
-    canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-  };
-
-  var handleZoomStart = function () {
-    containerRef.current && (containerRef.current.style.visibility = 'hidden');
-  };
-
-  var handleZoomEnd = function () {
-    containerRef.current && (containerRef.current.style.visibility = '');
-  }; //initialize
-
-
-  React.useEffect(function () {
-    var resizeObserver; // hover/out 공통 처리기 (mouse 좌표 기반)
-
-    var updateHoverByMouseXY = function (mouseX, mouseY) {
-      var hit = hitTest(mouseX, mouseY);
-
-      if ((hit === null || hit === void 0 ? void 0 : hit.item) !== hoveredRef.current) {
-        if (hoveredRef.current && onMouseOut) {
-          onMouseOut(hoveredRef.current);
-        }
-
-        hoveredRef.current = (hit === null || hit === void 0 ? void 0 : hit.item) || null;
-
-        if ((hit === null || hit === void 0 ? void 0 : hit.item) && onMouseOver) {
-          onMouseOver(hit.item);
-        }
-
-        canvasUtil.clearRect(canvasRef.current, contextRef.current);
-        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-      }
-    };
-
-    var handleMouseLeave = function () {
-      console.log('handleMouseLeave');
-
-      if (hoveredRef.current && onMouseOut) {
-        onMouseOut(hoveredRef.current);
-      }
-
-      hoveredRef.current = null;
-      canvasUtil.clearRect(canvasRef.current, contextRef.current);
-      canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-    }; // 지도 이벤트 → 화면 좌표 변환
-
-
-    var parseEventToOffset = function (e) {
-      var mapType = controller.getMapType();
-      var latlng = (e === null || e === void 0 ? void 0 : e.latlng) || (e === null || e === void 0 ? void 0 : e.latLng);
-
-      if (!latlng) {
-        return null;
-      }
-
-      var pos = {
-        lat: 0,
-        lng: 0
-      }; //@ts-ignore
-
-      if (mapType === 'naver') {
-        pos.lat = latlng._lat;
-        pos.lng = latlng._lng; //@ts-ignore
-      } else if (mapType === 'google') {
-        pos.lat = latlng.lat();
-        pos.lng = latlng.lng(); //@ts-ignore
-      } else if (mapType === 'kakao') {
-        pos.lat = latlng.Ma;
-        pos.lng = latlng.La;
-      } else {
-        return null;
-      }
-
-      var offset = controller.positionToOffset(pos);
-      return offset;
-    };
-
-    var handleMapMouseMove = function (e) {
-      if (draggingRef.current) {
-        return;
-      }
-
-      var offset = parseEventToOffset(e);
-      if (!offset) return;
-      updateHoverByMouseXY(offset.x, offset.y);
-    };
-
-    var handleMapClick = function (e) {
-      console.log('handleClick');
-      var offset = parseEventToOffset(e);
-      if (!offset) return;
-      var hit = hitTest(offset.x, offset.y);
-
-      if (hit === null || hit === void 0 ? void 0 : hit.item) {
-        clickedRef.current = hit.item;
-        onClick && onClick(hit.item);
-        canvasUtil.clearRect(canvasRef.current, contextRef.current);
-        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-      }
-    };
-
-    if (canvasRef.current && containerRef.current) {
-      // 리사이즈 처리
-      resizeObserver = new ResizeObserver(function () {
-        // 클리어
-        canvasUtil.clearRect(canvasRef.current, contextRef.current); // 스케일링
-
-        canvasRef.current && contextRef.current && canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링 (respect hover/click ordering)
-
-        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-      });
-      resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
-
-      controller.addEventListener('IDLE', handleIdle); // 줌 처리
-
-      controller.addEventListener('ZOOMSTART', handleZoomStart);
-      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
-
-      contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
-
-      if (contextRef.current) {
-        canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current);
-      } // 지도 이벤트 구독 (부모 pointer-events:none 이어도 동작)
-
-
-      var map = controller.getMap();
-
-      if (map) {
-        //@ts-ignore
-        map.addListener('mousemove', handleMapMouseMove); //@ts-ignore
-
-        map.addListener('click', handleMapClick); //@ts-ignore
-
-        map.addListener('center_changed', function () {
-          // 드래그 중에는 리렌더 대신 transform 으로만 추종
-          var center = controller.getCurrBounds().getCenter();
-          var curr = controller.positionToOffset(center);
-          var prev = prevCenterOffsetRef.current;
-
-          if (!prev) {
-            prevCenterOffsetRef.current = {
-              x: curr.x,
-              y: curr.y
-            };
-            draggingRef.current = true;
-            return;
-          }
-
-          var dx = prev.x - curr.x;
-          var dy = prev.y - curr.y;
-          accumTranslateRef.current = {
-            x: accumTranslateRef.current.x + dx,
-            y: accumTranslateRef.current.y + dy
-          };
-          prevCenterOffsetRef.current = {
-            x: curr.x,
-            y: curr.y
-          };
-          draggingRef.current = true;
-
-          if (containerRef.current) {
-            containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-          }
-        }); //@ts-ignore
-
-        map.addListener('idle', handleIdle);
-      } // 마우스가 지도 영역을 벗어나는 경우 처리
-
-
-      controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
-    }
-
-    return function () {
-      resizeObserver && resizeObserver.disconnect();
-      controller.mapDivElement && controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
-      controller.removeEventListener('IDLE', handleIdle);
-      controller.removeEventListener('ZOOMSTART', handleZoomStart);
-      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
-    };
-  }, []); // data ref
-
-  var dataRef = React.useRef(data);
-  React.useEffect(function () {
-    dataRef.current = data; // rebuild geohash index
-
-    var map = new Map();
-    var precision = geoPrecisionRef.current;
-
-    for (var _i = 0, _a = data || []; _i < _a.length; _i++) {
-      var item = _a[_i];
-      var pos = item.position && item.position[0];
-      if (!pos) continue;
-      var hash = geohash.geohashEncode(pos.lat, pos.lng, precision);
-      var list = map.get(hash) || [];
-      list.push(item);
-      map.set(hash, list);
-    }
-
-    geoIndexRef.current = map;
-  }, [data]); // renderer ref
-
-  var rendererRef = React.useRef(renderer);
-  React.useEffect(function () {
-    rendererRef.current = renderer;
-  }, [renderer]); // Build ordered list so hovered/clicked items render last (on top) within this canvas layer
-
-  var buildOrderedData = function () {
-    var base = dataRef.current || [];
-    var result = [];
-    var hoverItem;
-    var clickItem;
-
-    for (var _i = 0, base_1 = base; _i < base_1.length; _i++) {
-      var item = base_1[_i];
-
-      if (clickedRef.current && item === clickedRef.current) {
-        clickItem = item;
-      } else if (hoveredRef.current && item === hoveredRef.current) {
-        hoverItem = item;
-      } else {
-        result.push(item);
-      }
-    }
-
-    if (hoverItem) result.push(hoverItem);
-    if (clickItem) result.push(clickItem);
-    return result;
-  }; // Geohash-accelerated hit-test
-
-
-  var hitTest = function (mouseX, mouseY) {
-    // convert mouse offset -> lat/lng then geohash it
-    var pos = controller.offsetToPosition({
-      x: mouseX,
-      y: mouseY
-    });
-    var precision = geoPrecisionRef.current;
-    var baseHash = geohash.geohashEncode(pos.lat, pos.lng, precision);
-    var buckets = geohash.geohashNeighbors(baseHash); // collect candidates from buckets (preserve ordering for top-most first)
-
-    var set = new Set();
-    var ordered = buildOrderedData();
-
-    for (var _i = 0, buckets_1 = buckets; _i < buckets_1.length; _i++) {
-      var b = buckets_1[_i];
-      var list = geoIndexRef.current.get(b);
-      if (!list) continue;
-
-      for (var _a = 0, list_1 = list; _a < list_1.length; _a++) {
-        var it = list_1[_a];
-        set.add(it);
-      }
-    } // iterate from top-most
-
-
-    for (var i = ordered.length - 1; i >= 0; i--) {
-      var item = ordered[i];
-      if (!set.has(item)) continue;
-      if (item.visible === false) continue;
-      var p = item.position && item.position[0];
-      if (!p) continue;
-      var off = controller.positionToOffset(p);
-      var r = Math.max(2, item.hitRadius || 20);
-      var dx = mouseX - off.x;
-      var dy = mouseY - off.y;
-
-      if (dx * dx + dy * dy <= r * r) {
-        return {
-          item: item
-        };
-      }
-    }
-
-    return null;
-  }; // Initial render
-
-
-  canvasUtil.renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
-  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.CanvasMarkerHanquf = CanvasMarkerHanquf;

package/dist/components/mint-map/core/util/geohash.js

@@ -1,125 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-// Lightweight Geohash encoder and neighbor utilities
-var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
-var NEIGHBORS = {
-  n: {
-    even: {
-      border: 'prxz',
-      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
-    },
-    odd: {
-      border: 'bcfguvyz',
-      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
-    }
-  },
-  s: {
-    even: {
-      border: '028b',
-      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
-    },
-    odd: {
-      border: '0145hjnp',
-      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
-    }
-  },
-  e: {
-    even: {
-      border: 'bcfguvyz',
-      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
-    },
-    odd: {
-      border: 'prxz',
-      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
-    }
-  },
-  w: {
-    even: {
-      border: '0145hjnp',
-      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
-    },
-    odd: {
-      border: '028b',
-      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
-    }
-  }
-};
-function geohashEncode(lat, lon, precision) {
-  if (precision === void 0) {
-    precision = 6;
-  }
-
-  var idx = 0;
-  var bit = 0;
-  var evenBit = true;
-  var geohash = '';
-  var latMin = -90,
-      latMax = 90;
-  var lonMin = -180,
-      lonMax = 180;
-
-  while (geohash.length < precision) {
-    if (evenBit) {
-      var lonMid = (lonMin + lonMax) / 2;
-
-      if (lon >= lonMid) {
-        idx = idx * 2 + 1;
-        lonMin = lonMid;
-      } else {
-        idx = idx * 2;
-        lonMax = lonMid;
-      }
-    } else {
-      var latMid = (latMin + latMax) / 2;
-
-      if (lat >= latMid) {
-        idx = idx * 2 + 1;
-        latMin = latMid;
-      } else {
-        idx = idx * 2;
-        latMax = latMid;
-      }
-    }
-
-    evenBit = !evenBit;
-
-    if (++bit == 5) {
-      geohash += BASE32.charAt(idx);
-      bit = 0;
-      idx = 0;
-    }
-  }
-
-  return geohash;
-}
-
-function adjacent(hash, dir) {
-  var lastChr = hash[hash.length - 1];
-  var type = hash.length % 2 ? 'odd' : 'even'; // @ts-ignore
-
-  var border = NEIGHBORS[dir][type].border; // @ts-ignore
-
-  var neighbor = NEIGHBORS[dir][type].neighbor;
-  var base = hash.substring(0, hash.length - 1);
-
-  if (border.indexOf(lastChr) !== -1) {
-    base = adjacent(base, dir);
-  }
-
-  var pos = neighbor.indexOf(lastChr);
-  var nextChr = BASE32.charAt(pos);
-  return base + nextChr;
-}
-
-function geohashNeighbors(hash) {
-  var n = adjacent(hash, 'n');
-  var s = adjacent(hash, 's');
-  var e = adjacent(hash, 'e');
-  var w = adjacent(hash, 'w');
-  return [hash, n, s, e, w, adjacent(n, 'e'), adjacent(n, 'w'), adjacent(s, 'e'), adjacent(s, 'w')];
-}
-
-exports.geohashEncode = geohashEncode;
-exports.geohashNeighbors = geohashNeighbors;