EditScence.ts 19 KB

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