ebiten/internal/uidriver/js/ui.go

438 lines
11 KiB
Go
Raw Normal View History

2015-01-02 07:20:05 +01:00
// Copyright 2015 Hajime Hoshi
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// +build js
package js
2015-01-02 07:20:05 +01:00
import (
2017-09-22 21:12:02 +02:00
"image"
"log"
"runtime"
2015-01-05 14:22:47 +01:00
"strconv"
2016-02-20 18:15:14 +01:00
2018-06-24 09:10:24 +02:00
"github.com/gopherjs/gopherwasm/js"
2018-01-02 21:22:56 +01:00
"github.com/hajimehoshi/ebiten/internal/devicescale"
"github.com/hajimehoshi/ebiten/internal/driver"
"github.com/hajimehoshi/ebiten/internal/hooks"
2015-01-02 07:20:05 +01:00
)
2018-05-26 18:59:35 +02:00
var canvas js.Value
2015-01-02 07:20:05 +01:00
type UserInterface struct {
width int
height int
scale float64
fullscreen bool
runnableInBackground bool
vsync bool
sizeChanged bool
windowFocus bool
pageVisible bool
contextLost bool
lastActualScale float64
2019-04-06 16:03:21 +02:00
input Input
2016-03-24 17:15:47 +01:00
}
2016-03-24 16:38:30 +01:00
var theUI = &UserInterface{
sizeChanged: true,
windowFocus: true,
pageVisible: true,
vsync: true,
}
2019-04-07 12:27:30 +02:00
func init() {
theUI.input.ui = theUI
}
func Get() *UserInterface {
return theUI
}
var (
window = js.Global().Get("window")
document = js.Global().Get("document")
requestAnimationFrame = window.Get("requestAnimationFrame")
2018-07-14 16:47:31 +02:00
setTimeout = window.Get("setTimeout")
)
func (u *UserInterface) ScreenSizeInFullscreen() (int, int) {
return window.Get("innerWidth").Int(), window.Get("innerHeight").Int()
2018-05-04 09:09:55 +02:00
}
func (u *UserInterface) SetScreenSize(width, height int) {
u.setScreenSize(width, height, u.scale, u.fullscreen)
}
func (u *UserInterface) SetScreenScale(scale float64) {
u.setScreenSize(u.width, u.height, scale, u.fullscreen)
}
func (u *UserInterface) ScreenScale() float64 {
return u.scale
}
func (u *UserInterface) SetFullscreen(fullscreen bool) {
u.setScreenSize(u.width, u.height, u.scale, fullscreen)
}
func (u *UserInterface) IsFullscreen() bool {
return u.fullscreen
}
func (u *UserInterface) SetRunnableInBackground(runnableInBackground bool) {
u.runnableInBackground = runnableInBackground
}
func (u *UserInterface) IsRunnableInBackground() bool {
return u.runnableInBackground
}
func (u *UserInterface) SetVsyncEnabled(enabled bool) {
u.vsync = enabled
}
func (u *UserInterface) IsVsyncEnabled() bool {
return u.vsync
}
func (u *UserInterface) ScreenPadding() (x0, y0, x1, y1 float64) {
return 0, 0, 0, 0
}
2019-04-07 12:27:30 +02:00
func (u *UserInterface) adjustPosition(x, y int) (int, int) {
rect := canvas.Call("getBoundingClientRect")
x -= rect.Get("left").Int()
y -= rect.Get("top").Int()
scale := u.getScale()
return int(float64(x) / scale), int(float64(y) / scale)
}
func (u *UserInterface) IsCursorVisible() bool {
2017-08-12 08:39:41 +02:00
// The initial value is an empty string, so don't compare with "auto" here.
return canvas.Get("style").Get("cursor").String() != "none"
}
func (u *UserInterface) SetCursorVisible(visible bool) {
if visible {
2016-09-03 10:17:54 +02:00
canvas.Get("style").Set("cursor", "auto")
} else {
canvas.Get("style").Set("cursor", "none")
}
}
func (u *UserInterface) SetWindowTitle(title string) {
document.Set("title", title)
2018-05-02 12:09:03 +02:00
}
func (u *UserInterface) SetWindowIcon(iconImages []image.Image) {
2017-09-22 21:12:02 +02:00
// Do nothing
}
func (u *UserInterface) IsWindowDecorated() bool {
return false
}
func (u *UserInterface) SetWindowDecorated(decorated bool) {
// Do nothing
}
func (u *UserInterface) IsWindowResizable() bool {
return false
}
func (u *UserInterface) SetWindowResizable(decorated bool) {
// Do nothing
}
func (u *UserInterface) DeviceScaleFactor() float64 {
return devicescale.GetAt(0, 0)
}
func (u *UserInterface) getScale() float64 {
if !u.fullscreen {
return u.scale
}
body := document.Get("body")
bw := body.Get("clientWidth").Float()
bh := body.Get("clientHeight").Float()
sw := bw / float64(u.width)
sh := bh / float64(u.height)
if sw > sh {
return sh
}
return sw
}
func (u *UserInterface) actualScreenScale() float64 {
// CSS imageRendering property seems useful to enlarge the screen,
// but doesn't work in some cases (#306):
// * Chrome just after restoring the lost context
// * Safari
// Let's use the devicePixelRatio as it is here.
return u.getScale() * devicescale.GetAt(0, 0)
}
func (u *UserInterface) updateGraphicsContext(g driver.GraphicsContext) {
a := u.actualScreenScale()
if u.lastActualScale != a {
u.updateScreenSize()
}
u.lastActualScale = a
if u.sizeChanged {
u.sizeChanged = false
g.SetSize(u.width, u.height, a)
}
}
func (u *UserInterface) suspended() bool {
return !u.runnableInBackground && (!u.windowFocus || !u.pageVisible)
}
func (u *UserInterface) update(g driver.GraphicsContext) error {
if u.suspended() {
hooks.SuspendAudio()
2016-09-01 17:53:05 +02:00
return nil
}
hooks.ResumeAudio()
2019-04-06 16:03:21 +02:00
u.input.UpdateGamepads()
u.updateGraphicsContext(g)
if err := g.Update(func() {
u.updateGraphicsContext(g)
}); err != nil {
2016-09-01 17:53:05 +02:00
return err
}
return nil
}
func (u *UserInterface) loop(g driver.GraphicsContext) <-chan error {
ch := make(chan error)
2018-05-26 18:59:35 +02:00
var cf js.Callback
2018-10-13 20:40:18 +02:00
f := func([]js.Value) {
if u.contextLost {
requestAnimationFrame.Invoke(cf)
return
}
2018-05-26 18:59:35 +02:00
if err := u.update(g); err != nil {
ch <- err
close(ch)
2018-05-26 18:59:35 +02:00
return
}
if u.vsync {
requestAnimationFrame.Invoke(cf)
} else {
2018-07-14 16:47:31 +02:00
setTimeout.Invoke(cf, 0)
}
}
2018-05-26 18:59:35 +02:00
cf = js.NewCallback(f)
// Call f asyncly to be async since ch is used in f.
go func() {
f(nil)
}()
return ch
2015-01-02 07:20:05 +01:00
}
2016-07-23 13:25:52 +02:00
func init() {
if document.Get("body") == js.Null() {
ch := make(chan struct{})
2018-05-26 18:59:35 +02:00
window.Call("addEventListener", "load", js.NewCallback(func([]js.Value) {
close(ch)
2018-05-26 18:59:35 +02:00
}))
<-ch
}
2018-05-26 18:59:35 +02:00
window.Call("addEventListener", "focus", js.NewCallback(func([]js.Value) {
2019-04-07 03:58:11 +02:00
theUI.windowFocus = true
if theUI.suspended() {
hooks.SuspendAudio()
} else {
hooks.ResumeAudio()
}
2018-05-26 18:59:35 +02:00
}))
window.Call("addEventListener", "blur", js.NewCallback(func([]js.Value) {
2019-04-07 03:58:11 +02:00
theUI.windowFocus = false
if theUI.suspended() {
hooks.SuspendAudio()
} else {
hooks.ResumeAudio()
}
2018-05-26 18:59:35 +02:00
}))
document.Call("addEventListener", "visibilitychange", js.NewCallback(func([]js.Value) {
2019-04-07 03:58:11 +02:00
theUI.pageVisible = !document.Get("hidden").Bool()
if theUI.suspended() {
hooks.SuspendAudio()
} else {
hooks.ResumeAudio()
}
2018-05-26 18:59:35 +02:00
}))
window.Call("addEventListener", "resize", js.NewCallback(func([]js.Value) {
2019-04-07 03:58:11 +02:00
theUI.updateScreenSize()
2018-05-26 18:59:35 +02:00
}))
// Adjust the initial scale to 1.
// https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
meta := document.Call("createElement", "meta")
meta.Set("name", "viewport")
meta.Set("content", "width=device-width, initial-scale=1")
document.Get("head").Call("appendChild", meta)
canvas = document.Call("createElement", "canvas")
2015-01-02 08:48:07 +01:00
canvas.Set("width", 16)
canvas.Set("height", 16)
document.Get("body").Call("appendChild", canvas)
2015-01-05 14:22:47 +01:00
htmlStyle := document.Get("documentElement").Get("style")
2015-01-05 14:22:47 +01:00
htmlStyle.Set("height", "100%")
2015-01-05 16:44:39 +01:00
htmlStyle.Set("margin", "0")
htmlStyle.Set("padding", "0")
2015-01-05 14:22:47 +01:00
bodyStyle := document.Get("body").Get("style")
2015-01-05 14:22:47 +01:00
bodyStyle.Set("backgroundColor", "#000")
bodyStyle.Set("position", "relative")
bodyStyle.Set("height", "100%")
2015-01-05 16:44:39 +01:00
bodyStyle.Set("margin", "0")
bodyStyle.Set("padding", "0")
2019-03-19 17:36:52 +01:00
bodyStyle.Set("display", "flex")
bodyStyle.Set("alignItems", "center")
bodyStyle.Set("justifyContent", "center")
// TODO: This is OK as long as the game is in an independent iframe.
// What if the canvas is embedded in a HTML directly?
document.Get("body").Call("addEventListener", "click", js.NewCallback(func([]js.Value) {
2015-01-06 20:39:33 +01:00
canvas.Call("focus")
2018-05-26 18:59:35 +02:00
}))
2015-01-05 14:22:47 +01:00
canvasStyle := canvas.Get("style")
canvasStyle.Set("position", "absolute")
2015-01-02 16:52:49 +01:00
// Make the canvas focusable.
canvas.Call("setAttribute", "tabindex", 1)
canvas.Get("style").Set("outline", "none")
// Keyboard
2018-10-13 15:41:21 +02:00
// Don't 'preventDefault' on keydown events or keypress events wouldn't work (#715).
canvas.Call("addEventListener", "keydown", js.NewEventCallback(0, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "keypress", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "keyup", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
// Mouse
canvas.Call("addEventListener", "mousedown", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "mouseup", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "mousemove", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "wheel", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
// Touch
canvas.Call("addEventListener", "touchstart", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "touchend", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
canvas.Call("addEventListener", "touchmove", js.NewEventCallback(js.PreventDefault, func(e js.Value) {
2019-04-07 03:58:11 +02:00
theUI.input.Update(e)
}))
// Gamepad
2018-05-26 18:59:35 +02:00
window.Call("addEventListener", "gamepadconnected", js.NewCallback(func(e []js.Value) {
// Do nothing.
2018-05-26 18:59:35 +02:00
}))
2018-06-15 17:26:28 +02:00
canvas.Call("addEventListener", "contextmenu", js.NewEventCallback(js.PreventDefault, func(js.Value) {
// Do nothing.
2018-05-26 18:59:35 +02:00
}))
// Context
2018-06-15 17:26:28 +02:00
canvas.Call("addEventListener", "webglcontextlost", js.NewEventCallback(js.PreventDefault, func(js.Value) {
2019-04-07 03:58:11 +02:00
theUI.contextLost = true
2018-05-26 18:59:35 +02:00
}))
canvas.Call("addEventListener", "webglcontextrestored", js.NewCallback(func(e []js.Value) {
2019-04-07 03:58:11 +02:00
theUI.contextLost = false
2018-05-26 18:59:35 +02:00
}))
2015-01-02 07:20:05 +01:00
}
func (u *UserInterface) Loop(ch <-chan error) error {
return <-ch
2016-05-06 05:23:48 +02:00
}
func (u *UserInterface) Run(width, height int, scale float64, title string, g driver.GraphicsContext, mainloop bool, graphics driver.Graphics) error {
document.Set("title", title)
u.setScreenSize(width, height, scale, u.fullscreen)
2015-02-09 02:25:00 +01:00
canvas.Call("focus")
ch := u.loop(g)
if runtime.GOARCH == "wasm" {
return <-ch
}
2019-01-17 15:40:33 +01:00
// On GopherJS, the main goroutine cannot be blocked due to the bug (gopherjs/gopherjs#826).
// Return immediately.
go func() {
if err := <-ch; err != nil {
log.Fatal(err)
}
}()
return nil
2015-02-09 02:25:00 +01:00
}
func (u *UserInterface) setScreenSize(width, height int, scale float64, fullscreen bool) bool {
if u.width == width && u.height == height &&
u.scale == scale && fullscreen == u.fullscreen {
2015-02-09 16:10:50 +01:00
return false
2015-02-09 02:25:00 +01:00
}
u.width = width
u.height = height
2016-03-24 17:15:47 +01:00
u.scale = scale
u.fullscreen = fullscreen
u.updateScreenSize()
return true
}
func (u *UserInterface) updateScreenSize() {
canvas.Set("width", int(float64(u.width)*u.actualScreenScale()))
canvas.Set("height", int(float64(u.height)*u.actualScreenScale()))
2015-01-05 14:22:47 +01:00
canvasStyle := canvas.Get("style")
s := u.getScale()
cssWidth := int(float64(u.width) * s)
cssHeight := int(float64(u.height) * s)
canvasStyle.Set("width", strconv.Itoa(cssWidth)+"px")
canvasStyle.Set("height", strconv.Itoa(cssHeight)+"px")
u.sizeChanged = true
2015-01-02 07:20:05 +01:00
}
2019-04-07 11:28:50 +02:00
func (u *UserInterface) Input() driver.Input {
return &u.input
2019-04-07 11:28:50 +02:00
}