Tidy up edit dialog

utility/annotate-image/README.md

@@ -31,9 +31,9 @@ Each annotation is an object with the following properties:
  - `r` (*number*) : the radius of a `circle` annotation
  - `bbox` (*array*) : this can be used instead of `x`, `y`, `w`, `h` and `r`.
    It should be an array of four values giving the bounding box of the annotation:
-   `[x, y, w, h]`.
+   `[x, y, w, h]`. If this property is set and `type` is not set, it will default to `rect`.
  - `label` (*string*) : an optional piece of text to label the annotation with
- - `stroke` (*string*) : the color of the annotation. Default: `#ffC000`
+ - `stroke` (*string*) : the line color of the annotation. Default: `#ffC000`
  - `lineWidth` (*number*) : the stroke width used to draw the annotation. Default: `5`
  - `fontSize` (*number*) : the font size to use for the label. Default: `24`
  - `fontColor` (*string*) : the color of the font to use for the label. Default: `#ffC000`

utility/annotate-image/annotate.html

@@ -1,23 +1,23 @@
 
 <script type="text/x-red" data-template-name="annotate-image">
+    <div class="form-row">
+        <span id="node-input-row-stroke">
+            <label for="node-input-stroke">Line Color</label>
+        </span>
+        <label style="margin-left: 20px" for="node-input-lineWidth">Line Width</label>
+        <input style="width: 50px" type="text" id="node-input-lineWidth">
+    </div>
+    <div class="form-row">
+        <span id="node-input-row-fontColor">
+            <label for="node-input-fontColor">Font Color</label>
+        </span>
+        <label style="margin-left: 20px" for="node-input-fontSize">Font Size</label>
+        <input style="width: 50px" type="text" id="node-input-fontSize">
+    </div>
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
-    <div id="node-input-row-stroke" class="form-row">
-        <label for="node-input-stroke">Stroke</label>
-    </div>
-    <div class="form-row">
-        <label for="node-input-lineWidth">Line Width</label>
-        <input type="text" id="node-input-lineWidth">
-    </div>
-    <div class="form-row">
-        <label for="node-input-fontSize">Font Size</label>
-        <input type="text" id="node-input-fontSize">
-    </div>
-    <div id="node-input-row-fontColor" class="form-row">
-        <label for="node-input-fontColor">Font Color</label>
-    </div>
 </script>
 
 <script type="text/x-red" data-help-name="annotate-image">
@@ -52,11 +52,12 @@
             <dd>The radius of a <code>circle</code> annotation.</dd>
             <dt>bbox <span class="property-type">array</span></dt>
             <dd>This can be used instead of <code>x</code>,<code>y</code>,<code>w</code>,<code>h</code> and <code>r</code>. It should
-                be an array of four values giving the bounding box of the annotation: <code>[x, y, w, h]</code>.</dd>
+                be an array of four values giving the bounding box of the annotation: <code>[x, y, w, h]</code>.<br>
+                If this property is set and <code>type</code> is not set, it will default to <code>rect</code>.</dd>
             <dt>label <span class="property-type">string</span></dt>
             <dd>An optional piece of text to label the annotation with</dd>
             <dt>stroke <span class="property-type">string</span></dt>
-            <dd>Set the color of the annotation. Default: <code>"#ffC000"</code></dd>
+            <dd>The line color of the annotation. Default: <code>"#ffC000"</code></dd>
             <dt>lineWidth <span class="property-type">number</span></dt>
             <dd>The stroke width used to draw the annotation. Default: <code>5</code></dd>
             <dt>fontSize <span class="property-type">number</span></dt>
@@ -135,7 +136,7 @@
         outputs:1,
         icon: "font-awesome/fa-object-group",
         label: function() {
-            return this.name||"Annotate Image";
+            return this.name||"annotate image";
         },
         labelStyle: function() {
             return this.name?"node_label_italic":"";

utility/annotate-image/annotate.js

@@ -45,6 +45,11 @@ module.exports = function(RED) {
                             ctx.lineWidth = annotation.lineWidth || defaultLineWidth;
                             ctx.lineJoin = 'bevel';
                             let x,y,r,w,h;
+
+                            if (!annotation.type && annotation.bbox) {
+                                annotation.type = 'rect';
+                            }
+
                             switch(annotation.type) {
                                 case 'rect':
                                     if (annotation.bbox) {