aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/shapes-controller.js2
-rwxr-xr-xjs/lib/NJUtils.js80
-rwxr-xr-xjs/mediators/drag-drop-mediator.js6
-rwxr-xr-xjs/models/element-model.js28
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.js64
-rwxr-xr-xjs/stage/stage.reel/stage.js6
-rw-r--r--js/tools/BrushTool.js10
-rwxr-xr-xjs/tools/EyedropperTool.js3
-rwxr-xr-xjs/tools/LineTool.js11
-rwxr-xr-xjs/tools/PenTool.js11
-rwxr-xr-xjs/tools/ShapeTool.js40
-rwxr-xr-xjs/tools/TagTool.js129
-rwxr-xr-xjs/tools/drawing-tool-base.js24
13 files changed, 156 insertions, 258 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 8d7b74f0..e9a5f865 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -129,7 +129,7 @@ exports.ShapesController = Montage.create(CanvasController, {
129 el.elementModel.shapeModel.GLWorld.render(); 129 el.elementModel.shapeModel.GLWorld.render();
130 break; 130 break;
131 case "useWebGl": 131 case "useWebGl":
132 canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); 132 canvas = njModule.NJUtils.make("canvas", el.className, this.application.ninja.currentDocument);
133 canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); 133 canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom());
134 canvas.width = el.width; 134 canvas.width = el.width;
135 canvas.height = el.height; 135 canvas.height = el.height;
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 301af3f1..5aaeb5f2 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -5,16 +5,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
5</copyright> */ 5</copyright> */
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
8 Uuid = require("montage/core/uuid").Uuid, 9 Uuid = require("montage/core/uuid").Uuid,
9 ElementModel = require("js/models/element-model").ElementModel, 10 ElementModel = require("js/models/element-model").ElementModel,
10 Properties3D = require("js/models/properties-3d").Properties3D, 11 Properties3D = require("js/models/properties-3d").Properties3D,
11 ShapeModel = require("js/models/shape-model").ShapeModel, 12 ShapeModel = require("js/models/shape-model").ShapeModel,
12 ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; 13 ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory;
13 14
14exports.NJUtils = Object.create(Object.prototype, { 15exports.NJUtils = Montage.create(Component, {
15 16
16
17
18 /* =============== DOM Access ================ */ 17 /* =============== DOM Access ================ */
19 18
20 ///// Quick "getElementById" 19 ///// Quick "getElementById"
@@ -95,14 +94,73 @@ exports.NJUtils = Object.create(Object.prototype, {
95 } 94 }
96 }, 95 },
97 96
98 ///// Element factory function for Ninja Elements 97 createModelWithShape: {
99 ///// selection is the string displayed in the PI 98 value: function(el, selection) {
100 makeNJElement: { 99 el.elementModel = Montage.create(ElementModel).initialize(el, true, selection);
101 value: function(tag, selection, controller, attr, isShape) { 100 }
102 var el = this.make(tag, attr); 101 },
103 this.makeElementModel(el, selection, controller, isShape);
104 102
105 return el; 103 createModelWithSelection: {
104 value: function(el, selection) {
105 el.elementModel = Montage.create(ElementModel).initialize(el, false, selection);
106 }
107 },
108
109 createModelForComponent: {
110 value: function(el, selection) {
111 el.elementModel = Montage.create(ElementModel).initialize(el, false, selection, true);
112 }
113 },
114
115 // TODO: Find a better place for this method
116 stylesFromDraw: {
117 value: function(element, width, height, drawData, pos) {
118 var styles = {};
119
120 styles['position'] = pos ? pos: "absolute";
121 styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
122 styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
123 styles['width'] = width + 'px';
124 styles['height'] = height + 'px';
125
126 // TODO: Check why Canvas has different tranform styles from default.
127 if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
128 styles['-webkit-transform-style'] = 'preserve-3d';
129 styles['-webkit-transform'] = this.getElementMatrix(drawData.planeMat, drawData.midPt);
130 }
131
132 if(element.nodeName === "CANVAS") {
133 element.width = width;
134 element.height = height;
135 delete styles['width'];
136 delete styles['height'];
137
138 styles['-webkit-transform-style'] = 'preserve-3d';
139 }
140
141 return styles;
142 }
143 },
144
145 // Get the matrix for the actual element being added to the user document.
146 // TODO: Find a better place for this method
147 getElementMatrix: {
148 value: function(planeMat, midPt) {
149 var divMat, flatMat, flatMatSafe;
150 // we should not need to worry about divide by zero below since we snapped to the point
151 divMat = planeMat.slice(0);
152 divMat[12] = 0.0;
153 divMat[13] = 0.0;
154 //divMat[14] = 0.0;
155 divMat[14] = midPt[2];
156
157 // set the left and top of the element such that the center of the rectangle is at the mid point
158 this.application.ninja.stage.setStageAsViewport();
159
160 flatMat = divMat;
161 flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10);
162
163 return "matrix3d(" + flatMatSafe + ")";
106 } 164 }
107 }, 165 },
108 166
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index b0aba5b6..59086ef6 100755
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -114,11 +114,13 @@ exports.DragDropMediator = Montage.create(Component, {
114 var self = this; 114 var self = this;
115 // 115 //
116 if (e.currentTarget.fileType.indexOf('svg') !== -1) { 116 if (e.currentTarget.fileType.indexOf('svg') !== -1) {
117 element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper 117 element = NJUtils.make('embed', null, this.application.ninja.currentDocument);//TODO: Verify this is proper
118 NJUtils.createModelWithSelection(element, "SVG");
118 element.type = 'image/svg+xml'; 119 element.type = 'image/svg+xml';
119 element.src = url+'/'+fileName; 120 element.src = url+'/'+fileName;
120 } else { 121 } else {
121 element = NJUtils.makeNJElement('image', 'image', 'image'); 122 element = NJUtils.make('image', null, this.application.ninja.currentDocument);
123 NJUtils.createModel(element);
122 element.src = url+'/'+fileName; 124 element.src = url+'/'+fileName;
123 } 125 }
124 //Adding element once it is loaded 126 //Adding element once it is loaded
diff --git a/js/models/element-model.js b/js/models/element-model.js
index 72d61806..966158e4 100755
--- a/js/models/element-model.js
+++ b/js/models/element-model.js
@@ -32,24 +32,38 @@ exports.ElementModel = Montage.create(Montage, {
32 shapeModel: { value: null }, 32 shapeModel: { value: null },
33 isIn2DSnapCache : { value: false }, 33 isIn2DSnapCache : { value: false },
34 34
35 isComponent: { value: false },
36
35 fill: { value: null }, 37 fill: { value: null },
36 stroke: { value: null }, 38 stroke: { value: null },
37 39
38 initialize: { 40 initialize: {
39 value: function(el, isShape) { 41 value: function(el, isShape, selection, isComponent) {
40 var elementName, controller; 42 var elementName, controller;
41 43
42 elementName = el.nodeName.toLowerCase(); 44 elementName = el.nodeName.toLowerCase();
43 controller = this.elementNameToController(elementName);
44 45
45 this.type = el.nodeName; 46 this.type = el.nodeName;
46 this.selection = elementName; 47 this.selection = selection ? selection : elementName;
47 this.controller = ControllerFactory.getController(controller); 48
48 this.pi = this.elementNameToPi(elementName); 49 if(isComponent) {
50 controller = "component";
51 this.pi = this.elementNameToPi(selection.replace(/\s+/g, ''));
52 this.isComponent = true;
53 } else {
54 controller = this.elementNameToController(elementName);
55 this.pi = this.elementNameToPi(elementName);
56 }
57
49 this.props3D = Montage.create(Properties3D); 58 this.props3D = Montage.create(Properties3D);
50 59
51 //shapeModel: { value: shapeProps}, 60 if(isShape) {
52// isShape: { value: isShape} 61 this.controller = ControllerFactory.getController("shape");
62 this.shapeModel = Montage.create(ShapeModel);
63 this.isShape = true;
64 } else {
65 this.controller = ControllerFactory.getController(controller);
66 }
53 67
54 return this; 68 return this;
55 69
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index 79eac37b..4169423b 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -317,81 +317,77 @@ exports.ComponentsPanel = Montage.create(Component, {
317 317
318 switch(name) { 318 switch(name) {
319 case "anchor": 319 case "anchor":
320 el = NJUtils.makeNJElement("a", "Anchor", "component"); 320 el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument);
321 el.elementModel.pi = "AnchorPi"; 321 document.application.njUtils.createModelForComponent(el, "Anchor");
322 el.setAttribute("href", "http://www.motorola.com"); 322 el.setAttribute("href", "http://www.motorola.com");
323 el.innerHTML = "link"; 323 el.innerHTML = "link";
324 break; 324 break;
325 case "button": 325 case "button":
326