feat: checkbox for inversion of visibility value

* feat: implement reverse option
writer · Aug 12, 2024 · 72ab762 · 72ab762
1 parent 514705a
commit 72ab762
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: