EditScence.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  1. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  2. import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
  3. import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } 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 { SImageLegendItem } from "@/lib/items/SImageLegendItem";
  7. import { TipelineItem } from "@/lib/items/TipelineItem";
  8. import { SImgTextItem } from "@/lib/items/SImgTextItem";
  9. import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
  10. import { SPoint, SFont } from '@saga-web/draw/lib';
  11. import { Legend } from '@/lib/types/Legend';
  12. import { Relation } from '@/lib/types/Relation';
  13. import { uuid } from "@/components/mapClass/until";
  14. import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
  15. import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
  16. /**
  17. * 在线绘图
  18. *
  19. * @author 韩耀龙
  20. */
  21. export class EditScence extends SGraphScene {
  22. undoStack = new SUndoStack();
  23. /** 命令 1 绘制直线 */
  24. private cmd = 'choice';
  25. /** 获取当前状态 */
  26. get getCmd(): string {
  27. return this.cmd;
  28. }
  29. /** 编辑当前状态 */
  30. set setCmd(cmd: string) {
  31. if (cmd == 'choice') {
  32. this.grabItem = null;
  33. }
  34. this.cmd = cmd;
  35. if (this.focusItem) {
  36. // 取消操作
  37. this.focusItem.cancelOperate();
  38. this.focusItem = null;
  39. // this.selectContainer.
  40. }
  41. if (this.view) {
  42. this.view.update();
  43. }
  44. };
  45. /** 当前选中焦点Item */
  46. focusItem: SGraphItem | null = null;
  47. /**图例节点 */
  48. Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
  49. /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  50. Markers: any = [];
  51. /** 管线对象 */
  52. Relations: any = [];
  53. constructor() {
  54. super();
  55. // // 选择绑定选额item事件
  56. this.selectContainer.connect("listChange", this, this.listChange);
  57. }
  58. /** 绘制图例样式 */
  59. _legend: any | null = null;
  60. get getlegend(): any {
  61. return this._legend;
  62. };
  63. set setlegend(obj: any) {
  64. this._legend = obj;
  65. console.log('aaaaaa', obj)
  66. }
  67. /**
  68. * 监听变化
  69. * @param obj 变化后的对象
  70. */
  71. listChange(obj: any) {
  72. let itemType: string = 'equipment';
  73. if (obj.itemList[0] instanceof STextMarkerItem) {
  74. itemType = 'baseText'
  75. } else if (obj.itemList[0] instanceof SImageMarkerItem) {
  76. itemType = 'baseImage'
  77. } else if (obj.itemList[0] instanceof SLineMarkerItem) {
  78. itemType = 'baseLine'
  79. } else if (obj.itemList[0] instanceof SZoneLegendItem) {
  80. itemType = 'Zone'
  81. } else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
  82. itemType = 'Zone'
  83. } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
  84. itemType = 'Zone'
  85. } else if (obj.itemList[0] instanceof SImageLegendItem) {
  86. itemType = 'Image'
  87. } else if (obj.itemList[0] instanceof TipelineItem) {
  88. itemType = 'Line'
  89. } else {
  90. itemType = ''
  91. };
  92. if (obj.itemList.length == 1) {
  93. // 获取聚焦item
  94. this.focusItem = obj.itemList[0]
  95. }
  96. let msg = {
  97. itemList: obj.itemList,
  98. itemType,
  99. }
  100. this.emitChange(msg)
  101. }
  102. emitChange(msg: any) {
  103. }
  104. /**
  105. * 增加线段item
  106. */
  107. addLine(event: SMouseEvent): boolean {
  108. const data = {
  109. /** ID */
  110. ID: uuid(),
  111. /** 名称 */
  112. Name: '直线',
  113. /** 图标(Image),线类型(Line) */
  114. Type: "Line",
  115. /** 位置 */
  116. Pos: { X: 0, Y: 0 },
  117. /** 由应用自己定义 */
  118. Properties: {
  119. Line: [{ X: event.x, Y: event.y }]
  120. }
  121. }
  122. const item = new SLineMarkerItem(null, data);
  123. item.status = SItemStatus.Create;
  124. item.zOrder = ItemOrder.lineOrder;
  125. item.selectable = true;
  126. this.addItem(item);
  127. item.connect("finishCreated", this, this.finishCreated);
  128. this.grabItem = item;
  129. this.Markers.push(item)
  130. // this.undoStack.push(new SGraphAddCommand(this, item));
  131. // item.connect("onMove", this, this.onItemMove.bind(this));
  132. return true
  133. }
  134. /**
  135. * 增加折线item
  136. */
  137. addPolylineItem(event: SMouseEvent): boolean {
  138. const point = new SPoint(event.x, event.y)
  139. const item = new TipelineItem(null, [point]);
  140. //设置状态
  141. item.selectable = true;
  142. item.status = SItemStatus.Create;
  143. item.zOrder = ItemOrder.polylineOrder
  144. this.addItem(item);
  145. item.connect("finishCreated", this, this.finishCreated);
  146. // this.undoStack.push(new SGraphAddCommand(this, item));
  147. this.grabItem = item;
  148. this.focusItem = item;
  149. return true
  150. }
  151. /**
  152. * 增加管道 lenged
  153. */
  154. addTipelineItem(event: SMouseEvent): boolean {
  155. const LegendData: Relation = {
  156. ID: uuid(),
  157. Name: this._legend.Name,
  158. GraphElementType: this._legend.Type,
  159. Num: 1,
  160. GraphElementId: this._legend.Id,
  161. AttachObjectIds: [],
  162. Type: "Line",
  163. PointList: [{ X: event.x, Y: event.y }],
  164. LineType: 0,
  165. Properties: {
  166. LineDash: this._legend.LineDash,
  167. LineWidth: this._legend.LineWidth,
  168. Color: this._legend.Color,
  169. },
  170. }
  171. const item = new TipelineItem(null, LegendData);
  172. //设置状态
  173. item.selectable = true;
  174. item.status = SItemStatus.Create;
  175. item.zOrder = ItemOrder.polylineOrder
  176. this.addItem(item);
  177. this.Relations.push(item);
  178. item.connect("finishCreated", this, this.finishCreated);
  179. // this.undoStack.push(new SGraphAddCommand(this, item));
  180. this.grabItem = item;
  181. this.focusItem = item;
  182. return true
  183. }
  184. /**
  185. * 增加多边形item lenged
  186. */
  187. addPolygonItem(event: SMouseEvent): void {
  188. const SubType = this._legend.SubType ? this._legend.SubType : ''
  189. const LegendData: Legend = {
  190. ID: uuid(),
  191. Name: this._legend.Name,
  192. GraphElementType: this._legend.Type,
  193. Num: 1,
  194. GraphElementId: this._legend.Id,
  195. AttachObjectIds: [],
  196. Type: "Zone",
  197. Pos: { X: event.x, Y: event.y },
  198. OutLine: [{ X: event.x, Y: event.y }],
  199. SubType: SubType,
  200. Properties: {
  201. StrokeColor: this._legend.Color,
  202. FillColor: this._legend.FillColor,
  203. LineDash: this._legend.LineDash,
  204. LineWidth: this._legend.LineWidth,
  205. font: 0,
  206. color: '',
  207. TextPos: { X: 0, Y: 0 }
  208. },
  209. }
  210. let Polylines = null;
  211. if (SubType == "SCPZ") {
  212. Polylines = new SSCPZZoneLegendItem(null, LegendData);
  213. } else if (SubType == "FHFQ") {
  214. Polylines = new SFHFQZoneLegendItem(null, LegendData);
  215. } else {
  216. Polylines = new SZoneLegendItem(null, LegendData);
  217. }
  218. Polylines.selectable = true;
  219. //设置状态
  220. Polylines.status = SItemStatus.Create;
  221. Polylines.zOrder = ItemOrder.polygonOrder;
  222. // Polylines.moveable = true;
  223. this.addItem(Polylines);
  224. Polylines.connect("finishCreated", this, this.finishCreated);
  225. this.grabItem = Polylines;
  226. this.focusItem = Polylines;
  227. this.Nodes.push(Polylines);
  228. }
  229. /**
  230. * 增加图片Item mark
  231. */
  232. addImgItem(event: SMouseEvent) {
  233. const data = {
  234. /** ID */
  235. ID: uuid(),
  236. /** 名称 */
  237. Name: '图片',
  238. Num: 1,
  239. /** 图标(Image),线类型(Line) */
  240. Type: "Image",
  241. /** 位置 */
  242. Pos: { X: event.x, Y: event.y },
  243. /** 由应用自己定义 */
  244. Properties: {
  245. Url: '',
  246. }
  247. }
  248. const item = new SImageMarkerItem(null, data);
  249. item.zOrder = ItemOrder.imageOrder;
  250. item.selectable = true;
  251. item.moveable = true;
  252. this.addItem(item);
  253. this.grabItem == null;
  254. this.focusItem = item;
  255. this.cmd = 'choice';
  256. this.Markers.push(item)
  257. }
  258. /**
  259. * 增加文字item
  260. */
  261. addTextItem(event: SMouseEvent): void {
  262. const data = {
  263. /** ID */
  264. ID: uuid(),
  265. /** 名称 */
  266. Name: '文本',
  267. /** 图标 */
  268. Type: "Text",
  269. /** 位置 */
  270. Pos: { X: event.x, Y: event.y },
  271. /** 由应用自己定义 */
  272. Properties: {
  273. Text: '请在右侧属性栏输入文字!',
  274. Color: '',
  275. Font: 0,
  276. BackgroundColor: ''
  277. }
  278. }
  279. const item = new STextMarkerItem(null, data);
  280. item.moveTo(event.x, event.y);
  281. item.selectable = true;
  282. item.moveable = true;
  283. item.zOrder = ItemOrder.textOrder;
  284. this.addItem(item);
  285. this.grabItem == null
  286. this.cmd = 'choice';
  287. this.Markers.push(item)
  288. }
  289. /**
  290. * 增加图标lenged图标
  291. */
  292. addIconItem(event: SMouseEvent): void {
  293. const LegendData: Legend = {
  294. ID: uuid(),
  295. Name: this._legend.Name,
  296. GraphElementType: this._legend.Type,
  297. Num: 1,
  298. GraphElementId: this._legend.Id,
  299. AttachObjectIds: [],
  300. Pos: { X: event.x, Y: event.y },
  301. Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
  302. Rolate: { X: 0, Y: 0, Z: 0 },
  303. Size: { Width: 0, Height: 0 }, // 大小
  304. Properties: {
  305. Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  306. Num: 1, // 此num与信息工程化得num无关
  307. sWidth: 0, //icon 的宽
  308. sHeight: 0, //icon 的高
  309. font: 0, //font
  310. color: '' //字体颜色
  311. },
  312. }
  313. const item = new SImageLegendItem(null, LegendData);
  314. this.grabItem == null
  315. this.cmd = 'choice';
  316. item.selectable = true;
  317. item.moveable = true;
  318. item.zOrder = ItemOrder.markOrder;
  319. // item.moveTo(event.x, event.y);
  320. this.addItem(item);
  321. this.Nodes.push(item);
  322. }
  323. /**
  324. * 更改item对应属性
  325. */
  326. editItemStatus(): void {
  327. }
  328. /**
  329. * 更改文本对应属性
  330. * @param str string 文字内容
  331. */
  332. updatedText(str: string): void {
  333. if (this.focusItem) {
  334. const old = this.focusItem.text;
  335. this.focusItem.text = str;
  336. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
  337. }
  338. }
  339. /**
  340. * 更改文本fontSize属性
  341. * @param size number 文字大小
  342. */
  343. updatedFontSize(size: number): void {
  344. if (this.focusItem) {
  345. let old = new SFont(this.focusItem.font);
  346. let font = new SFont(this.focusItem.font);
  347. font.size = size;
  348. this.focusItem.font = font;
  349. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  350. }
  351. }
  352. /**
  353. * 更改线宽属性
  354. * @param lineWidth number 线宽大小
  355. */
  356. updatedLineWidth(lineWidth: number): void {
  357. if (this.focusItem) {
  358. // let old = new SFont(this.focusItem.font);
  359. // let font = new SFont(this.focusItem.font);
  360. // font.size = size;
  361. this.focusItem.lineWidth = lineWidth;
  362. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  363. }
  364. }
  365. /**
  366. * 更改文本颜色属性
  367. * @param str string 颜色
  368. */
  369. updatedFontColor(color: string): void {
  370. if (this.focusItem) {
  371. let old = this.focusItem.color;
  372. this.focusItem.color = color;
  373. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  374. }
  375. }
  376. /**
  377. * 更改border颜色
  378. * @param color string 颜色
  379. */
  380. updatedBorderColor(color: string): void {
  381. if (this.focusItem) {
  382. if (this.focusItem instanceof SZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
  383. this.focusItem.strokeColor = new SColor(color)
  384. } else {
  385. // let old = this.focusItem.strokeColor;
  386. this.focusItem.strokeColor = color;
  387. }
  388. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  389. }
  390. }
  391. /**
  392. * 更改item宽
  393. * @param width number 颜色
  394. */
  395. updatedWidth(width: number): void {
  396. if (this.focusItem) {
  397. // let old = this.focusItem.width;
  398. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  399. this.focusItem.sWidth = width;
  400. } else {
  401. this.focusItem.width = width;
  402. }
  403. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  404. }
  405. }
  406. /**
  407. * 更改item高
  408. * @param height number 颜色
  409. */
  410. updatedHeight(height: number): void {
  411. if (this.focusItem) {
  412. // let old = this.focusItem.width;
  413. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  414. this.focusItem.sHeight = height;
  415. } else {
  416. this.focusItem.height = height;
  417. }
  418. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  419. }
  420. }
  421. /**
  422. * 更改item坐标
  423. * @param x number x x坐标
  424. * @param y number y y坐标
  425. */
  426. updatedPosition(x: number, y: number): void {
  427. if (this.focusItem) {
  428. let p = this.focusItem.mapFromScene(x, y)
  429. // newx - oldx = newleft - oldleft
  430. // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
  431. this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
  432. this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
  433. }
  434. }
  435. /**
  436. * 更改item 背景色坐标
  437. * @param color string 颜色color
  438. */
  439. updatedbackColor(color: string): void {
  440. if (this.focusItem) {
  441. this.focusItem.backgroundColor = color;
  442. }
  443. }
  444. /**
  445. * 更改item Url
  446. * @param url string 图片key
  447. */
  448. upadataImageUrl(url: string): void {
  449. if (this.focusItem) {
  450. this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
  451. }
  452. }
  453. /**
  454. * 更改item border
  455. * @param val string border类型
  456. */
  457. upadataBorder(val: string): void {
  458. if (this.focusItem) {
  459. let borderStyle = null
  460. if (val == 'dashed') {
  461. borderStyle = SLineStyle.Dashed
  462. } else if (val == 'dotted') {
  463. borderStyle = SLineStyle.Dotted
  464. } else if (val == 'solid') {
  465. borderStyle = SLineStyle.Soild
  466. }
  467. this.focusItem.lineStyle = borderStyle;
  468. }
  469. }
  470. /**
  471. * 更改item 名称
  472. * @param val string border类型
  473. */
  474. upadataLengedName(val: string): void {
  475. if (this.focusItem && this.focusItem.data) {
  476. this.focusItem.text = val
  477. }
  478. }
  479. /**
  480. * 更改item Num数量
  481. * @param num number item数量 (只对icon设备类)
  482. */
  483. upadatImageNum(num: number): void {
  484. if (this.focusItem && this.focusItem.num) {
  485. this.focusItem.num = num
  486. }
  487. }
  488. /**
  489. * 更改item Num数量
  490. * @param num number item数量 (只对icon设备类)
  491. */
  492. upadatfillColor(fillColor: string): void {
  493. if (this.focusItem && this.focusItem.fillColor) {
  494. this.focusItem.fillColor = new SColor(fillColor)
  495. }
  496. }
  497. /**
  498. * 更改图例说明数量
  499. * @param num number item数量 (只对icon设备类)
  500. */
  501. upadatitemExplain(itemExplain: string): void {
  502. if (this.focusItem) {
  503. this.focusItem.itemExplain = itemExplain
  504. }
  505. }
  506. /**
  507. * 删除指定item
  508. */
  509. deleiteItem(): void {
  510. if (this.focusItem) {
  511. this.removeItem(this.focusItem);
  512. let a = -1
  513. this.Nodes.forEach((item: any, index: number) => {
  514. if (item.id == this.focusItem.id) {
  515. a = index
  516. }
  517. });
  518. this.Nodes.splice(a, 1);
  519. let b = -1;
  520. this.Markers.forEach((item: any, index: number) => {
  521. if (item.id == this.focusItem.id) {
  522. b = index
  523. }
  524. });
  525. this.Markers.splice(b, 1);
  526. let c = -1;
  527. this.Relations.forEach((item: any, index: number) => {
  528. if (item.id == this.focusItem.id) {
  529. c = index
  530. }
  531. });
  532. this.Relations.splice(c, 1);
  533. this.focusItem = null;
  534. }
  535. if (this.view) {
  536. this.view.update();
  537. }
  538. }
  539. /**
  540. * 对齐指定item
  541. * @param v
  542. */
  543. changeAlignItem(v: any): void {
  544. this.selectContainer.layout(v);
  545. }
  546. /**
  547. * 提取item
  548. */
  549. extractItem(): void {
  550. console.log(this)
  551. }
  552. /**
  553. * 保存数据
  554. */
  555. saveMsgItem(): any {
  556. const Nodes: any = [];
  557. const Markers: any = [];
  558. const Relations: any = [];
  559. this.Nodes.forEach(e => {
  560. Nodes.push(e.toData())
  561. });
  562. this.Markers.forEach(e => {
  563. Markers.push(e.toData())
  564. });
  565. this.Relations.forEach(e => {
  566. Relations.push(e.toData())
  567. });
  568. let element = {
  569. Nodes, Markers, Relations
  570. }
  571. return element
  572. }
  573. /**
  574. * 锁住item
  575. */
  576. lockItem(): void {
  577. }
  578. /**
  579. * 执行取消操作
  580. */
  581. redo(): void {
  582. this.undoStack.undo();
  583. }
  584. /**
  585. * 执行重做操作执行
  586. */
  587. undo(): void {
  588. this.undoStack.redo();
  589. }
  590. /**
  591. * 完成事件创建的回调函数
  592. */
  593. finishCreated(item: any) {
  594. this.setCmd = 'choice';
  595. this.focusItem = item;
  596. this.selectContainer.toggleItem(item)
  597. }
  598. ////////////////////////
  599. // 以下为鼠标键盘操作事件
  600. onMouseDown(event: SMouseEvent): any {
  601. if (this.grabItem) {
  602. return this.grabItem.onMouseDown(event);
  603. }
  604. switch (this.cmd) {
  605. case 'baseLine':
  606. this.addLine(event);
  607. break;
  608. case 'baseText':
  609. this.addTextItem(event);
  610. break;
  611. case 'baseImage':
  612. this.addImgItem(event)
  613. break;
  614. case 'Zone':
  615. this.addPolygonItem(event);
  616. break;
  617. case 'Image':
  618. this.addIconItem(event);
  619. break;
  620. case 'Line':
  621. this.addTipelineItem(event);
  622. break;
  623. default:
  624. return super.onMouseDown(event);
  625. }
  626. }
  627. /**
  628. * 键盘事件
  629. *
  630. * @param event 事件参数
  631. * @return boolean
  632. */
  633. onKeyDown(event: KeyboardEvent): any {
  634. if (this.grabItem) {
  635. this.grabItem.onKeyDown(event);
  636. }
  637. // if (event.key == "Enter") {
  638. // this.cmd = 0
  639. // }
  640. return false
  641. }
  642. }