editline1_copy.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div class="edit-line">
  3. <div class="btn-list">
  4. <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button>
  5. <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
  6. <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
  7. <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除</el-button>
  8. <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button>
  9. <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button>
  10. <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线</el-button>
  11. </div>
  12. <div class="content">
  13. <div class="left">
  14. <canvas id="edit_line" width="700" height="460" tabindex="0" />
  15. </div>
  16. <div class="line-property">
  17. <el-card shadow="always">
  18. <div class="always-item">
  19. <span>线宽:</span>
  20. <input type="text" />
  21. </div>
  22. <div class="always-item">
  23. <span>线类型:</span>
  24. <input type="text" />
  25. </div>
  26. <div class="always-item">
  27. <span>线颜色:</span>
  28. <input type="text" />
  29. </div>
  30. </el-card>
  31. </div>
  32. </div>
  33. </div>
  34. </template>
  35. <script>
  36. import { SGraphScene, SGraphView } from "@persagy-web/graph/";
  37. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  38. import { SPoint } from "@persagy-web/draw/";
  39. import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
  40. //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
  41. export default {
  42. name: "line",
  43. data() {
  44. return {
  45. scene: null,
  46. view: null,
  47. isCreated:false, //是否创建完成
  48. cmdStatus: 'choice' //选中状态
  49. };
  50. },
  51. mounted() {
  52. this.view = new SGraphView("edit_line");
  53. this.scene = new SGraphScene();
  54. this.view.scene = this.scene;
  55. },
  56. methods: {
  57. create() {
  58. this.cmdStatus = 'create';
  59. // this.scene.root.children = [];
  60. const lineItem = new EditLineItem(null, [] );
  61. lineItem.status = SItemStatus.Create;
  62. lineItem.connect("finishCreated", this, this.finishCreated);
  63. this.scene.addItem(lineItem);
  64. this.scene.grabItem = lineItem;
  65. this.scene.updated()
  66. },
  67. // 完成创建后的回调
  68. finishCreated(){
  69. this.cmdStatus = 'choice'
  70. }
  71. }
  72. };
  73. </script>
  74. <style scoped lang="less">
  75. .edit-line {
  76. width: 100%;
  77. height: 500px;
  78. .content {
  79. display: flex;
  80. .left {
  81. flex: 1;
  82. }
  83. .line-property {
  84. width: 300px;
  85. .always-item {
  86. display: flex;
  87. margin-top: 10px;
  88. justify-content: space-around;
  89. }
  90. }
  91. }
  92. .heightLight{
  93. color: #409EFF;
  94. border-color: #c6e2ff;
  95. background-color: #ecf5ff;
  96. }
  97. }
  98. </style>