From f646019e1e9704381c0fcd6c388f56e205cd325d Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 22 Oct 2021 12:28:38 +0200
Subject: [PATCH] set endpoint styles

---
 packages/editor-ui/src/Interface.ts               |  1 +
 .../editor-ui/src/components/mixins/nodeBase.ts   | 15 +++++++++++++++
 packages/editor-ui/src/views/NodeView.vue         |  2 --
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 979ad3b262..7d9e038f55 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -79,6 +79,7 @@ export interface IEndpointOptions {
 	dragProxy?: any; // tslint:disable-line:no-any
 	endpoint?: string;
 	endpointStyle?: object;
+	endpointHoverStyle?: object;
 	isSource?: boolean;
 	isTarget?: boolean;
 	maxConnections?: number;
diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
index e02d2f2ce5..8bb71b6cb3 100644
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -5,6 +5,7 @@ import mixins from 'vue-typed-mixins';
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
 import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE } from '@/constants';
+import { getStyleTokenValue } from '../helpers';
 
 export const nodeBase = mixins(
 	deviceSupportHelpers,
@@ -79,6 +80,13 @@ export const nodeBase = mixins(
 							stroke: '#777',
 							lineWidth: 0,
 						},
+						endpointHoverStyle: {
+							width: nodeTypeData && nodeTypeData.outputs.length > 2 ? 9 : 10,
+							height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 24,
+							fill: getStyleTokenValue('--color-primary'),
+							stroke: getStyleTokenValue('--color-primary'),
+							lineWidth: 0,
+						},
 						dragAllowedWhenFull: true,
 					},
 					output: {
@@ -90,6 +98,11 @@ export const nodeBase = mixins(
 							fill: '#555',
 							outlineStroke: 'none',
 						},
+						endpointHoverStyle: {
+							radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 11,
+							fill: getStyleTokenValue('--color-primary'),
+							outlineStroke: 'none',
+						},
 						dragAllowedWhenFull: true,
 					},
 				},
@@ -175,6 +188,7 @@ export const nodeBase = mixins(
 					maxConnections: inputData.maxConnections,
 					endpoint: inputData.endpoint,
 					endpointStyle: inputData.endpointStyle,
+					endpointHoverStyle: inputData.endpointHoverStyle,
 					isSource: false,
 					isTarget: !this.isReadOnly,
 					parameters: {
@@ -240,6 +254,7 @@ export const nodeBase = mixins(
 					maxConnections: inputData.maxConnections,
 					endpoint: inputData.endpoint,
 					endpointStyle: inputData.endpointStyle,
+					endpointHoverStyle: inputData.endpointHoverStyle,
 					isSource: !this.isReadOnly,
 					isTarget: false,
 					parameters: {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 698904c288..9a302c240b 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1440,9 +1440,7 @@ export default mixins(
 					Endpoint: ['Dot', { radius: 5 }],
 					DragOptions: { cursor: 'pointer', zIndex: 5000 },
 					PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')},
-					EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
 					HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
-					EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
 					ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
 					Container: '#node-view',
 				});