EditScence.ts 58 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692
  1. import { SMouseEvent, SUndoStack } from "@saga-web/base";
  2. import { SGraphScene, SGraphLayoutType, SAnchorItem } from '@saga-web/graph/lib';
  3. import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder, STooltipItem, ItemColor, Transparency, SPolygonItem } from "@saga-web/big";
  4. import { SGraphItem, SLineStyle, SGraphPropertyCommand, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
  5. import { SGraphAddListCommand } from "./SGraphAddListCommand"
  6. import { SGraphDeleteCommand } from "./SGraphDeleteCommand"
  7. import { SGraphDeleteListCommand } from "./SGraphDeleteListCommand"
  8. import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
  9. import { SSCPZZoneLegendItem } from "@/lib/items/SSCPZZoneLegendItem";
  10. import { SFHFQZoneLegendItem } from "@/lib/items/SFHFQZoneLegendItem";
  11. import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
  12. import { TipelineItem } from "@/lib/items/TipelineItem";
  13. import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
  14. import { SPoint, SFont, SColor, SRect } from '@saga-web/draw/lib';
  15. import { Legend } from '@/lib/types/Legend';
  16. import { Relation } from '@/lib/types/Relation';
  17. import { uuid } from "@/components/mapClass/until";
  18. import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
  19. import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
  20. import { SSpaceItem } from '@saga-web/big/lib/items/floor/SSpaceItem';
  21. import { SMathUtil } from '@saga-web/big/lib/utils/SMathUtil';
  22. import { MinDis } from '@saga-web/big/lib/types/MinDis';
  23. import { HighlightItem } from '@/lib/items/HighlightItem';
  24. import { TimeSelect } from 'element-ui';
  25. import { STopologyParser } from '@/lib/parsers/STopologyParser';
  26. /**
  27. * 在线绘图
  28. *
  29. * @author 韩耀龙
  30. */
  31. export class EditScence extends SGraphScene {
  32. undoStack = new SUndoStack();
  33. /** 命令 1 绘制直线 */
  34. private cmd = 'choice';
  35. /** 获取当前状态 */
  36. get getCmd(): string {
  37. return this.cmd;
  38. }
  39. /** 编辑当前状态 */
  40. set setCmd(cmd: string) {
  41. if (cmd == 'choice') {
  42. this.grabItem = null;
  43. }
  44. this.cmd = cmd;
  45. if (this.focusItem) {
  46. // 取消操作
  47. this.focusItem.cancelOperate();
  48. this.focusItem = null;
  49. // this.selectContainer.clear()
  50. }
  51. if (this.view) {
  52. this.view.update();
  53. }
  54. };
  55. /** 绘制区域时 是否为点选 */
  56. isSelecting: boolean = true;
  57. /** 是否开启吸附 */
  58. isAbsorbing: boolean = false;
  59. /** 吸附展示item */
  60. highLight: HighlightItem | null = null;
  61. /** 当前选中焦点Item */
  62. focusItem: SGraphItem | null = null;
  63. /** 当前选中焦点ItemList */
  64. focusItemList: SGraphItem[] | null = null;
  65. /**图例节点 */
  66. Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
  67. /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
  68. Markers: any = [];
  69. /** 管线对象 */
  70. Relations: any = [];
  71. _isEditStatus: Boolean = true; // 是否可编辑
  72. set isEditStatus(bol: Boolean): void {
  73. this._isEditStatus = bol;
  74. }
  75. get isEditStatus(): Boolean {
  76. return this._isEditStatus
  77. }
  78. //复制粘贴
  79. copyString = {
  80. Nodes: [],
  81. Markers: [],
  82. Relations: []
  83. };
  84. constructor() {
  85. super();
  86. // // 选择绑定选额item事件
  87. this.selectContainer.connect("listChange", this, this.listChange);
  88. ItemColor.spaceColor = new SColor("#f0f0f0")
  89. ItemColor.wallColor = new SColor("#d4d4d4")
  90. ItemColor.columnColor = new SColor("#d4d4d4")
  91. ItemColor.virtualWallColor = new SColor("#d4d4d4")
  92. ItemColor.selectColor = new SColor("#f0f0f0")
  93. ItemColor.spaceBorderColor = new SColor("#d4d4d4")
  94. }
  95. /** 绘制图例样式 */
  96. _legend: any | null = null;
  97. get getlegend(): any {
  98. return this._legend;
  99. };
  100. set setlegend(obj: any) {
  101. this._legend = obj;
  102. }
  103. /** fid=>item映射,由解析器存入 */
  104. fidToItem = {}
  105. /**
  106. * 监听变化
  107. * @param obj 变化后的对象
  108. */
  109. listChange(obj: any) {
  110. let itemType: string = 'equipment';
  111. this.focusItemList = obj.itemList;
  112. if (obj.itemList[0] instanceof STextMarkerItem) {
  113. itemType = 'baseText'
  114. } else if (obj.itemList[0] instanceof SImageMarkerItem) {
  115. itemType = 'baseImage'
  116. } else if (obj.itemList[0] instanceof SLineMarkerItem) {
  117. itemType = 'baseLine'
  118. } else if (obj.itemList[0] instanceof SZoneLegendItem) {
  119. itemType = 'Zone'
  120. } else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
  121. itemType = 'Zone'
  122. } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
  123. itemType = 'Zone'
  124. } else if (obj.itemList[0] instanceof SImageLegendItem) {
  125. itemType = 'Image'
  126. } else if (obj.itemList[0] instanceof TipelineItem) {
  127. itemType = 'Line'
  128. } else if (obj.itemList[0] instanceof SSpaceItem) { // 点选
  129. this.clickToAddArea(obj.itemList[0]);
  130. return
  131. } else {
  132. itemType = ''
  133. };
  134. if (obj.itemList.length == 1) {
  135. // 获取聚焦item
  136. this.focusItem = obj.itemList[0]
  137. } else {
  138. this.focusItem = null
  139. }
  140. let msg = {
  141. itemList: obj.itemList,
  142. itemType,
  143. }
  144. this.emitChange(msg)
  145. }
  146. emitChange(msg: any) {
  147. }
  148. /**
  149. * 增加线段item
  150. */
  151. addLine(event: SMouseEvent): boolean {
  152. const clickItem = this.clickIsItem(event);
  153. if (clickItem) {
  154. let centerPoint = clickItem.boundingRect().center();
  155. const p = clickItem.mapToScene(centerPoint.x, centerPoint.y);
  156. event.x = p.x;
  157. event.y = p.y;
  158. }
  159. const data = {
  160. /** ID */
  161. ID: uuid(),
  162. /** 名称 */
  163. Name: '直线',
  164. /** 图标(Image),线类型(Line) */
  165. Type: "Line",
  166. /** 位置 */
  167. Pos: { X: 0, Y: 0 },
  168. /** 由应用自己定义 */
  169. Properties: {
  170. IconUrl: require("../../assets/images/t-line-hover.png"),
  171. Line: [{ X: event.x, Y: event.y }],
  172. LineWidth: 1,
  173. StrokeColor: "#bdc3c8"
  174. }
  175. }
  176. const item = new SLineMarkerItem(null, data);
  177. item.status = SItemStatus.Create;
  178. item.selectable = true;
  179. this.addItem(item);
  180. // this.Markers.push(item);
  181. item.connect("finishCreated", this, this.finishCreated);
  182. this.grabItem = item;
  183. this.focusItem = item;
  184. // 起始item点
  185. item.startItem = clickItem;
  186. if (clickItem) {
  187. clickItem.connect('onMove', item, item.changePos);
  188. }
  189. return true
  190. }
  191. /**
  192. * 增加折线item
  193. */
  194. addPolylineItem(event: SMouseEvent): boolean {
  195. const point = new SPoint(event.x, event.y)
  196. const item = new TipelineItem(null, [point]);
  197. //设置状态
  198. item.selectable = true;
  199. item.status = SItemStatus.Create;
  200. this.addItem(item);
  201. item.connect("finishCreated", this, this.finishCreated);
  202. this.grabItem = item;
  203. this.focusItem = item;
  204. return true
  205. }
  206. /**
  207. * 增加管道 lenged
  208. */
  209. addTipelineItem(event: SMouseEvent): boolean {
  210. const anc = this.clickIsAnchor(event);
  211. if (anc) {
  212. const p = anc.mapToScene(0, 0)
  213. anc.isConnected = true;
  214. event.x = p.x;
  215. event.y = p.y;
  216. }
  217. const LegendData: Relation = {
  218. ID: uuid(),
  219. Name: this._legend.Name,
  220. GraphElementId: this._legend.Id,
  221. PointList: [{ X: event.x, Y: event.y }],
  222. LineType: "Line",
  223. Properties: {
  224. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  225. LineDash: this._legend.LineDash,
  226. LineWidth: this._legend.LineWidth,
  227. Color: this._legend.Color,
  228. },
  229. }
  230. const item = new TipelineItem(null, LegendData);
  231. //设置状态
  232. item.selectable = true;
  233. item.status = SItemStatus.Create;
  234. this.addItem(item);
  235. // this.Relations.push(item);
  236. item.connect("finishCreated", this, this.finishCreated);
  237. this.grabItem = item;
  238. this.focusItem = item;
  239. // 起始锚点
  240. item.startAnchor = anc;
  241. if (anc) {
  242. anc.parent ?.connect('changePos', item, item.changePos)
  243. item.anchor1ID = anc.id;
  244. item.node1Id = anc.parent.id;
  245. }
  246. return true
  247. }
  248. /**
  249. * 增加多边形item lenged
  250. */
  251. addPolygonItem(event: SMouseEvent): void {
  252. const SubType = this._legend.SubType ? this._legend.SubType : '';
  253. const LegendData: Legend = {
  254. ID: uuid(),
  255. Name: this._legend.Name,
  256. GraphElementType: this._legend.Type,
  257. Num: 1,
  258. GraphElementId: this._legend.Id,
  259. AttachObjectIds: [],
  260. Type: "Zone",
  261. Pos: { X: event.x, Y: event.y },
  262. OutLine: [{ X: event.x, Y: event.y }],
  263. SubType: SubType,
  264. Properties: {
  265. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  266. StrokeColor: this._legend.Color,
  267. FillColor: this._legend.FillColor,
  268. LineDash: this._legend.LineDash,
  269. LineWidth: this._legend.LineWidth,
  270. font: 14,
  271. color: "#1F2429",
  272. TextPos: { X: 0, Y: 0 },
  273. InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],
  274. InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
  275. InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
  276. },
  277. }
  278. let Polylines = null;
  279. if (SubType == "SCPZ") {
  280. Polylines = new SSCPZZoneLegendItem(null, LegendData);
  281. } else if (SubType == "FHFQ") {
  282. Polylines = new SFHFQZoneLegendItem(null, LegendData);
  283. } else {
  284. Polylines = new SZoneLegendItem(null, LegendData);
  285. }
  286. Polylines.selectable = true;
  287. //设置状态
  288. Polylines.status = SItemStatus.Create;
  289. // Polylines.moveable = true;
  290. this.addItem(Polylines);
  291. Polylines.connect("finishCreated", this, this.finishCreated);
  292. this.grabItem = Polylines;
  293. this.focusItem = Polylines;
  294. }
  295. /**
  296. * 点选创建区域
  297. */
  298. clickToAddArea(item: SSpaceItem): void {
  299. if (this.cmd != 'Zone') {
  300. return
  301. }
  302. if (this.isSelecting && this._legend) {
  303. //@ts-ignore
  304. item.isExtracted = true
  305. const SubType = this._legend.SubType ? this._legend.SubType : '';
  306. const LegendData: Legend = {
  307. ID: uuid(),
  308. Name: this._legend.Name,
  309. GraphElementType: this._legend.Type,
  310. Num: 1,
  311. GraphElementId: this._legend.Id,
  312. AttachObjectIds: [],
  313. Type: "Zone",
  314. Pos: { X: item.x, Y: item.y },
  315. OutLine: item.pointArr[0],
  316. SubType: SubType,
  317. Properties: {
  318. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  319. StrokeColor: this._legend.Color,
  320. FillColor: this._legend.FillColor,
  321. LineDash: this._legend.LineDash,
  322. LineWidth: this._legend.LineWidth,
  323. font: 14,
  324. color: "#1F2429",
  325. FID: item.data.SourceId,
  326. TextPos: { X: item.data.Location.Points[0].X, Y: -item.data.Location.Points[0].Y },
  327. InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],
  328. InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
  329. InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
  330. },
  331. }
  332. let Polylines = null;
  333. if (SubType == "SCPZ") {
  334. Polylines = new SSCPZZoneLegendItem(null, LegendData);
  335. } else if (SubType == "FHFQ") {
  336. Polylines = new SFHFQZoneLegendItem(null, LegendData);
  337. } else {
  338. Polylines = new SZoneLegendItem(null, LegendData);
  339. }
  340. Polylines.selectable = true;
  341. //设置状态
  342. Polylines.status = SItemStatus.Normal;
  343. this.addItem(Polylines);
  344. // this.Nodes.push(Polylines);
  345. this.finishCreated(Polylines)
  346. this.focusItem = Polylines;
  347. this.scenceUpdate(this);
  348. }
  349. }
  350. /**
  351. * 增加图片Item mark
  352. */
  353. addImgItem(event: SMouseEvent) {
  354. const data = {
  355. /** ID */
  356. ID: uuid(),
  357. /** 名称 */
  358. Name: '图片',
  359. Num: 1,
  360. /** 图标(Image),线类型(Line) */
  361. Type: "Image",
  362. /** 位置 */
  363. Pos: { X: event.x, Y: event.y },
  364. /** 由应用自己定义 */
  365. Properties: {
  366. IconUrl: require(`../../assets/images/t-img-hover.png`),
  367. StrokeColor: "#c0ccda",
  368. Url: '',
  369. }
  370. }
  371. const item = new SImageMarkerItem(null, data);
  372. item.selectable = true;
  373. item.moveable = true;
  374. this.addItem(item);
  375. this.Markers.push(item);
  376. this.grabItem == null;
  377. this.focusItem = item;
  378. this.finishCreated(item);
  379. this.scenceUpdate(this);
  380. }
  381. /**
  382. * 增加文字item
  383. */
  384. addTextItem(event: SMouseEvent): void {
  385. const data = {
  386. /** ID */
  387. ID: uuid(),
  388. /** 名称 */
  389. Name: '文本',
  390. /** 图标 */
  391. Type: "Text",
  392. /** 位置 */
  393. Pos: { X: event.x, Y: event.y },
  394. /** 由应用自己定义 */
  395. Properties: {
  396. IconUrl: require(`../../assets/images/t-text-hover.png`),
  397. Text: '请在右侧属性栏输入文字!',
  398. Color: "#646c73",
  399. Font: 14,
  400. BackgroundColor: "#f7f9facc"
  401. }
  402. }
  403. const item = new STextMarkerItem(null, data);
  404. item.moveTo(event.x, event.y);
  405. item.selectable = true;
  406. item.moveable = true;
  407. this.addItem(item);
  408. this.Markers.push(item);
  409. this.grabItem = null;
  410. this.focusItem = item;
  411. this.cmd = 'choice';
  412. this.finishCreated(item);
  413. this.scenceUpdate(this);
  414. }
  415. /**
  416. * 增加图标lenged图标
  417. */
  418. addIconItem(event: SMouseEvent): void {
  419. //获取信息工程化相关参数
  420. const LegendData: Legend = {
  421. ID: uuid(),
  422. Name: "",
  423. GraphElementType: this._legend.Type,
  424. Num: 1,
  425. GraphElementId: this._legend.Id,
  426. AttachObjectIds: [],
  427. Pos: { X: event.x, Y: event.y },
  428. Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
  429. Rolate: { X: 0, Y: 0, Z: 0 },
  430. Size: { Width: 0, Height: 0 }, // 大小
  431. Type: this._legend.Type,
  432. Properties: {
  433. IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  434. Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
  435. Num: 1, // 此num与信息工程化得num无关
  436. sWidth: this._legend.Size?this._legend.Size.Width?this._legend.Size.Width:32:32, //icon 的宽
  437. sHeight: this._legend.Size?this._legend.Size.Height?this._legend.Size.Height:32:32, //icon 的高
  438. font: 16, //font
  439. color: "#1F2429", //字体颜色
  440. FrameColor: this._legend.FrameColor,
  441. GraphCategoryId: this._legend.GraphCategoryId,
  442. InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
  443. InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],// 铺位可视化Typeid(用于编辑工程信息化时默认问题)
  444. InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
  445. },
  446. }
  447. const cmd = this.cmd;
  448. const item = new SImageLegendItem(null, LegendData);
  449. this.cmd = 'choice';
  450. item.selectable = true;
  451. item.moveable = true;
  452. this.addItem(item);
  453. this.Nodes.push(item);
  454. this.grabItem = null;
  455. this.focusItem = item;
  456. this.finishCreated(item);
  457. this.scenceUpdate(this);
  458. if (event.ctrlKey) {
  459. this.cmd = cmd;
  460. }
  461. }
  462. /**
  463. * 更改item对应属性
  464. */
  465. editItemStatus(): void {
  466. }
  467. /**
  468. * 更改文本对应属性
  469. * @param str string 文字内容
  470. */
  471. updatedText(str: string): void {
  472. if (this.focusItem) {
  473. const oldMsg = this.focusItem.text;
  474. const newMsg = str;
  475. this.focusItem.text = str;
  476. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", oldMsg, newMsg));
  477. this.scenceUpdate(this);
  478. }
  479. }
  480. /**
  481. * 更改文本fontSize属性
  482. * @param size number 文字大小
  483. */
  484. updatedFontSize(size: number): void {
  485. if (this.focusItem) {
  486. let old = new SFont(this.focusItem.font);
  487. let font = new SFont(this.focusItem.font);
  488. font.size = size;
  489. this.focusItem.font = font;
  490. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
  491. }
  492. }
  493. /**
  494. * 更改线宽属性
  495. * @param lineWidth number 线宽大小
  496. */
  497. updatedLineWidth(lineWidth: number): void {
  498. if (this.focusItem) {
  499. const oldMsg = this.focusItem.lineWidth;
  500. const newMsg = lineWidth;
  501. this.focusItem.lineWidth = lineWidth;
  502. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "lineWidth", oldMsg, newMsg));
  503. }
  504. }
  505. /**
  506. * 更改文本颜色属性
  507. * @param str string 颜色
  508. */
  509. updatedFontColor(color: string): void {
  510. if (this.focusItem) {
  511. const oldMsg = this.focusItem.color;
  512. const newMsg = new SColor(color);
  513. this.focusItem.color = newMsg;
  514. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", oldMsg, newMsg));
  515. }
  516. }
  517. /**
  518. * 更改border颜色
  519. * @param color string 颜色
  520. */
  521. updatedBorderColor(color: string): void {
  522. if (this.focusItem) {
  523. const oldMsg = this.focusItem.strokeColor;
  524. const newMsg = new SColor(color);
  525. this.focusItem.strokeColor = newMsg;
  526. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "strokeColor", oldMsg, newMsg));
  527. }
  528. }
  529. /**
  530. * 更改item宽
  531. * @param width number 颜色
  532. */
  533. updatedWidth(width: number): void {
  534. if (this.focusItem) {
  535. let oldMsg = null;
  536. const newMsg = width;
  537. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  538. oldMsg = this.focusItem.sWidth
  539. this.focusItem.sWidth = width;
  540. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "sWidth", oldMsg, newMsg));
  541. } else {
  542. oldMsg = this.focusItem.width
  543. this.focusItem.width = width;
  544. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "width", oldMsg, newMsg));
  545. }
  546. }
  547. }
  548. /**
  549. * 更改item高
  550. * @param height number 颜色
  551. */
  552. updatedHeight(height: number): void {
  553. if (this.focusItem) {
  554. let oldMsg = null;
  555. const newMsg = height;
  556. if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
  557. oldMsg = this.focusItem.sHeight;
  558. this.focusItem.sHeight = height;
  559. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "sHeight", oldMsg, newMsg));
  560. } else {
  561. oldMsg = this.focusItem.height;
  562. this.focusItem.height = height;
  563. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "height", oldMsg, newMsg));
  564. }
  565. }
  566. }
  567. /**
  568. * 更改item坐标
  569. * @param x number x x坐标
  570. * @param y number y y坐标
  571. */
  572. updatedPosition(x: number, y: number): void {
  573. if (this.focusItem) {
  574. let p = this.focusItem.mapFromScene(x, y)
  575. // newx - oldx = newleft - oldleft
  576. // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
  577. this.focusItem.x = (p.x - this.focusItem.boundingRect().left) * this.focusItem.inverseScale + this.focusItem.x;
  578. this.focusItem.y = (p.y - this.focusItem.boundingRect().top) * this.focusItem.inverseScale + this.focusItem.y;
  579. if (this.focusItem instanceof SPolylineItem || this.focusItem instanceof SPolygonItem || this.focusItem instanceof SLineItem) {
  580. this.focusItem.moveToOrigin(this.focusItem.x, this.focusItem.y)
  581. }
  582. }
  583. }
  584. /**
  585. * 更改item 背景色坐标
  586. * @param color string 颜色color
  587. */
  588. updatedbackColor(color: string): void {
  589. if (this.focusItem) {
  590. const newMsg = new SColor(color);
  591. const oldMsg = this.focusItem.backgroundColor;
  592. this.focusItem.backgroundColor = new SColor(color);
  593. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "backgroundColor", oldMsg, newMsg));
  594. }
  595. }
  596. /**
  597. * 更改item Url
  598. * @param url string 图片key
  599. */
  600. upadataImageUrl(url: string): void {
  601. if (this.focusItem) {
  602. const newMsg = '/serve/topology-wanda/Picture/query/' + url;
  603. const oldMsg = this.focusItem.url;
  604. this.focusItem.url = newMsg;
  605. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "url", oldMsg, newMsg));
  606. }
  607. }
  608. /**
  609. * 更改item border
  610. * @param val string border类型
  611. */
  612. upadataBorder(val: string): void {
  613. if (this.focusItem) {
  614. let borderStyle = null;
  615. if (val == 'dashed') {
  616. borderStyle = SLineStyle.Dashed;
  617. } else if (val == 'dotted') {
  618. borderStyle = SLineStyle.Dotted;
  619. } else if (val == 'solid') {
  620. borderStyle = SLineStyle.Solid;
  621. }
  622. const newMsg = borderStyle;
  623. const oldMsg = this.focusItem.lineStyle;
  624. this.focusItem.lineStyle = borderStyle;
  625. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "lineStyle", oldMsg, newMsg));
  626. }
  627. }
  628. /**
  629. * 更改item 名称
  630. * @param val string border类型
  631. */
  632. upadataLengedName(val: string): void {
  633. if (this.focusItem && this.focusItem.data) {
  634. const newMsg = val;
  635. const oldMsg = this.focusItem.text;
  636. this.focusItem.text = val;
  637. this.focusItem.name = val;
  638. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", oldMsg, newMsg));
  639. this.scenceUpdate(this);
  640. }
  641. }
  642. /**
  643. * 更改item Num数量
  644. * @param num number item数量 (只对icon设备类)
  645. */
  646. upadatImageNum(num: number): void {
  647. if (this.focusItem && this.focusItem.num) {
  648. const newMsg = num;
  649. const oldMsg = this.focusItem.num;
  650. this.focusItem.num = num;
  651. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "num", oldMsg, newMsg));
  652. }
  653. }
  654. /**
  655. * 更改item Num数量
  656. * @param num number item数量 (只对icon设备类)
  657. */
  658. upadatfillColor(fillColor: string): void {
  659. if (this.focusItem && this.focusItem.fillColor) {
  660. let fillColorT;
  661. if (fillColor.length == 7) {
  662. fillColorT = fillColor + Transparency[15];
  663. if (this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem) {
  664. const sc = new SColor(this.focusItem.fillColor);
  665. const alp = ((sc.alpha/255)*100).toFixed()
  666. fillColorT = fillColor + Transparency[alp];
  667. // fillColorT = fillColor + Transparency[80];
  668. }
  669. } else {
  670. fillColorT = fillColor;
  671. }
  672. const newMsg = new SColor(fillColorT);
  673. const oldMsg = this.focusItem.fillColor;
  674. this.focusItem.fillColor = new SColor(fillColorT);
  675. this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "num", oldMsg, newMsg));
  676. }
  677. }
  678. /**
  679. * 更改图例说
  680. * @param num number
  681. */
  682. upadatitemExplain(ItemExplain: string): void {
  683. if (this.focusItem) {
  684. this.focusItem.data.Properties.ItemExplain = ItemExplain;
  685. }
  686. }
  687. /**
  688. * 更新工程信息化的相关数据
  689. * @param AttachObjectIds Array
  690. */
  691. upadatAttachObjectIds(AttachObjectIds: []): void {
  692. if (this.focusItem) {
  693. this.focusItem.data.AttachObjectIds = AttachObjectIds;
  694. // 重新选中focusitem
  695. const item = this.focusItem;
  696. this.selectContainer.clear();
  697. this.selectContainer.toggleItem(item);
  698. if (
  699. item instanceof SImageLegendItem ||
  700. item instanceof SZoneLegendItem ||
  701. item instanceof SSCPZZoneLegendItem ||
  702. item instanceof SFHFQZoneLegendItem
  703. ) {
  704. let arr = item.data.AttachObjectIds;
  705. if (arr && arr.length && arr[arr.length - 1].name) {
  706. item.text = arr[arr.length - 1].name;
  707. item.name = arr[arr.length - 1].name;
  708. }
  709. // 绑定工程信息化数据后设置状态
  710. if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
  711. item.isActive = true;
  712. } else {
  713. item.isActive = false;
  714. }
  715. }
  716. }
  717. }
  718. /**
  719. * 删除指定item
  720. */
  721. deleiteItem(): void {
  722. if (this.focusItem) {
  723. if ((this.focusItem instanceof SZoneLegendItem ||
  724. this.focusItem instanceof SSCPZZoneLegendItem ||
  725. this.focusItem instanceof SFHFQZoneLegendItem ||
  726. this.focusItem instanceof TipelineItem) &&
  727. this.focusItem.curIndex != -1
  728. ) {
  729. this.focusItem.deletePoint(this.focusItem.curIndex);
  730. } else {
  731. this.undoStack.push(new SGraphDeleteCommand(this, this.focusItem));
  732. this.removeItem(this.focusItem);
  733. let a = -1
  734. this.Nodes.forEach((item: any, index: number) => {
  735. if (item.id == this.focusItem.id) {
  736. a = index
  737. }
  738. });
  739. if (a > -1) {
  740. this.Nodes.splice(a, 1);
  741. }
  742. let b = -1;
  743. this.Markers.forEach((item: any, index: number) => {
  744. if (item.id == this.focusItem.id) {
  745. b = index
  746. }
  747. });
  748. if (b > -1) {
  749. this.Markers.splice(b, 1);
  750. }
  751. let c = -1;
  752. this.Relations.forEach((item: any, index: number) => {
  753. if (item.id == this.focusItem.id) {
  754. c = index
  755. }
  756. });
  757. if (c > -1) {
  758. this.Relations.splice(c, 1);
  759. }
  760. this.grabItem = null;
  761. this.focusItem = null;
  762. if (this.view) {
  763. this.view.update();
  764. }
  765. this.scenceUpdate(this);
  766. }
  767. } else {
  768. //批量删除
  769. if (!this.focusItemList) {
  770. return
  771. }
  772. this.undoStack.push(new SGraphDeleteListCommand(this, this.focusItemList))
  773. this.focusItemList.forEach((focusItem) => {
  774. this.removeItem(focusItem);
  775. let a = -1
  776. this.Nodes.forEach((item: any, index: number) => {
  777. if (item.id == focusItem.id) {
  778. a = index
  779. }
  780. });
  781. if (a > -1) {
  782. this.Nodes.splice(a, 1);
  783. }
  784. let b = -1;
  785. this.Markers.forEach((item: any, index: number) => {
  786. if (item.id == focusItem.id) {
  787. b = index
  788. }
  789. });
  790. if (b > -1) {
  791. this.Markers.splice(b, 1);
  792. }
  793. let c = -1;
  794. this.Relations.forEach((item: any, index: number) => {
  795. if (item.id == focusItem.id) {
  796. c = index
  797. }
  798. });
  799. if (c > -1) {
  800. this.Relations.splice(c, 1);
  801. }
  802. });
  803. this.focusItemList = [];
  804. this.grabItem = null;
  805. this.focusItem = null;
  806. if (this.view) {
  807. this.view.update();
  808. }
  809. this.scenceUpdate(this);
  810. }
  811. }
  812. scenceUpdate(scence: any) {
  813. }
  814. /**
  815. * 对齐指定item
  816. * @param v
  817. */
  818. changeAlignItem(v: any): void {
  819. this.selectContainer.layout(v);
  820. }
  821. /**
  822. * 图层排序
  823. * @param v
  824. */
  825. changeOrderItem(v: any): void {
  826. this.selectContainer.setOrder(v);
  827. }
  828. /**
  829. * 提取item
  830. */
  831. extractItem(): void {
  832. console.log(this)
  833. }
  834. /**
  835. * 保存数据
  836. */
  837. saveMsgItem(): any {
  838. const Nodes: any = [];
  839. const Markers: any = [];
  840. const Relations: any = [];
  841. this.Nodes.forEach(e => {
  842. Nodes.push(e.toData())
  843. });
  844. this.Markers.forEach(e => {
  845. Markers.push(e.toData())
  846. });
  847. this.Relations.forEach(e => {
  848. Relations.push(e.toData())
  849. });
  850. let element = {
  851. Nodes, Markers, Relations
  852. }
  853. return element
  854. }
  855. /**
  856. * 执行取消操作
  857. */
  858. redo(): void {
  859. if (this.grabItem && this.grabItem.redo) {
  860. this.grabItem.redo()
  861. } else {
  862. this.undoStack.redo();
  863. this.scenceUpdate(this);
  864. }
  865. }
  866. /**
  867. * 执行重做操作执行
  868. */
  869. undo(): void {
  870. if (this.grabItem && this.grabItem.undo) {
  871. this.grabItem.undo()
  872. } else {
  873. this.undoStack.undo();
  874. this.scenceUpdate(this);
  875. }
  876. }
  877. /**
  878. * 完成事件创建的回调函数
  879. */
  880. finishCreated(item: any) {
  881. let arrList = []
  882. if (this.cmd == 'baseLine') {
  883. arrList = this.Markers;
  884. // 对数组遍历防止相同得id注入
  885. let canPush = true; //是否可注入
  886. this.Markers.forEach((arrItem: any) => {
  887. if (arrItem.id == item.id) {
  888. canPush = false
  889. }
  890. })
  891. if (canPush) {
  892. this.Markers.push(item);
  893. this.undoStack.push(new SGraphAddCommand(this, item));
  894. }
  895. }
  896. this.cmd = 'choice';
  897. this.selectContainer.clear()
  898. this.selectContainer.toggleItem(item)
  899. setTimeout(() => {
  900. this.focusItem = item;
  901. });
  902. if (item instanceof SZoneLegendItem || item instanceof SFHFQZoneLegendItem || item instanceof SSCPZZoneLegendItem) {
  903. let canPush = true; //是否可注入
  904. this.Nodes.forEach((arrItem: any) => {
  905. if (arrItem.id == item.id) {
  906. canPush = false
  907. }
  908. })
  909. if (canPush) {
  910. this.Nodes.push(item); //完成后,方可扔到Node节点
  911. this.undoStack.push(new SGraphAddCommand(this, arrList));
  912. }
  913. }
  914. // 管道完成后方可保存
  915. if (item instanceof TipelineItem) {
  916. let canPush = true; //是否可注入
  917. this.Relations.forEach((arrItem: any) => {
  918. if (arrItem.id == item.id) {
  919. canPush = false
  920. }
  921. })
  922. if (canPush) {
  923. this.Relations.push(item);
  924. this.undoStack.push(new SGraphAddCommand(this, arrList));
  925. }
  926. }
  927. this.scenceUpdate(this);
  928. }
  929. ////////////////////////
  930. // 以下为鼠标键盘操作事件
  931. onMouseDown(event: SMouseEvent): any {
  932. if (!this.isEditStatus) {
  933. return true
  934. }
  935. // 判断是否开启吸附,并且有吸附的点
  936. if (
  937. this.isAbsorbing &&
  938. this.highLight &&
  939. this.highLight.visible
  940. ) {
  941. event.x = this.highLight.point.x;
  942. event.y = this.highLight.point.y;
  943. }
  944. if (this.grabItem) {
  945. if (this.grabItem instanceof TipelineItem) {
  946. this.setTipeEndanchor(event)
  947. return true;
  948. } else if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Create) {
  949. this.setLineItem(event)
  950. return true;
  951. }
  952. return this.grabItem.onMouseDown(event);
  953. }
  954. switch (this.cmd) {
  955. case 'baseLine':
  956. this.addLine(event);
  957. break;
  958. case 'baseText':
  959. this.addTextItem(event);
  960. break;
  961. case 'baseImage':
  962. this.addImgItem(event)
  963. break;
  964. case 'Zone':
  965. if (!this.isSelecting) {
  966. this.addPolygonItem(event);
  967. } else {
  968. // 点选创建区域
  969. return super.onMouseDown(event)
  970. }
  971. break;
  972. case 'Image':
  973. this.addIconItem(event);
  974. break;
  975. case 'Line':
  976. this.addTipelineItem(event);
  977. break;
  978. default:
  979. return super.onMouseDown(event);
  980. }
  981. }
  982. onMouseMove(event: SMouseEvent): boolean {
  983. if (!this.isEditStatus) {
  984. return true
  985. }
  986. if (this.isAbsorbing) {
  987. if (!this.highLight) {
  988. this.highLight = new HighlightItem(null);
  989. this.addItem(this.highLight);
  990. }
  991. this.highLight.visible = false;
  992. this.absorbSpace(event);
  993. }
  994. return super.onMouseMove(event)
  995. }
  996. onMouseUp(event: SMouseEvent): boolean {
  997. if (!this.isEditStatus) {
  998. return true
  999. }
  1000. if (this.grabItem) {
  1001. if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Edit) {
  1002. this.setLineItem(event)
  1003. return true;
  1004. } else if (this.grabItem instanceof TipelineItem) {
  1005. this.updateTipeAnc(event);
  1006. return true;
  1007. }
  1008. return this.grabItem.onMouseUp(event);
  1009. }
  1010. return super.onMouseUp(event)
  1011. }
  1012. /**
  1013. * 键盘事件
  1014. *
  1015. * @param event 事件参数
  1016. * @return boolean
  1017. */
  1018. onKeyDown(event: KeyboardEvent): any {
  1019. if (!this.isEditStatus) {
  1020. return true
  1021. }
  1022. if (this.grabItem) {
  1023. this.grabItem.onKeyDown(event);
  1024. if (event.code == "Escape") {
  1025. const item = this.grabItem;
  1026. this.grabItem = null
  1027. this.removeItem(item);
  1028. if (this.view) {
  1029. this.view.update()
  1030. }
  1031. this.setCmd = 'choice'
  1032. }
  1033. }
  1034. // 删除键功能
  1035. if (event.code == 'Delete') {
  1036. this.deleiteItem()
  1037. }
  1038. // 复制粘贴
  1039. if (event.ctrlKey && !event.repeat) {
  1040. if (event.code == 'KeyC') {
  1041. console.log('ctrl c')
  1042. this.copy()
  1043. } else if (event.code == 'KeyV') {
  1044. console.log('ctrl v')
  1045. this.paste()
  1046. }
  1047. }
  1048. return false
  1049. }
  1050. /**
  1051. * 复制
  1052. *
  1053. */
  1054. copy(){
  1055. // const input = document.createElement('input');
  1056. // console.log(1111111111111111111)
  1057. // input.value = 'sfsfsfsf'
  1058. // document.body.appendChild(input);
  1059. // input.select()
  1060. // document.execCommand('copy');
  1061. // input.style.display='none';
  1062. if (this.selectContainer.itemList.length) {
  1063. this.copyString = {
  1064. Nodes: [],
  1065. Markers: [],
  1066. Relations: []
  1067. };
  1068. this.selectContainer.itemList.forEach(t => {
  1069. const type = this.itemToType(t);
  1070. if (type) {
  1071. const data = JSON.parse(JSON.stringify(t.toData()))
  1072. data.ID = ''
  1073. if (data.Type == 'Image') {
  1074. data.AnchorList = []
  1075. }
  1076. this.copyString[type].push(data)
  1077. }
  1078. })
  1079. console.log(this.copyString)
  1080. }
  1081. }
  1082. /**
  1083. * 粘贴
  1084. *
  1085. */
  1086. paste(){
  1087. const parserData = new STopologyParser(null);
  1088. // 需要深拷贝
  1089. parserData.parseData(JSON.parse(JSON.stringify(this.copyString)))
  1090. // 不需要复制区域
  1091. // parserData.zoneLegendList.forEach(t => {
  1092. // if (this.view) {
  1093. // t.pos.x += 10 / this.view.scale
  1094. // t.pos.y += 10 / this.view.scale
  1095. // }
  1096. // this.addItem(t)
  1097. // // 加到node
  1098. // // 加命令
  1099. // })
  1100. const graphItemList = [];
  1101. parserData.imageLegendList.forEach(t => {
  1102. if (this.view) {
  1103. t.pos.x += 10 / this.view.scale
  1104. t.pos.y += 10 / this.view.scale
  1105. }
  1106. this.addItem(t)
  1107. this.Nodes.push(t);
  1108. graphItemList.push(t)
  1109. })
  1110. parserData.imageMarkerList.forEach(t => {
  1111. if (this.view) {
  1112. t.pos.x += 10 / this.view.scale
  1113. t.pos.y += 10 / this.view.scale
  1114. }
  1115. this.addItem(t)
  1116. this.Markers.push(t);
  1117. graphItemList.push(t)
  1118. })
  1119. parserData.lineMarkerList.forEach(t => {
  1120. if (this.view) {
  1121. t.pos.x += 10 / this.view.scale
  1122. t.pos.y += 10 / this.view.scale
  1123. }
  1124. this.addItem(t)
  1125. this.Markers.push(t);
  1126. graphItemList.push(t)
  1127. })
  1128. parserData.textMarkerList.forEach(t => {
  1129. if (this.view) {
  1130. t.pos.x += 10 / this.view.scale
  1131. t.pos.y += 10 / this.view.scale
  1132. }
  1133. this.addItem(t)
  1134. this.Markers.push(t);
  1135. graphItemList.push(t)
  1136. })
  1137. parserData.relationList.forEach(t => {
  1138. if (this.view) {
  1139. t.pos.x += 10 / this.view.scale
  1140. t.pos.y += 10 / this.view.scale
  1141. t.moveToOrigin(t.pos.x, t.pos.y)
  1142. }
  1143. this.addItem(t)
  1144. this.Relations.push(t);
  1145. graphItemList.push(t)
  1146. })
  1147. this.scenceUpdate(this);
  1148. if (graphItemList.length) {
  1149. this.AddListCommand(graphItemList)
  1150. }
  1151. }
  1152. /** 类型转换 */
  1153. itemToType(obj:SGraphItem):String{
  1154. if (obj instanceof STextMarkerItem) {
  1155. return 'Markers'
  1156. } else if (obj instanceof SImageMarkerItem) {
  1157. return 'Markers'
  1158. } else if (obj instanceof SLineMarkerItem) {
  1159. return 'Markers'
  1160. } else if (obj instanceof SZoneLegendItem) {
  1161. return 'Nodes'
  1162. } else if (obj instanceof SFHFQZoneLegendItem) {
  1163. return 'Nodes'
  1164. } else if (obj instanceof SSCPZZoneLegendItem) {
  1165. return 'Nodes'
  1166. } else if (obj instanceof SImageLegendItem) {
  1167. return 'Nodes'
  1168. } else if (obj instanceof TipelineItem) {
  1169. return 'Relations'
  1170. }
  1171. return '';
  1172. }
  1173. /**
  1174. * 鼠标双击事件
  1175. *
  1176. * @param event 事件参数
  1177. * @return boolean
  1178. */
  1179. onDoubleClick(event: SMouseEvent): boolean {
  1180. if (!this.isEditStatus) {
  1181. return true
  1182. } else {
  1183. return super.onDoubleClick(event);
  1184. }
  1185. } // Function onDoubleClick()
  1186. /**
  1187. * 设置管线结束锚点
  1188. *
  1189. */
  1190. setTipeEndanchor(event: SMouseEvent): void {
  1191. if (this.grabItem instanceof TipelineItem) {
  1192. const anc = this.clickIsAnchor(event);
  1193. if (anc) {
  1194. const p = anc.mapToScene(0, 0)
  1195. anc.isConnected = true;
  1196. event.x = p.x;
  1197. event.y = p.y;
  1198. if (this.grabItem.status == SItemStatus.Create) {
  1199. if (this.grabItem.pointList.length) {
  1200. this.grabItem.endAnchor = anc;
  1201. anc.parent ?.connect('changePos', this.grabItem, this.grabItem.changePos)
  1202. }
  1203. this.grabItem.anchor2ID = anc.id
  1204. this.grabItem.node2Id = anc.parent.id
  1205. this.grabItem.onMouseDown(event)
  1206. this.grabItem.status = SItemStatus.Normal;
  1207. this.finishCreated(this.grabItem)
  1208. return
  1209. }
  1210. }
  1211. this.grabItem.onMouseDown(event)
  1212. }
  1213. }
  1214. /**
  1215. * 管线item修改锚点
  1216. *
  1217. */
  1218. updateTipeAnc(event: SMouseEvent): void {
  1219. if (this.grabItem instanceof TipelineItem) {
  1220. const anc = this.clickIsAnchor(event);
  1221. if (anc) {
  1222. const p = anc.mapToScene(0, 0)
  1223. event.x = p.x;
  1224. event.y = p.y;
  1225. if (this.grabItem.status == SItemStatus.Edit) {
  1226. if (this.grabItem.curIndex == 0) {
  1227. if (this.grabItem.startAnchor) {
  1228. this.grabItem.startAnchor.isConnected = false
  1229. this.grabItem.startAnchor.parent.disconnect('changePos', this.grabItem);
  1230. }
  1231. anc.isConnected = true;
  1232. this.grabItem.startAnchor = anc;
  1233. this.grabItem.anchor1ID = anc.id
  1234. this.grabItem.node1Id = anc.parent.id
  1235. anc.parent.connect('changePos', this.grabItem, this.grabItem.changePos)
  1236. }
  1237. if (this.grabItem.curIndex == this.grabItem.pointList.length - 1) {
  1238. if (this.grabItem.endAnchor) {
  1239. this.grabItem.endAnchor.isConnected = false
  1240. this.grabItem.endAnchor.parent.disconnect('changePos', this.grabItem);
  1241. }
  1242. anc.isConnected = true;
  1243. this.grabItem.endAnchor = anc;
  1244. this.grabItem.anchor2ID = anc.id
  1245. this.grabItem.node2Id = anc.parent.id
  1246. anc.parent.connect('changePos', this.grabItem, this.grabItem.changePos)
  1247. }
  1248. }
  1249. this.grabItem.onMouseUp(event)
  1250. return
  1251. } else {
  1252. if (this.grabItem.status == SItemStatus.Edit) {
  1253. if (this.grabItem.curIndex == 0) {
  1254. if (this.grabItem.startAnchor) {
  1255. this.grabItem.startAnchor.isConnected = false
  1256. this.grabItem.startAnchor.parent.disconnect('changePos', this.grabItem);
  1257. this.grabItem.startAnchor = null;
  1258. this.grabItem.anchor1ID = ''
  1259. this.grabItem.node1Id = ''
  1260. }
  1261. }
  1262. if (this.grabItem.curIndex == this.grabItem.pointList.length - 1) {
  1263. if (this.grabItem.endAnchor) {
  1264. this.grabItem.endAnchor.isConnected = false
  1265. this.grabItem.endAnchor.parent.disconnect('changePos', this.grabItem);
  1266. this.grabItem.endAnchor = null;
  1267. this.grabItem.anchor2ID = ''
  1268. this.grabItem.node2Id = ''
  1269. }
  1270. }
  1271. }
  1272. this.grabItem.onMouseUp(event)
  1273. return
  1274. }
  1275. }
  1276. }
  1277. /**
  1278. * 设置直线结束Item
  1279. *
  1280. */
  1281. setLineItem(event: SMouseEvent): void {
  1282. if (this.grabItem instanceof SLineMarkerItem) {
  1283. const item = this.clickIsItem(event);
  1284. // 鼠标点是否在某个item内
  1285. if (item) {
  1286. let scenePoint = item.boundingRect().center();
  1287. const p = item.mapToScene(scenePoint.x, scenePoint.y);
  1288. event.x = p.x;
  1289. event.y = p.y;
  1290. if (this.grabItem.status == SItemStatus.Create) {
  1291. // 点击在item内、创建状态且端点列表不为空时将直线结束端点和item绑定
  1292. if (this.grabItem.line.length) {
  1293. if (this.grabItem.startItem ?.id == item.id) {
  1294. this.grabItem.endItem = null;
  1295. } else {
  1296. this.grabItem.endItem = item;
  1297. this.grabItem.line[1] = new SPoint(event.x, event.y);
  1298. item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1299. }
  1300. }
  1301. this.grabItem.onMouseDown(event);
  1302. return
  1303. } else if (this.grabItem.status == SItemStatus.Edit) {
  1304. // 点击在item内、编辑状态且点击的为结束端点时
  1305. if (this.grabItem.curIndex == 1) {
  1306. // 直线关联的起始item是直线结束端点所在的item时,不吸附在点击item中心并将直线关联的结束item置为null
  1307. if (this.grabItem.startItem ?.id == item.id) {
  1308. this.grabItem.endItem = null;
  1309. } else {// 反正吸附,关联
  1310. this.grabItem.endItem = item;
  1311. this.grabItem.line[1] = new SPoint(event.x, event.y);
  1312. item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1313. }
  1314. } else if (this.grabItem.curIndex == 0) {
  1315. if (this.grabItem.endItem ?.id == item.id) {
  1316. this.grabItem.startItem = null;
  1317. } else {
  1318. this.grabItem.startItem = item;
  1319. this.grabItem.line[0] = new SPoint(event.x, event.y);
  1320. item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1321. }
  1322. }
  1323. }
  1324. } else {
  1325. // 如果不在item内且点击的是直线的某个端点,将端点的关联item置为null
  1326. if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
  1327. if (this.grabItem.curIndex == 1) {
  1328. this.grabItem.endItem = null;
  1329. } else if (this.grabItem.curIndex == 0) {
  1330. this.grabItem.startItem = null;
  1331. }
  1332. } else {
  1333. this.grabItem.onMouseDown(event);
  1334. return
  1335. }
  1336. }
  1337. // if (this.grabItem.status == SItemStatus.Create) {
  1338. // // 鼠标点是否在某个item内
  1339. // if (item) {
  1340. // let scenePoint = item.boundingRect().center();
  1341. // const p = item.mapToScene(scenePoint.x, scenePoint.y);
  1342. // event.x = p.x;
  1343. // event.y = p.y;
  1344. // if (this.grabItem.line.length && this.grabItem.curIndex == -1) {
  1345. // this.grabItem.endItem = item;
  1346. // this.grabItem.line[1] = new SPoint(event.x, event.y);
  1347. // item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1348. // }
  1349. // this.grabItem.onMouseDown(event);
  1350. // return
  1351. // } else {
  1352. // if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
  1353. // if (this.grabItem.curIndex == 1) {
  1354. // this.grabItem.endItem = null;
  1355. // } else if (this.grabItem.curIndex == 0) {
  1356. // this.grabItem.startItem = null;
  1357. // }
  1358. // }
  1359. // }
  1360. // } else if (this.grabItem.status == SItemStatus.Edit) {
  1361. // if (this.grabItem.curIndex == 1) {
  1362. // this.grabItem.endItem = item;
  1363. // this.grabItem.line[1] = new SPoint(event.x, event.y);
  1364. // item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1365. // } else if (this.grabItem.curIndex == 0) {
  1366. // this.grabItem.startItem = item;
  1367. // this.grabItem.line[0] = new SPoint(event.x, event.y);
  1368. // item.connect('onMove', this.grabItem, this.grabItem.changePos);
  1369. // }
  1370. // }
  1371. this.grabItem.onMouseUp(event);
  1372. }
  1373. }
  1374. /**
  1375. * 划线时点击位置是否是锚点
  1376. *
  1377. * @param event 事件
  1378. * @param len 限制距离
  1379. * @return 点击的锚点
  1380. * */
  1381. clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
  1382. let minAnchor = null;
  1383. let len: number = -1;
  1384. this.Nodes.forEach(image => {
  1385. // image.showAnchor = false;
  1386. if (image.anchorList && image.anchorList.length) {
  1387. let scenePoint = image.mapFromScene(event.x, event.y);
  1388. if (image.contains(scenePoint.x, scenePoint.y)) {
  1389. image.anchorList.forEach(anchor => {
  1390. let anchorPoint = anchor.mapToScene(0, 0);
  1391. let dis = SMathUtil.pointDistance(
  1392. event.x,
  1393. event.y,
  1394. anchorPoint.x,
  1395. anchorPoint.y
  1396. );
  1397. // let dis = SMathUtil.pointDistance(
  1398. // scenePoint.x,
  1399. // scenePoint.y,
  1400. // anchorPoint.x,
  1401. // anchorPoint.y
  1402. // );
  1403. console.log(dis)
  1404. if (len < 0) {
  1405. len = anchor.sceneDis;
  1406. }
  1407. if (dis < len) {
  1408. minAnchor = anchor;
  1409. len = dis;
  1410. }
  1411. })
  1412. }
  1413. }
  1414. })
  1415. console.log('-----------------------')
  1416. console.log(minAnchor)
  1417. console.log('-----------------------')
  1418. // if (minAnchor&&minAnchor.parent) {
  1419. // minAnchor.parent.showAnchor = true
  1420. // }
  1421. return minAnchor;
  1422. }
  1423. /**
  1424. * 划线时点击位置是在文本,图片,,区域内
  1425. *
  1426. * @param event 事件
  1427. * @return 点击的item
  1428. * */
  1429. clickIsItem(event: SMouseEvent): SGraphItem | null {
  1430. let minIten = null;
  1431. let len: number = -1;
  1432. let itemList = this.Nodes.concat(this.Markers);
  1433. itemList.forEach(item => {
  1434. if (
  1435. item instanceof STextMarkerItem ||
  1436. item instanceof SImageMarkerItem ||
  1437. item instanceof SZoneLegendItem ||
  1438. item instanceof SFHFQZoneLegendItem ||
  1439. item instanceof SSCPZZoneLegendItem
  1440. ) {
  1441. let scenePoint = item.mapFromScene(event.x, event.y);
  1442. if (item.contains(scenePoint.x, scenePoint.y)) {
  1443. let dis = SMathUtil.pointDistance(
  1444. scenePoint.x,
  1445. scenePoint.y,
  1446. item.boundingRect().center().x,
  1447. item.boundingRect().center().y
  1448. );
  1449. if (len < 0) {
  1450. minIten = item;
  1451. len = dis;
  1452. }
  1453. if (dis < len) {
  1454. minIten = item;
  1455. len = dis;
  1456. }
  1457. }
  1458. }
  1459. })
  1460. console.log('-----------------------')
  1461. console.log(minIten)
  1462. console.log('-----------------------')
  1463. return minIten;
  1464. }
  1465. /**
  1466. * 点是否在吸附区域内
  1467. *
  1468. * @param p 要判断的点
  1469. * @param minX 空间区域
  1470. * @param minY 空间区域
  1471. * @param maxX 空间区域
  1472. * @param maxY 空间区域
  1473. */
  1474. static isPointInAbsorbArea(
  1475. p: SPoint,
  1476. minX: number,
  1477. maxX: number,
  1478. minY: number,
  1479. maxY: number
  1480. ): boolean {
  1481. let rect = new SRect(
  1482. minX - 1000,
  1483. minY - 1000,
  1484. maxX - minX + 2000,
  1485. maxY - minY + 2000
  1486. );
  1487. return rect.contains(p.x, p.y);
  1488. } // Function isPointInAbsorbArea()
  1489. /**
  1490. * 吸附空间
  1491. *
  1492. * @param event 鼠标事件对象
  1493. * @return boolean 是否找到吸附的对象
  1494. */
  1495. absorbSpace(event: SMouseEvent): boolean {
  1496. if (!this.highLight) {
  1497. return false;
  1498. }
  1499. let absorbLen = 1000;
  1500. if (this.view) {
  1501. absorbLen = 10 / this.view.scale;
  1502. }
  1503. let P = this.absorbSpacePoint(event, absorbLen);
  1504. if (P.Point) {
  1505. this.highLight.distance = P.MinDis;
  1506. this.highLight.point = new SPoint(P.Point.X, -P.Point.Y);
  1507. this.highLight.visible = true;
  1508. return true;
  1509. } else {
  1510. let L = this.absorbSpaceLine(event, absorbLen);
  1511. if (L.Line && L.Point) {
  1512. this.highLight.distance = L.MinDis;
  1513. this.highLight.point = L.Point;
  1514. this.highLight.line = L.Line;
  1515. this.highLight.visible = true;
  1516. return true;
  1517. }
  1518. return false;
  1519. }
  1520. } // Function absorbSpace()
  1521. /**
  1522. * 吸附空间点
  1523. *
  1524. * @param event 鼠标事件对象
  1525. * @param absorbLen 吸附距离
  1526. * @return MinDis 吸附的点
  1527. */
  1528. absorbSpacePoint(event: SMouseEvent, absorbLen: number): MinDis {
  1529. let minPointDis = Number.MAX_SAFE_INTEGER;
  1530. let Point;
  1531. this.spaceList.map((space): void => {
  1532. if (
  1533. EditScence.isPointInAbsorbArea(
  1534. new SPoint(event.x, event.y),
  1535. space.minX,
  1536. space.maxX,
  1537. space.minY,
  1538. space.maxY
  1539. )
  1540. ) {
  1541. space.data.OutLine.forEach((item): void => {
  1542. let minDis = SMathUtil.getMinDisPoint(
  1543. new SPoint(event.x, event.y),
  1544. item
  1545. );
  1546. if (
  1547. minDis &&
  1548. minDis.MinDis < absorbLen &&
  1549. minDis.MinDis < minPointDis
  1550. ) {
  1551. minPointDis = minDis.MinDis;
  1552. Point = minDis.Point;
  1553. }
  1554. });
  1555. }
  1556. });
  1557. return {
  1558. MinDis: minPointDis,
  1559. Point: Point
  1560. };
  1561. } // Function absorbSpacePoint()
  1562. /**
  1563. * 吸附空间线
  1564. *
  1565. * @param event 鼠标事件对象
  1566. * @param absorbLen 吸附距离
  1567. * @return PointToLine 吸附的线
  1568. */
  1569. absorbSpaceLine(event: SMouseEvent, absorbLen: number): PointToLine {
  1570. let minPointDis = Number.MAX_SAFE_INTEGER;
  1571. let Point, Line;
  1572. this.spaceList.forEach((space): void => {
  1573. if (
  1574. EditScence.isPointInAbsorbArea(
  1575. new SPoint(event.x, event.y),
  1576. space.minX,
  1577. space.maxX,
  1578. space.minY,
  1579. space.maxY
  1580. )
  1581. ) {
  1582. space.data.OutLine.forEach((item): void => {
  1583. let minDisLine = SMathUtil.getMinDisLine(
  1584. new SPoint(event.x, event.y),
  1585. item
  1586. );
  1587. if (
  1588. minDisLine &&
  1589. minDisLine.MinDis < absorbLen &&
  1590. minDisLine.MinDis < minPointDis
  1591. ) {
  1592. minPointDis = minDisLine.MinDis;
  1593. Point = minDisLine.Point;
  1594. Line = minDisLine.Line;
  1595. }
  1596. });
  1597. }
  1598. });
  1599. return {
  1600. MinDis: minPointDis,
  1601. Point: Point,
  1602. Line: Line
  1603. };
  1604. } // Function absorbSpaceLine()
  1605. /**
  1606. * 添加多个item命令
  1607. * @param focusItemList 鼠标事件对象
  1608. */
  1609. AddListCommand(focusItemList: any[]): void {
  1610. this.undoStack.push(new SGraphAddListCommand(this, focusItemList));
  1611. }
  1612. /**
  1613. * 选中状态方法
  1614. * @param item 鼠标事件对象
  1615. */
  1616. toggleItem(item: SGraphItem): void {
  1617. this.selectContainer.clear()
  1618. this.selectContainer.toggleItem(item)
  1619. }
  1620. }