vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2025-06-11 18:43:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remove javascript folder structure

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2021-10-02 17:57:29 -07:00
parent 24b3f828e3
commit d53f13efd9
21 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/web2d/test/playground/arrow.html Normal file
View File

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

82
packages/web2d/test/playground/curvedLine.html Normal file
View File

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

276
packages/web2d/test/playground/events.html Executable file
View File

@ -0,0 +1,276 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</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 = element.getAttribute('fillColor');
element.setFill("yellow");
alert("Event on:" + element.getType() + ", Type:" + type);
element.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function () {
this._enable = !this._enable;
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else {
this._element.removeEvent(this._type, this._listener);
}
return this._enable;
};
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.addEvent(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.removeEvent(this._type, listener);
}
}
function initialize() {
web2d.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.append(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.append(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').first());
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.append(elipse);
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
multipleHandler = new MultipleEventHandler('click', elipse);
}
</script>
</head>
<body onload="initialize();">
<h1>Elements Event Handling</h1>
<table>
<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>
</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').first().value=multipleHandler.listenerCount();" />
<input type="button" value="UnRegister Listener"
onclick="multipleHandler.unRegisterOneListener();$('#listenerCounter').first().value=multipleHandler.listenerCount();" />
</fieldset>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

138
packages/web2d/test/playground/font.html Normal file
View File

@ -0,0 +1,138 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6, 8, 10, 15].forEach(function (size, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach(function (align, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function initialize() {
web2d.Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head>
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1>
<table>
<colgroup>
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<thead>
<tr>
<td></td>
<td>Arial</td>
<td>Tahoma</td>
<td>Verdana</td>
<td>Times</td>
</tr>
</thead>
<tr>
<td>
Multiline Text
</td>
<td>
<div id="multi0"></div>
</td>
<td>
<div id="multi1"></div>
</td>
<td>
<div id="multi2"></div>
</td>
<td>
<div id="multi3"></div>
</td>
</tr>
<tr>
<td>
Multiline Aligment
</td>
<td>
<div id="amulti0"></div>
</td>
<td>
<div id="amulti1"></div>
</td>
<td>
<div id="amulti2"></div>
</td>
<td>
<div id="amulti3"></div>
</td>
</tr>
<!--**************************************************************************-->
</table>
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

490
packages/web2d/test/playground/group.html Executable file
View File

@ -0,0 +1,490 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
var xDir = 1;
var yDir = 1;
var executer = function () {
var y = group.getPosition().y + yDir;
var x = group.getPosition().x + xDir;
if (x < 0) {
xDir = 1;
} else if (x > 50) {
xDir = -1;
}
if (y < 0) {
yDir = 1;
} else if (y > 50) {
yDir = -1;
}
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y);
};
//executer.periodical(100);
};
basicTest();
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var groupAttributes = { width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0' };
var group = new web2d.Group(groupAttributes);
workspace.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.append(elipseRight);
var listener = function (e) {
alert("Click event on:" + this.getType())
};
group.addEvent("click", listener);
elipseLeft.addEvent("click", listener);
elipseRight.addEvent("click", listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
}
eventTest();
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(200, 200);
var groupOuter = new web2d.Group();
groupOuter.setSize(50, 50)
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0)
workspace.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.append(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest();
var workspaceCoordSizeSample = function () {
function groupSampleBuilder(width, height) {
// Group with CoordSize(50,50);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
var sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($("#coordsizeExample100x100"));
var sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($("#coordsizeExample100x200"));
var sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($("#coordsizeExample200x100"));
};
workspaceCoordSizeSample();
var workspaceCoordOriginSample = function () {
function groupSampleBuilder(x, y) {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
;
var sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
var sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
var sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
}
workspaceCoordOriginSample();
var groupVisibilitySample = function () {
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.addEvent("mouseover", function () {
alert("Mouse Over Group");
});
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function () {
alert("Mouse Over elipseOuter");
});
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
group.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
}
groupVisibilitySample();
var groupVisibilitySample = function () {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var width = 10;
var height = 10;
var executer = function () {
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
}
groupVisibilitySample();
}
</script>
</head>
<body onload="initialize();">
<h1>Group Render Tests.</h1>
<table>
<colgroup style="width:80%;">
<col style="width:50%" />
<col style="width:50%" />
</colgroup>
<tr>
<td>
A group object can be used to collect shapes. In this example,
There is a group that contains an elipse and two lines as children.
Changing the group position also change the position of all contained
elements.
</td>
<td>
<div id="groupBasicContainer" />
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
Following the bubbling event pattern, all the events over a shape are propageted to its
parent. In this example, both elipse objects are child of a group element and click event listeners
have been added to the elipse and the group.
</td>
<td>
<div id="groupEventsContainer" />
</td>
</tr>
<!-- ************************************************************************** -->
<tr>
<td>
Groups can be nested as a regular shape. An important property of the groups is the ability
to define their own coordSize, coorOrigin and size. In this example, both shapes have been
created with the same properties. The red one has been added as a child element of a group with the
following properties:<br />
<br />
Size(50,50);<br />
Position(25,25);<br />
CoordSize(100,100);<br />
CoordOrigin(0,0)<br />
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>
<!-- ************************************************************************** -->
<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>
<!-- ************************************************************************** -->
<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">
</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>
<!-- ************************************************************************** -->
<tr>
<td>
Scale.
</td>
<td>
<div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
</td>
</tr>
</table>
</body>
</html>

30
packages/web2d/test/playground/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title>
</head>
<body>
<div>
<h1>Testing</h1>
<ul>
<li><a href="/arrow">Arrow</a></li>
<li><a href="/curvedLine">Curved Line</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/font">Font</a></li>
<li><a href="/group">Group</a></li>
<li><a href="line">Line</a></li>
<li><a href="/polyLine">Poly Line</a></li>
<li><a href="/prototype">Prototype</a></li>
<li><a href="/rect">Rect</a></li>
<li><a href="/shapes">Shapes</a></li>
<li><a href="/text">Text</a></li>
<li><a href="/workspace">Workspace</a></li>
</ul>
</div>
</body>
</html>

141
packages/web2d/test/playground/line.html Executable file
View File

@ -0,0 +1,141 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(line);
}
strokeWidthWorkspace.append(rect);
strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
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.append(line);
}
strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
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.append(line);
}
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
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.append(line);
}
strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));
}
</script>
</head>
<body onload="initialize();">
<h1>Lines Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Lines.
</td>
<td>
<div id="strokeWidthSample" />
</td>
</tr>
<tr>
<td>
Lines Opacity.
</td>
<td>
<div id="strokeOpacitySample" />
</td>
</tr>
<tr>
<td>
Line Styles.
</td>
<td>
<div id="strokeStyleSample" />
</td>
</tr>
<tr>
<td>
Line Arrows.
</td>
<td>
<div id="strokeArrowSample" />
</td>
</tr>
</table>
</body>
</html>

193
packages/web2d/test/playground/polyLine.html Executable file
View File

@ -0,0 +1,193 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(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.append(line);
//
// var line = new web2d.PolyLine();
// line.setStyle("Straight");
// line.setFrom(90, -90);
// line.setTo(20, 20);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(line);
//
// // Reference ...
// var refLine = new web2d.Line();
// refLine.setFrom(95, 0);
// refLine.setTo(95, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(refLine);
//
// var refLine = new web2d.Line();
// refLine.setFrom(165, 0);
// refLine.setTo(165, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(refLine);
//
overflowWorkspace.addItAsChildTo($('#overflowExample'));
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.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle("Curved");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.append(line1);
overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
}
</script>
</head>
<body onload="initialize();">
<h1>PolyLines Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Different types of PolyLines that can be used.
</td>
<td>
<div id="overflowExample" />
</td>
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table>
</body>
</html>

175
packages/web2d/test/playground/prototype.html Executable file
View File

@ -0,0 +1,175 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
var xScale = 1000;
var yScale = 600;
var shapeOrigX = 0;
function initialize() {
web2d.Toolkit.init();
workspace = new web2d.Workspace();
workspace.setSize(xScale + "px", yScale + "px");
workspace.setCoordSize(xScale, yScale);
workspace.setCoordOrigin(0, 0);
workspace.setFill("#f0f0f0");
// 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.append(centralRect);
workspace.addItAsChildTo($('#divWorkspace'));
}
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");
}
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.append(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.append(inerRect);
nodeGroup._drag = false;
workspace.append(nodeGroup);
// Add behaviour ...
inerRect.addEvent("mouseover", function () {
outerRect.setVisibility(true);
});
inerRect.addEvent("mouseout", function () {
if (!nodeGroup._drag) {
outerRect.setVisibility(false);
}
});
nodeGroup.addEvent("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.append(shadowRect);
workspace.append(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.addEvent("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.removeEvent("mousemove", workspace._moveFunction);
workspace.removeEvent("mouseup", mouseUp);
};
workspace.addEvent("mouseup", mouseUp);
});
}
</script>
</head>
<body onload="initialize();">
<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>
Notes:
<li>El evento de mousemove se debe agregar al workspace.
<li>Cuando se esta drageando un elemento se deberia deshabilitar los eventos del resto de los elementos.
<li>Definir comportamiento del area.
</body>
</html>

109
packages/web2d/test/playground/rect.html Executable file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.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.append(rect);
workspace.addItAsChildTo($('#rectExample'));
}
rectExampleTest();
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.append(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>
</head>
<body onload="initialize();">
<h1>Rect Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:10%" />
<col style="width:90%" />
</colgroup>
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="rectExample"></div>
</td>
</tr>
<!-- ********************************************************** -->
<tr>
<td>
Straight Lines.
</td>
<td>
<div id="roundRect" style="float:left;margin:10px"></div>
</td>
</tr>
</table>
</body>
</html>

320
packages/web2d/test/playground/shapes.html Executable file
View File

@ -0,0 +1,320 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var strokeStyleTest = function () {
function builder(parent, scale, strokeWidth) {
var rectSize = scale * 80;
var yPosition = 10 * scale;
var xPosition = 10 * scale;
var rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(1, 'solid', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
rect.setSize(rectSize, rectSize);
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.append(rect);
}
// Workspace with default scale ...
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 1);
workspace.addItAsChildTo($('#strokeStyle'));
// Workspace with modified scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(5000, 1000);
workspace.setCoordOrigin(0, 0);
builder(workspace, 10, 1);
workspace.addItAsChildTo($('#strokeStyleGroup'));
// Workspace with default scale ...
workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo($('#strokeStyleWidth'));
};
strokeStyleTest();
var strokeOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("strokeOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#strokeOpacity'));
};
strokeOpacityTest();
var fillOpacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setAttribute("fillOpacity", 1);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.append(rect);
workspace.addItAsChildTo($('#fillOpacity'));
};
fillOpacityTest();
var opacityTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rect = new web2d.Rect(0, {
x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4
});
workspace.append(rect);
var rectAttributes = { width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(20, 20);
rect.setOpacity(0.8);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.append(rect);
workspace.addItAsChildTo($('#opacity'));
};
opacityTest();
var visibilityTest = function () {
var workspace = new web2d.Workspace({ fillColor: 'yellow', strokeWidth: '2px' });
workspace.setSize("500px", "100px");
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
var rectAttributes = { width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10 };
var rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
workspace.append(rect);
rect.addEvent("mouseover", function () {
alert("Mouse Over");
});
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();
}
</script>
</head>
<body onload="initialize();">
<h1>Element properties Tests </h1>
<table>
<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>
<!-- ************************************************** -->
<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>
Opacity.
</td>
<td>
<div id="opacity"></div>
</td>
</tr>
<tr>
<td>
Visibility.
</td>
<td>
<div id="visibility"></div>
</td>
</tr>
</table>
</body>
</html>

3
packages/web2d/test/playground/testing.js Normal file
View File

@ -0,0 +1,3 @@
import { default as web2D } from '../../lib/web2d';
global.web2d = web2D();

114
packages/web2d/test/playground/text.html Executable file
View File

@ -0,0 +1,114 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<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 text = new web2d.Text();
overflowWorkspace.append(text);
var scale = web2d.TransformUtils.workoutScale(text._peer);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
textot = text;
overflowWorkspace.addItAsChildTo(document.getElementById(owner));
var parent = document.getElementById(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.append(textHtml);
//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;");
parent.append(span);
workspaces[iesimo] = overflowWorkspace;
};
function initialize() {
web2d.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);
TextTest("100px", 100, "Test Text\nMultiline", "Arial", 10, "italic", "bold", "green", "text5", 5);
}
</script>
</head>
<body onload="initialize();">
<h1>Text Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
<col style="width:60%" />
</colgroup>
<tr>
<td>
Simple text
</td>
<td>
<div id="text0"></div>
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
<div id="text5"></div>
</td>
</tr>
<!--**************************************************************************-->
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+document.id('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

59
packages/web2d/test/playground/utils.js Executable file
View File

@ -0,0 +1,59 @@
/*
* Copyright [2015] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* 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.
*/
const 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 = $('<tr></tr>');
for (var j = 0; j < colums; j++) {
var tdElement = $('<td></td>');
tdElement.css({
width: cellSize,
height: cellSize,
borderWidth: '1px',
borderStyle: 'dashed',
borderColor: 'lightsteelblue',
});
trElement.append(tdElement);
}
tbody.append(trElement);
}
};
Grid.prototype.setPosition = function (x, y) {
this._container.style.left = x;
this._container.style.top = y;
};
Grid.prototype.render = function () {
$(this._parent).append(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;
};

328
packages/web2d/test/playground/workspace.html Executable file
View File

@ -0,0 +1,328 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
th,
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px");
var elipse1 = new web2d.Elipse();
elipse1.setSize(200, 200);
elipse1.setPosition(0, 0);
overflowWorkspace.append(elipse1);
overflowWorkspace.addItAsChildTo($('#overflowExample'));
var workspacePosition = function () {
var elipseAttr = { width: 100, height: 100, x: 100, y: 100 };
var divElem = $('#positionExample');
var workPosition = new web2d.Workspace();
workPosition.setSize("100px", "100px");
elipse = new web2d.Elipse(elipseAttr);
workPosition.append(elipse);
workPosition.addItAsChildTo(divElem);
var x = 100;
var executer = function () {
x = (x + 10) % 100;
divElem.css('left', x + "px");
};
//executer.periodical(100);
};
workspacePosition();
// Draw a reference grid.
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.append(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.append(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);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
return workspace;
};
var workspace100x100 = coordSizeSampleBuilder(100, 100);
workspace100x100.addItAsChildTo($("#coordsizeExample100x100"));
var workspace100x200 = coordSizeSampleBuilder(100, 200);
workspace100x200.addItAsChildTo($("#coordsizeExample100x200"));
var workspace200x100 = coordSizeSampleBuilder(200, 100);
workspace200x100.addItAsChildTo($("#coordsizeExample200x100"));
var dynamicWorkspace = coordSizeSampleBuilder(100, 100);
dynamicWorkspace.addItAsChildTo($('#coordsizeExampleDynamic'));
var size = 100;
var executer = function () {
size = (size + 1) % 100;
if (size < 30) {
size = 30;
}
dynamicWorkspace.setCoordSize(size, size);
};
//executer.periodical(100);
dynamicWorkspace.setCoordSize(size, size);
};
workspaceCoordSizeSample();
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.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.append(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>
</head>
<body onload="initialize();">
<h1>Workspace Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%">
<col style="width:60%">
</colgroup>
<tr>
<td>
The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
be
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>
<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>
<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>
<!--**************************************************************************-->
<tr>
<td>
Workspace coordorigin defines the coordinate at the top left corner of the containing block.
In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
<br />
1) Workspace with CoordOrigin(0,0)<br />
2) Workspace with CoordOrigin(0,50)<br />
3) Workspace with CoordOrigin(50,0)<br />
4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />
</td>
<td>
<div style="position:relative;width:100%;">
<div id="coordorigin0x0" style="float:left;margin:20px">
(1)
</div>
<div id="coordorigin0x50" style="float:left;margin:20px">
(2)
</div>
<div id="coordorigin50x0" style="float:left;margin:20px">
(3)
</div>
<div id="coordoriginExampleDynamic" style="float:left;margin:20px">
(4)
</div>
</div>
</td>
</tr>
</table>
</body>
</html>