SGraphView.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SMouseEvent, SNetUtil } from "@persagy-web/base";
  27. import {
  28. SCanvasPaintEngine,
  29. SCanvasView,
  30. SPainter,
  31. SPoint,
  32. SRect,
  33. SSvgPaintEngine
  34. } from "@persagy-web/draw";
  35. import { SGraphScene } from "./SGraphScene";
  36. import { SGraphItem } from "./SGraphItem";
  37. import { v1 as uuidv1 } from "uuid";
  38. import { SColor } from "@persagy-web/draw";
  39. /**
  40. * Graph 图形引擎视图类
  41. *
  42. * @author 庞利祥 <sybotan@126.com>
  43. */
  44. export class SGraphView extends SCanvasView {
  45. /** 场景对象 */
  46. private _scene: SGraphScene | null = null;
  47. get scene(): SGraphScene | null {
  48. return this._scene;
  49. } // Get scene
  50. set scene(v: SGraphScene | null) {
  51. if (this._scene != null) {
  52. this._scene.view = null;
  53. }
  54. this._scene = v;
  55. if (this._scene != null) {
  56. this._scene.view = this;
  57. }
  58. this.update();
  59. } // Set scene
  60. /** 背景色 */
  61. backgroundColor: SColor = SColor.Transparent;
  62. /** 旋转角度 */
  63. rotate: number = 0;
  64. /**
  65. * 构造函数
  66. *
  67. * @param id 画布对象 ID
  68. */
  69. constructor(id: string) {
  70. super(id);
  71. } // Function constructor()
  72. /**
  73. * 保存场景 SVG 文件
  74. *
  75. * @param name 文件名
  76. * @param width svg 宽度
  77. * @param height svg 高度
  78. */
  79. saveSceneSvg(name: string, width: number, height: number): void {
  80. let url = URL.createObjectURL(
  81. new Blob([this.sceneSvgData(width, height)], {
  82. type: "text/xml,charset=UTF-8"
  83. })
  84. );
  85. SNetUtil.downLoad(name, url);
  86. } // Function saveSceneSvg()
  87. /**
  88. * 场景 SVG 图形的数据
  89. *
  90. * @param width svg 宽度
  91. * @param height svg 高度
  92. * @return URL 地址
  93. */
  94. sceneSvgData(width: number, height: number): string {
  95. if (null == this.scene) {
  96. return "";
  97. }
  98. let engine = new SSvgPaintEngine(width, height);
  99. let painter = new SPainter(engine);
  100. // 保存视图缩放比例与原点位置
  101. let s0 = this.scale;
  102. let x0 = this.origin.x;
  103. let y0 = this.origin.y;
  104. // 场景中无对象
  105. let rect = this.scene.allItemRect();
  106. this.fitRectToSize(width, height, rect);
  107. this.onDraw(painter);
  108. // 恢复视图缩放比例与原点位置
  109. this.scale = s0;
  110. this.origin.x = x0;
  111. this.origin.y = y0;
  112. return engine.toSvg();
  113. } // Function saveSvg()
  114. /**
  115. * 适配视图到视图
  116. */
  117. fitSceneToView(): void {
  118. if (null == this.scene) {
  119. return;
  120. }
  121. // 场景中无对象
  122. let rect = this.scene.allItemRect();
  123. this.fitRectToSize(this.width, this.height, rect);
  124. } // Function FitView()
  125. /**
  126. * 适配选中的对象在视图中可见
  127. */
  128. fitSelectedToView(): void {
  129. if (null == this.scene) {
  130. return;
  131. }
  132. // 场景中无对象
  133. let rect = this.scene.selectedItemRect();
  134. this.fitRectToSize(this.width, this.height, rect);
  135. } // Function fitSelectedToSize()
  136. /**
  137. * 适配任意对象在视图中可见
  138. */
  139. fitItemToView(itemList: SGraphItem[]): void {
  140. if (null == this.scene) {
  141. return;
  142. }
  143. let rect: SRect | null = null;
  144. // 依次取 item 列中的所有 item。将所有 item 的边界做并焦处理。
  145. for (let item of itemList) {
  146. if (rect == null) {
  147. rect = item.boundingRect().translated(item.pos.x, item.pos.y);
  148. } else {
  149. rect.union(
  150. item.boundingRect().translated(item.pos.x, item.pos.y)
  151. );
  152. }
  153. }
  154. // 场景中无对象
  155. this.fitRectToSize(this.width, this.height, rect);
  156. } // Function fitItemToView()
  157. /**
  158. * 将场景中的 x, y 坐标转换成视图坐标。
  159. *
  160. * @param x 场景中的横坐标
  161. * @param y 场景中的纵坐标
  162. * @return 视图坐标
  163. */
  164. mapFromScene(x: number, y: number): SPoint;
  165. /**
  166. * 将场景中的 x, y 坐标转换成视图坐标。
  167. *
  168. * @param pos 场景中的坐标
  169. * @return 视图坐标
  170. */
  171. mapFromScene(pos: SPoint): SPoint;
  172. /**
  173. * 将场景中的 x, y 坐标转换成视图坐标(重载实现)。
  174. *
  175. * @param x 场景中的横坐标
  176. * @param y 场景中的纵坐标
  177. * @return 视图坐标
  178. */
  179. mapFromScene(x: number | SPoint, y?: number): SPoint {
  180. if (x instanceof SPoint) {
  181. // 如果传入的是 SPoint 对象
  182. return new SPoint(
  183. x.x * this.scale + this.origin.x,
  184. x.y * this.scale + this.origin.y
  185. );
  186. }
  187. // @ts-ignore
  188. return new SPoint(
  189. x * this.scale + this.origin.x,
  190. (y == undefined ? 0 : y) * this.scale + this.origin.y
  191. );
  192. } // Function mapFromScene()
  193. /**
  194. * 将视图的 x, y 坐标转换成场景坐标。
  195. *
  196. * @param x 视图横坐标
  197. * @param y 视图纵坐标
  198. * @return 场景坐标
  199. */
  200. mapToScene(x: number, y: number): SPoint;
  201. /**
  202. * 将视图的 x, y 坐标转换成场景坐标。
  203. *
  204. * @param pos 视图坐标
  205. * @return 场景坐标
  206. */
  207. mapToScene(pos: SPoint): SPoint;
  208. /**
  209. * 将视图的 x, y 坐标转换成场景坐标。(不推荐在外部调用)
  210. *
  211. * @param x 视图的横坐标或 SPoint 对象
  212. * @param y 视图的纵坐标
  213. * @return 场景坐标
  214. */
  215. mapToScene(x: number | SPoint, y?: number): SPoint {
  216. if (x instanceof SPoint) {
  217. // 如果传入的是 SPoint 对象
  218. return new SPoint(
  219. (x.x - this.origin.x) / this.scale,
  220. (x.y - this.origin.y) / this.scale
  221. );
  222. }
  223. return new SPoint(
  224. (x - this.origin.x) / this.scale,
  225. ((y == undefined ? 0 : y) - this.origin.y) / this.scale
  226. );
  227. } // Function mapToScene()
  228. /**
  229. * 保存图像
  230. *
  231. * @param name 名称
  232. * @param type 图像类型
  233. * @param width 要保存图形的宽
  234. * @param height 要保存图形的高
  235. */
  236. saveImageSize(
  237. name: string,
  238. type: string,
  239. width: number,
  240. height: number
  241. ): void {
  242. const can = document.createElement("CANVAS") as HTMLCanvasElement;
  243. can.width = width;
  244. can.height = height;
  245. can.id = uuidv1();
  246. const body = document.getElementsByTagName("body")[0];
  247. body.appendChild(can);
  248. let engine = new SCanvasPaintEngine(
  249. can.getContext("2d") as CanvasRenderingContext2D
  250. );
  251. let painter = new SPainter(engine);
  252. let vi = new SGraphView(can.id);
  253. vi.scene = this.scene;
  254. vi.fitSceneToView();
  255. vi.backgroundColor = new SColor("#FFFFFF");
  256. vi.onDraw(painter);
  257. vi.saveImage(name, type);
  258. // @ts-ignore
  259. this.scene.view = this;
  260. can.remove();
  261. // @ts-ignore
  262. vi = null;
  263. } // Function saveImageSize()
  264. /**
  265. * 绘制视图
  266. *
  267. * @param painter 绘制对象
  268. */
  269. protected onDraw(painter: SPainter): void {
  270. painter.save();
  271. painter.clearRect(0, 0, this.width, this.height);
  272. painter.restore();
  273. // 如果未设备场景
  274. if (this.scene == null) {
  275. return;
  276. }
  277. // 绘制背景
  278. painter.save();
  279. this.drawBackground(painter);
  280. painter.restore();
  281. // 绘制场景
  282. painter.save();
  283. painter.translate(this.origin.x, this.origin.y);
  284. painter.scale(this.scale, this.scale);
  285. painter.rotate(this.rotate);
  286. this.scene.drawScene(painter, new SRect());
  287. painter.restore();
  288. // 绘制前景
  289. painter.save();
  290. this.drawForeground(painter);
  291. painter.restore();
  292. } // Function onDraw();
  293. /**
  294. * 绘制场景背景
  295. *
  296. * @param painter 绘制对象
  297. */
  298. protected drawBackground(painter: SPainter): void {
  299. painter.brush.color = this.backgroundColor;
  300. painter.pen.color = SColor.Transparent;
  301. painter.drawRect(0, 0, this.width, this.height);
  302. // DO NOTHING
  303. } // Function drawBackground()
  304. /**
  305. * 绘制场景前景
  306. *
  307. * @param painter 绘制对象
  308. */
  309. protected drawForeground(painter: SPainter): void {
  310. // DO NOTHING
  311. } // Function drawForeground()
  312. /**
  313. * 鼠标双击事件
  314. *
  315. * @param event 事件参数
  316. */
  317. protected onDoubleClick(event: MouseEvent): void {
  318. if (this.scene != null) {
  319. let ce = this.toSceneMotionEvent(event);
  320. this.scene.onDoubleClick(ce);
  321. }
  322. } // Function onDoubleClick()
  323. /**
  324. * 鼠标按下事件
  325. *
  326. * @param event 事件参数
  327. */
  328. protected onMouseDown(event: MouseEvent): void {
  329. super.onMouseDown(event);
  330. if (this.scene != null) {
  331. let ce = this.toSceneMotionEvent(event);
  332. this.scene.onMouseDown(ce);
  333. }
  334. } // Function onMouseDown()
  335. /**
  336. * 鼠标移动事件
  337. *
  338. * @param event 事件参数
  339. */
  340. protected onMouseMove(event: MouseEvent): void {
  341. super.onMouseMove(event);
  342. if (this.scene != null) {
  343. let ce = this.toSceneMotionEvent(event);
  344. this.scene.onMouseMove(ce);
  345. }
  346. } // Function onMouseMove()
  347. /**
  348. * 鼠标松开事件
  349. *
  350. * @param event 事件参数
  351. */
  352. protected onMouseUp(event: MouseEvent): void {
  353. super.onMouseUp(event);
  354. if (this.scene != null) {
  355. let ce = this.toSceneMotionEvent(event);
  356. this.scene.onMouseUp(ce);
  357. }
  358. } // Function onMouseUp()
  359. /**
  360. * 上下文菜单事件
  361. *
  362. * @param event 事件参数
  363. */
  364. protected onContextMenu(event: MouseEvent): void {
  365. if (this.scene != null) {
  366. let ce = this.toSceneMotionEvent(event);
  367. this.scene.onContextMenu(ce);
  368. }
  369. } // Function onContextMenu()
  370. /**
  371. * 按键按下事件
  372. *
  373. * @param event 事件参数
  374. */
  375. protected onKeyDown(event: KeyboardEvent): void {
  376. if (this.scene != null) {
  377. this.scene.onKeyDown(event);
  378. }
  379. } // Function onKeyDown()
  380. /**
  381. * 按键松开事件
  382. *
  383. * @param event 事件参数
  384. */
  385. protected onKeyUp(event: KeyboardEvent): void {
  386. if (this.scene != null) {
  387. this.scene.onKeyUp(event);
  388. }
  389. } // Function onKeyUp()
  390. /**
  391. * 适配场景在视图中可见
  392. *
  393. * @param width 宽度
  394. * @param height 高度
  395. * @param rect 对象的矩阵大小
  396. */
  397. private fitRectToSize(
  398. width: number,
  399. height: number,
  400. rect: SRect | null
  401. ): void {
  402. // 未设置场景
  403. if (null == rect || !rect.isValid()) {
  404. return;
  405. }
  406. this.scale = Math.min(width / rect.width, height / rect.height) * 0.8;
  407. // 计算场景中心点
  408. let center = rect.center();
  409. this.origin.x = width / 2.0 - center.x * this.scale;
  410. this.origin.y = height / 2.0 - center.y * this.scale;
  411. } // Function fitRectToSize()
  412. /**
  413. * MouseEvent 事件转换成场景 SMouseEvent 事件
  414. *
  415. * @param event 事件参数
  416. * @return MouseEvent 事件转换成场景 SMouseEvent 事件
  417. */
  418. private toSceneMotionEvent(event: MouseEvent): SMouseEvent {
  419. let se = new SMouseEvent(event);
  420. se.matrix.translate(this.origin.x, this.origin.y);
  421. se.matrix.scale(this.scale, this.scale);
  422. se.matrix.rotate(this.rotate);
  423. const mp = new SPoint(event.offsetX, event.offsetY).matrixTransform(
  424. se.matrix.inversed()
  425. );
  426. se.x = mp.x;
  427. se.y = mp.y;
  428. return se;
  429. } // Function toSceneMotionEvent()
  430. } // Class SGraphView