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

因此，最初我是在用户单击的位置绘制点。通过在Point x y的lambda参数中构造一个mousedown并将其绘制到画布上，我可以轻松实现这一目标。我在解决该问题时就忽略了该代码，而且我不认为我当前的问题与此有关（即在该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将该流中的每个事件累积为某种状态的流行为，然后将该状态行为转换为带有apply的事件流，并观察该最终流以更新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的优点之一是，如果您不想使用FRP，则不必have。这里最简单的方法可能是使用Data.IORef：

中的可变引用

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

EDIT：我刚刚注意到，在您的问题中，您已经了解了以上大部分内容。您唯一的错误是尝试执行

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])中使用。