You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
4.3 KiB
183 lines
4.3 KiB
//Copyright (c) 2013, Playful Invention Company.
|
|
|
|
//Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
//of this software and associated documentation files (the "Software"), to deal
|
|
//in the Software without restriction, including without limitation the rights
|
|
//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
//copies of the Software, and to permit persons to whom the Software is
|
|
//furnished to do so, subject to the following conditions:
|
|
|
|
//The above copyright notice and this permission notice shall be included in
|
|
//all copies or substantial portions of the Software.
|
|
|
|
//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
//THE SOFTWARE.
|
|
|
|
// -----
|
|
|
|
// GridPaint has been kept extremely minimal as an explicit design choice.
|
|
// If you want to add features please make a fork with a different name.
|
|
// Thanks in advance
|
|
|
|
var thumbcnvs = [];
|
|
var thumbframe;
|
|
var mode, selected=0;
|
|
var tl;
|
|
|
|
/////////////////////////
|
|
//
|
|
// Thumbnails
|
|
//
|
|
/////////////////////////
|
|
|
|
function thumbsInit(){
|
|
tl = {x0: 20, y0: 100, xd: 200, yd: 200, xn: 5};
|
|
thumbframe.style.width = '1024px';
|
|
thumbframe.style.height = '748px';
|
|
newThumbCanvases();
|
|
select(selected);
|
|
}
|
|
|
|
|
|
function newThumbCanvases(){
|
|
var x, y=tl.y0;
|
|
for(i=0;i<15;i++){
|
|
if((i%tl.xn)==0) x=tl.x0;
|
|
var cnv = newThumbCanvas(x, y);
|
|
var pos = gallery[i];
|
|
drawThumb(cnv, pos);
|
|
thumbframe.appendChild(cnv);
|
|
thumbcnvs.push(cnv);
|
|
x+=tl.xd;
|
|
if((i%tl.xn)==(tl.xn-1)) y+=tl.yd;
|
|
}
|
|
}
|
|
|
|
function newThumbCanvas(x, y){
|
|
var cnv = document.createElement('canvas');
|
|
cnv.style.position = 'absolute'
|
|
cnv.style.width = 176+'px';
|
|
cnv.style.height = 147+'px';
|
|
cnv.style.left = x+'px';
|
|
cnv.style.top = y+'px';
|
|
cnv.width = 176;
|
|
cnv.height = 147;
|
|
return cnv;
|
|
}
|
|
|
|
function drawThumb(cnv, pos){
|
|
var ctx = cnv.getContext('2d');
|
|
ctx.save();
|
|
ctx.fillStyle = 'lightblue';
|
|
ctx.scale(176/720, 176/720);
|
|
ctx.strokeStyle = '#404040';
|
|
ctx.lineWidth = 1;
|
|
for(var i=0;i<shapes.length;i++){
|
|
ctx.fillStyle= fromColorLetter(pos[i]);;
|
|
shapePath(i, ctx);
|
|
ctx.fill();
|
|
}
|
|
for(var i=0;i<shapes.length;i++){
|
|
shapePath(i, ctx);
|
|
ctx.stroke();
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
|
|
/////////////////////////
|
|
//
|
|
// Events
|
|
//
|
|
/////////////////////////
|
|
|
|
function handleThumbStart(x, y){
|
|
var n = Math.floor((y-tl.y0)/tl.yd)*tl.xn+Math.floor((x-tl.x0)/tl.xd);
|
|
if((n<0)||(n>=15)) return;
|
|
select(n);
|
|
editMode(true);
|
|
}
|
|
|
|
function handleRotate(e){
|
|
var o = window.orientation;
|
|
if((o==90)||(o==-90)) {
|
|
frame.style.width = '1024px';
|
|
frame.style.height = '748px';
|
|
editMode(true);
|
|
} else {
|
|
frame.style.width = '768px';
|
|
frame.style.height = '1004px';
|
|
selectorMode(true);
|
|
}
|
|
}
|
|
|
|
function editMode(save){
|
|
mode = 'edit';
|
|
thumbframe.style.visibility = 'hidden';
|
|
onStart = handleStart;
|
|
loadPos(selected);
|
|
changed = false;
|
|
if (save) saveGallery();
|
|
clearbtn.style.display = "inline";
|
|
}
|
|
|
|
function selectorMode(save){
|
|
mode = 'selector';
|
|
thumbframe.style.visibility = 'visible';
|
|
onStart = handleThumbStart;
|
|
if(changed) savePos(selected);
|
|
if (save) saveGallery();
|
|
clearbtn.style.display = "none";
|
|
}
|
|
|
|
|
|
function select(n){
|
|
thumbcnvs[selected].style.border = '0px';
|
|
thumbcnvs[n].style.border = '3px solid black';
|
|
selected=n;
|
|
}
|
|
|
|
/////////////////////////
|
|
//
|
|
// Persistance
|
|
//
|
|
/////////////////////////
|
|
|
|
function loadPos(n){
|
|
var pos = gallery[n];
|
|
for(var i=0;i<colors.length;i++) colors[i]= fromColorLetter(pos[i]);
|
|
for(var i=0;i<shapes.length;i++) fillPiece(i);
|
|
for(var i=0;i<shapes.length;i++) strokePiece(i);
|
|
}
|
|
|
|
function savePos(n){
|
|
var pos = posString();
|
|
drawThumb(thumbcnvs[n], pos);
|
|
gallery[n] = pos;
|
|
saveGallery();
|
|
}
|
|
|
|
function storedPos(n){
|
|
var pos = '';
|
|
for(var i=0;i<colors.length;i++) pos+='w';
|
|
return pos;
|
|
}
|
|
|
|
function posString(){
|
|
var res = '';
|
|
for(var i=0;i<colors.length;i++) res+=toColorLetter(colors[i]);
|
|
return res;
|
|
}
|
|
|
|
function timestamp(){
|
|
return Math.floor(Date.now()/1000);
|
|
}
|
|
|
|
function fromColorLetter(c){return cnames[cletters.indexOf(c)];}
|
|
function toColorLetter(c){return cletters[cnames.indexOf(c)];}
|
|
|