EditScence.js 19 KB

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