diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 4520f15b6..70b6bf0d3 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -99,6 +99,7 @@ --color-danger-100: #c02323; --color-danger-200: #d62952; + --color-bypass: #6A246A; --color-error: #962a2a; --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index 754bd323a..dd8c7cd5b 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -9,21 +9,15 @@ cn( 'bg-white dark-theme:bg-charcoal-100', 'lg-node absolute rounded-2xl', - // border 'border border-solid border-sand-100 dark-theme:border-charcoal-300', - !!executing && 'border-blue-100 dark-theme:border-blue-100', - hasAnyError && 'border-error', - // hover 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20', - // Selected 'outline-transparent -outline-offset-2 outline-2', - !!isSelected && 'outline-black dark-theme:outline-white', - !!(isSelected && executing) && - 'outline-blue-100 dark-theme:outline-blue-100', - isSelected && hasAnyError && 'outline-error', + borderClass, + outlineClass, { 'animate-pulse': executing, - 'opacity-50': nodeData.mode === 4, + 'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0': + bypassed, 'will-change-transform': isDragging }, lodCssClass, @@ -238,6 +232,8 @@ const hasAnyError = computed( (): boolean => !!(hasExecutionError.value || nodeData.hasErrors || error) ) +const bypassed = computed((): boolean => nodeData.mode === 4) + // LOD (Level of Detail) system based on zoom level const zoomRef = toRef(() => zoomLevel) const { @@ -325,6 +321,29 @@ const shouldShowContent = computed( () => shouldRenderContent.value && hasCustomContent.value ) +const borderClass = computed(() => { + if (hasAnyError.value) { + return 'border-error' + } + if (executing.value) { + return 'border-blue-500' + } + return undefined +}) + +const outlineClass = computed(() => { + if (!isSelected.value) { + return undefined + } + if (hasAnyError.value) { + return 'outline-error' + } + if (executing.value) { + return 'outline-blue-500' + } + return 'outline-black dark-theme:outline-white' +}) + // Event handlers const handlePointerDown = (event: PointerEvent) => { if (!nodeData) {