Reference

Types

Actions

Actions allow a resource to execute an event when selected. The different types of actions are described below.

GoTo Document

Open another Lucid document.

{
    "type": "gotoDocument",
    "documentId": "110808fd-4553-4316-bccf-4f25ff59a532",
    "pageId": "page1",
    "newWindow": true
}

GoTo Page

Switch to a different page on the current document.

{
    "type": "gotoPage",
    "pageId": "page1"
}

Hide Layer

Hide one or more layers on the current document.

{
    "type": "hideLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

Show Layer

Show one or more layers on the current document.

{
    "type": "showLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

Toggle Layer

Toggle between hidden or shown for one or more layers on the current document.

{
    "type": "toggleLayer",
    "layers": [
        "layer1",
        "layer2"
    ]
}

URL

Open a URL in the current window or a new window.

{
    "type": "url",
    "url": "https://www.example.com",
    "newWindow": true
}

Bounding Box

The defined container on the canvas for an object.

{
    "x": 5,
    "y": 3,
    "w": 10,
    "h": 15,
    "rotation": 180
}

Data

Provide data to your document that can be referenced within pages and shapes.

Custom Data

Set of key-value pairs embedded within a shape.

{
    "key": "KeyOne",
    "value": "TestOne"
}

Custom Page Data

Set of key-value pairs embedded within a page.

{
    "key": "KeyOne",
    "value": "TestOne",
    "global": true
}

Linked Data

Set of references to data provided in an external datasouce, usually a CSV file included with the provided .lucid standard import file.

{
    "collectionId": "CollectionOne",
    "key": "9"
}

Position

Position represents a location on the canvas. As x increases, the position moves to the right on the document canvas. As y increases, the position moves down the canvas.

Absolute Position

An exact location on the canvas.

{
    "x": 5.0,
    "y": 3.5
}

Relative Position

A position relative to the length or width of another line or shape. Expressed as a decimal percentage from 0 to 1. A value of 0 represents the start of the shape or line, with 1 representing the end. A value of 0.5 would be the middle. For a block, 0,0 represents the top-left corner and 1,1 represents the bottom-right.

{
    "x": 0.25,
    "y": 0.75
}

Style

The combined background and border style of a shape.

{
    "fill": {
      "type": "color",
      "color": "#ffffff"
    },
    "stroke": {
      "color": "#6f2131",
      "width": 3,
      "style": "solid"
    },
    "rounding": 10
}

Fill

Defines a shape's background. Can be a color or image.

Color Fill

{
    "type": "color",
    "color": "#800080"
}

Fills the shape with a color.

Image Fill

Fills the shape with an image. The image can be provided either within the images directory of the provided .lucid file (see Images), or as a url to an external image.

{
    "type": "image",
    "ref": "image.png",
    "imageScale": "fit"
}

{
    "type": "image",
    "url": "https://www.example.com/images/logo.png",
    "imageScale": "stretch"
}

Image Scale Types

Stroke

Define the look of a line or border. May affect other aspects of certain shapes.

{
    "color": "#ffffff",
    "width": 10,
    "style": "solid"
}

Stroke Style

Defines the look of a drawn line. Affects the border and other aspects of certain shapes.

Value	Description	Image
solid	A solid line.
dashed	A dashed line.
dotted	A dotted line.

Text

Text to display on the shape or line. Formatting of the text can be by provided via raw HTML.

If a font size is not provided, all shapes will default to using auto-scaling font size.

{
    "text": "Shape title"
}

Text Style

Text can be formatted via provding an HTML Style string. Any HTML style attributes not listed will be ignored. Some shapes may have a different default for certain fields based on their typical usage.

{
    "text": "<p style=\"font-size: 5pt;text-align: left;color: green\">A paragraph with HTML formatting.</p>"
}

Text Markup

HTML markup can be provided in text to further format customize its behavior:

{
    "text": "<ol><li><b>bold</b></li><li><a href=\"https://www.example.com\">visit example.com</a></li></ol>"
}