Implements toolbar disabling.

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

View File

@ -47,10 +47,6 @@ core.Monitor = new Class({
console.log(userMsg); console.log(userMsg);
}, },
logFatal : function(userMsg) {
this.logMessage(userMsg, core.Monitor.MsgKind.FATAL);
},
logMessage : function(msg, msgKind) { logMessage : function(msg, msgKind) {
if (!msgKind) { if (!msgKind) {
msgKind = core.Monitor.MsgKind.INFO; msgKind = core.Monitor.MsgKind.INFO;

View File

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

View File

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
mindplot.MindmapDesigner = new Class({ mindplot.Designer = new Class({
Extends: Events, Extends: Events,
initialize: function(profile, divElement) { initialize: function(profile, divElement) {
$assert(profile, "profile must be defined"); $assert(profile, "profile must be defined");
@ -170,6 +170,24 @@ mindplot.MindmapDesigner = new Class({
topic.connectTo(targetTopic, workspace); 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; return topic;
}, },

View File

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

View File

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

View File

@ -24,6 +24,7 @@ mindplot.NodeGraph = new Class({
this._mouseEvents = true; this._mouseEvents = true;
this.setModel(nodeModel); this.setModel(nodeModel);
this._onFocus = false; this._onFocus = false;
this._event = new Events();
}, },
getType : function() { getType : function() {
@ -52,10 +53,20 @@ mindplot.NodeGraph = new Class({
}, },
addEvent : function(type, listener) { addEvent : function(type, listener) {
var elem = this.get2DElement(); var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
elem.addEvent(type, listener); 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) { setMouseEventsEnabled : function(isEnabled) {
this._mouseEvents = isEnabled; this._mouseEvents = isEnabled;
}, },
@ -87,21 +98,28 @@ mindplot.NodeGraph = new Class({
}, },
setOnFocus : function(focus) { setOnFocus : function(focus) {
this._onFocus = focus; if (this._onFocus != focus) {
var outerShape = this.getOuterShape();
if (focus) { this._onFocus = focus;
outerShape.setFill('#c7d8ff'); var outerShape = this.getOuterShape();
outerShape.setOpacity(1); 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() { isOnFocus : function() {

View File

@ -929,35 +929,12 @@ mindplot.Topic = new Class({
var model = this.getModel(); var model = this.getModel();
var isConnected = model.isConnected(); var isConnected = model.isConnected();
// Check consitency... // Check consistency...
if ((isConnected && !line) || (!isConnected && line)) { if ((isConnected && !line) || (!isConnected && line)) {
// $assert(false,'Illegal state exception.'); // $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) { _setSize : function(size) {
$assert(size, "size can not be null"); $assert(size, "size can not be null");

View File

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

View File

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

View File

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

View File

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

View File

@ -26,6 +26,7 @@ mindplot.widget.Menu = new Class({
this._designer = designer; this._designer = designer;
this._toolbarElems = []; this._toolbarElems = [];
this._containerId = containerId; this._containerId = containerId;
this._toolbarDisabled = false;
// Stop event propagation ... // Stop event propagation ...
$(this._containerId).addEvent('click', function(event) { $(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)); this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
// Register on close events ... this.addButton('zoomIn', false, false, function() {
this._toolbarElems.forEach(function(elem) { designer.zoomIn()
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);
}); });
$('topicNote').addEvent('click', function() { this.addButton('zoomOut', false, false, function() {
this.clear(); designer.zoomOut()
designer.addNote(); });
}.bind(this));
$('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(); designer.changeFontWeight();
}); });
$('fontItalic').addEvent('click', function() { this.addButton('fontItalic', true, false, function() {
designer.changeFontStyle(); 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'); var saveElem = $('saveButton');
if (saveElem) { if (saveElem) {
saveElem.addEvent('click', function() { 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() { clear : function() {
@ -345,4 +378,4 @@ mindplot.widget.Menu = new Class({
elem.hide(); elem.hide();
}); });
} }
}); });

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
};

View File

@ -21,7 +21,42 @@ mindplot.widget.NoteEditor = new Class({
initialize : function(model) { initialize : function(model) {
$assert(model, "model can not be null"); $assert(model, "model can not be null");
var panel = this._buildPanel(model); 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); this.setContent(panel);
}, },

View File

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

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()
});

View File

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

View File

@ -1,7 +1,6 @@
@import "common.css"; @import "common.css";
/* @Todo: Fix this ...*/ @import "/mindplot/src/main/javascript/widget/lightbox.css";
@import "widget/lightbox.css"; @import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
@import "libraries/moodialog/css/MooDialog.css";
html { html {
overflow: hidden; overflow: hidden;
@ -159,50 +158,25 @@ div#toolbar .buttonContainer {
-moz-margin-end: 7px; -moz-margin-end: 7px;
} }
div#toolbar .button { div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 32px; width: 32px;
height: 36px; height: 36px;
float: left; float: left;
margin: 0 2px 2px 2px; margin: 0 2px 2px 2px;
cursor: pointer;
text-align: center; text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
} }
div#toolbar .button:hover { div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
width: 32px;
height: 36px;
float: left;
margin: 0 1px; margin: 0 1px;
cursor: pointer; cursor: pointer;
border: 1px solid black; border: 1px solid black;
border-top-color: white; border-top-color: white;
border-left-color: white; border-left-color: white;
-webkit-user-select: none; cursor: pointer;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
} }
div#toolbar .buttonActive { div#toolbar .buttonOff {
width: 32px; opacity: 0.4;
height: 36px;
float: left;
margin: 0 1px;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
} }
div#toolbar .button img { div#toolbar .button img {
@ -302,6 +276,11 @@ div#topicNote {
z-index: 4; z-index: 4;
} }
div#topicNote {
background: url(../images/topic_icon.png) no-repeat center top;
z-index: 4;
}
div#topicLink { div#topicLink {
background: url(../images/topic_link.png) no-repeat center top; background: url(../images/topic_link.png) no-repeat center top;
z-index: 4; z-index: 4;

View File

@ -0,0 +1,74 @@
.palette-panel {
/*background: white;*/
/*border-color: #CCC #666 #666 #CCC;*/
/*border-style: solid;*/
/*border-width: 1px;*/
cursor: default;
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
z-index: 20000;
-webkit-user-select: none;
}
.palette {
cursor: default;
outline: none;
}
.palette-table {
border: 1px solid #666;
border-collapse: collapse;
margin: 5px;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.palette-table {
border-collapse: collapse;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.palette-cell {
border: 0;
border-right: 1px solid #666;
cursor: pointer;
height: 18px;
margin: 0;
text-align: center;
vertical-align: middle;
width: 18px;
}
.palette-cell .palette-colorswatch {
border: none;
font-size: x-small;
height: 18px;
position: relative;
width: 18px;
}
.palette-cell-selected .palette-colorswatch {
background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -368px 0;
border: 1px solid #333;
color: white;
font-weight: bold;
height: 16px;
width: 16px;
}
.palette-colorswatch:hover {
border: 1px solid white;
height: 16px;
width: 16px;
}

View File

@ -0,0 +1,398 @@
<div id="color-palette" class="palette-panel palette-panel-vertical palette-panel-noaccel"
style="-webkit-user-select: none; left: 451px; top: 128px; visibility: visible; " role="menu" aria-haspopup="true"
aria-activedescendant="">
<div class="palette" id=":3p">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
aria-activedescendent="palette-cell-244">
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(0, 0, 0);"
title="RGB (0, 0, 0)"></div>
</td>
<td class="palette-cell palette-cell-selected">
<div class="palette-colorswatch"
style="background-color: rgb(68, 68, 68);"
title="RGB (68, 68, 68)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(102, 102, 102);"
title="RGB (102, 102, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(153, 153, 153);"
title="RGB (153, 153, 153)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(204, 204, 204);"
title="RGB (204, 204, 204)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(238, 238, 238);"
title="RGB (238, 238, 238)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(243, 243, 243);"
title="RGB (243, 243, 243)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 255, 255);"
title="RGB (255, 255, 255)"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="palette" id=":3q">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
>
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 0, 0);"
title="RGB (255, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 153, 0);"
title="RGB (255, 153, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 255, 0);"
title="RGB (255, 255, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 255, 0);"
title="RGB (0, 255, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 255, 255);"
title="RGB (0, 255, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(0, 0, 255);"
title="RGB (0, 0, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(153, 0, 255);"
title="RGB (153, 0, 255)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(255, 0, 255);"
title="RGB (255, 0, 255)"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="palette" id=":3r">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid">
<tbody class="palette-body">
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(244, 204, 204);"
title="RGB (244, 204, 204)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(252, 229, 205);"
title="RGB (252, 229, 205)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 242, 204);"
title="RGB (255, 242, 204)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(217, 234, 211);"
title="RGB (217, 234, 211)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(208, 224, 227);"
title="RGB (208, 224, 227)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(207, 226, 243);"
title="RGB (207, 226, 243)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(217, 210, 233);"
title="RGB (217, 210, 233)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(234, 209, 220);"
title="RGB (234, 209, 220)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(234, 153, 153);"
title="RGB (234, 153, 153)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(249, 203, 156);"
title="RGB (249, 203, 156)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 229, 153);"
title="RGB (255, 229, 153)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(182, 215, 168);"
title="RGB (182, 215, 168)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(162, 196, 201);"
title="RGB (162, 196, 201)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(159, 197, 232);"
title="RGB (159, 197, 232)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(180, 167, 214);"
title="RGB (180, 167, 214)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(213, 166, 189);"
title="RGB (213, 166, 189)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(224, 102, 102);"
title="RGB (224, 102, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(246, 178, 107);"
title="RGB (246, 178, 107)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(255, 217, 102);"
title="RGB (255, 217, 102)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(147, 196, 125);"
title="RGB (147, 196, 125)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(118, 165, 175);"
title="RGB (118, 165, 175)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(111, 168, 220);"
title="RGB (111, 168, 220)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(142, 124, 195);"
title="RGB (142, 124, 195)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(194, 123, 160);"
title="RGB (194, 123, 160)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(204, 0, 0);"
title="RGB (204, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(230, 145, 56);"
title="RGB (230, 145, 56)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(241, 194, 50);"
title="RGB (241, 194, 50)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(106, 168, 79);"
title="RGB (106, 168, 79)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(69, 129, 142);"
title="RGB (69, 129, 142)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(61, 133, 198);"
title="RGB (61, 133, 198)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(103, 78, 167);"
title="RGB (103, 78, 167)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(166, 77, 121);"
title="RGB (166, 77, 121)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(153, 0, 0);"
title="RGB (153, 0, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(180, 95, 6);"
title="RGB (180, 95, 6)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(191, 144, 0);"
title="RGB (191, 144, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(56, 118, 29);"
title="RGB (56, 118, 29)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(19, 79, 92);"
title="RGB (19, 79, 92)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(11, 83, 148);"
title="RGB (11, 83, 148)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(53, 28, 117)"
title="RGB (53, 28, 117)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(116, 27, 71);"
title="RGB (116, 27, 71)"></div>
</td>
</tr>
<tr class="palette-row">
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(102, 0, 0);"
title="RGB (102, 0, 0)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(120, 63, 4);"
title="RGB (120, 63, 4)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(127, 96, 0);"
title="RGB (127, 96, 0)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(39, 78, 19);"
title="RGB (39, 78, 19)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(12, 52, 61);"
title="RGB (12, 52, 61)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(7, 55, 99);"
title="RGB (7, 55, 99)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(32, 18, 77);"
title="RGB (32, 18, 77)"></div>
</td>
<td class="palette-cell"
>
<div class="palette-colorswatch"
style="background-color: rgb(76, 17, 48);"
title="RGB (76, 17, 48)"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

View File

@ -2,21 +2,21 @@
<html> <html>
<head> <head>
<title>WiseMapping - Editor </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<![endif]--> <![endif]-->
<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script> <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<!-- Internet Explorer 8 Hack -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title>
<link rel="stylesheet" type="text/css" href="../css/editor.css"/> <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
<link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/> <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript'
src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='/core-js/target/classes/core.js'></script> <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
<!--<script type='text/javascript' src='js/core-min.js'></script>-->
<script type="text/javascript"> <script type="text/javascript">
//Google-Brix framework load callback function //Google-Brix framework load callback function
@ -24,15 +24,17 @@
$(document).fireEvent('loadcomplete', 'brix'); $(document).fireEvent('loadcomplete', 'brix');
}; };
var mapId = '10'; // @todo: Must be changed ...
var brixReady = false; var brixReady = false;
var mindReady = false; var mindReady = false;
var local = false; var collab = 'standalone';
// var collab = 'brix';
$(document).addEvent('loadcomplete', function(resource) { $(document).addEvent('loadcomplete', function(resource) {
brixReady = resource == 'brix' ? true : brixReady; brixReady = resource == 'brix' ? true : brixReady;
mindReady = resource == 'mind' ? true : mindReady; mindReady = resource == 'mind' ? true : mindReady;
if (mindReady) { if (mindReady) {
designer = buildDesigner(); designer = buildDesigner(collab);
} }
// If both resources has been loaded, start loading the framework... // If both resources has been loaded, start loading the framework...
@ -49,13 +51,12 @@
} }
}); });
} else if (local && mindReady) { } else if (collab == 'standalone' && mindReady) {
// Load map from XML ... // Load map from XML ...
var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>'; var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
var domDocument = core.Utils.createDocumentFromText(mapXml); var domDocument = core.Utils.createDocumentFromText(mapXml);
var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument); var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument);
var mindmap = serializer.loadFromDom(domDocument); var mindmap = serializer.loadFromDom(domDocument, mapId);
mindmap.setId('1');
// Now, load the map ... // Now, load the map ...
designer.loadMap(mindmap); designer.loadMap(mindmap);
@ -116,12 +117,12 @@
<div id="editTab" class="tabContent"> <div id="editTab" class="tabContent">
<div id="file" class="buttonContainer" title="SYMB_ FILE"> <div id="file" class="buttonContainer" title="SYMB_ FILE">
<fieldset> <fieldset>
<div id="undoEdition" class="button" title="Undo Edition"> <div id="undoEdition" class="buttonOn" title="Undo Edition">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Undo</p> <p>Undo</p>
</div> </div>
</div> </div>
<div id="redoEdition" class="button" title="Redo Edition"> <div id="redoEdition" class="buttonOn" title="Redo Edition">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Redo</p> <p>Redo</p>
</div> </div>
@ -130,12 +131,12 @@
</div> </div>
<div id="zoom" class="buttonContainer" title="Zoom"> <div id="zoom" class="buttonContainer" title="Zoom">
<fieldset> <fieldset>
<div id="zoomIn" class="button" title="Zoom In"> <div id="zoomIn" class="buttonOn" title="Zoom In">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>In</p> <p>In</p>
</div> </div>
</div> </div>
<div id="zoomOut" class="button" title="Zoom Out"> <div id="zoomOut" class="buttonOn" title="Zoom Out">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Out</p> <p>Out</p>
</div> </div>
@ -144,42 +145,42 @@
</div> </div>
<div id="node" class="buttonContainer" title="Node Properties"> <div id="node" class="buttonContainer" title="Node Properties">
<fieldset> <fieldset>
<div id="topicShape" class="button comboButton" title="SYMB_TOPIC_SHAPE"> <div id="topicShape" class="buttonOn comboButton" title="SYMB_TOPIC_SHAPE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Shape</p> <p>Shape</p>
</div> </div>
</div> </div>
<div id="addTopic" class="button" title="SYMB_ TOPIC_ADD"> <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Add</p> <p>Add</p>
</div> </div>
</div> </div>
<div id="deleteTopic" class="button" title="SYMB_ TOPIC_DELETE"> <div id="deleteTopic" class="buttonOn" title="SYMB_ TOPIC_DELETE">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Delete</p> <p>Delete</p>
</div> </div>
</div> </div>
<div id="topicBorder" class="button" title="SYMB_ TOPIC_BORDER_COLOR"> <div id="topicBorder" class="buttonOn" title="SYMB_ TOPIC_BORDER_COLOR">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Border</p> <p>Border</p>
</div> </div>
</div> </div>
<div id="topicColor" class="button" title="Background Color"> <div id="topicColor" class="buttonOn" title="Background Color">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Color</p> <p>Color</p>
</div> </div>
</div> </div>
<div id="topicIcon" class="button" title="Change Icon"> <div id="topicIcon" class="buttonOn" title="Change Icon">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Icon</p> <p>Icon</p>
</div> </div>
</div> </div>
<div id="topicNote" class="button" title="Add Note"> <div id="topicNote" class="buttonOn" title="Add Note">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Note</p> <p>Note</p>
</div> </div>
</div> </div>
<div id="topicLink" class="button" title="Add Link"> <div id="topicLink" class="buttonOn" title="Add Link">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Link</p> <p>Link</p>
</div> </div>
@ -193,27 +194,27 @@
</div> </div>
<div id="font" class="buttonContainer" title="Font Properties"> <div id="font" class="buttonContainer" title="Font Properties">
<fieldset> <fieldset>
<div id="fontFamily" class="button comboButton" title="Font Style"> <div id="fontFamily" class="buttonOn comboButton" title="Font Style">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Style</p> <p>Style</p>
</div> </div>
</div> </div>
<div id="fontSize" class="button comboButton" title="Font Size"> <div id="fontSize" class="buttonOn comboButton" title="Font Size">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Size</p> <p>Size</p>
</div> </div>
</div> </div>
<div id="fontBold" class="button" title="Bold Style"> <div id="fontBold" class="buttonOn" title="Bold Style">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Bold</p> <p>Bold</p>
</div> </div>
</div> </div>
<div id="fontItalic" class="button" title="Italic Style"> <div id="fontItalic" class="buttonOn" title="Italic Style">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Italic</p> <p>Italic</p>
</div> </div>
</div> </div>
<div id="fontColor" class="button comboButton" title="Fond Color"> <div id="fontColor" class="buttonOn comboButton" title="Fond Color">
<div class="toolbarLabel"> <div class="toolbarLabel">
<p>Color</p> <p>Color</p>
</div> </div>

View File

@ -158,8 +158,8 @@ function buildDesigner() {
width: parseInt(screen.width) width: parseInt(screen.width)
}); });
var editorProperties = {zoom:0.85,saveOnLoad:true}; var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.MindmapDesigner(editorProperties, container); designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({ designer.setViewPort({
height: parseInt(window.innerHeight - 112), // Footer and Header height: parseInt(window.innerHeight - 112), // Footer and Header
width: parseInt(window.innerWidth) width: parseInt(window.innerWidth)
@ -171,7 +171,6 @@ function buildDesigner() {
designer._cleanScreen = function() { designer._cleanScreen = function() {
menu.clear() menu.clear()
}; };
return designer; return designer;
} }

View File

@ -225,7 +225,7 @@ function buildDesigner(editorProperties, isTryMode) {
width: parseInt(screen.width) width: parseInt(screen.width)
}); });
designer = new mindplot.MindmapDesigner(editorProperties, container); designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({ designer.setViewPort({
height: parseInt(window.innerHeight - 151), // Footer and Header height: parseInt(window.innerHeight - 151), // Footer and Header
width: parseInt(window.innerWidth) width: parseInt(window.innerWidth)

View File

@ -64,7 +64,7 @@ function buildMindmapDesigner() {
editorProperties.height = screenHeight; editorProperties.height = screenHeight;
editorProperties.readOnly = true; editorProperties.readOnly = true;
designer = new mindplot.MindmapDesigner(editorProperties, container); designer = new mindplot.Designer(editorProperties, container);
designer.loadFromXML(mapId, mapXml); designer.loadFromXML(mapId, mapXml);
// If a node has focus, focus can be move to another node using the keys. // If a node has focus, focus can be move to another node using the keys.