EditScence.ts 33 KB

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