diff --git a/mindplot/pom.xml b/mindplot/pom.xml
index d8d7f267..24435b0a 100644
--- a/mindplot/pom.xml
+++ b/mindplot/pom.xml
@@ -156,6 +156,18 @@
files="layout/FreeMindLayoutManager.js"/>
+
+
+
+
+
+
diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js
index 9e52b993..faf33d16 100644
--- a/mindplot/src/main/javascript/MindmapDesigner.js
+++ b/mindplot/src/main/javascript/MindmapDesigner.js
@@ -681,7 +681,7 @@ mindplot.MindmapDesigner = new Class({
}
},
- addImage2SelectedNode : function(iconType) {
+ addIconType2SelectedNode : function(iconType) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
var topicsIds = validSelectedObjects.nodes;
if (topicsIds.length > 0) {
diff --git a/mindplot/src/main/javascript/header.js b/mindplot/src/main/javascript/header.js
index 81710eeb..28cb8e70 100644
--- a/mindplot/src/main/javascript/header.js
+++ b/mindplot/src/main/javascript/header.js
@@ -25,4 +25,5 @@
var mindplot = {};
mindplot.util = {};
mindplot.commands = {};
-mindplot.layout = {};
\ No newline at end of file
+mindplot.layout = {};
+mindplot.widget = {};
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/FontFamilyPanel.js b/mindplot/src/main/javascript/widget/FontFamilyPanel.js
new file mode 100644
index 00000000..9d5f5421
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/FontFamilyPanel.js
@@ -0,0 +1,37 @@
+/*
+ * 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.FontFamilyPanel = new Class({
+ Extends : mindplot.widget.ToolbarPanel,
+ initialize : function(buttonId, model) {
+ this.parent(buttonId, model);
+ },
+
+ buildPanel: function() {
+
+ var content = new Element("div", {'class':'toolbarPanel','id':'fontFamilyPanel'});
+ content.innerHTML = '' +
+ 'Times
' +
+ 'Arial
' +
+ 'Tahoma
' +
+ 'Verdana
';
+
+ return content;
+
+ }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/FontSizePanel.js b/mindplot/src/main/javascript/widget/FontSizePanel.js
new file mode 100644
index 00000000..34b30120
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/FontSizePanel.js
@@ -0,0 +1,37 @@
+/*
+ * 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.FontSizePanel = new Class({
+ Extends : mindplot.widget.ToolbarPanel,
+ initialize : function(buttonId, model) {
+ this.parent(buttonId, model);
+ },
+
+ buildPanel: function() {
+
+ var content = new Element("div", {'class':'toolbarPanel','id':'fontSizePanel'});
+ content.innerHTML = '' +
+ 'Small
' +
+ 'Normal
' +
+ 'Large
' +
+ 'Huge
';
+
+ return content;
+
+ }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/IconPanel.js b/mindplot/src/main/javascript/widget/IconPanel.js
new file mode 100644
index 00000000..24195717
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/IconPanel.js
@@ -0,0 +1,141 @@
+/*
+ * 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.IconPanel = new Class({
+ Implements:[Options,Events],
+ options:{
+ width:253,
+ initialWidth:0,
+ height:200,
+ panel:null,
+ onStart:Class.empty,
+ state:'close'
+ },
+
+ initialize:function(buttonId, model) {
+ this._buttonId = buttonId;
+ this._model = model;
+
+ this.options.content = this._build();
+ this.init();
+
+ },
+
+ init:function() {
+ var panel = new Element('div');
+ var buttonElem = $(this._buttonId);
+
+ var coord = buttonElem.getCoordinates();
+ var top = buttonElem.getTop() + coord.height + 2;
+ var left = buttonElem.getLeft();
+
+ panel.setStyles({
+ width:this.options.initialWidth,
+ height:0,position:'absolute',
+ top:top,
+ left:left,
+ background:'#e5e5e5',
+ border:'1px solid #BBB4D6',
+ zIndex:20,
+ overflow:'hidden'}
+ );
+
+ this.options.panel = panel;
+ this.options.content.inject(panel);
+
+ this.options.content.addEvent('click', function() {
+ this.hide();
+ }.bind(this));
+
+ panel.setStyle('opacity', 0);
+ panel.inject($(document.body));
+ this.registerOpenPanel();
+ },
+
+ show:function() {
+ this.fireEvent("show");
+ if (this.options.state == 'close') {
+ if (!$defined(this.options.panel)) {
+ this.init();
+ }
+
+ var panel = this.options.panel;
+ panel.setStyles({
+ border: '1px solid #636163',
+ opacity:100,
+ height:this.options.height,
+ width:this.options.width
+ });
+ this.fireEvent('onStart');
+ this.registerClosePanel();
+ this.options.state = 'open';
+
+ }
+ },
+
+ hide:function() {
+ if (this.options.state == 'open') {
+ // Magic, disappear effect ;)
+ this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
+ this.registerOpenPanel();
+ this.options.state = 'close';
+ }
+ },
+
+ registerOpenPanel:function() {
+ $(this._buttonId).removeEvents('click');
+ $(this._buttonId).addEvent('click', function() {
+ this.show();
+ }.bind(this));
+ },
+
+ registerClosePanel:function() {
+ $(this._buttonId).removeEvents('click');
+ $(this._buttonId).addEvent('click', function() {
+ this.hide();
+ }.bind(this));
+ } ,
+
+ _build : function() {
+ var content = new Element('div').setStyles({width:253,height:200,padding:5});
+ var count = 0;
+ for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
+ var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
+ for (var j = 0; j < familyIcons.length; j = j + 1) {
+ // Separate icons by line ...
+ var familyContent;
+ if ((count % 12) == 0) {
+ familyContent = new Element('div').inject(content);
+ }
+
+ var iconId = familyIcons[j];
+ var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
+ img.id = iconId;
+ img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
+
+ img.addEvent('click', function() {
+ this._model.setValue(img.id);
+ }.bind(this));
+
+ count = count + 1;
+ }
+ }
+ return content;
+ }
+
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js
new file mode 100644
index 00000000..8205d1a6
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/Menu.js
@@ -0,0 +1,150 @@
+/*
+ * 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.Menu = new Class({
+ initialize : function(designer) {
+ this._designer = designer;
+ this._toolbarElems = [];
+ this._colorPickers = [];
+
+ var fontFamilyModel = {
+ getValue: function() {
+ var nodes = designer.getSelectedNodes();
+ var length = nodes.length;
+ if (length == 1) {
+ return nodes[0].getFontFamily();
+ }
+ },
+
+ setValue: function(value) {
+ designer.setFont2SelectedNode(value);
+
+ }
+ };
+ var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel);
+ fontFamilyPanel.addEvent('show',function(){this.clear()}.bind(this));
+ this._toolbarElems.push(fontFamilyPanel);
+
+ var fontSizeModel = {
+ getValue: function() {
+ var nodes = designer.getSelectedNodes();
+ var length = nodes.length;
+ if (length == 1) {
+ return nodes[0].getFontSize();
+ }
+ },
+ setValue: function(value) {
+ designer.setFontSize2SelectedNode(value);
+ }
+ };
+ var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel);
+ fontSizePanel.addEvent('show',function(){this.clear()}.bind(this));
+ this._toolbarElems.push(fontSizePanel);
+
+ var topicShapeModel = {
+ getValue: function() {
+ var nodes = designer.getSelectedNodes();
+ var length = nodes.length;
+ if (length == 1) {
+ return nodes[0].getShapeType();
+ }
+ },
+ setValue: function(value) {
+ designer.setShape2SelectedNode(value);
+ }
+ };
+ var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel);
+ topicShapePanel.addEvent('show',function(){this.clear()}.bind(this));
+ this._toolbarElems.push(topicShapePanel);
+
+ // Create icon panel dialog ...
+ var topicIconModel = {
+ getValue: function() {
+ return null;
+ },
+ setValue: function(value) {
+ designer.addIconType2SelectedNode(value);
+ }
+ };
+ var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel);
+ iconPanel.addEvent('show',function(){this.clear()}.bind(this));
+ this._toolbarElems.push(iconPanel);
+
+
+ var topicColorPicker = new MooRainbow('topicColor', {
+ id: 'topicColor',
+ imgPath: '../images/',
+ startColor: [255, 255, 255],
+ onInit: function() {
+ this.clear();
+ }.bind(this),
+
+ onChange: function(color) {
+ designer.setBackColor2SelectedNode(color.hex);
+ },
+ onComplete: function() {
+ this.clear();
+ }.bind(this)
+ });
+ this._colorPickers.push(topicColorPicker);
+
+ var borderColorPicker = new MooRainbow('topicBorder', {
+ id: 'topicBorder',
+ imgPath: '../images/',
+ startColor: [255, 255, 255],
+ onInit: function() {
+ this.clear();
+ }.bind(this),
+ onChange: function(color) {
+ designer.setBorderColor2SelectedNode(color.hex);
+ },
+ onComplete: function() {
+ this.clear();
+ }.bind(this)
+
+ });
+ this._colorPickers.push(borderColorPicker);
+
+ var fontColorPicker = new MooRainbow('fontColor', {
+ id: 'fontColor',
+ imgPath: '../images/',
+ startColor: [255, 255, 255],
+ onInit: function() {
+ this.clear();
+ }.bind(this),
+ onChange: function(color) {
+ designer.setFontColor2SelectedNode(color.hex);
+ },
+ onComplete: function() {
+ this.clear();
+ }.bind(this)
+ });
+ this._colorPickers.push(fontColorPicker);
+ },
+
+ clear : function() {
+ this._toolbarElems.forEach(function(elem) {
+ elem.hide();
+ });
+
+ this._colorPickers.forEach(function(elem) {
+ $clear(elem);
+ elem.hide();
+ });
+ }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/ToolbarPanel.js b/mindplot/src/main/javascript/widget/ToolbarPanel.js
new file mode 100644
index 00000000..17df4b6d
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/ToolbarPanel.js
@@ -0,0 +1,89 @@
+/*
+ * 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.ToolbarPanel = new Class({
+ Implements:[Events],
+ initialize : function(buttonId, model) {
+ $assert(buttonId, "buttonId can not be null");
+ $assert(model, "model can not be null");
+ this._model = model;
+ this._panelId = this.initPanel(buttonId);
+ },
+
+ buildPanel : function() {
+ throw "Method must be implemented";
+ }.protect(),
+
+ initPanel: function (buttonId) {
+ $assert(buttonId, "buttonId can not be null");
+
+ var panelElem = this.buildPanel();
+ var buttonElem = $(buttonId);
+
+ // Add panel content ..
+ panelElem.setStyle('display', 'none');
+ panelElem.inject(buttonElem);
+
+ // Register on toolbar elements ...
+ var menuElems = panelElem.getElements('div');
+ menuElems.forEach(function(elem) {
+ elem.addEvent('click', function() {
+ var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+ this._model.setValue(value);
+ this.hide();
+ }.bind(this));
+ }.bind(this));
+
+ // Font family event handling ....
+ buttonElem.addEvent('click', function() {
+
+ // Is the panel being displayed ?
+ if (this.isVisible()) {
+ this.hide();
+ } else {
+ this.show();
+ }
+
+ }.bind(this));
+ return panelElem.id;
+ },
+
+ show : function() {
+ this.fireEvent('show');
+
+ var menuElems = $(this._panelId).getElements('div');
+ var value = this._model.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._panelId).setStyle('display', 'block');
+
+ },
+
+ hide : function() {
+ $(this._panelId).setStyle('display', 'none');
+ },
+
+ isVisible : function() {
+ return $(this._panelId).getStyle('display') == 'block';
+ }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/TopicShapePanel.js b/mindplot/src/main/javascript/widget/TopicShapePanel.js
new file mode 100644
index 00000000..c693d6e4
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/TopicShapePanel.js
@@ -0,0 +1,37 @@
+/*
+ * 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.TopicShapePanel = new Class({
+ Extends : mindplot.widget.ToolbarPanel,
+ initialize : function(buttonId, model) {
+ this.parent(buttonId, model);
+ },
+
+ buildPanel: function() {
+
+ var content = new Element("div", {'class':'toolbarPanel','id':'topicShapePanel'});
+ content.innerHTML = '' +
+ '' +
+ '' +
+ '' +
+ '';
+
+ return content;
+
+ }
+});
\ No newline at end of file
diff --git a/wise-doc/src/main/webapp/css/editor.css b/wise-doc/src/main/webapp/css/editor.css
index f7c25515..28ae4ea8 100644
--- a/wise-doc/src/main/webapp/css/editor.css
+++ b/wise-doc/src/main/webapp/css/editor.css
@@ -24,7 +24,7 @@ html {
top: 30px;
}
-#waitingContainer,#errorContainer {
+#waitingContainer, #errorContainer {
position: relative;
top: 80px;
height: 120px; /*background: whitesmoke;*/
@@ -33,7 +33,7 @@ html {
padding: 15px;
width: 100%;
border: 1px solid;
- border-color:#a9a9a9;
+ border-color: #a9a9a9;
}
@@ -62,7 +62,7 @@ html {
vertical-align: text-bottom;
height: 30px;
float: right;
- padding-left:120px;
+ padding-left: 120px;
}
#waitingContainer .loadingIcon {
@@ -157,6 +157,11 @@ div#toolbar .button {
margin: 0 2px 2px 2px;
cursor: pointer;
text-align: center;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
div#toolbar .comboButton {
@@ -189,7 +194,7 @@ div#toolbar .toolbarLabel {
top: 55%;
text-align: center;
width: 34px;
- height: 36px;
+ height: 10px;
font-size: 10px;
}
@@ -249,15 +254,15 @@ div#redoEdition {
#export {
background: url(../images/file_export.png) no-repeat center top;
- position:relative;
+ position: relative;
}
#exportAnchor {
- position:absolute;
- width:100%;
- height:100%;
- top:0;
- left:0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
}
div#zoomIn {
@@ -379,7 +384,13 @@ div#fontColor {
display: none;
position: absolute;
z-index: 4;
- top: 71px;
+ top: 53px;
+ text-align: left;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
div.toolbarPanelLink {
@@ -721,21 +732,21 @@ div#small_error_icon {
}
div#toolbar .topicRelation {
- width:56px;
+ width: 56px;
background: url(../images/topic_relationship.png) no-repeat center top;
z-index: 4;
}
div#toolbar .topicRelation:hover {
- width:56px;
+ width: 56px;
background: url(../images/topic_relationship.png) no-repeat center top;
z-index: 4;
}
-div#toolbar .relationshiplabel{
- width:56px;
+div#toolbar .relationshiplabel {
+ width: 56px;
}
.nicEdit-main {
- outline:none;
+ outline: none;
}
\ No newline at end of file
diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html
index ee040a3d..0a180e30 100644
--- a/wise-doc/src/main/webapp/html/editor.html
+++ b/wise-doc/src/main/webapp/html/editor.html
@@ -14,7 +14,7 @@
-
+
@@ -22,7 +22,6 @@
-
@@ -113,30 +112,6 @@
-
-
-
-
-
-
diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js
index 97d668f0..59807818 100644
--- a/wise-doc/src/main/webapp/js/editor.js
+++ b/wise-doc/src/main/webapp/js/editor.js
@@ -177,14 +177,11 @@ function afterMindpotLibraryLoading() {
});
}
- var iconChooser = buildIconChooser();
- iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
-
- // Register Events ...
- $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
- $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-
+ // Register Key Events ...
+ $(document).addEvent('keydown', designer.keyEventHandler.bind(designer));
+ $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer));
+ // Register toolbar events ...
$('zoomIn').addEvent('click', function(event) {
designer.zoomIn();
});
@@ -224,38 +221,6 @@ function afterMindpotLibraryLoading() {
designer.deleteCurrentNode();
});
- var context = this;
- var colorPicker1 = new MooRainbow('topicColor', {
- id: 'topicColor',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker1, context);
- },
- onChange: function(color) {
- designer.setBackColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker1, context);
- }
- });
- var colorPicker2 = new MooRainbow('topicBorder', {
- id: 'topicBorder',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker2, context);
- },
- onChange: function(color) {
- designer.setBorderColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker2, context);
- }
- });
-
$('topicLink').addEvent('click', function() {
designer.addLink2SelectedNode();
@@ -278,35 +243,19 @@ function afterMindpotLibraryLoading() {
designer.setStyle2SelectedNode();
});
- var colorPicker3 = new MooRainbow('fontColor', {
- id: 'fontColor',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker3, context);
- },
- onChange: function(color) {
- designer.setFontColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker3, context);
- }
- });
-
// To prevent the user from leaving the page with changes ...
window.onbeforeunload = function () {
if (designer.needsSave()) {
designer.save(null, false)
}
};
+ var menu = new mindplot.widget.Menu(designer);
- // Build panels ...
- fontFamilyPanel();
- shapeTypePanel();
- fontSizePanel();
+ // If a node has focus, focus can be move to another node using the keys.
+ designer._cleanScreen = function(){menu.clear()};
- // If not problem has arisen, close the dialog ...
+
+ // If not problem has arisen, close the dialog ...
var closeDialog = function() {
if (!window.hasUnexpectedErrors) {
@@ -315,43 +264,6 @@ function afterMindpotLibraryLoading() {
}.delay(500);
}
-function buildIconChooser() {
- var content = new Element('div').setStyles({width:253,height:200,padding:5});
- var count = 0;
- for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
- var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
- for (var j = 0; j < familyIcons.length; j = j + 1) {
- // Separate icons by line ...
- var familyContent;
- if ((count % 12) == 0) {
- familyContent = new Element('div').inject(content);
- }
-
-
- var iconId = familyIcons[j];
- var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
- img.id = iconId;
- img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
- img.addEvent('click', function(event, id) {
- designer.addImage2SelectedNode(this.id);
- }.bindWithEvent(img));
- count = count + 1;
- }
-
- }
-
- return content;
-}
-
-
-function setCurrentColorPicker(colorPicker) {
- this.currentColorPicker = colorPicker;
-}
-
-function removeCurrentColorPicker(colorPicker) {
- $clear(this.currentColorPicker);
-}
-
function buildMindmapDesigner() {
// Initialize message logger ...
@@ -373,132 +285,6 @@ function buildMindmapDesigner() {
designer = new mindplot.MindmapDesigner(editorProperties, container);
designer.loadFromXML(mapId, mapXml);
-
- // If a node has focus, focus can be move to another node using the keys.
- designer._cleanScreen = cleanScreenEvent.bind(this);
-}
-
-function createColorPalette(container, onSelectFunction, event) {
- cleanScreenEvent();
- _colorPalette = new core.ColorPicker();
- _colorPalette.onSelect = function(color) {
- onSelectFunction.call(this, color);
- cleanScreenEvent();
- };
-
- // dojo.event.kwConnect({srcObj: this._colorPalette,srcFunc:"onColorSelect",targetObj:this._colorPalette, targetFunc:"onSelect", once:true});
- var mouseCoords = core.Utils.getMousePosition(event);
- var colorPaletteElement = $("colorPalette");
- colorPaletteElement.setStyle('left', (mouseCoords.x - 80) + "px");
- colorPaletteElement.setStyle('display', "block");
-};
-
-function cleanScreenEvent() {
- if (this.currentColorPicker) {
- this.currentColorPicker.hide();
- }
- $("fontFamilyPanel").setStyle('display', "none");
- $("fontSizePanel").setStyle('display', "none");
- $("topicShapePanel").setStyle('display', "none");
- iconPanel.close();
-}
-
-function fontFamilyPanel() {
- var supportedFonts = ['times','arial','tahoma','verdana'];
- var updateFunction = function(value) {
- value = value.charAt(0).toUpperCase() + value.substring(1, value.length);
- designer.setFont2SelectedNode(value);
- };
-
- var onFocusValue = function(selectedNode) {
- return selectedNode.getFontFamily();
- };
-
- buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue);
-}
-
-function shapeTypePanel() {
- var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
- var updateFunction = function(value) {
- designer.setShape2SelectedNode(value.replace('_', ' '));
- };
-
- var onFocusValue = function(selectedNode) {
-
- return selectedNode.getShapeType().replace(' ', '_');
- };
-
- buildPanel('topicShape', 'topicShapePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function fontSizePanel() {
- var shapeTypePanel = ['small','normal','large','huge'];
- var map = {small:'6',normal:'8',large:'10',huge:'15'};
- var updateFunction = function(key) {
- var value = map[key];
- designer.setFontSize2SelectedNode(value);
- };
-
- var onFocusValue = function(selectedNode) {
- var fontSize = selectedNode.getFontSize();
- var result = "";
- if (fontSize <= 6) {
- result = 'small';
- } else if (fontSize <= 8) {
- result = 'normal';
- } else if (fontSize <= 10) {
- result = 'large';
- } else if (fontSize >= 15) {
- result = 'huge';
- }
- return result;
- };
- buildPanel('fontSize', 'fontSizePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function buildPanel(buttonElemId, elemLinksContainer, elemLinkIds, updateFunction, onFocusValue) {
- // Font family event handling ....
- $(buttonElemId).addEvent('click', function(event) {
- var container = $(elemLinksContainer);
- var isRendered = container.getStyle('display') == 'block';
- cleanScreenEvent();
-
- // Restore default css.
- for (var i = 0; i < elemLinkIds.length; i++) {
- var elementId = elemLinkIds[i];
- $(elementId).className = 'toolbarPanelLink';
- }
-
- // Select current element ...
- var nodes = designer.getSelectedNodes();
- var lenght = nodes.length;
- if (lenght == 1) {
- var selectedNode = nodes[0];
- var selectedElementId = onFocusValue(selectedNode);
- selectedElementId = selectedElementId.toLowerCase();
- var selectedElement = $(selectedElementId);
- selectedElement.className = 'toolbarPanelLinkSelectedLink';
- }
-
- container.setStyle('display', 'block');
-
- var mouseCoords = core.Utils.getMousePosition(event);
- if (!isRendered) {
- container.setStyle('left', (mouseCoords.x - 10) + "px");
- }
- });
-
- var fontOnClick = function(event) {
- var value = this.getAttribute('id');
- updateFunction(value);
- cleanScreenEvent();
- };
-
- // Register event listeners on elements ...
- for (var i = 0; i < elemLinkIds.length; i++) {
- var elementId = elemLinkIds[i];
- $(elementId).addEvent('click', fontOnClick.bind($(elementId)));
- }
}
//######################### Libraries Loading ##################################
diff --git a/wise-webapp/src/main/webapp/js/IconPanel.js b/wise-webapp/src/main/webapp/js/IconPanel.js
deleted file mode 100644
index f585393c..00000000
--- a/wise-webapp/src/main/webapp/js/IconPanel.js
+++ /dev/null
@@ -1,128 +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.
- */
-
-var IconPanel = new Class({
- Implements:[Options,Events],
- options:{
- width:253,
- initialWidth:0,
- height:200,
- content:null,
- panel:null,
- button:null,
- onStart:Class.empty,
- state:'close'
- },
-
- initialize:function(options) {
- this.setOptions(options);
- if ($defined(this.options.button)) {
- this.init();
- }
- },
-
- setButton:function(button) {
- this.options.button = button;
- },
-
- init:function() {
- var panel = new Element('div');
- var coord = this.options.button.getCoordinates();
- var top = this.options.button.getTop() + coord.height + 2;
- var left = this.options.button.getLeft();
- panel.setStyles({
- width:this.options.initialWidth,
- height:0,position:'absolute',
- top:top,
- left:left,
- background:'#e5e5e5',
- border:'1px solid #BBB4D6',
- zIndex:20,
- overflow:'hidden'}
- );
-
- this.options.panel = panel;
- this.options.content.inject(panel);
-
- this.options.content.addEvent('click', function(event) {
- this.close();
- }.bind(this));
-
- panel.setStyle('opacity', 0);
- panel.inject($(document.body));
- this.registerOpenPanel();
- },
-
- open:function() {
- if (this.options.state == 'close') {
- if (!$defined(this.options.panel)) {
- this.init();
- }
-
- var panel = this.options.panel;
- panel.setStyles({border: '1px solid #636163', opacity:100});
- this.fireEvent('onStart');
-
- // Resize dialog to show a cool effect ;)
- panel.set('morph', {duration: 'long', transition: 'bounce:out'});
- panel.morph({
- height:[0,this.options.height],
- width:[this.options.initialWidth, this.options.width]
- });
- panel.addEvent('complete', function() {
- this.registerClosePanel();
- }.bind(this));
-
- this.options.state = 'open';
-
- }
- },
-
- close:function() {
- if (this.options.state == 'open') {
-
- // Magic, disappear effect ;)
- var panel = this.options.panel;
- panel.set('morph', {duration: 'long', transition: 'bounce:in'});
- panel.morph({
- height:[this.options.height,0],
- width:[this.options.width, this.options.initialWidth]
- });
- panel.addEvent('complete', function() {
- this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
- this.registerOpenPanel();
- }.bind(this));
-
- this.options.state = 'close';
- }
- },
-
- registerOpenPanel:function() {
- this.options.button.removeEvents('click');
- this.options.button.addEvent('click', function(event) {
- this.open();
- }.bindWithEvent(this));
- },
-
- registerClosePanel:function() {
- this.options.button.removeEvents('click');
- this.options.button.addEvent('click', function(event) {
- this.close();
- }.bindWithEvent(this));
- }
-});
\ No newline at end of file
diff --git a/wise-webapp/src/main/webapp/js/editor.js b/wise-webapp/src/main/webapp/js/editor.js
index 2a957ac9..40bac79b 100644
--- a/wise-webapp/src/main/webapp/js/editor.js
+++ b/wise-webapp/src/main/webapp/js/editor.js
@@ -184,8 +184,12 @@ function afterMindpotLibraryLoading() {
});
}
- var iconChooser = buildIconChooser();
- iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
+ // Crate icon panel dialog ...
+ iconPanel = new mindplot.widget.IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent});
+ iconPanel.addEvent("selected", function(event) {
+ designer.addIconType2SelectedNode(event.iconType);
+ });
+
// Register Events ...
$(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
$("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
@@ -399,9 +403,9 @@ function afterMindpotLibraryLoading() {
}
}
// Build panels ...
- fontFamilyPanel();
- shapeTypePanel();
- fontSizePanel();
+ var fontPanel = new mindplot.widget.FontFamilyPanel();
+// shapeTypePanel();
+// fontSizePanel();
// If not problem has occured, I close the dialod ...
var closeDialog = function() {
@@ -412,36 +416,6 @@ function afterMindpotLibraryLoading() {
}.delay(500);
}
-function buildIconChooser() {
- var content = new Element('div').setStyles({width:253,height:200,padding:5});
- var count = 0;
- for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
- var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
- for (var j = 0; j < familyIcons.length; j = j + 1) {
- // Separate icons by line ...
- var familyContent;
- if ((count % 12) == 0) {
- familyContent = new Element('div').inject(content);
- }
-
-
- var iconId = familyIcons[j];
- var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
- img.id = iconId;
- img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
- img.addEvent('click', function(event, id) {
- designer.addImage2SelectedNode(this.id);
- }.bindWithEvent(img));
- count = count + 1;
- }
-
- }
-
- return content;
-}
-;
-
-
function setCurrentColorPicker(colorPicker) {
this.currentColorPicker = colorPicker;
}
@@ -486,8 +460,7 @@ function buildMindmapDesigner() {
}.delay(1000)
}
-}
-;
+};
function createColorPalette(container, onSelectFunction, event) {
cleanScreenEvent();
@@ -515,20 +488,6 @@ function cleanScreenEvent() {
iconPanel.close();
}
-function fontFamilyPanel() {
- var supportedFonts = ['times','arial','tahoma','verdana'];
- var updateFunction = function(value) {
- value = value.charAt(0).toUpperCase() + value.substring(1, value.length);
- designer.setFont2SelectedNode(value);
- };
-
- var onFocusValue = function(selectedNode) {
- return selectedNode.getFontFamily();
- };
-
- buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue);
-}
-
function shapeTypePanel() {
var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
var updateFunction = function(value) {
