Skip to Content

Design Studio SDK – Line with Arrow

This is my first SDK component made (also my very first blog too), inspired fromDesign Studio 1.2 SDK – Creating a custom line component by David Richardson. It’s a very basic component, without any data binding.

At first, I tried to make the code easier to read, but I end up almost recreating it from the scratch.

First up, the line property

Property Name Type Value/Description
lineColor color

Determines the color of the line.

Can accept color name or in HTML RGB (#000000).

lineSize int

Determines the thickness of the line.

Size of the arrow is fixed at 3 * lineSize.

lineType String

Determines the type of the line (total of 14 type).

Can accept input (1 – 14) only.

arrowPos String

Determines the position of the arrow.

Can accept input (None, Start, End, Both) only.

Below is the example of the possible line types:

Line Type Example (Arrow: None, Start, End, Both)

Lastly, the methods within contribution.ztl

class extends Component {
    /* Returns the current color of the line. */
    String getLineColor() {*
        return this.lineColor;
    /* Sets the current color of the line. */
    void setLineColor(/* New Line Color */ String newLineColor) {*
        this.lineColor = newLineColor;
    /* Returns the current type of the line. */
    String getLineType() {*
        return this.lineType;
    /* Sets the current type of the line. */
    void setLineType(/* New Line Type */ String newLineType) {*
        this.lineType = newLineType;
    /* Returns the current size of the line. */
    String getLineSize() {*
        return this.lineSize;
    /* Sets the current size of the line. */
    void setLineSize(/* New Line Size */ int newLineSize) {*
        this.lineSize = newLineSize;
    /* Returns the current arrow position of the line. */
    String getArrowPos() {*
        return this.arrowPos;
    /* Sets the current arrow position of the line. */
    void setArrowPos(/* New Arrow Position */ String newArrowPos) {*
        this.arrowPos = newArrowPos;

I thought of making diagonal lines, but it would be kinda hard to do since I need to make sure that the line and the arrows wouldn’t get out from the canvas, which will make it not drawn properly. Maybe I will work on it on the future.

You can get the component from here. Please bear with it since I’m not familiar with Github at the moment. 🙂

Any feedback is appreciated.

You must be Logged on to comment or reply to a post.