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 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