selectContainer.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <div>
  3. <canvas :id="id" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { Component, Prop, Vue } from "vue-property-decorator";
  8. import { v1 as uuid } from "uuid";
  9. import {SGraphView, SGraphScene, SGraphRectItem} from "@persagy-web/graph/lib";
  10. import {SRect} from "@persagy-web/draw/lib";
  11. class ResizeRect extends SGraphRectItem{
  12. resize(oldSize: SRect, newSize: SRect):void{
  13. this.width = newSize.width;
  14. this.height = newSize.height;
  15. }
  16. }
  17. @Component
  18. export default class SelectContainerCanvas extends Vue {
  19. id: string = uuid();
  20. view: SGraphView | undefined;
  21. rectData = {
  22. x: 0,
  23. y: 0,
  24. width: 500,
  25. height: 500,
  26. radius: 0,
  27. style: {
  28. "default":{
  29. "stroke": "#cccccc",
  30. "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  31. "lineWidth": 2,
  32. "effect": {}
  33. },
  34. "selected": {
  35. "stroke": "#66ff66",
  36. "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
  37. "lineWidth": 3,
  38. "effect": {}
  39. },
  40. "disabled": {
  41. "stroke": "#333333",
  42. "fill": "#afafaf",
  43. "lineWidth": 1,
  44. "effect": {}
  45. },
  46. }
  47. };
  48. mounted():void {
  49. this.init()
  50. };
  51. init():void {
  52. this.view = new SGraphView(this.id);
  53. const scene = new SGraphScene();
  54. const item = new ResizeRect(null, this.rectData);
  55. scene.addItem(item);
  56. item.selectable = true;
  57. item.moveable = true;
  58. this.view.scene = scene;
  59. this.view.fitSceneToView();
  60. this.view.scalable = false;
  61. };
  62. }
  63. </script>
  64. <style scoped>
  65. </style>