SPolygonItem.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.SPolygonItem = void 0;
  4. const lib_1 = require("@persagy-web/graph/lib");
  5. const base_1 = require("@persagy-web/base/");
  6. const draw_1 = require("@persagy-web/draw");
  7. const __1 = require("..");
  8. const SMathUtil_1 = require("../utils/SMathUtil");
  9. class SPolygonItem extends lib_1.SGraphItem {
  10. constructor(parent) {
  11. super(parent);
  12. this.minX = Number.MAX_SAFE_INTEGER;
  13. this.maxX = Number.MIN_SAFE_INTEGER;
  14. this.minY = Number.MAX_SAFE_INTEGER;
  15. this.maxY = Number.MIN_SAFE_INTEGER;
  16. this.pointList = [];
  17. this._status = __1.SItemStatus.Normal;
  18. this._strokeColor = new draw_1.SColor("#0091FF");
  19. this._fillColor = new draw_1.SColor("#1EE887");
  20. this._lineStyle = lib_1.SLineStyle.Solid;
  21. this._lineWidth = 4;
  22. this.closeFlag = false;
  23. this.lastPoint = null;
  24. this.curIndex = -1;
  25. this.curPoint = null;
  26. this.len = 10;
  27. this.scenceLen = 15;
  28. this.isAlt = false;
  29. this.undoStack = new base_1.SUndoStack();
  30. }
  31. get getPointList() {
  32. return this.pointList;
  33. }
  34. set setPointList(arr) {
  35. this.pointList = arr;
  36. this.update();
  37. }
  38. get status() {
  39. return this._status;
  40. }
  41. set status(value) {
  42. this._status = value;
  43. this.undoStack.clear();
  44. this.update();
  45. }
  46. get strokeColor() {
  47. return this._strokeColor;
  48. }
  49. set strokeColor(v) {
  50. this._strokeColor = v;
  51. this.update();
  52. }
  53. get fillColor() {
  54. return this._fillColor;
  55. }
  56. set fillColor(v) {
  57. this._fillColor = v;
  58. this.update();
  59. }
  60. get lineStyle() {
  61. return this._lineStyle;
  62. }
  63. set lineStyle(v) {
  64. this._lineStyle = v;
  65. this.update();
  66. }
  67. get lineWidth() {
  68. return this._lineWidth;
  69. }
  70. set lineWidth(v) {
  71. this._lineWidth = v;
  72. this.update();
  73. }
  74. insertPoint(x, y, i = null) {
  75. const point = new draw_1.SPoint(x, y);
  76. if (i == null) {
  77. this.pointList.push(point);
  78. }
  79. else {
  80. this.pointList.splice(i, 0, point);
  81. }
  82. this.update();
  83. return point;
  84. }
  85. deletePoint(i = null) {
  86. let point = null;
  87. if (i != null) {
  88. if (i >= this.pointList.length || i < 0) {
  89. point = null;
  90. }
  91. else {
  92. point = new draw_1.SPoint(this.pointList[i].x, this.pointList[i].y);
  93. this.pointList.splice(i, 1);
  94. }
  95. }
  96. else {
  97. if (this.pointList.length) {
  98. point = this.pointList[this.pointList.length - 1];
  99. this.pointList.pop();
  100. }
  101. else {
  102. point = null;
  103. }
  104. }
  105. this.curIndex = -1;
  106. this.curPoint = null;
  107. this.update();
  108. return point;
  109. }
  110. movePoint(x, y, i) {
  111. let point = null;
  112. if (i >= this.pointList.length || i < 0) {
  113. return null;
  114. }
  115. if (this.pointList.length) {
  116. this.pointList[i].x = x;
  117. this.pointList[i].y = y;
  118. }
  119. point = this.pointList[i];
  120. return point;
  121. }
  122. PrintPointList() {
  123. return this.pointList;
  124. }
  125. drawShowPolygon(painter, pointList) {
  126. painter.save();
  127. painter.pen.lineCapStyle = draw_1.SLineCapStyle.Square;
  128. painter.pen.color = this.strokeColor;
  129. painter.brush.color = this.fillColor;
  130. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  131. if (this.lineStyle == lib_1.SLineStyle.Dashed) {
  132. painter.pen.lineDash = [
  133. painter.toPx(this.lineWidth * 3),
  134. painter.toPx(this.lineWidth * 7)
  135. ];
  136. }
  137. else if (this.lineStyle == lib_1.SLineStyle.Dotted) {
  138. painter.pen.lineDash = [
  139. painter.toPx(this.lineWidth),
  140. painter.toPx(this.lineWidth)
  141. ];
  142. }
  143. if (this.selected) {
  144. painter.shadow.shadowBlur = 10;
  145. painter.shadow.shadowColor = new draw_1.SColor(`#00000033`);
  146. painter.shadow.shadowOffsetX = 5;
  147. painter.shadow.shadowOffsetY = 5;
  148. }
  149. else {
  150. painter.shadow.shadowColor = draw_1.SColor.Transparent;
  151. }
  152. painter.drawPolygon([...pointList]);
  153. painter.restore();
  154. }
  155. drawCreatePolygon(painter, pointList) {
  156. painter.pen.lineCapStyle = draw_1.SLineCapStyle.Square;
  157. painter.pen.color = this.strokeColor;
  158. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  159. if (this.lastPoint && pointList.length) {
  160. painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
  161. }
  162. painter.drawPolyline(pointList);
  163. painter.pen.color = draw_1.SColor.Transparent;
  164. painter.brush.color = new draw_1.SColor(this.fillColor.value);
  165. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  166. if (this.lastPoint) {
  167. painter.drawPolygon([...pointList, this.lastPoint]);
  168. painter.pen.color = draw_1.SColor.Black;
  169. painter.brush.color = draw_1.SColor.White;
  170. pointList.forEach(item => {
  171. painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
  172. });
  173. if (this.pointList.length) {
  174. if (SMathUtil_1.SMathUtil.pointDistance(this.lastPoint.x, this.lastPoint.y, this.pointList[0].x, this.pointList[0].y) < this.scenceLen) {
  175. painter.pen.color = draw_1.SColor.Black;
  176. painter.brush.color = draw_1.SColor.Red;
  177. painter.drawCircle(this.pointList[0].x, this.pointList[0].y, painter.toPx(this.len / 2));
  178. }
  179. }
  180. }
  181. else {
  182. painter.drawPolygon(pointList);
  183. }
  184. }
  185. drawEditPolygon(painter, pointList) {
  186. painter.pen.lineCapStyle = draw_1.SLineCapStyle.Square;
  187. painter.pen.color = this.strokeColor;
  188. painter.pen.lineWidth = painter.toPx(this.lineWidth);
  189. painter.brush.color = new draw_1.SColor(this.fillColor.value);
  190. painter.drawPolygon([...pointList]);
  191. painter.pen.color = draw_1.SColor.Black;
  192. painter.brush.color = draw_1.SColor.White;
  193. pointList.forEach((item, index) => {
  194. painter.brush.color = draw_1.SColor.White;
  195. if (index == this.curIndex) {
  196. painter.brush.color = new draw_1.SColor("#2196f3");
  197. }
  198. painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
  199. });
  200. }
  201. editPolygonPoint(event) {
  202. if (this.isAlt) {
  203. let lenIndex = -1;
  204. let curenLen = this.scenceLen;
  205. this.pointList.forEach((item, index) => {
  206. let dis = SMathUtil_1.SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
  207. if (dis < curenLen) {
  208. curenLen = dis;
  209. lenIndex = index;
  210. }
  211. });
  212. if (lenIndex != -1) {
  213. if (this.pointList.length <= 3) {
  214. return;
  215. }
  216. const delePoint = new draw_1.SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y);
  217. this.deletePoint(lenIndex);
  218. this.recordAction(lib_1.SGraphPointListDelete, [
  219. this.pointList,
  220. delePoint,
  221. lenIndex
  222. ]);
  223. }
  224. }
  225. else {
  226. this.curIndex = -1;
  227. this.curPoint = null;
  228. let lenIndex = -1;
  229. let curenLen = this.scenceLen;
  230. this.pointList.forEach((item, index) => {
  231. let dis = SMathUtil_1.SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
  232. if (dis < curenLen) {
  233. curenLen = dis;
  234. lenIndex = index;
  235. }
  236. });
  237. this.curIndex = lenIndex;
  238. if (-1 == lenIndex) {
  239. let len = SMathUtil_1.SMathUtil.pointToLine(new draw_1.SPoint(event.x, event.y), new draw_1.SLine(this.pointList[0], this.pointList[1])), index = 0;
  240. if (this.pointList.length > 2) {
  241. for (let i = 1; i < this.pointList.length; i++) {
  242. let dis = SMathUtil_1.SMathUtil.pointToLine(new draw_1.SPoint(event.x, event.y), new draw_1.SLine(this.pointList[i], this.pointList[i + 1]));
  243. if (i + 1 == this.pointList.length) {
  244. dis = SMathUtil_1.SMathUtil.pointToLine(new draw_1.SPoint(event.x, event.y), new draw_1.SLine(this.pointList[i], this.pointList[0]));
  245. }
  246. if (dis.MinDis < len.MinDis) {
  247. len = dis;
  248. index = i;
  249. }
  250. }
  251. }
  252. if (len.Point) {
  253. if (len.MinDis <= this.scenceLen) {
  254. this.pointList.splice(index + 1, 0, len.Point);
  255. this.recordAction(lib_1.SGraphPointListInsert, [
  256. this.pointList,
  257. len.Point,
  258. index + 1
  259. ]);
  260. }
  261. else {
  262. super.onMouseDown(event);
  263. }
  264. }
  265. }
  266. else {
  267. this.curPoint = new draw_1.SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
  268. }
  269. this.update();
  270. }
  271. }
  272. recordAction(SGraphCommand, any) {
  273. const sgraphcommand = new SGraphCommand(this.scene, this, ...any);
  274. this.undoStack.push(sgraphcommand);
  275. }
  276. undo() {
  277. if (this.status == __1.SItemStatus.Normal) {
  278. return;
  279. }
  280. this.undoStack.undo();
  281. }
  282. redo() {
  283. if (this.status == __1.SItemStatus.Normal) {
  284. return;
  285. }
  286. this.undoStack.redo();
  287. }
  288. onDoubleClick(event) {
  289. if (__1.SItemStatus.Normal == this.status) {
  290. this.status = __1.SItemStatus.Edit;
  291. this.grabItem(this);
  292. }
  293. else if (__1.SItemStatus.Edit == this.status) {
  294. this.status = __1.SItemStatus.Normal;
  295. this.releaseItem();
  296. }
  297. this.update();
  298. return true;
  299. }
  300. onKeyDown(event) {
  301. if (this.status == __1.SItemStatus.Normal) {
  302. return false;
  303. }
  304. else if (this.status == __1.SItemStatus.Create) {
  305. if (event.code == "Enter") {
  306. if (this.pointList.length > 2) {
  307. this.status = __1.SItemStatus.Normal;
  308. this.$emit("finishCreated");
  309. this.releaseItem();
  310. }
  311. }
  312. }
  313. else if (this.status == __1.SItemStatus.Edit) {
  314. if (event.key == "Alt") {
  315. this.isAlt = true;
  316. }
  317. }
  318. this.update();
  319. return true;
  320. }
  321. onKeyUp(event) {
  322. if (this.status == __1.SItemStatus.Edit) {
  323. if (event.key == "Alt") {
  324. this.isAlt = false;
  325. }
  326. else if (event.keyCode == base_1.SKeyCode.Delete) {
  327. if (this.pointList.length > 3) {
  328. this.deletePoint(this.curIndex);
  329. }
  330. }
  331. }
  332. this.update();
  333. }
  334. onMouseDown(event) {
  335. if (event.shiftKey) {
  336. event = this.compare(event);
  337. }
  338. if (this.status == __1.SItemStatus.Create) {
  339. let len = -1;
  340. if (this.pointList.length) {
  341. len = SMathUtil_1.SMathUtil.pointDistance(event.x, event.y, this.pointList[0].x, this.pointList[0].y);
  342. }
  343. if (this.pointList.length > 2 && len > 0 && len < this.scenceLen) {
  344. this.status = __1.SItemStatus.Normal;
  345. this.$emit("finishCreated");
  346. this.releaseItem();
  347. }
  348. else {
  349. this.insertPoint(event.x, event.y);
  350. let pos = new draw_1.SPoint(event.x, event.y);
  351. this.recordAction(lib_1.SGraphPointListInsert, [this.pointList, pos]);
  352. }
  353. }
  354. else if (this.status == __1.SItemStatus.Edit) {
  355. this.editPolygonPoint(event);
  356. }
  357. else {
  358. return super.onMouseDown(event);
  359. }
  360. return true;
  361. }
  362. onMouseEnter(event) {
  363. return true;
  364. }
  365. onMouseLeave(event) {
  366. return true;
  367. }
  368. onMouseMove(event) {
  369. if (event.shiftKey) {
  370. event = this.compare(event);
  371. }
  372. if (this.status == __1.SItemStatus.Create) {
  373. this.lastPoint = new draw_1.SPoint();
  374. this.lastPoint.x = event.x;
  375. this.lastPoint.y = event.y;
  376. this.update();
  377. }
  378. else if (this.status == __1.SItemStatus.Edit) {
  379. if (event.buttons == 1) {
  380. if (-1 != this.curIndex) {
  381. this.pointList[this.curIndex].x = event.x;
  382. this.pointList[this.curIndex].y = event.y;
  383. }
  384. }
  385. this.update();
  386. }
  387. else {
  388. return super.onMouseMove(event);
  389. }
  390. return true;
  391. }
  392. compare(event) {
  393. if (this.pointList.length) {
  394. let last = new draw_1.SPoint(event.x, event.y);
  395. if (this.status == __1.SItemStatus.Create) {
  396. last = this.pointList[this.pointList.length - 1];
  397. }
  398. else if (this.status == __1.SItemStatus.Edit) {
  399. if (this.curIndex > 1) {
  400. last = this.pointList[this.curIndex - 1];
  401. }
  402. }
  403. const dx = Math.abs(event.x - last.x);
  404. const dy = Math.abs(event.y - last.y);
  405. if (dy > dx) {
  406. event.x = last.x;
  407. }
  408. else {
  409. event.y = last.y;
  410. }
  411. }
  412. return event;
  413. }
  414. onMouseUp(event) {
  415. if (this.status == __1.SItemStatus.Edit) {
  416. if (-1 != this.curIndex) {
  417. const pos = new draw_1.SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
  418. this.recordAction(lib_1.SGraphPointListUpdate, [
  419. this.pointList,
  420. this.curPoint,
  421. pos,
  422. this.curIndex
  423. ]);
  424. }
  425. }
  426. else if (this.status == __1.SItemStatus.Normal) {
  427. this.moveToOrigin(this.x, this.y);
  428. return super.onMouseUp(event);
  429. }
  430. return true;
  431. }
  432. moveToOrigin(x, y) {
  433. super.moveToOrigin(x, y);
  434. this.pointList = this.pointList.map(t => {
  435. t.x = t.x + x;
  436. t.y = t.y + y;
  437. return t;
  438. });
  439. this.x = 0;
  440. this.y = 0;
  441. }
  442. onResize(event) {
  443. return true;
  444. }
  445. cancelOperate() {
  446. if (this.status == __1.SItemStatus.Create) {
  447. this.parent = null;
  448. }
  449. else if (this.status == __1.SItemStatus.Edit) {
  450. this.status = __1.SItemStatus.Normal;
  451. }
  452. this.update();
  453. }
  454. boundingRect() {
  455. if (this.pointList.length) {
  456. this.minX = this.pointList[0].x;
  457. this.maxX = this.pointList[0].x;
  458. this.minY = this.pointList[0].y;
  459. this.maxY = this.pointList[0].y;
  460. this.pointList.forEach(it => {
  461. let x = it.x, y = it.y;
  462. if (x < this.minX) {
  463. this.minX = x;
  464. }
  465. if (y < this.minY) {
  466. this.minY = y;
  467. }
  468. if (x > this.maxX) {
  469. this.maxX = x;
  470. }
  471. if (y > this.maxY) {
  472. this.maxY = y;
  473. }
  474. });
  475. }
  476. return new draw_1.SRect(this.minX, this.minY, this.maxX - this.minX, this.maxY - this.minY);
  477. }
  478. contains(x, y) {
  479. let arr = this.pointList;
  480. if (arr.length < 3 || !draw_1.SPolygonUtil.pointIn(x, y, arr)) {
  481. return false;
  482. }
  483. return true;
  484. }
  485. onDraw(painter) {
  486. this.scenceLen = painter.toPx(this.len);
  487. if (this.status == __1.SItemStatus.Normal) {
  488. this.drawShowPolygon(painter, this.pointList);
  489. }
  490. else if (this.status == __1.SItemStatus.Create) {
  491. this.drawCreatePolygon(painter, this.pointList);
  492. }
  493. else {
  494. this.drawEditPolygon(painter, this.pointList);
  495. }
  496. }
  497. }
  498. exports.SPolygonItem = SPolygonItem;