diff options
-rw-r--r-- | assets/canvas-runtime.js | 4 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.html | 14 | ||||
-rwxr-xr-x | js/components/colorwheel.reel/colorwheel.js | 172 | ||||
-rwxr-xr-x | js/helper-classes/3D/draw-utils.js | 18 | ||||
-rw-r--r-- | js/io/templates/descriptor.json | 7 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 70 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 35 | ||||
-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 | |||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 42 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 10 |
14 files changed, 238 insertions, 240 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index cd673854..091d8b7a 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -2320,7 +2320,8 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
2320 | if (ipColor.gradientMode){ | 2320 | if (ipColor.gradientMode){ |
2321 | var position, gradient, cs, inset; //vars used in gradient calculations | 2321 | var position, gradient, cs, inset; //vars used in gradient calculations |
2322 | inset = Math.ceil( lw ) - 0.5; | 2322 | inset = Math.ceil( lw ) - 0.5; |
2323 | 2323 | inset=0; | |
2324 | |||
2324 | if(ipColor.gradientMode === "radial") { | 2325 | if(ipColor.gradientMode === "radial") { |
2325 | var ww = w - 2*lw, hh = h - 2*lw; | 2326 | var ww = w - 2*lw, hh = h - 2*lw; |
2326 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); | 2327 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); |
@@ -2532,6 +2533,7 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
2532 | if (ipColor.gradientMode){ | 2533 | if (ipColor.gradientMode){ |
2533 | var position, gradient, cs, inset; //vars used in gradient calculations | 2534 | var position, gradient, cs, inset; //vars used in gradient calculations |
2534 | inset = Math.ceil( lw ) - 0.5; | 2535 | inset = Math.ceil( lw ) - 0.5; |
2536 | inset=0; | ||
2535 | 2537 | ||
2536 | if(ipColor.gradientMode === "radial") { | 2538 | if(ipColor.gradientMode === "radial") { |
2537 | var ww = w - 2*lw, hh = h - 2*lw; | 2539 | 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 | // | ||