var grid = new photonui.GridLayout();
var eventLabel = new photonui.Label({text: "Event: -"});
var positionLabel = new photonui.Label({text: "Position: (0, 0)", textAlign: "right"});
var canvas = new photonui.Canvas({width: 300, height: 200});
grid.addChild(eventLabel, {gridX: 0, gridY: 0});
grid.addChild(positionLabel, {gridX: 1, gridY: 0});
grid.addChild(canvas, {gridX: 0, gridY: 1, gridWidth: 2});
canvas.html.style.border = "silver solid 1px";
photonui.domInsert(grid, "demo");
var mouse = new photonui.MouseManager(canvas);
var x = 0;
var y = 0;
mouse.registerCallback("any-event", "mouse-event", function(manager, mstate) {
mstate.action == "mouse-move" || (eventLabel.text = "Event: " + mstate.action);
positionLabel.text = "Position: (" + mstate.x + ", " + mstate.y + ")";
});
mouse.registerCallback("click", "click", function(manager, mstate) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "#07656D";
ctx.beginPath();
ctx.arc(mstate.x, mstate.y, 10, 0, 2*Math.PI);
ctx.stroke();
});
mouse.registerCallback("double-click", "double-click", function(manager, mstate) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "#DB624F";
ctx.beginPath();
ctx.arc(mstate.x, mstate.y, 10, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(mstate.x, mstate.y, 15, 0, 2*Math.PI);
ctx.stroke();
});
mouse.registerCallback("drag-start", "drag-start", function(manager, mstate) {
x = mstate.x;
y = mstate.y;
});
mouse.registerCallback("dragging", "dragging", function(manager, mstate) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "#07656D";
ctx.strokeRect(x, y, mstate.x-x, mstate.y-y);
});
mouse.registerCallback("drag-end", "drag-end", function(manager, mstate) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "#07656D";
ctx.fillStyle = "rgba(7, 101, 109, 0.2)";
ctx.fillRect(x, y, mstate.x-x, mstate.y-y);
ctx.strokeRect(x, y, mstate.x-x, mstate.y-y);
});