diff --git a/Shared/css/main.less b/Shared/css/main.less index dfa9788..b610762 100755 --- a/Shared/css/main.less +++ b/Shared/css/main.less @@ -32,6 +32,9 @@ canvas { position: absolute; top: 0; left: 0; + &:first-of-type { + background: white; + } } .separator { diff --git a/Shared/js/shared.js b/Shared/js/shared.js index 3187c80..b9d6e9e 100644 --- a/Shared/js/shared.js +++ b/Shared/js/shared.js @@ -9,6 +9,7 @@ $(document).ready(function() { fill: false, lineWidth : 2, color : 'black', + bg: 'white', type: 'sketch', lineCap: 'round', lineJoin: 'round', diff --git a/Web/js/main.js b/Web/js/main.js index a79758c..df90541 100755 --- a/Web/js/main.js +++ b/Web/js/main.js @@ -11,6 +11,7 @@ $(document).ready(function() { $(window).resize(sizeAndPos); function save() { + var f = c.getImageData(0, 0, width(), height()); switch(save.background) { case 'white': { c.fillStyle = 'white'; @@ -61,7 +62,7 @@ $(document).ready(function() { window.open(data, '_blank').focus(); } - c.putImageData(window.points.history[window.points.history.last].data, 0, 0); + c.putImageData(f, 0, 0); } function load() { diff --git a/build/mobile/css/main.css b/build/mobile/css/main.css index f5366f4..40698f9 100644 --- a/build/mobile/css/main.css +++ b/build/mobile/css/main.css @@ -384,6 +384,9 @@ canvas { top: 0; left: 0; } +canvas:first-of-type { + background: white; +} .separator { display: block; height: 4.8rem; diff --git a/build/mobile/js/shared.js b/build/mobile/js/shared.js index 937af65..03b68da 100644 --- a/build/mobile/js/shared.js +++ b/build/mobile/js/shared.js @@ -1 +1 @@ -$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))}); \ No newline at end of file +$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",bg:"white",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))}); \ No newline at end of file diff --git a/build/web/css/main.css b/build/web/css/main.css index f5366f4..40698f9 100644 --- a/build/web/css/main.css +++ b/build/web/css/main.css @@ -384,6 +384,9 @@ canvas { top: 0; left: 0; } +canvas:first-of-type { + background: white; +} .separator { display: block; height: 4.8rem; diff --git a/build/web/js/main.js b/build/web/js/main.js index dbca542..fef8e74 100644 --- a/build/web/js/main.js +++ b/build/web/js/main.js @@ -1 +1 @@ -"use strict";$(document).ready(function(){function a(){switch(a.background){case"white":c.fillStyle="white",c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.fillStyle=settings.color,c.globalCompositeOperation=settings.composite;break;case"current color":c.fillStyle=settings.bg,c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.globalCompositeOperation=settings.composite}var b=$c[0].toDataURL();if("sketchy project"==a.type){var d,e=JSON.parse(localStorage.getItem("projects"));e&&e.some(function(b,c){return b.name==a["file name"]?(d=c,!0):!1})?(console.log(d),e[d]={name:a["file name"],data:b,points:window.points,settings:settings},localStorage.setItem("projects",JSON.stringify(e))):e?e.push({name:a["file name"],data:b,points:window.points}):e=[{name:a["file name"],data:b,points:window.points}],localStorage.setItem("projects",JSON.stringify(e))}else window.open(b,"_blank").focus();c.putImageData(window.points.history[window.points.history.last].data,0,0)}function b(){var a=JSON.parse(localStorage.getItem("projects")).filter(function(a){return a.name==b.file})[0],d=document.createElement("img");d.src=a.data,d.onload=function(){c.clearRect(0,0,width(),height()),c.drawImage(d,0,0),window.points=a.points,window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]},{data:c.getImageData(0,0,width(),height()),points:a.points}],$c.first().css("background",a.settings.bg),window.settings.bg=a.settings.bg}}yepnope({test:window.mobile,yep:["js/mobile.js","js/libs/color-picker-touch.js"],nope:["js/libs/color-picker.js"]}),$(window).resize(sizeAndPos),window.load=b,window.save=a}); \ No newline at end of file +"use strict";$(document).ready(function(){function a(){var b=c.getImageData(0,0,width(),height());switch(a.background){case"white":c.fillStyle="white",c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.fillStyle=settings.color,c.globalCompositeOperation=settings.composite;break;case"current color":c.fillStyle=settings.bg,c.globalCompositeOperation="destination-over",c.fillRect(0,0,width(),height()),c.globalCompositeOperation=settings.composite}var d=$c[0].toDataURL();if("sketchy project"==a.type){var e,f=JSON.parse(localStorage.getItem("projects"));f&&f.some(function(b,c){return b.name==a["file name"]?(e=c,!0):!1})?(console.log(e),f[e]={name:a["file name"],data:d,points:window.points,settings:settings},localStorage.setItem("projects",JSON.stringify(f))):f?f.push({name:a["file name"],data:d,points:window.points}):f=[{name:a["file name"],data:d,points:window.points}],localStorage.setItem("projects",JSON.stringify(f))}else window.open(d,"_blank").focus();c.putImageData(b,0,0)}function b(){var a=JSON.parse(localStorage.getItem("projects")).filter(function(a){return a.name==b.file})[0],d=document.createElement("img");d.src=a.data,d.onload=function(){c.clearRect(0,0,width(),height()),c.drawImage(d,0,0),window.points=a.points,window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]},{data:c.getImageData(0,0,width(),height()),points:a.points}],$c.first().css("background",a.settings.bg),window.settings.bg=a.settings.bg}}yepnope({test:window.mobile,yep:["js/mobile.js","js/libs/color-picker-touch.js"],nope:["js/libs/color-picker.js"]}),$(window).resize(sizeAndPos),window.load=b,window.save=a}); \ No newline at end of file diff --git a/build/web/js/shared.js b/build/web/js/shared.js index 937af65..03b68da 100644 --- a/build/web/js/shared.js +++ b/build/web/js/shared.js @@ -1 +1 @@ -$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))}); \ No newline at end of file +$(document).ready(function(){window.c=$("canvas")[0].getContext("2d"),window.o=$("canvas")[1].getContext("2d"),window.c.clear=window.o.clear=function(){this.clearRect(0,0,width(),height())},window.settings={stroke:!0,fill:!1,lineWidth:2,color:"black",bg:"white",type:"sketch",lineCap:"round",lineJoin:"round",furLength:50,connectTelorance:40,composite:"source-over",shape:"circle",shapeStart:{},comShape:{},drawingLine:[],version:1.2},window.points=[],window.$c=$("canvas"),window.points.history=[{data:c.createImageData($c.width(),$c.height()),points:[]}],window.points.history.last=0,sizeAndPos(),$(".color-picker").change(function(){var a=$(this).find(".color").val(),b=$(this).parent().attr("data-caller");settings[b]=a,$("#set"+b+" span").html(a),"bg"==b&&$c.first().css("background",a)}),$(".color").val("#000000"),localStorage.getItem("sawTips")!=settings.version&&($(".tour").removeClass("hidden"),localStorage.setItem("sawTips",settings.version))}); \ No newline at end of file