Pencil Data Types

Pencil supports various data types for shape properties. Some of them are equivalent to data types in popular programming languages while the others are for convenience.

This document lists all supported data types in Pencil, each with both JavaScript syntax and XML syntax for use in stencil coding. Most of the supported data types have at least one way end-user can modify the value.

Alignment

Data structure for storing two-dimension alignment.

new Alignment(h, v);

<Property name="test" displayName="Test" type="Alignment">h,v</Property>

• h (number): horizotal alignment. 0: left, 1: center, 2: right
• v (number): vertical alignment. 0: top, 1: middle, 2: bottom

Members:

var align = Alignment.fromString("10,10");

var s = align.toString(); // return "10,10"

Editor supports:

Properties of type Alignment can be edited in the shape property page.

Bool

Data type for storing boolean values.

new Bool(value);

<Property name="sample" displayName="Sample" type="Bool">value</Property>

Members:

var b = Bool.fromString("true");

Editor supports:

Properties of type Bool can be edited in the context menu of the shape using a checkbox item.

Dimension

Data structure for storing object size, a pair of width and height values

new Dimension(width, height);

<Property name="box" displayName="Box" type="Dimension"
          p:lockRatio="true">width,height</Property>

Members:

var box = Dimension.fromString("10,10");

var s = box.toString(); // return "10,10"

var box1 = box.narrowed(5);
var box2 = box.narrowed(5, 10);

Editor supports:

A Dimension property with the special name of box can be edited using the on-canvas geometry editor.

And also via the geometry toolbar located on the top of the Pencil application window.

Bound

Data structure for storing a bounding box which is a composite of a location and a size.

new Bound(left, top, width, height);

var testBound = new Bound(10, 10, 10, 10);

var b = Bound.fromBox(box, x, y);

//equals to:
var b = new Bound(x, y, box.w - 2 * x, box.h - 2 * y)

var bound = Bound.fromString("10, 10, 10, 10");

var bound2 = bound.narrowed(5, 8);

Color

Data structure for storing object color with alpha blending

var color = new Color(); // create an opaque black color

<Property name="color" displayName="My Color" type="Color">#000000ff</Property>

Examples:
Color.fromString("#ffffffff"); // solid white
Color.fromString("#ffffff"); // also solid white
Color.fromString("rgb(255, 0, 0)"); // solid red

// semi-transparent blue:
Color.fromString("rgba(0, 0, 255, 0.5)");

Color.fromString("transparent"); //transparent

//semi-transparent black:
Color.fromString("#00000033");

var color = Color.fromString("#FFFFFFFF");
color.toRGBString(); // rgb(255, 255, 255)

var color = Color.fromString("#FFFF0077");
color.toRGBAString(); // rgba(255, 255, 0, 0.5)

color.shaded(0.1); // returns a 10% darker color

color.hollowed(0.1);
    // returns a 10% more transparent color

Editor supports:

Properties of type Color can be edited in the property dialog with a color chooser that supports both simple and advanced mode.

Color properties with the following special names can be also edited with the Color toolbar: textColor, fillColor and strokeColor.

CSS

Provides a data object for styling SVG elements and HTML elements.

var css = new CSS();

css.set("font-size", "12px");

var css = new CSS();
css.set("font-size", "12px");
css.set("font-weight", "bold");

var s = css.toString();
// returns "font-size: 12px; font-weight: bold;"

css.contains("font-size");

CSS.fromString("font-size: 12px; font-weight: bold");

var css = new CSS();
css.set("color", "#FF0000");

css.importRaw("font-size: 12px; font-weight: bold");

Enum

Data structure to store option with the possibility to specify available options via XML metadata.

<Property name="type" displayName="Type" type="Enum"
                      p:enumValues="['one|One', 'two|Two']">two</Property>

    ... p:enumValues="['linux|GNU Linux', 'win32|Win 32']"

Editor supports:

Properties of type Enum can be edited in the context menu of the shape.

Font

Data structure for manipulating font info.

var font = new Font();

<Property name="textFont" displayName="Text Font"
          type="Font">{families}|{weight}|{style}|{size}[|{decor}]</Property>

var f = Font.fromString("Arial|bold|italic|12px");

var f = Font.fromString("Arial|bold|italic|12px");

var height = f.getPixelHeight(); // 12

var f = Font.fromString("Arial|bold|italic|12px");

var css = f.toCSSFontString();
// "Arial bold italic 12px"

Editor supports:

Properties of type Font can be edited in the property dialog.

Font property with the special name textFont is editable with the Font style toolbar.

Handle

Provides a special data object representing a point in 2D coordinate and can be modified on the drawing canvas by user operations.

<Property name="a" displayName="Start Point" type="Handle">x,y</Property>

Example:
    .... p:lockX="$fixedWidth.value == true"

Example:
    .... p:lockY="$fixedHeight.value == true"

Example:
    .... p:minX="15"

Example:
    .... p:maxX="$box.w / 2"

Example:
    .... p:minY="$box.h / 3 + 10"

Example:
    .... p:minY="$box.h - 10"

Editor supports:

Each property of type Handle is shown as a yellow bullet when the shape is focused. The property can be edited by moving that bullet.

ImageData

Data structure that store a binary bitmap image.

new ImageData(w, h, dataUrl);

<Property name="image" displayName="Image"
          type="ImageData"><![CDATA[w,h,url]]></Property>

var image = new ImageData(10, 15, "data:image/png;base64,iVBORw0KQmCC...");

var i = ImageData.fromString("57,57, data:image/png;base64,iVBORw0KQmCC");

PlainText

Data object that represents a piece of plain texts.

var text = new PlainText("Pugnabant totidemque vos nam");

<Property name="text" displayName="Text"
          type="PlainText"><![CDATA[Pugnabant totidemque vos nam]]></Property>

Editor supports:

PlainText properties can be edited right on the canvas using a simple text input.

RichText

Data structure for storing rich-text content in HTML format.

var text = new RichText("A <b>rich</b> text string");

<Property name="text" displayName="Text"
          type="RichText"><![CDATA[A <b>rich</b> text string]]></Property>

Editor supports:

RichText properties can be edited right on the canvas using a rich-text input.

StrokeStyle

Data structure storing stroke styling information.

new StrokeStyle(width, dasharray);

The dasharray value is specified as a JavaScript array containing lengths of dashes and spaces. More information can be found in the SVG Specification for Stroke dash array.

<Property name="stroke" type="StrokeStyle"
          displayName="Border Style">w|dasharray</Property>

When the dasharray is omitted, the stroke is considered solid.

var stroke = new StrokeStyle("1,[4,2,1,2]");
// construct a 'dash-space-dot-space' stroke at 1px width

<Property name="stroke" type="StrokeStyle"
          displayName="Border Style">1|[4,2,1,2]</Property>

var ss = StrokeStyle.fromString("1|[1,1]");

var stroke2 = stroke.condensed(-0.1);

Editor supports:

StrokeStyle properties can be edited in the property page of the shape.

ShadowStyle

Data structure that stores shadow style information.

var shadow = new ShadowStyle(dx, dy, size);

<Property name="shadow" type="ShadowStyle"
          displayName="Box Shadow">dx|dy|size</Property>

var style = ShadowStyle.fromString("3|3|10");

Editor supports:

ShadowStyle properties can be edited in the property page of the shape.