Update to motools 1.4.5
Fix Firefox 11 issues.
This commit is contained in:
Paulo Gustavo Veiga
@@ -19,7 +19,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<!--[if gte IE 9]>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=9" >
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=9">
|
||||
<![endif]-->
|
||||
|
||||
<script type="text/javascript">
|
||||
@@ -19,7 +19,8 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.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>
|
||||
@@ -50,7 +51,7 @@
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
function initialize() {
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
var overflowWorkspace = new web2d.Workspace({fillColor:'green'});
|
||||
@@ -59,16 +60,16 @@
|
||||
line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
|
||||
line1.setFrom(200, 200);
|
||||
line1.setTo(100, 100);
|
||||
line1.setSrcControlPoint(new core.Point(-100,0));
|
||||
line1.setDestControlPoint(new core.Point(100,0));
|
||||
line1.setSrcControlPoint(new core.Point(-100, 0));
|
||||
line1.setDestControlPoint(new core.Point(100, 0));
|
||||
overflowWorkspace.appendChild(line1);
|
||||
|
||||
|
||||
var line2 = new web2d.CurvedLine();
|
||||
line2.setStyle(web2d.CurvedLine.NICE_LINE);
|
||||
line2.setFrom(0, 0);
|
||||
line2.setTo(150, 90);
|
||||
line2.setSrcControlPoint(new core.Point(100,0));
|
||||
line2.setDestControlPoint(new core.Point(-100,0));
|
||||
line2.setSrcControlPoint(new core.Point(100, 0));
|
||||
line2.setDestControlPoint(new core.Point(-100, 0));
|
||||
overflowWorkspace.appendChild(line2);
|
||||
|
||||
overflowWorkspace.addItAsChildTo($("overflowExample"));
|
||||
@@ -82,28 +83,28 @@
|
||||
<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>
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Different types of PolyLines that can be used.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
This is how multiple childs will look in each style line
|
||||
</td>
|
||||
<td>
|
||||
<div id="multipleLineExample"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
This is how multiple childs will look in each style line
|
||||
</td>
|
||||
<td>
|
||||
<div id="multipleLineExample"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -15,8 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -15,8 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -15,8 +15,7 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
|
||||
@@ -2,266 +2,260 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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/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/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/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/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/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="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize() {
|
||||
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();
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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.addEvent("mouseover", function() {
|
||||
alert("Mouse Over");
|
||||
});
|
||||
|
||||
var isVisible = true;
|
||||
var executer = function() {
|
||||
isVisible = !isVisible;
|
||||
rect.setVisibility(isVisible);
|
||||
};
|
||||
executer.periodical(100);
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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/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/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/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/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/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="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
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();
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
||||
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.addEvent("mouseover", function() {
|
||||
alert("Mouse Over");
|
||||
});
|
||||
|
||||
var isVisible = true;
|
||||
var executer = function()
|
||||
{
|
||||
isVisible = !isVisible;
|
||||
rect.setVisibility(isVisible);
|
||||
};
|
||||
executer.periodical(100);
|
||||
|
||||
workspace.addItAsChildTo($("visibility"));
|
||||
};
|
||||
visibilityTest();
|
||||
}
|
||||
</script>
|
||||
workspace.addItAsChildTo($("visibility"));
|
||||
};
|
||||
visibilityTest();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
@@ -269,71 +263,71 @@
|
||||
<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>
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:10%"/>
|
||||
<col style="width:90%"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Styles.
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<div id="strokeStyle"></div>
|
||||
<div id="strokeStyleGroup"></div>
|
||||
<div id="strokeStyleWidth"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Width.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidth"></div>
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Width.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeWidth"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacity"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Stroke Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="strokeOpacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Fill Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="fillOpacity"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Fill Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="fillOpacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="opacity"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- ************************************************** -->
|
||||
<tr>
|
||||
<td>
|
||||
Opacity.
|
||||
</td>
|
||||
<td>
|
||||
<div id="opacity"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Visibility.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibility"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Visibility.
|
||||
</td>
|
||||
<td>
|
||||
<div id="visibility"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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>
|
||||
@@ -50,7 +50,7 @@
|
||||
var coordSize = workspaces[i].getCoordSize();
|
||||
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
workspaces = [];
|
||||
|
||||
@@ -93,6 +93,8 @@
|
||||
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);
|
||||
TextTest("100px", 100, "Test Text\nMultiline", "Arial", 10, "italic", "bold", "green", "text5", 5);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -117,6 +119,8 @@
|
||||
<div id="text2"></div>
|
||||
<div id="text3"></div>
|
||||
<div id="text4"></div>
|
||||
<div id="text5"></div>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
@@ -4,234 +4,227 @@
|
||||
<head>
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
web2d = {
|
||||
peer: {}
|
||||
};
|
||||
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {}
|
||||
};
|
||||
web2d.peer =
|
||||
{
|
||||
svg: {}
|
||||
};
|
||||
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
web2d.peer.utils = {};
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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/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/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/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/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/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="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize(){
|
||||
web2d.peer.Toolkit.init();
|
||||
<script type="text/javascript"
|
||||
src="../../../../../mindplot/src/main/javascript/libraries/mootools/mootools-core-1.4.5-full-nocompat-yc.js"></script>
|
||||
<script type="text/javascript" src="../../../../../core-js/target/classes/core.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/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/Line.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/Group.js"></script>
|
||||
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/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/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/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/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="utils.js"></script>
|
||||
<script type="text/javascript">
|
||||
function initialize() {
|
||||
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"));
|
||||
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"));
|
||||
|
||||
|
||||
var workspacePosition = function()
|
||||
{
|
||||
var workspacePosition = function() {
|
||||
|
||||
var elipseAttr = {width:100,height:100,x:100,y:100};
|
||||
var elipseAttr = {width:100,height:100,x:100,y:100};
|
||||
|
||||
var divElem = $("positionExample");
|
||||
var workPosition = new web2d.Workspace();
|
||||
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);
|
||||
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";
|
||||
};
|
||||
workspacePosition();
|
||||
executer.periodical(100);
|
||||
|
||||
// Draw a reference grid.
|
||||
var container = document.getElementById("sizeExampleContainer");
|
||||
var grid = new Grid(container, 35, 12);
|
||||
grid.setPosition("0px", "0px")
|
||||
grid.render();
|
||||
};
|
||||
workspacePosition();
|
||||
|
||||
// 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);
|
||||
// Draw a reference grid.
|
||||
var container = document.getElementById("sizeExampleContainer");
|
||||
var grid = new Grid(container, 35, 12);
|
||||
grid.setPosition("0px", "0px")
|
||||
grid.render();
|
||||
|
||||
workspacePixel.appendChild(elipse);
|
||||
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
||||
// Define a workspace using pixels and inchs.
|
||||
var workspacePixel = new web2d.Workspace();
|
||||
workspacePixel.setSize("100px", "100px");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
|
||||
var workspaceInchs = new web2d.Workspace();
|
||||
workspaceInchs.setSize("1in", "1in");
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(100, 100);
|
||||
workspacePixel.appendChild(elipse);
|
||||
workspacePixel.addItAsChildTo($("sizeExamplePixels"));
|
||||
|
||||
workspaceInchs.appendChild(elipse);
|
||||
workspaceInchs.addItAsChildTo($("sizeExampleInch"));
|
||||
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"));
|
||||
|
||||
|
||||
var workspaceCoordSizeSample = function()
|
||||
{
|
||||
// Workspace with CoordSize(100,100);
|
||||
var coordSizeSampleBuilder = function(width, height)
|
||||
{
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(width, height);
|
||||
var 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(50, 50);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
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(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
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;
|
||||
};
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
return workspace;
|
||||
};
|
||||
|
||||
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
||||
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
var workspace100x100 = coordSizeSampleBuilder(100, 100);
|
||||
workspace100x100.addItAsChildTo($("coordsizeExample100x100"));
|
||||
|
||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
||||
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
var workspace100x200 = coordSizeSampleBuilder(100, 200);
|
||||
workspace100x200.addItAsChildTo($("coordsizeExample100x200"));
|
||||
|
||||
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
||||
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
var workspace200x100 = coordSizeSampleBuilder(200, 100);
|
||||
workspace200x100.addItAsChildTo($("coordsizeExample200x100"));
|
||||
|
||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
||||
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
|
||||
dynamicWorkspace.addItAsChildTo($("coordsizeExampleDynamic"));
|
||||
|
||||
var size = 100;
|
||||
var executer = function()
|
||||
{
|
||||
size = (size + 1) % 100;
|
||||
if (size < 30)
|
||||
{
|
||||
size = 30;
|
||||
}
|
||||
var size = 100;
|
||||
var executer = function() {
|
||||
size = (size + 1) % 100;
|
||||
if (size < 30) {
|
||||
size = 30;
|
||||
}
|
||||
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
executer.periodical(100);
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
executer.periodical(100);
|
||||
dynamicWorkspace.setCoordSize(size, size);
|
||||
};
|
||||
|
||||
workspaceCoordSizeSample();
|
||||
workspaceCoordSizeSample();
|
||||
|
||||
|
||||
var workspaceCoordOriginSample = function()
|
||||
{
|
||||
var workspaceCoordOriginSample = function() {
|
||||
|
||||
var coordOriginSampleBuilder = function(x, y)
|
||||
{
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
workspace.setCoordOrigin(x, y);
|
||||
var coordOriginSampleBuilder = function(x, y) {
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("100px", "100px");
|
||||
workspace.setCoordSize(100, 100);
|
||||
workspace.setCoordOrigin(x, y);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(0, 0);
|
||||
workspace.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(0, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(100, 0);
|
||||
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(100, 100);
|
||||
workspace.appendChild(elipse);
|
||||
|
||||
elipse = new web2d.Elipse();
|
||||
elipse.setPosition(50, 50);
|
||||
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);
|
||||
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);
|
||||
return workspace;
|
||||
};
|
||||
workspaceCoordOriginSample();
|
||||
|
||||
}
|
||||
</script>
|
||||
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>
|
||||
</head>
|
||||
|
||||
<body onload="initialize();">
|
||||
@@ -239,114 +232,114 @@
|
||||
<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>
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%">
|
||||
<col style="width:60%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not be
|
||||
visible.
|
||||
In this example, The back circle is bigger than the workspace area. A big portion of the circle will not be
|
||||
displayed.
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
||||
</td>
|
||||
<td>
|
||||
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace will be added as child of a div element. That's why, Its parent will define this position.
|
||||
</td>
|
||||
<td>
|
||||
<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspaces size can be defined using standard CSS measures.
|
||||
In this example, the first workspace is defined using pixes and the second one
|
||||
using inchs.
|
||||
</td>
|
||||
<td>
|
||||
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
||||
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspaces size can be defined using standard CSS measures.
|
||||
In this example, the first workspace is defined using pixes and the second one
|
||||
using inchs.
|
||||
</td>
|
||||
<td>
|
||||
<div id="sizeExampleContainer" style="position:relative;width:400px;">
|
||||
<div id="sizeExamplePixels" style="float:left;margin:20px"></div>
|
||||
|
||||
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Workspace with CoordSize(100,100)<br/>
|
||||
2) Workspace with CoordSize(100,200)<br/>
|
||||
3) Workspace with CoordSize(200,100)<br/>
|
||||
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
<div id="sizeExampleInch" style="float:left;margin:20px"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordsize defines how many units there are along the width of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50).<br/>
|
||||
<br/>
|
||||
1) Workspace with CoordSize(100,100)<br/>
|
||||
2) Workspace with CoordSize(100,200)<br/>
|
||||
3) Workspace with CoordSize(200,100)<br/>
|
||||
4) Workspace animation changing the coordsize from (30,30) to (100,100)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordsizeExample100x100" style="float:left;margin:20px;">
|
||||
(1)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
<div id="coordsizeExample100x200" style="float:left;margin:20px;">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
<div id="coordsizeExample200x100" style="float:left;margin:20px;">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
||||
(4)
|
||||
<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--**************************************************************************-->
|
||||
<tr>
|
||||
<td>
|
||||
Workspace coordorigin defines the coordinate at the top left corner of the containing block.
|
||||
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
|
||||
positioned
|
||||
at (0,0),(0,100),(100,0),(100,100)(50,50). <br/>
|
||||
<br/>
|
||||
1) Workspace with CoordOrigin(0,0)<br/>
|
||||
2) Workspace with CoordOrigin(0,50)<br/>
|
||||
3) Workspace with CoordOrigin(50,0)<br/>
|
||||
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="position:relative;width:100%;">
|
||||
<div id="coordorigin0x0" style="float:left;margin:20px">
|
||||
(1)
|
||||
</div>
|
||||
<!--**************************************************************************-->
|
||||
<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="coordorigin0x50" style="float:left;margin:20px">
|
||||
(2)
|
||||
</div>
|
||||
|
||||
<div id="coordorigin50x0" style="float:left;margin:20px">
|
||||
(3)
|
||||
</div>
|
||||
<div id="coordorigin50x0" style="float:left;margin:20px">
|
||||
(3)
|
||||
</div>
|
||||
|
||||
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
|
||||
(4)
|
||||
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
|
||||
(4)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user