Format test files.

This commit is contained in:
Paulo Gustavo Veiga 2021-10-02 17:23:32 -07:00
parent 38ec9931d7
commit 24b3f828e3
13 changed files with 1346 additions and 1257 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,9 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
@ -14,10 +21,10 @@
};
web2d.peer.utils = {};
</script>
</script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
@ -32,7 +39,7 @@
var workspacePosition = function () {
var elipseAttr = {width: 100, height: 100, x: 100, y: 100};
var elipseAttr = { width: 100, height: 100, x: 100, y: 100 };
var divElem = $('#positionExample');
var workPosition = new web2d.Workspace();
@ -196,23 +203,25 @@
workspaceCoordOriginSample();
}
</script>
</script>
</head>
<body onload="initialize();">
<h1>Workspace Render Tests </h1>
<h1>Workspace Render Tests </h1>
<table border="1">
<table>
<colgroup style="width:80%;">
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr>
<td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
be
visible.
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not
be
displayed.
</td>
<td>
@ -251,12 +260,12 @@
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/>
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%;">
@ -285,12 +294,12 @@
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/>
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%;">
@ -313,6 +322,7 @@
</td>
</tr>
</table>
</table>
</body>
</html>