Merge pull request #52 from dotoritos-kim/feat/plugin-settings-conditional-visibility

lee-sihun · web-flow · commit f82d56c14ad7 · 2026-03-01T19:58:29.000+09:00
feat: 플러그인 설정 스키마에 조건부 표시(visible) 지원
diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -1983,6 +1983,16 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
       const wrap = options?.wrap !== false;
       const rows = Object.entries(schema).map(([key, setting]) => {
         const schemaValue = setting as PluginSettingSchema;
+
+        // ── 조건부 visibility ──
+        if (schemaValue.visible !== undefined) {
+          const vis =
+            typeof schemaValue.visible === "function"
+              ? schemaValue.visible(values)
+              : schemaValue.visible;
+          if (!vis) return null;
+        }
+
         if (schemaValue.type === "divider") {
           return <SectionDivider key={`divider-${key}`} />;
         }
@@ -2099,11 +2109,13 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         );
       });
 
+      const filtered = rows.filter(Boolean);
+
       if (!wrap) {
-        return <>{rows}</>;
+        return <>{filtered}</>;
       }
 
-      return <div className="flex flex-col gap-[12px]">{rows}</div>;
+      return <div className="flex flex-col gap-[12px]">{filtered}</div>;
     },
     [locale, panelElement, t],
   );
diff --git a/src/renderer/plugins/runtime/api/defineElement.ts b/src/renderer/plugins/runtime/api/defineElement.ts
@@ -241,10 +241,31 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
       let htmlContent =
         '<div class="flex flex-col gap-[19px] w-full text-left">';
 
+      const _evalVisible = (
+        visible: boolean | ((settings: Record<string, any>) => boolean) | undefined,
+        settings: Record<string, any>,
+      ): boolean => {
+        if (visible === undefined) return true;
+        return typeof visible === "function" ? visible(settings) : visible;
+      };
+
+      const _updateVisibility = () => {
+        if (!definition.settings) return;
+        for (const [k, s] of Object.entries(definition.settings)) {
+          if (s.visible === undefined) continue;
+          const el = document.querySelector(
+            `[data-setting-key="${k}"]`,
+          ) as HTMLElement | null;
+          if (el)
+            el.style.display = _evalVisible(s.visible, currentSettings) ? "" : "none";
+        }
+      };
+
       if (definition.settings) {
         for (const [key, schema] of Object.entries(definition.settings)) {
+          const _vis = _evalVisible(schema.visible, currentSettings);
           if (schema.type === "divider") {
-            htmlContent += `<div class="w-full h-[1px] bg-[#3A3943]"></div>`;
+            htmlContent += `<div data-setting-key="${key}" style="${_vis ? "" : "display:none"}" class="w-full h-[1px] bg-[#3A3943]"></div>`;
           } else {
             const value =
               currentSettings[key] !== undefined
@@ -264,6 +285,7 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
               window.api.ui.displayElement.update(instanceId, {
                 settings: newSettings,
               });
+              _updateVisibility();
             };
 
             const wrappedChange = wrapFunctionWithContext(handleChange);
@@ -366,7 +388,7 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
             }
 
             htmlContent += `
-            <div class="flex justify-between w-full items-center">
+            <div data-setting-key="${key}" style="${_vis ? "" : "display:none"}" class="flex justify-between w-full items-center">
               <p class="text-white text-style-2">${labelText}</p>
               ${componentHtml}
             </div>
diff --git a/src/renderer/plugins/runtime/api/defineSettings.ts b/src/renderer/plugins/runtime/api/defineSettings.ts
@@ -156,13 +156,35 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
         notifyOverlay(currentSettings);
       };
 
+      // ── 조건부 visibility 헬퍼 ──
+      const _evalVisible = (
+        visible: boolean | ((settings: Record<string, any>) => boolean) | undefined,
+        settings: Record<string, any>,
+      ): boolean => {
+        if (visible === undefined) return true;
+        return typeof visible === "function" ? visible(settings) : visible;
+      };
+
+      const _updateVisibility = () => {
+        if (!definition.settings) return;
+        for (const [k, s] of Object.entries(definition.settings)) {
+          if (s.visible === undefined) continue;
+          const el = document.querySelector(
+            `[data-setting-key="${k}"]`,
+          ) as HTMLElement | null;
+          if (el)
+            el.style.display = _evalVisible(s.visible, dialogSettings) ? "" : "none";
+        }
+      };
+
       let htmlContent =
         '<div class="flex flex-col gap-[19px] w-full text-left">';
 
       if (definition.settings && Object.keys(definition.settings).length > 0) {
         for (const [key, schema] of Object.entries(definition.settings)) {
+          const _vis = _evalVisible(schema.visible, dialogSettings);
           if (schema.type === "divider") {
-            htmlContent += `<div class="w-full h-[1px] bg-[#3A3943]"></div>`;
+            htmlContent += `<div data-setting-key="${key}" style="${_vis ? "" : "display:none"}" class="w-full h-[1px] bg-[#3A3943]"></div>`;
           } else {
             const value =
               dialogSettings[key] !== undefined
@@ -183,6 +205,7 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
                 dialogSettings[key] = newValue;
                 // 실시간 미리보기 적용
                 applyPreview(dialogSettings);
+                _updateVisibility();
               } finally {
                 (window as any).__dmn_current_plugin_id = prev;
               }
@@ -289,7 +312,7 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
             }
 
             htmlContent += `
-            <div class="flex justify-between w-full items-center">
+            <div data-setting-key="${key}" style="${_vis ? "" : "display:none"}" class="flex justify-between w-full items-center">
               <p class="text-white text-style-2">${labelText}</p>
               ${componentHtml}
             </div>
diff --git a/src/types/api.ts b/src/types/api.ts
@@ -405,6 +405,9 @@ export type PluginSettingSchema =
   | {
       type: "divider";
       label?: string;
+      visible?:
+        | boolean
+        | ((settings: Record<string, any>) => boolean);
     }
   | {
       type: Exclude<PluginSettingType, "divider">;
@@ -415,6 +418,9 @@ export type PluginSettingSchema =
       step?: number; // for number
       options?: { label: string; value: any }[]; // for select
       placeholder?: string; // for string/number
+      visible?:
+        | boolean
+        | ((settings: Record<string, any>) => boolean);
     };
 
 export interface PluginDefinitionHookContext {
