Editor working .
This commit is contained in:
@@ -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/"
|
||||
|
@@ -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"
|
||||
};
|
||||
}
|
||||
});
|
@@ -43,7 +43,7 @@ mindplot.ConnectionLine = new Class({
|
||||
}
|
||||
line.setStroke(1, 'solid', strokeColor);
|
||||
}
|
||||
|
||||
line.setFill(mindplot.ConnectionLine.getStrokeColor());
|
||||
this._line2d = line;
|
||||
},
|
||||
|
||||
|
@@ -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";
|
||||
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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";
|
||||
|
||||
|
@@ -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) {
|
||||
|
@@ -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'};
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
});
|
@@ -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();
|
||||
|
||||
}
|
||||
});
|
@@ -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') {
|
||||
|
@@ -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});
|
||||
|
@@ -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'
|
||||
});
|
||||
},
|
||||
|
||||
|
@@ -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;
|
||||
}
|
||||
});
|
@@ -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) {
|
||||
|
@@ -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();
|
||||
|
||||
},
|
||||
|
||||
|
@@ -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()
|
||||
|
Reference in New Issue
Block a user