aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/stage
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/stage')
-rw-r--r--js/stage/layout.js377
-rw-r--r--js/stage/stage-deps.js150
-rw-r--r--js/stage/stage.reel/stage.css13
-rw-r--r--js/stage/stage.reel/stage.html74
-rw-r--r--js/stage/stage.reel/stage.js861
-rw-r--r--js/stage/tool-handle.js724
6 files changed, 2199 insertions, 0 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js
new file mode 100644
index 00000000..625c09ad
--- /dev/null
+++ b/js/stage/layout.js
@@ -0,0 +1,377 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7/**
8@module js/document/documentManager
9@requires montage/core/core
10@requires montage/ui/component
11*/
12var Montage = require("montage/core/core").Montage,
13 Component = require("montage/ui/component").Component,
14 viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils,
15 drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
16 vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
17
18exports.Layout = Montage.create(Component, {
19
20 canvas: { value: null },
21 ctx: { value: null },
22
23 drawFillColor: { value: 'rgba(255,255,255,1)' },
24 ctxLineWidth: { value: 0.2 },
25
26 _layoutView: {
27 value: "layoutAll"
28 },
29
30 layoutView: {
31 get: function() {
32 return this._layoutView;
33 },
34 set: function(value) {
35 if(this._layoutView !== value) {
36 this._layoutView = value;
37 this.draw();
38 }
39 }
40 },
41
42 domTree: {
43 value: []
44 },
45
46 elementsToDraw: {
47 value: []
48 },
49
50 deserializedFromTemplate: {
51 value: function() {
52 this.ctx = this.canvas.getContext("2d");
53 this.ctx.lineWidth = this.ctxLineWidth;
54 this.ctx.fillStyle = this.drawFillColor;
55
56 this.eventManager.addEventListener("elementAdded", this, false);
57 this.eventManager.addEventListener("elementDeleted", this, false);
58
59 this.eventManager.addEventListener("selectionChange", this, false);
60
61 this.eventManager.addEventListener("deleteSelection", this, true);
62
63// this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false);
64
65 }
66 },
67
68 handleLayoutView: {
69 value: function() {
70 console.log(this.stage.appModel.layoutView);
71 }
72 },
73
74 handleElementAdded: {
75 value: function(event) {
76 this.domTree.push(event.detail);
77 }
78 },
79
80 handleElementDeleted: {
81 value: function(event) {
82 this.domTree.splice(this.domTree.indexOf(event.detail), 1);
83
84 this.draw();
85 }
86 },
87
88 captureDeleteSelection: {
89 value: function(event) {
90 //this.redrawDocument();
91
92 var len = event.detail.length;
93 for(var i = 0; i < len ; i++) {
94 this.domTree.splice(this.domTree.indexOf(event.detail[i]),1);
95 }
96
97 }
98 },
99
100 handleSelectionChange: {
101 value: function(event) {
102 this.elementsToDraw = [];
103
104 if(!event.detail.isDocument) {
105 var tmp = event.detail.elements.map(function(element){ return element._element});
106
107 this.elementsToDraw = this.domTree.filter(function(value) {
108 return (tmp.indexOf(value) === -1);
109 });
110 } else {
111 this.elementsToDraw = this.domTree;
112 }
113
114 this.draw(); // Not a reel yet :)
115
116
117 }
118 },
119
120 draw: {
121 value: function() {
122 this.clearCanvas();
123 var els = this.elementsToDraw.length;
124 for(var i = 0, el; i < els; i++){
125 this.drawTagOutline(this.elementsToDraw[i]);
126 }
127 }
128 },
129
130 draw3DInfo: {
131 value: function() {
132 drawUtils.updatePlanes();
133 if(this.stage.appModel.show3dGrid) drawUtils.drawWorkingPlane();
134 drawUtils.draw3DCompass();
135 }
136 },
137
138 clearCanvas: {
139 value: function() {
140 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
141 }
142 },
143
144 drawTagOutline: {
145 value: function (item) {
146
147 if(!item) return;
148
149 // TODO Bind the layoutview mode to the current document
150// var mode = this.application.ninja.currentDocument.layoutMode;
151
152 if(this.layoutView === "layoutOff") return;
153
154 // Don't draw outlines for shapes.
155 // TODO Use the element mediator/controller/model to see if its a shape
156 /*
157 if (utilsModule.utils.isElementAShape(item))
158 {
159 return;
160 }
161 */
162
163 /**
164 * New Drawing layout code using 3D calculations
165 */
166 viewUtils.setViewportObj( item );
167 var bounds3D = viewUtils.getElementViewBounds3D( item );
168 var tmpMat = viewUtils.getLocalToGlobalMatrix( item );
169
170 var zoomFactor = 1;
171 if (this.stage._viewport.style && this.stage._viewport.style.zoom)
172 {
173 zoomFactor = Number(this.stage._viewport.style.zoom);
174 }
175
176 var sSL = this.stage._scrollLeft;
177 var sST = this.stage._scrollTop;
178
179 for (var j=0; j<4; j++) {
180 var localPt = bounds3D[j];
181 var tmpPt = viewUtils.localToGlobal2(localPt, tmpMat);
182
183 if(zoomFactor !== 1)
184 {
185 tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
186
187 tmpPt[0] += sSL*(zoomFactor - 1);
188 tmpPt[1] += sST*(zoomFactor - 1);
189 }
190 bounds3D[j] = tmpPt;
191 }
192
193 // Draw the Item ouline
194 this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]);
195 this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] );
196 this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] );
197 this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] );
198
199 // Draw the Label is all mode
200 if(this.layoutView === "layoutAll") {
201 this.ctx.strokeStyle = 'rgba(0,0,0,1)'; // Black Stroke
202 this.ctx.strokeRect(bounds3D[0][0]+5.5, bounds3D[0][1]-15.5, 70, 11);
203 this.ctx.fillStyle = 'rgba(255,255,255,1)' // White Fill
204 this.ctx.fillRect(bounds3D[0][0]+6, bounds3D[0][1]-15, 69, 10);
205
206 this.ctx.fillStyle = 'rgba(0,0,0,1)';
207 this.ctx.font = "9px Droid Sans";
208
209 this.ctx.fillText(this._elementName(item), bounds3D[0][0] + 8, bounds3D[0][1] - 7);
210 }
211 }
212 },
213
214 /**
215 * redrawDocument: Redraws the outline for the entire document
216 */
217 redrawDocument: {
218 value: function() {
219 if(this.application.ninja.currentDocument) {
220 this.clearCanvas();
221 this.WalkDOM(this.application.ninja.currentDocument.documentRoot);
222
223 //drawUtils.updatePlanes();
224 //if(this.application.ninja.currentDocument.draw3DGrid) drawUtils.drawWorkingPlane();
225 //drawUtils.draw3DCompass();
226 }
227 }
228 },
229
230 drawElementsOutline: {
231 value: function(elements) {
232 this.clearCanvas();
233 this.WalkDOM(this.application.ninja.currentDocument.documentRoot, elements);
234
235 //drawUtils.updatePlanes();
236
237 if(this.application.ninja.currentDocument.draw3DGrid) {
238 //drawUtils.drawWorkingPlane();
239 }
240
241 //drawUtils.draw3DCompass();
242 }