diff --git a/css/main.less b/css/main.less index 69598f1..2ae0bc2 100644 --- a/css/main.less +++ b/css/main.less @@ -128,7 +128,6 @@ header { height: 100%; width: 15rem; background: #262626; - display: table; position: absolute; left: -15rem; top: 5rem; @@ -216,8 +215,8 @@ header { margin-top: 1rem; } .bottom { - display: table-row; - vertical-align: bottom; + position: absolute; + bottom: 5rem; button { margin-left: 3.5rem; } diff --git a/index.html b/index.html index 34be387..4c60162 100644 --- a/index.html +++ b/index.html @@ -90,6 +90,7 @@
  • +
  • diff --git a/js/events.js b/js/events.js index f1faa65..4a880c7 100644 --- a/js/events.js +++ b/js/events.js @@ -53,7 +53,9 @@ function save() { }).on('mouseup', function(e) { e.preventDefault(); window.active = false; - + + + if( settings.type = 'eraser' ) return; if(window.points.history.last < window.points.history.length-1) { window.points.history.splice(window.points.history.last+1); } diff --git a/js/functions.js b/js/functions.js index bbef1ec..31cd1c9 100644 --- a/js/functions.js +++ b/js/functions.js @@ -45,12 +45,6 @@ function line(x1, y1, x2, y2, opts, overlay) { if( opts.fill ) c.fill(); } -function erase(x1, y1, x2, y2, overlay) { - var c = window.c; - if( overlay ) var c = window.o; - c.clearRect(x1, y1, x2 - x1, y2 - y1); -} - function undo() { var history = window.points.history; if( history.last > 1 ) { @@ -117,7 +111,7 @@ function startPoint(x, y) { window.o.fill(); } - if( old.type == 'line' ) { + if( old.type == 'line' && current.type == 'line' ) { if( points[points.indexOf(old)-1].type !== 'line' ) erase(old.x-5, old.y-5, old.x+5, old.y+5, true); line(old.x, old.y, x, y); } @@ -188,6 +182,20 @@ function drawPoint(x,y) { } break; } + case 'eraser': { + c.globalCompositeOperation = 'destination-out'; + line(capture.x, capture.y, x, y); + + var current = { + x : x, + y : y, + start : capture.start, + type : capture.type + } + + points.push(current); + break; + } } } diff --git a/js/main.js b/js/main.js index b623a9e..c619849 100644 --- a/js/main.js +++ b/js/main.js @@ -18,7 +18,7 @@ $(document).ready(function() { window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}]; sizeAndPos(); - $(window).resize(sizeAndPos); + //$(window).resize(sizeAndPos); $('.color-picker').change(function() { var c = $(this).find('.color').val(); diff --git a/js/mobile-events.js b/js/mobile-events.js index 1a96196..c278867 100644 --- a/js/mobile-events.js +++ b/js/mobile-events.js @@ -32,13 +32,13 @@ function save() { var pics = navigator.getDeviceStorage('pictures'); var r = pics.addNamed(file, save['file name'] + '.png'); r.onsuccess = function() { - alert('Your sketch was successfuly saved to pictures/' + this.result.name); + alert('Your sketch was successfuly saved to ' + this.result); } r.onerror = function() { alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems') console.warn(this.error); } - c.putImageData(window.points.history[window.points.history.length-1].data, 0, 0); + c.putImageData(window.points.history[window.points.history.last].data, 0, 0); } $('.menu').on('tap', function() { @@ -61,6 +61,8 @@ function save() { e.preventDefault(); window.active = false; + if( settings.type == 'eraser' ) return; + if(window.points.history.last < window.points.history.length-1) { window.points.history.splice(window.points.history.last+1); } @@ -111,7 +113,7 @@ function save() { if( i > 0 ) { var key = $(this).html().toLowerCase(); var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html(); - if( key !== 'file name' ) value = key.toLowerCase(); + if( key !== 'file name' ) value = value.toLowerCase(); window[v][key] = value; } diff --git a/manifest.webapp b/manifest.webapp index 7173527..06395cc 100644 --- a/manifest.webapp +++ b/manifest.webapp @@ -25,6 +25,9 @@ "description": "برنامه‌ی رایگان طراحی/نقاشی" } }, + "orientation": [ + "portrait" + ], "permissions": { "device-storage:pictures": { "description": "Required to save sketched pics",