Foblex/f-flow v19.2.0

v19.2.0 - Snap Target Events, Precise Drops, and Self-Reporting Diagnostics

on GitHub

v19.2 is a community-driven release: every change in it traces back to an issue or a discussion. The connection workflow gets a snap-target event and more precise drop resolution, the viewport gets a fit-to-screen scale cap, and two new dev-mode diagnostics make silent app-side misconfigurations report themselves.

There are no breaking changes in this release; existing integrations keep working unchanged.

Snap target events

<f-snap-connection> now emits fSnapTargetChange while a connection is being created:

<f-snap-connection
  [fSnapThreshold]="50"
  (fSnapTargetChange)="onSnapTarget($event)"
></f-snap-connection>

The event carries { sourceId, targetId }: one event when a connector enters the snap threshold or the snap switches to another connector, and one with targetId: undefined when the snap is released or the gesture ends. It is one event per change - not one per pointer move - so it is safe to drive styling from it directly: highlight both endpoints while the snap preview is visible, clean up on the undefined event. Requested in #180; docs: f-snap-connection.

fitToScreen with a scale cap

fitToScreen accepts an optional maxScale argument:

// padding, animated, emitCanvasChange, maxScale
this.fCanvas.fitToScreen(PointExtensions.initialize(), true, true, 1);

With maxScale: 1 a graph smaller than the viewport is centered at its natural size instead of being magnified to fill it; larger graphs scale down to fit as before. Requested in #147.

Node-level drops attach to the closest connector

Dropping a connection on a node body (fConnectOnNode) used to attach to the node's first registered connector. It now attaches to the connector closest to the drop point, and connectors whose visible dot is drawn with ::before/::after (so the element box itself is zero-size) resolve to the aimed-at connector as well. Reported in #326.

Reassign prefers the selected connection

When several connections share a connector, their reassign handles coincide - and the grab went by registration order, ignoring which connection was selected. The selected connection now wins the grab, so dragging the handle reassigns the connection you actually selected. Reported in #328.

Diagnostics: FF1010 and FF1011

Two new dev-mode warnings — one-shot per cause, stripped from production builds; see the errors guide:

• FF1010 - connector element has no size. The visible dot is drawn with ::before/::after while the connector element itself is 0×0. Hit-testing and connection geometry use the element's box, so drops land past the connector and fall back to node-level connect. Fix: give the connector element its own width/height.
• FF1011 - node is rendered away from its model position. App CSS on the node host (margin, left/top, an extra transform) moved the visuals while fNodePosition stayed put, so model-driven features - the minimap, fitToScreen, auto-layout - disagree with what the canvas shows. Fix: fold the offset into fNodePosition. Grew out of #331.

Both thresholds are configurable, 0 switches a check off:

provideFFlow({
  diagnostics: {
    minConnectorSize: 4, // FF1010, px; default 1
    maxNodePositionDrift: 5, // FF1011, on-screen px; default 2
  },
});

Thanks

@iocat, @dja-dsd, @dmarov, @ShyamaMenon and @bstaley - the reports, reproductions and API suggestions behind this release came from you. If Foblex Flow is useful to you, a ⭐ on the repo helps a lot 🙌

Full changelog: CHANGELOG.md