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

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

@@ -0,0 +1,593 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Konva = require('konva');
+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');
+require('../shared/types.js');
+var utils = require('../shared/utils.js');
+var context = require('../shared/context.js');
+var performance = require('../shared/performance.js');
+var viewport = require('../shared/viewport.js');
+var hooks = require('../shared/hooks.js');
+var helpers = require('../shared/helpers.js');
+var renderer = require('./renderer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
+
+var CanvasPolygonLayer = function (props) {
+  var data = props.data,
+      onClick = props.onClick,
+      _a = props.enableMultiSelect,
+      enableMultiSelect = _a === void 0 ? false : _a,
+      _b = props.enableViewportCulling,
+      enableViewportCulling = _b === void 0 ? false : _b,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
+      externalSelectedItems = props.selectedItems,
+      externalSelectedItem = props.selectedItem,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+
+
+  var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+
+  var individualProps = isFunctionMode ? undefined : props;
+  var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
+  // 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 enableViewportCullingRef = React.useRef(enableViewportCulling);
+  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); // 성능 최적화 Refs
+
+  var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var boundingBoxCacheRef = React.useRef(new Map());
+  var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
+
+  var updateViewport = function () {
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
+
+
+  var isInViewport = function (item) {
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 폴리곤 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
+
+
+  var getOrComputePolygonOffsets = function (polygonData) {
+    var cached = offsetCacheRef.current.get(polygonData.id);
+    if (cached && Array.isArray(cached)) return cached;
+    var result = utils.computePolygonOffsets(polygonData, controller);
+    if (!result) return null;
+    offsetCacheRef.current.set(polygonData.id, result);
+    return result;
+  }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
+
+
+  var computeBoundingBox = function (item) {
+    var offsets = getOrComputePolygonOffsets(item);
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
+    var minX = Infinity,
+        minY = Infinity,
+        maxX = -Infinity,
+        maxY = -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 {
+      minX: minX,
+      minY: minY,
+      maxX: maxX,
+      maxY: maxY
+    };
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+  var buildSpatialIndex = function () {
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
+
+
+  var renderUtils = {
+    getOrComputePolygonOffsets: getOrComputePolygonOffsets,
+    getOrComputeMarkerOffset: function () {
+      return null;
+    }
+  }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
+
+  var renderBase = isFunctionMode && functionProps ? renderer.renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  }();
+  var renderEvent = isFunctionMode && functionProps ? renderer.renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? 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) : function () {
+    throw new Error('Invalid props: either 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({
+        name: 'base-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
+            return isInViewport(item);
+          }) : dataRef.current;
+          renderBase({
+            ctx: ctx,
+            items: visibleItems,
+            selectedIds: selectedIdsRef.current,
+            hoveredItem: hovered,
+            utils: renderUtils
+          });
+        },
+        perfectDrawEnabled: false,
+        listening: false,
+        hitStrokeWidth: 0
+      });
+      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({
+        name: 'event-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
+          renderEvent({
+            ctx: ctx,
+            hoveredItem: hovered,
+            utils: renderUtils,
+            selectedItems: selectedItems,
+            selectedItem: selectedItemRef.current
+          });
+        },
+        perfectDrawEnabled: false,
+        listening: false,
+        hitStrokeWidth: 0
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // 전체 즉시 렌더링
+
+
+  var renderAllImmediate = function () {
+    if (enableViewportCullingRef.current) {
+      updateViewport();
+    }
+
+    buildSpatialIndex();
+    doRenderBase();
+    doRenderEvent();
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _f = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.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 (data) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
+    hoveredItemRef.current = data;
+
+    if (draggingRef.current) {
+      controller.setMapCursor('grabbing');
+    } else {
+      controller.setMapCursor(data ? 'pointer' : 'grab');
+    }
+
+    doRenderEvent();
+  }; // 클릭 처리: 선택 상태 업데이트
+
+
+  var handleLocalClick = function (data) {
+    if (enableMultiSelect) {
+      var newSelected = new Set(selectedIdsRef.current);
+
+      if (newSelected.has(data.id)) {
+        newSelected.delete(data.id);
+        selectedItemsMapRef.current.delete(data.id);
+      } else {
+        newSelected.add(data.id);
+        selectedItemsMapRef.current.set(data.id, data);
+      }
+
+      selectedIdsRef.current = newSelected;
+    } else {
+      var newSelected = new Set();
+
+      if (!selectedIdsRef.current.has(data.id)) {
+        newSelected.add(data.id);
+        selectedItemsMapRef.current.clear();
+        selectedItemsMapRef.current.set(data.id, data);
+      } 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 data = findData(clickedOffset);
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, 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,
+      width: mapDiv.offsetWidth,
+      height: mapDiv.offsetHeight
+    });
+    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);
+
+    if (enableViewportCulling) {
+      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);
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+
+        if (enableViewportCullingRef.current) {
+          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 = {
+        zIndex: currentZIndex,
+        hitTest: function (offset) {
+          return findData(offset) !== null;
+        },
+        onClick: onClick,
+        findData: findData,
+        setHovered: setHovered,
+        handleLocalClick: handleLocalClick,
+        getSelectedIds: function () {
+          return selectedIdsRef.current;
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        }
+      };
+      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();
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear();
+      spatialIndexRef.current.clear();
+    };
+  }, []); // disableInteraction 동기화
+
+  React.useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  React.useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 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
+    };
+    offsetCacheRef.current.clear();
+    boundingBoxCacheRef.current.clear();
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
+    renderAllImmediate();
+  }, [data]);
+  return reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    }
+  }), divElement);
+};
+
+exports.CanvasProvider = context.CanvasProvider;
+exports.LRUCache = performance.LRUCache;
+exports.SpatialHashGrid = performance.SpatialHashGrid;
+exports["default"] = CanvasPolygonLayer;

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

@@ -0,0 +1,3 @@
+export { default as CanvasPolygonLayer } from "./CanvasPolygonLayer";
+export * from "./CanvasPolygonLayer";
+export * from "../shared";