import { cloneDeep, pick } from "lodash"; import { Exception, queenApi } from "queenjs"; import { EditorModule } from ".."; import { ScreenshotCtrl } from "../../controllers/ScreenshotCtrl"; import { CompObject } from "../../controllers/SelectCtrl/compObj"; import { DesignComp } from "../../objects/DesignTemp/DesignComp"; import { ICompKeys, Layout } from "../../typings"; import CompSave from "../../components/CompSave"; export const editActions = EditorModule.action({ pickComp(compId: string, selected = true) { if (compId == "") { //空的时候,就选择根页面 compId = "root"; } const selectCardChild = (id: string) => { const paths = this.helper.getCompTrees(id); const cardChilds = paths[2]; if (cardChilds) { this.actions.selectObjs([cardChilds.id]); } else { this.actions.selectObjs([]); if (id != "root") { this.store.setCurrComp(this.store.currStreamCardId); } } }; if (this.store.currCompId == compId) { return; } this.store.setCurrComp(compId); if (selected) { selectCardChild(compId); } }, // 通过点击添加组件到画布 async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) { if (!this.store.currStreamCardId) { queenApi.messageError("请先选中一个卡片"); return; } //点击默认都创建一个容器 //创建容器 const isCreatCard = compKey != "Text" && compKey != "Image" && compKey != "Rectage" && compKey != "Line" && compKey != "Arc" && compKey != "Triangle" && compKey != "Ellipse" && compKey != "Polygon" && compKey != "Curve" let yOffset = 0; if ( this.store.currCompId != this.store.currStreamCardId && !isCreatCard && this.store.currCompId != "root" ) { const bound = this.helper.getCardCompBound(this.store.currCompId); yOffset = bound.y + bound.h; } let currCard = this.store.currStreamCard; if (isCreatCard) { //先创建卡片 const currCardIndex = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1; const compId = await this.store.insertDesignContent( "Container", currCardIndex ); currCard = this.helper.findComp(compId) as DesignComp; } const compId = await this.store.insertCompContainer(compKey, currCard); const addedComp = this.store.compMap[compId]; addedComp.layout.position = "absolute"; const currComp = this.helper.findComp(compId) as DesignComp; cb?.(currComp); //添加组件到当前选中的组件下面 let xOffset = this.helper.designSizeToPx( 375 - (currComp.layout.size?.[0] || 750) / 2 ); const obj = new CompObject(currComp); //没有选中组件添加到当前卡片最后 const children = currCard.children.default || []; if (yOffset == 0 && children.length >= 2) { const prevCompIndex = children.indexOf(compId) - 1; const bound = this.helper.getCardCompBound(children[prevCompIndex]); yOffset = bound.y + bound.h; } obj.worldTransform.translate(xOffset, yOffset); currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr(); this.actions.pickComp(compId); this.helper.extendStreamCard(currCard.id); if (compKey == "Text") { this.actions.textFocus(compId, true); } this.controls.cropCtrl.close(); }, // 通过拖拽添加组件到画布 async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) { await this.actions.addCompToDesign(compKey); const cardPoints = this.helper.getPointOffsetWith( event, this.store.currStreamCard.$el ); const { currComp } = this.store; let selCtrl = this.controls.selectCtrl; selCtrl.translate( this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2), cardPoints.y ); this.helper.extendStreamCard(this.store.currStreamCardId); if (compKey == "Text") { this.actions.selectObjs([]); this.actions.textFocus(currComp.id, true); } this.controls.cropCtrl.close(); }, async selectObjs(ids: string[]) { this.store.selected = ids; this.store.selectId = ids.length > 1 ? Date.now() + "" : ""; }, // 添加组件到画布 async addCompToDesign(compKey: ICompKeys, index?: number) { if (!this.store.currStreamCardId) { //必须选中一个streamCard return; } if (compKey == "Container") { // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1; const compId = await this.store.insertDesignContent(compKey, index); this.actions.pickComp(compId); return; } const compId = await this.store.insertCompContainer( compKey, this.store.currStreamCard ); const addedComp = this.store.compMap[compId]; this.actions.setCompPositionFloat(addedComp); this.actions.pickComp(compId); }, // 切换当前组件 // pickComp(compId: string) { // const { store, helper } = this; // // 组合模式下,切换组件 // // if (store.currCompId && store.groupModeStatus) { // // const enableGroupIds = helper // // .findParentComp(compId) // // ?.getChildIds() as string[]; // // const comps = helper.getCompTrees(compId); // // while (comps.length) { // // const comp = comps.pop() as DesignComp; // // const index = store.groupIds.indexOf(comp.id); // // if (index >= 0) { // // const groupIds = [...store.groupIds]; // // groupIds.splice(index, 1); // // store.setGroupIds(groupIds); // // } else if (enableGroupIds.includes(comp.id)) { // // store.groupIds.push(comp.id); // // return; // // } // // } // // return; // // } // // let nextCompId = compId; // // if (this.store.isEditPage) { // // const comps = this.helper.getCompTrees(compId); // // nextCompId = comps[1].id; // // } // if (this.store.currCompId == compId) { // return; // } // if (this.store.currComp.compKey == "Text") { // this.store.setTextEditingState(false); // } // this.store.setCurrComp(compId); // if (this.store.currCompId == this.store.currStreamCardId) { // this.controls.transferCtrl.destroy(); // } // }, // 切换到父组件 pickParentComp(compId: string) { const parentComp = this.helper.findParentComp(compId); parentComp && this.store.setCurrComp(parentComp.id); }, // 删除组件 removeSelectComps() { const selected = this.store.selected.slice(0); this.actions.selectObjs([]); let n = selected.length; while (n--) { this.actions.removeComp(selected[n]); } }, // 删除组件 removeComp(compId: string) { if (this.helper.isCompCanDelete(compId)) { if (this.helper.isStreamCard(compId)) { this.actions.removeStreamCard(compId); return; } const cardid = this.store.currStreamCardId; if (compId === this.store.currCompId) { this.store.setCurrComp(this.store.currStreamCardId); } this.store.deleteComp(compId); this.helper.extendStreamCard(cardid); this.actions.selectObjs([]); } }, async removeStreamCard(compId: string) { await queenApi.showConfirm({ title: "删除", content: "确认删除当前内容?" }); // if (this.store.streamCardIds.length < 2) { // queenApi.messageError("") // return; // } let nextCard = this.store.currStreamCardId; if (compId == this.store.currStreamCardId) { const i = this.store.streamCardIds.indexOf(compId); nextCard = this.store.streamCardIds[i + 1]; if (!nextCard) { nextCard = this.store.streamCardIds[i - 1]; } } this.controls.selectCtrl.selecteObjs([]); this.store.deleteComp(compId); this.store.setCurrComp(nextCard); }, // 移动组件顺序 moveComp(selIndex: number, targetIndex: number) { if (selIndex === targetIndex) return; this.store.moveComp(selIndex, targetIndex); }, // 保存容器为组件 async saveAsComp(comp: DesignComp) { try { const CompSave = this.components.CompSave as any; let title = ""; let type = "comp"; try { const ret:any = await queenApi.dialog(, {width:"300px", title: "保存到我的"}); if (!ret) { return; } title = ret.title; type = ret.type; } catch (error) { return; } console.log( title, type); // 组件封面 const blob = await new ScreenshotCtrl().snap({ element: comp.$el, }); const thumbnail = URL.createObjectURL(blob); // const title = await queenApi.showInput({ // title: "保存到我的", // defaultValue: this.controls.compUICtrl.state.components.get( // comp.compKey // )?.name, // }); const data = { title, type, thumbnail, compMap: cloneDeep(this.store.designData.compMap), }; this.helper.clearUnusedComps(data.compMap, comp.id); data.compMap.root = data.compMap[comp.id]; data.compMap.root.id = "root"; delete data.compMap[comp.id]; queenApi.showLoading("保存中"); await this.controls.uploader.uploadBlobs(data); await this.https.createComp(data); queenApi.messageSuccess("保存成功"); } catch (error: any) { throw Exception.error(error.toString()); } finally { queenApi.hideLoading(); } }, // 保存项目 async saveDesign() { try { // 清除无用组件 this.helper.clearUnusedComps(this.store.designData.compMap); // 封面截屏 if (!this.store.designData.thumbnail) { await this.actions.updateThumbnailByScreenshot(); } queenApi.showLoading("保存中"); await this.controls.uploader.uploadBlobs(this.store.designData); await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"]( this.store.designData ); queenApi.messageSuccess("保存成功"); } catch (error: any) { throw Exception.error(error.toString()); } finally { queenApi.hideLoading(); } }, // 截屏保存封面 async updateThumbnailByScreenshot(autoSave?: boolean) { try { const rootComp = this.helper.findRootComp(); if (!rootComp) return; queenApi.showLoading("截屏中"); const blob = await new ScreenshotCtrl().snap({ element: rootComp.$el, ratio: this.store.isEditComp ? 0 : 1, }); const thumbnail = URL.createObjectURL(blob); this.store.setDesignThumbnail(thumbnail); if (autoSave) { await this.controls.uploader.uploadBlobs(this.store.designData); await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"]( pick(this.store.designData, ["_id", "thumbnail"]) ); queenApi.messageSuccess("保存成功"); } } catch (error: any) { throw Exception.error(error.toString()); } finally { queenApi.hideLoading(); } }, // 设置组件变换 setCompTransform(comp: DesignComp, transform: Layout["transform"]) { if (!comp) return; comp.layout.transform = transform; console.log(comp); }, // 设置组件变换 setCompTransformMatrix(comp: DesignComp, transformMatrix: string) { if (!comp) return; comp.layout.transformMatrix = transformMatrix; }, // 设置组件浮动 setCompPositionFloat(comp: DesignComp) { comp.layout.position = "absolute"; }, // 设置组件浮动 setCompPosition(comp: DesignComp) { comp.layout.position = comp.layout.position === "absolute" ? undefined : "absolute"; }, // 设置组件显示隐藏 setCompVisible(comp: DesignComp) { comp.layout.visible = comp.layout.visible === false ? true : false; }, // 清除组件变换 clearCompTransform(comp: DesignComp) { comp.layout.margin = ""; comp.layout.transform = undefined; }, // 设置组件锁定状态 setCompLock(comp: DesignComp) { console.log(comp); }, // 设置组件层级 setCompLayer(comp: DesignComp, offset: number) { comp.layout.zIndex = Math.min( Math.max((comp.layout.zIndex || 0) + offset, 0), 99 ); }, // 宽度铺满 fullCompWidth(comp: DesignComp) { comp.layout.size || (comp.layout.size = []); comp.layout.size[0] = 750; }, // setCompAlign(comp: DesignComp, align: string) { comp.layout.alignSelf = align; if (comp.layout.transform?.x) { comp.layout.transform.x = 0; } }, // 开启组合模式 enableGroupMode() { this.store.setGroupIds( this.store.currCompId ? [this.store.currCompId] : [] ); this.store.setGroupMode(true); }, // 关闭组合模式 async disableGroupMode() { const groupId = await this.controls.transferCtrl.groupCtrl.combineGroup(); if (groupId) { this.store.setCurrComp(groupId); } this.store.setGroupIds([]); this.store.setGroupMode(false); }, // 取消打组 cancelGroupComps(groupComp: DesignComp) { this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp); this.store.setCurrComp(groupComp.children.default?.[0] as string); }, handleSelectMoving(key: string) { if (this.store.selected.length < 1) return; let x = 0, y = 0; switch (key) { case "left": x = -1; break; case "right": x = 1; break; case "up": y = -1; break; case "down": y = 1; break; } this.controls.selectCtrl.translate(x * 0.5, y * 0.5); this.controls.selectCtrl.assistCtrl?.flashDrawCardDists(); }, // clickFrameToDesign 点击模板到组件 async clickFrameToDesign(record) { const res = await queenApi.showConfirm({ title: "", content: "要替换正在编辑的内容?", }); if (!res) return; const frameData = await this.https.getDesignDetail(record._id, { isSys: true, }); const { compMap, content, desc, thumbnail, title } = frameData.result; const designData = { ...this.store.designData, compMap, content, desc, thumbnail, title, }; this.actions.selectObjs([]); this.store.setCurrComp("root"); this.store.setDesignData(designData); this.store.currStreamCardId = this.store.streamCardIds[0]; }, });