PhotonUI logo

PhotonUI

A javascript framework to create user interfaces

MouseManager

photonui.MouseManager allows you to add interactivity to a visual widget (like photonui.Canvas).

Class Reference

More examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// --- UI ---

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");

// --- Mouse Manager ---

var mouse = new photonui.MouseManager(canvas);
var x = 0;
var y = 0;

// Update the event name and mouse position for each event
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 + ")";

    // Uncomment to display the complete log on the console
    // mstate.action == "mouse-move" || console.log(mstate.action);
});

// Click
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();
});

// Double Click
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();
});

// Drag Start
mouse.registerCallback("drag-start", "drag-start", function(manager, mstate) {
    x = mstate.x;
    y = mstate.y;
});

// Dragging
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);
});

// Drag End
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);
});