Fix resize issue. Need to work on centering the node.

This commit is contained in:
Paulo Veiga 2011-08-26 19:41:50 -03:00
parent 421cbdbb61
commit 26759bd437
11 changed files with 88 additions and 109 deletions

View File

@ -170,7 +170,7 @@
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="EditNoteDialog.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/>

View File

@ -33,8 +33,8 @@ mindplot.MindmapDesigner = new Class({
this._model = new mindplot.DesignerModel(profile);
// Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._model.getZoom());
var screenManager = new mindplot.ScreenManager(divElement);
this._workspace = new mindplot.Workspace(screenManager, this._model.getZoom());
this._readOnly = profile.readOnly ? true : false;
// Init layout managers ...
@ -77,7 +77,8 @@ mindplot.MindmapDesigner = new Class({
});
// Clean some selected nodes on event ..
this._cleanScreen();
if (this._cleanScreen)
this._cleanScreen();
}.bind(this));
@ -129,6 +130,9 @@ mindplot.MindmapDesigner = new Class({
}
},
setViewPort : function(size) {
this._workspace.setViewPort(size);
},
_buildNodeGraph : function(model) {
var workspace = this._workspace;
@ -761,8 +765,8 @@ mindplot.MindmapDesigner = new Class({
addNote : function() {
var model = this.getModel();
var topic = model.selectedTopic();
if (topic!=null) {
topic.showNoteEditor();
if (topic != null) {
topic.showNoteEditor();
} else {
core.Monitor.getInstance().logMessage('At least one topic must be selected to execute this operation.');
}

View File

@ -17,14 +17,16 @@
*/
mindplot.ScreenManager = new Class({
initialize:function(width, height, divElement) {
initialize:function(divElement) {
$assert(divElement, "can not be null");
this._divContainer = divElement;
this._offset = {x:0,y:0};
// Ignore default click event propagation. Prevent 'click' event on drad.
this._clickEvents = [];
this._divContainer.addEvent('click',function(event){event.stopPropagation()});
this._divContainer.addEvent('click', function(event) {
event.stopPropagation()
});
// @Todo: This must be resolved in other way ...
mindplot.util.Converter.setScreenManager(this);
@ -51,9 +53,8 @@ mindplot.ScreenManager = new Class({
fireEvent : function(type, event) {
if (type == 'click') {
this._clickEvents.forEach(function(listener)
{
listener(type,event);
this._clickEvents.forEach(function(listener) {
listener(type, event);
});
}
else {
@ -150,4 +151,5 @@ mindplot.ScreenManager = new Class({
setOffset : function(x, y) {
this._offset.x = x;
this._offset.y = y;
}});
}
});

View File

@ -780,7 +780,7 @@ mindplot.Topic = new Class({
}
};
var editor = new mindplot.widget.EditNoteDialog(editorModel);
var editor = new mindplot.widget.NoteEditor(editorModel);
editor.show();
},

View File

@ -17,41 +17,32 @@
*/
mindplot.Workspace = new Class({
initialize: function(profile, screenManager, zoom) {
initialize: function(screenManager, zoom) {
// Create a suitable container ...
$assert(screenManager, 'Div container can not be null');
$assert(zoom, 'zoom container can not be null');
this._zoom = zoom;
this._screenManager = screenManager;
this._screenWidth = profile.width;
this._screenHeight = profile.height;
// Initalize web2d workspace.
var workspace = this._createWorkspace(profile);
var divContainer = screenManager.getContainer();
this._screenWidth = parseInt(divContainer.getStyle('width'));
this._screenHeight = parseInt(divContainer.getStyle('height'));
// Initialize web2d workspace.
var workspace = this._createWorkspace();
this._workspace = workspace;
var screenContainer = screenManager.getContainer();
// Fix the height of the container ....
screenContainer.style.height = this._screenHeight + "px";
// Append to the workspace...
workspace.addItAsChildTo(screenContainer);
workspace.addItAsChildTo(divContainer);
this.setZoom(zoom, true);
// Register drag events ...
this._registerDragEvents();
this._eventsEnabled = true;
this._eventsEnabled = true;
},
_updateScreenManager: function() {
var zoom = this._zoom;
this._screenManager.setScale(zoom);
var coordOriginX = -((this._screenWidth * this._zoom) / 2);
var coordOriginY = -((this._screenHeight * this._zoom) / 2);
this._screenManager.setOffset(coordOriginX, coordOriginY);
},
_createWorkspace: function(profile) {
_createWorkspace: function() {
// Initialize workspace ...
var coordOriginX = -(this._screenWidth / 2);
var coordOriginY = -(this._screenHeight / 2);
@ -111,7 +102,11 @@ mindplot.Workspace = new Class({
// Center topic....
var coordOriginX;
var coordOriginY;
if (center) {
if (center && this._viewPort) {
coordOriginX = -(this._viewPort.width / 2);
coordOriginY = -(this._viewPort.height / 2);
} else if (center) {
coordOriginX = -(coordWidth / 2);
coordOriginY = -(coordHeight / 2);
} else {
@ -212,6 +207,11 @@ mindplot.Workspace = new Class({
}
};
screenManager.addEvent('mousedown', mouseDownListener);
},
setViewPort : function(size) {
this._viewPort = size;
this.setZoom(this._zoom, true);
}
});

View File

@ -189,50 +189,56 @@ mindplot.widget.Menu = new Class({
// Register Events ...
$('zoomIn').addEvent('click', function(event) {
$('zoomIn').addEvent('click', function() {
this.clear();
designer.zoomIn();
});
}.bind(this));
$('zoomOut').addEvent('click', function(event) {
$('zoomOut').addEvent('click', function() {
this.clear();
designer.zoomOut();
});
}.bind(this));
$('undoEdition').addEvent('click', function(event) {
$('undoEdition').addEvent('click', function() {
this.clear();
designer.undo();
});
}.bind(this));
$('redoEdition').addEvent('click', function(event) {
$('redoEdition').addEvent('click', function() {
this.clear();
designer.redo();
});
}.bind(this));
$('addTopic').addEvent('click', function(event) {
$('addTopic').addEvent('click', function() {
this.clear();
designer.createSiblingForSelectedNode();
});
}.bind(this));
$('deleteTopic').addEvent('click', function(event) {
$('deleteTopic').addEvent('click', function() {
this.clear();
designer.deleteCurrentNode();
});
}.bind(this));
$('topicLink').addEvent('click', function(event) {
$('topicLink').addEvent('click', function() {
this.clear();
designer.addLink();
});
}.bind(this));
$('topicRelation').addEvent('click', function(event) {
designer.addRelationShip(event);
});
$('topicNote').addEvent('click', function(event) {
$('topicNote').addEvent('click', function() {
this.clear();
designer.addNote();
}.bind(this));
});
$('fontBold').addEvent('click', function(event) {
$('fontBold').addEvent('click', function() {
designer.changeFontWeight();
});
$('fontItalic').addEvent('click', function(event) {
$('fontItalic').addEvent('click', function() {
designer.changeFontStyle();
});

View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
mindplot.widget.EditNoteDialog = new Class({
mindplot.widget.NoteEditor = new Class({
Extends:MooDialog,
initialize : function(model) {
$assert(model, "model can not be null");

View File

@ -29,40 +29,10 @@ web2d.Workspace = function(attributes)
}
web2d.Element.call(this, peer, defaultAttributes);
this._htmlContainer.appendChild(this._peer._native);
this._disableTextSelection();
};
objects.extend(web2d.Workspace, web2d.Element);
/**
* Avoid element selection. This remove some odd effect in IE when a element is draged.
*/
web2d.Workspace.prototype._disableTextSelection = function()
{
var contaier = this._htmlContainer;
function disabletext(e) {
return false;
}
;
function reEnable() {
return true;
}
;
//if the browser is IE4+
contaier.onselectstart = new Function("return false");
//if the browser is NS6
if ($defined(window.sidebar))
{
contaier.onmousedown = disabletext;
contaier.onclick = reEnable;
}
;
};
web2d.Workspace.prototype.getType = function()
{
@ -104,7 +74,7 @@ web2d.Workspace.prototype.addItAsChildTo = function(element)
};
/**
* Create a new div element that will be resposible for containing the workspace elements.
* Create a new div element that will be responsible for containing the workspace elements.
*/
web2d.Workspace.prototype._createDivContainer = function(domElement)
{

View File

@ -106,7 +106,7 @@
</div>
</fieldset>
</div>
<div id="zoom" class="buttonContainer" title="Zoom In">
<div id="zoom" class="buttonContainer" title="Zoom">
<fieldset>
<div id="zoomIn" class="button" title="Zoom In">
<div class="toolbarLabel">

View File

@ -196,18 +196,18 @@ function buildMindmapDesigner() {
// core.Monitor.setInstance(monitor);
var container = $('mindplot');
// container.setStyles();
// Initialize Editor ...
var screenWidth = window.getWidth();
var screenHeight = window.getHeight();
container.setStyles({
height: parseInt(screen.height),
width: parseInt(screen.width)
});
// header - footer
screenHeight = screenHeight - 115;
// body margin ...
editorProperties.width = screenWidth;
editorProperties.height = screenHeight;
designer = new mindplot.MindmapDesigner(editorProperties, container);
designer.setViewPort({
height: parseInt(window.innerHeight - 150),
width: parseInt(window.innerWidth - 200)
});
if (mindplot.collaboration.CollaborationManager.getInstance().isCollaborationFrameworkAvailable()) {
buildCollaborativeMindmapDesigner();

View File

@ -302,20 +302,17 @@ function buildMindmapDesigner() {
var monitor = new core.Monitor($('msgLoggerContainer'), $('msgLogger'));
core.Monitor.setInstance(monitor);
var container = $('mindplot');
// Initialize Editor ...
var container = $('mindplot');
// container.setStyles({
// height: screen.height - 151,
// width: screen.width
// });
var screenWidth = window.getWidth();
var screenHeight = window.getHeight();
// Position node ...
// header - footer
screenHeight = screenHeight - 90 - 61;
// body margin ...
editorProperties.width = screenWidth;
editorProperties.height = screenHeight;
container.setStyles({
height: window.getHeight() - 151,
width: window.getWidth()
});
designer = new mindplot.MindmapDesigner(editorProperties, container);
designer.loadFromXML(mapId, mapXml);