462tyDi7

1var LoveStitchDesigns = {};
2
3LoveStitchDesigns.canvas = {
4
5    element: null,
6    context : null,
7    height:null,
8    width:null,
9    state:"saved",
10    name:"",
11    preRenderPalette:null,
12    location:null,
13    demo:null,
14    autosave:false,
15    autosaveTimer:null,
16    fullscreen:false,
17    finalDesign:false,
18    finalName:"",
19    raster:{
20
21        lines: 10,
22        columns:10,
23        linesT:0,
24        columnsT:0,
25        minLines:10,
26        minColumns:10,
27        maxLines:500,
28        maxColumns:500,
29        scale:75,
30        scaleT:0,
31        view:"stitches",
32        viewT:"",
33        stitchs: 5,
34        marginTop: 124,
35        marginLeft: 0,
36        ruller:{
37            smallInterval:5,
38            bigInterval:10,
39            width:5,
40            font:'10px sans-serif'
41        },
42        line:{
43            lineWidth:1,
44            lineWidthThicken:2,
45            intervalThicken:10
46        },
47        square:{
48            minWidth:2,
49            minHeight:2,
50            defaultWidth:20,
51            defaultHeight:20,
52            height:null,
53            width:null,
54            marginSymbol:2,
55            selected:{
56                line:0,
57                column:0
58            }
59        },
60        margin:{
61            width:23,
62            height:23
63        },
64        items:null,
65        lineitems:[],
66
67        create : function(){
68
69            //Creates a array of columns and lines of the raster
70            this.items = null;
71            this.lineitems = [];
72
73            this.items = new Array(this.lines);
74            for( i = 0; i < this.lines; i++) {
75                this.items[i] = new Array(this.columns);
76
77                for( j = 0; j < this.columns; j++) {
78                    this.items[i][j] = new Array(this.stitchs);
79
80                    for( k = 0; k < this.stitchs; k++) {
81                        this.items[i][j][k] = "pn0"; //Martelada pq o brush ainda não deve ter sido carregado
82                    }
83                }
84            }
85
86
87        },
88        readSymbol:function(line,column,stitch){
89            try{
90                return this.items[line][column][stitch];
91            }catch (err){
92                continue;
93            }
94
95        },
96        writeSymbolNEW: function(line,column,stitch,symbol){
97            LoveStitchDesigns.canvas.state = "unsaved";
98            status("Unsaved","important");
99            this.items[line][column][stitch] = symbol;
100        },
101        readActualSymbol: function(){
102
103            return this.items[this.square.selected.line][this.square.selected.column][LoveStitchDesigns.canvas.brush.stitch];
104        },
105        actualSymbolFullStitch:function(){
106
107            if((this.items[this.square.selected.line][this.square.selected.column][0] != LoveStitchDesigns.canvas.brush.erase) && (this.items[this.square.selected.line][this.square.selected.column][0] != 0)){
108                    return true;
109            }
110            return false;
111
112        },
113        writeActualSymbol: function(){
114            //if is full stitch erases all possible existing stitch corners
115            if(LoveStitchDesigns.canvas.brush.stitch == 0){
116
117                for(i=1;i<5;i++)
118                {
119                    this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,i,LoveStitchDesigns.canvas.brush.erase);
120                }
121
122            }
123            else{
124                this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,0,LoveStitchDesigns.canvas.brush.erase);
125            }
126
127            //if corner stitch checks if another corner needs to be erased
128            if(LoveStitchDesigns.canvas.brush.stitch == 1 || LoveStitchDesigns.canvas.brush.stitch == 3){
129                this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,2,LoveStitchDesigns.canvas.brush.erase);
130                this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,4,LoveStitchDesigns.canvas.brush.erase);
131            }
132            if(LoveStitchDesigns.canvas.brush.stitch == 2 || LoveStitchDesigns.canvas.brush.stitch == 4){
133                this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,1,LoveStitchDesigns.canvas.brush.erase);
134                this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,3,LoveStitchDesigns.canvas.brush.erase);
135            }
136
137            this.writeSymbolNEW(this.square.selected.line,this.square.selected.column,LoveStitchDesigns.canvas.brush.stitch,LoveStitchDesigns.canvas.brush.selected);
138
139        },
140        eraseSymbol:function(line,column,stitch){
141            //console.log("erase");
142            LoveStitchDesigns.canvas.raster.items[line][column][stitch] = LoveStitchDesigns.canvas.brush.erase;
143        },
144        eraseActualSymbol: function(){
145            this.eraseSymbol(this.square.selected.line,this.square.selected.column,LoveStitchDesigns.canvas.brush.stitch);
146        },
147        eraseSymbols: function(linei,linef,columni,columnf){
148            //console.log("eraseSymbols");
149            for(l = linei; l <= linef;l++){
150                for(c = columni;c <= columnf; c++)
151                {
152                    for(k = 0; k < this.stitchs; k++){
153                        //erase only the selected stitch
154                        //this.eraseSymbol(l,c,LoveStitchDesigns.canvas.brush.stitch);
155
156                        //erase all stitchs
157                        this.eraseSymbol(l,c,k);
158                    }
159
160
161                }
162            }
163        },
164
165        fillSymbols: function(linei,linef,columni,columnf){
166
167            for(l = linei; l <= linef;l++){
168                for(c = columni;c <= columnf; c++)
169                {
170
171                    this.writeSymbolNEW(l,c,LoveStitchDesigns.canvas.brush.stitch,LoveStitchDesigns.canvas.brush.selected);
172
173                }
174            }
175
176
177        },
178        drawImage: function(x,y,stitch,symbol,eraseExistant,eraseExistantFull){
179            if(symbol == null || symbol == 0) { return; }
180
181            if(this.view == "colorBlocks"){this.drawImageBlocks(x,y,stitch,symbol,eraseExistant,eraseExistantFull);}
182
183            if(this.view == "symbols"){this.drawImageSymbol(x,y,stitch,symbol,eraseExistant,eraseExistantFull);}
184
185            if(this.view == "colorAndSymbols"){
186
187                this.drawImageBlocks(x,y,stitch,symbol,eraseExistant,eraseExistantFull);
188                this.drawImageSymbol(x,y,stitch,symbol,eraseExistant,eraseExistantFull);
189            }
190
191            if(this.view == "stitches"){this.drawImageStitches(x,y,stitch,symbol,eraseExistant,eraseExistantFull);}
192
193        },
194        drawImageBlocks:function(x,y,stitch,symbol,eraseExistant,eraseExistantFull){
195
196                var i=symbol.substring(2,symbol.length);
197
198                var j=0;
199
200
201                var xi = 0;
202                var yi = 0;
203                var xf = 0;
204                var yf = 0;
205
206                xi = y * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.width;
207                yi = x * LoveStitchDesigns.canvas.raster.square.height +LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.height;
208
209                xf = LoveStitchDesigns.canvas.raster.square.width - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
210                yf = LoveStitchDesigns.canvas.raster.square.height - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
211
212
213                var xii = xi = xi - 1;
214                var yii = yi = yi - 1;
215                var xff = xf = xf + 2.5;
216                var yff = yf = yf + 2.5;
217
218                var symbolMargin = 0;
219
220                if(eraseExistant) {
221
222                    symbolMargin =0;
223
224                    if(eraseExistantFull){
225
226                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii + symbolMargin,yii + symbolMargin,xff - symbolMargin ,yff - symbolMargin);
227                    }
228                    else{
229
230                        //In case it may exist overlap of corners 2 and 4 (just when corner 3 is not null) erase the content
231                        if(stitch == 1 && (
232                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,3) == 0 ||
233                                this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,3) == LoveStitchDesigns.canvas.brush.erase))
234                        {
235                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,3*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
236                        }
237
238                        if(stitch == 2 && (
239                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,4) == 0 ||
240                                this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,4) == LoveStitchDesigns.canvas.brush.erase))
241                        {
242                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,4*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
243                        }
244
245                        if(stitch == 3 && (
246                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,1) == 0 ||
247                                this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,1) == LoveStitchDesigns.canvas.brush.erase))
248                        {
249                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,1*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
250                        }
251
252                        if(stitch == 4 && (
253                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,2) == 0 ||
254                                this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,2) == LoveStitchDesigns.canvas.brush.erase))
255                        {
256                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,2*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
257                        }
258
259
260                    }
261
262
263                }
264
265                //IE compat...
266                if(i >= 255){
267                    LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),i*16 - (255*16),stitch*16 + 80,16,16,xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
268
269                }
270                else{
271                    LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),i*16,stitch*16,16,16,xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
272                }
273
274        } ,
275        drawImageStitches:function(x,y,stitch,symbol,eraseExistant,eraseExistantFull){
276
277            var i=symbol.substring(2,symbol.length);
278
279            var j=0;
280
281
282            var xi = 0;
283            var yi = 0;
284            var xf = 0;
285            var yf = 0;
286
287            xi = y * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.width;
288            yi = x * LoveStitchDesigns.canvas.raster.square.height +LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.height;
289
290            xf = LoveStitchDesigns.canvas.raster.square.width - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
291            yf = LoveStitchDesigns.canvas.raster.square.height - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
292
293
294            var xii = xi = xi - 1;
295            var yii = yi = yi - 1;
296            var xff = xf = xf + 2.5;
297            var yff = yf = yf + 2.5;
298
299            var symbolMargin = 0;
300
301            if(eraseExistant) {
302
303                symbolMargin =0;
304
305                if(eraseExistantFull){
306
307                    LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),0,0,16,16,xii + symbolMargin,yii + symbolMargin,xff - symbolMargin ,yff - symbolMargin);
308                    //LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),2,2,2,2,xii + symbolMargin,yii + symbolMargin,xff - symbolMargin ,yff - symbolMargin);
309                }
310                else{
311
312                    //In case it may exist overlap of corners 2 and 4 (just when corner 3 is not null) erase the content
313                    if(stitch == 1 && (
314                        this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,3) == 0 ||
315                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,3) == LoveStitchDesigns.canvas.brush.erase))
316                    {
317                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),0,3*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
318                    }
319
320                    if(stitch == 2 && (
321                        this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,4) == 0 ||
322                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,4) == LoveStitchDesigns.canvas.brush.erase))
323                    {
324                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),0,4*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
325                    }
326
327                    if(stitch == 3 && (
328                        this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,1) == 0 ||
329                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,1) == LoveStitchDesigns.canvas.brush.erase))
330                    {
331                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),0,1*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
332                    }
333
334                    if(stitch == 4 && (
335                        this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,2) == 0 ||
336                            this.readSymbol(LoveStitchDesigns.canvas.raster.square.selected.line,LoveStitchDesigns.canvas.raster.square.selected.column,2) == LoveStitchDesigns.canvas.brush.erase))
337                    {
338                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),0,2*16,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
339                    }
340
341
342                }
343
344
345            }
346
347            symbolMargin = -1.0;
348
349            centervoid = 0;
350            //IE compat...
351            if(i >= 255){
352                LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),i*16  - (255*16) + centervoid,stitch*16 + 80 + centervoid,16 - (2*centervoid),16- (2*centervoid),xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
353            }
354            else{
355                LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreStitches"),i*16 +centervoid,stitch*16 + centervoid,16- (2*centervoid),16- (2*centervoid),xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
356            }
357
358
359
360
361        } ,
362        drawImageSymbol: function(x,y,stitch,symbol,eraseExistant,eraseExistantFull){
363
364
365
366
367                var i=symbol.substring(2,symbol.length);
368
369
370                var xi = 0;
371                var yi = 0;
372                var xf = 0;
373                var yf = 0;
374
375
376
377                xi = y * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.width;
378                yi = x * LoveStitchDesigns.canvas.raster.square.height +LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.height;
379
380                xf = LoveStitchDesigns.canvas.raster.square.width - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
381                yf = LoveStitchDesigns.canvas.raster.square.height - LoveStitchDesigns.canvas.raster.square.marginSymbol * 2;
382
383
384                xi = xi - 1;
385                yi = yi - 1;
386                xf = xf + 2.5;
387                yf = yf + 2.5;
388
389                var xit = xi;
390                var xft = xf;
391                var yit = yi;
392                var yft = yf;
393
394                var xii = xi;
395                var yii = yi;
396                var xff = xf;
397                var yff = yf;
398
399
400                //Stitch leftUp
401                if(stitch == 1){
402                    xf = xf / 2;
403                    yf = yf / 2;
404                }
405                //Stitch rightUp
406                if(stitch == 2){
407                    xf = xf / 2;
408                    xi = xi + xf;
409
410                    yf = yf / 2;
411                }
412                //Stich rightDown
413                if(stitch == 3){
414                    xf = xf / 2;
415                    xi = xi + xf;
416
417                    yf = yf / 2;
418                    yi = yi + yf;
419                }
420                //stitch leftDown
421                if(stitch == 4){
422
423                    xf = xf / 2;
424                    yf = yf / 2;
425                    yi = yi + yf;
426                }
427
428                var symbolMargin = 2;
429
430                //if it had already a previous symbol erase it by CLEAR background with white square (because of transparency)
431                if(eraseExistant) {
432
433                    symbolMargin -= 0.5;
434
435                    if(eraseExistantFull){
436                        if(this.view != "colorAndSymbols"){
437                        LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii + symbolMargin,yii + symbolMargin,xff - symbolMargin ,yff - symbolMargin);
438                        }
439                    }
440                    else if(this.view != "colorAndSymbols"){
441
442                        //if corner stitch checks if another corner needs to be erased
443
444
445                        if(stitch == 1 || stitch == 3){
446
447                            xff = xff / 2;
448                            xii = xii + xff;
449                            yff = yff / 2;
450
451                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii+symbolMargin,yii+symbolMargin,xff - symbolMargin,yff - symbolMargin);
452
453                            xii = xit;
454                            xff = xft;
455                            yff = yft;
456                            yii = yit;
457
458                            xff = xff / 2;
459                            yff = yff / 2;
460                            yii = yii + yff;
461
462                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii+symbolMargin,yii+symbolMargin,xff - symbolMargin,yff - symbolMargin);
463
464                        }
465                        if(stitch == 2 || stitch == 4){
466                            xff = xff / 2;
467                            yff = yff / 2;
468
469                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii+symbolMargin,yii+symbolMargin,xff - symbolMargin,yff - symbolMargin);
470
471                            xii = xit;
472                            xff = xft;
473                            yff = yft;
474                            yii = yit;
475
476                            xff = xff / 2;
477                            xii = xii + xff;
478                            yff = yff / 2;
479                            yii = yii + yff;
480
481                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xii+symbolMargin,yii+symbolMargin,xff - symbolMargin,yff - symbolMargin);
482
483                        }
484
485                        if(this.view != "colorAndSymbols"){
486                            LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreColors"),0,0,16,16,xi+symbolMargin,yi+symbolMargin,xf - symbolMargin,yf - symbolMargin);
487                        }
488
489                    }
490
491
492                }
493
494
495                symbolMargin = 2;
496                //DRAW symbol in black or white
497
498                var symbolColor = 0;
499
500                var idd = LoveStitchDesigns.palette.getSymbolbyId(i);
501
502                if(!LoveStitchDesigns.palette.getbOrw(idd) && this.view == "colorAndSymbols"){
503                    symbolColor = 1;
504                }
505
506                //IE compat...
507                if(i >= 255){
508                    LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreSymbol"),i*16 - (255*16),symbolColor*16 + 32 ,16,16,xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
509                }
510                else{
511                    LoveStitchDesigns.canvas.context.drawImage(document.getElementById("canvasPreSymbol"),i*16,symbolColor*16,16,16,xi+symbolMargin ,yi+symbolMargin,xf-(symbolMargin*2),yf-(symbolMargin*2));
512                }
513
514
515        },
516        drawTriangle:function(vertice1x,vertice1y,vertice2x,vertice2y,vertice3x,vertice3y,color){
517
518            LoveStitchDesigns.canvas.context.beginPath();
519            LoveStitchDesigns.canvas.context.moveTo(vertice1x,vertice1y);
520            LoveStitchDesigns.canvas.context.lineTo(vertice2x,vertice2y);
521            LoveStitchDesigns.canvas.context.lineTo(vertice3x,vertice3y);
522
523
524            LoveStitchDesigns.canvas.context.fillStyle = color;
525            LoveStitchDesigns.canvas.context.fill();
526        },
527        drawLineStitch:function(x,y,c,xf,yf,cf,stitch){
528
529            var color = stitch;
530
531            x = x * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.width;
532            y = y * LoveStitchDesigns.canvas.raster.square.height +LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.height;
533
534            xf = xf * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.width;
535            yf = yf * LoveStitchDesigns.canvas.raster.square.height +LoveStitchDesigns.canvas.raster.square.marginSymbol + LoveStitchDesigns.canvas.raster.margin.height;
536
537
538            var trans = 1.5;
539
540            LoveStitchDesigns.canvas.context.beginPath();
541            LoveStitchDesigns.canvas.context.moveTo(x - trans,y - trans);
542            LoveStitchDesigns.canvas.context.lineTo(xf - trans,yf - trans);
543
544
545            LoveStitchDesigns.canvas.brush.colorLine = color;
546            LoveStitchDesigns.canvas.context.lineWidth = 2.5;
547
548            // set line color
549            LoveStitchDesigns.canvas.context.strokeStyle = "#" + color;
550           //console.log(color);
551            LoveStitchDesigns.canvas.context.stroke();
552
553
554
555
556
557        },
558        drawSymbol: function(){
559
560            ////console.log(this.square.selected.line);
561            ////console.log(this.square.selected.column);
562
563            this.state = "unsaved";
564            //Just in case of mouse over raster
565            if (this.square.selected.line != null && this.square.selected.column != null)
566            {
567
568
569
570                //draw only if it does not exist already or is the eraser
571                if((this.readActualSymbol() != LoveStitchDesigns.canvas.brush.selected) || LoveStitchDesigns.canvas.brush.selected == LoveStitchDesigns.canvas.brush.erase){
572
573
574                    var stitchTemp = LoveStitchDesigns.canvas.brush.stitch;
575                    var selectedTemp = LoveStitchDesigns.canvas.brush.selected
576                    var fullToCorner = false,fullSymbol;
577
578                    //Complements the existing full stitch to a corner
579                    //Exists full stitch
580                    if(this.readSymbol(this.square.selected.line,this.square.selected.column,0) != LoveStitchDesigns.canvas.brush.erase){
581                        //New stitch is corner
582                        if(LoveStitchDesigns.canvas.brush.stitch != 0){
583                            fullToCorner = true;
584                            fullSymbol = this.readSymbol(this.square.selected.line,this.square.selected.column,0);
585                        }
586                    }
587
588                    //If two of the same corners then turn to full stitch
589                    if(LoveStitchDesigns.canvas.brush.stitch == 1 && LoveStitchDesigns.canvas.brush.selected == this.readSymbol(this.square.selected.line,this.square.selected.column,3) ){
590                        LoveStitchDesigns.canvas.brush.stitch = 0;
591                    }
592                    if(LoveStitchDesigns.canvas.brush.stitch == 2 && LoveStitchDesigns.canvas.brush.selected == this.readSymbol(this.square.selected.line,this.square.selected.column,4) ){
593                        LoveStitchDesigns.canvas.brush.stitch = 0;
594                    }
595                    if(LoveStitchDesigns.canvas.brush.stitch == 3 && LoveStitchDesigns.canvas.brush.selected == this.readSymbol(this.square.selected.line,this.square.selected.column,1) ){
596                        LoveStitchDesigns.canvas.brush.stitch = 0;
597                    }
598                    if(LoveStitchDesigns.canvas.brush.stitch == 4 && LoveStitchDesigns.canvas.brush.selected == this.readSymbol(this.square.selected.line,this.square.selected.column,2) ){
599                        LoveStitchDesigns.canvas.brush.stitch = 0;
600                    }
601
602                    var eraseFull = this.actualSymbolFullStitch();
603                    this.drawImage(this.square.selected.line,this.square.selected.column,LoveStitchDesigns.canvas.brush.stitch,LoveStitchDesigns.canvas.brush.selected,true,eraseFull);
604
605
606                    this.writeActualSymbol();
607
608                    LoveStitchDesigns.canvas.brush.stitch = stitchTemp;
609
610                    if(fullToCorner){
611
612                        var ts = 0;
613                        if(LoveStitchDesigns.canvas.brush.stitch == 1) { ts = 3; }
614                        if(LoveStitchDesigns.canvas.brush.stitch == 2) { ts = 4; }
615                        if(LoveStitchDesigns.canvas.brush.stitch == 3) { ts = 1; }
616                        if(LoveStitchDesigns.canvas.brush.stitch == 4) { ts = 2; }
617
618                        LoveStitchDesigns.canvas.brush.stitch = ts;
619                        LoveStitchDesigns.canvas.brush.selected = fullSymbol;
620
621                        eraseFull = this.actualSymbolFullStitch();
622
623                        this.drawImage(this.square.selected.line,this.square.selected.column,LoveStitchDesigns.canvas.brush.stitch,LoveStitchDesigns.canvas.brush.selected,true,eraseFull);
624                        this.writeActualSymbol();
625                    }
626
627                    this.reDrawSymbols(false,true);
628                    LoveStitchDesigns.canvas.brush.stitch = stitchTemp;
629                    LoveStitchDesigns.canvas.brush.selected = selectedTemp;
630
631                }
632
633
634
635            }
636        },
637        drawSymbolThick: function(){
638            if(LoveStitchDesigns.canvas.brush.thickness == 3) { mt = 1; }
639            if(LoveStitchDesigns.canvas.brush.thickness == 5) { mt = 2; }
640            var lt = this.square.selected.line;
641            var ct = this.square.selected.column;
642
643            this.square.selected.line -= mt;
644            this.square.selected.column -= mt;
645
646            for(var i = 0;i<LoveStitchDesigns.canvas.brush.thickness;i++){
647                for(var j = 0;j<LoveStitchDesigns.canvas.brush.thickness;j++){
648
649                    if(this.square.selected.line >= 0 &&
650                        this.square.selected.column >= 0 &&
651                        this.square.selected.line < this.lines &&
652                        this.square.selected.column < this.columns){
653                        this.drawSymbol();
654                    }
655
656                    this.square.selected.column++;
657                }
658                this.square.selected.column = ct - mt;
659                this.square.selected.line++;
660            }
661
662            this.square.selected.line = lt;
663            this.square.selected.column = ct;
664        },
665        reDrawSymbols:function(erase,onlylines){
666
667            //console.log("redraw");
668            var symb = null;
669            var selected = LoveStitchDesigns.canvas.brush.selected;
670
671            if(!erase && !onlylines){LoveStitchDesigns.canvas.erase();}
672
673            if(!onlylines){
674                for(var i = 0; i < this.lines; i++){
675                    for(var j = 0;j < this.columns; j++){
676
677                        fullStitch = false;
678
679                        for(var k = 0; k < this.stitchs && !fullStitch; k++){
680
681                            symb = this.readSymbol(i,j,k);
682
683                            //if full stitch then exits the loop
684                            //if(symb != null && symb != LoveStitchDesigns.canvas.brush.erase && symb != 0)
685                            if(symb != null  && symb != 0)
686                            {
687
688
689                                //if(symb!=0){
690
691                                if(symb == LoveStitchDesigns.canvas.brush.erase){
692                                    if(k == 0){
693                                        this.drawImage(i,j,k,symb);
694                                    }
695                                }
696                                else{
697
698                                   if(k == 0) { fullStitch = true;}
699                                   this.drawImage(i,j,k,symb);
700                                }
701                            }
702                        }
703                    }
704                }
705            }
706            //draw lines
707
708            for(var i = 0; i < this.lineitems.length; i++){
709                //console.log(this.lineitems[i]);
710
711                var x = this.lineitems[i][0][0];
712                var xf = this.lineitems[i][0][1];
713                var xc = this.lineitems[i][0][2];
714
715                var y = this.lineitems[i][1][0];
716                var yf = this.lineitems[i][1][1];
717                var yc = this.lineitems[i][1][2];
718
719                var color = this.lineitems[i][2];
720
721
722                this.drawLineStitch(x,xf,xc,y,yf,yc,color);
723                //console.log("draw");
724                //if(i > 0){i = this.lineitems.length; }
725            }
726
727
728            LoveStitchDesigns.canvas.brush.selected = selected;
729        },
730        zoom:function(e) {
731
732            this.scale = e;
733            LoveStitchDesigns.canvas.erase();
734            LoveStitchDesigns.canvas.drawBasis();
735            LoveStitchDesigns.canvas.drawRuller();
736            this.reDrawSymbols();
737
738            document.getElementById("zoom").innerHTML = e + "%";
739        },
740        move:function(xi,yi,lines,columns,xf,yf){
741
742            lines += xf;
743            columns += yf;
744
745            itemsTemp = this.items.clone();
746
747            for( i = xf, k = 0; i < lines  ; i++,k++) {
748                for( j = yf, l = 0; j < columns  ; j++,l++) {
749                    for(k = 0; k < this.stitchs; k++)
750                    {
751                        //Copies symbol from original location
752                        //TODO: Optimizar martelada por causa dos negativos de topo e esquerda
753                        try{
754
755                            itemsTemp[i][j][k] = this.items[k + xi][l + yi][k];
756                        }
757                        catch(e){}
758                    }
759
760
761                }
762            }
763
764
765            this.items = itemsTemp;
766
767            this.reDrawSymbols();
768            //redesenharSimbolos();
769
770        },
771        resize:function(lines,columns){
772            //console.log("r1");
773
774            itemsTemp = this.items.clone();
775
776            this.create();
777
778            for(i = 0; i < this.items.length && i < itemsTemp.length; i++){
779                for(j = 0; j < this.items[0].length && j < itemsTemp[0].length;j++){
780                    for(k = 0; k < this.stitchs; k++)
781                    {
782                        this.items[i][j][k] = itemsTemp[i][j][k];
783                    }
784                }
785            }
786
787            this.reDrawSymbols();
788        },
789        
790        defineView:function(type){
791
792            if(this.view != type){
793                this.view = type;
794
795                this.reDrawSymbols();
796            }
797        },
798        fillBucket:function(line,column,afectedSquare,newSquare,sl,sc){
799
800
801            //out of the raster
802            if(line < 0 || column < 0 || line >= this.lines || column >= this.columns){ return; }
803
804            if(LoveStitchDesigns.canvas.raster.items[sl][sc][0] == newSquare[0] &&
805                LoveStitchDesigns.canvas.raster.items[sl][sc][1] == newSquare[1] &&
806                LoveStitchDesigns.canvas.raster.items[sl][sc][2] == newSquare[2] &&
807                LoveStitchDesigns.canvas.raster.items[sl][sc][3] == newSquare[3] &&
808                LoveStitchDesigns.canvas.raster.items[sl][sc][4] == newSquare[4]){
809                return;
810            }
811            else if(
812                LoveStitchDesigns.canvas.raster.items[sl][sc][0] == afectedSquare[0] &&
813                LoveStitchDesigns.canvas.raster.items[sl][sc][1] == afectedSquare[1] &&
814                LoveStitchDesigns.canvas.raster.items[sl][sc][2] == afectedSquare[2] &&
815                LoveStitchDesigns.canvas.raster.items[sl][sc][3] == afectedSquare[3] &&
816                LoveStitchDesigns.canvas.raster.items[sl][sc][4] == afectedSquare[4])
817            {
818
819                this.drawSymbol();
820
821
822            }
823            else{ return;}
824
825            this.square.selected.line = line - 1;
826            this.square.selected.column = column;
827            this.fillBucket(line - 1,column,afectedSquare,newSquare,this.square.selected.line,this.square.selected.column);
828
829            this.square.selected.line = line + 1;
830            this.square.selected.column = column;
831            this.fillBucket(line + 1,column,afectedSquare,newSquare,this.square.selected.line,this.square.selected.column);
832
833            this.square.selected.line = line;
834            this.square.selected.column = column - 1;
835            this.fillBucket(line,column - 1,afectedSquare,newSquare,this.square.selected.line,this.square.selected.column);
836
837            this.square.selected.line = line;
838            this.square.selected.column = column + 1;
839            this.fillBucket(line,column + 1,afectedSquare,newSquare,this.square.selected.line,this.square.selected.column);
840
841
842        },
843        fillBucketOld:function(line,column,afectedSymbol,afectedStitch,sl,sc){
844
845            ////console.log(line + " : " + column + " : " + afectedSymbol + " : " + afectedStitch);
846
847            //out of the raster
848            if(line < 0 || column < 0 || line >= this.lines || column >= this.columns){ return; }
849            //already equal
850            if(this.readSymbol(sl,sc,afectedStitch) == LoveStitchDesigns.canvas.brush.selected && afectedSymbol != LoveStitchDesigns.canvas.brush.erase){return; }
851
852
853            var rs = this.readSymbol(line,column,afectedStitch);
854
855            this.square.selected.line = sl;
856            this.square.selected.column = sc;
857
858            //if fullstitch
859            if(afectedStitch == 0) {
860                existCorner = false;
861
862                for(var i = 1; i < 4; i++){
863                    var rst = this.readSymbol(line,column,i);
864                    ////console.log(rst);
865                    if (rst != 0 && rst != LoveStitchDesigns.canvas.brush.erase){
866                        existCorner = true;
867                    }
868                }
869
870                ////console.log(afectedStitch);
871                ////console.log(afectedSymbol);
872                ////console.log(rs);
873
874
875                if(!existCorner && rs == afectedSymbol) {
876
877
878                    ////console.log("draw");
879                    this.drawSymbol();
880
881                    this.square.selected.line = line - 1;
882                    this.square.selected.column = column;
883                    this.fillBucket(line - 1,column,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
884
885                    this.square.selected.line = line + 1;
886                    this.square.selected.column = column;
887                    this.fillBucket(line + 1,column,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
888
889                    this.square.selected.line = line;
890                    this.square.selected.column = column - 1;
891                    this.fillBucket(line,column - 1,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
892
893                    this.square.selected.line = line;
894                    this.square.selected.column = column + 1;
895                    this.fillBucket(line,column + 1,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
896
897                }
898                //else if(afectedStitch==0 && rs==afectedSymbol){
899                    //console.log("...");
900                //}
901            }
902            else{
903
904
905                if(rs == afectedSymbol ){
906
907                    this.drawSymbol();
908
909                     this.square.selected.line = line - 1;
910                     this.square.selected.column = column;
911                     this.fillBucket(line - 1,column,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
912
913                     this.square.selected.line = line + 1;
914                     this.square.selected.column = column;
915                     this.fillBucket(line + 1,column,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
916
917                     this.square.selected.line = line;
918                     this.square.selected.column = column - 1;
919                     this.fillBucket(line,column - 1,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
920
921                     this.square.selected.line = line;
922                     this.square.selected.column = column + 1;
923                     this.fillBucket(line,column + 1,afectedSymbol,afectedStitch,this.square.selected.line,this.square.selected.column);
924
925                }
926
927            }
928
929        }},
930    mouse:{
931        pressed:false,
932        drag: false,
933        position:{
934            X:0,
935            Y:0
936        }
937
938    },
939    brush:{
940        kit:"default",
941        select:false,
942        selected:"pn1",
943        lastselected:"",
944        stitch:0,
945        thickness:1,
946        eyeDrop:false,
947        fillBucket:false,
948        erase:"pn0",
949        colorsRendered:false,
950        symbolsRendered:false,
951        stitchesRendered:false,
952        kitdefault: new Array("vazio.jpg", "x.jpg", "y.jpg"),
953        beginLine: new Array(0,0,0),
954        endLine: new Array(0,0,0),
955        colorLine:"",
956        getSymbolImage:function(){
957            if(this.kit == "default") { return "img/brushes/kitdefault/" + this.kitdefault[LoveStitchDesigns.canvas.brush.selected]; }
958        },
959        getSymbolImageNEW:function(symbol){
960
961            //Temporario, isto à de estar já tudo desenhado noutra canvas para melhorar a performance
962            if(symbol == "palette-number-1") { symbol = 1; }
963            if(symbol == "palette-number-2") { symbol = 2; }
964
965
966            if(this.kit == "default") { return "../img/brushes/kitdefault/" + this.kitdefault[symbol]; }
967        },
968        define:function(){
969            this.selected = document.getElementById('brush').value;
970
971            if(LoveStitchDesigns.canvas.selection.active)
972            {
973                LoveStitchDesigns.canvas.selection.active = false;
974                LoveStitchDesigns.canvas.selection.unselect();
975            }
976        },
977        defineNEW:function(symbol){
978
979            this.selected = symbol;
980
981            if(LoveStitchDesigns.canvas.selection.active)
982            {
983
984                LoveStitchDesigns.canvas.selection.active = false;
985                LoveStitchDesigns.canvas.selection.unselect();
986
987                //selects brush
988                removeActiveButtons();
989                //$('.btselect').removeClass("active");
990                LoveStitchDesigns.canvas.selection.active = false;
991                LoveStitchDesigns.canvas.selection.unselect();
992                $('.btpencil').addClass("active");
993
994            }
995        },
996        initPalette:function(reload){
997
998            if(!reload)
999            {
1000
1001                //DMC
1002                LoveStitchDesigns.palette.loadStitchs("DMC");
1003                //this.palette = generatePaletteDMC();
1004
1005                this.colorsRendered = false;
1006                this.symbolsRendered = false;
1007                this.stitchesRendered = false;
1008
1009                this.loaded = 0;
1010
1011
1012                generatePreSymbols();
1013                generatePreColors();
1014                generatePreStitches();
1015
1016            }
1017            else
1018            {
1019                this.continuePalette();
1020            }
1021         },
1022         continuePalette:function(){
1023
1024            //LoveStitchDesigns.palette.sortColor();
1025
1026            document.getElementById('palette').innerHTML =  LoveStitchDesigns.palette.generatePaletteTable();
1027
1028
1029            copySymbols = function(){
1030
1031                for(i=0;i<LoveStitchDesigns.palette.length() ;i++){
1032
1033                    var canvas = document.getElementById("pt" + LoveStitchDesigns.palette.getId(i));
1034                    var context = canvas.getContext("2d");
1035
1036
1037                    if(LoveStitchDesigns.palette.getId(i) >= 255){
1038                        context.drawImage(document.getElementById("canvasPreSymbol"),LoveStitchDesigns.palette.getId(i)*16 - (16*255),32,16,16,0,0,16,16);
1039                    }
1040                    else{
1041                        context.drawImage(document.getElementById("canvasPreSymbol"),LoveStitchDesigns.palette.getId(i)*16,0,16,16,0,0,16,16);
1042                    }
1043
1044                }
1045            }
1046
1047            if(this.symbolsRendered){
1048
1049                copySymbols();
1050            }
1051
1052            var currentRowID, table = document.getElementById('palettetable');
1053            var rows = table.rows;
1054            var row_count = rows.length;
1055
1056
1057            for(var i = 0; i < row_count; i++) {
1058
1059                rows[i].summary = "notSelected";
1060
1061                rows[i].onclick = function() {
1062
1063
1064                    //Check if eraser is selected and unselects it
1065                    if($(".btpencilerase").hasClass("active")){
1066                       $("#btStitchX").addClass("active")
1067                       $(".btpencilerase").removeClass("active")
1068                    }
1069
1070
1071                    currentRow = this;
1072                    currentRowID = this.id;
1073
1074                    LoveStitchDesigns.canvas.brush.defineNEW(currentRowID);
1075
1076                    //Marks has selected
1077                    currentRow.style.backgroundColor = "#999";
1078                    currentRow.summary = "selected";
1079
1080                    //Erases possible selection of other rows
1081                    t = document.getElementById('palettetable');
1082                    r = t.rows;
1083                    for(var n = 0; n < r.length; n++){
1084                        if(r[n].id != currentRowID){
1085                            r[n].summary = "notSelected";
1086                            r[n].style.backgroundColor = "white";
1087                        }
1088                    }
1089
1090                };
1091
1092                rows[i].onmouseover= function(){
1093
1094                    currentRow = this;
1095
1096                    currentRow.style.backgroundColor = "#e8e8e8";
1097
1098                };
1099
1100                rows[i].onmouseout= function(){
1101                    currentRow = this;
1102                    currentRowID = this.id;
1103
1104                    if(currentRow.summary != "selected") {
1105
1106                        currentRow.style.backgroundColor = "white";
1107                    }
1108                    else
1109                    {
1110                        currentRow.style.backgroundColor = "#999";
1111                    }
1112                };
1113
1114            }
1115
1116
1117           // LoveStitchDesigns.palette.dmc.loadStitchs();
1118        },
1119        countColorUsage:function(){
1120
1121
1122            LoveStitchDesigns.palette.clearUsage();
1123
1124
1125
1126            for(i = 0; i < LoveStitchDesigns.canvas.raster.lines; i++){
1127                for(j = 0;j <  LoveStitchDesigns.canvas.raster.columns; j++){
1128
1129                    fullStitch = false;
1130
1131                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs && !fullStitch; k++){
1132
1133                        symb = LoveStitchDesigns.canvas.raster.readSymbol(i,j,k);
1134
1135
1136                        //if full stitch then exits the loop
1137                        if(symb != null && symb != LoveStitchDesigns.canvas.brush.erase)
1138                        {
1139
1140                            if(k == 0) { fullStitch = true;}
1141
1142                            if(symb!=0){
1143
1144                                var id=LoveStitchDesigns.palette.getSymbolbyId(symb.substring(2,symb.length));
1145                                LoveStitchDesigns.palette.incrementUsage(id);
1146
1147                                //this.drawImage(i,j,k,symb);
1148                            }
1149                        }
1150                    }
1151                }
1152            }
1153
1154
1155        },
1156        drawPaletteSymbols:function(){
1157            copySymbols = function(){
1158
1159                for(i=0;i<LoveStitchDesigns.palette.length();i++){
1160
1161                    try{
1162                        var canvas = document.getElementById("pt" + i);
1163                        var context = canvas.getContext("2d");
1164
1165                         //IE compat...
1166                        if(i >= 255){
1167                            context.drawImage(document.getElementById("canvasPreSymbol"),LoveStitchDesigns.palette.getId(i)*16 - (16*255),32,16,16,0,0,16,16);
1168                        }
1169                        else{
1170                            context.drawImage(document.getElementById("canvasPreSymbol"),LoveStitchDesigns.palette.getId(i)*16,0,16,16,0,0,16,16);
1171                        }
1172                    }
1173                    catch(Ex){
1174                        //console.log(i);
1175                        //console.log(Ex);
1176                    }
1177
1178
1179
1180                }
1181            }
1182            if(this.symbolsRendered){
1183                this.symbolsRendered = true;
1184                copySymbols();
1185            }
1186
1187
1188        },
1189        defineStitch:function(type){
1190
1191            switch (type){
1192                case "fullStitch": this.stitch = 0; break;
1193
1194                case "LeftUp": this.stitch = 1;     break;
1195                case "RightUp": this.stitch = 2;    break;
1196                case "RightDown": this.stitch = 3;  break;
1197                case "LeftDown": this.stitch = 4;   break;
1198
1199            }
1200
1201        }
1202    },
1203    selection:{
1204
1205        active:false,
1206        finish:false,
1207        moving:false,
1208        linei:null,
1209        columni:null,
1210        linef:null,
1211        columnf:null,
1212        copiedItems:null,
1213        movedItems:null,
1214        moveLinei:null,
1215        moveColumni:null,
1216        unselect:function(stop){
1217
1218            //this.active = false;
1219
1220
1221            LoveStitchDesigns.canvas.brush.select = false;
1222            LoveStitchDesigns.canvas.selection.finish = false;
1223            LoveStitchDesigns.canvas.redrawClean();
1224
1225            if(stop){
1226                //this.active = false;
1227                $('.btmove').removeClass("active");
1228                $('btcut').addClass("disabled-link");
1229                $('btcopy').addClass("disabled-link");
1230                $('.btselect').addClass("active");
1231            }
1232
1233        },
1234        copy:function(linei,linef,columni,columnf){
1235            lines = 1 + linef-linei;
1236            columns = 1 + columnf- columni;
1237
1238
1239            //Creates the new array of symbols
1240            this.copiedItems = null;
1241
1242            this.copiedItems = new Array(lines);
1243            for( i = 0; i < lines; i++) {
1244                this.copiedItems[i] = new Array(columns);
1245                for( j = 0; j < columns; j++) {
1246                    this.copiedItems[i][j] = new Array(this.stitchs);
1247                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++){
1248
1249
1250                        this.copiedItems[i][j][k] = LoveStitchDesigns.canvas.raster.readSymbol(linei + i,columni+ j,k);
1251                    }
1252
1253                }
1254
1255            }
1256
1257        },
1258        paste:function(linei,columni,linef,columnf){
1259
1260            //Faz paste sem ter em conta o select
1261            //console.log(linef);
1262            //console.log(columnf);
1263            //console.log(this.copiedItems.length);
1264            //console.log(this.copiedItems[0].length);
1265
1266            linef= linei + this.copiedItems.length;
1267            columnf = columni + this.copiedItems[0].length;
1268
1269
1270            if(linei != null && columni != null && this.copiedItems != null)
1271            {
1272                for( i = 0; i < this.copiedItems.length; i++) {
1273                    for( j = 0; j < this.copiedItems[0].length; j++) {
1274
1275
1276                        if(linei + i <= linef && columni + j <= columnf){
1277
1278                            for( k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++){
1279                                newSymbol = this.copiedItems[i][j][k];
1280
1281                                if(newSymbol != null && (linei + i) < LoveStitchDesigns.canvas.raster.lines && (columni + j) < LoveStitchDesigns.canvas.raster.columns){
1282                                    LoveStitchDesigns.canvas.raster.items[linei + i][columni + j][k] = newSymbol;
1283                                    LoveStitchDesigns.canvas.raster.drawImage(linei + i,columni + j,k,newSymbol);
1284                                }
1285                            }
1286                        }
1287
1288                    }
1289                }
1290
1291                LoveStitchDesigns.canvas.raster.reDrawSymbols();
1292            }
1293        },
1294        cut:function(linei,linef,columni,columnf){
1295            this.copy(linei,linef,columni,columnf);
1296
1297            for( i = linei; i <= linef; i++) {
1298                for( j = columni; j <= columnf; j++) {
1299                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++){
1300                        newSymbol = LoveStitchDesigns.canvas.brush.erase;
1301                        LoveStitchDesigns.canvas.raster.items[i][j][k] = newSymbol;
1302                    }
1303                }
1304            }
1305
1306            LoveStitchDesigns.canvas.raster.reDrawSymbols();
1307        },
1308        invert:function(linei,linef,columni,columnf,type){
1309
1310            var originalItems = LoveStitchDesigns.canvas.raster.items.clone();
1311            var ci=0,cj=0;
1312
1313            if(type == "rotate"){
1314                if(linef-linei > columnf-columni){
1315                    linef = (columnf-columni) + linei;
1316                }
1317                else
1318                {
1319                    columnf = (linef-linei) + columni;
1320                }
1321            }
1322
1323            for( i = linei; i <= linef; i++,ci++) {
1324                for( j = columni; j <= columnf; j++,cj++) {
1325                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++){
1326                        newSymbol = LoveStitchDesigns.canvas.brush.erase;
1327
1328                        if(type == "horizontal"){
1329
1330                            //console.log(i + " -> " + (linef - ci));
1331
1332                            LoveStitchDesigns.canvas.raster.items[i][j][k] = originalItems[linef - ci][j][k];
1333
1334                        }
1335                        if(type == "vertical"){
1336                            LoveStitchDesigns.canvas.raster.items[i][j][k] = originalItems[i][columnf - cj][k];
1337                        }
1338
1339                        if(type == "rotate"){
1340
1341                            //LoveStitchDesigns.canvas.raster.items[i][j][k] = originalItems[linei + cj][linef - i + columni][k];
1342                            LoveStitchDesigns.canvas.raster.items[i][j][k] = originalItems[linei + cj][linef - i + columni][k];
1343
1344                        }
1345                    }
1346                }
1347                cj=0;
1348            }
1349
1350            LoveStitchDesigns.canvas.raster.reDrawSymbols();
1351        },
1352        erase:function(linei,linef,columni,columnf){
1353
1354           //console.log(LoveStitchDesigns.canvas.raster.items);
1355
1356            for( i = linei; i <= linef; i++) {
1357                for( j = columni; j <= columnf; j++) {
1358                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++){
1359                        newSymbol = LoveStitchDesigns.canvas.brush.erase;
1360                        LoveStitchDesigns.canvas.raster.items[i][j][k] = newSymbol;
1361                    }
1362                }
1363            }
1364
1365            //console.log(LoveStitchDesigns.canvas.raster.items);
1366
1367            LoveStitchDesigns.canvas.raster.reDrawSymbols();
1368
1369            //console.log(LoveStitchDesigns.canvas.raster.items);
1370        },
1371        memorizeMoveSelection:function(linei,linef,columni,columnf){
1372
1373            this.moveLinei = linei;
1374            this.moveColumni = columni;
1375
1376            lines = 1 + linef-linei;
1377            columns = 1 + columnf- columni;
1378
1379
1380            //Creates the new array of symbols
1381            this.movedItems = null;
1382
1383            this.movedItems = new Array(lines);
1384            for( i = 0; i < lines; i++) {
1385                this.movedItems[i] = new Array(columns);
1386
1387                for( j = 0; j < columns; j++) {
1388
1389                    this.movedItems[i][j] = new Array(LoveStitchDesigns.canvas.raster.stitchs);
1390                    for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs; k++)
1391                    {
1392                        this.movedItems[i][j][k] = LoveStitchDesigns.canvas.raster.readSymbol(linei + i,columni+ j,k);
1393
1394
1395                        //Removes symbol from original raster
1396                        LoveStitchDesigns.canvas.raster.writeSymbolNEW(linei + i,columni + j,k,LoveStitchDesigns.canvas.brush.erase);
1397                    }
1398
1399                }
1400            }
1401
1402
1403        },
1404        saveMoveSelection:function(line,column){
1405
1406        var fullStitch = false;
1407
1408            for( i = 0; i < this.movedItems.length; i++) {
1409                for( j = 0; j < this.movedItems[0].length; j++) {
1410                    for( k = 0; k < LoveStitchDesigns.canvas.raster.stitchs && !fullStitch; k++){
1411                        newSymbol = this.movedItems[i][j][k];
1412
1413
1414
1415
1416
1417                        if( newSymbol != null &&
1418                            newSymbol != LoveStitchDesigns.canvas.brush.erase &&
1419                            newSymbol != 0 &&
1420                            (line + i) < LoveStitchDesigns.canvas.raster.lines &&
1421                            (column + j) < LoveStitchDesigns.canvas.raster.columns){
1422
1423
1424
1425
1426                            if(k == 0){
1427                                fullStitch = true;
1428
1429                                for(w=1;w<5;w++)
1430                                {
1431                                    LoveStitchDesigns.canvas.raster.items[line + i][column + j][w] = LoveStitchDesigns.canvas.brush.erase;
1432                                }
1433                            }
1434                            else{
1435                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][0] = LoveStitchDesigns.canvas.brush.erase;
1436                            }
1437
1438                            //if corner stitch checks if another corner needs to be erased
1439                            if(k == 1 || k == 3){
1440                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][2] = LoveStitchDesigns.canvas.brush.erase;
1441                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][4] = LoveStitchDesigns.canvas.brush.erase;
1442                            }
1443                            if(k == 2 || k == 4){
1444                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][1] = LoveStitchDesigns.canvas.brush.erase;
1445                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][3] = LoveStitchDesigns.canvas.brush.erase;
1446                            }
1447
1448                            //Generate full stitch
1449                            if(k == 3 && (LoveStitchDesigns.canvas.raster.items[line + i][column + j][1] == newSymbol)){
1450                                fullStitch = true;
1451                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][0] = newSymbol;
1452                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][1] = LoveStitchDesigns.canvas.brush.erase;
1453                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][3] = LoveStitchDesigns.canvas.brush.erase;
1454
1455
1456                            }
1457                            else if(k == 4 && (LoveStitchDesigns.canvas.raster.items[line + i][column + j][2] == newSymbol)){
1458                                fullStitch = true;
1459                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][0] = newSymbol;
1460                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][2] = LoveStitchDesigns.canvas.brush.erase;
1461                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][4] = LoveStitchDesigns.canvas.brush.erase;
1462
1463                            }
1464                            else{
1465                                LoveStitchDesigns.canvas.raster.items[line + i][column + j][k] = newSymbol;
1466                            }
1467
1468
1469                        }
1470                    }
1471                    fullStitch = false;
1472                }
1473            }
1474        },
1475        move:function(line,column){
1476
1477
1478
1479            //Draws line of selection
1480            LoveStitchDesigns.canvas.drawSelection(line,line + this.movedItems.length - 1,column,column + this.movedItems[0].length - 1);
1481
1482            if(line != null && column != null && this.movedItems != null)
1483            {
1484
1485                for( i = 0; i < this.movedItems.length; i++) {
1486                    for( j = 0; j < this.movedItems[0].length; j++) {
1487
1488                        fullStitch = false;
1489
1490                        for(k = 0; k < LoveStitchDesigns.canvas.raster.stitchs && !fullStitch; k++){
1491
1492                            newSymbol = this.movedItems[i][j][k];
1493
1494                            ////console.log(newSymbol);
1495
1496                            if(k == 0 && (newSymbol != null && newSymbol != LoveStitchDesigns.canvas.brush.erase && newSymbol != 0)) {
1497                                fullStitch = true;
1498                            }
1499
1500                            if(newSymbol != null &&
1501                                newSymbol != 0 &&
1502                                newSymbol != LoveStitchDesigns.canvas.brush.erase &&
1503                                (line + i) < LoveStitchDesigns.canvas.raster.lines &&
1504                                (column + j) < LoveStitchDesigns.canvas.raster.columns){
1505
1506                                LoveStitchDesigns.canvas.raster.drawImage(line + i,column + j,k,newSymbol);
1507
1508                            }
1509                        }
1510
1511                    }
1512                }
1513            }
1514
1515        }
1516
1517    },
1518
1519    create: function(canvas){
1520
1521        var element = document.getElementById(canvas);
1522        this.element = element;
1523
1524        this.height = element.height;
1525        this.width = element.width;
1526        this.context = this.element.getContext('2d');
1527
1528        var url = window.location.href;
1529
1530        if(url.indexOf('#') > 0){
1531            this.location = url.substr(0, url.indexOf('#'));
1532        }
1533        else{
1534            this.location = url;
1535        }
1536
1537    },
1538
1539    erase: function(){
1540
1541        this.context.save();
1542
1543        // Use the identity matrix while clearing the canvas
1544        this.context.setTransform(1, 0, 0, 1, 0, 0);
1545        this.context.clearRect(0, 0,  this.element.width, this.element.height);
1546
1547        //LoveStitchDesigns.canvas.context.fillStyle   = '#FFFFFF';
1548        //LoveStitchDesigns.canvas.context.fillRect(0,0,this.element.width, this.element.height);
1549
1550        // Restore the transform
1551        this.context.restore();
1552    },
1553
1554    drawBasis: function(paddingColumn,paddingLine){
1555
1556
1557        if(paddingLine == null){ paddingLine = 0; }
1558        if(paddingColumn == null){ paddingColumn = 0; }
1559
1560
1561        //Disable cursor
1562        this.element.onselectstart = function(){
1563            return false;
1564        }
1565
1566        this.context.save();
1567        this.context.strokeStyle = '#000';
1568
1569        //scalling of raster
1570        var width = Math.floor((this.raster.square.defaultWidth * this.raster.scale) / 100);
1571        var height = Math.floor((this.raster.square.defaultHeight * this.raster.scale) / 100);
1572        this.raster.square.width    = (width <= 0) ? this.raster.square.minWidth : width;
1573        this.raster.square.height   = (height <= 0) ? this.raster.square.minHeight : height;
1574
1575        //total size of raster
1576        //Hack +1 -> Safari drawing lines correctly
1577        this.element.width = 1 + this.raster.square.width * this.raster.columns + this.raster.margin.width * 2;
1578        this.element.height = 1 + this.raster.square.height * this.raster.lines + this.raster.margin.height * 2;
1579
1580        //blank background
1581        this.context.fillStyle = "rgb(255,255,255)";
1582        this.context.fillRect(0, 0, this.element.width, this.element.height);
1583
1584        //HACK -> 0.5 Safari Safari drawing lines correctly
1585        //draws the columns
1586
1587
1588        var linesize = (this.raster.columns * this.raster.square.width) + (this.raster.square.width);
1589        for(var x = 0.5; x < linesize; x += this.raster.square.width) {
1590
1591            this.context.beginPath();
1592
1593            //From n to n draw a thicken line
1594            var cx = x - (paddingColumn * this.raster.square.width);
1595
1596            if(((cx - 0.5) % (this.raster.square.width * this.raster.line.intervalThicken)) == 0) {
1597                this.context.lineWidth = this.raster.line.lineWidthThicken;
1598
1599            } else {
1600                this.context.lineWidth = this.raster.line.lineWidth;
1601            }
1602
1603
1604            this.context.moveTo(x + this.raster.margin.width, this.raster.margin.height);
1605            this.context.lineTo(x + this.raster.margin.width, (this.raster.lines * this.raster.square.height) + this.raster.margin.height);
1606            this.context.stroke();
1607
1608        }
1609
1610        //draws the lines
1611        var linesize = (this.raster.lines * this.raster.square.height) + (this.raster.square.height);
1612        for(var x = 0.5; x < linesize; x += this.raster.square.height) {
1613
1614            this.context.beginPath();
1615
1616            //From n to n draw a thicken line
1617            var lx = x - (paddingLine * this.raster.square.height);
1618
1619            if(((lx - 0.5) % (this.raster.square.height * this.raster.line.intervalThicken)) == 0) {
1620                this.context.lineWidth = this.raster.line.lineWidthThicken;
1621            } else {
1622                this.context.lineWidth = this.raster.line.lineWidth;
1623            }
1624
1625
1626            this.context.moveTo(this.raster.margin.width,x + this.raster.margin.height);
1627            this.context.lineTo((this.raster.columns * this.raster.square.width) + this.raster.margin.width,x + this.raster.margin.height);
1628            this.context.stroke();
1629
1630        }
1631
1632        this.context.restore();
1633    },
1634    drawLine: function(xi,yi,xf,yf){
1635
1636        this.context.moveTo(xi,yi);
1637        this.context.lineTo(xf,yf);
1638        this.context.stroke();
1639    },
1640    drawRuller: function(startingColumn,startingLine){
1641
1642        //scalling of raster
1643        var width = Math.floor((this.raster.square.defaultWidth * this.raster.scale) / 100);
1644        var height = Math.floor((this.raster.square.defaultHeight * this.raster.scale) / 100);
1645
1646        this.height = this.raster.lines * height;
1647        this.width  = this.raster.columns * width;
1648
1649
1650
1651        this.context.beginPath();
1652        this.context.lineWidth = 1;
1653
1654        //Left ruller
1655        this.drawLine(0.5,this.raster.margin.height,0.5,this.height + this.raster.margin.height);
1656        //Right ruller
1657        this.drawLine(0.5 + this.width + this.raster.margin.width * 2, this.raster.margin.height,0.5 + this.width + this.raster.margin.width * 2, this.height + this.raster.margin.height + 1);
1658        //Top ruller
1659        this.drawLine(this.raster.margin.width,0,this.width + this.raster.margin.width,0);
1660        //Bottom ruller
1661        //this.drawLine(this.raster.margin.width,this.height + 0.5 + this.raster.margin.height * 2, this.height + 0.5 + this.raster.margin.width,this.height + 0.5 + this.raster.margin.height * 2);
1662        this.drawLine(this.raster.margin.width,this.height + 0.5 + this.raster.margin.height * 2,this.width + this.raster.margin.width,this.height + 0.5 + this.raster.margin.height * 2);
1663
1664        var n = 0;
1665        var nv = 0;
1666        var rullerWidth = this.raster.ruller.width;
1667
1668        if(startingLine != null){ nv = startingLine; }
1669        if(startingColumn != null){ n = startingColumn; }
1670
1671        //Semi ruller
1672        largerRuller = (this.raster.square.width > this.raster.square.height ) ? this.raster.square.width:this.raster.square.height ;
1673        largerDimension = (this.width > this.height ) ? this.width:this.height;
1674
1675        for(var x = 0.5; x < largerDimension + largerRuller; x = x + largerRuller, n++,nv++) {
1676
1677
1678
1679            //Draw the text number of square
1680            if((n) % this.raster.ruller.smallInterval == 0 && n != 0) {
1681
1682                this.context.fillStyle = '#000';
1683                this.context.font = this.raster.ruller.font;
1684                this.textBaseline = 'bottom';
1685
1686                //top
1687                this.context.fillText(n,x + this.raster.margin.width -6,20);
1688                //bottom
1689                this.context.fillText(n,x + this.raster.margin.width -6,this.height + this.raster.margin.height * 2 - 10);
1690
1691            }
1692            //Draw the text number of square
1693            if((nv) % this.raster.ruller.smallInterval == 0 && nv != 0) {
1694
1695                this.context.fillStyle = '#000';
1696                this.context.font = this.raster.ruller.font;
1697                this.textBaseline = 'bottom';
1698
1699
1700                //left
1701                this.context.save();
1702                this.context.translate(10,x + this.raster.margin.height + 8);
1703                this.context.rotate(-Math.PI / 2);
1704                this.context.textAlign = "center";
1705                this.context.fillText(nv,this.raster.margin.height - 15,10);
1706                this.context.restore();
1707
1708                //right
1709                this.context.save();
1710                this.context.translate(this.width + this.raster.margin.width * 2 - 10, x);
1711                this.context.rotate(Math.PI / 2);
1712                this.context.textAlign = "center";
1713                this.context.fillText(nv, this.raster.margin.height, 9);
1714                this.context.restore();
1715
1716
1717            }
1718
1719
1720
1721
1722            //Draw thickest line from bigInterval
1723            if((n) % this.raster.ruller.bigInterval == 0) {
1724                rullerWidth = this.raster.ruller.width * 2;
1725            }
1726
1727            if(x < this.raster.square.width + this.width){
1728                //top ruller lines
1729                this.drawLine(x + this.raster.margin.width,0,x + this.raster.margin.width,rullerWidth / 1.5);
1730                //bottom ruller lines
1731                this.drawLine(x + this.raster.margin.width,this.height + this.raster.margin.height * 2,x + this.raster.margin.width,this.height + this.raster.margin.height * 2 - rullerWidth);
1732
1733            }
1734
1735            if(x < this.raster.square.height + this.height){
1736                //left ruller lines
1737                this.drawLine(0,x + this.raster.margin.height,rullerWidth / 1.5,x + this.raster.margin.width);
1738                //right ruller lines
1739                this.drawLine(this.width + this.raster.margin.width * 2, x + this.raster.margin.height, this.width + this.raster.margin.width * 2 - (rullerWidth / 1.5),x + this.raster.margin.height);
1740            }
1741
1742
1743
1744
1745
1746
1747            if(rullerWidth == this.raster.ruller.width * 2) { rullerWidth = this.raster.ruller.width; }
1748        }
1749
1750
1751        this.context.beginPath();
1752
1753        //Ruller center divisions demarcation
1754        this.context.lineWidth = 2.5;
1755
1756        //top
1757        this.drawLine((this.width / 2) + this.raster.margin.width + 1,0, this.width / 2 + this.raster.margin.width + 1,10);
1758        //bottom
1759        this.drawLine((this.width / 2) + this.raster.margin.width + 1,this.height + this.raster.margin.height * 2,this.width / 2 + this.raster.margin.width + 1, this.height + this.raster.margin.height * 2 - 10);
1760        //left
1761        this.drawLine(0,this.height / 2+ this.raster.margin.height + 1,10,this.height/2 + this.raster.margin.height + 1);
1762        //right
1763        this.drawLine(this.width + this.raster.margin.width *2,this.height / 2 + this.raster.margin.height + 1, this.width + this.raster.margin.width *2 -10, this.height / 2 + this.raster.margin.height + 1);
1764
1765        this.context.restore();
1766    },
1767    drawSelection: function(linei,linef,columni,columnf){
1768
1769        //Taks in account the start of the Array -> 0
1770        linef = 1 + (linef - linei);
1771        columnf = 1 + (columnf - columni);
1772
1773
1774        //Transforms coordenates to px positions
1775        //columni = (columni + 1) * LoveStitchDesigns.canvas.raster.square.width + LoveStitchDesigns.canvas.raster.margin.width / 2 - 0.5;
1776        columni = (columni * LoveStitchDesigns.canvas.raster.square.width) +LoveStitchDesigns.canvas.raster.margin.width +0.5;// + LoveStitchDesigns.canvas.raster.margin.width / 2 - 0.5;
1777
1778        //linei = (linei + 1) * LoveStitchDesigns.canvas.raster.square.height + LoveStitchDesigns.canvas.raster.margin.height / 2 - 0.5;
1779        linei = (linei  * LoveStitchDesigns.canvas.raster.square.height) +LoveStitchDesigns.canvas.raster.margin.height + 0.5;
1780
1781
1782        columnf = columnf * LoveStitchDesigns.canvas.raster.square.width;
1783        linef = linef * LoveStitchDesigns.canvas.raster.square.height;
1784
1785
1786        LoveStitchDesigns.canvas.redrawClean();
1787
1788
1789        //Draws selection rectangle
1790        var elementSelect = document.getElementById("canvasselect");
1791        var contextSelect = elementSelect.getContext('2d');
1792
1793        contextSelect.globalAlpha = 0.3;
1794        contextSelect.fillRect(columni,linei,columnf,linef);
1795
1796
1797        //contextSelect.strokeStyle = '#11416D' ;//'#f00';
1798        //contextSelect.lineWidth = 2.25;
1799
1800        //contextSelect.strokeRect(columni,linei,columnf,linef);
1801    },
1802
1803    resize:function(){
1804        //console.log("r2");
1805        this.erase();
1806        this.drawBasis();
1807        this.drawRuller();
1808    },
1809    setCursor: function(id,cursorStyle){
1810
1811        if(document.getElementById && ( elem = document.getElementById(id))) {
1812            if(elem.style){
1813                elem.style.cursor = cursorStyle;
1814
1815            }
1816
1817        }
1818    },
1819
1820    mousePosition: function(e){
1821
1822        //this.setCursor(this.context,"default");
1823
1824        //founds position of mouse
1825        if(e.pageX || e.pageY) {
1826            this.mouse.position.X = e.pageX; //+ LoveStitchDesigns.window.elementScroll.scrollLeft;
1827            this.mouse.position.Y = e.pageY; // + LoveStitchDesigns.window.elementScroll.scrollTop;
1828        } else {
1829            this.mouse.position.X = e.clientX + document.body.scrollLeft;// + document.documentElement.scrollLeft + LoveStitchDesigns.window.elementScroll.scrollLeft;
1830            this.mouse.position.Y = e.clientY + document.body.scrollTop;// + document.documentElement.scrollTop + LoveStitchDesigns.window.elementScroll.scrollTop;
1831        }
1832
1833        //this.mouse.position.X -= this.element.offsetLeft;
1834        //this.mouse.position.Y -= this.element.offsetTop;
1835        ////console.log(this.mouse.position.X);
1836        ////console.log(this.mouse.position.Y);
1837
1838    },
1839    mouseMove:function(e){
1840
1841
1842
1843        //finds position
1844        this.mousePosition(e);
1845
1846        //if mousedown than drag
1847        this.mouse.drag = true;
1848
1849        ////console.log(this.height + this.raster.margin.height + " - " + this.mouse.position.Y);
1850
1851        if((this.mouse.position.Y > this.raster.marginTop + this.raster.margin.height &&
1852            this.mouse.position.Y < ((this.raster.square.height * this.raster.lines) + this.raster.margin.height + this.raster.marginTop) &&
1853            this.mouse.position.X > this.raster.marginLeft + this.raster.margin.width &&
1854            //this.mouse.position.X < this.width - this.raster.margin.width - this.raster.marginLeft))
1855            //this.mouse.position.Y < this.height + this.raster.margin.height + this.raster.marginTop &&
1856
1857            this.mouse.position.X < ((this.raster.square.width * this.raster.columns) + this.raster.margin.width)))
1858        {
1859
1860
1861
1862            this.raster.square.selected.column = Math.floor((this.mouse.position.X - this.raster.margin.width) / this.raster.square.width) ;
1863            this.raster.square.selected.line = Math.floor((this.mouse.position.Y  - ( this.raster.marginTop + this.raster.margin.height)) / this.raster.square.height) ;
1864
1865            if(this.raster.square.selected.line + 1 <= this.raster.lines && this.raster.square.selected.column <= this.raster.columns){
1866                document.getElementById("cordquadricula").innerHTML = "<b>Column: </b>" + (this.raster.square.selected.column + 1) + " <b>Line: </b>" + (this.raster.square.selected.line + 1);
1867
1868            }
1869
1870            if(this.brush.select)
1871            {
1872
1873
1874                //Defines begin and end coordenates
1875                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.raster.square.selected.column) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.raster.square.selected.column;
1876                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.raster.square.selected.column) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.raster.square.selected.column;
1877
1878                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.raster.square.selected.line) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.raster.square.selected.line;
1879                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.raster.square.selected.line) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.raster.square.selected.line;
1880
1881                this.drawSelection(li,lf,ci,cf);
1882
1883            }
1884            else if(this.brush.line ){
1885                if(this.mouse.pressed){
1886
1887                //eraser
1888                if(this.brush.selected == "pn0"){ return; }
1889
1890                var posx = ((this.mouse.position.X - this.raster.margin.width) / this.raster.square.width);
1891                var posxm = Math.floor(posx);
1892
1893                var posy = ((this.mouse.position.Y  - ( this.raster.marginTop + this.raster.margin.height)) / this.raster.square.height);
1894                var posym = Math.floor(posy);
1895
1896
1897                //Finds corner to start line
1898                // 0 -> left
1899                // 1 -> right
1900                var posxc = ((posx - posxm) <= 0.5) ? 0:1;
1901
1902                // 0 -> top
1903                // 1 -> down
1904                var posyc = ((posy - posym) <= 0.5) ? 0:1;
1905
1906                var posf = 0;
1907                // 0 -> top left
1908                // 1 -> top right
1909                // 2 -> down right
1910                // 3 -> down left
1911                if(posxc == 0 && posyc == 0){ posf = 0; }
1912                if(posxc == 1 && posyc == 0){ posf = 1;posxm++; }
1913                if(posxc == 0 && posyc == 1){ posf = 2;posym++; }
1914                if(posxc == 1 && posyc == 1){ posf = 3;posxm++;posym++; }
1915
1916
1917                this.brush.endLine = new Array(posxm,posym,posf);
1918
1919                var color = LoveStitchDesigns.palette.getColor(this.brush.selected.substr(2,this.brush.selected.length));
1920
1921                this.raster.reDrawSymbols();
1922                this.raster.drawLineStitch(this.brush.beginLine[0],this.brush.beginLine[1],this.brush.beginLine[2],posxm,posym,posf,color);
1923
1924                }
1925
1926            }
1927            else if(this.brush.eyeDrop){
1928
1929
1930            }
1931            else if($('#context-menu').hasClass('open')){
1932                this.mouse.pressed = false;
1933                this.mouse.drag = false;
1934            }
1935            else{
1936
1937
1938                //Draws if dragging
1939                if(this.mouse.drag && this.mouse.pressed){
1940
1941                    //TODO: optimize -> pode ser melhorado armazenando ultima instrução
1942
1943                    //draws acording to brush thickness
1944                    if(LoveStitchDesigns.canvas.brush.thickness != 1){
1945                        this.raster.drawSymbolThick();
1946                    }
1947                    else{
1948                        this.raster.drawSymbol();
1949                    }
1950
1951
1952                }
1953            }
1954
1955            if(this.selection.moving){
1956
1957                this.selection.move(this.raster.square.selected.line, this.raster.square.selected.column);
1958            }
1959
1960        }
1961        else
1962        {
1963            this.raster.square.selected.line = null;
1964            this.raster.square.selected.column = null;
1965        }
1966
1967    },
1968    mouseDown:function(e){
1969
1970
1971        ////console.log(this.width + this.raster.margin.width + this.raster.marginLeft);
1972        //out of the raster
1973        if(!(this.mouse.position.Y > this.raster.marginTop + this.raster.margin.height &&
1974            this.mouse.position.Y < ((this.raster.square.height * this.raster.lines) + this.raster.margin.height + this.raster.marginTop) &&
1975            this.mouse.position.X > this.raster.marginLeft + this.raster.margin.width &&
1976            //this.mouse.position.X < this.width - this.raster.margin.width - this.raster.marginLeft))
1977            //this.mouse.position.Y < this.height + this.raster.margin.height + this.raster.marginTop &&
1978
1979            this.mouse.position.X < ((this.raster.square.width * this.raster.columns) + this.raster.margin.width)))
1980        {
1981            //console.log(this.width);
1982            //console.log(this.height);
1983            return;
1984        }
1985
1986        this.mousePosition(e);
1987
1988        //console.log("continuo");
1989        this.mouse.pressed = true;
1990
1991
1992        if (navigator.appName=="Netscape") clickType=e.which;
1993        else clickType=event.button;
1994
1995
1996        //Left button allows draw and selection
1997        if(clickType==1){
1998
1999            //Checks if is selecting
2000            if(this.selection.active) {
2001
2002                var finish = false;
2003
2004
2005
2006                if(this.selection.moving)
2007                {
2008                    this.selection.moving = false;
2009
2010                    this.selection.saveMoveSelection(this.raster.square.selected.line, this.raster.square.selected.column);
2011
2012                    this.setCursor("canvasdesign","default");
2013                    finish = true;
2014                }
2015
2016                //finish selecting or moving the selection
2017                if(this.selection.finish)
2018                {
2019
2020                    this.selection.unselect(finish);
2021                }
2022
2023
2024                if(!finish){
2025                     this.brush.select = true;
2026
2027                    this.selection.linei = this.raster.square.selected.line;
2028                    this.selection.columni = this.raster.square.selected.column;
2029                }
2030
2031
2032            }
2033            else if(this.brush.line || ($('.btpencilerase').hasClass("active") && !this.brush.fillBucket)){
2034
2035
2036                var posx = ((this.mouse.position.X - this.raster.margin.width) / this.raster.square.width);
2037                var posxm = Math.floor(posx);
2038
2039                var posy = ((this.mouse.position.Y  - ( this.raster.marginTop + this.raster.margin.height)) / this.raster.square.height);
2040                var posym = Math.floor(posy);
2041
2042                //Finds corner to start line
2043                // 0 -> left
2044                // 1 -> right
2045                var posxc = ((posx - posxm) <= 0.5) ? 0:1;
2046
2047                // 0 -> top
2048                // 1 -> down
2049                var posyc = ((posy - posym) <= 0.5) ? 0:1;
2050
2051                var posf = 0;
2052                // 0 -> top left
2053                // 1 -> top right
2054                // 2 -> down right
2055                // 3 -> down left
2056                if(posxc == 0 && posyc == 0){ posf = 0; }
2057                if(posxc == 1 && posyc == 0){ posf = 1;posxm++; }
2058                if(posxc == 1 && posyc == 1){ posf = 2;posxm++;posym++; }
2059                if(posxc == 0 && posyc == 1){ posf = 3;posym++; }
2060
2061                //Erasing line
2062                if(this.brush.selected == "pn0" ||  $('.btpencilerase').hasClass("active")){
2063
2064
2065                    for(var i = 0; i < LoveStitchDesigns.canvas.raster.lineitems.length; i++){
2066
2067                        var x = LoveStitchDesigns.canvas.raster.lineitems[i][0][0];
2068                        var y = LoveStitchDesigns.canvas.raster.lineitems[i][0][1];
2069                        var ic = LoveStitchDesigns.canvas.raster.lineitems[i][0][2];
2070
2071                        var xf = LoveStitchDesigns.canvas.raster.lineitems[i][1][0];
2072                        var yf = LoveStitchDesigns.canvas.raster.lineitems[i][1][1];
2073                        var fc = LoveStitchDesigns.canvas.raster.lineitems[i][1][2];
2074
2075                        var color = LoveStitchDesigns.canvas.raster.lineitems[i][2];
2076
2077
2078
2079                        var m = (y - yf) / (x - xf);
2080                        var ry = m * (posxm - x) + y;
2081
2082                        var minx = (x < xf) ? x : xf;
2083                        var maxx = (x > xf) ? x : xf;
2084
2085                        var miny = (y < yf) ? y : yf;
2086                        var maxy = (y > yf) ? y : yf;
2087
2088                        if(posxm >= minx && posxm <= maxx){
2089                            if(posym >= miny && posym <= maxy){
2090                                if(x == posxm){
2091                                    LoveStitchDesigns.canvas.raster.lineitems.splice(i,1);
2092                                    i--;
2093                                }
2094                                else if(Math.round(ry) == posym) {
2095                                    //erase line
2096                                    LoveStitchDesigns.canvas.raster.lineitems.splice(i,1);
2097                                    i--;
2098                                }
2099                            }
2100                        }
2101
2102
2103
2104                    }
2105
2106                    LoveStitchDesigns.canvas.raster.reDrawSymbols();
2107
2108
2109                }
2110                //Drawing lin
2111                else
2112                {
2113
2114
2115                    this.brush.beginLine[0] = posxm;
2116                    this.brush.beginLine[1] = posym;
2117                    this.brush.beginLine[2] = posf;
2118                }
2119
2120
2121
2122
2123
2124            }
2125            else if(this.brush.eyeDrop){
2126
2127                $("#"+this.raster.readActualSymbol()).click();
2128
2129                var url = LoveStitchDesigns.canvas.location;
2130
2131                var sx = window.scrollX;
2132                var sy = window.scrollY;
2133
2134                location.href = url + "#" +this.raster.readActualSymbol();
2135                window.scrollTo(sx,sy);//sy;
2136
2137                this.brush.eyeDrop = false;
2138
2139                 $('#eyedrop').removeClass("active");
2140
2141            }
2142            else if(this.brush.fillBucket){
2143
2144                newsquare = new Array(LoveStitchDesigns.canvas.brush.erase,LoveStitchDesigns.canvas.brush.erase,LoveStitchDesigns.canvas.brush.erase,LoveStitchDesigns.canvas.brush.erase,LoveStitchDesigns.canvas.brush.erase);
2145                newsquare[LoveStitchDesigns.canvas.brush.stitch] = LoveStitchDesigns.canvas.brush.selected;
2146
2147                affectedsquare = new Array();
2148                affectedsquare = this.raster.items[this.raster.square.selected.line][this.raster.square.selected.column].clone();
2149
2150                this.raster.fillBucket(this.raster.square.selected.line,this.raster.square.selected.column,affectedsquare,newsquare,this.raster.square.selected.line,this.raster.square.selected.column);
2151            }
2152            else if($('#context-menu').hasClass('open')){
2153
2154            }
2155            else{
2156
2157
2158
2159                if(LoveStitchDesigns.canvas.brush.thickness != 1){
2160
2161                    this.raster.drawSymbolThick();
2162
2163                }
2164                else{
2165                    this.raster.drawSymbol();
2166
2167                }
2168            }
2169        }
2170        //Context Menu
2171        else
2172        {
2173
2174            //Not selecting
2175            if(!this.selection.active){
2176                $('.btcut').addClass("disabled-link");
2177                $('.btcopy').addClass("disabled-link");
2178                 $('.btmove').addClass("disabled-link");
2179
2180                $('.btinverth').addClass("disabled-link");
2181                $('.btinvertv').addClass("disabled-link");
2182                 $('.btrotate').addClass("disabled-link");
2183
2184            }
2185            else
2186            {
2187                $('.btcut').removeClass("disabled-link");
2188                $('.btcopy').removeClass("disabled-link");
2189
2190                $('.btinverth').removeClass("disabled-link");
2191                $('.btinvertv').removeClass("disabled-link");
2192                $('.btrotate').removeClass("disabled-link");
2193            }
2194
2195            $('.context').contextmenu();
2196            this.mouse.pressed = false;
2197        }
2198
2199    },
2200    mouseUp:function() {
2201
2202
2203        this.mouse.pressed = false;
2204        this.mouse.drag = false;
2205
2206        if( LoveStitchDesigns.canvas.selection.active){
2207
2208
2209            //TODO: seleciona o que é para copiar
2210            if(this.brush.select){
2211
2212                LoveStitchDesigns.canvas.selection.columnf = Math.floor((this.mouse.position.X - this.raster.margin.width) / this.raster.square.width);
2213                LoveStitchDesigns.canvas.selection.linef = Math.floor((this.mouse.position.Y - this.raster.margin.height - this.raster.marginTop) / this.raster.square.height);
2214
2215                //Acerta com valores maximos e minimos
2216                if(LoveStitchDesigns.canvas.selection.columnf > LoveStitchDesigns.canvas.raster.columns) {LoveStitchDesigns.canvas.selection.columnf = LoveStitchDesigns.canvas.raster.columns - 1; }
2217                if(LoveStitchDesigns.canvas.selection.columnf < 0) {LoveStitchDesigns.canvas.selection.columnf = 0; }
2218
2219                if(LoveStitchDesigns.canvas.selection.linef > LoveStitchDesigns.canvas.raster.lines){LoveStitchDesigns.canvas.selection.linef = LoveStitchDesigns.canvas.raster.lines - 1;}
2220                if(LoveStitchDesigns.canvas.selection.linef < 0){LoveStitchDesigns.canvas.selection.linef = 0; }
2221            }
2222
2223
2224
2225            this.brush.select = false;
2226            this.selection.active = true;
2227            LoveStitchDesigns.canvas.selection.finish = true;
2228
2229
2230
2231        }
2232        else if(this.brush.line){
2233
2234            if(this.brush.selected != "pn0"){
2235
2236                var line = new Array(this.brush.beginLine, this.brush.endLine,this.brush.colorLine);
2237
2238                //console.log(line);
2239                LoveStitchDesigns.canvas.raster.lineitems.push(line.clone());
2240                //console.log(LoveStitchDesigns.canvas.raster.lineitems.clone());
2241
2242                //LoveStitchDesigns.state.add(LoveStitchDesigns.canvas.raster.lineitems.clone(),"lines");
2243
2244            var memStack = new Array(LoveStitchDesigns.canvas.raster.items.clone(),LoveStitchDesigns.canvas.raster.lineitems.clone())
2245            LoveStitchDesigns.state.add(memStack);
2246
2247
2248            }
2249        }
2250    },
2251
2252    contextMenuClick:function(action, atr,posx,posy,posdocX,posdocY){
2253        /*
2254         //console.log(action);
2255         //console.log(atr);
2256         //console.log(posx);
2257         //console.log(posy);
2258         //console.log(posdocX);
2259         //console.log(posdocY);
2260         */
2261
2262        //Delete
2263        if(action == "delete"){
2264
2265            //console.log("delete");
2266            //With selection
2267            if(this.selection.active){
2268
2269
2270                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2271                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2272
2273                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2274                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2275
2276
2277                this.raster.eraseSymbols(li,lf,ci,cf);
2278            }
2279            //without selection
2280            else
2281            {
2282                this.raster.eraseActualSymbol();
2283
2284
2285            }
2286
2287            this.raster.reDrawSymbols();
2288        }
2289        if(action == "fill" ) {
2290            //With selection
2291
2292            if(this.selection.active){
2293
2294                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2295                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2296
2297                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2298                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2299
2300                this.raster.fillSymbols(li,lf,ci,cf);
2301            }
2302            //without selection
2303            else
2304            {
2305                this.raster.drawSymbol();
2306
2307            }
2308
2309            this.raster.reDrawSymbols();
2310        }
2311        if(action == "copy"){
2312            //console.log("copy");
2313
2314            if(this.selection.active){
2315                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2316                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2317
2318                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2319                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2320
2321                this.selection.copy(li,lf,ci,cf);
2322            }
2323        }
2324        if(action == "paste"){
2325            //console.log("paste");
2326
2327
2328            this.selection.paste(this.raster.square.selected.line,this.raster.square.selected.column);
2329
2330        }
2331        if(action == "cut"){
2332            //console.log("cut");
2333
2334            if(this.selection.active){
2335
2336
2337                //mouse move cursor
2338                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2339                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2340
2341                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2342                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2343
2344                this.selection.cut(li,lf,ci,cf);
2345            }
2346
2347        }
2348        if(action == "move"){
2349            //console.log("move");
2350
2351            if(this.selection.active){
2352
2353
2354                this.setCursor("canvasdesign","move");
2355                this.selection.moving = true;
2356
2357                ci = (LoveStitchDesigns.canvas.selection.columni < LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2358                cf = (LoveStitchDesigns.canvas.selection.columni > LoveStitchDesigns.canvas.selection.columnf) ? LoveStitchDesigns.canvas.selection.columni : LoveStitchDesigns.canvas.selection.columnf;
2359
2360                li = (LoveStitchDesigns.canvas.selection.linei < LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2361                lf = (LoveStitchDesigns.canvas.selection.linei > LoveStitchDesigns.canvas.selection.linef) ? LoveStitchDesigns.canvas.selection.linei : LoveStitchDesigns.canvas.selection.linef;
2362
2363                this.selection.memorizeMoveSelection(li,lf,ci,cf);
2364            }
2365        }
2366        else
2367        {
2368            this.selection.moving = false;
2369            this.setCursor("canvasdesign","hand");
2370        }
2371    },
2372    saveImage:function(){
2373
2374        $.getScript("js/CanvasSaver.js", function() {
2375
2376            var cs = new CanvasSaver('func/saveImage.php');
2377            cs.savePNG(LoveStitchDesigns.canvas.element, "imagem");
2378
2379        })
2380
2381    },
2382    //Just redraw the selection
2383    redrawClean:function(){
2384
2385
2386        var elementSelection = document.getElementById("canvasselect");
2387        var contextSelection = elementSelection.getContext('2d');
2388        contextSelection.width = contextSelection.width;
2389
2390        contextSelection.save();
2391
2392        // Use the identity matrix while clearing the canvas
2393        contextSelection.setTransform(1, 0, 0, 1, 0, 0);
2394        contextSelection.clearRect(0, 0, elementSelection.width, elementSelection.height);
2395
2396        // Restore the transform
2397        contextSelection.restore();
2398
2399
2400
2401        //LoveStitchDesigns.canvas.drawBasis();
2402        //LoveStitchDesigns.canvas.drawRuller();
2403        LoveStitchDesigns.canvas.raster.reDrawSymbols();
2404
2405    }
2406};