diff --git a/core-js/pom.xml b/core-js/pom.xml index 136bac8f..9ecccc6f 100644 --- a/core-js/pom.xml +++ b/core-js/pom.xml @@ -40,7 +40,23 @@ maven-release-plugin 2.5 - + + com.github.searls + jasmine-maven-plugin + 1.3.1.5 + + + + test + + + + + + Functions.js + + + net.alchim31.maven yuicompressor-maven-plugin @@ -60,19 +76,9 @@ ${basedir}/target/tmp/header-min.js ${basedir}/target/tmp/Functions-min.js ${basedir}/target/tmp/Utils-min.js - - - ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/Overlay.js - - - ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.js - - - ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.Request.js - - - ${basedir}/../mindplot/src/main/javascript/libraries/moodialog/MooDialog.Fx.js - + ${basedir}/../mindplot/src/main/javascript/Options.js + ${basedir}/../mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js + ${basedir}/../mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.Request.js diff --git a/core-js/src/test/javascript/testSuite.js b/core-js/src/test/javascript/testSuite.js new file mode 100644 index 00000000..760d0aab --- /dev/null +++ b/core-js/src/test/javascript/testSuite.js @@ -0,0 +1,10 @@ +describe("Functions suite test", function() { + it("$defined() test spec", function() { + var testVariable = undefined; + expect($defined(testVariable)).toBe(false); + testVariable = 1; + expect($defined(testVariable)).toBe(true); + testVariable = null; + expect($defined(testVariable)).toBe(false); + }); +}); diff --git a/mindplot/pom.xml b/mindplot/pom.xml index 9b576f4e..647fbba6 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -124,6 +124,8 @@ ${basedir}/target/compress header.js + Events.js + Options.js ${basedir}/../web2d/target/classes/web2d.svg-min.js Messages.js TopicEventDispatcher.js @@ -139,7 +141,9 @@ ScreenManager.js Workspace.js ShrinkConnector.js + Keyboard.js DesignerKeyboard.js + Keyboard.js TopicStyle.js NodeGraph.js Topic.js @@ -250,6 +254,153 @@ true + + com.github.searls + jasmine-maven-plugin + 1.3.1.5 + + + + test + + + + + + net.sourceforge.htmlunit + htmlunit + 2.15 + + + + + libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js + lib/jquery-1.8.2.js + lib/core.js/ + lib/web2d.svg-min.js + libraries/hotkeys/jquery.hotkeys.js + libraries/underscorejs/underscore-min.js + libraries/bootstrap/js/bootstrap.js + + + header.js + Events.js + Messages.js + TopicEventDispatcher.js + model/IMindmap.js + model/Mindmap.js + model/INodeModel.js + model/NodeModel.js + model/RelationshipModel.js + ActionDispatcher.js + StandaloneActionDispatcher.js + DesignerModel.js + Designer.js + ScreenManager.js + Workspace.js + ShrinkConnector.js + Keyboard.js + DesignerKeyboard.js + Keyboard.js + TopicStyle.js + NodeGraph.js + Topic.js + CentralTopic.js + MainTopic.js + DragTopic.js + DragManager.js + DragPivot.js + ConnectionLine.js + Relationship.js + DragConnector.js + TextEditor.js + MultilineTextEditor.js + TextEditorFactory.js + util/Shape.js + util/FadeEffect.js + persistence/ModelCodeName.js + persistence/XMLSerializer_Pela.js + persistence/XMLSerializer_Tango.js + persistence/Pela2TangoMigrator.js + persistence/XMLSerializer_Beta.js + persistence/Beta2PelaMigrator.js + persistence/XMLSerializerFactory.js + PersistenceManager.js + RestPersistenceManager.js + LocalStorageManager.js + EditorProperties.js + IconGroup.js + Icon.js + LinkIcon.js + NoteIcon.js + ActionIcon.js + ImageIcon.js + model/FeatureModel.js + model/IconModel.js + model/LinkModel.js + model/NoteModel.js + Command.js + DesignerActionRunner.js + DesignerUndoManager.js + ControlPoint.js + EditorOptions.js + RelationshipPivot.js + TopicFeature.js + commands/GenericFunctionCommand.js + commands/DeleteCommand.js + commands/DragTopicCommand.js + commands/AddTopicCommand.js + commands/ChangeFeatureToTopicCommand.js + commands/RemoveFeatureFromTopicCommand.js + commands/AddFeatureToTopicCommand.js + commands/AddRelationshipCommand.js + commands/MoveControlPointCommand.js + widget/ModalDialogNotifier.js + widget/ToolbarNotifier.js + widget/ToolbarItem.js + widget/ToolbarPaneItem.js + widget/NoteEditor.js + widget/LinkEditor.js + widget/FloatingTip.js + widget/LinkIconTooltip.js + widget/KeyboardShortcutTooltip.js + widget/ColorPalettePanel.js + widget/ListToolbarPanel.js + widget/FontFamilyPanel.js + widget/FontSizePanel.js + widget/TopicShapePanel.js + widget/IconPanel.js + widget/IMenu.js + widget/Menu.js + TopicFeature.js + layout/EventBusDispatcher.js + layout/ChangeEvent.js + layout/LayoutManager.js + layout/Node.js + layout/RootedTreeSet.js + layout/ChildrenSorterStrategy.js + layout/AbstractBasicSorter.js + layout/BalancedSorter.js + layout/SymmetricSorter.js + layout/GridSorter.js + layout/OriginalLayout.js + layout/EventBus.js + MessageBundle_en.js + MessageBundle_es.js + MessageBundle_de.js + MessageBundle_fr.js + MessageBundle_pt_BR.js + MessageBundle_zh_CN.js + MessageBundle_zh_TW.js + MessageBundle_ca.js + footer.js + + + static/test/*.js + simpleTest.js + + + diff --git a/mindplot/src/main/javascript/ActionDispatcher.js b/mindplot/src/main/javascript/ActionDispatcher.js index beb9c8ec..e6aa51a3 100644 --- a/mindplot/src/main/javascript/ActionDispatcher.js +++ b/mindplot/src/main/javascript/ActionDispatcher.js @@ -18,7 +18,7 @@ //noinspection JSUnusedLocalSymbols mindplot.ActionDispatcher = new Class({ - Implements:[Events], + Implements:[mindplot.Events], initialize: function(commandContext) { $assert(commandContext, "commandContext can not be null"); }, diff --git a/mindplot/src/main/javascript/ActionIcon.js b/mindplot/src/main/javascript/ActionIcon.js index a6abfe1a..36c490d9 100644 --- a/mindplot/src/main/javascript/ActionIcon.js +++ b/mindplot/src/main/javascript/ActionIcon.js @@ -36,7 +36,7 @@ mindplot.ActionIcon = new Class({ }, addToGroup:function(group) { - group.appendChild(this.getImage()); + group.append(this.getImage()); }, setVisibility:function(visible) { diff --git a/mindplot/src/main/javascript/CentralTopic.js b/mindplot/src/main/javascript/CentralTopic.js index 89048628..110f45c0 100644 --- a/mindplot/src/main/javascript/CentralTopic.js +++ b/mindplot/src/main/javascript/CentralTopic.js @@ -61,6 +61,6 @@ mindplot.CentralTopic = new Class({ var pos = this.getPosition(); var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos); var size = this.getSize(); - return mindplot.util.Shape.calculateRectConnectionPoint(pos, size, !isAtRight); + return mindplot.util.Shape.calculateRectConnectionPoint(pos, size, !isAtRight); } }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/ConnectionLine.js b/mindplot/src/main/javascript/ConnectionLine.js index bcf9c1ac..92840c5f 100644 --- a/mindplot/src/main/javascript/ConnectionLine.js +++ b/mindplot/src/main/javascript/ConnectionLine.js @@ -145,7 +145,7 @@ mindplot.ConnectionLine = new Class({ }, addToWorkspace:function (workspace) { - workspace.appendChild(this._line2d); + workspace.append(this._line2d); this._line2d.moveToBack(); }, diff --git a/mindplot/src/main/javascript/ControlPoint.js b/mindplot/src/main/javascript/ControlPoint.js index 47e50869..a01df87e 100644 --- a/mindplot/src/main/javascript/ControlPoint.js +++ b/mindplot/src/main/javascript/ControlPoint.js @@ -29,30 +29,26 @@ mindplot.ControlPoint = new Class({ new web2d.Line({strokeColor:"#6589de", strokeWidth:1, opacity:0.3})]; this._isBinded = false; + var me = this; this._controlPointsController[0].addEvent('mousedown', function(event) { - (this._mouseDown.bind(this))(event, mindplot.ControlPoint.FROM); - }.bind(this)); + (me._mouseDown)(event, mindplot.ControlPoint.FROM, me); + }); this._controlPointsController[0].addEvent('click', function(event) { - (this._mouseClick.bind(this))(event); - }.bind(this)); + (me._mouseClick)(event); + }); this._controlPointsController[0].addEvent('dblclick', function(event) { - (this._mouseClick.bind(this))(event); - }.bind(this)); + (me._mouseClick)(event); + }); this._controlPointsController[1].addEvent('mousedown', function(event) { - (this._mouseDown.bind(this))(event, mindplot.ControlPoint.TO); - }.bind(this)); + (me._mouseDown)(event, mindplot.ControlPoint.TO, me); + }); this._controlPointsController[1].addEvent('click', function(event) { - (this._mouseClick.bind(this))(event); - }.bind(this)); + (me._mouseClick)(event); + }); this._controlPointsController[1].addEvent('dblclick', function(event) { - (this._mouseClick.bind(this))(event); - }.bind(this)); - }, - - - setSide : function(side) { - this._side = side; + (me._mouseClick)(event); + }); }, setLine : function(line) { @@ -91,22 +87,21 @@ mindplot.ControlPoint = new Class({ }, - _mouseDown : function(event, point) { + _mouseDown : function(event, point, me) { if (!this._isBinded) { this._isBinded = true; - this._mouseMoveFunction = function(event) { - (this._mouseMoveEvent.bind(this))(event, point); - }.bind(this); + (me._mouseMoveEvent)(event, point, me); + }; this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction); this._mouseUpFunction = function(event) { - (this._mouseUp.bind(this))(event, point); - }.bind(this); + (me._mouseUp)(event, point, me); + }; this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction); } event.preventDefault(); - event.stop(); + event.stopPropagation(); return false; }, @@ -143,7 +138,7 @@ mindplot.ControlPoint = new Class({ _mouseClick : function(event) { event.preventDefault(); - event.stop(); + event.stopPropagation(); return false; }, @@ -162,10 +157,10 @@ mindplot.ControlPoint = new Class({ addToWorkspace : function(workspace) { this._workspace = workspace; - workspace.appendChild(this._controlPointsController[0]); - workspace.appendChild(this._controlPointsController[1]); - workspace.appendChild(this._controlLines[0]); - workspace.appendChild(this._controlLines[1]); + workspace.append(this._controlPointsController[0]); + workspace.append(this._controlPointsController[1]); + workspace.append(this._controlLines[0]); + workspace.append(this._controlLines[1]); }, removeFromWorkspace : function(workspace) { diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 78a9fe0f..4f3ceb9a 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/mindplot/src/main/javascript/Designer.js @@ -17,10 +17,11 @@ */ mindplot.Designer = new Class({ - Extends:Events, + Extends: mindplot.Events, initialize:function (options, divElement) { $assert(options, "options must be defined"); $assert(options.zoom, "zoom must be defined"); + $assert(options.size, "size must be defined"); $assert(divElement, "divElement must be defined"); // Set up i18n location ... @@ -29,15 +30,16 @@ mindplot.Designer = new Class({ this._options = options; // Set full div elem render area ... - divElement.setStyles(options.size); + divElement.css(options.size); // Dispatcher manager ... var commandContext = new mindplot.CommandContext(this); this._actionDispatcher = new mindplot.StandaloneActionDispatcher(commandContext); + var me = this; this._actionDispatcher.addEvent("modelUpdate", function (event) { - this.fireEvent("modelUpdate", event); - }.bind(this)); + me.fireEvent("modelUpdate", event); + }); mindplot.ActionDispatcher.setInstance(this._actionDispatcher); this._model = new mindplot.DesignerModel(options); @@ -80,13 +82,12 @@ mindplot.Designer = new Class({ _registerWheelEvents:function () { var workspace = this._workspace; - var screenManager = workspace.getScreenManager(); - + var me = this; // Zoom In and Zoom Out must active event - $(document).addEvent('mousewheel', function (event) { + $(document).on('mousewheel', function (event) { // Change mousewheel handling so we let the default - //event happen if we are outside the container. - var coords = screenManager.getContainer().getCoordinates(); + // event happen if we are outside the container. -> FIXME: it still happening? + /*var coords = screenManager.getContainer().getCoordinates(); var isOutsideContainer = event.client.y < coords.top || event.client.y > coords.bottom || event.client.x < coords.left || @@ -100,8 +101,15 @@ mindplot.Designer = new Class({ this.zoomOut(1.05); } event.preventDefault(); + }*/ + if (event.deltaY > 0) { + me.zoomIn(1.05); } - }.bind(this)); + else { + me.zoomOut(1.05); + } + event.preventDefault(); + }); }, /** @@ -124,37 +132,34 @@ mindplot.Designer = new Class({ _registerMouseEvents:function () { var workspace = this._workspace; var screenManager = workspace.getScreenManager(); - + var me = this; // Initialize workspace event listeners. screenManager.addEvent('update', function () { // Topic must be set to his original state. All editors must be closed. - var topics = this.getModel().getTopics(); - topics.each(function (object) { + var topics = me.getModel().getTopics(); + _.each(topics, function(object){ object.closeEditors(); }); // Clean some selected nodes on event .. - if (this._cleanScreen) - this._cleanScreen(); - - }.bind(this)); + if (me._cleanScreen) + me._cleanScreen(); + }); // Deselect on click ... screenManager.addEvent('click', function (event) { - this.onObjectFocusEvent(null, event); - }.bind(this)); + me.onObjectFocusEvent(null, event); + }); // Create nodes on double click... screenManager.addEvent('dblclick', function (event) { if (workspace.isWorkspaceEventsEnabled()) { - var mousePos = screenManager.getWorkspaceMousePosition(event); - - var centralTopic = this.getModel().getCentralTopic(); - var model = this._createChildModel(centralTopic, mousePos); + var centralTopic = me.getModel().getCentralTopic(); + var model = me._createChildModel(centralTopic, mousePos); this._actionDispatcher.addTopics([model], [centralTopic.getId()]); } - }.bind(this)); + }); // Register mouse drag and drop event ... function noopHandler(evt) { @@ -248,13 +253,13 @@ mindplot.Designer = new Class({ // Create node graph ... var topic = mindplot.NodeGraph.create(model, {readOnly:readOnly}); this.getModel().addTopic(topic); - + var me = this; // Add Topic events ... if (!readOnly) { // If a node had gained focus, clean the rest of the nodes ... topic.addEvent('mousedown', function (event) { - this.onObjectFocusEvent(topic, event); - }.bind(this)); + me.onObjectFocusEvent(topic, event); + }); // Register node listeners ... if (topic.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { @@ -286,38 +291,38 @@ mindplot.Designer = new Class({ } topic.addEvent('ontblur', function () { - var topics = this.getModel().filterSelectedTopics(); - var rels = this.getModel().filterSelectedRelationships(); + var topics = me.getModel().filterSelectedTopics(); + var rels = me.getModel().filterSelectedRelationships(); if (topics.length == 0 || rels.length == 0) { - this.fireEvent('onblur'); + me.fireEvent('onblur'); } - }.bind(this)); + }); topic.addEvent('ontfocus', function () { - var topics = this.getModel().filterSelectedTopics(); - var rels = this.getModel().filterSelectedRelationships(); + var topics = me.getModel().filterSelectedTopics(); + var rels = me.getModel().filterSelectedRelationships(); if (topics.length == 1 || rels.length == 1) { - this.fireEvent('onfocus'); + me.fireEvent('onfocus'); } - }.bind(this)); + }); - return topic; + return topic; }, onObjectFocusEvent:function (currentObject, event) { // Close node editors .. var topics = this.getModel().getTopics(); - topics.each(function (topic) { + _.each(topics, function(topic) { topic.closeEditors(); }); var model = this.getModel(); var objects = model.getEntities(); - objects.each(function (object) { + _.each(objects, function(object) { // Disable all nodes on focus but not the current if Ctrl key isn't being pressed - if (!$defined(event) || (!event.control && !event.meta)) { + if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) { if (object.isOnFocus() && object != currentObject) { object.setOnFocus(false); } @@ -329,14 +334,14 @@ mindplot.Designer = new Class({ selectAll:function () { var model = this.getModel(); var objects = model.getEntities(); - objects.each(function (object) { + _.each(objects, function(object) { object.setOnFocus(true); }); }, deselectAll:function () { var objects = this.getModel().getEntities(); - objects.each(function (object) { + _.each(objects, function (object) { object.setOnFocus(false); }); }, @@ -629,12 +634,13 @@ mindplot.Designer = new Class({ // Init layout manager ... var size = {width:25, height:25}; var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size); + var me = this; layoutManager.addEvent('change', function (event) { var id = event.getId(); - var topic = this.getModel().findTopicById(id); + var topic = me.getModel().findTopicById(id); topic.setPosition(event.getPosition()); topic.setOrder(event.getOrder()); - }.bind(this)); + }); this._eventBussDispatcher.setLayoutManager(layoutManager); @@ -691,7 +697,7 @@ mindplot.Designer = new Class({ var nodeGraph = this._buildNodeGraph(nodeModel, this.isReadOnly()); nodeGraph.setVisibility(false); - this._workspace.appendChild(nodeGraph); + this._workspace.append(nodeGraph); for (var i = 0; i < children.length; i++) { var child = children[i]; if ($defined(child)) @@ -714,7 +720,7 @@ mindplot.Designer = new Class({ result.setVisibility(sourceTopic.isVisible() && targetTopic.isVisible()); - this._workspace.appendChild(result); + this._workspace.append(result); return result; }, @@ -752,24 +758,25 @@ mindplot.Designer = new Class({ // Build relationship line .... var result = new mindplot.Relationship(sourceTopic, targetTopic, model); + var me = this; result.addEvent('ontblur', function () { - var topics = this.getModel().filterSelectedTopics(); - var rels = this.getModel().filterSelectedRelationships(); + var topics = me.getModel().filterSelectedTopics(); + var rels = me.getModel().filterSelectedRelationships(); if (topics.length == 0 || rels.length == 0) { - this.fireEvent('onblur'); + me.fireEvent('onblur'); } - }.bind(this)); + }); result.addEvent('ontfocus', function () { - var topics = this.getModel().filterSelectedTopics(); - var rels = this.getModel().filterSelectedRelationships(); + var topics = me.getModel().filterSelectedTopics(); + var rels = me.getModel().filterSelectedRelationships(); if (topics.length == 1 || rels.length == 1) { - this.fireEvent('onfocus'); + me.fireEvent('onfocus'); } - }.bind(this)); + }); // Append it to the workspace ... dmodel.addRelationship(result); diff --git a/mindplot/src/main/javascript/DesignerKeyboard.js b/mindplot/src/main/javascript/DesignerKeyboard.js index 8929dec4..fa36b5ea 100644 --- a/mindplot/src/main/javascript/DesignerKeyboard.js +++ b/mindplot/src/main/javascript/DesignerKeyboard.js @@ -17,11 +17,10 @@ */ mindplot.DesignerKeyboard = new Class({ - Extends:Keyboard, + Extends: mindplot.Keyboard, Static:{ register:function (designer) { this._instance = new mindplot.DesignerKeyboard(designer); - this._instance.activate(); }, getInstance:function () { @@ -31,356 +30,244 @@ mindplot.DesignerKeyboard = new Class({ initialize:function (designer) { $assert(designer, "designer can not be null"); - this.parent({defaultEventType:'keydown'}); this._registerEvents(designer); }, - _registerEvents:function (designer) { // Try with the keyboard .. var model = designer.getModel(); - var keyboardEvents = { - 'backspace':function (event) { + this.addShortcut( + ['backspace'], function (event) { event.preventDefault(); event.stopPropagation(); - designer.deleteSelectedEntities(); - - }.bind(this), - - 'space':function () { + } + ); + this.addShortcut( + ['space'], function() { designer.shrinkSelectedBranch(); - }.bind(this), - - 'f2':function () { + } + ); + this.addShortcut( + ['f2'],function() { var node = model.selectedTopic(); if (node) { node.showTextEditor(); } - }.bind(this), - - 'delete':function (event) { + } + ); + this.addShortcut( + ['del'], function(event) { designer.deleteSelectedEntities(); - event.preventDefault(); event.stopPropagation(); - }.bind(this), - - 'enter':function () { + } + ); + this.addShortcut( + ['enter'], function() { designer.createSiblingForSelectedNode(); - }.bind(this), - - 'insert':function (event) { + } + ); + this.addShortcut( + ['insert'], function(event) { designer.createChildForSelectedNode(); - event.preventDefault(); event.stopPropagation(); - }.bind(this), - - 'tab':function (event) { + } + ); + this.addShortcut( + ['tab'], function(event) { designer.createChildForSelectedNode(); - event.preventDefault(); event.stopPropagation(); - }.bind(this), - - '-':function () { // "-" is a insert on several Browsers. Don't ask why ... + } + ); + this.addShortcut( + '-', function() { // "-" is a insert on several Browsers. Don't ask why ... designer.createChildForSelectedNode(); - }.bind(this), - - 'meta+enter':function (event) { + } + ); + this.addShortcut( + ['meta+enter'], function(event) { event.preventDefault(); event.stopPropagation(); designer.createChildForSelectedNode(); - - }.bind(this), - - 'ctrl+z':function (event) { + } + ); + this.addShortcut( + ['ctrl+z', 'meta+z'], function(event) { event.preventDefault(event); event.stopPropagation(); designer.undo(); - }.bind(this), - - 'meta+z':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.undo(); - - }.bind(this), - - 'ctrl+c':function (event) { + } + ); + this.addShortcut( + ['ctrl+c', 'meta+c'], function (event) { event.preventDefault(event); event.stopPropagation(); designer.copyToClipboard(); - }.bind(this), - - 'meta+c':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.copyToClipboard(); - - }.bind(this), - - 'ctrl+v':function (event) { + } + ); + this.addShortcut( + ['ctrl+v', 'meta+v'], function (event) { event.preventDefault(event); event.stopPropagation(); - designer.pasteClipboard(); - }.bind(this), - - 'meta+v':function (event) { + } + ); + this.addShortcut( + ['ctrl+shift+z', 'meta+shift+z', 'ctrl+y', 'meta+y'], function (event) { event.preventDefault(); event.stopPropagation(); - - designer.pasteClipboard(); - - }.bind(this), - - 'ctrl+z+shift':function (event) { - event.preventDefault(); - event.stopPropagation(); - designer.redo(); - }.bind(this), - - 'meta+z+shift':function (event) { + } + ); + this.addShortcut( + ['ctrl+a', 'meta+a'], function (event) { event.preventDefault(); event.stopPropagation(); - - designer.redo(); - }.bind(this), - - 'ctrl+y':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.redo(); - - }.bind(this), - - 'meta+y':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.redo(); - - }.bind(this), - - 'ctrl+a':function (event) { - event.preventDefault(); - event.stopPropagation(); - designer.selectAll(); - }, - - 'ctrl+b':function (event) { + } + ); + this.addShortcut( + ['ctrl+b', 'meta+b'], function (event) { event.preventDefault(); event.stopPropagation(); designer.changeFontWeight(); - }, - - 'meta+b':function (event) { + } + ); + this.addShortcut( + ['ctrl+s', 'meta+s'], function (event) { event.preventDefault(); event.stopPropagation(); - - designer.changeFontWeight(); - }, - - 'ctrl+s':function (event) { - event.preventDefault(); - event.stopPropagation(); - $('save').fireEvent('click'); - }, - - 'meta+s':function (event) { - event.preventDefault(); - event.stopPropagation(); - - $('save').fireEvent('click'); - }, - - 'ctrl+i':function (event) { + $(document).find('#save').trigger('click'); + } + ); + this.addShortcut( + ['ctrl+i', 'meta+i'], function (event) { event.preventDefault(); event.stopPropagation(); designer.changeFontStyle(); - }, - - 'meta+i':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.changeFontStyle(); - }, - - 'meta+shift+a':function (event) { + } + ); + this.addShortcut( + ['ctrl+shift+a', 'meta+shift+a'], function (event) { event.preventDefault(); event.stopPropagation(); designer.deselectAll(); - }, - - 'ctrl+shift+a':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.deselectAll(); - }, - - 'meta+a':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.selectAll(); - }, - - 'meta+=':function (event) { + } + ); + this.addShortcut( + ['meta+=', 'ctrl+='], function (event) { event.preventDefault(); event.stopPropagation(); designer.zoomIn(); - }, - - 'meta+-':function (event) { + } + ); + this.addShortcut( + ['meta+-', 'ctrl+-'], function (event) { event.preventDefault(); event.stopPropagation(); designer.zoomOut(); - }, - - 'ctrl+=':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.zoomIn(); - }, - - 'ctrl+-':function (event) { - event.preventDefault(); - event.stopPropagation(); - - designer.zoomOut(); - }, - - - 'right':function (event) { + } + ); + var me = this; + this.addShortcut( + 'right', function (event) { var node = model.selectedTopic(); if (node) { if (node.isCentralTopic()) { - this._goToSideChild(designer, node, 'RIGHT'); + me._goToSideChild(designer, node, 'RIGHT'); } else { if (node.getPosition().x < 0) { - this._goToParent(designer, node); + me._goToParent(designer, node); } else if (!node.areChildrenShrunken()) { - this._goToChild(designer, node); + me._goToChild(designer, node); } } } else { var centralTopic = model.getCentralTopic(); - this._goToNode(designer, centralTopic); + me._goToNode(designer, centralTopic); } event.preventDefault(); event.stopPropagation(); - }.bind(this), - - 'left':function (event) { + } + ); + this.addShortcut( + 'left', function (event) { var node = model.selectedTopic(); if (node) { if (node.isCentralTopic()) { - this._goToSideChild(designer, node, 'LEFT'); + me._goToSideChild(designer, node, 'LEFT'); } else { if (node.getPosition().x > 0) { - this._goToParent(designer, node); + me._goToParent(designer, node); } else if (!node.areChildrenShrunken()) { - this._goToChild(designer, node); + me._goToChild(designer, node); } } } else { var centralTopic = model.getCentralTopic(); - this._goToNode(designer, centralTopic); + me._goToNode(designer, centralTopic); } event.preventDefault(); event.stopPropagation(); - }.bind(this), - - 'up':function (event) { - var node = model.selectedTopic(); - if (node) { - if (!node.isCentralTopic()) { - this._goToBrother(designer, node, 'UP'); - } - } else { - var centralTopic = model.getCentralTopic(); - this._goToNode(designer, centralTopic); - } - event.preventDefault(); - event.stopPropagation(); - }.bind(this), - - 'down':function (event) { - var node = model.selectedTopic(); - if (node) { - if (!node.isCentralTopic()) { - this._goToBrother(designer, node, 'DOWN'); - } - } else { - var centralTopic = model.getCentralTopic(); - this._goToNode(designer, centralTopic); - } - event.preventDefault(); - event.stopPropagation(); - }.bind(this) - }; - this.addEvents(keyboardEvents); - - var regex = /^(?:shift|control|ctrl|alt|meta)$/; - var modifiers = ['shift', 'control', 'alt', 'meta']; - - var excludes = ['esc', 'capslock', 'tab', 'f1', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12', 'backspace', 'down', 'up', 'left', 'right', 'control']; - if (!Browser.Platform.mac) { - // This is to avoid enter on edition mode in the node when alt+tab is pressed. - excludes.push("alt"); - } - - $(document).addEvent('keydown', function (event) { - - // Convert key to mootools keyboard event format... - var keys = []; - modifiers.each(function (mod) { - if (event[mod]) keys.push(mod); - }); - if (!regex.test(event.key)) - keys.push(event.key); - var key = keys.join('+'); - - // Is the pressed key one of the already registered in the keyboard ? - var isRegistered = false; - for (var eKey in keyboardEvents) { - if (eKey == key) { - isRegistered = true; - break; - } } + ); + this.addShortcut( + 'up', function (event) { + var node = model.selectedTopic(); + if (node) { + if (!node.isCentralTopic()) { + me._goToBrother(designer, node, 'UP'); + } + } else { + var centralTopic = model.getCentralTopic(); + me._goToNode(designer, centralTopic); + } + event.preventDefault(); + event.stopPropagation(); + } + ); + this.addShortcut( + 'down', function (event) { + var node = model.selectedTopic(); + if (node) { + if (!node.isCentralTopic()) { + me._goToBrother(designer, node, 'DOWN'); + } + } else { + var centralTopic = model.getCentralTopic(); + me._goToNode(designer, centralTopic); + } + event.preventDefault(); + event.stopPropagation(); + } + ); - // If it's not registered, let's - if (!isRegistered && !excludes.contains(key) && !excludes.contains(event.key) && !event.meta && !event.control) { + $(document).on('keydown', function (event) { + + var keyCode = event.keyCode; + + if (!jQuery.hotkeys.specialKeys[keyCode] && !jQuery.hotkeys.shiftNums[keyCode] && keyCode != 91 /*win key*/) { var nodes = designer.getModel().filterSelectedTopics(); if (nodes.length > 0) { // If a modifier is press, the key selected must be ignored. - var pressKey = event.key; - if (modifiers.contains(event.key)) { - pressKey = ""; + var pressKey = String.fromCharCode(keyCode); + if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) { + return; } - nodes[0].showTextEditor(pressKey); event.stopPropagation(); } diff --git a/mindplot/src/main/javascript/DesignerModel.js b/mindplot/src/main/javascript/DesignerModel.js index e5bf93ce..fd16ae34 100644 --- a/mindplot/src/main/javascript/DesignerModel.js +++ b/mindplot/src/main/javascript/DesignerModel.js @@ -17,7 +17,7 @@ */ mindplot.DesignerModel = new Class({ - Implements:[Events], + Implements:[mindplot.Events], initialize:function (options) { this._zoom = options.zoom; this._topics = []; diff --git a/mindplot/src/main/javascript/DragConnector.js b/mindplot/src/main/javascript/DragConnector.js index 11893e1d..5f36d744 100644 --- a/mindplot/src/main/javascript/DragConnector.js +++ b/mindplot/src/main/javascript/DragConnector.js @@ -84,15 +84,16 @@ mindplot.DragConnector = new Class({ // - Horizontal proximity // - It's already connected. var currentConnection = dragTopic.getConnectedToTopic(); + var me = this; topics = topics.sort(function (a, b) { var aPos = a.getPosition(); var bPos = b.getPosition(); - var av = this._isVerticallyAligned(a.getSize(), aPos, sPos); - var bv = this._isVerticallyAligned(b.getSize(), bPos, sPos); - return this._proximityWeight(av, a, sPos, currentConnection) - this._proximityWeight(bv, b, sPos, currentConnection); + var av = me._isVerticallyAligned(a.getSize(), aPos, sPos); + var bv = me._isVerticallyAligned(b.getSize(), bPos, sPos); + return me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection); - }.bind(this)); + }); return topics; }, diff --git a/mindplot/src/main/javascript/DragManager.js b/mindplot/src/main/javascript/DragManager.js index 4a9648e6..81ed4b07 100644 --- a/mindplot/src/main/javascript/DragManager.js +++ b/mindplot/src/main/javascript/DragManager.js @@ -31,14 +31,14 @@ mindplot.DragManager = new Class({ var workspace = this._workspace; var screen = workspace.getScreenManager(); var dragManager = this; - + var me = this; var mouseDownListener = function(event) { if (workspace.isWorkspaceEventsEnabled()) { // Disable double drag... workspace.enableWorkspaceEvents(false); // Set initial position. - var layoutManager = this._eventDispatcher.getLayoutManager(); + var layoutManager = me._eventDispatcher.getLayoutManager(); var dragNode = node.createDragNode(layoutManager); // Register mouse move listener ... @@ -52,7 +52,7 @@ mindplot.DragManager = new Class({ // Change cursor. window.document.body.style.cursor = 'move'; } - }.bind(this); + }; node.addEvent('mousedown', mouseDownListener); }, @@ -70,18 +70,18 @@ mindplot.DragManager = new Class({ _buildMouseMoveListener : function(workspace, dragNode, dragManager) { var screen = workspace.getScreenManager(); - + var me = this; var result = function(event) { - if (!this._isDragInProcess) { + if (!me._isDragInProcess) { // Execute Listeners .. var startDragListener = dragManager._listeners['startdragging']; startDragListener(event, dragNode); // Add shadow node to the workspace. - workspace.appendChild(dragNode); + workspace.append(dragNode); - this._isDragInProcess = true; + me._isDragInProcess = true; } var pos = screen.getWorkspaceMousePosition(event); @@ -95,13 +95,14 @@ mindplot.DragManager = new Class({ event.preventDefault(); - }.bind(this); + }; dragManager._mouseMoveListener = result; return result; }, _buildMouseUpListener : function(workspace, node, dragNode, dragManager) { var screen = workspace.getScreenManager(); + var me = this; var result = function(event) { $assert(dragNode.isDragTopic, 'dragNode must be an DragTopic'); @@ -117,7 +118,7 @@ mindplot.DragManager = new Class({ // Change the cursor to the default. window.document.body.style.cursor = 'default'; - if (this._isDragInProcess) { + if (me._isDragInProcess) { // Execute Listeners only if the node has been moved. var endDragListener = dragManager._listeners['enddragging']; @@ -126,11 +127,11 @@ mindplot.DragManager = new Class({ // Remove drag node from the workspace. dragNode.removeFromWorkspace(workspace); - this._isDragInProcess = false; + me._isDragInProcess = false; } - }.bind(this); + }; dragManager._mouseUpListener = result; return result; }, diff --git a/mindplot/src/main/javascript/DragPivot.js b/mindplot/src/main/javascript/DragPivot.js index 9758cfc4..5bcba816 100644 --- a/mindplot/src/main/javascript/DragPivot.js +++ b/mindplot/src/main/javascript/DragPivot.js @@ -146,27 +146,27 @@ mindplot.DragPivot = new Class({ addToWorkspace : function(workspace) { var pivotRect = this._getPivotRect(); - workspace.appendChild(pivotRect); + workspace.append(pivotRect); var connectToRect = this._connectRect; - workspace.appendChild(connectToRect); + workspace.append(connectToRect); // Add a hidden straight line ... var straighLine = this._straightLine; straighLine.setVisibility(false); - workspace.appendChild(straighLine); + workspace.append(straighLine); straighLine.moveToBack(); // Add a hidden curved line ... var curvedLine = this._curvedLine; curvedLine.setVisibility(false); - workspace.appendChild(curvedLine); + workspace.append(curvedLine); curvedLine.moveToBack(); // Add a connect rect ... var connectRect = this._connectRect; connectRect.setVisibility(false); - workspace.appendChild(connectRect); + workspace.append(connectRect); connectRect.moveToBack(); }, diff --git a/mindplot/src/main/javascript/DragTopic.js b/mindplot/src/main/javascript/DragTopic.js index e39c2c97..d083aff7 100644 --- a/mindplot/src/main/javascript/DragTopic.js +++ b/mindplot/src/main/javascript/DragTopic.js @@ -67,7 +67,7 @@ mindplot.DragTopic = new Class({ }, updateFreeLayout:function (event) { - var isFreeEnabled = (event.meta && Browser.Platform.mac) || (event.control && !Browser.Platform.mac); + var isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac); if (this.isFreeLayoutOn() != isFreeEnabled) { var dragPivot = this._getDragPivot(); dragPivot.setVisibility(!isFreeEnabled); @@ -133,7 +133,7 @@ mindplot.DragTopic = new Class({ addToWorkspace:function (workspace) { if (!this._isInWorkspace) { - workspace.appendChild(this._elem2d); + workspace.append(this._elem2d); var dragPivot = this._getDragPivot(); dragPivot.addToWorkspace(workspace); this._isInWorkspace = true; @@ -201,7 +201,7 @@ mindplot.DragTopic.init = function (workspace) { $assert(workspace, "workspace can not be null"); var pivot = mindplot.DragTopic.__getDragPivot(); - workspace.appendChild(pivot); + workspace.append(pivot); }; mindplot.DragTopic.__getDragPivot = function () { diff --git a/mindplot/src/main/javascript/Events.js b/mindplot/src/main/javascript/Events.js new file mode 100644 index 00000000..e449afb5 --- /dev/null +++ b/mindplot/src/main/javascript/Events.js @@ -0,0 +1,41 @@ +mindplot.Events = new Class({ + + $events: {}, + + _removeOn: function(string){ + return string.replace(/^on([A-Z])/, function(full, first){ + return first.toLowerCase(); + }); + }, + + addEvent: function(type, fn, internal){ + type = this._removeOn(type); + + this.$events[type] = (this.$events[type] || []).include(fn); + if (internal) fn.internal = true; + return this; + }, + + fireEvent: function(type, args, delay){ + type = this._removeOn(type); + var events = this.$events[type]; + if (!events) return this; + args = Array.from(args); + _.each(events, function(fn){ + if (delay) fn.delay(delay, this, args); + else fn.apply(this, args); + }, this); + return this; + }, + + removeEvent: function(type, fn){ + type = this._removeOn(type); + var events = this.$events[type]; + if (events && !fn.internal){ + var index = events.indexOf(fn); + if (index != -1) events.splice(index, 1); + } + return this; + } + +}); diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index cfc0fa00..0a2dfef8 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/mindplot/src/main/javascript/IconGroup.js @@ -62,7 +62,7 @@ mindplot.IconGroup = new Class({ this._positionIcon(icon, this._icons.length - 1); var imageShape = icon.getImage(); - this._group.appendChild(imageShape); + this._group.append(imageShape); // Register event for the group .. if (remove) { @@ -72,7 +72,7 @@ mindplot.IconGroup = new Class({ _findIconFromModel:function (iconModel) { var result = null; - this._icons.each(function (icon) { + _.each(this._icons, function (icon) { var elModel = icon.getModel(); if (elModel.getId() == iconModel.getId()) { result = icon; @@ -101,11 +101,11 @@ mindplot.IconGroup = new Class({ this._icons.erase(icon); this._resize(this._icons.length); - + var me = this; // Add all again ... - this._icons.each(function (elem, i) { - this._positionIcon(elem, i); - }.bind(this)); + _.each(this._icons, function (elem, i) { + me._positionIcon(elem, i); + }); }, moveToFront:function () { @@ -166,16 +166,18 @@ mindplot.IconGroup.RemoveTip = new Class({ icon.remove(); }); + var me = this; + widget.addEvent('mouseover', function () { - this.show(topicId, icon); - }.bind(this)); + me.show(topicId, icon); + }); widget.addEvent('mouseout', function () { - this.hide(); - }.bind(this)); + me.hide(); + }); widget.setPosition(pos.x + 80, pos.y - 50); - this._fadeElem.appendChild(widget); + this._fadeElem.append(widget); // Setup current element ... this._activeIcon = icon; @@ -197,17 +199,15 @@ mindplot.IconGroup.RemoveTip = new Class({ clearTimeout(this._closeTimeoutId) } + var me = this; if (this._activeIcon) { var widget = this._widget; var close = function () { - - this._activeIcon = null; - this._fadeElem.removeChild(widget); - this._widget = null; - - this._closeTimeoutId = null; - - }.bind(this); + me._activeIcon = null; + me._fadeElem.removeChild(widget); + me._widget = null; + me._closeTimeoutId = null; + }; if (!$defined(delay) || delay == 0) { close(); @@ -236,7 +236,7 @@ mindplot.IconGroup.RemoveTip = new Class({ stroke:'0', fillColor:'black' }); - result.appendChild(outerRect); + result.append(outerRect); outerRect.setCursor('pointer'); var innerRect = new web2d.Rect(0, { @@ -247,17 +247,17 @@ mindplot.IconGroup.RemoveTip = new Class({ stroke:'1 solid white', fillColor:'gray' }); - result.appendChild(innerRect); + result.append(innerRect); var line = new web2d.Line({stroke:'1 solid white'}); line.setFrom(1, 1); line.setTo(9, 9); - result.appendChild(line); + result.append(line); var line2 = new web2d.Line({stroke:'1 solid white'}); line2.setFrom(1, 9); line2.setTo(9, 1); - result.appendChild(line2); + result.append(line2); // Some events ... result.addEvent('mouseover', function () { @@ -273,14 +273,16 @@ mindplot.IconGroup.RemoveTip = new Class({ decorate:function (topicId, icon) { + var me = this; + if (!icon.__remove) { icon.addEvent('mouseover', function () { - this.show(topicId, icon); - }.bind(this)); + me.show(topicId, icon); + }); icon.addEvent('mouseout', function () { - this.hide(); - }.bind(this)); + me.hide(); + }); icon.__remove = true; } } diff --git a/mindplot/src/main/javascript/ImageIcon.js b/mindplot/src/main/javascript/ImageIcon.js index f217520d..a31accb9 100644 --- a/mindplot/src/main/javascript/ImageIcon.js +++ b/mindplot/src/main/javascript/ImageIcon.js @@ -34,16 +34,17 @@ mindplot.ImageIcon = new Class({ //Icon var image = this.getImage(); + var me = this; image.addEvent('click', function () { var iconType = iconModel.getIconType(); - var newIconType = this._getNextFamilyIconId(iconType); + var newIconType = me._getNextFamilyIconId(iconType); iconModel.setIconType(newIconType); - var imgUrl = this._getImageUrl(newIconType); - this._image.setHref(imgUrl); + var imgUrl = me._getImageUrl(newIconType); + me._image.setHref(imgUrl); - }.bind(this)); + }); this._image.setCursor('pointer'); } }, diff --git a/mindplot/src/main/javascript/Keyboard.js b/mindplot/src/main/javascript/Keyboard.js new file mode 100644 index 00000000..fc74ceb6 --- /dev/null +++ b/mindplot/src/main/javascript/Keyboard.js @@ -0,0 +1,33 @@ +/* + * Copyright [2012] [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.Keyboard = new Class({ + + initialize:function () { + }, + + addShortcut: function(shortcuts, callback) { + if (!$.isArray(shortcuts)) { + shortcuts = [shortcuts]; + } + _.each(shortcuts, function(shortcut) { + $(document).bind('keydown', shortcut, callback); + }); + } + +}); diff --git a/mindplot/src/main/javascript/LinkIcon.js b/mindplot/src/main/javascript/LinkIcon.js index 6f820744..56f93c49 100644 --- a/mindplot/src/main/javascript/LinkIcon.js +++ b/mindplot/src/main/javascript/LinkIcon.js @@ -33,16 +33,30 @@ mindplot.LinkIcon = new Class({ _registerEvents:function () { this._image.setCursor('pointer'); + this._tip = new mindplot.widget.LinkIconTooltip(this); + var me = this; if (!this._readOnly) { // Add on click event to open the editor ... this.addEvent('click', function (event) { - this._topic.showLinkEditor(); + me._tip.hide(); + me._topic.showLinkEditor(); event.stopPropagation(); - }.bind(this)); + }); + //FIXME: we shouldn't have timeout of that.. + this.addEvent("mouseleave", function(event) { + window.setTimeout(function() { + if (!$("#linkPopover:hover").length) { + me._tip.hide(); + } + event.stopPropagation(); + }, 100) + }); } - this._tip = new mindplot.widget.LinkIconTooltip(this); + $(this.getImage()._peer._native).mouseenter(function() { + me._tip.show(); + }) }, getModel:function () { diff --git a/mindplot/src/main/javascript/LocalStorageManager.js b/mindplot/src/main/javascript/LocalStorageManager.js index c2bb142f..2f04f163 100644 --- a/mindplot/src/main/javascript/LocalStorageManager.js +++ b/mindplot/src/main/javascript/LocalStorageManager.js @@ -35,25 +35,23 @@ mindplot.LocalStorageManager = new Class({ loadMapDom:function (mapId) { var xml = localStorage.getItem(mapId + "-xml"); if (xml == null || this.forceLoad) { - var xmlRequest = new Request({ - url:this.documentUrl.replace("{id}", mapId), + $.ajax({ + url: this.documentUrl.replace("{id}", mapId), headers:{"Content-Type":"text/plain","Accept":"application/xml"}, - method:'get', - async:false, - onSuccess:function (responseText) { - xml = responseText; + type:'get', + dataType: "text", + async: false, + success:function (response) { + xml = response; } }); - xmlRequest.send(); - // If I could not load it from a file, hard code one. if (xml == null) { throw new Error("Map could not be loaded"); } } - var parser = new DOMParser(); - return parser.parseFromString(xml, "text/xml"); + return jQuery.parseXML(xml); }, unlockMap:function (mindmap) { diff --git a/mindplot/src/main/javascript/MainTopic.js b/mindplot/src/main/javascript/MainTopic.js index d4174b7f..643b1ba6 100644 --- a/mindplot/src/main/javascript/MainTopic.js +++ b/mindplot/src/main/javascript/MainTopic.js @@ -42,7 +42,7 @@ mindplot.MainTopic = new Class({ // Create group ... var groupAttributes = {width:100, height:100, coordSizeWidth:100, coordSizeHeight:100}; var group = new web2d.Group(groupAttributes); - group.appendChild(innerShape); + group.append(innerShape); // Add Text ... if (this.getShapeType() != mindplot.model.TopicShape.IMAGE) { @@ -50,7 +50,7 @@ mindplot.MainTopic = new Class({ var text = this.getText(); textShape.setText(text); textShape.setOpacity(0.5); - group.appendChild(textShape); + group.append(textShape); } return group; }, diff --git a/mindplot/src/main/javascript/MultilineTextEditor.js b/mindplot/src/main/javascript/MultilineTextEditor.js index 5279a71f..c36efdac 100644 --- a/mindplot/src/main/javascript/MultilineTextEditor.js +++ b/mindplot/src/main/javascript/MultilineTextEditor.js @@ -17,7 +17,7 @@ */ mindplot.MultilineTextEditor = new Class({ - Extends:Events, + Extends: mindplot.Events, initialize:function () { this._topic = null; this._timeoutId = -1; @@ -25,47 +25,42 @@ mindplot.MultilineTextEditor = new Class({ _buildEditor:function () { - var result = new Element('div'); - result.setStyles({ - position:"absolute", + var result = $('
') + .attr('id', 'textContainer') + .css({ display:"none", zIndex:"8", overflow:"hidden", border:"0 none" - } - ); + }); - var textareaElem = new Element('textarea', - { tabindex:'-1', - value:"", - wrap:'off' - } - ); - textareaElem.setStyles({ - border:"1px gray dashed", - background:"rgba(98, 135, 167, .3)", - outline:'0 none', - resize:'none', - overflow:"hidden" - }); - textareaElem.inject(result); + var textareaElem = $('') + .css({ + border:"1px gray dashed", + background:"rgba(98, 135, 167, .3)", + outline:'0 none', + resize:'none', + overflow:"hidden" + }); + + result.append(textareaElem); return result; }, _registerEvents:function (containerElem) { var textareaElem = this._getTextareaElem(); - - textareaElem.addEvent('keydown', function (event) { - switch (event.key) { + var me = this; + textareaElem.on('keydown', function (event) { + switch (jQuery.hotkeys.specialKeys[event.keyCode]) { case 'esc': - this.close(false); + me.close(false); break; case 'enter': - if (event.meta || event.control) { + if (event.metaKey || event.ctrlKey) { // Add return ... - var text = textareaElem.value; + var text = textareaElem.val(); var cursorPosition = text.length; if (textareaElem.selectionStart) { cursorPosition = textareaElem.selectionStart; @@ -76,12 +71,12 @@ mindplot.MultilineTextEditor = new Class({ if (cursorPosition < text.length) { tail = text.substring(cursorPosition, text.length); } - textareaElem.value = head + "\n" + tail; + textareaElem.val(head + "\n" + tail); // Position cursor ... - if (textareaElem.setSelectionRange) { + if (textareaElem[0].setSelectionRange) { textareaElem.focus(); - textareaElem.setSelectionRange(cursorPosition + 1, cursorPosition + 1); + textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1); } else if (textareaElem.createTextRange) { var range = textareaElem.createTextRange(); range.moveStart('character', cursorPosition + 1); @@ -90,31 +85,31 @@ mindplot.MultilineTextEditor = new Class({ } else { - this.close(true); + me.close(true); } break; } event.stopPropagation(); - }.bind(this)); + }); - textareaElem.addEvent('keypress', function (event) { + textareaElem.on('keypress', function (event) { event.stopPropagation(); }); - textareaElem.addEvent('keyup', function (event) { - var text = this._getTextareaElem().value; - this.fireEvent('input', [event, text]); - this._adjustEditorSize(); - }.bind(this)); + textareaElem.on('keyup', function (event) { + var text = me._getTextareaElem().val(); + me.fireEvent('input', [event, text]); + me._adjustEditorSize(); + }); // If the user clicks on the input, all event must be ignored ... - containerElem.addEvent('click', function (event) { + containerElem.on('click', function (event) { event.stopPropagation(); }); - containerElem.addEvent('dblclick', function (event) { + containerElem.on('dblclick', function (event) { event.stopPropagation(); }); - containerElem.addEvent('mousedown', function (event) { + containerElem.on('mousedown', function (event) { event.stopPropagation(); }); }, @@ -124,25 +119,25 @@ mindplot.MultilineTextEditor = new Class({ if (this.isVisible()) { var textElem = this._getTextareaElem(); - var lines = textElem.value.split('\n'); + var lines = textElem.val().split('\n'); var maxLineLength = 1; - lines.each(function (line) { + _.each(lines, function (line) { if (maxLineLength < line.length) maxLineLength = line.length; }); - textElem.setAttribute('cols', maxLineLength); - textElem.setAttribute('rows', lines.length); + textElem.attr('cols', maxLineLength); + textElem.attr('rows', lines.length); - this._containerElem.setStyles({ + this._containerElem.css({ width:(maxLineLength + 3) + 'em', - height:textElem.getSize().height + height:textElem.height() }); } }, isVisible:function () { - return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block'; + return $defined(this._containerElem) && this._containerElem.css('display') == 'block'; }, _updateModel:function () { @@ -156,7 +151,7 @@ mindplot.MultilineTextEditor = new Class({ } }, - show:function (topic, text) { + show: function (topic, text) { // Close a previous node editor if it's opened ... if (this._topic) { this.close(false); @@ -166,7 +161,7 @@ mindplot.MultilineTextEditor = new Class({ if (!this.isVisible()) { //Create editor ui var containerElem = this._buildEditor(); - containerElem.inject($(document.body)); + $('body').append(containerElem); this._containerElem = containerElem; this._registerEvents(containerElem); @@ -187,26 +182,27 @@ mindplot.MultilineTextEditor = new Class({ font.size = nodeText.getHtmlFontSize(); font.color = nodeText.getColor(); this._setStyle(font); - + var me = this; // Set editor's initial size var displayFunc = function () { // Position the editor and set the size... var textShape = topic.getTextShape(); - textShape.positionRelativeTo(this._containerElem, { - position:{x:'left', y:'top'}, - edge:{x:'left', y:'top'} - }); - this._containerElem.setStyle('display', 'block'); + + me._containerElem.css('display', 'block'); + + //FIXME: Im not sure if this is best way... + var shapePosition = textShape.getNativePosition(); + me._containerElem.offset(shapePosition); // Set editor's initial text ... var text = $defined(defaultText) ? defaultText : topic.getText(); - this._setText(text); + me._setText(text); // Set the element focus and select the current text ... - var inputElem = this._getTextareaElem(); - this._positionCursor(inputElem, !$defined(defaultText)); + var inputElem = me._getTextareaElem(); + me._positionCursor(inputElem, !$defined(defaultText)); - }.bind(this); + }; this._timeoutId = displayFunc.delay(10); }, @@ -232,22 +228,22 @@ mindplot.MultilineTextEditor = new Class({ fontWeight:fontStyle.weight, color:fontStyle.color }; - inputField.setStyles(style); - this._containerElem.setStyles(style); + inputField.css(style); + this._containerElem.css(style); }, _setText:function (text) { var textareaElem = this._getTextareaElem(); - textareaElem.value = text; + textareaElem.val(text); this._adjustEditorSize(); }, _getText:function () { - return this._getTextareaElem().value; + return this._getTextareaElem().val(); }, _getTextareaElem:function () { - return this._containerElem.getElement('textarea'); + return this._containerElem.find('textarea'); }, _positionCursor:function (textareaElem, selectText) { @@ -257,19 +253,19 @@ mindplot.MultilineTextEditor = new Class({ if (textareaElem.createTextRange) { var rang = textareaElem.createTextRange(); rang.select(); - rang.move("character", textareaElem.value.length); + rang.move("character", textareaElem.val().length); } else { - textareaElem.setSelectionRange(0, textareaElem.value.length); + textareaElem[0].setSelectionRange(0, textareaElem.val().length); } } else { // Move the cursor to the last character .. if (textareaElem.createTextRange) { var range = textareaElem.createTextRange(); - range.move("character", textareaElem.value.length); + range.move("character", textareaElem.val().length); } else { - textareaElem.selectionStart = textareaElem.value.length; + textareaElem.selectionStart = textareaElem.val().length; } } @@ -288,7 +284,7 @@ mindplot.MultilineTextEditor = new Class({ this._topic.getTextShape().setVisibility(true); // Remove it form the screen ... - this._containerElem.dispose(); + this._containerElem.remove(); this._containerElem = null; this._timeoutId = -1; } diff --git a/mindplot/src/main/javascript/NodeGraph.js b/mindplot/src/main/javascript/NodeGraph.js index 77cffe74..49d1c3a2 100644 --- a/mindplot/src/main/javascript/NodeGraph.js +++ b/mindplot/src/main/javascript/NodeGraph.js @@ -24,7 +24,6 @@ mindplot.NodeGraph = new Class({ this._mouseEvents = true; this.setModel(nodeModel); this._onFocus = false; - this._event = new Events(); this._size = {width:50,height:20}; }, @@ -67,7 +66,7 @@ mindplot.NodeGraph = new Class({ fireEvent: function(type, event) { var elem = this.get2DElement(); - elem.fireEvent(type, event); + elem.trigger(type, event); }, setMouseEventsEnabled : function(isEnabled) { diff --git a/mindplot/src/main/javascript/NoteIcon.js b/mindplot/src/main/javascript/NoteIcon.js index e3b93985..b6e32398 100644 --- a/mindplot/src/main/javascript/NoteIcon.js +++ b/mindplot/src/main/javascript/NoteIcon.js @@ -31,50 +31,45 @@ mindplot.NoteIcon = new Class({ _registerEvents:function () { this._image.setCursor('pointer'); + var me = this; if (!this._readOnly) { - // Add on click event to open the editor ... this.addEvent('click', function (event) { - this._topic.showNoteEditor(); + me._topic.showNoteEditor(); event.stopPropagation(); - }.bind(this)); + }); } - - this._tip = new mindplot.widget.FloatingTip(this.getImage()._peer._native, { + this._tip = new mindplot.widget.FloatingTip($(me.getImage()._peer._native), { + title: $msg('NOTE'), + container: 'body', // Content can also be a function of the target element! - content:function () { - var result = new Element('div'); - result.setStyles({padding:'5px'}); - - var title = new Element('div', {text:$msg('NOTE')}); - title.setStyles({ - 'font-weight':'bold', - color:'black', - 'padding-bottom':'5px', - width:'100px' - }); - title.inject(result); - - var text = new Element('div', {text:this._linksModel.getText()}); - text.setStyles({ - 'white-space':'pre-wrap', - 'word-wrap':'break-word' - } - ); - text.inject(result); - - - return result; - }.bind(this), + content: function() { + return me._buildTooltipContent(); + }, html:true, - position:'bottom', - arrowOffset:10, - center:true, - arrowSize:15, - offset:{x:10, y:20}, - className:'notesTip' + placement:'bottom', + destroyOnExit: true }); + + }, + + _buildTooltipContent: function() { + if ($("body").find("#textPopoverNote").length == 1) { + var text = $("body").find("#textPopoverNote"); + text.text(this._linksModel.getText()); + } else { + var result = $('
').css({padding:'5px'}); + + var text = $('
').text(this._linksModel.getText()) + .css({ + 'white-space':'pre-wrap', + 'word-wrap':'break-word' + } + ); + result.append(text); + return result; + } }, getModel:function () { diff --git a/mindplot/src/main/javascript/Options.js b/mindplot/src/main/javascript/Options.js new file mode 100644 index 00000000..67b5f6a9 --- /dev/null +++ b/mindplot/src/main/javascript/Options.js @@ -0,0 +1,13 @@ +Options = new Class({ + + setOptions: function(){ + var options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments)); + if (this.addEvent) for (var option in options){ + if (typeOf(options[option]) != 'function' || !(/^on[A-Z]/).test(option)) continue; + this.addEvent(option, options[option]); + delete options[option]; + } + return this; + } + +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/PersistenceManager.js b/mindplot/src/main/javascript/PersistenceManager.js index 387a179d..1040fbe6 100644 --- a/mindplot/src/main/javascript/PersistenceManager.js +++ b/mindplot/src/main/javascript/PersistenceManager.js @@ -42,7 +42,7 @@ mindplot.PersistenceManager = new Class({ var domMap = serializer.toXML(mindmap); var mapXml = core.Utils.innerXML(domMap); - var pref = JSON.encode(editorProperties); + var pref = JSON.stringify(editorProperties); try { this.saveMapXml(mapId, mapXml, pref, saveHistory, events, sync); } catch (e) { diff --git a/mindplot/src/main/javascript/Relationship.js b/mindplot/src/main/javascript/Relationship.js index 0ee7e73e..3b9dd065 100644 --- a/mindplot/src/main/javascript/Relationship.js +++ b/mindplot/src/main/javascript/Relationship.js @@ -160,16 +160,16 @@ mindplot.Relationship = new Class({ }, addToWorkspace:function (workspace) { - workspace.appendChild(this._focusShape); - workspace.appendChild(this._controlPointsController); + workspace.append(this._focusShape); + workspace.append(this._controlPointsController); this._controlPointControllerListener = this._initializeControlPointController.bind(this); this._line2d.addEvent('click', this._controlPointControllerListener); this._isInWorkspace = true; - workspace.appendChild(this._startArrow); + workspace.append(this._startArrow); if (this._endArrow) - workspace.appendChild(this._endArrow); + workspace.append(this._endArrow); this.parent(workspace); this._positionArrows(); @@ -325,6 +325,6 @@ mindplot.Relationship = new Class({ fireEvent:function (type, event) { var elem = this._line2d; - elem.fireEvent(type, event); + elem.trigger(type, event); } }); diff --git a/mindplot/src/main/javascript/RelationshipPivot.js b/mindplot/src/main/javascript/RelationshipPivot.js index e070e37f..5c68f3e8 100644 --- a/mindplot/src/main/javascript/RelationshipPivot.js +++ b/mindplot/src/main/javascript/RelationshipPivot.js @@ -23,6 +23,7 @@ mindplot.RelationshipPivot = new Class({ this._workspace = workspace; this._designer = designer; + //FIXME: the aim of the migration is remove .bind mootools method, please remove these! this._mouseMoveEvent = this._mouseMove.bind(this); this._onClickEvent = this._cleanOnMouseClick.bind(this); this._onTopicClick = this._connectOnFocus.bind(this); @@ -56,8 +57,8 @@ mindplot.RelationshipPivot = new Class({ this._startArrow.setStrokeWidth(2); this._startArrow.setFrom(sourcePos.x, sourcePos.y); - this._workspace.appendChild(this._pivot); - this._workspace.appendChild(this._startArrow); + this._workspace.append(this._pivot); + this._workspace.append(this._startArrow); this._workspace.addEvent('mousemove', this._mouseMoveEvent); this._workspace.addEvent('click', this._onClickEvent); @@ -65,7 +66,7 @@ mindplot.RelationshipPivot = new Class({ // Register focus events on all topics ... var model = this._designer.getModel(); var topics = model.getTopics(); - topics.each(function (topic) { + _.each(topics, function (topic) { topic.addEvent('ontfocus', this._onTopicClick); }.bind(this)); } @@ -81,9 +82,10 @@ mindplot.RelationshipPivot = new Class({ var model = this._designer.getModel(); var topics = model.getTopics(); - topics.each(function (topic) { - topic.removeEvent('ontfocus', this._onTopicClick); - }.bind(this)); + var me = this; + _.each(topics, function (topic) { + topic.removeEvent('ontfocus', me._onTopicClick); + }); workspace.removeChild(this._pivot); workspace.removeChild(this._startArrow); @@ -139,7 +141,7 @@ mindplot.RelationshipPivot = new Class({ return mindplot.util.Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint); }, - _connectOnFocus:function (targetTopic) { + _connectOnFocus:function (event, targetTopic) { var sourceTopic = this._sourceTopic; var mindmap = this._designer.getMindmap(); diff --git a/mindplot/src/main/javascript/RestPersistenceManager.js b/mindplot/src/main/javascript/RestPersistenceManager.js index 9a6228a1..1e04d51c 100644 --- a/mindplot/src/main/javascript/RestPersistenceManager.js +++ b/mindplot/src/main/javascript/RestPersistenceManager.js @@ -55,38 +55,38 @@ mindplot.RESTPersistenceManager = new Class({ persistence.onSave = false; }, 10000); - var request = new Request({ - url:this.documentUrl.replace("{id}", mapId) + "?" + query, - method:'put', + $.ajax({ + url: this.documentUrl.replace("{id}", mapId) + "?" + query, + type:'put', + dataType:"json", + data: JSON.stringify(data), + contentType:"application/json; charset=utf-8", async:!sync, - onSuccess:function (responseText, responseXML) { - persistence.timestamp = responseText; + success: function (data, textStatus, jqXHRresponseText) { + persistence.timestamp = data; events.onSuccess(); }, - - onException:function (headerName, value) { + error: function (jqXHR, textStatus, errorThrown) { events.onError(persistence._buildError()); }, - - onComplete:function () { + complete: function () { // Clear event timeout ... if (persistence.clearTimeout) { clearTimeout(persistence.clearTimeout); } persistence.onSave = false; }, - - onFailure:function (xhr) { + fail:function (xhr, textStatus) { var responseText = xhr.responseText; var userMsg = {severity:"SEVERE", message:$msg('SAVE_COULD_NOT_BE_COMPLETED')}; - var contentType = this.getHeader("Content-Type"); + var contentType = xhr.getResponseHeader("Content-Type"); if (contentType != null && contentType.indexOf("application/json") != -1) { var serverMsg = null; try { - serverMsg = JSON.decode(responseText); + serverMsg = $.parseJSON(responseText); serverMsg = serverMsg.globalSeverity ? serverMsg : null; } catch (e) { // Message could not be decoded ... @@ -100,52 +100,29 @@ mindplot.RESTPersistenceManager = new Class({ } events.onError(userMsg); persistence.onSave = false; - }, - - headers:{"Content-Type":"application/json; charset=utf-8", "Accept":"application/json"}, - emulation:false, - urlEncoded:false + } }); - request.put(JSON.encode(data)); } }, discardChanges:function (mapId) { - var request = new Request({ + $.ajax({ url:this.revertUrl.replace("{id}", mapId), async:false, method:'post', - onSuccess:function () { - }, - onException:function () { - }, - onFailure:function () { - }, - headers:{"Content-Type":"application/json; charset=utf-8", "Accept":"application/json"}, - emulation:false, - urlEncoded:false + headers:{"Content-Type":"application/json; charset=utf-8", "Accept":"application/json"} }); - request.post(); }, unlockMap:function (mindmap) { var mapId = mindmap.getId(); - var request = new Request({ + $.ajax({ url:this.lockUrl.replace("{id}", mapId), async:false, method:'put', - onSuccess:function () { - - }, - onException:function () { - }, - onFailure:function () { - }, headers:{"Content-Type":"text/plain"}, - emulation:false, - urlEncoded:false + data: "false" }); - request.put("false"); }, _buildError:function (jsonSeverResponse) { @@ -165,26 +142,22 @@ mindplot.RESTPersistenceManager = new Class({ loadMapDom:function (mapId) { // Let's try to open one from the local directory ... var xml; - var xmlRequest = new Request({ + $.ajax({ url:this.documentUrl.replace("{id}", mapId) + "/xml", method:'get', async:false, headers:{"Content-Type":"text/plain","Accept":"application/xml"}, - onSuccess:function (responseText) { + success:function (responseText) { xml = responseText; } }); - xmlRequest.send(); // If I could not load it from a file, hard code one. if (xml == null) { throw new Error("Map could not be loaded"); } - var parser = new DOMParser(); - return parser.parseFromString(xml, "text/xml"); + return xml; } } ); - - diff --git a/mindplot/src/main/javascript/ScreenManager.js b/mindplot/src/main/javascript/ScreenManager.js index f633b02f..a468c318 100644 --- a/mindplot/src/main/javascript/ScreenManager.js +++ b/mindplot/src/main/javascript/ScreenManager.js @@ -24,11 +24,11 @@ mindplot.ScreenManager = new Class({ // Ignore default click event propagation. Prevent 'click' event on drag. this._clickEvents = []; - this._divContainer.addEvent('click', function(event) { + this._divContainer.bind('click', function(event) { event.stopPropagation() - }.bind(this)); + }); - this._divContainer.addEvent('dblclick', function(event) { + this._divContainer.bind('dblclick', function(event) { event.stopPropagation(); event.preventDefault(); }); @@ -43,7 +43,7 @@ mindplot.ScreenManager = new Class({ if (event == 'click') this._clickEvents.push(listener); else - this._divContainer.addEvent(event, listener); + this._divContainer.bind(event, listener); }, removeEvent : function(event, listener) { @@ -51,18 +51,18 @@ mindplot.ScreenManager = new Class({ this._clickEvents.remove(listener); } else{ - this._divContainer.removeEvent(event, listener); + this._divContainer.unbind(event, listener); } }, fireEvent : function(type, event) { if (type == 'click') { - this._clickEvents.each(function(listener) { + _.each(this._clickEvents, function(listener) { listener(type, event); }); } else { - this._divContainer.fireEvent(type, event); + this._divContainer.trigger(type, event); } }, @@ -118,13 +118,13 @@ mindplot.ScreenManager = new Class({ getWorkspaceMousePosition : function(event) { // Retrieve current mouse position. - var x = event.client.x; - var y = event.client.y; + var x = event.clientX; + var y = event.clientY; - // Subtract div position. - var containerPosition = this.getContainer().getPosition(); + //FIXME: paulo: why? Subtract div position. + /*var containerPosition = this.getContainer().position(); x = x - containerPosition.x; - y = y - containerPosition.y; + y = y - containerPosition.y;*/ // Scale coordinate in order to be relative to the workspace. That's coordSize/size; x = x * this._scale; diff --git a/mindplot/src/main/javascript/ShrinkConnector.js b/mindplot/src/main/javascript/ShrinkConnector.js index 733f0e24..02727a42 100644 --- a/mindplot/src/main/javascript/ShrinkConnector.js +++ b/mindplot/src/main/javascript/ShrinkConnector.js @@ -50,11 +50,11 @@ mindplot.ShirinkConnector = new Class({ ellipse.setFill('rgb(153, 0, 255)'); }); - + var me = this; ellipse.addEvent('mouseout', function(event) { var color = topic.getBackgroundColor(); - this.setFill(color); - }.bind(this)); + me.setFill(color); + }); ellipse.setCursor('default'); this._fillColor = '#f7f7f7'; @@ -90,7 +90,7 @@ mindplot.ShirinkConnector = new Class({ }, addToWorkspace: function(group) { - group.appendChild(this._ellipse); + group.append(this._ellipse); }, setPosition: function(x, y) { @@ -104,4 +104,4 @@ mindplot.ShirinkConnector = new Class({ moveToFront: function() { this._ellipse.moveToFront(); } -}); \ No newline at end of file +}); diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index aabb3507..651d9143 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -68,14 +68,15 @@ mindplot.TextEditor = new Class({ _registerEvents : function(divElem) { var inputElem = this._getTextareaElem(); var spanElem = this._getSpanElem(); + var me = this; divElem.addEvent('keydown', function (event) { switch (event.key) { case 'esc': - this.close(false); + me.close(false); break; case 'enter': - this.close(true); + me.close(true); break; default: spanElem.innerHTML = inputElem.value; @@ -87,7 +88,7 @@ mindplot.TextEditor = new Class({ break; } event.stopPropagation(); - }.bind(this)); + }); // If the user clicks on the input, all event must be ignored ... divElem.addEvent('click', function(event) { @@ -121,7 +122,7 @@ mindplot.TextEditor = new Class({ if (!this.isVisible()) { //Create editor ui var editorElem = this._buildEditor(); - editorElem.inject($(document.body)); + editorElem.inject($(document.body)[0]); this._containerElem = editorElem; this._registerEvents(editorElem); @@ -147,25 +148,24 @@ mindplot.TextEditor = new Class({ var text = $defined(defaultText) ? defaultText : topic.getText(); this._setText(text); + var me = this; // Set editor's initial size var displayFunc = function() { // Position the editor and set the size... - var textShape = this._topic.getTextShape(); - textShape.positionRelativeTo(this._containerElem, { - position: {x: 'left',y:'top'}, - edge: {x: 'left', y: 'top'} - }); - this._containerElem.setStyle('display', 'block'); + var textShape = me._topic.getTextShape(); + me._containerElem.css('display', 'block'); + + me._containerElem.offset(textShape.getNativePosition()); // Set size ... var elemSize = topic.getSize(); - this._setEditorSize(elemSize.width, elemSize.height); + me._setEditorSize(elemSize.width, elemSize.height); - var textareaElem = this._getTextareaElem(); + var textareaElem = me._getTextareaElem(); textareaElem.focus(); - this._positionCursor(textareaElem, !$defined(defaultText)); + me._positionCursor(textareaElem, !$defined(defaultText)); - }.bind(this); + }; displayFunc.delay(10); }, diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index afd3c660..d9d365be 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -47,11 +47,11 @@ mindplot.Topic = new Class({ this.addEvent('click', function (event) { event.stopPropagation(); }); - + var me = this; this.addEvent('dblclick', function (event) { - this._getTopicEventDispatcher().show(this); + me._getTopicEventDispatcher().show(me); event.stopPropagation(); - }.bind(this)); + }); }, setShapeType:function (type) { @@ -82,7 +82,7 @@ mindplot.Topic = new Class({ this.setSize(size, true); var group = this.get2DElement(); - group.appendChild(innerShape); + group.append(innerShape); // Move text to the front ... var text = this.getTextShape(); @@ -246,7 +246,7 @@ mindplot.Topic = new Class({ if (!$defined(this._iconsGroup)) { this._iconsGroup = this._buildIconGroup(); var group = this.get2DElement(); - group.appendChild(this._iconsGroup.getNativeElement()); + group.append(this._iconsGroup.getNativeElement()); this._iconsGroup.moveToFront(); } return this._iconsGroup; @@ -458,7 +458,7 @@ mindplot.Topic = new Class({ setText:function (text) { // Avoid empty nodes ... - if (!text || text.trim().length == 0) { + if (!text || $.trim(text).length == 0) { text = null; } @@ -542,9 +542,9 @@ mindplot.Topic = new Class({ var textShape = this.getTextShape(); // Add to the group ... - group.appendChild(outerShape); - group.appendChild(innerShape); - group.appendChild(textShape); + group.append(outerShape); + group.append(innerShape); + group.append(textShape); // Update figure size ... var model = this.getModel(); @@ -576,24 +576,25 @@ mindplot.Topic = new Class({ }; elem.addEvent('mouseout', outout); + var me = this; // Focus events ... elem.addEvent('mousedown', function (event) { - if (!this.isReadOnly()) { + if (!me.isReadOnly()) { // Disable topic selection of readOnly mode ... var value = true; - if ((event.meta && Browser.Platform.mac) || (event.control && !Browser.Platform.mac)) { - value = !this.isOnFocus(); + if ((event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac)) { + value = !me.isOnFocus(); event.stopPropagation(); event.preventDefault(); } topic.setOnFocus(value); } - var eventDispatcher = this._getTopicEventDispatcher(); - eventDispatcher.process(mindplot.TopicEvent.CLICK, this); + var eventDispatcher = me._getTopicEventDispatcher(); + eventDispatcher.process(mindplot.TopicEvent.CLICK, me); event.stopPropagation(); - }.bind(this)); + }); }, areChildrenShrunken:function () { @@ -626,10 +627,11 @@ mindplot.Topic = new Class({ // Do some fancy animation .... var elements = this._flatten2DElements(this); var fade = new mindplot.util.FadeEffect(elements, !value); + var me = this; fade.addEvent('complete', function () { // Set focus on the parent node ... if (value) { - this.setOnFocus(true); + me.setOnFocus(true); } // Set focus in false for all the children ... @@ -638,7 +640,7 @@ mindplot.Topic = new Class({ elem.setOnFocus(false); } }); - }.bind(this)); + }); fade.start(); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, model); @@ -887,7 +889,7 @@ mindplot.Topic = new Class({ }, _setRelationshipLinesVisibility:function (value) { - this._relationships.each(function (relationship) { + _.each(this._relationships, function (relationship) { var sourceTopic = relationship.getSourceTopic(); var targetTopic = relationship.getTargetTopic(); @@ -1043,7 +1045,7 @@ mindplot.Topic = new Class({ $assert(workspace, 'Workspace can not be null'); // Connect Graphical Nodes ... - targetTopic.appendChild(this); + targetTopic.append(this); this._parent = targetTopic; // Update model ... @@ -1056,7 +1058,7 @@ mindplot.Topic = new Class({ outgoingLine.setVisibility(false); this._outgoingLine = outgoingLine; - workspace.appendChild(outgoingLine); + workspace.append(outgoingLine); // Update figure is necessary. this.updateTopicShape(targetTopic); @@ -1088,7 +1090,7 @@ mindplot.Topic = new Class({ } }, - appendChild:function (child) { + append:function (child) { var children = this.getChildren(); children.push(child); }, @@ -1120,7 +1122,7 @@ mindplot.Topic = new Class({ addToWorkspace:function (workspace) { var elem = this.get2DElement(); - workspace.appendChild(elem); + workspace.append(elem); if (!this.isInWorkspace()) { if (!this.isCentralTopic()) { mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeAdded, this.getModel()); diff --git a/mindplot/src/main/javascript/TopicEventDispatcher.js b/mindplot/src/main/javascript/TopicEventDispatcher.js index 20476d10..71b4f033 100644 --- a/mindplot/src/main/javascript/TopicEventDispatcher.js +++ b/mindplot/src/main/javascript/TopicEventDispatcher.js @@ -17,7 +17,7 @@ */ mindplot.TopicEventDispatcher = new Class({ - Extends: Events, + Extends: mindplot.Events, Static: { _instance: null, diff --git a/mindplot/src/main/javascript/Workspace.js b/mindplot/src/main/javascript/Workspace.js index 859b41fc..81894848 100644 --- a/mindplot/src/main/javascript/Workspace.js +++ b/mindplot/src/main/javascript/Workspace.js @@ -26,8 +26,8 @@ mindplot.Workspace = new Class({ this._screenManager = screenManager; var divContainer = screenManager.getContainer(); - this._screenWidth = parseInt(divContainer.getStyle('width')); - this._screenHeight = parseInt(divContainer.getStyle('height')); + this._screenWidth = parseInt(divContainer.css('width')); + this._screenHeight = parseInt(divContainer.css('height')); // Initialize web2d workspace. var workspace = this._createWorkspace(); @@ -61,11 +61,11 @@ mindplot.Workspace = new Class({ return new web2d.Workspace(workspaceProfile); }, - appendChild: function(shape) { + append: function(shape) { if ($defined(shape.addToWorkspace)) { shape.addToWorkspace(this); } else { - this._workspace.appendChild(shape); + this._workspace.append(shape); } }, @@ -189,7 +189,7 @@ mindplot.Workspace = new Class({ wasDragged = true; - }.bind(this); + }; screenManager.addEvent('mousemove', workspace._mouseMoveListener); // Register mouse up listeners ... diff --git a/mindplot/src/main/javascript/commands/AddTopicCommand.js b/mindplot/src/main/javascript/commands/AddTopicCommand.js index ce20a964..a7805afb 100644 --- a/mindplot/src/main/javascript/commands/AddTopicCommand.js +++ b/mindplot/src/main/javascript/commands/AddTopicCommand.js @@ -29,19 +29,20 @@ mindplot.commands.AddTopicCommand = new Class({ execute:function (commandContext) { - this._models.each(function (model, index) { + var me = this; + _.each(this._models, function (model, index) { // Add a new topic ... var topic = commandContext.createTopic(model); // Connect to topic ... - if (this._parentsIds) { - var parentId = this._parentsIds[index]; + if (me._parentsIds) { + var parentId = me._parentsIds[index]; if ($defined(parentId)) { var parentTopic = commandContext.findTopics(parentId)[0]; commandContext.connect(topic, parentTopic); } - }else { + } else { commandContext.addTopic(topic); } @@ -53,23 +54,23 @@ mindplot.commands.AddTopicCommand = new Class({ // Render node ... topic.setVisibility(true); - }.bind(this)); + }); }, undoExecute:function (commandContext) { // Delete disconnected the nodes. Create a copy of the topics ... var clonedModel = []; - this._models.each(function (model) { + _.each(this._models, function (model) { clonedModel.push(model.clone()); }); // Finally, remove the nodes ... - this._models.each(function (model) { + _.each(this._models, function (model) { var topicId = model.getId(); var topic = commandContext.findTopics(topicId)[0]; commandContext.deleteTopic(topic); - }.bind(this)); + }); this._models = clonedModel; } diff --git a/mindplot/src/main/javascript/commands/DeleteCommand.js b/mindplot/src/main/javascript/commands/DeleteCommand.js index 31637d2c..e680cc8a 100644 --- a/mindplot/src/main/javascript/commands/DeleteCommand.js +++ b/mindplot/src/main/javascript/commands/DeleteCommand.js @@ -35,7 +35,7 @@ mindplot.commands.DeleteCommand = new Class({ var topics = this._filterChildren(this._topicIds, commandContext); if (topics.length > 0) { - topics.each(function (topic) { + _.each(topics, function (topic) { // In case that it's editing text node, force close without update ... topic.closeEditors(); @@ -47,7 +47,7 @@ mindplot.commands.DeleteCommand = new Class({ return rel.getModel().clone(); })); - relationships.each(function (relationship) { + _.each(relationships, function (relationship) { commandContext.deleteRelationship(relationship); }); @@ -69,7 +69,7 @@ mindplot.commands.DeleteCommand = new Class({ var rels = commandContext.findRelationships(this._relIds); if (rels.length > 0) { - rels.each(function (rel) { + _.each(rels, function (rel) { this._deletedRelModel.push(rel.getModel().clone()); commandContext.deleteRelationship(rel); }, this); @@ -79,12 +79,12 @@ mindplot.commands.DeleteCommand = new Class({ undoExecute:function (commandContext) { // Add all the topics ... - this._deletedTopicModels.each(function (model) { + _.each(this._deletedTopicModels, function (model) { commandContext.createTopic(model); }, this); // Do they need to be connected ? - this._deletedTopicModels.each(function (topicModel, index) { + _.each(this._deletedTopicModels, function (topicModel, index) { var topics = commandContext.findTopics(topicModel.getId()); var parentId = this._parentTopicIds[index]; @@ -95,12 +95,12 @@ mindplot.commands.DeleteCommand = new Class({ }, this); // Add rebuild relationships ... - this._deletedRelModel.each(function (model) { + _.each(this._deletedRelModel, function (model) { commandContext.addRelationship(model); - }.bind(this)); + }); // Finally display the topics ... - this._deletedTopicModels.each(function (topicModel) { + _.each(this._deletedTopicModels, function (topicModel) { var topics = commandContext.findTopics(topicModel.getId()); topics[0].setBranchVisibility(true); }, this); @@ -121,7 +121,7 @@ mindplot.commands.DeleteCommand = new Class({ var topics = commandContext.findTopics(topicIds); var result = []; - topics.each(function (topic) { + _.each(topics, function (topic) { var parent = topic.getParent(); var found = false; while (parent != null && !found) { diff --git a/mindplot/src/main/javascript/commands/GenericFunctionCommand.js b/mindplot/src/main/javascript/commands/GenericFunctionCommand.js index 28e75605..644e36fd 100644 --- a/mindplot/src/main/javascript/commands/GenericFunctionCommand.js +++ b/mindplot/src/main/javascript/commands/GenericFunctionCommand.js @@ -46,10 +46,11 @@ mindplot.commands.GenericFunctionCommand = new Class({ } if (topics != null) { - topics.each(function (topic) { - var oldValue = this._commandFunc(topic, this._value); - this._oldValues.push(oldValue); - }.bind(this)); + var me = this; + _.each(topics, function (topic) { + var oldValue = me._commandFunc(topic, me._value); + me._oldValues.push(oldValue); + }); } this.applied = true; @@ -62,10 +63,11 @@ mindplot.commands.GenericFunctionCommand = new Class({ undoExecute:function (commandContext) { if (this.applied) { var topics = commandContext.findTopics(this._topicsId); - topics.each(function (topic, index) { - this._commandFunc(topic, this._oldValues[index]); + var me = this; + _.each(topics, function (topic, index) { + me._commandFunc(topic, me._oldValues[index]); - }.bind(this)); + }); this.applied = false; this._oldValues = []; diff --git a/mindplot/src/main/javascript/footer.js b/mindplot/src/main/javascript/footer.js index 393617a8..6858d261 100644 --- a/mindplot/src/main/javascript/footer.js +++ b/mindplot/src/main/javascript/footer.js @@ -1 +1,5 @@ -$(document).fireEvent('loadcomplete', 'mind'); +try { + $(document).trigger('loadcomplete', 'mind'); +} catch (e) { + console.error(e.stack); +} diff --git a/mindplot/src/main/javascript/layout/AbstractBasicSorter.js b/mindplot/src/main/javascript/layout/AbstractBasicSorter.js index fbfcad6d..64476a66 100644 --- a/mindplot/src/main/javascript/layout/AbstractBasicSorter.js +++ b/mindplot/src/main/javascript/layout/AbstractBasicSorter.js @@ -38,7 +38,7 @@ mindplot.layout.AbstractBasicSorter = new Class({ result = height; } else { var childrenHeight = 0; - children.each(function(child) { + _.each(children, function(child) { childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache); }, this); diff --git a/mindplot/src/main/javascript/layout/BalancedSorter.js b/mindplot/src/main/javascript/layout/BalancedSorter.js index 1c683616..950a057a 100644 --- a/mindplot/src/main/javascript/layout/BalancedSorter.js +++ b/mindplot/src/main/javascript/layout/BalancedSorter.js @@ -77,7 +77,7 @@ mindplot.layout.BalancedSorter = new Class({ var result = null; var last = children.getLast(); position = position || {x:last.getPosition().x, y:last.getPosition().y + 1}; - children.each(function (child, index) { + _.each(children, function (child, index) { var cpos = child.getPosition(); if (position.y > cpos.y) { yOffset = child == last ? @@ -129,7 +129,7 @@ mindplot.layout.BalancedSorter = new Class({ // Filter nodes on one side.. var children = this._getChildrenForOrder(parent, treeSet, node.getOrder()); - children.each(function (child, index) { + _.each(children, function (child, index) { if (child.getOrder() > node.getOrder()) { child.setOrder(child.getOrder() - 2); } @@ -154,7 +154,7 @@ mindplot.layout.BalancedSorter = new Class({ var totalPHeight = 0; var totalNHeight = 0; - heights.each(function (elem) { + _.each(heights, function (elem) { if (elem.order % 2 == 0) { totalPHeight += elem.height; } else { diff --git a/mindplot/src/main/javascript/layout/EventBus.js b/mindplot/src/main/javascript/layout/EventBus.js index a7ddd230..bf491d47 100644 --- a/mindplot/src/main/javascript/layout/EventBus.js +++ b/mindplot/src/main/javascript/layout/EventBus.js @@ -16,7 +16,7 @@ * limitations under the License. */ mindplot.EventBus = new Class({ - Implements:Events, + Implements: mindplot.Events, initialize: function() { } }); diff --git a/mindplot/src/main/javascript/layout/GridSorter.js b/mindplot/src/main/javascript/layout/GridSorter.js index 9122b51c..8bf154c5 100644 --- a/mindplot/src/main/javascript/layout/GridSorter.js +++ b/mindplot/src/main/javascript/layout/GridSorter.js @@ -26,9 +26,13 @@ mindplot.layout.GridSorter = new Class({ var children = this._getSortedChildren(treeSet, node); // Compute heights ... + var me = this; var heights = children.map(function(child) { - return {id:child.getId(),height:this._computeChildrenHeight(treeSet, child)}; - }.bind(this)); + return { + id: child.getId(), + height: me._computeChildrenHeight(treeSet, child) + }; + }); // Calculate the offsets ... var result = {}; diff --git a/mindplot/src/main/javascript/layout/LayoutManager.js b/mindplot/src/main/javascript/layout/LayoutManager.js index c7d6c86d..78258de6 100644 --- a/mindplot/src/main/javascript/layout/LayoutManager.js +++ b/mindplot/src/main/javascript/layout/LayoutManager.js @@ -16,7 +16,7 @@ * limitations under the License. */ mindplot.layout.LayoutManager = new Class({ - Extends: Events, + Extends: mindplot.Events, initialize: function(rootNodeId, rootSize) { $assert($defined(rootNodeId), "rootNodeId can not be null"); $assert(rootSize, "rootSize can not be null"); @@ -137,7 +137,7 @@ mindplot.layout.LayoutManager = new Class({ // Collect changes ... this._collectChanges(); - if (!$(fireEvents) || fireEvents) { + if ($(fireEvents).length>0 || fireEvents) { this._flushEvents(); } @@ -145,7 +145,7 @@ mindplot.layout.LayoutManager = new Class({ }, _flushEvents: function() { - this._events.each(function(event) { + _.each(this._events, function(event) { this.fireEvent('change', event); }, this); this._events = []; @@ -155,7 +155,7 @@ mindplot.layout.LayoutManager = new Class({ if (!nodes) nodes = this._treeSet.getTreeRoots(); - nodes.each(function(node) { + _.each(nodes, function(node) { if (node.hasOrderChanged() || node.hasPositionChanged()) { // Find or create a event ... diff --git a/mindplot/src/main/javascript/layout/Node.js b/mindplot/src/main/javascript/layout/Node.js index 972a0a80..e1813fe8 100644 --- a/mindplot/src/main/javascript/layout/Node.js +++ b/mindplot/src/main/javascript/layout/Node.js @@ -155,7 +155,7 @@ mindplot.layout.Node = new Class({ } // Only update if the property has changed ... - if (JSON.encode(prop.value) != JSON.encode(value)) { + if (JSON.stringify(prop.value) != JSON.stringify(value)) { prop.oldValue = prop.value; prop.value = value; prop.hasChanged = true; diff --git a/mindplot/src/main/javascript/layout/OriginalLayout.js b/mindplot/src/main/javascript/layout/OriginalLayout.js index 84d4c3f5..e724d193 100644 --- a/mindplot/src/main/javascript/layout/OriginalLayout.js +++ b/mindplot/src/main/javascript/layout/OriginalLayout.js @@ -70,7 +70,7 @@ mindplot.layout.OriginalLayout = new Class({ layout:function () { var roots = this._treeSet.getTreeRoots(); - roots.each(function (node) { + _.each(roots, function (node) { // Calculate all node heights ... var sorter = node.getSorter(); @@ -107,12 +107,12 @@ mindplot.layout.OriginalLayout = new Class({ var sorter = node.getSorter(); var offsetById = sorter.computeOffsets(this._treeSet, node); var parentPosition = node.getPosition(); - - children.each(function (child) { + var me = this; + _.each(children, function (child) { var offset = offsetById[child.getId()]; var childFreeDisplacement = child.getFreeDisplacement(); - var direction = node.getSorter().getChildDirection(this._treeSet, child); + var direction = node.getSorter().getChildDirection(me._treeSet, child); if ((direction > 0 && childFreeDisplacement.x < 0) || (direction < 0 && childFreeDisplacement.x > 0)) { child.resetFreeDisplacement(); @@ -125,15 +125,15 @@ mindplot.layout.OriginalLayout = new Class({ var parentX = parentPosition.x; var parentY = parentPosition.y; - var newPos = {x:parentX + offset.x, y:parentY + offset.y + this._calculateAlignOffset(node, child, heightById)}; - this._treeSet.updateBranchPosition(child, newPos); - }.bind(this)); + var newPos = {x:parentX + offset.x, y:parentY + offset.y + me._calculateAlignOffset(node, child, heightById)}; + me._treeSet.updateBranchPosition(child, newPos); + }); node._branchHeight = newBranchHeight; } // Continue reordering the children nodes ... - children.each(function (child) { + _.each(children, function (child) { this._layoutChildren(child, heightById); }, this); }, @@ -183,7 +183,7 @@ mindplot.layout.OriginalLayout = new Class({ this._shiftBranches(node, heightById); } - children.each(function (child) { + _.each(children, function (child) { this._fixOverlapping(child, heightById); }, this); }, @@ -193,7 +193,7 @@ mindplot.layout.OriginalLayout = new Class({ var siblingsToShift = this._treeSet.getSiblingsInVerticalDirection(node, node.getFreeDisplacement().y); var last = node; - siblingsToShift.each(function (sibling) { + _.each(siblingsToShift, function (sibling) { var overlappingOccurs = shiftedBranches.some(function (shiftedBranch) { return this._branchesOverlap(shiftedBranch, sibling, heightById); }, this); @@ -209,7 +209,7 @@ mindplot.layout.OriginalLayout = new Class({ return !shiftedBranches.contains(branch); }); - branchesToShift.each(function (branch) { + _.each(branchesToShift, function (branch) { var bAmount = node.getFreeDisplacement().y; this._treeSet.shiftBranchPosition(branch, 0, bAmount); shiftedBranches.push(branch); diff --git a/mindplot/src/main/javascript/layout/RootedTreeSet.js b/mindplot/src/main/javascript/layout/RootedTreeSet.js index c51f9e22..942b00ca 100644 --- a/mindplot/src/main/javascript/layout/RootedTreeSet.js +++ b/mindplot/src/main/javascript/layout/RootedTreeSet.js @@ -240,9 +240,10 @@ mindplot.layout.RootedTreeSet = new Class({ var yOffset = oldPos.y - position.y; var children = this.getChildren(node); - children.each(function (child) { - this.shiftBranchPosition(child, xOffset, yOffset); - }.bind(this)); + var me = this; + _.each(children, function (child) { + me.shiftBranchPosition(child, xOffset, yOffset); + }); }, @@ -251,9 +252,10 @@ mindplot.layout.RootedTreeSet = new Class({ node.setPosition({x:position.x + xOffset, y:position.y + yOffset}); var children = this.getChildren(node); - children.each(function (child) { - this.shiftBranchPosition(child, xOffset, yOffset); - }.bind(this)); + var me = this; + _.each(children, function (child) { + me.shiftBranchPosition(child, xOffset, yOffset); + }); }, getSiblingsInVerticalDirection:function (node, yOffset) { diff --git a/mindplot/src/main/javascript/layout/SymmetricSorter.js b/mindplot/src/main/javascript/layout/SymmetricSorter.js index 10604091..440a9741 100644 --- a/mindplot/src/main/javascript/layout/SymmetricSorter.js +++ b/mindplot/src/main/javascript/layout/SymmetricSorter.js @@ -168,7 +168,7 @@ mindplot.layout.SymmetricSorter = new Class({ // Compute the center of the branch ... var totalHeight = 0; - heights.each(function (elem) { + _.each(heights, function (elem) { totalHeight += elem.height; }); var ysum = totalHeight / 2; diff --git a/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.Request.js b/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.Request.js new file mode 100644 index 00000000..4f12b859 --- /dev/null +++ b/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.Request.js @@ -0,0 +1,49 @@ +BootstrapDialog.Request = new Class({ + + Extends: BootstrapDialog, + + initialize: function(url, title, options) { + this.parent(title, options); + this.requestOptions = {}; + this.requestOptions.cache = false; + var me = this; + this.requestOptions.fail = function(xhr) { + // Intercept form requests ... + console.log("Failure:"); + console.log(xhr); + }; + + this.requestOptions.success = function() { + // Intercept form requests ... + var forms = me._native.find('form'); + _.each(forms, function(form) { + $(form).on('submit', function(event) { + // Intercept form ... + me.requestOptions.url = form.action; + me.requestOptions.method = form.method ? form.method : 'post'; + $.ajax(me.requestOptions); + event.stopPropagation(); + return false; + }); + }); + }; + + this._native.find('.modal-body').load(url, function () { + me.acceptButton.unbind('click').click(function () { + submitDialogForm(); + }); + me._native.on('hidden.bs.modal', function () { + $(this).remove(); + }); + me.show(); + }); + }, + + onDialogShown: function() { + if (typeof(onDialogShown) == "function") { + onDialogShown(); + } + } + + +}); diff --git a/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js b/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js new file mode 100644 index 00000000..62ecc3de --- /dev/null +++ b/mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js @@ -0,0 +1,114 @@ +var BootstrapDialog = new Class({ + Implements: Options, + + options: { + cancelButton: false, + closeButton: false, + acceptButton: true, + removeButton:false, + errorMessage: false, + onEventData:{} + }, + + initialize: function (title, options) { + this.setOptions(options); + this.options.onEventData.dialog = this; + this._native = $('').append(''); + var content = $(''); + content.on('keydown', function(event) { + event.stopPropagation(); + }); + var header = this._buildHeader(title); + if (header) { + content.append(header); + } + var body = $(''); + if(this.options.errorMessage){ + var error = $('
'); + error.hide(); + body.append(error); + } + content.append(body); + var footer = this._buildFooter(); + if (footer) { + content.append(footer); + } + this._native.find(".modal-dialog").append(content); + this._native.on('hidden.bs.modal', function() { + $(this).remove(); + }); + this._native.on('shown.bs.modal', this.onDialogShown); + }, + + _buildFooter: function() { + var footer = null; + if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) { + footer = $('