<?xml version="1.0"?>
<root
  xmlns="http://panopainter.com/layout.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>

  <layout id="tpl-panel-stroke">
    <node width="350" margin="0 0 10 0">
      <border id="title" height="30" pad="5 0 0 0" color=".4" align="center" justify="center" dir="row">
        <node align="center" pad="0 0 0 30" justify="center" height="100%" width="1" grow="1">
          <text text="Brush Settings"/>
        </node>
        <button id="button-unfold-all" width="30" height="20" text="+" margin="0 5 0 0"/>
      </border>
      <border color=".4" pad="5" dir="col" width="100%" grow="1">

        <!-- PREVIEW -->

        <button-custom id="preset-button" color=".2" pad="5" margin="0 0 0 0">
          <stroke-preview id="canvas" width="100%" height="100"/>
        </button-custom>

        <scroll id="scroller" scroll-color=".3" margin="5 5 5 10" color=".4" height="1" grow="1">

          <!-- PRESET AND SHAPE -->

          <node dir="row">
            <node width="36%" dir="col">
              <!--<node height="20" justify="center" margin="5 0 5 0"><text text="Shade"/></node>-->
              <node height="40" justify="center" margin="5 0 0 0">
                <text text="Shape"/>
              </node>
              <node height="20" justify="center" margin="5 0 0 0">
                <text text="Aspect"/>
              </node>
            </node>
            <node dir="col" align="center" grow="1" width="1" flood-events="1">
              <!--<node height="20" pad="1" width="100%" margin="5 0 5 0"><slider-h id="tip-shade" value="1"/></node>-->
              <node dir="row" margin="5 0 0 0" width="100%">
                <button-custom id="tip-change" width="40" height="40" dir="row" pad="4">
                  <image id="tip-change-thumb" width="32" height="100%"/>
                </button-custom>
                <node width="1" grow="1" height="40">
                  <node align="center" dir="row">
                    <checkbox id="tip-invert" width="20" height="19"/>
                    <text text="invert value"/>
                  </node>
                  <node align="center" dir="row">
                    <checkbox id="tip-flipx" width="20" height="19"/>
                    <text text="flipX"/>
                    <checkbox id="tip-flipy" width="20" height="19" margin="0 0 0 5"/>
                    <text text="flipY"/>
                  </node>
                </node>
              </node>
              <node height="20" dir="row" pad="1" width="100%" margin="5 0 0 0">
                <slider-h id="tip-aspect" width="1" grow="1" value="0.5"/>
                <button-custom id="tip-aspect-reset" width="20" height="20" margin="0 0 0 5">
                  <icon icon="arrow_rotate_clockwise"/>
                </button-custom>
              </node>
            </node>
          </node>

          <!-- COLOR -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <node align="center" width="1" grow="1">
              <text text="Color"/>
            </node>
            <button id="button-unfold-color" width="30" height="18" text="+"/>
          </border>
          <node id="fold-color" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="30" justify="center" margin="0 0 5 0">
                <text text="Blend"/>
              </node>
              <node height="20" justify="center" margin="0 0 20 0">
                <text text="Flow"/>
              </node>
              <node height="20" justify="center">
                <text text="Opacity"/>
              </node>
            </node>
            <node dir="col" align="center" grow="1" width="1">
              <!--controls-->
              <node height="30" pad="1" width="100%" dir="row" margin="0 0 5 0">
                <combobox id="blend-mode" text="Normal" width="100%" height="28" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
              </node>
              <node height="40" pad="1" width="100%" dir="col">
                <slider-h id="tip-flow" height="19" value=".5"/>
                <node align="center" dir="row">
                  <checkbox id="tip-flow-pressure" width="20" height="19"/>
                  <text text="flow pressure"/>
                </node>
              </node>
              <node height="40" pad="1" width="100%" dir="col">
                <slider-h id="tip-opacity" height="19" value="1"/>
                <node align="center" dir="row">
                  <checkbox id="tip-opacity-pressure" width="20" height="19"/>
                  <text text="opacity pressure"/>
                </node>
              </node>
            </node>
          </node>

          <!-- METRICS -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <node align="center" width="1" grow="1">
              <text text="Metrics"/>
            </node>
            <button id="button-unfold-metrics" width="30" height="18" text="+"/>
          </border>
          <node id="fold-metrics" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="20" justify="center" margin="0 0 20 0">
                <text text="Size"/>
              </node>
              <node height="20" justify="center">
                <text text="Spacing"/>
              </node>
              <node height="20" justify="center" margin="0 0 40 0">
                <text text="Angle"/>
              </node>
              <node height="20" justify="center">
                <text text="Smoothing"/>
              </node>
            </node>
            <node dir="col" align="center" grow="1" width="1">
              <!--controls-->
              <node height="40" pad="1" width="100%" dir="col">
                <slider-h id="tip-size" height="19" value=".25"/>
                <node align="center" dir="row">
                  <checkbox id="tip-size-pressure" width="20" height="19"/>
                  <text text="size pressure"/>
                </node>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-spacing" value=".25"/>
              </node>
              <node height="60" pad="1" width="100%" dir="col">
                <slider-h id="tip-angle" height="19"/>
                <node align="center" dir="row">
                  <checkbox id="tip-angle-init" width="20" height="19"/>
                  <text text="initial direction"/>
                </node>
                <node align="center" dir="row">
                  <checkbox id="tip-angle-follow" width="20" height="19"/>
                  <text text="follow direction"/>
                </node>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-angle-smooth" value="0"/>
              </node>
            </node>
          </node>

          <!-- PATTERN -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <checkbox id="pattern-enabled" width="20" height="20"/>
            <node align="center" width="1" grow="1">
              <text text="Pattern"/>
            </node>
            <button id="button-unfold-pattern" width="30" height="18" text="+"/>
          </border>
          <node id="fold-pattern" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="40" justify="center" margin="0 0 5 0">
                <text text="Pattern"/>
              </node>
              <node height="30" justify="center" margin="0 0 5 0">
                <text text="Blend"/>
              </node>
              <!--
            <node height="30" justify="center" margin="0 0 5 0">
              <text text="Projection"/>
            </node>
            -->
              <node height="20" justify="center">
                <text text="Apply"/>
              </node>
              <node height="20" justify="center">
                <text text="Offset"/>
              </node>
              <node height="20" justify="center">
                <text text="Depth"/>
              </node>
              <node height="20" justify="center">
                <text text="Scale"/>
              </node>
              <node height="20" justify="center">
                <text text="Brightness"/>
              </node>
              <node height="20" justify="center">
                <text text="Contrast"/>
              </node>
            </node>
            <node dir="col" grow="1" width="1">
              <!--controls-->
              <node dir="row" margin="0 0 5 0">
                <button-custom id="pattern-change" width="40" height="40" dir="row" pad="4">
                  <image id="pattern-change-thumb" width="32" height="100%"/>
                </button-custom>
                <node width="1" grow="1" height="40">
                  <node align="center" dir="row">
                    <checkbox id="pattern-invert" width="20" height="19"/>
                    <text text="invert value"/>
                  </node>
                  <node align="center" dir="row">
                    <checkbox id="pattern-flipx" width="20" height="19"/>
                    <text text="flipX"/>
                    <checkbox id="pattern-flipy" width="20" height="19" margin="0 0 0 5"/>
                    <text text="flipY"/>
                  </node>
                </node>
              </node>
              <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
                <combobox id="pattern-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
              </node>
              <!--
            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
              <combobox id="pattern-proj-mode" width="100%" height="28" combo-list="Cube,Screen"/>
            </node>
            -->
              <node align="center" dir="row">
                <checkbox id="pattern-eachsample" height="20" width="20"/>
                <text text="each sample"/>
              </node>
              <node align="center" dir="row">
                <checkbox id="pattern-rand-offset" height="20" width="20"/>
                <text text="randomize"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="pattern-depth" value="1"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="pattern-scale" value=".25"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="pattern-brightness" value=".5"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="pattern-contrast" value=".5"/>
              </node>
            </node>
          </node>

          <!-- DUAL BRUSH -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <checkbox id="dual-enabled" width="20" height="20"/>
            <node align="center" width="1" grow="1">
              <text text="Dual Brush"/>
            </node>
            <button id="button-unfold-dualbrush" width="30" height="18" text="+"/>
          </border>
          <node id="fold-dualbrush" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="40" justify="center" margin="0 0 5 0">
                <text text="Shape"/>
              </node>
              <node height="30" justify="center" margin="0 0 5 0">
                <text text="Blend"/>
              </node>
              <node height="20" justify="center">
                <text text="Flip"/>
              </node>
              <node height="20" justify="center">
                <text text="Size"/>
              </node>
              <node height="20" justify="center">
                <text text="Flow"/>
              </node>
              <node height="20" justify="center">
                <text text="Opacity"/>
              </node>
              <node height="20" justify="center">
                <text text="Spacing"/>
              </node>
              <node height="20" justify="center" margin="0 0 20 0">
                <text text="Scatter"/>
              </node>
              <node height="20" justify="center">
                <text text="Rotate"/>
              </node>
            </node>
            <node dir="col" grow="1" width="1">
              <!--controls-->
              <node dir="row" margin="0 0 5 0">
                <button-custom id="dual-change" width="40" height="40" dir="row" pad="4">
                  <image id="dual-change-thumb" width="32" height="100%"/>
                </button-custom>
                <node width="1" grow="1" height="40">
                  <node align="center" dir="row">
                    <checkbox id="dual-invert" width="20" height="19"/>
                    <text text="invert value"/>
                  </node>
                  <node align="center" dir="row">
                    <checkbox id="dual-flipx" width="20" height="19"/>
                    <text text="flipX"/>
                    <checkbox id="dual-flipy" width="20" height="19" margin="0 0 0 5"/>
                    <text text="flipY"/>
                  </node>
                </node>
              </node>
              <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
                <combobox id="dual-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
              </node>
              <node align="center" dir="row">
                <checkbox id="dual-randflip" height="20" width="20"/>
                <text text="random flips"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="dual-size" value=".25"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="dual-flow" value=".75"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="dual-opacity" value="1"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="dual-spacing" value=".25"/>
              </node>
              <node height="40" pad="1" width="100%" dir="col">
                <slider-h id="dual-scatter" height="19" value="0"/>
                <node align="center" dir="row">
                  <checkbox width="20" height="19" id="dual-scatter-bothaxis"/>
                  <text text="both axis"/>
                </node>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="dual-rotate" value=".25"/>
              </node>
            </node>
          </node>

          <!-- MEDIUM -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <node align="center" width="1" grow="1">
              <text text="Medium"/>
            </node>
            <button id="button-unfold-medium" width="30" height="18" text="+"/>
          </border>
          <node id="fold-medium" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="20" justify="center">
                <text text="Mixer"/>
              </node>
              <node height="20" justify="center">
                <text text="Wet"/>
              </node>
              <node height="20" justify="center">
                <text text="Noise"/>
              </node>
            </node>
            <node dir="col" align="center" grow="1" width="1">
              <!--controls-->
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-mix"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-wet"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-noise"/>
              </node>
            </node>
          </node>

          <!-- COLOR VARIATIONS -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <node align="center" width="1" grow="1">
              <text text="Pressure Variations"/>
            </node>
            <button id="button-unfold-colorvar" width="30" height="18" text="+"/>
          </border>
          <node id="fold-colorvar" dir="row">
            <node width="36%" dir="col">
              <!--labels-->
              <node height="20" justify="center">
                <text text="Hue"/>
              </node>
              <node height="20" justify="center">
                <text text="Sat"/>
              </node>
              <node height="20" justify="center">
                <text text="Val"/>
              </node>
            </node>
            <node dir="col" align="center" grow="1" width="1">
              <!--controls-->
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-hue"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-sat"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="tip-val"/>
              </node>
            </node>
          </node>

          <!-- JITTER -->

          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
            <node align="center" width="1" grow="1">
              <text text="Jitter"/>
            </node>
            <button id="button-unfold-jitter" width="30" height="18" text="+"/>
          </border>
          <node id="fold-jitter" dir="row">
            <node width="36%" dir="col">
              <node height="20" justify="center">
                <text text="Flip"/>
              </node>
              <node height="20" justify="center">
                <text text="Scale"/>
              </node>
              <node height="20" justify="center">
                <text text="Angle"/>
              </node>
              <node height="20" justify="center" margin="0 0 20 0">
                <text text="Aspect"/>
              </node>
              <node height="20" justify="center" margin="0 0 25 0">
                <text text="Scatter"/>
              </node>
              <node height="20" justify="center">
                <text text="Flow"/>
              </node>
              <node height="20" justify="center" margin="0 0 5 0">
                <text text="Opacity"/>
              </node>
              <node height="20" justify="center">
                <text text="Hue"/>
              </node>
              <node height="20" justify="center">
                <text text="Sat"/>
              </node>
              <node height="20" justify="center">
                <text text="Val"/>
              </node>
              <node height="20" justify="center">
                <text text="HSV Jitter"/>
              </node>
            </node>
            <node dir="col" grow="1" width="1">
              <node align="center" dir="row">
                <checkbox id="tip-randflipx" width="20" height="19"/>
                <text text="X axis"/>
                <checkbox id="tip-randflipy" width="20" height="19" margin="0 0 0 10"/>
                <text text="Y axis"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-scale"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-angle"/>
              </node>
              <node height="40" pad="1" width="100%" dir="col">
                <slider-h id="jitter-aspect" height="19" value="0"/>
                <node align="center" dir="row">
                  <checkbox width="20" height="19" id="jitter-aspect-bothaxis"/>
                  <text text="both axis"/>
                </node>
              </node>
              <node height="40" pad="1" width="100%" dir="col" margin="0 0 5 0">
                <slider-h id="jitter-scatter" height="19" value="0"/>
                <node align="center" dir="row">
                  <checkbox width="20" height="19" id="jitter-scatter-bothaxis"/>
                  <text text="both axis"/>
                </node>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-flow"/>
              </node>
              <node height="20" pad="1" width="100%" margin="0 0 5 0">
                <slider-h id="jitter-opacity"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-hue"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-sat"/>
              </node>
              <node height="20" pad="1" width="100%">
                <slider-h id="jitter-val"/>
              </node>
              <node height="20" pad="1" width="100%" dir="row" align="center">
                <checkbox width="20" height="19" id="jitter-hsv-eachsample"/>
                <text text="each sample"/>
              </node>
            </node>
          </node>

          <button id="brush-settings-reset" text="Reset brush settings" height="40" margin="10 10 0 10"/>
        </scroll>
      </border>
    </node>
  </layout>

</root>
