diff options
author | Armen Kesablyan | 2012-02-07 16:50:27 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-07 16:50:27 -0800 |
commit | 5f506542d28e12b707c3bfa41b53383519838477 (patch) | |
tree | bd58e9958d84dc3abef216d83f2e622ddb045b28 /js | |
parent | 2082fa6912eec2ffabd2081b7706e8e1b88a9711 (diff) | |
download | ninja-5f506542d28e12b707c3bfa41b53383519838477.tar.gz |
Revert "Initial Text Tool Implementation"
This reverts commit 2082fa6912eec2ffabd2081b7706e8e1b88a9711.
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/CSSPanel/CSSPanel.js | 6 | ||||
-rw-r--r-- | js/stage/stage.reel/stage.html | 12 | ||||
-rw-r--r-- | js/stage/stage.reel/stage.js | 7 | ||||
-rw-r--r-- | js/tools/TextTool.js | 96 |
4 files changed, 10 insertions, 111 deletions
diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js index cf8880a3..94860b30 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 = 195; | 23 | this.minHeight = 300; |
24 | this.contentHeight = 195; | 24 | this.contentHeight = 300; |
25 | this.defaultHeight= 195; | 25 | this.defaultHeight= 300; |
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 07b823a7..49d10baf 100644 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html | |||
@@ -34,14 +34,6 @@ | |||
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 | }, | ||
45 | 37 | ||
46 | "owner": { | 38 | "owner": { |
47 | "module": "js/stage/stage.reel", | 39 | "module": "js/stage/stage.reel", |
@@ -54,8 +46,7 @@ | |||
54 | "_canvas": {"#": "stageCanvas"}, | 46 | "_canvas": {"#": "stageCanvas"}, |
55 | "_drawingCanvas": {"#": "drawingCanvas"}, | 47 | "_drawingCanvas": {"#": "drawingCanvas"}, |
56 | "stageDeps": {"@": "StageDeps1"}, | 48 | "stageDeps": {"@": "StageDeps1"}, |
57 | "layout": {"@": "layout1"}, | 49 | "layout": {"@": "layout1"} |
58 | "textTool": {"@": "textTool"} | ||
59 | }, | 50 | }, |
60 | "bindings": { | 51 | "bindings": { |
61 | "currentDocumentStageView": { | 52 | "currentDocumentStageView": { |
@@ -73,7 +64,6 @@ | |||
73 | 64 | ||
74 | <section id="stageAndScenesContainer" class="stageAndScenesContainer"> | 65 | <section id="stageAndScenesContainer" class="stageAndScenesContainer"> |
75 | <section id="iframeContainer"></section> | 66 | <section id="iframeContainer"></section> |
76 | <section id="textToolObject">asdasd asd asd asd asd asd </section> | ||
77 | <section id="codeViewContainer"></section> | 67 | <section id="codeViewContainer"></section> |
78 | <canvas id="layoutCanvas"></canvas> | 68 | <canvas id="layoutCanvas"></canvas> |
79 | <canvas id="stageCanvas"></canvas> | 69 | <canvas id="stageCanvas"></canvas> |
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 96bfccdd..3e0b852e 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js | |||
@@ -12,7 +12,6 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; | |||
12 | 12 | ||
13 | exports.Stage = Montage.create(Component, { | 13 | exports.Stage = Montage.create(Component, { |
14 | 14 | ||
15 | textTool: { value: null }, | ||
16 | // TODO - Need to figure out how to remove this dependency | 15 | // TODO - Need to figure out how to remove this dependency |
17 | // Needed by some tools that depend on selectionDrawn event to set up some logic | 16 | // Needed by some tools that depend on selectionDrawn event to set up some logic |
18 | drawNow: { value : false }, | 17 | drawNow: { value : false }, |
@@ -781,12 +780,6 @@ exports.Stage = Montage.create(Component, { | |||
781 | } | 780 | } |
782 | }, | 781 | }, |
783 | 782 | ||
784 | toViewportCoordinates: { | ||
785 | value: function(x,y) { | ||
786 | return [x + this._userContentLeft, y + this._userContentTop]; | ||
787 | } | ||
788 | }, | ||
789 | |||
790 | setZoom: { | 783 | setZoom: { |
791 | value: function(value) { | 784 | value: function(value) { |
792 | if(!this._firstDraw) | 785 | if(!this._firstDraw) |
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 8b48ff4f..538583ee 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js | |||
@@ -6,30 +6,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var 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; | ||
10 | 9 | ||
11 | exports.TextTool = Montage.create(DrawingTool, { | 10 | exports.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 | |||
28 | drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, | 11 | drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, |
29 | 12 | ||
30 | HandleLeftButtonDown: { | 13 | HandleLeftButtonDown: { |
31 | value: function(event) { | 14 | value: function(event) { |
32 | this.deselectText(); | ||
33 | this.startDraw(event); | 15 | this.startDraw(event); |
34 | } | 16 | } |
35 | }, | 17 | }, |
@@ -68,88 +50,24 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
68 | if(drawData) { | 50 | if(drawData) { |
69 | //this.insertElement(drawData); | 51 | //this.insertElement(drawData); |
70 | } | 52 | } |
71 | 53 | ||
72 | this._hasDraw = false; | 54 | this._hasDraw = false; |
73 | this.endDraw(event); | 55 | this.endDraw(event); |
74 | } else { | 56 | } else { |
57 | |||
75 | this.doSelection(event); | 58 | 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 | } | ||
81 | 59 | ||
82 | this._isDrawing = false; | 60 | this._isDrawing = false; |
83 | } | 61 | } |
84 | } | 62 | } |
85 | }, | 63 | }, |
86 | 64 | ||
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 | |||
145 | HandleDoubleClick: { | 65 | HandleDoubleClick: { |
146 | value: function(e) { | 66 | value: function(e) { |
147 | //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); | 67 | console.log(this.application.ninja.selectedElements[0]._element); |
148 | 68 | this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); | |
149 | //if (!this.application.ninja.textTool) { | 69 | this.application.ninja.stage._iframeContainer.style.zIndex = 200; |
150 | 70 | this.application.ninja.selectedElements[0]._element.focus(); | |
151 | //} | ||
152 | |||
153 | 71 | ||
154 | 72 | ||
155 | } | 73 | } |
@@ -157,12 +75,10 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
157 | 75 | ||
158 | Configure: { | 76 | Configure: { |
159 | value: function(wasSelected) { | 77 | value: function(wasSelected) { |
160 | |||
161 | if(wasSelected) { | 78 | if(wasSelected) { |
162 | NJevent("enableStageMove"); | 79 | NJevent("enableStageMove"); |
163 |