editScence.ts 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  2. import { SGraphScene } from '@saga-web/graph/lib';
  3. import { SPoint, SFont } from '@saga-web/draw/lib';
  4. import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
  5. import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
  6. import { SPolygonItem } from "./SPolygonItem";
  7. import { TipelineItem } from "@/lib/TipelineItem";
  8. import { SImgTextItem } from "@/lib/SImgTextItem"
  9. /**
  10. * 在线绘图
  11. *
  12. * @author 韩耀龙
  13. */
  14. export class EditScence extends SGraphScene {
  15. undoStack = new SUndoStack();
  16. /** 命令 1 绘制直线 */
  17. private cmd = 0;
  18. /** 获取当前状态 */
  19. get getCmd(): number {
  20. return this.cmd;
  21. }
  22. /** 编辑当前状态 */
  23. set setCmd(cmd: number) {
  24. if (cmd == 0) {
  25. this.grabItem = null;
  26. }
  27. this.cmd = cmd;
  28. if (this.focusItem) {
  29. // 取消操作
  30. this.focusItem.cancelOperate();
  31. this.focusItem = null;
  32. // this.selectContainer.
  33. }
  34. if (this.view) {
  35. this.view.update();
  36. }
  37. };
  38. /** 当前选中焦点Item */
  39. focusItem: SGraphItem | null = null;
  40. constructor() {
  41. super();
  42. // // 选择绑定选额item事件
  43. this.selectContainer.connect("listChange", this, this.listChange);
  44. }
  45. /**
  46. * 监听变化
  47. * @param obj 变化后的对象
  48. */
  49. listChange(obj: any) {
  50. let itemType: string = ''
  51. if (obj.itemList[0] instanceof STextItem) {
  52. itemType = 'text'
  53. } else if (obj.itemList[0] instanceof SImageItem) {
  54. itemType = 'images'
  55. } else if (obj.itemList[0] instanceof SLineItem) {
  56. itemType = 'line'
  57. } else if (obj.itemList[0] instanceof SPolylineItem) {
  58. itemType = 'pipeline'
  59. } else if (obj.itemList[0] instanceof SImgTextItem) {
  60. itemType = 'equipment'
  61. } else {
  62. itemType = ''
  63. };
  64. if (obj.itemList.length == 1) {
  65. // 获取聚焦item
  66. this.focusItem = obj.itemList[0]
  67. }
  68. let msg = {
  69. itemList: obj.itemList,
  70. itemType,
  71. }
  72. this.emitChange(msg)
  73. }
  74. emitChange(msg: any) {
  75. }
  76. /**
  77. * 增加线段item
  78. */
  79. addLine(event: SMouseEvent): boolean {
  80. const item = new SLineItem(null, new SPoint(event.x, event.y));
  81. this.addItem(item);
  82. item.connect("finishCreated", this, this.finishCreated);
  83. item.zOrder = ItemOrder.lineOrder;
  84. item.moveable = true;
  85. item.selectable = true;
  86. this.grabItem = item;
  87. this.undoStack.push(new SGraphAddCommand(this, item));
  88. // item.connect("onMove", this, this.onItemMove.bind(this));
  89. return true
  90. }
  91. /**
  92. * 增加折线item
  93. */
  94. addPolylineItem(event: SMouseEvent): boolean {
  95. const point = new SPoint(event.x, event.y)
  96. const item = new TipelineItem(null, [point]);
  97. //设置状态
  98. item.moveable = true;
  99. item.selectable = true;
  100. item.status = SItemStatus.Create;
  101. item.zOrder = ItemOrder.polylineOrder
  102. this.addItem(item);
  103. item.connect("finishCreated", this, this.finishCreated);
  104. // this.undoStack.push(new SGraphAddCommand(this, item));
  105. this.grabItem = item;
  106. this.focusItem = item;
  107. return true
  108. }
  109. /**
  110. * 增加多边形item
  111. */
  112. addPolygonItem(event: SMouseEvent): void {
  113. //创建item
  114. const Polylines = new SPolygonItem(null);
  115. Polylines.selectable = true;
  116. //设置状态
  117. Polylines.setStatus = SItemStatus.Create;
  118. const point = new SPoint(event.x, event.y);
  119. Polylines.zOrder = ItemOrder.polygonOrder;
  120. Polylines.setPointList = [point];
  121. Polylines.moveable = true;
  122. this.addItem(Polylines);
  123. Polylines.connect("finishCreated", this, this.finishCreated);
  124. this.grabItem = Polylines;
  125. this.focusItem = Polylines;
  126. }
  127. /**
  128. * 增加图片Item
  129. */
  130. addImgItem(event: SMouseEvent) {
  131. const url = require('./../../assets/logo.png')
  132. const item = new SImageItem(null);
  133. item.url = url;
  134. item.zOrder = ItemOrder.imageOrder;
  135. item.selectable = true;
  136. item.moveable = true;
  137. item.moveTo(event.x, event.y);
  138. this.addItem(item);
  139. this.grabItem == null;
  140. this.focusItem = item;
  141. this.cmd = 0;
  142. }
  143. /**
  144. * 增加文字item
  145. */
  146. addTextItem(event: SMouseEvent): void {
  147. const item = new STextItem(null, '请在右侧属性栏输入文字!');
  148. item.moveTo(event.x, event.y);
  149. item.selectable = true;
  150. item.moveable = true;
  151. item.zOrder = ItemOrder.textOrder;
  152. this.addItem(item);
  153. this.grabItem == null
  154. this.cmd = 0;
  155. }
  156. /**
  157. * 增加图标
  158. */
  159. addIconItem(): void {
  160. }
  161. /**
  162. * 更改item对应属性
  163. */
  164. editItemStatus(): void {
  165. }
  166. /**
  167. * 更改文本对应属性
  168. * @param str string 文字内容
  169. */
  170. updatedText(str: string): void {
  171. if (this.focusItem) {
  172. const old = this.focusItem.text;
  173. this.focusItem.text = str;
  174. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
  175. }
  176. }
  177. /**
  178. * 更改文本fontSize属性
  179. * @param size number 文字大小
  180. */
  181. updatedFontSize(size: number): void {
  182. if (this.focusItem) {
  183. let old = new SFont(this.focusItem.font);
  184. let font = new SFont(this.focusItem.font);
  185. font.size = size;
  186. this.focusItem.font = font;
  187. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  188. }
  189. }
  190. /**
  191. * 更改线宽属性
  192. * @param lineWidth number 线宽大小
  193. */
  194. updatedLineWidth(lineWidth: number): void {
  195. if (this.focusItem) {
  196. // let old = new SFont(this.focusItem.font);
  197. // let font = new SFont(this.focusItem.font);
  198. // font.size = size;
  199. this.focusItem.lineWidth = lineWidth;
  200. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  201. }
  202. }
  203. /**
  204. * 更改文本颜色属性
  205. * @param str string 颜色
  206. */
  207. updatedColor(str: string): void {
  208. if (this.focusItem.color) {
  209. let old = this.focusItem.color;
  210. this.focusItem.color = color;
  211. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  212. }
  213. }
  214. /**
  215. * 更改item宽
  216. * @param width number 颜色
  217. */
  218. updatedWidth(width: number): void {
  219. if (this.focusItem) {
  220. // let old = this.focusItem.width;
  221. this.focusItem.width = width;
  222. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  223. }
  224. }
  225. /**
  226. * 更改item高
  227. * @param height number 颜色
  228. */
  229. updatedHeight(height: number): void {
  230. if (this.focusItem) {
  231. // let old = this.focusItem.width;
  232. this.focusItem.height = height;
  233. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  234. }
  235. }
  236. /**
  237. * 删除指定item
  238. */
  239. deleiteItemStatus(): void {
  240. }
  241. /**
  242. * 对齐指定item
  243. */
  244. alignItem(): void {
  245. }
  246. /**
  247. * 提取item
  248. */
  249. extractItem(): void {
  250. }
  251. /**
  252. * 锁住item
  253. */
  254. lockItem(): void {
  255. }
  256. /**
  257. * 执行取消操作
  258. */
  259. redo(): void {
  260. this.undoStack.undo();
  261. }
  262. /**
  263. * 执行重做操作执行
  264. */
  265. undo(): void {
  266. this.undoStack.redo();
  267. }
  268. /**
  269. * 完成事件创建的回调函数
  270. */
  271. finishCreated(item: any) {
  272. this.setCmd = 0;
  273. this.focusItem = item;
  274. this.selectContainer.toggleItem(item)
  275. }
  276. ////////////////////////
  277. // 以下为鼠标键盘操作事件
  278. onMouseDown(event: SMouseEvent): any {
  279. if (this.grabItem) {
  280. return this.grabItem.onMouseDown(event);
  281. }
  282. switch (this.cmd) {
  283. case 1:
  284. this.addLine(event);
  285. break;
  286. case 2:
  287. this.addTextItem(event);
  288. break;
  289. case 3:
  290. this.addImgItem(event)
  291. break;
  292. case 4:
  293. this.addPolygonItem(event);
  294. break;
  295. case 5:
  296. this.addPolylineItem(event);
  297. break;
  298. default:
  299. return super.onMouseDown(event);
  300. }
  301. }
  302. /**
  303. * 键盘事件
  304. *
  305. * @param event 事件参数
  306. * @return boolean
  307. */
  308. onKeyDown(event: KeyboardEvent): any {
  309. if (this.grabItem) {
  310. this.grabItem.onKeyDown(event);
  311. }
  312. // if (event.key == "Enter") {
  313. // this.cmd = 0
  314. // }
  315. return false
  316. }
  317. }