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 элемент.

Похоже, что запуск консоли разработчика вызывает изменение размеров. Если я сначала открою консоль разработчика, а затем обновлю, я увижу только одно событие.

Другие вопросы по тегам