<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<Shapes
    xmlns="http://www.evolus.vn/Namespace/Pencil"
    xmlns:cc="http://web.resource.org/cc/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:p="http://www.evolus.vn/Namespace/Pencil"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    author="Evolus Pencil Team"
    description="Flowchart drawing stencils"
    displayName="Flowchart"
    id="Evolus.Flowchart"
    url="http://www.evolus.vn/pencil/shapes/common/flowchart">
    <Properties>
        <PropertyGroup name="Background">
            <Property displayName="Background" name="fillColor" type="Color">#BDDFFFFF</Property>
        </PropertyGroup>
        <PropertyGroup name="Border">
            <Property displayName="Border Color" name="strokeColor" type="Color">#666666ff</Property>
            <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">2|</Property>
        </PropertyGroup>
        <PropertyGroup name="Text">
            <Property displayName="Default font" name="defaultTextFont" type="Font">Helvetica|normal|normal|12px</Property>
            <Property displayName="defaultextcolor" name="defaultTextColor" type="Color">#000000ff</Property>
        </PropertyGroup>
    </Properties>

    <Script>
        <![CDATA[
            collection.VIA_LENGTH = 15;

            collection.buildSnappingGuides = function (shape) {
                var box = shape.getProperty("box");
                return [
                    new SnappingData("Top", 0, "Top", false, shape.id).makeLocal(true),
                    new SnappingData("HCenter", box.h / 2, "HCenter", false, shape.id).makeLocal(true),
                    new SnappingData("Bottom", box.h, "Bottom", false, shape.id).makeLocal(true),
                    new SnappingData("Left", 0, "Left", true, shape.id).makeLocal(true),
                    new SnappingData("VCenter", box.w / 2, "VCenter", true, shape.id).makeLocal(true),
                    new SnappingData("Right", box.w, "Right", true, shape.id).makeLocal(true)
                    ]
            };
            
            collection.buildConnectorOutletsWith = function (box, overridingOutlets) {
                var definedOutlets = [];
                var outlets = [];
                if (overridingOutlets) {
                    for (var i in overridingOutlets) {
                        var outlet = overridingOutlets[i];
                        definedOutlets.push(outlet.id);
                        if (outlet.classes) outlets.push(outlet);
                    }
                }
                
                var systemOutlets = [
                    new Outlet("top-left", "FCInput", 0, 0),
                    new Outlet("top-center", "FCInput", box.w / 2, 0),
                    new Outlet("top-right", "FCInput", box.w, 0),
                    new Outlet("middle-left", "FCInput", 0, box.h / 2),
                    new Outlet("middle-center", "FCInput", box.w / 2, box.h / 2),
                    new Outlet("middle-right", "FCInput", box.w, box.h / 2),
                    new Outlet("bottom-left", "FCInput", 0, box.h),
                    new Outlet("bottom-center", "FCInput", box.w / 2, box.h),
                    new Outlet("bottom-right", "FCInput", box.w, box.h)
                ];
                
                for (var i in systemOutlets) {
                    var outlet = systemOutlets[i];
                    stencilDebug("checking: " + outlet.id);
                    if (definedOutlets.indexOf(outlet.id) >= 0) continue;
                    stencilDebug("\tadding: " + outlet.id);
                    
                    outlets.push(outlet);
                }
                
                return outlets;
            };

        ]]>
    </Script>
    <Shortcut displayName="Straight Connector" icon="Icons/straight-connector.png" to="Evolus.Common:arrow">
        <PropertyValue name="textFont"><E>$$defaultTextFont</E></PropertyValue>
        <PropertyValue name="textColor"><E>$$defaultTextColor</E></PropertyValue>
        <PropertyValue name="strokeColor"><E>$$strokeColor</E></PropertyValue>
        <PropertyValue name="strokeStyle"><E>$$strokeStyle</E></PropertyValue>
        <PropertyValue name="mode">straight</PropertyValue>
        <PropertyValue name="withStartArrow">false</PropertyValue>
        <PropertyValue name="withEndArrow">true</PropertyValue>
    </Shortcut>
    <Shortcut displayName="Multi-segment Connector" icon="Icons/multi-segment-connector.png" to="Evolus.Common:arrow">
        <PropertyValue name="textFont"><E>$$defaultTextFont</E></PropertyValue>
        <PropertyValue name="textColor"><E>$$defaultTextColor</E></PropertyValue>
        <PropertyValue name="strokeColor"><E>$$strokeColor</E></PropertyValue>
        <PropertyValue name="strokeStyle"><E>$$strokeStyle</E></PropertyValue>
        <PropertyValue name="mode">multi-straight</PropertyValue>
        <PropertyValue name="withStartArrow">false</PropertyValue>
        <PropertyValue name="withEndArrow">true</PropertyValue>
    </Shortcut>
    <Shortcut displayName="Curvy Connector" icon="Icons/curvy-connector.png" to="Evolus.Common:arrow">
        <PropertyValue name="textFont"><E>$$defaultTextFont</E></PropertyValue>
        <PropertyValue name="textColor"><E>$$defaultTextColor</E></PropertyValue>
        <PropertyValue name="strokeColor"><E>$$strokeColor</E></PropertyValue>
        <PropertyValue name="strokeStyle"><E>$$strokeStyle</E></PropertyValue>
        <PropertyValue name="mode">curvy</PropertyValue>
        <PropertyValue name="withStartArrow">false</PropertyValue>
        <PropertyValue name="withEndArrow">true</PropertyValue>
    </Shortcut>
    <Shape displayName="connectionPoint" icon="Icons/point.png" id="connectionPoint">
        <Properties>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">#00000033</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Fill>$fillColor</Fill>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var a = 5;
                    var b = 5;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin( - Math.PI / 4) + b),
                        new Outlet("top-left", "FCInput", a * Math.cos(0 - 3 * Math.PI / 4) + a, b * Math.sin(0 - 3 * Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", a * Math.cos(Math.PI / 4) + a, b * Math.sin(Math.PI / 4) + b),
                        new Outlet("bottom-left", "FCInput", a * Math.cos(3 * Math.PI / 4) + a, b * Math.sin(3 * Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <ellipse id="path" style="stroke-linejoin: round;" cx="5" cy="5" rx="5" ry="5" />
        </p:Content>
    </Shape>
    <Shape displayName="Process" icon="Icons/process.png" id="process">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <Bound>Bound.fromBox($box)</Bound>
            </For>
            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>new Alignment(1,1)</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <rect id="path" style="stroke-linejoin: round;" />
            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Alternate Process" icon="Icons/alternate-process.png" id="AlternateProcess">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <Bound>Bound.fromBox($box)</Bound>
                <Attr>
                    <Arg>"rx"</Arg>
                    <Arg>Math.min($box.w/8, $box.h/8)</Arg>
                </Attr>
                <Attr>
                    <Arg>"ry"</Arg>
                    <Arg>Math.min($box.w/8, $box.h/8)</Arg>
                </Attr>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var r = Math.min(box.w / 8, box.h / 8);
                    var d = r * 0.292893219;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", d, d),
                        new Outlet("top-right", "FCInput", box.w - d, d),
                        new Outlet("bottom-left", "FCInput", d, box.h - d),
                        new Outlet("bottom-right", "FCInput", box.w - d, box.h - d),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <rect id="path" style="stroke-linejoin: round;" />
            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Decision" icon="Icons/decision.png" id="Decision">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'path', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
            <PropertyGroup name="Option Texts">
                <Property displayName="Option Text 1" name="optionText1" type="PlainText"><![CDATA[Option]]></Property>
                <Property displayName="Option Text 2" name="optionText2" type="PlainText"><![CDATA[Yes]]></Property>
                <Property displayName="Option Text 3" name="optionText3" type="PlainText"><![CDATA[No]]></Property>
                <Property displayName="Option Text 4" name="optionText4" type="PlainText"><![CDATA[Option]]></Property>
                <Property displayName="Text Font" name="optionTextFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Font" name="optionTextColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M($box.w/2, 0), L($box.w, $box.h/2), L($box.w/2, $box.h), L(0, $box.h/2), z]
                </D>
            </For>

            <!-- -->
            <For ref="text1">
                <TextContent>$optionText1</TextContent>
                <Font>$optionTextFont</Font>
                <Fill>$optionTextColor</Fill>
                <BoxFit>
                    <Arg>new Bound($box.w / 2 + 4, -4, 1, 1)</Arg>
                    <Arg>new Alignment(0,2)</Arg>
                </BoxFit>
                <Visibility>$outputPin1.isConnected()</Visibility>
            </For>
            <For ref="bg1">
                <Bound>
                    //depends $optionText1 $optionTextFont $outputPin1
                    var size = F.textSize("text1");
                    size.w += 8;
                    size.h += 8;
                    
                    new Bound($box.w / 2, 0 - size.h, size.w, size.h);
                </Bound>
            </For>
            
            <For ref="text2">
                <TextContent>$optionText2</TextContent>
                <Font>$optionTextFont</Font>
                <Fill>$optionTextColor</Fill>
                <BoxFit>
                    <Arg>new Bound($box.w + 4, $box.h / 2 - 4, 1, 1)</Arg>
                    <Arg>new Alignment(0,2)</Arg>
                </BoxFit>
                <Visibility>$outputPin2.isConnected()</Visibility>
            </For>
            <For ref="bg2">
                <Bound>
                    //depends $optionText2 $optionTextFont $outputPin2
                    var size = F.textSize("text2");
                    size.w += 8;
                    size.h += 8;
                    
                    new Bound($box.w, $box.h / 2 - size.h, size.w, size.h);
                </Bound>
            </For>
            
            <For ref="text3">
                <TextContent>$optionText3</TextContent>
                <Font>$optionTextFont</Font>
                <Fill>$optionTextColor</Fill>
                <BoxFit>
                    <Arg>new Bound($box.w / 2 + 4, $box.h + 4, 1, 1)</Arg>
                    <Arg>new Alignment(0,0)</Arg>
                </BoxFit>
                <Visibility>$outputPin3.isConnected()</Visibility>
            </For>
            <For ref="bg3">
                <Bound>
                    //depends $optionText3 $optionTextFont $outputPin3
                    var size = F.textSize("text3");
                    size.w += 8;
                    size.h += 8;
                    
                    new Bound($box.w / 2, $box.h, size.w, size.h);
                </Bound>
            </For>
            
            <For ref="text4">
                <TextContent>$optionText4</TextContent>
                <Font>$optionTextFont</Font>
                <Fill>$optionTextColor</Fill>
                <BoxFit>
                    <Arg>new Bound(-4, $box.h / 2 - 4, 1, 1)</Arg>
                    <Arg>new Alignment(2,2)</Arg>
                </BoxFit>
                <Visibility>$outputPin4.isConnected()</Visibility>
            </For>
            <For ref="bg4">
                <Bound>
                    //depends $optionText4 $optionTextFont $outputPin4
                    var size = F.textSize("text4");
                    size.w += 8;
                    size.h += 8;
                    
                    new Bound(0 - size.w, $box.h / 2 - size.h, size.w, size.h);
                </Bound>
            </For>
            

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", null),
                        new Outlet("top-right", null),
                        new Outlet("bottom-left", null),
                        new Outlet("bottom-right", null),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />
            
            <text id="text1" />
            <text id="text2" />
            <text id="text3" />
            <text id="text4" />
            
            <rect id="bg1" style="fill: #FF0000; fill-opacity: 0; stroke: none;"/>
            <rect id="bg2" style="fill: #FF0000; fill-opacity: 0; stroke: none;"/>
            <rect id="bg3" style="fill: #FF0000; fill-opacity: 0; stroke: none;"/>
            <rect id="bg4" style="fill: #FF0000; fill-opacity: 0; stroke: none;"/>

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Terminator" icon="Icons/terminator.png" id="Terminator">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    var ay = $box.w / 3;
                    [M(ay/2, 0), L($box.w - ay/2, 0), C($box.w - ay/4, 0, $box.w, $box.h/4, $box.w, $box.h/2),
                    S($box.w - ay/4, $box.h, $box.w - ay/2, $box.h), L(ay/2, $box.h),
                    C(ay/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S(ay/4, 0, ay/2, 0)
                    ]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", d, 0),
                        new Outlet("top-right", "FCInput", box.w - d, 0),
                        new Outlet("bottom-left", "FCInput", d, box.h),
                        new Outlet("bottom-right", "FCInput", box.w - d, box.h),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Predefined Process" icon="Icons/predefined-process.png" id="PredefinedProcess">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), L(0, 0), M($box.w/8, 0), L($box.w/8, $box.h), M(7*$box.w/8, 0), L(7*$box.w/8, $box.h)]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Document" icon="Icons/document.png" id="Document">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L($box.w, 4*$box.h/5), C(3*$box.w/4, 4*$box.h/5, 3*$box.w/4, 4*$box.h/5, $box.w/2, 9*$box.h/10), S($box.w/4, $box.h, 0, 9*$box.h/10), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox({x: 0, y: 0, w: $box.w, h: 4 * $box.h / 5}, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("bottom-right", "FCInput", box.w, 4 * box.h / 5),
                        new Outlet("bottom-center", "FCInput", box.w / 2, 9 * box.h / 10),
                        new Outlet("bottom-left", "FCInput", 0, 9 * box.h / 10),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Multi Document" icon="Icons/multi-document.png" id="MultiDocument">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h/5), L(4*$box.w/5, $box.h/5), L(4*$box.w/5, 4*$box.h/5), C(3*$box.w/4, 4*$box.h/5, 3*$box.w/4, 4*$box.h/5, $box.w/2, 9*$box.h/10), S($box.w/4, $box.h, 0, 9*$box.h/10), L(0, $box.h/5),
                    M($box.w/10, $box.h/5), L($box.w/10, $box.h/10), L(9*$box.w/10, $box.h/10), L(9*$box.w/10, 7*$box.h/10), L(4*$box.w/5, 7*$box.h/10),
                    M($box.w/5, $box.h/10), L($box.w/5, 0), L($box.w, 0), L($box.w, 6*$box.h/10), L(9*$box.w/10, 6*$box.h/10)]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, $box.h / 5, 4 * $box.w / 5, 3 * $box.h / 5).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 10, box.h / 10),
                        new Outlet("bottom-right", "FCInput", 9 * box.w / 10, 7 * box.h / 10),
                        new Outlet("bottom-center", "FCInput", box.w / 2, 9 * box.h / 10),
                        new Outlet("bottom-left", "FCInput", 0, 9 * box.h / 10),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Manual Input" icon="Icons/manual-input.png" id="ManualInput">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h/5), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, $box.h / 5, $box.w, 4 * $box.h / 5).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", 0, box.h / 5),
                        new Outlet("top-center", "FCInput", box.w / 2, box.h / 10),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Preparation" icon="Icons/preparation.png" id="Preparation">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h/2), L($box.w/5, 0), L(4*$box.w/5, 0), L($box.w, $box.h/2), L(4*$box.w/5, $box.h), L($box.w/5, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 5, 0),
                        new Outlet("top-right", "FCInput", 4 * box.w / 5, 0),
                        new Outlet("bottom-right", "FCInput", 4 * box.w / 5, box.h),
                        new Outlet("bottom-left", "FCInput", box.w / 5, box.h),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Data" icon="Icons/data.png" id="Data">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M($box.w/5, 0), L($box.w, 0), L(4*$box.w/5, $box.h), L(0, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound($box.w / 5, 0, 3 * $box.w / 5, $box.h).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var d = box.w / 7;
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 5, 0),
                        new Outlet("middle-left", "FCInput", box.w / 10, box.h / 2),
                        new Outlet("bottom-right", "FCInput", 4 * box.w / 5, box.h),
                        new Outlet("middle-right", "FCInput", 9 * box.w / 10, box.h / 2),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Magnetic Disk" icon="Icons/magnetic-disk.png" id="MagneticDisk">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>

        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>
                    var ay = $box.h / 3;
                    [M(0, ay/2), L(0, $box.h - ay/2), C(0, $box.h - ay/4, $box.w/4, $box.h, $box.w/2, $box.h),
                    S($box.w, $box.h - ay/4, $box.w, $box.h - ay/2), L($box.w, ay/2),
                    C($box.w, 3*ay/4, 3*$box.w/4, ay, $box.w/2, ay), S(0, 3*ay/4, 0, ay/2),
                    C(0, ay/4, $box.w/4, 0, $box.w/2, 0), S($box.w, ay/4, $box.w, ay/2)
                    ]
                </D>
            </For>
            <For ref="fill">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <Fill>$fillColor</Fill>
                <D>
                    var ay = $box.h / 3;
                    [M(0, ay/2), L(0, $box.h - ay/2), C(0, $box.h - ay/4, $box.w/4, $box.h, $box.w/2, $box.h),
                    S($box.w, $box.h - ay/4, $box.w, $box.h - ay/2), L($box.w, ay/2),
                    C($box.w, ay/4, 3*$box.w/4, 0, $box.w/2, 0), S(0, ay/4, 0, ay/2), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, $box.h / 3, $box.w, 2 * $box.h / 3).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="fill" stroke="none" style="stroke-linejoin: round;" />
            <path fill="none" id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Direct Access Storage" icon="Icons/direct-access-storage.png" id="ms-directAccessStorage">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>
                    var ay = $box.w / 3;
                    [M($box.w - ay/2, $box.h), L(ay/2, $box.h), C(ay/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2),
                    S(ay/4, 0, ay/2, 0), L($box.w - ay/2, 0),
                    C($box.w - ay/4, 0, $box.w, $box.h/4, $box.w, $box.h/2), S($box.w - ay/4, $box.h, $box.w - ay/2, $box.h),
                    C($box.w - 3*ay/4, $box.h, $box.w - ay, 3*$box.h/4, $box.w - ay, $box.h/2), S($box.w - 3*ay/4, 0, $box.w - ay/2, 0)
                    ]
                </D>
            </For>
            <For ref="fill">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <Fill>$fillColor</Fill>
                <D>
                    var ay = $box.w / 3;
                    [M(ay/2, 0), L($box.w - ay/2, 0), C($box.w - ay/4, 0, $box.w, $box.h/4, $box.w, $box.h/2),
                    S($box.w - ay/4, $box.h, $box.w - ay/2, $box.h), L(ay/2, $box.h),
                    C(ay/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S(ay/4, 0, ay/2, 0)
                    ]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, 0, 2 * $box.w / 3, $box.h).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="fill" stroke="none" style="stroke-linejoin: round;" />
            <path fill="none" id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Sequential Access Storage" icon="Icons/sequential-access-storage.png" id="SequentialtAccessStorage">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #5 origin" name="outputPin5Origin" p:expressionX="$box.w" p:expressionY="$box.h * (3 + Math.sin(50 * Math.PI / 180)) / 4" type="Point">0,50</Property>
                <Property displayName="Outpin #5" name="outputPin5" p:connectTo="FCInput" p:unconnectedValue="$outputPin5Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    var a = 50 * Math.PI / 180;
                    var x = (Math.cos(a) + 1) * $box.w / 2;
                    var y = (Math.sin(a) + 1) * $box.h / 2;
                    
                    [M(x, y), A($box.w / 2, $box.h / 2, 1, 1, 0, $box.w/2, $box.h), L($box.w, $box.h),
                    L($box.w, y), L(x, y), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow5">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin5Origin, $outputPin5Origin.translate(collection.VIA_LENGTH, 0)], $outputPin5, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var angle = 50 * Math.PI / 180;
                    var y = box.h * (3 + Math.sin(angle)) / 4;
                    var a = box.w / 2;
                    var b = box.h / 2;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin( - Math.PI / 4) + b),
                        new Outlet("top-left", "FCInput", a * Math.cos(0 - 3 * Math.PI / 4) + a, b * Math.sin(0 - 3 * Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", box.w, y, "right"),
                        new Outlet("bottom-left", "FCInput", a * Math.cos(3 * Math.PI / 4) + a, b * Math.sin(3 * Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow5" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Internal Storage" icon="Icons/internal-storage.png" id="InternalStorage">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), L(0, 0), M($box.w/8, 0), L($box.w/8, $box.h), M(0, $box.h/8), L($box.w, $box.h/8)]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound($box.w / 8, $box.h / 8, 7 * $box.w / 8, 7 * $box.h / 8).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Punched Tape" icon="Icons/punched-tape.png" id="PunchedTape">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h/10), C(0, $box.h/5, $box.w/2, $box.h/5, $box.w/2, $box.h/10), S($box.w, 0, $box.w, $box.h/10),
                    L($box.w, 9*$box.h/10), C($box.w, 4*$box.h/5, $box.w/2, 4*$box.h/5, $box.w/2, 9*$box.h/10), S(0, $box.h, 0, 9*$box.h/10), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, $box.h / 5, $box.w, 3 * $box.h / 5).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", 0, box.h / 10),
                        new Outlet("top-left", "FCInput", box.w, box.h / 10),
                        new Outlet("bottom-right", "FCInput", 0, 9 * box.h / 10),
                        new Outlet("bottom-left", "FCInput", box.w, 9 * box.h / 10),
                        new Outlet("top-center", "FCInput", box.w / 2, box.h / 10),
                        new Outlet("bottom-center", "FCInput", box.w / 2, 9 * box.h / 10),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Manual Operation" icon="Icons/manual-operation.png" id="ManualOperation">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L(4*$box.w/5, $box.h), L($box.w/5, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("bottom-right", "FCInput", 4 * box.w / 5, box.h),
                        new Outlet("bottom-left", "FCInput", box.w / 5, box.h),
                        new Outlet("middle-left", "FCInput", box.w / 10, box.h / 2),
                        new Outlet("middle-right", "FCInput", 9 * box.w / 10, box.h / 2),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Display" icon="Icons/display.png" id="Display">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,80</Property>
                <Property displayName="textpadding" name="textPadding" p:disabled="$textAlign.h == 1 ampamp $textAlign.v == 1" p:lockY="true" p:maxX="$box.h / 2" p:minX="0" type="Handle">20,0</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Default font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="textcolor" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h / 2), L($box.w / 6, 0), L(5 * $box.w / 6, 0),
                    C(5 * $box.w / 6 + $box.w / 6 / 2, 0, $box.w, $box.h / 4, $box.w, $box.h / 2),
                    S(5 * $box.w / 6 + $box.w / 6 / 2, $box.h, 5 * $box.w / 6, $box.h),
                    L($box.w / 6, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 6, 0),
                        new Outlet("bottom-left", "FCInput", box.w / 6, box.h),
                        new Outlet("top-right", "FCInput", 6 * box.w / 7, 0),
                        new Outlet("bottom-right", "FCInput", 6 * box.w / 7, box.h),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>
    <Shape displayName="Delay" icon="Icons/delay.png" id="Delay">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w/2, 0), C(3*$box.w/4, 0, $box.w, $box.h/4, $box.w, $box.h/2),
                    S(3*$box.w/4, $box.h, $box.w/2, $box.h), L(0, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var a = box.w / 2;
                    var b = box.h / 2;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin(0 - Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", a * Math.cos(Math.PI / 4) + a, b * Math.sin(Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Stored Data" icon="Icons/stored-data.png" id="StoredData">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    var ay = $box.w / 3;
                    [M(ay/2, 0), L($box.w, 0), C($box.w - ay/4, 0, $box.w - ay / 2, $box.h/4, $box.w - ay / 2, $box.h/2),
                    S($box.w - ay/4, $box.h, $box.w, $box.h), L(ay/2, $box.h),
                    C(ay/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S(ay/4, 0, ay/2, 0)
                    ]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, 0, 5 * $box.w / 6, $box.h).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 7, 0),
                        new Outlet("bottom-left", "FCInput", box.w / 7, box.h),
                        new Outlet("middle-right", "FCInput", 5 * box.w / 6, box.h / 2),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Merge" icon="Icons/merge.png" id="Merge">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,35</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="3 * $box.w / 4" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="$box.w / 4" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L($box.w/2, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound($box.w / 6, 0, 2 * $box.w / 3, 2 * $box.h / 3).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getConnectorOutlets">
                <Impl>
                    <![CDATA[
                        var box = this.getProperty("box");
                        return this.def.collection.buildConnectorOutletsWith(box, [
                            new Outlet("top-left", "FCInput", 0, 0, "top"),
                            new Outlet("top-right", "FCInput", box.w, 0, "top"),
                            new Outlet("middle-left", "FCInput", box.w / 4, box.h / 2),
                            new Outlet("middle-right", "FCInput", 3 * box.w / 4, box.h / 2),
                        ]);
                    ]]>
                </Impl>
            </Action>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />
            <path id="outArrow" style="stroke-linejoin: round; fill: none;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Extract" icon="Icons/extract.png" id="Extract">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,35</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="3 * $box.w / 4" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="$box.w / 4" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #5 origin" name="outputPin5Origin" p:expressionX="0" p:expressionY="$box.h" type="Point">0,50</Property>
                <Property displayName="Outpin #5" name="outputPin5" p:connectTo="FCInput" p:unconnectedValue="$outputPin5Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #6 origin" name="outputPin6Origin" p:expressionX="$box.w" p:expressionY="$box.h" type="Point">0,50</Property>
                <Property displayName="Outpin #6" name="outputPin6" p:connectTo="FCInput" p:unconnectedValue="$outputPin6Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M($box.w/2, 0), L($box.w, $box.h), L(0, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound($box.w / 6, $box.h / 3, 2 * $box.w / 3, 2 * $box.h / 3).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow5">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin5Origin, $outputPin5Origin.translate(0, collection.VIA_LENGTH)], $outputPin5, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow6">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin6Origin, $outputPin6Origin.translate(0, collection.VIA_LENGTH)], $outputPin6, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getConnectorOutlets">
                <Impl>
                    <![CDATA[
                        var box = this.getProperty("box");
                        return this.def.collection.buildConnectorOutletsWith(box, [
                            new Outlet("top-left", null),
                            new Outlet("top-right", null),
                            new Outlet("middle-left", "FCInput", box.w / 4, box.h / 2),
                            new Outlet("middle-right", "FCInput", 3 * box.w / 4, box.h / 2),
                        ]);
                    ]]>
                </Impl>
            </Action>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow5" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow6" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Sort" icon="Icons/sort.png" id="Sort">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M($box.w/2, 0), L($box.w, $box.h/2), L($box.w/2, $box.h), L(0, $box.h/2), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound($box.w / 5, $box.h / 5, 3 * $box.w / 5, 3 * $box.h / 5).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                    <![CDATA[
                        var box = this.getProperty("box");
                        return this.def.collection.buildConnectorOutletsWith(box, [
                            new Outlet("top-left", "FCInput", box.w / 4, box.h / 4),
                            new Outlet("top-right", "FCInput", 3 * box.w / 4, box.h / 4),
                            new Outlet("bottom-left", "FCInput", box.w / 4, 3 * box.h / 4),
                            new Outlet("bottom-right", "FCInput", 3 * box.w / 4, 3 * box.h / 4),
                        ]);
                    ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Collate" icon="Icons/collate.png" id="Collate">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,70</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="3 * $box.w / 4" p:expressionY="3 * $box.h / 4" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="$box.w / 4" p:expressionY="3 * $box.h / 4" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, $box.h), L(0, $box.h), L($box.w, 0), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                    <![CDATA[
                        var box = this.getProperty("box");
                        return this.def.collection.buildConnectorOutletsWith(box, [
                            new Outlet("middle-left", null),
                            new Outlet("middle-right", null),
                            new Outlet("extra1", "FCInput", box.w / 4, box.h / 4),
                            new Outlet("extra2", "FCInput", 3 * box.w / 4, box.h / 4),
                            new Outlet("extra3", "FCInput", box.w / 4, 3 * box.h / 4),
                            new Outlet("extra4", "FCInput", 3 * box.w / 4, 3 * box.h / 4),
                        ]);
                    ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Connector" icon="Icons/connector.png" id="Connector">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,40</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <Attr>
                    <Arg>"cx"</Arg>
                    <Arg>$box.w/2</Arg>
                </Attr>
                <Attr>
                    <Arg>"cy"</Arg>
                    <Arg>$box.h/2</Arg>
                </Attr>
                <Attr>
                    <Arg>"rx"</Arg>
                    <Arg>$box.w/2</Arg>
                </Attr>
                <Attr>
                    <Arg>"ry"</Arg>
                    <Arg>$box.h/2</Arg>
                </Attr>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var angle = 50 * Math.PI / 180;
                    var y = box.h * (3 + Math.sin(angle)) / 4;
                    var a = box.w / 2;
                    var b = box.h / 2;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin( - Math.PI / 4) + b),
                        new Outlet("top-left", "FCInput", a * Math.cos(0 - 3 * Math.PI / 4) + a, b * Math.sin(0 - 3 * Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", a * Math.cos(Math.PI / 4) + a, b * Math.sin(Math.PI / 4) + b),
                        new Outlet("bottom-left", "FCInput", a * Math.cos(3 * Math.PI / 4) + a, b * Math.sin(3 * Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <ellipse id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Or" icon="Icons/or.png" id="Or">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,40</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>
                    [
                    M($box.w/2, 0),
                    C(3*$box.w/4, 0, $box.w, $box.h/4, $box.w, $box.h/2), S(3*$box.w/4, $box.h, $box.w/2, $box.h),
                    C($box.w/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S($box.w/4, 0, $box.w/2, 0),
                    L($box.w/2, $box.h), M(0, $box.h/2), L($box.w, $box.h/2)
                    ]
                </D>
            </For>
            <For ref="fill">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <Fill>$fillColor</Fill>
                <D>
                    [
                    M($box.w/2, 0),
                    C(3*$box.w/4, 0, $box.w, $box.h/4, $box.w, $box.h/2), S(3*$box.w/4, $box.h, $box.w/2, $box.h),
                    C($box.w/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S($box.w/4, 0, $box.w/2, 0), z
                    ]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var angle = 50 * Math.PI / 180;
                    var y = box.h * (3 + Math.sin(angle)) / 4;
                    var a = box.w / 2;
                    var b = box.h / 2;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin( - Math.PI / 4) + b),
                        new Outlet("top-left", "FCInput", a * Math.cos(0 - 3 * Math.PI / 4) + a, b * Math.sin(0 - 3 * Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", a * Math.cos(Math.PI / 4) + a, b * Math.sin(Math.PI / 4) + b),
                        new Outlet("bottom-left", "FCInput", a * Math.cos(3 * Math.PI / 4) + a, b * Math.sin(3 * Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="fill" stroke="none" style="stroke-linejoin: round;" />
            <path fill="none" id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Summing Junction" icon="Icons/summing-junction.png" id="SummingJunction">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,40</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="clipPath">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>
                    [
                    M($box.w/2, 0 - $strokeStyle.w / 2),
                    C(3*$box.w/4 + $strokeStyle.w / 3, 0 - $strokeStyle.w / 2, $box.w + $strokeStyle.w / 2, $box.h/4,
                    $box.w + $strokeStyle.w / 2, $box.h/2), S(3*$box.w/4 + $strokeStyle.w / 3, $box.h + $strokeStyle.w / 2,
                    $box.w/2, $box.h + $strokeStyle.w / 2),
                    C($box.w/4 - $strokeStyle.w / 3, $box.h + $strokeStyle.w / 2, 0 - $strokeStyle.w / 2, 3*$box.h/4,
                    0 - $strokeStyle.w / 2, $box.h/2),
                    S($box.w/4 - $strokeStyle.w / 3, 0 - $strokeStyle.w / 2, $box.w/2, 0 - $strokeStyle.w / 2)
                    ]
                </D>
            </For>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>
                    [
                    M($box.w/2, 0),
                    C(3*$box.w/4, 0, $box.w, $box.h/4, $box.w, $box.h/2), S(3*$box.w/4, $box.h, $box.w/2, $box.h),
                    C($box.w/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S($box.w/4, 0, $box.w/2, 0),
                    M(0, 0), L($box.w, $box.h), M($box.w, 0), L(0, $box.h)]
                </D>
            </For>
            <For ref="fill">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <Fill>$fillColor</Fill>
                <D>
                    [
                    M($box.w/2, 0),
                    C(3*$box.w/4, 0, $box.w, $box.h/4, $box.w, $box.h/2), S(3*$box.w/4, $box.h, $box.w/2, $box.h),
                    C($box.w/4, $box.h, 0, 3*$box.h/4, 0, $box.h/2), S($box.w/4, 0, $box.w/2, 0), z
                    ]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    var angle = 50 * Math.PI / 180;
                    var y = box.h * (3 + Math.sin(angle)) / 4;
                    var a = box.w / 2;
                    var b = box.h / 2;
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-right", "FCInput", a * Math.cos(0 - Math.PI / 4) + a, b * Math.sin( - Math.PI / 4) + b),
                        new Outlet("top-left", "FCInput", a * Math.cos(0 - 3 * Math.PI / 4) + a, b * Math.sin(0 - 3 * Math.PI / 4) + b),
                        new Outlet("bottom-right", "FCInput", a * Math.cos(Math.PI / 4) + a, b * Math.sin(Math.PI / 4) + b),
                        new Outlet("bottom-left", "FCInput", a * Math.cos(3 * Math.PI / 4) + a, b * Math.sin(3 * Math.PI / 4) + b),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <clipPath id="MyClip">
                <path clip-rule="evenodd" id="clipPath" />
            </clipPath>
            <path id="fill" stroke="none" style="stroke-linejoin: round;" />
            <path clip-path="url(#MyClip)" fill="none" id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Card" icon="Icons/card.png" id="Card">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">100,100</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, $box.h / 5), L($box.w/5, 0), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <DomContent>F.buildTextWrapDomContent(F._target, $textContent.value, $box.w - $textFont.getPixelHeight(), $textAlign)</DomContent>
                <BoxFit>
                    <Arg>Bound.fromBox($box, $textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </BoxFit>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("top-left", "FCInput", box.w / 10, box.h / 10),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

    <Shape displayName="Off-page Connector" icon="Icons/off-page-connector.png" id="OffpageConnector">
        <Properties>
            <PropertyGroup>
                <Property displayName="Box" name="box" type="Dimension">40,40</Property>
                <Property displayName="Outpin #1 origin" name="outputPin1Origin" p:expressionX="$box.w / 2" p:expressionY="0" type="Point">50,0</Property>
                <Property displayName="Outpin #1" name="outputPin1" p:connectTo="FCInput" p:unconnectedValue="$outputPin1Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #2 origin" name="outputPin2Origin" p:expressionX="$box.w" p:expressionY="$box.h / 2" type="Point">100,50</Property>
                <Property displayName="Outpin #2" name="outputPin2" p:connectTo="FCInput" p:unconnectedValue="$outputPin2Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #3 origin" name="outputPin3Origin" p:expressionX="$box.w / 2" p:expressionY="$box.h" type="Point">50,100</Property>
                <Property displayName="Outpin #3" name="outputPin3" p:connectTo="FCInput" p:unconnectedValue="$outputPin3Origin" type="Handle">0,0</Property>
                <Property displayName="Outpin #4 origin" name="outputPin4Origin" p:expressionX="0" p:expressionY="$box.h / 2" type="Point">0,50</Property>
                <Property displayName="Outpin #4" name="outputPin4" p:connectTo="FCInput" p:unconnectedValue="$outputPin4Origin" type="Handle">0,0</Property>
            </PropertyGroup>
            <PropertyGroup name="Background">
                <Property displayName="Background" name="fillColor" type="Color">
                    <E>$$fillColor</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Border">
                <Property displayName="Border Color" name="strokeColor" type="Color">
                    <E>$$strokeColor</E>
                </Property>
                <Property displayName="Border Style" name="strokeStyle" type="StrokeStyle">
                    <E>$$strokeStyle</E>
                </Property>
            </PropertyGroup>
            <PropertyGroup name="Text">
                <Property displayName="Text Content" name="textContent" p:editInfo="({targetName: 'text', bound: Bound.fromBox($box), font: $textFont, align: $textAlign, multi: true})" type="PlainText" />
                <Property displayName="Text Font" name="textFont" type="Font">
                    <E>$$defaultTextFont</E>
                </Property>
                <Property displayName="Text Color" name="textColor" type="Color">
                    <E>$$defaultTextColor</E>
                </Property>
                <Property displayName="Text Align" name="textAlign" type="Alignment">1,1</Property>
            </PropertyGroup>
        </Properties>
        <Behaviors>
            <For ref="path">
                <Transform>[translate(($strokeStyle.w % 2) / 2, ($strokeStyle.w % 2) / 2)]</Transform>
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <Fill>$fillColor</Fill>
                <D>
                    [M(0, 0), L($box.w, 0), L($box.w, 4*$box.h/5), L($box.w/2, $box.h), L(0, 4*$box.h/5), z]
                </D>
            </For>

            <For ref="text">
                <Font>$textFont</Font>
                <Color>$textColor</Color>
                <PlainTextContent>
                    <Arg>$textContent</Arg>
                    <Arg>new Bound(0, 0, $box.w, 4 * $box.h / 5).narrowed($textFont.getPixelHeight() / 2)</Arg>
                    <Arg>$textAlign</Arg>
                </PlainTextContent>
            </For>
            <For ref="outputArrrow1">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin1Origin, $outputPin1Origin.translate(0, 0 - collection.VIA_LENGTH)], $outputPin1, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow2">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin2Origin, $outputPin2Origin.translate(0 + collection.VIA_LENGTH, 0)], $outputPin2, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow3">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin3Origin, $outputPin3Origin.translate(0, 0 + collection.VIA_LENGTH)], $outputPin3, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
            <For ref="outputArrrow4">
                <StrokeColor>$strokeColor</StrokeColor>
                <StrokeStyle>$strokeStyle</StrokeStyle>
                <D>arrowTo([$outputPin4Origin, $outputPin4Origin.translate(0 - collection.VIA_LENGTH, 0)], $outputPin4, $strokeStyle.w, collection.VIA_LENGTH, false, false, true, false, 0)</D>
            </For>
        </Behaviors>
        <Actions>
            <Action id="getSnappingGuide">
                <Impl>return this.def.collection.buildSnappingGuides(this);</Impl>
            </Action>
            <Action id="getConnectorOutlets">
                <Impl>
                <![CDATA[
                    var box = this.getProperty("box");
                    
                    return this.def.collection.buildConnectorOutletsWith(box, [
                        new Outlet("bottom-left", null),
                        new Outlet("bottom-right", null),
                    ]);
                ]]>
                </Impl>
            </Action>
        </Actions>
        <p:Content xmlns="http://www.w3.org/2000/svg">
            <path id="path" style="stroke-linejoin: round;" />

            <text id="text" text-anchor="start" xml:space="preserve" />
            <path id="outputArrrow1" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow2" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow3" style="stroke-linejoin: round; fill: none;" />
            <path id="outputArrrow4" style="stroke-linejoin: round; fill: none;" />
        </p:Content>
    </Shape>

</Shapes>
