PTopoScene.ts 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. import { SBaseEditScene, SBasePipe, } from "./../big-edit";
  2. import { SGraphEdit, } from "./../edit";
  3. import { SMouseEvent } from "@persagy-web/base/lib";
  4. import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
  5. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  6. import { rgbaNum } from "./../big-edit/until";
  7. // 引入命令
  8. import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
  9. import { SColor, SFont, SArrowStyleType } from '@persagy-web/draw/lib';
  10. export class PTopoScene extends SBaseEditScene {
  11. /** 图例数据 */
  12. legendObj: any = null;
  13. constructor() {
  14. super()
  15. // // 选择绑定选额item事件
  16. this.selectContainer.connect("listChange", this, this.listChange);
  17. }
  18. /**
  19. * 选中返回的选中item回调方法
  20. *
  21. * @param event 鼠标事件参数
  22. */
  23. listChange(list: any): void {
  24. const itemList: any = []
  25. console.log('list', list)
  26. list.itemList.forEach((item: any) => {
  27. if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer)) {
  28. itemList.push(item)
  29. }
  30. })
  31. this.emitChoice(itemList);
  32. } // Function listChange()
  33. /**
  34. * 选中返回的选中item回调方法(用于场景的外部调用)
  35. *
  36. * @param list 选中的item数组
  37. */
  38. emitChoice(list: any) {
  39. } // Function emitChoice()
  40. /**
  41. * 鼠标左键按下
  42. *
  43. * @param event 鼠标事件参数
  44. */
  45. onMouseDown(event: SMouseEvent): any {
  46. this.vueOnMouseDown(event) //外部调用
  47. if (this.grabItem) {
  48. if (this.grabItem instanceof SBasePipe) {
  49. this.setTipeEndanchor(event)
  50. return true;
  51. }
  52. return this.grabItem.onMouseDown(event);
  53. }
  54. if (this.editCmd == "EditBaseLine") {
  55. this.addPolyLineArrow(event);
  56. this.clearCmdStatus();
  57. } else if (this.editCmd == "EditBasePolyLine") {
  58. this.addPolyLine(event);
  59. this.clearCmdStatus();
  60. } else if (this.editCmd == "EditBasetext") {
  61. this.addTextItem(event);
  62. this.clearCmdStatus();
  63. }
  64. else if (this.editCmd == "BaseExplain") {
  65. this.addExplainItem(event);
  66. this.clearCmdStatus();
  67. } else if (this.editCmd == "EditBaseImage") {
  68. this.addImageItem(event)
  69. this.clearCmdStatus();
  70. }
  71. else if (this.editCmd == "EditBasePolygon") {
  72. this.addPolygonItem(event);
  73. this.clearCmdStatus();
  74. } else if (this.editCmd == "EditBaseRect") {
  75. this.addRectItem(event)
  76. this.clearCmdStatus();
  77. } else if (this.editCmd == "EditBaseTriangle") {
  78. this.addTriangleItem(event)
  79. this.clearCmdStatus();
  80. } else if (this.editCmd == "EditBaseCircle") {
  81. this.addCircleItem(event)
  82. this.clearCmdStatus();
  83. }
  84. else if (this.editCmd == "EditBaseArrows") {
  85. this.addPolygonArrow(event)
  86. this.clearCmdStatus();
  87. }
  88. else if (this.editCmd == "wantou" || this.editCmd == "santong" || this.editCmd == "sitong") {
  89. this.addPipeUninTool(event, this.editCmd)
  90. this.clearCmdStatus();
  91. }
  92. else if (this.editCmd == "EditBasePipe") {
  93. this.addBasePipe(event);
  94. // this.addBaseIconTextItem(event)
  95. this.clearCmdStatus();
  96. } else if (this.editCmd == "EditEuqipment" || this.legendObj) {
  97. this.addEuqipment(event, this.legendObj)
  98. this.clearCmdStatus();
  99. }
  100. else if (this.editCmd == "") {
  101. super.onMouseDown(event);
  102. }
  103. } // Function onMouseDown()
  104. /**
  105. * 鼠标右键事件
  106. *
  107. * @param event 鼠标事件参数
  108. */
  109. onContextMenu(event: SMouseEvent): boolean {
  110. if (!super.onContextMenu(event)) {
  111. this.getItem(null, [event])
  112. }
  113. return true
  114. } // Function onContextMenu()
  115. /**
  116. * 修改 item 样式,数据等方法
  117. * @param styletype string 修改样式类型
  118. * @param changeStyle 更改样式数据
  119. * @param itemList? SGraphEdit[] 如果不传入默认使用选择器中选中得item
  120. */
  121. updateStyle(styletype: string, changestyle: any, itemList?: SGraphEdit[]): void {
  122. // 如果未传入需要修改样式的item,默认取选择器中的item
  123. let List = null;
  124. if (itemList && itemList.length) {
  125. List = itemList;
  126. } else {
  127. List = this.selectContainer.itemList;
  128. };
  129. let styleValue: any
  130. if (styletype == "strokeColor" || styletype == "backgroundColor" || styletype == "fillColor") {
  131. const colorlist = rgbaNum(changestyle)
  132. styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
  133. } else if (styletype == "lineStyle") {
  134. styleValue = SLineStyle[changestyle]
  135. } else if (styletype == "begin" || styletype == "end") {
  136. styleValue = SArrowStyleType[changestyle]
  137. } else if (styletype == "font") {
  138. styleValue = new SFont("sans-serif", changestyle)
  139. } else {
  140. styleValue = changestyle
  141. }
  142. List.forEach((item: SGraphEdit, index: number) => {
  143. if (item instanceof SGraphSelectContainer) {
  144. return
  145. }
  146. item[styletype] = styleValue;
  147. })
  148. } // Function updateStyle()
  149. /**
  150. * item 创建完成后回调
  151. *
  152. * @param event 鼠标事件参数
  153. */
  154. finishCreated(item: SGraphEdit): void {
  155. this.grabItem = null;
  156. item.status = SItemStatus.Normal;
  157. this.undoStack.push(new SGraphAddCommand(this, item));
  158. this.selectContainer.clear();
  159. this.selectContainer.toggleItem(item);
  160. } // Function finishCreated()
  161. /**
  162. * 修改 cmdstatus 函数;常在在业务中调用
  163. *
  164. */
  165. clearCmdStatus() {
  166. } // Function clearCmdStatus()
  167. /**
  168. * 获取item (常用与场景外的调用F)
  169. * @param event SMouseEvent 鼠标事件
  170. * @param item SGraphEdit|null 返回item
  171. *
  172. */
  173. getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
  174. // alert('onContextMenu')
  175. } // Function getItem()
  176. /**
  177. * 获取item (常用与场景外的调用F)
  178. * @param event SMouseEvent 鼠标事件
  179. * @param item SGraphEdit|null 返回item
  180. *
  181. */
  182. vueOnMouseDown(event: SMouseEvent) {
  183. } // Function vueOnMouseDown()
  184. /**
  185. * 设置 item 状态
  186. */
  187. setItemStatus() {
  188. const List = this.selectContainer.itemList[0];
  189. if (List && List instanceof SGraphEdit) {
  190. if (List.status == SItemStatus.Normal) {
  191. List.status = SItemStatus.Edit;
  192. this.grabItem = List;
  193. } else {
  194. List.status = SItemStatus.Normal;
  195. this.grabItem = null
  196. }
  197. }
  198. } // Function setItemStatus()
  199. /**
  200. * 获取item (常用与场景外的调用F)
  201. *
  202. * @params isAll 是否为全部item数据
  203. * @return obj 返回保存的数据接口
  204. */
  205. save(isAll: boolean = true) {
  206. if (!this.view) return;
  207. const Marktype: string[] = ['BasePolygon', 'BaseLine', 'BaseText', 'BaseExplain', 'BaseImage', 'BaseCircle', 'BaseArrow', 'BaseTriangle', 'BaseRect', 'BaseArrowPolygon'];
  208. const NodeType: string[] = [];
  209. const RelationType: string[] = [];
  210. const markers: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  211. const nodes: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  212. const relations: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  213. let nodeList;
  214. if (isAll) {
  215. nodeList = this.root.children;
  216. } else {
  217. nodeList = this.selectContainer.itemList;
  218. };
  219. nodeList.forEach(item => {
  220. if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer)) {
  221. // 添加节点数据
  222. if (Marktype.includes(item.data.properties.type)) {
  223. markers.push(item.toData())
  224. }
  225. if (NodeType.includes(item.data.properties.type)) {
  226. nodes.push(item.toData())
  227. }
  228. if (RelationType.includes(item.data.properties.type)) {
  229. relations.push(item.toData())
  230. }
  231. }
  232. });
  233. return {
  234. markers,
  235. nodes,
  236. relations
  237. }
  238. } // Function save()
  239. }