update

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -11,7 +11,19 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
 
-    const { store, controls } = useEditor();
+    const { actions, helper, store, controls } = useEditor();
+
+    function setImageSize(url: string) {
+      if (!helper.isStreamCardChild(props.compId)) return;
+
+      const temImg = new Image();
+      temImg.src = url;
+
+      temImg.onload = function () {
+        comp.setH(comp.getW() / (temImg.width / temImg.height));
+        actions.onCompLayoutUpdated(comp);
+      };
+    }
 
     async function changeVal() {
       try {
@@ -22,6 +34,7 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
+        setImageSize(url);
       } catch (error) {
         console.log(error);
       }

src/modules/editor/controllers/CompUICtrl/index.ts

@@ -30,6 +30,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
     components: new Map<string, CompItem>(),
   });
   init() {
+    this.state.components.clear();
     this.initDefaultUI();
     if (this.store.isEditMode) {
       this.initUserUI();
@@ -48,7 +49,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
       });
     });
   }
-  async initUserUI() {
+  private async initUserUI() {
     const listCtrl = new PageListController<
       { _id: string; title: string; thumbnail: string },
       any

src/modules/editor/module/actions/edit.ts

@@ -16,26 +16,33 @@ export const editActions = EditorModule.action({
       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);
+    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);
-
   },
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
-
     //点击默认都创建一个容器
     //创建容器
-    const isCreatCard =  compKey != "Text" && compKey != "Image" && compKey != "Video" && compKey != "Web3D";
+    const isCreatCard =
+      compKey != "Text" &&
+      compKey != "Image" &&
+      compKey != "Video" &&
+      compKey != "Web3D";
 
     let yOffset = 0;
     if (this.store.currCompId != this.store.currStreamCardId && !isCreatCard) {
       const bound = this.helper.getCardCompBound(this.store.currCompId);
-        yOffset = bound.y + bound.h
+      yOffset = bound.y + bound.h;
     }
 
-    if (isCreatCard) { //先创建卡片
-      const index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+    if (isCreatCard) {
+      //先创建卡片
+      const index =
+        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent("Container", index);
       this.actions.pickComp(compId);
     }
@@ -45,7 +52,9 @@ export const editActions = EditorModule.action({
 
     //添加组件到当前选中的组件下面
     const selectCtrl = this.controls.selectCtrl;
-    let xOffset = this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2);
+    let xOffset = this.helper.designSizeToPx(
+      375 - (currComp.layout.size?.[0] || 750) / 2
+    );
     selectCtrl.translate(xOffset, yOffset);
     selectCtrl.selecteObjs([]);
 
@@ -53,8 +62,6 @@ export const editActions = EditorModule.action({
     this.helper.extendStreamCard(this.store.currStreamCardId);
   },
 
-  
-
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
     if (!this.store.currStreamCardId) {
@@ -73,10 +80,10 @@ export const editActions = EditorModule.action({
       compKey,
       this.store.currStreamCard
     );
-    const addedComp = this.store.compMap[compId]
+    const addedComp = this.store.compMap[compId];
     this.actions.setCompPositionFloat(addedComp);
 
-    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)])
+    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)]);
   },
 
   // 切换当前组件
@@ -199,7 +206,6 @@ export const editActions = EditorModule.action({
       await this.controls.uploader.uploadBlobs(data);
       await this.https.createComp(data);
       queenApi.messageSuccess("保存成功");
-      this.controls.compUICtrl.initUserUI();
     } catch (error: any) {
       throw Exception.error(error.toString());
     } finally {

src/modules/editor/objects/Toolbars/default.ts

@@ -141,8 +141,9 @@ export const toolbars = createToolbars({
     getVisible(comp) {
       return this.helper.isShowSaveComp(comp);
     },
-    onClick(comp) {
-      this.actions.saveAsComp(comp);
+    async onClick(comp) {
+      await this.actions.saveAsComp(comp);
+      this.controls.compUICtrl.init();
     },
   },
   // 取消打组