网页画板 Undo Redo 功能的思考

2019独角兽企业重金招聘Python工程师标准>>>

考虑提供一种网络功能, 教师在自己机器上面画图, 能够显示给学生; 或获取学生的图形, 并在其
基础上修改绘制, 学生能看到画图过程.

设学生机器为S, 教师机器为T, 服务器为V. 一般思路:

S,T 通过服务器V连接, 通过V传输各种(绘图,指挥)命令等.

核心问题: 教师绘图的数据以何种组织方式给学生?

其它问题: 1. 教师/学生连接在一起的"握手/安全"协议设计问题.
  2. 数据传输格式(json/xml)问题, 编码(utf8)问题.

思考何种方式: 1.将鼠标移动轨迹传递给学生, 在学生端重演. (似乎不太可行)
  2. 将 move_ctrl 对象移动信息传递给学生?
  3. 类似于 undo/redo 的实现, 将某些 do 的信息传递给学生端?
  4. 可能要使用消息压缩(缩减)方法.
  5. 和 undo/redo 一起思考? 序列化/反序列化问题?
  6.

设在教师端T, 教师执行如下操作, 如何组织数据 of 传输给学生的?
  1. 移动一组对象 (move tool).
  2. 创建对象 (create).
  3. 删除对象 (delete).
  4. 标记对象(amark, lmark, label etc.).
  5. 修改对象属性 (update).

从纯数据的角度看, 是对数据表的 insert,delete,update. 因此与 undo/redo 问题相关.

undo/redo 的一些 通用规则:
  1. 为了实现撤销操作(undo)必须在对对象修改之前保存 "原始信息" 备份.
  2. 为了实现重做操作(redo)必须在对对象修改之前保存 "修改信息" 备份.

三个基本操作:
  1. 创建操作(insert/create/new)
  2. 修改操作(update)
  3. 删除操作(delete)

一个复合操作:
  1. 复合操作 (基本操作的组合, 可递归)

对象需要有某种方式能够定位到, 如通过 #id, 例如类似于 uri 的方式.

创建操作为 new, 如 new Xxx(parameters), 或 Xxx.create_xx(parameters).
问题归结为如何将 new 操作记录下来.

删除操作为 delete, 如果能将整个对象 searialize 下来, 则可 unsearialize 回来.

修改操作归结为 obj, prop_name, getter(), setter() 问题.

一. 创建.

  现在创建有两种, 1. new $G.Circle(O, A), 可描述为: 'new', '$G.Circle', #id_of_O, #id_of_A

  2. $G.Point.new_xy(x, y), 可描述为 'new-f', '$G.Point.new_xy', x, y .

  一旦创建能够被描述为一个字符串, 则可以使用一个函数通过 `播放' 的方法, 创建出这个对象.
所以现在需要, 创建时候产生此字符串, Redo 的时候播放该字符串.

二. 删除.

  删除时对象从 pad 集合中取出(然后被系统回收了), 我们可以存下这个对象本身用作 undo,
但不适合传输. 好的方法是将对象 serialize() 为字符串, 然后在 undo 的时候能够
unserialize() 回来. 如果所有被操作的对象都支持 s/uns 则问题就没有了.

  为此, 需要设计对象的 serialize/unserialize 机制.

三. 修改操作.

  1. 普通属性. 'get/set', 'obj', 'property_name', old_value, new_value 可以表征.
  2. 函数设置 'getter/setter', 'obj', 'getter name/setter name', old_value, new_value 可以表征.

框架问题:

  实现一种 memo 机制, 将所有改变(new,delete,update) 都记录下来. 提供 undo/redo 方法,
播放记录的内容, 实现 undo/redo.

  当进行某种操作的时候, 负责产生记录, 添加到该 memo 中.

  因而实现步骤: 1. 实现 memo 类; 2. 产生部分记录; 3. 实现记录播放. 4. 所有操作产生记录.

构建过程本身是一个难题, 如何构建是值得仔细考虑, 小心实施的.

转载于:https://my.oschina.net/u/232554/blog/181294