git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_form_Signature.js.html

   1 <html><head><title>../roojs1/Roo/form/Signature.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12 /**
  13  * @class Roo.form.Signature
  14  * @extends Roo.form.Field
  15  * Signature field.
  16  * @constructor
  17  *
  18  * @param {Object} config Configuration options
  19  */
  20
  21 </span><span class="jsdoc-var">Roo.form.Signature </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  22     </span><span class="jsdoc-var">Roo.form.Signature.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  23
  24     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({</span><span class="jsdoc-comment">// not in used??
  25          /**
  26          * @event confirm
  27          * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
  28              * @param {Roo.form.ComboBox} combo This combo box
  29              */
  30         </span><span class="jsdoc-string">'confirm' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  31         </span><span class="jsdoc-comment">/**
  32          * @event reset
  33          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
  34              * @param {Roo.form.ComboBox} combo This combo box
  35              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
  36              */
  37         </span><span class="jsdoc-string">'reset' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  38     </span><span class="jsdoc-syntax">});
  39 };
  40
  41 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Signature</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Field</span><span class="jsdoc-syntax">,  {
  42     </span><span class="jsdoc-comment">/**
  43      * @cfg {Object} labels Label to use when rendering a form.
  44      * defaults to
  45      * labels : {
  46      *      clear : &quot;Clear&quot;,
  47      *      confirm : &quot;Confirm&quot;
  48      *  }
  49      */
  50     </span><span class="jsdoc-var">labels </span><span class="jsdoc-syntax">: {
  51         </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Clear&quot;</span><span class="jsdoc-syntax">,
  52         </span><span class="jsdoc-var">confirm </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Confirm&quot;
  53     </span><span class="jsdoc-syntax">},
  54     </span><span class="jsdoc-comment">/**
  55      * @cfg {Number} width The signature panel width (defaults to 300)
  56      */
  57     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 300,
  58     </span><span class="jsdoc-comment">/**
  59      * @cfg {Number} height The signature panel height (defaults to 100)
  60      */
  61     </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: 400,
  62     </span><span class="jsdoc-comment">/**
  63      * @cfg {Boolean} allowBlank False to validate that the value length &gt; 0 (defaults to false)
  64      */
  65     </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  66
  67     </span><span class="jsdoc-comment">//private
  68     // {Object} signPanel The signature SVG panel element (defaults to {})
  69     </span><span class="jsdoc-var">signPanel </span><span class="jsdoc-syntax">: {},
  70     </span><span class="jsdoc-comment">// {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
  71     </span><span class="jsdoc-var">isMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  72     </span><span class="jsdoc-comment">// {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
  73     </span><span class="jsdoc-var">isConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  74     </span><span class="jsdoc-comment">// {String} signatureTmp SVG mapping string (defaults to empty string)
  75     </span><span class="jsdoc-var">signatureTmp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  76
  77
  78     </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// modified by initCompnoent..
  79         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;input&quot;</span><span class="jsdoc-syntax">,
  80         </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;hidden&quot;
  81     </span><span class="jsdoc-syntax">},
  82
  83     </span><span class="jsdoc-comment">// private
  84     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  85
  86         </span><span class="jsdoc-var">Roo.form.Signature.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  87
  88         </span><span class="jsdoc-var">this.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">({
  89             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-signature-wrap'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-signature'</span><span class="jsdoc-syntax">}
  90         });
  91
  92         </span><span class="jsdoc-var">this.createToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  93         </span><span class="jsdoc-var">this.signPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">({
  94                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  95                 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px; height: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px; border: 0;'
  96             </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.el
  97         </span><span class="jsdoc-syntax">);
  98
  99         </span><span class="jsdoc-var">this.svgEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signPanel.createChild</span><span class="jsdoc-syntax">({
 100               </span><span class="jsdoc-var">xmlns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'http://www.w3.org/2000/svg'</span><span class="jsdoc-syntax">,
 101               </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'svg'</span><span class="jsdoc-syntax">,
 102               </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
 103               </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
 104               </span><span class="jsdoc-var">viewBox</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0 0 '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
 105               </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
 106                 {
 107                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;rect&quot;</span><span class="jsdoc-syntax">,
 108                     </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;svg-r&quot;</span><span class="jsdoc-syntax">,
 109                     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
 110                     </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
 111                     </span><span class="jsdoc-var">fill</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;#ffa&quot;
 112                 </span><span class="jsdoc-syntax">},
 113                 {
 114                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;line&quot;</span><span class="jsdoc-syntax">,
 115                     </span><span class="jsdoc-var">x1</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// start
 116                     </span><span class="jsdoc-var">y1</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">*0.8), </span><span class="jsdoc-comment">// start set the line in 80% of height
 117                     </span><span class="jsdoc-var">x2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// end
 118                     </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">*0.8), </span><span class="jsdoc-comment">// end set the line in 80% of height
 119                     </span><span class="jsdoc-string">'stroke'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;#666&quot;</span><span class="jsdoc-syntax">,
 120                     </span><span class="jsdoc-string">'stroke-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;1&quot;</span><span class="jsdoc-syntax">,
 121                     </span><span class="jsdoc-string">'stroke-dasharray'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;3&quot;</span><span class="jsdoc-syntax">,
 122                     </span><span class="jsdoc-string">'shape-rendering'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;crispEdges&quot;</span><span class="jsdoc-syntax">,
 123                     </span><span class="jsdoc-string">'pointer-events'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;none&quot;
 124                 </span><span class="jsdoc-syntax">},
 125                 {
 126                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;path&quot;</span><span class="jsdoc-syntax">,
 127                     </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;svg-p&quot;</span><span class="jsdoc-syntax">,
 128                     </span><span class="jsdoc-string">'stroke'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;navy&quot;</span><span class="jsdoc-syntax">,
 129                     </span><span class="jsdoc-string">'stroke-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;3&quot;</span><span class="jsdoc-syntax">,
 130                     </span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">,
 131                     </span><span class="jsdoc-string">'pointer-events'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none'
 132                 </span><span class="jsdoc-syntax">}
 133               ]
 134         });
 135         </span><span class="jsdoc-var">this.createSVG</span><span class="jsdoc-syntax">();
 136         </span><span class="jsdoc-var">this.svgBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.getScreenCTM</span><span class="jsdoc-syntax">();
 137     },
 138     </span><span class="jsdoc-var">createSVG </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 139         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">svg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signPanel</span><span class="jsdoc-syntax">;
 140         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">svg.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
 141         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 142
 143         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.down</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 144         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.move</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 145         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 146         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseout'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 147         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.down</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 148         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.move</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 149         </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 150
 151     },
 152     </span><span class="jsdoc-var">isTouchEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 153         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">e.type.match</span><span class="jsdoc-syntax">(/^touch/);
 154     },
 155     </span><span class="jsdoc-var">getCoords </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 156         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt    </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.createSVGPoint</span><span class="jsdoc-syntax">();
 157         </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientX</span><span class="jsdoc-syntax">;
 158         </span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientY</span><span class="jsdoc-syntax">;
 159         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isTouchEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)) {
 160             </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">e.targetTouches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.clientX
 161             pt.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.targetTouches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.clientY</span><span class="jsdoc-syntax">;
 162         }
 163         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.getScreenCTM</span><span class="jsdoc-syntax">();
 164         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.inverse</span><span class="jsdoc-syntax">();
 165         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pt.matrixTransform</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
 166         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">mx.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">mx.y</span><span class="jsdoc-syntax">;
 167     },
 168     </span><span class="jsdoc-comment">//mouse event headler
 169     </span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 170         </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'M' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.getCoords</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">;
 171         </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-p'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">);
 172
 173         </span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 174
 175         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 176     },
 177     </span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 178         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isMouseDown</span><span class="jsdoc-syntax">) {
 179             </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'L' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.getCoords</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">;
 180             </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-p'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">);
 181         }
 182
 183         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 184     },
 185     </span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 186         </span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 187         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signatureTmp.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">);
 188
 189         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sp.length </span><span class="jsdoc-syntax">&gt; 1){
 190             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sp</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sp.length</span><span class="jsdoc-syntax">-2]</span><span class="jsdoc-var">.match</span><span class="jsdoc-syntax">(/^L/)){
 191                 </span><span class="jsdoc-var">sp.pop</span><span class="jsdoc-syntax">();
 192                 </span><span class="jsdoc-var">sp.pop</span><span class="jsdoc-syntax">();
 193                 </span><span class="jsdoc-var">sp.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
 194                 </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sp.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">);
 195             }
 196         }
 197         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">() != </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">){
 198             </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'#ffa'</span><span class="jsdoc-syntax">);
 199             </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 200         }
 201         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 202     },
 203
 204     </span><span class="jsdoc-comment">/**
 205      * Protected method that will not generally be called directly. It
 206      * is called when the editor creates its toolbar. Override this method if you need to
 207      * add custom toolbar buttons.
 208      * @param {HtmlEditor} editor
 209      */
 210     </span><span class="jsdoc-var">createToolbar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">){
 211          </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggle</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">){
 212             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fid </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">;
 213             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 214                 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xid</span><span class="jsdoc-syntax">,
 215                 </span><span class="jsdoc-var">cmd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
 216                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon x-edit-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
 217                 </span><span class="jsdoc-var">enableToggle</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 218                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
 219                 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">editor.relayBtnCmd</span><span class="jsdoc-syntax">,
 220                 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
 221                 </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">etb.buttonTips</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">///tips ???
 222                 </span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:-1
 223             };
 224         }
 225
 226
 227         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor.wrap.dom.firstChild</span><span class="jsdoc-syntax">);
 228         </span><span class="jsdoc-var">this.tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb</span><span class="jsdoc-syntax">;
 229         </span><span class="jsdoc-var">this.tb.add</span><span class="jsdoc-syntax">(
 230            {
 231                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' x-signature-btn x-signature-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
 232                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
 233                 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">,
 234                 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
 235                 </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.labels.clear
 236             </span><span class="jsdoc-syntax">},
 237             {
 238                  </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Fill'</span><span class="jsdoc-syntax">,
 239                  </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.Toolbar
 240             </span><span class="jsdoc-syntax">},
 241             {
 242                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'  x-signature-btn x-signature-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
 243                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
 244                 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.setConfirmed</span><span class="jsdoc-syntax">,
 245                 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
 246                 </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.labels.confirm
 247             </span><span class="jsdoc-syntax">}
 248         );
 249
 250     },
 251     </span><span class="jsdoc-comment">//public
 252     </span><span class="jsdoc-var">getImageEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 253         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">svg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.outerHTML</span><span class="jsdoc-syntax">;
 254         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'data:image/svg+xml;base64,'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">window.btoa</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">svg</span><span class="jsdoc-syntax">);
 255         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">source </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">();
 256         </span><span class="jsdoc-var">source.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">;
 257         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">source</span><span class="jsdoc-syntax">;
 258     },
 259     </span><span class="jsdoc-var">getConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 260         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.isConfirmed</span><span class="jsdoc-syntax">;
 261     },
 262     </span><span class="jsdoc-comment">// private
 263     </span><span class="jsdoc-var">getSignature </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 264         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">;
 265     },
 266     </span><span class="jsdoc-comment">// private
 267     </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 268         </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 269         </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'#ffa'</span><span class="jsdoc-syntax">);
 270         </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-p'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 271         </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 272         </span><span class="jsdoc-var">Roo.form.Signature.superclass.reset.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 273     },
 274     </span><span class="jsdoc-var">test </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 275 </span><span class="jsdoc-comment">//        Roo.log(this.signPanel.dom.contentWindow.up())
 276     </span><span class="jsdoc-syntax">},
 277     </span><span class="jsdoc-comment">//private
 278     </span><span class="jsdoc-var">setConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 279         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">()){
 280             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 281         }
 282         </span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'#cfc'</span><span class="jsdoc-syntax">);
 283         </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">());
 284         </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 285 </span><span class="jsdoc-comment">//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
 286     </span><span class="jsdoc-syntax">},
 287     </span><span class="jsdoc-comment">// private
 288     // Subclasses should provide the validation implementation by overriding this
 289     </span><span class="jsdoc-var">validateValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
 290         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">){
 291             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 292         }
 293
 294         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isConfirmed</span><span class="jsdoc-syntax">){
 295             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 296         }
 297         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 298     }
 299 });</span></code></body></html>