@mint-ui/map 1.2.0-test.63 → 1.2.0-test.65

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

@@ -59,31 +59,52 @@ export interface PolygonStyleObject {
  * @param item 폴리곤 데이터
  * @param context 선택/호버/활성 상태 정보
  * @returns 커스터마이징된 폴리곤 스타일 (반환하지 않거나 null/undefined면 그리지 않음)
+ */
+export declare type PolygonStyleCustomizer<T> = (item: CanvasData<T>, context: PolygonStyleContext) => PolygonStyle | null | undefined;
+/**
+ * 폴리곤 스타일 커스터마이징 객체 타입
  *
  * @example
  * ```typescript
- * customStyle={(item, context) => {
- *   // item의 속성에 따라 동적으로 스타일 결정
- *   if (item.someProperty > 100) {
- *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
- *   }
+ * // 예시 1: deps 있음 (외부 상태를 참조하는 경우)
+ * <CanvasPolygonLayer
+ *   customStyle={{
+ *     callback: (item, context) => {
+ *   	// 상태 정보를 기반으로 스타일 결정
+ *   	if (context.isActive) {
+ *    		return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
+ *   	}
+ *   	if (context.isHovered) {
+ *    		return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
+ *   	}
+ *   	if (context.isSelected) {
+ *    		return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
+ *   	}
+ *       return null;
+ *     },
+ *     deps: [selectedPolygon]  // 외부 상태 변경 시 자동 재렌더링
+ *   }}
+ * />
  *
- *   // 상태 정보를 기반으로 스타일 결정
- *   if (context.isActive) {
- *     return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
- *   }
- *   if (context.isHovered) {
- *     return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
- *   }
- *   if (context.isSelected) {
- *     return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
- *   }
- *
- *   // 아무것도 반환하지 않으면 그리지 않음 (return null 또는 return undefined도 가능)
- * }}
+ * // 예시 2: deps 없음 (외부 상태를 참조하지 않는 경우)
+ * <CanvasPolygonLayer
+ *   customStyle={{
+ *     callback: (item, context) => {
+ *       if (item.area > 1000) {
+ *         return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 2 };
+ *       }
+ *       return null;
+ *     }
+ *   }}
+ * />
  * ```
  */
-export declare type PolygonStyleCustomizer<T> = (item: CanvasData<T>, context: PolygonStyleContext) => PolygonStyle | null | undefined;
+export interface PolygonStyleCustomizerWithDeps<T> {
+    /** 스타일 커스터마이징 콜백 함수 (필수) */
+    callback: PolygonStyleCustomizer<T>;
+    /** 외부 상태 의존성 배열 (선택, 변경 시 Canvas 재렌더링) */
+    deps?: React.DependencyList;
+}
 /**
  * 공통 Props (모든 방식 공통)
  */
@@ -140,12 +161,12 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
     /** 다른 방식 props는 사용 불가 */
     renderStyle?: never;
     /**
-     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     * 폴리곤 스타일 커스터마이징 객체 (선택)
      *
      * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
      * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
      */
-    customStyle?: PolygonStyleCustomizer<T>;
+    customStyle?: PolygonStyleCustomizerWithDeps<T>;
 }
 /**
  * 객체 Props 방식
@@ -184,12 +205,12 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
     selectedLineWidth?: never;
     selectedStrokeColor?: never;
     /**
-     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     * 폴리곤 스타일 커스터마이징 객체 (선택)
      *
      * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
      * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
      */
-    customStyle?: PolygonStyleCustomizer<T>;
+    customStyle?: PolygonStyleCustomizerWithDeps<T>;
 }
 /**
  * 함수 Props 방식 (커스터마이징 방식)
@@ -223,12 +244,12 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
  */
 interface CanvasPolygonLayerPropsWithCustomStyle<T> extends CanvasPolygonLayerBaseProps<T> {
     /**
-     * 폴리곤 스타일 커스터마이징 함수
+     * 폴리곤 스타일 커스터마이징 객체
      *
      * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
      * 스타일을 반환하지 않거나 null/undefined를 반환하면 해당 폴리곤을 그리지 않습니다.
      */
-    customStyle: PolygonStyleCustomizer<T>;
+    customStyle: PolygonStyleCustomizerWithDeps<T>;
     /** 다른 방식 props는 사용 불가 */
     activeFillColor?: never;
     activeLineWidth?: never;

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

@@ -46,9 +46,12 @@ var CanvasPolygonLayer = function (props) {
   var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
   var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
 
-  var customStyle = hasCustomStyle ? props.customStyle : undefined;
+  var customStyleProp = hasCustomStyle ? props.customStyle : undefined;
   var individualProps = isIndividualMode ? props : undefined;
-  var objectProps = isObjectMode ? 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
   // --------------------------------------------------------------------------
 
@@ -604,7 +607,17 @@ var CanvasPolygonLayer = function (props) {
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
-  }, [data]);
+  }, [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: {

package/dist/index.es.js

@@ -6021,9 +6021,12 @@ var CanvasPolygonLayer = function (props) {
   var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
   var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
 
-  var customStyle = hasCustomStyle ? props.customStyle : undefined;
+  var customStyleProp = hasCustomStyle ? props.customStyle : undefined;
   var individualProps = isIndividualMode ? props : undefined;
-  var objectProps = isObjectMode ? 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
   // --------------------------------------------------------------------------
 
@@ -6579,7 +6582,17 @@ var CanvasPolygonLayer = function (props) {
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
-  }, [data]);
+  }, [data]); // customStyle deps 변경 시 Canvas 재렌더링
+
+  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 createPortal(React.createElement("div", {
     ref: containerRef,
     style: {

package/dist/index.umd.js

@@ -6025,9 +6025,12 @@
     var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
     var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
 
-    var customStyle = hasCustomStyle ? props.customStyle : undefined;
+    var customStyleProp = hasCustomStyle ? props.customStyle : undefined;
     var individualProps = isIndividualMode ? props : undefined;
-    var objectProps = isObjectMode ? 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
     // --------------------------------------------------------------------------
 
@@ -6583,7 +6586,17 @@
       boundingBoxCacheRef.current.clear();
       selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
       renderAllImmediate();
-    }, [data]);
+    }, [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: {

package/package.json

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