diff options
-rw-r--r-- | _scss/compass_app_log.txt | 7 | ||||
-rw-r--r-- | _scss/imports/scss/_Stage.scss | 14 | ||||
-rw-r--r-- | css/ninja.css | 4 | ||||
-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 | ||||
-rw-r--r-- | node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.css | 112 | ||||
-rw-r--r-- | node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.html | 27 | ||||
-rw-r--r-- | node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.js | 1669 | ||||
-rw-r--r-- | node_modules/montage/ui/rich-text-editor.reel/rich-text-resizer.js | 349 | ||||
-rw-r--r-- | node_modules/montage/ui/rich-text-editor.reel/rich-text-sanitizer.js | 132 |
12 files changed, 2425 insertions, 10 deletions
diff --git a/_scss/compass_app_log.txt b/_scss/compass_app_log.txt index 6fe64a6f..d28e1e77 100644 --- a/_scss/compass_app_log.txt +++ b/_scss/compass_app_log.txt | |||
@@ -93,3 +93,10 @@ | |||
93 | 2012-01-20 15:16:38 overwrite ../css/ninja.css | 93 | 2012-01-20 15:16:38 overwrite ../css/ninja.css |
94 | 2012-01-20 15:17:03 overwrite ../css/ninja.css | 94 | 2012-01-20 15:17:03 overwrite ../css/ninja.css |
95 | 2012-01-20 15:17:39 overwrite ../css/ninja.css | 95 | 2012-01-20 15:17:39 overwrite ../css/ninja.css |
96 | 2012-01-30 16:28:54 overwrite ../css/ninja.css | ||
97 | 2012-01-30 16:29:04 overwrite ../css/ninja.css | ||
98 | 2012-01-30 16:33:31 overwrite ../css/ninja.css | ||
99 | 2012-01-30 17:18:02 overwrite ../css/ninja.css | ||
100 | 2012-01-30 18:28:44 overwrite ../css/ninja.css | ||
101 | 2012-02-02 17:20:26 overwrite ../css/ninja.css | ||
102 | 2012-02-02 17:20:31 identical ../css/ninja.css | ||
diff --git a/_scss/imports/scss/_Stage.scss b/_scss/imports/scss/_Stage.scss index a992b793..09dae3d6 100644 --- a/_scss/imports/scss/_Stage.scss +++ b/_scss/imports/scss/_Stage.scss | |||
@@ -192,3 +192,17 @@ | |||
192 | overflow-x: auto; | 192 | overflow-x: auto; |
193 | overflow-y: auto; | 193 | overflow-y: auto; |
194 | } | 194 | } |
195 | .montage-editor-frame { | ||
196 | position:absolute; | ||
197 | z-index:7; | ||
198 | top: 0; | ||
199 | left:0; | ||
200 | display:none; | ||
201 | -webkit-user-select: initial; | ||
202 | } | ||
203 | .montage-editor { | ||
204 | padding:0px; | ||
205 | word-wrap: normal; | ||
206 | |||
207 | |||
208 | } \ No newline at end of file | ||
diff --git a/css/ninja.css b/css/ninja.css index 2fcb1380..7bc4c80e 100644 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -271,6 +271,10 @@ background: transparent; | |||
271 | 271 | ||
272 | #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } | 272 | #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } |
273 | 273 | ||
274 | .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } | ||
275 | |||
276 | .montage-editor { padding: 0px; word-wrap: normal; } | ||
277 | |||
274 | /* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ | 278 | /* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ |
275 | /* layout for the container of all panels within a dock area */ | 279 | /* layout for the container of all panels within a dock area */ |
276 | .panelContainer { margin: 0px; padding: 0px 0px; position: relative; /* | 280 | .panelContainer { margin: 0px; padding: 0px 0px; position: relative; /* |
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 | ||
13 | exports.Stage = Montage.create(Component, { | 13 | exports.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 | ||
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; | ||
9 | 10 | ||
10 | exports.TextTool = Montage.create(DrawingTool, { | 11 | 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 | |||
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.applicati |