vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-26 16:14:56 +01:00
Code Issues Packages Projects Releases Wiki Activity
63f8ad7555
wisemapping-frontend/packages/web2d/test/playground/events.html

277 lines
12 KiB
HTML
Raw Normal View History

Web2d module migration
2021-07-16 16:41:58 +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">
Fix tests
2021-10-03 02:10:21 +02:00
Web2d module migration
2021-07-16 16:41:58 +02:00
<head>
Format test files.
2021-10-03 02:23:32 +02:00
<style>
th,
td {
border: 1px solid black;
}
</style>
Web2d module migration
2021-07-16 16:41:58 +02:00
<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) {
Fix tests
2021-10-03 02:10:21 +02:00
var oldColor = element.getAttribute('fillColor');
element.setFill("yellow");
Format test files.
2021-10-03 02:23:32 +02:00
Fix tests
2021-10-03 02:10:21 +02:00
alert("Event on:" + element.getType() + ", Type:" + type);
element.setFill(oldColor);
Web2d module migration
2021-07-16 16:41:58 +02:00
};
}
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 () {
Fix tests
2021-10-03 02:10:21 +02:00
return this._listeners.length;
Web2d module migration
2021-07-16 16:41:58 +02:00
}
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();">
Fix tests
2021-10-03 02:10:21 +02:00
<h1>Elements Event Handling</h1>
Format test files.
2021-10-03 02:23:32 +02:00
<table>
Fix tests
2021-10-03 02:10:21 +02:00
<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>
Web2d module migration
2021-07-16 16:41:58 +02:00
</body>
Fix tests
2021-10-03 02:10:21 +02:00
Merged in web2d-coreJS-solutions (pull request #5) Core-js, web2d and mindplot working baseline * fix .eslintignore remove Raphael dependency * Fix to avoid crashes in _plotPrediction whitout Raphael * Fix minplot basic code inspections * Fix last inspections errors * Inital refactor copying files * Clean up. * Fix web2d cyclic dependencies remove only-warn eslint plugin set import/no-extraneous-dependencies to warn (incorrectly complaining about root package) * Fix web2d Point references (no need to assign it to core) Fix web2d imports in mindplot and update Point refs * Merge 'feature/mindplot_tests' into web2d-coreJS-solutions * mindplot fixes and add viewmode.html playground setup playground config to run the map-render examples fix mindplot components export mootools Static was not working so refactored it fix some references to _peer fix messages __bundle undefined add web2d missing export: Image downgrade cypress to avoid SIGSEGV error Approved-by: Paulo Veiga
2021-12-02 01:41:56 +01:00
</html>
Reference in New Issue Copy Permalink