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

Put a resource's handle bar on its right edge 

Its links now leave to the right from the bar's middle, as a step's
outputs do, and come into the step's handle from the left.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucio Lelii 2026-09-29 09:36:20 +02:00
parent 0afe66d372
commit 2bf0f40804
3 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/shared/custom-connection/custom-connection.ts
View File

@ -248,16 +248,14 @@ export class CustomConnectionComponent {
}
/**
* A resource's handle is on its top edge, so its link leaves vertically, towards the step, and
* comes into the step's handle from the left - not the side-to-side curve of a connection
* between steps.
* A resource's handle is a bar on its right edge, and a link leaves it from the middle: out to
* the right and into the step's handle from the left.
*/
private resourceLinkPath(): string {
const { x: sx, y: sy } = this.start;
const { x: ex, y: ey } = this.end;
const rise = (ey <= sy ? -1 : 1) * Math.max(50, Math.abs(ey - sy) / 2);
const across = Math.max(50, Math.abs(ex - sx) / 2);
return `M ${sx} ${sy} C ${sx} ${sy + rise}, ${ex - across} ${ey}, ${ex} ${ey}`;
const across = Math.max(60, Math.abs(ex - sx) / 2);
return `M ${sx} ${sy} C ${sx + across} ${sy}, ${ex - across} ${ey}, ${ex} ${ey}`;
}
private get loopTop(): number {

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

@ -15,7 +15,7 @@
.resource-card {
position: relative;
width: 250px;
padding: 16px 12px 12px;
padding: 12px 16px 12px 12px;
border: 1.5px solid #99f6e4;
border-left: 5px solid #0d9488;
border-radius: 14px;
@ -217,15 +217,15 @@
}
/*
* 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.
* The handle is a bar along the whole right edge, so it can be grabbed anywhere along it, and its
* links leave from the bar's middle towards the steps that use the resource.
*/
.resource-card__link {
position: absolute;
top: -5px;
left: 18px;
right: 18px;
height: 9px;
top: 14px;
bottom: 14px;
right: -5px;
width: 9px;
}
.resource-card__socket {
@ -236,8 +236,8 @@
/* 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;
width: 9px !important;
height: 100% !important;
border-radius: 999px !important;
}

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

@ -124,8 +124,8 @@ 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.
// Rete pushes an output's anchor 12px past its socket, for a small handle on a node's side.
// A resource's handle is a bar along its right edge: its links start from the bar itself.
socketPositionWatcher: getDOMSocketPosition<HFSchemes, any>({
offset: (position, _nodeId, side, key) => key === FLOW_RESOURCE_PORT_KEY
? position