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

Format test files.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-10-02 17:23:32 -07:00
parent 38ec9931d7
commit 24b3f828e3
13 changed files with 1346 additions and 1257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/web2d/test/javascript/render/arrow.html
View File

@ -1,7 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -15,20 +23,20 @@
web2d.peer.utils = {}; web2d.peer.utils = {};
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
function initialize(){ function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({fillColor:'green'}); var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("200px", "200px"); overflowWorkspace.setSize("200px", "200px");
var arrow = new web2d.Arrow(); var arrow = new web2d.Arrow();
arrow.setFrom(50,50); arrow.setFrom(50, 50);
arrow.setControlPoint(new core.Point(-50,0)); arrow.setControlPoint(new core.Point(-50, 0));
overflowWorkspace.append(arrow); overflowWorkspace.append(arrow);
var arrow2 = new web2d.Arrow(); var arrow2 = new web2d.Arrow();
arrow2.setFrom(100,50); arrow2.setFrom(100, 50);
arrow2.setControlPoint(new core.Point(50,50)); arrow2.setControlPoint(new core.Point(50, 50));
overflowWorkspace.append(arrow2); overflowWorkspace.append(arrow2);
@ -39,31 +47,32 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Different types of PolyLines that can be used.
</td> </td>
<td> <td>
<div id="overflowExample"/> <div id="overflowExample" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
This is how multiple childs will look in each style line This is how multiple childs will look in each style line
</td> </td>
<td> <td>
<div id="multipleLineExample"/> <div id="multipleLineExample" />
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

24
packages/web2d/test/javascript/render/curvedLine.html
View File

@ -1,7 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -18,7 +25,7 @@
function initialize() { function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({fillColor:'green'}); var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("400px", "400px"); overflowWorkspace.setSize("400px", "400px");
var line1 = new web2d.CurvedLine(); var line1 = new web2d.CurvedLine();
line1.setStyle(web2d.CurvedLine.SIMPLE_LINE); line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
@ -44,19 +51,19 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Different types of PolyLines that can be used.
</td> </td>
<td> <td>
<div id="overflowExample"/> <div id="overflowExample" />
</td> </td>
</tr> </tr>
@ -65,10 +72,11 @@
This is how multiple childs will look in each style line This is how multiple childs will look in each style line
</td> </td>
<td> <td>
<div id="multipleLineExample"/> <div id="multipleLineExample" />
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

14
packages/web2d/test/javascript/render/events.html
View File

@ -3,6 +3,13 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -131,14 +138,9 @@
</head> </head>
<body onload="initialize();"> <body onload="initialize();">
<script type="text/javascript">
// Logger.setEnabled(true);
</script>
<h1>Elements Event Handling</h1> <h1>Elements Event Handling</h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%" /> <col style="width:30%" />
<col style="width:60%" /> <col style="width:60%" />

32
packages/web2d/test/javascript/render/font.html
View File

@ -1,7 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -22,7 +29,7 @@
overflowWorkspace.setCoordSize('200', '240'); overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0); overflowWorkspace.setCoordOrigin(0, 0);
[6,8,10,15].forEach(function(size, i) { [6, 8, 10, 15].forEach(function (size, i) {
var wText = new web2d.Text(); var wText = new web2d.Text();
overflowWorkspace.append(wText); overflowWorkspace.append(wText);
@ -32,7 +39,7 @@
wText.setColor('red'); wText.setColor('red');
}); });
overflowWorkspace.addItAsChildTo($("#"+elemId)); overflowWorkspace.addItAsChildTo($("#" + elemId));
} }
function alignments(text, family, elemId) { function alignments(text, family, elemId) {
@ -41,7 +48,7 @@
overflowWorkspace.setCoordSize('260', '240'); overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0); overflowWorkspace.setCoordOrigin(0, 0);
['center','left','right'].forEach(function(align, i) { ['center', 'left', 'right'].forEach(function (align, i) {
var wText = new web2d.Text(); var wText = new web2d.Text();
overflowWorkspace.append(wText); overflowWorkspace.append(wText);
@ -52,18 +59,18 @@
wText.setTextAlignment(align); wText.setTextAlignment(align);
}); });
overflowWorkspace.addItAsChildTo($("#"+elemId)); overflowWorkspace.addItAsChildTo($("#" + elemId));
} }
function initialize() { function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
// Multine tests ... // Multine tests ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) { ['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i); multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
}); });
// Multine tests and alingments .. ... // Multine tests and alingments .. ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) { ['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i); alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
}) })
} }
@ -72,12 +79,12 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>Web2d Fonts Tests</h1> <h1>Web2d Fonts Tests</h1>
<table border="1"> <table>
<colgroup> <colgroup>
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@ -124,7 +131,8 @@
</tr> </tr>
<!--**************************************************************************--> <!--**************************************************************************-->
</table> </table>
<input type="button" value="Zoom In" onclick="zoomIn()"> <input type="button" value="Zoom In" onclick="zoomIn()">
</body> </body>
</html> </html>

184
packages/web2d/test/javascript/render/group.html
View File

@ -1,7 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -16,11 +23,10 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
function initialize(){ function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var basicTest = function() var basicTest = function () {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px"); workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100); workspace.setCoordSize(100, 100);
@ -54,24 +60,19 @@
var xDir = 1; var xDir = 1;
var yDir = 1; var yDir = 1;
var executer = function() var executer = function () {
{
var y = group.getPosition().y + yDir; var y = group.getPosition().y + yDir;
var x = group.getPosition().x + xDir; var x = group.getPosition().x + xDir;
if (x < 0) if (x < 0) {
{
xDir = 1; xDir = 1;
} else if (x > 50) } else if (x > 50) {
{
xDir = -1; xDir = -1;
} }
if (y < 0) if (y < 0) {
{
yDir = 1; yDir = 1;
} else if (y > 50) } else if (y > 50) {
{
yDir = -1; yDir = -1;
} }
@ -83,13 +84,12 @@
basicTest(); basicTest();
var eventTest = function() var eventTest = function () {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px"); workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100); workspace.setCoordSize(100, 100);
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'}; var groupAttributes = { width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0' };
var group = new web2d.Group(groupAttributes); var group = new web2d.Group(groupAttributes);
workspace.append(group); workspace.append(group);
@ -103,7 +103,7 @@
elipseRight.setPosition(0, 0) elipseRight.setPosition(0, 0)
group.append(elipseRight); group.append(elipseRight);
var listener = function(e) { var listener = function (e) {
alert("Click event on:" + this.getType()) alert("Click event on:" + this.getType())
}; };
group.addEvent("click", listener); group.addEvent("click", listener);
@ -115,8 +115,7 @@
eventTest(); eventTest();
var eventTest = function() var eventTest = function () {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px"); workspace.setSize("150px", "150px");
workspace.setCoordSize(200, 200); workspace.setCoordSize(200, 200);
@ -175,11 +174,9 @@
eventTest(); eventTest();
var workspaceCoordSizeSample = function() var workspaceCoordSizeSample = function () {
{
function groupSampleBuilder(width, height) function groupSampleBuilder(width, height) {
{
// Group with CoordSize(50,50); // Group with CoordSize(50,50);
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px"); workspace.setSize("100px", "100px");
@ -217,11 +214,9 @@
workspaceCoordSizeSample(); workspaceCoordSizeSample();
var workspaceCoordOriginSample = function() var workspaceCoordOriginSample = function () {
{
function groupSampleBuilder(x, y) function groupSampleBuilder(x, y) {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px"); workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100); workspace.setCoordSize(100, 100);
@ -261,8 +256,7 @@
var groupVisibilitySample = function() var groupVisibilitySample = function () {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px"); workspace.setSize("100px", "100px");
@ -272,7 +266,7 @@
group.setSize(100, 100); group.setSize(100, 100);
group.setPosition(0, 0); group.setPosition(0, 0);
group.setCoordSize(100, 100); group.setCoordSize(100, 100);
group.addEvent("mouseover", function() { group.addEvent("mouseover", function () {
alert("Mouse Over Group"); alert("Mouse Over Group");
}); });
workspace.append(group); workspace.append(group);
@ -280,7 +274,7 @@
elipseOuter = new web2d.Elipse(); elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50); elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50); elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function() { group.addEvent("mouseover", function () {
alert("Mouse Over elipseOuter"); alert("Mouse Over elipseOuter");
}); });
group.append(elipseOuter); group.append(elipseOuter);
@ -292,8 +286,7 @@
group.append(elipseInner); group.append(elipseInner);
var isVisible = true; var isVisible = true;
var executer = function() var executer = function () {
{
isVisible = !isVisible; isVisible = !isVisible;
group.setVisibility(isVisible); group.setVisibility(isVisible);
}; };
@ -304,8 +297,7 @@
} }
groupVisibilitySample(); groupVisibilitySample();
var groupVisibilitySample = function() var groupVisibilitySample = function () {
{
var workspace = new web2d.Workspace(); var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px"); workspace.setSize("100px", "100px");
@ -330,8 +322,7 @@
var width = 10; var width = 10;
var height = 10; var height = 10;
var executer = function() var executer = function () {
{
width = (width + 10) % 100; width = (width + 10) % 100;
height = (height + 10) % 100; height = (height + 10) % 100;
group.setCoordSize(width, height); group.setCoordSize(width, height);
@ -344,18 +335,18 @@
groupVisibilitySample(); groupVisibilitySample();
} }
</script> </script>
</head> </head>
<body onload="initialize();"> <body onload="initialize();">
<h1>Group Render Tests.</h1> <h1>Group Render Tests.</h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:50%"/> <col style="width:50%" />
<col style="width:50%"/> <col style="width:50%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
A group object can be used to collect shapes. In this example, A group object can be used to collect shapes. In this example,
There is a group that contains an elipse and two lines as children. There is a group that contains an elipse and two lines as children.
@ -363,63 +354,64 @@
elements. elements.
</td> </td>
<td> <td>
<div id="groupBasicContainer"/> <div id="groupBasicContainer" />
</td> </td>
</tr> </tr>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Following the bubbling event pattern, all the events over a shape are propageted to its Following the bubbling event pattern, all the events over a shape are propageted to its
parent. In this example, both elipse objects are child of a group element and click event listeners parent. In this example, both elipse objects are child of a group element and click event listeners
have been added to the elipse and the group. have been added to the elipse and the group.
</td> </td>
<td> <td>
<div id="groupEventsContainer"/> <div id="groupEventsContainer" />
</td> </td>
</tr> </tr>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Groups can be nested as a regular shape. An important property of the groups is the ability Groups can be nested as a regular shape. An important property of the groups is the ability
to define their own coordSize, coorOrigin and size. In this example, both shapes have been to define their own coordSize, coorOrigin and size. In this example, both shapes have been
created with the same properties. The red one has been added as a child element of a group with the created with the same properties. The red one has been added as a child element of a group with the
following properties:<br/> following properties:<br />
<br/> <br />
Size(50,50);<br/> Size(50,50);<br />
Position(25,25);<br/> Position(25,25);<br />
CoordSize(100,100);<br/> CoordSize(100,100);<br />
CoordOrigin(0,0)<br/> CoordOrigin(0,0)<br />
The blue one has been added as a child of another group with the following properties::<br/> The blue one has been added as a child of another group with the following properties::<br />
<br/> <br />
Size(50,50);<br/> Size(50,50);<br />
Position(25,25);<br/> Position(25,25);<br />
CoordSize(100,100);<br/> CoordSize(100,100);<br />
CoordOrigin(0,0);<br/> CoordOrigin(0,0);<br />
<br/> <br />
Finally, the second group has been added as a child of the first declared group. Finally, the second group has been added as a child of the first declared group.
</td> </td>
<td> <td>
<div id="groupNestedContainer"/> <div id="groupNestedContainer" />
</td> </td>
</tr> </tr>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Group coordsize defines how many units there are along the width of the containing block. Group coordsize defines how many units there are along the width of the containing block.
In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have
been
positioned positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/> at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
<br/> <br />
1) Group with CoordSize(100,100)<br/> 1) Group with CoordSize(100,100)<br />
2) Group with CoordSize(100,200)<br/> 2) Group with CoordSize(100,200)<br />
3) Group with CoordSize(200,100)<br/> 3) Group with CoordSize(200,100)<br />
</td> </td>
<td> <td>
<div style="position:relative;width:100%;"> <div style="position:relative;width:100%;">
@ -436,18 +428,19 @@
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Group coordorigin defines the coordinate at the top left corner of the containing block. Group coordorigin defines the coordinate at the top left corner of the containing block.
In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/> positioned
<br/> at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
1) Group with CoordOrigin(0,0)<br/> <br />
2) Group with CoordOrigin(0,50)<br/> 1) Group with CoordOrigin(0,0)<br />
3) Group with CoordOrigin(50,0)<br/> 2) Group with CoordOrigin(0,50)<br />
3) Group with CoordOrigin(50,0)<br />
</td> </td>
<td> <td>
<div style="position:relative;width:100%;"> <div style="position:relative;width:100%;">
@ -464,14 +457,14 @@
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
<script type="text/javascript"> <script type="text/javascript">
</script> </script>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Visibility can be used to hide an element and disable all the element events. Visibility can be used to hide an element and disable all the element events.
In the case of a group, this property is applied to all the children elements. In the case of a group, this property is applied to all the children elements.
@ -479,18 +472,19 @@
<td> <td>
<div id="visibilityExample" style="float:left;margin:20px;"></div> <div id="visibilityExample" style="float:left;margin:20px;"></div>
</td> </td>
</tr> </tr>
<!-- ************************************************************************** --> <!-- ************************************************************************** -->
<tr> <tr>
<td> <td>
Scale. Scale.
</td> </td>
<td> <td>
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div> <div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

11
packages/web2d/test/javascript/render/index.html
View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title> <title>Testing</title>
</head> </head>
<body>
<body>
<div> <div>
<h1>Testing</h1> <h1>Testing</h1>
<ul> <ul>
@ -23,5 +25,6 @@
<li><a href="/workspace">Workspace</a></li> <li><a href="/workspace">Workspace</a></li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

32
packages/web2d/test/javascript/render/line.html
View File

@ -1,7 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -18,7 +25,7 @@
<script type="text/javascript"> <script type="text/javascript">
function initialize() { function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'}; var workspaceAttributes = { width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc' };
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes); var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
var rect = new web2d.Rect(); var rect = new web2d.Rect();
@ -51,7 +58,7 @@
strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample')); strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes); var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['solid','dot','dash','dashdot','longdash']; var styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
for (var i = 0; i < styles.length; i++) { for (var i = 0; i < styles.length; i++) {
var line = new web2d.Line(); var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5); line.setFrom(25 + (i * 30), 5);
@ -64,7 +71,7 @@
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample')); strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes); var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['none ','block ','classic','diamond ','oval','open','chevron','doublechevron']; var styles = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
for (var i = 0; i < styles.length; i++) { for (var i = 0; i < styles.length; i++) {
var line = new web2d.Line(); var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5); line.setFrom(25 + (i * 30), 5);
@ -81,19 +88,19 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>Lines Render Tests </h1> <h1>Lines Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
Lines. Lines.
</td> </td>
<td> <td>
<div id="strokeWidthSample"/> <div id="strokeWidthSample" />
</td> </td>
</tr> </tr>
@ -103,7 +110,7 @@
Lines Opacity. Lines Opacity.
</td> </td>
<td> <td>
<div id="strokeOpacitySample"/> <div id="strokeOpacitySample" />
</td> </td>
</tr> </tr>
@ -113,7 +120,7 @@
Line Styles. Line Styles.
</td> </td>
<td> <td>
<div id="strokeStyleSample"/> <div id="strokeStyleSample" />
</td> </td>
</tr> </tr>
@ -123,11 +130,12 @@
Line Arrows. Line Arrows.
</td> </td>
<td> <td>
<div id="strokeArrowSample"/> <div id="strokeArrowSample" />
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

39
packages/web2d/test/javascript/render/polyLine.html
View File

@ -1,7 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -16,10 +24,10 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
function initialize(){ function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({fillColor:'green'}); var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("100px", "100px"); overflowWorkspace.setSize("100px", "100px");
var line = new web2d.PolyLine(); var line = new web2d.PolyLine();
@ -154,31 +162,32 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Different types of PolyLines that can be used.
</td> </td>
<td> <td>
<div id="overflowExample"/> <div id="overflowExample" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
This is how multiple childs will look in each style line This is how multiple childs will look in each style line
</td> </td>
<td> <td>
<div id="multipleLineExample"/> <div id="multipleLineExample" />
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

37
packages/web2d/test/javascript/render/prototype.html
View File

@ -2,6 +2,12 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -78,16 +84,16 @@
workspace.append(nodeGroup); workspace.append(nodeGroup);
// Add behaviour ... // Add behaviour ...
inerRect.addEvent("mouseover", function() { inerRect.addEvent("mouseover", function () {
outerRect.setVisibility(true); outerRect.setVisibility(true);
}); });
inerRect.addEvent("mouseout", function() { inerRect.addEvent("mouseout", function () {
if (!nodeGroup._drag) { if (!nodeGroup._drag) {
outerRect.setVisibility(false); outerRect.setVisibility(false);
} }
}); });
nodeGroup.addEvent("mousedown", function(e) { nodeGroup.addEvent("mousedown", function (e) {
var shadowGroup = new web2d.Group(); var shadowGroup = new web2d.Group();
shadowGroup.setSize(200, 60); shadowGroup.setSize(200, 60);
shadowGroup.setCoordSize(200, 60); shadowGroup.setCoordSize(200, 60);
@ -107,7 +113,7 @@
this._shadowGroup = shadowGroup; this._shadowGroup = shadowGroup;
if (!this._moveFunction) { if (!this._moveFunction) {
nodeGroup._drag = true; nodeGroup._drag = true;
workspace._moveFunction = function(event) { workspace._moveFunction = function (event) {
// Esto mas o menos funciona por que el size del workspace es 1 a uno con // Esto mas o menos funciona por que el size del workspace es 1 a uno con
// el del la pantalla. // el del la pantalla.
var posx = 0; var posx = 0;
@ -127,7 +133,7 @@
}; };
} }
workspace.addEvent("mousemove", workspace._moveFunction); workspace.addEvent("mousemove", workspace._moveFunction);
var mouseUp = function(e) { var mouseUp = function (e) {
workspace.removeChild(shadowGroup); workspace.removeChild(shadowGroup);
@ -149,20 +155,21 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>Chart prototype Tests </h1> <h1>Chart prototype Tests </h1>
<input type="button" value="Create Shape" name="Create Shape" onclick="createShape();"/> <input type="button" value="Create Shape" name="Create Shape" onclick="createShape();" />
<input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();"/> <input type="button" value="Zoom In" name="Create Shape" onclick="zoomIn();" />
<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/> <input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();" />
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;"> <div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
</div> </div>
Notas: Notes:
<li>El evento de mousemove se debe agregar al workspace. <li>El evento de mousemove se debe agregar al workspace.
<li>Cuando se esta drageando un elemento se deberia deshabilitar los eventos del resto de los elementos. <li>Cuando se esta drageando un elemento se deberia deshabilitar los eventos del resto de los elementos.
<li>Definir comportamiento del area. <li>Definir comportamiento del area.
</body> </body>
</html> </html>

19
packages/web2d/test/javascript/render/rect.html
View File

@ -1,8 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -68,12 +74,12 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>Rect Render Tests </h1> <h1>Rect Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:10%"/> <col style="width:10%" />
<col style="width:90%"/> <col style="width:90%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
@ -97,6 +103,7 @@
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

59
packages/web2d/test/javascript/render/shapes.html
View File

@ -1,8 +1,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script type="text/javascript"> <style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
}; };
@ -13,10 +21,10 @@
}; };
web2d.peer.utils = {}; web2d.peer.utils = {};
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
function initialize() { function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
var strokeStyleTest = function () { var strokeStyleTest = function () {
@ -99,11 +107,13 @@ function initialize() {
workspace.setCoordSize(500, 100); workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0); workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green', var rect = new web2d.Rect(0, {
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1}); x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1
});
workspace.append(rect); workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10}; var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes); rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
rect.setAttribute("strokeOpacity", 1); rect.setAttribute("strokeOpacity", 1);
@ -135,11 +145,13 @@ function initialize() {
workspace.setCoordSize(500, 100); workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0); workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green', var rect = new web2d.Rect(0, {
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4}); x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect); workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10}; var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes); rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
rect.setAttribute("fillOpacity", 1); rect.setAttribute("fillOpacity", 1);
@ -171,11 +183,13 @@ function initialize() {
workspace.setCoordSize(500, 100); workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0); workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green', var rect = new web2d.Rect(0, {
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4}); x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect); workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10}; var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes); rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
rect.setOpacity(0.8); rect.setOpacity(0.8);
@ -202,12 +216,12 @@ function initialize() {
var visibilityTest = function () { var visibilityTest = function () {
var workspace = new web2d.Workspace({fillColor: 'yellow', strokeWidth: '2px'}); var workspace = new web2d.Workspace({ fillColor: 'yellow', strokeWidth: '2px' });
workspace.setSize("500px", "100px"); workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100); workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0); workspace.setCoordOrigin(0, 0);
var rectAttributes = {width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10}; var rectAttributes = { width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
var rect = new web2d.Rect(0, rectAttributes); var rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20); rect.setPosition(120, 20);
workspace.append(rect); workspace.append(rect);
@ -225,18 +239,18 @@ function initialize() {
workspace.addItAsChildTo($('#visibility')); workspace.addItAsChildTo($('#visibility'));
}; };
visibilityTest(); visibilityTest();
} }
</script> </script>
</head> </head>
<body onload="initialize();"> <body onload="initialize();">
<h1>Element properties Tests </h1> <h1>Element properties Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:10%"/> <col style="width:10%" />
<col style="width:90%"/> <col style="width:90%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
@ -300,6 +314,7 @@ function initialize() {
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

25
packages/web2d/test/javascript/render/text.html
View File

@ -1,7 +1,15 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
@ -72,12 +80,12 @@
<body onload="initialize();"> <body onload="initialize();">
<h1>Text Render Tests </h1> <h1>Text Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"/> <col style="width:30%" />
<col style="width:60%"/> <col style="width:60%" />
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
@ -96,10 +104,11 @@
</tr> </tr>
<!--**************************************************************************--> <!--**************************************************************************-->
</table> </table>
<span>Text to Inspect: </span><input type="text" id="iesimo"> <span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" <input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);"> onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()"> <input type="button" value="Zoom In" onclick="zoomIn()">
</body> </body>
</html> </html>

58
packages/web2d/test/javascript/render/workspace.html
View File

@ -1,9 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <html>
<head>
<script type="text/javascript"> <head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = { web2d = {
peer: {} peer: {}
}; };
@ -14,10 +21,10 @@
}; };
web2d.peer.utils = {}; web2d.peer.utils = {};
</script> </script>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function initialize() { function initialize() {
web2d.Toolkit.init(); web2d.Toolkit.init();
@ -32,7 +39,7 @@
var workspacePosition = function () { var workspacePosition = function () {
var elipseAttr = {width: 100, height: 100, x: 100, y: 100}; var elipseAttr = { width: 100, height: 100, x: 100, y: 100 };
var divElem = $('#positionExample'); var divElem = $('#positionExample');
var workPosition = new web2d.Workspace(); var workPosition = new web2d.Workspace();
@ -196,23 +203,25 @@
workspaceCoordOriginSample(); workspaceCoordOriginSample();
} }
</script> </script>
</head> </head>
<body onload="initialize();"> <body onload="initialize();">
<h1>Workspace Render Tests </h1> <h1>Workspace Render Tests </h1>
<table border="1"> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%"> <col style="width:30%">
<col style="width:60%"> <col style="width:60%">
</colgroup> </colgroup>
<tr> <tr>
<td> <td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
be
visible. visible.
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be In this example, The back circle is bigger than the workspace area. A big portion of the circle will not
be
displayed. displayed.
</td> </td>
<td> <td>
@ -251,12 +260,12 @@
Workspace coordsize defines how many units there are along the width of the containing block. Workspace coordsize defines how many units there are along the width of the containing block.
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/> at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
<br/> <br />
1) Workspace with CoordSize(100,100)<br/> 1) Workspace with CoordSize(100,100)<br />
2) Workspace with CoordSize(100,200)<br/> 2) Workspace with CoordSize(100,200)<br />
3) Workspace with CoordSize(200,100)<br/> 3) Workspace with CoordSize(200,100)<br />
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/> 4) Workspace animation changing the coordsize from (30,30) to (100,100)<br />
</td> </td>
<td> <td>
<div style="position:relative;width:100%;"> <div style="position:relative;width:100%;">
@ -285,12 +294,12 @@
Workspace coordorigin defines the coordinate at the top left corner of the containing block. Workspace coordorigin defines the coordinate at the top left corner of the containing block.
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/> at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
<br/> <br />
1) Workspace with CoordOrigin(0,0)<br/> 1) Workspace with CoordOrigin(0,0)<br />
2) Workspace with CoordOrigin(0,50)<br/> 2) Workspace with CoordOrigin(0,50)<br />
3) Workspace with CoordOrigin(50,0)<br/> 3) Workspace with CoordOrigin(50,0)<br />
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/> 4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />
</td> </td>
<td> <td>
<div style="position:relative;width:100%;"> <div style="position:relative;width:100%;">
@ -313,6 +322,7 @@
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>