feat: bitmasking first pass

packages/client/hmi-client/src/services/workflow.ts

@@ -10,7 +10,6 @@ import {
 	WorkflowNode,
 	WorkflowPortStatus,
 	OperatorStatus,
-	OperatorInteractionStatus,
 	WorkflowPort
 } from '@/types/workflow';
 import { v4 as uuidv4 } from 'uuid';
@@ -69,7 +68,6 @@ export const addNode = (
 		})),
 	  */
 		status: OperatorStatus.INVALID,
-		interactionStatus: OperatorInteractionStatus.FOUND,
 
 		width: options?.size?.width ?? defaultNodeSize.width,
 		height: options?.size?.height ?? defaultNodeSize.height

packages/client/hmi-client/src/types/workflow.ts

@@ -18,12 +18,6 @@ export enum WorkflowOperationTypes {
 	CODE = 'Code'
 }
 
-export enum OperatorInteractionStatus {
-	FOCUS = 'focus', // Hover/drag
-	FOUND = 'found',
-	NOT_FOUND = 'not found'
-}
-
 export enum OperatorStatus {
 	DEFAULT = 'default',
 	IN_PROGRESS = 'in progress',
@@ -35,6 +29,14 @@ export enum OperatorStatus {
 	DISABLED = 'disabled'
 }
 
+// Multiple states can be on at once - using bitmasking
+export enum OperatorInteractionStatus {
+	Found = 0x0001,
+	Hover = 0x0010,
+	Focus = 0x0100,
+	Drag = 0x1000
+}
+
 export enum WorkflowPortStatus {
 	CONNECTED = 'connected',
 	NOT_CONNECTED = 'not connected'
@@ -97,7 +99,6 @@ export interface WorkflowNode<S> {
 	state: S;
 
 	status: OperatorStatus;
-	interactionStatus: OperatorInteractionStatus;
 }
 
 export interface WorkflowEdge {

packages/client/hmi-client/src/workflow/operator/tera-operator-header.vue

@@ -1,5 +1,5 @@
 <template>
-	<header :class="`${status} ${interactionStatus}`">
+	<header :class="`${status} ${interactionClasses}`">
 		<h5>{{ name }}</h5>
 		<Button
 			icon="pi pi-ellipsis-v"
@@ -11,14 +11,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType } from 'vue';
-import { OperatorInteractionStatus, OperatorStatus } from '@/types/workflow';
+import { ref, PropType, computed } from 'vue';
+import { OperatorStatus, OperatorInteractionStatus } from '@/types/workflow';
 import Button from 'primevue/button';
 import Menu from 'primevue/menu';
 
 const emit = defineEmits(['remove-operator', 'bring-to-front', 'open-in-new-window']);
 
-defineProps({
+const props = defineProps({
 	name: {
 		type: String,
 		default: ''
@@ -28,11 +28,18 @@ defineProps({
 		default: OperatorStatus.DEFAULT
 	},
 	interactionStatus: {
-		type: String as PropType<OperatorInteractionStatus>,
-		default: OperatorInteractionStatus.FOUND
+		type: Number,
+		default: 0
 	}
 });
 
+const interactionClasses = computed(() => {
+	const classes: string[] = [];
+	// eslint-disable-next-line no-bitwise
+	if (props.interactionStatus & OperatorInteractionStatus.Drag) classes.push('focus');
+	return classes.join(' ');
+});
+
 const menu = ref();
 const toggleMenu = (event) => {
 	menu.value.toggle(event);

packages/client/hmi-client/src/workflow/tera-operator.vue

@@ -1,8 +1,16 @@
 <template>
-	<main :style="nodeStyle" ref="operator">
+	<main
+		:style="nodeStyle"
+		ref="operator"
+		@mouseenter="interactionStatus |= OperatorInteractionStatus.Hover"
+		@mouseleave="interactionStatus &= ~OperatorInteractionStatus.Hover"
+		@focus="() => {}"
+		@focusout="() => {}"
+	>
 		<tera-operator-header
 			:name="node.displayName"
 			:status="node.status"
+			:interaction-status="interactionStatus"
 			@open-in-new-window="openInNewWindow"
 			@remove-operator="emit('remove-operator', props.node.id)"
 			@bring-to-front="bringToFront"
@@ -34,7 +42,13 @@
 </template>
 
 <script setup lang="ts">
-import { Position, WorkflowNode, WorkflowDirection, WorkflowPort } from '@/types/workflow';
+import {
+	Position,
+	WorkflowNode,
+	WorkflowDirection,
+	WorkflowPort,
+	OperatorInteractionStatus
+} from '@/types/workflow';
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import floatingWindow from '@/utils/floating-window';
 import router from '@/router';
@@ -74,18 +88,20 @@ const nodeStyle = computed(() => ({
 const portBaseSize: number = 8;
 const operator = ref<HTMLElement>();
 
+const interactionStatus = ref(0);
 let tempX = 0;
 let tempY = 0;
-let dragStart = false;
 
 const startDrag = (evt: MouseEvent) => {
 	tempX = evt.x;
 	tempY = evt.y;
-	dragStart = true;
+	// eslint-disable-next-line no-bitwise
+	interactionStatus.value |= OperatorInteractionStatus.Drag;
 };
 
 const drag = (evt: MouseEvent) => {
-	if (dragStart === false) return;
+	// eslint-disable-next-line no-bitwise
+	if (!(interactionStatus.value & OperatorInteractionStatus.Drag)) return;
 
 	const dx = evt.x - tempX;
 	const dy = evt.y - tempY;
@@ -103,7 +119,8 @@ const drag = (evt: MouseEvent) => {
 const stopDrag = (/* evt: MouseEvent */) => {
 	tempX = 0;
 	tempY = 0;
-	dragStart = false;
+	// eslint-disable-next-line no-bitwise
+	interactionStatus.value &= ~OperatorInteractionStatus.Drag;
 };
 
 onMounted(() => {