Skip to Content
Author's profile photo Donnie Burhan

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Lastly, the methods within contribution.ztl


class org.scn.community.basics.line.Line 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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu

      Nice try 🙂

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Donnie,

      do you want to join us in the SCN SDK Repository? This component would be a nice extension in the repo and will allow others to use it directly.

      Karol

      Author's profile photo Donnie Burhan
      Donnie Burhan
      Blog Post Author

      Hi Karol,

      Yes, I'd love to.

      Is there anything specific I should do other than clone the code from the SCN SDK repository?

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Donnie,

      you need to follow the description in

      SDK Development Community Git Repository (sdkpackage)

      Try it out, ping me on private chat for next steps and repository access.

      Karol