opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui/ux): handles

Browse Source
This commit is contained in:
Emir Karabeg
2025-03-30 02:52:17 -07:00
parent 7d0f3cf861
commit 57d13a2733
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx
+7 -5
View File
@@ -456,11 +456,13 @@ export function ConditionInput({ blockId, subBlockId, isConnecting }: ConditionI
id={`condition-${block.id}`}
key={`${block.id}-${index}`}
className={cn(
'!w-3.5 !h-3.5',
'!bg-white !rounded-full !border !border-gray-200',
'group-hover:!border-blue-500',
'!transition-border !duration-150 !cursor-crosshair',
'!absolute !z-50',
'!w-[7px] !h-5',
'!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
'!z-[30]',
'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
'hover:!w-[10px] hover:!right-[-28px] hover:!rounded-r-full hover:!rounded-l-none',
'!cursor-crosshair',
'transition-all duration-150',
'!right-[-25px]'
)}
data-nodeid={`${blockId}-${subBlockId}`}
sim/app/w/[id]/components/workflow-block/workflow-block.tsx
+15 -11
View File
@@ -225,19 +225,21 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
position={horizontalHandles ? Position.Left : Position.Top}
id="target"
className={cn(
'!w-[7px] !h-5',
horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
'!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
'!z-[30]',
'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
horizontalHandles
? 'hover:!w-[10px] hover:!left-[-10px] hover:!rounded-l-full hover:!rounded-r-none'
: 'hover:!h-[10px] hover:!translate-y-[-3px] hover:!rounded-t-full hover:!rounded-b-none',
: 'hover:!h-[10px] hover:!top-[-10px] hover:!rounded-t-full hover:!rounded-b-none',
'!cursor-crosshair',
'transition-all duration-150',
'transition-[colors] duration-150',
horizontalHandles ? '!left-[-7px]' : '!top-[-7px]'
)}
style={{
...(horizontalHandles ? { top: '50%', transform: 'translateY(-50%)' } : {}),
...(horizontalHandles
? { top: '50%', transform: 'translateY(-50%)' }
: { left: '50%', transform: 'translateX(-50%)' }),
}}
data-nodeid={id}
data-handleid="target"
@@ -376,19 +378,21 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
position={horizontalHandles ? Position.Right : Position.Bottom}
id="source"
className={cn(
'!w-[7px] !h-5',
horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
'!bg-slate-300 dark:!bg-slate-500 !rounded-[2px] !border-none',
'!z-[30]',
'group-hover:!shadow-[0_0_0_3px_rgba(156,163,175,0.15)]',
horizontalHandles
? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'
: 'hover:!h-[10px] hover:!translate-y-[3px] hover:!rounded-b-full hover:!rounded-t-none',
: 'hover:!h-[10px] hover:!bottom-[-10px] hover:!rounded-b-full hover:!rounded-t-none',
'!cursor-crosshair',
'transition-all duration-150',
'transition-[colors] duration-150',
horizontalHandles ? '!right-[-7px]' : '!bottom-[-7px]'
)}
style={{
...(horizontalHandles ? { top: '50%', transform: 'translateY(-50%)' } : {}),
...(horizontalHandles
? { top: '50%', transform: 'translateY(-50%)' }
: { left: '50%', transform: 'translateX(-50%)' }),
}}
data-nodeid={id}
data-handleid="source"
@@ -404,15 +408,15 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
position={horizontalHandles ? Position.Right : Position.Bottom}
id="error"
className={cn(
'!w-[7px] !h-5',
horizontalHandles ? '!w-[7px] !h-5' : '!w-5 !h-[7px]',
'!bg-red-400 dark:!bg-red-500 !rounded-[2px] !border-none',
'!z-[30]',
'group-hover:!shadow-[0_0_0_3px_rgba(248,113,113,0.15)]',
horizontalHandles
? 'hover:!w-[10px] hover:!right-[-10px] hover:!rounded-r-full hover:!rounded-l-none'
: 'hover:!h-[10px] hover:!translate-y-[3px] hover:!rounded-b-full hover:!rounded-t-none',
: 'hover:!h-[10px] hover:!bottom-[-10px] hover:!rounded-b-full hover:!rounded-t-none',
'!cursor-crosshair',
'transition-all duration-150'
'transition-[colors] duration-150'
)}
style={{
position: 'absolute',