edit.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. import { cloneDeep, pick } from "lodash";
  2. import { Exception, queenApi } from "queenjs";
  3. import { EditorModule } from "..";
  4. import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl";
  5. import { CompObject } from "../../controllers/SelectCtrl/compObj";
  6. import { DesignComp } from "../../objects/DesignTemp/DesignComp";
  7. import { ICompKeys, Layout } from "../../typings";
  8. export const editActions = EditorModule.action({
  9. pickComp(compId: string, selected = true) {
  10. if (compId == "") {
  11. //空的时候,就选择根页面
  12. compId = "root";
  13. }
  14. const selectCardChild = (id: string) => {
  15. const paths = this.helper.getCompTrees(id);
  16. const cardChilds = paths[2];
  17. if (cardChilds) {
  18. this.actions.selectObjs([cardChilds.id]);
  19. } else {
  20. this.actions.selectObjs([]);
  21. if (id != "root") {
  22. this.store.setCurrComp(this.store.currStreamCardId);
  23. }
  24. }
  25. };
  26. if (this.store.currCompId == compId) {
  27. return;
  28. }
  29. this.store.setCurrComp(compId);
  30. if (selected) {
  31. selectCardChild(compId);
  32. }
  33. },
  34. // 通过点击添加组件到画布
  35. async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
  36. if (!this.store.currStreamCardId) {
  37. queenApi.messageError("请先选中一个卡片");
  38. return;
  39. }
  40. //点击默认都创建一个容器
  41. //创建容器
  42. const isCreatCard =
  43. compKey != "Text" &&
  44. compKey != "Image" &&
  45. compKey != "Video" &&
  46. compKey != "Web3D";
  47. let yOffset = 0;
  48. if (
  49. this.store.currCompId != this.store.currStreamCardId &&
  50. !isCreatCard &&
  51. this.store.currCompId != "root"
  52. ) {
  53. const bound = this.helper.getCardCompBound(this.store.currCompId);
  54. yOffset = bound.y + bound.h;
  55. }
  56. let currCard = this.store.currStreamCard;
  57. if (isCreatCard) {
  58. //先创建卡片
  59. const currCardIndex =
  60. this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
  61. const compId = await this.store.insertDesignContent(
  62. "Container",
  63. currCardIndex
  64. );
  65. currCard = this.helper.findComp(compId) as DesignComp;
  66. }
  67. const compId = await this.store.insertCompContainer(compKey, currCard);
  68. const addedComp = this.store.compMap[compId];
  69. addedComp.layout.position = "absolute";
  70. const currComp = this.helper.findComp(compId) as DesignComp;
  71. cb?.(currComp);
  72. //添加组件到当前选中的组件下面
  73. let xOffset = this.helper.designSizeToPx(
  74. 375 - (currComp.layout.size?.[0] || 750) / 2
  75. );
  76. const obj = new CompObject(currComp);
  77. //没有选中组件添加到当前卡片最后
  78. const children = currCard.children.default || [];
  79. if (yOffset == 0 && children.length >= 2) {
  80. const prevCompIndex = children.indexOf(compId) - 1;
  81. const bound = this.helper.getCardCompBound(children[prevCompIndex]);
  82. yOffset = bound.y + bound.h;
  83. }
  84. obj.worldTransform.translate(xOffset, yOffset);
  85. currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
  86. this.actions.pickComp(compId);
  87. this.helper.extendStreamCard(currCard.id);
  88. if (compKey == "Text") {
  89. this.actions.textFocus(compId, true);
  90. }
  91. this.controls.cropCtrl.close();
  92. },
  93. // 通过拖拽添加组件到画布
  94. async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) {
  95. await this.actions.addCompToDesign(compKey);
  96. const cardPoints = this.helper.getPointOffsetWith(
  97. event,
  98. this.store.currStreamCard.$el
  99. );
  100. const { currComp } = this.store;
  101. let selCtrl = this.controls.selectCtrl;
  102. selCtrl.translate(
  103. this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
  104. cardPoints.y
  105. );
  106. this.helper.extendStreamCard(this.store.currStreamCardId);
  107. if (compKey == "Text") {
  108. this.actions.selectObjs([]);
  109. this.actions.textFocus(currComp.id, true);
  110. }
  111. this.controls.cropCtrl.close();
  112. },
  113. async selectObjs(ids: string[]) {
  114. this.store.selected = ids;
  115. this.store.selectId = ids.length > 1 ? Date.now() + "" : "";
  116. },
  117. // 添加组件到画布
  118. async addCompToDesign(compKey: ICompKeys, index?: number) {
  119. if (!this.store.currStreamCardId) {
  120. //必须选中一个streamCard
  121. return;
  122. }
  123. if (compKey == "Container") {
  124. // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
  125. const compId = await this.store.insertDesignContent(compKey, index);
  126. this.actions.pickComp(compId);
  127. return;
  128. }
  129. const compId = await this.store.insertCompContainer(
  130. compKey,
  131. this.store.currStreamCard
  132. );
  133. const addedComp = this.store.compMap[compId];
  134. this.actions.setCompPositionFloat(addedComp);
  135. this.actions.pickComp(compId);
  136. },
  137. // 切换当前组件
  138. // pickComp(compId: string) {
  139. // const { store, helper } = this;
  140. // // 组合模式下,切换组件
  141. // // if (store.currCompId && store.groupModeStatus) {
  142. // // const enableGroupIds = helper
  143. // // .findParentComp(compId)
  144. // // ?.getChildIds() as string[];
  145. // // const comps = helper.getCompTrees(compId);
  146. // // while (comps.length) {
  147. // // const comp = comps.pop() as DesignComp;
  148. // // const index = store.groupIds.indexOf(comp.id);
  149. // // if (index >= 0) {
  150. // // const groupIds = [...store.groupIds];
  151. // // groupIds.splice(index, 1);
  152. // // store.setGroupIds(groupIds);
  153. // // } else if (enableGroupIds.includes(comp.id)) {
  154. // // store.groupIds.push(comp.id);
  155. // // return;
  156. // // }
  157. // // }
  158. // // return;
  159. // // }
  160. // // let nextCompId = compId;
  161. // // if (this.store.isEditPage) {
  162. // // const comps = this.helper.getCompTrees(compId);
  163. // // nextCompId = comps[1].id;
  164. // // }
  165. // if (this.store.currCompId == compId) {
  166. // return;
  167. // }
  168. // if (this.store.currComp.compKey == "Text") {
  169. // this.store.setTextEditingState(false);
  170. // }
  171. // this.store.setCurrComp(compId);
  172. // if (this.store.currCompId == this.store.currStreamCardId) {
  173. // this.controls.transferCtrl.destroy();
  174. // }
  175. // },
  176. // 切换到父组件
  177. pickParentComp(compId: string) {
  178. const parentComp = this.helper.findParentComp(compId);
  179. parentComp && this.store.setCurrComp(parentComp.id);
  180. },
  181. // 删除组件
  182. removeSelectComps() {
  183. const selected = this.store.selected.slice(0);
  184. this.actions.selectObjs([]);
  185. let n = selected.length;
  186. while (n--) {
  187. this.actions.removeComp(selected[n]);
  188. }
  189. },
  190. // 删除组件
  191. removeComp(compId: string) {
  192. if (this.helper.isCompCanDelete(compId)) {
  193. if (this.helper.isStreamCard(compId)) {
  194. this.actions.removeStreamCard(compId);
  195. return;
  196. }
  197. const cardid = this.store.currStreamCardId;
  198. if (compId === this.store.currCompId) {
  199. this.store.setCurrComp(this.store.currStreamCardId);
  200. }
  201. this.store.deleteComp(compId);
  202. this.helper.extendStreamCard(cardid);
  203. this.actions.selectObjs([]);
  204. }
  205. },
  206. async removeStreamCard(compId: string) {
  207. await queenApi.showConfirm({ title: "删除", content: "确认删除当前内容?" });
  208. // if (this.store.streamCardIds.length < 2) {
  209. // queenApi.messageError("")
  210. // return;
  211. // }
  212. let nextCard = this.store.currStreamCardId;
  213. if (compId == this.store.currStreamCardId) {
  214. const i = this.store.streamCardIds.indexOf(compId);
  215. nextCard = this.store.streamCardIds[i + 1];
  216. if (!nextCard) {
  217. nextCard = this.store.streamCardIds[i - 1];
  218. }
  219. }
  220. this.controls.selectCtrl.selecteObjs([]);
  221. this.store.deleteComp(compId);
  222. this.store.setCurrComp(nextCard);
  223. },
  224. // 移动组件顺序
  225. moveComp(selIndex: number, targetIndex: number) {
  226. if (selIndex === targetIndex) return;
  227. this.store.moveComp(selIndex, targetIndex);
  228. },
  229. // 保存容器为组件
  230. async saveAsComp(comp: DesignComp) {
  231. try {
  232. // 组件封面
  233. const blob = await new ScreenshotCtrl().snap({
  234. element: comp.$el,
  235. });
  236. const thumbnail = URL.createObjectURL(blob);
  237. const title = await queenApi.showInput({
  238. title: "保存到我的组件",
  239. defaultValue: this.controls.compUICtrl.state.components.get(
  240. comp.compKey
  241. )?.name,
  242. });
  243. const data = {
  244. title,
  245. thumbnail,
  246. compMap: cloneDeep(this.store.designData.compMap),
  247. };
  248. this.helper.clearUnusedComps(data.compMap, comp.id);
  249. data.compMap.root = data.compMap[comp.id];
  250. data.compMap.root.id = "root";
  251. delete data.compMap[comp.id];
  252. queenApi.showLoading("保存中");
  253. await this.controls.uploader.uploadBlobs(data);
  254. await this.https.createComp(data);
  255. queenApi.messageSuccess("保存成功");
  256. } catch (error: any) {
  257. throw Exception.error(error.toString());
  258. } finally {
  259. queenApi.hideLoading();
  260. }
  261. },
  262. // 保存项目
  263. async saveDesign() {
  264. try {
  265. // 清除无用组件
  266. this.helper.clearUnusedComps(this.store.designData.compMap);
  267. // 封面截屏
  268. if (!this.store.designData.thumbnail) {
  269. await this.actions.updateThumbnailByScreenshot();
  270. }
  271. queenApi.showLoading("保存中");
  272. await this.controls.uploader.uploadBlobs(this.store.designData);
  273. await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
  274. this.store.designData
  275. );
  276. queenApi.messageSuccess("保存成功");
  277. } catch (error: any) {
  278. throw Exception.error(error.toString());
  279. } finally {
  280. queenApi.hideLoading();
  281. }
  282. },
  283. // 截屏保存封面
  284. async updateThumbnailByScreenshot(autoSave?: boolean) {
  285. try {
  286. const rootComp = this.helper.findRootComp();
  287. if (!rootComp) return;
  288. queenApi.showLoading("截屏中");
  289. const blob = await new ScreenshotCtrl().snap({
  290. element: rootComp.$el,
  291. ratio: this.store.isEditComp ? 0 : 1,
  292. });
  293. const thumbnail = URL.createObjectURL(blob);
  294. this.store.setDesignThumbnail(thumbnail);
  295. if (autoSave) {
  296. await this.controls.uploader.uploadBlobs(this.store.designData);
  297. await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
  298. pick(this.store.designData, ["_id", "thumbnail"])
  299. );
  300. queenApi.messageSuccess("保存成功");
  301. }
  302. } catch (error: any) {
  303. throw Exception.error(error.toString());
  304. } finally {
  305. queenApi.hideLoading();
  306. }
  307. },
  308. // 设置组件变换
  309. setCompTransform(comp: DesignComp, transform: Layout["transform"]) {
  310. if (!comp) return;
  311. comp.layout.transform = transform;
  312. console.log(comp);
  313. },
  314. // 设置组件变换
  315. setCompTransformMatrix(comp: DesignComp, transformMatrix: string) {
  316. if (!comp) return;
  317. comp.layout.transformMatrix = transformMatrix;
  318. },
  319. // 设置组件浮动
  320. setCompPositionFloat(comp: DesignComp) {
  321. comp.layout.position = "absolute";
  322. },
  323. // 设置组件浮动
  324. setCompPosition(comp: DesignComp) {
  325. comp.layout.position =
  326. comp.layout.position === "absolute" ? undefined : "absolute";
  327. },
  328. // 设置组件显示隐藏
  329. setCompVisible(comp: DesignComp) {
  330. comp.layout.visible = comp.layout.visible === false ? true : false;
  331. },
  332. // 清除组件变换
  333. clearCompTransform(comp: DesignComp) {
  334. comp.layout.margin = "";
  335. comp.layout.transform = undefined;
  336. },
  337. // 设置组件锁定状态
  338. setCompLock(comp: DesignComp) {
  339. console.log(comp);
  340. },
  341. // 设置组件层级
  342. setCompLayer(comp: DesignComp, offset: number) {
  343. comp.layout.zIndex = Math.min(
  344. Math.max((comp.layout.zIndex || 0) + offset, 0),
  345. 99
  346. );
  347. },
  348. // 宽度铺满
  349. fullCompWidth(comp: DesignComp) {
  350. comp.layout.size || (comp.layout.size = []);
  351. comp.layout.size[0] = 750;
  352. },
  353. //
  354. setCompAlign(comp: DesignComp, align: string) {
  355. comp.layout.alignSelf = align;
  356. if (comp.layout.transform?.x) {
  357. comp.layout.transform.x = 0;
  358. }
  359. },
  360. // 开启组合模式
  361. enableGroupMode() {
  362. this.store.setGroupIds(
  363. this.store.currCompId ? [this.store.currCompId] : []
  364. );
  365. this.store.setGroupMode(true);
  366. },
  367. // 关闭组合模式
  368. async disableGroupMode() {
  369. const groupId = await this.controls.transferCtrl.groupCtrl.combineGroup();
  370. if (groupId) {
  371. this.store.setCurrComp(groupId);
  372. }
  373. this.store.setGroupIds([]);
  374. this.store.setGroupMode(false);
  375. },
  376. // 取消打组
  377. cancelGroupComps(groupComp: DesignComp) {
  378. this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
  379. this.store.setCurrComp(groupComp.children.default?.[0] as string);
  380. },
  381. handleSelectMoving(key: string) {
  382. if (this.store.selected.length < 1) return;
  383. let x = 0,
  384. y = 0;
  385. switch (key) {
  386. case "left":
  387. x = -1;
  388. break;
  389. case "right":
  390. x = 1;
  391. break;
  392. case "up":
  393. y = -1;
  394. break;
  395. case "down":
  396. y = 1;
  397. break;
  398. }
  399. this.controls.selectCtrl.translate(x * 0.5, y * 0.5);
  400. this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
  401. },
  402. // clickFrameToDesign 点击模板到组件
  403. async clickFrameToDesign(record) {
  404. const res = await queenApi.showConfirm({
  405. title: "",
  406. content: "要替换正在编辑的内容?",
  407. });
  408. if (!res) return;
  409. const frameData = await this.https.getDesignDetail(record._id, {
  410. isSys: true,
  411. });
  412. const { compMap, content, desc, thumbnail, title } = frameData.result;
  413. const designData = {
  414. ...this.store.designData,
  415. compMap,
  416. content,
  417. desc,
  418. thumbnail,
  419. title,
  420. };
  421. this.actions.selectObjs([]);
  422. this.store.setCurrComp("root");
  423. this.store.setDesignData(designData);
  424. this.store.currStreamCardId = this.store.streamCardIds[0];
  425. },
  426. });