vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +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

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

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

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

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

124
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -22,7 +29,7 @@
overflowWorkspace.setCoordSize('200', '240');
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();
overflowWorkspace.append(wText);
@ -32,7 +39,7 @@
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($("#"+elemId));
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function alignments(text, family, elemId) {
@ -41,7 +48,7 @@
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center','left','right'].forEach(function(align, i) {
['center', 'left', 'right'].forEach(function (align, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
@ -52,18 +59,18 @@
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($("#"+elemId));
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function initialize() {
web2d.Toolkit.init();
// 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);
});
// 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);
})
}
@ -72,59 +79,60 @@
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1>
<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>
<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()">
</table>
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

830
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -16,481 +23,468 @@
</script>
<script type="text/javascript">
function initialize(){
web2d.Toolkit.init();
function initialize() {
web2d.Toolkit.init();
var basicTest = function()
{
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(50, 50);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.append(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
var xDir = 1;
var yDir = 1;
var executer = function()
{
var y = group.getPosition().y + yDir;
var x = group.getPosition().x + xDir;
if (x < 0)
{
xDir = 1;
} else if (x > 50)
{
xDir = -1;
}
if (y < 0)
{
yDir = 1;
} else if (y > 50)
{
yDir = -1;
}
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y);
};
//executer.periodical(100);
};
basicTest();
var eventTest = function()
{
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
var group = new web2d.Group(groupAttributes);
workspace.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.append(elipseRight);
var listener = function(e) {
alert("Click event on:" + this.getType())
};
group.addEvent("click", listener);
elipseLeft.addEvent("click", listener);
elipseRight.addEvent("click", listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
}
eventTest();
var eventTest = function()
{
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(200, 200);
var groupOuter = new web2d.Group();
groupOuter.setSize(50, 50)
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0)
workspace.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.append(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest();
var workspaceCoordSizeSample = function()
{
function groupSampleBuilder(width, height)
{
// Group with CoordSize(50,50);
var basicTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
return workspace;
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
var xDir = 1;
var yDir = 1;
var executer = function () {
var y = group.getPosition().y + yDir;
var x = group.getPosition().x + xDir;
if (x < 0) {
xDir = 1;
} else if (x > 50) {
xDir = -1;
}
if (y < 0) {
yDir = 1;
} else if (y > 50) {
yDir = -1;
}
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y);
};
//executer.periodical(100);
};
basicTest();
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var groupAttributes = { width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0' };
var group = new web2d.Group(groupAttributes);
workspace.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.append(elipseRight);
var listener = function (e) {
alert("Click event on:" + this.getType())
};
group.addEvent("click", listener);
elipseLeft.addEvent("click", listener);
elipseRight.addEvent("click", listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
}
var sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($("#coordsizeExample100x100"));
var sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($("#coordsizeExample100x200"));
var sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($("#coordsizeExample200x100"));
};
workspaceCoordSizeSample();
eventTest();
var workspaceCoordOriginSample = function()
{
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(200, 200);
var groupOuter = new web2d.Group();
groupOuter.setSize(50, 50)
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0)
workspace.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.append(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest();
var workspaceCoordSizeSample = function () {
function groupSampleBuilder(width, height) {
// Group with CoordSize(50,50);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
var sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($("#coordsizeExample100x100"));
var sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($("#coordsizeExample100x200"));
var sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($("#coordsizeExample200x100"));
};
workspaceCoordSizeSample();
var workspaceCoordOriginSample = function () {
function groupSampleBuilder(x, y) {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
;
var sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
var sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
var sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
}
workspaceCoordOriginSample();
var groupVisibilitySample = function () {
function groupSampleBuilder(x, y)
{
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
group.addEvent("mouseover", function () {
alert("Mouse Over Group");
});
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function () {
alert("Mouse Over elipseOuter");
});
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
group.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
}
;
groupVisibilitySample();
var sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
var groupVisibilitySample = function () {
var sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
var sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
}
workspaceCoordOriginSample();
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var groupVisibilitySample = function()
{
var width = 10;
var height = 10;
var executer = function () {
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
//executer.periodical(100);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
group.addEvent("mouseover", function() {
alert("Mouse Over Group");
});
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function() {
alert("Mouse Over elipseOuter");
});
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var isVisible = true;
var executer = function()
{
isVisible = !isVisible;
group.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
}
groupVisibilitySample();
}
groupVisibilitySample();
var groupVisibilitySample = function()
{
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var width = 10;
var height = 10;
var executer = function()
{
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
}
groupVisibilitySample();
}
</script>
</script>
</head>
<body onload="initialize();">
<h1>Group Render Tests.</h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:50%"/>
<col style="width:50%"/>
</colgroup>
<tr>
<td>
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.
Changing the group position also change the position of all contained
elements.
</td>
<td>
<div id="groupBasicContainer"/>
</td>
<h1>Group Render Tests.</h1>
<table>
<colgroup style="width:80%;">
<col style="width:50%" />
<col style="width:50%" />
</colgroup>
<tr>
<td>
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.
Changing the group position also change the position of all contained
elements.
</td>
<td>
<div id="groupBasicContainer" />
</td>
</tr>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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
have been added to the elipse and the group.
</td>
<td>
<div id="groupEventsContainer"/>
</td>
<!-- ************************************************************************** -->
<tr>
<td>
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
have been added to the elipse and the group.
</td>
<td>
<div id="groupEventsContainer" />
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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
created with the same properties. The red one has been added as a child element of a group with the
following properties:<br/>
<br/>
Size(50,50);<br/>
Position(25,25);<br/>
CoordSize(100,100);<br/>
CoordOrigin(0,0)<br/>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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
created with the same properties. The red one has been added as a child element of a group with the
following properties:<br />
<br />
Size(50,50);<br />
Position(25,25);<br />
CoordSize(100,100);<br />
CoordOrigin(0,0)<br />
The blue one has been added as a child of another group with the following properties::<br/>
<br/>
Size(50,50);<br/>
Position(25,25);<br/>
CoordSize(100,100);<br/>
CoordOrigin(0,0);<br/>
<br/>
Finally, the second group has been added as a child of the first declared group.
</td>
<td>
<div id="groupNestedContainer"/>
</td>
The blue one has been added as a child of another group with the following properties::<br />
<br />
Size(50,50);<br />
Position(25,25);<br />
CoordSize(100,100);<br />
CoordOrigin(0,0);<br />
<br />
Finally, the second group has been added as a child of the first declared group.
</td>
<td>
<div id="groupNestedContainer" />
</td>
</tr>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
<br/>
1) Group with CoordSize(100,100)<br/>
2) Group with CoordSize(100,200)<br/>
3) Group with CoordSize(200,100)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
</div>
<!-- ************************************************************************** -->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
<br />
1) Group with CoordSize(100,100)<br />
2) Group with CoordSize(100,200)<br />
3) Group with CoordSize(200,100)<br />
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
</div>
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
</div>
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
</div>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
<br/>
1) Group with CoordOrigin(0,0)<br/>
2) Group with CoordOrigin(0,50)<br/>
3) Group with CoordOrigin(50,0)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
(1)
</div>
<!-- ************************************************************************** -->
<tr>
<td>
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
at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
<br />
1) Group with CoordOrigin(0,0)<br />
2) Group with CoordOrigin(0,50)<br />
3) Group with CoordOrigin(50,0)<br />
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
(1)
</div>
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
(2)
</div>
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
(2)
</div>
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<script type="text/javascript">
<script type="text/javascript">
</script>
</script>
<!-- ************************************************************************** -->
<tr>
<td>
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.
</td>
<td>
<div id="visibilityExample" style="float:left;margin:20px;"></div>
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
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.
</td>
<td>
<div id="visibilityExample" style="float:left;margin:20px;"></div>
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
Scale.
</td>
<td>
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
Scale.
</td>
<td>
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td>
</tr>
</table>
</table>
</body>
</html>

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

@ -1,27 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title>
</head>
<body>
<div>
<h1>Testing</h1>
<ul>
<li><a href="/arrow">Arrow</a></li>
<li><a href="/curvedLine">Curved Line</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/font">Font</a></li>
<li><a href="/group">Group</a></li>
<li><a href="line">Line</a></li>
<li><a href="/polyLine">Poly Line</a></li>
<li><a href="/prototype">Prototype</a></li>
<li><a href="/rect">Rect</a></li>
<li><a href="/shapes">Shapes</a></li>
<li><a href="/text">Text</a></li>
<li><a href="/workspace">Workspace</a></li>
</ul>
</div>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title>
</head>
<body>
<div>
<h1>Testing</h1>
<ul>
<li><a href="/arrow">Arrow</a></li>
<li><a href="/curvedLine">Curved Line</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/font">Font</a></li>
<li><a href="/group">Group</a></li>
<li><a href="line">Line</a></li>
<li><a href="/polyLine">Poly Line</a></li>
<li><a href="/prototype">Prototype</a></li>
<li><a href="/rect">Rect</a></li>
<li><a href="/shapes">Shapes</a></li>
<li><a href="/text">Text</a></li>
<li><a href="/workspace">Workspace</a></li>
</ul>
</div>
</body>
</html>

92
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -18,7 +25,7 @@
<script type="text/javascript">
function initialize() {
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 rect = new web2d.Rect();
@ -51,7 +58,7 @@
strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
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++) {
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
@ -64,7 +71,7 @@
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
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++) {
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
@ -81,53 +88,54 @@
<body onload="initialize();">
<h1>Lines Render Tests </h1>
<h1>Lines Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Lines.
</td>
<td>
<div id="strokeWidthSample"/>
</td>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Lines.
</td>
<td>
<div id="strokeWidthSample" />
</td>
</tr>
</tr>
<tr>
<td>
Lines Opacity.
</td>
<td>
<div id="strokeOpacitySample"/>
</td>
<tr>
<td>
Lines Opacity.
</td>
<td>
<div id="strokeOpacitySample" />
</td>
</tr>
</tr>
<tr>
<td>
Line Styles.
</td>
<td>
<div id="strokeStyleSample"/>
</td>
<tr>
<td>
Line Styles.
</td>
<td>
<div id="strokeStyleSample" />
</td>
</tr>
</tr>
<tr>
<td>
Line Arrows.
</td>
<td>
<div id="strokeArrowSample"/>
</td>
<tr>
<td>
Line Arrows.
</td>
<td>
<div id="strokeArrowSample" />
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>

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

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

@ -2,6 +2,12 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -78,16 +84,16 @@
workspace.append(nodeGroup);
// Add behaviour ...
inerRect.addEvent("mouseover", function() {
inerRect.addEvent("mouseover", function () {
outerRect.setVisibility(true);
});
inerRect.addEvent("mouseout", function() {
inerRect.addEvent("mouseout", function () {
if (!nodeGroup._drag) {
outerRect.setVisibility(false);
}
});
nodeGroup.addEvent("mousedown", function(e) {
nodeGroup.addEvent("mousedown", function (e) {
var shadowGroup = new web2d.Group();
shadowGroup.setSize(200, 60);
shadowGroup.setCoordSize(200, 60);
@ -107,7 +113,7 @@
this._shadowGroup = shadowGroup;
if (!this._moveFunction) {
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
// el del la pantalla.
var posx = 0;
@ -118,16 +124,16 @@
}
else if (event.clientX || event.clientY) {
posx = event.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
+ document.documentElement.scrollLeft;
posy = event.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
+ document.documentElement.scrollTop;
}
shadowGroup.setPosition(posx - 50, posy - 150);
};
}
workspace.addEvent("mousemove", workspace._moveFunction);
var mouseUp = function(e) {
var mouseUp = function (e) {
workspace.removeChild(shadowGroup);
@ -149,20 +155,21 @@
<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="Zoom In" name="Create Shape" onclick="zoomIn();"/>
<input type="button" value="Zoom Out" name="Create Shape" onclick="zoomOut();"/>
<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 Out" name="Create Shape" onclick="zoomOut();" />
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
</div>
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
</div>
Notas:
<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>Definir comportamiento del area.
Notes:
<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>Definir comportamiento del area.
</body>
</html>

57
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -68,35 +74,36 @@
<body onload="initialize();">
<h1>Rect Render Tests </h1>
<h1>Rect Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:10%"/>
<col style="width:90%"/>
</colgroup>
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="rectExample"></div>
</td>
<table>
<colgroup style="width:80%;">
<col style="width:10%" />
<col style="width:90%" />
</colgroup>
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="rectExample"></div>
</td>
</tr>
</tr>
<!-- ********************************************************** -->
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="roundRect" style="float:left;margin:10px"></div>
</td>
<!-- ********************************************************** -->
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="roundRect" style="float:left;margin:10px"></div>
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>

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

@ -1,305 +1,320 @@
<!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">
function initialize() {
web2d.Toolkit.init();
var strokeStyleTest = function () {
function builder(parent, scale, strokeWidth) {
var rectSize = scale * 80;
var yPosition = 10 * scale;
var xPosition = 10 * scale;
var rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(1, 'solid', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.append(rect);
<style>
th,
td {
border: 1px solid black;
}
</style>
// Workspace with default scale ...
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 1);
workspace.addItAsChildTo($('#strokeStyle'));
// Workspace with modified scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(5000, 1000);
workspace.setCoordOrigin(0, 0);
builder(workspace, 10, 1);
workspace.addItAsChildTo($('#strokeStyleGroup'));
// Workspace with default scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo($('#strokeStyleWidth'));
};
strokeStyleTest();
var strokeOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1});
workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("strokeOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#strokeOpacity'));
};
strokeOpacityTest();
var fillOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4});
workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("fillOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#fillOpacity'));
};
fillOpacityTest();
var opacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4});
workspace.append(rect);
var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setOpacity(0.8);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.append(rect);
workspace.addItAsChildTo($('#opacity'));
};
opacityTest();
var visibilityTest = function () {
var workspace = new web2d.Workspace({fillColor: 'yellow', strokeWidth: '2px'});
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rectAttributes = {width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
var rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
workspace.append(rect);
rect.addEvent("mouseover", function () {
alert("Mouse Over");
});
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
rect.setVisibility(isVisible);
<script type="text/javascript">
web2d = {
peer: {}
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();
}
</script>
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var strokeStyleTest = function () {
function builder(parent, scale, strokeWidth) {
var rectSize = scale * 80;
var yPosition = 10 * scale;
var xPosition = 10 * scale;
var rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(1, 'solid', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.append(rect);
}
// Workspace with default scale ...
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 1);
workspace.addItAsChildTo($('#strokeStyle'));
// Workspace with modified scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(5000, 1000);
workspace.setCoordOrigin(0, 0);
builder(workspace, 10, 1);
workspace.addItAsChildTo($('#strokeStyleGroup'));
// Workspace with default scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo($('#strokeStyleWidth'));
};
strokeStyleTest();
var strokeOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("strokeOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#strokeOpacity'));
};
strokeOpacityTest();
var fillOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("fillOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#fillOpacity'));
};
fillOpacityTest();
var opacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setOpacity(0.8);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.append(rect);
workspace.addItAsChildTo($('#opacity'));
};
opacityTest();
var visibilityTest = function () {
var workspace = new web2d.Workspace({ fillColor: 'yellow', strokeWidth: '2px' });
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rectAttributes = { width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
var rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
workspace.append(rect);
rect.addEvent("mouseover", function () {
alert("Mouse Over");
});
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();
}
</script>
</head>
<body onload="initialize();">
<h1>Element properties Tests </h1>
<h1>Element properties Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:10%"/>
<col style="width:90%"/>
</colgroup>
<tr>
<td>
Stroke Styles.
</td>
<td>
<div>
<div id="strokeStyle"></div>
<div id="strokeStyleGroup"></div>
<div id="strokeStyleWidth"></div>
</div>
</td>
</tr>
<table>
<colgroup style="width:80%;">
<col style="width:10%" />
<col style="width:90%" />
</colgroup>
<tr>
<td>
Stroke Styles.
</td>
<td>
<div>
<div id="strokeStyle"></div>
<div id="strokeStyleGroup"></div>
<div id="strokeStyleWidth"></div>
</div>
</td>
</tr>
<tr>
<td>
Stroke Width.
</td>
<td>
<div id="strokeWidth"></div>
</td>
<tr>
<td>
Stroke Width.
</td>
<td>
<div id="strokeWidth"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Stroke Opacity.
</td>
<td>
<div id="strokeOpacity"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Stroke Opacity.
</td>
<td>
<div id="strokeOpacity"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Fill Opacity.
</td>
<td>
<div id="fillOpacity"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Fill Opacity.
</td>
<td>
<div id="fillOpacity"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Opacity.
</td>
<td>
<div id="opacity"></div>
</td>
</tr>
<!-- ************************************************** -->
<tr>
<td>
Opacity.
</td>
<td>
<div id="opacity"></div>
</td>
</tr>
<tr>
<td>
Visibility.
</td>
<td>
<div id="visibility"></div>
</td>
</tr>
<tr>
<td>
Visibility.
</td>
<td>
<div id="visibility"></div>
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>

59
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
@ -72,34 +80,35 @@
<body onload="initialize();">
<h1>Text Render Tests </h1>
<h1>Text Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Simple text
</td>
<td>
<div id="text0"></div>
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
<div id="text5"></div>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Simple text
</td>
<td>
<div id="text0"></div>
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
<div id="text5"></div>
</td>
</td>
</tr>
<!--**************************************************************************-->
</tr>
<!--**************************************************************************-->
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

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

@ -1,318 +1,328 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px");
var elipse1 = new web2d.Elipse();
elipse1.setSize(200, 200);
elipse1.setPosition(0, 0);
overflowWorkspace.append(elipse1);
overflowWorkspace.addItAsChildTo($('#overflowExample'));
var workspacePosition = function () {
var elipseAttr = {width: 100, height: 100, x: 100, y: 100};
var divElem = $('#positionExample');
var workPosition = new web2d.Workspace();
workPosition.setSize("100px", "100px");
elipse = new web2d.Elipse(elipseAttr);
workPosition.append(elipse);
workPosition.addItAsChildTo(divElem);
var x = 100;
var executer = function () {
x = (x + 10) % 100;
divElem.css('left', x + "px");
};
//executer.periodical(100);
<script type="text/javascript">
web2d = {
peer: {}
};
workspacePosition();
// Draw a reference grid.
var container = document.getElementById("sizeExampleContainer");
var grid = new Grid(container, 35, 12);
grid.setPosition("0px", "0px")
grid.render();
web2d.peer =
{
svg: {}
};
// Define a workspace using pixels and inchs.
var workspacePixel = new web2d.Workspace();
workspacePixel.setSize("100px", "100px");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
web2d.peer.utils = {};
</script>
workspacePixel.append(elipse);
workspacePixel.addItAsChildTo($('#sizeExamplePixels'));
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var workspaceInchs = new web2d.Workspace();
workspaceInchs.setSize("1in", "1in");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspaceInchs.append(elipse);
workspaceInchs.addItAsChildTo($('#sizeExampleInch'));
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px");
var elipse1 = new web2d.Elipse();
elipse1.setSize(200, 200);
elipse1.setPosition(0, 0);
overflowWorkspace.append(elipse1);
overflowWorkspace.addItAsChildTo($('#overflowExample'));
var workspaceCoordSizeSample = function () {
// Workspace with CoordSize(100,100);
var coordSizeSampleBuilder = function (width, height) {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(width, height);
var workspacePosition = function () {
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
var elipseAttr = { width: 100, height: 100, x: 100, y: 100 };
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
var divElem = $('#positionExample');
var workPosition = new web2d.Workspace();
workPosition.setSize("100px", "100px");
elipse = new web2d.Elipse(elipseAttr);
workPosition.append(elipse);
workPosition.addItAsChildTo(divElem);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
var x = 100;
var executer = function () {
x = (x + 10) % 100;
divElem.css('left', x + "px");
};
//executer.periodical(100);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
};
workspacePosition();
var workspace100x100 = coordSizeSampleBuilder(100, 100);
workspace100x100.addItAsChildTo($("#coordsizeExample100x100"));
// Draw a reference grid.
var container = document.getElementById("sizeExampleContainer");
var grid = new Grid(container, 35, 12);
grid.setPosition("0px", "0px")
grid.render();
var workspace100x200 = coordSizeSampleBuilder(100, 200);
workspace100x200.addItAsChildTo($("#coordsizeExample100x200"));
// Define a workspace using pixels and inchs.
var workspacePixel = new web2d.Workspace();
workspacePixel.setSize("100px", "100px");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
var workspace200x100 = coordSizeSampleBuilder(200, 100);
workspace200x100.addItAsChildTo($("#coordsizeExample200x100"));
workspacePixel.append(elipse);
workspacePixel.addItAsChildTo($('#sizeExamplePixels'));
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic'));
var workspaceInchs = new web2d.Workspace();
workspaceInchs.setSize("1in", "1in");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
var size = 100;
var executer = function () {
size = (size + 1) % 100;
if (size < 30) {
size = 30;
}
workspaceInchs.append(elipse);
workspaceInchs.addItAsChildTo($('#sizeExampleInch'));
var workspaceCoordSizeSample = function () {
// Workspace with CoordSize(100,100);
var coordSizeSampleBuilder = function (width, height) {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(width, height);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
};
var workspace100x100 = coordSizeSampleBuilder(100, 100);
workspace100x100.addItAsChildTo($("#coordsizeExample100x100"));
var workspace100x200 = coordSizeSampleBuilder(100, 200);
workspace100x200.addItAsChildTo($("#coordsizeExample100x200"));
var workspace200x100 = coordSizeSampleBuilder(200, 100);
workspace200x100.addItAsChildTo($("#coordsizeExample200x100"));
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic'));
var size = 100;
var executer = function () {
size = (size + 1) % 100;
if (size < 30) {
size = 30;
}
dynamicWorkspace.setCoordSize(size, size);
};
//executer.periodical(100);
dynamicWorkspace.setCoordSize(size, size);
};
//executer.periodical(100);
dynamicWorkspace.setCoordSize(size, size);
};
workspaceCoordSizeSample();
workspaceCoordSizeSample();
var workspaceCoordOriginSample = function () {
var workspaceCoordOriginSample = function () {
var coordOriginSampleBuilder = function (x, y) {
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(x, y);
var coordOriginSampleBuilder = function (x, y) {
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(x, y);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
return workspace;
};
var workspace0x0 = coordOriginSampleBuilder(0, 0);
workspace0x0.addItAsChildTo($("#coordorigin0x0"));
var workspace0x50 = coordOriginSampleBuilder(0, 50);
workspace0x50.addItAsChildTo($("#coordorigin0x50"));
var workspace50x0 = coordOriginSampleBuilder(50, 0);
workspace50x0.addItAsChildTo($("#coordorigin50x0"));
// Workspace animation changing the coordsize from (30,30) to (100,100)
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordoriginExampleDynamic'));
var x = 50;
var y = 50;
executer = function () {
x = (x + 1) % 50;
y = (y + 1) % 50;
dynamicWorkspace.setCoordOrigin(x, y);
};
//executer.periodical(100);
};
workspaceCoordOriginSample();
var workspace0x0 = coordOriginSampleBuilder(0, 0);
workspace0x0.addItAsChildTo($("#coordorigin0x0"));
var workspace0x50 = coordOriginSampleBuilder(0, 50);
workspace0x50.addItAsChildTo($("#coordorigin0x50"));
var workspace50x0 = coordOriginSampleBuilder(50, 0);
workspace50x0.addItAsChildTo($("#coordorigin50x0"));
// Workspace animation changing the coordsize from (30,30) to (100,100)
var dynamicWorkspace = coordOriginSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordoriginExampleDynamic'));
var x = 50;
var y = 50;
executer = function () {
x = (x + 1) % 50;
y = (y + 1) % 50;
dynamicWorkspace.setCoordOrigin(x, y);
};
//executer.periodical(100);
};
workspaceCoordOriginSample();
}
</script>
}
</script>
</head>
<body onload="initialize();">
<h1>Workspace Render Tests </h1>
<h1>Workspace Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr>
<td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
visible.
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
displayed.
</td>
<td>
<div id="overflowExample"></div>
</td>
<table>
<colgroup style="width:80%;">
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr>
<td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
be
visible.
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not
be
displayed.
</td>
<td>
<div id="overflowExample"></div>
</td>
</tr>
<!--**************************************************************************-->
<tr>
<td>
Workspace will be added as child of a div element. That's why, Its parent will define this position.
</td>
<td>
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
</td>
</tr>
</tr>
<!--**************************************************************************-->
<tr>
<td>
Workspace will be added as child of a div element. That's why, Its parent will define this position.
</td>
<td>
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
</td>
</tr>
<!--**************************************************************************-->
<tr>
<td>
Workspaces size can be defined using standard CSS measures.
In this example, the first workspace is defined using pixes and the second one
using inchs.
</td>
<td>
<div id="sizeExampleContainer" style="position:relative;width:400px;">
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
<!--**************************************************************************-->
<tr>
<td>
Workspaces size can be defined using standard CSS measures.
In this example, the first workspace is defined using pixes and the second one
using inchs.
</td>
<td>
<div id="sizeExampleContainer" style="position:relative;width:400px;">
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
</div>
</td>
</tr>
<!--**************************************************************************-->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
<br/>
1) Workspace with CoordSize(100,100)<br/>
2) Workspace with CoordSize(100,200)<br/>
3) Workspace with CoordSize(200,100)<br/>
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
</div>
</td>
</tr>
<!--**************************************************************************-->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
<br />
1) Workspace with CoordSize(100,100)<br />
2) Workspace with CoordSize(100,200)<br />
3) Workspace with CoordSize(200,100)<br />
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br />
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
</div>
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
</div>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
</div>
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
(4)
</div>
</div>
</td>
</tr>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
<!--**************************************************************************-->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
<br />
1) Workspace with CoordOrigin(0,0)<br />
2) Workspace with CoordOrigin(0,50)<br />
3) Workspace with CoordOrigin(50,0)<br />
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordorigin0x0" style="float:left;margin:20px">
(1)
</div>
<div id="coordorigin0x50" style="float:left;margin:20px">
(2)
</div>
<div id="coordorigin50x0" style="float:left;margin:20px">
(3)
</div>
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
(4)
</div>
</div>
</td>
</tr>
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
(4)
</div>
</div>
</td>
</tr>
<!--**************************************************************************-->
<tr>
<td>
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
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
<br/>
1) Workspace with CoordOrigin(0,0)<br/>
2) Workspace with CoordOrigin(0,50)<br/>
3) Workspace with CoordOrigin(50,0)<br/>
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordorigin0x0" style="float:left;margin:20px">
(1)
</div>
<div id="coordorigin0x50" style="float:left;margin:20px">
(2)
</div>
<div id="coordorigin50x0" style="float:left;margin:20px">
(3)
</div>
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
(4)
</div>
</div>
</td>
</tr>
</table>
</table>
</body>
</html>