Editor working .

This commit is contained in:
Paulo Veiga
2011-10-14 22:56:20 -03:00
parent 7b42b6c1cd
commit 2a37f2e422
94 changed files with 1350 additions and 678 deletions

View File

@@ -192,10 +192,6 @@
<filelist dir="${basedir}/src/main/javascript/widget/" files="LinkEditor.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="FloatingTip.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="LinkIconTooltip.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPalettePanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"

View File

@@ -100,11 +100,11 @@ mindplot.CentralTopic = new Class({
},
_defaultBackgroundColor : function() {
return "#f7f7f7";
return "rgb(80,157,192)";
},
_defaultBorderColor : function() {
return "#023BB9";
return "rgb(57,113,177)";
},
_defaultFontStyle : function() {
@@ -113,7 +113,7 @@ mindplot.CentralTopic = new Class({
size: 10,
style:"normal",
weight:"bold",
color:"#023BB9"
color:"#ffffff"
};
}
});

View File

@@ -43,7 +43,7 @@ mindplot.ConnectionLine = new Class({
}
line.setStroke(1, 'solid', strokeColor);
}
line.setFill(mindplot.ConnectionLine.getStrokeColor());
this._line2d = line;
},

View File

@@ -25,7 +25,7 @@ mindplot.LinkIcon = new Class({
this.parent(mindplot.LinkIcon.IMAGE_URL);
this._noteModel = linkModel;
this._linksModel = linkModel;
this._topic = topic;
this._registerEvents();
@@ -44,7 +44,7 @@ mindplot.LinkIcon = new Class({
},
getModel : function() {
return this._noteModel;
return this._linksModel;
},
remove : function() {
@@ -52,6 +52,6 @@ mindplot.LinkIcon = new Class({
actionDispatcher.removeLinkFromTopic(this._topic.getId());
}
});
mindplot.LinkIcon.IMAGE_URL = "../images/world_link.png";
mindplot.LinkIcon.IMAGE_URL = "../nicons/links.png";

View File

@@ -103,11 +103,10 @@ mindplot.NodeGraph = new Class({
this._onFocus = focus;
var outerShape = this.getOuterShape();
if (focus) {
outerShape.setFill('#c7d8ff');
outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
outerShape.setOpacity(1);
} else {
// @todo: node must not know about the topic.
outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}

View File

@@ -22,7 +22,7 @@ mindplot.NoteIcon = new Class({
$assert(topic, 'topic can not be null');
this.parent(mindplot.NoteIcon.IMAGE_URL);
this._noteModel = noteModel;
this._linksModel = noteModel;
this._topic = topic;
this._registerEvents();
@@ -52,7 +52,7 @@ mindplot.NoteIcon = new Class({
});
title.inject(result);
var text = new Element('div', {text:this._noteModel.getText()});
var text = new Element('div', {text:this._linksModel.getText()});
text.setStyles({
'white-space': 'pre-wrap',
'word-wrap': 'break-word'
@@ -74,7 +74,7 @@ mindplot.NoteIcon = new Class({
},
getModel : function() {
return this._noteModel;
return this._linksModel;
},
remove : function() {
@@ -83,5 +83,5 @@ mindplot.NoteIcon = new Class({
}
});
mindplot.NoteIcon.IMAGE_URL = "../images/note.png";
mindplot.NoteIcon.IMAGE_URL = "../nicons/notes.png";

View File

@@ -21,7 +21,7 @@ mindplot.ShirinkConnector = new Class({
var elipse = new web2d.Elipse(mindplot.Topic.prototype.INNER_RECT_ATTRIBUTES);
this._elipse = elipse;
elipse.setFill('#f7f7f7');
elipse.setFill('rgb(62,118,179)');
elipse.setSize(mindplot.Topic.CONNECTOR_WIDTH, mindplot.Topic.CONNECTOR_WIDTH);
elipse.addEvent('click', function(event) {

View File

@@ -207,7 +207,6 @@ mindplot.Topic = new Class({
else {
$assert(false, "Unsupported figure type:" + type);
}
result.setPosition(0, 0);
return result;
},
@@ -1198,5 +1197,6 @@ mindplot.Topic = new Class({
mindplot.Topic.CONNECTOR_WIDTH = 6;
mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'#dbe2e6',stroke:'1 solid #77555a',x:0,y:0};
mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'0.5 solid'};
mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'rgb(252,235,192)',stroke:'1 dot rgb(241,163,39)',x:0,y:0};
mindplot.Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS = {fillColor:'rgb(244,184,45)',x:0,y:0};
mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'2 solid'};

View File

@@ -67,36 +67,33 @@ mindplot.widget.ColorPalettePanel = new Class({
elem.addEvent('click', function() {
var color = elem.getStyle("background-color");
model.setValue(color);
});
});
this.hide();
}.bind(this));
}.bind(this));
return content;
},
show : function() {
if (!this.isVisible()) {
_updateSelectedItem : function() {
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']");
tdCells.forEach(function(elem) {
elem.className = 'palette-cell';
});
// Clear selected cell based on the color ...
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
tdCells.forEach(function(elem) {
elem.className = 'palette-cell';
});
// Mark the cell as selected ...
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
var modelValue = model.getValue();
colorCells.forEach(function(elem) {
var color = elem.getStyle("background-color");
if (modelValue == color) {
elem.parentNode.className = 'palette-cell palette-cell-selected';
}
});
}
this.parent();
// Mark the cell as selected ...
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel();
var modelValue = model.getValue();
colorCells.forEach(function(elem) {
var color = elem.getStyle("background-color");
if (modelValue == color) {
elem.parentNode.className = 'palette-cell palette-cell-selected';
}
});
return panelElem;
}
});

View File

@@ -1,49 +0,0 @@
/*
* Copyright [2011] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
mindplot.widget.ColorPickerPanel = new Class({
Extends: mindplot.widget.ToolbarPaneItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
this._mooRainbow = new MooRainbow(buttonId, {
id: buttonId,
imgPath: '../images/',
startColor: [255, 255, 255],
onInit: function() {
this.fireEvent("show");
}.bind(this),
onChange: function(color) {
this.getModel().setValue(color.hex);
}.bind(this),
onComplete: function() {
this.hide();
}.bind(this)
});
},
show : function() {
this.parent();
this._mooRainbow.show();
},
hide : function() {
this.parent();
this._mooRainbow.hide();
}
});

View File

@@ -43,12 +43,12 @@ mindplot.widget.FloatingTip = new Class({
initialize: function(element, options) {
this.setOptions(options);
this.boundShow = function(event) {
this.show(event, element);
this.boundShow = function() {
this.show(element);
}.bind(this);
this.boundHide = function(event) {
this.hide(event, element);
this.boundHide = function() {
this.hide(element);
}.bind(this);
if (!['top', 'right', 'bottom', 'left', 'inside'].contains(this.options.position))
@@ -65,7 +65,7 @@ mindplot.widget.FloatingTip = new Class({
element.store('hasEvents', true);
},
show: function(event, element) {
show: function(element) {
var old = element.retrieve('floatingtip');
if (old) if (old.getStyle('opacity') == 1) {
clearTimeout(old.retrieve('timeout'));
@@ -74,17 +74,20 @@ mindplot.widget.FloatingTip = new Class({
var tip = this._create(element);
if (tip == null)
return this;
element.store('floatingtip', tip);
this._animate(tip, 'in');
if (this.options.preventHideOnOver) {
tip.addEvent(this.options.showOn, this.boundShow);
tip.addEvent(this.options.hideOn, this.boundHide);
}
this.fireEvent('show', [tip, element]);
return this;
},
hide: function(event, element) {
hide: function(element) {
var tip = element.retrieve('floatingtip');
if (!tip) {
if (this.options.position == 'inside') {

View File

@@ -22,6 +22,11 @@ mindplot.widget.IconPanel = new Class({
this.parent(buttonId, model);
},
_updateSelectedItem : function() {
return this.getPanelElem();
},
buildPanel: function() {
var content = new Element('div', {'class':'toolbarPanel','id':'IconsPanel'});
content.setStyles({width:253,height:200,padding:5});

View File

@@ -29,7 +29,8 @@ mindplot.widget.LinkIconTooltip = new Class({
arrowOffset : 10,
center: true,
arrowSize: 15,
offset : {x:10,y:20}
offset : {x:10,y:20},
className: 'linkTip'
});
},

View File

@@ -28,27 +28,27 @@ mindplot.widget.ListToolbarPanel = new Class({
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;
this.getModel().setValue(value);
event.stopPropagation();
this.hide();
var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
this.getModel().setValue(value);
}.bind(this));
}.bind(this));
},
show : function() {
if (!this.isVisible()) {
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;
if (elemValue == value)
elem.className = "toolbarPanelLinkSelectedLink";
else
elem.className = "toolbarPanelLink";
});
this.parent();
}
_updateSelectedItem : function() {
var panelElem = this.getPanelElem();
var menuElems = panelElem.getElements('div');
var value = this.getModel().getValue();
menuElems.forEach(function(elem) {
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
$assert(elemValue,"elemValue can not be null");
if (elemValue == value)
elem.className = "toolbarPanelLinkSelectedLink";
else
elem.className = "toolbarPanelLink";
});
return panelElem;
}
});

View File

@@ -359,20 +359,20 @@ mindplot.widget.Menu = new Class({
})
}.bind(this));
designer.addEvent("modelUpdate", function(event) {
if (event.undoSteps > 0) {
$("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
} else {
$("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
}
if (event.redoSteps > 0) {
$("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
} else {
$("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
}
});
// designer.addEvent("modelUpdate", function(event) {
// if (event.undoSteps > 0) {
// $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
// } else {
// $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
// }
//
// if (event.redoSteps > 0) {
// $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
// } else {
// $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
// }
//
// });
},
addButton:function (buttonId, topic, rel, fn) {

View File

@@ -24,8 +24,9 @@ mindplot.widget.ToolbarItem = new Class({
this._buttonId = buttonId;
this._fn = fn;
this._options = options;
this._enable = false;
this.enable();
// this._tip = this._registerTip();
// this._registerTip();
},

View File

@@ -21,6 +21,7 @@ mindplot.widget.ToolbarPaneItem = new Class({
initialize : function(buttonId, model) {
$assert(buttonId, "buttonId can not be null");
$assert(model, "model can not be null");
this._model = model;
var fn = function() {
// Is the panel being displayed ?
if (this.isVisible()) {
@@ -31,19 +32,46 @@ mindplot.widget.ToolbarPaneItem = new Class({
}.bind(this);
this.parent(buttonId, fn, {topicAction:true,relAction:false});
this._model = model;
this._panelId = this._init().id;
this._panelElem = this._init();
this._visible = false;
},
_init:function () {
// Load the context of the panel ...
var panelElem = this.buildPanel();
panelElem.setStyle('cursor','default');
panelElem.setStyle('cursor', 'default');
var buttonElem = this.getButtonElem();
// Add panel content ..
panelElem.setStyle('display', 'none');
panelElem.inject(buttonElem);
var item = this;
this._tip = new mindplot.widget.FloatingTip(buttonElem, {
html: true,
position: 'bottom',
arrowOffset : 5,
center: true,
arrowSize: 7,
showDelay: 0,
hideDelay: 0,
content: function() {
return item._updateSelectedItem();
}.bind(this),
className: 'toolbarPaneTip',
motionOnShow:false,
motionOnHide:false,
motion: 0,
distance: 0,
showOn: 'xxxx',
hideOn: 'xxxx',
preventHideOnOver:true,
offset: {x:-4,y:0}
});
this._tip.addEvent('hide', function() {
this._visible = false
}.bind(this));
this._tip.addEvent('show', function() {
this._visible = true
}.bind(this));
return panelElem;
},
@@ -53,34 +81,55 @@ mindplot.widget.ToolbarPaneItem = new Class({
},
getPanelElem : function() {
return $(this._panelId);
return this._panelElem;
}.protect(),
show : function() {
if (!this.isVisible()) {
this.parent();
this.getButtonElem().className = 'buttonActive';
this.getPanelElem().setStyle('display', 'block');
this._tip.show(this.getButtonElem());
this.getButtonElem().className = 'buttonExtActive';
}
},
hide : function() {
if (this.isVisible()) {
this.getButtonElem().className = 'buttonOn';
this.getPanelElem().setStyle('display', 'none');
this.parent();
this._tip.hide(this.getButtonElem());
this.getButtonElem().className = 'buttonExtOn';
}
},
isVisible : function() {
return this.getPanelElem().getStyle('display') == 'block';
return this._visible;
},
disable: function() {
disable : function() {
this.hide();
this.parent();
var elem = this.getButtonElem();
if (this._enable) {
elem.removeEvent('click', this._fn);
elem.removeClass('buttonExtOn');
// Todo: Hack...
elem.removeClass('buttonOn');
elem.addClass('buttonExtOff');
this._enable = false;
}
},
enable : function() {
var elem = this.getButtonElem();
if (!this._enable) {
elem.addEvent('click', this._fn);
elem.removeClass('buttonExtOff');
elem.addClass('buttonExtOn');
this._enable = true;
}
},
buildPanel : function() {
throw "Method must be implemented";
}.protect()