Skip to content

Graphics: fix #321 #1206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 6, 2022
Merged

Graphics: fix #321 #1206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
* Compiler: fix `--wrap-with-fun` under node (#653, #1171)
* Ppx: allow apostrophe in lident (fix #1183) (#1192)
* Runtime: fix float parsing in hexadecimal form
* Graphics: fix mouse_{x,y} (#1206)

# 3.11.0 (2021-10-06) - Lille

Expand Down
10 changes: 10 additions & 0 deletions examples/graphics/dune
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
(executable
(name main)
(modes js)
(libraries js_of_ocaml-lwt.graphics)
(preprocess
(pps js_of_ocaml-ppx)))

(alias
(name default)
(deps main.bc.js index.html))
28 changes: 28 additions & 0 deletions examples/graphics/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Graphics_js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="main.bc.js"></script>
<style type="text/css">
html {
height: 110%;
background-color: #aaa
}
body {
min-height: 110%;
}
canvas {
background-color: #aaa333
</style>
</head>
<body>
<canvas id="canvas" width=400 height=400 style="width:800px;height:800px" />
<script type="text/javascript">
var c = document.getElementById("canvas");
init(c);
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions examples/graphics/main.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
open Js_of_ocaml
open Graphics_js

let init canvas =
print_endline "initializing";
let () = open_canvas canvas in
let () =
Graphics_js.loop [ Graphics_js.Button_down ] (fun s ->
Graphics_js.draw_rect (s.mouse_x - 5) (s.mouse_y - 5) 10 10)
in
()

let () = Js.export "init" init
33 changes: 16 additions & 17 deletions lib/lwt/graphics/graphics_js.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,25 +46,24 @@ let open_canvas x =
let ctx = create_context x x##.width x##.height in
set_context ctx

let compute_real_pos (elt : #Dom_html.element Js.t) =
let rec loop elt left top =
let top = elt##.offsetTop - elt##.scrollTop + top
and left = elt##.offsetLeft - elt##.scrollLeft + left in
match Js.Opt.to_option elt##.offsetParent with
| None -> top, left
| Some p -> loop p left top
let compute_real_pos (elt : #Dom_html.element Js.t) ev =
let r = elt##getBoundingClientRect in
let x =
(float_of_int ev##.clientX -. r##.left)
/. (r##.right -. r##.left)
*. float_of_int elt##.width
in
loop elt 0 0
let y =
(float_of_int ev##.clientY -. r##.top)
/. (r##.bottom -. r##.top)
*. float_of_int elt##.height
in
truncate x, elt##.height - truncate y

let mouse_pos () =
let ctx = get_context () in
let elt = ctx##.canvas in
Lwt_js_events.mousemove elt
>>= fun ev ->
let top, left = compute_real_pos (elt :> Dom_html.element Js.t) in
Lwt.return
( Js.Optdef.get ev##.pageX (fun _ -> 0) - left
, elt##.height - (Js.Optdef.get ev##.pageY (fun _ -> 0) - top) )
Lwt_js_events.mousemove elt >>= fun ev -> Lwt.return (compute_real_pos elt ev)

let button_down () =
let ctx = get_context () in
Expand Down Expand Up @@ -105,9 +104,9 @@ let loop elist f : unit =
Js._true);
elt##.onmousemove :=
Dom_html.handler (fun ev ->
let cy, cx = compute_real_pos (elt :> Dom_html.element Js.t) in
mouse_x := Js.Optdef.get ev##.pageX (fun _ -> 0) - cx;
mouse_y := elt##.height - (Js.Optdef.get ev##.pageY (fun _ -> 0) - cy);
let cx, cy = compute_real_pos (elt :> #Dom_html.element Js.t) ev in
mouse_x := cx;
mouse_y := cy;
(if List.mem Mouse_motion elist
then
let mouse_x, mouse_y = get_pos_mouse () in
Expand Down