EditScence.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  2. import { SGraphScene,SGraphLayoutType } from '@saga-web/graph/lib';
  3. import { SPoint, SFont } from '@saga-web/draw/lib';
  4. import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
  5. import { SGraphItem, SImageItem, STextItem, 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 = 'equipment'
  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 SPolygonItem) {
  60. itemType = 'position'
  61. } else if (obj.itemList[0] instanceof SImgTextItem) {
  62. itemType = 'equipment'
  63. } else {
  64. itemType = ''
  65. };
  66. if (obj.itemList.length == 1) {
  67. // 获取聚焦item
  68. this.focusItem = obj.itemList[0]
  69. }
  70. let msg = {
  71. itemList: obj.itemList,
  72. itemType,
  73. }
  74. this.emitChange(msg)
  75. }
  76. emitChange(msg: any) {
  77. }
  78. /**
  79. * 增加线段item
  80. */
  81. addLine(event: SMouseEvent): boolean {
  82. const item = new SLineItem(null, new SPoint(event.x, event.y));
  83. this.addItem(item);
  84. item.connect("finishCreated", this, this.finishCreated);
  85. item.zOrder = ItemOrder.lineOrder;
  86. item.selectable = true;
  87. this.grabItem = item;
  88. this.undoStack.push(new SGraphAddCommand(this, item));
  89. // item.connect("onMove", this, this.onItemMove.bind(this));
  90. return true
  91. }
  92. /**
  93. * 增加折线item
  94. */
  95. addPolylineItem(event: SMouseEvent): boolean {
  96. const point = new SPoint(event.x, event.y)
  97. const item = new TipelineItem(null, [point]);
  98. //设置状态
  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. updatedFontColor(color: string): void {
  208. if (this.focusItem) {
  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. * 更改border颜色
  216. * @param color string 颜色
  217. */
  218. updatedBorderColor(color: string): void {
  219. if (this.focusItem) {
  220. let old = this.focusItem.strokeColor;
  221. this.focusItem.strokeColor = color;
  222. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  223. }
  224. }
  225. /**
  226. * 更改item宽
  227. * @param width number 颜色
  228. */
  229. updatedWidth(width: number): void {
  230. if (this.focusItem) {
  231. // let old = this.focusItem.width;
  232. this.focusItem.width = width;
  233. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  234. }
  235. }
  236. /**
  237. * 更改item高
  238. * @param height number 颜色
  239. */
  240. updatedHeight(height: number): void {
  241. if (this.focusItem) {
  242. // let old = this.focusItem.width;
  243. this.focusItem.height = height;
  244. // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
  245. }
  246. }
  247. /**
  248. * 更改item坐标
  249. * @param x number x x坐标
  250. * @param y number y y坐标
  251. */
  252. updatedPosition(x: number, y: number): void {
  253. if (this.focusItem) {
  254. this.focusItem.x = x;
  255. this.focusItem.y = y;
  256. }
  257. }
  258. /**
  259. * 更改item 背景色坐标
  260. * @param color string 颜色color
  261. */
  262. updatedbackColor(color: string): void {
  263. if (this.focusItem) {
  264. this.focusItem.backgroundColor = color;
  265. }
  266. }
  267. /**
  268. * 删除指定item
  269. */
  270. deleiteItem(): void {
  271. if (this.focusItem) {
  272. this.removeItem(this.focusItem);
  273. this.focusItem = null;
  274. }
  275. if (this.view) {
  276. this.view.update();
  277. }
  278. }
  279. /**
  280. * 对齐指定item
  281. * @param v
  282. */
  283. changeAlignItem(v: any): void {
  284. this.selectContainer.layout(SGraphLayoutType.v);
  285. }
  286. /**
  287. * 提取item
  288. */
  289. extractItem(): void {
  290. }
  291. /**
  292. * 锁住item
  293. */
  294. lockItem(): void {
  295. }
  296. /**
  297. * 执行取消操作
  298. */
  299. redo(): void {
  300. this.undoStack.undo();
  301. }
  302. /**
  303. * 执行重做操作执行
  304. */
  305. undo(): void {
  306. this.undoStack.redo();
  307. }
  308. /**
  309. * 完成事件创建的回调函数
  310. */
  311. finishCreated(item: any) {
  312. this.setCmd = 0;
  313. this.focusItem = item;
  314. this.selectContainer.toggleItem(item)
  315. }
  316. ////////////////////////
  317. // 以下为鼠标键盘操作事件
  318. onMouseDown(event: SMouseEvent): any {
  319. if (this.grabItem) {
  320. return this.grabItem.onMouseDown(event);
  321. }
  322. switch (this.cmd) {
  323. case 1:
  324. this.addLine(event);
  325. break;
  326. case 2:
  327. this.addTextItem(event);
  328. break;
  329. case 3:
  330. this.addImgItem(event)
  331. break;
  332. case 4:
  333. this.addPolygonItem(event);
  334. break;
  335. case 5:
  336. this.addPolylineItem(event);
  337. break;
  338. default:
  339. return super.onMouseDown(event);
  340. }
  341. }
  342. /**
  343. * 键盘事件
  344. *
  345. * @param event 事件参数
  346. * @return boolean
  347. */
  348. onKeyDown(event: KeyboardEvent): any {
  349. if (this.grabItem) {
  350. this.grabItem.onKeyDown(event);
  351. }
  352. // if (event.key == "Enter") {
  353. // this.cmd = 0
  354. // }
  355. return false
  356. }
  357. }