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

Remove trunk directory

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2009-11-06 23:30:29 -02:00
parent 2494133fed
commit 75470a91fd
715 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
web2d/src/test/javascript/jsUnit/ElementsTestSuite.html Executable file
View File

@@ -0,0 +1,286 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JsUnit Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../../../../libraries/jsUnit/css/jsUnitStyle.css">
<script language="JavaScript" type="text/javascript" src="../../../../../libraries/jsUnit/app/jsUnitCore.js"></script> <!--<script language="JavaScript" type="text/javascript" src="../../../src/core.js"></script>-->
<script language="JavaScript" type="text/javascript" src="../../../src/web2d.js"></script>
<script type="text/javascript">
web2d.peer.Toolkit.init();
</script>
</head>
<body>
<h1>JsUnit Test Suite</h1>
<p>This page contains a suite of tests for testing JsUnit. Click <a href="../../lib/jsunit/testRunner.html">here</a> to
start running the test</p>
<div id="divWorkspace" style="border:1px solid red;position:absolute;left:0;top:0;width:400px;height:410px;">
</div>
<script language="JavaScript" type="text/javascript">
function setUp()
{
debug("Setting up workspace");
workspace = new web2d.Workspace();
workspace.addItAsChildTo($("divWorkspace"));
group = new web2d.Group();
line = new web2d.Line();
elipse = new web2d.Elipse();
rect = new web2d.Rect();
rectArc = new web2d.Rect(0.3);
}
function testAppendAndRemoveElements()
{
workspace.appendChild(group);
workspace.appendChild(line);
workspace.appendChild(elipse);
workspace.appendChild(rect);
workspace.appendChild(rectArc);
workspace.removeChild(group);
workspace.removeChild(line);
workspace.removeChild(elipse);
workspace.removeChild(rect);
workspace.removeChild(rectArc);
workspace.appendChild(group);
group.appendChild(line);
group.appendChild(elipse);
group.appendChild(rect);
group.appendChild(rectArc);
group.removeChild(line);
group.removeChild(elipse);
group.removeChild(rect);
group.removeChild(rectArc);
workspace.removeChild(group);
}
function testElementFill()
{
var testFill = function(elem, parent, color, opacity, isSupported)
{
if (parent)
{
parent.appendChild(elem);
}
if (isSupported)
{
elem.setFill(color, opacity);
var fill = elem.getFill();
assertEquals(color, fill.color);
if (opacity)
{
assertEquals(opacity, fill.opacity);
}
// Set attributes
elem.setAttribute('fillColor', color);
elem.setAttribute('fillOpacity', opacity);
fill = elem.getFill();
assertEquals(color, fill.color);
if (opacity)
{
assertEquals(opacity, fill.opacity);
}
} else
{
var wasCatched = false;
try
{
line.setFill(color);
} catch (e)
{
wasCatched = true;
}
assertEquals(true, wasCatched);
}
};
testFill(workspace, null, 'blue', null, true);
testFill(elipse, workspace, 'green', 0.3, true);
testFill(rect, workspace, 'blue', 0.3, true);
testFill(rectArc, workspace, 'yellow', 0.3, true);
testFill(line, workspace, 'yellow', 0.3, false);
testFill(group, workspace, 'yellow', null, false);
}
function testElementPosition()
{
var testPosition = function(elem, parent, x, y, isSupported)
{
if (isSupported)
{
// Method setting ...
parent.appendChild(elem);
elem.setPosition(x, y);
assertEquals(x, elem.getPosition().x);
assertEquals(y, elem.getPosition().y);
// Attribute setting
x = x + 10;
elem.setAttribute('x', x);
assertEquals(x, elem.getPosition().x);
y = y + 20;
elem.setAttribute('y', y);
assertEquals(y, elem.getPosition().y);
// Attribute getters
assertEquals(y, elem.getAttribute('y'));
assertEquals(x, elem.getAttribute('x'));
// Attribute setter.
y = y + 20;
x = x + 20;
elem.setAttribute('position', x + ' ' + y);
assertEquals(x, elem.getPosition().x);
assertEquals(y, elem.getPosition().y);
} else
{
var wasCatched = false;
try
{
line.setPosition(44, 34);
} catch (e)
{
wasCatched = true;
}
assertEquals(true, wasCatched);
}
};
testPosition(group, workspace, 41, 31, true);
testPosition(elipse, workspace, 42, 32, true);
testPosition(rect, workspace, 43, 33, true);
testPosition(rectArc, workspace, 44, 34, true);
}
function testElementSize()
{
var testSize = function(elem, parent, width, height, isSupported)
{
if (parent)
{
parent.appendChild(elem);
}
if (isSupported)
{
// Function setter ..
elem.setSize(width, height);
assertEquals(width, elem.getSize().width);
assertEquals(height, elem.getSize().height);
// Attribute setter.
elem.setAttribute('width', width);
assertEquals(height, elem.getSize().height);
assertEquals(width, elem.getSize().width);
elem.setAttribute('height', height);
assertEquals(height, elem.getSize().height);
assertEquals(width, elem.getSize().width);
// Multiple setter.
elem.setAttribute('size', width + ' ' + height);
}
else {
var wasCatched = false;
try
{
elem.setSize(44, 34);
} catch (e)
{
wasCatched = true;
}
assertEquals(true, wasCatched);
}
};
testSize(workspace, null, '43mm', '43mm', true);
testSize(group, workspace, 10, 20, true);
testSize(elipse, group, 11, 21, true);
testSize(rect, workspace, 12, 22, true);
testSize(rectArc, workspace, 23, 13, true);
testSize(line, workspace, 13, 23, false);
}
function testElementEventHandling()
{
var testEventHandling = function(elem, parent, eventType)
{
if (parent)
{
parent.appendChild(elem);
}
var listener = function() { /* Dummy event listener */
};
elem.addEventListener(eventType, listener);
elem.removeEventListener(eventType, listener);
};
testEventHandling(workspace, null, 'mouseover');
testEventHandling(group, workspace, 'mouseover');
testEventHandling(elipse, workspace, 'mouseover');
testEventHandling(rect, workspace, 'mouseover');
testEventHandling(rectArc, workspace, 'mouseover');
testEventHandling(line, workspace, 'mouseover');
}
;
function testStroke()
{
var testStroke = function(elem, parent, isSupported)
{
if (parent)
{
parent.appendChild(elem);
}
var strokeStyles = ['solid','dot','dash','dashdot','longdash'];
for (var i = 0; i < strokeStyles.length; i++)
{
for (var j = 0; j < 10; j++)
{
elem.setStroke(j, strokeStyles[i], 'red');
}
}
};
// testStroke(workspace,null);
testStroke(elipse, workspace);
testStroke(rect, workspace);
testStroke(rectArc, workspace);
testStroke(line, workspace);
}
;
</script>
</body>
</html>

135
web2d/src/test/javascript/jsUnit/WorkspaceTestSuite.html Executable file
View File

@@ -0,0 +1,135 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JsUnit Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../lib/jsunit/css/jsUnitStyle.css">
<script language="JavaScript" type="text/javascript" src="../../lib/jsunit/app/jsUnitCore.js"></script>
<script language="JavaScript" type="text/javascript" src="../../../src/web2d.js"></script>
<script type="text/javascript">
web2d.peer.Toolkit.init();
</script>
</head>
<body>
<h1>JsUnit Test Suite</h1>
<p>This page contains a suite of tests for testing JsUnit. Click <a href="../../lib/jsunit/testRunner.html">here</a> to
start running the test</p>
<div id="divWorkspace" style="border:1px solid red;position:absolute;left:0px;top:0px;width:400;height:410px;">
</div>
<script language="JavaScript" type="text/javascript">
function setUp()
{
debug("Setting up workspace");
workspace = new web2d.Workspace();
workspace.addItAsChildTo($("divWorkspace"));
}
function testGettersTest()
{
// I you initialize a workspace, all default values must have valid values.
var fill = workspace.getFill();
assertEquals("white", fill.color);
}
function testSettersTest()
{
// I you initialize a workspace, all default values must have valid values.
workspace.setFill("red");
var fill = workspace.getFill();
assertEquals("red", fill.color);
}
function testEventTest()
{
var firstListener = function() {
alert("My Listener 1");
};
var secondListener = function() {
alert("My Listener 2");
};
workspace.addEventListener("click", firstListener);
// Handle gracefully invalid event types...
var catchException = false
try
{
workspace.addEventListener("click2", firstListener);
} catch(e)
{
catchException = true;
}
assert("Invalid type handling check seems to be broken", catchException);
// Test remove event functionality.
//// Fail if a listener is tryed to be removed and it was not previouly added.
catchException = false
try
{
workspace.removeEventListener("click", secondListener);
} catch(e)
{
catchException = true;
}
assert("Invalid remove operation seems to be broken", catchException);
//// Remove a valid listener.
workspace.removeEventListener("click", firstListener);
//// It has been removed?
catchException = false;
try
{
workspace.removeEventListener("click", firstListener);
} catch(e)
{
catchException = true;
}
assert("Could not remove the element", catchException);
// Check multiple registation of a type ...
//// Add two listeners ...
workspace.addEventListener("dblclick", firstListener);
workspace.addEventListener("dblclick", secondListener);
//// Remove it ...
workspace.removeEventListener("dblclick", firstListener);
workspace.removeEventListener("dblclick", secondListener);
/// Check multiple registration on different types ...
workspace.addEventListener("click", firstListener);
workspace.addEventListener("mouseover", secondListener);
}
function testAppendAndRemoveTest()
{
// Append elements ..
var elipse = new web2d.Elipse();
var group = new web2d.Group();
group.appendChild(elipse);
workspace.appendChild(group);
// Remove elements ..
workspace.removeChild(group);
group.removeChild(elipse);
}
</script>
</body>
</html>

270
web2d/src/test/javascript/render/events.html Executable file
View File

@@ -0,0 +1,270 @@
<!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" src="web2dLibraryLoader.js"></script>
<script type="text/javascript" src="utils.js"></script>
<style type="text/css">
.eventForm {
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
function EventLogger(type, element)
{
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger(event)
{
var oldColor = this.getAttribute('fillColor');
this.setFill("yellow");
alert("Event on:" + this.getType() + ", Type:" + type);
this.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function()
{
this._enable = !this._enable;
if (this._enable)
{
this._element.addEventListener(this._type, this._listener);
} else
{
this._element.removeEventListener(this._type, this._listener);
}
return this._enable;
};
</script>
</head>
<body>
<script type="text/javascript">
// Logger.setEnabled(true);
</script>
<h1>Elements Event Handling</h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tbody>
<tr>
<td>
This examples shows the ability to attach listeners to handle several events.
In this example, you can attach different events to three elements: workspace, small elipse and the big elipse.
Events will follow the event bubbling behaviour.
</td>
<td>
<div id="workspaceContainer" style="float:left;"></div>
<div class="eventForm">
<form action="">
<fieldset>
<legend>Workspace Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!wClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!wDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!wMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!wMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!wMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>Small Elipse Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!esClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!esDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!esMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!esMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!esMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>Big Elipse Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!ebClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!ebDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!ebMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!ebMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!ebMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
</div>
</td>
<script type="text/javascript">
web2d.peer.Toolkit.init();
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(150, 150);
var bigElipse = new web2d.Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.appendChild(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.appendChild(smallElipse);
wClickEventLogger = new EventLogger('click', workspace);
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
wDblCickEventLogger = new EventLogger('dblclick', workspace);
esClickEventLogger = new EventLogger('click', smallElipse);
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
ebClickEventLogger = new EventLogger('click', bigElipse);
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo($("workspaceContainer"));
</script>
</tr>
<tr>
<td>Multiple listeners can be attached to an element to handle an event type.
In this example, multiple listeners can be registered to the elipse element to handle the click event type.
</td>
<td>
<div id="workspaceMultipleEvents" style="float:left;"></div>
<div class="eventForm">
<form action="">
<fieldset>
<legend>Elipse Click Events Listeners</legend>
<label>Registered Listeners #:
<input type="text" disabled="disabled" value="0" id="listenerCounter" maxlength="2" size="2"/>
</label>
<br/>
<input type="button" value="Register Listener"
onclick="multipleHandler.registerOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
<input type="button" value="UnRegister Listener"
onclick="multipleHandler.unRegisterOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
</fieldset>
</form>
</div>
<script type="text/javascript">
function MultipleEventHandler(type, element)
{
this._listeners = [];
this._type = type;
this._element = element;
}
MultipleEventHandler.prototype.registerOneListener = function()
{
var count = this._listeners.length;
var listener = function(event) {
alert("Listener #:" + count);
};
this._listeners.push(listener);
this._element.addEventListener(this._type, listener);
}
MultipleEventHandler.prototype.listenerCount = function()
{
return this._listeners.length;
}
MultipleEventHandler.prototype.unRegisterOneListener = function()
{
if (this._listeners.length > 0)
{
var listener = this._listeners.pop();
this._element.removeEventListener(this._type, listener);
}
}
var mEventWorkspace = new web2d.Workspace();
mEventWorkspace.setSize("150px", "150px");
mEventWorkspace.setCoordSize(150, 150);
var elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue')
mEventWorkspace.appendChild(elipse);
mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
multipleHandler = new MultipleEventHandler('click', elipse);
</script>
</td>
</tr>
</tbody>
</table>
</body>
</html>

480
web2d/src/test/javascript/render/group.html Executable file
View File

@@ -0,0 +1,480 @@
<!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" src="web2dLibraryLoader.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<h1>Group Render Tests.</h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:50%"/>
<col style="width:50%"/>
</colgroup>
<tr>
<td>
A group object can be used to collect shapes. In this example,
There is a group that contains an elipse and two lines as children.
Changing the group position also change the position of all contained
elements.
</td>
<td>
<div id="groupBasicContainer"/>
</td>
</tr>
<script type="text/javascript">
web2d.peer.Toolkit.init();
var basicTest = function()
{
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(50, 50);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.appendChild(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.appendChild(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.appendChild(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.appendChild(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();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Following the bubbling event pattern, all the events over a shape are propageted to its
parent. In this example, both elipse objects are child of a group element and click event listeners
have been added to the elipse and the group.
</td>
<td>
<div id="groupEventsContainer"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.appendChild(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.appendChild(elipseRight);
var listener = function(e) {
alert("Click event on:" + this.getType())
};
group.addEventListener("click", listener);
elipseLeft.addEventListener("click", listener);
elipseRight.addEventListener("click", listener);
workspace.addItAsChildTo($("groupEventsContainer"));
}
eventTest();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Groups can be nested as a regular shape. An important property of the groups is the ability
to define their own coordSize, coorOrigin and size. In this example, both shapes have been
created with the same properties. The red one has been added as a child element of a group with the
following properties:<br/>
<br/>
Size(50,50);<br/>
Position(25,25);<br/>
CoordSize(100,100);<br/>
CoordOrigin(0,0)<br/>
The blue one has been added as a child of another group with the following properties::<br/>
<br/>
Size(50,50);<br/>
Position(25,25);<br/>
CoordSize(100,100);<br/>
CoordOrigin(0,0);<br/>
<br/>
Finally, the second group has been added as a child of the first declared group.
</td>
<td>
<div id="groupNestedContainer"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.appendChild(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.appendChild(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.appendChild(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.appendChild(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.appendChild(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.appendChild(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.appendChild(line);
workspace.addItAsChildTo($("groupNestedContainer"));
};
eventTest();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Group coordsize defines how many units there are along the width of the containing block.
In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
<br/>
1) Group with CoordSize(100,100)<br/>
2) Group with CoordSize(100,200)<br/>
3) Group with CoordSize(200,100)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
</div>
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
</div>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<script type="text/javascript">
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.appendChild(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.appendChild(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.appendChild(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();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Group coordorigin defines the coordinate at the top left corner of the containing block.
In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
<br/>
1) Group with CoordOrigin(0,0)<br/>
2) Group with CoordOrigin(0,50)<br/>
3) Group with CoordOrigin(50,0)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordOriginExample0x0" style="float:left;margin:20px;">
(1)
</div>
<div id="coordOriginExample0x50" style="float:left;margin:20px;">
(2)
</div>
<div id="coordOriginExample50x0" style="float:left;margin:20px;">
(3)
</div>
</div>
</td>
</tr>
<script type="text/javascript">
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.appendChild(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.appendChild(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.appendChild(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();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Visibility can be used to hide an element and disable all the element events.
In the case of a group, this property is applied to all the children elements.
</td>
<td>
<div id="visibilityExample" style="float:left;margin:20px;"></div>
</td>
</tr>
<script type="text/javascript">
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);
group.addEventListener("mouseover", function() {
alert("Mouse Over Group");
});
workspace.appendChild(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEventListener("mouseover", function() {
alert("Mouse Over elipseOuter");
});
group.appendChild(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.appendChild(elipseInner);
var isVisible = true;
var executer = function()
{
isVisible = !isVisible;
group.setVisibility(isVisible);
};
executer.periodical(100);
workspace.addItAsChildTo($("visibilityExample"));
}
groupVisibilitySample();
</script>
<!-- ************************************************************************** -->
<tr>
<td>
Scale.
</td>
<td>
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td>
</tr>
<script type="text/javascript">
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.appendChild(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.appendChild(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.appendChild(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>
</table>
</body>
</html>

129
web2d/src/test/javascript/render/line.html Executable file
View File

@@ -0,0 +1,129 @@
<!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" src="web2dLibraryLoader.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<h1>Lines Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Lines.
</td>
<td>
<div id="strokeWidthSample"/>
</td>
</tr>
<script type="text/javascript">
web2d.peer.Toolkit.init();
var workspaceAttributes = { width:'700px',height:'100px',coordSize:'350 50',fillColor:'#ffffcc'};
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
var rect = new web2d.Rect();
rect.setSize(10, 10);
rect.setStroke(0);
rect.setPosition(250, 5);
strokeWidthWorkspace.appendChild(rect);
for (var i = 0; i <= 10; i++)
{
var line = new web2d.Line();
line.setFrom(5 + (i * 25), 5);
line.setTo(5 + (i * 25), 45);
line.setAttribute('strokeWidth', i + 1);
strokeWidthWorkspace.appendChild(line);
}
strokeWidthWorkspace.appendChild(rect);
strokeWidthWorkspace.addItAsChildTo($("strokeWidthSample"));
</script>
<tr>
<td>
Lines Opacity.
</td>
<td>
<div id="strokeOpacitySample"/>
</td>
</tr>
<script type="text/javascript">
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
for (var i = 0; i < 10; i++)
{
var line = new web2d.Line();
line.setFrom(15 + (i * 25), 5);
line.setTo(3 + (i * 25), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeOpacity', 1 / (i + 1));
line.setAttribute('strokeColor', 'red');
strokeOpacityWorkspace.appendChild(line);
}
strokeOpacityWorkspace.addItAsChildTo($("strokeOpacitySample"));
</script>
<tr>
<td>
Line Styles.
</td>
<td>
<div id="strokeStyleSample"/>
</td>
</tr>
<script type="text/javascript">
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
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);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setAttribute('strokeStyle', styles[i]);
strokeStyleWorkspace.appendChild(line);
}
strokeStyleWorkspace.addItAsChildTo($("strokeStyleSample"));
</script>
<tr>
<td>
Line Arrows.
</td>
<td>
<div id="strokeArrowSample"/>
</td>
</tr>
<script type="text/javascript">
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
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);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles[i]);
strokeArrowWorkspace.appendChild(line);
}
strokeArrowWorkspace.addItAsChildTo($("strokeArrowSample"));
</script>
</table>
</body>
</html>

2171
web2d/src/test/javascript/render/mootools.js Normal file
View File

File diff suppressed because it is too large Load Diff

174
web2d/src/test/javascript/render/polyLine.html Executable file
View File

@@ -0,0 +1,174 @@
<!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" src="web2dLibraryLoader.js"></script>
</head>
<body>
<h1>PolyLines Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Different types of PolyLines that can be used.
</td>
<td>
<div id="overflowExample"/>
</td>
</tr>
<script type="text/javascript">
web2d.peer.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
overflowWorkspace.setSize("100px", "100px");
var line = new web2d.PolyLine();
line.setTo(165, 165);
line.setFrom(95, 95);
line.setStyle("Straight");
line.setStroke('10');
overflowWorkspace.appendChild(line);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, -1653.0000000000000000000001);
// line.setFrom(95, 952);
// line.setTo(165, 1651);
//
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 90);
// line.setTo(160, 20);
// overflowWorkspace.appendChild(line);
//
// var line = new web2d.PolyLine();
// line.setStyle("Straight");
// line.setFrom(90, -90);
// line.setTo(20, 20);
// overflowWorkspace.appendChild(line);
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(line);
//
// // Reference ...
// var refLine = new web2d.Line();
// refLine.setFrom(95, 0);
// refLine.setTo(95, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(refLine);
//
// var refLine = new web2d.Line();
// refLine.setFrom(165, 0);
// refLine.setTo(165, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(refLine);
//
overflowWorkspace.addItAsChildTo($("overflowExample"));
</script>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample"/>
</td>
</tr>
<script type="text/javascript">
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px");
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 165);
line1.setStyle("Curved");
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle("Curved");
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle("Straight");
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle("Straight");
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.appendChild(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.appendChild(line1);
overflowWorkspace.addItAsChildTo($("multipleLineExample"));
</script>
</table>
</body>
</html>

168
web2d/src/test/javascript/render/prototype.html Executable file
View File

@@ -0,0 +1,168 @@
<!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" src="web2dLibraryLoader.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<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();"/>
<div id="divWorkspace" style="overflow:scroll;width:1020px;height:620px;position:relative;">
</div>
<script type="text/javascript">
web2d.peer.Toolkit.init();
var xScale = 1000;
var yScale = 600;
var workspace = new web2d.Workspace();
workspace.setSize(xScale + "px", yScale + "px");
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill("#f0f0f0");
function zoomIn()
{
xScale = xScale / 2;
yScale = yScale / 2;
workspace.setSize(xScale + "px", yScale + "px");
}
function zoomOut()
{
xScale = xScale * 2;
yScale = yScale * 2;
workspace.setSize(xScale + "px", yScale + "px");
}
var shapeOrigX = 0;
function createShape()
{
// Secondary Idea...
var nodeGroup = new web2d.Group();
nodeGroup.setSize(200, 60);
nodeGroup.setCoordSize(200, 60);
nodeGroup.setPosition(700, shapeOrigX);
shapeOrigX = shapeOrigX + 50;
var outerRect = new web2d.Rect();
outerRect.setSize(200, 100);
outerRect.setVisibility(false);
outerRect.setPosition(0, 0);
outerRect.setFill("#3e9eff");
outerRect.setStroke(1, 'solid', "#878b8f");
nodeGroup.appendChild(outerRect);
var inerRect = new web2d.Rect(0.3);
inerRect.setSize(190, 85);
inerRect.setPosition(5, 10);
inerRect.setFill("white");
inerRect.setStroke(1, 'dash', '#878b8f');
nodeGroup.appendChild(inerRect);
nodeGroup._drag = false;
workspace.appendChild(nodeGroup);
// Add behaviour ...
inerRect.addEventListener("mouseover", function() {
outerRect.setVisibility(true);
});
inerRect.addEventListener("mouseout", function() {
if (!nodeGroup._drag)
{
outerRect.setVisibility(false);
}
});
nodeGroup.addEventListener("mousedown", function(e)
{
var shadowGroup = new web2d.Group();
shadowGroup.setSize(200, 60);
shadowGroup.setCoordSize(200, 60);
var position = nodeGroup.getPosition();
shadowGroup.setPosition(position.x, position.y);
var shadowRect = new web2d.Rect(0.3);
shadowRect.setSize(190, 85);
shadowRect.setPosition(5, 10);
shadowRect.setFill("white", 0.3);
shadowRect.setStroke(1, 'dash', '#878b8f');
shadowGroup.appendChild(shadowRect);
workspace.appendChild(shadowGroup);
this._shadowGroup = shadowGroup;
if (!this._moveFunction)
{
nodeGroup._drag = true;
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;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (event.clientX || event.clientY) {
posx = event.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = event.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
shadowGroup.setPosition(posx - 50, posy - 150);
};
}
workspace.addEventListener("mousemove", workspace._moveFunction);
var mouseUp = function(e)
{
workspace.removeChild(shadowGroup);
var pos = shadowGroup.getPosition();
nodeGroup.setPosition(pos.x, pos.y);
nodeGroup._drag = false;
outerRect.setVisibility(true);
workspace.removeEventListener("mousemove", workspace._moveFunction);
workspace.removeEventListener("mouseup", mouseUp);
};
workspace.addEventListener("mouseup", mouseUp);
});
}
// Center Topic Rect ...
centralRect = new web2d.Rect(0.3);
centralRect.setSize(200, 60);
centralRect.setPosition(300, 300);
centralRect.setFill("#99ccff");
centralRect.setStroke(1, 'solid', "#878b8f");
workspace.appendChild(centralRect);
workspace.addItAsChildTo($("divWorkspace"));
</script>
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.
</body>
</html>

150
web2d/src/test/javascript/render/rect.html Executable file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {},
vml: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<h1>Rect Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:10%"/>
<col style="width:90%"/>
</colgroup>
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="rectExample"/>
</td>
</tr>
<script type="text/javascript">
web2d.peer.Toolkit.init();
var rectExampleTest = function ()
{
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect();
rect.setPosition(20, 20);
workspace.appendChild(rect);
workspace.addItAsChildTo($("rectExample"));
}
rectExampleTest();
</script>
<!-- ********************************************************** -->
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="roundRect" style="float:left;margin:10px"></div>
</td>
</tr>
<script type="text/javascript">
var roundrectExampleTest = function ()
{
function builder(container, x, width, height)
{
for (var i = 1; i <= 10; i++)
{
var rect = new web2d.Rect(i / 10);
rect.setPosition(x, ((i - 1) * (50 + 5)));
rect.setSize(width, height);
container.appendChild(rect);
}
}
// 50 x 50
var workspace = new web2d.Workspace();
workspace.setSize("500px", "550px");
workspace.setCoordOrigin(0, -4);
workspace.setCoordSize(500, 550);
workspace.addItAsChildTo($("roundRect"));
builder(workspace, 10, 50, 50);
// 100 x 50
builder(workspace, 70, 100, 50);
// 200 x 50
builder(workspace, 180, 200, 50);
}
roundrectExampleTest();
</script>
</table>
</body>
</html>

386
web2d/src/test/javascript/render/shapes.html Executable file
View File

@@ -0,0 +1,386 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {},
vml: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<script type="text/javascript">
// Logger.setEnabled(true);
</script>
<h1>Element properties Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:10%"/>
<col style="width:90%"/>
</colgroup>
<tr>
<td>
Stroke Styles.
</td>
<td>
<div>
<div id="strokeStyle"></div>
<div id="strokeStyleGroup"></div>
<div id="strokeStyleWidth"></div>
</div>
</td>
</tr>
<script type="text/javascript">
web2d.peer.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.appendChild(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.appendChild(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.appendChild(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.appendChild(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.appendChild(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();
</script>
<tr>
<td>
Stroke Width.
</td>
<td>
<div id="strokeWidth"/>
</td>
</tr>
<script type="text/javascript">
var rectExampleTest = function ()
{
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var elipse = new web2d.Elipse();
elipse.setSize(80, 80);
elipse.setPosition(50, 50);
elipse.setFill('yellow');
elipse.setStroke(10, 'solid', 'black');
workspace.appendChild(elipse);
var rect = new web2d.Rect();
rect.setSize(80, 80);
rect.setPosition(160, 10);
rect.setFill('yellow');
rect.setStroke(10, 'solid', 'black');
workspace.appendChild(rect);
workspace.addItAsChildTo($("strokeWidth"));
};
rectExampleTest();
</script>
<!-- ************************************************** -->
<tr>
<td>
Stroke Opacity.
</td>
<td>
<div id="strokeOpacity"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(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.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("strokeOpacity"));
};
strokeOpacityTest();
</script>
<!-- ************************************************** -->
<tr>
<td>
Fill Opacity.
</td>
<td>
<div id="fillOpacity"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(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.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("fillOpacity"));
};
fillOpacityTest();
</script>
<!-- ************************************************** -->
<tr>
<td>
Opacity.
</td>
<td>
<div id="opacity"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(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.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.appendChild(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.appendChild(rect);
workspace.addItAsChildTo($("opacity"));
};
opacityTest();
</script>
<tr>
<td>
Visibility.
</td>
<td>
<div id="visibility"/>
</td>
</tr>
<script type="text/javascript">
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.appendChild(rect);
rect.addEventListener("mouseover", function() {
alert("Mouse Over");
});
var isVisible = true;
var executer = function()
{
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
executer.periodical(100);
workspace.addItAsChildTo($("visibility"));
};
visibilityTest();
</script>
</table>
</body>
</html>

104
web2d/src/test/javascript/render/text.html Executable file
View File

@@ -0,0 +1,104 @@
<!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" src="web2dLibraryLoader.js"></script>
</head>
<body>
<script type="text/javascript">
function zoomIn()
{
for(i=0; i<workspaces.length; i++)
{
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width*2,coordSize.height*2);
}
};
workspaces = [];
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
{
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize,coordSize);
overflowWorkspace.setCoordOrigin(0,0);
/*var rect = new web2d.Rect(1 / 10);
rect.setPosition(40, 40);
rect.setSize(20, 20);
overflowWorkspace.appendChild(rect);
*/
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval+" "+scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
overflowWorkspace.addItAsChildTo($(owner));
var parent = $(owner);
var span= document.createElement("span");
span.setAttribute("id","textoHTML"+iesimo);
var textsize = text.offsetWidth;
var textHtml=document.createTextNode(textsize);
var fontSize=text.getHtmlFontSize();
span.appendChild(textHtml);
if(core.UserAgent.isSVGSupported())
{
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:"+modifier+";font-style: "+style+"; font-size:"+ fontSize +"pt; font-family: "+font+";width:30;height:30;");
}
else
{
span.style.font=modifier+" "+style+" "+ fontSize +"pt "+font;
span.style.width="30";
span.style.height="30";
}
parent.appendChild(span);
workspaces[iesimo]=overflowWorkspace;
};
</script>
<h1>Text Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tr>
<td>
Simple text
</td>
<td>
<div id="text0"/>
<div id="text1"/>
<div id="text2"/>
<div id="text3"/>
<div id="text4"/>
</td>
</tr>
<script type="text/javascript">
web2d.peer.Toolkit.init();
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
</script>
<!--**************************************************************************-->
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

64
web2d/src/test/javascript/render/utils.js Executable file
View File

@@ -0,0 +1,64 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* $Id: file 64488 2006-03-10 17:32:09Z paulo $
*/
Grid = function(parent, colums, rows)
{
var cellSize = "10px";
this._parent = parent;
this._container = this._createContainer();
var tbody = this._container.firstChild.firstChild;
for (var i = 0; i < rows; i++)
{
var trElement = document.createElement("tr");
for (var j = 0; j < colums; j++)
{
var tdElement = document.createElement("td");
tdElement.style.width = cellSize;
tdElement.style.height = cellSize;
tdElement.style.borderWidth = "1px";
tdElement.style.borderStyle = "dashed";
tdElement.style.borderColor = "lightsteelblue";
trElement.appendChild(tdElement);
}
tbody.appendChild(trElement);
}
};
Grid.prototype.setPosition = function(x, y)
{
this._container.style.left = x;
this._container.style.top = y;
};
Grid.prototype.render = function()
{
this._parent.appendChild(this._container);
};
Grid.prototype._createContainer = function()
{
var result = window.document.createElement("div");
result.style.tableLayout = "fixed";
result.style.borderCollapse = "collapse";
result.style.emptyCells = "show";
result.style.position = "absolute";
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result;
};

150
web2d/src/test/javascript/render/web2dLibraryLoader.js Normal file
View File

@@ -0,0 +1,150 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* $Id: file 64488 2006-03-10 17:32:09Z paulo $
*/
// Modulue initializer.
web2d = {
peer: {}
};
web2d.peer =
{
svg: {},
vml: {}
};
web2d.peer.utils = {};
web2d.Loader =
{
load: function(scriptPath, stylePath, jsFileName)
{
var headElement = document.getElementsByTagName('head');
var htmlDoc = headElement.item(0);
var baseUrl = this.baseUrl(jsFileName);
if (scriptPath && scriptPath.length > 0)
{
for (var i = 0; i < scriptPath.length; i++)
{
this.includeScriptNode(baseUrl + scriptPath[i]);
}
}
},
baseUrl: function(jsFileName)
{
var headElement = document.getElementsByTagName('head');
var htmlDoc = headElement.item(0);
var headChildren = htmlDoc.childNodes;
var result = null;
for (var i = 0; i < headChildren.length; i++)
{
var node = headChildren.item(i);
if (node.nodeName && node.nodeName.toLowerCase() == "script")
{
var libraryUrl = node.src;
if (libraryUrl.indexOf(jsFileName) != -1)
{
var index = libraryUrl.lastIndexOf("/");
index = libraryUrl.lastIndexOf("/", index - 1);
result = libraryUrl.substring(0, index);
}
}
}
if (result == null)
{
throw "Could not obtain the base url directory.";
}
return result;
},
includeScriptNode: function(filename) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', filename);
html_doc.appendChild(js);
return false;
},
includeStyleNode: function(filename) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('link');
js.setAttribute('rel', 'stylesheet');
js.setAttribute('type', 'text/css');
js.setAttribute('href', filename);
html_doc.appendChild(js);
return false;
}
};
web2d.JsLoader =
{
scriptPath: [
"/render/mootools.js",
"/../../../../core-js/target/classes/core.js",
"/../../../src/main/javascript/EventDispatcher.js",
"/../../../src/main/javascript/peer/vml/ElementPeer.js",
"/../../../src/main/javascript/peer/svg/ElementPeer.js","" +
"/../../../src/main/javascript/Element.js",
"/../../../src/main/javascript/Workspace.js",
"/../../../src/main/javascript/peer/svg/WorkspacePeer.js",
"/../../../src/main/javascript/peer/vml/WorkspacePeer.js",
"/../../../src/main/javascript/Toolkit.js",
"/../../../src/main/javascript/Elipse.js",
"/../../../src/main/javascript/peer/svg/ElipsePeer.js",
"/../../../src/main/javascript/peer/vml/ElipsePeer.js",
"/../../../src/main/javascript/Line.js",
"/../../../src/main/javascript/peer/svg/LinePeer.js",
"/../../../src/main/javascript/peer/vml/LinePeer.js",
"/../../../src/main/javascript/PolyLine.js",
"/../../../src/main/javascript/peer/svg/PolyLinePeer.js",
"/../../../src/main/javascript/peer/vml/PolyLinePeer.js",
"/../../../src/main/javascript/Group.js",
"/../../../src/main/javascript/peer/svg/GroupPeer.js",
"/../../../src/main/javascript/peer/vml/GroupPeer.js",
"/../../../src/main/javascript/Rect.js",
"/../../../src/main/javascript/peer/svg/RectPeer.js",
"/../../../src/main/javascript/peer/vml/RectPeer.js",
"/../../../src/main/javascript/Text.js",
"/../../../src/main/javascript/peer/svg/TextPeer.js",
"/../../../src/main/javascript/peer/vml/TextPeer.js",
"/../../../src/main/javascript/peer/vml/TextBoxPeer.js",
"/../../../src/main/javascript/peer/utils/TransformUtils.js",
"/../../../src/main/javascript/peer/utils/EventUtils.js",
"/../../../src/main/javascript/Font.js",
"/../../../src/main/javascript/peer/svg/Font.js",
"/../../../src/main/javascript/peer/vml/Font.js",
"/../../../src/main/javascript/peer/svg/TahomaFont.js",
"/../../../src/main/javascript/peer/svg/TimesFont.js",
"/../../../src/main/javascript/peer/svg/ArialFont.js",
"/../../../src/main/javascript/peer/svg/VerdanaFont.js",
"/../../../src/main/javascript/peer/vml/TahomaFont.js",
"/../../../src/main/javascript/peer/vml/TimesFont.js",
"/../../../src/main/javascript/peer/vml/ArialFont.js",
"/../../../src/main/javascript/peer/vml/VerdanaFont.js"],
stylePath: [],
load: function()
{
web2d.Loader.load(this.scriptPath, this.stylePath, "web2dLibraryLoader.js");
}
};
web2d.JsLoader.load();

374
web2d/src/test/javascript/render/workspace.html Executable file
View File

@@ -0,0 +1,374 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {},
vml: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TextBoxPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<h1>Workspace Render Tests </h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr>
<td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
visible.
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
displayed.
</td>
<td>
<div id="overflowExample"></div>
</td>
</tr>
<script type="text/javascript">
web2d.peer.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.appendChild(elipse1);
overflowWorkspace.addItAsChildTo($("overflowExample"));
</script>
<!--**************************************************************************-->
<tr>
<td>
Workspace will be added as child of a div element. That's why, Its parent will define this position.
</td>
<td>
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
</td>
</tr>
<script type="text/javascript">
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.appendChild(elipse);
workPosition.addItAsChildTo(divElem);
var x = 100;
var executer = function()
{
x = (x + 10) % 100;
divElem.style.left = x + "px";
};
executer.periodical(100);
};
workspacePosition();
</script>
<!--**************************************************************************-->
<tr>
<td>
Workspaces size can be defined using standard CSS measures.
In this example, the first workspace is defined using pixes and the second one
using inchs.
</td>
<td>
<div id="sizeExampleContainer" style="position:relative;width:400px;">
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
</div>
</td>
</tr>
<script type="text/javascript">
// Draw a reference grid.
var container = document.getElementById("sizeExampleContainer");
var grid = new Grid(container, 35, 12);
grid.setPosition("0px", "0px")
grid.render();
// Define a workspace using pixels and inchs.
var workspacePixel = new web2d.Workspace();
workspacePixel.setSize("100px", "100px");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspacePixel.appendChild(elipse);
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
var workspaceInchs = new web2d.Workspace();
workspaceInchs.setSize("1in", "1in");
elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspaceInchs.appendChild(elipse);
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
</script>
<!--**************************************************************************-->
<tr>
<td>
Workspace coordsize defines how many units there are along the width of the containing block.
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
<br/>
1) Workspace with CoordSize(100,100)<br/>
2) Workspace with CoordSize(100,200)<br/>
3) Workspace with CoordSize(200,100)<br/>
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
(1)
</div>
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
(2)
</div>
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
(3)
</div>
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
(4)
</div>
</div>
</td>
</tr>
<script type="text/javascript">
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.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(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);
};
workspaceCoordSizeSample();
</script>
<!--**************************************************************************-->
<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>
<script type="text/javascript">
var workspaceCoordOriginSample = function()
{
var coordOriginSampleBuilder = function(x, y)
{
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
workspace.setCoordOrigin(x, y);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.appendChild(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(elipse);
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();
</script>
</table>
</body>
</html>