From 72ab762e4da4241feed4857d8308ba42684a6dd0 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Sat, 10 Aug 2024 07:09:00 +0200
Subject: [PATCH] feat: checkbox for inversion of visibility value

* feat: implement reverse option
---
 .../src/builder/BuilderSettingsVisibility.vue | 21 +++++++++++++++++++
 src/ui/src/builder/useComponentActions.ts     |  3 +++
 src/ui/src/renderer/useEvaluator.ts           |  3 ++-
 src/ui/src/writerTypes.ts                     |  1 +
 src/writer/core_ui.py                         |  1 +
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderSettingsVisibility.vue b/src/ui/src/builder/BuilderSettingsVisibility.vue
index d3cf31a2e..209d77390 100644
--- a/src/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/BuilderSettingsVisibility.vue
@@ -47,9 +47,24 @@
 							setVisibleValue(
 								component.id,
 								(ev.target as HTMLInputElement).value,
+								component.visibleReversed,
 							)
 					"
 				/>
+				<div class="flexRow">
+					<input
+						type="checkbox"
+						:checked="component.visibleReversed"
+						@input="
+							(ev: Event) =>
+								setVisibleValue(
+									component.id,
+									component.visible,
+									(ev.target as HTMLInputElement).checked,
+								)
+						"
+					/><span>Reverse</span>
+				</div>
 				<div class="desc">
 					Reference a state or context element that will evaluate to
 					true or false. Reference the element directly, i.e. use
@@ -87,4 +102,10 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 .content {
 	padding: 16px 12px 12px 12px;
 }
+
+.flexRow {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+}
 </style>
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 1bee56827..876b62c77 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -695,6 +695,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	function setVisibleValue(
 		componentId: Component["id"],
 		visible: Component["visible"],
+		reversed: boolean = false,
 	) {
 		const component = wf.getComponentById(componentId);
 		if (!component) return;
@@ -704,8 +705,10 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 
 		if (visible === true && typeof component.visible != "undefined") {
 			delete component.visible;
+			delete component.visibleReversed;
 		} else {
 			component.visible = visible;
+			component.visibleReversed = reversed;
 		}
 
 		ssbm.registerPostMutation(component);
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index d402efad8..348ba3673 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -215,7 +215,8 @@ export function useEvaluator(wf: Core) {
 			component.visible as string,
 			instancePath,
 		);
-		return !!evaluated;
+
+		return component.visibleReversed === true ? !evaluated : !!evaluated;
 	}
 
 	return {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 7ad8500ff..4793e796b 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -19,6 +19,7 @@ export type Component = {
 	isCodeManaged?: boolean;
 	handlers?: Record<string, string>;
 	visible?: boolean | string;
+	visibleReversed?: boolean;
 	binding?: {
 		eventType: string;
 		stateRef: string;
diff --git a/src/writer/core_ui.py b/src/writer/core_ui.py
index d5fbd94d0..1720709d4 100644
--- a/src/writer/core_ui.py
+++ b/src/writer/core_ui.py
@@ -44,6 +44,7 @@ class Component(BaseModel):
     parentId: Optional[str] = None
     handlers: Optional[Dict[str, str]] = None
     visible: Optional[Union[bool, str]] = None
+    visibleReversed: Optional[Union[bool]] = None
     binding: Optional[Dict] = None
 
     def to_dict(self) -> Dict: