adding draginput features

src/css/draginput.css

@@ -133,6 +133,10 @@
 }
 
 
+.draginput input:invalid {
+  color: #f33;
+}
+
 
  .draginput span {
   font: 11px/130% sans-serif;

src/css/method-draw.css

@@ -560,6 +560,17 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
   display: none;
 }
 
+.draginput.text-input input, 
+.draginput.text-input input:hover, 
+.draginput.text-input input:active {
+  cursor: text;
+}
+
+.draginput.text-input input {
+  text-align: left;
+  text-indent: 8px;
+}
+
 .draginput_cell {
   float: left;
   height: 26px;

src/index.html

@@ -165,6 +165,10 @@
   
   <div id="rect_panel" class="context_panel">
     <h4 class="clearfix">Rectangle</h4>
+      <label class="draginput twocol text-input">
+        <input id="rect_id" class="attr_changer" data-attr="id" pattern="[^\s]+" />
+      <span>ID</span> 
+    </label>
     <label>
       <input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
       <span>X</span> 

src/js/method-draw.js

@@ -780,7 +780,6 @@ window.methodDraw = function() {
     $('#stroke_style').change(function(){
       svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
       $("#stroke_style_label").html(this.options[this.selectedIndex].text)
-      operaRepaint();
     });
     
     $('#seg_type').change(function() {