3 files changed, 102 insertions, 49 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 49d10baf..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",
@@ -34,6 +42,14 @@
                    }
                }
            },
+            "textTool": {
+                "module": "node_modules/labs/rich-text-editor.reel",
+                "name": "RichTextEditor",
+                "properties": {
+                    "element" : {"#": "textToolObject"}
+                }
+            },
            
            "owner": {
                "module": "js/stage/stage.reel",
@@ -41,12 +57,13 @@
                "properties": {
                    "element":          {"#": "stageAndScenesContainer"},
                    "_iframeContainer":  {"#": "iframeContainer"},
-                    "codeViewContainer":  {"#": "codeViewContainer"},
                    "_layoutCanvas":  {"#": "layoutCanvas"},
                    "_canvas":  {"#": "stageCanvas"},
                    "_drawingCanvas":  {"#": "drawingCanvas"},
                    "stageDeps": {"@": "StageDeps1"},
-                    "layout":   {"@": "layout1"}
+                    "layout":   {"@": "layout1"},
+                                        "stageView": {"@": "stageView"},
+                    "textTool": {"@": "textTool"}
                },
                "bindings": {
                    "currentDocumentStageView": {
@@ -63,8 +80,9 @@
 <body>
    <section id="stageAndScenesContainer" class="stageAndScenesContainer">
+        <section id="stageView"></section>
        <section id="iframeContainer"></section>
-        <section id="codeViewContainer"></section>
+        <section id="textToolObject"></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..641ac247 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
     */
@@ -509,12 +515,37 @@ exports.Stage = Montage.create(Component, {
     */
    GetElement: {
        value: function(pos) {
-            var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY));
+            var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)),
-            return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+                elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+            // workaround Chrome 3d bug
+            if(this.application.ninja.currentDocument.inExclusion(elt) !== -1)
+            {
+                return this._getElementUsingSnapping(point);
+            } else {
+                return elt;
+            }
        }
    },
+    /**
+     * _getElementUsingSnapping: Returns the object at point using snap manager
+     *
+     * @param: point
+     * @return: Returns the Object in the user document under the point
+     */
+    _getElementUsingSnapping: {
+        value: function(point) {
+            this.stageDeps.snapManager.enableElementSnap( true );
+            var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true);
+            this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() );
+            if (hitRec) {
+                return hitRec.getElement();
+            } else {
+                return null;
+            }
+        }
+    },
    draw: {
@@ -524,8 +555,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 +563,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++) {
-

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 49d10baf..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",
@@ -34,6 +42,14 @@
34	}	42	}
35	}	43	}
36	},	44	},
		45
		46	"textTool": {
		47	"module": "node_modules/labs/rich-text-editor.reel",
		48	"name": "RichTextEditor",
		49	"properties": {
		50	"element" : {"#": "textToolObject"}
		51	}
		52	},
37		53
38	"owner": {	54	"owner": {
39	"module": "js/stage/stage.reel",	55	"module": "js/stage/stage.reel",
@@ -41,12 +57,13 @@
41	"properties": {	57	"properties": {
42	"element": {"#": "stageAndScenesContainer"},	58	"element": {"#": "stageAndScenesContainer"},
43	"_iframeContainer": {"#": "iframeContainer"},	59	"_iframeContainer": {"#": "iframeContainer"},
44	"codeViewContainer": {"#": "codeViewContainer"},
45	"_layoutCanvas": {"#": "layoutCanvas"},	60	"_layoutCanvas": {"#": "layoutCanvas"},
46	"_canvas": {"#": "stageCanvas"},	61	"_canvas": {"#": "stageCanvas"},
47	"_drawingCanvas": {"#": "drawingCanvas"},	62	"_drawingCanvas": {"#": "drawingCanvas"},
48	"stageDeps": {"@": "StageDeps1"},	63	"stageDeps": {"@": "StageDeps1"},
49	"layout": {"@": "layout1"}	64	"layout": {"@": "layout1"},
		65	"stageView": {"@": "stageView"},
		66	"textTool": {"@": "textTool"}
50	},	67	},
51	"bindings": {	68	"bindings": {
52	"currentDocumentStageView": {	69	"currentDocumentStageView": {
@@ -63,8 +80,9 @@
63	<body>	80	<body>
64		81
65	<section id="stageAndScenesContainer" class="stageAndScenesContainer">	82	<section id="stageAndScenesContainer" class="stageAndScenesContainer">
		83	<section id="stageView"></section>
66	<section id="iframeContainer"></section>	84	<section id="iframeContainer"></section>
67	<section id="codeViewContainer"></section>	85	<section id="textToolObject"></section>
68	<canvas id="layoutCanvas"></canvas>	86	<canvas id="layoutCanvas"></canvas>
69	<canvas id="stageCanvas"></canvas>	87	<canvas id="stageCanvas"></canvas>
70	<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..641ac247 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	*/
@@ -509,12 +515,37 @@ exports.Stage = Montage.create(Component, {
509	*/	515	*/
510	GetElement: {	516	GetElement: {
511	value: function(pos) {	517	value: function(pos) {
512	var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY));	518	var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)),
513	return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);	519	elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
		520
		521	// workaround Chrome 3d bug
		522	if(this.application.ninja.currentDocument.inExclusion(elt) !== -1)
		523	{
		524	return this._getElementUsingSnapping(point);
		525	} else {
		526	return elt;
		527	}
514	}	528	}
515	},	529	},
516		530
517		531	/**
		532	* _getElementUsingSnapping: Returns the object at point using snap manager
		533	*
		534	* @param: point
		535	* @return: Returns the Object in the user document under the point
		536	*/
		537	_getElementUsingSnapping: {
		538	value: function(point) {
		539	this.stageDeps.snapManager.enableElementSnap( true );
		540	var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true);
		541	this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() );
		542	if (hitRec) {
		543	return hitRec.getElement();
		544	} else {
		545	return null;
		546	}
		547	}
		548	},
518		549
519		550
520	draw: {	551	draw: {
@@ -524,8 +555,7 @@ exports.Stage = Montage.create(Component, {
524	drawUtils.updatePlanes();	555	drawUtils.updatePlanes();
525		556
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	557	//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)	558	if(this.application.ninja.selectedElements.length) {
528	{
529	// drawUtils.drawSelectionBounds handles the single selection case as well,	559	// drawUtils.drawSelectionBounds handles the single selection case as well,
530	// so we don't have to special-case the single selection case.	560	// so we don't have to special-case the single selection case.
531	// TODO drawUtils.drawSelectionBounds expects an array of elements.	561	// TODO drawUtils.drawSelectionBounds expects an array of elements.
@@ -533,8 +563,7 @@ exports.Stage = Montage.create(Component, {
533	// TODO to work on _element instead of re-creating a new Array here.	563	// TODO to work on _element instead of re-creating a new Array here.
534	var selArray = new Array();	564	var selArray = new Array();
535		565
536	for(var i = 0; this.application.ninja.selectedElements[i];i++)	566	for(var i = 0; this.application.ninja.selectedElements[i];i++) {
537