3 files changed, 64 insertions, 46 deletions
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 54b9761b..54b9761b 100644..100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 623c54b8..812e3d55 100644..100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -11,6 +11,14 @@
    <script type="text/montage-serialization">
        {
+            "stageView" : {
+                "module": "js/stage/stage-view.reel",
+                "name": "StageView",
+                "properties": {
+                    "element": {"#": "stageView"}
+                }
+            },
            "StageDeps1": {
                "module": "js/stage/stage-deps",
                "name": "StageDeps",
@@ -49,12 +57,12 @@
                "properties": {
                    "element":          {"#": "stageAndScenesContainer"},
                    "_iframeContainer":  {"#": "iframeContainer"},
-                    "codeViewContainer":  {"#": "codeViewContainer"},
                    "_layoutCanvas":  {"#": "layoutCanvas"},
                    "_canvas":  {"#": "stageCanvas"},
                    "_drawingCanvas":  {"#": "drawingCanvas"},
                    "stageDeps": {"@": "StageDeps1"},
                    "layout":   {"@": "layout1"},
+                                        "stageView": {"@": "stageView"},
                    "textTool": {"@": "textTool"}
                },
                "bindings": {
@@ -72,9 +80,9 @@
 <body>
    <section id="stageAndScenesContainer" class="stageAndScenesContainer">
+        <section id="stageView"></section>
        <section id="iframeContainer"></section>
-        <section id="textToolObject">asdasd asd asd asd asd asd </section>
+        <section id="textToolObject"></section>
-        <section id="codeViewContainer"></section>
        <canvas id="layoutCanvas"></canvas>
        <canvas id="stageCanvas"></canvas>
        <canvas id="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 9e2df5a2..44e14827 100644..100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -4,11 +4,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-var Montage = require("montage/core/core").Montage,
+var Montage =   require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
-var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;
+    vecUtils =  require("js/helper-classes/3D/vec-utils").VecUtils;
-var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 exports.Stage = Montage.create(Component, {
@@ -20,8 +19,6 @@ exports.Stage = Montage.create(Component, {
    zoomFactor: {value : 1 },
    _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
-    _editSymbolPrefs:       { value: { "thickness" : 2.0, "color" : "#C61F00" } },
    _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
    drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
@@ -116,9 +113,6 @@ exports.Stage = Montage.create(Component, {
    _userContentLeft:       { value: 0 },
    _userContentTop:        { value: 0 },
    _userContentBorder:     { value: 0 },
-    savedLeftScroll:        { value: null },
-    savedTopScroll:         { value: null },
    documentRoot: {
        get: function () { return this._documentRoot; },
@@ -205,6 +199,7 @@ exports.Stage = Montage.create(Component, {
            this._drawingCanvas.addEventListener("mousedown", this, false);
            this._drawingCanvas.addEventListener("mouseup", this, false);
            this._drawingCanvas.addEventListener("dblclick", this, false);
+            this._drawingCanvas.addEventListener("mousewheel", this, false);
            // Hide the canvas
            this.hideCanvas(true);
@@ -247,6 +242,8 @@ exports.Stage = Montage.create(Component, {
            this._scrollLeft = this._iframeContainer.scrollLeft;
            this._scrollTop = this._iframeContainer.scrollTop;
+            this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
+            this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
            this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
@@ -261,7 +258,6 @@ exports.Stage = Montage.create(Component, {
            this.application.ninja.toolsData.selectedToolInstance._configure(true);
            this.addEventListener("change@appModel.show3dGrid", this, false);
        }
    },
@@ -362,6 +358,16 @@ exports.Stage = Montage.create(Component, {
        }
    },
+    handleMousewheel: {
+        value: function(event) {
+            if(event._event.wheelDelta > 0) {
+                this._iframeContainer.scrollTop -= 20;
+            } else {
+                this._iframeContainer.scrollTop += 20;
+            }
+        }
+    },
    /**
     * Enables the MouseMove on Canvas
     */
@@ -524,8 +530,7 @@ exports.Stage = Montage.create(Component, {
            drawUtils.updatePlanes();
            //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
-            if(this.application.ninja.selectedElements.length)
+            if(this.application.ninja.selectedElements.length) {
-            {
                // drawUtils.drawSelectionBounds handles the single selection case as well,
                // so we don't have to special-case the single selection case.
                // TODO drawUtils.drawSelectionBounds expects an array of elements.
@@ -533,8 +538,7 @@ exports.Stage = Montage.create(Component, {
                // TODO to work on _element instead of re-creating a new Array here.
                var selArray = new Array();
-                for(var i = 0; this.application.ninja.selectedElements[i];i++)
+                for(var i = 0; this.application.ninja.selectedElements[i];i++) {
-                {
                    var curElement = this.application.ninja.selectedElements[i]._element;
                    // Add element to array that is used to calculate 3d-bounding box of all elements
@@ -567,7 +571,7 @@ exports.Stage = Montage.create(Component, {
     * @params: x, y, w, h
     */
    draw3DSelectionRectangle: {
-        value:function(x0,y0, x1,y1, x2,y2, x3,y3){
+        value:function(x0,y0, x1,y1, x2,y2, x3,y3) {
 //            this.clearCanvas();
            this.clearDrawingCanvas();
            this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color;
@@ -612,7 +616,7 @@ exports.Stage = Montage.create(Component, {
     * Draws selection highlight and reg. point for a given element
     */
    drawElementBoundingBox: {
-        value: function(elt, editMode) {
+        value: function(elt) {
            this.stageDeps.viewUtils.setViewportObj( elt );
            var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt );
@@ -623,18 +627,16 @@ exports.Stage = Montage.create(Component, {
 //            }
            var zoomFactor = 1;
-            if (this._viewport.style && this._viewport.style.zoom)
+            if (this._viewport.style && this._viewport.style.zoom) {
-            {
                                zoomFactor = Number(this._viewport.style.zoom);
            }
            var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt );
-            for (var j=0;  j<4;  j++)
+            for (var j=0;  j<4;  j++) {
-            {
                var localPt = bounds3D[j];
                var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat);
-                if(zoomFactor !== 1)
+                if(zoomFactor !== 1) {
-                {
                    tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
                    tmpPt[0] += this._scrollLeft*(zoomFactor - 1);
@@ -644,13 +646,9 @@ exports.Stage = Montage.create(Component, {
            }
            // draw it
-            if(editMode) {
+            this.context.strokeStyle = this._canvasSelectionPrefs.color;

diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css index 54b9761b..54b9761b 100644..100755 --- a/js/stage/stage.reel/stage.css +++ b/js/stage/stage.reel/stage.css


diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 623c54b8..812e3d55 100644..100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html
@@ -11,6 +11,14 @@
11		11
12	<script type="text/montage-serialization">	12	<script type="text/montage-serialization">
13	{	13	{
		14	"stageView" : {
		15	"module": "js/stage/stage-view.reel",
		16	"name": "StageView",
		17	"properties": {
		18	"element": {"#": "stageView"}
		19	}
		20	},
		21
14	"StageDeps1": {	22	"StageDeps1": {
15	"module": "js/stage/stage-deps",	23	"module": "js/stage/stage-deps",
16	"name": "StageDeps",	24	"name": "StageDeps",
@@ -49,12 +57,12 @@
49	"properties": {	57	"properties": {
50	"element": {"#": "stageAndScenesContainer"},	58	"element": {"#": "stageAndScenesContainer"},
51	"_iframeContainer": {"#": "iframeContainer"},	59	"_iframeContainer": {"#": "iframeContainer"},
52	"codeViewContainer": {"#": "codeViewContainer"},
53	"_layoutCanvas": {"#": "layoutCanvas"},	60	"_layoutCanvas": {"#": "layoutCanvas"},
54	"_canvas": {"#": "stageCanvas"},	61	"_canvas": {"#": "stageCanvas"},
55	"_drawingCanvas": {"#": "drawingCanvas"},	62	"_drawingCanvas": {"#": "drawingCanvas"},
56	"stageDeps": {"@": "StageDeps1"},	63	"stageDeps": {"@": "StageDeps1"},
57	"layout": {"@": "layout1"},	64	"layout": {"@": "layout1"},
		65	"stageView": {"@": "stageView"},
58	"textTool": {"@": "textTool"}	66	"textTool": {"@": "textTool"}
59	},	67	},
60	"bindings": {	68	"bindings": {
@@ -72,9 +80,9 @@
72	<body>	80	<body>
73		81
74	<section id="stageAndScenesContainer" class="stageAndScenesContainer">	82	<section id="stageAndScenesContainer" class="stageAndScenesContainer">
		83	<section id="stageView"></section>
75	<section id="iframeContainer"></section>	84	<section id="iframeContainer"></section>
76	<section id="textToolObject">asdasd asd asd asd asd asd </section>	85	<section id="textToolObject"></section>
77	<section id="codeViewContainer"></section>
78	<canvas id="layoutCanvas"></canvas>	86	<canvas id="layoutCanvas"></canvas>
79	<canvas id="stageCanvas"></canvas>	87	<canvas id="stageCanvas"></canvas>
80	<canvas id="drawingCanvas"></canvas>	88	<canvas id="drawingCanvas"></canvas>


diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 9e2df5a2..44e14827 100644..100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js
@@ -4,11 +4,10 @@ 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 Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component;	8	Component = require("montage/ui/component").Component,
9		9	drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
10	var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;	10	vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
11	var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
12		11
13	exports.Stage = Montage.create(Component, {	12	exports.Stage = Montage.create(Component, {
14		13
@@ -20,8 +19,6 @@ exports.Stage = Montage.create(Component, {
20	zoomFactor: {value : 1 },	19	zoomFactor: {value : 1 },
21		20
22	_canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },	21	_canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
23	_editSymbolPrefs: { value: { "thickness" : 2.0, "color" : "#C61F00" } },
24
25	_canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },	22	_canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },
26	drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },	23	drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
27		24
@@ -116,9 +113,6 @@ exports.Stage = Montage.create(Component, {
116	_userContentLeft: { value: 0 },	113	_userContentLeft: { value: 0 },
117	_userContentTop: { value: 0 },	114	_userContentTop: { value: 0 },
118	_userContentBorder: { value: 0 },	115	_userContentBorder: { value: 0 },
119	savedLeftScroll: { value: null },
120	savedTopScroll: { value: null },
121
122		116
123	documentRoot: {	117	documentRoot: {
124	get: function () { return this._documentRoot; },	118	get: function () { return this._documentRoot; },
@@ -205,6 +199,7 @@ exports.Stage = Montage.create(Component, {
205	this._drawingCanvas.addEventListener("mousedown", this, false);	199	this._drawingCanvas.addEventListener("mousedown", this, false);
206	this._drawingCanvas.addEventListener("mouseup", this, false);	200	this._drawingCanvas.addEventListener("mouseup", this, false);
207	this._drawingCanvas.addEventListener("dblclick", this, false);	201	this._drawingCanvas.addEventListener("dblclick", this, false);
		202	this._drawingCanvas.addEventListener("mousewheel", this, false);
208		203
209	// Hide the canvas	204	// Hide the canvas
210	this.hideCanvas(true);	205	this.hideCanvas(true);
@@ -247,6 +242,8 @@ exports.Stage = Montage.create(Component, {
247		242
248	this._scrollLeft = this._iframeContainer.scrollLeft;	243	this._scrollLeft = this._iframeContainer.scrollLeft;
249	this._scrollTop = this._iframeContainer.scrollTop;	244	this._scrollTop = this._iframeContainer.scrollTop;
		245	this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
		246	this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop;
250		247
251	this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));	248	this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border"));
252		249
@@ -261,7 +258,6 @@ exports.Stage = Montage.create(Component, {
261	this.application.ninja.toolsData.selectedToolInstance._configure(true);	258	this.application.ninja.toolsData.selectedToolInstance._configure(true);
262		259
263	this.addEventListener("change@appModel.show3dGrid", this, false);	260	this.addEventListener("change@appModel.show3dGrid", this, false);
264
265	}	261	}
266	},	262	},
267		263
@@ -362,6 +358,16 @@ exports.Stage = Montage.create(Component, {
362	}	358	}
363	},	359	},
364		360
		361	handleMousewheel: {
		362	value: function(event) {
		363	if(event._event.wheelDelta > 0) {
		364	this._iframeContainer.scrollTop -= 20;
		365	} else {
		366	this._iframeContainer.scrollTop += 20;
		367	}
		368	}
		369	},
		370
365	/**	371	/**
366	* Enables the MouseMove on Canvas	372	* Enables the MouseMove on Canvas
367	*/	373	*/
@@ -524,8 +530,7 @@ exports.Stage = Montage.create(Component, {
524	drawUtils.updatePlanes();	530	drawUtils.updatePlanes();
525		531
526	//TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change	532	//TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change
527	if(this.application.ninja.selectedElements.length)	533	if(this.application.ninja.selectedElements.length) {
528	{
529	// drawUtils.drawSelectionBounds handles the single selection case as well,	534	// drawUtils.drawSelectionBounds handles the single selection case as well,
530	// so we don't have to special-case the single selection case.	535	// so we don't have to special-case the single selection case.
531	// TODO drawUtils.drawSelectionBounds expects an array of elements.	536	// TODO drawUtils.drawSelectionBounds expects an array of elements.
@@ -533,8 +538,7 @@ exports.Stage = Montage.create(Component, {
533	// TODO to work on _element instead of re-creating a new Array here.	538	// TODO to work on _element instead of re-creating a new Array here.
534	var selArray = new Array();	539	var selArray = new Array();
535		540
536	for(var i = 0; this.application.ninja.selectedElements[i];i++)	541	for(var i = 0; this.application.ninja.selectedElements[i];i++) {
537	{
538	var curElement = this.application.ninja.selectedElements[i]._element;	542	var curElement = this.application.ninja.selectedElements[i]._element;
539		543
540	// Add element to array that is used to calculate 3d-bounding box of all elements	544	// Add element to array that is used to calculate 3d-bounding box of all elements
@@ -567,7 +571,7 @@ exports.Stage = Montage.create(Component, {
567	* @params: x, y, w, h	571	* @params: x, y, w, h
568	*/	572	*/
569	draw3DSelectionRectangle: {	573	draw3DSelectionRectangle: {
570	value:function(x0,y0, x1,y1, x2,y2, x3,y3){	574	value:function(x0,y0, x1,y1, x2,y2, x3,y3) {
571	// this.clearCanvas();	575	// this.clearCanvas();
572	this.clearDrawingCanvas();	576	this.clearDrawingCanvas();
573	this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color;	577	this._drawingContext.strokeStyle = this._canvasDrawingPrefs.color;
@@ -612,7 +616,7 @@ exports.Stage = Montage.create(Component, {
612	* Draws selection highlight and reg. point for a given element	616	* Draws selection highlight and reg. point for a given element
613	*/	617	*/
614	drawElementBoundingBox: {	618	drawElementBoundingBox: {
615	value: function(elt, editMode) {	619	value: function(elt) {
616	this.stageDeps.viewUtils.setViewportObj( elt );	620	this.stageDeps.viewUtils.setViewportObj( elt );
617	var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt );	621	var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt );
618		622
@@ -623,18 +627,16 @@ exports.Stage = Montage.create(Component, {
623	// }	627	// }
624		628
625	var zoomFactor = 1;	629	var zoomFactor = 1;
626	if (this._viewport.style && this._viewport.style.zoom)	630	if (this._viewport.style && this._viewport.style.zoom) {
627	{
628	zoomFactor = Number(this._viewport.style.zoom);	631	zoomFactor = Number(this._viewport.style.zoom);
629	}	632	}
		633
630	var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt );	634	var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt );
631	for (var j=0; j<4; j++)	635	for (var j=0; j<4; j++) {
632	{
633	var localPt = bounds3D[j];	636	var localPt = bounds3D[j];
634	var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat);	637	var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat);
635		638
636	if(zoomFactor !== 1)	639	if(zoomFactor !== 1) {
637	{
638	tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);	640	tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor);
639		641
640	tmpPt[0] += this._scrollLeft*(zoomFactor - 1);	642	tmpPt[0] += this._scrollLeft*(zoomFactor - 1);
@@ -644,13 +646,9 @@ exports.Stage = Montage.create(Component, {
644	}	646	}
645		647
646	// draw it	648	// draw it
647	if(editMode) {	649	this.context.strokeStyle = this._canvasSelectionPrefs.color;