Available Commands 📐

jujubaSVG already provides some commands. This page we will demonstrate how to use them in Kotlin and Dart (Flutter).

Support added - Android v1.3.0 / Flutter v1.1.0

Custom command

If you need to specify a custom command that is not provided by jujubaSVG, you can use CustomCommand.

// KOTLIN
jujubaCommander.execute(
    Command.CustomCommand(
        jsCode = "yourJSCode"
    )
)

// DART
commander.execute(
    CustomCommand(
        jsCode: 'yourJSCode'
    ),
);

Update background color

Update the background color of a node. For example:

// KOTLIN
jujubaCommander.execute(
    Command.UpdateBackgroundColor(
        id = nodeInfo.id,
        color = getRainbowColor()
    )
)

// DART
commander.execute(
    UpdateBackgroundColor(
        id: nodeInfo.id, 
        colorHex: getRainbowColorInHex()
    ),
);

Update stroke color

Update the stroke color of a node.

// KOTLIN
jujubaCommander.execute(
    Command.UpdateStrokeColor(
        id = nodeInfo.id,
        color = getRainbowColor()
    )
)

// DART
commander.execute(
    UpdateStrokeColor(
        id: nodeInfo.id, 
        colorHex: getRainbowColorInHex(),
    ),
);

Update stroke width

Update the stroke width of a node.

// KOTLIN
jujubaCommander.execute(
    Command.UpdateStrokeWidth(
        id = nodeInfo.id,
        widthInPx = 20
    )
)

// DART
commander.execute(
    UpdateStrokeWidth(
        id: nodeInfo.id, 
        widthInPx: 20,
    ),
);

Remove a node

Remove a node.

// KOTLIN
jujubaCommander.execute(
    Command.RemoveNode(
        id = nodeInfo.id
    )
)

// DART
commander.execute(
    RemoveNode(
        id: nodeInfo.id,
    )
);

Update root background color

Update the root background color.

// KOTLIN
jujubaCommander.execute(
    Command.UpdateRootBackgroundColor(
        color = Color.White
    )
)

// DART
commander.execute(
    UpdateRootBackgroundColor(
        colorInHex: '#FFFFFF',
    ),
);

Add Rounded Image

Add a rounded image into the same parent of the elementId.

// KOTLIN
jujubaCommander.execute(
    AddRoundedImage(
        elementId = nodeInfo.id,
        imageId = "imageId",
        imageUrl = "https://i.imgur.com/LQIsf.jpeg",
        widthInPx = 56,
        heightInPx = 56,
        coordinate = NodeCoordinate(0f, 120f)
    )
)

// DART
commander.execute(
    AddRoundedImage(
        elementId: nodeInfo.id,
        imageId: 'imageId',
        imageUrl: 'https://i.imgur.com/LQIsf.jpeg',
        widthInPx: 56,
        heightInPx: 56,
        coordinate: NodeCoordinate(
            x: 0.0,
            y: 120.0,
        ),
    ),
);