<Shapes xmlns="http://www.evolus.vn/Namespace/Pencil"
                xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                xmlns:svg="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"

                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:cc="http://web.resource.org/cc/"
                xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

                id="Evolus.Annotation"
                displayName="Annotation"
                description="Shapes for annotations"
                author="Duong Thanh An (an.duong@evolus.vn)"
                url="http://www.evolus.vn/Projects/FOSS/Pencil/Collections/Annotation.html"
                system="true"
                >
    <Properties>
        <PropertyGroup name="Text">
            <Property name="defaultTextFont" type="Font" displayName="Default Font">"Liberation Sans",Arial,sans-serif|normal|normal|13px</Property>
            <Property name="defaultTextColor" type="Color" displayName="Default Text Color">#ffffffff</Property>
        </PropertyGroup>
        <PropertyGroup name="Border">
            <Property name="strokeColor" type="Color" displayName="Default Border Color">#1B3280ff</Property>
            <Property name="strokeStyle" type="StrokeStyle" displayName="Default Border Style">2|</Property>
        </PropertyGroup>
        <PropertyGroup name="Background">
            <Property name="fillColor" type="Color" displayName="Default Background Color">#4388CCff</Property>
        </PropertyGroup>
    </Properties>
        <Shape id="Balloon" displayName="Balloon" icon="Icons/balloon.png">
            <Properties>
                <PropertyGroup>
                    <Property name="box" type="Dimension">200,80</Property>
                    <Property name="withBlur" type="Bool" displayName="With Shadow">false</Property>
                </PropertyGroup>
                <PropertyGroup name="Handles">
                    <Property name="radius" displayName="Corner Radius" type="Handle" p:lockY="true" p:minX="0" p:maxX="Math.min($box.w, $box.h) / 2">8,0</Property>

                    <Property name="leftStart" displayName="Start Point" type="Handle"
                        p:lockX="true" p:minY="$radius.x + 2" p:maxY="$leftEnd.y - 5"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'left'">0,12</Property>
                    <Property name="leftEnd" displayName="End Point" type="Handle"
                        p:lockX="true" p:minY="$leftStart.y + 5" p:maxY="$box.h - $radius.x - 2"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'left'">0,33</Property>

                    <Property name="rightStart" displayName="Start Point" type="Handle"
                        p:lockX="true" p:expressionX="$box.w" p:minY="$radius.x + 2" p:maxY="$rightEnd.y - 5"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'right'">0,12</Property>
                    <Property name="rightEnd" displayName="End Point" type="Handle"
                        p:lockX="true" p:expressionX="$box.w" p:minY="$rightStart.y + 5" p:maxY="$box.h - $radius.x - 2"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'right'">0,33</Property>

                    <Property name="topStart" displayName="Start Point" type="Handle"
                        p:lockY="true" p:minX="$radius.x + 2" p:maxX="$topEnd.x - 5"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'top'">12,0</Property>
                    <Property name="topEnd" displayName="End Point" type="Handle"
                        p:lockY="true" p:minX="$topStart.x + 5" p:maxX="$box.w - $radius.x - 2"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'top'">33,0</Property>

                    <Property name="bottomStart" displayName="Start Point" type="Handle"
                        p:lockY="true" p:expressionY="$box.h" p:minX="$radius.x + 2" p:maxX="$bottomEnd.x - 5"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'bottom'">12,0</Property>
                    <Property name="bottomEnd" displayName="End Point" type="Handle"
                        p:lockY="true" p:expressionY="$box.h" p:minX="$bottomStart.x + 5" p:maxX="$box.w - $radius.x - 2"
                        p:disabled="F.getRelativeLocation($pin, $box) != 'bottom'">33,0</Property>

                    <Property name="pin" displayName="Balloon Pin" type="Handle"  >-12,23</Property>
                </PropertyGroup>
                <PropertyGroup name="Background">
                    <Property name="fillColor" displayName="Color" type="Color"><E>$$fillColor</E></Property>
                </PropertyGroup>
                <PropertyGroup name="Border">
                    <Property name="strokeColor" displayName="Color" type="Color"><E>$$strokeColor</E></Property>
                    <Property name="strokeStyle" displayName="Style" type="StrokeStyle"><E>$$strokeStyle</E></Property>
                </PropertyGroup>
                <PropertyGroup name="Text">
                    <Property name="textContent" displayName="Text Content" type="RichText"><![CDATA[Annotation]]></Property>
                    <Property name="textFont" displayName="Default Font" type="Font"><E>$$defaultTextFont</E></Property>
                    <Property name="textColor" displayName="Default Text Color" type="Color"><E>$$defaultTextColor</E></Property>
                </PropertyGroup>
            </Properties>
            <Behaviors>
                <For ref="rect">
                      <D>
                            var type = F.getRelativeLocation($pin, $box);

                            var x = {"left": [M($radius.x, 0), L($box.w - $radius.x, 0), C($box.w - $radius.x / 3, 0, $box.w, $radius.x / 3, $box.w, $radius.x),
                                            L($box.w, $box.h - $radius.x), C($box.w, $box.h - $radius.x / 3, $box.w - $radius.x / 3, $box.h, $box.w - $radius.x, $box.h),
                                            L($radius.x, $box.h), C($radius.x / 3, $box.h, 0, $box.h - $radius.x / 3, 0, $box.h - $radius.x),
                                            L(0, $leftEnd.y), L($pin.x, $pin.y), L(0, $leftStart.y), L(0, $radius.x),
                                            C(0, $radius.x / 3, $radius.x / 3, 0, $radius.x, 0)],

                                     "top": [M($radius.x, 0),L($topStart.x,0), L($pin.x, $pin.y), L($topEnd.x,0),
                                            L($box.w - $radius.x, 0), C($box.w - $radius.x / 3, 0, $box.w, $radius.x / 3, $box.w, $radius.x),
                                            L($box.w, $box.h - $radius.x), C($box.w, $box.h - $radius.x / 3, $box.w - $radius.x / 3, $box.h, $box.w - $radius.x, $box.h),
                                            L($radius.x, $box.h), C($radius.x / 3, $box.h, 0, $box.h - $radius.x / 3, 0, $box.h - $radius.x),
                                            L(0, $radius.x),C(0, $radius.x / 3, $radius.x / 3, 0, $radius.x, 0)],
                                     "right": [M($radius.x, 0), L($box.w - $radius.x, 0), C($box.w - $radius.x / 3, 0, $box.w, $radius.x / 3, $box.w, $radius.x),
                                            L($box.w, $rightStart.y),L($pin.x, $pin.y), L($box.w, $rightEnd.y), L($box.w, $box.h - $radius.x),  C($box.w, $box.h - $radius.x / 3, $box.w - $radius.x / 3, $box.h, $box.w - $radius.x, $box.h),
                                            L($radius.x, $box.h), C($radius.x / 3, $box.h, 0, $box.h - $radius.x / 3, 0, $box.h - $radius.x),
                                            L(0, $radius.x),C(0, $radius.x / 3, $radius.x / 3, 0, $radius.x, 0)] ,
                                     "bottom": [M($radius.x, 0), L($box.w - $radius.x, 0), C($box.w - $radius.x / 3, 0, $box.w, $radius.x / 3, $box.w, $radius.x),
                                            L($box.w, $box.h - $radius.x), C($box.w, $box.h - $radius.x / 3, $box.w - $radius.x / 3, $box.h, $box.w - $radius.x, $box.h),
                                            L($bottomEnd.x, $box.h), L($pin.x, $pin.y),L($bottomStart.x, $box.h),
                                            L($radius.x, $box.h), C($radius.x / 3, $box.h, 0, $box.h - $radius.x / 3, 0, $box.h - $radius.x),
                                            L(0, $radius.x),C(0, $radius.x / 3, $radius.x / 3, 0, $radius.x, 0)]
                                      }[type];
                        x</D>
                    <Fill>$fillColor</Fill>
                    <StrokeColor>$strokeColor</StrokeColor>
                    <StrokeStyle>$strokeStyle</StrokeStyle>
                </For>
                <For ref="text">
                    <TextContent>$textContent</TextContent>
                    <Font>$textFont</Font>
                    <Fill>$textColor</Fill>
                    <Color>$textColor</Color>
                    <Bound>Bound.fromBox($box, $radius.x)</Bound>
                </For>
                <For ref="bgCopy">
                    <ApplyFilter>$withBlur</ApplyFilter>
                    <Visibility>$withBlur</Visibility>
                </For>
            </Behaviors>
            <p:Content    xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                                    xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <filter
                       id="imageShading"
                       height="1.2558399"
                       y="-0.12792"
                       width="1.06396"
                       x="-0.03198">
                        <feGaussianBlur stdDeviation="1.3325" in="SourceAlpha"/>
                    </filter>
                    <g id="container">
                        <path
                                transform="translate(0.5 0.5)"
                                style="stroke-width: 1px;"
                                id="rect" />
                    </g>
                </defs>
                <use xlink:href="#container" id="bgCopy" transform="translate(1, 1)" p:filter="url(#imageShading)" style=" opacity:0.6;" p:heavy="true"/>
                <use xlink:href="#container"/>
                <foreignObject x="0" y="0" width="200" height="150" id="text">
                        <div xmlns="http://www.w3.org/1999/xhtml">
                                Balloon message
                        </div>
                </foreignObject>
            </p:Content>
        </Shape>
        <Shape id="Bullet" displayName="Bullet" icon="Icons/bullet.png">
            <Properties>
                <PropertyGroup>
                    <Property name="box" type="Dimension" p:lockRatio="true">30,30</Property>
                    <Property name="withBlur" type="Bool" displayName="With Shadow">false</Property>
                </PropertyGroup>
                <PropertyGroup name="Background">
                    <Property name="fillColor" displayName="Color" type="Color"><E>$$fillColor</E></Property>
                </PropertyGroup>
                <PropertyGroup name="Border">
                    <Property name="strokeColor" displayName="Color" type="Color"><E>$$strokeColor</E></Property>
                    <Property name="strokeStyle" displayName="Style" type="StrokeStyle"><E>$$strokeStyle</E></Property>
                </PropertyGroup>
                <PropertyGroup name="Text">
                    <Property name="textContent" displayName="Text Content" type="RichText"><![CDATA[1]]></Property>
                    <Property name="textFont" displayName="Default Font" type="Font"><E>$$defaultTextFont</E></Property>
                    <Property name="textColor" displayName="Color" type="Color"><E>$$defaultTextColor</E></Property>
                </PropertyGroup>
            </Properties>
            <Behaviors>
                <For ref="bgCopy">
                    <ApplyFilter>$withBlur</ApplyFilter>
                    <Visibility>$withBlur</Visibility>
                </For>
                <For ref="ellipse">
                    <EllipseFit>$box</EllipseFit>
                    <Fill>$fillColor</Fill>
                    <StrokeColor>$strokeColor</StrokeColor>
                    <StrokeStyle>$strokeStyle</StrokeStyle>
                </For>
                <For ref="text">
                    <TextContent>$textContent</TextContent>
                    <Fill>$textColor</Fill>
                    <Color>$textColor</Color>
                    <Font>$textFont</Font>
                    <BoxFit>
                        <Arg>Bound.fromBox($box, 0)</Arg>
                        <Arg>new Alignment(1, 1)</Arg>
                    </BoxFit>
                </For>
            </Behaviors>
            <Actions>
                <Action id="makeSquare" displayName="Make Square">
                    <Impl>
                    <![CDATA[
                        var box = this.getProperty("box");
                        var size = Math.max(box.w, box.h);
                        this.setProperty("box", new Dimension(size, size));
                    ]]>
                    </Impl>
                </Action>
            </Actions>
            <p:Content    xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                                    xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <filter
                       id="imageShading"
                       height="1.2558399"
                       y="-0.12792"
                       width="1.2558399"
                       x="-0.12792">
                        <feGaussianBlur stdDeviation="1.3325" in="SourceAlpha"/>
                    </filter>
                    <g id="container">
                        <ellipse id="ellipse"/>
                    </g>
                </defs>
                <use xlink:href="#container" id="bgCopy" transform="translate(1, 1)" p:filter="url(#imageShading)" style=" opacity:0.6;" p:heavy="true"/>
                <use xlink:href="#container"/>
                <foreignObject x="0" y="0" width="200" height="150" id="text">
                        <div xmlns="http://www.w3.org/1999/xhtml">1</div>
                </foreignObject>
            </p:Content>
        </Shape>
        <Shape id="HollowBox" displayName="Hollow Box" icon="Icons/hollowbox.png">
            <Properties>
                <PropertyGroup>
                    <Property name="box" type="Dimension">96,96</Property>
                    <Property name="a" displayName="Inner Top" type="Handle" p:minX="0" p:maxX="$b.x" p:minY="0" p:maxY="$b.y">20,20</Property>
                    <Property name="b" displayName="Inner Bottom" type="Handle" p:minX="$a.x" p:maxX="$box.w" p:minY="$a.y" p:maxY="$box.h">70,70</Property>
                </PropertyGroup>
                <PropertyGroup name="Background">
                    <Property name="fillColor" displayName="Background Color" type="Color">#00000055</Property>
                </PropertyGroup>
            </Properties>
            <Behaviors>
                <For ref="path">
                    <D>[M(0, 0), L($box.w, 0), L($box.w, $box.h), L(0, $box.h), L(0, 0), z,
                        M($a.x, $a.y), L($a.x, $b.y), L($b.x, $b.y), L($b.x, $a.y), L($a.x, $a.y), z]</D>
                    <Fill>$fillColor</Fill>
                </For>
            </Behaviors>
            <p:Content    xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                                        xmlns="http://www.w3.org/2000/svg">
                <path style="stroke: none;" id="path"/>
            </p:Content>
        </Shape>
        <Shape id="SimpleArrow" displayName="Simple Arrow" icon="Icons/arrow.png">
            <Properties>
                <PropertyGroup>
                    <Property name="a" displayName="Inner Top" type="Handle" p:lockY="true" p:maxX="$b.x - 10">0,0</Property>
                    <Property name="b" displayName="Inner Top" type="Handle" p:minX="$a.x + 10" p:disabled="$style.value == 'straight'">90,0</Property>
                    <Property name="c" displayName="Inner Top" type="Handle">120,-20</Property>
                    <Property name="style" displayName="Style" type="Enum" p:enumValues="['hard|Hard Corner', 'smooth|Smooth Corner', 'straight|Straight']">hard</Property>
                </PropertyGroup>
                <PropertyGroup name="Line">
                    <Property name="strokeColor" displayName="Line Color" type="Color">#336699ff</Property>
                    <Property name="strokeStyle" displayName="Line Style" type="StrokeStyle">25|</Property>
                </PropertyGroup>
            </Properties>
            <Behaviors>
                <For ref="path">
                    <Transform>[translate(0, ($strokeStyle.w % 2) / 2)]</Transform>
                    <StrokeColor>$strokeColor</StrokeColor>
                    <StrokeStyle>$strokeStyle</StrokeStyle>
                    <D>var x = {"smooth": [M($a.x, $a.y), S($b.x, $b.y, $c.x, $c.y)],
                        "hard": [M($a.x, $a.y), L($b.x, $b.y), L($c.x, $c.y)],
                        "straight": [M($a.x, $a.y), L($c.x, $c.y)]}[$style.value];
                        x</D>
                </For>
                <For ref="markerPath">
                    <Fill>$strokeColor</Fill>
                </For>
            </Behaviors>
            <p:Content    xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                                        xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <marker id="marker"
                      viewBox="0 0 10 10" refX="0.01" refY="3"
                      markerUnits="strokeWidth"
                      markerWidth="4" markerHeight="3"
                      orient="auto">
                      <path d="M 0 0 L 2 3 L 0 6 z" id="markerPath" />
                    </marker>
                </defs>
                <path id="path" marker-end="url(#marker)" fill="none" style="stroke-linejoin: round;"/>
            </p:Content>
        </Shape>
</Shapes>
