SGraphItem.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. import { SMouseButton, SMouseEvent, SObject } from "@saga-web/base/lib";
  2. import { SPainter, SPoint, SRect } from "@saga-web/draw/lib";
  3. import { SGraphScene } from "./SGraphScene";
  4. /**
  5. * Graph图形引擎Item类
  6. *
  7. * @author 庞利祥(sybotan@126.com)
  8. */
  9. export class SGraphItem extends SObject {
  10. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  11. // 属性
  12. /** 场景对象 */
  13. private _scene: SGraphScene | null = null;
  14. get scene(): SGraphScene | null {
  15. if (null != this._parent) {
  16. return this._parent.scene;
  17. } else {
  18. return this._scene;
  19. }
  20. } // Get scene
  21. set scene(v: SGraphScene | null) {
  22. this._scene = v;
  23. this.update();
  24. } // Set scene
  25. /** parent属性存值函数 */
  26. private _parent: SGraphItem | null = null;
  27. get parent(): SGraphItem | null {
  28. return this._parent;
  29. } // Get parent
  30. set parent(v: SGraphItem | null) {
  31. // 如果parent未变更
  32. if (this.parent == v) {
  33. return;
  34. }
  35. // 如果原parent不为空
  36. if (this._parent != null) {
  37. // 将节点从原parent节点中摘除
  38. let i = this._parent.children.indexOf(this);
  39. this._parent.children.splice(i, 1);
  40. }
  41. this._parent = v;
  42. this.update();
  43. // 如果新parent不为空
  44. if (this._parent != null) {
  45. // 将节点加入到新parent节点中
  46. this._parent.children.push(this);
  47. this._parent.children.sort(SGraphItem.sortItemZOrder);
  48. }
  49. } // Set parent()
  50. /** 子节点 */
  51. children: SGraphItem[] = [];
  52. /** Z轴顺序 */
  53. private _zOrder: number = 0;
  54. get zOrder(): number {
  55. return this._zOrder;
  56. } // Get zOrder
  57. set zOrder(v: number) {
  58. this._zOrder = v;
  59. if (this._parent != null) {
  60. this._parent.children.sort(SGraphItem.sortItemZOrder);
  61. }
  62. this.update();
  63. } // Set zOrder
  64. /** 位置 */
  65. pos: SPoint = new SPoint(0, 0);
  66. /** X轴坐标 */
  67. get x(): number {
  68. return this.pos.x;
  69. } // Get x
  70. set x(v: number) {
  71. if (this.pos.x == v) {
  72. return;
  73. }
  74. let old = this.pos.x;
  75. this.pos.x = v;
  76. this.update();
  77. } // Set x
  78. /** Y轴坐标 */
  79. get y(): number {
  80. return this.pos.y;
  81. } // Get y
  82. set y(v: number) {
  83. if (this.pos.y == v) {
  84. return;
  85. }
  86. let old = this.pos.y;
  87. this.pos.y = v;
  88. this.update();
  89. } // Set y
  90. /** 缩放比例 */
  91. scale: number = 1;
  92. /** */
  93. private _inverseScale: number = 1;
  94. /** 旋转角度 */
  95. rolate: number = 0;
  96. /** 是否可见 */
  97. private _visible: boolean = true;
  98. get visible(): boolean {
  99. return this._visible;
  100. } // Get visible
  101. set visible(v: boolean) {
  102. this._visible = v;
  103. this.update();
  104. } // Set visible
  105. /** 是否可以移动 */
  106. moveable: boolean = false;
  107. /** 是否正在移动 */
  108. private _isMoving = false;
  109. /** 是否可用 */
  110. enabled: boolean = true;
  111. /** 是否可被选中 */
  112. selectable = false;
  113. /** 是否被选中 */
  114. private _selected = false;
  115. get selected(): boolean {
  116. return this._selected && this.selectable && this.enabled;
  117. } // Get selected
  118. set selected(value: boolean) {
  119. // 如果选择状态未变更
  120. if (this.selected == value) {
  121. return;
  122. }
  123. this._selected = value;
  124. this.update();
  125. } // Set selected
  126. /** 是否进行变形 */
  127. isTransform = true;
  128. /** 鼠标按下时位置 */
  129. private _mouseDownPos = new SPoint();
  130. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  131. // 函数
  132. /**
  133. * 构造函数
  134. *
  135. * @param parent 指向父对象
  136. */
  137. constructor(parent: SGraphItem | null = null) {
  138. super();
  139. if (parent) {
  140. this.parent = parent;
  141. }
  142. } // Function constructor()
  143. /**
  144. * Item绘制框架
  145. *
  146. * @param painter painter对象
  147. * @param rect 绘制区域
  148. */
  149. onPaint(painter: SPainter, rect: SRect): void {
  150. this.onDraw(painter);
  151. for (let item of this.children) {
  152. // 如果item不可见
  153. if (!item.visible) {
  154. continue;
  155. }
  156. // item所占矩阵与要刷新的矩阵相交则刷新,否则不刷
  157. // if (item.boundingRect()--rect){
  158. //
  159. // }
  160. // 保存画布状态
  161. painter.save();
  162. // item位移到指定位置绘制
  163. painter.translate(item.x, item.y);
  164. painter.scale(item.scale, item.scale);
  165. painter.rotate(item.rolate);
  166. // 如果不进行变形处理,则取消painter的变型操作
  167. if (!item.isTransform) {
  168. let matrix = painter.worldTransform;
  169. item._inverseScale = 1.0 / matrix.a;
  170. painter.scale(item._inverseScale, item._inverseScale);
  171. }
  172. // 设置绘制区域
  173. // canvas.clip(item.boundingRect())
  174. // rect 调整 宽度高度取最小值 根据pos位移
  175. // 绘制item
  176. item.onPaint(painter, rect);
  177. // 恢复画布状态
  178. painter.restore();
  179. }
  180. } // Function onPaint()
  181. /**
  182. * Item绘制操作
  183. *
  184. * @param painter painter对象
  185. */
  186. onDraw(painter: SPainter): void {} // Function onDraw()
  187. /**
  188. * 隐藏对象
  189. */
  190. hide(): void {
  191. this.visible = false;
  192. } // Function hide()
  193. /**
  194. * 显示对象
  195. */
  196. show(): void {
  197. this.visible = true;
  198. } // Function show()
  199. /**
  200. * 更新Item
  201. */
  202. update(): void {
  203. if (null != this.scene) {
  204. const view = this.scene.view;
  205. if (null != view) {
  206. view.update();
  207. }
  208. }
  209. } // Function update()
  210. /**
  211. * Item对象边界区域
  212. *
  213. * @return 对象边界区域
  214. */
  215. boundingRect(): SRect {
  216. return new SRect(0, 0, 10, 10);
  217. } // Function boundingRect()
  218. /**
  219. * 移动item到指定位置
  220. *
  221. * @param x 新位置的x坐标
  222. * @param y 新位置的y坐标
  223. */
  224. moveTo(x: number, y: number): void {
  225. this.x = x;
  226. this.y = y;
  227. } // moveTo()
  228. /**
  229. * 判断item是否包含点x,y
  230. *
  231. * @param x 横坐标(当前item)
  232. * @param y 纵坐标(当前item)
  233. *
  234. * @return boolean
  235. */
  236. contains(x: number, y: number): boolean {
  237. return this.boundingRect().contains(x, y);
  238. } // Function contains()
  239. /**
  240. * 获得item的路径节点列表。(该节点被加载到场景中,如果未被加载到场景中,计算会出错)
  241. *
  242. * @return *[]
  243. */
  244. itemPath(): SGraphItem[] {
  245. if (this.parent != null) {
  246. let list = this.parent.itemPath();
  247. list.push(this);
  248. return list;
  249. }
  250. return [this];
  251. } // Function itemPath()
  252. /**
  253. * 将场景中的xy坐标转换成item坐标。(该节点被加载到场景中,如果未被加载到场景中,计算会出错)
  254. *
  255. * @param x 场景中的横坐标
  256. * @param y 场景中的纵坐标
  257. *
  258. * @return 在item中的坐标
  259. */
  260. mapFromScene(x: number, y: number): SPoint {
  261. const m = this.scene2itemMattrix();
  262. const mp = new DOMPoint(x, y).matrixTransform(m.inverse());
  263. return new SPoint(mp.x, mp.y);
  264. } // Function mapFromScene()
  265. /**
  266. * 将item中的xy坐标转换成场景坐标。(该节点被加载到场景中,如果未被加载到场景中,计算会出错)
  267. *
  268. * @param x item中的横坐标
  269. * @param y item中的纵坐标
  270. *
  271. * @return 在场景中的坐标
  272. */
  273. mapToScene(x: number, y: number): SPoint {
  274. if (this.parent == null) {
  275. return new SPoint(x, y);
  276. }
  277. const m = this.scene2itemMattrix();
  278. const mp = new DOMPoint(x, y).matrixTransform(m);
  279. return new SPoint(mp.x, mp.y);
  280. } // Function mapToScene()
  281. /**
  282. * 场景对象到item对象的转换矩阵
  283. *
  284. * @return 转换矩阵
  285. */
  286. scene2itemMattrix(): DOMMatrix {
  287. let m = new DOMMatrix();
  288. let list = this.itemPath();
  289. for (let item of list) {
  290. m.translateSelf(item.x, item.y);
  291. m.scaleSelf(item.scale, item.scale);
  292. m.rotateSelf(item.rolate);
  293. // 如果不进行变形处理,则取消painter的变型操作
  294. if (!item.isTransform) {
  295. m.scaleSelf(item._inverseScale, item._inverseScale);
  296. }
  297. }
  298. return m;
  299. }
  300. // =================================================================================================================
  301. // 事件
  302. /**
  303. * 鼠标单击事件
  304. *
  305. * @param event 保存事件参数
  306. * @return boolean
  307. */
  308. onClick(event: SMouseEvent): boolean {
  309. for (let i = this.children.length - 1; i >= 0; i--) {
  310. let item = this.children[i];
  311. if (!this.acceptEvent() || !item.visible) {
  312. continue;
  313. }
  314. let ce = SGraphItem.toChildMouseEvent(item, event);
  315. if (item.contains(ce.x, ce.y) && item.onClick(ce)) {
  316. // 如果点在子项目上且子项目处理了事件
  317. return true;
  318. }
  319. }
  320. return false;
  321. } // Function onClick()
  322. /**
  323. * 鼠标双击事件
  324. *
  325. * @param event 保存事件参数
  326. * @return boolean
  327. */
  328. onDoubleClick(event: SMouseEvent): boolean {
  329. for (let i = this.children.length - 1; i >= 0; i--) {
  330. let item = this.children[i];
  331. if (!this.acceptEvent() || !item.visible) {
  332. continue;
  333. }
  334. let ce = SGraphItem.toChildMouseEvent(item, event);
  335. if (item.contains(ce.x, ce.y) && item.onDoubleClick(ce)) {
  336. // 如果点在子项目上且子项目处理了事件
  337. return true;
  338. }
  339. }
  340. return false;
  341. } // Function onDoubleClick()
  342. /**
  343. * 鼠标按下事件
  344. *
  345. * @param event 保存事件参数
  346. * @return boolean
  347. */
  348. onMouseDown(event: SMouseEvent): boolean {
  349. for (let i = this.children.length - 1; i >= 0; i--) {
  350. let item = this.children[i];
  351. if (!this.acceptEvent() || !item.visible) {
  352. continue;
  353. }
  354. let ce = SGraphItem.toChildMouseEvent(item, event);
  355. if (item.contains(ce.x, ce.y) && item.onMouseDown(ce)) {
  356. // 如果点在子项目上且子项目处理了事件
  357. return true;
  358. }
  359. }
  360. // 选择
  361. let select = false;
  362. if (this.selectable) {
  363. select = this.clickSelect(event);
  364. }
  365. // 移动
  366. if (this.moveable) {
  367. this._mouseDownPos = new SPoint(event.x, event.y);
  368. this._isMoving = true;
  369. this.grabItem(this);
  370. return true;
  371. }
  372. return select;
  373. } // Function onMouseDown()
  374. /**
  375. * 鼠标移动事件
  376. *
  377. * @param event 保存事件参数
  378. * @return boolean
  379. */
  380. onMouseMove(event: SMouseEvent): boolean {
  381. for (let i = this.children.length - 1; i >= 0; i--) {
  382. let item = this.children[i];
  383. if (!this.acceptEvent() || !item.visible) {
  384. continue;
  385. }
  386. let ce = SGraphItem.toChildMouseEvent(item, event);
  387. if (item.contains(ce.x, ce.y) && item.onMouseMove(ce)) {
  388. // 如果点在子项目上且子项目处理了事件
  389. return true;
  390. }
  391. }
  392. if (
  393. event.buttons & SMouseButton.LeftButton &&
  394. this.moveable &&
  395. this._isMoving
  396. ) {
  397. let old = new SPoint(this.pos.x, this.pos.y);
  398. const mp = this.toParentChange(
  399. event.x - this._mouseDownPos.x,
  400. event.y - this._mouseDownPos.y
  401. );
  402. this.moveTo(this.pos.x + mp.x, this.pos.y + mp.y);
  403. this.$emit("onMove", old, this.pos);
  404. }
  405. // 处理hover
  406. const scene = this.scene;
  407. if (null != scene) {
  408. if (scene.hoverItem == null || scene.hoverItem !== this) {
  409. if (scene.hoverItem != null) {
  410. scene.hoverItem.onMouseLeave(event);
  411. }
  412. this.onMouseEnter(event);
  413. scene.hoverItem = this;
  414. }
  415. }
  416. return true;
  417. } // Function onMouseMove()
  418. /**
  419. * 释放鼠标事件
  420. *
  421. * @param event 保存事件参数
  422. * @return boolean
  423. */
  424. onMouseUp(event: SMouseEvent): boolean {
  425. for (let i = this.children.length - 1; i >= 0; i--) {
  426. let item = this.children[i];
  427. if (!this.acceptEvent() || !item.visible) {
  428. continue;
  429. }
  430. let ce = SGraphItem.toChildMouseEvent(item, event);
  431. if (item.contains(ce.x, ce.y) && item.onMouseUp(ce)) {
  432. // 如果点在子项目上且子项目处理了事件
  433. return true;
  434. }
  435. }
  436. this._isMoving = false;
  437. this.releaseItem();
  438. return false;
  439. } // Function onMouseUp()
  440. /**
  441. * 鼠标进入事件
  442. *
  443. * @param event 保存事件参数
  444. * @return boolean
  445. */
  446. onMouseEnter(event: SMouseEvent): boolean {
  447. return false;
  448. } // Function onMouseEnter()
  449. /**
  450. * 鼠标离开事件
  451. *
  452. * @param event 保存事件参数
  453. * @return boolean
  454. */
  455. onMouseLeave(event: SMouseEvent): boolean {
  456. return false;
  457. } // Function onMouseLeave()
  458. /**
  459. * 上下文菜单事件
  460. *
  461. * @param event 事件参数
  462. */
  463. onContextMenu(event: SMouseEvent): boolean {
  464. for (let i = this.children.length - 1; i >= 0; i--) {
  465. let item = this.children[i];
  466. if (!this.acceptEvent() || !item.visible) {
  467. continue;
  468. }
  469. let ce = SGraphItem.toChildMouseEvent(item, event);
  470. if (item.contains(ce.x, ce.y) && item.onContextMenu(ce)) {
  471. // 如果点在子项目上且子项目处理了事件
  472. return true;
  473. }
  474. }
  475. return false;
  476. } // Function onContextMenu()
  477. /**
  478. * 按键按下事件
  479. *
  480. * @param event 事件参数
  481. */
  482. onKeyDown(event: KeyboardEvent): void {} // Function onKeyDown()
  483. /**
  484. * 按键press事件
  485. *
  486. * @param event 事件参数
  487. */
  488. onKeyPress(event: KeyboardEvent): void {} // Function onKeyPress()
  489. /**
  490. * 按键松开事件
  491. *
  492. * @param event 事件参数
  493. */
  494. onKeyUp(event: KeyboardEvent): void {} // Function onKeyUp()
  495. /**
  496. * 取消操作item事件
  497. *
  498. * */
  499. cancelOperate(): void {} // Function cancelOperate()
  500. /**
  501. * 返回item对应的数据对象
  502. *
  503. * */
  504. toData(): any | null {
  505. return null;
  506. } // Function toData()
  507. /**
  508. * 移动item后的处理,计算其他信息,将原点置为场景原点
  509. *
  510. * @param x x坐标
  511. * @param y y坐标
  512. * */
  513. moveToOrigin(x: number, y: number): void {
  514. if (this.children && this.children.length) {
  515. this.children.forEach(it => {
  516. it.moveToOrigin(x, y);
  517. });
  518. }
  519. } // Function moveToOrigin()
  520. // =================================================================================================================
  521. // 私有方法
  522. /**
  523. * 按ZOrder排序
  524. *
  525. * @param a 比较元素1
  526. * @param b 比较元素2
  527. * @return {number}
  528. */
  529. private static sortItemZOrder(a: SGraphItem, b: SGraphItem): number {
  530. return a.zOrder - b.zOrder;
  531. } // Function sortItemZOrder()
  532. /**
  533. * 鼠标事件转子对象鼠标事件
  534. *
  535. * @param child 子对象
  536. * @param event 事件参数
  537. * @return 子对象鼠标事件
  538. */
  539. private static toChildMouseEvent(
  540. child: SGraphItem,
  541. event: SMouseEvent
  542. ): SMouseEvent {
  543. let ce = new SMouseEvent(event);
  544. ce.matrix.translateSelf(child.x, child.y);
  545. ce.matrix.scaleSelf(child.scale, child.scale);
  546. ce.matrix.rotateSelf(0, 0, child.rolate);
  547. if (!child.isTransform) {
  548. ce.matrix.scaleSelf(child._inverseScale, child._inverseScale);
  549. }
  550. const mp = new DOMPoint(event.offsetX, event.offsetY).matrixTransform(
  551. ce.matrix.inverse()
  552. );
  553. ce.x = mp.x;
  554. ce.y = mp.y;
  555. return ce;
  556. } // Function toChildMouseEvent()
  557. /**
  558. * 锁定item
  559. *
  560. * @param item 被锁定的item
  561. */
  562. protected grabItem(item: SGraphItem): void {
  563. if (this.scene != null) {
  564. this.scene.grabItem = item;
  565. }
  566. } // Function grabItem
  567. /**
  568. * 释放被锁定的item
  569. */
  570. protected releaseItem(): void {
  571. if (this.scene != null) {
  572. this.scene.grabItem = null;
  573. }
  574. } // Function grabItem
  575. /**
  576. * 计算点在父节点的位置
  577. *
  578. * @param x X轴
  579. * @param y Y轴
  580. * @return 在父节点的位置
  581. */
  582. private toParentChange(x: number, y: number): SPoint {
  583. const m = new DOMMatrix();
  584. m.scaleSelf(this.scale, this.scale);
  585. m.rotateSelf(this.rolate);
  586. if (!this.isTransform) {
  587. m.scaleSelf(this._inverseScale, this._inverseScale);
  588. }
  589. const mp = new DOMPoint(x, y).matrixTransform(m);
  590. return new SPoint(mp.x, mp.y);
  591. }
  592. /**
  593. * 判断是否处理事件
  594. *
  595. * @return true: 处理事件,否则不处理
  596. */
  597. private acceptEvent(): boolean {
  598. return this.visible && this.enabled;
  599. } // Function acceptEvent()
  600. /**
  601. * 点选item对象
  602. *
  603. * @param event 事件参数
  604. */
  605. private clickSelect(event: SMouseEvent): boolean {
  606. // 如果Item不可被选中,或没有按下鼠标左键,则直接返回
  607. if (!this.selectable || event.buttons != SMouseButton.LeftButton) {
  608. return false;
  609. }
  610. const scene = this.scene;
  611. if (scene == null) {
  612. return false;
  613. }
  614. // 如果按下Ctrl键,只改变当前item的选择标志
  615. if (event.ctrlKey) {
  616. scene.selectContainer.toggleItem(this);
  617. } else {
  618. scene.selectContainer.setItem(this);
  619. }
  620. return true;
  621. } // Function clickSelect()
  622. } // Class SGraphItem