Threenpenny gui - 在点击时捕获鼠标坐标并使用它们来构建一些状态

Question

我想要达到的目标：

每次用户单击画布时，从该单击中获取鼠标坐标以构造 Point x y 并将此状态存储在 [Point] 中，以便稍后用户单击按钮时我可以使用[Point] 作为某些函数的输入。

我做了什么：

我已经定义了一个Point 数据类型，它有一个像这样的单值构造函数：

data Point = Point {
  x :: Int,
  y :: Int
} deriving (Show, Eq)

我设置了一个三便士的UI（monad？）来定义用户界面，一个简单的400 x 400 canvas 和一个button：

import qualified Graphics.UI.Threepenny as UI
import Graphics.UI.Threepenny.Core
import Control.Monad

canvasSize = 400

setup :: Window -> UI ()
setup window = do
  return window # set title "Haskell GUI"

  canvas <- UI.canvas
    # set UI.height canvasSize
    # set UI.width canvasSize
    # set style [("border", "solid black 1px"), ("background", "#eee")]

  button <- UI.button #+ [string "Do stuff"]

  getBody window #+
    [
    column [element canvas],
    element canvas,
    element button
    ]

  on UI.mousedown canvas $ \(x, y) -> do
    -- Need to create a point x y and add it to a list here

  on UI.click button $ const $ do
    -- Need to get the list of points here

  return ()

然后在main中定义了运行UI的函数：

runGui :: IO ()
runGui = startGUI defaultConfig setup

所以，最初我是在用户点击的地方绘制点。通过在 mousedown 的 lambda 参数中构造一个 Point x y 并将其绘制到那里的画布上，我相当容易地实现了这一点。我已经解决了该代码，因此我忽略了该代码，并且我不相信我当前的问题与此有关（即在该 lambda 范围内构造和绘制一个点）。

我不想绘制然后丢弃绑定到该 lambda 范围的Point，而是想将该点存储在一个列表中。然后，我希望能够在用户单击按钮时阅读该列表。

我对 FRP 样式的 Behaviour 和 Event (http://hackage.haskell.org/package/threepenny-gui-0.4.2.0/docs/Reactive-Threepenny.html) 进行了一些研究，我知道这有助于创建类似 redux 模式的东西，但我的大脑正在启动融化。

基于另一个 StackOverflow 帖子 (Mixing Threepenny-Gui and StateT)，我认为我应该连接到 Threepenny UI 事件以创建事件流，然后使用 accumB 将该流中的每个事件累积成一些状态行为，然后将该状态行为转换回事件流，并在最终流上应用和观察以更新 UI（很简单，我认为...xD）

至少这就是我收集的信息，我在链接的 StackOverflow 问题的答案中测试了代码，它确实解决了该特定问题中提出的问题。但是，我需要在mousedown 事件流上捕获鼠标的x y 位置（该sn-p 中没有涵盖）并使用它来构造Point 流，这就是我被卡住的地方。我尝试根据我的目的修改接受的答案代码来实现它，但遇到了大量类型错误，因为我显然误解了这些部分是如何组合在一起的。

这是我在链接的 StackOverflow 问题上修改已接受答案中的代码的尝试：

-- This *should* be the bit that converts 
-- (x, y) click events to Point x y Event stream
let canvasClick = UI.mousedown canvas
    newPointStream = (\(x, y) -> Point x y) <$ (canvasClick)

-- This *should* be the bit that turns the 
-- Point x y Event stream into a "behaviour" stream
counter <- accumB (Point 0 0) newPointStream

有人能解释一下吗？我在墙上:-(

Answer 1

threepenny-gui 的优点之一是，如果您不想使用 FRP，则没有必须使用。这里最简单的方法可能是使用来自Data.IORef 的可变引用：

import Data.IORef

setup window = do
  -- ...

  pointsRef <- liftIO (newIORef [] :: IO (IORef [Point]))

  on UI.mousedown canvas $ \(x, y) -> do
    liftIO $ modifyIORef' pointsRef ((Point x y) :)

  on UI.click button $ const $ do
    points <- liftIO $ readIORef pointsRef
    -- use the list of points here

这会创建一个可变的点列表pointsRef 并将其初始化为[]，然后在每次鼠标按下时添加一个新点。单击按钮时，将读取点列表。

另一种方法是使用 FRP。 let pointEv = (uncurry Point) <$> UI.mousedown canvas 给你一个Event Point。然后你可以做let pointPrependEv = fmap (\p -> \list -> p : list) pointEv 给Event ([Point] -> [Point])。接下来，使用pointsB <- accumB [] pointsPrependEv 得到一个Behavior [Point]，它每次都存储点列表。最后，使用pointsB <@ UI.click button 为每次按下按钮获取Event [Point]。现在，每次按下按钮都有一个事件，其值是此时的点列表，因此您现在可以使用register 或threepenny-gui 中的任何其他函数对此事件进行计算。完整的程序是：

setup window = do
  -- ...

  let pointEv = (uncurry Point) <$> UI.mousedown canvas
      pointPrependEv = fmap (\p -> \list -> p : list) pointEv
  pointsB <- accumB [] pointPrependEv
  let buttonPressEv = pointsB <@ UI.click button
  -- use point list here via buttonPressEv

编辑：我刚刚注意到，在您的问题中，您已经了解了上述大部分内容。您唯一的错误是尝试执行accumB [] newPointsStream。如果你看the documentation，类型是accumB :: MonadIO m => a -> Event (a -> a) -> m (Behavior a)；请注意，这需要Event (a -> a) 而不是简单的Event a。因此，原始的Event Point 必须先转换为Event ([Point] -> [Point])（对于每个新点，都会返回一个将其添加到输入点列表的函数），然后才能在accumB 中使用。