design-patterns - 实现 GUI 逻辑的架构技巧

Question

所以我在这里工作的一个应用程序上实现了一个类似于 svg 编辑器的 GUI。这些是它需要的逻辑的一些示例:

如果用户在 Canvas 上单击右键，则应创建一个新节点，随后的节点应与一条线“链接”，形成一个多边形

如果用户在节点上单击左键，我应该将整个多边形集相应地移动到鼠标位置

用户可以删除节点

所选节点的颜色应不同

用户可以通过按 SHIFT 并单击节点来选择多个节点

等等。

我已经实现了所有这些项目，但我不喜欢最终的结果，主要是因为我不得不使用很多标志来操纵状态(鼠标点击 && 左按钮 && 不移动？这样做)，当然还有这个代码可以更优雅。因此，我进行了一些研究并得出了以下选项:

管道模式:我将创建分别处理每个逻辑事件的类，并使用优先级顺序来提供要做什么/先处理什么，以及事件将如何传播到后续管道项目。

MVC:这是最常见的响应，但目前我对如何使用它使代码更简洁感到非常模糊。

状态机:这很好，但管理状态机的粒度会很复杂

所以我要问 S.O.有关如何构建更好、更快乐的代码的技巧的大师。

Answer 1

我建议将 UI 输入映射到特定操作的逻辑分离到专用对象中。让我们称它们为 Sensor 对象。不知道你的实现语言，我会对此通用，但你应该明白这个想法。

OperationSensor
+ OnKeyDown
+ OnKeyPress
+ OnKeyUp
+ OnLeftMouseDown
+ OnLeftMouseUp
+ OnNodeSelect
+ OnNodeDeselect
+ OnDragStart
+ OnDragStop

假设您有一个聚合所有各种 UI 输入的中心类， UiInputManager .它使用特定于语言的机制来监听键盘和鼠标输入。它还检测基本操作，例如检测鼠标是否按下，然后移动，即逻辑“拖动”。

UiInputManager
// event listeners
+ keyboard_keydownHandler
+ keyboard_keyupHandler
+ mouse_leftdownHandler
+ mouse_rightdownHandler
// active sensor list, can be added to or removed from
+ Sensors

UiInputManager 不负责了解这些输入导致的操作。它只是以特定于语言的方式通知其传感器。

foreach sensor in Sensors
    sensor.OnDragStarted

或者，如果传感器监听由 UiInputManager 发出的逻辑事件

RaiseEvent DragStarted

您现在拥有的是将输入路由到 OperationSensor 子类的管道。每个 OperationSensor 都有与单个操作相关的逻辑。如果它检测到操作的条件已满足，则它会创建适当的 Command 对象并将其传回。

// Ctrl + zooms in, Ctrl - zooms out
ZoomSensor : OperationSensor

   override OnKeyDown
   {
      if keyDown.Char = '+' && keyDown.IsCtrlDepressed
         base.IssueCommand(new ZoomCommand(changeZoomBy:=10)
      elseif keyDown.Char = '-' && keyDown.IsCtrlDepressed
         base.IssueCommand(new ZoomCommand(changeZoomBy:=-10)                                 
   }

我建议命令对象从传感器传递到 UiInputManager。然后管理器可以将它们传递到您的命令处理子系统中。这使管理器有机会通知传感器操作已完成，允许他们在需要时重置其内部状态。

可以通过两种不同的方式处理多步操作。您可以在 SensorOperation 内部实现内部状态机，也可以让“第 1 步”传感器创建“第 2 步”传感器并将其添加到事件传感器列表中，甚至可能将其从列表中删除。当“第 2 步”完成后，它可以重新添加“第 1 步”传感器并自行移除。