From 5a74b74e8ec76d60cadf623cabaa0b667f1c4058 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 2 May 2012 11:08:59 -0700
Subject: code cleanup
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
js/ninja.reel/ninja.js | 7 -------
js/panels/properties.reel/properties.js | 6 +-----
js/stage/stage.reel/stage.js | 5 +++--
3 files changed, 4 insertions(+), 14 deletions(-)
(limited to 'js')
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index d2d45410..cf7c6cf4 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -104,8 +104,6 @@ exports.Ninja = Montage.create(Component, {
handleResizeEnd: {
value: function(e) {
-// this.height -= this._resizedHeight;
-// this.width -= this._resizedWidth;
this.stage.resizeCanvases = true;
this._resizedHeight = 0;
this._resizedWidth = 0;
@@ -187,11 +185,6 @@ exports.Ninja = Montage.create(Component, {
}
},
- willDraw: {
- value: function() {
- }
- },
-
draw: {
value: function() {
if(this.isResizing) {
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index ee90cd64..8c2daa14 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -208,11 +208,7 @@ exports.Properties = Montage.create(Component, {
this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
}
- if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
- this.threeD.flatten = false;
- } else {
- this.threeD.flatten = true;
- }
+ this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d";
if(this.customPi !== stage.elementModel.pi) {
// We need to unregister color chips from the previous selection from the Color Model
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 515165bf..a7c22a7f 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -958,8 +958,9 @@ exports.Stage = Montage.create(Component, {
this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft;
this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop;
}
- },
- restoreScroll:{
+ },
+
+ restoreScroll:{
value: function(){
this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;
this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll;
--
cgit v1.2.3
From d2a5fcbaed6b3c3377edecbc27e6a2818b79be40 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 2 May 2012 15:34:49 -0700
Subject: Nesting absolute element in the Tag tool. Refactoring element
creation and element models
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
.../tag-properties.reel/tag-properties.html | 12 +-
.../tag-properties.reel/tag-properties.js | 6 +-
js/controllers/elements/controller-factory.js | 2 +
js/controllers/elements/element-controller.js | 5 +-
js/data/pi/pi-data.js | 6 +-
js/lib/NJUtils.js | 32 +++--
js/models/element-model.js | 61 +++++++--
js/tools/TagTool.js | 151 ++++++++-------------
8 files changed, 138 insertions(+), 137 deletions(-)
(limited to 'js')
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index c80ba36e..4ea9c659 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -37,11 +37,11 @@
<body>
<div id="tagProperties" class="subToolHolderPanel">
<div id="tagToolContainer" class="tagRadioButtons">
- <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
- <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
- <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
- <input type="radio" id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>
- <input type="radio" id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>
+ <input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/>
+ <input type="radio" id="imageTool" data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/>
+ <input type="radio" id="videoTool" data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/>
+ <input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/>
+ <input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/>
<div class="nj-divider divider-vertical"> </div>
@@ -67,10 +67,10 @@
<label class="label"> Position:</label>
<select id="positionCB" class="nj-skinned">
+ <option>Static</option>
<option>Absolute</option>
<option>Relative</option>
<option>Fixed</option>
- <option>Static</option>
<option>Inherit</option>
</select>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 1caabc35..6519d5b8 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -33,9 +33,9 @@ exports.TagProperties = Montage.create(ToolProperties, {
handleClick: {
value: function(event) {
- this.selectedElement = event._event.target.id;
+ this.selectedElement = event._event.target.value;
- if(this.selectedElement === "customTool") {
+ if(this.selectedElement === "custom") {
this.customName.style["display"] = "";
this.customLabel.style["display"] = "";
} else {
@@ -46,7 +46,7 @@ exports.TagProperties = Montage.create(ToolProperties, {
},
_selectedElement: {
- value: "divTool", enumerable: false
+ value: "div", enumerable: false
},
selectedElement: {
diff --git a/js/controllers/elements/controller-factory.js b/js/controllers/elements/controller-factory.js
index 1bbbbce0..3ac3fe14 100755
--- a/js/controllers/elements/controller-factory.js
+++ b/js/controllers/elements/controller-factory.js
@@ -42,6 +42,8 @@ exports.ControllerFactory = Montage.create(Montage, {
return ImageController;
} else if(value.indexOf("video") !== -1) {
return VideoController;
+ } else {
+ return BlockController;
}
} catch (err) {
console.log("Could not create Controller Factory " + err);
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 452d09f1..7f553551 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,9 +11,8 @@ exports.ElementController = Montage.create(Component, {
addElement: {
value: function(el, styles) {
- this.application.ninja.currentDocument.documentRoot.appendChild(el);
- // Nested elements - TODO make sure the CSS is correct before nesting elements
- // this.application.ninja.currentSelectedContainer.appendChild(el);
+ this.application.ninja.currentSelectedContainer.appendChild(el);
+
if(styles) {
this.application.ninja.stylesController.setElementStyles(el, styles);
}
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 65161b4f..d1dc9f34 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -100,7 +100,7 @@ exports.PiData = Montage.create( Montage, {
}
]
},
- imagePi: {
+ imgPi: {
value: [
{
label: "Image Properties",
@@ -807,8 +807,8 @@ exports.PiData = Montage.create( Montage, {
]
]
}
- ] //value: [
- } //BrushStrokePi: {
+ ]
+ }
});
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index dae128e4..301af3f1 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -54,13 +54,25 @@ exports.NJUtils = Object.create(Object.prototype, {
return document.createTextNode(text);
}
},
-
+
///// Quick "createElement" function "attr" can be classname or object
///// with attribute key/values
- ///// Suppor for data attributes
- make : {
- value: function(tag, attr) {
- var el = document.createElement(tag);
+ ///// Support for data attributes
+ ///// Support user/ninja document
+ make: {
+ value: function(tag, attr, doc) {
+ var _doc, el;
+
+ _doc = doc ? doc._document : document;
+ el = _doc.createElement(tag);
+ this.decor(el, attr);
+
+ return el;
+ }
+ },
+
+ decor: {
+ value: function(el, attr) {
if (typeof attr === 'object') {
for (var a in attr) {
if (attr.hasOwnProperty(a)) {
@@ -74,8 +86,12 @@ exports.NJUtils = Object.create(Object.prototype, {
} else if (typeof attr === 'string') {
el.className = (el.className + ' ' + attr).trim();
}
-
- return el;
+ }
+ },
+
+ createModel: {
+ value: function(el) {
+ el.elementModel = Montage.create(ElementModel).initialize(el);
}
},
@@ -94,8 +110,6 @@ exports.NJUtils = Object.create(Object.prototype, {
///// TODO: find a different place for this function
makeElementModel: {
value: function(el, selection, controller, isShape) {
- //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
-
var p3d = Montage.create(Properties3D);
var shapeProps = null;
diff --git a/js/models/element-model.js b/js/models/element-model.js
index 0e199a67..72d61806 100755
--- a/js/models/element-model.js
+++ b/js/models/element-model.js
@@ -4,10 +4,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
-var Montage = require("montage/core/core").Montage,
- Properties3D = require("js/models/properties-3d").Properties3D,
- ShapeModel = require("js/models/shape-model").ShapeModel,
- ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory;
+var Montage = require("montage/core/core").Montage,
+ Properties3D = require("js/models/properties-3d").Properties3D,
+ ShapeModel = require("js/models/shape-model").ShapeModel,
+ ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory,
+ PiData = require("js/data/pi/pi-data").PiData;
exports.ElementModel = Montage.create(Montage, {
key: { value: "_model_"},
@@ -35,17 +36,47 @@ exports.ElementModel = Montage.create(Montage, {
stroke: { value: null },
initialize: {
- value: function(type, selection, controller, isShape) {
- /*
- this.type = type;
- this.selection = selection;
-
- controller: { value: ControllerFactory.getController(controller)},
- pi: { value: pi},
- props3D: { value: p3d},
- shapeModel: { value: shapeProps},
- isShape: { value: isShape}
- */
+ value: function(el, isShape) {
+ var elementName, controller;
+
+ elementName = el.nodeName.toLowerCase();
+ controller = this.elementNameToController(elementName);
+
+ this.type = el.nodeName;
+ this.selection = elementName;
+ this.controller = ControllerFactory.getController(controller);
+ this.pi = this.elementNameToPi(elementName);
+ this.props3D = Montage.create(Properties3D);
+
+ //shapeModel: { value: shapeProps},
+// isShape: { value: isShape}
+
+ return this;
+
+ }
+ },
+
+ elementNameToController: {
+ value: function(name) {
+ if(name === "div" || name === "custom") {
+ return "block";
+ } else if(name === "img") {
+ return "image";
+ } else {
+ return name;
+ }
+ }
+ },
+
+ elementNameToPi: {
+ value: function(name) {
+ var piString = name + "Pi";
+
+ if(!PiData.hasOwnProperty(piString)) {
+ piString = "blockPi";
+ }
+
+ return piString;
}
},
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index d946db72..6c999df9 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -13,18 +13,14 @@ var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
exports.TagTool = Montage.create(DrawingTool, {
drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
- _editSymbol: { value: null },
-
- editSymbol:{
- get: function() { return this._editSymbol; },
- set: function(item) {
- if(item) {
-// stageManagerModule.stageManager.drawElementBoundingBox(item, true);
+ Configure: {
+ value: function(wasSelected) {
+ if(wasSelected) {
+ NJevent("enableStageMove");
+ this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
} else {
-// stageManagerModule.stageManager.drawSelectionRec(true);
+ NJevent("disableStageMove");
}
-
- this._editSymbol = item;
}
},
@@ -59,11 +55,9 @@ exports.TagTool = Montage.create(DrawingTool, {
this._escape = false;
return;
}
-
- var drawData, selectedItem;
if(this._hasDraw) {
- drawData = this.getDrawingData();
+ var drawData = this.getDrawingData();
if(drawData) {
this.insertElement(drawData);
@@ -72,82 +66,60 @@ exports.TagTool = Montage.create(DrawingTool, {
this._hasDraw = false;
this.endDraw(event);
} else {
- if(this.editSymbol) {
- this.insertElement();
- } else {
- //selectedItem = this.doSelection(event);
- this.doSelection(event);
- }
-
- this._isDrawing = false;
+ this.doSelection(event);
}
- }
- },
- HandleDoubleClick: {
- value: function(event) {
- /*
- if(selectionManagerModule.selectionManager.isDocument) {
- this.editSymbol = documentManagerModule.DocumentManager.activeDocument.documentRoot;
- } else {
- this.editSymbol = selectionManagerModule.selectionManager._selectedItems[0];
- }
- */
+ this._isDrawing = false;
}
},
- /* This will overwrite the existing function in drawing tool. Do not uncomment
- HandleKeyPress: {
- value: function(event) {
- if(event.metaKey) {
- // TODO fix this
- if(selectionManagerModule.selectionManager.isDocument) {
- this.editSymbol = documentManagerModule.DocumentManager.activeDocument.documentRoot;
- } else {
- this.editSymbol = selectionManagerModule.selectionManager._selectedItems[0];
- }
+ // TODO: Fix Classname
+ // TODO: Add position support
+ insertElement: {
+ value: function(drawData) {
+ var element, styles;
+ // Create the element
+ if(this.options.selectedElement === "custom") {
+ element = document.application.njUtils.make(this.options.customName.value, null, this.application.ninja.currentDocument);
+ } else {
+ element = document.application.njUtils.make(this.options.selectedElement, null, this.application.ninja.currentDocument);
}
- }
- },
+ // Create the model
+ document.application.njUtils.createModel(element);
- HandleKeyUp: {
- value: function(event) {
- if(event.keyCode === 93 || event.keyCode === 91) { // Command Keycode
- this.editSymbol = null;
- }
- }
- },
- */
- Configure: {
- value: function(wasSelected) {
- if(wasSelected) {
- NJevent("enableStageMove");
- this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
- } else {
- NJevent("disableStageMove");
+ // Create the styles
+ styles = this.makeStylesFromDraw(drawData);
+ if(element.nodeName === "CANVAS") {
+ element.width = parseInt(styles.width);
+ element.height = parseInt(styles.height);
+ delete styles['width'];
+ delete styles['height'];
}
+
+ // Add the element and styles
+ this.application.ninja.elementMediator.addElements(element, styles);
}
},
-
- insertElement: {
- value: function(data) {
- var element;
- // TODO Refactor into 1 function
- if(data) {
- // Get Tag & CSS -- ~~ shortcut for ABS
- element = this.makeElement(~~data.width, ~~data.height, data.planeMat, data.midPt, this.makeTag());
+ makeStylesFromDraw: {
+ value: function(drawData) {
+ var styles = {};
- // Insert Element
- this.application.ninja.elementMediator.addElements(element.el, element.data);
- } else {
- element = this.makeStaticElement(this.makeTag());
- this._insertStatic(this.editSymbol, element.el, element.style);
+ styles['position'] = "absolute";
+ styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * ~~drawData.width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
+ styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * ~~drawData.height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
+ styles['width'] = ~~drawData.width + 'px';
+ styles['height'] = ~~drawData.height + 'px';
+
+ if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
+ styles['-webkit-transform-style'] = 'preserve-3d';
+ styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(drawData.planeMat, drawData.midPt);
}
+ return styles;
}
},
@@ -157,17 +129,17 @@ exports.TagTool = Montage.create(DrawingTool, {
selectedTag = this.options.selectedElement;
- if(selectedTag === "divTool") {
+ if(selectedTag === "div") {
newTag = NJUtils.makeNJElement("div", "div", "block");
- } else if(selectedTag === "imageTool") {
+ } else if(selectedTag === "image") {
newTag = NJUtils.makeNJElement("image", "image", "image");
- } else if(selectedTag === "videoTool") {
+ } else if(selectedTag === "video") {
newTag = NJUtils.makeNJElement("video", "video", "video", {
innerHTML: "Your browser does not support the VIDEO element."
});
- } else if(selectedTag === "canvasTool") {
+ } else if(selectedTag === "canvas") {
newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas");
- } else if(selectedTag === "customTool") {
+ } else if(selectedTag === "custom") {
newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block");
}
/* SWF Tag tool - Not used for now. Will revisit this at a later time.
@@ -222,13 +194,13 @@ exports.TagTool = Montage.create(DrawingTool, {
makeElement: {
value: function(w, h, planeMat, midPt, tag, isShape) {
- var left = Math.round(midPt[0] - 0.5 * w);
- var top = Math.round(midPt[1] - 0.5 * h);
+ var left = (Math.round(midPt[0] - 0.5 * w)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
+ var top = (Math.round(midPt[1] - 0.5 * h)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
var styles = {
'position': 'absolute',
- 'top' : top + 'px',
- 'left' : left + 'px'
+ 'top' : top,
+ 'left' : left
};
if(!MathUtils.isIdentityMatrix(planeMat)) {
@@ -250,23 +222,6 @@ exports.TagTool = Montage.create(DrawingTool, {
return {el: tag, data:styles};
}
- },
-
- makeStaticElement: {
- value: function(tag) {
- var styles = {
- "-webkit-transform-style": "preserve-3d",
- "-webkit-transform": "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"
- };
- tag.innerHTML = "content";
-
- return {el: tag, data:styles};
- }
- },
-
- _insertStatic: {
- value: function(parent, tag, style) {
- }
}
});
--
cgit v1.2.3
From 2078bfa96afaef40acb4edac99848ba55e808ef1 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 3 May 2012 15:15:21 -0700
Subject: Refactor creating elements. Removed makeNJElement and separated the
model creation
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
js/controllers/elements/shapes-controller.js | 2 +-
js/lib/NJUtils.js | 80 +++++++++++--
js/mediators/drag-drop-mediator.js | 6 +-
js/models/element-model.js | 28 +++--
.../components-panel.reel/components-panel.js | 64 +++++-----
js/stage/stage.reel/stage.js | 6 +
js/tools/BrushTool.js | 10 +-
js/tools/EyedropperTool.js | 3 +-
js/tools/LineTool.js | 11 +-
js/tools/PenTool.js | 11 +-
js/tools/ShapeTool.js | 40 ++-----
js/tools/TagTool.js | 129 +--------------------
js/tools/drawing-tool-base.js | 24 ----
13 files changed, 156 insertions(+), 258 deletions(-)
(limited to 'js')
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, {
el.elementModel.shapeModel.GLWorld.render();
break;
case "useWebGl":
- canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+ canvas = njModule.NJUtils.make("canvas", el.className, this.application.ninja.currentDocument);
canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom());
canvas.width = el.width;
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
</copyright> */
var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component,
Uuid = require("montage/core/uuid").Uuid,
ElementModel = require("js/models/element-model").ElementModel,
Properties3D = require("js/models/properties-3d").Properties3D,
ShapeModel = require("js/models/shape-model").ShapeModel,
ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory;
-exports.NJUtils = Object.create(Object.prototype, {
-
-
-
+exports.NJUtils = Montage.create(Component, {
+
/* =============== DOM Access ================ */
///// Quick "getElementById"
@@ -95,14 +94,73 @@ exports.NJUtils = Object.create(Object.prototype, {
}
},
- ///// Element factory function for Ninja Elements
- ///// selection is the string displayed in the PI
- makeNJElement: {
- value: function(tag, selection, controller, attr, isShape) {
- var el = this.make(tag, attr);
- this.makeElementModel(el, selection, controller, isShape);
+ createModelWithShape: {
+ value: function(el, selection) {
+ el.elementModel = Montage.create(ElementModel).initialize(el, true, selection);
+ }
+ },
- return el;
+ createModelWithSelection: {
+ value: function(el, selection) {
+ el.elementModel = Montage.create(ElementModel).initialize(el, false, selection);
+ }
+ },
+
+ createModelForComponent: {
+ value: function(el, selection) {
+ el.elementModel = Montage.create(ElementModel).initialize(el, false, selection, true);
+ }
+ },
+
+ // TODO: Find a better place for this method
+ stylesFromDraw: {
+ value: function(element, width, height, drawData, pos) {
+ var styles = {};
+
+ styles['position'] = pos ? pos: "absolute";
+ styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
+ styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
+ styles['width'] = width + 'px';
+ styles['height'] = height + 'px';
+
+ // TODO: Check why Canvas has different tranform styles from default.
+ if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
+ styles['-webkit-transform-style'] = 'preserve-3d';
+ styles['-webkit-transform'] = this.getElementMatrix(drawData.planeMat, drawData.midPt);
+ }
+
+ if(element.nodeName === "CANVAS") {
+ element.width = width;
+ element.height = height;
+ delete styles['width'];
+ delete styles['height'];
+
+ styles['-webkit-transform-style'] = 'preserve-3d';
+ }
+
+ return styles;
+ }
+ },
+
+ // Get the matrix for the actual element being added to the user document.
+ // TODO: Find a better place for this method
+ getElementMatrix: {
+ value: function(planeMat, midPt) {
+ var divMat, flatMat, flatMatSafe;
+ // we should not need to worry about divide by zero below since we snapped to the point
+ divMat = planeMat.slice(0);
+ divMat[12] = 0.0;
+ divMat[13] = 0.0;
+ //divMat[14] = 0.0;
+ divMat[14] = midPt[2];
+
+ // set the left and top of the element such that the center of the rectangle is at the mid point
+ this.application.ninja.stage.setStageAsViewport();
+
+ flatMat = divMat;
+ flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10);
+
+ return "matrix3d(" + flatMatSafe + ")";
}
},
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, {
var self = this;
//
if (e.currentTarget.fileType.indexOf('svg') !== -1) {
- element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper
+ element = NJUtils.make('embed', null, this.application.ninja.currentDocument);//TODO: Verify this is proper
+ NJUtils.createModelWithSelection(element, "SVG");
element.type = 'image/svg+xml';
element.src = url+'/'+fileName;
} else {
- element = NJUtils.makeNJElement('image', 'image', 'image');
+ element = NJUtils.make('image', null, this.application.ninja.currentDocument);
+ NJUtils.createModel(element);
element.src = url+'/'+fileName;
}
//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, {
shapeModel: { value: null },
isIn2DSnapCache : { value: false },
+ isComponent: { value: false },
+
fill: { value: null },
stroke: { value: null },
initialize: {
- value: function(el, isShape) {
+ value: function(el, isShape, selection, isComponent) {
var elementName, controller;
elementName = el.nodeName.toLowerCase();
- controller = this.elementNameToController(elementName);
this.type = el.nodeName;
- this.selection = elementName;
- this.controller = ControllerFactory.getController(controller);
- this.pi = this.elementNameToPi(elementName);
+ this.selection = selection ? selection : elementName;
+
+ if(isComponent) {
+ controller = "component";
+ this.pi = this.elementNameToPi(selection.replace(/\s+/g, ''));
+ this.isComponent = true;
+ } else {
+ controller = this.elementNameToController(elementName);
+ this.pi = this.elementNameToPi(elementName);
+ }
+
this.props3D = Montage.create(Properties3D);
- //shapeModel: { value: shapeProps},
-// isShape: { value: isShape}
+ if(isShape) {
+ this.controller = ControllerFactory.getController("shape");
+ this.shapeModel = Montage.create(ShapeModel);
+ this.isShape = true;
+ } else {
+ this.controller = ControllerFactory.getController(controller);
+ }
return this;
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, {
switch(name) {
case "anchor":
- el = NJUtils.makeNJElement("a", "Anchor", "component");
- el.elementModel.pi = "AnchorPi";
+ el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Anchor");
el.setAttribute("href", "http://www.motorola.com");
el.innerHTML = "link";
break;
case "button":
- el = NJUtils.makeNJElement(name, "Button", "component");
- el.elementModel.pi = "ButtonPi";
+ el = document.application.njUtils.make(name, null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Button");
el.setAttribute("type", "button");
el.innerHTML = "Button";
break;
case "checkbox":
- el = NJUtils.makeNJElement("input", "Checkbox", "component");
- el.elementModel.pi = "CheckboxPi";
+ el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Checkbox");
el.setAttribute("type", "checkbox");
break;
case "imageComponent":
- el = NJUtils.makeNJElement("image", "Image", "component");
- el.elementModel.pi = "ImagePi";
+ el = document.application.njUtils.make("image", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Image");
el.setAttribute("width", 200);
el.setAttribute("height", 200);
break;
case "numberInput":
- el = NJUtils.makeNJElement("input", "Number Input", "component");
- el.elementModel.pi = "NumberInputPi";
+ el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Number Input");
el.setAttribute("type", "number");
break;
case "select":
- el = NJUtils.makeNJElement("select", "Select", "component");
- el.elementModel.pi = "SelectInputPi";
+ el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Select");
break;
case "radioButton":
- el = NJUtils.makeNJElement("input", "Radio Button", "component");
- el.elementModel.pi = "RadioButtonPi";
+ el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Radio Button");
el.setAttribute("type", "radio");
break;
case "rangeInput":
- el = NJUtils.makeNJElement("input", "Range Input", "component");
- el.elementModel.pi = "RangeInputPi";
+ el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Range Input");
el.setAttribute("type", "range");
break;
case "textfield":
case "searchfield":
- el = NJUtils.makeNJElement("input", "Textfield", "component");
- el.elementModel.pi = "TextfieldPi";
+ el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Textfield");
el.setAttribute("type", "text");
break;
case "textarea":
- el = NJUtils.makeNJElement("textarea", "TextArea", "component");
- el.elementModel.pi = "TextareaPi";
+ el = document.application.njUtils.make("textarea", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "TextArea");
break;
case "toggleButton":
- el = NJUtils.makeNJElement("button", "Toggle Button", "component");
- el.elementModel.pi = "ToggleButtonPi";
+ el = document.application.njUtils.make("button", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Toggle Button");
el.innerHTML = "Off";
break;
case "map":
- el = NJUtils.makeNJElement("div", "Map", "component");
- el.elementModel.pi = "MapPi";
- el.elementModel.isComponent = true;
+ el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Map");
break;
case "feedreader":
- el = NJUtils.makeNJElement("div", "Feed Reader", "component");
- el.elementModel.pi = "FeedReaderPi";
- el.elementModel.isComponent = true;
+ el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Feed Reader");
break;
case "picasa-carousel":
- el = NJUtils.makeNJElement("div", "Picasa Carousel", "component");
- el.elementModel.pi = "PicasaCarouselPi";
- el.elementModel.isComponent = true;
+ el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Picasa Carousel");
break;
case "youtube-channel":
- el = NJUtils.makeNJElement("div", "Youtube Channel", "component");
- el.elementModel.pi = "YoutubeChannelPi";
- el.elementModel.isComponent = true;
+ el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelForComponent(el, "Youtube Channel");
break;
}
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index a7c22a7f..b181dc70 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -855,6 +855,12 @@ exports.Stage = Montage.create(Component, {
}
},
+ setStageAsViewport: {
+ value: function() {
+ this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot);
+ }
+ },
+
setZoom: {
value: function(value) {
if(!this._firstDraw)
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index ded56ecc..5c334b92 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -374,13 +374,11 @@ exports.BrushTool = Montage.create(ShapeTool, {
return;
}
- var left = Math.round(midPt[0] - 0.5 * w);
- var top = Math.round(midPt[1] - 0.5 * h);
-
if (!canvas) {
- var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
- var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas, true);
- ElementMediator.addElements(newCanvas, elementModel.data, false);
+ var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelWithShape(newCanvas, "Brushstroke");
+ var styles = document.application.njUtils.stylesFromDraw(newCanvas, w, h, {midPt: midPt, planeMat: planeMat});
+ this.application.ninja.elementMediator.addElements(newCanvas, styles, false);
// create all the GL stuff
var world = this.getGLWorld(newCanvas, this._useWebGL);
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 346975b2..6678e498 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -375,7 +375,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
var worldData = elt.elementModel.shapeModel.GLWorld.exportJSON();
if(worldData)
{
- this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true);
+ this._webGlDataCanvas = njModule.NJUtils.make("canvas", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+ njModule.NJUtils.createModelWithShape(this._webGlDataCanvas, "Canvas");
this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height",
"-webkit-transform", "-webkit-transform-style"]);
this._webGlDataCanvas.style.left = eltCoords[0] + "px";
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 3e9167fd..5941b464 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -77,10 +77,11 @@ exports.LineTool = Montage.create(ShapeTool, {
h += ~~(yAdj*2);
}
- canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
- var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas, true);
- canvas.elementModel.isShape = true;
- this.application.ninja.elementMediator.addElements(canvas, elementModel.data);
+ canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelWithShape(canvas, "Line");
+
+ var styles = document.application.njUtils.stylesFromDraw(canvas, w, h, drawData);
+ this.application.ninja.elementMediator.addElements(canvas, styles);
} else {
canvas = this._targetedElement;
canvas.elementModel.controller = ShapesController;
@@ -241,7 +242,7 @@ exports.LineTool = Montage.create(ShapeTool, {
canvas.elementModel.shapeModel.shapeCount++;
if(canvas.elementModel.shapeModel.shapeCount === 1)
{
- canvas.elementModel.selection = "Line";
+// canvas.elementModel.selection = "Line";
canvas.elementModel.pi = "LinePi";
canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 8ecc9f79..16990ca7 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -557,17 +557,16 @@ exports.PenTool = Montage.create(ShapeTool, {
return;
}
- w= Math.round(w);
+ w = Math.round(w);
h = Math.round(h);
var left = Math.round(midPt[0] - 0.5 * w);
var top = Math.round(midPt[1] - 0.5 * h);
if (!canvas) {
- var newCanvas = null;
- newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
- var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas, true);
- //note that we set the notify event to false because we send the event separately at end of this code block
- ElementMediator.addElements(newCanvas, elementModel.data, false);
+ var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelWithShape(newCanvas, "Subpath");
+ var styles = document.application.njUtils.stylesFromDraw(newCanvas, parseInt(w), parseInt(h), {midPt: midPt, planeMat: planeMat});
+ this.application.ninja.elementMediator.addElements(newCanvas, styles, false);
// create all the GL stuff
var world = this.getGLWorld(newCanvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, newCanvas, this._useWebGL);//fillMaterial, strokeMaterial);
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index d2337000..0562dbc2 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -53,23 +53,17 @@ exports.ShapeTool = Montage.create(DrawingTool, {
}
},
- HandleLeftButtonUp:
- {
- value: function (event)
- {
- var drawData;
-
- drawData = this.getDrawingData();
+ HandleLeftButtonUp: {
+ value: function (event) {
+ var canvas, drawData = this.getDrawingData();
if(drawData) {
- var canvas;
if(!this._useExistingCanvas()) {
- canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
- var elementModel = TagTool.makeElement(~~drawData.width, ~~drawData.height,
- drawData.planeMat, drawData.midPt, canvas, true);
+ canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument);
+ document.application.njUtils.createModelWithShape(canvas);
- canvas.elementModel.isShape = true;
- this.application.ninja.elementMediator.addElements(canvas, elementModel.data);
+ var styles = document.application.njUtils.stylesFromDraw(canvas, ~~drawData.width, ~~drawData.height, drawData);
+ this.application.ninja.elementMediator.addElements(canvas, styles);
} else {
canvas = this._targetedElement;
if (!canvas.getAttribute( "data-RDGE-id" ))
@@ -193,26 +187,6 @@ exports.ShapeTool = Montage.create(DrawingTool, {
}
},
- createCanvas: {
- value: function (left, top, w, h)
- {
- //var tmpDiv = document.createElement("canvas");
- var tmpDiv = NJUtils.makeNJElement("canvas", "Canvas", "block");
- var rules = {
- 'position': 'absolute',
- 'top' : top + 'px',
- 'left' : left + 'px',
- '-webkit-transform-style' : 'preserve-3d',
- '-webkit-transform' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
- };
-
- tmpDiv.width = w;
- tmpDiv.height = h;
-
- return {el: tmpDiv, rules: rules};
- }
- },
-
// We can draw on an existing canvas unless it has only a single shape object
_useExistingCanvas: {
value: function()
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index 6c999df9..5e9c792b 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -89,139 +89,12 @@ exports.TagTool = Montage.create(DrawingTool, {
// Create the model
document.application.njUtils.createModel(element);
-
// Create the styles
- styles = this.makeStylesFromDraw(drawData);
- if(element.nodeName === "CANVAS") {
- element.width = parseInt(styles.width);
- element.height = parseInt(styles.height);
- delete styles['width'];
- delete styles['height'];
- }
+ styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData);
// Add the element and styles
this.application.ninja.elementMediator.addElements(element, styles);
}
- },
-
- makeStylesFromDraw: {
- value: function(drawData) {
- var styles = {};
-
- styles['position'] = "absolute";
- styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * ~~drawData.width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
- styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * ~~drawData.height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
- styles['width'] = ~~drawData.width + 'px';
- styles['height'] = ~~drawData.height + 'px';
-
- if(!MathUtils.isIdentityMatrix(drawData.planeMat)) {
- styles['-webkit-transform-style'] = 'preserve-3d';
- styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(drawData.planeMat, drawData.midPt);
- }
-
- return styles;
- }
- },
-
- makeTag: {
- value: function() {
- var selectedTag, newTag;
-
- selectedTag = this.options.selectedElement;
-
- if(selectedTag === "div") {
- newTag = NJUtils.makeNJElement("div", "div", "block");
- } else if(selectedTag === "image") {
- newTag = NJUtils.makeNJElement("image", "image", "image");
- } else if(selectedTag === "video") {
- newTag = NJUtils.makeNJElement("video", "video", "video", {
- innerHTML: "Your browser does not support the VIDEO element."
- });
- } else if(selectedTag === "canvas") {
- newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas");
- } else if(selectedTag === "custom") {
- newTag = NJUtils.makeNJElement(this.options.customName.value, this.options.customName.value, "block");
- }
- /* SWF Tag tool - Not used for now. Will revisit this at a later time.
- else if(selectedTag === "flashTool") {
- // Generate the swfobject script tag if not found in the user document
-// documentControllerModule.DocumentController.SetSWFObjectScript();
-
- newTag = NJUtils.makeNJElement("object", "Object", "block", {
- classId: "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
- });
-
- var param = NJUtils.makeNJElement("param", "Object", "block", {
- name: "movie",
- value: ""
- });
-
- var param2 = NJUtils.makeNJElement("param", "Object","block", {
- name: "wmode",
- value: "transparent"
- });
-
- var param3 = NJUtils.makeNJElement("param", "Object","block", {
- name: "play",
- value: "false"
- });
-
-
- newTag.appendChild(param);
- newTag.appendChild(param2);
- newTag.appendChild(param3);
- // TODO Alternative Content
-
- }
- */
- else {
- console.log("Invalid Tool is selected.");
- }
-
- try {
-// newTag.className = this.options.classField.value;
- // TODO: Fix this one
-
- }
-
- catch(err) {
- console.log("Could not set Tag ID/Class " + err.description);
- }
-
- return newTag;
- }
- },
-
- makeElement: {
- value: function(w, h, planeMat, midPt, tag, isShape) {
- var left = (Math.round(midPt[0] - 0.5 * w)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px';
- var top = (Math.round(midPt[1] - 0.5 * h)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px';
-
- var styles = {
- 'position': 'absolute',
- 'top' : top,
- 'left' : left
- };
-
- if(!MathUtils.isIdentityMatrix(planeMat)) {
- styles['-webkit-transform-style'] = 'preserve-3d';
- styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt);
- } else if(isShape) {
- styles['-webkit-transform-style'] = 'preserve-3d';
- }
-
- // TODO - for canvas, set both as style and attribute.
- // Otherwise, we need to create a separate controller for canvas elements
- if(tag.tagName === "CANVAS") {
- tag.width = w;
- tag.height = h;
- } else {
- styles['width'] = w + 'px';
- styles['height'] = h + 'px';
- }
-
- return {el: tag, data:styles};
- }
}
});
diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js
index 7d97f105..376b3a27 100755
--- a/js/tools/drawing-tool-base.js
+++ b/js/tools/drawing-tool-base.js
@@ -445,30 +445,6 @@ exports.DrawingToolBase = Montage.create(Montage, {
}
},
- /**
- * Get the matrix for the actual element being added to the user document.
- */
- getElementMatrix: {
- value: function(planeMat, midPt) {
- var divMat, flatMat, flatMatSafe;
- // calculate the matrix for the element.
- // we should not need to worry about divide by zero below since we snapped to the point
- divMat = planeMat.slice(0);
- divMat[12] = 0.0;
- divMat[13] = 0.0;
- //divMat[14] = 0.0;
- divMat[14] = midPt[2];
-
- // set the left and top of the element such that the center of the rectangle is at the mid point
- viewUtils.setViewportObj(this.stage);
-
- flatMat = divMat;
- flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10);
-
- return "matrix3d(" + flatMatSafe + ")";
- }
- },
-
/**
* Draw Helper Functions
*/
--
cgit v1.2.3