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

Question

我想达到的目标：

每次用户单击画布时，从该单击中获取鼠标坐标以构造 aPoint x y并将此状态存储在 a 中[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

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

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

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

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

至少这就是我收集的内容，我在链接的 StackOverflow 问题的答案中测试了代码，它确实解决了该特定问题中提出的问题。但是，我需要x y在mousedown事件流上捕获鼠标的位置（该代码段中没有涵盖）并使用它来构建一个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是你不具备使用玻璃钢，如果你不想。这里最简单的方法可能是使用来自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]每次都存储点列表的a 。最后，使用为每次按下按钮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. 如果您查看文档，则类型是accumB :: MonadIO m => a -> Event (a -> a) -> m (Behavior a); 请注意，这需要一个Event (a -> a)而不是一个简单的Event a. 因此，原始Event Point必须转换为 an Event ([Point] -> [Point])（对于每个新点，返回一个将其添加到输入点列表的函数），然后才能在 中使用accumB。