From 2082fa6912eec2ffabd2081b7706e8e1b88a9711 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 2 Feb 2012 19:03:59 -0800 Subject: Initial Text Tool Implementation Has rich-text-editor in place need to place with finalized version when complete --- js/tools/TextTool.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 6 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 538583ee..8b48ff4f 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,12 +6,30 @@ 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; + RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor; exports.TextTool = Montage.create(DrawingTool, { + + _selectedElement: { value : null }, + + selectedElement: { + get: function() { + return this._selectedElement; + }, + set: function(val) { + if(this._selectedElement !== null) { + + } + this._selectedElement = val; + } + }, + + drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, HandleLeftButtonDown: { value: function(event) { + this.deselectText(); this.startDraw(event); } }, @@ -50,24 +68,88 @@ exports.TextTool = Montage.create(DrawingTool, { if(drawData) { //this.insertElement(drawData); } - + this._hasDraw = false; this.endDraw(event); } else { - this.doSelection(event); + console.log("im here"); + if (this.application.ninja.selectedElements.length !== 0 ) { + this.selectedElement = this.application.ninja.selectedElements[0]._element; + this.drawTextTool(); + } this._isDrawing = false; } } }, + applyElementStyles : { + value: function(fromElement, toElement, styles) { + styles.forEach(function(style) { + var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); + console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]); + toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; + }, this); + } + }, + + drawTextTool: { + value: function() { + console.log(" now im here"); + this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; + if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } + this.selectedElement.innerHTML = ""; + + //Styling Options for text tool to look identical to the text you are manipulating. + this.application.ninja.stage.textTool.element.style.display = "block"; + this.application.ninja.stage.textTool.element.style.position = "absolute"; + + // Set Top & Left Positions + var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); + this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; + this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; + + // Set Width, Height + this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px"; + this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px"; + + + // Set font styling (Size, Style, Weight) + + me = this; + this.application.ninja.stage.textTool.didDraw = function() { + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]); + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); + var range = document.createRange(), + sel = window.getSelection(); + sel.removeAllRanges(); + range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild); + sel.addRange(range); + this.didDraw = function() {}; + console.log("im drew here"); + } + console.log("i end here"); + } + }, + + + deselectText: { + value: function() { + this.application.ninja.stage.textTool.element.style.display = "none"; + this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; + this.application.ninja.stage.textTool.value = ""; + } + }, + HandleDoubleClick: { value: function(e) { - console.log(this.application.ninja.selectedElements[0]._element); - this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); - this.application.ninja.stage._iframeContainer.style.zIndex = 200; - this.application.ninja.selectedElements[0]._element.focus(); + //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); + + //if (!this.application.ninja.textTool) { + + //} + } @@ -75,10 +157,12 @@ exports.TextTool = Montage.create(DrawingTool, { Configure: { value: function(wasSelected) { + if(wasSelected) { NJevent("enableStageMove"); this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); } else { + this.deselectText(); NJevent("disableStageMove"); } } -- cgit v1.2.3 From d7ead10b566e7de121b2cd2c99fecca8469d63b8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:30:47 -0800 Subject: Initial Text tool completion. --- js/tools/TextTool.js | 47 ++++++++++++++++++++++------------------------- 1 file changed, 22 insertions(+), 25 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 8b48ff4f..28e7ddf3 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -17,10 +17,20 @@ exports.TextTool = Montage.create(DrawingTool, { return this._selectedElement; }, set: function(val) { - if(this._selectedElement !== null) { - + if (this._selectedElement !== null) { + this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; + this.application.ninja.stage.textTool.value = ""; + this.application.ninja.stage.textTool.element.style.display = "none"; } + //Set Selected Element this._selectedElement = val; + if(val !== null) { + this.drawTextTool(); + this.handleScroll(); + this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); + } else { + this.application.ninja.stage._iframeContainer.removeEventListener("scroll", this); + } } }, @@ -29,11 +39,19 @@ exports.TextTool = Montage.create(DrawingTool, { HandleLeftButtonDown: { value: function(event) { - this.deselectText(); this.startDraw(event); } }, + handleScroll: { + value: function(e) { + // Set Top & Left Positions + var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); + this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; + this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; + } + }, + HandleMouseMove: { value: function(event) { if(this._escape) { @@ -73,12 +91,9 @@ exports.TextTool = Montage.create(DrawingTool, { this.endDraw(event); } else { this.doSelection(event); - console.log("im here"); if (this.application.ninja.selectedElements.length !== 0 ) { this.selectedElement = this.application.ninja.selectedElements[0]._element; - this.drawTextTool(); } - this._isDrawing = false; } } @@ -88,7 +103,6 @@ exports.TextTool = Montage.create(DrawingTool, { value: function(fromElement, toElement, styles) { styles.forEach(function(style) { var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); - console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]); toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; }, this); } @@ -96,7 +110,6 @@ exports.TextTool = Montage.create(DrawingTool, { drawTextTool: { value: function() { - console.log(" now im here"); this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } this.selectedElement.innerHTML = ""; @@ -105,11 +118,6 @@ exports.TextTool = Montage.create(DrawingTool, { this.application.ninja.stage.textTool.element.style.display = "block"; this.application.ninja.stage.textTool.element.style.position = "absolute"; - // Set Top & Left Positions - var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); - this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; - this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; - // Set Width, Height this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px"; this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px"; @@ -127,18 +135,7 @@ exports.TextTool = Montage.create(DrawingTool, { range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild); sel.addRange(range); this.didDraw = function() {}; - console.log("im drew here"); } - console.log("i end here"); - } - }, - - - deselectText: { - value: function() { - this.application.ninja.stage.textTool.element.style.display = "none"; - this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; - this.application.ninja.stage.textTool.value = ""; } }, @@ -162,7 +159,7 @@ exports.TextTool = Montage.create(DrawingTool, { NJevent("enableStageMove"); this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); } else { - this.deselectText(); + this.selectedElement = null; NJevent("disableStageMove"); } } -- cgit v1.2.3 From 7f8730c3add146f1ba107e6fc22d1f5a8348ed8b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Tue, 7 Feb 2012 16:43:22 -0800 Subject: Refactored rich text editor location --- js/tools/TextTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 28e7ddf3..910a9eef 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,7 +6,7 @@ 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; - RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor; + RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor; exports.TextTool = Montage.create(DrawingTool, { -- cgit v1.2.3 From 8a2ef825490358f992d6d687174b0a16fd8302c1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 10:48:52 -0800 Subject: Squashed commit of the following: commit 763910b9d074137eb7dee80447b89407ce5750c9 Merge: e557937 329a859 Author: Valerio Virgillito Date: Wed Feb 8 10:18:36 2012 -0800 Merge pull request #20 from mqg734/ToolFixes Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs: commit e5579374ff39b80b8c0c69faba37f6f581758fe0 Author: Valerio Virgillito Date: Tue Feb 7 13:28:17 2012 -0800 updated montage v.0.6 to the latest changes. Signed-off-by: Valerio Virgillito commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d Author: Nivesh Rajbhandari Date: Tue Feb 7 15:25:11 2012 -0800 Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options. Signed-off-by: Nivesh Rajbhandari commit 668510892537eaaeb2e11520831d87b44b2489b7 Merge: 8950b34 c066fb4 Author: Valerio Virgillito Date: Tue Feb 7 14:19:22 2012 -0800 Merge pull request #19 from ericguzman/TreeComponents Tree Components - Added copyright comments commit aec849d91e4b697d496b9ede28b5d89cf2283781 Author: Nivesh Rajbhandari Date: Tue Feb 7 14:18:13 2012 -0800 id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number. Signed-off-by: Nivesh Rajbhandari commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f Author: Nivesh Rajbhandari Date: Tue Feb 7 13:52:54 2012 -0800 Fixing some typos and undeclared variables in GLRectangle and ShapesController. Signed-off-by: Nivesh Rajbhandari commit c066fb41ebee85bacf9b2155366b16831af41d76 Author: Eric Guzman Date: Tue Feb 7 13:46:05 2012 -0800 Tree Components - Added copyright comments commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d Author: Nivesh Rajbhandari Date: Tue Feb 7 13:30:08 2012 -0800 Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines. Signed-off-by: Nivesh Rajbhandari commit 8ad767b61460984a4031ba630f76ac8247a61857 Author: Nivesh Rajbhandari Date: Tue Feb 7 11:42:10 2012 -0800 Fixed PI to support WebGL materials. Signed-off-by: Nivesh Rajbhandari commit 486842239c71e7964f38a09aacda4970f2a82e1a Author: Nivesh Rajbhandari Date: Tue Feb 7 10:58:14 2012 -0800 Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari commit 789eaf5a92c903f27462c69a8890fbec695ab14e Merge: 92ae17b 8950b34 Author: Nivesh Rajbhandari Date: Tue Feb 7 09:36:29 2012 -0800 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a Author: Nivesh Rajbhandari Date: Mon Feb 6 16:35:12 2012 -0800 Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa). Signed-off-by: Nivesh Rajbhandari commit 75486be2839494c9b54833aff8f5eef3f9542151 Author: Nivesh Rajbhandari Date: Mon Feb 6 15:41:48 2012 -0800 Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data. Signed-off-by: Nivesh Rajbhandari commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e Author: Nivesh Rajbhandari Date: Mon Feb 6 14:03:40 2012 -0800 Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI. Signed-off-by: Nivesh Rajbhandari commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981 Author: Nivesh Rajbhandari Date: Mon Feb 6 13:35:30 2012 -0800 Allow users to switch between 2d and webGL mode. Note that this doesn't currently work. Signed-off-by: Nivesh Rajbhandari commit 486d9a31a85dd833a1c798049a00403756703034 Author: Nivesh Rajbhandari Date: Mon Feb 6 11:35:49 2012 -0800 Support use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Jonathan Duran --- js/tools/LineTool.js | 8 ++++---- js/tools/OvalTool.js | 15 +++++++-------- js/tools/RectTool.js | 15 +++++++-------- 3 files changed, 18 insertions(+), 20 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 17157f23..99c374a7 100644 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -203,10 +203,10 @@ exports.LineTool = Montage.create(ShapeTool, { // for default stroke and fill/no materials var strokeMaterial = null; - var strokeIndex = parseInt(this.options.strokeMaterial); - if(strokeIndex > 0) + var strokeM = this.options.strokeMaterial; + if(strokeM) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); } var world = this.getGLWorld(canvas, this.options.use3D); @@ -232,12 +232,12 @@ exports.LineTool = Montage.create(ShapeTool, { } canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; - canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex; canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = line; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 2fa5411b..14655312 100644 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -43,16 +43,16 @@ exports.OvalTool = Montage.create(ShapeTool, { var strokeMaterial = null; var fillMaterial = null; - var strokeIndex = parseInt(this.options.strokeMaterial); - if(strokeIndex > 0) + var strokeM = this.options.strokeMaterial; + if(strokeM) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); } - var fillIndex = parseInt(this.options.fillMaterial); - if(fillIndex > 0) + var fillM = this.options.fillMaterial; + if(fillM) { - fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1)); + fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); } @@ -88,13 +88,12 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex; - canvas.elementModel.shapeModel.fillMaterialIndex = fillIndex; canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = oval; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 94d80b53..31ac7faa 100644 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -62,16 +62,16 @@ exports.RectTool = Montage.create(ShapeTool, { var strokeMaterial = null; var fillMaterial = null; - var strokeIndex = parseInt(this.options.strokeMaterial); - if(strokeIndex > 0) + var strokeM = this.options.strokeMaterial; + if(strokeM) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); } - var fillIndex = parseInt(this.options.fillMaterial); - if(fillIndex > 0) + var fillM = this.options.fillMaterial; + if(fillM) { - fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1)); + fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); } var world = this.getGLWorld(canvas, this.options.use3D); @@ -110,13 +110,12 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeMaterialIndex = strokeIndex; - canvas.elementModel.shapeModel.fillMaterialIndex = fillIndex; canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; canvas.elementModel.shapeModel.GLGeomObj = rect; + canvas.elementModel.shapeModel.useWebGl = this.options.use3D; } else { -- cgit v1.2.3 From c9f146118b7b58d0bfdaf4f06f12adba61573075 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 13:10:21 -0800 Subject: Squashed commit of the following: commit 10cdeb52403f16d5d4be43a516e8cdfbc866a2a2 Merge: 24f9717 9a404b8 Author: Valerio Virgillito Date: Wed Feb 8 11:33:42 2012 -0800 Merge pull request #21 from mencio/pi_bugs Pi bugs fixes for 964, 616, 1084 commit 24f9717f2714f0497382436c4602736283247cf1 Merge: 763910b 9154cff Author: Valerio Virgillito Date: Wed Feb 8 11:33:22 2012 -0800 Merge pull request #22 from ericguzman/StylesControllerUpdates Styles Controller - Added array of dirty stylesheets and event dispatch ... commit 9154cff2ce10aae54d9a7bd37a9d8b5578b0e297 Author: Eric Guzman Date: Wed Feb 8 10:39:17 2012 -0800 Styles Controller - Added array of dirty stylesheets and event dispatch when a sheet is dirtied. commit 763910b9d074137eb7dee80447b89407ce5750c9 Merge: e557937 329a859 Author: Valerio Virgillito Date: Wed Feb 8 10:18:36 2012 -0800 Merge pull request #20 from mqg734/ToolFixes Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs: commit e5579374ff39b80b8c0c69faba37f6f581758fe0 Author: Valerio Virgillito Date: Tue Feb 7 13:28:17 2012 -0800 updated montage v.0.6 to the latest changes. Signed-off-by: Valerio Virgillito commit 9a404b8a717d0aac0eabb828a4d3cdc8c9c3eed8 Author: Valerio Virgillito Date: Tue Feb 7 17:42:04 2012 -0800 IKNINJA - 1084: Fixing the custom tag. Signed-off-by: Valerio Virgillito commit a930295dfebd7fe7b4db5324b2048e6e7366c6d8 Author: Valerio Virgillito Date: Tue Feb 7 16:12:23 2012 -0800 IKNINJA-616 - Drag and drop images fix for the PI and source Signed-off-by: Valerio Virgillito commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d Author: Nivesh Rajbhandari Date: Tue Feb 7 15:25:11 2012 -0800 Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options. Signed-off-by: Nivesh Rajbhandari commit 65145cebdf4cde2767cbd0489ddcea5863c2ca9e Author: Valerio Virgillito Date: Tue Feb 7 14:53:46 2012 -0800 IKNINJA-964 - Fixed inconsistent element name in PI/CSS panel. Signed-off-by: Valerio Virgillito commit 668510892537eaaeb2e11520831d87b44b2489b7 Merge: 8950b34 c066fb4 Author: Valerio Virgillito Date: Tue Feb 7 14:19:22 2012 -0800 Merge pull request #19 from ericguzman/TreeComponents Tree Components - Added copyright comments commit aec849d91e4b697d496b9ede28b5d89cf2283781 Author: Nivesh Rajbhandari Date: Tue Feb 7 14:18:13 2012 -0800 id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number. Signed-off-by: Nivesh Rajbhandari commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f Author: Nivesh Rajbhandari Date: Tue Feb 7 13:52:54 2012 -0800 Fixing some typos and undeclared variables in GLRectangle and ShapesController. Signed-off-by: Nivesh Rajbhandari commit c066fb41ebee85bacf9b2155366b16831af41d76 Author: Eric Guzman Date: Tue Feb 7 13:46:05 2012 -0800 Tree Components - Added copyright comments commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d Author: Nivesh Rajbhandari Date: Tue Feb 7 13:30:08 2012 -0800 Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines. Signed-off-by: Nivesh Rajbhandari commit 8ad767b61460984a4031ba630f76ac8247a61857 Author: Nivesh Rajbhandari Date: Tue Feb 7 11:42:10 2012 -0800 Fixed PI to support WebGL materials. Signed-off-by: Nivesh Rajbhandari commit 486842239c71e7964f38a09aacda4970f2a82e1a Author: Nivesh Rajbhandari Date: Tue Feb 7 10:58:14 2012 -0800 Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari commit 789eaf5a92c903f27462c69a8890fbec695ab14e Merge: 92ae17b 8950b34 Author: Nivesh Rajbhandari Date: Tue Feb 7 09:36:29 2012 -0800 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a Author: Nivesh Rajbhandari Date: Mon Feb 6 16:35:12 2012 -0800 Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa). Signed-off-by: Nivesh Rajbhandari commit 75486be2839494c9b54833aff8f5eef3f9542151 Author: Nivesh Rajbhandari Date: Mon Feb 6 15:41:48 2012 -0800 Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data. Signed-off-by: Nivesh Rajbhandari commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e Author: Nivesh Rajbhandari Date: Mon Feb 6 14:03:40 2012 -0800 Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI. Signed-off-by: Nivesh Rajbhandari commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981 Author: Nivesh Rajbhandari Date: Mon Feb 6 13:35:30 2012 -0800 Allow users to switch between 2d and webGL mode. Note that this doesn't currently work. Signed-off-by: Nivesh Rajbhandari commit 486d9a31a85dd833a1c798049a00403756703034 Author: Nivesh Rajbhandari Date: Mon Feb 6 11:35:49 2012 -0800 Support use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Jonathan Duran --- js/tools/TagTool.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index c527edf3..e3f49bbe 100644 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -158,19 +158,17 @@ exports.TagTool = Montage.create(DrawingTool, { selectedTag = this.options.selectedElement; if(selectedTag === "divTool") { - newTag = NJUtils.makeNJElement("div", "Div", "block"); + newTag = NJUtils.makeNJElement("div", "div", "block"); } else if(selectedTag === "imageTool") { - newTag = NJUtils.makeNJElement("image", "Image", "image"); + newTag = NJUtils.makeNJElement("image", "image", "image"); } else if(selectedTag === "videoTool") { - newTag = NJUtils.makeNJElement("video", "Video", "video", { + newTag = NJUtils.makeNJElement("video", "video", "video", { innerHTML: "Your browser does not support the VIDEO element." }); } else if(selectedTag === "canvasTool") { - newTag = NJUtils.makeNJElement("canvas", "Canvas", "canvas"); + newTag = NJUtils.makeNJElement("canvas", "canvas", "canvas"); } else if(selectedTag === "customTool") { - newTag = document.createElement(this.options.customName.value); - newTag.Ninja = {}; - newTag.Ninja.selectionType = this.options.customName.value; + 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") { -- cgit v1.2.3 From 2092acf520e3f346f15e42c76c2f616e7d094c97 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 9 Feb 2012 12:10:37 -0800 Subject: Squashed commit of the following: commit ce81a3f4387d80f9ac406e73b843fb5dbe9cf432 Merge: e78f431 fba39db Author: Valerio Virgillito Date: Thu Feb 9 11:57:35 2012 -0800 Merge pull request #26 from pushkarjoshi/pentool Pentool commit e78f4312c194d9e8188075cf1fe87e4be22b24e4 Author: Valerio Virgillito Date: Thu Feb 9 11:56:40 2012 -0800 adding oneway to the 3d bindings to fix a bug where the stage was getting selected. Signed-off-by: Valerio Virgillito commit fba39dbb3bd64eddf6162fbf57232089e446fb06 Author: Pushkar Joshi Date: Thu Feb 9 10:50:05 2012 -0800 removing shaders commit fa700027b541ec8f37c55f4fe17da5f78759ebd5 Author: Pushkar Joshi Date: Wed Feb 8 16:06:37 2012 -0800 fill all paths even if they are open commit 18243deb66ab14a014756bfb0be1a52648c7771a Merge: 802e92e 0537f8f Author: Pushkar Joshi Date: Wed Feb 8 15:42:40 2012 -0800 Merge branch 'master' into pentool Conflicts: js/helper-classes/RDGE/GLWorld.js js/helper-classes/RDGE/MaterialsLibrary.js commit 802e92eb70b00849dadacf2c6590d27edbe65d99 Author: Pushkar Joshi Date: Wed Feb 8 15:39:47 2012 -0800 bug fixes for better anchor point rotation and removing snapping on hover and mouse down commit 9b6b228524f14bf65ba60aaf3d0993c8ec5bff2d Author: Pushkar Joshi Date: Tue Feb 7 15:22:11 2012 -0800 some minor bug fixes and code cleanup commit 4bbe42e6d01fd0f81d13357a75b40eae9925dda3 Merge: e7aa17a 8950b34 Author: Pushkar Joshi Date: Tue Feb 7 07:21:27 2012 -0800 Merge branch 'master' into pentool commit e7aa17a9b472640355e95c54841399f6203050d4 Author: Pushkar Joshi Date: Tue Feb 7 07:20:28 2012 -0800 don't use colorToHex function because it only works for 3D color (needs a fix to colorToHex) commit acc500d1f1c76f4e7c93ae1cfea8d925ca95e7b9 Merge: 4d4de64 4222db9 Author: Pushkar Joshi Date: Thu Feb 2 11:28:45 2012 -0800 Merge branch 'working' of c:/Code/github/emueller/ninja-internal/ into pentool commit 4d4de64472603426a73b26cc98ba8206190949b8 Merge: 0e87c02 5233508 Author: Pushkar Joshi Date: Thu Feb 2 11:19:30 2012 -0800 Merge branch 'master' into pentool commit 4222db97e353fb65fab787ba5927d16d9fa4e1f7 Author: hwc487 Date: Wed Feb 1 16:18:26 2012 -0800 Removed a console log and set the Plasma material to animating. commit 30bc466a0ac80f8303e223c19704b90457293cdc Author: hwc487 Date: Wed Feb 1 15:57:20 2012 -0800 Fixed plane orientations for view orientations other than front. commit 11db5a63bda57c630eaf1d8baded9b79ca7ac1f2 Author: hwc487 Date: Wed Feb 1 15:11:21 2012 -0800 listen for the appMouseUp event in the Pan tool commit 823945a2bcb42bbf9c6a1cd0ef723b8f415e557f Author: hwc487 Date: Wed Feb 1 14:39:46 2012 -0800 factor in the zoom factor when drawing the stage compass. commit 0e87c02e74e08c7bf156373b0d2459563e17ecd6 Author: Pushkar Joshi Date: Wed Feb 1 14:38:15 2012 -0800 make GLAnchorPoint functions as part of its prototype commit 5a288b9d3f8e6690149978d9d0e7bea98cc81312 Author: hwc487 Date: Wed Feb 1 14:09:24 2012 -0800 Fix for a marquee zoom bug. commit 715f95cacead0025a57823e4cefa22e618f15df0 Author: hwc487 Date: Wed Feb 1 14:00:06 2012 -0800 mouse wheel for zoom tool commit 62d38a080b2918a0284c854e9bf882bfeeea1e0b Author: Pushkar Joshi Date: Wed Feb 1 13:21:11 2012 -0800 avoid overriding GlGeomObj translate method commit 799369e153baf92eb10f26e91a1ab664900da8ed Merge: b2ce8b8 c0f4374 Author: hwc487 Date: Wed Feb 1 13:06:17 2012 -0800 Merge branch 'ToolFixes' of github.com:mqg734/ninja-internal into working commit b2ce8b819cc85a558d862c04965b7e65a6ce8640 Author: hwc487 Date: Wed Feb 1 13:05:32 2012 -0800 changes to allow minimal rendering ofnon-animated materials. commit ada488781ff815a827e7f5903f2c55773e3be0f3 Author: Pushkar Joshi Date: Wed Feb 1 12:16:11 2012 -0800 when selecting anchor points, first check if the selected anchor position is close enough commit 107f79288ed87a282dd52075640297cc02bdf318 Author: Pushkar Joshi Date: Wed Feb 1 12:00:44 2012 -0800 performance improvement: add most of the GLSubpath functions to its prototype commit c00d5d3072e487be200559f692ce4399222d5fa5 Author: Pushkar Joshi Date: Tue Jan 31 14:25:05 2012 -0800 handle the case of proper redraw when the alt key is held down even after mouse up commit c006b3e75d5e23da63687a04cd30bf56a3a8a80d Merge: f0e3fa6 1d8af9f Author: Pushkar Joshi Date: Tue Jan 31 12:07:43 2012 -0800 Merge branch 'master' into pentool commit f0e3fa691b3c042c9fc49a7a0cde8ddf8100c195 Author: Pushkar Joshi Date: Tue Jan 31 12:05:15 2012 -0800 display the anchor point to be selected on mouse hover commit aa1b4b78d9e1b9cc15529dbf7196b7ac8a88e260 Merge: 0b8d8b2 6066b9b Author: hwc487 Date: Tue Jan 31 10:46:48 2012 -0800 Merge branch 'ToolFixes' of github.com:mqg734/ninja-internal into working Conflicts: js/stage/stage.reel/stage.js commit 0b8d8b2eb595b64ef53440b949f3c5ec891daf8a Merge: 8e43a46 e4837ed Author: hwc487 Date: Tue Jan 31 09:22:56 2012 -0800 Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into working commit 8e43a46e3d79323fe06dc7771bc611a2c3c85c5c Author: hwc487 Date: Mon Jan 30 16:15:12 2012 -0800 Renderer startup handling of non-animated materials. Changed zoom from the document bar to keep the location center of the viewable portion of the document fixed. commit c41d2c2b749b67921f243fb7594ce0cdb1ccce36 Merge: 86a801c f129a23 Author: hwc487 Date: Mon Jan 30 16:09:00 2012 -0800 Merge branch 'staging' of github.com:Motorola-Mobility/ninja-internal into working commit 972e0ce4df7b332601ad006ca8b7dd9e189a59ef Author: Pushkar Joshi Date: Mon Jan 30 14:38:48 2012 -0800 do the fill before the stroke for the path, so the stroke width renders acc. to user specification commit da7ad067b146200847b543faf288844221dff928 Author: Pushkar Joshi Date: Mon Jan 30 14:30:31 2012 -0800 missed a couple of pen tool property files on last checkin commit 76abbaafb0d90bb1dc9c63a5a5a78ab95bb00420 Author: Pushkar Joshi Date: Mon Jan 30 13:56:33 2012 -0800 Merge pushkar branch on gerritt with github version commit 86a801c057fc3b0580d6130be5740c2ee503444f Author: hwc487 Date: Fri Jan 27 15:52:36 2012 -0800 updated from old repo Signed-off-by: Jonathan Duran --- js/tools/PenTool.js | 554 +++++++++++++++------------------------------------- 1 file changed, 160 insertions(+), 394 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 78344d18..9a69b53d 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var ShapeTool = require("js/tools/ShapeTool").ShapeTool; +var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; var Montage = require("montage/core/core").Montage; @@ -12,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; var ElementMediator = require("js/mediators/element-mediator").ElementMediator; var TagTool = require("js/tools/TagTool").TagTool; var ElementController = require("js/controllers/elements/element-controller").ElementController; +var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; + +//todo remove this global var +var g_DoPenToolMouseMove = true; exports.PenTool = Montage.create(ShapeTool, { @@ -32,14 +37,10 @@ exports.PenTool = Montage.create(ShapeTool, { _currentY: { value: 0, writable: true }, //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited - _subpaths: { value: [], writable: true }, _selectedSubpath: { value: null, writable: true }, _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath - //whether or not to display the guides for debugging - _showGuides: { value: true, writable: true }, - //whether the user has held down the Alt key _isAltDown: { value: false, writable: true }, @@ -64,6 +65,9 @@ exports.PenTool = Montage.create(ShapeTool, { //the plane matrix for the first click...so the entire path is on the same plane _penPlaneMat: { value: null, writable: true }, + //index of the anchor point that the user has hovered over + _hoveredAnchorIndex: {value: null, writable: true}, + //constants used for picking points --- NOTE: these should be user-settable parameters _PICK_POINT_RADIUS: { value: 10, writable: false }, _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, @@ -85,39 +89,29 @@ exports.PenTool = Montage.create(ShapeTool, { ENTRY_SELECT_PATH: { value: 2, writable: false}, _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, - // ******** Logic for selection ******* - // (update if you change functionality!) - // NOTE: this is out of date...needs to be updated - // - // Start by setting edit mode to EDIT_NONE - // - // DOUBLE_CLICK (Left mouse button only): - // - // - // SINGLE_CLICK (Left mouse button only): - // If LeftClick selects an anchor point - // append EDIT_ANCHOR mode - // If LeftClick selects a previous point of selected anchor - // append EDIT_PREV mode - // If LeftClick selects a next point of selected anchor - // append EDIT_NEXT mode - // - - // ********* Logic for editing ******* - // (update if you change functionality!) - // NOTE: this is out of date...needs to be updated - // - // Start by computing mouse disp - // - // If EDIT_PREV_NEXT mode - // add disp to next and mirror it to prev - // ELSE - // If EDIT_ANCHOR (or _PREV, _NEXT) - // map displacement to anchor (similarly to prev and next) - // - // + _getUnsnappedPosition: { + value: function(x,y){ + var elemSnap = snapManager.elementSnapEnabled(); + var gridSnap = snapManager.gridSnapEnabled(); + var alignSnap = snapManager.snapAlignEnabled(); + + snapManager.enableElementSnap(false); + snapManager.enableGridSnap(false); + snapManager.enableSnapAlign(false); + + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + + snapManager.enableElementSnap(elemSnap); + snapManager.enableGridSnap(gridSnap); + snapManager.enableSnapAlign(alignSnap); + + return unsnappedpos; + } + }, + ShowToolProperties: { value: function () { this._penView = PenView.create(); @@ -137,21 +131,18 @@ exports.PenTool = Montage.create(ShapeTool, { //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2) return; } - //BEGIN ShapeTool code if (this._canDraw) { this._isDrawing = true; } - //this._targetedCanvas = stageManagerModule.stageManager.GetObjectFromPoint(event.layerX, event.layerY, this._canOperateOnStage); this.startDraw(event); - //END ShapeTool code //assume we are not starting a new path as we will set this to true if we create a new GLSubpath() this._isNewPath = false; //add an anchor point by computing position of mouse down - var mouseDownPos = this.getMouseDownPos(); + var mouseDownPos = this._getUnsnappedPosition(event.pageX, event.pageY); //this.getMouseDownPos(); if (mouseDownPos) { //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath if (this._selectedSubpath === null) { @@ -160,19 +151,10 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._entryEditMode === this.ENTRY_SELECT_PATH){ //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath this._entryEditMode = this.ENTRY_SELECT_NONE; - } - } else if (this._selectedSubpath.getIsClosed() && this._entryEditMode !== this.ENTRY_SELECT_PATH) { - //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path regardless of where we clicked - if (this._makeMultipleSubpaths) { - this._subpaths.push(this._selectedSubpath); - this._penCanvas = null; - this._penPlaneMat = null; - this._snapTarget = null; - this._selectedSubpath = new GLSubpath(); - this._isNewPath = true; + console.log("Warning...PenTool handleMouseDown: changing from SELECT_PATH to SELECT_NONE"); } } - + var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); // ************* Add/Select Anchor Point ************* //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else @@ -187,6 +169,8 @@ exports.PenTool = Montage.create(ShapeTool, { //we have picked the endpoint of this path...reverse the path if necessary if (selAnchorIndex ===0){ //reverse this path + this._selectedSubpath.reversePath(); + selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); } this._isPickedEndPointInSelectPathMode = true; } @@ -219,8 +203,19 @@ exports.PenTool = Montage.create(ShapeTool, { } } } + + //the clicked location is not close to the path or any anchor point if (whichPoint === this._selectedSubpath.SEL_NONE) { if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { + //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path if we clicked far away from selected path + if (this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) { + this._penCanvas = null; + this._penPlaneMat = null; + this._snapTarget = null; + this._selectedSubpath = new GLSubpath(); + this._isNewPath = true; + } + //add an anchor point to end of the subpath, and make it the selected anchor point if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { this._selectedSubpath.addAnchor(new GLAnchorPoint()); @@ -234,20 +229,32 @@ exports.PenTool = Montage.create(ShapeTool, { } } else { if (this._isPickedEndPointInSelectPathMode){ - + //TODO clean up this code...very similar to the code block above + if (!this._selectedSubpath.getIsClosed()) { + this._selectedSubpath.addAnchor(new GLAnchorPoint()); + var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); + + //set the mode so that dragging will update the next and previous locations + this._editMode = this.EDIT_PREV_NEXT; + } } - //if the edit mode was ENTRY_SELECT_PATH and no anchor point was selected, so we should de-select this path and revert to ENTRY_SELECT_NONE - //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path } } //if (whichPoint === this._selectedSubpath.SEL_NONE) (i.e. no anchor point was selected) //display the curve overlay this.DrawSubpathAnchors(this._selectedSubpath); - this.DrawSubpathsSVG(); + this.DrawSubpathSVG(this._selectedSubpath); } //if (mouseDownPos) { i.e. if mouse down yielded a valid position - NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("enableStageMove"); + } + + this._hoveredAnchorIndex = -1; } //value: function (event) { }, //HandleLeftButtonDown @@ -264,18 +271,14 @@ exports.PenTool = Montage.create(ShapeTool, { return; } - if (this._isDrawing) { - if (!this._isAltDown) - this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to - else{ - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); - } - + //clear the canvas before we draw anything else + this.application.ninja.stage.clearDrawingCanvas(); + this._hoveredAnchorIndex = -1; - // ******* begin new code ********* - //get the current mouse position from the drawing-tool knowing that the mouse up position is set to current mouse pos in this.doDraw above - var currMousePos = this.getMouseUpPos(); + if (this._isDrawing) { + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + //go through the drawing toolbase to get the position of the mouse + var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { //var scoord = this._getScreenCoord(this._mouseUpHitRec); var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); @@ -330,32 +333,39 @@ exports.PenTool = Montage.create(ShapeTool, { //make the subpath dirty so it will get re-drawn this._selectedSubpath.makeDirty(); - //clear the canvas before we draw anything else - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); + this.DrawSubpathSVG(this._selectedSubpath); } - // ********* end new code *********** - } else { - this.doSnap(event); - this.DrawHandles(); + } else { //if mouse is not down: + //this.doSnap(event); + //this.DrawHandles(); + + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); + if (currMousePos && this._selectedSubpath ){ + var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); + if (selAnchor >=0) { + this._hoveredAnchorIndex = selAnchor; + } + } } //else of if (this._isDrawing) { - this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + if (this._selectedSubpath){ + this.DrawSubpathAnchors(this._selectedSubpath); + } - this.DrawSubpathsSVG(); }//value: function(event) - }, + },//HandleMouseMove - //TODO Optimize! This function is probably no longer needed + TranslateSelectedSubpathPerPenCanvas:{ value: function() { if (this._penCanvas!==null) { //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure - var penCanvasLeft = parseFloat(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); - var penCanvasTop = parseFloat(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); - var penCanvasWidth = this._penCanvas.width; - var penCanvasHeight = this._penCanvas.height; + var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); + var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); + var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; + var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; @@ -365,7 +375,7 @@ exports.PenTool = Montage.create(ShapeTool, { //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space) this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX()); this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY()); - this._selectedSubpath.translate(translateCanvasX, translateCanvasY, 0); + this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0); this._selectedSubpath.createSamples(); //updates the bounding box } } @@ -373,23 +383,30 @@ exports.PenTool = Montage.create(ShapeTool, { ShowSelectedSubpath:{ value: function() { - var bboxMin = this._selectedSubpath.getBBoxMin(); - var bboxMax = this._selectedSubpath.getBBoxMax(); - var bboxWidth = bboxMax[0] - bboxMin[0]; - var bboxHeight = bboxMax[1] - bboxMin[1]; - var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); - - this._selectedSubpath.setCanvasX(bboxMid[0]); - this._selectedSubpath.setCanvasY(bboxMid[1]); - - //call render shape with the bbox width and height - this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); + if (this._selectedSubpath){ + this._selectedSubpath.createSamples(); //dirty bit is checked here + var bboxMin = this._selectedSubpath.getBBoxMin(); + var bboxMax = this._selectedSubpath.getBBoxMax(); + var bboxWidth = bboxMax[0] - bboxMin[0]; + var bboxHeight = bboxMax[1] - bboxMin[1]; + var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); + + this._selectedSubpath.setCanvasX(bboxMid[0]); + this._selectedSubpath.setCanvasY(bboxMid[1]); + + //call render shape with the bbox width and height + this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); + } } }, HandleLeftButtonUp: { value: function (event) { - if (this._isDrawing) { + if (this._isAltDown) { + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); + } + else if (this._isDrawing) { this.doDraw(event); //needed to get the mouse up point in case there was no mouse move } @@ -429,12 +446,18 @@ exports.PenTool = Montage.create(ShapeTool, { } if (this._isNewPath) { - var strokeSize = 10.0; + var strokeSize = 1.0;//default stroke width if (this.options.strokeSize) { - strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); + strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); } this._selectedSubpath.setStrokeWidth(strokeSize); - } + if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ + this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); + } + if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ + this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); + } + } //if this is a new path being rendered this._selectedSubpath.makeDirty(); @@ -454,11 +477,16 @@ exports.PenTool = Montage.create(ShapeTool, { this._editMode = this.EDIT_NONE; this.DrawHandles(); - if (this._entryEditMode === this.ENTRY_SELECT_PATH || !this._selectedSubpath.getIsClosed()){ + //if (this._entryEditMode === this.ENTRY_SELECT_PATH || !this._selectedSubpath.getIsClosed()){ + if (this._selectedSubpath){ this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) } + //} - NJevent("disableStageMove");//stageManagerModule.stageManager.disableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("disableStageMove"); + } + this._hoveredAnchorIndex = -1; } }, @@ -478,7 +506,6 @@ exports.PenTool = Montage.create(ShapeTool, { value: function(event) { this._isEscapeDown = true; //close the current subpath and reset the pen tool - this._subpaths.push(this._selectedSubpath); this._penCanvas = null; this._penPlaneMat = null; this._snapTarget = null; @@ -511,7 +538,7 @@ exports.PenTool = Montage.create(ShapeTool, { event.preventDefault(); this.HandleSpaceKeyDown(event); } else if (event.keyCode == Keyboard.BACKSPACE || event.keyCode === Keyboard.DELETE) { - //TODO this is probably unnecessary since we handle delete and backspace via the delete delegate + //this is probably unnecessary since we handle delete and backspace via the delete delegate event.stopImmediatePropagation(); event.preventDefault(); } else if (event.keyCode === Keyboard.ESCAPE){ @@ -541,55 +568,10 @@ exports.PenTool = Montage.create(ShapeTool, { var left = Math.round(midPt[0] - 0.5 * w); var top = Math.round(midPt[1] - 0.5 * h); - - var strokeStyle = this.options.strokeStyle; - var strokeSize = 4.0; - if (this.options.strokeSize) { - strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, h); - } - var strokeColor = [1.0, 0.3, 0.3, 1.0]; - var fillColor = [1, .2, .5, 1.0]; - //var s = ColorPanelModule.ColorPanel.strokeToolbar.webGlColor; - var s = strokeColor; - if(s) - { - strokeColor = [s.r/255, s.g/255, s.b/255, s.a]; - } - - - //var f = ColorPanelModule.ColorPanel.fillToolbar.webGlColor; - var f = fillColor; - if(f) - { - fillColor = [f.r/255, f.g/255, f.b/255, f.a]; - } - - // for default stroke and fill/no materials - var strokeMaterial = null; - var fillMaterial = null; - - var strokeIndex = parseInt(this.options.strokeMaterial); - if(strokeIndex > 0) - { - strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); - } - - var fillIndex = parseInt(this.options.fillMaterial); - if(fillIndex > 0) - { - fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1)); - } - if (!canvas) { var newCanvas = null; - //if (this._useExistingCanvas()) { - // newCanvas = this._targetedCanvas; //TODO...when is this condition true? I would like to reuse canvas when continuing path or when drawing on div tool canvas - //}else { - //newCanvas = this.createCanvas(left, top, w, h,"Subpath"); - //} - newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", null, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); // create all the GL stuff @@ -599,12 +581,6 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); - subpath.setStrokeMaterial(strokeMaterial); - subpath.setFillMaterial(fillMaterial); - subpath.setFillColor(fillColor); - subpath.setStrokeColor(strokeColor); - subpath.setStrokeStyle(strokeStyle); - subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -628,8 +604,8 @@ exports.PenTool = Montage.create(ShapeTool, { var canvasArray=[canvas]; ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(can