vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 14:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Default editor colors appear in the pallete.

Browse Source 
Remove discard changes button.
This commit is contained in:
Paulo Gustavo Veiga 2012-08-17 09:46:35 -03:00
parent 4cd765cfb9
commit f6953aad9c
4 changed files with 109 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
mindplot/src/main/javascript/MainTopic.js
View File

@ -17,14 +17,14 @@
*/ */
mindplot.MainTopic = new Class({ mindplot.MainTopic = new Class({
Extends: mindplot.Topic, Extends:mindplot.Topic,
initialize : function(model, options) { initialize:function (model, options) {
this.parent(model, options); this.parent(model, options);
}, },
INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid #009900'}, INNER_RECT_ATTRIBUTES:{stroke:'0.5 solid #009900'},
_buildDragShape : function() { _buildDragShape:function () {
var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
var size = this.getSize(); var size = this.getSize();
innerShape.setSize(size.width, size.height); innerShape.setSize(size.width, size.height);
@ -40,7 +40,7 @@ mindplot.MainTopic = new Class({
innerShape.setAttribute("fillColor", bgColor); innerShape.setAttribute("fillColor", bgColor);
// Create group ... // Create group ...
var groupAttributes = {width: 100, height:100,coordSizeWidth:100,coordSizeHeight:100}; var groupAttributes = {width:100, height:100, coordSizeWidth:100, coordSizeHeight:100};
var group = new web2d.Group(groupAttributes); var group = new web2d.Group(groupAttributes);
group.appendChild(innerShape); group.appendChild(innerShape);
@ -56,11 +56,11 @@ mindplot.MainTopic = new Class({
}, },
_defaultShapeType : function() { _defaultShapeType:function () {
return mindplot.model.TopicShape.LINE; return mindplot.model.TopicShape.LINE;
}, },
updateTopicShape : function(targetTopic, workspace) { updateTopicShape:function (targetTopic, workspace) {
// Change figure based on the connected topic ... // Change figure based on the connected topic ...
var model = this.getModel(); var model = this.getModel();
var shapeType = model.getShapeType(); var shapeType = model.getShapeType();
@ -73,7 +73,7 @@ mindplot.MainTopic = new Class({
} }
}, },
disconnect : function(workspace) { disconnect:function (workspace) {
this.parent(workspace); this.parent(workspace);
var size = this.getSize(); var size = this.getSize();
@ -88,11 +88,11 @@ mindplot.MainTopic = new Class({
innerShape.setVisibility(true); innerShape.setVisibility(true);
}, },
getTopicType : function() { getTopicType:function () {
return "MainTopic"; return "MainTopic";
}, },
_updatePositionOnChangeSize : function(oldSize, newSize) { _updatePositionOnChangeSize:function (oldSize, newSize) {
var xOffset = Math.round((newSize.width - oldSize.width) / 2); var xOffset = Math.round((newSize.width - oldSize.width) / 2);
var pos = this.getPosition(); var pos = this.getPosition();
@ -106,7 +106,7 @@ mindplot.MainTopic = new Class({
} }
}, },
workoutIncomingConnectionPoint : function(sourcePosition) { workoutIncomingConnectionPoint:function (sourcePosition) {
$assert(sourcePosition, 'sourcePoint can not be null'); $assert(sourcePosition, 'sourcePoint can not be null');
var pos = this.getPosition(); var pos = this.getPosition();
var size = this.getSize(); var size = this.getSize();
@ -131,7 +131,7 @@ mindplot.MainTopic = new Class({
}, },
workoutOutgoingConnectionPoint : function(targetPosition) { workoutOutgoingConnectionPoint:function (targetPosition) {
$assert(targetPosition, 'targetPoint can not be null'); $assert(targetPosition, 'targetPoint can not be null');
var pos = this.getPosition(); var pos = this.getPosition();
var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos); var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
@ -169,7 +169,7 @@ mindplot.MainTopic = new Class({
return result; return result;
}, },
_getInnerPadding : function() { _getInnerPadding:function () {
var result; var result;
var parent = this.getModel().getParent(); var parent = this.getModel().getParent();
if (parent && mindplot.model.INodeModel.MAIN_TOPIC_TYPE == parent.getType()) { if (parent && mindplot.model.INodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
@ -181,14 +181,14 @@ mindplot.MainTopic = new Class({
return result; return result;
}, },
isConnectedToCentralTopic : function() { isConnectedToCentralTopic:function () {
var model = this.getModel(); var model = this.getModel();
var parent = model.getParent(); var parent = model.getParent();
return parent && parent.getType() === mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE; return parent && parent.getType() === mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE;
}, },
_defaultText : function() { _defaultText:function () {
var targetTopic = this.getOutgoingConnectedTopic(); var targetTopic = this.getOutgoingConnectedTopic();
var result = ""; var result = "";
if ($defined(targetTopic)) { if ($defined(targetTopic)) {
@ -198,50 +198,51 @@ mindplot.MainTopic = new Class({
result = $msg('SUB_TOPIC'); result = $msg('SUB_TOPIC');
} }
} else { } else {
result = $msg('ISOLATED_TOPIC');; result = $msg('ISOLATED_TOPIC');
;
} }
return result; return result;
}, },
_defaultFontStyle : function() { _defaultFontStyle:function () {
var targetTopic = this.getOutgoingConnectedTopic(); var targetTopic = this.getOutgoingConnectedTopic();
var result; var result;
if ($defined(targetTopic)) { if ($defined(targetTopic)) {
if (targetTopic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { if (targetTopic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
result = { result = {
font:"Arial", font:"Arial",
size: 8, size:8,
style:"normal", style:"normal",
weight:"normal", weight:"normal",
color:"#525c61" color:"rgb(82,92,97)"
}; };
} else { } else {
result = { result = {
font:"Arial", font:"Arial",
size: 6, size:6,
style:"normal", style:"normal",
weight:"normal", weight:"normal",
color:"#525c61" color:"rgb(82,92,97)"
}; };
} }
} else { } else {
result = { result = {
font:"Verdana", font:"Verdana",
size: 8, size:8,
style:"normal", style:"normal",
weight:"normal", weight:"normal",
color:"#525c61" color:"rgb(82,92,97)"
}; };
} }
return result; return result;
}, },
_defaultBackgroundColor : function() { _defaultBackgroundColor:function () {
return "#E0E5EF"; return "rgb(224,229,239)";
}, },
_defaultBorderColor : function() { _defaultBorderColor:function () {
return '#023BB9'; return 'rgb(2,59,185)';
} }
}); });

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

@ -17,34 +17,34 @@
*/ */
mindplot.widget.ColorPalettePanel = new Class({ mindplot.widget.ColorPalettePanel = new Class({
Extends: mindplot.widget.ToolbarPaneItem, Extends:mindplot.widget.ToolbarPaneItem,
initialize : function(buttonId, model, baseUrl) { initialize:function (buttonId, model, baseUrl) {
this._baseUrl = baseUrl; this._baseUrl = baseUrl;
this.parent(buttonId, model); this.parent(buttonId, model);
$assert($defined(baseUrl), "baseUrl can not be null"); $assert($defined(baseUrl), "baseUrl can not be null");
}, },
_load : function() { _load:function () {
if (!mindplot.widget.ColorPalettePanel._panelContent) { if (!mindplot.widget.ColorPalettePanel._panelContent) {
// Load all the CSS styles ... // Load all the CSS styles ...
Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'}); Asset.css(this._baseUrl + '/colorPalette.css', {id:'colorPaletteStyle', title:'colorPalette'});
// Load panel html fragment ... // Load panel html fragment ...
var result; var result;
var request = new Request({ var request = new Request({
url: this._baseUrl + '/colorPalette.html', url:this._baseUrl + '/colorPalette.html',
method: 'get', method:'get',
async: false, async:false,
onRequest: function() { onRequest:function () {
console.log("loading ..."); console.log("loading ...");
}, },
onSuccess: function(responseText) { onSuccess:function (responseText) {
result = responseText; result = responseText;
}, },
onFailure: function() { onFailure:function () {
result = '<div>Sorry, your request failed :(</div>'; result = '<div>Sorry, your request failed :(</div>';
} }
}); });
@ -56,15 +56,15 @@ mindplot.widget.ColorPalettePanel = new Class({
}, },
buildPanel: function() { buildPanel:function () {
var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'}); var content = new Element("div", {'class':'toolbarPanel', 'id':this._buttonId + 'colorPalette'});
content.innerHTML = this._load(); content.innerHTML = this._load();
// Register on toolbar elements ... // Register on toolbar elements ...
var colorCells = content.getElements('div[class=palette-colorswatch]'); var colorCells = content.getElements('div[class=palette-colorswatch]');
var model = this.getModel(); var model = this.getModel();
colorCells.each(function(elem) { colorCells.each(function (elem) {
elem.addEvent('click', function() { elem.addEvent('click', function () {
var color = elem.getStyle("background-color"); var color = elem.getStyle("background-color");
model.setValue(color); model.setValue(color);
this.hide(); this.hide();
@ -74,12 +74,12 @@ mindplot.widget.ColorPalettePanel = new Class({
return content; return content;
}, },
_updateSelectedItem : function() { _updateSelectedItem:function () {
var panelElem = this.getPanelElem(); var panelElem = this.getPanelElem();
// Clear selected cell based on the color ... // Clear selected cell based on the color ...
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']"); var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
tdCells.each(function(elem) { tdCells.each(function (elem) {
elem.className = 'palette-cell'; elem.className = 'palette-cell';
}); });
@ -87,9 +87,15 @@ mindplot.widget.ColorPalettePanel = new Class({
var colorCells = panelElem.getElements('div[class=palette-colorswatch]'); var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
var model = this.getModel(); var model = this.getModel();
var modelValue = model.getValue(); var modelValue = model.getValue();
colorCells.each(function(elem) { colorCells.each(function (elem) {
var color = elem.getStyle("background-color"); var color = elem.getStyle("background-color");
if (modelValue == color) { if (modelValue != null && modelValue[0] == 'r') {
modelValue = modelValue.rgbToHex();
}
console.log("modelValue:" + modelValue);
console.log("color:" + color);
if (modelValue != null && modelValue.toUpperCase() == color.toUpperCase()) {
elem.parentNode.className = 'palette-cell palette-cell-selected'; elem.parentNode.className = 'palette-cell palette-cell-selected';
} }
}); });

56
mindplot/src/main/javascript/widget/colorPalette.html
View File

@ -1,6 +1,7 @@
<div id="color-palette" class="palette-panel palette-panel-vertical palette-panel-noaccel" <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" style="-webkit-user-select: none; left: 451px; top: 128px; visibility: visible; " role="menu" aria-haspopup="true"
aria-activedescendant=""> aria-activedescendant="">
<div class="palette" id=":3p"> <div class="palette" id=":3p">
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid" <table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
aria-activedescendent="palette-cell-244"> aria-activedescendent="palette-cell-244">
@ -46,8 +47,8 @@
</td> </td>
<td class="palette-cell"> <td class="palette-cell">
<div class="palette-colorswatch" <div class="palette-colorswatch"
style="background-color: rgb(255, 255, 255);" style="background-color: rgb(254, 255, 255);"
title="RGB (255, 255, 255)"></div> title="RGB (254, 255, 255)"></div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -395,4 +396,55 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="palette" id=":2p">
<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(255, 255, 255);"
title="RGB (255, 255, 255)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(224, 229, 239);"
title="RGB (224, 229, 239)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color:rgb(80, 157, 192);"
title="RGB (80, 157, 192)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color:rgb(57, 113, 177);"
title="RGB (57, 113, 177)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(2, 59, 185);"
title="RGB (2, 59, 185)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(244, 184, 45);"
title="RGB (244, 184, 45)"></div>
</td>
<td class="palette-cell palette-cell-selected">
<div class="palette-colorswatch"
style="background-color: rgb(241, 163, 39);"
title="RGB (241, 163, 39)"></div>
</td>
<td class="palette-cell">
<div class="palette-colorswatch"
style="background-color: rgb(82, 92, 97);"
title="RGB (82, 92, 97)"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>

6
wise-webapp/src/main/webapp/jsp/mindmapEditorToolbar.jsf
View File

@ -6,9 +6,9 @@
<div id="save" class="buttonOn"> <div id="save" class="buttonOn">
<img src="images/save.png"/> <img src="images/save.png"/>
</div> </div>
<div id="discard" class="buttonOn"> <%--<div id="discard" class="buttonOn">--%>
<img src="images/discard.png"/> <%--<img src="images/discard.png"/>--%>
</div> <%--</div>--%>
</c:if> </c:if>
<div id="print" class="buttonOn"> <div id="print" class="buttonOn">
<img src="images/print.png"/> <img src="images/print.png"/>