diff options
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/TextTool.js | 48 | ||||
-rw-r--r-- | js/tools/bindingTool.js | 102 |
2 files changed, 136 insertions, 14 deletions
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 0aef6c1c..aa79b8bc 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js | |||
@@ -6,7 +6,6 @@ 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 = ("node_modules/labs/rich-text-editor.reel").RichTextEditor, | ||
10 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | 9 | ElementsMediator = require("js/mediators/element-mediator").ElementMediator; |
11 | 10 | ||
12 | exports.TextTool = Montage.create(DrawingTool, { | 11 | exports.TextTool = Montage.create(DrawingTool, { |
@@ -23,24 +22,32 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
23 | return this._selectedElement; | 22 | return this._selectedElement; |
24 | }, | 23 | }, |
25 | set: function(val) { | 24 | set: function(val) { |
25 | //Set Selected Element | ||
26 | if (this._selectedElement !== null) { | 26 | if (this._selectedElement !== null) { |
27 | this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; | 27 | this.applyStyle(); |
28 | this.application.ninja.stage.textTool.value = ""; | ||
29 | this.application.ninja.stage.textTool.element.style.display = "none"; | ||
30 | ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); | ||
31 | } | 28 | } |
32 | //Set Selected Element | ||
33 | this._selectedElement = val; | 29 | this._selectedElement = val; |
34 | if(val !== null) { | 30 | if(this._selectedElement !== null) { |
35 | this.drawTextTool(); | 31 | this.drawTextTool(); |
36 | this.handleScroll(); | 32 | this.handleScroll(); |
37 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); | 33 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); |
38 | } else { | 34 | } else { |
39 | this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); | 35 | this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); |
40 | } | 36 | } |
37 | |||
41 | } | 38 | } |
42 | }, | 39 | }, |
43 | 40 | ||
41 | applyStyle: { | ||
42 | value: function() { | ||
43 | this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; | ||
44 | this.application.ninja.stage.textTool.value = ""; | ||
45 | this.application.ninja.stage.textTool.element.style.display = "none"; | ||
46 | //ElementsMediator.setProperty([this.selectedElement], "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element)["color"]], "Change", "textTool"); | ||
47 | } | ||
48 | |||
49 | }, | ||
50 | |||
44 | HandleLeftButtonDown: { | 51 | HandleLeftButtonDown: { |
45 | value: function(event) { | 52 | value: function(event) { |
46 | this.selectedElement = null; | 53 | this.selectedElement = null; |
@@ -96,6 +103,22 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
96 | } | 103 | } |
97 | }, | 104 | }, |
98 | 105 | ||
106 | getSelectedElement: { | ||
107 | value: function(editor) { | ||
108 | var element = editor._selectedRange.startContainer; | ||
109 | if (element.nodeType == 3) { | ||
110 | element = element.parentNode; | ||
111 | } | ||
112 | return element; | ||
113 | } | ||
114 | }, | ||
115 | |||
116 | getStyleOfSelectedElement: { | ||
117 | value: function(editor) { | ||
118 | return window.getComputedStyle(this.getSelectedElement(editor)); | ||
119 | } | ||
120 | }, | ||
121 | |||
99 | applyElementStyles : { | 122 | applyElementStyles : { |
100 | value: function(fromElement, toElement, styles) { | 123 | value: function(fromElement, toElement, styles) { |
101 | styles.forEach(function(style) { | 124 | styles.forEach(function(style) { |
@@ -108,11 +131,11 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
108 | drawTextTool: { | 131 | drawTextTool: { |
109 | value: function() { | 132 | value: function() { |
110 | var self = this; | 133 | var self = this; |
111 | |||
112 | this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; | 134 | this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; |
113 | if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } | 135 | if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } |
114 | this.selectedElement.innerHTML = ""; | 136 | this.selectedElement.innerHTML = ""; |
115 | 137 | ||
138 | |||
116 | //Styling Options for text tool to look identical to the text you are manipulating. | 139 | //Styling Options for text tool to look identical to the text you are manipulating. |
117 | this.application.ninja.stage.textTool.element.style.display = "block"; | 140 | this.application.ninja.stage.textTool.element.style.display = "block"; |
118 | this.application.ninja.stage.textTool.element.style.position = "absolute"; | 141 | this.application.ninja.stage.textTool.element.style.position = "absolute"; |
@@ -124,14 +147,11 @@ exports.TextTool = Montage.create(DrawingTool, { | |||
124 | // Set font styling (Size, Style, Weight) | 147 | // Set font styling (Size, Style, Weight) |
125 | this.application.ninja.stage.textTool.didDraw = function() { | 148 | this.application.ninja.stage.textTool.didDraw = function() { |
126 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); | 149 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["overflow"]); |
127 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); | 150 | self.applyElementStyles(self.selectedElement, self.application.ninja.stage.textTool.element, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); |
128 | var range = document.createRange(), | 151 | this.selectAll(); |
129 | sel = window.getSelection(); | ||
130 | sel.removeAllRanges(); | ||
131 | range.selectNodeContents(self.application.ninja.stage.textTool.element.firstChild); | ||
132 | sel.addRange(range); | ||
133 | this.didDraw = function() {}; | 152 | this.didDraw = function() {}; |
134 | } | 153 | } |
154 | |||
135 | } | 155 | } |
136 | }, | 156 | }, |
137 | 157 | ||
diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js new file mode 100644 index 00000000..1e1c9e5b --- /dev/null +++ b/js/tools/bindingTool.js | |||
@@ -0,0 +1,102 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | DrawingTool = require("js/tools/drawing-tool").DrawingTool, | ||
9 | ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase; | ||
10 | SelectionTool = require("js/tools/SelectionTool").SelectionTool; | ||
11 | |||
12 | |||
13 | exports.BindingTool = Montage.create(ModifierToolBase, { | ||
14 | drawingFeedback: { value: { mode: "Draw2D", type: "" } }, | ||
15 | _selectedComponent: { | ||
16 | value: null | ||
17 | }, | ||
18 | |||
19 | selectedComponent: { | ||
20 | get:function() { | ||
21 | return this._selectedComponent; | ||
22 | }, | ||
23 | set: function(val) { | ||
24 | this._selectedComponent = val; | ||
25 | this.application.ninja.stage.bindingView.selectedComponent = val; | ||
26 | } | ||
27 | }, | ||
28 | |||
29 | Configure: { | ||
30 | value: function (doActivate) | ||
31 | { | ||
32 | if (doActivate) | ||
33 | { | ||
34 | NJevent("enableStageMove"); | ||
35 | this.application.ninja.workspaceMode = "binding"; | ||
36 | if (this.application.ninja.selectedElements.length !== 0 ) { | ||
37 | if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") { | ||
38 | this.selectedComponent = this.application.ninja.selectedElements[0].controller; | ||
39 | } else { | ||
40 | this.selectedComponent = null; | ||
41 | } | ||
42 | |||
43 | } | ||
44 | } | ||
45 | else | ||
46 | { | ||
47 | NJevent("disableStageMove"); | ||
48 | this.application.ninja.workspaceMode = "default"; | ||
49 | this.selectedComponent = null; | ||
50 | } | ||
51 | |||
52 | } | ||
53 | }, | ||
54 | |||
55 | HandleLeftButtonDown: { | ||
56 | value: function(event) { | ||
57 | NJevent("enableStageMove"); | ||
58 | } | ||
59 | }, | ||
60 | |||
61 | HandleMouseMove: { | ||
62 | value: function(event) { | ||
63 | /* | ||
64 | In the mouse over event we need to validate if the mouse over is over a hud. | ||
65 | If it on top of a hud bring that single hud to the top to associate with. | ||
66 | */ | ||
67 | |||
68 | this.application.ninja.stage.bindingView.handleMousemove(event); | ||
69 | //this.doDraw(event); | ||
70 | } | ||
71 | }, | ||
72 | |||
73 | HandleLeftButtonUp: { | ||
74 | value: function(event) { | ||
75 | if(!this.application.ninja.stage.bindingView._isDrawingConnection) { | ||
76 | if(this._escape) { | ||
77 | this._escape = false; | ||
78 | return; | ||
79 | } | ||
80 | |||
81 | if(this._hasDraw) { | ||
82 | this._hasDraw = false; | ||
83 | //this.endDraw(event); | ||
84 | } else { | ||
85 | this.doSelection(event); | ||
86 | if (this.application.ninja.selectedElements.length !== 0 ) { | ||
87 | if(this.application.ninja.selectedElements[0].controller) { | ||
88 | this.selectedComponent = this.application.ninja.selectedElements[0].controller; | ||
89 | } else { | ||
90 | this.selectedComponent = null; | ||
91 | } | ||
92 | } else { | ||
93 | this.selectedComponent = null; | ||
94 | } | ||
95 | this._isDrawing = false; | ||
96 | } | ||
97 | } | ||
98 | //this.endDraw(event); | ||
99 | //NJevent("disableStageMove"); | ||
100 | } | ||
101 | } | ||
102 | }); \ No newline at end of file | ||