SPlanScene.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * ****/
  25. import { SBaseEditScene, SBasePipe, SBaseEquipment } from "@persagy-web/big-edit";
  26. import { SGraphEdit, SGraphPropertyCommand, SBaseImageEdit } from "@persagy-web/edit";
  27. import { SMouseEvent } from "@persagy-web/base";
  28. import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
  29. import { SItemStatus, ItemColor } from "@persagy-web/big";
  30. import { rgbaNum } from "@persagy-web/big-edit/lib/until";
  31. // 引入命令
  32. import { SGraphAddCommand } from "@persagy-web/edit";
  33. import { SColor, SFont, SArrowStyleType } from "@persagy-web/draw";
  34. import { SPlanParser } from "./";
  35. /**
  36. * 平面图场景类
  37. *
  38. * @author 张宇 <taohuzy@163.com>
  39. */
  40. export class SPlanScene extends SBaseEditScene {
  41. /** 图例数据 */
  42. legendObj: any = null;
  43. // 静态服务器路径
  44. public imgServeUrl: string = '';
  45. constructor() {
  46. super();
  47. // 选择绑定选额item事件
  48. this.selectContainer.connect("listChange", this, this.listChange);
  49. }
  50. /**
  51. * 选中返回的选中 item 回调方法
  52. *
  53. * @param event 鼠标事件参数
  54. */
  55. listChange(list: any): void {
  56. const itemList: any = [];
  57. list.itemList.forEach((item: any) => {
  58. if (item instanceof SGraphEdit && !(item instanceof SGraphSelectContainer)) {
  59. itemList.push(item);
  60. }
  61. });
  62. this.emitChoice(itemList);
  63. }
  64. /**
  65. * 选中返回的选中 item 回调方法(用于场景的外部调用)
  66. *
  67. * @param list 选中的 item 数组
  68. */
  69. emitChoice(list: any) {}
  70. /**
  71. * 鼠标左键按下
  72. *
  73. * @param event 鼠标事件参数
  74. */
  75. onMouseDown(event: SMouseEvent): any {
  76. this.vueOnMouseDown(event); //外部调用
  77. if (this.grabItem) {
  78. if (this.grabItem instanceof SBasePipe) {
  79. this.setTipeEndanchor(event);
  80. return true;
  81. }
  82. return this.grabItem.onMouseDown(event);
  83. }
  84. if (this.editCmd == "EditBaseLine") {
  85. this.addPolyLineArrow(event);
  86. this.clearCmdStatus();
  87. } else if (this.editCmd == "EditBasePolyLine") {
  88. this.addPolyLine(event);
  89. this.clearCmdStatus();
  90. } else if (this.editCmd == "EditBasetext") {
  91. this.addTextItem(event);
  92. this.clearCmdStatus();
  93. } else if (this.editCmd == "BaseExplain") {
  94. this.addExplainItem(event);
  95. this.clearCmdStatus();
  96. } else if (this.editCmd == "EditBaseImage") {
  97. this.addImageItem(event);
  98. this.clearCmdStatus();
  99. } else if (this.editCmd == "EditBasePolygon") {
  100. this.addPolygonItem(event);
  101. this.clearCmdStatus();
  102. } else if (this.editCmd == "EditBaseRect") {
  103. this.addRectItem(event);
  104. this.clearCmdStatus();
  105. } else if (this.editCmd == "EditBaseTriangle") {
  106. this.addTriangleItem(event);
  107. this.clearCmdStatus();
  108. } else if (this.editCmd == "EditBaseCircle") {
  109. this.addCircleItem(event);
  110. this.clearCmdStatus();
  111. } else if (this.editCmd == "EditBaseArrows") {
  112. this.addPolygonArrow(event);
  113. this.clearCmdStatus();
  114. } else if (this.editCmd == "wantou" || this.editCmd == "santong" || this.editCmd == "sitong") {
  115. this.addPipeUninTool(event, this.editCmd);
  116. this.clearCmdStatus();
  117. } else if (this.editCmd == "EditBasePipe") {
  118. this.addBasePipe(event, this.legendObj);
  119. this.clearCmdStatus();
  120. } else if (this.editCmd == "") {
  121. super.onMouseDown(event);
  122. }
  123. }
  124. /**
  125. * 重载添加图片-可以根据底图缩放的图片
  126. * @param event
  127. */
  128. addImageItem(event: SMouseEvent):void {
  129. const data = {
  130. name: '基础图片',
  131. num: 1,
  132. type: "Image",
  133. pos: { x: event.x, y: event.y },
  134. properties: {
  135. type: "BaseImage",
  136. },
  137. style: {
  138. default: {
  139. strokecolor: "#c0ccda",
  140. url: '',
  141. }
  142. }
  143. };
  144. const item = new SBaseImageEdit(null, data);
  145. item.isTransform = false;
  146. item.showSelect = false;
  147. item.selectable = true;
  148. item.moveable = true;
  149. this.addItem(item);
  150. item.connect("onContextMenu", this, this.getItem);
  151. this.finishCreated(item);
  152. }
  153. /**
  154. * 鼠标右键事件
  155. *
  156. * @param event 鼠标事件参数
  157. * @returns 是否点击右键
  158. */
  159. onContextMenu(event: SMouseEvent): boolean {
  160. if (!super.onContextMenu(event)) {
  161. this.getItem(null, [event]);
  162. }
  163. return true;
  164. }
  165. /**
  166. * 修改 item 样式,数据等方法
  167. *
  168. * @param styletype string 修改样式类型
  169. * @param changeStyle 更改样式数据
  170. * @param itemList ? SGraphEdit[] 如果不传入默认使用选择器中选中得item
  171. */
  172. updateStyle(styletype: string, changestyle: any, itemList?: SGraphEdit[]): void {
  173. // 如果未传入需要修改样式的item,默认取选择器中的item
  174. let List = null;
  175. if (itemList && itemList.length) {
  176. List = itemList;
  177. } else {
  178. List = this.selectContainer.itemList;
  179. }
  180. let styleValue: any;
  181. if (styletype == "strokeColor" || styletype == "backgroundColor" || styletype == "fillColor") {
  182. const colorlist = rgbaNum(changestyle);
  183. styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
  184. } else if (styletype == "lineStyle") {
  185. styleValue = SLineStyle[changestyle];
  186. } else if (styletype == "begin" || styletype == "end") {
  187. styleValue = SArrowStyleType[changestyle];
  188. } else if (styletype == "font") {
  189. styleValue = new SFont("sans-serif", changestyle);
  190. } else {
  191. styleValue = changestyle;
  192. }
  193. List.forEach((item: SGraphEdit, index: number) => {
  194. if (item instanceof SGraphSelectContainer) {
  195. return;
  196. }
  197. const oldMsg = item[styletype];
  198. const newMsg = styleValue;
  199. this.undoStack.push(new SGraphPropertyCommand(this, item, styletype, oldMsg, newMsg));
  200. item[styletype] = styleValue;
  201. });
  202. }
  203. /**
  204. * 修改指定设备得信息点
  205. *
  206. * @param obj Object 信息点
  207. */
  208. changeEquipMsgPoint(obj: any): void {
  209. const List = this.selectContainer.itemList.length ? this.selectContainer.itemList[0] : null;
  210. if (List && List instanceof SBaseEquipment) {
  211. List.setMsgPoint(obj);
  212. }
  213. }
  214. /**
  215. * item 创建完成后回调
  216. *
  217. * @param event 鼠标事件参数
  218. */
  219. finishCreated(item: SGraphEdit): void {
  220. this.grabItem = null;
  221. item.status = SItemStatus.Normal;
  222. this.undoStack.push(new SGraphAddCommand(this, item));
  223. this.selectContainer.clear();
  224. this.selectContainer.toggleItem(item);
  225. }
  226. /**
  227. * 修改 cmdstatus 函数;常在在业务中调用
  228. */
  229. clearCmdStatus() {
  230. //do something
  231. }
  232. /**
  233. * 获取item (常用与场景外的调用F)
  234. * @param event SMouseEvent 鼠标事件
  235. * @param item SGraphEdit|null 返回item
  236. *
  237. */
  238. getItem(item: SGraphEdit | null, event: SMouseEvent[]): void {
  239. // do something
  240. }
  241. /**
  242. * 获取item (常用与场景外的调用F)
  243. * @param event SMouseEvent 鼠标事件
  244. * @param item SGraphEdit|null 返回item
  245. *
  246. */
  247. vueOnMouseDown(event: SMouseEvent) {
  248. // do something
  249. }
  250. /**
  251. * 设置 item 状态
  252. */
  253. setItemStatus() {
  254. const List = this.selectContainer.itemList[0];
  255. if (List && List instanceof SGraphEdit) {
  256. if (List.status == SItemStatus.Normal) {
  257. List.status = SItemStatus.Edit;
  258. this.grabItem = List;
  259. } else {
  260. List.status = SItemStatus.Normal;
  261. this.grabItem = null;
  262. }
  263. }
  264. }
  265. /**
  266. * 获取item (常用与场景外的调用F)
  267. *
  268. * @params isAll 是否为全部item数据
  269. * @return obj 返回保存的数据接口
  270. */
  271. save(isAll: boolean = true) {
  272. if (!this.view) return;
  273. const Marktype: string[] = [
  274. "BasePolygon",
  275. "BaseLine",
  276. "BaseText",
  277. "BaseExplain",
  278. "BaseImage",
  279. "BaseCircle",
  280. "BaseArrow",
  281. "BaseTriangle",
  282. "BaseRect",
  283. "BaseArrowPolygon",
  284. ];
  285. const NodeType: string[] = ["BaseEquipment"];
  286. const RelationType: string[] = ["BasePipe"];
  287. const markers: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  288. const nodes: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  289. const relations: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  290. let nodeList;
  291. if (isAll) {
  292. nodeList = this.root.children;
  293. } else {
  294. nodeList = this.selectContainer.itemList;
  295. }
  296. nodeList.forEach((item) => {
  297. if (item instanceof SGraphEdit && !(item instanceof SGraphSelectContainer)) {
  298. // 添加节点数据
  299. if (item.data && Marktype.includes(item.data.properties.type)) {
  300. markers.push(item.toData());
  301. }
  302. if (item.legendData && NodeType.includes(item.legendData.properties.type)) {
  303. nodes.push(item.toData());
  304. }
  305. if (item.relationData && RelationType.includes(item.relationData.properties.type)) {
  306. relations.push(item.toData());
  307. }
  308. }
  309. });
  310. return {
  311. markers,
  312. nodes,
  313. relations,
  314. };
  315. }
  316. /**
  317. * 粘贴
  318. */
  319. paste(): void {
  320. const copyList = JSON.parse(JSON.stringify(this.copyString));
  321. const parserData = new SPlanParser();
  322. const graphItemList: SGraphEdit[] = [];
  323. parserData.parseData(copyList);
  324. parserData.markers.forEach((item: SGraphEdit) => {
  325. item.selectable = true;
  326. item.moveable = true;
  327. if (this.view) {
  328. item.pos.x += 10 / this.view.scale;
  329. item.pos.y += 10 / this.view.scale;
  330. }
  331. this.addItem(item);
  332. graphItemList.push(item);
  333. });
  334. this.addListCommand(graphItemList);
  335. this.view ? this.view.update() : "";
  336. }
  337. }