Dynamic DOM ContentΒΆ

In some special cases, a shape’s content is composed of a dynamic element structure. Pencil provides the DomContent behavior so that the DOM content of an element can be changed dynamically. The value provided to this behavior is a DOM node that will be inserted as a child of the target element. Together with providing this behavior, Pencil also provides utility functions for quickly building DOM nodes and fragments from the spec, defined as JavaScript objects.

<Shape id="list" displayName="List" icon="Icons/list.png">
            <Property name="box" displayName="Box" type="Dimension">191,235</Property>
        <PropertyGroup name="Item Text">
            <Property name="contentText" displayName="Text Content" type="PlainText" p:editInfo="({targetName: 'content', bound: Bound.fromBox($box, 0, 52), font: $itemFont, align: new Alignment(0, 0), multi: true})">
                MenuItem MenuItem MenuItem
            <Property name="itemFont" displayName="Text Font" type="Font">
            <Property name="itemColor" displayName="Text Color" type="Color">#000000ff</Property>
        <For ref="content">
            <Bound>Bound.fromBox($box, 0, 54)</Bound>
                var items = $contentText.value.split(/[\r\n]+/);
                var specs = [];
                for (var i = 0; i &lt; items.length; i ++) {
                    var css = new CSS();

                    var title = items[i];

                    if(title.match(/\S/) != null) {
                        var lineHeight = (i + 1) * (30 + $itemFont.getPixelHeight());

                        var css = new CSS();
                        css.set("fill", $itemColor.toRGBString());

                            _name: "text",
                            _uri: "http://www.w3.org/2000/svg",
                            x: 10,
                            y: lineHeight,
                            _text : title,
                            style: css
                                _name: "path",
                                _uri: "http://www.w3.org/2000/svg",
                                d: "m 10,"+ (lineHeight+10) + " "+($box.w - 20)+",0" ,
                                style : "stroke-width:1;stroke:#c9c9c9"
    <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
        <g id="content" />

In this example, the text content entered by the user is supposed to be split across multiple lines. The code inside the behavior splits the text content and creates a text element for each line, containing that line and a path element as the footer of the text.

The utility method Dom.newDOMFragment(specs); is used here to create DOM fragments from the object specs.