diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/layout.js | 71 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 33 |
2 files changed, 62 insertions, 42 deletions
diff --git a/js/stage/layout.js b/js/stage/layout.js index 56bb70bf..a94dd10c 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -53,36 +53,38 @@ exports.Layout = Montage.create(Component, { | |||
53 | this.ctx.lineWidth = this.ctxLineWidth; | 53 | this.ctx.lineWidth = this.ctxLineWidth; |
54 | this.ctx.fillStyle = this.drawFillColor; | 54 | this.ctx.fillStyle = this.drawFillColor; |
55 | 55 | ||
56 | this.eventManager.addEventListener("elementAdded", this, false); | 56 | // this.eventManager.addEventListener("elementAdded", this, false); |
57 | this.eventManager.addEventListener("elementDeleted", this, false); | 57 | this.eventManager.addEventListener("elementDeleted", this, false); |
58 | 58 | ||
59 | this.eventManager.addEventListener("selectionChange", this, false); | 59 | this.eventManager.addEventListener("selectionChange", this, false); |
60 | 60 | ||
61 | this.eventManager.addEventListener("deleteSelection", this, false); | 61 | this.eventManager.addEventListener("deleteSelection", this, false); |
62 | |||
63 | // this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false); | ||
64 | |||
65 | } | 62 | } |
66 | }, | 63 | }, |
67 | 64 | ||
68 | handleLayoutView: { | 65 | handleOpenDocument: { |
69 | value: function() { | 66 | value: function() { |
70 | console.log(this.stage.appModel.layoutView); | 67 | // Initial elements to draw is the entire node list |
68 | this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList; | ||
69 | |||
70 | // Draw the elements and the 3d info | ||
71 | this.draw(); | ||
72 | this.draw3DInfo(false); | ||
71 | } | 73 | } |
72 | }, | 74 | }, |
73 | 75 | ||
76 | // No need to keep track of the added elements. We now have a live node list of the dom | ||
74 | handleElementAdded: { | 77 | handleElementAdded: { |
75 | value: function(event) { | 78 | value: function(event) { |
76 | this.domTree.push(event.detail); | 79 | // this.domTree.push(event.detail); |
77 | 80 | // this.draw(); | |
78 | this.draw(); | 81 | // this.draw3DInfo(false); |
79 | this.draw3DInfo(false); | ||
80 | } | 82 | } |
81 | }, | 83 | }, |
82 | 84 | ||
83 | handleElementDeleted: { | 85 | handleElementDeleted: { |
84 | value: function(event) { | 86 | value: function(event) { |
85 | this.domTree.splice(this.domTree.indexOf(event.detail), 1); | 87 | //this.domTree.splice(this.domTree.indexOf(event.detail), 1); |
86 | } | 88 | } |
87 | }, | 89 | }, |
88 | 90 | ||
@@ -96,8 +98,13 @@ exports.Layout = Montage.create(Component, { | |||
96 | 98 | ||
97 | handleSelectionChange: { | 99 | handleSelectionChange: { |
98 | value: function(event) { | 100 | value: function(event) { |
99 | this.elementsToDraw = []; | 101 | // Make an array copy of the line node list which is not an array like object |
102 | this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0); | ||
103 | |||
104 | // Clear the elements to draw | ||
105 | this.elementsToDraw.length = 0; | ||
100 | 106 | ||
107 | // Draw the non selected elements | ||
101 | if(!event.detail.isDocument) { | 108 | if(!event.detail.isDocument) { |
102 | var tmp = event.detail.elements.map(function(element){ return element._element}); | 109 | var tmp = event.detail.elements.map(function(element){ return element._element}); |
103 | 110 | ||
@@ -111,13 +118,15 @@ exports.Layout = Montage.create(Component, { | |||
111 | this.draw(); // Not a reel yet :) | 118 | this.draw(); // Not a reel yet :) |
112 | this.draw3DInfo(false); | 119 | this.draw3DInfo(false); |
113 | 120 | ||
114 | 121 | // Clear the domTree copy | |
122 | this.domTree.length = 0; | ||
115 | } | 123 | } |
116 | }, | 124 | }, |
117 | 125 | ||
118 | draw: { | 126 | draw: { |
119 | value: function() { | 127 | value: function() { |
120 | this.clearCanvas(); | 128 | this.clearCanvas(); |
129 | |||
121 | var els = this.elementsToDraw.length; | 130 | var els = this.elementsToDraw.length; |
122 | for(var i = 0, el; i < els; i++){ | 131 | for(var i = 0, el; i < els; i++){ |
123 | this.drawTagOutline(this.elementsToDraw[i]); | 132 | this.drawTagOutline(this.elementsToDraw[i]); |
@@ -127,15 +136,15 @@ exports.Layout = Montage.create(Component, { | |||
127 | 136 | ||
128 | draw3DInfo: { | 137 | draw3DInfo: { |
129 | value: function(updatePlanes) { | 138 | value: function(updatePlanes) { |
130 | if(updatePlanes) | 139 | if(updatePlanes) { |
131 | { | ||
132 | drawUtils.updatePlanes(); | 140 | drawUtils.updatePlanes(); |
133 | } | 141 | } |
134 | if(this.stage.appModel.show3dGrid) | 142 | |
135 | { | 143 | if(this.stage.appModel.show3dGrid) { |
136 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); | 144 | this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); |
137 | drawUtils.drawWorkingPlane(); | 145 | drawUtils.drawWorkingPlane(); |
138 | } | 146 | } |
147 | |||
139 | drawUtils.draw3DCompass(); | 148 | drawUtils.draw3DCompass(); |
140 | } | 149 | } |
141 | }, | 150 | }, |
@@ -152,29 +161,22 @@ exports.Layout = Montage.create(Component, { | |||
152 | if(!item) return; | 161 | if(!item) return; |
153 | 162 | ||
154 | // TODO Bind the layoutview mode to the current document | 163 | // TODO Bind the layoutview mode to the current document |
155 | // var mode = this.application.ninja.currentDocument.layoutMode; | 164 | // var mode = this.application.ninja.currentDocument.layoutMode; |
156 | 165 | ||
157 | if(this.layoutView === "layoutOff") return; | 166 | if(this.layoutView === "layoutOff") return; |
158 | 167 | ||
159 | // Don't draw outlines for shapes. | 168 | // Don't draw outlines for shapes. |
160 | // TODO Use the element mediator/controller/model to see if its a shape | 169 | // TODO Use the element mediator/controller/model to see if its a shape |
161 | /* | 170 | // if (utilsModule.utils.isElementAShape(item)) return; |
162 | if (utilsModule.utils.isElementAShape(item)) | ||
163 | { | ||
164 | return; | ||
165 | } | ||
166 | */ | ||
167 | 171 | ||
168 | /** | 172 | |
169 | * New Drawing layout code using 3D calculations | 173 | // draw the layout |
170 | */ | ||
171 | viewUtils.setViewportObj( item ); | 174 | viewUtils.setViewportObj( item ); |
172 | var bounds3D = viewUtils.getElementViewBounds3D( item ); | 175 | var bounds3D = viewUtils.getElementViewBounds3D( item ); |
173 | var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); | 176 | var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); |
174 | 177 | ||
175 | var zoomFactor = 1; | 178 | var zoomFactor = 1; |
176 | if (this.stage._viewport.style && this.stage._viewport.style.zoom) | 179 | if (this.stage._viewport.style && this.stage._viewport.style.zoom) { |
177 | { | ||
178 | zoomFactor = Number(this.stage._viewport.style.zoom); | 180 | zoomFactor = Number(this.stage._viewport.style.zoom); |
179 | } | 181 | } |
180 | 182 | ||
@@ -185,8 +187,7 @@ exports.Layout = Montage.create(Component, { | |||
185 | var localPt = bounds3D[j]; | 187 | var localPt = bounds3D[j]; |
186 | var tmpPt = viewUtils.localToGlobal2(localPt, tmpMat); | 188 | var tmpPt = viewUtils.localToGlobal2(localPt, tmpMat); |
187 | 189 | ||
188 | if(zoomFactor !== 1) | 190 | if(zoomFactor !== 1) { |
189 | { | ||
190 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); | 191 | tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); |
191 | 192 | ||
192 | tmpPt[0] += sSL*(zoomFactor - 1); | 193 | tmpPt[0] += sSL*(zoomFactor - 1); |
@@ -255,14 +256,6 @@ exports.Layout = Montage.create(Component, { | |||
255 | value: function(elements) { | 256 | value: function(elements) { |
256 | this.clearCanvas(); | 257 | this.clearCanvas(); |
257 | this.WalkDOM(this.application.ninja.currentDocument.documentRoot, elements); | 258 | this.WalkDOM(this.application.ninja.currentDocument.documentRoot, elements); |
258 | |||
259 | //drawUtils.updatePlanes(); | ||
260 | |||
261 | if(this.application.ninja.currentDocument.draw3DGrid) { | ||
262 | //drawUtils.drawWorkingPlane(); | ||
263 | } | ||
264 | |||
265 | //drawUtils.draw3DCompass(); | ||
266 | } | 259 | } |
267 | }, | 260 | }, |
268 | 261 | ||
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 6bb626c2..755c7ff1 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -262,6 +262,8 @@ exports.Stage = Montage.create(Component, { | |||
262 | this.application.ninja.toolsData.selectedToolInstance._configure(true); | 262 | this.application.ninja.toolsData.selectedToolInstance._configure(true); |
263 | 263 | ||
264 | this.addEventListener("change@appModel.show3dGrid", this, false); | 264 | this.addEventListener("change@appModel.show3dGrid", this, false); |
265 | |||
266 | this.layout.handleOpenDocument(); | ||
265 | } | 267 | } |
266 | }, | 268 | }, |
267 | 269 | ||
@@ -519,12 +521,37 @@ exports.Stage = Montage.create(Component, { | |||
519 | */ | 521 | */ |
520 | GetElement: { | 522 | GetElement: { |
521 | value: function(pos) { | 523 | value: function(pos) { |
522 | var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)); | 524 | var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)), |
523 | return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); | 525 | elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); |
526 | |||
527 | // workaround Chrome 3d bug | ||
528 | if(this.application.ninja.currentDocument.inExclusion(elt) !== -1) | ||
529 | { | ||
530 | return this._getElementUsingSnapping(point); | ||
531 | } else { | ||
532 | return elt; | ||
533 | } | ||
524 | } | 534 | } |
525 | }, | 535 | }, |
526 | 536 | ||
527 | 537 | /** | |
538 | * _getElementUsingSnapping: Returns the object at point using snap manager | ||
539 | * | ||
540 | * @param: point | ||
541 | * @return: Returns the Object in the user document under the point | ||
542 | */ | ||
543 | _getElementUsingSnapping: { | ||
544 | value: function(point) { | ||
545 | this.stageDeps.snapManager.enableElementSnap( true ); | ||
546 | var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true); | ||
547 | this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() ); | ||
548 | if (hitRec) { | ||
549 | return hitRec.getElement(); | ||
550 | } else { | ||
551 | return null; | ||
552 | } | ||
553 | } | ||
554 | }, | ||