From fb39e32b336100f0fba3123bdb4456e9927803e6 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Tue, 23 Aug 2011 14:25:49 -0300 Subject: [PATCH] Text editor works based on absolute position. --- core-js/src/main/javascript/Functions.js | 3 +- core-js/src/main/javascript/footer.js | 124 +- mindplot/src/main/javascript/Icon.js | 4 + mindplot/src/main/javascript/ImageIcon.js | 235 ++-- .../src/main/javascript/MindmapDesigner.js | 29 +- .../src/main/javascript/PersistanceManager.js | 8 +- mindplot/src/main/javascript/TextEditor.js | 51 +- mindplot/src/main/javascript/Topic.js | 6 +- .../frameworks/brix/model/NodeModel.js | 2 + .../commands/AddIconToTopicCommand.js | 2 + web2d/src/main/javascript/Element.js | 183 ++- web2d/src/main/javascript/Image.js | 47 +- .../main/javascript/peer/svg/ElementPeer.js | 7 + wise-doc/src/main/webapp/html/editor.html | 4 +- wise-doc/src/main/webapp/js/core.js | 1066 ----------------- 15 files changed, 351 insertions(+), 1420 deletions(-) delete mode 100644 wise-doc/src/main/webapp/js/core.js diff --git a/core-js/src/main/javascript/Functions.js b/core-js/src/main/javascript/Functions.js index 28d4b462..e7a5a4e2 100644 --- a/core-js/src/main/javascript/Functions.js +++ b/core-js/src/main/javascript/Functions.js @@ -19,7 +19,8 @@ $assert = function(assert, message) { } catch(e) { stack = e; } - wLogger.error(message + "," + stack); + console.log(message + "," + stack); +// wLogger.error(message + "," + stack); // core.Logger.logError(message + "," + stack); } diff --git a/core-js/src/main/javascript/footer.js b/core-js/src/main/javascript/footer.js index 854bad22..0e54191f 100644 --- a/core-js/src/main/javascript/footer.js +++ b/core-js/src/main/javascript/footer.js @@ -16,68 +16,68 @@ * limitations under the License. */ -// Init default logger level ... -var wLogger = new Log4js.getLogger("WiseMapping"); -wLogger.setLevel(Log4js.Level.ALL); -//wLogger.addAppender(new Log4js.BrowserConsoleAppender()); - -// Is logger service available ? -if ($defined(window.LoggerService)) -{ - Log4js.WiseServerAppender = function() - { - this.layout = new Log4js.SimpleLayout(); - }; - - Log4js.WiseServerAppender.prototype = Log4js.extend(new Log4js.Appender(), { - /** - * @see Log4js.Appender#doAppend - */ - doAppend: function(loggingEvent) { - try { - var message = this.layout.format(loggingEvent); - var level = this.levelCode(loggingEvent); - - window.LoggerService.logError(level, message); - - } catch (e) { - alert(e); - } - }, - - /** - * toString - */ - toString: function() { - return "Log4js.WiseServerAppender"; - }, - - levelCode: function(loggingEvent) - { - var retval; - switch (loggingEvent.level) { - case Log4js.Level.FATAL: - retval = 3; - break; - case Log4js.Level.ERROR: - retval = 3; - break; - case Log4js.Level.WARN: - retval = 2; - break; - default: - retval = 1; - break; - } - - return retval; - } - }); - - wLogger.addAppender(new Log4js.WiseServerAppender()); - -} - +//// Init default logger level ... +//var wLogger = new Log4js.getLogger("WiseMapping"); +//wLogger.setLevel(Log4js.Level.ALL); +////wLogger.addAppender(new Log4js.BrowserConsoleAppender()); +// +//// Is logger service available ? +//if ($defined(window.LoggerService)) +//{ +// Log4js.WiseServerAppender = function() +// { +// this.layout = new Log4js.SimpleLayout(); +// }; +// +// Log4js.WiseServerAppender.prototype = Log4js.extend(new Log4js.Appender(), { +// /** +// * @see Log4js.Appender#doAppend +// */ +// doAppend: function(loggingEvent) { +// try { +// var message = this.layout.format(loggingEvent); +// var level = this.levelCode(loggingEvent); +// +// window.LoggerService.logError(level, message); +// +// } catch (e) { +// alert(e); +// } +// }, +// +// /** +// * toString +// */ +// toString: function() { +// return "Log4js.WiseServerAppender"; +// }, +// +// levelCode: function(loggingEvent) +// { +// var retval; +// switch (loggingEvent.level) { +// case Log4js.Level.FATAL: +// retval = 3; +// break; +// case Log4js.Level.ERROR: +// retval = 3; +// break; +// case Log4js.Level.WARN: +// retval = 2; +// break; +// default: +// retval = 1; +// break; +// } +// +// return retval; +// } +// }); +// +// wLogger.addAppender(new Log4js.WiseServerAppender()); +// +//} +// //// Handle error events ... //window.onerror = function(sMsg, sUrl, sLine) diff --git a/mindplot/src/main/javascript/Icon.js b/mindplot/src/main/javascript/Icon.js index 0149590b..909863b7 100644 --- a/mindplot/src/main/javascript/Icon.js +++ b/mindplot/src/main/javascript/Icon.js @@ -38,6 +38,10 @@ mindplot.Icon = new Class({ getSize : function() { return this._image.getSize(); + }, + + getPosition : function() { + return this._image.getPosition(); } }); diff --git a/mindplot/src/main/javascript/ImageIcon.js b/mindplot/src/main/javascript/ImageIcon.js index 6080eff8..b46a3a8c 100644 --- a/mindplot/src/main/javascript/ImageIcon.js +++ b/mindplot/src/main/javascript/ImageIcon.js @@ -17,122 +17,149 @@ */ mindplot.ImageIcon = new Class({ - Extends:mindplot.Icon, - initialize:function(iconModel, topic, designer) { - $assert(iconModel, 'iconModel can not be null'); - $assert(topic, 'topic can not be null'); - $assert(designer, 'designer can not be null'); + Extends:mindplot.Icon, + initialize:function(topic, iconModel) { + $assert(iconModel, 'iconModel can not be null'); + $assert(topic, 'topic can not be null'); - this._topic = topic; - this._iconModel = iconModel; - this._designer = designer; + this._topic = topic; + this._iconModel = iconModel; - // Build graph image representation ... - var iconType = iconModel.getIconType(); - var imgUrl = this._getImageUrl(iconType); + // @Todo: Read only must be a property ... + this._readOnly = designer._readOnly; - this.parent(imgUrl); + // Build graph image representation ... + var iconType = iconModel.getIconType(); + var imgUrl = this._getImageUrl(iconType); + this.parent(imgUrl); - //Remove - var divContainer = designer.getWorkSpace().getScreenManager().getContainer(); - var tip = mindplot.Tip.getInstance(divContainer); + //Remove + if (!this._readOnly) { - var container = new Element('div'); - var removeImage = new Element('img'); - removeImage.src = "../images/bin.png"; - removeImage.inject(container); + var deleteTip = new mindplot.ImageIcon.DeleteTip(this._topic.getId(), this); - if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) { + //Icon + var image = this.getImage(); + image.addEvent('click', function() { - removeImage.addEvent('click', function() { - var actionDispatcher = mindplot.ActionDispatcher.getInstance(); - actionDispatcher.removeIconFromTopic(this._topic.getId(), iconModel); - tip.forceClose(); - }); + var iconType = iconModel.getIconType(); + var newIconType = this._getNextFamilyIconId(iconType); + iconModel.setIconType(newIconType); - //Icon - var image = this.getImage(); - image.addEvent('click', function() { + var imgUrl = this._getImageUrl(newIconType); + this._image.setHref(imgUrl); - var iconType = iconModel.getIconType(); - var newIconType = this._getNextFamilyIconId(iconType); - iconModel.setIconType(newIconType); + }.bind(this)); - var imgUrl = this._getImageUrl(newIconType); - this._image.setHref(imgUrl); - - }.bind(this)); - - image.addEvent('mouseover', function(event) { - tip.open(event, container, this); - }.bind(this)); - - image.addEvent('mouseout', function(event) { - tip.close(event); - }); - - image.addEvent('mousemove', function(event) { - tip.updatePosition(event); - }); - - } - }, - - _getImageUrl : function(iconId) { - return "../icons/" + iconId + ".png"; - }, - - getModel : function() { - return this._iconModel; - }, - - _getNextFamilyIconId : function(iconId) { - - var familyIcons = this._getFamilyIcons(iconId); - $assert(familyIcons != null, "Family Icon not found!"); - - var result = null; - for (var i = 0; i < familyIcons.length && result == null; i++) { - if (familyIcons[i] == iconId) { - //Is last one? - if (i == (familyIcons.length - 1)) { - result = familyIcons[0]; - } else { - result = familyIcons[i + 1]; - } - break; - } - } - - return result; - }, - - _getFamilyIcons : function(iconId) { - $assert(iconId != null, "id must not be null"); - $assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')"); - - var result = null; - for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i++) { - var family = mindplot.ImageIcon.prototype.ICON_FAMILIES[i]; - var iconFamilyId = iconId.substr(0, iconId.indexOf("_")); - - if (family.id == iconFamilyId) { - result = family.icons; - break; - } - } - return result; - }, - - getId : function() { - return this._iconType; - }, - - getUiId : function() { - return this._uiId; + image.addEvent('mouseover', function(event) { + deleteTip.show(); + }); } + }, + + _getImageUrl : function(iconId) { + return "../icons/" + iconId + ".png"; + }, + + getModel : function() { + return this._iconModel; + }, + + _getNextFamilyIconId : function(iconId) { + + var familyIcons = this._getFamilyIcons(iconId); + $assert(familyIcons != null, "Family Icon not found!"); + + var result = null; + for (var i = 0; i < familyIcons.length && result == null; i++) { + if (familyIcons[i] == iconId) { + //Is last one? + if (i == (familyIcons.length - 1)) { + result = familyIcons[0]; + } else { + result = familyIcons[i + 1]; + } + break; + } + } + + return result; + }, + + _getFamilyIcons : function(iconId) { + $assert(iconId != null, "id must not be null"); + $assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')"); + + var result = null; + for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i++) { + var family = mindplot.ImageIcon.prototype.ICON_FAMILIES[i]; + var iconFamilyId = iconId.substr(0, iconId.indexOf("_")); + + if (family.id == iconFamilyId) { + result = family.icons; + break; + } + } + return result; + }, + + getId : function() { + return this._iconType; + }, + + getUiId : function() { + return this._uiId; } -); + +}); + +mindplot.ImageIcon.DeleteTip = new Class({ + initialize : function(topicId, icon) { + $assert(topicId, "topicId can not be null"); + $assert(icon, "iconModel can not be null"); + this._icon = icon; + this._topicId = topicId; + + this._registerEvents(); + }, + + _registerEvents : function() { + + this._containerElem = this._buildHtml(); + this._containerElem.inject($(document.body)); + + this._containerElem.addEvent('click', function() { + var actionDispatcher = mindplot.ActionDispatcher.getInstance(); + actionDispatcher.removeIconFromTopic(this._topicId, this._icon._iconModel); + this.close(); + }.bind(this)); + + + }, + + show : function() { + this._icon._image.positionRelativeTo(this._containerElem, { + position: 'upperRight', + offset: {x:10,y:-10} + }); + this._icon._image.setStroke(1,'dash','red'); + }, + + close : function() { + this._containerElem.dispose(); + }, + + _buildHtml : function() { + var result = new Element('div'); + result.setStyles({ + zIndex: "8", + width:"10px", + height:"10px", + 'background-color':'red'} + ); + return result; + } +}); mindplot.ImageIcon.prototype.ICON_FAMILIES = [ diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js index 0432d2b3..1892ba4b 100644 --- a/mindplot/src/main/javascript/MindmapDesigner.js +++ b/mindplot/src/main/javascript/MindmapDesigner.js @@ -39,7 +39,7 @@ mindplot.MindmapDesigner = new Class({ // Init Screen manager.. var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement); this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom); - this._readOnly = profile.readOnly; + this._readOnly = profile.readOnly ? true : false; // Init layout managers ... this._topics = []; @@ -112,6 +112,17 @@ mindplot.MindmapDesigner = new Class({ this._actionDispatcher.addTopic(model, centralTopicId, true); } }.bind(this)); + + + $(document).addEvent('mousewheel', function(event) { + if (event.wheel > 0) { + this.zoomIn(1.05); + } + else { + this.zoomOut(1.05); + } + }.bind(this)); + }, _getTopics : function() { @@ -201,8 +212,11 @@ mindplot.MindmapDesigner = new Class({ }, - zoomOut : function() { - var scale = this._zoom * 1.2; + zoomOut : function(factor) { + if (!factor) + factor = 1.2; + + var scale = this._zoom * factor; if (scale <= 4) { this._zoom = scale; this._workspace.setZoom(this._zoom); @@ -227,8 +241,11 @@ mindplot.MindmapDesigner = new Class({ }); }, - zoomIn : function() { - var scale = this._zoom / 1.2; + zoomIn : function(factor) { + if (!factor) + factor = 1.2; + + var scale = this._zoom / factor; if (scale >= 0.3) { this._zoom = scale; this._workspace.setZoom(this._zoom); @@ -640,7 +657,7 @@ mindplot.MindmapDesigner = new Class({ }, changeFontColor : function(color) { - $assert(color,"color can not be null"); + $assert(color, "color can not be null"); var validSelectedObjects = this._getValidSelectedObjectsIds(); var topicsIds = validSelectedObjects.nodes; if (topicsIds.length > 0) { diff --git a/mindplot/src/main/javascript/PersistanceManager.js b/mindplot/src/main/javascript/PersistanceManager.js index bc0b8f00..705079b9 100644 --- a/mindplot/src/main/javascript/PersistanceManager.js +++ b/mindplot/src/main/javascript/PersistanceManager.js @@ -37,7 +37,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa if (response.msgCode != "OK") { monitor.logError("Save could not be completed. Please,try again in a couple of minutes."); - wLogger.error(response.msgDetails); +// wLogger.error(response.msgDetails); } else { // Execute on success handler ... @@ -50,7 +50,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa errorHandler:function(message) { var monitor = core.Monitor.getInstance(); monitor.logError("Save could not be completed. Please,try again in a couple of minutes."); - wLogger.error(message); +// wLogger.error(message); }, verb:"POST", async: false @@ -82,7 +82,7 @@ mindplot.PersistanceManager.load = function(mapId) var msg = response.msgDetails; var monitor = core.Monitor.getInstance(); monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes."); - wLogger.error(msg); +// wLogger.error(msg); } }, verb:"GET", @@ -90,7 +90,7 @@ mindplot.PersistanceManager.load = function(mapId) errorHandler:function(msg) { var monitor = core.Monitor.getInstance(); monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes."); - wLogger.error(msg); +// wLogger.error(msg); } }); diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index 1c38f096..a939dc24 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -29,12 +29,11 @@ mindplot.TextEditor = new Class({ position:"absolute", display: "none", zIndex: "8", - top: 0, - left:0, width:"500px", height:"100px"} ); + var inputContainer = new Element('div'); inputContainer.setStyles({ border:"none", @@ -45,7 +44,7 @@ mindplot.TextEditor = new Class({ var inputText = new Element('input', {type:"text",tabindex:'-1', value:""}); inputText.setStyles({ border:"none", - background:"red" + background:"transparent" }); inputText.inject(inputContainer); @@ -58,6 +57,7 @@ mindplot.TextEditor = new Class({ spanElem.setStyle('nowrap', 'nowrap'); spanElem.inject(spanContainer); + return result; }, @@ -117,8 +117,7 @@ mindplot.TextEditor = new Class({ if (!this.isVisible()) { //Create editor ui var editorElem = this._buildEditor(); - // @Todo: What element associate ? - editorElem.inject($('mindplot')); + editorElem.inject($(document.body)); this._divElem = editorElem; this._registerEvents(editorElem); @@ -146,36 +145,18 @@ mindplot.TextEditor = new Class({ // Set editor's initial size var displayFunc = function() { - var textShape = topic.getTextShape(); - var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer); - - var screenPosition = mindplot.util.Converter.topicToScreenPosition(topic); - var textWidth = textShape.getWidth(); - var textHeight = textShape.getHeight(); - var iconGroup = topic.getIconGroup(); - var iconGroupSize; - - if ($defined(iconGroup)) { - iconGroupSize = topic.getIconGroup().getSize(); - } - else { - iconGroupSize = {width:0, height:0}; - } - - var position = {x:0,y:0}; - position.x = screenPosition.x - ((textWidth * scale.width) / 2) + (((iconGroupSize.width) * scale.width) / 2); - var fixError = 1; - position.y = screenPosition.y - ((textHeight * scale.height) / 2) - fixError; - - var elemSize = topic.getSize(); - // Position the editor and set the size... - this._setEditorSize(elemSize.width, elemSize.height, scale); - this._setPosition(position.x, position.y, scale); - - // Make the editor visible .... + var textShape = this._topic.getTextShape(); + textShape.positionRelativeTo(this._divElem, { + position: {x: 'left',y:'top'}, + edge: {x: 'left', y: 'top'} + }); this._divElem.setStyle('display', 'block'); + // Set size ... + var elemSize = topic.getSize(); + this._setEditorSize(elemSize.width, elemSize.height); + var inputElem = this._getInputElem(); inputElem.focus(); this._changeCursor(inputElem, $defined(defaultText)); @@ -232,7 +213,9 @@ mindplot.TextEditor = new Class({ return this._divElem.getElement('span'); }, - _setEditorSize : function (width, height, scale) { + _setEditorSize : function (width, height) { + var textShape = this._topic.getTextShape(); + var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer); this._size = {width:width * scale.width, height:height * scale.height}; this._divElem.style.width = this._size.width * 2 + "px"; this._divElem.style.height = this._size.height + "px"; @@ -275,8 +258,6 @@ mindplot.TextEditor = new Class({ // Remove it form the screen ... this._divElem.dispose(); this._divElem = null; - - console.log("closing ...."); } } }); diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index e30922a0..980f43bd 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -267,7 +267,7 @@ mindplot.Topic = new Class({ for (var i = 0; i < icons.length; i++) { // Update model identifier ... var iconModel = icons[i]; - var icon = new mindplot.ImageIcon(iconModel, this, designer); + var icon = new mindplot.ImageIcon(this, iconModel); result.addIcon(icon); } @@ -311,7 +311,7 @@ mindplot.Topic = new Class({ this._hasNote = true; }, - addIcon : function(iconType, designer) { + addIcon : function(iconType) { var iconGroup = this.getOrBuildIconGroup(); var model = this.getModel(); @@ -319,7 +319,7 @@ mindplot.Topic = new Class({ var iconModel = model.createIcon(iconType); model.addIcon(iconModel); - var imageIcon = new mindplot.ImageIcon(iconModel, this, designer); + var imageIcon = new mindplot.ImageIcon(this, iconModel); iconGroup.addIcon(imageIcon); return imageIcon; diff --git a/mindplot/src/main/javascript/collaboration/frameworks/brix/model/NodeModel.js b/mindplot/src/main/javascript/collaboration/frameworks/brix/model/NodeModel.js index 3c054ab6..2b132947 100644 --- a/mindplot/src/main/javascript/collaboration/frameworks/brix/model/NodeModel.js +++ b/mindplot/src/main/javascript/collaboration/frameworks/brix/model/NodeModel.js @@ -32,8 +32,10 @@ mindplot.collaboration.frameworks.brix.model.NodeModel = new Class({ }else{ var text = this._brixModel.get("text"); this.setText(text, false); + var position = this._brixModel.get("position"); this.setPosition(position.get("x"),position.get("y"), false); + var children = this._brixModel.get("children"); for(var i=0; i--> - +