/
Toolbar.js
50 lines (40 loc) · 1.22 KB
/
Toolbar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function Toolbar() {
}
Toolbar.container = document.getElementById('toolbar');
Toolbar.tools = {
swatch: new Tool('swatch', 64, 64)
}
Toolbar.setSwatch = function(canvas) {
var c = document.createElement('canvas');
c.width = canvas.width;
c.height = canvas.height;
c.getContext('2d').drawImage(canvas, 0,0,c.width, c.height);
Toolbar.activeSwatch = c;
Toolbar.tools.swatch.render(c);
}
function Tool(name, w, h) {
this.tag = document.createElement('div');
this.tag.className = 'tool';
this.tag.style.width = (w || 20) + 'px';
this.tag.style.height = (h || 20) + 'px';
this.rotation = 0;
this.tag.addEventListener('click', () => this.rotate(), false);
Toolbar.container.appendChild(this.tag);
}
Tool.prototype.render = function(content) {
if(this.content) {
this.tag.removeChild(this.content);
}
this.content = content;
this.tag.appendChild(content);
return this;
}
Tool.prototype.rotate = function() {
this.rotation += Math.PI/2;
var w = this.content.width, h = this.content.height;
var c = this.content.getContext('2d');
c.translate(w/2, h/2);
c.rotate(Math.PI/2);
c.translate(-w/2, -h/2);
c.drawImage(this.content,-w/2, -h/2,w, h);
}