Undo1.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <div>
  3. <el-button @click="addCircle">Circle</el-button>
  4. <el-button @click="addRect">Rect</el-button>
  5. <el-button @click="deleteItem">Delete</el-button>
  6. <el-button @click="undo">Undo</el-button>
  7. <el-button @click="redo">Redo</el-button>
  8. <el-button @click="log">日志</el-button>
  9. <canvas id="undoFrame" width="800" height="400"/>
  10. </div>
  11. </template>
  12. <script lang="ts">
  13. import { SMouseEvent, SUndoStack } from "@persagy-web/base";
  14. import { SColor, SPainter, SRect } from "@persagy-web/draw";
  15. import { SGraphAddCommand, SGraphItem, SGraphMoveCommand, SGraphScene, SGraphView } from "@persagy-web/graph";
  16. import { SPoint } from "@persagy-web/draw/lib";
  17. /**
  18. * Undo/Redo
  19. *
  20. * @author 郝洁 <haojie@persagy.com>
  21. */
  22. class RectItem extends SGraphItem {
  23. width = 100;
  24. height = 100;
  25. id = new Date().getTime() + '';
  26. /**
  27. * 构造函数
  28. *
  29. * @param parent Item 图像引擎
  30. */
  31. constructor(parent: SGraphItem | null) {
  32. super(parent);
  33. this.moveable = true;
  34. this.selectable = true;
  35. this.selected = true;
  36. this.isTransform = true;
  37. this.rotate = 60;
  38. }
  39. /**
  40. * 矩形数据类型绘制
  41. *
  42. * @return 边界区域
  43. */
  44. boundingRect(): SRect {
  45. return new SRect(0, 0, this.width, this.height);
  46. }
  47. /**
  48. * Item 绘制操作
  49. * @param canvas 绘制对象
  50. */
  51. onDraw(canvas: SPainter): void {
  52. canvas.pen.color = SColor.Blue;
  53. canvas.pen.lineWidth = 5;
  54. canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
  55. canvas.drawRect(0, 0, this.width, this.height)
  56. }
  57. }
  58. class CircleItem extends SGraphItem {
  59. /** 半径 */
  60. r = 50;
  61. /** 图 Id */
  62. id = new Date().getTime() + ""
  63. /**
  64. * 构造函数
  65. *
  66. * @param parent Item 图像引擎
  67. */
  68. constructor(parent: SGraphItem | null) {
  69. super(parent);
  70. this.moveable = true;
  71. this.selectable = true;
  72. this.isTransform = false;
  73. }
  74. /**
  75. * 矩形数据类型绘制
  76. */
  77. boundingRect(): SRect {
  78. return new SRect(0, 0, this.r * 2, this.r * 2);
  79. }
  80. /**
  81. * Item 绘制操作
  82. * @param canvas 绘制对象
  83. */
  84. onDraw(canvas: SPainter): void {
  85. canvas.pen.color = SColor.Blue;
  86. canvas.pen.lineWidth = 5;
  87. canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
  88. canvas.drawCircle(this.r, this.r, this.r);
  89. }
  90. }
  91. class SScene extends SGraphScene {
  92. /** 实例化 */
  93. undoStack = new SUndoStack();
  94. /** 定义命令 */
  95. cmd = 0;
  96. /**
  97. * 构造函数
  98. */
  99. constructor() {
  100. super();
  101. }
  102. /**
  103. * 鼠标抬起事件
  104. *
  105. * @param event 事件参数
  106. * @return 是否处理
  107. */
  108. onMouseUp(event: SMouseEvent): boolean {
  109. switch (this.cmd) {
  110. case 1:
  111. this.addCircle(event.x, event.y);
  112. break;
  113. case 2:
  114. this.addRect(event.x, event.y);
  115. break;
  116. default:
  117. super.onMouseUp(event);
  118. }
  119. this.cmd = 0;
  120. return false
  121. }
  122. /**
  123. * 添加圆形
  124. * @param x x轴
  125. * @param y y轴
  126. */
  127. private addCircle(x: number, y: number): void {
  128. let item = new CircleItem(null);
  129. item.moveTo(x - 50, y - 50);
  130. this.addItem(item);
  131. this.undoStack.push(new SGraphAddCommand(this, item));
  132. item.connect("onMove", this, this.onItemMove.bind(this));
  133. }
  134. /**
  135. * 添加矩形
  136. * @param x x轴
  137. * @param y y轴
  138. */
  139. private addRect(x: number, y: number): void {
  140. let item = new RectItem(null);
  141. item.moveTo(x - 50, y - 50);
  142. this.addItem(item);
  143. this.undoStack.push(new SGraphAddCommand(this, item));
  144. item.connect("onMove", this, this.onItemMove.bind(this));
  145. }
  146. /**
  147. * 移动操作
  148. * @param item 图像引擎
  149. * @param arg 数组
  150. */
  151. onItemMove(item: SGraphItem, ...arg: any): void {
  152. this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  153. }
  154. }
  155. class TestView extends SGraphView {
  156. /**
  157. * 构造函数
  158. *
  159. * @param undoFrame 绘制引擎
  160. */
  161. constructor(undoFrame) {
  162. super(undoFrame);
  163. }
  164. }
  165. export default {
  166. data() {
  167. return {
  168. /** 命令所属的场景类 */
  169. scene: new SScene(),
  170. }
  171. },
  172. /**
  173. * 页面挂载
  174. */
  175. mounted(): void {
  176. let view = new TestView('undoFrame');
  177. view.scene = this.scene;//new SScene(); //this.data.scene;
  178. },
  179. methods: {
  180. /**
  181. * 定义圆形命令
  182. */
  183. addCircle() {
  184. this.scene.cmd = 1;
  185. },
  186. /**
  187. * 定义矩形命令
  188. */
  189. addRect() {
  190. this.scene.cmd = 2;
  191. },
  192. /**
  193. * 删除操作
  194. */
  195. deleteItem() {
  196. // do something ...
  197. },
  198. /**
  199. * 取消操作
  200. */
  201. undo() {
  202. this.scene.undoStack.undo();
  203. },
  204. /**
  205. * 重做操作
  206. */
  207. redo() {
  208. this.scene.undoStack.redo();
  209. },
  210. /**
  211. * 将命令堆栈转为日志(命令数组)
  212. */
  213. log() {
  214. let str = this.scene.undoStack.toLog();
  215. console.log(str)
  216. }
  217. }
  218. }
  219. </script>
  220. <style scoped>
  221. </style>