SGraphSelectContainer.ts 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035
  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 { SGraphItem } from "./SGraphItem";
  27. import { SGraphLayoutType } from "./enums/SGraphLayoutType";
  28. import { SOrderSetType } from "./enums/SOrderSetType";
  29. import { SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw";
  30. import { SMathUtil } from "./utils/SMathUtil";
  31. import { SMouseEvent } from "@persagy-web/base";
  32. /**
  33. * 基本选择器
  34. *
  35. * @author 郝建龙 <haojianlong@sagacloud.cn>
  36. */
  37. export class SGraphSelectContainer extends SGraphItem {
  38. /** 选择对象 list */
  39. private _itemList: SGraphItem[] = [];
  40. get itemList(): SGraphItem[] {
  41. return this._itemList;
  42. } // Get itemList
  43. /** 外接点的 list */
  44. private pointList: SPoint[] = [];
  45. /** item 宽 */
  46. private _width: number = 0;
  47. get width(): number {
  48. return this._width;
  49. } // Get width
  50. set width(v: number) {
  51. if (v == this._width) {
  52. return;
  53. }
  54. this._width = v;
  55. this.update();
  56. } // Set width
  57. /** item 高 */
  58. private _height: number = 0;
  59. get height(): number {
  60. return this._height;
  61. } // Get height
  62. set height(v: number) {
  63. if (v == this._height) {
  64. return;
  65. }
  66. this._height = v;
  67. this.update();
  68. } // Set height
  69. /** 修改之前的宽 */
  70. private oldWidth: number = 0;
  71. /** 修改之前的高 */
  72. private oldHeight: number = 0;
  73. /** 最小宽 */
  74. minWidth: number = 0;
  75. /** 最大宽 */
  76. maxWidth: number = Number.MAX_SAFE_INTEGER;
  77. /** 最小高 */
  78. minHeight: number = 0;
  79. /** 最小高 */
  80. maxHeight: number = Number.MAX_SAFE_INTEGER;
  81. /** 边框颜色 */
  82. _strokeColor: SColor = new SColor("#82C7FC");
  83. /** 画笔颜色 */
  84. get strokeColor(): SColor {
  85. return this._strokeColor;
  86. } // Get strokeColor
  87. set strokeColor(v: SColor) {
  88. this._strokeColor = v;
  89. this.update();
  90. } // Set strokeColor
  91. /** 填充颜色 */
  92. _fillColor: SColor = new SColor("#ffffff");
  93. get fillColor(): SColor {
  94. return this._fillColor;
  95. } // Get fillColor
  96. set fillColor(v: SColor) {
  97. this._fillColor = v;
  98. this.update();
  99. } // Set fillColor
  100. /** 统计选中 item 的数量 */
  101. get count(): number {
  102. return this.itemList.length;
  103. } // Get count
  104. /** 置顶 zOrder 增加基数 */
  105. private radix: number = 0.001;
  106. /** 定时器 */
  107. private timer: number | undefined;
  108. /** 半径 */
  109. radius: number = 5;
  110. /** 全局灵敏度 */
  111. dis: number = 10;
  112. /** 灵敏度转换为场景长度 */
  113. private sceneDis: number = 10;
  114. /** 当前点索引 */
  115. private _curIndex: number = -1;
  116. get curIndex(): number {
  117. return this._curIndex;
  118. } // get curIndex
  119. set curIndex(v: number) {
  120. if (v === this._curIndex) {
  121. return;
  122. }
  123. this._curIndex = v;
  124. this.update();
  125. } // set curIndex
  126. /** 当前点索引 */
  127. private curPoint: SPoint | undefined;
  128. /** 鼠标样式 */
  129. static cursorList: string[] = [
  130. "nw-resize",
  131. "n-resize",
  132. "ne-resize",
  133. "e-resize",
  134. "se-resize",
  135. "s-resize",
  136. "sw-resize",
  137. "w-resize",
  138. "move",
  139. "default"
  140. ];
  141. /**
  142. * 构造体
  143. */
  144. constructor() {
  145. super();
  146. this.zOrder = 9999999;
  147. this.visible = false;
  148. this.moveable = true;
  149. } // Constructor
  150. /**
  151. * 添加 item 到 list
  152. *
  153. * @param item 当前选中的 item
  154. */
  155. addItem(item: SGraphItem): void {
  156. for (let i = 0; i < this.itemList.length; i++) {
  157. if (this.itemList[i] == item) {
  158. return;
  159. }
  160. }
  161. item.selected = true;
  162. this.itemList.push(item);
  163. this.throttle(this.selectChange, 80);
  164. } // Function addItem()
  165. /**
  166. * 清空再添加(事件+复制数组)
  167. *
  168. * @param item 当前选中的 item
  169. */
  170. setItem(item: SGraphItem): void {
  171. this.itemList.forEach((t: SGraphItem): void => {
  172. t.selected = false;
  173. });
  174. this.itemList.length = 0;
  175. item.selected = true;
  176. this.itemList.push(item);
  177. this.throttle(this.selectChange, 80);
  178. } // Function setItem()
  179. /**
  180. * 清空选择对象
  181. */
  182. clear(): void {
  183. this.itemList.forEach((t: SGraphItem): void => {
  184. t.selected = false;
  185. });
  186. this.itemList.length = 0;
  187. this.throttle(this.selectChange, 80);
  188. } // Function clear()
  189. /**
  190. * 切换选择对象
  191. *
  192. * @param item 当前选中的 item
  193. */
  194. toggleItem(item: SGraphItem): void {
  195. for (let i = 0; i < this.itemList.length; i++) {
  196. if (this.itemList[i] == item) {
  197. this.itemList[i].selected = false;
  198. this.itemList.splice(i, 1);
  199. this.throttle(this.selectChange, 80);
  200. return;
  201. }
  202. }
  203. // 多选时,父级 item 需要一致
  204. if (this.itemList.length) {
  205. if (item.parent != this.itemList[0].parent) {
  206. return;
  207. }
  208. }
  209. item.selected = true;
  210. this.itemList.push(item);
  211. this.throttle(this.selectChange, 80);
  212. } // Function toggleItem()
  213. /**
  214. * 对齐
  215. *
  216. * @param type 对齐方式
  217. */
  218. layout(type: SGraphLayoutType): void {
  219. if (this.itemList.length < 2) {
  220. return;
  221. }
  222. switch (type) {
  223. case SGraphLayoutType.Left:
  224. this.alignLeft();
  225. break;
  226. case SGraphLayoutType.Bottom:
  227. this.alignBottom();
  228. break;
  229. case SGraphLayoutType.Center:
  230. this.alignCenter();
  231. break;
  232. case SGraphLayoutType.Horizontal:
  233. this.alignHorizontal();
  234. break;
  235. case SGraphLayoutType.Middle:
  236. this.alignMiddle();
  237. break;
  238. case SGraphLayoutType.Right:
  239. this.alignRight();
  240. break;
  241. case SGraphLayoutType.Top:
  242. this.alignTop();
  243. break;
  244. case SGraphLayoutType.Vertical:
  245. this.alignVertical();
  246. break;
  247. default:
  248. console.log("对齐类型不存在");
  249. break;
  250. }
  251. } // Function layout()
  252. /**
  253. * 图层操作
  254. *
  255. * @param type 操作类型
  256. */
  257. setOrder(type: SOrderSetType): void {
  258. if (this.itemList.length < 1) {
  259. return;
  260. }
  261. switch (type) {
  262. case SOrderSetType.Top:
  263. this.setTop();
  264. break;
  265. case SOrderSetType.Bottom:
  266. this.setBottom();
  267. break;
  268. case SOrderSetType.After:
  269. this.setAfter();
  270. break;
  271. case SOrderSetType.Before:
  272. this.setBefore();
  273. break;
  274. default:
  275. console.log("图层操作类型不存在");
  276. break;
  277. }
  278. } // Function setOrder()
  279. /**
  280. * 左对齐
  281. */
  282. private alignLeft(): void {
  283. let standardItem = this.itemList[0];
  284. // 计算第一个外接矩阵左上角坐标在场景中的坐标
  285. let p = standardItem.mapToScene(
  286. standardItem.boundingRect().x,
  287. standardItem.boundingRect().y
  288. );
  289. for (let i = 1; i < this.itemList.length; i++) {
  290. let curItem = this.itemList[i];
  291. if (curItem.moveable) {
  292. // 将 p 转换为当前 item 中的坐标
  293. let p1 = curItem.mapFromScene(p.x, p.y);
  294. // 根据等式差值相等 newboundx - oldboundx = newposx - oldposx => newposx = newboundx - oldboundx + oldposx
  295. curItem.x =
  296. (p1.x - curItem.boundingRect().x) * curItem.inverseScale +
  297. curItem.x;
  298. }
  299. }
  300. } // Function alignLeft()
  301. /**
  302. * 顶对齐
  303. */
  304. private alignTop(): void {
  305. let standardItem = this.itemList[0];
  306. let p = standardItem.mapToScene(
  307. standardItem.boundingRect().x,
  308. standardItem.boundingRect().y
  309. );
  310. for (let i = 1; i < this.itemList.length; i++) {
  311. let curItem = this.itemList[i];
  312. if (curItem.moveable) {
  313. let p1 = curItem.mapFromScene(p.x, p.y);
  314. curItem.y =
  315. (p1.y - curItem.boundingRect().y) * curItem.inverseScale +
  316. curItem.y;
  317. }
  318. }
  319. } // Function alignTop()
  320. /**
  321. * 右对齐
  322. */
  323. private alignRight(): void {
  324. let standardItem = this.itemList[0];
  325. let p = standardItem.mapToScene(
  326. standardItem.boundingRect().right,
  327. standardItem.boundingRect().bottom
  328. );
  329. for (let i = 1; i < this.itemList.length; i++) {
  330. let curItem = this.itemList[i];
  331. if (curItem.moveable) {
  332. let p1 = curItem.mapFromScene(p.x, p.y);
  333. curItem.x =
  334. (p1.x - curItem.boundingRect().right) *
  335. curItem.inverseScale +
  336. curItem.x;
  337. }
  338. }
  339. } // Function alignRight()
  340. /**
  341. * 底对齐
  342. */
  343. private alignBottom(): void {
  344. let standardItem = this.itemList[0];
  345. let p = standardItem.mapToScene(
  346. standardItem.boundingRect().right,
  347. standardItem.boundingRect().bottom
  348. );
  349. for (let i = 1; i < this.itemList.length; i++) {
  350. let curItem = this.itemList[i];
  351. if (curItem.moveable) {
  352. let p1 = curItem.mapFromScene(p.x, p.y);
  353. curItem.y =
  354. (p1.y - curItem.boundingRect().bottom) *
  355. curItem.inverseScale +
  356. curItem.y;
  357. }
  358. }
  359. } // Function alignBottom()
  360. /**
  361. * 水平居中对齐
  362. */
  363. private alignCenter(): void {
  364. // 第一个选中的 item 即为基准对象
  365. let standardItem = this.itemList[0];
  366. // 基准对象的中心点
  367. let center = standardItem.boundingRect().center();
  368. // 中心点转换为场景坐标
  369. let p = standardItem.mapToScene(center.x, center.y);
  370. for (let i = 1; i < this.itemList.length; i++) {
  371. let curItem = this.itemList[i];
  372. if (curItem.moveable) {
  373. let p1 = curItem.mapFromScene(p.x, p.y);
  374. // 根据等式差值相等 newcenterx - oldcenterx = newposx - oldposx => newposx = newcenterx - oldcenterx + oldposx
  375. curItem.x =
  376. (p1.x - curItem.boundingRect().center().x) *
  377. curItem.inverseScale +
  378. curItem.x;
  379. }
  380. }
  381. } // Function alignCenter()
  382. /**
  383. * 垂直居中对齐
  384. */
  385. private alignMiddle(): void {
  386. // 第一个选中的 item 即为基准对象
  387. let standardItem = this.itemList[0];
  388. // 基准对象的中心点
  389. let center = standardItem.boundingRect().center();
  390. // 中心点转换为场景坐标
  391. let p = standardItem.mapToScene(center.x, center.y);
  392. for (let i = 1; i < this.itemList.length; i++) {
  393. let curItem = this.itemList[i];
  394. if (curItem.moveable) {
  395. let p1 = curItem.mapFromScene(p.x, p.y);
  396. curItem.y =
  397. (p1.y - curItem.boundingRect().center().y) *
  398. curItem.inverseScale +
  399. curItem.y;
  400. }
  401. }
  402. } // Function alignMiddle()
  403. /**
  404. * 垂直分布
  405. */
  406. private alignVertical(): void {
  407. if (this.itemList.length < 3) {
  408. return;
  409. }
  410. for (let i = 0; i < this.itemList.length - 1; i++) {
  411. for (let j = 0; j < this.itemList.length - 1 - i; j++) {
  412. let curItemCenter = this.itemList[j].boundingRect().center();
  413. let nextItemCenter = this.itemList[j + 1]
  414. .boundingRect()
  415. .center();
  416. let curCenterY = this.itemList[j].mapToScene(
  417. curItemCenter.x,
  418. curItemCenter.y
  419. ).y;
  420. let nextCenterY = this.itemList[j + 1].mapToScene(
  421. nextItemCenter.x,
  422. nextItemCenter.y
  423. ).y;
  424. if (curCenterY > nextCenterY) {
  425. let temp = this.itemList[j];
  426. this.itemList[j] = this.itemList[j + 1];
  427. this.itemList[j + 1] = temp;
  428. }
  429. }
  430. }
  431. let top = this.itemList[0];
  432. let bottom = this.itemList[this.itemList.length - 1];
  433. let topCenter = top.boundingRect().center();
  434. let bottomCenter = bottom.boundingRect().center();
  435. let leftToRight =
  436. bottom.mapToScene(bottomCenter.x, bottomCenter.y).y -
  437. top.mapToScene(topCenter.x, topCenter.y).y;
  438. let average = leftToRight / (this.itemList.length - 1);
  439. for (let k = 1; k < this.itemList.length - 1; k++) {
  440. let curItem = this.itemList[k];
  441. if (curItem.moveable) {
  442. let p1 = top.mapToScene(
  443. top.boundingRect().center().x,
  444. top.boundingRect().center().y
  445. );
  446. let p2 = curItem.mapFromScene(p1.x, p1.y + average * k);
  447. curItem.y =
  448. (p2.y - curItem.boundingRect().center().y) *
  449. curItem.inverseScale +
  450. curItem.y;
  451. }
  452. }
  453. } // Function alignVertical()
  454. /**
  455. * 水平分布
  456. */
  457. private alignHorizontal(): void {
  458. if (this.itemList.length < 3) {
  459. return;
  460. }
  461. for (let i = 0; i < this.itemList.length - 1; i++) {
  462. for (let j = 0; j < this.itemList.length - 1 - i; j++) {
  463. let curItemCenter = this.itemList[j].boundingRect().center();
  464. let nextItemCenter = this.itemList[j + 1]
  465. .boundingRect()
  466. .center();
  467. let curCenterX = this.itemList[j].mapToScene(
  468. curItemCenter.x,
  469. curItemCenter.y
  470. ).x;
  471. let nextCenterX = this.itemList[j + 1].mapToScene(
  472. nextItemCenter.x,
  473. nextItemCenter.y
  474. ).x;
  475. if (curCenterX > nextCenterX) {
  476. let temp = this.itemList[j];
  477. this.itemList[j] = this.itemList[j + 1];
  478. this.itemList[j + 1] = temp;
  479. }
  480. }
  481. }
  482. let left = this.itemList[0];
  483. let right = this.itemList[this.itemList.length - 1];
  484. let leftCenter = left.boundingRect().center();
  485. let rightCenter = right.boundingRect().center();
  486. let leftToRight =
  487. right.mapToScene(rightCenter.x, rightCenter.y).x -
  488. left.mapToScene(leftCenter.x, leftCenter.y).x;
  489. let average = leftToRight / (this.itemList.length - 1);
  490. for (let k = 1; k < this.itemList.length - 1; k++) {
  491. let curItem = this.itemList[k];
  492. if (curItem.moveable) {
  493. let p1 = left.mapToScene(
  494. left.boundingRect().center().x,
  495. left.boundingRect().center().y
  496. );
  497. let p2 = curItem.mapFromScene(p1.x + average * k, p1.y);
  498. // 根据等式 newposx - oldposx = newcenterx - oldcenterx
  499. curItem.x =
  500. (p2.x - curItem.boundingRect().center().x) *
  501. curItem.inverseScale +
  502. curItem.x;
  503. }
  504. }
  505. } // Function alignHorizontal()
  506. // 修改层级操作步骤:
  507. // 排序(保持相对层级不变)
  508. // children 里边要取 整数部分相同的 点: children 是已经排好序的
  509. // 然后再取最大值
  510. /**
  511. * 置顶
  512. */
  513. private setTop(): void {
  514. const arr: SGraphItem[] = this.sortItemList(this.itemList, true);
  515. // 按顺序 zOrder 增加
  516. arr.forEach(it => {
  517. let max = it.zOrder;
  518. if (it.parent) {
  519. it.parent.children.forEach(item => {
  520. if (
  521. Number(max.toFixed()) == Number(item.zOrder.toFixed())
  522. ) {
  523. if (item.zOrder > max) {
  524. max = item.zOrder;
  525. }
  526. }
  527. });
  528. it.zOrder = max + this.radix;
  529. }
  530. });
  531. } // Function setTop()
  532. /**
  533. * 置底
  534. */
  535. private setBottom(): void {
  536. const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
  537. // 按顺序 zOrder 增加
  538. arr.forEach(it => {
  539. let min = it.zOrder;
  540. if (it.parent) {
  541. it.parent.children.forEach(item => {
  542. if (
  543. Number(min.toFixed()) == Number(item.zOrder.toFixed())
  544. ) {
  545. if (item.zOrder < min) {
  546. min = item.zOrder;
  547. }
  548. }
  549. });
  550. it.zOrder = min - this.radix;
  551. }
  552. });
  553. } // Function setBottom()
  554. /**
  555. * 下移一层 zOrder 减小
  556. */
  557. private setBefore(): void {
  558. const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
  559. arr.forEach(it => {
  560. if (it.parent) {
  561. const min = it.zOrder;
  562. let temp = it.parent.children
  563. .map(child => {
  564. if (
  565. Number(child.zOrder.toFixed()) ==
  566. Number(min.toFixed())
  567. ) {
  568. return child.zOrder;
  569. }
  570. })
  571. .filter(c => c);
  572. temp = [...new Set(temp)];
  573. // 当前层有多个
  574. const index = temp.indexOf(it.zOrder);
  575. if (index <= 1) {
  576. // 当前 item 索引为1时 将当前 item 放至第一个前边
  577. // @ts-ignore
  578. it.zOrder = temp[0] - this.radix;
  579. } else if (index > 1) {
  580. // 当前 item 索引大于等于2,将当前 item 放至前两个中间
  581. // @ts-ignore
  582. it.zOrder = (temp[index - 1] + temp[index - 2]) / 2;
  583. }
  584. }
  585. });
  586. } // Function setAfter()
  587. /**
  588. * 上移一层 zOrder 增加
  589. */
  590. private setAfter(): void {
  591. const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
  592. arr.forEach(it => {
  593. if (it.parent) {
  594. const max = it.zOrder;
  595. let temp = it.parent.children
  596. .map(child => {
  597. if (
  598. Number(child.zOrder.toFixed()) ==
  599. Number(max.toFixed())
  600. ) {
  601. return child.zOrder;
  602. }
  603. })
  604. .filter(c => c);
  605. temp = [...new Set(temp)].reverse();
  606. // 当前层有多个
  607. const index = temp.indexOf(it.zOrder);
  608. if (index <= 1) {
  609. // 当前 item 索引为1时 将当前 item 放至第一个前边
  610. // @ts-ignore
  611. it.zOrder = temp[0] + this.radix;
  612. } else if (index > 1) {
  613. // 当前 item 索引大于等于2,将当前 item 放至前两个中间
  614. // @ts-ignore
  615. it.zOrder = (temp[index - 1] + temp[index - 2]) / 2;
  616. }
  617. }
  618. });
  619. } // Function setBefore()
  620. /**
  621. * 数组排序
  622. *
  623. * @param arr 排序前的数组
  624. * @param flag 正序 or 逆序
  625. * @return 排序后的数组
  626. */
  627. sortItemList(arr: SGraphItem[], flag: boolean = true): SGraphItem[] {
  628. const list: SGraphItem[] = arr.map(t => t);
  629. list.sort(this.compare("zOrder", flag));
  630. return list;
  631. } // Function sortItemList()
  632. /**
  633. * 按照某个属性排序
  634. *
  635. * @param prop 属性
  636. * @param flag 默认正序
  637. */
  638. private compare(prop: string, flag: boolean): any {
  639. const f = flag ? 1 : -1;
  640. // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  641. return (a: any, b: any) => {
  642. a = a[prop];
  643. b = b[prop];
  644. if (a < b) {
  645. return f * -1;
  646. }
  647. if (a > b) {
  648. return f * 1;
  649. }
  650. return 0;
  651. };
  652. } // Function compare()
  653. /**
  654. * 防抖-防止快速多次触发 itemChange; 只执行最后一次
  655. */
  656. throttle(fn: Function, wait: number): void {
  657. if (this.timer) clearTimeout(this.timer);
  658. this.timer = setTimeout((): void => {
  659. this.selectChange();
  660. }, wait);
  661. } // Function throttle()
  662. /**
  663. * 选中的 item 更新时更新自身边界
  664. */
  665. selectChange(): void {
  666. // 抛出事件
  667. this.$emit("listChange", this.itemList);
  668. if (this.count > 0) {
  669. // 重新计算边界
  670. this.getSize();
  671. // 计算边界 8 个点
  672. this.calExtreme();
  673. if (
  674. this.count > 1 ||
  675. (this.count == 1 && this.itemList[0].showSelect)
  676. ) {
  677. this.visible = true;
  678. }
  679. } else {
  680. this.visible = false;
  681. this.curIndex = -1;
  682. }
  683. } // Function selectChange()
  684. /**
  685. * 计算选中 item 的外接矩形和
  686. *
  687. * @return 外接矩形的和
  688. */
  689. calItemBounding(): SRect {
  690. if (this.itemList.length) {
  691. const fir = this.itemList[0];
  692. let rect = fir.boundingRect().adjusted(fir.pos.x, fir.pos.y, 0, 0);
  693. for (let i = 1; i < this.itemList.length; i++) {
  694. const cur = this.itemList[i];
  695. rect = rect.unioned(
  696. cur.boundingRect().adjusted(cur.pos.x, cur.pos.y, 0, 0)
  697. );
  698. }
  699. return rect;
  700. } else {
  701. return new SRect();
  702. }
  703. } // Function calItemBounding()
  704. /**
  705. * 根据矩阵得到宽高,并将自己移动至矩阵左上角
  706. */
  707. getSize(): void {
  708. const r = this.calItemBounding();
  709. this.width = r.width;
  710. this.height = r.height;
  711. this.moveTo(r.left, r.top);
  712. } // Function getSize()
  713. /**
  714. * 计算外接矩形 8 个端点
  715. */
  716. calExtreme(): void {
  717. this.pointList = [];
  718. this.pointList.push(new SPoint(0, 0));
  719. this.pointList.push(new SPoint(this.width / 2, 0));
  720. this.pointList.push(new SPoint(this.width, 0));
  721. this.pointList.push(new SPoint(this.width, this.height / 2));
  722. this.pointList.push(new SPoint(this.width, this.height));
  723. this.pointList.push(new SPoint(this.width / 2, this.height));
  724. this.pointList.push(new SPoint(0, this.height));
  725. this.pointList.push(new SPoint(0, this.height / 2));
  726. } // Function calExtreme()
  727. /**
  728. * 计算点到哪个点
  729. */
  730. getNearestPoint(p: SPoint): void {
  731. let len = this.sceneDis;
  732. this.curIndex = -1;
  733. for (let i = 0; i < this.pointList.length; i++) {
  734. let dis = SMathUtil.pointDistance(
  735. p.x,
  736. p.y,
  737. this.pointList[i].x,
  738. this.pointList[i].y
  739. );
  740. if (dis < len) {
  741. len = dis;
  742. this.curIndex = i;
  743. }
  744. }
  745. } // Function getNearestPoint()
  746. /**
  747. * Item 对象边界区域
  748. *
  749. * @return 对象边界区域
  750. */
  751. boundingRect(): SRect {
  752. if (this.visible) {
  753. return new SRect(
  754. -this.sceneDis,
  755. -this.sceneDis,
  756. this.width + this.sceneDis + this.sceneDis,
  757. this.height + this.sceneDis + this.sceneDis
  758. );
  759. } else {
  760. return new SRect();
  761. }
  762. } // Function boundingRect()
  763. /**
  764. * 宽高发发生变化
  765. *
  766. * @param oldSize 改之前的大小
  767. * @param newSize 改之后大小
  768. */
  769. protected resize(oldSize: SSize, newSize: SSize): void {
  770. for (let v of this.itemList) {
  771. // @ts-ignore
  772. v.resize && v.resize(oldSize, newSize);
  773. const p = v.mapToScene(this.pos.x, this.pos.y);
  774. const p2 = v.mapFromScene(p.x, p.y);
  775. v.moveTo(p2.x - v.boundingRect().x, p2.y - v.boundingRect().y);
  776. }
  777. } // Function resize()
  778. /**
  779. * 鼠标按下事件
  780. *
  781. * @param event 保存事件参数
  782. * @return 是否处理事件
  783. */
  784. onMouseDown(event: SMouseEvent): boolean {
  785. if (event.buttons == 1) {
  786. this.getNearestPoint(new SPoint(event.x, event.y));
  787. if (this.curIndex < 0) {
  788. this.curPoint = undefined;
  789. return super.onMouseDown(event);
  790. } else {
  791. const cur = this.pointList[this.curIndex];
  792. this.curPoint = new SPoint(cur.x, cur.y);
  793. this.oldWidth = this.width;
  794. this.oldHeight = this.height;
  795. this.grabItem(this);
  796. }
  797. this.update();
  798. return true;
  799. }
  800. return super.onMouseDown(event);
  801. } // Function onMouseDown()
  802. /**
  803. * 鼠标按下事件
  804. *
  805. * @param event 保存事件参数
  806. * @return 是否处理事件
  807. */
  808. onMouseMove(event: SMouseEvent): boolean {
  809. this.setCursor(9);
  810. if (
  811. this.curIndex > -1 &&
  812. this.count == 1 &&
  813. this.itemList[0]._resizeable
  814. ) {
  815. this.setCursor(this.curIndex);
  816. // @ts-ignore
  817. const difX = event.x - this.curPoint.x;
  818. // @ts-ignore
  819. const difY = event.y - this.curPoint.y;
  820. const mp = this.toParentChange(difX, difY);
  821. const oldSize = new SSize(this.width, this.height);
  822. let resultX, resultY;
  823. switch (this.curIndex) {
  824. case 0:
  825. resultX = this.width - difX;
  826. resultY = this.height - difY;
  827. if (resultX > this.minWidth && resultX < this.maxWidth) {
  828. this.width = resultX;
  829. this.x = this.x + mp.x;
  830. }
  831. if (resultY > this.minHeight && resultY < this.maxHeight) {
  832. this.height = resultY;
  833. this.y = this.y + mp.y;
  834. }
  835. break;
  836. case 1:
  837. resultY = this.height - difY;
  838. if (resultY > this.minHeight && resultY < this.maxHeight) {
  839. this.height = resultY;
  840. this.y = this.y + mp.y;
  841. }
  842. break;
  843. case 2:
  844. resultX = this.oldWidth + difX;
  845. resultY = this.height - difY;
  846. if (resultX > this.minWidth && resultX < this.maxWidth) {
  847. this.width = resultX;
  848. }
  849. if (resultY > this.minHeight && resultY < this.maxHeight) {
  850. this.height = resultY;
  851. this.y = this.y + mp.y;
  852. }
  853. break;
  854. case 3:
  855. resultX = this.oldWidth + difX;
  856. if (resultX > this.minWidth && resultX < this.maxWidth) {
  857. this.width = resultX;
  858. }
  859. break;
  860. case 4:
  861. resultX = this.oldWidth + difX;
  862. resultY = this.oldHeight + difY;
  863. if (resultX > this.minWidth && resultX < this.maxWidth) {
  864. this.width = resultX;
  865. }
  866. if (resultY > this.minHeight && resultY < this.maxHeight) {
  867. this.height = resultY;
  868. }
  869. break;
  870. case 5:
  871. resultY = this.oldHeight + difY;
  872. if (resultY > this.minHeight && resultY < this.maxHeight) {
  873. this.height = resultY;
  874. }
  875. break;
  876. case 6:
  877. resultX = this.width - difX;
  878. resultY = this.oldHeight + difY;
  879. if (resultX > this.minWidth && resultX < this.maxWidth) {
  880. this.width = resultX;
  881. this.x = this.x + mp.x;
  882. }
  883. if (resultY > this.minHeight && resultY < this.maxHeight) {
  884. this.height = resultY;
  885. }
  886. break;
  887. case 7:
  888. resultX = this.width - difX;
  889. if (resultX > this.minWidth && resultX < this.maxWidth) {
  890. this.width = resultX;
  891. this.x = this.x + mp.x;
  892. }
  893. break;
  894. default:
  895. break;
  896. }
  897. const newSize = new SSize(this.width, this.height);
  898. this.resize(oldSize, newSize);
  899. this.calExtreme();
  900. } else {
  901. let flag = true;
  902. for (let v of this.itemList) {
  903. if (!v.moveable) {
  904. flag = false;
  905. }
  906. }
  907. if (flag) {
  908. super.onMouseMove(event);
  909. this.setCursor(8);
  910. if (this._isMoving) {
  911. const mp = this.toParentChange(
  912. event.x - this._mouseDownPos.x,
  913. event.y - this._mouseDownPos.y
  914. );
  915. this.itemList.forEach(t => {
  916. t.moveTo(t.x + mp.x, t.y + mp.y);
  917. });
  918. }
  919. }
  920. }
  921. return true;
  922. } // Function onMouseMove()
  923. /**
  924. * 设置鼠标样式
  925. *
  926. * @param n 样式的索引
  927. */
  928. private setCursor(n: number): void {
  929. this.cursor = SGraphSelectContainer.cursorList[n] || "default";
  930. if (this.scene && this.scene.view) {
  931. this.scene.view.cursor = this.cursor;
  932. }
  933. } // Function setCursor()
  934. /**
  935. * 鼠标按下事件
  936. *
  937. * @param event 保存事件参数
  938. * @return 是否处理事件
  939. */
  940. onMouseUp(event: SMouseEvent): boolean {
  941. this.curIndex = -1;
  942. super.onMouseUp(event);
  943. this.itemList.forEach(t => {
  944. t.moveToOrigin(t.x, t.y);
  945. });
  946. return true;
  947. } // Function onMouseUp()
  948. /**
  949. * Item 绘制操作
  950. *
  951. * @param painter 绘制对象
  952. */
  953. onDraw(painter: SPainter): void {
  954. // 缓存场景长度
  955. this.sceneDis = painter.toPx(this.dis);
  956. // 多选时 或者 只选择一个并且是需要显示选择器时 绘制
  957. if (
  958. this.count > 1 ||
  959. (this.count == 1 && this.itemList[0].showSelect)
  960. ) {
  961. painter.pen.lineWidth = painter.toPx(1);
  962. painter.pen.color = SColor.White;
  963. painter.brush.color = SColor.Transparent;
  964. painter.drawRect(0, 0, this.width, this.height);
  965. painter.pen.color = this.strokeColor;
  966. painter.pen.lineDash = [painter.toPx(4), painter.toPx(4)];
  967. painter.drawRect(0, 0, this.width, this.height);
  968. const r = painter.toPx(this.radius);
  969. painter.pen.lineDash = [];
  970. this.pointList.forEach((t, i) => {
  971. if (i == this.curIndex) {
  972. painter.brush.color = this.fillColor;
  973. } else {
  974. painter.brush.color = SColor.White;
  975. }
  976. painter.drawCircle(t.x, t.y, r);
  977. });
  978. }
  979. } // Function onDraw()
  980. } // Class SGraphSelectContainer