From 0f2b7cf2e1aae16e3cf4e699ab7e3ca83deb1529 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 23 Apr 2012 11:32:15 -0700 Subject: limits --- js/tools/PanTool.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index 0537a27b..ce7606a1 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -331,10 +331,26 @@ exports.PanTool = Montage.create(toolBase, if (!this._altKeyDown) delta[2] = 0; - var transMat = Matrix.Translation( delta ); - this._worldPt = wPt; + + // limit the change + var ucMat = viewUtils.getMatrixFromElement(this.application.ninja.currentDocument.documentRoot); + var tooMuch = false + if ((ucMat[12] > 12000) && (delta[0] > 0)) tooMuch = true; + if ((ucMat[12] < -12000) && (delta[0] < 0)) tooMuch = true; + if ((ucMat[13] > 12000) && (delta[1] > 0)) tooMuch = true; + if ((ucMat[13] < -12000) && (delta[1] < 0)) tooMuch = true; + if ((ucMat[14] > 12000) && (delta[2] > 0)) tooMuch = true; + if ((ucMat[14] < -12000) && (delta[2] < 0)) tooMuch = true; + if (tooMuch) + { + this._isDrawing = false; + delta = [0,0,0]; + } + else + this._worldPt = wPt; // update everything + var transMat = Matrix.Translation( delta ); this.applyDeltaMat( transMat ); } } -- cgit v1.2.3 From 27c1ba250a7db26cf24dd456d20af9ff1649e638 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 23 Apr 2012 17:04:48 -0700 Subject: canvas interaction --- js/tools/OvalTool.js | 2 +- js/tools/ShapeTool.js | 22 ++++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) (limited to 'js/tools') diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index e8e88d1d..6edec811 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -66,7 +66,7 @@ exports.OvalTool = Montage.create(ShapeTool, { var world = this.getGLWorld(canvas, this.options.use3D); var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); - var yOffset = (canvas.height/2 - (top - canvas.offsetTop + h/2)); + var yOffset = -(canvas.height/2 - (top - canvas.offsetTop + h/2)); var oval = new Circle(); //GLCircle(); oval.init(world, xOffset, yOffset, w, h, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index f3b5e92d..b2948fe7 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -54,9 +54,9 @@ exports.ShapeTool = Montage.create(DrawingTool, { }, HandleLeftButtonUp: - { - value: function (event) - { + { + value: function (event) + { var drawData; drawData = this.getDrawingData(); @@ -69,24 +69,26 @@ exports.ShapeTool = Montage.create(DrawingTool, { drawData.planeMat, drawData.midPt, canvas, true); canvas.elementModel.isShape = true; - this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { canvas = this._targetedElement; + if (!canvas.getAttribute( "data-RDGE-id" )) + canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); canvas.elementModel.controller = ShapesController; if(!canvas.elementModel.shapeModel) { canvas.elementModel.shapeModel = Montage.create(ShapeModel); } } + this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } - this.endDraw(event); + this.endDraw(event); - this._isDrawing = false; - this._hasDraw=false; + this._isDrawing = false; + this._hasDraw=false; - this.DrawHandles(); - } - }, + this.DrawHandles(); + } + }, onAddElements: { value: function(el) { -- cgit v1.2.3 From 4b83774cdbfbf30add9a8fa2f11b1c4ff35179fa Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 26 Apr 2012 12:50:57 -0700 Subject: canvas interaction --- js/tools/ShapeTool.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index b2948fe7..74e692b6 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -69,6 +69,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { drawData.planeMat, drawData.midPt, canvas, true); canvas.elementModel.isShape = true; + this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) @@ -77,8 +78,8 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(!canvas.elementModel.shapeModel) { canvas.elementModel.shapeModel = Montage.create(ShapeModel); } + this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } - this.application.ninja.elementMediator.addElements(canvas, canvas.elementModel.data); } this.endDraw(event); @@ -213,7 +214,20 @@ exports.ShapeTool = Montage.create(DrawingTool, { _useExistingCanvas: { value: function() { - return (this._targetedElement && !ShapesController.isElementAShape(this._targetedElement)); + var target; + if (this._targetedElement && (this._targetedElement.nodeName === "CANVAS") && !ShapesController.isElementAShape(this._targetedElement)) + target = this._targetedElement; + else + { + var container = this.application.ninja.currentSelectedContainer; + if (container && (container.nodeName === "CANVAS")) + { + target = container; + this._targetedElement = target; + } + } + + return target; } } -- cgit v1.2.3 From e73fba18b095f0c270f5d954e5993c155b488c73 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 27 Apr 2012 13:52:40 -0700 Subject: Creating shapes in a container --- js/tools/SelectionTool.js | 2 ++ js/tools/ShapeTool.js | 2 ++ js/tools/drawing-tool-base.js | 13 +++++++++++-- 3 files changed, 15 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 7033ee3d..9c9aee93 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -222,8 +222,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function(event) { if(this.application.ninja.selectedElements.length > 0) { this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]; + console.log( "setting container to selected element" ); } else { this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; + console.log( "setting container to stage" ); } } }, diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 74e692b6..90b403a4 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -64,6 +64,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(drawData) { var canvas; if(!this._useExistingCanvas()) { + console.log( "creating a new canvas" ); 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); @@ -71,6 +72,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { canvas.elementModel.isShape = true; this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { + console.log( "inserting shape into container" ); canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 2283dfab..0b51aa28 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -41,11 +41,20 @@ exports.DrawingToolBase = Montage.create(Montage, { // do the snap var hitRec = snapManager.snap(x, y, true); + var dragPlane; if (hitRec) { // set up the working plane and convert the hit record to be working plane relative - var dragPlane = snapManager.setupDragPlanes( hitRec ); - var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); + if (hitRec.getElement() === snapManager.application.ninja.currentSelectedContainer) + { + dragPlane = viewUtils.getUnprojectedElementPlane( hitRec.getElement() ); + snapManager.setupDragPlaneFromPlane( dragPlane ); + } + else + { + dragPlane = snapManager.setupDragPlanes( hitRec ); + } + var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); return( [wpHitRec, pt[0], pt[1]] ); -- cgit v1.2.3 From 48e442977ef1630e0f664265a7142320b55d7d20 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 27 Apr 2012 14:35:01 -0700 Subject: added a console.log to show the working plane during a drag --- js/tools/drawing-tool-base.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/tools') diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 0b51aa28..2e652d42 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -53,6 +53,7 @@ exports.DrawingToolBase = Montage.create(Montage, { { dragPlane = snapManager.setupDragPlanes( hitRec ); } + console.log( "drag plane: " + dragPlane ); var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); -- cgit v1.2.3 From 9c8fbdd11fdbe9ae73d57147de84b799c5a87652 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 30 Apr 2012 16:15:47 -0700 Subject: Squashed commit of stage architecture Signed-off-by: Valerio Virgillito --- js/tools/SelectionTool.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 9c9aee93..f7b583b5 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -753,10 +753,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) - { + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } + var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); for (var j=0; j<4; j++) { @@ -865,7 +865,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var zoomFactor = 1; var viewPort = this.application.ninja.stage._viewport; - if (viewPort.style && viewPort.style.zoom) + if (viewPort && viewPort.style && viewPort.style.zoom) { zoomFactor = Number(viewPort.style.zoom); } -- cgit v1.2.3 From fb47c04b0a4d65f53d975311754aa0dd8a8a3f69 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 30 Apr 2012 16:31:37 -0700 Subject: Removing some console logs Signed-off-by: Valerio Virgillito --- js/tools/SelectionTool.js | 2 -- js/tools/ShapeTool.js | 2 -- js/tools/drawing-tool-base.js | 1 - 3 files changed, 5 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f7b583b5..855c7b8c 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -222,10 +222,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { value: function(event) { if(this.application.ninja.selectedElements.length > 0) { this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]; - console.log( "setting container to selected element" ); } else { this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; - console.log( "setting container to stage" ); } } }, diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index c0681200..8f45891d 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -64,7 +64,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(drawData) { var canvas; if(!this._useExistingCanvas()) { - console.log( "creating a new canvas" ); 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); @@ -72,7 +71,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { canvas.elementModel.isShape = true; this.application.ninja.elementMediator.addElements(canvas, elementModel.data); } else { - console.log( "inserting shape into container" ); canvas = this._targetedElement; if (!canvas.getAttribute( "data-RDGE-id" )) canvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() ); diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 2e652d42..0b51aa28 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -53,7 +53,6 @@ exports.DrawingToolBase = Montage.create(Montage, { { dragPlane = snapManager.setupDragPlanes( hitRec ); } - console.log( "drag plane: " + dragPlane ); var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); var pt = hitRec.getScreenPoint(); -- cgit v1.2.3 From c534f70e9af920d252d0d94151c9d6f884283b81 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 07:01:44 -0700 Subject: Get working plane grid to draw for new stage web template workflow. Signed-off-by: Nivesh Rajbhandari --- js/tools/RotateStage3DTool.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index d1701304..0210289f 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -96,6 +96,11 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { viewUtils.pushViewportObj( stage ); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); + if(this.application.ninja.documentController.webTemplate) + { + eltCtr[0] = stage.scrollWidth/2; + eltCtr[1] = stage.scrollHeight/2; + } var curMat = viewUtils.getMatrixFromElement(stage); var curMatInv = glmat4.inverse(curMat, []); @@ -113,8 +118,15 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { this._origin = viewUtils.localToGlobal(eltCtr, stage); - this._setTransformOrigin(false); - + if(this.application.ninja.documentController.webTemplate) + { + this._startOriginArray = []; + this._startOriginArray.push(this._origin.slice()); + } + else + { + this._setTransformOrigin(false); + } this.DrawHandles(); } }, -- cgit v1.2.3 From 84eec0ae4352c9f6e5986529cc70eed726d97a88 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 09:29:49 -0700 Subject: webTemplate var gets reset to false, so must check for new stage template differently. Signed-off-by: Nivesh Rajbhandari --- js/tools/RotateStage3DTool.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index 0210289f..2a9c63db 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -96,7 +96,8 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { viewUtils.pushViewportObj( stage ); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); - if(this.application.ninja.documentController.webTemplate) +// if(this.application.ninja.documentController.webTemplate) + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { eltCtr[0] = stage.scrollWidth/2; eltCtr[1] = stage.scrollHeight/2; @@ -118,7 +119,8 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { this._origin = viewUtils.localToGlobal(eltCtr, stage); - if(this.application.ninja.documentController.webTemplate) +// if(this.application.ninja.documentController.webTemplate) + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { this._startOriginArray = []; this._startOriginArray.push(this._origin.slice()); -- cgit v1.2.3 From 355656cac2fa1a025ad97791ea095a54cebdff71 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 20:13:58 -0700 Subject: Support drawing in side and top view. Also, adding back support for drawing shapes inside canvas when double-clicked into canvas or when moused over canvas. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 3 +++ js/tools/drawing-tool-base.js | 63 ++++++++++++++++++++++++------------------- js/tools/drawing-tool.js | 3 ++- 3 files changed, 41 insertions(+), 28 deletions(-) (limited to 'js/tools') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 8f45891d..d2337000 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -106,6 +106,9 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(wasSelected) { this.AddCustomFeedback(); this.application.ninja.elementMediator.addDelegate = this; + if(this.application.ninja.currentSelectedContainer.nodeName === "CANVAS") { + this._targetedElement = this.application.ninja.currentSelectedContainer; + } } else { this.RemoveCustomFeedback(); this.application.ninja.elementMediator.addDelegate = null; diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 0b51aa28..7d97f105 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -24,6 +24,9 @@ exports.DrawingToolBase = Montage.create(Montage, { value: null }, + dragPlane: { + value: null + }, /** * Used on the initial MouseDown for Drawing Tools * @@ -33,28 +36,30 @@ exports.DrawingToolBase = Montage.create(Montage, { * 2 - Y value converted to screen point */ getInitialSnapPoint: { - value: function(x,y) { + value: function(x, y, shapeCanvas) { + snapManager.clearDragPlane(); + // update the snap settings snapManager.enableSnapAlign( snapManager.snapAlignEnabledAppLevel() ); snapManager.enableElementSnap( snapManager.elementSnapEnabledAppLevel() ); snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() ); // do the snap - var hitRec = snapManager.snap(x, y, true); - var dragPlane; + this.dragPlane = null; + var hitRec = snapManager.snap(x, y, true); if (hitRec) { - // set up the working plane and convert the hit record to be working plane relative - if (hitRec.getElement() === snapManager.application.ninja.currentSelectedContainer) + if (shapeCanvas) { - dragPlane = viewUtils.getUnprojectedElementPlane( hitRec.getElement() ); - snapManager.setupDragPlaneFromPlane( dragPlane ); + this.dragPlane = viewUtils.getUnprojectedElementPlane( shapeCanvas ); + snapManager.setupDragPlaneFromPlane( this.dragPlane ); } else { - dragPlane = snapManager.setupDragPlanes( hitRec ); + this.dragPlane = snapManager.setupDragPlanes( hitRec, true ); } +// console.log( "drag plane: " + this.dragPlane ); - var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); + var wpHitRec = hitRec.convertToWorkingPlane( this.dragPlane ); var pt = hitRec.getScreenPoint(); return( [wpHitRec, pt[0], pt[1]] ); @@ -72,28 +77,32 @@ exports.DrawingToolBase = Montage.create(Montage, { snapManager.enableElementSnap( snapManager.elementSnapEnabledAppLevel() ); snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() ); - - // do the first snap var hitRec = snapManager.snap(x, y, snap3d ); if (hitRec) { - if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { - hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); - } - - if(downHitRec !== null) { - // if we are working off-plane, do a snap to the projected locations of the geometry - var thePlane = workingPlane; - if (snapManager.hasDragPlane()) - { - thePlane = snapManager.getDragPlane(); - } - - // Return the up HitRec - return hitRec; - } else { - return null; +// if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { +// hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); +// } +// +// if(downHitRec !== null) { +// // if we are working off-plane, do a snap to the projected locations of the geometry +// var thePlane = workingPlane; +// if (snapManager.hasDragPlane()) +// { +// thePlane = snapManager.getDragPlane(); +// } +// +// // Return the up HitRec +// return hitRec; +// } else { +// return null; +// } + if(downHitRec) { + hitRec = hitRec.convertToWorkingPlane(this.dragPlane); + } else if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { + hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); } } + return hitRec; } }, diff --git a/js/tools/drawing-tool.js b/js/tools/drawing-tool.js index dc5f7996..d906fdf9 100755 --- a/js/tools/drawing-tool.js +++ b/js/tools/drawing-tool.js @@ -72,10 +72,11 @@ exports.DrawingTool = Montage.create(ToolBase, { var snapData, point; this._isDrawing = true; + this.mouseDownHitRec = null; this.mouseUpHitRec = null; point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - snapData = DrawingToolBase.getInitialSnapPoint(point.x, point.y); //event.layerX, event.layerY); + snapData = DrawingToolBase.getInitialSnapPoint(point.x, point.y, this._targetedElement); //event.layerX, event.layerY); this.mouseDownHitRec = snapData[0]; this.downPoint.x = snapData[1]; this.downPoint.y = snapData[2]; -- 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 --- js/tools/TagTool.js | 151 ++++++++++++++++++---------------------------------- 1 file changed, 53 insertions(+), 98 deletions(-) (limited to 'js/tools') 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 a809c6b3ba6f024922dd3f10bbc4ab456de2407e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 2 May 2012 15:45:43 -0700 Subject: Converting line, circle and rectangle shapes to object literal notation. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 3e9167fd..9c4ba892 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -233,7 +233,8 @@ exports.LineTool = Montage.create(ShapeTool, { var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); var yOffset = (canvas.height/2 - (top - canvas.offsetTop + h/2)); - var line = new Line(world, xOffset, yOffset, w, h, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj); + var line = new Line(); + line.init(world, xOffset, yOffset, w, h, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj); world.addObject(line); world.render(); -- cgit v1.2.3 From 7c77aa914eb96c2b5b797e37c16aa786c05f38e8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 2 May 2012 16:50:38 -0700 Subject: Converting geom-obj to object literal notation. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 2 +- js/tools/OvalTool.js | 2 +- js/tools/RectTool.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 9c4ba892..a32fbdc8 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -233,7 +233,7 @@ exports.LineTool = Montage.create(ShapeTool, { var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); var yOffset = (canvas.height/2 - (top - canvas.offsetTop + h/2)); - var line = new Line(); + var line = Object.create(Line, {}); line.init(world, xOffset, yOffset, w, h, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj); world.addObject(line); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 6edec811..e9dc66bb 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -68,7 +68,7 @@ exports.OvalTool = Montage.create(ShapeTool, { var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); var yOffset = -(canvas.height/2 - (top - canvas.offsetTop + h/2)); - var oval = new Circle(); //GLCircle(); + var oval = Object.create(Circle, {}); oval.init(world, xOffset, yOffset, w, h, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle); world.addObject(oval); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 0c14a559..0a3c8200 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -87,7 +87,7 @@ exports.RectTool = Montage.create(ShapeTool, { var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); var yOffset = (canvas.height/2 - (top - canvas.offsetTop + h/2)); - var rect = new Rectangle(); + var rect = Object.create(Rectangle, {}); rect.init(world, xOffset, yOffset, w, h, strokeSize, strokeColor, fillColor, tlRadius, trRadius, blRadius, brRadius, strokeMaterial, fillMaterial, strokeStyle); -- cgit v1.2.3 From 1a759361b82127f9d5c1428dc889fffdf2daaf86 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 3 May 2012 15:11:56 -0700 Subject: First round of moving color chips into the sub tools. Shape and Pen tool now have chips in the sub tool bar. Still need to complete adding chips to the Brush tool and finalizing the subtool bar layout to our spec for all of the subtools. --- js/tools/BrushTool.js | 2 +- js/tools/LineTool.js | 6 +++--- js/tools/OvalTool.js | 4 ++-- js/tools/PenTool.js | 4 ++-- js/tools/RectTool.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index ded56ecc..7e5e0630 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -132,7 +132,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new BrushStroke(); var colorArray=[0,0,0,0]; - var color = this.application.ninja.colorController.colorToolbar.fill.color; + var color = this.options.fill.color; if (color){ colorArray = [color.r/255, color.g/255, color.b/255, color.a]; } else { diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 3e9167fd..92352880 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -44,8 +44,8 @@ exports.LineTool = Montage.create(ShapeTool, { } this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); - if (this.application.ninja.colorController.colorToolbar.stroke.color) - this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; + if (this.options.stroke.color) + this._strokeColor = this.options.stroke.color.css; else this._strokeColor = [0,0,0,1]; this.startDraw(event); @@ -214,7 +214,7 @@ exports.LineTool = Montage.create(ShapeTool, { var left = Math.round(midPt[0] - 0.5*w); var top = Math.round(midPt[1] - 0.5*h); - var strokeColor = this.application.ninja.colorController.colorToolbar.stroke.webGlColor; + var strokeColor = this.options.stroke.webGlColor; // for default stroke and fill/no materials var strokeMaterial = null; diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 6edec811..f1da3a46 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -39,8 +39,8 @@ exports.OvalTool = Montage.create(ShapeTool, { var innerRadius = this.options.innerRadius.value / 100; - var strokeColor = this.application.ninja.colorController.colorToolbar.stroke.webGlColor; - var fillColor = this.application.ninja.colorController.colorToolbar.fill.webGlColor; + var strokeColor = this.options.stroke.webGlColor; + var fillColor = this.options.fill.webGlColor; // for default stroke and fill/no materials var strokeMaterial = null; diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 8ecc9f79..83d0c8d2 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -240,7 +240,7 @@ exports.PenTool = Montage.create(ShapeTool, { this._selectedSubpath.setStrokeWidth(strokeSize); var colorArray=[]; - var color = this.application.ninja.colorController.colorToolbar.stroke.color; + var color = this.options.stroke.color; if (color){ colorArray = [color.r/255, color.g/255, color.b/255, color.a]; }else { @@ -248,7 +248,7 @@ exports.PenTool = Montage.create(ShapeTool, { } this._selectedSubpath.setStrokeColor(colorArray); - color = this.application.ninja.colorController.colorToolbar.fill.color; + color = this.options.fill.color; if (color){ colorArray = [color.r/255, color.g/255, color.b/255, color.a]; } else { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 0c14a559..d4951db8 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -59,8 +59,8 @@ exports.RectTool = Montage.create(ShapeTool, { var blRadius = ShapesController.GetValueInPixels(this.options.BLRadiusControl.value, this.options.BLRadiusControl.units, h); var brRadius = ShapesController.GetValueInPixels(this.options.BRRadiusControl.value, this.options.BRRadiusControl.units, h); - var strokeColor = this.application.ninja.colorController.colorToolbar.stroke.webGlColor; - var fillColor = this.application.ninja.colorController.colorToolbar.fill.webGlColor; + var strokeColor = this.options.stroke.webGlColor; + var fillColor = this.options.fill.webGlColor; // for default stroke and fill/no materials var strokeMaterial = null; var fillMaterial = 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/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 -------- 7 files changed, 25 insertions(+), 203 deletions(-) (limited to 'js/tools') 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 From 9eeb03e8bb86a4462609d3a18b528daa1516b91c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 7 May 2012 13:57:18 -0700 Subject: fixes for 2D and 3D translation. --- js/tools/SelectionTool.js | 2 +- js/tools/TranslateObject3DTool.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 855c7b8c..07c26b8c 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -504,7 +504,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { delta = vecUtils.vecSubtract( 3, data.pt1, data.pt0 ); delta[0] = ~~delta[0]; delta[1] = ~~delta[1]; - delta[2] = 0; + //delta[2] = 0; var transMat = Matrix.Translation( delta ); this._moveElements(transMat); } diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index b4f55bd9..f8b32d23 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -54,10 +54,10 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { else { this._delta = null; - // special case for z-translation - if(this._handleMode === 2) + //if(this._handleMode === 2) { - this._dragPlane = viewUtils.getNormalToUnprojectedElementPlane(this._target); + this._dragPlane = viewUtils.getNormalToUnprojectedElementPlane(this._target, this._handleMode, this._inLocalMode); + //console.log( "dragPlane: " + this._dragPlane ); snapManager.setupDragPlaneFromPlane(this._dragPlane); do3DSnap = false; @@ -86,7 +86,8 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { var elt = this.application.ninja.stage.getElement(event, true); if(elt && (elt !== hitRec.getElement())) { - hitRec = snapManager.findHitRecordForElement(elt); + var otherSnap = snapManager.findHitRecordForElement(elt); + if (otherSnap) hitRec = otherSnap; } if(elt === this.application.ninja.currentSelectedContainer) { -- cgit v1.2.3 From 29ad6355ef60cfb3b3fc7f780504f3ed30845883 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 14:30:47 -0700 Subject: More implementation of moving color chips to the individual subtools. Removed the tool color bar Added new icons for inkbottle Removed Pencil tool Removed Inkbottle tool Added chips to the pen, brush and tag tools Aligned controls in several subtools --- js/tools/PencilTool.js | 32 -------------------------------- 1 file changed, 32 deletions(-) delete mode 100755 js/tools/PencilTool.js (limited to 'js/tools') diff --git a/js/tools/PencilTool.js b/js/tools/PencilTool.js deleted file mode 100755 index 349eb1e8..00000000 --- a/js/tools/PencilTool.js +++ /dev/null @@ -1,32 +0,0 @@ -/* -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, - DrawingTool = require("js/tools/drawing-tool").DrawingTool; - -exports.PencilTool = Montage.create(DrawingTool, { - drawingFeedback: { value: { mode: "Draw2D", type: "" } }, - - HandleLeftButtonDown: { - value: function(event) { - NJevent("enableStageMove"); - - } - }, - - HandleMouseMove: { - value: function(event) { - this.doDraw(event); - } - }, - - HandleLeftButtonUp: { - value: function(event) { - this.endDraw(event); - NJevent("disableStageMove"); - } - } -}); \ No newline at end of file -- cgit v1.2.3 From 15c7bdad38a83d192bd5a1d55a54362c12c73d38 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 12:10:07 -0700 Subject: Fixed a snapping issue on the mouse down in drawing tools. --- js/tools/drawing-tool-base.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 376b3a27..84641754 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -36,9 +36,8 @@ exports.DrawingToolBase = Montage.create(Montage, { * 2 - Y value converted to screen point */ getInitialSnapPoint: { - value: function(x, y, shapeCanvas) { - snapManager.clearDragPlane(); - + value: function(x, y, shapeCanvas) + { // update the snap settings snapManager.enableSnapAlign( snapManager.snapAlignEnabledAppLevel() ); snapManager.enableElementSnap( snapManager.elementSnapEnabledAppLevel() ); -- cgit v1.2.3 From 622ce143d92988aa613a0a5b6399efb54facafba Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 9 May 2012 13:23:15 -0700 Subject: some code cleanup Signed-off-by: Valerio Virgillito --- js/tools/TextTool.js | 40 ++++++++++++++-------------------------- 1 file changed, 14 insertions(+), 26 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index a58aacc6..024a92ce 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -5,13 +5,18 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - DrawingTool = require("js/tools/drawing-tool").DrawingTool; + DrawingTool = require("js/tools/drawing-tool").DrawingTool, RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor, ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.TextTool = Montage.create(DrawingTool, { + drawingFeedback: { + value: { mode: "Draw3D", type: "rectangle" } + }, - _selectedElement: { value : null }, + _selectedElement: { + value : null +