EagleView.ts 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { SGraphView } from "@persagy-web/graph";
  2. import { SMouseButton, SMouseEvent } from "@persagy-web/base/";
  3. import {SPoint, SColor, SPainter, SRect} from "@persagy-web/draw/lib";
  4. export class EagleView extends SGraphView {
  5. // 记录左键按下位置
  6. private _leftKeyPos: SPoint = new SPoint();
  7. // 可视区域即 大图中展示的区域 在 标准视图中的位置及大小
  8. // 可视区域宽度
  9. _rectW: number = 200;
  10. get rectW():number{
  11. return this._rectW;
  12. }
  13. set rectW(v:number) {
  14. this._rectW = v;
  15. this.update()
  16. }
  17. // 可视区域高度
  18. _rectH: number = 100;
  19. get rectH():number{
  20. return this._rectH;
  21. }
  22. set rectH(v:number) {
  23. this._rectH = v;
  24. this.update()
  25. }
  26. // 可视区域中心点
  27. rectC: SPoint = new SPoint(100, 100);
  28. // 可视区域描述的矩形
  29. rect: SRect = new SRect();
  30. // 鼠标按下的点是否在区域内
  31. inRect: boolean = false;
  32. /**
  33. * 鼠标按下事件
  34. *
  35. * @param event 事件参数
  36. */
  37. protected onMouseDown(event: MouseEvent): void {
  38. let se = new SMouseEvent(event);
  39. // 判断是否在可视区域内
  40. if (this.rect.contains(event.offsetX, event.offsetY)) {
  41. this.inRect = true;
  42. }
  43. // 设置可视区域中心点
  44. this.rectC.x = event.offsetX;
  45. this.rectC.y = event.offsetY;
  46. this.update();
  47. // 按下鼠标左键
  48. if (se.buttons & SMouseButton.LeftButton) {
  49. this._leftKeyPos.x = se.x;
  50. this._leftKeyPos.y = se.y;
  51. }
  52. // 将事件对象中的坐标转为场景坐标,并抛出事件
  53. const ev = this.toSceneMotionEvent(event);
  54. this.$emit('viewMouseMove', ev);
  55. }
  56. /**
  57. * 鼠标移动事件
  58. *
  59. * @param event 事件参数
  60. */
  61. protected onMouseMove(event: MouseEvent): void {
  62. // 按下的点如果在可视区域内,则执行移动可视区域方法
  63. if (this.inRect) {
  64. this.rectC.x = event.offsetX;
  65. this.rectC.y = event.offsetY;
  66. const ev = this.toSceneMotionEvent(event);
  67. this.$emit('viewMouseMove', ev);
  68. this.update();
  69. }
  70. }
  71. /**
  72. * 鼠标抬起事件
  73. *
  74. * @param event 事件参数
  75. */
  76. protected onMouseUp(event: MouseEvent): void {
  77. // 按键抬起时 初始化值
  78. this.inRect = false;
  79. }
  80. /**
  81. * 绘制前景
  82. *
  83. * @param painter 绘制对象
  84. */
  85. protected drawForeground(painter: SPainter): void {
  86. // 设置画笔,画刷样式
  87. painter.pen.color = new SColor('#efb42f');
  88. painter.pen.lineWidth = 2;
  89. painter.brush.color = new SColor('#efb42f38');
  90. // 绘制可视区域
  91. this.rect = new SRect(this.rectC.x - this.rectW / 2, this.rectC.y - this.rectH / 2, this.rectW, this.rectH);
  92. painter.drawRect(this.rect);
  93. }
  94. }