SEditLine.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <div>
  3. <el-button @click="create">创建</el-button>
  4. <el-button @click="undo">undo</el-button>
  5. <el-button @click="redo">redo</el-button>
  6. <canvas id="editLine" width="740" height="400" tabindex="0" />
  7. </div>
  8. </template>
  9. <script>
  10. import { SGraphScene, SGraphView } from "@persagy-web/graph/";
  11. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  12. import { SLineItem } from "@persagy-web/big/lib";
  13. export default {
  14. data() {
  15. return {
  16. scene: null,
  17. view: null
  18. };
  19. },
  20. mounted() {
  21. this.view = new SGraphView("editLine");
  22. this.scene = new SGraphScene();
  23. this.view.scene = this.scene;
  24. },
  25. methods: {
  26. create() {
  27. this.scene.root.children = [];
  28. const lineItem = new SLineItem(null, [] );
  29. lineItem.status = SItemStatus.Create;
  30. this.scene.addItem(lineItem);
  31. this.scene.grabItem = lineItem;
  32. this.view.fitSceneToView();
  33. },
  34. undo(){
  35. if(this.scene.grabItem) {
  36. this.scene.grabItem.undo();
  37. }
  38. },
  39. redo(){
  40. if(this.scene.grabItem) {
  41. this.scene.grabItem.redo();
  42. }
  43. }
  44. }
  45. };
  46. </script>