vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-10 01:13:22 +01:00
Code Issues Packages Projects Releases Wiki Activity
a527404aa2
wisemapping-open-source/web2d/src/test/javascript/render/events.html

309 lines
14 KiB
HTML
Raw Normal View History

WiseMapping
2009-06-07 20:59:43 +02:00
<!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>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
removing VML support from client side
2011-03-16 12:40:48 +01:00
svg: {}
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
};
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/EventDispatcher.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
WiseMapping
2009-06-07 20:59:43 +02:00
<script type="text/javascript" src="utils.js"></script>
<style type="text/css">
.eventForm {
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
function EventLogger(type, element)
{
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger(event)
{
var oldColor = this.getAttribute('fillColor');
this.setFill("yellow");
alert("Event on:" + this.getType() + ", Type:" + type);
this.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function()
{
this._enable = !this._enable;
if (this._enable)
{
this._element.addEventListener(this._type, this._listener);
} else
{
this._element.removeEventListener(this._type, this._listener);
}
return this._enable;
};
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
function MultipleEventHandler(type, element)
{
this._listeners = [];
this._type = type;
this._element = element;
}
MultipleEventHandler.prototype.registerOneListener = function()
{
var count = this._listeners.length;
var listener = function(event) {
alert("Listener #:" + count);
};
this._listeners.push(listener);
this._element.addEventListener(this._type, listener);
}
MultipleEventHandler.prototype.listenerCount = function()
{
return this._listeners.length;
}
MultipleEventHandler.prototype.unRegisterOneListener = function()
{
if (this._listeners.length > 0)
{
var listener = this._listeners.pop();
this._element.removeEventListener(this._type, listener);
}
}
function initialize(){
web2d.peer.Toolkit.init();
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(150, 150);
var bigElipse = new web2d.Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.appendChild(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.appendChild(smallElipse);
wClickEventLogger = new EventLogger('click', workspace);
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
wDblCickEventLogger = new EventLogger('dblclick', workspace);
esClickEventLogger = new EventLogger('click', smallElipse);
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
ebClickEventLogger = new EventLogger('click', bigElipse);
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo($("workspaceContainer"));
var mEventWorkspace = new web2d.Workspace();
mEventWorkspace.setSize("150px", "150px");
mEventWorkspace.setCoordSize(150, 150);
var elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue')
mEventWorkspace.appendChild(elipse);
mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
multipleHandler = new MultipleEventHandler('click', elipse);
}
WiseMapping
2009-06-07 20:59:43 +02:00
</script>
</head>
Adding Chrome, Safari and IE9 support
2010-11-20 23:43:54 +01:00
<body onload="initialize();">
WiseMapping
2009-06-07 20:59:43 +02:00
<script type="text/javascript">
// Logger.setEnabled(true);
</script>
<h1>Elements Event Handling</h1>
<table border="1">
<colgroup style="width:80%;">
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<tbody>
<tr>
<td>
This examples shows the ability to attach listeners to handle several events.
In this example, you can attach different events to three elements: workspace, small elipse and the big elipse.
Events will follow the event bubbling behaviour.
</td>
<td>
<div id="workspaceContainer" style="float:left;"></div>
<div class="eventForm">
<form action="">
<fieldset>
<legend>Workspace Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!wClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!wDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!wMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!wMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!wMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>Small Elipse Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!esClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!esDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!esMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!esMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!esMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>Big Elipse Events</legend>
<label>Click Event:
<input type="button" value="Register"
onclick="(!ebClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Double Click Event:
<input type="button" value="Register"
onclick="(!ebDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Over Event:
<input type="button" value="Register"
onclick="(!ebMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Out Event:
<input type="button" value="Register"
onclick="(!ebMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label><br/>
<label>Mouse Move Event:
<input type="button" value="Register"
onclick="(!ebMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
</label>
</fieldset>
</form>
</div>
</td>
</tr>
<tr>
<td>Multiple listeners can be attached to an element to handle an event type.
In this example, multiple listeners can be registered to the elipse element to handle the click event type.
</td>
<td>
<div id="workspaceMultipleEvents" style="float:left;"></div>
<div class="eventForm">
<form action="">
<fieldset>
<legend>Elipse Click Events Listeners</legend>
<label>Registered Listeners #:
<input type="text" disabled="disabled" value="0" id="listenerCounter" maxlength="2" size="2"/>
</label>
<br/>
<input type="button" value="Register Listener"
onclick="multipleHandler.registerOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
<input type="button" value="UnRegister Listener"
onclick="multipleHandler.unRegisterOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
</fieldset>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Reference in New Issue Copy Permalink