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

package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js

@@ -0,0 +1,624 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var Konva = require('konva');
+var React = require('react');
+var reactDom = require('react-dom');
+var renderer = require('./renderer.js');
+var MapDrawables = require('../../../types/MapDrawables.js');
+require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var context = require('../shared/context.js');
+var helpers = require('../shared/helpers.js');
+var hooks = require('../shared/hooks.js');
+var performance = require('../shared/performance.js');
+var types = require('../shared/types.js');
+var utils = require('../shared/utils.js');
+var viewport = require('../shared/viewport.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CanvasPolygonLayer = function (props) {
+  var data = props.data,
+      _a = props.enableMultiSelect,
+      enableMultiSelect = _a === void 0 ? false : _a,
+      _b = props.cullingMargin,
+      cullingMargin = _b === void 0 ? performance.DEFAULT_CULLING_MARGIN : _b,
+      onClick = props.onClick,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
+      externalSelectedItems = props.selectedItems,
+      externalSelectedItem = props.selectedItem,
+      _c = props.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+
+
+  var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
+  var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
+  var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
+
+  var customStyleProp = hasCustomStyle ? props.customStyle : undefined;
+  var individualProps = isIndividualMode ? props : undefined;
+  var objectProps = isObjectMode ? props : undefined; // customStyle 객체에서 callback과 deps 추출
+
+  var customStyle = customStyleProp === null || customStyleProp === void 0 ? void 0 : customStyleProp.callback;
+  var customStyleDeps = customStyleProp === null || customStyleProp === void 0 ? void 0 : customStyleProp.deps; // --------------------------------------------------------------------------
+  // Hooks & Context
+  // --------------------------------------------------------------------------
+
+  var controller = MintMapProvider.useMintMapController();
+  var context$1 = context.useCanvasContext();
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
+
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var containerRef = React.useRef(null);
+  var markerRef = React.useRef(); // Konva Refs
+
+  var stageRef = React.useRef(null);
+  var baseLayerRef = React.useRef(null);
+  var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
+
+  var dataRef = React.useRef(data);
+  var disableInteractionRef = React.useRef(disableInteraction);
+  var hoveredItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
+  var selectedIdsRef = React.useRef(new Set());
+  var selectedItemsMapRef = React.useRef(new Map()); // 드래그 상태 Refs
+
+  var draggingRef = React.useRef(false);
+  var prevCenterOffsetRef = React.useRef(null);
+  var accumTranslateRef = React.useRef({
+    x: 0,
+    y: 0
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 폴리곤 레이어가 공유)
+
+  var sharedPolygonCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedPolygonCache;
+
+  if (!sharedPolygonCache) {
+    throw new Error('CanvasPolygonLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
+
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var boundingBoxCacheRef = React.useRef(new Map());
+  var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
+
+  var getOrComputePolygonOffsets = function (polygonData) {
+    var cached = sharedPolygonCache.get(polygonData.id);
+    if (cached) return cached;
+    var result = utils.computePolygonOffsets(polygonData, controller);
+    if (!result) return null;
+    sharedPolygonCache.set(polygonData.id, result);
+    return result;
+  }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
+
+
+  var computeBoundingBox = function (item) {
+    var offsets = getOrComputePolygonOffsets(item);
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
+    var maxX = -Infinity;
+    var maxY = -Infinity;
+    var minX = Infinity;
+    var minY = Infinity;
+
+    for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
+      var multiPolygon = offsets_1[_i];
+
+      for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
+        var polygonGroup = multiPolygon_1[_a];
+
+        for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
+          var _c = polygonGroup_1[_b],
+              x = _c[0],
+              y = _c[1];
+          if (x < minX) minX = x;
+          if (y < minY) minY = y;
+          if (x > maxX) maxX = x;
+          if (y > maxY) maxY = y;
+        }
+      }
+    }
+
+    return {
+      maxX: maxX,
+      maxY: maxY,
+      minX: minX,
+      minY: minY
+    };
+  }; // 뷰포트 영역 계산 (Viewport Culling용)
+
+
+  var updateViewport = function () {
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
+
+
+  var isInViewport = function (item) {
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+  var buildSpatialIndex = function () {
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
+
+
+  var renderUtils = {
+    getOrComputeMarkerOffset: function () {
+      return null;
+    },
+    getOrComputePolygonOffsets: getOrComputePolygonOffsets
+  }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
+
+  var renderBase;
+  var renderEvent; // customStyle이 있으면 하이브리드 방식 사용, 없으면 기존 방식 사용
+
+  if (isObjectMode && objectProps) {
+    if (hasCustomStyle) {
+      // customStyle + renderStyle 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybridObject(customStyle, objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithHybridObject(customStyle, objectProps.renderStyle);
+    } else {
+      // renderStyle만 사용
+      renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
+    }
+  } else if (isIndividualMode && individualProps) {
+    if (hasCustomStyle) {
+      // customStyle + 개별 props 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = renderer.renderPolygonEventWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    } else {
+      // 개별 props만 사용
+      renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = renderer.renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    }
+  } else if (hasCustomStyle && customStyle) {
+    // customStyle만 사용 (기존 방식)
+    renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyle);
+    renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyle);
+  } else {
+    throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
+  } // Base Layer 렌더링 (뷰포트 컬링 적용)
+
+
+  var doRenderBase = function () {
+    var layer = baseLayerRef.current;
+    if (!layer) return;
+    var shape = layer.findOne('.base-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        hitStrokeWidth: 0,
+        listening: false,
+        name: 'base-render-shape',
+        perfectDrawEnabled: false,
+        sceneFunc: function (konvaContext) {
+          var ctx = konvaContext;
+          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링 (항상 활성화)
+
+          var visibleItems = dataRef.current.filter(function (item) {
+            return isInViewport(item);
+          });
+          renderBase({
+            ctx: ctx,
+            hoveredItem: hovered,
+            items: visibleItems,
+            selectedIds: selectedIdsRef.current,
+            utils: renderUtils
+          });
+        }
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
+
+
+  var doRenderEvent = function () {
+    var layer = eventLayerRef.current;
+    if (!layer) return;
+    var shape = layer.findOne('.event-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        hitStrokeWidth: 0,
+        listening: false,
+        name: 'event-render-shape',
+        perfectDrawEnabled: false,
+        sceneFunc: function (konvaContext) {
+          var ctx = konvaContext;
+          var hovered = hoveredItemRef.current;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          renderEvent({
+            ctx: ctx,
+            hasTopStage: false,
+            hoveredItem: hovered,
+            renderSource: types.RenderSource.EVENT,
+            selectedItem: selectedItemRef.current,
+            selectedItems: selectedItems,
+            utils: renderUtils
+          });
+        }
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 폴리곤 타입 항목만 필터링 (number[][][][] 타입만)
+
+    var allCacheEntries = sharedPolygonCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedPolygonCache.size(),
+      spatialGridCells: spatialGridCells
+    });
+  }; // 전체 즉시 렌더링
+
+
+  var renderAllImmediate = function () {
+    updateViewport();
+    buildSpatialIndex();
+    doRenderBase();
+    doRenderEvent(); // 최적화 데이터 업데이트 콜백 호출
+
+    notifyOptimizationData();
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _d = hooks.createMapEventHandlers({
+    accumTranslateRef: accumTranslateRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedPolygonCache.clear();
+    },
+    containerRef: containerRef,
+    controller: controller,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChanged = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd;
+
+  var handleDragStart = function () {
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
+  };
+
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+  }; // Hit Test: 특정 좌표의 폴리곤 찾기
+
+
+  var findData = function (offset) {
+    // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
+
+    for (var i = candidates.length - 1; i >= 0; i--) {
+      var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
+
+      if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+        return item;
+      }
+    }
+
+    return null;
+  }; // Hover 상태 설정 및 렌더링
+
+
+  var setHovered = function (hoveredData) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
+    hoveredItemRef.current = hoveredData;
+
+    if (draggingRef.current) {
+      controller.setMapCursor('grabbing');
+    } else {
+      controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
+    }
+
+    doRenderEvent();
+  }; // 클릭 처리: 선택 상태 업데이트
+
+
+  var handleLocalClick = function (clickedData) {
+    if (enableMultiSelect) {
+      var newSelected = new Set(selectedIdsRef.current);
+
+      if (newSelected.has(clickedData.id)) {
+        newSelected.delete(clickedData.id);
+        selectedItemsMapRef.current.delete(clickedData.id);
+      } else {
+        newSelected.add(clickedData.id);
+        selectedItemsMapRef.current.set(clickedData.id, clickedData);
+      }
+
+      selectedIdsRef.current = newSelected;
+    } else {
+      var newSelected = new Set();
+
+      if (!selectedIdsRef.current.has(clickedData.id)) {
+        newSelected.add(clickedData.id);
+        selectedItemsMapRef.current.clear();
+        selectedItemsMapRef.current.set(clickedData.id, clickedData);
+      } else {
+        selectedItemsMapRef.current.clear();
+      }
+
+      selectedIdsRef.current = newSelected;
+    } // Event Layer 업데이트 (선택된 항목 표시)
+
+
+    doRenderEvent();
+  }; // 클릭 이벤트 핸들러
+
+
+  var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
+    if (disableInteractionRef.current) return;
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var clickedData = findData(clickedOffset);
+    if (!clickedData) return;
+    handleLocalClick(clickedData);
+    onClick === null || onClick === void 0 ? void 0 : onClick(clickedData, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
+
+
+  var handleMouseMove = function (event) {
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
+    var mouseOffset = helpers.validateEvent(event, context$1, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
+
+
+  var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return;
+    var prevHovered = hoveredItemRef.current;
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+  }; // DOM 초기화
+
+
+  React.useEffect(function () {
+    divElement.style.width = 'fit-content';
+    return function () {
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
+    };
+  }, []); // 마커 생성/업데이트
+
+  React.useEffect(function () {
+    if (!options) return;
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = tslib.__assign({
+      position: bounds.nw
+    }, options);
+
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+      return;
+    }
+
+    markerRef.current = new MapDrawables.Marker(markerOptions);
+    markerRef.current.element = divElement;
+    controller.createMarker(markerRef.current);
+
+    if (divElement.parentElement) {
+      divElement.parentElement.style.pointerEvents = 'none';
+    }
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
+
+  React.useEffect(function () {
+    var mapDiv = controller.mapDivElement;
+    var stage = new Konva__default["default"].Stage({
+      container: containerRef.current,
+      height: mapDiv.offsetHeight,
+      width: mapDiv.offsetWidth
+    });
+    stageRef.current = stage;
+    var baseLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    var eventLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    baseLayerRef.current = baseLayer;
+    eventLayerRef.current = eventLayer;
+    stage.add(baseLayer);
+    stage.add(eventLayer);
+    updateViewport(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    var resizeRafId = null;
+    var resizeObserver = new ResizeObserver(function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeRafId = requestAnimationFrame(function () {
+        stage.width(mapDiv.offsetWidth);
+        stage.height(mapDiv.offsetHeight);
+        sharedPolygonCache.clear();
+        boundingBoxCacheRef.current.clear();
+        updateViewport();
+        renderAllImmediate();
+        resizeRafId = null;
+      });
+    });
+    resizeObserver.observe(mapDiv);
+    controller.addEventListener('IDLE', handleIdle);
+    controller.addEventListener('ZOOMSTART', handleZoomStart);
+    controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+    controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
+    controller.addEventListener('CLICK', handleClick);
+    controller.addEventListener('MOUSEMOVE', handleMouseMove);
+    controller.addEventListener('DRAGSTART', handleDragStart);
+    controller.addEventListener('DRAGEND', handleDragEnd);
+    mapDiv.addEventListener('mouseleave', handleMouseLeave);
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
+
+    var componentInstance = null;
+
+    if (context$1) {
+      componentInstance = {
+        findData: findData,
+        getSelectedIds: function () {
+          return selectedIdsRef.current;
+        },
+        handleLocalClick: handleLocalClick,
+        hitTest: function (offset) {
+          return findData(offset) !== null;
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        },
+        onClick: onClick,
+        setHovered: setHovered,
+        zIndex: currentZIndex
+      };
+      context$1.registerComponent(componentInstance);
+    }
+
+    return function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.removeEventListener('CLICK', handleClick);
+      controller.removeEventListener('MOUSEMOVE', handleMouseMove);
+      controller.removeEventListener('DRAGSTART', handleDragStart);
+      controller.removeEventListener('DRAGEND', handleDragEnd);
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
+
+      if (context$1 && componentInstance) {
+        context$1.unregisterComponent(componentInstance);
+      }
+
+      baseLayer.destroyChildren();
+      eventLayer.destroyChildren();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
+      boundingBoxCacheRef.current.clear();
+      spatialIndexRef.current.clear();
+    };
+  }, []); // disableInteraction 동기화
+
+  React.useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // 외부 selectedItems 동기화
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
+    doRenderBase();
+    doRenderEvent();
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    selectedItemRef.current = externalSelectedItem;
+    doRenderEvent();
+  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    dataRef.current = data;
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    }
+
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+    sharedPolygonCache.clear();
+    boundingBoxCacheRef.current.clear();
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
+    renderAllImmediate();
+  }, [data]); // customStyle deps 변경 시 Canvas 재렌더링
+
+  React.useEffect(function () {
+    var _a, _b, _c, _d;
+
+    if (!stageRef.current || !customStyleDeps) return; // Shape 재생성을 위해 기존 shape 제거
+
+    (_b = (_a = baseLayerRef.current) === null || _a === void 0 ? void 0 : _a.findOne('.base-render-shape')) === null || _b === void 0 ? void 0 : _b.destroy();
+    (_d = (_c = eventLayerRef.current) === null || _c === void 0 ? void 0 : _c.findOne('.event-render-shape')) === null || _d === void 0 ? void 0 : _d.destroy();
+    renderAllImmediate(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, customStyleDeps || []);
+  return reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
+    }
+  }), divElement);
+};
+
+exports.CanvasProvider = context.CanvasProvider;
+exports.QueueCache = performance.QueueCache;
+exports.SpatialHashGrid = performance.SpatialHashGrid;
+Object.defineProperty(exports, 'RenderSource', {
+    enumerable: true,
+    get: function () { return types.RenderSource; }
+});
+exports["default"] = CanvasPolygonLayer;

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

@@ -0,0 +1,4 @@
+export * from '../shared';
+export * from './CanvasPolygonLayer';
+export { default as CanvasPolygonLayer } from './CanvasPolygonLayer';
+export * from './types';