EditScence.js 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058
  1. import { SUndoStack } from "@saga-web/base";
  2. import { SGraphScene } from '@saga-web/graph/lib';
  3. import { SItemStatus, ItemOrder } from "@saga-web/big";
  4. import { SLineStyle } from "@saga-web/graph/lib";
  5. import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
  6. import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
  7. import { TipelineItem } from "@/lib/items/TipelineItem";
  8. import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem";
  9. import { SPoint, SFont } from '@saga-web/draw/lib';
  10. import { uuid } from "@/components/mapClass/until";
  11. import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
  12. import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
  13. /**
  14. * 在线绘图
  15. *
  16. * @author 韩耀龙
  17. */
  18. export class EditScence extends SGraphScene {
  19. constructor() {
  20. super();
  21. this.undoStack = new SUndoStack();
  22. /** 命令 1 绘制直线 */
  23. this.cmd = 'choice';
  24. /** 绘制区域时 是否为点选 */
  25. this.isSelecting = false;
  26. /** 是否开启吸附 */
  27. this.isAbsorbing = false;
  28. /** 吸附展示item */
  29. this.highLight = null;
  30. /** 当前选中焦点Item */
  31. this.focusItem = null;
  32. /**图例节点 */
  33. this.Nodes = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
  34. /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  35. this.Markers = [];
  36. /** 管线对象 */
  37. this.Relations = [];
  38. this._isEditStatus = true; // 是否可编辑
  39. /** 绘制图例样式 */
  40. this._legend = null;
  41. /** fid=>item映射,由解析器存入 */
  42. this.fidToItem = {};
  43. // // 选择绑定选额item事件
  44. this.selectContainer.connect("listChange", this, this.listChange);
  45. ItemColor.spaceColor = new SColor("#A4ABB22B");
  46. ItemColor.wallColor = new SColor("#A7AEB3FF");
  47. ItemColor.columnColor = new SColor("#A7AEB3FF");
  48. ItemColor.virtualWallColor = new SColor("#A7AEB3FF");
  49. ItemColor.selectColor = new SColor("#84A0BB2B");
  50. ItemColor.spaceBorderColor = new SColor("#A7AEB3FF");
  51. }
  52. /** 获取当前状态 */
  53. get getCmd() {
  54. return this.cmd;
  55. }
  56. /** 编辑当前状态 */
  57. set setCmd(cmd) {
  58. if (cmd == 'choice') {
  59. this.grabItem = null;
  60. }
  61. this.cmd = cmd;
  62. if (this.focusItem) {
  63. // 取消操作
  64. this.focusItem.cancelOperate();
  65. this.focusItem = null;
  66. // this.selectContainer.
  67. }
  68. if (this.view) {
  69. this.view.update();
  70. }
  71. }
  72. ;
  73. set isEditStatus(bol) {
  74. this._isEditStatus = bol;
  75. }
  76. get isEditStatus() {
  77. return this._isEditStatus;
  78. }
  79. get getlegend() {
  80. return this._legend;
  81. }
  82. ;
  83. set setlegend(obj) {
  84. this._legend = obj;
  85. console.log('aaaaaa', obj);
  86. }
  87. /**
  88. * 监听变化
  89. * @param obj 变化后的对象
  90. */
  91. listChange(obj) {
  92. let itemType = 'equipment';
  93. if (obj.itemList[0] instanceof STextMarkerItem) {
  94. itemType = 'baseText';
  95. }
  96. else if (obj.itemList[0] instanceof SImageMarkerItem) {
  97. itemType = 'baseImage';
  98. }
  99. else if (obj.itemList[0] instanceof SLineMarkerItem) {
  100. itemType = 'baseLine';
  101. }
  102. else if (obj.itemList[0] instanceof SZoneLegendItem) {
  103. itemType = 'Zone';
  104. }
  105. else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
  106. itemType = 'Zone';
  107. }
  108. else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
  109. itemType = 'Zone';
  110. }
  111. else if (obj.itemList[0] instanceof SImageLegendItem) {
  112. itemType = 'Image';
  113. }
  114. else if (obj.itemList[0] instanceof TipelineItem) {
  115. itemType = 'Line';
  116. }
  117. else if (obj.itemList[0] instanceof SSpaceItem) { // 点选
  118. this.clickToAddArea(obj.itemList[0]);
  119. return;
  120. }
  121. else {
  122. itemType = '';
  123. }
  124. ;
  125. if (obj.itemList.length == 1) {
  126. // 获取聚焦item
  127. this.focusItem = obj.itemList[0];
  128. }
  129. let msg = {
  130. itemList: obj.itemList,
  131. itemType,
  132. };
  133. this.emitChange(msg);
  134. }
  135. emitChange(msg) {
  136. }
  137. /**
  138. * 增加线段item
  139. */
  140. addLine(event) {
  141. const clickItem = this.clickIsItem(event);
  142. if (clickItem) {
  143. let centerPoint = clickItem.boundingRect().center();
  144. const p = clickItem.mapToScene(centerPoint.x, centerPoint.y);
  145. event.x = p.x;
  146. event.y = p.y;
  147. }
  148. const data = {
  149. /** ID */
  150. ID: uuid(),
  151. /** 名称 */
  152. Name: '直线',
  153. /** 图标(Image),线类型(Line) */
  154. Type: "Line",
  155. /** 位置 */
  156. Pos: { X: 0, Y: 0 },
  157. /** 由应用自己定义 */
  158. Properties: {
  159. IconUrl: require("../../assets/images/t-line-hover.png"),
  160. Line: [{ X: event.x, Y: event.y }],
  161. LineWidth: 2
  162. }
  163. };
  164. const item = new SLineMarkerItem(null, data);
  165. item.status = SItemStatus.Create;
  166. item.zOrder = ItemOrder.lineOrder;
  167. item.selectable = true;
  168. this.addItem(item);
  169. this.Markers.push(item);
  170. item.connect("finishCreated", this, this.finishCreated);
  171. this.grabItem = item;
  172. this.focusItem = item;
  173. this.scenceUpdate(this);
  174. // this.undoStack.push(new SGraphAddCommand(this, item));
  175. // item.connect("onMove", this, this.onItemMove.bind(this));
  176. return true;
  177. }
  178. /**
  179. * 增加折线item
  180. */
  181. addPolylineItem(event) {
  182. const point = new SPoint(event.x, event.y);
  183. const item = new TipelineItem(null, [point]);
  184. //设置状态
  185. item.selectable = true;
  186. item.status = SItemStatus.Create;
  187. item.zOrder = ItemOrder.polylineOrder;
  188. this.addItem(item);
  189. item.connect("finishCreated", this, this.finishCreated);
  190. // this.undoStack.push(new SGraphAddCommand(this, item));
  191. this.grabItem = item;
  192. this.focusItem = item;
  193. return true;
  194. }
  195. /**
  196. * 增加管道 lenged
  197. */
  198. addTipelineItem(event) {
  199. var _a;
  200. const anc = this.clickIsAnchor(event);
  201. if (anc) {
  202. const p = anc.mapToScene(0, 0);
  203. anc.isConnected = true;
  204. event.x = p.x;
  205. event.y = p.y;
  206. }
  207. const LegendData = {
  208. ID: uuid(),
  209. Name: this._legend.Name,
  210. GraphElementId: this._legend.Id,
  211. PointList: [{ X: event.x, Y: event.y }],
  212. LineType: "Line",
  213. Properties: {
  214. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  215. LineDash: this._legend.LineDash,
  216. LineWidth: this._legend.LineWidth,
  217. Color: this._legend.Color,
  218. },
  219. };
  220. const item = new TipelineItem(null, LegendData);
  221. //设置状态
  222. item.selectable = true;
  223. item.status = SItemStatus.Create;
  224. item.zOrder = ItemOrder.polylineOrder;
  225. this.addItem(item);
  226. this.Relations.push(item);
  227. item.connect("finishCreated", this, this.finishCreated);
  228. // this.undoStack.push(new SGraphAddCommand(this, item));
  229. this.grabItem = item;
  230. this.focusItem = item;
  231. // 起始锚点
  232. item.startAnchor = anc;
  233. if (anc) {
  234. (_a = anc.parent) === null || _a === void 0 ? void 0 : _a.connect('changePos', item, item.changePos);
  235. item.anchor1ID = anc.id;
  236. item.node1Id = anc.parent.id;
  237. }
  238. this.scenceUpdate(this);
  239. return true;
  240. }
  241. /**
  242. * 增加多边形item lenged
  243. */
  244. addPolygonItem(event) {
  245. const SubType = this._legend.SubType ? this._legend.SubType : '';
  246. const LegendData = {
  247. ID: uuid(),
  248. Name: this._legend.Name,
  249. GraphElementType: this._legend.Type,
  250. Num: 1,
  251. GraphElementId: this._legend.Id,
  252. AttachObjectIds: [],
  253. Type: "Zone",
  254. Pos: { X: event.x, Y: event.y },
  255. OutLine: [{ X: event.x, Y: event.y }],
  256. SubType: SubType,
  257. Properties: {
  258. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  259. StrokeColor: this._legend.Color,
  260. FillColor: this._legend.FillColor,
  261. LineDash: this._legend.LineDash,
  262. LineWidth: this._legend.LineWidth,
  263. font: 0,
  264. color: '',
  265. TextPos: { X: 0, Y: 0 }
  266. },
  267. };
  268. let Polylines = null;
  269. if (SubType == "SCPZ") {
  270. Polylines = new SSCPZZoneLegendItem(null, LegendData);
  271. }
  272. else if (SubType == "FHFQ") {
  273. Polylines = new SFHFQZoneLegendItem(null, LegendData);
  274. }
  275. else {
  276. Polylines = new SZoneLegendItem(null, LegendData);
  277. }
  278. Polylines.selectable = true;
  279. //设置状态
  280. Polylines.status = SItemStatus.Create;
  281. Polylines.zOrder = ItemOrder.polygonOrder;
  282. // Polylines.moveable = true;
  283. this.addItem(Polylines);
  284. this.Nodes.push(Polylines);
  285. Polylines.connect("finishCreated", this, this.finishCreated);
  286. this.grabItem = Polylines;
  287. this.focusItem = Polylines;
  288. this.scenceUpdate(this);
  289. }
  290. /**
  291. * 点选创建区域
  292. */
  293. clickToAddArea(item) {
  294. if (this.cmd != 'Zone') {
  295. return;
  296. }
  297. if (this.isSelecting && this._legend) {
  298. //@ts-ignore
  299. item.isExtracted = true;
  300. const SubType = this._legend.SubType ? this._legend.SubType : '';
  301. const LegendData = {
  302. ID: uuid(),
  303. Name: this._legend.Name,
  304. GraphElementType: this._legend.Type,
  305. Num: 1,
  306. GraphElementId: this._legend.Id,
  307. AttachObjectIds: [],
  308. Type: "Zone",
  309. Pos: { X: item.x, Y: item.y },
  310. OutLine: item.pointArr[0],
  311. SubType: SubType,
  312. Properties: {
  313. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  314. StrokeColor: this._legend.Color,
  315. FillColor: this._legend.FillColor,
  316. LineDash: this._legend.LineDash,
  317. LineWidth: this._legend.LineWidth,
  318. font: 12,
  319. color: '',
  320. FID: item.data.SourceId,
  321. TextPos: { X: item.data.Location.Points[0].X, Y: -item.data.Location.Points[0].Y }
  322. },
  323. };
  324. let Polylines = null;
  325. if (SubType == "SCPZ") {
  326. Polylines = new SSCPZZoneLegendItem(null, LegendData);
  327. }
  328. else if (SubType == "FHFQ") {
  329. Polylines = new SFHFQZoneLegendItem(null, LegendData);
  330. }
  331. else {
  332. Polylines = new SZoneLegendItem(null, LegendData);
  333. }
  334. Polylines.selectable = true;
  335. //设置状态
  336. Polylines.status = SItemStatus.Normal;
  337. this.addItem(Polylines);
  338. this.Nodes.push(Polylines);
  339. Polylines.connect("finishCreated", this, this.finishCreated);
  340. this.finishCreated(Polylines);
  341. this.focusItem = Polylines;
  342. this.scenceUpdate(this);
  343. }
  344. }
  345. /**
  346. * 增加图片Item mark
  347. */
  348. addImgItem(event) {
  349. const data = {
  350. /** ID */
  351. ID: uuid(),
  352. /** 名称 */
  353. Name: '图片',
  354. Num: 1,
  355. /** 图标(Image),线类型(Line) */
  356. Type: "Image",
  357. /** 位置 */
  358. Pos: { X: event.x, Y: event.y },
  359. /** 由应用自己定义 */
  360. Properties: {
  361. IconUrl: require(`../../assets/images/t-img-hover.png`),
  362. Url: '',
  363. }
  364. };
  365. const item = new SImageMarkerItem(null, data);
  366. item.zOrder = ItemOrder.imageOrder;
  367. item.selectable = true;
  368. item.moveable = true;
  369. this.addItem(item);
  370. this.Markers.push(item);
  371. this.grabItem == null;
  372. this.focusItem = item;
  373. this.cmd = 'choice';
  374. this.scenceUpdate(this);
  375. }
  376. /**
  377. * 增加文字item
  378. */
  379. addTextItem(event) {
  380. const data = {
  381. /** ID */
  382. ID: uuid(),
  383. /** 名称 */
  384. Name: '文本',
  385. /** 图标 */
  386. Type: "Text",
  387. /** 位置 */
  388. Pos: { X: event.x, Y: event.y },
  389. /** 由应用自己定义 */
  390. Properties: {
  391. IconUrl: require(`../../assets/images/t-text-hover.png`),
  392. Text: '请在右侧属性栏输入文字!',
  393. Color: '',
  394. Font: 12,
  395. BackgroundColor: ''
  396. }
  397. };
  398. const item = new STextMarkerItem(null, data);
  399. item.moveTo(event.x, event.y);
  400. item.selectable = true;
  401. item.moveable = true;
  402. item.zOrder = ItemOrder.textOrder;
  403. this.addItem(item);
  404. this.Markers.push(item);
  405. this.grabItem = item;
  406. this.focusItem = item;
  407. this.cmd = 'choice';
  408. this.scenceUpdate(this);
  409. }
  410. /**
  411. * 增加图标lenged图标
  412. */
  413. addIconItem(event) {
  414. //获取信息工程化相关参数
  415. const LegendData = {
  416. ID: uuid(),
  417. Name: this._legend.Name,
  418. GraphElementType: this._legend.Type,
  419. Num: 1,
  420. GraphElementId: this._legend.Id,
  421. AttachObjectIds: [],
  422. Pos: { X: event.x, Y: event.y },
  423. Scale: { X: 1, Y: 1, Z: 1 },
  424. Rolate: { X: 0, Y: 0, Z: 0 },
  425. Size: { Width: 0, Height: 0 },
  426. Properties: {
  427. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  428. Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  429. Num: 1,
  430. sWidth: 24,
  431. sHeight: 24,
  432. font: 12,
  433. color: '',
  434. GraphCategoryId: this._legend.GraphCategoryId
  435. },
  436. };
  437. const item = new SImageLegendItem(null, LegendData);
  438. this.cmd = 'choice';
  439. item.selectable = true;
  440. item.moveable = true;
  441. item.zOrder = ItemOrder.markOrder;
  442. this.addItem(item);
  443. this.Nodes.push(item);
  444. this.grabItem = item;
  445. this.focusItem = item;
  446. this.scenceUpdate(this);
  447. }
  448. /**
  449. * 更改item对应属性
  450. */
  451. editItemStatus() {
  452. }
  453. /**
  454. * 更改文本对应属性
  455. * @param str string 文字内容
  456. */
  457. updatedText(str) {
  458. if (this.focusItem) {
  459. const old = this.focusItem.text;
  460. this.focusItem.text = str;
  461. this.scenceUpdate(this);
  462. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
  463. }
  464. }
  465. /**
  466. * 更改文本fontSize属性
  467. * @param size number 文字大小
  468. */
  469. updatedFontSize(size) {
  470. if (this.focusItem) {
  471. let old = new SFont(this.focusItem.font);
  472. let font = new SFont(this.focusItem.font);
  473. font.size = size;
  474. this.focusItem.font = font;
  475. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  476. }
  477. }
  478. /**
  479. * 更改线宽属性
  480. * @param lineWidth number 线宽大小
  481. */
  482. updatedLineWidth(lineWidth) {
  483. if (this.focusItem) {
  484. // let old = new SFont(this.focusItem.font);
  485. // let font = new SFont(this.focusItem.font);
  486. // font.size = size;
  487. this.focusItem.lineWidth = lineWidth;
  488. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  489. }
  490. }
  491. /**
  492. * 更改文本颜色属性
  493. * @param str string 颜色
  494. */
  495. updatedFontColor(color) {
  496. if (this.focusItem) {
  497. let old = this.focusItem.color;
  498. this.focusItem.color = new SColor(color);
  499. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  500. }
  501. }
  502. /**
  503. * 更改border颜色
  504. * @param color string 颜色
  505. */
  506. updatedBorderColor(color) {
  507. if (this.focusItem) {
  508. if (this.focusItem instanceof SZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
  509. this.focusItem.strokeColor = new SColor(color);
  510. }
  511. else {
  512. // let old = this.focusItem.strokeColor;
  513. this.focusItem.strokeColor = new SColor(color);
  514. }
  515. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  516. }
  517. }
  518. /**
  519. * 更改item宽
  520. * @param width number 颜色
  521. */
  522. updatedWidth(width) {
  523. if (this.focusItem) {
  524. // let old = this.focusItem.width;
  525. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  526. this.focusItem.sWidth = width;
  527. }
  528. else {
  529. this.focusItem.width = width;
  530. }
  531. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  532. }
  533. }
  534. /**
  535. * 更改item高
  536. * @param height number 颜色
  537. */
  538. updatedHeight(height) {
  539. if (this.focusItem) {
  540. // let old = this.focusItem.width;
  541. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  542. this.focusItem.sHeight = height;
  543. }
  544. else {
  545. this.focusItem.height = height;
  546. }
  547. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  548. }
  549. }
  550. /**
  551. * 更改item坐标
  552. * @param x number x x坐标
  553. * @param y number y y坐标
  554. */
  555. updatedPosition(x, y) {
  556. if (this.focusItem) {
  557. let p = this.focusItem.mapFromScene(x, y);
  558. // newx - oldx = newleft - oldleft
  559. // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
  560. this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
  561. this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
  562. }
  563. }
  564. /**
  565. * 更改item 背景色坐标
  566. * @param color string 颜色color
  567. */
  568. updatedbackColor(color) {
  569. if (this.focusItem) {
  570. this.focusItem.backgroundColor = new SColor(color);
  571. }
  572. }
  573. /**
  574. * 更改item Url
  575. * @param url string 图片key
  576. */
  577. upadataImageUrl(url) {
  578. if (this.focusItem) {
  579. this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
  580. }
  581. }
  582. /**
  583. * 更改item border
  584. * @param val string border类型
  585. */
  586. upadataBorder(val) {
  587. if (this.focusItem) {
  588. let borderStyle = null;
  589. if (val == 'dashed') {
  590. borderStyle = SLineStyle.Dashed;
  591. }
  592. else if (val == 'dotted') {
  593. borderStyle = SLineStyle.Dotted;
  594. }
  595. else if (val == 'solid') {
  596. borderStyle = SLineStyle.Soild;
  597. }
  598. this.focusItem.lineStyle = borderStyle;
  599. }
  600. }
  601. /**
  602. * 更改item 名称
  603. * @param val string border类型
  604. */
  605. upadataLengedName(val) {
  606. if (this.focusItem && this.focusItem.data) {
  607. this.focusItem.text = val;
  608. this.scenceUpdate(this);
  609. }
  610. }
  611. /**
  612. * 更改item Num数量
  613. * @param num number item数量 (只对icon设备类)
  614. */
  615. upadatImageNum(num) {
  616. if (this.focusItem && this.focusItem.num) {
  617. this.focusItem.num = num;
  618. }
  619. }
  620. /**
  621. * 更改item Num数量
  622. * @param num number item数量 (只对icon设备类)
  623. */
  624. upadatfillColor(fillColor) {
  625. if (this.focusItem && this.focusItem.fillColor) {
  626. this.focusItem.fillColor = new SColor(fillColor);
  627. }
  628. }
  629. /**
  630. * 更改图例说
  631. * @param num number
  632. */
  633. upadatitemExplain(ItemExplain) {
  634. if (this.focusItem) {
  635. this.focusItem.data.Properties.ItemExplain = ItemExplain;
  636. }
  637. }
  638. /**
  639. * 更新工程信息化的相关数据
  640. * @param AttachObjectIds Array
  641. */
  642. upadatAttachObjectIds(AttachObjectIds) {
  643. if (this.focusItem) {
  644. this.focusItem.data.AttachObjectIds = AttachObjectIds;
  645. }
  646. }
  647. /**
  648. * 删除指定item
  649. */
  650. deleiteItem() {
  651. if (this.focusItem) {
  652. if ((this.focusItem instanceof SZoneLegendItem ||
  653. this.focusItem instanceof SSCPZZoneLegendItem ||
  654. this.focusItem instanceof SFHFQZoneLegendItem ||
  655. this.focusItem instanceof TipelineItem) &&
  656. this.focusItem.curIndex != -1) {
  657. this.focusItem.deletePoint(this.focusItem.curIndex);
  658. }
  659. else {
  660. this.removeItem(this.focusItem);
  661. let a = -1;
  662. this.Nodes.forEach((item, index) => {
  663. if (item.id == this.focusItem.id) {
  664. a = index;
  665. }
  666. });
  667. if (a > -1) {
  668. this.Nodes.splice(a, 1);
  669. }
  670. let b = -1;
  671. this.Markers.forEach((item, index) => {
  672. if (item.id == this.focusItem.id) {
  673. b = index;
  674. }
  675. });
  676. if (b > -1) {
  677. this.Markers.splice(b, 1);
  678. }
  679. let c = -1;
  680. this.Relations.forEach((item, index) => {
  681. if (item.id == this.focusItem.id) {
  682. c = index;
  683. }
  684. });
  685. if (c > -1) {
  686. this.Relations.splice(c, 1);
  687. }
  688. this.focusItem = null;
  689. if (this.view) {
  690. this.view.update();
  691. }
  692. this.scenceUpdate(this);
  693. }
  694. }
  695. }
  696. scenceUpdate(scence) { }
  697. /**
  698. * 对齐指定item
  699. * @param v
  700. */
  701. changeAlignItem(v) {
  702. this.selectContainer.layout(v);
  703. }
  704. /**
  705. * 提取item
  706. */
  707. extractItem() {
  708. console.log(this);
  709. }
  710. /**
  711. * 保存数据
  712. */
  713. saveMsgItem() {
  714. const Nodes = [];
  715. const Markers = [];
  716. const Relations = [];
  717. this.Nodes.forEach(e => {
  718. Nodes.push(e.toData());
  719. });
  720. this.Markers.forEach(e => {
  721. Markers.push(e.toData());
  722. });
  723. this.Relations.forEach(e => {
  724. Relations.push(e.toData());
  725. });
  726. let element = {
  727. Nodes, Markers, Relations
  728. };
  729. return element;
  730. }
  731. /**
  732. * 锁住item
  733. */
  734. lockItem() {
  735. }
  736. /**
  737. * 执行取消操作
  738. */
  739. redo() {
  740. this.undoStack.undo();
  741. }
  742. /**
  743. * 执行重做操作执行
  744. */
  745. undo() {
  746. this.undoStack.redo();
  747. }
  748. /**
  749. * 完成事件创建的回调函数
  750. */
  751. finishCreated(item) {
  752. this.setCmd = 'choice';
  753. this.focusItem = item;
  754. this.selectContainer.toggleItem(item);
  755. }
  756. ////////////////////////
  757. // 以下为鼠标键盘操作事件
  758. onMouseDown(event) {
  759. if (!this.isEditStatus) {
  760. return super.onMouseDown(event);
  761. }
  762. // 判断是否开启吸附,并且有吸附的点
  763. if (this.isAbsorbing &&
  764. this.highLight &&
  765. this.highLight.visible) {
  766. event.x = this.highLight.point.x;
  767. event.y = this.highLight.point.y;
  768. }
  769. if (this.grabItem) {
  770. if (this.grabItem instanceof TipelineItem) {
  771. this.setTipeEndanchor(event);
  772. return true;
  773. }
  774. return this.grabItem.onMouseDown(event);
  775. }
  776. switch (this.cmd) {
  777. case 'baseLine':
  778. this.addLine(event);
  779. break;
  780. case 'baseText':
  781. this.addTextItem(event);
  782. break;
  783. case 'baseImage':
  784. this.addImgItem(event);
  785. break;
  786. case 'Zone':
  787. if (!this.isSelecting) {
  788. this.addPolygonItem(event);
  789. }
  790. else {
  791. // 点选创建区域
  792. return super.onMouseDown(event);
  793. }
  794. break;
  795. case 'Image':
  796. this.addIconItem(event);
  797. break;
  798. case 'Line':
  799. this.addTipelineItem(event);
  800. break;
  801. default:
  802. return super.onMouseDown(event);
  803. }
  804. }
  805. onMouseMove(event) {
  806. if (!this.isEditStatus) {
  807. return super.onMouseMove(event);
  808. }
  809. if (this.isAbsorbing) {
  810. if (!this.highLight) {
  811. this.highLight = new HighlightItem(null);
  812. this.addItem(this.highLight);
  813. }
  814. this.highLight.visible = false;
  815. this.absorbSpace(event);
  816. }
  817. return super.onMouseMove(event);
  818. }
  819. /**
  820. * 键盘事件
  821. *
  822. * @param event 事件参数
  823. * @return boolean
  824. */
  825. onKeyDown(event) {
  826. if (!this.isEditStatus) {
  827. return super.onKeyDown(event);
  828. }
  829. if (this.grabItem) {
  830. this.grabItem.onKeyDown(event);
  831. if (event.code == "Escape") {
  832. const item = this.grabItem;
  833. this.grabItem = null;
  834. this.removeItem(item);
  835. if (this.view) {
  836. this.view.update();
  837. }
  838. this.setCmd = 'choice';
  839. }
  840. }
  841. // if (event.key == "Enter") {
  842. // this.cmd = 0
  843. // }
  844. return false;
  845. }
  846. /**
  847. * 鼠标双击事件
  848. *
  849. * @param event 事件参数
  850. * @return boolean
  851. */
  852. onDoubleClick(event) {
  853. if (!this.isEditStatus) {
  854. return true;
  855. }
  856. else {
  857. return super.onDoubleClick(event);
  858. }
  859. } // Function onDoubleClick()
  860. /**
  861. * 设置结束锚点
  862. *
  863. */
  864. setTipeEndanchor(event) {
  865. var _a;
  866. if (this.grabItem instanceof TipelineItem) {
  867. if (this.grabItem.status == SItemStatus.Create) {
  868. const anc = this.clickIsAnchor(event);
  869. if (anc) {
  870. const p = anc.mapToScene(0, 0);
  871. anc.isConnected = true;
  872. event.x = p.x;
  873. event.y = p.y;
  874. if (this.grabItem.pointList.length) {
  875. this.grabItem.endAnchor = anc;
  876. (_a = anc.parent) === null || _a === void 0 ? void 0 : _a.connect('changePos', this.grabItem, this.grabItem.changePos);
  877. }
  878. this.grabItem.anchor2ID = anc.id;
  879. this.grabItem.node2Id = anc.parent.id;
  880. this.grabItem.onMouseDown(event);
  881. this.grabItem.status = SItemStatus.Normal;
  882. this.finishCreated(this.grabItem);
  883. return;
  884. }
  885. }
  886. this.grabItem.onMouseDown(event);
  887. }
  888. }
  889. /**
  890. * 划线时点击位置是否是锚点
  891. *
  892. * @param event 事件
  893. * @param len 限制距离
  894. * @return 点击的锚点
  895. * */
  896. clickIsAnchor(event) {
  897. let minAnchor = null;
  898. let len = -1;
  899. this.Nodes.forEach(image => {
  900. if (image.anchorList && image.anchorList.length) {
  901. image.anchorList.forEach(anchor => {
  902. let anchorPoint = anchor.mapToScene(0, 0);
  903. let dis = SMathUtil.pointDistance(event.x, event.y, anchorPoint.x, anchorPoint.y);
  904. if (len < 0) {
  905. len = anchor.sceneDis;
  906. }
  907. if (dis < len) {
  908. minAnchor = anchor;
  909. len = dis;
  910. }
  911. });
  912. }
  913. });
  914. console.log('-----------------------');
  915. console.log(minAnchor);
  916. console.log('-----------------------');
  917. return minAnchor;
  918. }
  919. /**
  920. * 划线时点击位置是在文本,图片,,区域内
  921. *
  922. * @param event 事件
  923. * @return 点击的item
  924. * */
  925. clickIsItem(event) {
  926. let minIten = null;
  927. let len = -1;
  928. let itemList = this.Nodes.concat(this.Markers);
  929. itemList.forEach(item => {
  930. if (item instanceof STextMarkerItem ||
  931. item instanceof SImageMarkerItem ||
  932. item instanceof SZoneLegendItem ||
  933. item instanceof SFHFQZoneLegendItem ||
  934. item instanceof SSCPZZoneLegendItem) {
  935. let scenePoint = item.mapFromScene(event.x, event.y);
  936. if (item.contains(scenePoint.x, scenePoint.y)) {
  937. let dis = SMathUtil.pointDistance(scenePoint.x, scenePoint.y, item.boundingRect().center().x, item.boundingRect().center().y);
  938. if (len < 0) {
  939. minIten = item;
  940. len = dis;
  941. }
  942. if (dis < len) {
  943. minIten = item;
  944. len = dis;
  945. }
  946. }
  947. }
  948. });
  949. console.log('-----------------------');
  950. console.log(minIten);
  951. console.log('-----------------------');
  952. return minIten;
  953. }
  954. /**
  955. * 点是否在吸附区域内
  956. *
  957. * @param p 要判断的点
  958. * @param minX 空间区域
  959. * @param minY 空间区域
  960. * @param maxX 空间区域
  961. * @param maxY 空间区域
  962. */
  963. static isPointInAbsorbArea(p, minX, maxX, minY, maxY) {
  964. let rect = new SRect(minX - 1000, minY - 1000, maxX - minX + 2000, maxY - minY + 2000);
  965. return rect.contains(p.x, p.y);
  966. } // Function isPointInAbsorbArea()
  967. /**
  968. * 吸附空间
  969. *
  970. * @param event 鼠标事件对象
  971. * @return boolean 是否找到吸附的对象
  972. */
  973. absorbSpace(event) {
  974. if (!this.highLight) {
  975. return false;
  976. }
  977. let absorbLen = 1000;
  978. if (this.view) {
  979. absorbLen = 10 / this.view.scale;
  980. }
  981. let P = this.absorbSpacePoint(event, absorbLen);
  982. if (P.Point) {
  983. this.highLight.distance = P.MinDis;
  984. this.highLight.point = new SPoint(P.Point.X, -P.Point.Y);
  985. this.highLight.visible = true;
  986. return true;
  987. }
  988. else {
  989. let L = this.absorbSpaceLine(event, absorbLen);
  990. if (L.Line && L.Point) {
  991. this.highLight.distance = L.MinDis;
  992. this.highLight.point = L.Point;
  993. this.highLight.line = L.Line;
  994. this.highLight.visible = true;
  995. return true;
  996. }
  997. return false;
  998. }
  999. } // Function absorbSpace()
  1000. /**
  1001. * 吸附空间点
  1002. *
  1003. * @param event 鼠标事件对象
  1004. * @param absorbLen 吸附距离
  1005. * @return MinDis 吸附的点
  1006. */
  1007. absorbSpacePoint(event, absorbLen) {
  1008. let minPointDis = Number.MAX_SAFE_INTEGER;
  1009. let Point;
  1010. this.spaceList.map((space) => {
  1011. if (EditScence.isPointInAbsorbArea(new SPoint(event.x, event.y), space.minX, space.maxX, space.minY, space.maxY)) {
  1012. space.data.OutLine.forEach((item) => {
  1013. let minDis = SMathUtil.getMinDisPoint(new SPoint(event.x, event.y), item);
  1014. if (minDis &&
  1015. minDis.MinDis < absorbLen &&
  1016. minDis.MinDis < minPointDis) {
  1017. minPointDis = minDis.MinDis;
  1018. Point = minDis.Point;
  1019. }
  1020. });
  1021. }
  1022. });
  1023. return {
  1024. MinDis: minPointDis,
  1025. Point: Point
  1026. };
  1027. } // Function absorbSpacePoint()
  1028. /**
  1029. * 吸附空间线
  1030. *
  1031. * @param event 鼠标事件对象
  1032. * @param absorbLen 吸附距离
  1033. * @return PointToLine 吸附的线
  1034. */
  1035. absorbSpaceLine(event, absorbLen) {
  1036. let minPointDis = Number.MAX_SAFE_INTEGER;
  1037. let Point, Line;
  1038. this.spaceList.forEach((space) => {
  1039. if (EditScence.isPointInAbsorbArea(new SPoint(event.x, event.y), space.minX, space.maxX, space.minY, space.maxY)) {
  1040. space.data.OutLine.forEach((item) => {
  1041. let minDisLine = SMathUtil.getMinDisLine(new SPoint(event.x, event.y), item);
  1042. if (minDisLine &&
  1043. minDisLine.MinDis < absorbLen &&
  1044. minDisLine.MinDis < minPointDis) {
  1045. minPointDis = minDisLine.MinDis;
  1046. Point = minDisLine.Point;
  1047. Line = minDisLine.Line;
  1048. }
  1049. });
  1050. }
  1051. });
  1052. return {
  1053. MinDis: minPointDis,
  1054. Point: Point,
  1055. Line: Line
  1056. };
  1057. } // Function absorbSpaceLine()
  1058. }