undo.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div class="edit-line">
  3. <div class="btn-list">
  4. <el-button
  5. :class="[cmdStatus=='createLine' ? 'heightLight' : '']"
  6. size="small"
  7. @click="create('createLine')"
  8. >画线</el-button>
  9. <el-button
  10. :class="[cmdStatus=='createText' ? 'heightLight' : '']"
  11. size="small"
  12. @click="create('createText')"
  13. >文本</el-button>
  14. <el-button
  15. :class="[cmdStatus=='createImage' ? 'heightLight' : '']"
  16. size="small"
  17. @click="create('createImage')"
  18. >图片</el-button>
  19. <el-button size="small" @click="undo">undo</el-button>
  20. <el-button size="small" @click="redo">redo</el-button>
  21. <!-- <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start"> -->
  22. <!-- <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> -->
  23. <!-- </el-tooltip> -->
  24. <!-- <el-button
  25. :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
  26. size="small"
  27. @click="deleteItem"
  28. >删除</el-button> -->
  29. </div>
  30. <div class="content">
  31. <div class="left">
  32. <canvas id="edit_line" width="700" height="460" tabindex="0" />
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
  39. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  40. import { SPoint } from "@persagy-web/draw/";
  41. import { SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
  42. import { EditLineItem } from "./../../../../guides/edit/items/src/EditLineItem";
  43. import { EditImageItem } from "./../../../../guides/edit/items/src/EditImageItem";
  44. import { hexify } from "./../../../public/until/rgbaUtil";
  45. import { EditText } from "./../../../../guides/edit/items/src/EditText";
  46. import { SGraphAddCommand } from "./../../../../guides/edit/undo/src/SGraphAddCommand";
  47. class SScene extends SGraphScene {
  48. undoStack = new SUndoStack();
  49. editCmd = "";
  50. constructor() {
  51. super();
  52. this.editCmd = "";
  53. }
  54. onMouseDown(event) {
  55. if (this.editCmd == "createLine") {
  56. this.addLine(event);
  57. this.clearCmdStatus();
  58. } else if (this.editCmd == "createText") {
  59. this.addText(event);
  60. this.clearCmdStatus();
  61. } else if (this.editCmd == "createImage") {
  62. this.addImage(event);
  63. this.clearCmdStatus();
  64. } else if (this.editCmd == "") {
  65. super.onMouseDown(event);
  66. }
  67. }
  68. // 清空命令
  69. clearCmdStatus() {
  70. this.editCmd = "";
  71. }
  72. // 新增线
  73. addLine(event) {
  74. const lineItem = new EditLineItem(null, []);
  75. lineItem.status = SItemStatus.Create;
  76. lineItem.x = event.x;
  77. lineItem.y = event.y;
  78. lineItem.connect("finishCreated", this, this.finishCreated);
  79. this.addItem(lineItem);
  80. this.undoStack.push(new SGraphAddCommand(this, lineItem));
  81. this.grabItem = lineItem;
  82. }
  83. // 新增文本
  84. addText(event) {
  85. const textItem = new EditText(null);
  86. textItem.text = "测试文本";
  87. textItem.moveable = true;
  88. textItem.x = event.x;
  89. textItem.y = event.y;
  90. this.addItem(textItem);
  91. this.undoStack.push(new SGraphAddCommand(this, textItem));
  92. this.grabItem = textItem;
  93. textItem.connect("finishCreated", this, this.finishCreated);
  94. }
  95. // 新增图片
  96. addImage(event) {
  97. const imageItem = new EditImageItem(null);
  98. imageItem.url =
  99. "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
  100. imageItem.width = 100;
  101. imageItem.height = 100;
  102. imageItem.moveable = true;
  103. imageItem.x = event.x;
  104. imageItem.y = event.y;
  105. this.addItem(imageItem);
  106. this.undoStack.push(new SGraphAddCommand(this, imageItem));
  107. }
  108. // 完成item绘制
  109. finishCreated() {
  110. this.grabItem = null;
  111. }
  112. undo() {
  113. this.undoStack.undo();
  114. this.view.update();
  115. }
  116. redo() {
  117. this.undoStack.redo();
  118. this.view.update();
  119. }
  120. }
  121. //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
  122. export default {
  123. name: "editLine",
  124. data() {
  125. return {
  126. scene: null,
  127. view: null,
  128. isCreated: false, //是否创建完成
  129. cmdStatus: "", //选中状态
  130. };
  131. },
  132. mounted() {
  133. console.log(SGraphAddCommand);
  134. this.view = new SGraphView("edit_line");
  135. this.scene = new SScene();
  136. this.view.scene = this.scene;
  137. },
  138. methods: {
  139. create(val) {
  140. this.scene.editCmd = val;
  141. },
  142. undo() {
  143. this.scene.undo();
  144. },
  145. redo() {
  146. this.scene.redo();
  147. },
  148. },
  149. watch: {},
  150. beforeCreate() {},
  151. };
  152. </script>
  153. <style scoped lang="less">
  154. .edit-line {
  155. width: 100%;
  156. height: 500px;
  157. .content {
  158. display: flex;
  159. justify-content: flex-start;
  160. .left {
  161. margin-right: 20px;
  162. }
  163. .line-property {
  164. width: 300px;
  165. margin-top: 20px;
  166. .always {
  167. width: 100%;
  168. height: 100%;
  169. }
  170. .always-item {
  171. display: flex;
  172. margin-top: 10px;
  173. justify-content: space-between;
  174. }
  175. }
  176. }
  177. .heightLight {
  178. color: #409eff;
  179. border-color: #c6e2ff;
  180. background-color: #ecf5ff;
  181. }
  182. }
  183. </style>