@mint-ui/map 1.2.0-test.8 → 1.2.0

package/package.json

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

package/CLAUDE.md

@@ -1,100 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-@mint-ui/map is a React-based map library that provides a unified interface for controlling multiple map providers (Google Maps, Naver Maps, and Kakao Maps) with TypeScript support and advanced Canvas marker capabilities.
-
-## Development Commands
-
-```bash
-# Development
-npm run storybook        # Start Storybook dev server on port 3000
-
-# Building
-npm run build           # Build library for distribution (cleans dist/, runs rollup)
-
-# NPM Publishing
-npm run build           # Always build before publishing
-npm version patch       # Increment version (patch/minor/major)
-npm publish --access public  # Publish to NPM (must use --access public for scoped package)
-```
-
-## Architecture Overview
-
-### Map Provider Abstraction
-The library uses a controller pattern to abstract different map providers:
-- `GoogleMintMapController` - Google Maps implementation
-- `NaverMintMapController` - Naver Maps implementation
-- `KakaoMintMapController` - Kakao Maps implementation
-
-Each controller implements a common interface, allowing seamless switching between map providers.
-
-### Core Directory Structure
-```
-src/components/mint-map/
-├── MintMap.tsx              # Main entry component
-├── core/
-│   ├── advanced/            # Canvas markers, shapes, drawing tools
-│   ├── hooks/               # React hooks for map interactions
-│   ├── provider/            # React Context for state management
-│   └── wrapper/             # Component wrappers (markers, overlays)
-├── google/                  # Google Maps specific implementation
-├── naver/                   # Naver Maps specific implementation
-├── kakao/                   # Kakao Maps specific implementation
-└── types/                   # TypeScript type definitions
-```
-
-### Key Architectural Patterns
-
-1. **Factory Pattern**: The `MintMap` component dynamically instantiates the appropriate controller based on the `mapType` prop.
-
-2. **Provider Pattern**: Uses React Context (`MintMapProvider`) to share map state and controller instance across components.
-
-3. **Wrapper Components**: Components like `MapMarkerWrapper` abstract the differences between map provider APIs.
-
-4. **Canvas Rendering**: Advanced marker system using HTML5 Canvas for high-performance rendering of large datasets.
-
-## TypeScript Configuration
-
-- Target: ES5 with React JSX
-- Strict mode enabled
-- Declaration files generated for distribution
-- Excludes `*.stories.tsx` and `*.test.tsx` from compilation
-
-## Build System
-
-Uses Rollup with multiple output formats:
-- CommonJS: `dist/index.js`
-- ES Module: `dist/index.es.js`
-- UMD: `dist/index.umd.js`
-- Type declarations: `dist/index.d.ts`
-
-## Development with Storybook
-
-The project uses Storybook for component development and documentation:
-- Stories in `src/stories/` demonstrate usage patterns
-- `basics/` - Basic map functionality examples
-- `markerlab/` - Advanced marker experiments including canvas markers
-- `sample/` - Complete implementation examples
-
-## Code Style
-
-- ESLint with Airbnb config + TypeScript rules
-- Tab-based indentation (2-space equivalent)
-- Alphabetical import ordering enforced
-- SCSS modules for component styling
-
-## Working with Canvas Markers
-
-Canvas markers are a key feature for high-performance rendering:
-- `CanvasMarker.tsx` - Main canvas marker component
-- `CanvasMarkerHanquf.tsx` - Specialized canvas marker variant
-- Renderer function pattern for custom drawing logic
-- Supports geohash-based clustering
-
-## External Resources
-
-- Documentation site: https://dev-rsquare.github.io/mint-ui-map-guide
-- NPM package: @mint-ui/map

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/advanced/woongCanvas/ClusterMarker.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-interface Cluster {
-    buildingCnt: number;
-    lat: number;
-    lng: number;
-}
-export interface ClusterMarkerProps {
-    cluster: Cluster;
-}
-declare const ClusterMarker: ({ cluster }: ClusterMarkerProps) => JSX.Element;
-export default ClusterMarker;

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

@@ -1,53 +0,0 @@
-import React from "react";
-import { MarkerOptions } from "../../../types";
-import { KonvaCanvasMarkerData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
-export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
-export type { KonvaCanvasMarkerOption, Paths, KonvaCanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
-/**
- * WoongKonvaMarker 컴포넌트 Props
- * @template T 마커 데이터의 추가 속성 타입
- */
-export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
-    /** 렌더링할 마커 데이터 배열 */
-    markers: KonvaCanvasMarkerData<T>[];
-    /** 데이터 타입 (MARKER 또는 POLYGON) */
-    dataType: CanvasDataType;
-    /** 마커 클릭 시 호출되는 콜백 (선택) */
-    onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
-    /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
-    onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
-    /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
-    onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
-    /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
-    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
-    renderAnimation?: CustomRenderAnimation<T>;
-    /** Event Layer 렌더링 함수 (선택) */
-    renderEvent?: CustomRenderEvent<T>;
-    /** 다중 선택 활성화 여부 (기본: false) */
-    enableMultiSelect?: boolean;
-    /** hover 시 마커를 최상단으로 표시 (기본: false) */
-    topOnHover?: boolean;
-    /** 뷰포트 컬링 활성화 여부 (기본: true) */
-    enableViewportCulling?: boolean;
-    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
-    cullingMargin?: number;
-    /** LRU 캐시 최대 크기 (기본: 10000) */
-    maxCacheSize?: number;
-    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
-    selectedItems?: KonvaCanvasMarkerData<T>[];
-    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
-    selectedItem?: KonvaCanvasMarkerData<T> | null;
-}
-/**
- * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
- *
- * 비교 전략:
- * 1. markers 배열 비교
- * 2. selectedItems 배열 비교 (외부 제어)
- * 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
- *
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
- */
-declare const WoongKonvaMarker: <T>({ markers, dataType, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, selectedItem: externalSelectedItem, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
-export default WoongKonvaMarker;