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

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

@@ -0,0 +1,634 @@
+'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');
+var types = 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');
+
+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 CanvasMarkerLayer = function (props) {
+  var data = props.data,
+      onClick = props.onClick,
+      onMouseOver = props.onMouseOver,
+      onMouseOut = props.onMouseOut,
+      _a = props.enableMultiSelect,
+      enableMultiSelect = _a === void 0 ? false : _a,
+      _b = props.topOnHover,
+      topOnHover = _b === void 0 ? false : _b,
+      _c = props.enableViewportCulling,
+      enableViewportCulling = _c === void 0 ? false : _c,
+      _d = props.cullingMargin,
+      cullingMargin = _d === void 0 ? performance.DEFAULT_CULLING_MARGIN : _d,
+      _e = props.maxCacheSize,
+      maxCacheSize = _e === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _e,
+      externalSelectedItems = props.selectedItems,
+      externalSelectedItem = props.selectedItem,
+      _f = props.disableInteraction,
+      disableInteraction = _f === void 0 ? false : _f,
+      renderBase = props.renderBase,
+      renderEvent = props.renderEvent,
+      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
+
+  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 getOrComputeMarkerOffset = function (markerData) {
+    var cached = offsetCacheRef.current.get(markerData.id);
+    if (cached && !Array.isArray(cached)) return cached;
+    var result = utils.computeMarkerOffset(markerData, controller);
+    if (!result) return null;
+    offsetCacheRef.current.set(markerData.id, result);
+    return result;
+  }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
+
+
+  var computeBoundingBox = function (item) {
+    var offset = getOrComputeMarkerOffset(item);
+    if (!offset) return null;
+    var boxWidth = item.boxWidth || 50;
+    var boxHeight = item.boxHeight || 28;
+    var tailHeight = item.tailHeight || 0;
+    var offsetX = item.offsetX || 0;
+    var offsetY = item.offsetY || 0; // 오프셋을 적용한 마커 중심점 기준으로 바운딩 박스 계산
+
+    return {
+      minX: offset.x + offsetX - boxWidth / 2,
+      minY: offset.y + offsetY - boxHeight - tailHeight,
+      maxX: offset.x + offsetX + boxWidth / 2,
+      maxY: offset.y + offsetY
+    };
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+  var buildSpatialIndex = function () {
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
+
+
+  var renderUtils = {
+    getOrComputePolygonOffsets: function () {
+      return null;
+    },
+    getOrComputeMarkerOffset: getOrComputeMarkerOffset
+  }; // 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; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+
+          if (topOnHover && !renderEvent && hovered) {
+            visibleItems = visibleItems.filter(function (item) {
+              return item.id !== hovered.id;
+            });
+          } // 일반 항목들 먼저 렌더링
+
+
+          renderBase({
+            ctx: ctx,
+            items: visibleItems,
+            selectedIds: selectedIdsRef.current,
+            hoveredItem: hovered,
+            utils: renderUtils
+          }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
+
+          if (topOnHover && !renderEvent && hovered) {
+            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
+              renderBase({
+                ctx: ctx,
+                items: [hovered],
+                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 || !renderEvent) 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;
+
+          if (topOnHover && hovered) {
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: null,
+              utils: renderUtils,
+              selectedItems: selectedItems.filter(function (item) {
+                return item.id !== hovered.id;
+              }),
+              selectedItem: selectedItemRef.current
+            });
+
+            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
+              var hoveredIsSelected = selectedItems.some(function (item) {
+                return item.id === hovered.id;
+              });
+              var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: hovered,
+                utils: renderUtils,
+                selectedItems: hoverSelectedItems,
+                selectedItem: selectedItemRef.current
+              });
+            }
+          } else {
+            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 _g = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _g.handleIdle,
+      handleZoomStart = _g.handleZoomStart,
+      handleZoomEnd = _g.handleZoomEnd,
+      handleCenterChanged = _g.handleCenterChanged,
+      handleDragStartShared = _g.handleDragStart,
+      handleDragEndShared = _g.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) {
+    // topOnHover 옵션이 켜져 있으면 hover된 항목을 최우선으로 확인
+    if (topOnHover && hoveredItemRef.current) {
+      var hovered = hoveredItemRef.current;
+
+      if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
+        return hovered;
+      }
+    } // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+
+
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
+
+    for (var i = candidates.length - 1; i >= 0; i--) {
+      var item = candidates[i];
+
+      if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
+        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');
+    }
+
+    if (renderEvent) {
+      doRenderEvent();
+    } else if (topOnHover) {
+      doRenderBase();
+    }
+  }; // 클릭 처리: 선택 상태 업데이트
+
+
+  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;
+    }
+
+    doRenderBase();
+    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);
+    if (prevHovered) onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+    if (hoveredItem) onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
+
+
+  var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return;
+    var prevHovered = hoveredItemRef.current;
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+    onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+  }; // 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,
+        onMouseOver: onMouseOver,
+        onMouseOut: onMouseOut,
+        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);
+};
+
+Object.defineProperty(exports, 'CanvasDataType', {
+    enumerable: true,
+    get: function () { return types.CanvasDataType; }
+});
+exports.CanvasProvider = context.CanvasProvider;
+exports.LRUCache = performance.LRUCache;
+exports.SpatialHashGrid = performance.SpatialHashGrid;
+exports["default"] = CanvasMarkerLayer;

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

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