lelii
/
humainflow-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make a resource's handle a bar along its top edge 

A small square on the edge was hard to see and hard to grab, and Rete
anchored its links 12px to one side of it - the offset it gives an
output on a node's right. The handle now runs along the whole top edge,
and its links start from the bar's middle.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucio Lelii 2026-09-29 09:27:18 +02:00
parent 733de8df7a
commit 0afe66d372
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/shared/nodes/resource-node/resource-node.css
View File

@ -217,20 +217,28 @@
}
/*
* The handle sits on the top edge, half outside: a resource usually lies under the steps that use
* it, and its links rise to them rather than running along the chain.
* The handle is a bar along the whole top edge: a resource usually lies under the steps that use
* it, and its links rise to them from anywhere along it rather than from a point on a side.
*/
.resource-card__link {
position: absolute;
left: 50%;
top: -11px;
transform: translateX(-50%);
display: flex;
justify-content: center;
top: -5px;
left: 18px;
right: 18px;
height: 9px;
}
.resource-card__socket {
display: flex;
display: block;
width: 100%;
height: 100%;
}
/* The socket sizes itself as a square; here it is stretched into the bar. */
.resource-card__socket ::ng-deep > * {
width: 100% !important;
height: 9px !important;
border-radius: 999px !important;
}
.llm-spinner {

8
src/app/utilities/rete-editor.ts
View File

@ -10,6 +10,7 @@ import {
Presets as ConnectionPresets
} from "rete-connection-plugin";
import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/21";
import { getDOMSocketPosition } from "rete-render-utils";
import { HFNode, HFSchemes } from "@models/nodes";
import {
areFlowValueKindsCompatible,
@ -123,6 +124,13 @@ export async function createEditor(
render.addPreset(
Presets.classic.setup({
// Rete pushes an output's anchor 12px past its socket, for a handle on a node's right side.
// A resource's handle is a bar along its top edge: its links start from the bar's middle.
socketPositionWatcher: getDOMSocketPosition<HFSchemes, any>({
offset: (position, _nodeId, side, key) => key === FLOW_RESOURCE_PORT_KEY
? position
: { x: position.x + 12 * (side === 'input' ? -1 : 1), y: position.y }
}),
customize: {
node(context: any) {
if (nodeView === "execution") return TaskStepNodeComponent;