diff --git a/explorer.php b/explorer.php index d92e99290eb2f6447c56995859c750522f91595c..298db62d97a6b5237871db89e1a07415cd3b427a 100644 --- a/explorer.php +++ b/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"> diff --git a/js/draw.js b/js/draw.js index b597379add0fa85220ef1e97ceb377fa390b634f..014d8e0856705f20206dd451d46196cdc02f9069 100644 --- a/js/draw.js +++ b/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() ;} ) ; diff --git a/js/pgm_compiler.js b/js/pgm_compiler.js index 90e12676553351cedf13fbde625387e7c9ebb6e7..92f34aa561bcaac20ba03fd952df336c27a09024 100644 --- a/js/pgm_compiler.js +++ b/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) ; }