aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/canvas-runtime.js4
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.html14
-rwxr-xr-xjs/components/colorwheel.reel/colorwheel.js172
-rwxr-xr-xjs/helper-classes/3D/draw-utils.js18
-rwxr-xr-xjs/lib/geom/brush-stroke.js70
-rwxr-xr-xjs/lib/geom/sub-path.js35
-rwxr-xr-xjs/mediators/element-mediator.js1
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.html17
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/colorpanelpopup.js85
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css2
-rwxr-xr-xjs/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss2
-rw-r--r--js/panels/color/colorpanelpopup.reel/img/icon_palette.jpgbin0 -> 1352 bytes
-rwxr-xr-xjs/stage/stage.reel/stage.js42
-rwxr-xr-xjs/tools/PenTool.js10
14 files changed, 233 insertions, 239 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index feb35187..6268f0bb 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -1969,7 +1969,8 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1969 if (ipColor.gradientMode){ 1969 if (ipColor.gradientMode){
1970 var position, gradient, cs, inset; //vars used in gradient calculations 1970 var position, gradient, cs, inset; //vars used in gradient calculations
1971 inset = Math.ceil( lw ) - 0.5; 1971 inset = Math.ceil( lw ) - 0.5;
1972 1972 inset=0;
1973
1973 if(ipColor.gradientMode === "radial") { 1974 if(ipColor.gradientMode === "radial") {
1974 var ww = w - 2*lw, hh = h - 2*lw; 1975 var ww = w - 2*lw, hh = h - 2*lw;
1975 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); 1976 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
@@ -2181,6 +2182,7 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
2181 if (ipColor.gradientMode){ 2182 if (ipColor.gradientMode){
2182 var position, gradient, cs, inset; //vars used in gradient calculations 2183 var position, gradient, cs, inset; //vars used in gradient calculations
2183 inset = Math.ceil( lw ) - 0.5; 2184 inset = Math.ceil( lw ) - 0.5;
2185 inset=0;
2184 2186
2185 if(ipColor.gradientMode === "radial") { 2187 if(ipColor.gradientMode === "radial") {
2186 var ww = w - 2*lw, hh = h - 2*lw; 2188 var ww = w - 2*lw, hh = h - 2*lw;
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];