diff options
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-x | js/controllers/elements/canvas-controller.js | 14 | ||||
-rwxr-xr-x | js/controllers/elements/component-controller.js | 2 | ||||
-rwxr-xr-x | js/controllers/elements/element-controller.js | 184 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 487 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 94 |
5 files changed, 460 insertions, 321 deletions
diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js index b5df3911..b8894c18 100755 --- a/js/controllers/elements/canvas-controller.js +++ b/js/controllers/elements/canvas-controller.js | |||
@@ -34,12 +34,12 @@ exports.CanvasController = Montage.create(ElementController, { | |||
34 | } | 34 | } |
35 | } | 35 | } |
36 | }, | 36 | }, |
37 | 37 | ||
38 | setProperties: { | 38 | setProperties: { |
39 | value: function(el, props, index) { | 39 | value: function(element, properties) { |
40 | for(var p in props) { | 40 | for(var property in properties) { |
41 | el.elementModel.controller.setProperty(el, p, props[p][index]); | 41 | this.setProperty(element, property, properties[property]); |
42 | } | 42 | } |
43 | } | 43 | } |
44 | } | 44 | } |
45 | }); \ No newline at end of file | 45 | }); \ No newline at end of file |
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 260ee8a0..d902e4a1 100755 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js | |||
@@ -16,6 +16,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
16 | switch(prop) { | 16 | switch(prop) { |
17 | case "id": | 17 | case "id": |
18 | case "class": | 18 | case "class": |
19 | case "-webkit-transform-style": | ||
19 | case "left": | 20 | case "left": |
20 | case "top": | 21 | case "top": |
21 | case "width": | 22 | case "width": |
@@ -38,6 +39,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
38 | switch(p) { | 39 | switch(p) { |
39 | case "id": | 40 | case "id": |
40 | case "class": | 41 | case "class": |
42 | case "-webkit-transform-style": | ||
41 | case "left": | 43 | case "left": |
42 | case "top": | 44 | case "top": |
43 | case "width": | 45 | case "width": |
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..35a543ac 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -5,22 +5,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | NJComponent = require("js/lib/nj-base").NJComponent; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | var ElementController = exports.ElementController = Montage.create(NJComponent, { | 10 | exports.ElementController = Montage.create(Component, { |
11 | 11 | ||
12 | addElement: { | 12 | addElement: { |
13 | value: function(el, styles) { | 13 | value: function(el, styles) { |
14 | this.application.ninja.currentDocument.documentRoot.appendChild(el); | 14 | this.application.ninja.currentDocument.documentRoot.appendChild(el); |
15 | // Nested elements - | 15 | // Nested elements - TODO make sure the CSS is correct before nesting elements |
16 | // TODO make sure the CSS is correct before nesting elements | ||
17 | // this.application.ninja.currentSelectedContainer.appendChild(el); | 16 | // this.application.ninja.currentSelectedContainer.appendChild(el); |
18 | this.application.ninja.stylesController.setElementStyles(el, styles); | 17 | if(styles) { |
18 | this.application.ninja.stylesController.setElementStyles(el, styles); | ||
19 | } | ||
19 | } | 20 | } |
20 | }, | 21 | }, |
21 | 22 | ||
23 | // Remove the element from the DOM and clear the GLWord. | ||
22 | removeElement: { | 24 | removeElement: { |
23 | value: function(el) { | 25 | value: function(el) { |
26 | if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { | ||
27 | el.elementModel.shapeModel.GLWorld.clearTree(); | ||
28 | } | ||
24 | el.parentNode.removeChild(el); | 29 | el.parentNode.removeChild(el); |
25 | } | 30 | } |
26 | }, | 31 | }, |
@@ -42,10 +47,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
42 | }, | 47 | }, |
43 | 48 | ||
44 | setProperties: { | 49 | setProperties: { |
45 | value: function(el, props, index) { | 50 | value: function(element, properties) { |
46 | for(var p in props) { | 51 | for(var property in properties) { |
47 | this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]); | 52 | this.application.ninja.stylesController.setElementStyle(element, property, properties[property]); |
48 | } | 53 | } |
49 | } | 54 | } |
50 | }, | 55 | }, |
51 | 56 | ||
@@ -60,37 +65,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
60 | // borderSide : "top", "right", "bottom", or "left" | 65 | // borderSide : "top", "right", "bottom", or "left" |
61 | getColor: { | 66 | getColor: { |
62 | value: function(el, isFill, borderSide) { | 67 | value: function(el, isFill, borderSide) { |
63 | var colorObj, | 68 | var colorObj, color, image; |
64 | color, | ||
65 | image; | ||
66 | 69 | ||
67 | // Return cached value if one exists | 70 | // Return cached value if one exists |
68 | if(isFill) | 71 | if(isFill) { |
69 | { | 72 | if(el.elementModel.fill) { |
70 | if(el.elementModel.fill) | ||
71 | { | ||
72 | return el.elementModel.fill; | 73 | return el.elementModel.fill; |
73 | } | 74 | } |
74 | //TODO: Once logic for color and gradient is established, this needs to be revised | 75 | //TODO: Once logic for color and gradient is established, this needs to be revised |
75 | color = this.getProperty(el, "background-color"); | 76 | color = this.getProperty(el, "background-color"); |
76 | image = this.getProperty(el, "background-image"); | 77 | image = this.getProperty(el, "background-image"); |
77 | } | 78 | } else { |
78 | else | ||
79 | { | ||
80 | // Try getting border color from specific side first | 79 | // Try getting border color from specific side first |
81 | if(borderSide) | 80 | if(borderSide) { |
82 | { | ||
83 | color = this.getProperty(el, "border-" + borderSide + "-color"); | 81 | color = this.getProperty(el, "border-" + borderSide + "-color"); |
84 | image = this.getProperty(el, "border-" + borderSide + "-image"); | 82 | image = this.getProperty(el, "border-" + borderSide + "-image"); |
85 | } | 83 | } |
86 | 84 | ||
87 | // If no color was found, look up the shared border color | 85 | // If no color was found, look up the shared border color |
88 | if(!color && !image) | 86 | if(!color && !image) { |
89 | { | 87 | if(el.elementModel.stroke) { |
90 | if(el.elementModel.stroke) | ||
91 | { | ||
92 | return el.elementModel.stroke; | 88 | return el.elementModel.stroke; |
93 | } | 89 | } |
90 | |||
94 | color = this.getProperty(el, "border-color"); | 91 | color = this.getProperty(el, "border-color"); |
95 | image = this.getProperty(el, "border-image"); | 92 | image = this.getProperty(el, "border-image"); |
96 | } | 93 | } |
@@ -107,17 +104,12 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
107 | } | 104 | } |
108 | 105 | ||
109 | // Update cache | 106 | // Update cache |
110 | if(isFill) | 107 | if(isFill) { |
111 | { | ||
112 | el.elementModel.fill = colorObj; | 108 | el.elementModel.fill = colorObj; |
113 | } | 109 | } else if(!borderSide) { |
114 | else if(!borderSide) | ||
115 | { | ||
116 | // TODO - Need to update border style and width also | 110 | // TODO - Need to update border style and width also |
117 | el.elementModel.stroke = colorObj; | 111 | el.elementModel.stroke = colorObj; |
118 | } | 112 | } else { |
119 | else | ||
120 | { | ||
121 | // TODO - Should update specific border sides too | 113 | // TODO - Should update specific border sides too |
122 | } | 114 | } |
123 | 115 | ||
@@ -128,10 +120,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
128 | setColor: { | 120 | setColor: { |
129 | value: function(el, color, isFill) { | 121 | value: function(el, color, isFill) { |
130 | var mode = color.mode; | 122 | var mode = color.mode; |
131 | if(isFill) | 123 | |
132 | { | 124 | if(isFill) { |
133 | if(mode) | 125 | if(mode) { |
134 | { | ||
135 | switch (mode) { | 126 | switch (mode) { |
136 | case 'nocolor': | 127 | case 'nocolor': |
137 | this.setProperty(el, "background-image", "none"); | 128 | this.setProperty(el, "background-image", "none"); |
@@ -147,12 +138,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
147 | this.setProperty(el, "background-color", color.color.css); | 138 | this.setProperty(el, "background-color", color.color.css); |
148 | } | 139 | } |
149 | } | 140 | } |
141 | |||
150 | el.elementModel.fill = color; | 142 | el.elementModel.fill = color; |
151 | } | 143 | } else { |
152 | else | 144 | if(mode) { |
153 | { | ||
154 | if(mode) | ||
155 | { | ||
156 | switch (mode) { |