text bus

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

@@ -103,7 +103,7 @@ export const Component = defineComponent({
                   class={"w-1/1 h-1/1 object-cover"}
                   style={styleObj as any}
                   src={
-                    value.url.startsWith("data:image/png")
+                    value.url?.startsWith("data:image/png")
                       ? value.url
                       : value.url + "?editMode=" + store.isEditMode
                   }

src/modules/editor/components/CompUI/basicUI/Text/TextToolForm.tsx

@@ -1,10 +1,10 @@
 import { useEditor } from "@/modules/editor";
+import { designSizeToPx } from "@/modules/editor/module/utils";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-
 import { css } from "@linaria/core";
-import { defineComponent, toRaw, watch, nextTick} from "vue";
-import { any } from "vue-types";
 import { Divider } from "ant-design-vue";
+import { defineComponent, nextTick, toRaw, watch } from "vue";
+import { any } from "vue-types";
 import {
   AlignComp,
   FontFamily,
@@ -12,19 +12,18 @@ import {
   FontStyleWapper,
   LetterSpacingComp,
   LineHeightComp,
-  TextToolItem,
   TextColor,
   TextStroke,
+  TextToolItem,
 } from "./TextToolComp";
-import { history } from "@/modules/editor/objects/DesignTemp/factory";
-import { designSizeToPx } from "@/modules/editor/module/utils";
 
 export const TextToolForm = defineComponent({
   props: {
     component: any<DesignComp>().isRequired,
   },
-  setup(props) {
-    const { controls, store , helper} = useEditor();
+  setup() {
+    const { controls, store, helper } = useEditor();
+    const gizmo = controls.selectCtrl.gizmo;
 
     const changeVal = (e: { dataIndex: string; value: any }) => {
       let editor = controls.textEditorCtrl.state.currEditor;
@@ -34,7 +33,7 @@ export const TextToolForm = defineComponent({
       }
       editor = toRaw(editor);
       editor.execute(e.dataIndex, e.value);
-      console.log("change", e);
+      // console.log("change", e);
       setTimeout(() => {
         const selection = window.getSelection();
         selection?.removeAllRanges();
@@ -47,7 +46,6 @@ export const TextToolForm = defineComponent({
       () => {
         const editor = toRaw(controls.textEditorCtrl.state.currEditor);
         if (!editor && store.currComp.compKey == "Text") {
-   
           nextTick(() => {
             const element: HTMLElement | null = document.querySelector(
               `#editor_${store.currComp.id}`
@@ -56,18 +54,28 @@ export const TextToolForm = defineComponent({
               return;
             }
             const h = helper.pxToDesignSize(element.clientHeight);
-            const size :any = store.currComp.layout.size.slice(0);
+            const size: any = store.currComp.layout.size.slice(0);
             size[1] = h;
 
-            console.log("xxxxxxxxxxxxxxxxx");
-
-            controls.selectCtrl.gizmo.selected[0].setSize(designSizeToPx(size[0]), designSizeToPx(h))
-
+            // 组内text  更新组高度
+            if (
+              gizmo.selected.length == 1 &&
+              gizmo.selected[0].comp.compKey == "Group"
+            ) {
+              store.currComp.setSize(size[0], h);
+              helper.updateGroups(store.currComp.id);
+            } else {
+              controls.selectCtrl.gizmo.selected[0]?.setSize(
+                designSizeToPx(size[0]),
+                designSizeToPx(h)
+              );
+            }
             helper.extendStreamCard(controls.pageCtrl.currStreamCardId);
           });
         }
       }
     );
+
     return () => {
       return (
         <div id="text_toolform">

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -9,6 +9,7 @@ import { useCompData } from "../../defines/hook";
 import { CompTextObj } from ".";
 import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
 import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 export const Component = defineComponent({
   props: {
@@ -16,7 +17,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData<CompTextObj>(props.compId);
-    const { store, actions, controls , helper} = useEditor();
+    const { store, actions, controls, helper } = useEditor();
 
     const state = reactive({
       editableId: "",
@@ -34,18 +35,17 @@ export const Component = defineComponent({
     }
 
     return () => {
-      
-       //样式的scale转 width
-       const m = Matrix.createFromMatrixStr(comp.layout.transformMatrix);
-       const t = new Transform();
-       t.setFromMatrix(m);
-       m.ty = 0
-       m.tx = 0
-       m.rotate( -m.getRotate() )
+      //样式的scale转 width
+      const m = Matrix.createFromMatrixStr(comp.layout.transformMatrix);
+      const t = new Transform();
+      t.setFromMatrix(m);
+      m.ty = 0;
+      m.tx = 0;
+      m.rotate(-m.getRotate());
 
       const [w, h] = comp.layout.size;
-     
-      const currWidth = w * t.scale.x
+
+      const currWidth = w * t.scale.x;
       const textWidth = currWidth / t.scale.y;
 
       const width = helper.designToNaturalSize(currWidth);
@@ -55,40 +55,50 @@ export const Component = defineComponent({
       //m x m1 = m
 
       return (
-      <View
-        class={[textStyle]}
-        compId={props.compId}
-        onDblclick={() => {
-          if (store.isEditMode) {
-            state.editableId = "" + Date.now();
-          }
-        }}
-      >
-
-      <div style={{width: width, transform:`${m.getMatrixStr()}`, transformOrigin: "0 0"}}>
-        <div  style={{width:textWidthSize, transform:`scale(${t.scale.y})`, transformOrigin: "0 0"}}>
-          {state.editableId ? (
-            <EditorComp
-              compId={props.compId}
-              key={state.editableId}
-              onLost={() => {
-                state.editableId = "";
-                controls.textEditorCtrl.setCurrEditor(null);
-              }}
-            />
-          ) : (
+        <View
+          class={[textStyle]}
+          compId={props.compId}
+          onDblclick={() => {
+            if (store.isEditMode) {
+              state.editableId = "" + Date.now();
+            }
+          }}
+        >
+          <div
+            style={{
+              width: width,
+              transform: `${m.getMatrixStr()}`,
+              transformOrigin: "0 0",
+            }}
+          >
             <div
-              innerHTML={comp.value.text}
-              id={`editor_${props.compId}`}
-              class={[textStyle, store.isEditMode && `pointer-events-none`]}
-            />
-          )}
-        
+              style={{
+                width: textWidthSize,
+                transform: `scale(${t.scale.y})`,
+                transformOrigin: "0 0",
+              }}
+            >
+              {state.editableId ? (
+                <EditorComp
+                  compId={props.compId}
+                  key={state.editableId}
+                  onLost={() => {
+                    state.editableId = "";
+                    controls.textEditorCtrl.setCurrEditor(null);
+                  }}
+                />
+              ) : (
+                <div
+                  innerHTML={comp.value.text}
+                  id={`editor_${props.compId}`}
+                  class={[textStyle, store.isEditMode && `pointer-events-none`]}
+                />
+              )}
+            </div>
           </div>
-        </div>
-        
-      </View>
-    )};
+        </View>
+      );
+    };
   },
 });
 
@@ -123,7 +133,7 @@ const EditorComp = defineComponent({
       const isChange = Math.abs(preHeight.value - h) > 1;
       preHeight.value = h;
       if (isChange) {
-        const size :any = comp.layout.size.slice(0);
+        const size: any = comp.layout.size.slice(0);
         size[1] = h;
         comp.layout.size = size;
         helper.extendStreamCard(page.currStreamCardId);
@@ -191,6 +201,7 @@ const EditorComp = defineComponent({
         document.removeEventListener("mousedown", blur, { capture: true });
       };
     }
+
     const initEditor = async () => {
       // const dom: HTMLElement | null = document.querySelector(
       //   `#editor_${props.compId}`
@@ -223,8 +234,22 @@ const EditorComp = defineComponent({
             preHeight.value = h;
 
             if (isChange) {
-              const size: any =  comp.layout.size.slice(0);
-              gizmo.selected[0].setSize(helper.designSizeToPx(size[0]), helper.designSizeToPx(h))
+              const size: any = comp.layout.size.slice(0);
+              if (
+                gizmo.selected.length == 1 &&
+                gizmo.selected[0].comp.compKey == "Group"
+              ) {
+                // 组内文本组件，更新组高度
+                const currentComp = helper.findComp(props.compId);
+                if (!currentComp) return;
+                currentComp.setSize(size[0], h);
+                helper.updateGroups(props.compId);
+              } else {
+                gizmo.selected[0].setSize(
+                  helper.designSizeToPx(size[0]),
+                  helper.designSizeToPx(h)
+                );
+              }
               helper.extendStreamCard(page.currStreamCardId);
             }
           });

src/modules/editor/components/CompUI/customUI/Covers/Cover2/component.tsx

@@ -12,6 +12,7 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { children } = useCompData<CompCover2Obj>(props.compId);
+    if (!children.default) return () => <div></div>;
 
     return () => (
       <div class={cx(rootStyles, "overflow-hidden")}>

src/modules/editor/module/helpers/index.ts

@@ -261,6 +261,41 @@ export const helpers = EditorModule.helper({
     return maxH;
   },
 
+  updateGroups(compId: string) {
+    const compTrees = this.helper.getCompTrees(compId);
+    let n = compTrees.length;
+    while (n > 0) {
+      n--;
+      if (compTrees[n].compKey == "Group") {
+        // 计算高度
+        this.helper.updateGroupH(compTrees[n]);
+      }
+    }
+  },
+
+  updateGroupH(comp: DesignComp) {
+    const gizmo = this.controls.selectCtrl.gizmo;
+    const childs = comp.children.default || [];
+    let maxH = 0,
+      n = childs.length;
+    while (n--) {
+      const c = childs[n];
+      const aabb = this.helper.getCardCompBound(c);
+      maxH = Math.max(maxH, aabb.y + aabb.h);
+    }
+    maxH = this.helper.pxToDesignSize(maxH);
+    const size: any = [comp.layout.size[0], maxH];
+
+    if (gizmo.selected[0].comp.id == comp.id) {
+      gizmo.selected[0].setSize(
+        this.helper.designSizeToPx(size[0]),
+        this.helper.designSizeToPx(maxH)
+      );
+    } else {
+      comp.layout.setSize(size);
+    }
+  },
+
   getCardNextPosY(cardId: string, itemWidth: number) {
     let yOffset = 0;
     if (cardId != this.controls.pageCtrl.state.currStreamCardId) {

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -104,7 +104,7 @@ export function createCompStyle(
   //   console.log(comp.value.text, comp.layout.transformMatrix)
   // }
 
-  if (comp.compKey == "Text") {
+  if (comp.compKey == "Text" || comp.compKey == "Group") {
     if (layout.transformMatrix) {
       style.transform = layout.transformMatrix;
       style.transformOrigin = "0 0";