diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.html | 14 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.js | 172 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.html | 17 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/colorpanelpopup.js | 85 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css | 2 | ||||
-rwxr-xr-x | js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss | 2 | ||||
-rw-r--r-- | js/panels/color/colorpanelpopup.reel/img/icon_palette.jpg | bin | 0 -> 1352 bytes |
7 files changed, 121 insertions, 171 deletions
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html index 707bd637..5af6dff8 100755 --- a/js/components/colorwheel.reel/colorwheel.html +++ b/js/components/colorwheel.reel/colorwheel.html | |||
@@ -18,7 +18,11 @@ | |||
18 | "owner": { | 18 | "owner": { |
19 | "prototype": "js/components/colorwheel.reel[ColorWheel]", | 19 | "prototype": "js/components/colorwheel.reel[ColorWheel]", |
20 | "properties": { | 20 | "properties": { |
21 | "element": {"#": "colorwheel"} | 21 | "element": {"#": "colorwheel"}, |
22 | "wheel": {"#": "wheel"}, | ||
23 | "wheelSelect": {"#": "wselect"}, | ||
24 | "swatch": {"#": "swatch"}, | ||
25 | "swatchSelect": {"#": "sselect"} | ||
22 | 26 | ||
23 | } | 27 | } |
24 | } | 28 | } |
@@ -30,10 +34,10 @@ | |||
30 | <body> | 34 | <body> |
31 | 35 | ||
32 | <div data-montage-id="colorwheel" class="colorwheel"> | 36 | <div data-montage-id="colorwheel" class="colorwheel"> |
33 | <canvas></canvas> | 37 | <canvas data-montage-id="wheel"></canvas> |
34 | <canvas></canvas> | 38 | <canvas data-montage-id="swatch"></canvas> |
35 | <canvas></canvas> | 39 | <canvas data-montage-id="sselect"></canvas> |
36 | <canvas></canvas> | 40 | <canvas data-montage-id="wselect"></canvas> |
37 | </div> | 41 | </div> |
38 | 42 | ||
39 | </body> | 43 | </body> |
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js index 343422e2..0980253c 100755 --- a/js/components/colorwheel.reel/colorwheel.js +++ b/js/components/colorwheel.reel/colorwheel.js | |||
@@ -14,19 +14,16 @@ exports.ColorWheel = Montage.create(Component, { | |||
14 | //////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////// |
15 | // | 15 | // |
16 | hasTemplate: { | 16 | hasTemplate: { |
17 | enumerable: false, | ||
18 | value: true | 17 | value: true |
19 | }, | 18 | }, |
20 | //////////////////////////////////////////////////////////////////// | 19 | //////////////////////////////////////////////////////////////////// |
21 | //Value of wheel in HSV (360, 100, 100) | 20 | //Value of wheel in HSV (360, 100, 100) |
22 | _value: { | 21 | _value: { |
23 | enumerable: false, | ||
24 | value: {h: 0, s: 0, v: 0} | 22 | value: {h: 0, s: 0, v: 0} |
25 | }, | 23 | }, |
26 | //////////////////////////////////////////////////////////////////// | 24 | //////////////////////////////////////////////////////////////////// |
27 | //Value of wheel in HSV (360, 100, 100) | 25 | //Value of wheel in HSV (360, 100, 100) |
28 | value: { | 26 | value: { |
29 | enumerable: false, | ||
30 | get: function() { | 27 | get: function() { |
31 | return this._value; | 28 | return this._value; |
32 | }, | 29 | }, |
@@ -34,8 +31,8 @@ exports.ColorWheel = Montage.create(Component, { | |||
34 | this._value = value; | 31 | this._value = value; |
35 | if (this._wheelData) { | 32 | if (this._wheelData) { |
36 | if (value && !value.wasSetByCode) { | 33 | if (value && !value.wasSetByCode) { |
37 | this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360); | 34 | this.wheelSelectorAngle(value.h/this._math.TAU*360); |
38 | this.drawSwatchColor(value.h/this.element._component.math.TAU*360); | 35 | this.drawSwatchColor(value.h/this._math.TAU*360); |
39 | this.drawSwatchSelector(value.s*100, value.v*100); | 36 | this.drawSwatchSelector(value.s*100, value.v*100); |
40 | } | 37 | } |
41 | if (!this._isMouseDown) { | 38 | if (!this._isMouseDown) { |
@@ -47,14 +44,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
47 | //////////////////////////////////////////////////////////////////// | 44 | //////////////////////////////////////////////////////////////////// |
48 | //Stroke size of wheel | 45 | //Stroke size of wheel |
49 | _strokeWidth: { | 46 | _strokeWidth: { |
50 | enumerable: false, | ||
51 | value: 2 | 47 | value: 2 |
52 | }, | 48 | }, |
53 | //////////////////////////////////////////////////////////////////// | 49 | //////////////////////////////////////////////////////////////////// |
54 | //Size must be set in digits and interpreted as pixel | 50 | //Size must be set in digits and interpreted as pixel |
55 | strokeWidth: { | 51 | strokeWidth: { |
56 | enumerable: false, | 52 | get: function() { |
57 | get: function() { | ||
58 | return this._strokeWidth; | 53 | return this._strokeWidth; |
59 | }, | 54 | }, |
60 | set: function(value) { | 55 | set: function(value) { |
@@ -64,14 +59,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
64 | //////////////////////////////////////////////////////////////////// | 59 | //////////////////////////////////////////////////////////////////// |
65 | //Stroke color of wheel | 60 | //Stroke color of wheel |
66 | _strokeColor: { | 61 | _strokeColor: { |
67 | enumerable: false, | ||
68 | value: 'rgb(255, 255, 255)' | 62 | value: 'rgb(255, 255, 255)' |
69 | }, | 63 | }, |
70 | //////////////////////////////////////////////////////////////////// | 64 | //////////////////////////////////////////////////////////////////// |
71 | //Stroke only apply to wheel rim | 65 | //Stroke only apply to wheel rim |
72 | strokeColor: { | 66 | strokeColor: { |
73 | enumerable: false, | 67 | get: function() { |
74 | get: function() { | ||
75 | return this._strokeColor; | 68 | return this._strokeColor; |
76 | }, | 69 | }, |
77 | set: function(value) { | 70 | set: function(value) { |
@@ -81,14 +74,12 @@ exports.ColorWheel = Montage.create(Component, { | |||
81 | //////////////////////////////////////////////////////////////////// | 74 | //////////////////////////////////////////////////////////////////// |
82 | //Width of the rim | 75 | //Width of the rim |
83 | _rimWidth: { | 76 | _rimWidth: { |
84 | enumerable: false, | ||
85 | value: 2 | 77 | value: 2 |
86 | }, | 78 | }, |
87 | //////////////////////////////////////////////////////////////////// | 79 | //////////////////////////////////////////////////////////////////// |
88 | //Width must be set using digits interpreted as pixel | 80 | //Width must be set using digits interpreted as pixel |
89 | rimWidth: { | 81 | rimWidth: { |
90 | enumerable: false, | 82 | get: function() { |
91 | get: function() { | ||
92 | return this._rimWidth; | 83 | return this._rimWidth; |
93 | }, | 84 | }, |
94 | set: function(value) { | 85 | set: function(value) { |
@@ -97,75 +88,57 @@ exports.ColorWheel = Montage.create(Component, { | |||
97 | }, | 88 | }, |
98 | //////////////////////////////////////////////////////////////////// | 89 | //////////////////////////////////////////////////////////////////// |
99 | // | 90 | // |
91 | _math: { | ||
92 | value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180} | ||
93 | }, | ||
94 | //////////////////////////////////////////////////////////////////// | ||
95 | // | ||
100 | prepareForDraw: { | 96 | prepareForDraw: { |
101 | enumerable: false, | ||
102 | value: function() { | 97 | value: function() { |
103 | // | 98 | //Hidding component while it is drawn |
104 | this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}}; | 99 | this.element.style.opacity = 0; |
105 | // | ||
106 | this.element._component.math.PI = Math.PI, | ||
107 | this.element._component.math.TAU = Math.PI*2, | ||
108 | this.element._component.math.RADIANS = Math.PI/180; | ||
109 | } | 100 | } |
110 | }, | 101 | }, |
111 | //////////////////////////////////////////////////////////////////// | 102 | //////////////////////////////////////////////////////////////////// |
112 | // | 103 | // |
113 | willDraw: { | 104 | willDraw: { |
114 | enumerable: false, | ||
115 | value: function() { | 105 | value: function() { |
116 | // | 106 | // |
117 | this.element.style.opacity = 0; | ||
118 | // | ||
119 | var cnvs = this.element.getElementsByTagName('canvas'); | ||
120 | // | ||
121 | this.element._component.wheel.canvas = cnvs[0]; | ||
122 | this.element._component.swatch.canvas = cnvs[1]; | ||
123 | this.element._component.wheel_select.canvas = cnvs[3]; | ||
124 | this.element._component.swatch_select.canvas = cnvs[2]; | ||
125 | // | ||
126 | this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d"); | ||
127 | this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d"); | ||
128 | this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d"); | ||
129 | this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d"); | ||
130 | } | 107 | } |
131 | }, | 108 | }, |
132 | //////////////////////////////////////////////////////////////////// | 109 | //////////////////////////////////////////////////////////////////// |
133 | // | 110 | // |
134 | draw: { | 111 | draw: { |
135 | enumerable: false, | ||
136 | value: function() { | 112 | value: function() { |
137 | // | 113 | // |
138 | var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math, | 114 | var slice, i, whlctx = this.wheel.getContext("2d"); |
139 | whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas, | ||
140 | wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas; | ||
141 | //Determing radius by smallest factor of width or height | 115 | //Determing radius by smallest factor of width or height |
142 | if (this.element.offsetWidth > this.element.offsetHeight) { | 116 | if (this.element.offsetWidth > this.element.offsetHeight) { |
143 | math.diameter = this.element.offsetWidth; | 117 | this._math.diameter = this.element.offsetWidth; |
144 | } else { | 118 | } else { |
145 | math.diameter = this.element.offsetHeight; | 119 | this._math.diameter = this.element.offsetHeight; |
146 | } |