feat: boolean feedback invert #2547 (#2549)

lib/Controls/Controller.js

@@ -317,6 +317,17 @@ class ControlsController extends CoreBase {
 			}
 		})
 
+		client.onPromise('controls:feedback:set-inverted', (controlId, id, isInverted) => {
+			const control = this.getControl(controlId)
+			if (!control) return false
+
+			if (control.feedbacks && typeof control.feedbacks.feedbackSetInverted === 'function') {
+				return control.feedbacks.feedbackSetInverted(id, isInverted)
+			} else {
+				throw new Error(`Control "${controlId}" does not support feedbacks`)
+			}
+		})
+
 		client.onPromise('controls:feedback:reorder', (controlId, oldIndex, newIndex) => {
 			const control = this.getControl(controlId)
 			if (!control) return false

lib/Controls/Fragments/FragmentFeedbacks.js

@@ -84,9 +84,13 @@ export default class FragmentFeedbacks extends CoreBase {
 		for (const feedback of this.feedbacks) {
 			if (feedback.disabled) continue
 
-			const rawValue = this.#cachedFeedbackValues[feedback.id]
+			const definition = this.instance.definitions.getFeedbackDefinition(feedback.instance_id, feedback.type)
+
+			let rawValue = this.#cachedFeedbackValues[feedback.id]
+
+			if (definition && typeof rawValue === 'boolean') {
+				if (definition.showInverted && feedback.isInverted) rawValue = !rawValue
 
-			if (typeof rawValue === 'boolean') {
 				// update the result
 				result = result && rawValue
 			} else {
@@ -286,6 +290,7 @@ export default class FragmentFeedbacks extends CoreBase {
 			if (feedback.id === newProps.id) {
 				feedback.type = newProps.type || newProps.feedbackId
 				feedback.options = newProps.options
+				feedback.isInverted = !!newProps.isInverted
 
 				delete feedback.upgradeIndex
 
@@ -335,6 +340,33 @@ export default class FragmentFeedbacks extends CoreBase {
 		return false
 	}
 
+	/**
+	 * Set whether a boolean feedback should be inverted
+	 * @param {string} id the id of the feedback
+	 * @param {boolean} isInverted the new value
+	 * @returns {boolean} success
+	 * @access public
+	 */
+	feedbackSetInverted(id, isInverted) {
+		for (const feedback of this.feedbacks) {
+			if (feedback && feedback.id === id) {
+				// TODO - verify this is a boolean feedback
+
+				feedback.isInverted = !!isInverted
+
+				// Inform relevant module
+				// Future: is this needed?
+				// this.#feedbackSubscribe(feedback)
+
+				this.commitChange()
+
+				return true
+			}
+		}
+
+		return false
+	}
+
 	/**
 	 * Update the selected style properties for a boolean feedback
 	 * @param {string} id the id of the feedback
@@ -485,7 +517,7 @@ export default class FragmentFeedbacks extends CoreBase {
 			const definition = this.instance.definitions.getFeedbackDefinition(feedback.instance_id, feedback.type)
 			const rawValue = this.#cachedFeedbackValues[feedback.id]
 			if (definition && rawValue !== undefined) {
-				if (definition.type === 'boolean' && rawValue == true) {
+				if (definition.type === 'boolean' && rawValue == !feedback.isInverted) {
 					style = {
 						...style,
 						...feedback?.style,

lib/Instance/Definitions.js

@@ -175,6 +175,7 @@ class InstanceDefinitions extends CoreBase {
 				instance_id: instanceId,
 				options: {},
 				style: {},
+				isInverted: false,
 			}
 
 			if (definition.options !== undefined && definition.options.length > 0) {
@@ -372,6 +373,7 @@ class InstanceDefinitions extends CoreBase {
 						type: fb.feedbackId,
 						options: fb.options,
 						style: fb.style,
+						isInverted: !!fb.isInverted,
 					})),
 					steps: rawPreset.steps.map((step) => {
 						const options = cloneDeep(ControlButtonNormal.DefaultStepOptions)

lib/Instance/Wrapper.js

@@ -142,6 +142,8 @@ class SocketEventsHandler {
 							feedbackId: feedback.type,
 							options: feedback.options,
 
+							isInverted: !!feedback.isInverted,
+
 							upgradeIndex: feedback.upgradeIndex,
 							disabled: !!feedback.disabled,
 
@@ -254,6 +256,8 @@ class SocketEventsHandler {
 					feedbackId: feedback.type,
 					options: feedback.options,
 
+					isInverted: !!feedback.isInverted,
+
 					image: control?.getBitmapSize() ?? undefined,
 					page: parsedId?.page ?? 0,
 					bank: parsedId?.bank ?? 0,
@@ -539,6 +543,7 @@ class SocketEventsHandler {
 				type: rawFeedback.type,
 				style: rawFeedback.defaultStyle,
 				hasLearn: !!rawFeedback.hasLearn,
+				showInvert: rawFeedback.showInvert ?? shouldShowInvertForFeedback(rawFeedback.options || []),
 			}
 		}
 
@@ -686,6 +691,7 @@ class SocketEventsHandler {
 							type: feedback.feedbackId,
 							options: feedback.options,
 							style: feedback.style,
+							isInverted: feedback.isInverted,
 						},
 						true
 					)
@@ -728,3 +734,15 @@ class SocketEventsHandler {
 }
 
 export default SocketEventsHandler
+
+function shouldShowInvertForFeedback(options) {
+	for (const option of options) {
+		if (option.type === 'checkbox' && (option.id === 'invert' || option.id === 'inverted')) {
+			// It looks like there is already a matching field
+			return false
+		}
+	}
+
+	// Nothing looked to be a user defined invert field
+	return true
+}

package.json

@@ -51,15 +51,15 @@
 		"zx": "^7.2.2"
 	},
 	"dependencies": {
-		"@companion-module/base": "~1.4.1",
+		"@companion-module/base": "~1.5.0",
 		"@elgato-stream-deck/node": "^5.7.3",
 		"@jsep-plugin/numbers": "^1.0.1",
 		"@jsep-plugin/template": "^1.0.2",
 		"@julusian/jpeg-turbo": "^2.1.0",
 		"@loupedeck/node": "^0.4.0",
-		"@sentry/integrations": "^7.53.1",
-		"@sentry/node": "^7.53.1",
-		"@sentry/tracing": "^7.53.1",
+		"@sentry/integrations": "^7.64.0",
+		"@sentry/node": "^7.64.0",
+		"@sentry/tracing": "^7.64.0",
 		"archiver": "^5.3.1",
 		"body-parser": "^1.20.2",
 		"bufferutil": "^4.0.7",

webui/src/Controls/FeedbackEditor.jsx

@@ -1,11 +1,12 @@
-import { CAlert, CButton, CForm, CFormGroup, CButtonGroup, CSwitch } from '@coreui/react'
+import { CAlert, CButton, CForm, CFormGroup, CButtonGroup, CSwitch, CLabel } from '@coreui/react'
 import {
 	faSort,
 	faTrash,
 	faCompressArrowsAlt,
 	faExpandArrowsAlt,
 	faCopy,
 	faFolderOpen,
+	faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
@@ -23,7 +24,7 @@ import Select, { createFilter } from 'react-select'
 import { OptionsInputField } from './OptionsInputField'
 import { useDrag, useDrop } from 'react-dnd'
 import { GenericConfirmModal } from '../Components/GenericConfirmModal'
-import { DropdownInputField } from '../Components'
+import { CheckboxInputField, DropdownInputField } from '../Components'
 import { ButtonStyleConfigFields } from './ButtonStyleConfig'
 import { AddFeedbacksModal } from './AddModal'
 import { usePanelCollapseHelper } from '../Helpers/CollapseHelper'
@@ -66,6 +67,17 @@ export function ControlFeedbacksEditor({
 		},
 		[socket, controlId]
 	)
+	const setInverted = useCallback(
+		(feedbackId, isInverted) => {
+			const currentFeedback = feedbacksRef.current?.find((fb) => fb.id === feedbackId)
+			if (!currentFeedback || currentFeedback.isInverted !== isInverted) {
+				socketEmitPromise(socket, 'controls:feedback:set-inverted', [controlId, feedbackId, isInverted]).catch((e) => {
+					console.error(`Set-inverted failed: ${e}`)
+				})
+			}
+		},
+		[socket, controlId]
+	)
 
 	const doDelete = useCallback(
 		(feedbackId) => {
@@ -167,6 +179,7 @@ export function ControlFeedbacksEditor({
 								controlId={controlId}
 								feedback={a}
 								setValue={setValue}
+								setInverted={setInverted}
 								doDelete={doDelete}
 								doDuplicate={doDuplicate}
 								doLearn={doLearn}
@@ -208,6 +221,7 @@ function FeedbackTableRow({
 	dragId,
 	moveCard,
 	setValue,
+	setInverted,
 	doDelete,
 	doDuplicate,
 	doLearn,
@@ -222,6 +236,7 @@ function FeedbackTableRow({
 	const innerDelete = useCallback(() => doDelete(feedback.id), [feedback.id, doDelete])
 	const innerDuplicate = useCallback(() => doDuplicate(feedback.id), [feedback.id, doDuplicate])
 	const innerLearn = useCallback(() => doLearn(feedback.id), [doLearn, feedback.id])
+	const innerInverted = useCallback((isInverted) => setInverted(feedback.id, isInverted), [feedback.id, setInverted])
 
 	const ref = useRef(null)
 	const [, drop] = useDrop({
@@ -305,6 +320,7 @@ function FeedbackTableRow({
 					controlId={controlId}
 					feedback={feedback}
 					setValue={setValue}
+					setInverted={innerInverted}
 					innerDelete={innerDelete}
 					innerDuplicate={innerDuplicate}
 					innerLearn={innerLearn}
@@ -327,6 +343,7 @@ function FeedbackEditor({
 	isOnControl,
 	controlId,
 	setValue,
+	setInverted,
 	innerDelete,
 	innerDuplicate,
 	innerLearn,
@@ -469,6 +486,30 @@ function FeedbackEditor({
 							))}
 						</CForm>
 					</div>
+
+					{feedbackSpec?.type === 'boolean' && feedbackSpec.showInvert !== false && (
+						<div className="cell-invert">
+							<MyErrorBoundary>
+								<CForm onSubmit={PreventDefaultHandler}>
+									<CFormGroup>
+										<CLabel>
+											Invert
+											<FontAwesomeIcon
+												style={{ marginLeft: '5px' }}
+												icon={faQuestionCircle}
+												title={'If checked, the behaviour of this feedback is inverted'}
+											/>
+										</CLabel>
+										<p>
+											<CheckboxInputField value={feedback.isInverted} setValue={setInverted} />
+											&nbsp;
+										</p>
+									</CFormGroup>
+								</CForm>
+							</MyErrorBoundary>
+						</div>
+					)}
+
 					{!booleanOnly && (
 						<>
 							<FeedbackStyles feedbackSpec={feedbackSpec} feedback={feedback} setStylePropsValue={setStylePropsValue} />

webui/src/scss/_button-edit.scss

@@ -96,13 +96,16 @@ table.feedback-table {
 			}
 		}
 
-		.cell-delay {
+		.cell-delay,
+		.cell-invert {
 			grid-row: 3;
 			grid-column: 1;
 
 			// @include media-breakpoint-up('sm') {
 			// 	width: 70%;
 			// }
+
+			margin-top: 0.5rem;
 		}
 
 		.cell-actions {