EditScence.ts 31 KB

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