This example demonstrates how to set up custom event triggers to handle drag operations.
To add a custom trigger, you need to create a function that accepts a parameter of type FTriggerEvent and returns a boolean.
Below is an example of a trigger for zooming that requires holding the Ctrl key:
Next, you need to set this function to the appropriate attribute, as shown in the example below:
In this example, three custom triggers are defined:
fWheelTrigger: Zooming is activated by the mouse wheel, but only when the Ctrl key is held.
fNodeMoveTrigger: Dragging is activated by the mouse, but only when the Shift key is held.
fCreateConnectionTrigger: Creating a connection between nodes is only possible when the F key is held.
But you can define custom triggers for any event that the flow supports:
fZoom: fWheelTrigger, fDblClickTrigger;
fDraggable: fReassignConnectionTrigger, fCreateConnectionTrigger, fNodeResizeTrigger, fNodeMoveTrigger, fCanvasMoveTrigger, fExternalItemTrigger, fMultiSelectTrigger;
f-selection-area: fTrigger;
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/custom-event-triggers/custom-event-triggers.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/custom-event-triggers/custom-event-triggers.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/advanced/custom-event-triggers/custom-event-triggers.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss