@mint-ui/map 1.2.0-test.32 → 1.2.0-test.33

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/renderer.js

@@ -0,0 +1,234 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+var drawPolygon = function (_a) {
+  var ctx = _a.ctx,
+      polygonOffsets = _a.polygonOffsets,
+      isDonutPolygon = _a.isDonutPolygon,
+      fillColor = _a.fillColor,
+      strokeColor = _a.strokeColor,
+      lineWidth = _a.lineWidth;
+
+  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+    var multiPolygon = polygonOffsets_1[_i];
+
+    if (isDonutPolygon) {
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+      if (multiPolygon[0] && multiPolygon[0].length > 0) {
+        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+        for (var i = 1; i < multiPolygon[0].length; i++) {
+          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+        }
+
+        ctx.closePath();
+      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+      for (var j = 1; j < multiPolygon.length; j++) {
+        var innerPolygon = multiPolygon[j];
+        if (innerPolygon.length === 0) continue;
+        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+        for (var i = 1; i < innerPolygon.length; i++) {
+          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+        }
+
+        ctx.closePath();
+      } // 3. evenodd fill rule로 구멍 뚫기
+
+
+      ctx.fillStyle = fillColor;
+      ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke();
+    } else {
+      // 일반 폴리곤
+      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+        var polygonGroup = multiPolygon_1[_b];
+        if (!polygonGroup.length) continue;
+        ctx.beginPath();
+        var firstPoint = polygonGroup[0];
+        ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+        for (var i = 1; i < polygonGroup.length; i++) {
+          var point = polygonGroup[i];
+          ctx.lineTo(point[0], point[1]);
+        }
+
+        ctx.closePath();
+        ctx.fillStyle = fillColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+  }
+};
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ */
+
+var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
+
+      if (selectedIds.has(item.id)) continue;
+      if (!item.paths) continue;
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue;
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: baseFillColor,
+        strokeColor: baseStrokeColor,
+        lineWidth: baseLineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @example
+ * const renderEvent = renderPolygonEvent(
+ *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
+ *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
+ *   2,                            // baseLineWidth
+ *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+ *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+ *   4                             // selectedLineWidth
+ * );
+ */
+
+var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (base 기준)
+  var _selectedFillColor = selectedFillColor || baseFillColor;
+
+  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+  var _activeFillColor = activeFillColor || _selectedFillColor;
+
+  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+      for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+        var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: _selectedFillColor,
+          strokeColor: _selectedStrokeColor,
+          lineWidth: _selectedLineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: _activeFillColor,
+          strokeColor: _activeStrokeColor,
+          lineWidth: _activeLineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return;
+      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+        return item.id === hoveredItem.id;
+      });
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+      });
+    }
+  };
+};
+
+exports.drawPolygon = drawPolygon;
+exports.renderPolygonBase = renderPolygonBase;
+exports.renderPolygonEvent = renderPolygonEvent;