+Shapes, +Background, +Fill/Stroke, +Line Join
This commit is contained in:
Mahdi Dibaiee
parent
e0b6d8869f
commit
d8ddd1c985
@ -1,223 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
$(window).resize(sizeAndPos);
|
|
||||||
|
|
||||||
$('.menu').click(function() {
|
|
||||||
$('#menu').toggleClass('pulled');
|
|
||||||
})
|
|
||||||
$('.save').click(function() {
|
|
||||||
$('#save').removeClass('hidden');
|
|
||||||
})
|
|
||||||
$('.load').click(function() {
|
|
||||||
$('#load').removeClass('hidden');
|
|
||||||
$('#load li').remove();
|
|
||||||
for( var i = 0, len = localStorage.length; i < len; i++ ) {
|
|
||||||
$('#load ol').append(
|
|
||||||
$('<li><label><span>' + localStorage.key(i) + '</span></label></li>')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if( localStorage.length < 1 ) {
|
|
||||||
$('#load ol').append(
|
|
||||||
$('<p>No sketch found.</p>')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
$confirm.find('li').off('click').click(function(e) {
|
|
||||||
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
|
||||||
$(this).attr('aria-selected', 'true');
|
|
||||||
})
|
|
||||||
$('#pro').click(function() {
|
|
||||||
$('#save ol:nth-of-type(2) li').each(function() {
|
|
||||||
if( $(this).find('span').html() !== 'Transparent' ) {
|
|
||||||
$(this).addClass('hidden');
|
|
||||||
$(this).removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
else $(this).attr('aria-selected', 'true');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$('#exp').click(function() {
|
|
||||||
$('#save ol:nth-of-type(2) li').removeClass('hidden');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$('#pro').click(function() {
|
|
||||||
$('#save ol:nth-of-type(2) li').each(function() {
|
|
||||||
if( $(this).find('span').html() !== 'Transparent' ) {
|
|
||||||
$(this).addClass('hidden');
|
|
||||||
$(this).removeAttr('aria-selected');
|
|
||||||
}
|
|
||||||
else $(this).attr('aria-selected', 'true');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$('#exp').click(function() {
|
|
||||||
$('#save ol:nth-of-type(2) li').removeClass('hidden');
|
|
||||||
})
|
|
||||||
$c.last().on('mousedown', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var xy = relative(e.pageX, e.pageY);
|
|
||||||
startPoint(xy.x, xy.y);
|
|
||||||
window.active = true;
|
|
||||||
}).on('mousemove', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!window.active || settings.type == 'line') return;
|
|
||||||
var xy = relative(e.pageX, e.pageY);
|
|
||||||
drawPoint(xy.x, xy.y);
|
|
||||||
}).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);
|
|
||||||
}
|
|
||||||
|
|
||||||
if( settings.type == 'shape' ) {
|
|
||||||
var s = settings.comShape;
|
|
||||||
o.clear();
|
|
||||||
o.beginPath();
|
|
||||||
switch(s.type) {
|
|
||||||
case 'circle': {
|
|
||||||
o.fillStyle = settings.color;
|
|
||||||
o.arc(s.x, s.y, s.radius, 0, 2*Math.PI);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
o.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.points.history.push({
|
|
||||||
data: c.getImageData(0, 0, width(), height()),
|
|
||||||
points: window.points.slice(0)
|
|
||||||
})
|
|
||||||
window.points.history.last = window.points.history.length-1;
|
|
||||||
})
|
|
||||||
|
|
||||||
// Value Selector
|
|
||||||
|
|
||||||
// Single
|
|
||||||
|
|
||||||
var $single = $('form.single');
|
|
||||||
|
|
||||||
$single.find('li').click(function(e) {
|
|
||||||
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
|
||||||
$(this).attr('aria-selected', 'true');
|
|
||||||
var key = $(this).parents('form').attr('id'),
|
|
||||||
value = $(this).find('label span').html().toLowerCase(),
|
|
||||||
target = $(this).attr('data-target');
|
|
||||||
window.settings[key] = value;
|
|
||||||
|
|
||||||
$('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
|
|
||||||
$('#menu div.options > div').addClass('hidden');
|
|
||||||
$('#menu div.options > .general, #menu div.options > .'+target).removeClass('hidden');
|
|
||||||
|
|
||||||
$(this).parents('form').addClass('hidden');
|
|
||||||
})
|
|
||||||
$single.submit(function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$(this).addClass('hidden');
|
|
||||||
})
|
|
||||||
|
|
||||||
// Confirm
|
|
||||||
|
|
||||||
var $confirm = $('form.confirm');
|
|
||||||
|
|
||||||
$confirm.each(function() {
|
|
||||||
|
|
||||||
$(this).find('li').click(function(e) {
|
|
||||||
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
|
|
||||||
$(this).attr('aria-selected', 'true');
|
|
||||||
})
|
|
||||||
$(this).find('button').last().click(function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var v = $(this).parents('form').attr('id');
|
|
||||||
$(this).parents('form').find('h1').each(function(i) {
|
|
||||||
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' && key !== 'file' ) value = value.toLowerCase();
|
|
||||||
window[v][key] = value;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
$(this).parents('form').addClass('hidden');
|
|
||||||
window[v]();
|
|
||||||
})
|
|
||||||
$(this).find('button').first().click(function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$(this).parents('form').addClass('hidden');
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
// Value Selector Callers
|
|
||||||
|
|
||||||
var $btn = $('button[id^="set"]');
|
|
||||||
$btn.each(function() {
|
|
||||||
var target = /set(.*)/.exec($(this).attr('id'))[1];
|
|
||||||
// Exception for Color
|
|
||||||
if( target == 'color' ) {
|
|
||||||
return $(this).click(function() {
|
|
||||||
$('.picker').removeClass('hidden');
|
|
||||||
})
|
|
||||||
}
|
|
||||||
$(this).click(function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$('form[id="' + target + '"]').removeClass('hidden');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// Seekbar
|
|
||||||
|
|
||||||
var sliderLeft;
|
|
||||||
$('div[role="slider"] button').on('mousedown', function() {
|
|
||||||
$(this).attr('data-moving','true');
|
|
||||||
if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
|
|
||||||
}).on('mousemove', function(e) {
|
|
||||||
if( $(this).attr('data-moving') ) {
|
|
||||||
var x = parseInt(e.pageX - sliderLeft - 15);
|
|
||||||
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
|
|
||||||
var progress = $c.find('progress');
|
|
||||||
var max = +progress.attr('max');
|
|
||||||
var min = +progress.attr('min');
|
|
||||||
if( x <= max && x >= min ) {
|
|
||||||
$c.find('button').css('left', x+'%');
|
|
||||||
progress.attr('value', x);
|
|
||||||
var key = $c.attr('class');
|
|
||||||
settings[key] = x;
|
|
||||||
$('#'+ key +' span').html(x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).on('mouseup mouseleave', function() {
|
|
||||||
$(this).removeAttr('data-moving');
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// Color Picker
|
|
||||||
|
|
||||||
$('.close').click(function() {
|
|
||||||
$(this).parent().addClass('hidden');
|
|
||||||
})
|
|
||||||
|
|
||||||
// Bottom
|
|
||||||
|
|
||||||
$('#clear').click(function() {
|
|
||||||
c.clear();
|
|
||||||
var h = window.points.history;
|
|
||||||
window.points = [];
|
|
||||||
window.points.history = h;
|
|
||||||
if(window.points.history.last < window.points.history.length-1) {
|
|
||||||
window.points.history.splice(window.points.history.last+1);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.points.history.push({
|
|
||||||
data: c.getImageData(0, 0, width(), height()),
|
|
||||||
points: []
|
|
||||||
})
|
|
||||||
window.points.history.last = window.points.history.length-1;
|
|
||||||
})
|
|
||||||
|
|
||||||
$('#undo').click(undo);
|
|
||||||
$('#redo').click(redo);
|
|
||||||
|
|
||||||
$('#about').click(function() {
|
|
||||||
$('.about').removeClass('hidden');
|
|
||||||
})
|
|
||||||
|
|
||||||
@ -1,267 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
/*** ESSENTIALS ***/
|
|
||||||
|
|
||||||
function sizeAndPos() {
|
|
||||||
|
|
||||||
var data = c.getImageData(0,0, $c.width(), $c.height());
|
|
||||||
var w = $(window).width(),
|
|
||||||
h = $(window).height() - 53;
|
|
||||||
$c.attr('width', w * window.devicePixelRatio);
|
|
||||||
$c.attr('height',h * window.devicePixelRatio);
|
|
||||||
$c.css({
|
|
||||||
'width' : w,
|
|
||||||
'height' : h
|
|
||||||
});
|
|
||||||
c.clear();
|
|
||||||
c.putImageData(data, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function relative(x,y, el) {
|
|
||||||
var el = el || $c,
|
|
||||||
offset = el.offset();
|
|
||||||
return {
|
|
||||||
x : (x - offset.left) *window.devicePixelRatio,
|
|
||||||
y : (y - offset.top) * window.devicePixelRatio
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function threshold(x1, y1, x2, y2, threshold) {
|
|
||||||
var tr = threshold || 5;
|
|
||||||
if( x1 <= x2 + tr && x1 >= x2 - tr && y1 <= y2 + tr && y1 >= y2 - tr ) return true;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw(x1, y1, x2, y2, opts, overlay) {
|
|
||||||
opts = opts || {};
|
|
||||||
if( overlay ) var c = window.o;
|
|
||||||
else var c = window.c;
|
|
||||||
c.beginPath();
|
|
||||||
if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
|
|
||||||
else c.globalCompositeOperation = opts.composite || settings.composite;
|
|
||||||
c.lineCap = opts.lineCap || settings.lineCap;
|
|
||||||
c.lineJoin = opts.lineJoin || settings.lineJoin;
|
|
||||||
c.strokeStyle = opts.color || settings.color;
|
|
||||||
c.fillStyle = opts.color || settings.color;
|
|
||||||
c.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
|
|
||||||
c.moveTo(x1, y1);
|
|
||||||
c.lineTo(x2, y2);
|
|
||||||
if( !opts.noStroke ) c.stroke();
|
|
||||||
if( opts.fill ) c.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
function shape(opts, overlay) {
|
|
||||||
if(overlay || opts.type == 'mark') var c = window.o;
|
|
||||||
else var c = window.c;
|
|
||||||
c.beginPath();
|
|
||||||
c.fillStyle = opts.color || settings.color;
|
|
||||||
var type = opts.type || settings.shape;
|
|
||||||
switch(type) {
|
|
||||||
case 'mark': {
|
|
||||||
c.fillStyle = 'red';
|
|
||||||
c.arc(opts.x, opts.y, 3, 0, 2*Math.PI);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'circle': {
|
|
||||||
c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'rectangle': {
|
|
||||||
c.rect(opts.x, opts.y, opts.width, opts.height);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'square': {
|
|
||||||
c.rect(opts.x, opts.y, opts.width, opts.width);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'triangle': {
|
|
||||||
c.fillStyle = opts
|
|
||||||
c.moveTo(opts.x1, opts.y1);
|
|
||||||
c.lineTo(opts.x2, opts.y2);
|
|
||||||
c.lineTo(opts.x3, opts.y3);
|
|
||||||
c.lineTo(opts.x1, opts.y1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
c.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
function undo() {
|
|
||||||
var history = window.points.history;
|
|
||||||
if( history.last > 1 ) {
|
|
||||||
var step = history[history.last-1];
|
|
||||||
c.putImageData(step.data, 0, 0);
|
|
||||||
window.points = step.points.slice(0);
|
|
||||||
window.points.history = history;
|
|
||||||
window.points.history.last = history.last-1;
|
|
||||||
} else {
|
|
||||||
c.clear();
|
|
||||||
window.points = [];
|
|
||||||
window.points.history = history;
|
|
||||||
window.points.history.last = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function redo() {
|
|
||||||
var history = window.points.history;
|
|
||||||
if( history.last < history.length-1 ) {
|
|
||||||
var step = history[history.last+1];
|
|
||||||
c.putImageData(step.data, 0, 0);
|
|
||||||
window.points = step.points.slice(0);
|
|
||||||
window.points.history = history;
|
|
||||||
window.points.history.last = history.last+1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function width() {
|
|
||||||
return +$c.attr('width');
|
|
||||||
}
|
|
||||||
|
|
||||||
function height() {
|
|
||||||
return +$c.attr('height');
|
|
||||||
}
|
|
||||||
|
|
||||||
function dataToBlob(data) {
|
|
||||||
var binary = atob(data.split(',')[1]), array = [];
|
|
||||||
var type = data.split(',')[0].split(':')[1].split(';')[0];
|
|
||||||
for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
|
|
||||||
return new Blob([new Uint8Array(array)], {type: type});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*** END ***/
|
|
||||||
|
|
||||||
function startPoint(x, y) {
|
|
||||||
|
|
||||||
// If no previous point exists, make the first one.
|
|
||||||
if( !points.length ) points.push({x: x, y: y, type: '', start: {x: x, y: y}});
|
|
||||||
|
|
||||||
var old = points[points.length-1],
|
|
||||||
start = old.start,
|
|
||||||
current = {
|
|
||||||
x : x,
|
|
||||||
y : y,
|
|
||||||
start : old.start || {x: x, y: y},
|
|
||||||
type : settings.type
|
|
||||||
}
|
|
||||||
|
|
||||||
// Line
|
|
||||||
if( old.type !== 'line' && current.type == 'line' ) {
|
|
||||||
shape({
|
|
||||||
type: 'mark',
|
|
||||||
x: x,
|
|
||||||
y: y
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if( old.type == 'line' && current.type == 'line' ) {
|
|
||||||
if( points[points.indexOf(old)-1].type !== 'line' ) {
|
|
||||||
o.clear();
|
|
||||||
draw(old.x, old.y, x, y);
|
|
||||||
} else
|
|
||||||
draw(old.x, old.y, x, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shapes
|
|
||||||
|
|
||||||
if( current.type == 'shape' ) {
|
|
||||||
settings.shapeStart = current;
|
|
||||||
}
|
|
||||||
|
|
||||||
var thresholds = window.mobile ? [10, 5] : [5, 2];
|
|
||||||
if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
|
|
||||||
window.active = false;
|
|
||||||
points[points.length-1].type = '';
|
|
||||||
points[points.length-1].start = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
points.push(current);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawPoint(x,y) {
|
|
||||||
var capture = points[points.length-1];
|
|
||||||
|
|
||||||
switch(capture.type) {
|
|
||||||
case 'eraser': {
|
|
||||||
capture.type = 'pen';
|
|
||||||
}
|
|
||||||
case 'pen': {
|
|
||||||
draw(capture.x, capture.y, x, y);
|
|
||||||
|
|
||||||
var current = {
|
|
||||||
x : x,
|
|
||||||
y : y,
|
|
||||||
start : capture.start,
|
|
||||||
type : capture.type
|
|
||||||
}
|
|
||||||
|
|
||||||
points.push(current);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'sketch': {
|
|
||||||
draw(capture.x, capture.y, x, y);
|
|
||||||
var current = {
|
|
||||||
x : x,
|
|
||||||
y : y,
|
|
||||||
start : capture.start,
|
|
||||||
type : capture.type
|
|
||||||
}
|
|
||||||
points.push(current);
|
|
||||||
|
|
||||||
for( var i = 0, len = points.length-1; i < len; i++ ) {
|
|
||||||
if(threshold(points[i].x, points[i].y, current.x, current.y, settings.connectTelorance)) {
|
|
||||||
var x = points[i].x - current.x,
|
|
||||||
y = points[i].y - current.y;
|
|
||||||
var w = settings.lineWidth/20 > 0.2 ? settings.lineWidth/20 : 0.2;
|
|
||||||
|
|
||||||
draw(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: w})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'fur': {
|
|
||||||
draw(capture.x, capture.y, x, y);
|
|
||||||
var current = {
|
|
||||||
x : x,
|
|
||||||
y : y,
|
|
||||||
start : capture.start,
|
|
||||||
type : capture.type
|
|
||||||
}
|
|
||||||
points.push(current);
|
|
||||||
|
|
||||||
for( var i = 0, len = points.length-1; i < len; i++ ) {
|
|
||||||
if(threshold(points[i].x, points[i].y, current.x, current.y, settings.connectTelorance)) {
|
|
||||||
var x = points[i].x - current.x,
|
|
||||||
y = points[i].y - current.y;
|
|
||||||
var l = settings.furLength / 100 || 0.2;
|
|
||||||
var w = settings.lineWidth/20 > 0.2 ? settings.lineWidth/20 : 0.2;
|
|
||||||
|
|
||||||
draw(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: w})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'shape': {
|
|
||||||
o.clear();
|
|
||||||
o.beginPath();
|
|
||||||
o.fillStyle = settings.color;
|
|
||||||
var start = settings.shapeStart;
|
|
||||||
switch(settings.shape) {
|
|
||||||
case 'circle': {
|
|
||||||
var di = Math.abs(x - start.x);
|
|
||||||
o.arc(start.x, start.y, di, 0, 2*Math.PI);
|
|
||||||
settings.comShape = {
|
|
||||||
type: 'circle',
|
|
||||||
x: start.x,
|
|
||||||
y: start.y,
|
|
||||||
radius: di
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
o.fill();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
141
Web/js/main.js~
141
Web/js/main.js~
@ -1,141 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
$(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 = {
|
|
||||||
lineWidth : 2,
|
|
||||||
color : 'black',
|
|
||||||
type: 'sketch',
|
|
||||||
lineCap: 'round',
|
|
||||||
lineJoin: 'round',
|
|
||||||
furLength: 5,
|
|
||||||
connectTelorance: 40,
|
|
||||||
composite: 'source-over',
|
|
||||||
shape: 'circle',
|
|
||||||
shapeStart: {},
|
|
||||||
comShape: {}
|
|
||||||
};
|
|
||||||
window.points = [];
|
|
||||||
window.$c = $('canvas');
|
|
||||||
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
|
|
||||||
window.points.history.last = 0;
|
|
||||||
|
|
||||||
sizeAndPos();
|
|
||||||
//$(window).resize(sizeAndPos);
|
|
||||||
|
|
||||||
$('.color-picker').change(function() {
|
|
||||||
var c = $(this).find('.color').val();
|
|
||||||
settings.color = c;
|
|
||||||
$('#setcolor span').html(c);
|
|
||||||
})
|
|
||||||
$('.color').val('#000000');
|
|
||||||
|
|
||||||
yepnope({
|
|
||||||
test: window.mobile,
|
|
||||||
yep : ['js/libs/touch.js', 'js/mobile.js', 'js/libs/color-picker-touch.js'],
|
|
||||||
nope: ['js/desktop.js', 'js/libs/color-picker.js']
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
function save() {
|
|
||||||
switch(save.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.color;
|
|
||||||
c.globalCompositeOperation = 'destination-over';
|
|
||||||
c.fillRect(0, 0, width(), height());
|
|
||||||
c.fillStyle = settings.color;
|
|
||||||
c.globalCompositeOperation = settings.composite;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var data = $c[0].toDataURL();
|
|
||||||
|
|
||||||
if( save.type == 'sketchy project' ) {
|
|
||||||
if( localStorage.getItem(save['file name']) ) {
|
|
||||||
if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
|
|
||||||
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
|
|
||||||
} else {
|
|
||||||
window.open(data, '_blank').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function load() {
|
|
||||||
var file = JSON.parse(localStorage.getItem(load.file));
|
|
||||||
var img = document.createElement('img');
|
|
||||||
img.src = file.data;
|
|
||||||
img.onload = function() {
|
|
||||||
c.clearRect(0, 0, width(), height());
|
|
||||||
c.drawImage(img, 0, 0);
|
|
||||||
window.points = file.points;
|
|
||||||
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}, { data: c.getImageData(0, 0, width(), height()), points: file.points}];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.load = load;
|
|
||||||
window.save = save;
|
|
||||||
|
|
||||||
// TODO: Check for Update
|
|
||||||
|
|
||||||
var request = navigator.mozApps.getInstalled();
|
|
||||||
request.onsuccess = function() {
|
|
||||||
var app = this.result[0];
|
|
||||||
var latest = $.ajax({url:'manifest-web.webapp'});
|
|
||||||
var selfApp = navigator.mozApps.getSelf();
|
|
||||||
/*selfApp.onsuccess = function() {
|
|
||||||
if(this.result) {
|
|
||||||
latest.onload = function() {
|
|
||||||
if( this.response ) {
|
|
||||||
var lapp = JSON.parse(this.response);
|
|
||||||
alert(lapp.version);
|
|
||||||
alert(app.manifest.version);
|
|
||||||
if( lapp.version != app.manifest.version &&
|
|
||||||
confirm('A new version of this app is available, do you want to update?')) {
|
|
||||||
var ins = navigator.mozApps.install();
|
|
||||||
ins.onsuccess = function() {
|
|
||||||
alert('The app was installed successfuly');
|
|
||||||
}
|
|
||||||
ins.onerror = function() {
|
|
||||||
alert('There was an error installing app - ' + this.error.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if( !app && confirm('Do you want to Install this app?') ) {
|
|
||||||
var ins = navigator.mozApps.install('http://mdibaiee.github.io/Sketchy/Web/manifest-web.webapp');
|
|
||||||
ins.onsuccess = function() {
|
|
||||||
alert('The app was installed successfuly');
|
|
||||||
}
|
|
||||||
ins.onerror = function() {
|
|
||||||
alert('There was an error installing app')
|
|
||||||
console.log(this.error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
request.onerror = function() {
|
|
||||||
alert('An error occured while trying to check for updates');
|
|
||||||
}*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue
Block a user