From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 11:23:32 -0700 Subject: Add a smoothing amount parameter, and hide options based on checkboxes --- .../brush-properties.reel/brush-properties.html | 24 ++++++++++++++--- .../brush-properties.reel/brush-properties.js | 30 ++++++++++++++++++++++ js/lib/geom/brush-stroke.js | 17 ++++++------ js/tools/BrushTool.js | 9 ++++--- 4 files changed, 66 insertions(+), 14 deletions(-) (limited to 'js') diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index 608111bd..cbe4c242 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -33,7 +33,8 @@ "maxValue": 100, "value": 100, "decimalPlace": 10, - "acceptableUnits" : ["px", "pt"] + "acceptableUnits" : ["%"], + "units" : "%" } }, @@ -46,6 +47,20 @@ "maxValue": 90, "value": 0, "decimalPlace": 10, + "acceptableUnits" : ["deg."], + "units" : "deg." + } + }, + + "smoothingAmountHT": { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "smoothingAmount"}, + "minValue": 0, + "maxValue": 100, + "value": 0, + "decimalPlace": 10, "acceptableUnits" : ["px", "pt"] } }, @@ -58,8 +73,10 @@ "_strokeSize": {"@": "strokeSizeHT"}, "_strokeHardness": {"@": "strokeHardnessHT"}, "_doSmoothing": {"#": "doSmoothing"}, + "_smoothingAmount": {"@": "smoothingAmountHT"}, "_useCalligraphic":{"#": "useCalligraphic"}, - "_strokeAngle": {"@": "strokeAngleHT"} + "_strokeAngle": {"@": "strokeAngleHT"}, + "_angleLabel": {"#": "angleLabel"} } } } @@ -75,8 +92,9 @@
+
- +
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js index e6faa0f0..fdcd50f8 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js @@ -9,6 +9,33 @@ var Component = require("montage/ui/component").Component; var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; exports.BrushProperties = Montage.create(ToolProperties, { + _subPrepare: { + value: function() { + this.handleChange(null); + this._useCalligraphic.addEventListener("change", this, false); + this._doSmoothing.addEventListener("change", this, false); + } + }, + handleChange: { + value: function(event) { + if(this._useCalligraphic.checked) { + this._strokeAngle.element.style["display"] = ""; + this._strokeAngle.visible = true; + this._angleLabel.style["display"] = ""; + } else { + this._strokeAngle.element.style["display"] = "none"; + this._strokeAngle.visible = false; + this._angleLabel.style["display"] = "none"; + } + if(this._doSmoothing.checked) { + this._smoothingAmount.element.style["display"] = ""; + this._smoothingAmount.visible = true; + } else { + this._smoothingAmount.element.style["display"] = "none"; + this._smoothingAmount.visible = false; + } + } + }, strokeSize: { get: function() { return this._strokeSize; } }, @@ -18,6 +45,9 @@ exports.BrushProperties = Montage.create(ToolProperties, { doSmoothing:{ get: function() {return this._doSmoothing.checked; } }, + smoothingAmount:{ + get: function() {return this._smoothingAmount;} + }, useCalligraphic: { get: function() {return this._useCalligraphic.checked;} }, diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 4c42539a..52f81ffe 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -39,10 +39,7 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = false; this._strokeUseCalligraphic = false; this._strokeAngle = 0; - - //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely - //smaller value means more samples for the path - this._WETNESS_FACTOR = 0.25; + this._strokeAmountSmoothing = 0; //threshold that tells us whether two samples are too far apart this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; @@ -125,7 +122,7 @@ var BrushStroke = function GLBrushStroke() { //add the point only if it is some epsilon away from the previous point var numPoints = this._Points.length; if (numPoints>0) { - var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD; var prevPt = this._Points[numPoints-1]; var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); @@ -196,6 +193,10 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = s; } + this.setSmoothingAmount = function(a){ + this._strokeAmountSmoothing = a; + } + this.setStrokeUseCalligraphic = function(c){ this._strokeUseCalligraphic = c; } @@ -252,7 +253,7 @@ var BrushStroke = function GLBrushStroke() { //**** add samples to the path if needed...linear interpolation for now //if (numPoints>1) { if (0){ - var threshold = this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; var prevPt = this._Points[0]; var prevIndex = 0; for (var i=1;i1) { @@ -330,7 +331,7 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = 3; //todo figure out the proper number of Laplacian iterations (perhaps as a function of stroke width) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n1) { - if (0){ - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; - var prevPt = this._Points[0]; - var prevIndex = 0; - for (var i=1;ithreshold){ - //insert points along the prev. to current point - var numNewPoints = Math.floor(distance/threshold); - for (var j=0;j this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; + var numPoints = this._Points.length; + if (this._addedSamples === false){ + //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation ***** + // instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments + // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula + + var numInsertedPoints = 0; + var newSampledPoints = []; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle + var prevPt = this._Points[0]; + newSampledPoints.push(this._Points[0]); + for (var i=1;ithreshold){ + //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) + var prev = (i===1) ? i-1 : i-2; + var next = (i===numPoints-1) ? i : i+1; + var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; + //insert points along the prev. to current point + var numNewPoints = Math.floor(distance/threshold); + for (var j=0;j this._MAX_ALLOWED_SAMPLES){ + // console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); + // break; + //} } + this._Points = newSampledPoints.slice(0); + newSampledPoints = []; + console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); + this._addedSamples = true; + this._dirty=true; + } + //build a copy of the original points...this should be done only once + if (this._storedOrigPoints === false) { + this._OrigPoints = this._Points.slice(0); + this._storedOrigPoints = true; + } - //instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments - // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula - //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation + if (this._dirty) { + this._Points = this._OrigPoints.slice(0); + numPoints = this._Points.length; if (this._strokeDoSmoothing && numPoints>1) { - var numInsertedPoints = 0; - var newPoints = []; - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle - var prevPt = this._Points[0]; - newPoints.push(this._Points[0]); - for (var i=1;ithreshold){ - //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) - var prev = (i===1) ? i-1 : i-2; - var next = (i===numPoints-1) ? i : i+1; - var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; - //insert points along the prev. to current point - var numNewPoints = Math.floor(distance/threshold); - for (var j=0;j this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; - } - } - this._Points = newPoints; - numPoints = this._Points.length; - console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); - - //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = this._strokeAmountSmoothing; + //iterations of Laplacian smoothing (setting the points to the average of their neighbors) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n */ -// Todo: This entire class should be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; + +// Todo: This entire class should be converted to a module /////////////////////////////////////////////////////////////////////// // Class GLBrushStroke @@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; - //the X and Y location of this subpath's canvas in stage world space of Ninja + //the HTML5 canvas that holds this brush stroke + this._canvas = null; + + //the X and Y location of this brush stroke canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() { ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// + this.setCanvas = function(c) { + this._canvas = c; + } + this.setWorld = function (world) { this._world = world; }; @@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() { this._dirty = true; } } + this.getStrokeHardness = function(){ + return this._strokeHardness; + } this.setDoSmoothing = function(s){ if (this._strokeDoSmoothing!==s) { @@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() { } } + this.getDoSmoothing = function(){ + return this._strokeDoSmoothing; + } + this.setSmoothingAmount = function(a){ if (this._strokeAmountSmoothing!==a) { this._strokeAmountSmoothing = a; this._dirty = true; } + } + this.getSmoothingAmount = function(){ + return this._strokeAmountSmoothing; } this.setStrokeUseCalligraphic = function(c){ @@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() { }; } + this.getStrokeUseCalligraphic = function(){ + return this._strokeUseCalligraphic; + } + + this.getStrokeAngle = function(){ + this._strokeAngle = a; + } + this.getStrokeStyle = function () { return this._strokeStyle; }; @@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); this._addedSamples = true; this._dirty=true; - } + } //if we need to add samples to this curve (done only once) + //build a copy of the original points...this should be done only once if (this._storedOrigPoints === false) { this._OrigPoints = this._Points.slice(0); this._storedOrigPoints = true; - } + } //if we need to store a copy of the original points (done only once) if (this._dirty) { this._Points = this._OrigPoints.slice(0); @@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() { // get the context var ctx = world.get2DContext(); - if (!ctx) throw ("null context in brushstroke render") + if (!ctx) throw ("null context in brushstroke render"); var numPoints = this.getNumPoints(); if (numPoints === 0) { @@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() { var bboxMax = this.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; + + //assign the new width and height as the canvas dimensions through the canvas controller + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } + ctx.clearRect(0, 0, bboxWidth, bboxHeight); if (this._strokeUseCalligraphic) { diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 017cca92..e95be0e7 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; - +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; var MaterialsModel = require("js/models/materials-model").MaterialsModel; @@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; + //the canvas that will draw this subpath + this._canvas = null; + //the X and Y location of this subpath's canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() { var bboxHeight = bboxMax[1] - bboxMin[1]; var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } ctx.clearRect(0, 0, bboxWidth, bboxHeight); ctx.lineWidth = this._strokeWidth; @@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() { //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; ctx.fillStyle = fillColorStr; + console.log("Fill color:" + fillColorStr); } var lineCap = ['butt','round','square']; ctx.lineCap = lineCap[1]; @@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj(); ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// +GLSubpath.prototype.setCanvas = function (c) { + this._canvas = c; +}; + GLSubpath.prototype.setWorld = function (world) { this._world = world; }; @@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () { GLSubpath.prototype.setStrokeWidth = function (w) { this._strokeWidth = w; + this._dirty=true; }; GLSubpath.prototype.getStrokeMaterial = function () { diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index c93672a9..90010cdf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -266,6 +266,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var brushStroke = this._selectedBrushStroke; if (brushStroke){ brushStroke.setWorld(world); + brushStroke.setCanvas(newCanvas); brushStroke.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index e239b3f1..779b7f16 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -467,9 +467,9 @@ exports.PenTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); } - //if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ - // this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); - //} + if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ + this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); + } } //if this is a new path being rendered this._selectedSubpath.makeDirty(); @@ -594,6 +594,7 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); + subpath.setCanvas(newCanvas); subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -614,7 +615,7 @@ exports.PenTool = Montage.create(ShapeTool, { if(strokeColor) { newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; } - newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); newCanvas.elementModel.shapeModel.GLGeomObj = subpath; newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; -- cgit v1.2.3 From 725bb869618b9e0ebb2820a24bca5d1cf53a4810 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 15 Mar 2012 15:14:28 -0700 Subject: Initial Data Binding Mediator Signed-off-by: Armen Kesablyan --- js/mediators/binding-mediator.js | 14 ++++++++++++++ js/mediators/keyboard-mediator.js | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 js/mediators/binding-mediator.js (limited to 'js') diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js new file mode 100644 index 00000000..10d3f7c6 --- /dev/null +++ b/js/mediators/binding-mediator.js @@ -0,0 +1,14 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
*/ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.bindingMediator = Montage.create(Component, { + + + +}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 65dd34cd..85a46739 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -203,6 +203,8 @@ exports.KeyboardMediator = Montage.create(Component, { } + + if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) { this.application.ninja.executeChromePreview(); return; -- cgit v1.2.3 From dd5519dc15f56d44abe38b6454a5034db4800585 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 16 Mar 2012 17:27:42 -0700 Subject: fix for IKNINJA-1357 - Cannot create other file types such as css, json from the New file dialog box. Signed-off-by: Ananya Sen --- .../ui/tree-basic/treeItem.reel/treeItem.js | 35 ++++++++++++++++++++-- 1 file changed, 32 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js index a67dad43..13e278e9 100755 --- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js +++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js @@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, { //icon or text click sends selection event var contentEls = this.element.querySelectorAll(".atreeItemContent"); for(var i=0;i" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);} if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){ - this.toggleContent(this.treeArrow); + this.expand(this.treeArrow); } if(this.treeItemData.uri === this.highlightedUri){ this.itemName.classList.add("selected"); @@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, { } }, + expand:{ + writable:false, + enumerable:true, + value:function(el){ + //if children already drawn then just hide/show + if(this.element.getElementsByTagName("ul").length > 0){ + var theParent = this.element.getElementsByTagName("ul")[0].parentNode; + if(theParent.classList.contains("hideTree")){//collapsed + theParent.classList.remove("hideTree");//expand + el.innerHTML = "▼"; + } + } + //else send event to draw the children + else{ + var treeClickEvent = document.createEvent("Events"); + treeClickEvent.initEvent("drawTree", false, false); + treeClickEvent.uri = this.treeItemData.uri; + treeClickEvent.uriType = this.treeItemData.type; + var divEl = document.createElement("div"); + this.element.appendChild(divEl); + treeClickEvent.subTreeContainer = divEl; + this.element.dispatchEvent(treeClickEvent); + + el.innerHTML = "▼"; + } + } + }, + + /** * Event Listeners */ -- cgit v1.2.3 From a6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 16 Mar 2012 17:56:25 -0700 Subject: Presets Panel - Change Tab labels, Add Un-3d preset --- js/panels/presets/content.reel/content.html | 6 +++--- js/panels/presets/default-transition-presets.js | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html index f01e6435..afbdd559 100644 --- a/js/panels/presets/content.reel/content.html +++ b/js/panels/presets/content.reel/content.html @@ -62,9 +62,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index 00873231..48f7c2b7 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -88,6 +88,22 @@ exports.transitionPresets = { "-webkit-transform": "rotate(180deg)" } }] + },{ + "text": "Remove 3D", + "selectorBase" : "remove-3d", + "rules" : [{ + "selectorSuffix": "", + "styles" : { + "-webkit-transition": "all 0.4s ease-in" + } + }, + { + "selectorSuffix" : ":hover", + "styles" : { + "-webkit-transform": "rotateX(0deg)", + "opacity": "1" + } + }] }] }] }; \ No newline at end of file -- cgit v1.2.3 From 41740c12e03ca1380eb80dc557faedae05e4ce1c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Sat, 17 Mar 2012 00:06:03 -0700 Subject: Presets Panel - Fix conflict with default transition presets --- js/panels/presets/default-transition-presets.js | 30 +++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'js') diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index 48f7c2b7..15f4882f 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -89,6 +89,36 @@ exports.transitionPresets = { } }] },{ + "text": "Scale Up", + "selectorBase" : "scale-up", + "rules" : [{ + "selectorSuffix" : "", + "styles" : { + "-webkit-transition": "-webkit-transform 0.4s ease-in" + } + }, { + "selectorSuffix" : ":hover", + "styles" : { + "-webkit-transform": "scale(1.4)" + } + }] + }, + { + "text": "Scale Down", + "selectorBase" : "scale-down", + "rules" : [{ + "selectorSuffix" : "", + "styles" : { + "-webkit-transition": "-webkit-transform 0.4s ease-in" + } + }, { + "selectorSuffix" : ":hover", + "styles" : { + "-webkit-transform": "scale(.5)" + } + }] + }, + { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ -- cgit v1.2.3 From 9b8a24a7360416d5750828c9580e33dd336ff882 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Fri, 16 Mar 2012 17:57:18 -0700 Subject: Getting ownerComponent bindings --- .../templates/montage-html/main.reel/main.js | 43 +++++++++++----------- 1 file changed, 22 insertions(+), 21 deletions(-) (limited to 'js') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index 567f481c..ee23e844 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -17,7 +17,25 @@ exports.Main = Montage.create(Component, { */ templateDidLoad: { value: function(){ - window.addComponent = this.addComponentToUserDocument; + var self = this; + window.addComponent = function(element, data, callback) { + var component; + + component = require.async(data.path) + .then(function(component) { + var componentRequire = component[data.name]; + var componentInstance = componentRequire.create(); + + componentInstance.element = element; + //componentInstance.deserializedFromTemplate(); + componentInstance.needsDraw = true; + componentInstance.ownerComponent = self; + + callback(componentInstance, element); + }) + .end(); + + }; // window.addBinding = this.addBindingToUserDocument; // Dispatch event when this template has loaded. @@ -29,26 +47,9 @@ exports.Main = Montage.create(Component, { } }, - // Adding components to the user document by using a async require. - addComponentToUserDocument:{ - value:function(element, data, callback){ - - var component; - - component = require.async(data.path) - .then(function(component) { - var componentRequire = component[data.name]; - var componentInstance = componentRequire.create(); - - componentInstance.element = element; - //componentInstance.deserializedFromTemplate(); - componentInstance.needsDraw = true; - - callback(componentInstance, element); - }) - .end(); - - } + location: { + value:null, + enumerable:false } }); \ No newline at end of file -- cgit v1.2.3 From 9b53d2dac464cb9217b217e6707dbb97c1d65490 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sat, 17 Mar 2012 11:25:52 -0700 Subject: Deleting unecessary property --- js/document/templates/montage-html/main.reel/main.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'js') diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js index ee23e844..6c141108 100644 --- a/js/document/templates/montage-html/main.reel/main.js +++ b/js/document/templates/montage-html/main.reel/main.js @@ -45,11 +45,5 @@ exports.Main = Montage.create(Component, { document.body.dispatchEvent( newEvent ); } - }, - - location: { - value:null, - enumerable:false } - }); \ No newline at end of file -- cgit v1.2.3 From 14f28d0031dc9d522b