mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-30 01:24:55 +01:00
273 lines
12 KiB
HTML
273 lines
12 KiB
HTML
|
<!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>
|
||
|
|
<script type="text/javascript">
|
||
|
|
web2d = {
|
||
|
|
peer: {}
|
||
|
|
};
|
||
|
|
|
||
|
|
web2d.peer =
|
||
|
|
{
|
||
|
|
svg: {}
|
||
|
|
};
|
||
|
|
|
||
|
|
web2d.peer.utils = {};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<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.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();">
|
||
|
|
|
||
|
|
<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').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>
|