zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix toolbar strange resize.

Browse Source
This commit is contained in:
Paulo Veiga
2011-08-10 23:13:13 -03:00
parent 37734ea95c
commit d27d15e162
15 changed files with 104 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
mindplot/src/main/javascript/Issue.txt
View File

@@ -1,25 +0,0 @@
Pablo
----------
Paulo
------
* El mouse over se rompe una vez que se hace el select de algun node. Debe estar rompiendo el
lister o algo parecido.
** Evitar los cambios de size inecesarios y posicion inecesarios, de esta manera menos flick. Esto en el updater.
* Queda un ratro raro cuando se hace drag and drop en explorer.
Later
-------
* Cuanto mas grande el grafo, mas lento de hace el primer momento del drag. Con lo cual, es conveniente reutilizar los
nodos en vez de borrarlos.
* Menu contextual para agregar nodos.
* Es necesario manejar para los central topic to main topic correctamente el concepto de height.
From: RelationshipLine
- Falta topic...
XMLMindmapSerializer_Beta

10
mindplot/src/main/javascript/Topic.js
View File

@@ -686,8 +686,14 @@ mindplot.Topic = new Class({
// Focus events ...
var mouseDown = function(event) {
topic.setOnFocus(true);
};
var value = true;
if ((event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac)) {
value = !this.isOnFocus();
event.stopPropagation();
event.preventDefault();
}
topic.setOnFocus(value);
}.bind(this);
elem.addEventListener('mousedown', mouseDown);
},

71
mindplot/src/main/javascript/widget/ColorPalettePanel.js
View File

@@ -20,19 +20,9 @@ mindplot.widget.ColorPalettePanel = new Class({
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model, baseUrl) {
this._baseUrl = baseUrl;
this.parent(buttonId, model);
$assert(baseUrl, "baseUrl can not be null");
this.getButtonElem().addEvent('click', function() {
// Is the panel being displayed ?
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
}.bind(this));
this._baseUrl = baseUrl;
},
_load : function() {
@@ -65,46 +55,28 @@ mindplot.widget.ColorPalettePanel = new Class({
return mindplot.widget.ColorPalettePanel._panelContent;
},
_init : function() {
if (!this._panelContent) {
var buttonElem = this.getButtonElem();
// Add panel content ..
var panelElem = this.buildPanel();
panelElem.setStyle('display', 'none');
panelElem.inject(buttonElem);
// Register on toolbar elements ...
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
colorCells.forEach(function(elem) {
elem.addEvent('click', function() {
var color = elem.getStyle("background-color");
model.setValue(color);
});
});
this._panelId = panelElem.id;
this._panelContent = true;
}
},
buildPanel: function() {
var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
content.innerHTML = this._load();
return content;
},
_getPanelElem : function () {
this._init();
return $(this._panelId);
// Register on toolbar elements ...
var colorCells = content.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
colorCells.forEach(function(elem) {
elem.addEvent('click', function() {
var color = elem.getStyle("background-color");
model.setValue(color);
});
});
return content;
},
show : function() {
if (!this.isVisible()) {
this.parent();
var panelElem = this._getPanelElem();
var panelElem = this.getPanelElem();
// Clear selected cell based on the color ...
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
@@ -122,20 +94,9 @@ mindplot.widget.ColorPalettePanel = new Class({
elem.parentNode.className = 'palette-cell palette-cell-selected';
}
});
// Finally, display the dialog ...
panelElem.setStyle('display', 'block');
}
},
hide : function() {
if (this.isVisible()) {
this.parent();
this._getPanelElem().setStyle('display', 'none');
}
},
isVisible : function() {
return this._getPanelElem().getStyle('display') == 'block';
this.parent();
}
});

2
mindplot/src/main/javascript/widget/FontFamilyPanel.js
View File

@@ -17,7 +17,7 @@
*/
mindplot.widget.FontFamilyPanel = new Class({
Extends : mindplot.widget.ToolbarPanel,
Extends : mindplot.widget.ListToolbarPanel,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
},

2
mindplot/src/main/javascript/widget/FontSizePanel.js
View File

@@ -17,7 +17,7 @@
*/
mindplot.widget.FontSizePanel = new Class({
Extends : mindplot.widget.ToolbarPanel,
Extends : mindplot.widget.ListToolbarPanel,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
},

97
mindplot/src/main/javascript/widget/IconPanel.js
View File

@@ -17,101 +17,15 @@
*/
mindplot.widget.IconPanel = new Class({
Extends:mindplot.widget.ToolbarItem,
Implements:[Options],
options:{
width:253,
initialWidth:0,
height:200,
panel:null,
onStart:Class.empty,
state:'close'
},
initialize:function(buttonId, model) {
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
this.options.content = this._build();
this.init();
},
init:function() {
var panel = new Element('div');
var buttonElem = this.getButtonElem();
buildPanel: function() {
var content = new Element('div', {'class':'toolbarPanel','id':'IconsPanel'});
content.setStyles({width:253,height:200,padding:5});
var coord = buttonElem.getCoordinates();
var top = buttonElem.getTop() + coord.height + 7;
var left = buttonElem.getLeft() - 6;
panel.setStyles({
width:this.options.initialWidth,
height:0,
position:'absolute',
top:top,
left:left,
background:'#ffffff',
'border-color':'#CCC #666 #666 #CCC;',
zIndex:20,
overflow:'hidden'}
);
this.options.panel = panel;
this.options.content.inject(panel);
this.options.content.addEvent('click', function() {
this.hide();
}.bind(this));
panel.setStyle('opacity', 0);
panel.inject($(document.body));
this.registerOpenPanel();
},
show:function() {
this.parent();
if (this.options.state == 'close') {
if (!$defined(this.options.panel)) {
this.init();
}
var panel = this.options.panel;
panel.setStyles({
border: '1px solid #636163',
opacity:100,
height:this.options.height,
width:this.options.width
});
this.fireEvent('onStart');
this.registerClosePanel();
this.options.state = 'open';
}
},
hide:function() {
this.parent();
if (this.options.state == 'open') {
// Magic, disappear effect ;)
this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
this.registerOpenPanel();
this.options.state = 'close';
}
},
registerOpenPanel:function() {
this.getButtonElem().removeEvents('click');
this.getButtonElem().addEvent('click', function() {
this.show();
}.bind(this));
},
registerClosePanel:function() {
this.getButtonElem().removeEvents('click');
this.getButtonElem().addEvent('click', function() {
this.hide();
}.bind(this));
} ,
_build : function() {
var content = new Element('div').setStyles({width:253,height:200,padding:5});
var count = 0;
for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
@@ -136,5 +50,4 @@ mindplot.widget.IconPanel = new Class({
}
return content;
}
});

46
mindplot/src/main/javascript/widget/ToolbarPanel.js → mindplot/src/main/javascript/widget/ListToolbarPanel.js
View File

@@ -16,27 +16,16 @@
* limitations under the License.
*/
mindplot.widget.ToolbarPanel = new Class({
mindplot.widget.ListToolbarPanel = new Class({
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
this._panelId = this.initPanel();
this._initPanel();
},
buildPanel : function() {
throw "Method must be implemented";
}.protect(),
initPanel: function () {
var panelElem = this.buildPanel();
var buttonElem = this.getButtonElem();
// Add panel content ..
panelElem.setStyle('display', 'none');
panelElem.inject(buttonElem);
_initPanel: function () {
// Register on toolbar elements ...
var menuElems = panelElem.getElements('div');
var menuElems = this.getPanelElem().getElements('div');
menuElems.forEach(function(elem) {
elem.addEvent('click', function(event) {
var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
@@ -45,24 +34,11 @@ mindplot.widget.ToolbarPanel = new Class({
this.hide();
}.bind(this));
}.bind(this));
// Font family event handling ....
buttonElem.addEvent('click', function(event) {
// Is the panel being displayed ?
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
}.bind(this));
return panelElem.id;
},
show : function() {
if (!this.isVisible()) {
this.parent();
var menuElems = $(this._panelId).getElements('div');
var menuElems = this.getPanelElem().getElements('div');
var value = this.getModel().getValue();
menuElems.forEach(function(elem) {
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
@@ -71,18 +47,8 @@ mindplot.widget.ToolbarPanel = new Class({
else
elem.className = "toolbarPanelLink";
});
$(this._panelId).setStyle('display', 'block');
}
},
hide : function() {
if (this.isVisible()) {
this.parent();
$(this._panelId).setStyle('display', 'none');
}
},
isVisible : function() {
return $(this._panelId).getStyle('display') == 'block';
}
}
});

57
mindplot/src/main/javascript/widget/ToolbarItem.js
View File

@@ -23,27 +23,68 @@ mindplot.widget.ToolbarItem = new Class({
$assert(model, "model can not be null");
this._model = model;
this._buttonId = buttonId;
this._panelId = this._init().id;
},
_init:function () {
// Load the context of the panel ...
var panelElem = this.buildPanel();
var buttonElem = this.getButtonElem();
// Add panel content ..
panelElem.setStyle('display', 'none');
panelElem.inject(buttonElem);
// Add events for button click ...
this.getButtonElem().addEvent('click', function() {
// Is the panel being displayed ?
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
}.bind(this));
return panelElem;
},
getModel : function() {
return this._model;
},
getButtonElem : function() {
var elem = $(this._buttonId);
$assert(elem,"Could not find element for " + this._buttonId);
$assert(elem, "Could not find element for " + this._buttonId);
return elem;
}.protect(),
show : function() {
this.fireEvent('show');
getPanelElem : function() {
return $(this._panelId);
}.protect(),
// Mark the button as active...
this.getButtonElem().className = 'buttonActive';
show : function() {
if (!this.isVisible()) {
this.fireEvent('show');
this.getButtonElem().className = 'buttonActive';
this.getPanelElem().setStyle('display', 'block');
}
},
hide : function() {
this.fireEvent('hide');
this.getButtonElem().className = 'button';
}
if (this.isVisible()) {
this.getButtonElem().className = 'button';
this.getPanelElem().setStyle('display', 'none');
this.fireEvent('hide');
}
},
isVisible : function() {
return this.getPanelElem().getStyle('display') == 'block';
},
buildPanel : function() {
throw "Method must be implemented";
}.protect()
});

2
mindplot/src/main/javascript/widget/TopicShapePanel.js
View File

@@ -17,7 +17,7 @@
*/
mindplot.widget.TopicShapePanel = new Class({
Extends : mindplot.widget.ToolbarPanel,
Extends : mindplot.widget.ListToolbarPanel,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
},