aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/CSSPanel/CSSPanel.js6
-rw-r--r--js/stage/stage.reel/stage.html12
-rw-r--r--js/stage/stage.reel/stage.js7
-rw-r--r--js/tools/TextTool.js96
4 files changed, 111 insertions, 10 deletions
diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js
index 94860b30..cf8880a3 100644
--- a/js/panels/CSSPanel/CSSPanel.js
+++ b/js/panels/CSSPanel/CSSPanel.js
@@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, {
20 init : { 20 init : {
21 enumerable:true, 21 enumerable:true,
22 value : function (){ 22 value : function (){
23 this.minHeight = 300; 23 this.minHeight = 195;
24 this.contentHeight = 300; 24 this.contentHeight = 195;
25 this.defaultHeight= 300; 25 this.defaultHeight= 195;
26 26
27 /* OLD WAY -- Removing the temporary div 27 /* OLD WAY -- Removing the temporary div
28 // TODO: Remove this comment once this is tested. 28 // TODO: Remove this comment once this is tested.
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 49d10baf..07b823a7 100644
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -34,6 +34,14 @@
34 } 34 }
35 } 35 }
36 }, 36 },
37
38 "textTool": {
39 "module": "montage/ui/rich-text-editor.reel",
40 "name": "RichTextEditor",
41 "properties": {
42 "element" : {"#": "textToolObject"}
43 }
44 },
37 45
38 "owner": { 46 "owner": {
39 "module": "js/stage/stage.reel", 47 "module": "js/stage/stage.reel",
@@ -46,7 +54,8 @@
46 "_canvas": {"#": "stageCanvas"}, 54 "_canvas": {"#": "stageCanvas"},
47 "_drawingCanvas": {"#": "drawingCanvas"}, 55 "_drawingCanvas": {"#": "drawingCanvas"},
48 "stageDeps": {"@": "StageDeps1"}, 56 "stageDeps": {"@": "StageDeps1"},
49 "layout": {"@": "layout1"} 57 "layout": {"@": "layout1"},
58 "textTool": {"@": "textTool"}
50 }, 59 },
51 "bindings": { 60 "bindings": {
52 "currentDocumentStageView": { 61 "currentDocumentStageView": {
@@ -64,6 +73,7 @@
64 73
65 <section id="stageAndScenesContainer" class="stageAndScenesContainer"> 74 <section id="stageAndScenesContainer" class="stageAndScenesContainer">
66 <section id="iframeContainer"></section> 75 <section id="iframeContainer"></section>
76 <section id="textToolObject">asdasd asd asd asd asd asd </section>
67 <section id="codeViewContainer"></section> 77 <section id="codeViewContainer"></section>
68 <canvas id="layoutCanvas"></canvas> 78 <canvas id="layoutCanvas"></canvas>
69 <canvas id="stageCanvas"></canvas> 79 <canvas id="stageCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 3e0b852e..96bfccdd 100644
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -12,6 +12,7 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
12 12
13exports.Stage = Montage.create(Component, { 13exports.Stage = Montage.create(Component, {
14 14
15 textTool: { value: null },
15 // TODO - Need to figure out how to remove this dependency 16 // TODO - Need to figure out how to remove this dependency
16 // Needed by some tools that depend on selectionDrawn event to set up some logic 17 // Needed by some tools that depend on selectionDrawn event to set up some logic
17 drawNow: { value : false }, 18 drawNow: { value : false },
@@ -780,6 +781,12 @@ exports.Stage = Montage.create(Component, {
780 } 781 }
781 }, 782 },
782 783
784 toViewportCoordinates: {
785 value: function(x,y) {
786 return [x + this._userContentLeft, y + this._userContentTop];
787 }
788 },
789
783 setZoom: { 790 setZoom: {
784 value: function(value) { 791 value: function(value) {
785 if(!this._firstDraw) 792 if(!this._firstDraw)
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 538583ee..8b48ff4f 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,12 +6,30 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 DrawingTool = require("js/tools/drawing-tool").DrawingTool; 8 DrawingTool = require("js/tools/drawing-tool").DrawingTool;
9 RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor;
9 10
10exports.TextTool = Montage.create(DrawingTool, { 11exports.TextTool = Montage.create(DrawingTool, {
12
13 _selectedElement: { value : null },
14
15 selectedElement: {
16 get: function() {
17 return this._selectedElement;
18 },
19 set: function(val) {
20 if(this._selectedElement !== null) {
21
22 }
23 this._selectedElement = val;
24 }
25 },
26
27
11 drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, 28 drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
12 29
13 HandleLeftButtonDown: { 30 HandleLeftButtonDown: {
14 value: function(event) { 31 value: function(event) {
32 this.deselectText();
15 this.startDraw(event); 33 this.startDraw(event);
16 } 34 }
17 }, 35 },
@@ -50,24 +68,88 @@ exports.TextTool = Montage.create(DrawingTool, {
50 if(drawData) { 68 if(drawData) {
51 //this.insertElement(drawData); 69 //this.insertElement(drawData);
52 } 70 }
53 71
54 this._hasDraw = false; 72 this._hasDraw = false;
55 this.endDraw(event); 73 this.endDraw(event);
56 } else { 74 } else {
57
58 this.doSelection(event); 75 this.doSelection(event);
76 console.log("im here");
77 if (this.application.ninja.selectedElements.length !== 0 ) {
78 this.selectedElement = this.application.ninja.selectedElements[0]._element;
79 this.drawTextTool();
80 }
59 81
60 this._isDrawing = false; 82 this._isDrawing = false;
61 } 83 }
62 } 84 }
63 }, 85 },
64 86
87 applyElementStyles : {
88 value: function(fromElement, toElement, styles) {
89 styles.forEach(function(style) {
90 var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
91 console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]);
92 toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
93 }, this);
94 }
95 },
96
97 drawTextTool: {
98 value: function() {
99 console.log(" now im here");
100 this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML;
101 if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; }
102 this.selectedElement.innerHTML = "";
103
104 //Styling Options for text tool to look identical to the text you are manipulating.
105 this.application.ninja.stage.textTool.element.style.display = "block";
106 this.application.ninja.stage.textTool.element.style.position = "absolute";
107
108 // Set Top & Left Positions
109 var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop);
110 this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px";
111 this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px";
112
113 // Set Width, Height
114 this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px";
115 this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px";
116
117
118 // Set font styling (Size, Style, Weight)
119
120 me = this;
121 this.application.ninja.stage.textTool.didDraw = function() {
122 me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]);
123 me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
124 var range = document.createRange(),
125 sel = window.getSelection();
126 sel.removeAllRanges();
127 range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild);
128 sel.addRange(range);
129 this.didDraw = function() {};
130 console.log("im drew here");
131 }
132 console.log("i end here");
133 }
134 },
135
136
137 deselectText: {
138 value: function() {
139 this.application.ninja.stage.textTool.element.style.display = "none";
140 this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
141 this.application.ninja.stage.textTool.value = "";
142 }
143 },
144
65 HandleDoubleClick: { 145 HandleDoubleClick: {
66 value: function(e) { 146 value: function(e) {
67 console.log(this.application.ninja.selectedElements[0]._element); 147 //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
68 this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); 148
69 this.application.ninja.stage._iframeContainer.style.zIndex = 200; 149 //if (!this.application.ninja.textTool) {
70 this.application.ninja.selectedElements[0]._element.focus(); 150
151 //}
152
71 153
72 154
73 } 155 }
@@ -75,10 +157,12 @@ exports.TextTool = Montage.create(DrawingTool, {
75 157
76 Configure: { 158 Configure: {
77 value: function(wasSelected) { 159 value: function(wasSelected) {
160
78 if(wasSelected) { 161 if(wasSelected) {
79 NJevent("enableStageMove"); 162 NJevent("enableStageMove");
80 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); 163 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
81 } else { 164 } else {