diff options
Diffstat (limited to 'js/tools')
-rw-r--r-- | js/tools/BrushTool.js | 17 | ||||
-rwxr-xr-x | js/tools/EyedropperTool.js | 1 | ||||
-rwxr-xr-x | js/tools/FillTool.js | 1 | ||||
-rwxr-xr-x | js/tools/InkBottleTool.js | 1 | ||||
-rwxr-xr-x | js/tools/LineTool.js | 109 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 445 | ||||
-rwxr-xr-x | js/tools/SelectionTool.js | 2 | ||||
-rwxr-xr-x | js/tools/ShapeTool.js | 45 | ||||
-rwxr-xr-x | js/tools/TagTool.js | 15 | ||||
-rwxr-xr-x | js/tools/drawing-tool.js | 3 | ||||
-rwxr-xr-x | js/tools/modifier-tool-base.js | 2 |
11 files changed, 465 insertions, 176 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 0be378fd..5d983a93 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -39,7 +39,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
39 | //view options | 39 | //view options |
40 | _brushStrokeCanvas: {value: null, writable: true}, | 40 | _brushStrokeCanvas: {value: null, writable: true}, |
41 | _brushStrokePlaneMat: {value: null, writable: true}, | 41 | _brushStrokePlaneMat: {value: null, writable: true}, |
42 | _draggingPlane: {value: null, writable: true}, | 42 | dragPlane: {value: null, writable: true}, |
43 | 43 | ||
44 | //the current brush stroke | 44 | //the current brush stroke |
45 | _selectedBrushStroke: {value: null, writable: true}, | 45 | _selectedBrushStroke: {value: null, writable: true}, |
@@ -67,7 +67,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
67 | 67 | ||
68 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | 68 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); |
69 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | 69 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); |
70 | this._draggingPlane = snapManager.getDragPlane(); | 70 | this.dragPlane = snapManager.getDragPlane(); |
71 | 71 | ||
72 | snapManager.enableElementSnap(elemSnap); | 72 | snapManager.enableElementSnap(elemSnap); |
73 | snapManager.enableGridSnap(gridSnap); | 73 | snapManager.enableGridSnap(gridSnap); |
@@ -100,7 +100,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
100 | } | 100 | } |
101 | var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | 101 | var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); |
102 | var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false); | 102 | var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false); |
103 | this._draggingPlane = snapManager.getDragPlane(); | 103 | this.dragPlane = snapManager.getDragPlane(); |
104 | if (this._selectedSubpathCanvas){ | 104 | if (this._selectedSubpathCanvas){ |
105 | snapManager.popWorkingPlane(); | 105 | snapManager.popWorkingPlane(); |
106 | } | 106 | } |
@@ -138,7 +138,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
138 | } else { | 138 | } else { |
139 | colorArray = [1,1,1,0]; | 139 | colorArray = [1,1,1,0]; |
140 | } | 140 | } |
141 | this._selectedBrushStroke.setStrokeColor(colorArray); | 141 | this._selectedBrushStroke.setFillColor(colorArray); |
142 | 142 | ||
143 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move | 143 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move |
144 | var currMousePos = hitRec.calculateStageWorldPoint(); | 144 | var currMousePos = hitRec.calculateStageWorldPoint(); |
@@ -225,9 +225,11 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
225 | this._hasDraw = false; | 225 | this._hasDraw = false; |
226 | 226 | ||
227 | //finish giving enough info. to the brush stroke | 227 | //finish giving enough info. to the brush stroke |
228 | this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); | 228 | if (this._selectedBrushStroke){ |
229 | this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); | 229 | this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); |
230 | this._selectedBrushStroke.setDragPlane(this._draggingPlane); | 230 | this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); |
231 | this._selectedBrushStroke.setDragPlane(this.dragPlane); | ||
232 | } | ||
231 | 233 | ||
232 | //display the previously drawn stroke in a separate canvas | 234 | //display the previously drawn stroke in a separate canvas |
233 | this.RenderCurrentBrushStroke(); | 235 | this.RenderCurrentBrushStroke(); |
@@ -376,7 +378,6 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
376 | 378 | ||
377 | if (!canvas) { | 379 | if (!canvas) { |
378 | var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument); | 380 | var newCanvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument); |
379 | document.application.njUtils.createModelWithShape(newCanvas, "Brushstroke"); | ||
380 | var styles = document.application.njUtils.stylesFromDraw(newCanvas, w, h, {midPt: midPt, planeMat: planeMat}); | 381 | var styles = document.application.njUtils.stylesFromDraw(newCanvas, w, h, {midPt: midPt, planeMat: planeMat}); |
381 | this.application.ninja.elementMediator.addElements(newCanvas, styles, false); | 382 | this.application.ninja.elementMediator.addElements(newCanvas, styles, false); |
382 | 383 | ||
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6678e498..6a56004d 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js | |||
@@ -376,7 +376,6 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
376 | if(worldData) | 376 | if(worldData) |
377 | { | 377 | { |
378 | this._webGlDataCanvas = njModule.NJUtils.make("canvas", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, this.application.ninja.currentDocument); | 378 | this._webGlDataCanvas = njModule.NJUtils.make("canvas", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, this.application.ninja.currentDocument); |
379 | njModule.NJUtils.createModelWithShape(this._webGlDataCanvas, "Canvas"); | ||
380 | this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", | 379 | this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", |
381 | "-webkit-transform", "-webkit-transform-style"]); | 380 | "-webkit-transform", "-webkit-transform-style"]); |
382 | this._webGlDataCanvas.style.left = eltCoords[0] + "px"; | 381 | this._webGlDataCanvas.style.left = eltCoords[0] + "px"; |
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 69807bc3..e08ec1da 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js | |||
@@ -70,6 +70,7 @@ exports.FillTool = Montage.create(ModifierToolBase, { | |||
70 | // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed) | 70 | // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed) |
71 | startDraw: { | 71 | startDraw: { |
72 | value: function(event) { | 72 | value: function(event) { |
73 | this.drawData = null; | ||
73 | this.isDrawing = true; | 74 | this.isDrawing = true; |
74 | 75 | ||
75 | if(this._canColor && this.application.ninja.selectedElements.length) { | 76 | if(this._canColor && this.application.ninja.selectedElements.length) { |
diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index dff0b0fa..c5640b10 100755 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js | |||
@@ -65,6 +65,7 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { | |||
65 | // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed) | 65 | // Called by modifier tool base's HandleLeftButtonDown after updating selection (if needed) |
66 | startDraw: { | 66 | startDraw: { |
67 | value: function(event) { | 67 | value: function(event) { |
68 | this.drawData = null; | ||
68 | this.isDrawing = true; | 69 | this.isDrawing = true; |
69 | 70 | ||
70 | if(this._canColor && this.application.ninja.selectedElements.length) | 71 | if(this._canColor && this.application.ninja.selectedElements.length) |
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index b2b48383..40475908 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js | |||
@@ -54,39 +54,45 @@ exports.LineTool = Montage.create(ShapeTool, { | |||
54 | 54 | ||
55 | HandleLeftButtonUp: { | 55 | HandleLeftButtonUp: { |
56 | value: function (event) { | 56 | value: function (event) { |
57 | var slope = this._getSlope(), drawData = this.getDrawingData(); | 57 | var slope = this._getSlope(), |
58 | 58 | canvas, | |
59 | if(drawData) { | 59 | xAdj = 0, |
60 | var canvas, xAdj = 0, yAdj = 0, w, h; | 60 | yAdj = 0, |
61 | if(!this._useExistingCanvas()) { | 61 | w, |
62 | if(drawData = this.getDrawingData()) { | 62 | h; |
63 | // set the dimensions | 63 | |
64 | w = ~~drawData.width; | 64 | if(slope) { |
65 | h = ~~drawData.height; | 65 | this.drawData = this.getDrawingData(); |
66 | if(slope === "horizontal") { | 66 | if(this.drawData) { |
67 | h = Math.max(this._strokeSize, 1); | 67 | w = Math.floor(this.drawData.width); |
68 | } else if(slope === "vertical") { | 68 | h = Math.floor(this.drawData.height); |
69 | w = Math.max(this._strokeSize, 1); | 69 | if(!this._useExistingCanvas()) { |
70 | // set the dimensions | ||
71 | if(slope === "horizontal") { | ||
72 | h = Math.max(this._strokeSize, 1); | ||
73 | w = Math.max(w, 1); | ||
74 | } else if(slope === "vertical") { | ||
75 | w = Math.max(this._strokeSize, 1); | ||
76 | h = Math.max(h, 1); | ||
77 | } else { | ||
78 | // else make the line's stroke fit inside the canvas by growing the canvas | ||
79 | var theta = Math.atan(slope); | ||
80 | xAdj = Math.abs((this._strokeSize/2)*Math.sin(theta)); | ||
81 | yAdj = Math.abs((this._strokeSize/2)*Math.cos(theta)); | ||
82 | |||
83 | w += ~~(xAdj*2); | ||
84 | h += ~~(yAdj*2); | ||
85 | } | ||
86 | |||
87 | canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument); | ||
88 | |||
89 | var styles = document.application.njUtils.stylesFromDraw(canvas, w, h, this.drawData); | ||
90 | this.application.ninja.elementMediator.addElements(canvas, styles); | ||
70 | } else { | 91 | } else { |
71 | // else make the line's stroke fit inside the canvas by growing the canvas | 92 | canvas = this._targetedElement; |
72 | var theta = Math.atan(slope); | 93 | canvas.elementModel.controller = ShapesController; |
73 | xAdj = Math.abs((this._strokeSize/2)*Math.sin(theta)); | 94 | if(!canvas.elementModel.shapeModel) { |
74 | yAdj = Math.abs((this._strokeSize/2)*Math.cos(theta)); | 95 | canvas.elementModel.shapeModel = Montage.create(ShapeModel); |
75 | |||
76 | w += ~~(xAdj*2); | ||
77 | h += ~~(yAdj*2); | ||
78 | } | ||
79 | |||
80 | canvas = document.application.njUtils.make("canvas", {"data-RDGE-id": NJUtils.generateRandom()}, this.application.ninja.currentDocument); | ||
81 | document.application.njUtils.createModelWithShape(canvas, "Line"); | ||
82 | |||
83 | var styles = document.application.njUtils.stylesFromDraw(canvas, w, h, drawData); | ||
84 | this.application.ninja.elementMediator.addElements(canvas, styles); | ||
85 | } else { | ||
86 | canvas = this._targetedElement; | ||
87 | canvas.elementModel.controller = ShapesController; | ||
88 | if(!canvas.elementModel.shapeModel) { | ||
89 | canvas.elementModel.shapeModel = Montage.create(ShapeModel); | ||
90 | } | 96 | } |
91 | } | 97 | } |
92 | } | 98 | } |
@@ -103,16 +109,18 @@ exports.LineTool = Montage.create(ShapeTool, { | |||
103 | 109 | ||
104 | onAddElements: { | 110 | onAddElements: { |
105 | value: function(el) { | 111 | value: function(el) { |
106 | var drawData, xAdj = 0, yAdj = 0, w, h, slope = this._getSlope(); | 112 | var xAdj = 0, yAdj = 0, w, h, slope = this._getSlope(); |
107 | 113 | ||
108 | if(drawData = this.getDrawingData()) { | 114 | if(this.drawData) { |
109 | // set the dimensions | 115 | // set the dimensions |
110 | w = ~~drawData.width; | 116 | w = Math.floor(this.drawData.width); |
111 | h = ~~drawData.height; | 117 | h = Math.floor(this.drawData.height); |
112 | if(slope === "horizontal") { | 118 | if(slope === "horizontal") { |
113 | h = Math.max(this._strokeSize, 1); | 119 | h = Math.max(this._strokeSize, 1); |
120 | w = Math.max(w, 1); | ||
114 | } else if(slope === "vertical") { | 121 | } else if(slope === "vertical") { |
115 | w = Math.max(this._strokeSize, 1); | 122 | w = Math.max(this._strokeSize, 1); |
123 | h = Math.max(h, 1); | ||
116 | } else { | 124 | } else { |
117 | // else make the line's stroke fit inside the canvas by growing the canvas | 125 | // else make the line's stroke fit inside the canvas by growing the canvas |
118 | var theta = Math.atan(slope); |