mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Format test files.
This commit is contained in:
Paulo Gustavo Veiga
parent
38ec9931d7
commit
24b3f828e3
@ -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>
|
||||||
@ -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,31 +51,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>
|
||||||
@ -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%" />
|
||||||
|
|||||||
@ -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,59 +79,60 @@
|
|||||||
|
|
||||||
<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>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Arial</td>
|
<td>Arial</td>
|
||||||
<td>Tahoma</td>
|
<td>Tahoma</td>
|
||||||
<td>Verdana</td>
|
<td>Verdana</td>
|
||||||
<td>Times</td>
|
<td>Times</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Multiline Text
|
Multiline Text
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="multi0"></div>
|
<div id="multi0"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="multi1"></div>
|
<div id="multi1"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="multi2"></div>
|
<div id="multi2"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="multi3"></div>
|
<div id="multi3"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Multiline Aligment
|
Multiline Aligment
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="amulti0"></div>
|
<div id="amulti0"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="amulti1"></div>
|
<div id="amulti1"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="amulti2"></div>
|
<div id="amulti2"></div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="amulti3"></div>
|
<div id="amulti3"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
<input type="button" value="Zoom In" onclick="zoomIn()">
|
<input type="button" value="Zoom In" onclick="zoomIn()">
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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,481 +23,468 @@
|
|||||||
</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();
|
|
||||||
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 workspace = new web2d.Workspace();
|
var workspace = new web2d.Workspace();
|
||||||
workspace.setSize("100px", "100px");
|
workspace.setSize("150px", "150px");
|
||||||
workspace.setCoordSize(100, 100);
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
workspace.append(elipseOuter);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
var group = new web2d.Group();
|
||||||
group.setSize(50, 50);
|
group.setSize(50, 50);
|
||||||
group.setCoordSize(width, height);
|
group.setPosition(25, 50);
|
||||||
group.setPosition(25, 25);
|
group.setCoordSize(200, 200);
|
||||||
|
group.setCoordOrigin(0, 0);
|
||||||
workspace.append(group);
|
workspace.append(group);
|
||||||
|
|
||||||
elipseInner = new web2d.Elipse();
|
var elipse = new web2d.Elipse();
|
||||||
elipseInner.setPosition(50, 50);
|
elipse.setSize(200, 200);
|
||||||
elipseInner.setSize(50, 50);
|
elipse.setPosition(100, 100);
|
||||||
elipseInner.setFill("red");
|
group.append(elipse);
|
||||||
group.append(elipseInner);
|
|
||||||
|
|
||||||
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'));
|
||||||
}
|
}
|
||||||
|
eventTest();
|
||||||
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()
|
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();
|
var workspace = new web2d.Workspace();
|
||||||
workspace.setSize("100px", "100px");
|
workspace.setSize("100px", "100px");
|
||||||
workspace.setCoordSize(100, 100);
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
elipseOuter = new web2d.Elipse();
|
|
||||||
elipseOuter.setPosition(50, 50);
|
|
||||||
elipseOuter.setSize(50, 50);
|
|
||||||
workspace.append(elipseOuter);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
var group = new web2d.Group();
|
||||||
group.setSize(50, 50);
|
group.setSize(100, 100);
|
||||||
|
group.setPosition(0, 0);
|
||||||
group.setCoordSize(100, 100);
|
group.setCoordSize(100, 100);
|
||||||
group.setCoordOrigin(x, y);
|
group.addEvent("mouseover", function () {
|
||||||
group.setPosition(25, 25);
|
alert("Mouse Over Group");
|
||||||
|
});
|
||||||
workspace.append(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 = new web2d.Elipse();
|
||||||
elipseInner.setPosition(50, 50);
|
elipseInner.setPosition(50, 50);
|
||||||
elipseInner.setSize(50, 50);
|
elipseInner.setSize(25, 25);
|
||||||
elipseInner.setFill("red");
|
elipseInner.setFill("red");
|
||||||
group.append(elipseInner);
|
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);
|
var groupVisibilitySample = function () {
|
||||||
sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
|
|
||||||
|
|
||||||
var sample100x200 = groupSampleBuilder(0, 50);
|
var workspace = new web2d.Workspace();
|
||||||
sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
|
workspace.setSize("100px", "100px");
|
||||||
|
workspace.setCoordSize(100, 100);
|
||||||
|
|
||||||
var sample200x100 = groupSampleBuilder(50, 0);
|
var group = new web2d.Group();
|
||||||
sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
|
group.setSize(100, 100);
|
||||||
}
|
group.setPosition(0, 0);
|
||||||
workspaceCoordOriginSample();
|
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.addItAsChildTo($('#scaleStrokeExample'));
|
||||||
workspace.setSize("100px", "100px");
|
|
||||||
workspace.setCoordSize(100, 100);
|
|
||||||
|
|
||||||
var group = new web2d.Group();
|
}
|
||||||
group.setSize(100, 100);
|
groupVisibilitySample();
|
||||||
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();
|
</script>
|
||||||
|
|
||||||
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>
|
|
||||||
</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.
|
||||||
Changing the group position also change the position of all contained
|
Changing the group position also change the position of all contained
|
||||||
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
|
||||||
positioned
|
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 CoordSize(100,100)<br/>
|
<br />
|
||||||
2) Group with CoordSize(100,200)<br/>
|
1) Group with CoordSize(100,100)<br />
|
||||||
3) Group with CoordSize(200,100)<br/>
|
2) Group with CoordSize(100,200)<br />
|
||||||
</td>
|
3) Group with CoordSize(200,100)<br />
|
||||||
<td>
|
</td>
|
||||||
<div style="position:relative;width:100%;">
|
<td>
|
||||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
<div style="position:relative;width:100%;">
|
||||||
(1)
|
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||||
</div>
|
(1)
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||||
(2)
|
(2)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||||
(3)
|
(3)
|
||||||
</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 />
|
||||||
</td>
|
3) Group with CoordOrigin(50,0)<br />
|
||||||
<td>
|
</td>
|
||||||
<div style="position:relative;width:100%;">
|
<td>
|
||||||
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
|
<div style="position:relative;width:100%;">
|
||||||
(1)
|
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
|
||||||
</div>
|
(1)
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
|
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
|
||||||
(2)
|
(2)
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
|
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
|
||||||
(3)
|
(3)
|
||||||
</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.
|
||||||
</td>
|
</td>
|
||||||
<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>
|
||||||
@ -1,27 +1,30 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta charset="UTF-8" />
|
||||||
<title>Testing</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
</head>
|
<title>Testing</title>
|
||||||
<body>
|
</head>
|
||||||
<div>
|
|
||||||
<h1>Testing</h1>
|
<body>
|
||||||
<ul>
|
<div>
|
||||||
<li><a href="/arrow">Arrow</a></li>
|
<h1>Testing</h1>
|
||||||
<li><a href="/curvedLine">Curved Line</a></li>
|
<ul>
|
||||||
<li><a href="/events">Events</a></li>
|
<li><a href="/arrow">Arrow</a></li>
|
||||||
<li><a href="/font">Font</a></li>
|
<li><a href="/curvedLine">Curved Line</a></li>
|
||||||
<li><a href="/group">Group</a></li>
|
<li><a href="/events">Events</a></li>
|
||||||
<li><a href="line">Line</a></li>
|
<li><a href="/font">Font</a></li>
|
||||||
<li><a href="/polyLine">Poly Line</a></li>
|
<li><a href="/group">Group</a></li>
|
||||||
<li><a href="/prototype">Prototype</a></li>
|
<li><a href="line">Line</a></li>
|
||||||
<li><a href="/rect">Rect</a></li>
|
<li><a href="/polyLine">Poly Line</a></li>
|
||||||
<li><a href="/shapes">Shapes</a></li>
|
<li><a href="/prototype">Prototype</a></li>
|
||||||
<li><a href="/text">Text</a></li>
|
<li><a href="/rect">Rect</a></li>
|
||||||
<li><a href="/workspace">Workspace</a></li>
|
<li><a href="/shapes">Shapes</a></li>
|
||||||
</ul>
|
<li><a href="/text">Text</a></li>
|
||||||
</div>
|
<li><a href="/workspace">Workspace</a></li>
|
||||||
</body>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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,53 +88,54 @@
|
|||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Lines Opacity.
|
Lines Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeOpacitySample"/>
|
<div id="strokeOpacitySample" />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Line Styles.
|
Line Styles.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeStyleSample"/>
|
<div id="strokeStyleSample" />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Line Arrows.
|
Line Arrows.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeArrowSample"/>
|
<div id="strokeArrowSample" />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
@ -118,16 +124,16 @@
|
|||||||
}
|
}
|
||||||
else if (event.clientX || event.clientY) {
|
else if (event.clientX || event.clientY) {
|
||||||
posx = event.clientX + document.body.scrollLeft
|
posx = event.clientX + document.body.scrollLeft
|
||||||
+ document.documentElement.scrollLeft;
|
+ document.documentElement.scrollLeft;
|
||||||
posy = event.clientY + document.body.scrollTop
|
posy = event.clientY + document.body.scrollTop
|
||||||
+ document.documentElement.scrollTop;
|
+ document.documentElement.scrollTop;
|
||||||
}
|
}
|
||||||
|
|
||||||
shadowGroup.setPosition(posx - 50, posy - 150);
|
shadowGroup.setPosition(posx - 50, posy - 150);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
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>
|
||||||
@ -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,35 +74,36 @@
|
|||||||
<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>
|
||||||
Straight Lines.
|
Straight Lines.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="rectExample"></div>
|
<div id="rectExample"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<!-- ********************************************************** -->
|
<!-- ********************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Straight Lines.
|
Straight Lines.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="roundRect" style="float:left;margin:10px"></div>
|
<div id="roundRect" style="float:left;margin:10px"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,305 +1,320 @@
|
|||||||
<!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>
|
||||||
web2d = {
|
th,
|
||||||
peer: {}
|
td {
|
||||||
};
|
border: 1px solid black;
|
||||||
|
|
||||||
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>
|
||||||
|
|
||||||
// Workspace with default scale ...
|
<script type="text/javascript">
|
||||||
var workspace = new web2d.Workspace();
|
web2d = {
|
||||||
workspace.setSize("500px", "100px");
|
peer: {}
|
||||||
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'));
|
web2d.peer =
|
||||||
};
|
{
|
||||||
visibilityTest();
|
svg: {}
|
||||||
}
|
};
|
||||||
</script>
|
|
||||||
|
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>
|
</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>
|
||||||
Stroke Styles.
|
Stroke Styles.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div>
|
<div>
|
||||||
<div id="strokeStyle"></div>
|
<div id="strokeStyle"></div>
|
||||||
<div id="strokeStyleGroup"></div>
|
<div id="strokeStyleGroup"></div>
|
||||||
<div id="strokeStyleWidth"></div>
|
<div id="strokeStyleWidth"></div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Stroke Width.
|
Stroke Width.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeWidth"></div>
|
<div id="strokeWidth"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<!-- ************************************************** -->
|
<!-- ************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Stroke Opacity.
|
Stroke Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="strokeOpacity"></div>
|
<div id="strokeOpacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<!-- ************************************************** -->
|
<!-- ************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Fill Opacity.
|
Fill Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="fillOpacity"></div>
|
<div id="fillOpacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<!-- ************************************************** -->
|
<!-- ************************************************** -->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Opacity.
|
Opacity.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="opacity"></div>
|
<div id="opacity"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Visibility.
|
Visibility.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="visibility"></div>
|
<div id="visibility"></div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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,34 +80,35 @@
|
|||||||
|
|
||||||
<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>
|
||||||
Simple text
|
Simple text
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="text0"></div>
|
<div id="text0"></div>
|
||||||
<div id="text1"></div>
|
<div id="text1"></div>
|
||||||
<div id="text2"></div>
|
<div id="text2"></div>
|
||||||
<div id="text3"></div>
|
<div id="text3"></div>
|
||||||
<div id="text4"></div>
|
<div id="text4"></div>
|
||||||
<div id="text5"></div>
|
<div id="text5"></div>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
</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>
|
||||||
@ -1,318 +1,328 @@
|
|||||||
<!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>
|
<head>
|
||||||
|
<style>
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
web2d = {
|
web2d = {
|
||||||
peer: {}
|
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);
|
|
||||||
|
|
||||||
};
|
};
|
||||||
workspacePosition();
|
|
||||||
|
|
||||||
// Draw a reference grid.
|
web2d.peer =
|
||||||
var container = document.getElementById("sizeExampleContainer");
|
{
|
||||||
var grid = new Grid(container, 35, 12);
|
svg: {}
|
||||||
grid.setPosition("0px", "0px")
|
};
|
||||||
grid.render();
|
|
||||||
|
|
||||||
// Define a workspace using pixels and inchs.
|
web2d.peer.utils = {};
|
||||||
var workspacePixel = new web2d.Workspace();
|
</script>
|
||||||
workspacePixel.setSize("100px", "100px");
|
|
||||||
elipse = new web2d.Elipse();
|
|
||||||
elipse.setSize(100, 100);
|
|
||||||
elipse.setPosition(100, 100);
|
|
||||||
|
|
||||||
workspacePixel.append(elipse);
|
<script type="text/javascript" src="utils.js"></script>
|
||||||
workspacePixel.addItAsChildTo($('#sizeExamplePixels'));
|
<script type="text/javascript">
|
||||||
|
function initialize() {
|
||||||
|
web2d.Toolkit.init();
|
||||||
|
|
||||||
var workspaceInchs = new web2d.Workspace();
|
var overflowWorkspace = new web2d.Workspace();
|
||||||
workspaceInchs.setSize("1in", "1in");
|
overflowWorkspace.setSize("100px", "100px");
|
||||||
elipse = new web2d.Elipse();
|
var elipse1 = new web2d.Elipse();
|
||||||
elipse.setSize(100, 100);
|
elipse1.setSize(200, 200);
|
||||||
elipse.setPosition(100, 100);
|
elipse1.setPosition(0, 0);
|
||||||
|
overflowWorkspace.append(elipse1);
|
||||||
workspaceInchs.append(elipse);
|
overflowWorkspace.addItAsChildTo($('#overflowExample'));
|
||||||
workspaceInchs.addItAsChildTo($('#sizeExampleInch'));
|
|
||||||
|
|
||||||
|
|
||||||
var workspaceCoordSizeSample = function () {
|
var workspacePosition = 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();
|
var elipseAttr = { width: 100, height: 100, x: 100, y: 100 };
|
||||||
elipse.setPosition(50, 50);
|
|
||||||
workspace.append(elipse);
|
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
var divElem = $('#positionExample');
|
||||||
elipse.setPosition(0, 0);
|
var workPosition = new web2d.Workspace();
|
||||||
workspace.append(elipse);
|
workPosition.setSize("100px", "100px");
|
||||||
|
elipse = new web2d.Elipse(elipseAttr);
|
||||||
|
workPosition.append(elipse);
|
||||||
|
workPosition.addItAsChildTo(divElem);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
var x = 100;
|
||||||
elipse.setPosition(0, 100);
|
var executer = function () {
|
||||||
workspace.append(elipse);
|
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);
|
// Draw a reference grid.
|
||||||
workspace100x100.addItAsChildTo($("#coordsizeExample100x100"));
|
var container = document.getElementById("sizeExampleContainer");
|
||||||
|
var grid = new Grid(container, 35, 12);
|
||||||
|
grid.setPosition("0px", "0px")
|
||||||
|
grid.render();
|
||||||
|
|
||||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
// Define a workspace using pixels and inchs.
|
||||||
workspace100x200.addItAsChildTo($("#coordsizeExample100x200"));
|
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);
|
workspacePixel.append(elipse);
|
||||||
workspace200x100.addItAsChildTo($("#coordsizeExample200x100"));
|
workspacePixel.addItAsChildTo($('#sizeExamplePixels'));
|
||||||
|
|
||||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
var workspaceInchs = new web2d.Workspace();
|
||||||
dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic'));
|
workspaceInchs.setSize("1in", "1in");
|
||||||
|
elipse = new web2d.Elipse();
|
||||||
|
elipse.setSize(100, 100);
|
||||||
|
elipse.setPosition(100, 100);
|
||||||
|
|
||||||
var size = 100;
|
workspaceInchs.append(elipse);
|
||||||
var executer = function () {
|
workspaceInchs.addItAsChildTo($('#sizeExampleInch'));
|
||||||
size = (size + 1) % 100;
|
|
||||||
if (size < 30) {
|
|
||||||
size = 30;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
dynamicWorkspace.setCoordSize(size, size);
|
||||||
};
|
};
|
||||||
//executer.periodical(100);
|
|
||||||
dynamicWorkspace.setCoordSize(size, size);
|
|
||||||
};
|
|
||||||
|
|
||||||
workspaceCoordSizeSample();
|
workspaceCoordSizeSample();
|
||||||
|
|
||||||
|
|
||||||
var workspaceCoordOriginSample = function () {
|
var workspaceCoordOriginSample = function () {
|
||||||
|
|
||||||
var coordOriginSampleBuilder = function (x, y) {
|
var coordOriginSampleBuilder = function (x, y) {
|
||||||
// Workspace with CoordOrigin(100,100);
|
// Workspace with CoordOrigin(100,100);
|
||||||
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);
|
||||||
workspace.setCoordOrigin(x, y);
|
workspace.setCoordOrigin(x, y);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(0, 0);
|
elipse.setPosition(0, 0);
|
||||||
workspace.append(elipse);
|
workspace.append(elipse);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(0, 100);
|
elipse.setPosition(0, 100);
|
||||||
workspace.append(elipse);
|
workspace.append(elipse);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(100, 0);
|
elipse.setPosition(100, 0);
|
||||||
workspace.append(elipse);
|
workspace.append(elipse);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(100, 100);
|
elipse.setPosition(100, 100);
|
||||||
workspace.append(elipse);
|
workspace.append(elipse);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(50, 50);
|
elipse.setPosition(50, 50);
|
||||||
workspace.append(elipse);
|
workspace.append(elipse);
|
||||||
|
|
||||||
elipse = new web2d.Elipse();
|
elipse = new web2d.Elipse();
|
||||||
elipse.setPosition(100, 100);
|
elipse.setPosition(100, 100);
|
||||||
workspace.append(elipse);
|
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"));
|
</script>
|
||||||
|
|
||||||
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>
|
|
||||||
</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
|
||||||
visible.
|
be
|
||||||
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
|
visible.
|
||||||
displayed.
|
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not
|
||||||
</td>
|
be
|
||||||
<td>
|
displayed.
|
||||||
<div id="overflowExample"></div>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
|
<div id="overflowExample"></div>
|
||||||
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<!--**************************************************************************-->
|
<!--**************************************************************************-->
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Workspaces size can be defined using standard CSS measures.
|
Workspaces size can be defined using standard CSS measures.
|
||||||
In this example, the first workspace is defined using pixes and the second one
|
In this example, the first workspace is defined using pixes and the second one
|
||||||
using inchs.
|
using inchs.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
||||||
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
||||||
|
|
||||||
<div id="sizeExampleInch" 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>
|
</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;">
|
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||||
(2)
|
(2)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||||
|
(3)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
||||||
|
(4)
|
||||||
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
</table>
|
||||||
(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>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user