Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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

@@ -78,8 +78,8 @@ export const Component = defineComponent({
               const Comp =
                 controls.compUICtrl.state.components.get(compItem?.compKey)
                   ?.Component || CompUI.Container.Component;
-
-              return <Comp key={compItem.id + index} compId={compItem.id} />;
+              if (!compItem) return;
+              return <Comp key={compItem?.id + index} compId={compItem?.id} />;
             })}
           </View>
         </div>

src/modules/editor/components/Viewport/Content/index.tsx

@@ -175,7 +175,7 @@ export default defineUI({
                               return false;
                             }}
                             onDrop={(e: any) => {
-                              debugger;
+                              // debugger;
                               if (e.payload) {
                                 console.log("xx a");
                                 actions.addCompToDesign(

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -15,23 +15,23 @@ import { CompList } from "./CompList";
 import Menu from "./Menu";
 import ListFilter from "./ListFilter";
 
-const compList = [
-  // "Card2",
-  // "Card3",
-  // "Card5",
-  // "CardList",
-  // "Cards11",
-  // "Cards12",
-  // "Cards13",
-  // "Cards14",
-  // "Cards15",
-  "Cover",
-  "Cover2",
-  // "Text1",
-  // "Title1",
-  // "Title2",
-  // "Title3",
-];
+// const compList = [
+// "Card2",
+// "Card3",
+// "Card5",
+// "CardList",
+// "Cards11",
+// "Cards12",
+// "Cards13",
+// "Cards14",
+// "Cards15",
+// "Cover",
+// "Cover2",
+// "Text1",
+// "Title1",
+// "Title2",
+// "Title3",
+// ];
 
 export default defineUI({
   setup() {
@@ -41,16 +41,16 @@ export default defineUI({
     const { compUICtrl } = editor.controls;
     sysCompListCtrl.loadPage(1);
 
-    const state = useReactive(() => ({
-      currComps() {
-        return Array.from(compUICtrl.state.components.values()).filter(
-          (item) => "senior" === item.compType
-        );
-      },
-      cusComps() {
-        return state.currComps.filter((d) => compList.includes(d.compKey));
-      },
-    }));
+    // const state = useReactive(() => ({
+    //   currComps() {
+    //     return Array.from(compUICtrl.state.components.values()).filter(
+    //       (item) => "senior" === item.compType
+    //     );
+    //   },
+    //   cusComps() {
+    //     return state.currComps.filter((d) => compList.includes(d.compKey));
+    //   },
+    // }));
     const filterChange = (v: any) => {
       const query = sysCompListCtrl.state.query || {};
       sysCompListCtrl.state.query = {
@@ -70,7 +70,7 @@ export default defineUI({
             onChange={filterChange}
           />
           <CompList dataSource={dataSource} isSys={true} />
-          <Comp components={state.cusComps} taggable={false} class="mt-10px" />
+          {/* <Comp components={state.cusComps} taggable={false} class="mt-10px" /> */}
           {dataSource.length == 0 ? null : (
             <Loadmore
               class="mt-20px"
@@ -85,103 +85,103 @@ export default defineUI({
   },
 });
 
-const Comp = defineUI({
-  props: {
-    components: any<
-      {
-        compKey: string;
-        name: string;
-        thumbnail: string;
-        published?: boolean;
-        createTime?: string;
-      }[]
-    >().isRequired,
+// const Comp = defineUI({
+//   props: {
+//     components: any<
+//       {
+//         compKey: string;
+//         name: string;
+//         thumbnail: string;
+//         published?: boolean;
+//         createTime?: string;
+//       }[]
+//     >().isRequired,
 
-    taggable: bool().def(false),
-  },
-  setup(props) {
-    const editor = useEditor();
-    const auth = useAuth();
-    const resource = useResource();
-    return () => {
-      //@ts-ignore
-      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
+//     taggable: bool().def(false),
+//   },
+//   setup(props) {
+//     const editor = useEditor();
+//     const auth = useAuth();
+//     const resource = useResource();
+//     return () => {
+//       //@ts-ignore
+//       const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
 
-      if (props.components.length == 0) return <Empty class="pt-150px" />;
-      return (
-        <Container
-          class="space-y-10px scrollbar"
-          behaviour="copy"
-          group-name="canvas"
-          animation-duration={0}
-          get-child-payload={(index: number) => {
-            return props.components[index].compKey;
-          }}
-        >
-          {props.components.map((item) => {
-            const items = ["删除"];
+//       if (props.components.length == 0) return <Empty class="pt-150px" />;
+//       return (
+//         <Container
+//           class="space-y-10px scrollbar"
+//           behaviour="copy"
+//           group-name="canvas"
+//           animation-duration={0}
+//           get-child-payload={(index: number) => {
+//             return props.components[index].compKey;
+//           }}
+//         >
+//           {props.components.map((item) => {
+//             const items = ["删除"];
 
-            if (isSys) {
-              item.published ? items.push("取消发布") : items.push("发布平台");
-            }
+//             if (isSys) {
+//               item.published ? items.push("取消发布") : items.push("发布平台");
+//             }
 
-            return (
-              <Draggable>
-                <div
-                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
-                  key={item.compKey}
-                  title={item.name}
-                  onClick={() =>
-                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
-                  }
-                >
-                  <Image
-                    class="w-full rounded pointer-events-none"
-                    src={item.thumbnail}
-                    size={240}
-                  />
+//             return (
+//               <Draggable>
+//                 <div
+//                   class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
+//                   key={item.compKey}
+//                   title={item.name}
+//                   onClick={() =>
+//                     editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+//                   }
+//                 >
+//                   <Image
+//                     class="w-full rounded pointer-events-none"
+//                     src={item.thumbnail}
+//                     size={240}
+//                   />
 
-                  {isSys && props.taggable && (
-                    <Tag
-                      color={item.published ? "green" : "#E88B00"}
-                      // color="rgba(0, 0, 0, 0.4)"
-                      class="absolute top-0 left-0 z-1 !rounded-none"
-                    >
-                      {item.published ? "已发布" : "未发布"}
-                    </Tag>
-                  )}
+//                   {isSys && props.taggable && (
+//                     <Tag
+//                       color={item.published ? "green" : "#E88B00"}
+//                       // color="rgba(0, 0, 0, 0.4)"
+//                       class="absolute top-0 left-0 z-1 !rounded-none"
+//                     >
+//                       {item.published ? "已发布" : "未发布"}
+//                     </Tag>
+//                   )}
 
-                  {props.taggable && (
-                    <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
-                      <div class="flex-1 w-0">
-                        {/* <div class="text-white text-bold truncate">{record.title}</div> */}
-                        <div class="flex items-center text-opacity-60 text-white text-12px">
-                          {dayjs(item.createTime).format("YYYY.MM.DD")}
-                        </div>
-                      </div>
-                      <Menu
-                        items={items}
-                        onMenu={async (name) => {
-                          console.log("name", name);
-                          if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item);
-                            // editor.controls.compUICtrl.
-                            queenApi.messageSuccess("删除成功!");
-                            return;
-                          }
-                          const pub = name == "发布平台";
-                          await resource.actions.publishFrame(item, pub);
-                          item.published = pub;
-                        }}
-                      />
-                    </div>
-                  )}
-                </div>
-              </Draggable>
-            );
-          })}
-        </Container>
-      );
-    };
-  },
-});
+//                   {props.taggable && (
+//                     <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
+//                       <div class="flex-1 w-0">
+//                         {/* <div class="text-white text-bold truncate">{record.title}</div> */}
+//                         <div class="flex items-center text-opacity-60 text-white text-12px">
+//                           {dayjs(item.createTime).format("YYYY.MM.DD")}
+//                         </div>
+//                       </div>
+//                       <Menu
+//                         items={items}
+//                         onMenu={async (name) => {
+//                           console.log("name", name);
+//                           if (name == "删除") {
+//                             await resource.actions.deleteCustomComp(item);
+//                             // editor.controls.compUICtrl.
+//                             queenApi.messageSuccess("删除成功!");
+//                             return;
+//                           }
+//                           const pub = name == "发布平台";
+//                           await resource.actions.publishFrame(item, pub);
+//                           item.published = pub;
+//                         }}
+//                       />
+//                     </div>
+//                   )}
+//                 </div>
+//               </Draggable>
+//             );
+//           })}
+//         </Container>
+//       );
+//     };
+//   },
+// });

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

@@ -32,7 +32,7 @@ export class PageCtrl extends ModuleControl<EditorModule> {
     initEvent() {
 
         const updatePid = (pid:string)=>{
-           const comps = this.compMap[pid].children.default || [];
+           const comps = this.compMap[pid]?.children.default || [];
            comps.forEach(c=>{
                this.setCompPid(c, pid)
                updatePid(c);

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

@@ -230,6 +230,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
          childrs.forEach(item=>{
             newChilds.push(item.id);
             const screenComp = this.helper.findComp(item.id) as DesignComp;
+            if(!screenComp) return
             screenComp.layout.size[0] = item.size[0];
             screenComp.layout.size[1] = item.size[1];
             screenComp.layout.transformMatrix = item.matrix;

src/modules/editor/controllers/SelectCtrl/compObj.ts

@@ -14,6 +14,7 @@ function pxToDesignSize(value: number) {
     return value * 2.0;
 }
 export class CompObject extends DisplayObject {
+    // @ts-ignore
     comp:DesignComp;
     rect = new Rectangle();
 
@@ -31,6 +32,7 @@ export class CompObject extends DisplayObject {
 
     constructor(c:DesignComp, usHistory = false) {
         super();
+        if(!c) return
         this.comp = c;
         
         const wmtx = Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)")
@@ -54,6 +56,7 @@ export class CompObject extends DisplayObject {
             
             if (!inited) {
                 const s:any = [pxToDesignSize(tsf.w), pxToDesignSize(tsf.h)];
+                if(!this.comp.layout.setSize) return
                 this.comp.layout.setSize(s);
                 this.comp.layout.setTransformMatrix(this.worldTransform.getMatrixStr())
             }

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

@@ -134,7 +134,7 @@ export const editActions = EditorModule.action({
     let currCard = page.currStreamCard;
 
     const currComp = createObj({compKey}, false);
-    debugger
+    // debugger
     //@ts-ignore
     const objs :any[] = currComp.children.objs || [];
     if (objs.length > 0) {

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

@@ -5,7 +5,10 @@ import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { createCompStyle, createViewStyles } from "../../objects/DesignTemp/creates/createCompStyle";
+import {
+  createCompStyle,
+  createViewStyles,
+} from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 import { designSizeToPx, pxToDesignSize } from "../utils";
 
@@ -39,7 +42,7 @@ export const helpers = EditorModule.helper({
   isStreamCard(compId: string) {
     return this.controls.pageCtrl.streamCardIds.indexOf(compId) > -1;
   },
-  
+
   isGroupCompChild(compId: string) {
     const comps = this.helper.getCompTrees(compId);
     comps.pop();
@@ -57,7 +60,7 @@ export const helpers = EditorModule.helper({
     }
     const cards = this.controls.pageCtrl.streamCardIds;
     let n = cards.length;
-    const ctrl = this.controls.pageCtrl
+    const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     while (n--) {
       const childs = compMap[cards[n]].children.default || [];
@@ -69,18 +72,18 @@ export const helpers = EditorModule.helper({
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
 
-    if (comp) return this.helper.findComp(this.controls.pageCtrl.compPids[compId]);
+    if (comp)
+      return this.helper.findComp(this.controls.pageCtrl.compPids[compId]);
   },
 
   findRootComp(): DesignComp | undefined {
     return this.controls.pageCtrl.rootPage;
   },
 
-  findCardAllChildren(index:number) {
-  
-    const ctrl = this.controls.pageCtrl
+  findCardAllChildren(index: number) {
+    const ctrl = this.controls.pageCtrl;
     const cardId = ctrl.streamCardIds[index];
-    return ctrl.designData.compMap[cardId].children.default || [] as string[];
+    return ctrl.designData.compMap[cardId].children.default || ([] as string[]);
   },
 
   getCompCard(compId: string) {
@@ -94,8 +97,8 @@ export const helpers = EditorModule.helper({
     let n = paths.length;
     let box = paths[1].$el.getBoundingClientRect();
     const s = this.controls.editorCtrl.state.scale;
-    m.translate((box.left - vx) / s, (box.top - vy)/s);
-    
+    m.translate((box.left - vx) / s, (box.top - vy) / s);
+
     for (let i = 2; i < n - 1; i++) {
       //card开始遍历
       const m1 = new Matrix();
@@ -106,7 +109,7 @@ export const helpers = EditorModule.helper({
   },
 
   getCompTrees(compId: string) {
-    const  ctrl = this.controls.pageCtrl;
+    const ctrl = this.controls.pageCtrl;
 
     const comps: DesignComp[] = [];
     const getParentComp = (compId: string) => {
@@ -120,16 +123,22 @@ export const helpers = EditorModule.helper({
     return comps;
   },
   createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
-    return createCompStyle(this, layout, comp);
+    const parentId = this.controls.pageCtrl.compPids[comp.id];
+    return createCompStyle(this, layout, comp, parentId);
   },
-  createViewStyles(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
+  createViewStyles(
+    layout: Partial<Layout> & { size: any[] },
+    comp: DesignComp
+  ) {
     return createViewStyles(this, layout);
   },
   isCurrComp(compId: string) {
     const gizmo = this.controls.selectCtrl.gizmo;
-    return gizmo.selectedIds.length == 1 && gizmo.selected[0].comp.id === compId;
+    return (
+      gizmo.selectedIds.length == 1 && gizmo.selected[0].comp.id === compId
+    );
   },
-  
+
   isCustomChildComp(comp: DesignComp): boolean {
     const parentComp = this.helper.findParentComp(comp.id);
     if (!parentComp) return false;
@@ -183,20 +192,20 @@ export const helpers = EditorModule.helper({
     };
     getUsedIds(["root"]);
     const ctrl = this.controls.pageCtrl;
-    const compScreenMap = ctrl.designData.compScreenMap
-    const keys = Object.keys(compScreenMap) 
-    keys.forEach(k=>{
-        const card = compScreenMap[k];
-        card.forEach(c=>{
-          c.children.forEach(item=>{
-            const comp = compMap[item.id];
-            if (!comp) return;
-            used.add(item.id);
-            getUsedIds([item.id])
-          })
-        })
-    })
-    
+    const compScreenMap = ctrl.designData.compScreenMap;
+    const keys = Object.keys(compScreenMap);
+    keys.forEach((k) => {
+      const card = compScreenMap[k];
+      card.forEach((c) => {
+        c.children.forEach((item) => {
+          const comp = compMap[item.id];
+          if (!comp) return;
+          used.add(item.id);
+          getUsedIds([item.id]);
+        });
+      });
+    });
+
     Object.keys(compMap).forEach((compId) => {
       if (!used.has(compId)) {
         delete compMap[compId];
@@ -204,7 +213,6 @@ export const helpers = EditorModule.helper({
     });
   },
 
-
   getPointOffsetWith(e: MouseEvent, dom: HTMLElement) {
     const domRect = dom.getBoundingClientRect();
     return {
@@ -214,7 +222,6 @@ export const helpers = EditorModule.helper({
   },
 
   getCardCompBound(compId: string) {
-
     const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     const c = compMap[compId];
@@ -229,14 +236,14 @@ export const helpers = EditorModule.helper({
     const ctrl = this.controls.pageCtrl;
     const compMap = ctrl.designData.compMap;
     const card = compMap[streamCardId];
-    const size:any = card.layout.size.slice(0)
+    const size: any = card.layout.size.slice(0);
     if (this.controls.screenCtrl.isShortPage) {
-      const  h = this.controls.screenCtrl.getCurrScreenHeight();
+      const h = this.controls.screenCtrl.getCurrScreenHeight();
       size[1] = h;
       card.layout.setSize(size);
-       return h;
+      return h;
     }
-    
+
     const childs = card.children.default || [];
     let maxH = 0,
       n = childs.length;
@@ -250,35 +257,35 @@ export const helpers = EditorModule.helper({
       maxH = 200;
     }
     size[1] = maxH;
-    card.layout.setSize(size);    
+    card.layout.setSize(size);
     return maxH;
   },
 
-  getCardNextPosY(cardId:string, itemWidth:number) {
-      let yOffset = 0;
-      if (cardId != this.controls.pageCtrl.state.currStreamCardId) {
-        //const paths = this.helper.getCompTrees(cardId);
-        const bound = this.helper.getCardCompBound(cardId);
+  getCardNextPosY(cardId: string, itemWidth: number) {
+    let yOffset = 0;
+    if (cardId != this.controls.pageCtrl.state.currStreamCardId) {
+      //const paths = this.helper.getCompTrees(cardId);
+      const bound = this.helper.getCardCompBound(cardId);
+      yOffset = bound.y + bound.h;
+    } else {
+      const currCard = this.helper.findComp(cardId) as DesignComp;
+      //没有选中组件添加到当前卡片最后
+      const children = currCard.children.default || [];
+      let prevCompIndex = -1;
+      if (this.store.currCompId != "" && this.store.currCompId != "root") {
+        prevCompIndex = children.indexOf(this.store.currCompId);
+      }
+      if (prevCompIndex != -1) {
+        const bound = this.helper.getCardCompBound(children[prevCompIndex]);
         yOffset = bound.y + bound.h;
-      } else {
-        const currCard = this.helper.findComp(cardId) as DesignComp;
-        //没有选中组件添加到当前卡片最后
-        const children = currCard.children.default || [];
-        let prevCompIndex = -1;
-        if (this.store.currCompId != "" && this.store.currCompId != "root") {
-           prevCompIndex = children.indexOf(this.store.currCompId);
-        }
-        if (prevCompIndex != -1) {
-          const bound = this.helper.getCardCompBound(children[prevCompIndex]);
-          yOffset = bound.y + bound.h;
-        }
       }
-      const w = this.controls.screenCtrl.getCurrScreenWidth();
-      //添加组件到当前选中的组件下面
-      const xOffset:number = this.helper.designSizeToPx(
-        w / 2.0 - (itemWidth || w) / 2
-      );
-      return {x: xOffset, y: yOffset};
+    }
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
+    //添加组件到当前选中的组件下面
+    const xOffset: number = this.helper.designSizeToPx(
+      w / 2.0 - (itemWidth || w) / 2
+    );
+    return { x: xOffset, y: yOffset };
   },
 
   getClientId() {
@@ -296,21 +303,21 @@ export const helpers = EditorModule.helper({
     return clientId;
   },
 
-  loadImage(url ) {
-    return new Promise((res, rej)=>{
-       let t = setTimeout(() => {
+  loadImage(url) {
+    return new Promise((res, rej) => {
+      let t = setTimeout(() => {
         t = null as any;
-        rej("下载超时")
-       }, 1000 * 10);
-       const img = new Image();
-       img.onload = ()=>{
-          res(img);
-          if (t) clearTimeout(t);
-       }
-       img.onerror = (e)=>{
-         rej("下载失败!")
-       }
-       img.src = url;
-    })
-  }
+        rej("下载超时");
+      }, 1000 * 10);
+      const img = new Image();
+      img.onload = () => {
+        res(img);
+        if (t) clearTimeout(t);
+      };
+      img.onerror = (e) => {
+        rej("下载失败!");
+      };
+      img.src = url;
+    });
+  },
 });

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

@@ -53,7 +53,8 @@ export function createViewStyles(
 export function createCompStyle(
   module: EditorModule,
   layout: Layout,
-  comp: DesignComp
+  comp: DesignComp,
+  parentId?: string
 ) {
   const { designToNaturalSize } = module.helper;
   const style: any = {};
@@ -90,12 +91,14 @@ export function createCompStyle(
     style.clipPath = compMasks[layout.mask]?.value || layout.mask;
   }
 
-  const [w, h, sizeOpts] = layout.size;
+  if (layout.size) {
+    const [w, h, sizeOpts] = layout.size;
 
-  style.width = designToNaturalSize(w);
-  style.height = designToNaturalSize(h, {
-    adaptiveH: sizeOpts?.unit === "%",
-  });
+    style.width = designToNaturalSize(w);
+    style.height = designToNaturalSize(h, {
+      adaptiveH: sizeOpts?.unit === "%",
+    });
+  }
 
   // if (comp.compKey == "Text") {
   //   console.log(comp.value.text, comp.layout.transformMatrix)
@@ -125,7 +128,7 @@ export function createCompStyle(
     }
   }
 
-  if (comp.compKey !== "Page") {
+  if (comp.compKey !== "Page" && parentId) {
     style.position = "absolute";
   }
   return style;

src/modules/editor/objects/DesignTemp/factory.ts

@@ -100,7 +100,7 @@ export function createObj( data:any, init = true) :DesignComp {
 
 
         if (compKey == "CardList") { 
-            obj.children.list = data.children.list;
+            obj.children.list = data.children?.list;
         }
         return obj;
     }