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 --- 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(-) 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 --- .../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(-) 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 @@
- - - - - + + + + +
 
@@ -67,10 +67,10 @@ 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. */ -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 --- 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(-) 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 */ 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