function(args) {
/*
is_app(true)
control_type("VB")
display_name("Draw control")
description("This will return the draw control")
base_component_id("draw_control")
load_once_from_file(true)
visibility("PRIVATE")
read_only(true)
properties(
    [
        {
            id:     "image_data",
            name:   "Image",
            type:   "Image"
        }
        ,
        {
            id:     "text",
            name:   "Text",
            type:   "String"
        }
        ,
        {
            id:     "background_color",
            name:   "Background color",
            type:   "String"
        }
        ,

        {
            id:         "has_details_ui",
            name:       "Has details UI?",
            type:       "Boolean",
            default:    true,
            hidden:     true
        }
     ]
)//properties
logo_url("/driver_icons/draw.png")
*/

    Vue.component("draw_control",{
      props: ["args","refresh", "design_mode"]
      ,
      template: `<div   v-bind:style='"height:100%;width:100%; border: 0px;" +
                                      "background-color: "+    args["background_color"]  +  ";"'
                        v-bind:refresh='refresh'>

                                    <canvas v-if='design_mode == "detail_editor"'
                                            v-bind:id='args.name + "_canvas_" + (design_mode?"_design_mode":"")'
                                            v-bind:refresh='refresh'
                                            style="height:100%:width:100%;">
                                    </canvas>

                                    <img      v-else=""
                                              v-bind:width='args.width + "px"'
                                              v-bind:refresh='refresh'
                                              alt='No image set'
                                              v-bind:src='"" + args.image_data'>

                                              {{design_mode}}
                                    </img>
                 </div>`
      ,
      data: function() {
       return {
         msg: "..."
     }
      }
      ,
      mounted: function() {
        this.loadImageToCanvas()
      }
      ,
      methods: {
          loadImageToCanvas: function() {
              var base_image = new Image();
              alert(this.args.image_data)
              base_image.src = this.args.image_data;
              base_image.onload = function() {
                //context.drawImage(base_image, 0, 0);
                alert(base_image)
              }
          }

      }

    })
}

@@ -1137,19 +1137,33 @@
 %5D  +  %22;
+overflow:auto;
 %22'%0A
-
         
@@ -1950,70 +1950,9 @@
 '%3E%0A%0A
-                                              %7B%7Bdesign_mode%7D%7D
 %0A
+
     
@@ -2103,24 +2103,328 @@
   %7D%0A      ,%0A
+      watch: %7B%0A        // This would be called anytime the value of the input changes%0A        refresh: function(newValue, oldValue) %7B%0A            //console.log(%22refresh: %22 + this.args.text)%0A            if (isValidObject(this.args)) %7B%0A            %7D%0A            this.loadImageToCanvas()%0A        %7D%0A      %7D,%0A
       mounte
@@ -2539,32 +2539,60 @@
 s: function() %7B%0A
+              var mm = this%0A
               va
@@ -2629,24 +2629,26 @@
             
+//
 alert(this.a
@@ -2783,17 +2783,314 @@
     
-//context
+var el = document.getElementById(mm.args.name + %22_canvas_%22 + (mm.design_mode?%22_design_mode%22:%22%22))%0A                if (isValidObject(el)) %7B%0A                    //alert(el)%0A                    var ctx = el.getContext(%222d%22);%0A                    ctx.clearRect(0, 0, el.width, el.height);%0A                    ctx
 .dra
@@ -3131,16 +3131,22 @@
         
+    
+//
 alert(ba
@@ -3155,16 +3155,34 @@
 _image)%0A
+                %7D%0A
         

Update the drawing tool canvas with the edited image