diff --git a/mindplot/pom.xml b/mindplot/pom.xml index e340a744..61dd3e21 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -170,9 +170,12 @@ - + files="collaboration/frameworks/brix/BrixFramework.js"/> + + layout/LayoutManagerFactory-min.js collaboration/CollaborationManager-min.js - collaboration/frameworks/AbstractCollaborativeFramework-min.js - collaboration/frameworks/AbstractCollaborativeModelFactory-min.js + collaboration/frameworks/AbstractCollaborativeFramework-min.js + + collaboration/frameworks/AbstractCollaborativeModelFactory-min.js + collaboration/frameworks/brix/model/NodeModel-min.js collaboration/frameworks/brix/model/Mindmap-min.js - collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js + collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js + collaboration/frameworks/brix/BrixFramework-min.js footer-min.js diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index 8f4c6065..dc53b7e5 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/mindplot/src/main/javascript/IconGroup.js @@ -169,7 +169,7 @@ mindplot.IconGroup = new Class({ this.options.nativeElem.addEventListener('dblclick', function(event) { // Avoid node creation ... if ($defined(event.stopPropagation)) { - event.stopPropagation(true); + event.stopPropagation(); } else { event.cancelBubble = true; } diff --git a/mindplot/src/main/javascript/widget/ColorPickerPanel.js b/mindplot/src/main/javascript/widget/ColorPickerPanel.js new file mode 100644 index 00000000..d55f9171 --- /dev/null +++ b/mindplot/src/main/javascript/widget/ColorPickerPanel.js @@ -0,0 +1,49 @@ +/* + * Copyright [2011] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +mindplot.widget.ColorPicker = new Class({ + Extends: mindplot.widget.ToolbarItem, + initialize : function(buttonId, model) { + this.parent(buttonId, model); + this._mooRainbow = new MooRainbow(buttonId, { + id: buttonId, + imgPath: '../images/', + startColor: [255, 255, 255], + onInit: function() { + this.fireEvent("show"); + }.bind(this), + onChange: function(color) { + this.getModel().setValue(color.hex); + }, + onComplete: function() { + this.hide(); + }.bind(this) + }); + }, + + show : function() { + this.parent(); + this._mooRainbow.show(); + }, + + hide : function() { + this.parent(); + this._mooRainbow.hide(); + + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/IconPanel.js b/mindplot/src/main/javascript/widget/IconPanel.js index 8b26f4be..810556a0 100644 --- a/mindplot/src/main/javascript/widget/IconPanel.js +++ b/mindplot/src/main/javascript/widget/IconPanel.js @@ -17,7 +17,8 @@ */ mindplot.widget.IconPanel = new Class({ - Implements:[Options,Events], + Extends:mindplot.widget.ToolbarItem, + Implements:[Options], options:{ width:253, initialWidth:0, @@ -28,17 +29,14 @@ mindplot.widget.IconPanel = new Class({ }, initialize:function(buttonId, model) { - this._buttonId = buttonId; - this._model = model; - + this.parent(buttonId, model); this.options.content = this._build(); this.init(); - }, init:function() { var panel = new Element('div'); - var buttonElem = $(this._buttonId); + var buttonElem = this.getButtonElem(); var coord = buttonElem.getCoordinates(); var top = buttonElem.getTop() + coord.height + 2; @@ -68,9 +66,7 @@ mindplot.widget.IconPanel = new Class({ }, show:function() { - this.fireEvent("show"); - $(this._buttonId).className = 'buttonActive'; - + this.parent(); if (this.options.state == 'close') { if (!$defined(this.options.panel)) { this.init(); @@ -90,25 +86,25 @@ mindplot.widget.IconPanel = new Class({ }, hide:function() { + this.parent(); if (this.options.state == 'open') { // Magic, disappear effect ;) this.options.panel.setStyles({border: '1px solid transparent', opacity:0}); this.registerOpenPanel(); this.options.state = 'close'; - $(this._buttonId).className = 'button'; } }, registerOpenPanel:function() { - $(this._buttonId).removeEvents('click'); - $(this._buttonId).addEvent('click', function() { + this.getButtonElem().removeEvents('click'); + this.getButtonElem().addEvent('click', function() { this.show(); }.bind(this)); }, registerClosePanel:function() { - $(this._buttonId).removeEvents('click'); - $(this._buttonId).addEvent('click', function() { + this.getButtonElem().removeEvents('click'); + this.getButtonElem().addEvent('click', function() { this.hide(); }.bind(this)); } , @@ -131,7 +127,7 @@ mindplot.widget.IconPanel = new Class({ img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId); img.addEvent('click', function() { - this._model.setValue(img.id); + this.getModel().setValue(img.id); }.bind(this)); count = count + 1; diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js index 99f624a5..a781685f 100644 --- a/mindplot/src/main/javascript/widget/Menu.js +++ b/mindplot/src/main/javascript/widget/Menu.js @@ -17,11 +17,25 @@ */ mindplot.widget.Menu = new Class({ - initialize : function(designer) { + initialize : function(designer, containerId) { + $assert(designer, "designer can not be null"); + $assert(containerId, "containerId can not be null"); + + // Init variables ... this._designer = designer; this._toolbarElems = []; - this._colorPickers = []; + this._containerId = containerId; + // Stop event propagation ... + $(this._containerId).addEvent('click', function(event) { + event.stopPropagation(); + }); + + $(this._containerId).addEvent('dblclick', function(event) { + event.stopPropagation(); + }); + + // Create panels ... var fontFamilyModel = { getValue: function() { var nodes = designer.getSelectedNodes(); @@ -36,11 +50,7 @@ mindplot.widget.Menu = new Class({ } }; - var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel); - fontFamilyPanel.addEvent('show', function() { - this.clear() - }.bind(this)); - this._toolbarElems.push(fontFamilyPanel); + this._toolbarElems.push(new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel)); var fontSizeModel = { getValue: function() { @@ -54,11 +64,7 @@ mindplot.widget.Menu = new Class({ designer.setFontSize2SelectedNode(value); } }; - var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel); - fontSizePanel.addEvent('show', function() { - this.clear() - }.bind(this)); - this._toolbarElems.push(fontSizePanel); + this._toolbarElems.push(new mindplot.widget.FontSizePanel("fontSize", fontSizeModel)); var topicShapeModel = { getValue: function() { @@ -72,11 +78,7 @@ mindplot.widget.Menu = new Class({ designer.setShape2SelectedNode(value); } }; - var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel); - topicShapePanel.addEvent('show', function() { - this.clear() - }.bind(this)); - this._toolbarElems.push(topicShapePanel); + this._toolbarElems.push(new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel)); // Create icon panel dialog ... var topicIconModel = { @@ -87,63 +89,51 @@ mindplot.widget.Menu = new Class({ designer.addIconType2SelectedNode(value); } }; - var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel); - iconPanel.addEvent('show', function() { - this.clear() - }.bind(this)); - this._toolbarElems.push(iconPanel); + this._toolbarElems.push(new mindplot.widget.IconPanel('topicIcon', topicIconModel)); - - var colorPickerOptions = { - id: 'topicColor', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function() { - this.clear(); - }.bind(this), - - onChange: function(color) { - designer.setBackColor2SelectedNode(color.hex); + // Topic color item ... + var topicColorModel = + { + getValue : function() { + return null; }, - onComplete: function() { - this.clear(); - }.bind(this) + setValue : function (hex) { + designer.setBackColor2SelectedNode(hex); + } }; - var topicColorPicker = new MooRainbow('topicColor', colorPickerOptions); - this._colorPickers.push(topicColorPicker); + this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel)); - var borderColorPicker = new MooRainbow('topicBorder', { - id: 'topicBorder', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function() { - this.clear(); - }.bind(this), - onChange: function(color) { - designer.setBorderColor2SelectedNode(color.hex); + // Border color item ... + var borderColorModel = + { + getValue : function() { + return null; }, - onComplete: function() { - this.clear(); - }.bind(this) + setValue : function (hex) { + designer.setBorderColor2SelectedNode(hex); + } + }; + this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel)); - }); - this._colorPickers.push(borderColorPicker); - - var fontColorPicker = new MooRainbow('fontColor', { - id: 'fontColor', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function() { - this.clear(); - }.bind(this), - onChange: function(color) { - designer.setFontColor2SelectedNode(color.hex); + // Font color item ... + var fontColorModel = + { + getValue : function() { + return null; }, - onComplete: function() { - this.clear(); - }.bind(this) - }); - this._colorPickers.push(fontColorPicker); + setValue : function (hex) { + designer.setFontColor2SelectedNode(hex); + } + }; + var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel); + this._toolbarElems.push(fontColorPicker); + + // Register on close events ... + this._toolbarElems.forEach(function(elem) { + elem.addEvent('show', function() { + this.clear() + }.bind(this)); + }.bind(this)); // Register Events ... @@ -163,21 +153,6 @@ mindplot.widget.Menu = new Class({ designer.redo(); }); - designer.addEventListener("modelUpdate", function(event) { - if (event.undoSteps > 0) { - $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)"); - } else { - $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)"); - } - - if (event.redoSteps > 0) { - $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)"); - } else { - $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)"); - } - - }); - $('addTopic').addEvent('click', function(event) { designer.createSiblingForSelectedNode(); }); @@ -209,6 +184,21 @@ mindplot.widget.Menu = new Class({ designer.setStyle2SelectedNode(); }); + designer.addEventListener("modelUpdate", function(event) { + if (event.undoSteps > 0) { + $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)"); + } else { + $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)"); + } + + if (event.redoSteps > 0) { + $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)"); + } else { + $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)"); + } + + }); + }, @@ -216,10 +206,5 @@ mindplot.widget.Menu = new Class({ this._toolbarElems.forEach(function(elem) { elem.hide(); }); - - this._colorPickers.forEach(function(elem) { - $clear(elem); - elem.hide(); - }); } }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/ToolbarItem.js b/mindplot/src/main/javascript/widget/ToolbarItem.js new file mode 100644 index 00000000..cc8f81bb --- /dev/null +++ b/mindplot/src/main/javascript/widget/ToolbarItem.js @@ -0,0 +1,49 @@ +/* + * Copyright [2011] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +mindplot.widget.ToolbarItem = new Class({ + Implements:[Events], + initialize : function(buttonId, model) { + $assert(buttonId, "buttonId can not be null"); + $assert(model, "model can not be null"); + this._model = model; + this._buttonId = buttonId; + }, + + getModel : function() { + return this._model; + }, + + getButtonElem : function() { + var elem = $(this._buttonId); + $assert(elem,"Could not find element for " + this._buttonId); + return elem; + }.protect(), + + show : function() { + this.fireEvent('show'); + + // Mark the button as active... + this.getButtonElem().className = 'buttonActive'; + }, + + hide : function() { + this.fireEvent('hide'); + this.getButtonElem().className = 'button'; + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/ToolbarPanel.js b/mindplot/src/main/javascript/widget/ToolbarPanel.js index acd437d7..6d33460f 100644 --- a/mindplot/src/main/javascript/widget/ToolbarPanel.js +++ b/mindplot/src/main/javascript/widget/ToolbarPanel.js @@ -17,24 +17,19 @@ */ mindplot.widget.ToolbarPanel = new Class({ - Implements:[Events], + Extends: mindplot.widget.ToolbarItem, initialize : function(buttonId, model) { - $assert(buttonId, "buttonId can not be null"); - $assert(model, "model can not be null"); - this._model = model; - this._buttonId = buttonId; - this._panelId = this.initPanel(buttonId); + this.parent(buttonId, model); + this._panelId = this.initPanel(); }, buildPanel : function() { throw "Method must be implemented"; }.protect(), - initPanel: function (buttonId) { - $assert(buttonId, "buttonId can not be null"); - + initPanel: function () { var panelElem = this.buildPanel(); - var buttonElem = $(buttonId); + var buttonElem = this.getButtonElem(); // Add panel content .. panelElem.setStyle('display', 'none'); @@ -45,14 +40,13 @@ mindplot.widget.ToolbarPanel = new Class({ menuElems.forEach(function(elem) { elem.addEvent('click', function(event) { var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id; - this._model.setValue(value); + this.getModel().setValue(value); this.hide(); - event.stopPropagation(); }.bind(this)); }.bind(this)); // Font family event handling .... - buttonElem.addEvent('click', function() { + buttonElem.addEvent('click', function(event) { // Is the panel being displayed ? if (this.isVisible()) { @@ -66,10 +60,10 @@ mindplot.widget.ToolbarPanel = new Class({ }, show : function() { - this.fireEvent('show'); + this.parent(); var menuElems = $(this._panelId).getElements('div'); - var value = this._model.getValue(); + var value = this.getModel().getValue(); menuElems.forEach(function(elem) { var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id; if (elemValue == value) @@ -79,13 +73,11 @@ mindplot.widget.ToolbarPanel = new Class({ }); $(this._panelId).setStyle('display', 'block'); - // Mark the button as active... - $(this._buttonId).className = 'buttonActive'; }, hide : function() { + this.parent(); $(this._panelId).setStyle('display', 'none'); - $(this._buttonId).className = 'button'; }, diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html index 073e2320..941a8f3e 100644 --- a/wise-doc/src/main/webapp/html/editor.html +++ b/wise-doc/src/main/webapp/html/editor.html @@ -5,7 +5,7 @@ - + WiseMapping - Editor diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js index e323c369..5af67d5f 100644 --- a/wise-doc/src/main/webapp/js/editor.js +++ b/wise-doc/src/main/webapp/js/editor.js @@ -187,7 +187,7 @@ function afterMindpotLibraryLoading() { designer.save(null, false) } }; - var menu = new mindplot.widget.Menu(designer); + var menu = new mindplot.widget.Menu(designer,'toolbar'); // If a node has focus, focus can be move to another node using the keys. designer._cleanScreen = function() {