diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/NJUtils.js | 112 | ||||
-rwxr-xr-x | js/lib/drawing/world.js | 11 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 61 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 59 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 40 |
5 files changed, 241 insertions, 42 deletions
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index dae128e4..5aaeb5f2 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js | |||
@@ -5,16 +5,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component, | ||
8 | Uuid = require("montage/core/uuid").Uuid, | 9 | Uuid = require("montage/core/uuid").Uuid, |
9 | ElementModel = require("js/models/element-model").ElementModel, | 10 | ElementModel = require("js/models/element-model").ElementModel, |
10 | Properties3D = require("js/models/properties-3d").Properties3D, | 11 | Properties3D = require("js/models/properties-3d").Properties3D, |
11 | ShapeModel = require("js/models/shape-model").ShapeModel, | 12 | ShapeModel = require("js/models/shape-model").ShapeModel, |
12 | ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; | 13 | ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; |
13 | 14 | ||
14 | exports.NJUtils = Object.create(Object.prototype, { | 15 | exports.NJUtils = Montage.create(Component, { |
15 | 16 | ||
16 | |||
17 | |||
18 | /* =============== DOM Access ================ */ | 17 | /* =============== DOM Access ================ */ |
19 | 18 | ||
20 | ///// Quick "getElementById" | 19 | ///// Quick "getElementById" |
@@ -54,13 +53,25 @@ exports.NJUtils = Object.create(Object.prototype, { | |||
54 | return document.createTextNode(text); | 53 | return document.createTextNode(text); |
55 | } | 54 | } |
56 | }, | 55 | }, |
57 | 56 | ||
58 | ///// Quick "createElement" function "attr" can be classname or object | 57 | ///// Quick "createElement" function "attr" can be classname or object |
59 | ///// with attribute key/values | 58 | ///// with attribute key/values |
60 | ///// Suppor for data attributes | 59 | ///// Support for data attributes |
61 | make : { | 60 | ///// Support user/ninja document |
62 | value: function(tag, attr) { | 61 | make: { |
63 | var el = document.createElement(tag); | 62 | value: function(tag, attr, doc) { |
63 | var _doc, el; | ||
64 | |||
65 | _doc = doc ? doc._document : document; | ||
66 | el = _doc.createElement(tag); | ||
67 | this.decor(el, attr); | ||
68 | |||
69 | return el; | ||
70 | } | ||
71 | }, | ||
72 | |||
73 | decor: { | ||
74 | value: function(el, attr) { | ||
64 | if (typeof attr === 'object') { | 75 | if (typeof attr === 'object') { |
65 | for (var a in attr) { | 76 | for (var a in attr) { |
66 | if (attr.hasOwnProperty(a)) { | 77 | if (attr.hasOwnProperty(a)) { |
@@ -74,19 +85,82 @@ exports.NJUtils = Object.create(Object.prototype, { | |||
74 | } else if (typeof attr === 'string') { | 85 | } else if (typeof attr === 'string') { |
75 | el.className = (el.className + ' ' + attr).trim(); | 86 | el.className = (el.className + ' ' + attr).trim(); |
76 | } | 87 | } |
77 | |||
78 | return el; | ||
79 | } | 88 | } |
80 | }, | 89 | }, |
81 | 90 | ||
82 | ///// Element factory function for Ninja Elements | 91 | createModel: { |
83 | ///// selection is the string displayed in the PI | 92 | value: function(el) { |
84 | makeNJElement: { | 93 | el.elementModel = Montage.create(ElementModel).initialize(el); |
85 | value: function(tag, selection, controller, attr, isShape) { | 94 | } |
86 | var el = this.make(tag, attr); | 95 | }, |
87 | this.makeElementModel(el, selection, controller, isShape); | ||
88 | 96 | ||
89 | return el; | 97 | createModelWithShape: { |
98 | value: function(el, selection) { | ||
99 | el.elementModel = Montage.create(ElementModel).initialize(el, true, selection); | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | createModelWithSelection: { | ||
104 | value: function(el, selection) { | ||
105 | el.elementModel = Montage.create(ElementModel).initialize(el, false, selection); | ||
106 | } | ||
107 | }, | ||
108 | |||
109 | createModelForComponent: { | ||
110 | value: function(el, selection) { | ||
111 | el.elementModel = Montage.create(ElementModel).initialize(el, false, selection, true); | ||
112 | } | ||
113 | }, | ||
114 | |||
115 | // TODO: Find a better place for this method | ||
116 | stylesFromDraw: { | ||
117 | value: function(element, width, height, drawData, pos) { | ||
118 | var styles = {}; | ||
119 | |||
120 | styles['position'] = pos ? pos: "absolute"; | ||
121 | styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px'; | ||
122 | styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px'; | ||
123 | styles['width'] = width + 'px'; | ||
124 | styles['height'] = height + 'px'; | ||
125 | |||
126 | // TODO: Check why Canvas has different tranform styles from default. | ||
127 | if(!MathUtils.isIdentityMatrix(drawData.planeMat)) { | ||
128 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
129 | styles['-webkit-transform'] = this.getElementMatrix(drawData.planeMat, drawData.midPt); | ||
130 | } | ||
131 | |||
132 | if(element.nodeName === "CANVAS") { | ||
133 | element.width = width; | ||
134 | element.height = height; | ||
135 | delete styles['width']; | ||
136 | delete styles['height']; | ||
137 | |||
138 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
139 | } | ||
140 | |||
141 | return styles; | ||
142 | } | ||
143 | }, | ||
144 | |||
145 | // Get the matrix for the actual element being added to the user document. | ||
146 | // TODO: Find a better place for this method | ||
147 | getElementMatrix: { | ||
148 | value: function(planeMat, midPt) { | ||
149 | var divMat, flatMat, flatMatSafe; | ||
150 | // we should not need to worry about divide by zero below since we snapped to the point | ||
151 | divMat = planeMat.slice(0); | ||
152 | divMat[12] = 0.0; | ||
153 | divMat[13] = 0.0; | ||
154 | //divMat[14] = 0.0; | ||
155 | divMat[14] = midPt[2]; | ||
156 | |||
157 | // set the left and top of the element such that the center of the rectangle is at the mid point | ||
158 | this.application.ninja.stage.setStageAsViewport(); | ||
159 | |||
160 | flatMat = divMat; | ||
161 | flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10); | ||
162 | |||
163 | return "matrix3d(" + flatMatSafe + ")"; | ||
90 | } | 164 | } |
91 | }, | 165 | }, |
92 | 166 | ||
@@ -94,8 +168,6 @@ exports.NJUtils = Object.create(Object.prototype, { | |||
94 | ///// TODO: find a different place for this function | 168 | ///// TODO: find a different place for this function |
95 | makeElementModel: { | 169 | makeElementModel: { |
96 | value: function(el, selection, controller, isShape) { | 170 | value: function(el, selection, controller, isShape) { |
97 | //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape); | ||
98 | |||
99 | var p3d = Montage.create(Properties3D); | 171 | var p3d = Montage.create(Properties3D); |
100 | 172 | ||
101 | var shapeProps = null; | 173 | var shapeProps = null; |
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 1a391338..7ce23921 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -362,9 +362,9 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { | |||
362 | 362 | ||
363 | // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state | 363 | // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state |
364 | // in the case of a procedurally built scene an init state is not needed for loading data | 364 | // in the case of a procedurally built scene an init state is not needed for loading data |
365 | this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); | ||
365 | if (this._useWebGL) { | 366 | if (this._useWebGL) { |
366 | rdgeStarted = true; | 367 | rdgeStarted = true; |
367 | this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); | ||
368 | RDGE.globals.engine.unregisterCanvas( this._canvas ); | 368 | RDGE.globals.engine.unregisterCanvas( this._canvas ); |
369 | RDGE.globals.engine.registerCanvas(this._canvas, this); | 369 | RDGE.globals.engine.registerCanvas(this._canvas, this); |
370 | RDGE.RDGEStart( this._canvas ); | 370 | RDGE.RDGEStart( this._canvas ); |
@@ -758,7 +758,7 @@ World.prototype.exportJSON = function () { | |||
758 | // would not be destructive of the data. You would be wrong... | 758 | // would not be destructive of the data. You would be wrong... |
759 | // We need to rebuild everything | 759 | // We need to rebuild everything |
760 | if (this._useWebGL) { | 760 | if (this._useWebGL) { |
761 | if (worldObj.children && (worldObj.children.length === 1)) { | 761 | if (worldObj.children && (worldObj.children.length >= 1)) { |
762 | this.rebuildTree(this._geomRoot); | 762 | this.rebuildTree(this._geomRoot); |
763 | this.restartRenderLoop(); | 763 | this.restartRenderLoop(); |
764 | } | 764 | } |
@@ -835,8 +835,11 @@ World.prototype.importJSON = function (jObj) { | |||
835 | 835 | ||
836 | // import the objects | 836 | // import the objects |
837 | // there should be exactly one child of the parent object | 837 | // there should be exactly one child of the parent object |
838 | if (jObj.children && (jObj.children.length === 1)) | 838 | if (jObj.children) |
839 | this.importObjectsJSON( jObj.children[0] ); | 839 | { |
840 | for (var i=0; i<jObj.children.length; i++) | ||
841 | this.importObjectsJSON( jObj.children[i] ); | ||
842 | } | ||
840 | else | 843 | else |
841 | throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children ); | 844 | throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children ); |
842 | 845 | ||
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 218dcfa6..0f1f49a9 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -4,9 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var GeomObj = require("js/lib/geom/geom-obj").GeomObj; | 7 | var GeomObj = require("js/lib/geom/geom-obj").GeomObj; |
8 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; | 8 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; |
9 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; | 9 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; |
10 | var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; | ||
11 | var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | ||
12 | |||
10 | /////////////////////////////////////////////////////////////////////// | 13 | /////////////////////////////////////////////////////////////////////// |
11 | // Class GLCircle | 14 | // Class GLCircle |
12 | // GL representation of a circle. | 15 | // GL representation of a circle. |
@@ -46,6 +49,10 @@ var Circle = function GLCircle() { | |||
46 | this._fillColor = fillColor; | 49 | this._fillColor = fillColor; |
47 | 50 | ||
48 | this._strokeStyle = strokeStyle; | 51 | this._strokeStyle = strokeStyle; |
52 | |||
53 | this._matrix = Matrix.I(4); | ||
54 | //this._matrix[12] = xOffset; | ||
55 | //this._matrix[13] = yOffset; | ||
49 | } | 56 | } |
50 | 57 | ||
51 | this.m_world = world; | 58 | this.m_world = world; |
@@ -187,7 +194,7 @@ var Circle = function GLCircle() { | |||