diff options
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/PanTool.js | 6 | ||||
-rwxr-xr-x | js/tools/TextTool.js | 48 | ||||
-rw-r--r-- | js/tools/bindingTool.js | 102 |
3 files changed, 140 insertions, 16 deletions
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index a8911c0c..fce8a7d7 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js | |||
@@ -47,8 +47,8 @@ exports.PanTool = Montage.create(toolBase, | |||
47 | HandleLeftButtonDown: { | 47 | HandleLeftButtonDown: { |
48 | value : function ( event ) { | 48 | value : function ( event ) { |
49 | // Determine the maximum horizontal and vertical scroll values | 49 | // Determine the maximum horizontal and vertical scroll values |
50 | this._maxHorizontalScroll = this.application.ninja.currentDocument.model.documentRoot.scrollWidth - this.application.ninja.stage._canvas.width - 11; | 50 | this._maxHorizontalScroll = this.application.ninja.currentDocument.model.views.design.document.body.scrollWidth - this.application.ninja.stage._canvas.width - 11; |
51 | this._maxVerticalScroll = this.application.ninja.currentDocument.model.documentRoot.scrollHeight - this.application.ninja.stage._canvas.height - 11; | 51 | this._maxVerticalScroll = this.application.ninja.currentDocument.model.views.design.document.body.scrollHeight - this.application.ninja.stage._canvas.height - 11; |
52 | if((this._maxHorizontalScroll > 0) || (this._maxVerticalScroll > 0) || this._altKeyDown) | 52 | if((this._maxHorizontalScroll > 0) || (this._maxVerticalScroll > 0) || this._altKeyDown) |
53 | { | 53 | { |
54 | this._isDrawing = true; | 54 | this._isDrawing = true; |
@@ -239,6 +239,8 @@ exports.PanTool = Montage.create(toolBase, | |||
239 | this._localPt = [cop[0] + localPt[0], cop[1] + localPt[1], localPt[2]]; | 239 | this._localPt = [cop[0] + localPt[0], cop[1] + localPt[1], localPt[2]]; |
240 | viewUtils.popViewportObj(); | 240 | viewUtils.popViewportObj(); |
241 | } | 241 | } |
242 | this._localPt[0] = Math.round(this._localPt[0]); | ||
243 | this._localPt[1] = Math.round(this._localPt[1]); | ||
242 | this._globalPt = MathUtils.transformAndDivideHomogeneousPoint( this._localPt, localToGlobalMat ); | 244 | this._globalPt = MathUtils.transformAndDivideHomogeneousPoint( this._localPt, localToGlobalMat ); |
243 | var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); | 245 | var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); |
244 | 246 | ||
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); | ||