refactor(editor): Fix NodeView/Canvas related TS errors (#9581)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/editor-ui/src/composables/useCanvasMouseSelect.ts

@@ -204,8 +204,8 @@ export default function useCanvasMouseSelect() {
 		uiStore.lastSelectedNode = null;
 		uiStore.lastSelectedNodeOutputIndex = null;
 
-		canvasStore.lastSelectedConnection = null;
 		canvasStore.newNodeInsertPosition = null;
+		canvasStore.setLastSelectedConnection(undefined);
 	}
 
 	const instance = computed(() => canvasStore.jsPlumbInstance);

packages/editor-ui/src/composables/useCanvasPanning.ts

@@ -70,7 +70,7 @@ export function useCanvasPanning(
 	/**
 	 * Ends the panning process and removes the mousemove event listener
 	 */
-	function onMouseUp(_: MouseEvent) {
+	function onMouseUp() {
 		if (!uiStore.nodeViewMoveInProgress) {
 			// If it is not active return directly.
 			// Else normal node dragging will not work.
@@ -89,7 +89,7 @@ export function useCanvasPanning(
 	 * Handles the actual movement of the canvas during a mouse drag,
 	 * updating the position based on the current mouse position
 	 */
-	function onMouseMove(e: MouseEvent) {
+	function onMouseMove(e: MouseEvent | TouchEvent) {
 		const element = unref(elementRef);
 		if (e.target && !(element === e.target || element?.contains(e.target as Node))) {
 			return;
@@ -100,11 +100,11 @@ export function useCanvasPanning(
 		}
 
 		// Signal that moving canvas is active if middle button is pressed and mouse is moved
-		if (e.buttons === MOUSE_EVENT_BUTTONS.MIDDLE) {
+		if (e instanceof MouseEvent && e.buttons === MOUSE_EVENT_BUTTONS.MIDDLE) {
 			uiStore.nodeViewMoveInProgress = true;
 		}
 
-		if (e.buttons === MOUSE_EVENT_BUTTONS.NONE) {
+		if (e instanceof MouseEvent && e.buttons === MOUSE_EVENT_BUTTONS.NONE) {
 			// Mouse button is not pressed anymore so stop selection mode
 			// Happens normally when mouse leave the view pressed and then
 			// comes back unpressed.

packages/editor-ui/src/composables/useMessage.ts

@@ -1,12 +1,19 @@
-import type { ElMessageBoxOptions } from 'element-plus';
+import type { ElMessageBoxOptions, Action, MessageBoxInputData } from 'element-plus';
 import { ElMessageBox as MessageBox } from 'element-plus';
 
 export type MessageBoxConfirmResult = 'confirm' | 'cancel';
 
 export function useMessage() {
-	const handleCancelOrClose = (e: unknown) => {
+	const handleCancelOrClose = (e: Action | Error): Action => {
 		if (e instanceof Error) throw e;
-		else return e;
+
+		return e;
+	};
+
+	const handleCancelOrClosePrompt = (e: Error | Action): MessageBoxInputData => {
+		if (e instanceof Error) throw e;
+
+		return { value: '', action: e };
 	};
 
 	async function alert(
@@ -15,7 +22,7 @@ export function useMessage() {
 		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
-			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			...(config ?? (typeof configOrTitle === 'object' ? configOrTitle : {})),
 			cancelButtonClass: 'btn--cancel',
 			confirmButtonClass: 'btn--confirm',
 		};
@@ -32,24 +39,23 @@ export function useMessage() {
 		message: ElMessageBoxOptions['message'],
 		configOrTitle?: string | ElMessageBoxOptions,
 		config?: ElMessageBoxOptions,
-	): Promise<MessageBoxConfirmResult> {
+	) {
 		const resolvedConfig = {
-			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			...(config ?? (typeof configOrTitle === 'object' ? configOrTitle : {})),
 			cancelButtonClass: 'btn--cancel',
 			confirmButtonClass: 'btn--confirm',
 			distinguishCancelAndClose: true,
-			showClose: config?.showClose || false,
+			showClose: config?.showClose ?? false,
 			closeOnClickModal: false,
 		};
 
 		if (typeof configOrTitle === 'string') {
-			return await (MessageBox.confirm(message, configOrTitle, resolvedConfig).catch(
+			return await MessageBox.confirm(message, configOrTitle, resolvedConfig).catch(
 				handleCancelOrClose,
-			) as unknown as Promise<MessageBoxConfirmResult>);
+			);
 		}
-		return await (MessageBox.confirm(message, resolvedConfig).catch(
-			handleCancelOrClose,
-		) as unknown as Promise<MessageBoxConfirmResult>);
+
+		return await MessageBox.confirm(message, resolvedConfig).catch(handleCancelOrClose);
 	}
 
 	async function prompt(
@@ -58,17 +64,17 @@ export function useMessage() {
 		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
-			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
+			...(config ?? (typeof configOrTitle === 'object' ? configOrTitle : {})),
 			cancelButtonClass: 'btn--cancel',
 			confirmButtonClass: 'btn--confirm',
 		};
 
 		if (typeof configOrTitle === 'string') {
 			return await MessageBox.prompt(message, configOrTitle, resolvedConfig).catch(
-				handleCancelOrClose,
+				handleCancelOrClosePrompt,
 			);
 		}
-		return await MessageBox.prompt(message, resolvedConfig).catch(handleCancelOrClose);
+		return await MessageBox.prompt(message, resolvedConfig).catch(handleCancelOrClosePrompt);
 	}
 
 	return {

packages/editor-ui/src/composables/useWorkflowHelpers.ts

@@ -39,6 +39,7 @@ import type {
 	IWorkflowData,
 	IWorkflowDataUpdate,
 	IWorkflowDb,
+	IWorkflowTemplateNode,
 	TargetItem,
 	XYPosition,
 } from '@/Interface';
@@ -307,7 +308,11 @@ function getNodes(): INodeUi[] {
 }
 
 // Returns a workflow instance.
-function getWorkflow(nodes: INodeUi[], connections: IConnections, copyData?: boolean): Workflow {
+function getWorkflow(
+	nodes: Array<INodeUi | IWorkflowTemplateNode>,
+	connections: IConnections,
+	copyData?: boolean,
+): Workflow {
 	return useWorkflowsStore().getWorkflow(nodes, connections, copyData);
 }