Window.dimensions запускается дважды при использовании Elm.fullscreen в Elm
Рассмотрим следующую программу:
module App where
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Window
import Debug
view : (Int, Int) -> Element
view (windowWidth, windowHeight) =
let
_ = Debug.log "dimensions" (windowWidth, windowHeight)
in
square 100
|> filled Color.grey
|> List.repeat 1
|> collage windowWidth windowHeight
main : Signal Element
main =
Signal.map view Window.dimensions
При запуске этой программы в Try Elm квадрат идеально отцентрирован, и я вижу одну распечатку, например dimensions: (689,431)
в консоли браузера. Это ожидаемое поведение.
Однако при встраивании этой программы в HTML:
<head>
...
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
<script>
Elm.fullscreen(Elm.App, {
initialSeed: randomlyGeneratedNumber
});
</script>
Я вижу две распечатки в консоли браузера:
dimensions: (384,204)
dimensions: (369,204)
и я вижу вертикальную полосу прокрутки:
Любые идеи, как это исправить?
2 ответа
Тот факт, что вы видите две распечатки, означает, что view
вызывается дважды. В общем, это означает, что любой сигнал, который view
может быть обновлен, но вот только Window.dimensions
, (Правильно?)
Вполне возможно, что среда выполнения просто обновляет то, что она считает размерами экрана, точно так же, как если бы вы изменили размер окна. Тогда проблема не в том, что он запускается дважды, а в том, что вы получили неправильный размер. Если у вас вертикальная полоса прокрутки, высота слишком велика, и она остается той же в вашей распечатке.
С точки зрения отладки, вы пытались сделать ваши HTML и JS как можно более похожими на elm-lang/try? Например, удаление initialSeed
значение порта? (Если вы не объявляете входящий порт в Elm, это должно быть немедленной ошибкой во время выполнения, сообщите, если нет.) Если вы измените размер своего браузера до известного размера окна, как значения будут отличаться от этого? Также возможно, что вам нужно отключить поля или отступы на body
элемент.
Похоже, что запуск консоли разработчика вызывает изменение размеров. Если я сначала открою консоль разработчика, а затем обновлю, я увижу только одно событие.