2009-07-10 02:02:00 +02:00
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
2009-06-07 20:59:43 +02:00
|
|
|
|
2009-07-10 02:02:00 +02:00
|
|
|
<html>
|
2009-06-07 20:59:43 +02:00
|
|
|
<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>
|
