Improve toolbar and editor size.

This commit is contained in:
Paulo Veiga 2011-08-05 01:06:56 -03:00
parent 0b3083d50c
commit 36e44c13ca
12 changed files with 204 additions and 382 deletions

View File

@ -55,9 +55,12 @@ mindplot.IconGroup = new Class({
}, },
addIcon : function(icon) { addIcon : function(icon) {
$defined(icon,"icon is not defined");
icon.setGroup(this); icon.setGroup(this);
var newIcon = icon.getImage(); var newIcon = icon.getImage();
var nativeElem = this.options.nativeElem; var nativeElem = this.options.nativeElem;
var iconSize = newIcon.getSize(); var iconSize = newIcon.getSize();
var size = nativeElem.getSize(); var size = nativeElem.getSize();
newIcon.setPosition(size.width, 0); newIcon.setPosition(size.width, 0);
@ -186,8 +189,10 @@ mindplot.IconGroup = new Class({
_calculateOffsets : function() { _calculateOffsets : function() {
var offset = this.options.topic.getOffset(); var offset = this.options.topic.getOffset();
var text = this.options.topic.getTextShape(); var text = this.options.topic.getTextShape();
var sizeHeight = text.getHtmlFontSize(); var sizeHeight = text.getHtmlFontSize();
var yOffset = offset; var yOffset = offset;
var shape = this.options.topic.getShapeType(); var shape = this.options.topic.getShapeType();
yOffset = text.getPosition().y + (sizeHeight - 18) / 2 + 1; yOffset = text.getPosition().y + (sizeHeight - 18) / 2 + 1;
return {x:offset, y:yOffset}; return {x:offset, y:yOffset};

View File

@ -22,6 +22,7 @@ mindplot.ImageIcon = new Class({
$assert(iconModel, 'iconModel can not be null'); $assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
$assert(designer, 'designer can not be null'); $assert(designer, 'designer can not be null');
this._topic = topic; this._topic = topic;
this._iconModel = iconModel; this._iconModel = iconModel;
this._designer = designer; this._designer = designer;
@ -47,11 +48,12 @@ mindplot.ImageIcon = new Class({
var actionDispatcher = mindplot.ActionDispatcher.getInstance(); var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.removeIconFromTopic(this._topic.getId(), iconModel); actionDispatcher.removeIconFromTopic(this._topic.getId(), iconModel);
tip.forceClose(); tip.forceClose();
}.bindWithEvent(this)); });
//Icon //Icon
var image = this.getImage(); var image = this.getImage();
image.addEventListener('click', function() { image.addEventListener('click', function() {
var iconType = iconModel.getIconType(); var iconType = iconModel.getIconType();
var newIconType = this._getNextFamilyIconId(iconType); var newIconType = this._getNextFamilyIconId(iconType);
iconModel.setIconType(newIconType); iconModel.setIconType(newIconType);
@ -59,21 +61,16 @@ mindplot.ImageIcon = new Class({
var imgUrl = this._getImageUrl(newIconType); var imgUrl = this._getImageUrl(newIconType);
this._image.setHref(imgUrl); this._image.setHref(imgUrl);
// // @Todo: Support revert of change icon ... }.bind(this));
// var actionRunner = designer._actionRunner;
// var command = new mindplot.commands.ChangeIconFromTopicCommand(this._topic.getId());
// this._actionRunner.execute(command);
}.bindWithEvent(this));
var imageIcon = this;
image.addEventListener('mouseover', function(event) { image.addEventListener('mouseover', function(event) {
tip.open(event, container, imageIcon); tip.open(event, container, this);
}); }.bind(this));
image.addEventListener('mouseout', function(event) { image.addEventListener('mouseout', function(event) {
tip.close(event); tip.close(event);
}); });
image.addEventListener('mousemove', function(event) { image.addEventListener('mousemove', function(event) {
tip.updatePosition(event); tip.updatePosition(event);
}); });

View File

@ -23,6 +23,11 @@ mindplot.LocalActionDispatcher = new Class({
this._actionRunner = new mindplot.DesignerActionRunner(commandContext, this); this._actionRunner = new mindplot.DesignerActionRunner(commandContext, this);
}, },
hasBeenChanged: function() {
// @todo: This don't seems to belong here.
this._actionRunner.hasBeenChanged();
},
addIconToTopic: function(topicId, iconType) { addIconToTopic: function(topicId, iconType) {
var command = new mindplot.commands.AddIconToTopicCommand(topicId, iconType); var command = new mindplot.commands.AddIconToTopicCommand(topicId, iconType);
this.execute(command); this.execute(command);

View File

@ -64,9 +64,7 @@ mindplot.MindmapDesigner = new Class({
}, },
addEventListener : function(eventType, listener) { addEventListener : function(eventType, listener) {
this._events[eventType] = listener; this._events[eventType] = listener;
}, },
_fireEvent : function(eventType, event) { _fireEvent : function(eventType, event) {
@ -86,7 +84,7 @@ mindplot.MindmapDesigner = new Class({
// Create nodes on double click... // Create nodes on double click...
screenManager.addEventListener('click', function(event) { screenManager.addEventListener('click', function(event) {
if (workspace.isWorkspaceEventsEnabled()) { if (workspace.isWorkspaceEventsEnabled()) {
var t = mindmapDesigner.getEditor().isVisible(); mindmapDesigner.getEditor().isVisible();
mindmapDesigner.getEditor().lostFocus(); mindmapDesigner.getEditor().lostFocus();
// @todo: Puaj hack... // @todo: Puaj hack...
mindmapDesigner._cleanScreen(); mindmapDesigner._cleanScreen();
@ -157,14 +155,14 @@ mindplot.MindmapDesigner = new Class({
onObjectFocusEvent : function(currentObject, event) { onObjectFocusEvent : function(currentObject, event) {
this.getEditor().lostFocus(); this.getEditor().lostFocus();
var selectableObjects = this.getSelectedObjects(); var selectableObjects = this.getSelectedObjects();
// Disable all nodes on focus but not the current if Ctrl key isn't being pressed // Disable all nodes on focus but not the current if Ctrl key isn't being pressed
if (!$defined(event) || event.ctrlKey) { if (!$defined(event) || event.ctrlKey == false) {
for (var i = 0; i < selectableObjects.length; i++) { selectableObjects.forEach(function(selectableObject) {
var selectableObject = selectableObjects[i];
if (selectableObject.isOnFocus() && selectableObject != currentObject) { if (selectableObject.isOnFocus() && selectableObject != currentObject) {
selectableObject.setOnFocus(false); selectableObject.setOnFocus(false);
} }
} });
} }
}, },
@ -351,7 +349,8 @@ mindplot.MindmapDesigner = new Class({
this._fireEvent("loadsuccess"); this._fireEvent("loadsuccess");
}, }
,
load : function(mapId) { load : function(mapId) {
$assert(mapId, 'mapName can not be null'); $assert(mapId, 'mapName can not be null');
@ -370,7 +369,8 @@ mindplot.MindmapDesigner = new Class({
this._goToNode.attempt(centralTopic, this); this._goToNode.attempt(centralTopic, this);
this._fireEvent("loadsuccess"); this._fireEvent("loadsuccess");
}, }
,
_loadMap : function(mapId, mindmapModel) { _loadMap : function(mapId, mindmapModel) {
var designer = this; var designer = this;
@ -383,7 +383,7 @@ mindplot.MindmapDesigner = new Class({
for (var i = 0; i < branches.length; i++) { for (var i = 0; i < branches.length; i++) {
// NodeModel -> NodeGraph ... // NodeModel -> NodeGraph ...
var nodeModel = branches[i]; var nodeModel = branches[i];
var nodeGraph = this._nodeModelToNodeGraph(nodeModel); var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
// Update shrink render state... // Update shrink render state...
nodeGraph.setBranchVisibility(true); nodeGraph.setBranchVisibility(true);
@ -399,42 +399,46 @@ mindplot.MindmapDesigner = new Class({
}); });
this._fireEvent("loadsuccess"); this._fireEvent("loadsuccess");
}, }
,
getMindmap : function() { getMindmap : function() {
return this._mindmap; return this._mindmap;
}, }
,
undo : function() { undo : function() {
this._actionRunner.undo(); this._actionRunner.undo();
}, }
,
redo : function() { redo : function() {
this._actionRunner.redo(); this._actionRunner.redo();
}, }
,
_nodeModelToNodeGraph : function(nodeModel, isVisible) { _nodeModelToNodeGraph : function(nodeModel, isVisible) {
$assert(nodeModel, "Node model can not be null"); $assert(nodeModel, "Node model can not be null");
var nodeGraph = this._buildNodeGraph(nodeModel); var nodeGraph = this._buildNodeGraph(nodeModel);
if ($defined(isVisible)) if (isVisible)
nodeGraph.setVisibility(isVisible); nodeGraph.setVisibility(isVisible);
var children = nodeModel.getChildren().slice(); var children = nodeModel.getChildren().slice();
children = this._layoutManager.prepareNode(nodeGraph, children); children = this._layoutManager.prepareNode(nodeGraph, children);
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var child = children[i]; var child = children[i];
if ($defined(child)) if ($defined(child))
this._nodeModelToNodeGraph(child); this._nodeModelToNodeGraph(child, false);
} }
var workspace = this._workspace; var workspace = this._workspace;
workspace.appendChild(nodeGraph); workspace.appendChild(nodeGraph);
return nodeGraph; return nodeGraph;
}, }
,
_relationshipModelToRelationship : function(model) { _relationshipModelToRelationship : function(model) {
$assert(model, "Node model can not be null"); $assert(model, "Node model can not be null");
@ -467,7 +471,6 @@ mindplot.MindmapDesigner = new Class({
}, },
_buildRelationship : function (model) { _buildRelationship : function (model) {
var workspace = this._workspace;
var elem = this; var elem = this;
var fromNodeId = model.getFromNode(); var fromNodeId = model.getFromNode();
@ -508,7 +511,6 @@ mindplot.MindmapDesigner = new Class({
relationLine.setModel(model); relationLine.setModel(model);
//Add Listeners //Add Listeners
var elem = this;
relationLine.addEventListener('onfocus', function(event) { relationLine.addEventListener('onfocus', function(event) {
elem.onObjectFocusEvent.attempt([relationLine, event], elem); elem.onObjectFocusEvent.attempt([relationLine, event], elem);
}); });
@ -850,6 +852,8 @@ mindplot.MindmapDesigner = new Class({
this._showEditor(key); this._showEditor(key);
} }
else { else {
var nodes;
var node;
switch (key) { switch (key) {
case 'delete': case 'delete':
this.deleteCurrentNode(); this.deleteCurrentNode();
@ -863,9 +867,9 @@ mindplot.MindmapDesigner = new Class({
this.createChildForSelectedNode(); this.createChildForSelectedNode();
break; break;
case 'right': case 'right':
var nodes = this._getSelectedNodes(); nodes = this._getSelectedNodes();
if (nodes.length > 0) { if (nodes.length > 0) {
var node = nodes[0]; node = nodes[0];
if (node.getTopicType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToSideChild(node, 'RIGHT'); this._goToSideChild(node, 'RIGHT');
} }
@ -880,9 +884,9 @@ mindplot.MindmapDesigner = new Class({
} }
break; break;
case 'left': case 'left':
var nodes = this._getSelectedNodes(); nodes = this._getSelectedNodes();
if (nodes.length > 0) { if (nodes.length > 0) {
var node = nodes[0]; node = nodes[0];
if (node.getTopicType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToSideChild(node, 'LEFT'); this._goToSideChild(node, 'LEFT');
} }
@ -897,18 +901,18 @@ mindplot.MindmapDesigner = new Class({
} }
break; break;
case'up': case'up':
var nodes = this._getSelectedNodes(); nodes = this._getSelectedNodes();
if (nodes.length > 0) { if (nodes.length > 0) {
var node = nodes[0]; node = nodes[0];
if (node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'UP'); this._goToBrother(node, 'UP');
} }
} }
break; break;
case 'down': case 'down':
var nodes = this._getSelectedNodes(); nodes = this._getSelectedNodes();
if (nodes.length > 0) { if (nodes.length > 0) {
var node = nodes[0]; node = nodes[0];
if (node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'DOWN'); this._goToBrother(node, 'DOWN');
} }
@ -918,8 +922,7 @@ mindplot.MindmapDesigner = new Class({
this._showEditor(); this._showEditor();
break; break;
case 'space': case 'space':
nodes = this._getSelectedNodes();
var nodes = this._getSelectedNodes();
if (nodes.length > 0) { if (nodes.length > 0) {
var topic = nodes[0]; var topic = nodes[0];
@ -932,9 +935,9 @@ mindplot.MindmapDesigner = new Class({
evt.preventDefault(); evt.preventDefault();
break; break;
case 'esc': case 'esc':
var nodes = this._getSelectedNodes(); nodes = this._getSelectedNodes();
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
var node = nodes[i]; node = nodes[i];
node.setOnFocus(false); node.setOnFocus(false);
} }
break; break;

View File

@ -74,13 +74,10 @@ mindplot.NodeGraph = new Class({
this._model.setSize(size.width, size.height); this._model.setSize(size.width, size.height);
}, },
getModel getModel:function() {
:
function() {
$assert(this._model, 'Model has not been initialized yet'); $assert(this._model, 'Model has not been initialized yet');
return this._model; return this._model;
} },
,
setModel : function(model) { setModel : function(model) {
$assert(model, 'Model can not be null'); $assert(model, 'Model can not be null');

View File

@ -30,8 +30,7 @@ mindplot.Topic = new Class({
this._buildShape(); this._buildShape();
this.setMouseEventsEnabled(true); this.setMouseEventsEnabled(true);
// Positionate topic .... // Position a topic ....
var model = this.getModel();
var pos = model.getPosition(); var pos = model.getPosition();
if (pos != null && model.getType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { if (pos != null && model.getType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) {
this.setPosition(pos); this.setPosition(pos);
@ -65,8 +64,8 @@ mindplot.Topic = new Class({
//Let's register all the events. The first one is the default one. The others will be copied. //Let's register all the events. The first one is the default one. The others will be copied.
//this._registerDefaultListenersToElement(innerShape, this); //this._registerDefaultListenersToElement(innerShape, this);
var dispatcher = dispatcherByEventType['mousedown']; var dispatcher = dispatcherByEventType['mousedown'];
if ($defined(dispatcher)) { if ($defined(dispatcher)) {
for (var i = 1; i < dispatcher._listeners.length; i++) { for (var i = 1; i < dispatcher._listeners.length; i++) {
innerShape.addEventListener('mousedown', dispatcher._listeners[i]); innerShape.addEventListener('mousedown', dispatcher._listeners[i]);
@ -245,7 +244,7 @@ mindplot.Topic = new Class({
return this._icon; return this._icon;
}, },
_buildIconGroup : function(disableEventsListeners) { _buildIconGroup : function() {
var result = new mindplot.IconGroup(this); var result = new mindplot.IconGroup(this);
var model = this.getModel(); var model = this.getModel();
@ -455,16 +454,6 @@ mindplot.Topic = new Class({
var model = this.getModel(); var model = this.getModel();
model.setFontFamily(value); model.setFontFamily(value);
} }
/*var elem = this;
var executor = function(editor)
{
return function()
{
elem.updateNode(updateModel);
};
};
setTimeout(executor(this), 0);*/
core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]); core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]);
}, },
@ -475,16 +464,6 @@ mindplot.Topic = new Class({
var model = this.getModel(); var model = this.getModel();
model.setFontSize(value); model.setFontSize(value);
} }
/*var elem = this;
var executor = function(editor)
{
return function()
{
elem.updateNode(updateModel);
};
};
setTimeout(executor(this), 0);*/
core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]); core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]);
}, },
@ -496,16 +475,6 @@ mindplot.Topic = new Class({
var model = this.getModel(); var model = this.getModel();
model.setFontStyle(value); model.setFontStyle(value);
} }
/*var elem = this;
var executor = function(editor)
{
return function()
{
elem.updateNode(updateModel);
};
};
setTimeout(executor(this), 0);*/
core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]); core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]);
}, },
@ -870,9 +839,7 @@ mindplot.Topic = new Class({
}, },
moveToBack : function() { moveToBack : function() {
// this._helpers.forEach(function(helper, index){
// helper.moveToBack();
// });
// Update relationship lines // Update relationship lines
for (var j = 0; j < this._relationships.length; j++) { for (var j = 0; j < this._relationships.length; j++) {
this._relationships[j].moveToBack(); this._relationships[j].moveToBack();
@ -883,8 +850,6 @@ mindplot.Topic = new Class({
} }
this.get2DElement().moveToBack(); this.get2DElement().moveToBack();
}, },
moveToFront : function() { moveToFront : function() {
@ -973,14 +938,6 @@ mindplot.Topic = new Class({
type = 'mousedown'; type = 'mousedown';
} }
/* var textShape = this.getTextShape();
textShape.addEventListener(type, listener);
var outerShape = this.getOuterShape();
outerShape.addEventListener(type, listener);
var innerShape = this.getInnerShape();
innerShape.addEventListener(type, listener);*/
var shape = this.get2DElement(); var shape = this.get2DElement();
shape.addEventListener(type, listener); shape.addEventListener(type, listener);
}, },
@ -990,15 +947,6 @@ mindplot.Topic = new Class({
if (type == 'onfocus') { if (type == 'onfocus') {
type = 'mousedown'; type = 'mousedown';
} }
/*var textShape = this.getTextShape();
textShape.removeEventListener(type, listener);
var outerShape = this.getOuterShape();
outerShape.removeEventListener(type, listener);
var innerShape = this.getInnerShape();
innerShape.removeEventListener(type, listener);*/
var shape = this.get2DElement(); var shape = this.get2DElement();
shape.removeEventListener(type, listener); shape.removeEventListener(type, listener);
}, },

View File

@ -41,7 +41,7 @@ mindplot.commands.AddTopicCommand = new Class(
var doneFn = function() { var doneFn = function() {
// Finally, focus ... // Finally, focus ...
var designer = commandContext._designer; var designer = commandContext._designer;
designer.onObjectFocusEvent.attempt(topic, designer); designer.onObjectFocusEvent(topic);
topic.setOnFocus(true); topic.setOnFocus(true);
}; };

View File

@ -63,15 +63,19 @@ mindplot.layout.OriginalLayoutManager = new Class({
nodesByOrder = null; nodesByOrder = null;
return node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE ? result : children; return node.getTopicType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE ? result : children;
}, },
_nodeResizeEvent:function(node) { _nodeResizeEvent:function(node) {
}, },
_nodeRepositionateEvent:function(node) { _nodeRepositionateEvent:function(node) {
this.getTopicBoardForTopic(node).repositionate(); this.getTopicBoardForTopic(node).repositionate();
}, },
getDragTopicPositioner : function() { getDragTopicPositioner : function() {
return this._dragTopicPositioner; return this._dragTopicPositioner;
}, },
_buildDragManager: function(workspace) { _buildDragManager: function(workspace) {
// Init dragger manager. // Init dragger manager.
var dragger = new mindplot.DragManager(workspace); var dragger = new mindplot.DragManager(workspace);
@ -116,11 +120,12 @@ mindplot.layout.OriginalLayoutManager = new Class({
return dragger; return dragger;
}, },
registerListenersOnNode : function(topic) { registerListenersOnNode : function(topic) {
// Register node listeners ... // Register node listeners ...
var designer = this.getDesigner(); var designer = this.getDesigner();
topic.addEventListener('onfocus', function(event) { topic.addEventListener('onfocus', function(event) {
designer.onObjectFocusEvent.attempt([topic, event], designer); designer.onObjectFocusEvent(topic, event);
}); });
// Add drag behaviour ... // Add drag behaviour ...
@ -137,12 +142,15 @@ mindplot.layout.OriginalLayoutManager = new Class({
} }
}, },
_createMainTopicBoard:function(node) { _createMainTopicBoard:function(node) {
return new mindplot.MainTopicBoard(node, this); return new mindplot.MainTopicBoard(node, this);
}, },
_createCentralTopicBoard:function(node) { _createCentralTopicBoard:function(node) {
return new mindplot.CentralTopicBoard(node, this); return new mindplot.CentralTopicBoard(node, this);
}, },
getClassName:function() { getClassName:function() {
return mindplot.layout.OriginalLayoutManager.NAME; return mindplot.layout.OriginalLayoutManager.NAME;
} }

View File

@ -123,7 +123,7 @@ html {
color: #ffffff; color: #ffffff;
border-bottom: 2px solid black; border-bottom: 2px solid black;
position: absolute; position: absolute;
top: 35px; top: 0;
} }
div#toolbar .buttonContainer { div#toolbar .buttonContainer {
@ -134,9 +134,8 @@ div#toolbar .buttonContainer {
.buttonContainer fieldset { .buttonContainer fieldset {
border: 1px solid #BBB4D6; border: 1px solid #BBB4D6;
padding: 2px; padding: 2px 2px 4px;
margin: 1px; margin: 8px 1px 1px;
padding-bottom: 4px;
} }
.buttonContainer legend { .buttonContainer legend {
@ -209,15 +208,15 @@ div#file, div#zoom, div#node, div#font, div#share {
} }
div#zoom { div#zoom {
left: 229px; left: 84px;
} }
div#node { div#node {
left: 311px; left: 165px;
} }
div#font { div#font {
left: 679px; /*left:581px;*/ left: 532px; /*left:581px;*/
} }
div#share { div#share {
@ -547,7 +546,7 @@ div#tabs {
div.tabContent { div.tabContent {
clear: left; clear: left;
width: 100%; width: 100%;
height: 63px; height: 50px;
border-bottom: 1px solid #bbb4d6; border-bottom: 1px solid #bbb4d6;
border-top: 1px solid #bbb4d6; border-top: 1px solid #bbb4d6;
background: #E5E5E5; background: #E5E5E5;
@ -608,7 +607,7 @@ ol#toc span {
#mindplot { #mindplot {
position: relative; position: relative;
top: 103px; top: 53px;
left: 0; left: 0;
width: 100%; width: 100%;
border: 0; border: 0;

View File

@ -41,7 +41,7 @@
<div id="waitingContainer"> <div id="waitingContainer">
<div class="loadingIcon"></div> <div class="loadingIcon"></div>
<div class="loadingText"> <div class="loadingText">
SYMB_EDITOR.LOADING Loading ...
</div> </div>
</div> </div>
</div> </div>
@ -50,7 +50,7 @@
<div id="errorContainer"> <div id="errorContainer">
<div class="loadingIcon"></div> <div class="loadingIcon"></div>
<div class="loadingText"> <div class="loadingText">
SYMB_EDITOR.ERROR_LOADING Unexpected error loading your map :(
</div> </div>
</div> </div>
</div> </div>
@ -98,7 +98,6 @@
</div> </div>
<div id="topicShapePanel" class="toolbarPanel"> <div id="topicShapePanel" class="toolbarPanel">
<!--<div id="automatic" class="toolbarPanelLink">Automatic</div>-->
<div id="rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle.png" alt="Rectangle" width="40" <div id="rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle.png" alt="Rectangle" width="40"
height="25"></div> height="25"></div>
<div id="rounded_rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle-rounded.png" <div id="rounded_rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle-rounded.png"
@ -115,223 +114,106 @@
<div id="editTab" class="tabContent"> <div id="editTab" class="tabContent">
<div id="file" class="buttonContainer" title="SYMB_ FILE"> <div id="file" class="buttonContainer" title="SYMB_ FILE">
<fieldset> <fieldset>
<legend> <div id="undoEdition" class="button" title="Undo Edition">
SYMB_FILE
</legend>
<div id="saveButton" class="button" title="SYMB_SAVE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Undo</p>
SYMB_SAVE
</p>
</div> </div>
</div> </div>
<div id="discardButton" class="button" title="SYMB_ CLOSE"> <div id="redoEdition" class="button" title="Redo Edition">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Redo</p>
SYMB_CLOSE
</p>
</div> </div>
</div> </div>
<div id="undoEdition" class="button" title="SYMB_ UNDO_EDITION">
<div class="toolbarLabel">
<p>
SYMB_UNDO
</p>
</div>
</div>
<div id="redoEdition" class="button" title="SYMB_ REDO_EDITION">
<div class="toolbarLabel">
<p>
SYMB_REDO
</p>
</div>
</div>
<div id="print" class="button" title="SYMB_ PRINT" onclick="printMap();">
<div class="toolbarLabel">
<p>
SYMB_PRINT
</p>
</div>
</div>
<div id="export" class="button" title="SYMB_ EXPORT">
<div class="toolbarLabel">
<p>
SYMB_EXPORT
</p>
</div>
<a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
title="SYMB_ EXPORT_DETAILS">
</a>
</div>
</fieldset> </fieldset>
</div> </div>
<div id="zoom" class="buttonContainer" title="Zoom In"> <div id="zoom" class="buttonContainer" title="Zoom In">
<fieldset> <fieldset>
<legend> <div id="zoomIn" class="button" title="Zoom In">
SYMB_ZOOM
</legend>
<div id="zoomIn" class="button" title="SYMB_ ZOOM_IN">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>In</p>
SYMB_IN
</p>
</div> </div>
</div> </div>
<div id="zoomOut" class="button" title="SYMB_ ZOOM_OUT"> <div id="zoomOut" class="button" title="Zoom Out">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Out</p>
SYMB_OUT
</p>
</div> </div>
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div id="node" class="buttonContainer" title="Node Properties"> <div id="node" class="buttonContainer" title="Node Properties">
<fieldset> <fieldset>
<legend>
SYMB_TOPIC
</legend>
<div id="topicShape" class="button comboButton" title="SYMB_TOPIC_SHAPE"> <div id="topicShape" class="button comboButton" title="SYMB_TOPIC_SHAPE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Shape</p>
SYMB_SHAPE
</p>
</div> </div>
</div> </div>
<div id="addTopic" class="button" title="SYMB_ TOPIC_ADD"> <div id="addTopic" class="button" title="SYMB_ TOPIC_ADD">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Add</p>
SYMB_ADD
</p>
</div> </div>
</div> </div>
<div id="deleteTopic" class="button" title="SYMB_ TOPIC_DELETE"> <div id="deleteTopic" class="button" title="SYMB_ TOPIC_DELETE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Delete</p>
SYMB_DELETE
</p>
</div> </div>
</div> </div>
<div id="topicBorder" class="button comboButton" title="SYMB_ TOPIC_BORDER_COLOR"> <div id="topicBorder" class="button comboButton" title="SYMB_ TOPIC_BORDER_COLOR">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Border</p>
SYMB_BORDER
</p>
</div> </div>
</div> </div>
<div id="topicColor" class="button comboButton" title="SYMB_ TOPIC_BACKGROUND_COLOR"> <div id="topicColor" class="button comboButton" title="Background Color">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Color</p>
SYMB_COLOR
</p>
</div> </div>
</div> </div>
<div id="topicIcon" class="button comboButton" title="SYMB_ TOPIC_ICON"> <div id="topicIcon" class="button comboButton" title="Change Icon">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Icon</p>
SYMB_ICON
</p>
</div> </div>
</div> </div>
<div id="topicNote" class="button comboButton" title="SYMB_ TOPIC_NOTE"> <div id="topicNote" class="button comboButton" title="Add Note">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Note</p>
SYMB_NOTE
</p>
</div> </div>
</div> </div>
<div id="topicLink" class="button" title="SYMB_ TOPIC_LINK"> <div id="topicLink" class="button" title="Add Link">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Link</p>
SYMB_LINK
</p>
</div> </div>
</div> </div>
<div id="topicRelation" class="topicRelation button" title="SYMB_ TOPIC_RELATIONSHIP"> <div id="topicRelation" class="topicRelation button" title="Add Relationship">
<div class="relationshiplabel toolbarLabel"> <div class="relationshiplabel toolbarLabel">
<p> <p>Relationship</p>
SYMB_TOPIC_RELATIONSHIP
</p>
</div> </div>
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div id="font" class="buttonContainer" title="Font Properties"> <div id="font" class="buttonContainer" title="Font Properties">
<fieldset> <fieldset>
<legend> <div id="fontFamily" class="button comboButton" title="Font Style">
SYMB_FONT
</legend>
<div id="fontFamily" class="button comboButton" title="SYMB_ FONT_TYPE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Style</p>
SYMB_TYPE
</p>
</div> </div>
</div> </div>
<div id="fontSize" class="button comboButton" title="SYMB_ FONT_SIZE"> <div id="fontSize" class="button comboButton" title="Font Size">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Size</p>
SYMB_SIZE
</p>
</div> </div>
</div> </div>
<div id="fontBold" class="button" title="SYMB_ FONT_BOLD"> <div id="fontBold" class="button" title="Bold Style">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Bold</p>
SYMB_BOLD
</p>
</div> </div>
</div> </div>
<div id="fontItalic" class="button" title="SYMB_ FONT_ITALIC"> <div id="fontItalic" class="button" title="Italic Style">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Italic</p>
SYMB_ITALIC
</p>
</div> </div>
</div> </div>
<div id="fontColor" class="button comboButton" title="SYMB_ FONT_COLOR"> <div id="fontColor" class="button comboButton" title="Fond Color">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p> <p>Color</p>
SYMB_COLOR
</p>
</div>
</div>
</fieldset>
</div>
<div id="share" class="buttonContainer" title="Share Properties">
<fieldset>
<legend>
SYMB_COLLABORATION
</legend>
<div id="tagIt" class="button" title="SYMB_ TAG">
<div class="toolbarLabel">
<p>
SYMB_TAG
</p>
</div>
</div>
<div id="shareIt" class="button" title="SYMB_ COLLABORATE">
<div class="toolbarLabel">
<p>
SYMB_SHARE
</p>
</div>
</div>
<div id="publishIt" class="button" title="SYMB_ PUBLISH">
<div class="toolbarLabel">
<p>
SYMB_PUBLISH
</p>
</div>
</div>
<div id="history" class="button" title="SYMB_ HISTORY_MSG">
<div class="toolbarLabel">
<p>
SYMB_HISTORY
</p>
</div> </div>
</div> </div>
</fieldset> </fieldset>

View File

@ -179,10 +179,12 @@ function afterMindpotLibraryLoading() {
var iconChooser = buildIconChooser(); var iconChooser = buildIconChooser();
iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser}); iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
// Register Events ... // Register Events ...
$(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
$("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
//
$('zoomIn').addEvent('click', function(event) { $('zoomIn').addEvent('click', function(event) {
designer.zoomIn(); designer.zoomIn();
}); });
@ -219,7 +221,6 @@ function afterMindpotLibraryLoading() {
}); });
$('deleteTopic').addEvent('click', function(event) { $('deleteTopic').addEvent('click', function(event) {
var topics = designer.getSelectedNodes();
designer.deleteCurrentNode(); designer.deleteCurrentNode();
}); });
@ -254,7 +255,8 @@ function afterMindpotLibraryLoading() {
removeCurrentColorPicker.attempt(colorPicker2, context); removeCurrentColorPicker.attempt(colorPicker2, context);
} }
}); });
$('topicLink').addEvent('click', function(event) {
$('topicLink').addEvent('click', function() {
designer.addLink2SelectedNode(); designer.addLink2SelectedNode();
}); });
@ -263,17 +265,16 @@ function afterMindpotLibraryLoading() {
designer.addRelationShip2SelectedNode(event); designer.addRelationShip2SelectedNode(event);
}); });
$('topicNote').addEvent('click', function(event) { $('topicNote').addEvent('click', function() {
designer.addNote2SelectedNode(); designer.addNote2SelectedNode();
}); });
$('fontBold').addEvent('click', function() {
$('fontBold').addEvent('click', function(event) {
designer.setWeight2SelectedNode(); designer.setWeight2SelectedNode();
}); });
$('fontItalic').addEvent('click', function(event) { $('fontItalic').addEvent('click', function() {
designer.setStyle2SelectedNode(); designer.setStyle2SelectedNode();
}); });
@ -293,43 +294,19 @@ function afterMindpotLibraryLoading() {
} }
}); });
// Save event handler ....
var saveButton = $('saveButton');
saveButton.addEvent('click', function(event) {
saveButton.setStyle('cursor', 'wait');
var saveFunc = function() {
designer.save(function() {
var monitor = core.Monitor.getInstance();
monitor.logMessage('Save completed successfully');
saveButton.setStyle('cursor', 'pointer');
}, true);
}
saveFunc.delay(1);
});
var discardButton = $('discardButton');
discardButton.addEvent('click', function(event) {
displayLoading();
window.document.location = "mymaps.htm";
});
// To prevent the user from leaving the page with changes ... // To prevent the user from leaving the page with changes ...
window.onbeforeunload = function confirmExit() { window.onbeforeunload = function () {
if (designer.needsSave()) { if (designer.needsSave()) {
designer.save(null, false) designer.save(null, false)
} }
} };
// Build panels ... // Build panels ...
fontFamilyPanel(); fontFamilyPanel();
shapeTypePanel(); shapeTypePanel();
fontSizePanel(); fontSizePanel();
// If not problem has occured, I close the dialog ... // If not problem has arisen, close the dialog ...
var closeDialog = function() { var closeDialog = function() {
if (!window.hasUnexpectedErrors) { if (!window.hasUnexpectedErrors) {
@ -388,7 +365,7 @@ function buildMindmapDesigner() {
var screenHeight = window.getHeight(); var screenHeight = window.getHeight();
// header - footer // header - footer
screenHeight = screenHeight - 90 - 61; screenHeight = screenHeight-115;
// body margin ... // body margin ...
editorProperties.width = screenWidth; editorProperties.width = screenWidth;
@ -561,7 +538,7 @@ function JSPomLoader(pomUrl, callback) {
callback(); callback();
} else { } else {
var url = urls.pop(); var url = urls.pop();
console.log("load url:" + url); // console.log("load url:" + url);
Asset.javascript(url, { Asset.javascript(url, {
onLoad: function() { onLoad: function() {
jsRecLoad(urls) jsRecLoad(urls)

View File

@ -226,9 +226,9 @@ function afterMindpotLibraryLoading() {
}); });
$('deleteTopic').addEvent('click', function(event) { $('deleteTopic').addEvent('click', function(event) {
var topics = designer.getSelectedNodes();
designer.deleteCurrentNode(); designer.deleteCurrentNode();
}); });
var context = this; var context = this;
var colorPicker1 = new MooRainbow('topicColor', { var colorPicker1 = new MooRainbow('topicColor', {
id: 'topicColor', id: 'topicColor',
@ -245,6 +245,7 @@ function afterMindpotLibraryLoading() {
removeCurrentColorPicker.attempt(colorPicker1, context); removeCurrentColorPicker.attempt(colorPicker1, context);
} }
}); });
var colorPicker2 = new MooRainbow('topicBorder', { var colorPicker2 = new MooRainbow('topicBorder', {
id: 'topicBorder', id: 'topicBorder',
imgPath: '../images/', imgPath: '../images/',
@ -260,6 +261,7 @@ function afterMindpotLibraryLoading() {
removeCurrentColorPicker.attempt(colorPicker2, context); removeCurrentColorPicker.attempt(colorPicker2, context);
} }
}); });
$('topicLink').addEvent('click', function(event) { $('topicLink').addEvent('click', function(event) {
designer.addLink2SelectedNode(); designer.addLink2SelectedNode();
@ -274,7 +276,6 @@ function afterMindpotLibraryLoading() {
}); });
$('fontBold').addEvent('click', function(event) { $('fontBold').addEvent('click', function(event) {
designer.setWeight2SelectedNode(); designer.setWeight2SelectedNode();
}); });
@ -391,7 +392,7 @@ function afterMindpotLibraryLoading() {
autosave.periodical(30000); autosave.periodical(30000);
// To prevent the user from leaving the page with changes ... // To prevent the user from leaving the page with changes ...
window.onbeforeunload = function confirmExit() { window.onbeforeunload = function() {
if (designer.needsSave()) { if (designer.needsSave()) {
designer.save(null, false) designer.save(null, false)
} }