aboutsummaryrefslogtreecommitdiff
path: root/js/models
diff options
context:
space:
mode:
authorValerio Virgillito2012-04-09 10:33:35 -0700
committerValerio Virgillito2012-04-09 10:33:35 -0700
commitbd43ce383b050d03b0f92cc923c517febc66ca28 (patch)
tree91b95c6c9aef779a743b710105546a8ae74bff12 /js/models
parent86b98ea086b133f4efb247c39fc6200dcf383a65 (diff)
parentc62c5c4287a1ee8a276b32dc61f06abbc24818ec (diff)
downloadninja-bd43ce383b050d03b0f92cc923c517febc66ca28.tar.gz
Merge pull request #159 from mqg734/WebGLMaterials
3D tools, eyedropper, fill, ink-bucket, gradients and shape fixes.
Diffstat (limited to 'js/models')
-rwxr-xr-xjs/models/color-model.js56
-rwxr-xr-xjs/models/properties-3d.js50
-rwxr-xr-xjs/models/shape-model.js7
3 files changed, 70 insertions, 43 deletions
diff --git a/js/models/color-model.js b/js/models/color-model.js
index 4189fbef..764feeb5 100755
--- a/js/models/color-model.js
+++ b/js/models/color-model.js
@@ -589,18 +589,54 @@ exports.ColorModel = Montage.create(Component, {
589 } 589 }
590 }, 590 },
591 //////////////////////////////////////////////////////////////////// 591 ////////////////////////////////////////////////////////////////////
592 //Returns CSS string given a WebGL color array in [r, g, b, a] format where the values are [0,1] 592 //Returns a color object given a WebGL color array/object with gradient stops
593 webGlToCss: { 593 webGlToColor: {
594 enumerable: true, 594 enumerable: true,
595 value: function (color) { 595 value: function (c) {
596 if(color && (color.length === 4)) 596 if(c) {
597 { 597 if(c.gradientMode) {
598 return 'rgba(' + color[0]*255 + ', ' + color[1]*255 + ', ' + color[2]*255 + ', ' + color[3] +')'; 598 // Gradient
599 } 599 var i = 0,
600 else 600 len,
601 { 601 css,
602 return null; 602 stops = c.color,
603 gradient;
604
605 // Create the CSS string
606 if (c.gradientMode === 'radial') {
607 css = '-webkit-radial-gradient(center, ellipse cover';
608 } else {
609 css = '-webkit-gradient(linear, left top, right top';
610 }
611
612 //Sorting array (must be sorted for radial gradients, at least in Chrome
613 stops.sort(function(a,b){return a.position - b.position});
614 //Looping through stops in gradient to create CSS
615
616 len = stops.length;
617 for (i=0; i < len; i++) {
618 //Adding to CSS String
619 if (c.gradientMode === 'radial' && stops[i].value) {
620 css += ', '+stops[i].value.css+' '+stops[i].position+'% ';
621 } else if (stops[i].value){
622 css += ', color-stop('+stops[i].position+'%,'+stops[i].value.css+')';
623 }
624 }
625 //Closing the CSS strings
626 css += ')';
627
628 gradient = {stops: c.color, mode: c.gradientMode, gradientMode: c.gradientMode, css: css};
629 return {mode: 'gradient', value: gradient, color: gradient};
630 } else if(c.length === 4) {
631 // CSS
632 return this.application.ninja.colorController.getColorObjFromCss('rgba(' + c[0]*255 + ', '
633 + c[1]*255 + ', '
634 + c[2]*255 + ', '
635 + c[3] +')');
636 }
603 } 637 }
638
639 return null;
604 } 640 }
605 } 641 }
606 //////////////////////////////////////////////////////////////////// 642 ////////////////////////////////////////////////////////////////////
diff --git a/js/models/properties-3d.js b/js/models/properties-3d.js
index 0f82dc48..0a7cf8bb 100755
--- a/js/models/properties-3d.js
+++ b/js/models/properties-3d.js
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
5</copyright> */ 5</copyright> */
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component,
9 NJUtils = require("js/lib/NJUtils").NJUtils;
9 10
10exports.Properties3D = Montage.create(Component, { 11exports.Properties3D = Montage.create(Component, {
11 12
@@ -39,16 +40,7 @@ exports.Properties3D = Montage.create(Component, {
39 elementPlane : { value : null, enumerable: true}, 40 elementPlane : { value : null, enumerable: true},
40 41
41 init : { 42 init : {
42 value : function(elt) { 43 value : function(elt, isStage) {
43
44 this.m_azimuth = 0.0;
45 this.m_altitude = 0.0;
46
47 this.m_endAzimuth = 0.0;
48 this.m_endAltitude = 0.0;
49
50 this.m_transformCtr = null;
51 this.perspectiveDist = 1400;
52 44
53// this.m_upVector = [0,1,0]; 45// this.m_upVector = [0,1,0];
54// this.m_viewDir = [0,0,1]; 46// this.m_viewDir = [0,0,1];
@@ -57,23 +49,29 @@ exports.Properties3D = Montage.create(Component, {
57// this.m_targetPos = [0,0,0]; 49// this.m_targetPos = [0,0,0];
58// this.m_objStartPos = [0,0,0]; 50// this.m_objStartPos = [0,0,0];
59 51
60// var mat = this.application.ninja.stage.stageDeps.viewUtils.getMatrixFromElement(elt).slice(0); 52 this.matrix3d = this.application.ninja.stylesController.getMatrixFromElement(elt, isStage);
61// var elt3DInfo = MathUtils.decomposeMatrix2(mat); 53 this.perspectiveDist = this.application.ninja.stylesController.getPerspectiveDistFromElement(elt, isStage);
62// if(elt3DInfo)
63// {
64// this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG);
65// this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG);
66// this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG);
67//
68// this.x3D = ~~(elt3DInfo.translation[0]);
69// this.y3D = ~~(elt3DInfo.translation[1]);
70// this.z3D = ~~(elt3DInfo.translation[2]);
71//
72// this.matrix3d = mat;
73// }
74 54
75 return this; 55 if(this.matrix3d) {
56 var elt3DInfo = MathUtils.decomposeMatrix2(this.matrix3d);
57 if(elt3DInfo) {
58 this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG);
59 this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG);
60 this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG);
76 61
62 this.x3D = ~~(elt3DInfo.translation[0]);
63 this.y3D = ~~(elt3DInfo.translation[1]);
64 this.z3D = ~~(elt3DInfo.translation[2]);
65 }
66 } else {
67 this.matrix3d = Matrix.I(4);
68 }
69
70 if(this.perspectiveDist == null) {
71 this.perspectiveDist = 1400;
72 }
73
74 return this;
77 } 75 }
78 }, 76 },
79 77
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index ea8c2cfc..ff69ae3c 100755
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -17,15 +17,8 @@ exports.ShapeModel = Montage.create(Component, {
17 GLGeomObj: { value: null }, 17 GLGeomObj: { value: null },
18 18
19 strokeSize: { value: null }, 19 strokeSize: { value: null },
20 stroke: { value: null },
21 strokeMaterial: { value: null },
22 strokeStyle: { value: null }, 20 strokeStyle: { value: null },
23 strokeStyleIndex: { value: null }, 21 strokeStyleIndex: { value: null },
24 border: { value: null }, // Store css value for ColorController
25
26 fill: { value: null },
27 fillMaterial: { value: null },
28 background: { value: null }, // Store css value for ColorController
29 22
30 // Line-specific 23 // Line-specific
31 slope: { value: null }, 24 slope: { value: null },