SGraphView.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.SGraphView = void 0;
  4. const lib_1 = require("@persagy-web/base/lib");
  5. const lib_2 = require("@persagy-web/draw/lib");
  6. const uuid_1 = require("uuid");
  7. const draw_1 = require("@persagy-web/draw");
  8. class SGraphView extends lib_2.SCanvasView {
  9. constructor(id) {
  10. super(id);
  11. this._scene = null;
  12. this.backgroundColor = draw_1.SColor.Transparent;
  13. this.rotate = 0;
  14. }
  15. get scene() {
  16. return this._scene;
  17. }
  18. set scene(v) {
  19. if (this._scene != null) {
  20. this._scene.view = null;
  21. }
  22. this._scene = v;
  23. if (this._scene != null) {
  24. this._scene.view = this;
  25. }
  26. this.update();
  27. }
  28. saveSceneSvg(name, width, height) {
  29. let url = URL.createObjectURL(new Blob([this.sceneSvgData(width, height)], {
  30. type: "text/xml,charset=UTF-8"
  31. }));
  32. lib_1.SNetUtil.downLoad(name, url);
  33. }
  34. sceneSvgData(width, height) {
  35. if (null == this.scene) {
  36. return "";
  37. }
  38. let engine = new lib_2.SSvgPaintEngine(width, height);
  39. let painter = new lib_2.SPainter(engine);
  40. let s0 = this.scale;
  41. let x0 = this.origin.x;
  42. let y0 = this.origin.y;
  43. let rect = this.scene.allItemRect();
  44. this.fitRectToSize(width, height, rect);
  45. this.onDraw(painter);
  46. this.scale = s0;
  47. this.origin.x = x0;
  48. this.origin.y = y0;
  49. return engine.toSvg();
  50. }
  51. fitSceneToView() {
  52. if (null == this.scene) {
  53. return;
  54. }
  55. let rect = this.scene.allItemRect();
  56. this.fitRectToSize(this.width, this.height, rect);
  57. }
  58. fitSelectedToView() {
  59. if (null == this.scene) {
  60. return;
  61. }
  62. let rect = this.scene.selectedItemRect();
  63. this.fitRectToSize(this.width, this.height, rect);
  64. }
  65. fitItemToView(itemList) {
  66. if (null == this.scene) {
  67. return;
  68. }
  69. let rect = null;
  70. for (let item of itemList) {
  71. if (rect == null) {
  72. rect = item.boundingRect().translated(item.pos.x, item.pos.y);
  73. }
  74. else {
  75. rect.union(item.boundingRect().translated(item.pos.x, item.pos.y));
  76. }
  77. }
  78. this.fitRectToSize(this.width, this.height, rect);
  79. }
  80. mapFromScene(x, y) {
  81. if (x instanceof lib_2.SPoint) {
  82. return new lib_2.SPoint(x.x * this.scale + this.origin.x, x.y * this.scale + this.origin.y);
  83. }
  84. return new lib_2.SPoint(x * this.scale + this.origin.x, (y == undefined ? 0 : y) * this.scale + this.origin.y);
  85. }
  86. mapToScene(x, y) {
  87. if (x instanceof lib_2.SPoint) {
  88. return new lib_2.SPoint((x.x - this.origin.x) / this.scale, (x.y - this.origin.y) / this.scale);
  89. }
  90. return new lib_2.SPoint((x - this.origin.x) / this.scale, ((y == undefined ? 0 : y) - this.origin.y) / this.scale);
  91. }
  92. saveImageSize(name, type, width, height) {
  93. const can = document.createElement("CANVAS");
  94. can.width = width;
  95. can.height = height;
  96. can.id = uuid_1.v1();
  97. const body = document.getElementsByTagName("body")[0];
  98. body.appendChild(can);
  99. let engine = new lib_2.SCanvasPaintEngine(can.getContext("2d"));
  100. let painter = new lib_2.SPainter(engine);
  101. let vi = new SGraphView(can.id);
  102. vi.scene = this.scene;
  103. vi.fitSceneToView();
  104. vi.backgroundColor = new draw_1.SColor("#FFFFFF");
  105. vi.onDraw(painter);
  106. vi.saveImage(name, type);
  107. this.scene.view = this;
  108. can.remove();
  109. vi = null;
  110. }
  111. onDraw(painter) {
  112. painter.save();
  113. painter.clearRect(0, 0, this.width, this.height);
  114. painter.restore();
  115. if (this.scene == null) {
  116. return;
  117. }
  118. painter.save();
  119. this.drawBackground(painter);
  120. painter.restore();
  121. painter.save();
  122. painter.translate(this.origin.x, this.origin.y);
  123. painter.scale(this.scale, this.scale);
  124. painter.rotate(this.rotate);
  125. this.scene.drawScene(painter, new lib_2.SRect());
  126. painter.restore();
  127. painter.save();
  128. this.drawForeground(painter);
  129. painter.restore();
  130. }
  131. drawBackground(painter) {
  132. painter.brush.color = this.backgroundColor;
  133. painter.pen.color = draw_1.SColor.Transparent;
  134. painter.drawRect(0, 0, this.width, this.height);
  135. }
  136. drawForeground(painter) {
  137. }
  138. onDoubleClick(event) {
  139. if (this.scene != null) {
  140. let ce = this.toSceneMotionEvent(event);
  141. this.scene.onDoubleClick(ce);
  142. }
  143. }
  144. onMouseDown(event) {
  145. super.onMouseDown(event);
  146. if (this.scene != null) {
  147. let ce = this.toSceneMotionEvent(event);
  148. this.scene.onMouseDown(ce);
  149. }
  150. }
  151. onMouseMove(event) {
  152. super.onMouseMove(event);
  153. if (this.scene != null) {
  154. let ce = this.toSceneMotionEvent(event);
  155. this.scene.onMouseMove(ce);
  156. }
  157. }
  158. onMouseUp(event) {
  159. super.onMouseUp(event);
  160. if (this.scene != null) {
  161. let ce = this.toSceneMotionEvent(event);
  162. this.scene.onMouseUp(ce);
  163. }
  164. }
  165. onContextMenu(event) {
  166. if (this.scene != null) {
  167. let ce = this.toSceneMotionEvent(event);
  168. this.scene.onContextMenu(ce);
  169. }
  170. }
  171. onKeyDown(event) {
  172. if (this.scene != null) {
  173. this.scene.onKeyDown(event);
  174. }
  175. }
  176. onKeyUp(event) {
  177. if (this.scene != null) {
  178. this.scene.onKeyUp(event);
  179. }
  180. }
  181. fitRectToSize(width, height, rect) {
  182. if (null == rect || !rect.isValid()) {
  183. return;
  184. }
  185. this.scale = Math.min(width / rect.width, height / rect.height) * 0.8;
  186. let center = rect.center();
  187. this.origin.x = width / 2.0 - center.x * this.scale;
  188. this.origin.y = height / 2.0 - center.y * this.scale;
  189. }
  190. toSceneMotionEvent(event) {
  191. let se = new lib_1.SMouseEvent(event);
  192. se.matrix.translate(this.origin.x, this.origin.y);
  193. se.matrix.scale(this.scale, this.scale);
  194. se.matrix.rotate(this.rotate);
  195. const mp = new lib_2.SPoint(event.offsetX, event.offsetY).matrixTransform(se.matrix.inversed());
  196. se.x = mp.x;
  197. se.y = mp.y;
  198. return se;
  199. }
  200. }
  201. exports.SGraphView = SGraphView;