SGraphItem.ts 19 KB

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