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

Partially supported multilines.

Browse Source
This commit is contained in:
Paulo Veiga
2011-09-02 02:31:03 -03:00
parent e437e0e329
commit d43eb930d9
32 changed files with 804 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web2d/src/main/javascript/Element.js
View File

@@ -87,6 +87,10 @@ web2d.Element = new Class({
addEvent : function(type, listener) {
this._peer.addEvent(type, listener);
},
cloneEvents : function(from) {
this._peer.cloneEvents(from);
},
/**
*
* Allows the removal of event listeners from the event target.

6
web2d/src/main/javascript/Text.js
View File

@@ -31,6 +31,12 @@ web2d.Text = new Class({
this._peer.setText(text);
},
setTextAlignment : function(align)
{
$assert(align,"align can not be null");
this._peer.setTextAlignment(align);
},
setTextSize : function(width, height) {
this._peer.setContentSize(width, height);
},

4
web2d/src/main/javascript/peer/svg/ElementPeer.js
View File

@@ -82,9 +82,11 @@ web2d.peer.svg.ElementPeer = new Class({
* http://developer.mozilla.org/en/docs/addEvent
*/
addEvent : function(type, listener) {
this._native.addEvent(type, listener);
},
cloneEvents : function(from) {
this._native.cloneEvents(from);
},
removeEvent : function(type, listener) {

51
web2d/src/main/javascript/peer/svg/TextPeer.js
View File

@@ -29,15 +29,41 @@ web2d.peer.svg.TextPeer = new Class({
this._native.appendChild(element._native);
},
setTextAlignment : function(align) {
this._textAlign = align;
},
getTextAlignment : function() {
return $defined(this._textAlign) ? this._textAlign : 'left';
},
setText : function(text) {
text = core.Utils.escapeInvalidTags(text);
var child = this._native.firstChild;
if ($defined(child)) {
this._native.removeChild(child);
}
var childs = this._native.getChildren();
childs.forEach(function(child) {
child.dispose();
});
this._text = text;
var textNode = window.document.createTextNode(text);
this._native.appendChild(textNode);
this.setVisibility(false);
var lines = text.split('\n');
var tspans = [];
lines.forEach(function(line) {
var tspan = window.document.createElementNS(this.svgNamespace, 'tspan');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', this.getPosition().x);
var tspanContent = window.document.createTextNode(line);
tspan.appendChild(tspanContent);
tspans.push(tspan);
this._native.appendChild(tspan);
}.bind(this));
this.setVisibility(true);
},
getText : function() {
@@ -46,13 +72,14 @@ web2d.peer.svg.TextPeer = new Class({
setPosition : function(x, y) {
this._position = {x:x, y:y};
var height = this._font.getSize();
if ($defined(this._parent) && $defined(this._native.getBBox))
height = this.getHeight();
var size = parseInt(height);
this._native.setAttribute('y', y + size * 3 / 4);
//y+size/2
this._native.setAttribute('y', y);
this._native.setAttribute('x', x);
// tspan must be positioned manually.
this._native.getElements('tspan').forEach(function(span) {
span.setAttribute('x', x);
});
},
getPosition : function() {

159
web2d/src/test/javascript/render/font.html Normal file
View File

@@ -0,0 +1,159 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</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="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6,8,10,15].forEach(function(size, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center','left','right'].forEach(function(align, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function initialize() {
web2d.peer.Toolkit.init();
// Multine tests ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head>
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1>
<table border="1">
<colgroup>
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<thead>
<tr>
<td></td>
<td>Arial</td>
<td>Tahoma</td>
<td>Verdana</td>
<td>Times</td>
</tr>
</thead>
<tr>
<td>
Multiline Text
</td>
<td>
<div id="multi0"></div>
</td>
<td>
<div id="multi1"></div>
</td>
<td>
<div id="multi2"></div>
</td>
<td>
<div id="multi3"></div>
</td>
</tr>
<tr>
<td>
Multiline Aligment
</td>
<td>
<div id="amulti0"></div>
</td>
<td>
<div id="amulti1"></div>
</td>
<td>
<div id="amulti2"></div>
</td>
<td>
<div id="amulti3"></div>
</td>
</tr>
<!--**************************************************************************-->
</table>
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

97
web2d/src/test/javascript/render/text.html
View File

@@ -15,7 +15,8 @@
web2d.peer.utils = {};
</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="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
@@ -44,66 +45,57 @@
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function zoomIn()
{
for(i=0; i<workspaces.length; i++)
{
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width*2,coordSize.height*2);
}
};
function zoomIn() {
for (i = 0; i < workspaces.length; i++) {
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
}
};
workspaces = [];
var textot;
workspaces = [];
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
{
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize,coordSize);
overflowWorkspace.setCoordOrigin(0,0);
var TextTest = function (size, coordSize, textval, font, fontSizeval, style, modifier, fontColor, owner, iesimo) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize, coordSize);
overflowWorkspace.setCoordOrigin(0, 0);
/*var rect = new web2d.Rect(1 / 10);
rect.setPosition(40, 40);
rect.setSize(20, 20);
overflowWorkspace.appendChild(rect);
*/
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval+" "+scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
textot = text;
overflowWorkspace.addItAsChildTo($(owner));
overflowWorkspace.addItAsChildTo($(owner));
var parent = $(owner);
var span= document.createElement("span");
span.setAttribute("id","textoHTML"+iesimo);
var textsize = text.offsetWidth;
var textHtml=document.createTextNode(textsize);
var fontSize=text.getHtmlFontSize();
span.appendChild(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:"+modifier+";font-style: "+style+"; font-size:"+ fontSize +"pt; font-family: "+font+";width:30;height:30;");
var parent = $(owner);
var span = document.createElement("span");
span.setAttribute("id", "textoHTML" + iesimo);
var textsize = text.offsetWidth;
var textHtml = document.createTextNode(textsize);
var fontSize = text.getHtmlFontSize();
span.appendChild(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:" + modifier + ";font-style: " + style + "; font-size:" + fontSize + "pt; font-family: " + font + ";width:30;height:30;");
parent.appendChild(span);
workspaces[iesimo]=overflowWorkspace;
};
parent.appendChild(span);
workspaces[iesimo] = overflowWorkspace;
};
function initialize(){
web2d.peer.Toolkit.init();
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
}
function initialize() {
web2d.peer.Toolkit.init();
TextTest("100px", 200, "Test Text", "Arial", 10, "normal", "normal", "red", "text0", 0);
TextTest("100px", 100, "Test Text", "Arial", 10, "normal", "normal", "blue", "text1", 1);
TextTest("100px", 50, "Test Text", "Arial", 10, "normal", "normal", "blue", "text2", 2);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "normal", "blue", "text3", 3);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "bold", "green", "text4", 4);
}
</script>
</script>
</head>
<body onload="initialize();">
@@ -132,7 +124,8 @@
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>