compiling draw instruction, drawImage waits load

explorer.php

@@ -751,7 +751,8 @@
                   </li>
                 </ul>
                 <!--}}}-->
-                <ul id="draw_cmds" class="list-group tab-pane fade library-group in active">
+                <!--{{{ draw-->
+                <ul id="draw_cmds" class="list-group tab-pane fade library-group">
                   <li class="list-group-item pgm-command pgm-type-void cmd-draw-mv">
                     <span class="glyphicon glyphicon-record"></span>
                     déplacer le curseur vers 
@@ -772,6 +773,7 @@
                     effacer toute la carte
                   </li>
                 </ul>
+                <!--}}}-->
                 <!--{{{ control-->
                 <ul id="ctrl_cmds" class="list-group tab-pane fade library-group">
                   <li class="list-group-item panel panel-default pgm-block pgm-type-void cmd-block-if">

js/draw.js

@@ -48,7 +48,16 @@ function recompute_minmax() {
   }
 }
 
+function draw_when_loaded(img, x, y, sx, sy) {
+  if(img.loading) {
+    setTimeout(function() {draw_when_loaded(img, x, y, sx, sy) ;}, 100) ;
+  } else {
+    ctx.drawImage(img, x, y, sx, sy) ;
+  }
+}
+
 function redraw() {
+  console.log('redraw') ;
   ctx.clearRect(0,0,area.width, area.height) ;
 
   var xmin = pad.pen.x < pad.xmin ? pad.pen.x : pad.xmin ;
@@ -68,12 +77,10 @@ function redraw() {
   var ox = Math.floor(area.width / 2 - (xmin + wx / 2)*s)  ;
   var oy = Math.floor(area.height / 2 - (ymin + wy / 2)*s)  ;
 
-  var base_path = window.location.href.replace(/[^\/]*$/,'') ;
-  var img = new Image() ;
   for(key in pad.tiles) {
+    var img = pad.tiles[key] ;
     var pen = JSON.parse(key) ;
-    img.src = base_path + pad.tiles[key] ;
-    ctx.drawImage(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
+    draw_when_loaded(img, ox + pen.x * s, oy + pen.y * s, s, s) ;
   }
   
   var cs = s / 3 ;
@@ -85,7 +92,11 @@ Draw.redraw = redraw ;
 function stamp() {
   var key = JSON.stringify(pad.pen) ;
   var src = center_img.src.split('/').pop() ;
-  pad.tiles[key] = src ;
+  var img = new Image() ;
+  img.loading = true ;
+  img.onload = function() {img.loading = false ;} ;
+  img.src = center_img.src ;
+  pad.tiles[key] = img ;
 
   pad.xmax = pad.xmax < pad.pen.x ? pad.pen.x : pad.xmax ;
   pad.xmin = pad.xmin > pad.pen.x ? pad.pen.x : pad.xmin ;
@@ -101,6 +112,8 @@ function clear() {
   recompute_minmax() ;
 }
 
+Draw.clear = clear ;
+
 function clear_all() {
   pad.tiles = {} ;
   pad.xmin = 0 ;
@@ -111,35 +124,35 @@ function clear_all() {
   pad.pen.y = 0 ;
 }
 
-Draw.clear = clear_all ;
+Draw.clear_all = clear_all ;
 
 function go(direction) {
     if(direction === 0) {
-      pad.pen.x += 1 ;
+      pad.pen.y += 1 ;
     } else if(direction === 1) {
-      pad.pen.y -= 1 ;
+      pad.pen.x += 1 ;
     } else if(direction === 2) {
-      pad.pen.x -= 1 ;
+      pad.pen.y -= 1 ;
     } else if(direction === 3) {
-      pad.pen.y += 1 ;
+      pad.pen.x -= 1 ;
     }
 }
 
 Draw.go = go ;
 
-document.getElementById('draw-right').addEventListener(
+document.getElementById('draw-down').addEventListener(
     'click',
     function() {go(0) ; redraw() ;}
     ) ;
-document.getElementById('draw-up').addEventListener(
+document.getElementById('draw-right').addEventListener(
     'click',
     function() {go(1) ; redraw() ;}
     ) ;
-document.getElementById('draw-left').addEventListener(
+document.getElementById('draw-up').addEventListener(
     'click',
     function() {go(2) ; redraw() ;}
     ) ;
-document.getElementById('draw-down').addEventListener(
+document.getElementById('draw-left').addEventListener(
     'click',
     function() {go(3) ; redraw() ;}
     ) ;

js/pgm_compiler.js

@@ -437,6 +437,36 @@ pgm_elements['cmd-next-dir'] = command_next_dir ;
 
 /*}}}*/
 
+/* {{{ Color and direction ================================================== */
+
+function command_draw_mv(el) {
+  var receiver = el.children[1] ;
+  var dir = receiver_compile(receiver) ;
+  return 'Explosurf.draw.go(direction_to_number(' + dir + '))' ;
+}
+
+pgm_elements['cmd-draw-mv'] = command_draw_mv ;
+
+function command_draw_stamp(el) {
+  return 'Explosurf.draw.stamp()' ;
+}
+
+pgm_elements['cmd-draw-stamp'] = command_draw_stamp ;
+
+function command_draw_erase(el) {
+  return 'Explosurf.draw.clear()' ;
+}
+
+pgm_elements['cmd-draw-erase'] = command_draw_erase ;
+
+function command_draw_erase_all(el) {
+  return 'Explosurf.draw.clear_all()' ;
+}
+
+pgm_elements['cmd-draw-erase-all'] = command_draw_erase_all ;
+
+/*}}}*/
+
 /* {{{ Variable management ================================================== */
 
 function get_variable(name, err_target, global) {
@@ -747,6 +777,7 @@ function run() {
       hide_progress() ;
       throw e ;
     }
+    Explosurf.draw.redraw() ;
   }, 100) ;
 }