@botmock/editor

Botmock Editor

Build

cd botmock-editor

npm i

npm run build

Import

import BotmockEditor from "botmock-editor";

Props

data - Flow data for the editor in the following format:

{
    blocks: [
        {
            id, // Block's UUID
            x, // X position of the block
            y, // Y position of the block
            content // ForwardRef containing the content of the block
        }
    ],
    connectors: [
        {
            id, // Connector's UUID
            from, // ID of the block the connector is coming from
            to, // ID of the block the connector is going to
            fromSurface, // Surface the connector is coming from ('top', 'bottom', 'left', or 'right')
            toSurface, // Surface the connecotr is going to ('top', 'bottom', 'left', or 'right')
            fromOffset, // Connector's offset on the fromSurface (float from 0 to 1)
            toOffset, // Connector's offset on the toSurface (float from 0 to 1)
            allowOutgoingConnectors, // Allow connectors to be created from the block (defaults to `true`)
            allowIncomingConnectors, // Allow connectors to go into the block (defaults to `true`)
            label: {
                text, // The text of the label
                segment, // Which segment of the connector the label is on (optional)
                offset // Offset of the label on the connector's segment (float from 0 to 1) (optional)
            }
        }
    ]
}

orthogonalConnectors - Boolean for whether or not othrogonal connectors should be used. Defaults to false (curved connectors).

disableVirtualization- Disables virtualization. Blocks and connectors will no longer be hidden when they are out of view, hindering preformance.

Methods

addBlock(block:Block, callback:Function) - Adds a new block to the editor

addConnector(connector:Connector) - Adds a new connector to the editor

setLabelText(connectorID:String, text:String) - Sets the label text of a specified connector

zoomToFit() - Pans and zooms so that all the blocks are in view

centerBlock(blockID:String) - Pans so that the given block is centered in view

removeBlock(blockID:String) - Removes a block and all attached connectors

removeConnector(connectorID:String) - Removes a connector

setZoom(zoomLevel:Number) - Sets the zoom level (with 1 being no zoom)

setPan(panX:Number, panY:Numer) - Sets the pan

setTransform(transform:Transform) - Sets the transform (pan and zoom)

getTransform():Transform - Gets the transform (pan and zoom)

refreshBlockDimensions(blockID:String) - Force the editor to recache the block's height/width (for connector and arrow positions)

deselectBlocks() - Deselect all selected blocks

deselectBlock(blockID:String) - Deselect a selected block

pageToPosition(pageX:Number, pageY:Number):Point - Turns a pageX and pageY to a point in the editor

Events

onDragStarted(oldPos:Point, blockID:String, originalEvent:MouseEvent) - Fired when user first starts dragging a block

onDragEnd(oldPos:Point, newPos:Point, blockID:String, originalEvent:MouseEvent) - Fired when the user stops dragging a block

onBlockSelect(blockID:String) - Fired when the user selects a block

onBlockDeselect(blockID:String) - Fired when the user deselects a block

onConnectorCreated(connector:Connector) - Fired when the user created a new connector

onConnectorMoved(connector:Connector, oldFromBlockID:String, oldToBlockID:String) - Fired when the user changes which block a connector is connected to or is coming from

onLabelClick(connector:Connector) - Fired when a connector's label is clicked

onConnectorDropped(connector:Connector, endPosition:Array<number>) - Fired when a connector is dropped on an empty surface.

onConnectorDeleted(connector:Connector) - Fired when a connector is deleted by the user

onZoom(zoomLevel:Number) - Fired when the zoom level is changed (with 1 being the default)

onPointAdded(connectorID:String, points:Array<Point>) - Fired when a midpoint is added to a connector

onPointsUpdated(Array<{ connectorID:String, points:Array<Point> }>) - Fired when midpoints have been updated

onPointsDeleted(Array<{ connectorID:String, points:Array<Point> }>) - Fired when midpoints are deleted

onLabelRepositioned(connectorID:String, label:Label) - Fired when a label has been repositioned on a connector