1
0

UIControl.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. import { coordinate } from "../Coordinate.js";
  2. import LayerEvents from "../enum/LayerEvents.js";
  3. import UIEvents from "../enum/UIEvents.js";
  4. import VectorType from "../enum/VectorType.js";
  5. import { stateService } from "../Service/StateService.js";
  6. import { floorplanService } from "../Service/FloorplanService.js";
  7. import { historyService } from "../Service/HistoryService.js";
  8. import { elementService } from "../Service/ElementService";
  9. import { mathUtil } from "../MathUtil.js";
  10. import { wallService } from "../Service/WallService.js";
  11. import { tagService } from "../Service/TagService.js";
  12. import { tableService } from "../Service/TableService.js";
  13. import Constant from "../Constant";
  14. import { addWall } from "../Controls/AddWall";
  15. import { floorplanData } from "../FloorplanData.js";
  16. import { signService } from "../Service/SignService.js";
  17. import { customImageService } from "../Service/CustomImageService.js";
  18. import mitt from "mitt";
  19. import { history } from "../History/History.js";
  20. import { iconService } from "../Service/IconService.js";
  21. export default class UIControl {
  22. constructor(layer) {
  23. this.layer = layer;
  24. this.bus = mitt();
  25. this.selectUI = null;
  26. this.appendData = null;
  27. // this.bus.emit('')
  28. }
  29. //点击左侧栏后,更新事件
  30. updateEventNameForSelectUI() {
  31. elementService.hideAll();
  32. //正在添加tag的时候,需要先删除
  33. const eventName = stateService.getEventName();
  34. // if (eventName == LayerEvents.AddTag) {
  35. // let item = stateService.getDraggingItem()
  36. // if (item && item.type == VectorType.Tag) {
  37. // floorplanService.deleteTag(item.vectorId)
  38. // }
  39. // }
  40. // stateService.clearItems()
  41. if (this.selectUI == UIEvents.Wall) {
  42. stateService.setEventName(LayerEvents.AddWall);
  43. } else if (this.selectUI == UIEvents.Table) {
  44. stateService.setEventName(LayerEvents.AddTable);
  45. } else if (this.selectUI == UIEvents.Rectangle) {
  46. stateService.setEventName(LayerEvents.AddRectangle);
  47. } else if (this.selectUI == UIEvents.Circle) {
  48. stateService.setEventName(LayerEvents.AddCircle);
  49. } else if (this.selectUI == UIEvents.Arrow) {
  50. stateService.setEventName(LayerEvents.AddArrow);
  51. } else if (this.selectUI == UIEvents.Icon) {
  52. stateService.setEventName(LayerEvents.AddIcon);
  53. } else if (this.selectUI == UIEvents.Tag) {
  54. stateService.setEventName(LayerEvents.AddTag);
  55. } else if (
  56. this.selectUI == UIEvents.Cigaret ||
  57. this.selectUI == UIEvents.FirePoint ||
  58. this.selectUI == UIEvents.LeftFootPrint ||
  59. this.selectUI == UIEvents.RightFootPrint ||
  60. this.selectUI == UIEvents.LeftShoePrint ||
  61. this.selectUI == UIEvents.RightShoePrint ||
  62. this.selectUI == UIEvents.FingerPrint ||
  63. this.selectUI == UIEvents.DeadBody ||
  64. this.selectUI == UIEvents.BloodStain
  65. ) {
  66. stateService.setEventName(LayerEvents.AddSign);
  67. }
  68. }
  69. /**
  70. * @param {*} type 部件类型
  71. * @param {*} name 属性名称
  72. * @param {*} value 属性值
  73. */
  74. async setAttributes(type, name, value) {
  75. let item = stateService.getFocusItem();
  76. switch (name) {
  77. case "delete":
  78. this.deleteItem();
  79. break;
  80. case 'update':
  81. if(type == VectorType.Tag){
  82. const tag = floorplanService.getTag(item.vectorId)
  83. if(value.hasOwnProperty('version')){
  84. tag.setColor(value.color)
  85. tag.setFontSize(value.fontSize)
  86. tag.setValue(value.text)
  87. }
  88. else{
  89. tag.setValue(value)
  90. }
  91. }
  92. else if(type == VectorType.Arrow){
  93. const arrow = floorplanService.getArrow(item.vectorId)
  94. if(value.hasOwnProperty('version')){
  95. arrow.setColor(value.color)
  96. }
  97. }
  98. else if(type == VectorType.Wall){
  99. const wall = floorplanService.getWall(item.vectorId)
  100. if(value.hasOwnProperty('version')){
  101. wall.setColor(value.color)
  102. }
  103. }
  104. else if(type == VectorType.Rectangle){
  105. const rectangle = floorplanService.getRectangle(item.vectorId)
  106. if(value.hasOwnProperty('version')){
  107. rectangle.setColor(value.color)
  108. }
  109. }
  110. else if(type == VectorType.Circle){
  111. const circle = floorplanService.getCircle(item.vectorId)
  112. if(value.hasOwnProperty('version')){
  113. circle.setColor(value.color)
  114. }
  115. }
  116. else if(type == VectorType.Table){
  117. const table = floorplanService.getTable(item.vectorId)
  118. if(value.hasOwnProperty('version')){
  119. table.setValue(value.content)
  120. }
  121. else{
  122. table.setValue(value)
  123. }
  124. }
  125. else if(type == VectorType.Title){
  126. if(value.hasOwnProperty('version')){
  127. floorplanService.updateTitle(value.text);
  128. }
  129. else{
  130. floorplanService.updateTitle(value);
  131. }
  132. text
  133. }
  134. else if(type == VectorType.BgImage){
  135. await floorplanService.updateBgImage(value);
  136. }
  137. else if(type == VectorType.Compass){
  138. floorplanService.updateCompass(value);
  139. }
  140. break;
  141. case "upload":
  142. if(type == VectorType.CustomImage){
  143. customImageService.setCustomImageUrl(value.url);
  144. customImageService.createCustomImage({
  145. x:0,
  146. y:0
  147. })
  148. stateService.setEventName(LayerEvents.MoveCustomImage);
  149. }
  150. break;
  151. }
  152. history.save();
  153. stateService.clearFocusItem();
  154. // this.bus.emit('hideAttribute')
  155. // this.bus.emit('hideUI')
  156. this.layer.renderer.autoRedraw();
  157. }
  158. showAttributes(item) {
  159. let type = item.type;
  160. let value = null;
  161. switch (item.type) {
  162. case VectorType.Tag:
  163. const tag = floorplanService.getTag(item.vectorId);
  164. if (!tag) {
  165. return;
  166. }
  167. value = {
  168. version:'2.0',
  169. text:tag.value,
  170. color: tag.color,
  171. fontSize: tag.fontSize,
  172. };
  173. break;
  174. case VectorType.Table:
  175. const table = floorplanService.getTable(item.vectorId);
  176. if (!table) {
  177. return;
  178. }
  179. const cellIds = table.cells;
  180. let content = [];
  181. for (let i = 0; i < cellIds.length; ++i) {
  182. for (let j = 0; j < cellIds[i].length; ++j) {
  183. const cell = floorplanService.getCell(cellIds[i][j]);
  184. content.push({
  185. width: cell.width,
  186. height: cell.height,
  187. value: cell.value,
  188. colIndex: cell.colIndex,
  189. rowIndex: cell.rowIndex,
  190. });
  191. }
  192. }
  193. value = {
  194. version:'2.0',
  195. content: content,
  196. };
  197. break;
  198. case VectorType.Title:
  199. const title = floorplanService.getTitle();
  200. if (!title) {
  201. return;
  202. }
  203. value = {
  204. version:'2.0',
  205. text: title.value,
  206. };
  207. break;
  208. case VectorType.Compass:
  209. const compass = floorplanService.getCompass();
  210. if (!compass) {
  211. return;
  212. }
  213. value = compass.angle;
  214. break;
  215. // case VectorType.CustomImage:
  216. // const customImage = floorplanService.getCustomImage(item.vectorId);
  217. // if (!customImage) {
  218. // return;
  219. // }
  220. // value = {
  221. // version:'2.0',
  222. // url: customImage.url,
  223. // };
  224. // break;
  225. }
  226. this.bus.emit("showAttribute", {
  227. type: type,
  228. value: value,
  229. });
  230. }
  231. clearUI() {
  232. this.selectUI = null;
  233. this.bus.emit("hideAttribute");
  234. this.bus.emit("hideUI");
  235. }
  236. deleteItem() {
  237. let item = stateService.getFocusItem();
  238. if (item) {
  239. if (item.type == VectorType.Wall) {
  240. floorplanService.deleteWall(item.vectorId);
  241. } else if (item.type == VectorType.Rectangle) {
  242. floorplanService.deleteRectangle(item.vectorId);
  243. } else if (item.type == VectorType.Circle) {
  244. floorplanService.deleteCircle(item.vectorId);
  245. } else if (item.type == VectorType.Arrow) {
  246. floorplanService.deleteArrow(item.vectorId);
  247. } else if (item.type == VectorType.Icon) {
  248. iconService.deleteIcon(item.vectorId);
  249. } else if (item.type == VectorType.Tag) {
  250. floorplanService.deleteTag(item.vectorId);
  251. } else if (item.type == VectorType.Table) {
  252. floorplanService.deleteTable(item.vectorId);
  253. } else if (signService.isSign(item.type)) {
  254. floorplanService.deleteSign(item.vectorId);
  255. } else if (item.type == VectorType.WallCorner) {
  256. wallService.deleteWallCorner(item.vectorId);
  257. } else if (item.type == VectorType.CustomImage) {
  258. floorplanService.deleteCustomImage(item.vectorId);
  259. }
  260. history.save();
  261. this.layer.renderer.autoRedraw();
  262. }
  263. }
  264. getSignTypeForUI() {
  265. if (this.selectUI == UIEvents.Cigaret) {
  266. return VectorType.Cigaret;
  267. } else if (this.selectUI == UIEvents.FirePoint) {
  268. return VectorType.FirePoint;
  269. } else if (this.selectUI == UIEvents.LeftFootPrint) {
  270. return VectorType.LeftFootPrint;
  271. } else if (this.selectUI == UIEvents.RightFootPrint) {
  272. return VectorType.RightFootPrint;
  273. } else if (this.selectUI == UIEvents.LeftShoePrint) {
  274. return VectorType.LeftShoePrint;
  275. } else if (this.selectUI == UIEvents.RightShoePrint) {
  276. return VectorType.RightShoePrint;
  277. } else if (this.selectUI == UIEvents.FingerPrint) {
  278. return VectorType.FingerPrint;
  279. } else if (this.selectUI == UIEvents.DeadBody) {
  280. return VectorType.DeadBody;
  281. } else if (this.selectUI == UIEvents.BloodStain) {
  282. return VectorType.BloodStain;
  283. }
  284. }
  285. exportJSON() {
  286. const json = {
  287. version: floorplanData.version,
  288. floors: floorplanData.floors,
  289. currentId: floorplanService.getCurrentId(),
  290. };
  291. return json;
  292. }
  293. downloadCadImg(canvas, filename) {
  294. // 图片导出为 png 格式
  295. var type = "png";
  296. var imgData = canvas.toDataURL(type, 1);
  297. let blobImg = this.base64ToBlob(imgData);
  298. return blobImg;
  299. // 加工image data,替换mime type
  300. //imgData = imgData.replace(this._fixType(type), 'image/octet-stream')
  301. // download
  302. //this.saveFile(imgData, filename)
  303. }
  304. saveFile(data, filename) {
  305. var save_link = document.createElementNS(
  306. "http://www.w3.org/1999/xhtml",
  307. "a"
  308. );
  309. save_link.href = data;
  310. save_link.download = filename;
  311. var event = document.createEvent("MouseEvents");
  312. event.initMouseEvent(
  313. "click",
  314. true,
  315. false,
  316. window,
  317. 0,
  318. 0,
  319. 0,
  320. 0,
  321. 0,
  322. false,
  323. false,
  324. false,
  325. false,
  326. 0,
  327. null
  328. );
  329. save_link.dispatchEvent(event);
  330. }
  331. _fixType(type) {
  332. type = type.toLowerCase().replace(/jpg/i, "jpeg");
  333. var r = type.match(/png|jpeg|bmp|gif/)[0];
  334. return "image/" + r;
  335. }
  336. base64ToBlob(base64) {
  337. let arr = base64.split(","),
  338. mime = arr[0].match(/:(.*?);/)[1],
  339. bstr = atob(arr[1]),
  340. n = bstr.length,
  341. u8arr = new Uint8Array(n);
  342. while (n--) {
  343. u8arr[n] = bstr.charCodeAt(n);
  344. }
  345. return new Blob([u8arr], { type: mime });
  346. }
  347. //截图
  348. menu_screenShot(fileName) {
  349. // this.menu_flex();
  350. // this.layer.stopAddVector()
  351. // setTimeout(function(){
  352. // this.downloadCadImg(this.layer.canvas,fileName)
  353. // }.bind(this),100)
  354. this.layer.stopAddVector();
  355. return this.downloadCadImg(this.layer.canvas, fileName);
  356. }
  357. menu_flex() {
  358. coordinate.reSet();
  359. this.layer.renderer.autoRedraw();
  360. }
  361. initTopTable(value) {
  362. let center = {
  363. x: 770,
  364. y: 200,
  365. };
  366. center = coordinate.getXYFromScreen(center);
  367. let table = tableService.createTable(center);
  368. table.setValue(value);
  369. this.layer.renderer.autoRedraw();
  370. }
  371. initDownTable(value) {
  372. let center = {
  373. x: 770,
  374. y: 520,
  375. };
  376. center = coordinate.getXYFromScreen(center);
  377. let table = tableService.createTable(center);
  378. table.setValue(value);
  379. this.layer.renderer.autoRedraw();
  380. }
  381. /******************************************************************************************************************************************************************/
  382. }