EditScence.ts 30 KB

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