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

Implements toolbar disabling.

Browse Source
This commit is contained in:
Paulo Veiga
2011-10-04 01:16:29 -03:00
parent b7bbe2c0b7
commit 9185883d30
24 changed files with 919 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mindplot/pom.xml
View File

@@ -70,7 +70,7 @@
<filelist dir="${basedir}/src/main/javascript/"
files="StandaloneActionDispatcher.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="DesignerModel.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="MindmapDesigner.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="Designer.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="ScreenManager.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="Workspace.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="ShrinkConnector.js"/>
@@ -184,11 +184,9 @@
files="collaboration/framework/brix/BrixCollaborativeModelFactory.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="collaboration/framework/brix/BrixFramework.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarPaneItem.js"/>
<filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"

20
mindplot/src/main/javascript/MindmapDesigner.js → mindplot/src/main/javascript/Designer.js
View File

@@ -16,7 +16,7 @@
* limitations under the License.
*/
mindplot.MindmapDesigner = new Class({
mindplot.Designer = new Class({
Extends: Events,
initialize: function(profile, divElement) {
$assert(profile, "profile must be defined");
@@ -170,6 +170,24 @@ mindplot.MindmapDesigner = new Class({
topic.connectTo(targetTopic, workspace);
}
topic.addEvent('ontblur', function() {
var topics = this.getModel().filterSelectedTopics();
var rels = this.getModel().filterSelectedRelations();
if (topics.length == 0 || rels.length == 0) {
this.fireEvent('onblur');
}
}.bind(this));
topic.addEvent('ontfocus', function() {
var topics = this.getModel().filterSelectedTopics();
var rels = this.getModel().filterSelectedRelations();
if (topics.length == 1 || rels.length == 1) {
this.fireEvent('onfocus');
}
}.bind(this));
return topic;
},

56
mindplot/src/main/javascript/DesignerModel.js
View File

@@ -17,6 +17,7 @@
*/
mindplot.DesignerModel = new Class({
Implements: [Events],
initialize : function(options) {
this._zoom = options.zoom;
this._topics = [];
@@ -79,27 +80,23 @@ mindplot.DesignerModel = new Class({
this._topics.push(topic);
},
filterTopicsIds : function(validate, errorMsg) {
var result = [];
var topics = this.filterSelectedTopics();
if (topics.length == 0) {
core.Monitor.getInstance().logMessage('At least one element must be selected to execute this operation.');
} else {
var isValid = true;
for (var i = 0; i < topics.length; i++) {
var selectedNode = topics[i];
if ($defined(validate)) {
isValid = validate(selectedNode);
}
// Add node only if it's valid.
if (isValid) {
result.push(selectedNode.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
}
var isValid = true;
for (var i = 0; i < topics.length; i++) {
var selectedNode = topics[i];
if ($defined(validate)) {
isValid = validate(selectedNode);
}
// Add node only if it's valid.
if (isValid) {
result.push(selectedNode.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
}
}
return result;
@@ -108,22 +105,19 @@ mindplot.DesignerModel = new Class({
filterRelationIds : function(validate, errorMsg) {
var result = [];
var relationships = this.filterSelectedRelations();
if (relationships.length == 0) {
core.Monitor.getInstance().logMessage('At least one element must be selected to execute this operation.');
} else {
var isValid = true;
for (var j = 0; j < relationships.length; j++) {
var selectedLine = relationships[j];
isValid = true;
if ($defined(validate)) {
isValid = validate(selectedLine);
}
if (isValid) {
result.push(selectedLine.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
}
var isValid = true;
for (var j = 0; j < relationships.length; j++) {
var selectedLine = relationships[j];
isValid = true;
if ($defined(validate)) {
isValid = validate(selectedLine);
}
if (isValid) {
result.push(selectedLine.getId());
} else {
core.Monitor.getInstance().logMessage(errorMsg);
}
}
return result;

6
mindplot/src/main/javascript/IconGroup.js
View File

@@ -157,7 +157,7 @@ mindplot.IconGroup.ICON_PADDING = 5;
mindplot.IconGroup.RemoveTip = new Class({
initialize : function(container) {
$assert(container, "group can not be null");
this._container = container;
this._fadeElem = container;
},
@@ -189,7 +189,7 @@ mindplot.IconGroup.RemoveTip = new Class({
}.bind(this));
widget.setPosition(pos.x + 80, pos.y - 50);
this._container.appendChild(widget);
this._fadeElem.appendChild(widget);
// Setup current element ...
this._activeIcon = icon;
@@ -217,7 +217,7 @@ mindplot.IconGroup.RemoveTip = new Class({
var close = function() {
this._activeIcon = null;
this._container.removeChild(widget);
this._fadeElem.removeChild(widget);
this._widget = null;
this._closeTimeoutId = null;

46
mindplot/src/main/javascript/NodeGraph.js
View File

@@ -24,6 +24,7 @@ mindplot.NodeGraph = new Class({
this._mouseEvents = true;
this.setModel(nodeModel);
this._onFocus = false;
this._event = new Events();
},
getType : function() {
@@ -52,10 +53,20 @@ mindplot.NodeGraph = new Class({
},
addEvent : function(type, listener) {
var elem = this.get2DElement();
var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
elem.addEvent(type, listener);
},
removeEvent : function(type, listener) {
var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
elem.removeEvent(type, listener);
},
fireEvent: function(type) {
var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
elem.fireEvent(type);
},
setMouseEventsEnabled : function(isEnabled) {
this._mouseEvents = isEnabled;
},
@@ -87,21 +98,28 @@ mindplot.NodeGraph = new Class({
},
setOnFocus : function(focus) {
this._onFocus = focus;
var outerShape = this.getOuterShape();
if (focus) {
outerShape.setFill('#c7d8ff');
outerShape.setOpacity(1);
if (this._onFocus != focus) {
this._onFocus = focus;
var outerShape = this.getOuterShape();
if (focus) {
outerShape.setFill('#c7d8ff');
outerShape.setOpacity(1);
} else {
// @todo: node must not know about the topic.
outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}
this.setCursor('move');
// In any case, always try to hide the editor ...
this.closeEditors();
// Fire event ...
this.fireEvent(focus ? 'ontfocus' : 'ontblur');
} else {
// @todo: node must not know about the topic.
outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}
this.setCursor('move');
// In any case, always try to hide the editor ...
this.closeEditors();
},
isOnFocus : function() {

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

@@ -929,35 +929,12 @@ mindplot.Topic = new Class({
var model = this.getModel();
var isConnected = model.isConnected();
// Check consitency...
// Check consistency...
if ((isConnected && !line) || (!isConnected && line)) {
// $assert(false,'Illegal state exception.');
}
},
/**
* type:
* onfocus
*/
addEvent : function(type, listener) {
// Translate to web 2d events ...
if (type == 'onfocus') {
type = 'mousedown';
}
var shape = this.get2DElement();
shape.addEvent(type, listener);
},
removeEvent : function(type, listener) {
// Translate to web 2d events ...
if (type == 'onfocus') {
type = 'mousedown';
}
var shape = this.get2DElement();
shape.removeEvent(type, listener);
},
_setSize : function(size) {
$assert(size, "size can not be null");

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

@@ -17,7 +17,7 @@
*/
mindplot.widget.ColorPalettePanel = new Class({
Extends: mindplot.widget.ToolbarItem,
Extends: mindplot.widget.ToolbarPaneItem,
initialize : function(buttonId, model, baseUrl) {
this._baseUrl = baseUrl;

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

@@ -17,7 +17,7 @@
*/
mindplot.widget.ColorPickerPanel = new Class({
Extends: mindplot.widget.ToolbarItem,
Extends: mindplot.widget.ToolbarPaneItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
this._mooRainbow = new MooRainbow(buttonId, {

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

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

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

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

171
mindplot/src/main/javascript/widget/Menu.js
View File

@@ -26,6 +26,7 @@ mindplot.widget.Menu = new Class({
this._designer = designer;
this._toolbarElems = [];
this._containerId = containerId;
this._toolbarDisabled = false;
// Stop event propagation ...
$(this._containerId).addEvent('click', function(event) {
@@ -179,83 +180,50 @@ mindplot.widget.Menu = new Class({
};
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
// Register on close events ...
this._toolbarElems.forEach(function(elem) {
elem.addEvent('show', function() {
this.clear()
}.bind(this));
}.bind(this));
// Register Events ...
$('zoomIn').addEvent('click', function() {
this.clear();
designer.zoomIn();
}.bind(this));
$('zoomOut').addEvent('click', function() {
this.clear();
designer.zoomOut();
}.bind(this));
$('undoEdition').addEvent('click', function() {
this.clear();
designer.undo();
}.bind(this));
$('redoEdition').addEvent('click', function() {
this.clear();
designer.redo();
}.bind(this));
$('addTopic').addEvent('click', function() {
this.clear();
designer.createChildForSelectedNode();
}.bind(this));
$('deleteTopic').addEvent('click', function() {
this.clear();
designer.deleteCurrentNode();
}.bind(this));
$('topicLink').addEvent('click', function() {
this.clear();
designer.addLink();
}.bind(this));
$('topicRelation').addEvent('click', function(event) {
designer.addRelationShip(event);
this.addButton('zoomIn', false, false, function() {
designer.zoomIn()
});
$('topicNote').addEvent('click', function() {
this.clear();
designer.addNote();
}.bind(this));
this.addButton('zoomOut', false, false, function() {
designer.zoomOut()
});
$('fontBold').addEvent('click', function() {
this.addButton('undoEdition', false, false, function() {
designer.undo()
});
this.addButton('redoEdition', false, false, function() {
designer.redo();
});
this.addButton('addTopic', true, false, function() {
designer.createChildForSelectedNode();
});
this.addButton('deleteTopic', true, true, function() {
designer.deleteCurrentNode();
});
this.addButton('topicLink', true, false, function() {
designer.addLink();
});
this.addButton('topicRelation', true, false, function() {
designer.addLink();
});
this.addButton('topicNote', true, false, function() {
designer.addNote();
});
this.addButton('fontBold', true, false, function() {
designer.changeFontWeight();
});
$('fontItalic').addEvent('click', function() {
this.addButton('fontItalic', true, false, function() {
designer.changeFontStyle();
});
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)");
}
});
var saveElem = $('saveButton');
if (saveElem) {
saveElem.addEvent('click', function() {
@@ -338,6 +306,71 @@ mindplot.widget.Menu = new Class({
}
this._registerEvents(designer);
},
_registerEvents : function(designer) {
// Register on close events ...
this._toolbarElems.forEach(function(elem) {
elem.addEvent('show', function() {
this.clear()
}.bind(this));
}.bind(this));
designer.addEvent('onblur', function() {
var topics = designer.getModel().filterSelectedTopics();
var rels = designer.getModel().filterSelectedRelations();
this._toolbarElems.forEach(function(button) {
if (button.isTopicAction() && topics.length == 0) {
button.disable();
}
if (button.isRelAction() && rels.length == 0) {
button.disable();
}
})
}.bind(this));
designer.addEvent('onfocus', function() {
var topics = designer.getModel().filterSelectedTopics();
var rels = designer.getModel().filterSelectedRelations();
this._toolbarElems.forEach(function(button) {
if (button.isTopicAction() && topics.length > 0) {
button.enable();
}
if (button.isRelAction() && rels.length > 0) {
button.enable();
}
})
}.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)");
}
});
},
addButton:function (buttonId, topic, rel, fn) {
// Register Events ...
var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
this.clear();
fn(event);
}.bind(this), {topicAction:topic,relAction:rel});
this._toolbarElems.push(button);
},
clear : function() {
@@ -345,4 +378,4 @@ mindplot.widget.Menu = new Class({
elem.hide();
});
}
});
});

50
mindplot/src/main/javascript/widget/Monitor.js Normal file
View File

@@ -0,0 +1,50 @@
/*
* 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.Monitor = new Class({
initialize : function(fadeElem, msgElem) {
$assert(fadeElem, "fadeElem can not be null");
$assert(msgElem, "msgElem can not be null");
this.msgQueue = [];
this._fadeElem = fadeElem;
this._msgElem = msgElem;
},
_showMsg : function(msg, msgKind) {
if (msgKind == core.Monitor.MsgKind.ERROR) {
msg = "<div id='small_error_icon'>" + msg + "</div>";
}
this._msgElem.innerHTML = msg;
},
logError : function(userMsg) {
this.logMessage(userMsg, core.Monitor.MsgKind.ERROR);
},
logMessage : function(msg, msgKind) {
console.log(userMsg);
}
});
core.Monitor.MsgKind = {
INFO:1,
WARNING:2,
ERROR:3,
FATAL:4
};

37
mindplot/src/main/javascript/widget/NoteEditor.js
View File

@@ -21,7 +21,42 @@ mindplot.widget.NoteEditor = new Class({
initialize : function(model) {
$assert(model, "model can not be null");
var panel = this._buildPanel(model);
this.parent({closeButton:false,destroyOnClose:true,title:'Note'});
this.parent({
closeButton:false,
destroyOnClose:true,
title:'Note',
onInitialize: function(wrapper) {
wrapper.setStyle('opacity', 0);
this.fx = new Fx.Morph(wrapper, {
duration: 600,
transition: Fx.Transitions.Bounce.easeOut
});
this.overlay = new Overlay(this.options.inject, {
duration: this.options.duration
});
if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
},
onBeforeOpen: function() {
this.overlay.open();
this.fx.start({
'margin-top': [-200, -100],
opacity: [0, 1]
}).chain(function() {
this.fireEvent('show');
}.bind(this));
},
onBeforeClose: function() {
this.fx.start({
'margin-top': [-100, 0],
opacity: 0
}).chain(function() {
this.fireEvent('hide');
}.bind(this));
this.overlay.close();
}
});
this.setContent(panel);
},

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

@@ -18,39 +18,13 @@
mindplot.widget.ToolbarItem = new Class({
Implements:[Events],
initialize : function(buttonId, model) {
initialize : function(buttonId, fn, options) {
$assert(buttonId, "buttonId can not be null");
$assert(model, "model can not be null");
this._model = model;
$assert(fn, "fn can not be null");
this._buttonId = buttonId;
this._panelId = this._init().id;
},
this._fn = fn;
this._options = options;
_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() {
@@ -59,32 +33,39 @@ mindplot.widget.ToolbarItem = new Class({
return elem;
}.protect(),
getPanelElem : function() {
return $(this._panelId);
}.protect(),
show : function() {
if (!this.isVisible()) {
this.fireEvent('show');
this.getButtonElem().className = 'buttonActive';
this.getPanelElem().setStyle('display', 'block');
}
this.fireEvent('show');
},
hide : function() {
if (this.isVisible()) {
this.getButtonElem().className = 'button';
this.getPanelElem().setStyle('display', 'none');
this.fireEvent('hide');
this.fireEvent('hide');
},
isTopicAction : function() {
return this._options.topicAction;
},
isRelAction : function() {
return this._options.relAction;
},
disable : function() {
var elem = this.getButtonElem();
if (this._enable) {
elem.removeEvent('click', this._fn);
elem.removeClass('buttonOn');
elem.addClass('buttonOff');
this._enable = false;
}
},
isVisible : function() {
return this.getPanelElem().getStyle('display') == 'block';
},
buildPanel : function() {
throw "Method must be implemented";
}.protect()
enable : function() {
var elem = this.getButtonElem();
if (!this._enable) {
elem.addEvent('click', this._fn);
elem.removeClass('buttonOff');
elem.addClass('buttonOn');
this._enable = true;
}
}
});

93
mindplot/src/main/javascript/widget/ToolbarPaneItem.js Normal file
View File

@@ -0,0 +1,93 @@
/*
* 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.ToolbarPaneItem = new Class({
Extends:mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
$assert(buttonId, "buttonId can not be null");
$assert(model, "model can not be null");
var fn = function() {
// Is the panel being displayed ?
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
}.bind(this);
this.parent(buttonId, fn, {topicAction:true,relAction:true});
this._model = model;
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);
return panelElem;
},
getModel : function() {
return this._model;
},
getButtonElem : function() {
var elem = $(this._buttonId);
$assert(elem, "Could not find element for " + this._buttonId);
return elem;
}.protect(),
getPanelElem : function() {
return $(this._panelId);
}.protect(),
show : function() {
if (!this.isVisible()) {
this.parent();
this.getButtonElem().className = 'buttonActive';
this.getPanelElem().setStyle('display', 'block');
}
},
hide : function() {
if (this.isVisible()) {
this.getButtonElem().className = 'buttonOn';
this.getPanelElem().setStyle('display', 'none');
this.parent();
}
},
isVisible : function() {
return this.getPanelElem().getStyle('display') == 'block';
},
disable: function() {
this.hide();
this.parent();
},
buildPanel : function() {
throw "Method must be implemented";
}.protect()
});

2
mindplot/src/test/javascript/simpleTest.js
View File

@@ -59,7 +59,7 @@ TestCase("Mindplot test",{
editorProperties.width = screenWidth;
editorProperties.height = screenHeight;
designer = new mindplot.MindmapDesigner(editorProperties, container);
designer = new mindplot.Designer(editorProperties, container);
designer.loadFromXML(mapId, mapXml);