Canvas In development
The Canvas component enables you to build a fully interactive workspace with elements that support both inputs and outputs.The UI::ioCanvas component provides an infinite workspace where users can drag, position, and connect various elements seamlessly.
You can add any BOUI component to the Canvas. To make components draggable and interactive, wrap them using the UI::ioCanvasElement method. Components added directly through the ioCanvas->content() method without using canvasElement will be static.
Use ioCanvasElement when you want to enable dragging and interactivity.
Canvas with different components
As mentioned earlier, any BOUI component can be made interactive by wrapping it with the ioCanvasElement method.
Fixed content
You can add fixed overlay content to the workspace by passing components directly to the UI::ioCanvas->content() method without using ioCanvasElement
Overlay content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Static content can be added in any order, it will not affect the behavior or layout of the interactive elements on the canvas.
Initial connections
Canvas elements can be pre-linked, allowing certain connections to be established automatically when the page loads.
To create a link between elements, use the linkTo method. It accepts three arguments:
- Target element: the canvas element you want to connect to.
- Source output name: the name of the output connector on the current element.
- Target input name the name of the input connector on the target element.
API
Either ioCanvas and ioCanvasElement components extend fromHtmlElement so they have all its methods available.API PHP
IOCanvas
IOCanvasElement
API JS
Events
You can listen to events on the Canvas component using the bouion() method.