more reliable color selection, bugfix regarding backend color transparency
[confetti] / static / therapy_draw.js
1 // Copyright 2016 Paul Hänsch
2 //
3 // This file is part of Confetti.
4 // 
5 // Confetti is free software: you can redistribute it and/or modify
6 // it under the terms of the GNU Affero General Public License as published by
7 // the Free Software Foundation, either version 3 of the License, or
8 // (at your option) any later version.
9 // 
10 // Confetti is distributed in the hope that it will be useful,
11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13 // GNU Affero General Public License for more details.
14 // 
15 // You should have received a copy of the GNU Affero General Public License
16 // along with Confetti.  If not, see <http://www.gnu.org/licenses/>. 
17
18 body = document.body
19 dbg = document.getElementById("jsdebug")
20 canvas = document.getElementById("canvas")
21 data=document.getElementById("image_serialize")
22
23 image = canvas.getContext("2d")
24 mouse = 0
25 image_serialize=""
26
27 // start and current coordinates of a draw
28 // serves for tracking, whether path ends close to its beginning
29 stx=0, sty=0
30 cux=0, cuy=0
31
32 function setcol(c) {
33   this.c = c
34   image.strokeStyle = c
35   image.fillStyle =  c
36   if ( c == "#FFF" ) image.lineWidth = 32
37   else image.lineWidth = 4
38   data.value += " stroke " + c + "F" + " stroke-width " + image.lineWidth
39 }
40
41
42 function relX(x){
43   if ( body.clientWidth >= 800 ){
44     return Math.floor(cscaleW * (x - canvas.offsetLeft))
45   } else { 
46     return Math.floor(cscaleW * (x - canvas.offsetLeft + window.pageXOffset))
47   }
48 }
49 function relY(y){
50   if ( body.clientWidth >= 800 ){
51     return Math.floor(cscaleH * (y - canvas.offsetTop))
52   } else { 
53     return Math.floor(cscaleH * (y - canvas.offsetTop + window.pageYOffset))
54   }
55 }
56
57 function draw(x, y) {
58   if ( mouse == 1){
59     cux=relX(x), cuy=relY(y)
60
61     image.lineTo( cux, cuy )
62     image.stroke()
63
64     image_serialize += " " + cux + "," + cuy
65   }
66 }
67
68 function drawstart(x, y) {
69   mouse = 1
70
71   cscaleW = canvas.width / canvas.clientWidth
72   cscaleH = canvas.height / canvas.clientHeight
73
74   stx=relX(x), sty=relY(y)
75
76   document.getElementsByName("color").forEach(
77     function(x, y, z){ if (x.checked) setcol(x.value); }
78   );
79
80   image.beginPath()
81   draw(x, y)  // why must this not use relative Coords ???
82
83   image_serialize = " polyline"
84 }
85
86 function drawstop() {
87  
88   // if path ends close to beginning ( < 50 px); then close path and fill
89   if ( mouse == 1 && Math.sqrt( Math.pow(stx - cux, 2) + Math.pow(sty - cuy, 2)) <= 50 && c !== "#FFF" ){
90     image.lineTo( stx, sty )
91     image.stroke()
92
93     image.globalAlpha = .5
94     image.fill()
95     image.globalAlpha = 1
96
97     image_serialize += " " + stx + "," + sty
98     data.value += " fill " + c + "8" + image_serialize
99   } else if (mouse == 1)  {
100     data.value += " fill #0000 " + image_serialize
101   }
102   dbg.innerHTML = " stx: " + stx + " cux: " + cux + " sty: " + sty + " cuy: " + cuy
103  
104   image.closePath()
105   image_serialize = ""
106   mouse = 0
107 }
108
109 window.addEventListener( 'mouseup',   function()   { drawstop() } )
110 canvas.addEventListener( 'mousedown', function(e)  { drawstart(e.clientX, e.clientY) } )
111 canvas.addEventListener( 'mousemove', function(e)  {      draw(e.clientX, e.clientY) } )
112
113 window.addEventListener( 'touchend',   function()  { drawstop() } )
114 canvas.addEventListener( 'touchstart', function(e) { drawstart(e.touches[0].clientX, e.touches[0].clientY) } )
115 canvas.addEventListener( 'touchmove',  function(e) { e.preventDefault(); draw(e.touches[0].clientX, e.touches[0].clientY) } )