diff --git a/core-js/src/main/javascript/Monitor.js b/core-js/src/main/javascript/Monitor.js index 346da003..0e885bbb 100644 --- a/core-js/src/main/javascript/Monitor.js +++ b/core-js/src/main/javascript/Monitor.js @@ -47,10 +47,6 @@ core.Monitor = new Class({ console.log(userMsg); }, - logFatal : function(userMsg) { - this.logMessage(userMsg, core.Monitor.MsgKind.FATAL); - }, - logMessage : function(msg, msgKind) { if (!msgKind) { msgKind = core.Monitor.MsgKind.INFO; diff --git a/mindplot/pom.xml b/mindplot/pom.xml index 38cbc270..e7094a51 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -70,7 +70,7 @@ - + @@ -184,11 +184,9 @@ files="collaboration/framework/brix/BrixCollaborativeModelFactory.js"/> - - + - 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)"); - } - - }); - var saveElem = $('saveButton'); if (saveElem) { saveElem.addEvent('click', function() { @@ -338,6 +306,71 @@ mindplot.widget.Menu = new Class({ } + this._registerEvents(designer); + }, + + _registerEvents : function(designer) { + + // Register on close events ... + this._toolbarElems.forEach(function(elem) { + elem.addEvent('show', function() { + this.clear() + }.bind(this)); + }.bind(this)); + + designer.addEvent('onblur', function() { + var topics = designer.getModel().filterSelectedTopics(); + var rels = designer.getModel().filterSelectedRelations(); + + this._toolbarElems.forEach(function(button) { + if (button.isTopicAction() && topics.length == 0) { + button.disable(); + } + + if (button.isRelAction() && rels.length == 0) { + button.disable(); + } + }) + }.bind(this)); + + designer.addEvent('onfocus', function() { + var topics = designer.getModel().filterSelectedTopics(); + var rels = designer.getModel().filterSelectedRelations(); + + this._toolbarElems.forEach(function(button) { + if (button.isTopicAction() && topics.length > 0) { + button.enable(); + } + + if (button.isRelAction() && rels.length > 0) { + button.enable(); + } + }) + }.bind(this)); + + designer.addEvent("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)"); + } + + }); + }, + + addButton:function (buttonId, topic, rel, fn) { + // Register Events ... + var button = new mindplot.widget.ToolbarItem(buttonId, function(event) { + this.clear(); + fn(event); + }.bind(this), {topicAction:topic,relAction:rel}); + this._toolbarElems.push(button); }, clear : function() { @@ -345,4 +378,4 @@ mindplot.widget.Menu = new Class({ elem.hide(); }); } -}); \ No newline at end of file +}); diff --git a/mindplot/src/main/javascript/widget/Monitor.js b/mindplot/src/main/javascript/widget/Monitor.js new file mode 100644 index 00000000..0e61c1ea --- /dev/null +++ b/mindplot/src/main/javascript/widget/Monitor.js @@ -0,0 +1,50 @@ +/* + * 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.Monitor = new Class({ + initialize : function(fadeElem, msgElem) { + $assert(fadeElem, "fadeElem can not be null"); + $assert(msgElem, "msgElem can not be null"); + this.msgQueue = []; + + this._fadeElem = fadeElem; + this._msgElem = msgElem; + }, + + _showMsg : function(msg, msgKind) { + if (msgKind == core.Monitor.MsgKind.ERROR) { + msg = "
" + msg + "
"; + } + this._msgElem.innerHTML = msg; + }, + + logError : function(userMsg) { + this.logMessage(userMsg, core.Monitor.MsgKind.ERROR); + }, + + logMessage : function(msg, msgKind) { + console.log(userMsg); + } +}); + +core.Monitor.MsgKind = { + INFO:1, + WARNING:2, + ERROR:3, + FATAL:4 +}; \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/NoteEditor.js b/mindplot/src/main/javascript/widget/NoteEditor.js index de5a83d7..6e41abd1 100644 --- a/mindplot/src/main/javascript/widget/NoteEditor.js +++ b/mindplot/src/main/javascript/widget/NoteEditor.js @@ -21,7 +21,42 @@ mindplot.widget.NoteEditor = new Class({ initialize : function(model) { $assert(model, "model can not be null"); var panel = this._buildPanel(model); - this.parent({closeButton:false,destroyOnClose:true,title:'Note'}); + this.parent({ + closeButton:false, + destroyOnClose:true, + title:'Note', + onInitialize: function(wrapper) { + wrapper.setStyle('opacity', 0); + this.fx = new Fx.Morph(wrapper, { + duration: 600, + transition: Fx.Transitions.Bounce.easeOut + }); + this.overlay = new Overlay(this.options.inject, { + duration: this.options.duration + }); + if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this)); + }, + + onBeforeOpen: function() { + this.overlay.open(); + this.fx.start({ + 'margin-top': [-200, -100], + opacity: [0, 1] + }).chain(function() { + this.fireEvent('show'); + }.bind(this)); + }, + + onBeforeClose: function() { + this.fx.start({ + 'margin-top': [-100, 0], + opacity: 0 + }).chain(function() { + this.fireEvent('hide'); + }.bind(this)); + this.overlay.close(); + } + }); this.setContent(panel); }, diff --git a/mindplot/src/main/javascript/widget/ToolbarItem.js b/mindplot/src/main/javascript/widget/ToolbarItem.js index 3cb3187e..2f10f96a 100644 --- a/mindplot/src/main/javascript/widget/ToolbarItem.js +++ b/mindplot/src/main/javascript/widget/ToolbarItem.js @@ -18,39 +18,13 @@ mindplot.widget.ToolbarItem = new Class({ Implements:[Events], - initialize : function(buttonId, model) { + initialize : function(buttonId, fn, options) { $assert(buttonId, "buttonId can not be null"); - $assert(model, "model can not be null"); - this._model = model; + $assert(fn, "fn can not be null"); this._buttonId = buttonId; - this._panelId = this._init().id; - }, + this._fn = fn; + this._options = options; - _init:function () { - // Load the context of the panel ... - var panelElem = this.buildPanel(); - var buttonElem = this.getButtonElem(); - - // Add panel content .. - panelElem.setStyle('display', 'none'); - panelElem.inject(buttonElem); - - // Add events for button click ... - this.getButtonElem().addEvent('click', function() { - // Is the panel being displayed ? - if (this.isVisible()) { - this.hide(); - } else { - this.show(); - } - - }.bind(this)); - - return panelElem; - }, - - getModel : function() { - return this._model; }, getButtonElem : function() { @@ -59,32 +33,39 @@ mindplot.widget.ToolbarItem = new Class({ return elem; }.protect(), - getPanelElem : function() { - return $(this._panelId); - }.protect(), - show : function() { - if (!this.isVisible()) { - this.fireEvent('show'); - this.getButtonElem().className = 'buttonActive'; - this.getPanelElem().setStyle('display', 'block'); - } + this.fireEvent('show'); }, hide : function() { - if (this.isVisible()) { - this.getButtonElem().className = 'button'; - this.getPanelElem().setStyle('display', 'none'); - this.fireEvent('hide'); + this.fireEvent('hide'); + }, + + isTopicAction : function() { + return this._options.topicAction; + }, + + isRelAction : function() { + return this._options.relAction; + }, + + disable : function() { + var elem = this.getButtonElem(); + if (this._enable) { + elem.removeEvent('click', this._fn); + elem.removeClass('buttonOn'); + elem.addClass('buttonOff'); + this._enable = false; } }, - isVisible : function() { - return this.getPanelElem().getStyle('display') == 'block'; - }, - - buildPanel : function() { - throw "Method must be implemented"; - }.protect() - + enable : function() { + var elem = this.getButtonElem(); + if (!this._enable) { + elem.addEvent('click', this._fn); + elem.removeClass('buttonOff'); + elem.addClass('buttonOn'); + this._enable = true; + } + } }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/ToolbarPaneItem.js b/mindplot/src/main/javascript/widget/ToolbarPaneItem.js new file mode 100644 index 00000000..0c9f7531 --- /dev/null +++ b/mindplot/src/main/javascript/widget/ToolbarPaneItem.js @@ -0,0 +1,93 @@ +/* + * 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.ToolbarPaneItem = new Class({ + Extends:mindplot.widget.ToolbarItem, + initialize : function(buttonId, model) { + $assert(buttonId, "buttonId can not be null"); + $assert(model, "model can not be null"); + var fn = function() { + // Is the panel being displayed ? + if (this.isVisible()) { + this.hide(); + } else { + this.show(); + } + + }.bind(this); + this.parent(buttonId, fn, {topicAction:true,relAction:true}); + this._model = model; + this._panelId = this._init().id; + }, + + _init:function () { + // Load the context of the panel ... + var panelElem = this.buildPanel(); + var buttonElem = this.getButtonElem(); + + // Add panel content .. + panelElem.setStyle('display', 'none'); + panelElem.inject(buttonElem); + + return panelElem; + }, + + getModel : function() { + return this._model; + }, + + getButtonElem : function() { + var elem = $(this._buttonId); + $assert(elem, "Could not find element for " + this._buttonId); + return elem; + }.protect(), + + getPanelElem : function() { + return $(this._panelId); + }.protect(), + + show : function() { + if (!this.isVisible()) { + this.parent(); + this.getButtonElem().className = 'buttonActive'; + this.getPanelElem().setStyle('display', 'block'); + } + }, + + hide : function() { + if (this.isVisible()) { + this.getButtonElem().className = 'buttonOn'; + this.getPanelElem().setStyle('display', 'none'); + this.parent(); + } + }, + + isVisible : function() { + return this.getPanelElem().getStyle('display') == 'block'; + }, + + disable: function() { + this.hide(); + this.parent(); + }, + + buildPanel : function() { + throw "Method must be implemented"; + }.protect() + +}); \ No newline at end of file diff --git a/mindplot/src/test/javascript/simpleTest.js b/mindplot/src/test/javascript/simpleTest.js index a1f48e5c..3194cdb5 100644 --- a/mindplot/src/test/javascript/simpleTest.js +++ b/mindplot/src/test/javascript/simpleTest.js @@ -59,7 +59,7 @@ TestCase("Mindplot test",{ editorProperties.width = screenWidth; editorProperties.height = screenHeight; - designer = new mindplot.MindmapDesigner(editorProperties, container); + designer = new mindplot.Designer(editorProperties, container); designer.loadFromXML(mapId, mapXml); diff --git a/wise-doc/src/main/webapp/css/editor.css b/wise-doc/src/main/webapp/css/editor.css index e7f25174..49c5f039 100644 --- a/wise-doc/src/main/webapp/css/editor.css +++ b/wise-doc/src/main/webapp/css/editor.css @@ -1,7 +1,6 @@ @import "common.css"; -/* @Todo: Fix this ...*/ -@import "widget/lightbox.css"; -@import "libraries/moodialog/css/MooDialog.css"; +@import "/mindplot/src/main/javascript/widget/lightbox.css"; +@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css"; html { overflow: hidden; @@ -159,50 +158,25 @@ div#toolbar .buttonContainer { -moz-margin-end: 7px; } -div#toolbar .button { +div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover { width: 32px; height: 36px; float: left; margin: 0 2px 2px 2px; - cursor: pointer; text-align: center; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; } -div#toolbar .button:hover { - width: 32px; - height: 36px; - float: left; +div#toolbar .buttonOn:hover, div#toolbar .buttonActive { margin: 0 1px; cursor: pointer; border: 1px solid black; border-top-color: white; border-left-color: white; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; + cursor: pointer; } -div#toolbar .buttonActive { - width: 32px; - height: 36px; - float: left; - margin: 0 1px; - cursor: pointer; - border: 1px solid black; - border-top-color: white; - border-left-color: white; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; +div#toolbar .buttonOff { + opacity: 0.4; } div#toolbar .button img { @@ -302,6 +276,11 @@ div#topicNote { z-index: 4; } +div#topicNote { + background: url(../images/topic_icon.png) no-repeat center top; + z-index: 4; +} + div#topicLink { background: url(../images/topic_link.png) no-repeat center top; z-index: 4; diff --git a/wise-doc/src/main/webapp/css/widget/colorPalette.css b/wise-doc/src/main/webapp/css/widget/colorPalette.css new file mode 100644 index 00000000..28a8e170 --- /dev/null +++ b/wise-doc/src/main/webapp/css/widget/colorPalette.css @@ -0,0 +1,74 @@ +.palette-panel { + /*background: white;*/ + /*border-color: #CCC #666 #666 #CCC;*/ + /*border-style: solid;*/ + /*border-width: 1px;*/ + cursor: default; + font: normal 13px Arial, sans-serif; + margin: 0; + outline: none; + padding: 4px 0; + z-index: 20000; + -webkit-user-select: none; +} + +.palette { + cursor: default; + outline: none; +} + +.palette-table { + border: 1px solid #666; + border-collapse: collapse; + margin: 5px; +} + +tbody { + display: table-row-group; + vertical-align: middle; + border-color: inherit; +} + +.palette-table { + border-collapse: collapse; +} + +tr { + display: table-row; + vertical-align: inherit; + border-color: inherit; +} + +.palette-cell { + border: 0; + border-right: 1px solid #666; + cursor: pointer; + height: 18px; + margin: 0; + text-align: center; + vertical-align: middle; + width: 18px; +} + +.palette-cell .palette-colorswatch { + border: none; + font-size: x-small; + height: 18px; + position: relative; + width: 18px; +} + +.palette-cell-selected .palette-colorswatch { + background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -368px 0; + border: 1px solid #333; + color: white; + font-weight: bold; + height: 16px; + width: 16px; +} + +.palette-colorswatch:hover { + border: 1px solid white; + height: 16px; + width: 16px; +} \ No newline at end of file diff --git a/wise-doc/src/main/webapp/css/widget/colorPalette.html b/wise-doc/src/main/webapp/css/widget/colorPalette.html new file mode 100644 index 00000000..9e0b3554 --- /dev/null +++ b/wise-doc/src/main/webapp/css/widget/colorPalette.html @@ -0,0 +1,398 @@ + diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html index ebcb835f..47786b29 100644 --- a/wise-doc/src/main/webapp/html/editor.html +++ b/wise-doc/src/main/webapp/html/editor.html @@ -2,21 +2,21 @@ + WiseMapping - Editor + - - - - WiseMapping - Editor + + - - + + - -