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

Reduce Mootools components.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2014-03-04 20:47:23 -03:00
parent 43d1308f74
commit d3087a6626
50 changed files with 10255 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web2d/src/test/javascript/render/arrow.html
View File

@@ -63,15 +63,15 @@
arrow.setFrom(50,50);
arrow.setControlPoint(new core.Point(-50,0));
overflowWorkspace.appendChild(arrow);
overflowWorkspace.append(arrow);
var arrow2 = new web2d.Arrow();
arrow2.setFrom(100,50);
arrow2.setControlPoint(new core.Point(50,50));
overflowWorkspace.appendChild(arrow2);
overflowWorkspace.append(arrow2);
overflowWorkspace.addItAsChildTo(document.id("overflowExample"));
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>

8
web2d/src/test/javascript/render/curvedLine.html
View File

@@ -20,6 +20,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -61,7 +63,7 @@
line1.setTo(100, 100);
line1.setSrcControlPoint(new core.Point(-100, 0));
line1.setDestControlPoint(new core.Point(100, 0));
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line2 = new web2d.CurvedLine();
line2.setStyle(web2d.CurvedLine.NICE_LINE);
@@ -69,9 +71,9 @@
line2.setTo(150, 90);
line2.setSrcControlPoint(new core.Point(100, 0));
line2.setDestControlPoint(new core.Point(-100, 0));
overflowWorkspace.appendChild(line2);
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo(document.id("overflowExample"));
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>

318
web2d/src/test/javascript/render/events.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -53,13 +55,11 @@
<script type="text/javascript">
function EventLogger(type, element)
{
function EventLogger(type, element) {
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger(event)
{
this._listener = function logger(event) {
var oldColor = this.getAttribute('fillColor');
this.setFill("yellow");
alert("Event on:" + this.getType() + ", Type:" + type);
@@ -67,52 +67,44 @@
};
}
EventLogger.prototype.changeState = function()
{
EventLogger.prototype.changeState = function () {
this._enable = !this._enable;
if (this._enable)
{
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else
{
} else {
this._element.removeEvent(this._type, this._listener);
}
return this._enable;
};
function MultipleEventHandler(type, element)
{
this._listeners = [];
this._type = type;
this._element = element;
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);
}
}
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(){
function initialize() {
web2d.peer.Toolkit.init();
// Workspace with CoordOrigin(100,100);
@@ -123,13 +115,13 @@
var bigElipse = new web2d.Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.appendChild(bigElipse);
workspace.append(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.appendChild(smallElipse);
workspace.append(smallElipse);
wClickEventLogger = new EventLogger('click', workspace);
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
@@ -149,7 +141,7 @@
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo(document.id("workspaceContainer"));
workspace.addItAsChildTo($('#workspaceContainer').first());
var mEventWorkspace = new web2d.Workspace();
mEventWorkspace.setSize("150px", "150px");
@@ -159,9 +151,9 @@
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue')
mEventWorkspace.appendChild(elipse);
mEventWorkspace.append(elipse);
mEventWorkspace.addItAsChildTo(document.id("workspaceMultipleEvents"));
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
multipleHandler = new MultipleEventHandler('click', elipse);
}
@@ -177,131 +169,133 @@
<h1>Elements Event Handling</h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tbody>
<tr>
<td>
This examples shows the ability to attach listeners to handle several events.
In this example, you can attach different events to three elements: workspace, small elipse and the big elipse.
Events will follow the event bubbling behaviour.
</td>
<td>
<div id="workspaceContainer" style="float:left;"></div>
<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>
<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>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>
<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>
</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>
</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();document.id('listenerCounter').value=multipleHandler.listenerCount();"/>
<input type="button" value="UnRegister Listener"
onclick="multipleHandler.unRegisterOneListener();document.id('listenerCounter').value=multipleHandler.listenerCount();"/>
</fieldset>
<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>
</form>
</div>
</td>
</tr>
</tbody>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

7
web2d/src/test/javascript/render/font.html
View File

@@ -16,6 +16,9 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -52,7 +55,7 @@
[6,8,10,15].forEach(function(size, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
@@ -71,7 +74,7 @@
['center','left','right'].forEach(function(align, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');

56
web2d/src/test/javascript/render/group.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -58,24 +60,24 @@
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.appendChild(group);
workspace.append(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.appendChild(elipse);
group.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.appendChild(line);
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.appendChild(line);
group.append(line);
workspace.addItAsChildTo(document.id("groupBasicContainer"));
@@ -119,17 +121,17 @@
var groupAttributes = {width:50,height:50,x:25,y:50,coordSize:'200 200',coordOrigin:'0 0'};
var group = new web2d.Group(groupAttributes);
workspace.appendChild(group);
workspace.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.appendChild(elipseLeft);
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.appendChild(elipseRight);
group.append(elipseRight);
var listener = function(e) {
alert("Click event on:" + this.getType())
@@ -154,49 +156,49 @@
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0)
workspace.appendChild(groupOuter);
workspace.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.appendChild(elipseOuter);
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.appendChild(line);
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.appendChild(line);
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.appendChild(groupInner);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.appendChild(elipse);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.appendChild(line);
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.appendChild(line);
groupInner.append(line);
workspace.addItAsChildTo(document.id("groupNestedContainer"));
};
@@ -216,19 +218,19 @@
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.appendChild(elipseOuter);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.appendChild(group);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.appendChild(elipseInner);
group.append(elipseInner);
return workspace;
}
@@ -257,20 +259,20 @@
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.appendChild(elipseOuter);
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.appendChild(group);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.appendChild(elipseInner);
group.append(elipseInner);
return workspace;
}
@@ -303,7 +305,7 @@
group.addEvent("mouseover", function() {
alert("Mouse Over Group");
});
workspace.appendChild(group);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
@@ -311,13 +313,13 @@
group.addEvent("mouseover", function() {
alert("Mouse Over elipseOuter");
});
group.appendChild(elipseOuter);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.appendChild(elipseInner);
group.append(elipseInner);
var isVisible = true;
var executer = function()
@@ -342,18 +344,18 @@
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.appendChild(group);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.appendChild(elipseOuter);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.appendChild(elipseInner);
group.append(elipseInner);
var width = 10;
var height = 10;

14
web2d/src/test/javascript/render/line.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -53,16 +55,16 @@
rect.setSize(10, 10);
rect.setStroke(0);
rect.setPosition(250, 5);
strokeWidthWorkspace.appendChild(rect);
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.appendChild(line);
strokeWidthWorkspace.append(line);
}
strokeWidthWorkspace.appendChild(rect);
strokeWidthWorkspace.append(rect);
strokeWidthWorkspace.addItAsChildTo(document.id("strokeWidthSample"));
@@ -74,7 +76,7 @@
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeOpacity', 1 / (i + 1));
line.setAttribute('strokeColor', 'red');
strokeOpacityWorkspace.appendChild(line);
strokeOpacityWorkspace.append(line);
}
strokeOpacityWorkspace.addItAsChildTo(document.id("strokeOpacitySample"));
@@ -87,7 +89,7 @@
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setAttribute('strokeStyle', styles[i]);
strokeStyleWorkspace.appendChild(line);
strokeStyleWorkspace.append(line);
}
strokeStyleWorkspace.addItAsChildTo(document.id("strokeStyleSample"));
@@ -100,7 +102,7 @@
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles[i]);
strokeArrowWorkspace.appendChild(line);
strokeArrowWorkspace.append(line);
}
strokeArrowWorkspace.addItAsChildTo(document.id("strokeArrowSample"));
}

30
web2d/src/test/javascript/render/polyLine.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -55,7 +57,7 @@
line.setFrom(95, 95);
line.setStyle("Straight");
line.setStroke('10');
overflowWorkspace.appendChild(line);
overflowWorkspace.append(line);
// line.setTo(165, 165);
@@ -98,32 +100,32 @@
// var line = new web2d.PolyLine();
// line.setFrom(95, 90);
// line.setTo(160, 20);
// overflowWorkspace.appendChild(line);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setStyle("Straight");
// line.setFrom(90, -90);
// line.setTo(20, 20);
// overflowWorkspace.appendChild(line);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(line);
// overflowWorkspace.append(line);
//
// // Reference ...
// var refLine = new web2d.Line();
// refLine.setFrom(95, 0);
// refLine.setTo(95, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(refLine);
// overflowWorkspace.append(refLine);
//
// var refLine = new web2d.Line();
// refLine.setFrom(165, 0);
// refLine.setTo(165, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.appendChild(refLine);
// overflowWorkspace.append(refLine);
//
overflowWorkspace.addItAsChildTo(document.id("overflowExample"));
@@ -135,45 +137,45 @@
line1.setFrom(95, 95);
line1.setTo(165, 165);
line1.setStyle("Curved");
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle("Curved");
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle("Straight");
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle("Straight");
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.appendChild(line1);
overflowWorkspace.append(line1);
overflowWorkspace.addItAsChildTo(document.id("multipleLineExample"));
}

14
web2d/src/test/javascript/render/prototype.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -63,7 +65,7 @@
centralRect.setPosition(300, 300);
centralRect.setFill("#99ccff");
centralRect.setStroke(1, 'solid', "#878b8f");
workspace.appendChild(centralRect);
workspace.append(centralRect);
workspace.addItAsChildTo(document.id("divWorkspace"));
}
@@ -93,17 +95,17 @@
outerRect.setPosition(0, 0);
outerRect.setFill("#3e9eff");
outerRect.setStroke(1, 'solid', "#878b8f");
nodeGroup.appendChild(outerRect);
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.appendChild(inerRect);
nodeGroup.append(inerRect);
nodeGroup._drag = false;
workspace.appendChild(nodeGroup);
workspace.append(nodeGroup);
// Add behaviour ...
inerRect.addEvent("mouseover", function() {
@@ -128,9 +130,9 @@
shadowRect.setPosition(5, 10);
shadowRect.setFill("white", 0.3);
shadowRect.setStroke(1, 'dash', '#878b8f');
shadowGroup.appendChild(shadowRect);
shadowGroup.append(shadowRect);
workspace.appendChild(shadowGroup);
workspace.append(shadowGroup);
this._shadowGroup = shadowGroup;
if (!this._moveFunction) {

6
web2d/src/test/javascript/render/rect.html
View File

@@ -17,6 +17,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -57,7 +59,7 @@
var rect = new web2d.Rect();
rect.setPosition(20, 20);
workspace.appendChild(rect);
workspace.append(rect);
workspace.addItAsChildTo(document.id("rectExample"));
}
rectExampleTest();
@@ -68,7 +70,7 @@
var rect = new web2d.Rect(i / 10);
rect.setPosition(x, ((i - 1) * (50 + 5)));
rect.setSize(width, height);
container.appendChild(rect);
container.append(rect);
}
}

58
web2d/src/test/javascript/render/shapes.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -58,7 +60,7 @@ function initialize() {
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(1, 'solid', 'black');
parent.appendChild(rect);
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
@@ -66,7 +68,7 @@ function initialize() {
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dot', 'black');
parent.appendChild(rect);
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
@@ -74,7 +76,7 @@ function initialize() {
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dash', 'black');
parent.appendChild(rect);
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
@@ -82,7 +84,7 @@ function initialize() {
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'longdash', 'black');
parent.appendChild(rect);
parent.append(rect);
xPosition = xPosition + 90 * scale;
rect = new web2d.Rect();
@@ -90,7 +92,7 @@ function initialize() {
rect.setPosition(xPosition, yPosition);
rect.setFill('yellow');
rect.setStroke(strokeWidth, 'dashdot', 'black');
parent.appendChild(rect);
parent.append(rect);
}
// Workspace with default scale ...
@@ -99,7 +101,7 @@ function initialize() {
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 1);
workspace.addItAsChildTo(document.id("strokeStyle"));
workspace.addItAsChildTo($('#strokeStyle'));
// Workspace with modified scale ...
workspace = new web2d.Workspace();
@@ -107,7 +109,7 @@ function initialize() {
workspace.setCoordSize(5000, 1000);
workspace.setCoordOrigin(0, 0);
builder(workspace, 10, 1);
workspace.addItAsChildTo(document.id("strokeStyleGroup"));
workspace.addItAsChildTo($('#strokeStyleGroup'));
// Workspace with default scale ...
workspace = new web2d.Workspace();
@@ -115,7 +117,7 @@ function initialize() {
workspace.setCoordSize(500, 100);
workspace.setCoordOrigin(0, 0);
builder(workspace, 1, 5);
workspace.addItAsChildTo(document.id("strokeStyleWidth"));
workspace.addItAsChildTo($('#strokeStyleWidth'));
};
@@ -129,30 +131,30 @@ function initialize() {
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);
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.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("strokeOpacity", 0.5);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("strokeOpacity", 0.3);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("strokeOpacity", 0);
workspace.appendChild(rect);
workspace.append(rect);
workspace.addItAsChildTo(document.id("strokeOpacity"));
workspace.addItAsChildTo($('#strokeOpacity'));
};
strokeOpacityTest();
@@ -165,30 +167,30 @@ function initialize() {
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);
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.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setAttribute("fillOpacity", 0.5);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setAttribute("fillOpacity", 0.3);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setAttribute("fillOpacity", 0);
workspace.appendChild(rect);
workspace.append(rect);
workspace.addItAsChildTo(document.id("fillOpacity"));
workspace.addItAsChildTo($('#fillOpacity'));
};
fillOpacityTest();
@@ -201,30 +203,30 @@ function initialize() {
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);
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.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(120, 20);
rect.setOpacity(0.5);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(220, 20);
rect.setOpacity(0.3);
workspace.appendChild(rect);
workspace.append(rect);
rect = new web2d.Rect(0, rectAttributes);
rect.setPosition(320, 20);
rect.setOpacity(0);
workspace.appendChild(rect);
workspace.append(rect);
workspace.addItAsChildTo(document.id("opacity"));
workspace.addItAsChildTo($('#opacity'));
};
opacityTest();
@@ -238,7 +240,7 @@ function initialize() {
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);
workspace.append(rect);
rect.addEvent("mouseover", function() {
alert("Mouse Over");
});
@@ -250,7 +252,7 @@ function initialize() {
};
executer.periodical(100);
workspace.addItAsChildTo(document.id("visibility"));
workspace.addItAsChildTo($('#visibility'));
};
visibilityTest();
}

8
web2d/src/test/javascript/render/text.html
View File

@@ -16,6 +16,8 @@
</script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -60,7 +62,7 @@
overflowWorkspace.setCoordOrigin(0, 0);
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
overflowWorkspace.append(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
@@ -77,11 +79,11 @@
var textsize = text.offsetWidth;
var textHtml = document.createTextNode(textsize);
var fontSize = text.getHtmlFontSize();
span.appendChild(textHtml);
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.appendChild(span);
parent.append(span);
workspaces[iesimo] = overflowWorkspace;
};

6
web2d/src/test/javascript/render/utils.js
View File

@@ -33,9 +33,9 @@ Grid = function(parent, colums, rows)
tdElement.style.borderWidth = "1px";
tdElement.style.borderStyle = "dashed";
tdElement.style.borderColor = "lightsteelblue";
trElement.appendChild(tdElement);
trElement.append(tdElement);
}
tbody.appendChild(trElement);
tbody.append(trElement);
}
};
@@ -47,7 +47,7 @@ Grid.prototype.setPosition = function(x, y)
Grid.prototype.render = function()
{
this._parent.appendChild(this._container);
this._parent.append(this._container);
};
Grid.prototype._createContainer = function()

53
web2d/src/test/javascript/render/workspace.html
View File

@@ -16,8 +16,9 @@
web2d.peer.utils = {};
</script>
<script type="text/javascript"
src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../mootools-core-1.4.5.js"></script>
<script type="text/javascript" src="../jquery-2.1.0.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>
@@ -54,23 +55,23 @@
var elipse1 = new web2d.Elipse();
elipse1.setSize(200, 200);
elipse1.setPosition(0, 0);
overflowWorkspace.appendChild(elipse1);
overflowWorkspace.append(elipse1);
overflowWorkspace.addItAsChildTo(document.id("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 = document.id("positionExample");
var workPosition = new web2d.Workspace();
workPosition.setSize("100px", "100px");
elipse = new web2d.Elipse(elipseAttr);
workPosition.appendChild(elipse);
workPosition.append(elipse);
workPosition.addItAsChildTo(divElem);
var x = 100;
var executer = function() {
var executer = function () {
x = (x + 10) % 100;
divElem.style.left = x + "px";
};
@@ -92,7 +93,7 @@
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspacePixel.appendChild(elipse);
workspacePixel.append(elipse);
workspacePixel.addItAsChildTo(document.id("sizeExamplePixels"));
var workspaceInchs = new web2d.Workspace();
@@ -101,36 +102,36 @@
elipse.setSize(100, 100);
elipse.setPosition(100, 100);
workspaceInchs.appendChild(elipse);
workspaceInchs.append(elipse);
workspaceInchs.addItAsChildTo(document.id("sizeExampleInch"));
var workspaceCoordSizeSample = function() {
var workspaceCoordSizeSample = function () {
// Workspace with CoordSize(100,100);
var coordSizeSampleBuilder = function(width, height) {
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);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(elipse);
workspace.append(elipse);
return workspace;
};
@@ -147,7 +148,7 @@
dynamicWorkspace.addItAsChildTo(document.id("coordsizeExampleDynamic"));
var size = 100;
var executer = function() {
var executer = function () {
size = (size + 1) % 100;
if (size < 30) {
size = 30;
@@ -162,9 +163,9 @@
workspaceCoordSizeSample();
var workspaceCoordOriginSample = function() {
var workspaceCoordOriginSample = function () {
var coordOriginSampleBuilder = function(x, y) {
var coordOriginSampleBuilder = function (x, y) {
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
@@ -173,27 +174,27 @@
elipse = new web2d.Elipse();
elipse.setPosition(0, 0);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(0, 100);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 0);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(50, 50);
workspace.appendChild(elipse);
workspace.append(elipse);
elipse = new web2d.Elipse();
elipse.setPosition(100, 100);
workspace.appendChild(elipse);
workspace.append(elipse);
return workspace;
};
@@ -213,7 +214,7 @@
var x = 50;
var y = 50;
executer = function() {
executer = function () {
x = (x + 1) % 50;
y = (y + 1) % 50;