From 50125608bba2ebfae24c1e13ec030fe7a7128158 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 29 Mar 2012 17:13:28 -0700 Subject: merge from main --- js/panels/Splitter.js | 2 +- .../TimelinePanel.reel/css/TimelinePanel.css | 4 +- .../animations-presets.reel/animations-presets.js | 47 ++++++++++++++++++++- js/panels/presets/default-animation-presets.js | 2 + js/panels/presets/default-style-presets.js | 11 +++-- js/panels/presets/default-transition-presets.js | 8 ++++ .../presets/style-presets.reel/style-presets.js | 49 +++++++++++++++++++++- .../transitions-presets.js | 20 ++++++++- js/panels/resize-composer.js | 34 ++++----------- 9 files changed, 138 insertions(+), 39 deletions(-) (limited to 'js') diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..e92cb2dd 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, { }, set: function(value) { this._collapsed = value; - this.needsDraw = true; + this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value}); } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 067285ae..129b9771 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -10,12 +10,12 @@ height: 100%; } .maintimeline{ + border-style: double; -webkit-box-flex: 1; display: -webkit-box; - -webkit-box-orient: horizontal; + -webkit-box-orient: horizontal height : 100%; position: relative; - margin-top:1px; } .leftinside{ height: 100%; diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..ab200212 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData); + //debugger; + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); + } + + }, this); + + selection.forEach(function(el) { + el._element.classList.add(selectorBase); + }, this); + + } + }, + + stringifyKeys : { + value: function(keysArray) { + var keysString = ''; + + keysArray.forEach(function(key) { + var styles = '', style; + + for(style in key.styles) { + styles += style + ':' + key.styles[style] + '; '; + } + + keysString += key.keyText + ' {' + styles + ' }'; + }); + + return keysString; } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,6 +13,7 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -90,6 +91,7 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 10b24ff4..82bec34f 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", - "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ + "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", - "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ + "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,10 +33,9 @@ exports.stylePresets = { }, { "text": "Fancy Box", - "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix": "", + "selectorSuffix" : "", "styles" : { "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", "border" : "1px solid #FFF", @@ -51,9 +50,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", - "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -61,9 +60,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", - "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index f8968085..15f4882f 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,6 +13,7 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -28,6 +29,7 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -46,6 +48,7 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -60,6 +63,7 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -74,6 +78,7 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -87,6 +92,7 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -101,6 +107,7 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -115,6 +122,7 @@ exports.transitionPresets = { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 6a28e069..11f41822 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,13 +22,60 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData, true); + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this, className; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + function setStopRuleSelector(selector) { + self.application.ninja + .currentDocument.documentRoot + .elementModel.controller + .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); + }, this); + + selection.forEach(function(el) { + el._element.style.webkitTransition = "all 450ms linear"; + + el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { + el._element.style.webkitTransition = ''; + setStopRuleSelector("*"); + this.removeEventListener("webkitTransitionEnd", presetTransition, true); + + }, true); + setStopRuleSelector("transitionStopRule"); + el._element.classList.add(selectorBase); + + //// Keep track of elements with presets and don't add duplicates + + }, this); + + } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } + }, + shouldChangeSelection : { + value : function(controller, newSelection, oldSelection) { + // + //debugger; + console.log('1Handle should change selection'); + return false; + } } + }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index ace38dbb..f7d84085 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,7 +22,25 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData); + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); + }, this); + + selection.forEach(function(el) { + el._element.classList.add(selectorBase); + }, this); + } } }); diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 0d1774cd..6e5e89f8 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -9,14 +9,6 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.ResizeComposer = Montage.create(Composer, { - xAxis: { - value: true - }, - - yAxis: { - value: true - }, - enabled : { enumerable: false, value: true @@ -77,7 +69,6 @@ exports.ResizeComposer = Montage.create(Composer, { load: { value: function() { this.element.addEventListener("mousedown", this, true); - this.element.addEventListener("dblclick", this, true); } }, @@ -113,29 +104,18 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - if (this.xAxis) { - this._deltaX = e.clientX - this._startX; - } - else { - this._deltaX = 0; - } - if (this.yAxis) { - this._deltaY = e.clientY - this._startY; - } - else { - this._deltaY = 0; - } + this._deltaX = e.clientX - this._startX; + this._deltaY = e.clientY - this._startY; this._executeEvent("resizeMove"); } }, - captureDblclick: { - value:function(e) { - this._reset(); - this._executeEvent("resizeReset"); + deserializedFromTemplate: { + value: function() { + if (this.component) { + this.component.addComposer(this); + } } } - - }); \ No newline at end of file -- cgit v1.2.3 From dc9650af5760b1f93d6e93a383eabceacfdc0ad8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 2 Apr 2012 15:40:25 -0700 Subject: Snapping fixes. --- js/lib/geom/line.js | 70 --------------------------------------- js/tools/Translate3DToolBase.js | 25 ++++++++++---- js/tools/TranslateObject3DTool.js | 21 ++++++------ js/tools/modifier-tool-base.js | 14 ++++++-- 4 files changed, 41 insertions(+), 89 deletions(-) (limited to 'js') diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index e839e229..1848218d 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -140,76 +140,6 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok this.importMaterialsJSON( jObj.materials ); }; - this.export = function() { - var rtnStr = "type: " + this.geomType() + "\n"; - - rtnStr += "xoff: " + this._xOffset + "\n"; - rtnStr += "yoff: " + this._yOffset + "\n"; - rtnStr += "width: " + this._width + "\n"; - rtnStr += "height: " + this._height + "\n"; - rtnStr += "xAdj: " + this._xAdj + "\n"; - rtnStr += "yAdj: " + this._yAdj + "\n"; - rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; - - if(this._strokeColor.gradientMode) { - rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n"; - rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n"; - } else { - rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; - } - - rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; - rtnStr += "slope: " + String(this._slope) + "\n"; - - rtnStr += "strokeMat: "; - if (this._strokeMaterial) { - rtnStr += this._strokeMaterial.getName(); - } else { - rtnStr += MaterialsModel.getDefaultMaterialName(); - } - - rtnStr += "\n"; - return rtnStr; - }; - - this.import = function( importStr ) { - this._xOffset = Number( this.getPropertyFromString( "xoff: ", importStr ) ); - this._yOffset = Number( this.getPropertyFromString( "yoff: ", importStr ) ); - this._width = Number( this.getPropertyFromString( "width: ", importStr ) ); - this._height = Number( this.getPropertyFromString( "height: ", importStr ) ); - this._xAdj = Number( this.getPropertyFromString( "xAdj: ", importStr ) ); - this._yAdj = Number( this.getPropertyFromString( "yAdj: ", importStr ) ); - this._strokeWidth = Number( this.getPropertyFromString( "strokeWidth: ", importStr ) ); - var slope = this.getPropertyFromString( "slope: ", importStr ); - - if(isNaN(Number(slope))) { - this._slope = slope; - } else { - this._slope = Number(slope); - } - - var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); - this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); - - if(importStr.indexOf("strokeGradientMode: ") < 0) - { - this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); - } else { - this._strokeColor = {}; - this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr ); - this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr )); - } - - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); - if (!strokeMat) { - console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); - } - - this._strokeMaterial = strokeMat; - - }; - /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 07b6d04d..18e2b610 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -29,6 +29,8 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, modifyElements : { value : function(data, event) { + //console.log( "modifyElements, data: " + data.pt0 + " => " + data.pt1 ); + // form the translation vector and post translate the matrix by it. var delta = vecUtils.vecSubtract( 3, data.pt1, data.pt0 ); if(this._handleMode !== null) @@ -66,15 +68,12 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, delta[0] = 0; delta[1] = 0; } - else - { - delta[2] = 0; - } this._delta = delta.slice(0); } var transMat = Matrix.Translation( delta ); + //console.log( "Translate: " + delta ); if(this._inLocalMode && (this._targets.length === 1) ) { this._translateLocally(transMat); @@ -134,6 +133,9 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, // We will only translate single elements locally _translateLocally: { value: function (transMat) { + //console.log( "_translateLocally, startMat: " + this._startMat ); + //console.log( "_translateLocally, transMat: " + transMat ); + //console.log( "_translateLocally, startMat: " + this._startMat + ", transMat: " + transMat ); var mat = glmat4.multiply(this._startMat, transMat, []); viewUtils.setMatrixForElement( this._target, mat, true ); if(this._mode !== 1) @@ -145,14 +147,22 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _translateGlobally: { value: function (transMat) { + //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); + //console.log( "_translateGlobally, transMat: " + transMat ); var len = this._targets.length, i = 0, item, elt, - curMat, + curMat = viewUtils.getMatrixFromElement( this._target ), matInv = glmat4.inverse(this._startMat, []), nMat = glmat4.multiply(transMat, this._startMat, [] ), qMat = glmat4.multiply(matInv, nMat, []); + + if (this._mode === 1) + { + var curInv = glmat4.inverse( curMat, [] ); + transMat = glmat4.multiply( nMat, curInv, [] ); + } var shouldUpdateStartMat = true; @@ -181,6 +191,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, if(shouldUpdateStartMat) { + //console.log( "\t\tshouldUpdateStartMat" ); this._targets[i].mat = curMat; } } @@ -188,7 +199,9 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, }, _updateTargets: { - value: function(addToUndoStack) { + value: function(addToUndoStack) + { + console.log( "_updateTargets" ); var newStyles = [], previousStyles = [], len = this.application.ninja.selectedElements.length; diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 60633e74..7163f005 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -16,6 +16,8 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { initializeSnapping : { value : function(event) { + console.log( "initializeSnapping" ); + this._mouseDownHitRec = null; this._mouseUpHitRec = null; @@ -37,8 +39,6 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { if(this._handleMode === null) { -// this.doSelection(event); - snapManager.enableElementSnap ( true ); snapManager.enableGridSnap ( true ); } @@ -107,16 +107,10 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } if(this._handleMode === 2) - { - // TODO - not sure how to parameterize point in z-translate mode this.clickedObject = this._target; - this._snapParam = [0, 0, 0]; - } - else - { - // parameterize the snap point on the target - this._snapParam = this.parameterizeSnap( hitRec ); - } + + // parameterize the snap point on the target + this._snapParam = this.parameterizeSnap( hitRec ); if(!this._dragPlane) { @@ -132,6 +126,11 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } + // only do quadrant snapping if the 4 corners of the element are in the drag plane + + var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + this._shouldUseQuadPt = (sign == 0); + var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); this._mouseDownHitRec = wpHitRec; this._mouseUpHitRec = null; diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 94b806fd..07b28747 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -25,6 +25,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { _snapParam: { value: null }, _snapIndex: { value: -1 }, _useQuadPt: { value: false }, + _shouldUseQuadPt: { value: false }, // we set snapping capabilities depending on the tool. // The following variables are set in a tool's initializeSnapping method called on mouse down. @@ -175,6 +176,10 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // } } + // only do quadrant snapping if the 4 corners of the element are in the drag plane + var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + this._shouldUseQuadPt = (sign == 0) + var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); this._mouseDownHitRec = wpHitRec; this._mouseUpHitRec = null; @@ -236,6 +241,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { } } + //console.log( "ParameterizeSnap: " + paramPt ); return paramPt; } }, @@ -284,14 +290,16 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { y = x0 + ty*dy, z = 0.0; var localPt = [x,y,z]; + globalPt = viewUtils.localToGlobal( localPt, elt ); // add in the delta var hitPt = this.GetObjectHitPoint(); var scrPt = viewUtils.localToGlobal( hitPt, this._clickedObject ); - var delta = [xEvent-scrPt[0], yEvent-scrPt[1]]; + var delta = [xEvent-scrPt[0], yEvent-scrPt[1], 0-scrPt[2]]; globalPt[0] += delta[0]; globalPt[1] += delta[1]; + globalPt[2] += delta[2]; } return globalPt; @@ -517,7 +525,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // do the snap var quadPt; - if (mouseIsDown) + if (mouseIsDown && !do3DSnap && this._shouldUseQuadPt && (this._handleMode === null) && (this._mode === 0)) quadPt = this.GetQuadrantSnapPoint(x,y); var hitRec = snapManager.snap(x, y, do3DSnap, quadPt ); @@ -806,6 +814,8 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { HandleLeftButtonDown: { value: function(event) { + console.log( "modifier-tool-base.HandleLeftButtonDown" ); + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); this.downPoint.x = point.x; this.downPoint.y = point.y; -- cgit v1.2.3