EditScence.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  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, 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 { uuid } from "@/components/mapClass/until";
  13. import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
  14. /**
  15. * 在线绘图
  16. *
  17. * @author 韩耀龙
  18. */
  19. export class EditScence extends SGraphScene {
  20. undoStack = new SUndoStack();
  21. /** 命令 1 绘制直线 */
  22. private cmd = 'choice';
  23. /** 获取当前状态 */
  24. get getCmd(): string {
  25. return this.cmd;
  26. }
  27. /** 编辑当前状态 */
  28. set setCmd(cmd: string) {
  29. if (cmd == 'choice') {
  30. this.grabItem = null;
  31. }
  32. this.cmd = cmd;
  33. if (this.focusItem) {
  34. // 取消操作
  35. this.focusItem.cancelOperate();
  36. this.focusItem = null;
  37. // this.selectContainer.
  38. }
  39. if (this.view) {
  40. this.view.update();
  41. }
  42. };
  43. /** 当前选中焦点Item */
  44. focusItem: SGraphItem | null = null;
  45. /**图例节点 */
  46. Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
  47. /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  48. Markers: any = [];
  49. /** 管线对象 */
  50. Relations: any = [];
  51. constructor() {
  52. super();
  53. // // 选择绑定选额item事件
  54. this.selectContainer.connect("listChange", this, this.listChange);
  55. }
  56. /** 绘制图例样式 */
  57. _legend: any | null = null;
  58. get getlegend(): any {
  59. return this._legend;
  60. };
  61. set setlegend(obj: any) {
  62. this._legend = obj;
  63. }
  64. /**
  65. * 监听变化
  66. * @param obj 变化后的对象
  67. */
  68. listChange(obj: any) {
  69. let itemType: string = 'equipment'
  70. if (obj.itemList[0] instanceof STextMarkerItem) {
  71. itemType = 'text'
  72. } else if (obj.itemList[0] instanceof SImageMarkerItem) {
  73. itemType = 'images'
  74. } else if (obj.itemList[0] instanceof SLineItem) {
  75. itemType = 'line'
  76. } else if (obj.itemList[0] instanceof SPolylineItem) {
  77. itemType = 'pipeline'
  78. } else if (obj.itemList[0] instanceof SZoneLegendItem) {
  79. itemType = 'position'
  80. } else if (obj.itemList[0] instanceof SImgTextItem) {
  81. itemType = 'equipment'
  82. } else {
  83. itemType = ''
  84. };
  85. if (obj.itemList.length == 1) {
  86. // 获取聚焦item
  87. this.focusItem = obj.itemList[0]
  88. }
  89. let msg = {
  90. itemList: obj.itemList,
  91. itemType,
  92. }
  93. this.emitChange(msg)
  94. }
  95. emitChange(msg: any) {
  96. }
  97. /**
  98. * 增加线段item
  99. */
  100. addLine(event: SMouseEvent): boolean {
  101. const item = new SLineItem(null, new SPoint(event.x, event.y));
  102. item.status = SItemStatus.Create;
  103. item.zOrder = ItemOrder.lineOrder;
  104. item.selectable = true;
  105. this.addItem(item);
  106. item.connect("finishCreated", this, this.finishCreated);
  107. this.grabItem = item;
  108. this.undoStack.push(new SGraphAddCommand(this, item));
  109. // item.connect("onMove", this, this.onItemMove.bind(this));
  110. return true
  111. }
  112. /**
  113. * 增加折线item
  114. */
  115. addPolylineItem(event: SMouseEvent): boolean {
  116. const point = new SPoint(event.x, event.y)
  117. const item = new TipelineItem(null, [point]);
  118. //设置状态
  119. item.selectable = true;
  120. item.status = SItemStatus.Create;
  121. item.zOrder = ItemOrder.polylineOrder
  122. this.addItem(item);
  123. item.connect("finishCreated", this, this.finishCreated);
  124. // this.undoStack.push(new SGraphAddCommand(this, item));
  125. this.grabItem = item;
  126. this.focusItem = item;
  127. return true
  128. }
  129. /**
  130. * 增加多边形item
  131. */
  132. addPolygonItem(event: SMouseEvent): void {
  133. const LegendData: Legend = {
  134. ID: uuid(),
  135. Name: this._legend.Name,
  136. GraphElementType: this._legend.Type,
  137. Num: 0,
  138. GraphElementId: this._legend.Id,
  139. AttachObjectIds: [],
  140. Pos: { x: 0, y: 0 },
  141. OutLine: [[new SPoint(event.x, event.y)]],
  142. Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
  143. Rolate: { X: 0, Y: 0, Z: 0 },
  144. Size: { Width: 0, Height: 0 }, // 大小
  145. Properties: {
  146. strokeColor: this._legend.Color,
  147. fillColor: this._legend.FillColor,
  148. },
  149. }
  150. const Polylines = new SZoneLegendItem(null, LegendData);
  151. Polylines.selectable = true;
  152. //设置状态
  153. Polylines.setStatus = SItemStatus.Create;
  154. const point = new SPoint(event.x, event.y);
  155. Polylines.zOrder = ItemOrder.polygonOrder;
  156. Polylines.setPointList = [point];
  157. Polylines.moveable = true;
  158. this.addItem(Polylines);
  159. Polylines.connect("finishCreated", this, this.finishCreated);
  160. this.grabItem = Polylines;
  161. this.focusItem = Polylines;
  162. this.Nodes.push(Polylines)
  163. }
  164. /**
  165. * 增加图片Item
  166. */
  167. addImgItem(event: SMouseEvent) {
  168. const data = {
  169. /** ID */
  170. ID:'123',
  171. /** 名称 */
  172. Name: '嗡嗡嗡',
  173. /** 图标(Image),线类型(Line) */
  174. Type: "Image",
  175. /** 位置 */
  176. Pos: {X: event.x, Y: event.y},
  177. /** 由应用自己定义 */
  178. Properties:{
  179. Url:require('./../../assets/logo.png'),
  180. Name: '嗡嗡嗡',
  181. }
  182. }
  183. const item = new SImageMarkerItem(null, data);
  184. item.zOrder = ItemOrder.imageOrder;
  185. item.selectable = true;
  186. item.moveable = true;
  187. this.addItem(item);
  188. this.grabItem == null;
  189. this.focusItem = item;
  190. this.cmd = 'choice';
  191. // this.Markers.push(item)
  192. }
  193. /**
  194. * 增加文字item
  195. */
  196. addTextItem(event: SMouseEvent): void {
  197. const data = {
  198. /** ID */
  199. ID:'456',
  200. /** 名称 */
  201. Name: '文本',
  202. /** 图标(Image),线类型(Line) */
  203. Type: "Text",
  204. /** 位置 */
  205. Pos: {X: event.x, Y: event.y},
  206. /** 由应用自己定义 */
  207. Properties:{
  208. Text: '请在右侧属性栏输入文字!'
  209. }
  210. }
  211. const item = new STextMarkerItem(null, data);
  212. item.moveTo(event.x, event.y);
  213. item.selectable = true;
  214. item.moveable = true;
  215. item.zOrder = ItemOrder.textOrder;
  216. this.addItem(item);
  217. this.grabItem == null
  218. this.cmd = 'choice';
  219. this.Markers.push(item)
  220. }
  221. /**
  222. * 增加图标
  223. */
  224. addIconItem(event: SMouseEvent): void {
  225. const item = new SImageLegendItem(null, '请在右侧属性栏输入文字!');
  226. this.grabItem == null
  227. this.cmd = 'choice';
  228. item.selectable = true;
  229. item.moveable = true;
  230. item.zOrder = ItemOrder.markOrder;
  231. item.moveTo(event.x, event.y);
  232. this.addItem(item);
  233. }
  234. /**
  235. * 更改item对应属性
  236. */
  237. editItemStatus(): void {
  238. }
  239. /**
  240. * 更改文本对应属性
  241. * @param str string 文字内容
  242. */
  243. updatedText(str: string): void {
  244. if (this.focusItem) {
  245. const old = this.focusItem.text;
  246. this.focusItem.text = str;
  247. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
  248. }
  249. }
  250. /**
  251. * 更改文本fontSize属性
  252. * @param size number 文字大小
  253. */
  254. updatedFontSize(size: number): void {
  255. if (this.focusItem) {
  256. let old = new SFont(this.focusItem.font);
  257. let font = new SFont(this.focusItem.font);
  258. font.size = size;
  259. this.focusItem.font = font;
  260. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  261. }
  262. }
  263. /**
  264. * 更改线宽属性
  265. * @param lineWidth number 线宽大小
  266. */
  267. updatedLineWidth(lineWidth: number): void {
  268. if (this.focusItem) {
  269. // let old = new SFont(this.focusItem.font);
  270. // let font = new SFont(this.focusItem.font);
  271. // font.size = size;
  272. this.focusItem.lineWidth = lineWidth;
  273. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  274. }
  275. }
  276. /**
  277. * 更改文本颜色属性
  278. * @param str string 颜色
  279. */
  280. updatedFontColor(color: string): void {
  281. if (this.focusItem) {
  282. let old = this.focusItem.color;
  283. this.focusItem.color = color;
  284. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  285. }
  286. }
  287. /**
  288. * 更改border颜色
  289. * @param color string 颜色
  290. */
  291. updatedBorderColor(color: string): void {
  292. if (this.focusItem) {
  293. let old = this.focusItem.strokeColor;
  294. this.focusItem.strokeColor = color;
  295. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  296. }
  297. }
  298. /**
  299. * 更改item宽
  300. * @param width number 颜色
  301. */
  302. updatedWidth(width: number): void {
  303. if (this.focusItem) {
  304. // let old = this.focusItem.width;
  305. this.focusItem.width = width;
  306. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  307. }
  308. }
  309. /**
  310. * 更改item高
  311. * @param height number 颜色
  312. */
  313. updatedHeight(height: number): void {
  314. if (this.focusItem) {
  315. // let old = this.focusItem.width;
  316. this.focusItem.height = height;
  317. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  318. }
  319. }
  320. /**
  321. * 更改item坐标
  322. * @param x number x x坐标
  323. * @param y number y y坐标
  324. */
  325. updatedPosition(x: number, y: number): void {
  326. if (this.focusItem) {
  327. let p = this.focusItem.mapFromScene(x, y)
  328. // newx - oldx = newleft - oldleft
  329. // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
  330. this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
  331. this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
  332. }
  333. }
  334. /**
  335. * 更改item 背景色坐标
  336. * @param color string 颜色color
  337. */
  338. updatedbackColor(color: string): void {
  339. if (this.focusItem) {
  340. this.focusItem.backgroundColor = color;
  341. }
  342. }
  343. /**
  344. * 删除指定item
  345. */
  346. deleiteItem(): void {
  347. if (this.focusItem) {
  348. this.removeItem(this.focusItem);
  349. this.focusItem = null;
  350. }
  351. if (this.view) {
  352. this.view.update();
  353. }
  354. }
  355. /**
  356. * 对齐指定item
  357. * @param v
  358. */
  359. changeAlignItem(v: any): void {
  360. console.log(v);
  361. this.selectContainer.layout(v);
  362. }
  363. /**
  364. * 提取item
  365. */
  366. extractItem(): void {
  367. console.log(this)
  368. }
  369. /**
  370. * 保存数据
  371. */
  372. saveMsgItem(): any {
  373. const Nodes: any = []
  374. this.Nodes.forEach(e => {
  375. Nodes.push(e.toData())
  376. });
  377. let element = {
  378. Nodes
  379. }
  380. return element
  381. }
  382. /**
  383. * 锁住item
  384. */
  385. lockItem(): void {
  386. }
  387. /**
  388. * 执行取消操作
  389. */
  390. redo(): void {
  391. this.undoStack.undo();
  392. }
  393. /**
  394. * 执行重做操作执行
  395. */
  396. undo(): void {
  397. this.undoStack.redo();
  398. }
  399. /**
  400. * 完成事件创建的回调函数
  401. */
  402. finishCreated(item: any) {
  403. this.setCmd = 'choice';
  404. this.focusItem = item;
  405. this.selectContainer.toggleItem(item)
  406. }
  407. ////////////////////////
  408. // 以下为鼠标键盘操作事件
  409. onMouseDown(event: SMouseEvent): any {
  410. if (this.grabItem) {
  411. return this.grabItem.onMouseDown(event);
  412. }
  413. switch (this.cmd) {
  414. case 'baseLine':
  415. this.addLine(event);
  416. break;
  417. case 'baseText':
  418. this.addTextItem(event);
  419. break;
  420. case 'baseImage':
  421. this.addImgItem(event)
  422. break;
  423. case 'Zone':
  424. this.addPolygonItem(event);
  425. break;
  426. case 'Image':
  427. this.addIconItem(event);
  428. break;
  429. case 'Line':
  430. this.addPolylineItem(event);
  431. break;
  432. default:
  433. return super.onMouseDown(event);
  434. }
  435. }
  436. /**
  437. * 键盘事件
  438. *
  439. * @param event 事件参数
  440. * @return boolean
  441. */
  442. onKeyDown(event: KeyboardEvent): any {
  443. if (this.grabItem) {
  444. this.grabItem.onKeyDown(event);
  445. }
  446. // if (event.key == "Enter") {
  447. // this.cmd = 0
  448. // }
  449. return false
  450. }
  451. }