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 --- js/lib/NJUtils.js | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) (limited to 'js/lib') 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; -- 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 --- js/lib/NJUtils.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 69 insertions(+), 11 deletions(-) (limited to 'js/lib') 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 */ 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 + ")"; } }, -- cgit v1.2.3