iwmlib/lib/pixi/maps/utils.html

134 lines
4.1 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Utils</title>
<link rel='stylesheet' href='../iwmlib/lib/3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../iwmlib/lib/../css/doctest.css'>
<script src='../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
<script src='../iwmlib/lib/3rdparty/all.js'></script>
<script src='../iwmlib/lib/all.js'></script>
<script src='../iwmlib/lib/pixi/all.js'></script>
<script src="all.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>Utils</h1>
<p>Some utility functionalities for the Tuesch.</p>
<h2>Event Handler</h2>
<p>
The event handler class generalizes a common design principle in javascript. When an event occurs, that is of relevance for
other objects, then this event should be sent out to all objects, that are interested in that event. Objects interested
in that event, subscribe the event handler and get notified via a callback function.
</p>
<script class="doctest">
let result = []
function a() { result.push("a") }
function b() { result.push("b") }
function c() { result.push("c") }
function d() { result.push("d") }
function e() { result.push("e") }
function f() { result.push("f") }
//Init and call.
let eventHandler = new EventHandler("manual", { listeners: [a, b] })
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b"].join(","))
result = []
// Add single
eventHandler.add(c)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "c"].join(","))
result = []
// Add multiple
eventHandler.addMultiple(d, e, f)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "c", "d", "e", "f"].join(","))
result = []
//Remove inbetween
eventHandler.remove(c)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "d", "e", "f"].join(","))
result = []
// Remove first
eventHandler.remove(a)
eventHandler.call()
Doctest.expect(result.join(","), ["b", "d", "e", "f"].join(","))
result = []
// Remove all remaining elements.
eventHandler.empty()
eventHandler.call()
Doctest.expect(result.join(","), [].join(","))
result = []
</script>
<h2>DomUtils</h2>
Utility functions that help handling the DOM.
<h3>positionOnElement(element, position)</h3>
Function that returns the global position for a normalized position.
<div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>
<script class="doctest">
let target = document.getElementById("positionOnElementBox")
window.addEventListener("load", () => {
let positions = [
[0, 0],
[0, 1],
[1, 0],
[0.5,0.5],
[0.2, 0.2],
[0.2, 0.8],
[0.8, 0.2],
[0.8, 0.8],
]
positions.forEach(position => {
position = { x: position[0], y: position[1] }
let transformedPosition = DomUtils.positionOnElement(target, position)
let dot = document.createElement("div");
const size = 10;
Object.assign(dot.style, {
width: size + "px",
height: size + "px",
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y -size/2+ "px",
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x -size/2 + "px",
position: "absolute",
backgroundColor: "green",
borderRadius: "50%"
})
document.body.appendChild(dot)
})
})
</script>
</body>
</html>