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';
@@ -70,7 +69,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',
@@ -97,7 +91,6 @@ export interface WorkflowNode<S> {
 	state: S;
 
 	status: OperatorStatus;
-	interactionStatus: OperatorInteractionStatus;
 }
 
 export interface WorkflowEdge {

packages/client/hmi-client/src/utils/bitmask.ts

@@ -0,0 +1,76 @@
+enum OperatorInteractionStatus {
+	Found = 0x0001,
+	Hover = 0x0010,
+	Focus = 0x0100,
+	Drag = 0x1000
+}
+
+function addState(status: number, state: OperatorInteractionStatus) {
+	// eslint-disable-next-line no-bitwise
+	status |= state;
+	return status;
+}
+
+function removeState(status: number, state: OperatorInteractionStatus) {
+	// eslint-disable-next-line no-bitwise
+	status &= ~state;
+	return status;
+}
+
+function isStateActive(status: number, state: OperatorInteractionStatus) {
+	// eslint-disable-next-line no-bitwise
+	return status & state;
+}
+
+// Hover
+export function addHover(status: number) {
+	return addState(status, OperatorInteractionStatus.Hover);
+}
+
+export function removeHover(status: number) {
+	return removeState(status, OperatorInteractionStatus.Hover);
+}
+
+export function isHover(status: number) {
+	return isStateActive(status, OperatorInteractionStatus.Hover);
+}
+
+// Found
+export function addFound(status: number) {
+	return addState(status, OperatorInteractionStatus.Found);
+}
+
+export function removeFound(status: number) {
+	return removeState(status, OperatorInteractionStatus.Found);
+}
+
+export function isFound(status: number) {
+	return isStateActive(status, OperatorInteractionStatus.Found);
+}
+
+// Focus
+export function addFocus(status: number) {
+	return addState(status, OperatorInteractionStatus.Focus);
+}
+
+export function removeFocus(status: number) {
+	return removeState(status, OperatorInteractionStatus.Focus);
+}
+
+export function isFocus(status: number) {
+	return isStateActive(status, OperatorInteractionStatus.Focus);
+}
+
+// Drag
+export function addDrag(status: number) {
+	console.log(addState(status, OperatorInteractionStatus.Drag));
+	return addState(status, OperatorInteractionStatus.Drag);
+}
+
+export function removeDrag(status: number) {
+	return removeState(status, OperatorInteractionStatus.Drag);
+}
+
+export function isDrag(status: number) {
+	return isStateActive(status, OperatorInteractionStatus.Drag);
+}

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,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType } from 'vue';
-import { OperatorInteractionStatus, OperatorStatus } from '@/types/workflow';
+import { ref, PropType, computed } from 'vue';
+import { isHover } from '@/utils/bitmask';
+import { OperatorStatus } 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 +29,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 (isHover(props.interactionStatus)) 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 = addHover(interactionStatus)"
+		@mouseleave="interactionStatus = removeHover(interactionStatus)"
+		@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"
@@ -35,6 +43,7 @@
 
 <script setup lang="ts">
 import { Position, WorkflowNode, WorkflowDirection, WorkflowPort } from '@/types/workflow';
+import { addHover, removeHover, addDrag, removeDrag, isDrag } from '@/utils/bitmask';
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import floatingWindow from '@/utils/floating-window';
 import router from '@/router';
@@ -74,18 +83,18 @@ const nodeStyle = computed(() => ({
 const portBaseSize: number = 8;
 const operator = ref<HTMLElement>();
 
+const interactionStatus = ref(0); // States will be added to it thorugh bitmasking
 let tempX = 0;
 let tempY = 0;
-let dragStart = false;
 
 const startDrag = (evt: MouseEvent) => {
 	tempX = evt.x;
 	tempY = evt.y;
-	dragStart = true;
+	interactionStatus.value = addDrag(interactionStatus.value);
 };
 
 const drag = (evt: MouseEvent) => {
-	if (dragStart === false) return;
+	if (!isDrag(interactionStatus.value)) return;
 
 	const dx = evt.x - tempX;
 	const dy = evt.y - tempY;
@@ -103,7 +112,7 @@ const drag = (evt: MouseEvent) => {
 const stopDrag = (/* evt: MouseEvent */) => {
 	tempX = 0;
 	tempY = 0;
-	dragStart = false;
+	interactionStatus.value = removeDrag(interactionStatus.value);
 };
 
 onMounted(() => {