<?xml version="1.0"?>
<root 
  xmlns="http://panopainter.com/layout.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>
  
  <!-- PANEL BRUSH DOWNLOAD -->
  <layout id="dialog-brush-download-item">
    <border dir="row" color=".4 .4 .4 .8" pad="4" height="100" width="100" margin="1 1 1 1" grow="1" align="center">
      <image-texture id="thumb-tex" width="300" height="100%"/>
      <node dir="col" pad="5">
        <text margin="0 0 5 0" text="Author: ZaZa"/>
        <text margin="0 0 5 0" text="URL: http:://xyz"/>
        <text margin="0 0 5 0" text-wrap-width="280" text="Description: asdasdasd df dsf asdfadsf sdfas dfasdfa sdfasdfasdf asdfa sdfasdf asdf asdfd asf asd"/>
      </node>
    </border>
  </layout>
  <layout id="dialog-brush-download">
    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
      <border id="form" thickness="1" border-color=".2" pad="3" max-width="650" width="90%" height="90%" dir="col">
        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
          <text text="Download Brushes"></text>
        </border>
        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
          </scroll>
        </border>
        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
          <button id="btn-ok" text="Import" width="100" height="30" margin="0 10 0 0"/>
          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
        </node>
      </border>
    </border>
  </layout>

  <!-- MENU POPUP -->
  <layout id="popup-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Snapshot" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="layers" width="20"/>
        <text text="Layers" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white" width="20"/>
        <text text="New Layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_paste" width="20"/>
        <text text="Paste" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_stack" width="20"/>
        <text text="Copy" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- MENU FILE -->
  <layout id="file-menu">
    <popup-menu positioning="absolute" position="100 100" width="210" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <!--
      <button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
        <checkbox width="20" height="20"/>
        <node pad="5" width="100%">
          <slider-h/>
        </node>
      </button-custom>
      <button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <node pad="5" width="100%">
          <slider-h/>
        </node>
      </button-custom>
      -->
      <button-custom id="file-newdoc" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <text text="New Pano" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-N" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-import" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="image_add" width="20"/>
        <text text="Import" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--
      <button-custom id="file-open" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_add" width="20"/>
        <text text="Open" grow="1" margin="0 0 0 5"/>
      </button-custom>
      -->
      <button-custom id="file-browse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="images" width="20"/>
        <text text="Browse" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-Shift-O" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-open" os="osx,win,web" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="image" width="20"/>
        <text text="Open Path" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-O" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-save" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk" width="20"/>
        <text text="Save" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-S" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <button-custom id="file-save-as" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk_multiple" width="20"/>
        <text text="Save As.." grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-save-ver" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="disk_multiple" width="20"/>
        <text text="Save Version" grow="1" margin="0 0 0 5"/>
        <text text="Ctrl-Shift-S" color=".4" justify="flex-end" margin="0 10 0 10"/>
      </button-custom>
      <border dir="row" flood-events="1">
        <button-custom id="file-export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row" grow="1">
          <icon icon="picture_go" width="20"/>
          <text text="Export JPG" grow="1" margin="0 0 0 5"/>
        </button-custom>
        <button-custom id="file-export-tick" height="40" width="40" align="center" justify="center" color=".2" dir="row">
          <icon icon="resultset_next" width="20"/>
        </button-custom>
      </border>
      <button-custom id="file-share" os="osx,ios" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="picture_go" width="20"/>
        <text text="Share" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-resize" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="arrow_out" width="20"/>
        <text text="Resize Document" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--
      <button-custom id="file-export-cubes" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="page_white_stack" width="20"/>
        <text text="Export Cubes" grow="1" margin="0 0 0 5"/>
      </button-custom>
      -->
      <button-custom id="file-cloud-upload" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="weather_clouds" width="20"/>
        <text text="Cloud Publish" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-cloud-browse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="weather_clouds" width="20"/>
        <text text="Cloud Browse" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <!--<button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon width="20"/>
        <text text="Quit" grow="1" margin="0 0 0 5"/>
      </button-custom>-->
    </popup-menu>
  </layout>
  
  <!-- MENU FILE -> EXPORT -->
  <layout id="file-submenu-export">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="file-submenu-export-png" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="PNG" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-layers" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Separate Layers" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-cube" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Cube Faces" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-depth" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="3D View + Depth" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-anim" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Animation Frames" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-anim-mp4" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Animation MP4" grow="1" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="file-submenu-export-timelapse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Timelapse" grow="1" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>
  
  <!-- MENU EDIT -->
  <layout id="edit-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
    </popup-menu>
  </layout>

  <!-- MENU LAYERS -->
  <layout id="layers-menu">
    <popup-menu positioning="absolute" position="100 100" width="270" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="layer-clear" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="cancel" width="20"/>
        <text id="menu-label" text="Clear layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="layer-rename" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_edit" width="20"/>
        <text id="menu-label" text="Rename Layer" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="layer-merge" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_edit" width="20"/>
        <text id="menu-label" text="Merge with" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- MENU TOOLS -->
  <layout id="tools-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <!--
      <border dir="row" flood-events="1">
        <button-custom id="tools-timelapse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row" grow="1">
          <text text="Timelapse" grow="1" margin="0 0 0 5"/>
        </button-custom>
        <button-custom id="tools-timelapse-tick" height="40" width="40" align="center" justify="center" color=".2" dir="row">
          <icon icon="resultset_next" width="20"/>
        </button-custom>
      </border>
      -->
      <border dir="row" flood-events="1" >
        <button-custom id="tools-panels" pad="0 10 0 10" height="40" width="40" align="center" justify="center" color=".2" dir="row" grow="1">
          <text text="Panels" grow="1" margin="0 0 0 5"/>
          <icon icon="resultset_next" width="20"/>
        </button-custom>
      </border>
      <border dir="row" flood-events="1" >
        <button-custom id="tools-options" pad="0 10 0 10" height="40" width="40" align="center" justify="center" color=".2" dir="row" grow="1">
          <text text="Options" grow="1" margin="0 0 0 5"/>
          <icon icon="resultset_next" width="20"/>
        </button-custom>
      </border>
      <button-custom id="shortcuts" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text id="menu-label" text="Shortcuts" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="clear-grids" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bin" width="20"/>
        <text text="Clear Guides" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="camera-reset" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="arrow_rotate_clockwise" width="20"/>
        <text id="menu-label" text="Reset Camera" margin="0 0 0 5"/>
      </button-custom>
      <button-custom os="ios" id="sonarpen" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="pencil" width="20"/>
        <text id="menu-label" text="Start SonarPen" margin="0 0 0 5"/>
      </button-custom>
      <!--
      <button-custom id="mp4test" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="pencil" width="20"/>
        <text id="menu-label" text="Test MP4 Export" margin="0 0 0 5"/>
      </button-custom>
      -->
    </popup-menu>
  </layout>

  <!-- MENU TOOLS > OPTIONS -->
  <layout id="options-menu">
    <popup-menu positioning="absolute" position="100 100" width="230" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="UI Scale" margin="0 10 0 5" grow="1"/>
        <combobox id="tools-ui-scale" height="30" width="50" margin="0 10 0 0" combo-list="0.50,0.75,0.80,0.90,1.00,1.25,1.50,2.00,2.50"/>
      </button-custom>
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="VP Scale" margin="0 10 0 5" grow="1"/>
        <combobox id="tools-vp-scale" height="30" width="50" margin="0 10 0 0" combo-list="0.25,0.33,0.50,0.66,1.00"/>
      </button-custom>
      <button-custom id="tools-rtl" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <checkbox id="tools-rtl-check" width="20" height="20"/>
        <text text="Left-handed UI" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="tools-vr" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <checkbox id="tools-vr-check" width="20" height="20"/>
        <text text="Enable VR" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="tools-vr-controllers" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <checkbox id="tools-vr-controllers-check" width="20" height="20"/>
        <text text="Enable VR Controllers" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="tools-timelapse" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <checkbox id="tools-timelapse-check" width="20" height="20"/>
        <text text="Auto Timelapse" margin="0 0 0 5"/>
      </button-custom>
      <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <text text="Show Cursor" margin="0 10 0 5" grow="1"/>
        <combobox id="tools-show-cursor" height="30" width="100" margin="0 10 0 0" combo-list="Never,Small Brush,Not Painting,Always"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- MENU TOOLS > PANELS -->
  <layout id="panels-menu">
    <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="panel-presets" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Presets" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-color" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Color Picker" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-color-adv" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Color Panel" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-layers" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Layers" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-brush" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Brush Settings" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-grids" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Grids" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="panel-animation" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="camera" width="20"/>
        <text text="Animation" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <!-- MENU ABOUT -->
  <layout id="about-menu">
    <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
      <button-custom id="about-doc" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="help" width="20"/>
        <text id="menu-label" text="Help Guide" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-app" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="application_view_gallery" width="20"/>
        <text id="menu-label" text="About PanoPainter" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-news" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="What's new?" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-crash" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="Induce crash" margin="0 0 0 5"/>
      </button-custom>
      <button-custom id="about-perf" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
        <icon icon="bug" width="20"/>
        <text id="menu-label" text="Performance test" margin="0 0 0 5"/>
      </button-custom>
    </popup-menu>
  </layout>

  <layout id="tpl-tool-bucket">
    <node dir="row">
      <image path="data/ui/bucket.png" width="46" height="46"/>
      <border color=".3 .3 .3 1" pad="5 10 5 10" dir="row" align="center">
        <text text="Threshold" margin="0 10 0 0"/>
        <slider-h id="threshold" width="100" height="30"/>
      </border>
    </node>
  </layout>
  
  <!--main-->
  <layout id="main">
    <canvas id="paint-canvas" positioning="absolute" width="100%" height="100%" grow="1"/>
    <node id="ui-root" dir="col" wrap="0" width="100%" height="100%" pad="0">
      <!-- content panel -->
      <!-- menu bar -->
      <border flood-events="1" margin="0 0 0 0" pad="0 0 0 0" color=".1" width="100%" height="30" dir="row" align="center" mouse-capture="true">
        <text id="txt-docname" text="Panodoc: no-name" margin="0 20 0 10" color=".6 .6 .6 1"/>
        <node height="100%" color="1" grow="1" align="center" justify="flex-end" dir="row">
          <text id="txt-rec" text="" margin="0 10 0 0" color=".6 .6 .6 1"/>
          <text id="txt-memory" text="History memory: 0.00 Mb" margin="0 5 0 0" color=".6 .6 .6 1"/>
          <button-custom id="btn-clean-memory" margin="0 20 0 0">
            <icon icon="cancel" width="20"/>
          </button-custom>
          <text id="version" text="PanoPainter" margin="0 10 0 0" color=".2 .5 1 1"/>
          <border id="ext-fbf" height="20" width="30" color="0 0 0 1" align="center" justify="center" margin="0 5 0 0">
            <text id="txt-rec" text="FbF" color="0 0 0 1"/>
          </border>
          <border id="ext-flt" height="20" width="40" color="0 0 0 1" align="center" justify="center" margin="0 5 0 0">
            <text id="ext-flt-text" text="B8" color="0 0 0 1"/>
          </border>
          <border id="ext-dpi" height="20" width="60" color=".2" align="center" justify="center" margin="0 5 0 0">
            <text id="txt-dpi" text="4x-dpi" color="1"/>
          </border>
        </node>
      </border>
      <!-- toolbar -->
      <border id="toolbar" height="50" width="100%" pad="5" dir="row" color="0 0 0 0.6" mouse-capture="true" rtl="ltr">
        <!--
        <button id="btn-open" width="50" height="100%" margin="0 5 0 0" text="Open"/>
        <button id="btn-save" width="50" height="100%" margin="0 5 0 0" text="Save"/>
        <button id="btn-export" width="50" height="100%" margin="0 5 0 0" text="Export"/>
        <button id="btn-clear" width="50" height="100%" margin="0 5 0 15" text="Clear"/>
        -->
        <button-custom id="menu-file" width="50" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="File"/>
        </button-custom>
        <!--
        <button-custom id="menu-edit" width="50" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Edit"/>
        </button-custom>
        -->
        <button-custom id="menu-layers" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Layers"/>
        </button-custom>
        <button-custom id="menu-tools" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="Tools"/>
        </button-custom>
        <button-custom id="menu-about" width="60" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8" color=".1">
          <text text="About"/>
        </button-custom>
        <!--<button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>-->
        
        <node dir="row" margin="0 0 0 0" grow="1" justify="center">
          <!--panel togglers-->
          <button-custom id="btn-stroke" width="40" height="40" margin="0 5 0 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/stroke.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <!--<button id="btn-brush-preset" width="40" height="40" margin="0 0 5 0" text="Preset" thickness="1" border-color=".1" pad="2"/>-->
          <!--
          <button-custom id="btn-brush" width="40" height="40" margin="0 0 5 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/brushes.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          -->
          <button-custom id="btn-color" width="40" height="40" margin="0 5 0 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/palette.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-layer" width="40" height="40" margin="0 5 0 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/layers.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-grids-panel" width="40" height="40" margin="0 5 0 0" thickness="1" border-color=".1" pad="2">
            <image path="data/ui/grid.png" width="100%" height="100%" align="center" justify="flex-end" mips="true"/>
          </button-custom>
        </node>
        
        <button-custom id="btn-undo" width="40" height="40" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="2">
          <image path="data/ui/undo.png" width="100%" height="100%" align="center" justify="flex-end"/>
        </button-custom>
        <button-custom id="btn-redo" width="40" height="40" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="2">
          <image path="data/ui/redo.png" width="100%" height="100%" align="center" justify="flex-end"/>
        </button-custom>
        <!--
        <button-custom id="btn-layer" width="50" height="100%" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="6" align="center" justify="center">
          <icon width="100%" height="100%" icon="disk"/>
        </button-custom>
        -->
      </border>

      <!--<scroll id="drop-top" color="0 0 0 .5" min-height="10" mouse-capture="true" rtl="ltr"/>-->

      <!-- central row -->
      <node grow="1" dir="row" wrap="1" height="0" id="central-row">
        <border color="0 0 0 0.6" pad="0 5 55 0" justify="center" dir="col" wrap="1" flood-events="1" mouse-capture="true">
          <button-custom id="btn-pen" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/pen.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-pick" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/picker.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-erase" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/eraser.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-bucket" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>

          <button-custom id="btn-line" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/line.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-mask-free" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/sel-free.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button-custom id="btn-mask-line" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/sel-poly.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
          <button id="btn-copy" width="40" height="40" margin="2 0 2 5" text="Copy"/>
          <button id="btn-cut" width="40" height="40" margin="2 0 2 5" text="Cut"/>
          <!-- <button id="btn-fill" width="40" height="40" margin="0" text="Fill"/> -->

          <button id="btn-cam" width="40" height="40" margin="2 0 2 5" text="Cam"/>
          <button id="btn-grid" width="40" height="40" margin="2 0 2 5" text="Guide"/>
          <button-custom id="btn-touchlock" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
            <image path="data/ui/notouch.png" width="100%" height="100%" align="center" justify="flex-end"/>
          </button-custom>
        </border>

        <scroll id="drop-left" color="0 0 0 .5" min-width="10" mouse-capture="true" rtl="ltr"/>

        <node dir="col" width="1" grow="1" height="100%">
          <!--tools options-->
          <border id="tools-container" color="0 0 0 0.3" dir="row" justify="center" mouse-capture="true">
          </border>
          
          <node dir="row" height="200" grow="1">
            <!--floating area-->
            <node id="floatings" positioning="absolute" color="0 0 0 1" width="100%" grow="1" height="100%" rtl="ltr"/>
            <!--quick bar-->
            <node justify="center" align="center" dir="col" rtl="ltr">
              <panel-quick id="panel-quick"/>
              <node height="0" grow="1" max-height="50"/>
            </node>
          </node>
        </node>

        <scroll id="drop-right" color="0 0 0 .5" min-width="10" mouse-capture="true" rtl="ltr"/>
        
        <!--<node height="100%" width="1" grow="1" dir="col" align="center" justify="flex-start" rtl="ltr">
          <border border-color="0 0 0 0" thickness="2" color=".2 .2 .2 .6" pad="10" dir="row" margin="2 0 0 0">
            <node dir="col">
              <node dir="row" align="center" margin="0 0 2 0">
                <slider-h id="pitch-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Pitch" margin="0 0 0 10"/>
              </node>
              <node dir="row" align="center" margin="0 0 2 0">
                <slider-h id="yaw-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Yaw" margin="0 0 0 10"/>
              </node>
              <node dir="row" align="center">
                <slider-h id="roll-slider" value="0.5" width="200" height="15"></slider-h>
                <text text="Roll" margin="0 0 0 10"/>
              </node>
            </node>
            <button-custom margin="0 0 0 10" thickness="1" border-color=".1" pad="5" justify="center">
              <text text="Apply"/>
            </button-custom>
          </border>
        </node>-->
      
      </node>
      
      <!--<scroll id="drop-bottom" color="0 0 0 .5" min-height="10" mouse-capture="true" rtl="ltr"/>-->

      <!-- status bar -->
      <!--<border height="10" color="0 0 0 .6" mouse-capture="true"/>-->
      <!--<border height="30" width="100%" color=".15" border-color=".3" dir="row" pad="0 0 0 10" align="center">
        --><!--<text-input width="100" height="100%" color=".3"/>--><!--
        <text text="Status Bar: nothing to show here."/>
        <text text="#opengl #fromscratch #c++" margin="0 0 0 10" color=".2 .5 1 1"/>
      </border>-->
    </node>
    <!--
    <border color="1 1 1 1" positioning="absolute" position="0 0" width="500" height="400">
      <image-texture id="tex-debug" width="100%" height="100%"></image-texture>
    </border>
    -->
    <!--<ref id="dialog-brush-upload"/>-->

  </layout>
</root>
