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="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/" <filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/> files="widget/ColorPickerPanel.js"/>

View File

@ -33,8 +33,8 @@ mindplot.MindmapDesigner = new Class({
this._model = new mindplot.DesignerModel(profile); this._model = new mindplot.DesignerModel(profile);
// Init Screen manager.. // Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement); var screenManager = new mindplot.ScreenManager(divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._model.getZoom()); this._workspace = new mindplot.Workspace(screenManager, this._model.getZoom());
this._readOnly = profile.readOnly ? true : false; this._readOnly = profile.readOnly ? true : false;
// Init layout managers ... // Init layout managers ...
@ -77,6 +77,7 @@ mindplot.MindmapDesigner = new Class({
}); });
// Clean some selected nodes on event .. // Clean some selected nodes on event ..
if (this._cleanScreen)
this._cleanScreen(); this._cleanScreen();
}.bind(this)); }.bind(this));
@ -129,6 +130,9 @@ mindplot.MindmapDesigner = new Class({
} }
}, },
setViewPort : function(size) {
this._workspace.setViewPort(size);
},
_buildNodeGraph : function(model) { _buildNodeGraph : function(model) {
var workspace = this._workspace; var workspace = this._workspace;
@ -761,7 +765,7 @@ mindplot.MindmapDesigner = new Class({
addNote : function() { addNote : function() {
var model = this.getModel(); var model = this.getModel();
var topic = model.selectedTopic(); var topic = model.selectedTopic();
if (topic!=null) { if (topic != null) {
topic.showNoteEditor(); topic.showNoteEditor();
} else { } else {
core.Monitor.getInstance().logMessage('At least one topic must be selected to execute this operation.'); 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({ mindplot.ScreenManager = new Class({
initialize:function(width, height, divElement) { initialize:function(divElement) {
$assert(divElement, "can not be null"); $assert(divElement, "can not be null");
this._divContainer = divElement; this._divContainer = divElement;
this._offset = {x:0,y:0}; this._offset = {x:0,y:0};
// Ignore default click event propagation. Prevent 'click' event on drad. // Ignore default click event propagation. Prevent 'click' event on drad.
this._clickEvents = []; 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 ... // @Todo: This must be resolved in other way ...
mindplot.util.Converter.setScreenManager(this); mindplot.util.Converter.setScreenManager(this);
@ -51,9 +53,8 @@ mindplot.ScreenManager = new Class({
fireEvent : function(type, event) { fireEvent : function(type, event) {
if (type == 'click') { if (type == 'click') {
this._clickEvents.forEach(function(listener) this._clickEvents.forEach(function(listener) {
{ listener(type, event);
listener(type,event);
}); });
} }
else { else {
@ -150,4 +151,5 @@ mindplot.ScreenManager = new Class({
setOffset : function(x, y) { setOffset : function(x, y) {
this._offset.x = x; this._offset.x = x;
this._offset.y = y; 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(); editor.show();
}, },

View File

@ -17,24 +17,24 @@
*/ */
mindplot.Workspace = new Class({ mindplot.Workspace = new Class({
initialize: function(profile, screenManager, zoom) { initialize: function(screenManager, zoom) {
// Create a suitable container ... // Create a suitable container ...
$assert(screenManager, 'Div container can not be null'); $assert(screenManager, 'Div container can not be null');
$assert(zoom, 'zoom container can not be null');
this._zoom = zoom; this._zoom = zoom;
this._screenManager = screenManager; this._screenManager = screenManager;
this._screenWidth = profile.width;
this._screenHeight = profile.height;
// Initalize web2d workspace. var divContainer = screenManager.getContainer();
var workspace = this._createWorkspace(profile); this._screenWidth = parseInt(divContainer.getStyle('width'));
this._screenHeight = parseInt(divContainer.getStyle('height'));
// Initialize web2d workspace.
var workspace = this._createWorkspace();
this._workspace = workspace; this._workspace = workspace;
var screenContainer = screenManager.getContainer();
// Fix the height of the container ....
screenContainer.style.height = this._screenHeight + "px";
// Append to the workspace... // Append to the workspace...
workspace.addItAsChildTo(screenContainer); workspace.addItAsChildTo(divContainer);
this.setZoom(zoom, true); this.setZoom(zoom, true);
// Register drag events ... // Register drag events ...
@ -42,16 +42,7 @@ mindplot.Workspace = new Class({
this._eventsEnabled = true; this._eventsEnabled = true;
}, },
_updateScreenManager: function() { _createWorkspace: 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) {
// Initialize workspace ... // Initialize workspace ...
var coordOriginX = -(this._screenWidth / 2); var coordOriginX = -(this._screenWidth / 2);
var coordOriginY = -(this._screenHeight / 2); var coordOriginY = -(this._screenHeight / 2);
@ -111,7 +102,11 @@ mindplot.Workspace = new Class({
// Center topic.... // Center topic....
var coordOriginX; var coordOriginX;
var coordOriginY; var coordOriginY;
if (center) {
if (center && this._viewPort) {
coordOriginX = -(this._viewPort.width / 2);
coordOriginY = -(this._viewPort.height / 2);
} else if (center) {
coordOriginX = -(coordWidth / 2); coordOriginX = -(coordWidth / 2);
coordOriginY = -(coordHeight / 2); coordOriginY = -(coordHeight / 2);
} else { } else {
@ -212,6 +207,11 @@ mindplot.Workspace = new Class({
} }
}; };
screenManager.addEvent('mousedown', mouseDownListener); 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 ... // Register Events ...
$('zoomIn').addEvent('click', function(event) { $('zoomIn').addEvent('click', function() {
this.clear();
designer.zoomIn(); designer.zoomIn();
}); }.bind(this));
$('zoomOut').addEvent('click', function(event) { $('zoomOut').addEvent('click', function() {
this.clear();
designer.zoomOut(); designer.zoomOut();
}); }.bind(this));
$('undoEdition').addEvent('click', function(event) { $('undoEdition').addEvent('click', function() {
this.clear();
designer.undo(); designer.undo();
}); }.bind(this));
$('redoEdition').addEvent('click', function(event) { $('redoEdition').addEvent('click', function() {
this.clear();
designer.redo(); designer.redo();
}); }.bind(this));
$('addTopic').addEvent('click', function(event) { $('addTopic').addEvent('click', function() {
this.clear();
designer.createSiblingForSelectedNode(); designer.createSiblingForSelectedNode();
}); }.bind(this));
$('deleteTopic').addEvent('click', function(event) { $('deleteTopic').addEvent('click', function() {
this.clear();
designer.deleteCurrentNode(); designer.deleteCurrentNode();
}); }.bind(this));
$('topicLink').addEvent('click', function(event) { $('topicLink').addEvent('click', function() {
this.clear();
designer.addLink(); designer.addLink();
}.bind(this));
});
$('topicRelation').addEvent('click', function(event) { $('topicRelation').addEvent('click', function(event) {
designer.addRelationShip(event); designer.addRelationShip(event);
}); });
$('topicNote').addEvent('click', function(event) { $('topicNote').addEvent('click', function() {
this.clear();
designer.addNote(); designer.addNote();
}.bind(this));
}); $('fontBold').addEvent('click', function() {
$('fontBold').addEvent('click', function(event) {
designer.changeFontWeight(); designer.changeFontWeight();
}); });
$('fontItalic').addEvent('click', function(event) { $('fontItalic').addEvent('click', function() {
designer.changeFontStyle(); designer.changeFontStyle();
}); });

View File

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

View File

@ -29,40 +29,10 @@ web2d.Workspace = function(attributes)
} }
web2d.Element.call(this, peer, defaultAttributes); web2d.Element.call(this, peer, defaultAttributes);
this._htmlContainer.appendChild(this._peer._native); this._htmlContainer.appendChild(this._peer._native);
this._disableTextSelection();
}; };
objects.extend(web2d.Workspace, web2d.Element); 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() 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) web2d.Workspace.prototype._createDivContainer = function(domElement)
{ {

View File

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

View File

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

View File

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