EditScence.js 17 KB

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