udpate

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

@@ -1,30 +1,102 @@
-import { defineComponent } from "vue";
+import { defineComponent, ref, onMounted} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+
 import { useEditor } from "../../../..";
-import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
-import { SelectTransfer } from "../Transfer/select";
+import { useCompData } from "../../defines/createCompHooks";
+import { IconAdd, IconMove } from "@/assets/icons";
+import { IconDelete } from "@queenjs/icons";
+import { css } from "@linaria/core";
+
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
-    const { children } = useCompData(props.compId);
+    const {controls, store} = useEditor();
+    const comp = useCompData(props.compId);
+    const compCtrl = controls.compCtrl;
+
     return () => (
-      <View compId={props.compId}>
-        {children.default?.map((compId) => {
-          const compItem = helper.findComp(compId) as DesignComp;
+      <View compId={props.compId} class={[compCtrl.state.refCurrCardId() == props.compId && CurrCompStyle,]}>
+        {comp.state.refChildren().map((compItem) => {
           const Comp =
             controls.compUICtrl.state.components.get(compItem.compKey)
-              ?.Component || CompUI.Container.Component;
+              ?.Component || CompUI.StreamCard.Component;
 
           return <Comp key={compItem.id} compId={compItem.id} />;
         })}
+        {store.isEditMode && compCtrl.state.refCurrCardId() == props.compId && <Hudop compId={props.compId} />}
+
       </View>
     );
   },
 });
+
+
+export const Hudop = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const {actions, controls } = useEditor();
+    const opref = ref();
+    const compCtrl = controls.compCtrl;
+
+    onMounted(() => {
+      opref.value.editable = "hudop";
+    });
+
+    return () => (
+      <div class={[Style, "shadow"]} ref={opref}>
+        {compCtrl.getRootPage().state.refChildren().length > 1 && (
+          <IconMove
+            class="draganchor"
+            onMousedown={() => actions.pickComp(props.compId)}
+          />
+        )}
+        {compCtrl.getRootPage().state.refChildren().length > 1 && (
+          <IconDelete
+            onClick={(e: any) => {
+              e.stopPropagation();
+              controls.compCtrl.removeStreamCard(props.compId);
+            }}
+          />
+        )}
+        <IconAdd
+          onClick={(e: any) => {
+            e.stopPropagation();
+            controls.compCtrl.addStreamCardAfter(props.compId);
+          }}
+        />
+      </div>
+    );
+  },
+});
+
+const Style = css`
+    position: absolute;
+    top: 0px;
+    left: -46px;
+    background-color: white;
+    flex-direction: column;
+    color: black;
+    display: flex;
+    font-size: 12px;
+    width: 28px;
+    align-items: center;
+    border-radius: 4px;
+    z-index: 997;
+  .inficon {
+    padding: 8px;
+  }
+`
+
+const CurrCompStyle = css`
+  position: relative;
+  outline: 1px solid @inf-primary-color;
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
+  z-index: 998;
+`;

src/modules/editor/components/CompUI/basicUI/Container/index.ts

@@ -1,5 +1,4 @@
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 
 export { Component } from "./component";
 
@@ -8,17 +7,4 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/group.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
-  children: {
-    default: () => [] as string[],
-  },
-  layout: {
-    size: [750, 300],
-    background: {
-      color: "#ffffff",
-    },
-  },
-});
-
 export const Form = createAttrsForm([]);

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

@@ -20,7 +20,7 @@ export const Component = defineComponent({
             const compItem = helper.findComp(compId) as DesignComp;
             const Comp =
               controls.compUICtrl.state.components.get(compItem.compKey)
-                ?.Component || CompUI.Container.Component;
+                ?.Component || CompUI.StreamCard.Component;
 
             return (
               <div class="flex flex-col">

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

@@ -4,7 +4,7 @@ import { defineComponent, watch } from "vue";
 import { string, bool } from "vue-types";
 import { View } from "../View";
 import { css } from "@linaria/core";
-import { ImageValue } from "@/modules/editor/objects/Elements/image";
+import { CompImage, ImageValue } from "@/modules/editor/objects/Elements/image";
 import { useCompData } from "../../defines/createCompHooks";
 
 
@@ -13,8 +13,8 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const comp = useCompData<ImageValue>(props.compId);
-    const { actions, store, controls } = useEditor();
+    const comp = useCompData<ImageValue>(props.compId) as CompImage;
+    const { actions, store, controls, helper } = useEditor();
 
     async function changeVal() {
       try {
@@ -30,17 +30,21 @@ export const Component = defineComponent({
 
       const value = comp.value;
       const isCropping = controls.cropCtrl.state.compId == props.compId;
-      const sizes = comp.state.refSize();
+      const sizes = comp.imageObj.state.refSize();
+      const pos = comp.imageObj.state.refPos();
       const styleObj = {
-          transform: comp.getChildAt(0).localTransform.getMatrixStr(),
+          transform: comp.imageObj.localTransform.getMatrixStr(),
           transformOrigin: "0 0 ",
-          width: sizes[0] + "px",
-          height: sizes[1] + "px",
-          position: "absolute"
+          width: helper.designToNaturalSize(sizes[0]),
+          height: helper.designToNaturalSize(sizes[1]),
+          position: "absolute",
+          left: helper.designToNaturalSize(pos[0]),
+          top: helper.designToNaturalSize(pos[1])
       }
 
       return (
         <View
+          class={"overflow-hidden"}
           compId={props.compId}
           onDblclick={store.isEditMode ? changeVal : undefined}
           onClick={() => {
@@ -51,10 +55,10 @@ export const Component = defineComponent({
             }
           }}
         >
-          <div class={["w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden", isCropping && cropingBorder]} >
+          <div class={["w-1/1 h-1/1 pointer-events-none", isCropping && cropingBorder]} >
             <img
                   crossorigin="anonymous"
-                  class={"w-1/1 h-1/1 object-cover"}
+                  class={"object-file"}
                   style={styleObj as any}
                   src={
                     value.url.startsWith("data:image/png")

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

@@ -29,14 +29,13 @@ export const Component = defineComponent({
         style={comp.createStyle()}
         class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
       >
-        <div class="relative">
           {slots.Container?.(
             comp.state.refChildren().map((comp) => {
               return slots.CompItem?.(comp);
             })
           )}
           {curValue?.value && !editor.store.isEditMode && <PageMusic />}
-        </div>
+
       </div>
     );
   },

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,11 +1,10 @@
-import { IconAdd, IconMove } from "@/assets/icons";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
+
 import { css } from "@linaria/core";
-import { IconDelete } from "@queenjs/icons";
+
 import { defineComponent, onMounted, ref } from "vue";
 import { string ,bool} from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef , useCompEditLayerRef} from "./hooks";
+import { useCompRef } from "./hooks";
 
 export const View = defineComponent({
   props: {
@@ -16,18 +15,12 @@ export const View = defineComponent({
   setup(props, { slots, emit }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
-    const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
-
+  
     return () => {
-      const comp = helper.findComp(props.compId);
+      const comp = controls.compCtrl.getObj<object>(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
-      const isStreamCard = helper.isStreamCard(props.compId);
-      const isGroupComp = helper.isGroupComp(props.compId);
-      const isStreamChild = helper.isStreamCardChild(props.compId);
 
-      const obj = new CompObject(store.compMap[props.compId]);
-      const m = obj.worldTransform.clone();
-      m.invert();
+      const isGroupComp = helper.isGroupComp(props.compId);
 
       return (
         <div
@@ -36,9 +29,8 @@ export const View = defineComponent({
             viewStyle,
             store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
             isGroupComp && groupCompCls,
-            store.currStreamCardId == props.compId && CurrCompStyle,
           ]}
-          style={helper.createStyle(comp.layout)}
+          style={comp.createStyle()}
           onClick={(e) => {
             if (!store.isEditMode) {
               e.stopPropagation();
@@ -60,61 +52,12 @@ export const View = defineComponent({
           >
             {slots.default?.()}
           </div>
-
-          {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
-
-          {
-             store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
-                
-             </div>
-          }
         </div>
       );
     };
   },
 });
 
-export const Hudop = defineComponent({
-  props: {
-    compId: string().isRequired,
-  },
-  setup(props) {
-    const { store, actions, helper, controls } = useEditor();
-
-    const opref = ref();
-
-    onMounted(() => {
-      opref.value.editable = "hudop";
-    });
-
-    return () => (
-      <div class="hudop shadow" ref={opref}>
-        {store.streamCardIds.length > 1 && (
-          <IconMove
-            class="draganchor"
-            onMousedown={() => actions.pickComp(props.compId)}
-          />
-        )}
-        {store.streamCardIds.length > 1 && (
-          <IconDelete
-            onClick={(e: any) => {
-              e.stopPropagation();
-              actions.removeStreamCard(props.compId);
-            }}
-          />
-        )}
-        <IconAdd
-          onClick={(e: any) => {
-            e.stopPropagation();
-            const index = store.streamCardIds.indexOf(props.compId) + 1;
-            actions.addCompToDesign("Container", index);
-          }}
-        />
-      </div>
-    );
-  },
-});
-
 const viewStyle = css`
   position: relative;
   font-size: 0;
@@ -125,23 +68,6 @@ const viewStyle = css`
     height: 100%;
   }
 
-  .hudop {
-    position: absolute;
-    top: 0px;
-    left: -46px;
-    background-color: white;
-    flex-direction: column;
-    color: black;
-    display: flex;
-    font-size: 12px;
-    width: 28px;
-    align-items: center;
-    border-radius: 4px;
-    z-index: 997;
-    .inficon {
-      padding: 8px;
-    }
-  }
 `;
 
 const editCompStyle = css`
@@ -150,31 +76,6 @@ const editCompStyle = css`
   }
 `;
 
-const CurrCompStyle = css`
-  position: relative;
-  outline: 1px solid @inf-primary-color;
-  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
-  z-index: 998;
-`;
-
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;
-`;
-
-const editAreaStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-`
-
-const editAreaTestStyle = css`
-   position: absolute;
-   top: 0;
-  left: 0;
-  width: 100px;
-  height: 100px;
-  background-color: red;
-`
+`;

src/modules/editor/components/CompUI/basicUI/index.ts

@@ -1,4 +1,4 @@
-export * as Container from "./Container";
+export * as StreamCard from "./Container";
 export * as Group from "./Group";
 export * as Image from "./Image2";
 export * as Page from "./Page";

src/modules/editor/components/Preview/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
             Container: (children: any) => children,
             CompItem(comp: DesignComp) {
               const compKey = store.designData.compMap[comp.id]?.compKey;
-              const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
+              const Comp: any = (CompUI[compKey] || CompUI.StreamCard).Component;
               return Comp && <Comp key={comp.id} compId={comp.id} />;
             },
           }}

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

@@ -11,6 +11,7 @@ import { Transforms } from "../../CompUI/basicUI/Transfer/transform";
 
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";
+import { CompBase } from "@/modules/editor/objects/Elements/base";
 
 export default defineUI({
   setup() {
@@ -35,24 +36,22 @@ export default defineUI({
     controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
     const editLayerRef = ref();
 
-    return () => {
-      const pageRoot = helper.findRootComp();
-      if (!pageRoot) return;
-      const streamCardIndex = store.streamCardIds.indexOf(
-        store.currStreamCardId
-      );
+    onMounted(()=>{
       if (!flagRef.value) {
         flagRef.value = true;
-        setTimeout(() => {
-          actions.onViewReady(
-            pageRoot.$el,
-            selectCanvasRef.value,
-            viewportRef.value
-          );
-          helper.initEditLayer(editLayerRef.value);
-        }, 0);
+        // setTimeout(() => {
+        //   // actions.onViewReady(
+        //   //   pageRoot.$el,
+        //   //   selectCanvasRef.value,
+        //   //   viewportRef.value
+        //   // );
+        //   // helper.initEditLayer(editLayerRef.value);
+        // }, 0);
       }
-      
+    })
+    return () => {
+      const pageRoot = controls.compCtrl.getRootPage();
+
       return (
         <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
           <div class="relative">
@@ -89,7 +88,7 @@ export default defineUI({
                             if (e.payload) {
                               actions.addCompToDesign(e.payload, e.addedIndex);
                             } else {
-                              actions.moveComp(e.removedIndex, e.addedIndex);
+                              controls.compCtrl.switchCard(e.removedIndex, e.addedIndex);
                             }
                           }}
                           onDragStart={() => (state.draging = true)}
@@ -111,18 +110,18 @@ export default defineUI({
                           !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
                         } */}
 
-
                         {!state.draging && <SelectTransfer />}
                       </>
                     );
                   },
-                  CompItem(comp: DesignComp) {
-                    const Comp =
-                      controls.compUICtrl.state.components.get(comp.compKey)
+                  CompItem(c: CompBase<object>) {
+
+                    const Comp = controls.compUICtrl.state.components.get(c.compKey)
                         ?.Component || NotFoundComp;
+
                     return (
-                      <Draggable key={comp.id}>
-                        <Comp compId={comp.id} />
+                      <Draggable key={c.id}>
+                        <Comp compId={c.id} />
                       </Draggable>
                     );
                   },
@@ -211,4 +210,4 @@ const editLayerStyle = css`
   width: 100%;
   height: 100%;
   z-index: 1000;
-`
+`

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

@@ -35,24 +35,22 @@ export default defineUI({
     controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
     const editLayerRef = ref();
 
-    return () => {
-      const pageRoot = helper.findRootComp();
-      if (!pageRoot) return;
-      const streamCardIndex = store.streamCardIds.indexOf(
-        store.currStreamCardId
-      );
+    onMounted(()=>{
       if (!flagRef.value) {
         flagRef.value = true;
-        setTimeout(() => {
-          actions.onViewReady(
-            pageRoot.$el,
-            selectCanvasRef.value,
-            viewportRef.value
-          );
-          helper.initEditLayer(editLayerRef.value);
-        }, 0);
+        // setTimeout(() => {
+        //   // actions.onViewReady(
+        //   //   pageRoot.$el,
+        //   //   selectCanvasRef.value,
+        //   //   viewportRef.value
+        //   // );
+        //   // helper.initEditLayer(editLayerRef.value);
+        // }, 0);
       }
-      
+    })
+    return () => {
+      const pageRoot = controls.compCtrl.getRootPage();
+
       return (
         <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
           <div class="relative">
@@ -111,7 +109,6 @@ export default defineUI({
                           !state.draging && controls.cropCtrl.state.visible && <Transforms ctrl={ controls.cropCtrl.modifyCtrl} />
                         } */}
 
-
                         {!state.draging && <SelectTransfer />}
                       </>
                     );

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

@@ -28,11 +28,9 @@ export const MySources = defineComponent({
     }
 
     function clickToDesign(url: string) {
-      editor.actions.clickCompToDesign(state.sourceType, (comp) => {
-        comp.value.url = url;
-      });
+        editor.actions.clickCompToDesign(state.sourceType, {url: url});
     }
-
+    
     switchSource("Image");
 
     return () => {

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -100,7 +100,7 @@ export const CompTree = defineComponent({
       }
     };
     const sortCompInCard = (parentComp: DesignComp, currCompId: string) => {
-      if (parentComp?.compKey != "Container") {
+      if (parentComp?.compKey != "StreamCard") {
         return;
       }
       const children = parentComp.children.default || [];

src/modules/editor/components/Viewport/Toolbar/AiText.tsx

@@ -60,9 +60,7 @@ export default defineComponent({
     };
     const addText = async () => {
       const aitext = `<p style="line-height:1.5;"><span style="font-size:14px;">${state.aiValue}</span></p>`;
-      await actions.clickCompToDesign("Text", (comp) => {
-        actions.updateCompData(comp, "value", aitext);
-      });
+      await actions.clickCompToDesign("Text", {text: aitext});
     };
 
     return () => (

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

@@ -1,16 +1,140 @@
-import { Exception, ModuleControl } from "queenjs";
+import { Exception, ModuleControl, queenApi } from "queenjs";
 import { EditorModule } from "../../module";
 
 import { CompBase } from "../../objects/Elements/base";
+import { RxValue } from "../../objects/Elements/RxValue";
+import { CardValue, CompCard, CompPage, PageValue, createCard, createPage } from "../../objects/Elements/page";
+import { HistoryController } from "../../objects/Elements/history";
+import { CompImage, createImageComp } from "../../objects/Elements/image";
+
 
 
 export class CompCtrl extends ModuleControl<EditorModule> {
   objsMap = new Map<string, CompBase<any>>();
+  history = new HistoryController();
+
+  root = createPage(this.history);
+  state = RxValue.create({
+    rootPage: this.root.id,
+    currCardId: this.root.state.children[0].id,
+    currCompId: this.root.state.children[0].id
+  })
+
+  get currCardObj() {
+    return this.getObj<object>(this.state.currCardId) as CompCard;
+  }
+
+  get currCompObj() {
+    return this.getObj<CompBase<object>>(this.state.currCompId);
+  }
+
+  pickComp(compId: string) {
+    this.state.setCurrCompId(compId);
+  }
+
+  constructor(m:EditorModule) {
+    super(m)
+    this.init();
+  }
+
   init() {
     this.objsMap.clear();
+    this.setObj(this.root);
+    this.setObj( this.root.state.children[0] );
+
+    this.store.currStreamCardId = this.root.state.children[0].id;
+  }
+
+  getRootPage() {
+    return this.getObj<PageValue>( this.state.refRootPage() );
+  }
+
+  setObj( obj: CompBase<any>) {
+    this.objsMap.set(obj.id, obj);
   }
-  getObj<T extends {[key:string]: any}>(id:string) {
+
+  getObj<T extends object>(id:string) {
     return this.objsMap.get(id) as CompBase<T>;
   }
+
+  addStreamCardAfter(compId:string) {
+      const card = createCard(this.history)
+      this.setObj(card);
+      const page = this.getRootPage()as CompPage;
+      page.insertCard(compId,  card);
+      this.state.setCurrCardId( card.id );
+      this.pickComp( card.id )
+
+      this.history.submit();
+  }
+
+  async removeStreamCard(compId:string) {
+    await queenApi.showConfirm({ title: "删除", content: "确认删除当前内容?" });
+    const page = this.getRootPage() as CompPage;
+    const index = page.removeCard(compId);
+
+    let nextCard = this.state.currCardId;
+    if (compId == this.state.currCardId) {
+      nextCard = page.state.children[index]?.id;
+      if (!nextCard) {
+        nextCard = page.state.children[index - 1].id;
+      }
+      this.state.setCurrCardId(nextCard);
+      this.pickComp( nextCard )
+    }
+
+    this.history.submit();
+  }
+
+
+  switchCard(selIndex:number, targetIndex:number) {
+    if (selIndex == targetIndex) return;
+
+    const page = this.getRootPage();
+    const children = page.state.children.slice(0);
+    const [selComp] = children.splice(selIndex, 1);
+    children.splice(targetIndex, 0, selComp);
+    page.state.setChildren( children );
+  }
+
+  async addComponent(compKey: string, values:any) {
+    const control = this.controls.compCtrl;
+    if (!control.getRootPage() ) {
+        queenApi.messageError("请先选中一个卡片");
+        return;
+    }
+
+    let addedObj =values?.url ?await createImageComp(values.url) : await createImageComp();
+    this.setObj(addedObj);
+
+    this.setObj(addedObj.imageObj);
+
+    let yOffset = 0;
+    if ( this.state.currCompId != this.state.currCardId ) {
+      const rect = this.currCompObj.getLocalBounds()
+      yOffset = rect.y + rect.height;
+    }
+   
+    let xOffset = 375 - (addedObj.state.size[0] || 750) / 2
+    addedObj.position = {x: xOffset, y: yOffset} as any;
+    addedObj.updateTransform();
+
+    console.log( addedObj.worldTransform, addedObj.localTransform)
+   
+
+    this.currCardObj.addComp(addedObj);
+
+    this.pickComp( addedObj.id );
+    
+    const compId = addedObj.id;
+
+    if (compKey == "Text") {
+      this.actions.textFocus(compId, true);
+    }
+    this.controls.cropCtrl.close();
+
+    this.history.submit();
+  }
+
 }
 

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

@@ -22,7 +22,7 @@ interface CompItem {
   thumbnail: string;
   Component: any;
   Form: any;
-  createComp: (...args: any) => DesignComp;
+  createComp?: (...args: any) => DesignComp;
 }
 
 export class CompUICtrl extends ModuleControl<EditorModule> {
@@ -65,9 +65,10 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
         compType: "user",
         name: d.title,
         thumbnail: d.thumbnail || Dict_Imgs.Default,
-        Component: markRaw(basicUI.Container.Component),
-        Form: markRaw(basicUI.Container.Form),
-        createComp: basicUI.Container.createComp,
+        Component: markRaw(basicUI.StreamCard.Component),
+        Form: markRaw(basicUI.StreamCard.Form),
+        //@ts-ignore
+        // createComp: basicUI.Container.createComp,
       };
       this.state.components.set(d._id, compItem);
     });

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

@@ -67,8 +67,8 @@ export class Matrix {
     return this;
   }
 
-  getMatrixStr() {
-    return `matrix(${this.a},${this.b},${this.c},${this.d},${this.tx},${this.ty})`;
+  getMatrixStr(calcSize:(v:number)=>number = (v)=>v) {
+    return `matrix(${this.a},${this.b},${this.c},${this.d},${calcSize(this.tx)},${calcSize(this.ty)})`;
   }
 
   fromArray(array: number[]) {

src/modules/editor/controllers/SelectCtrl/objects/container.ts

@@ -328,7 +328,7 @@ export class Container extends DisplayObject {
       //   } else if (child.filterArea) {
       //     this._bounds.addBoundsArea(child._bounds, child.filterArea);
       //   } else {
-      this._bounds.addBounds(child._bounds);
+      //      this._bounds.addBounds(child._bounds);
       //   }
     }
 

src/modules/editor/controllers/SelectCtrl/objects/displayObject.ts

@@ -123,7 +123,7 @@ transform = new Transform();
     const parentRef = this.parent;
 
     this.parent = undefined;
-    this.transform = this._tempDisplayObjectParent.transform;
+    // this.transform = this._tempDisplayObjectParent.transform;
 
     if (!rect) {
       if (!this._localBoundsRect) {
@@ -136,7 +136,7 @@ transform = new Transform();
     const bounds = this.getBounds(false, rect);
 
     this.parent = parentRef;
-    this.transform = transformRef;
+    // this.transform = transformRef;
 
     return bounds;
   }

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

@@ -35,13 +35,16 @@ export const editActions = EditorModule.action({
   },
 
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
-    if (!this.store.currStreamCardId) {
-      queenApi.messageError("请先选中一个卡片");
-      return;
+  async clickCompToDesign(compKey: ICompKeys, values?:any) {
+    return this.controls.compCtrl.addComponent(compKey, values);
+
+    const control = this.controls.compCtrl;
+    if (!control.getRootPage() ) {
+        queenApi.messageError("请先选中一个卡片");
+        return;
     }
 
-    //点击默认都创建一个容器
+    //点击默认都创建一个容器 
     //创建容器
     const isCreatCard =
       compKey != "Text" &&
@@ -66,7 +69,7 @@ export const editActions = EditorModule.action({
       const currCardIndex =
         this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(
-        "Container",
+        "StreamCard",
         currCardIndex
       );
       currCard = this.helper.findComp(compId) as DesignComp;
@@ -77,7 +80,6 @@ export const editActions = EditorModule.action({
     addedComp.layout.position = "absolute";
 
     const currComp = this.helper.findComp(compId) as DesignComp;
-    cb?.(currComp);
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
@@ -138,7 +140,7 @@ export const editActions = EditorModule.action({
       //必须选中一个streamCard
       return;
     }
-    if (compKey == "Container") {
+    if (compKey == "StreamCard") {
       // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
       this.actions.pickComp(compId);

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

@@ -109,7 +109,7 @@ export const helpers = EditorModule.helper({
   isCompCanDelete(compId: string): boolean {
     const comp = this.helper.findComp(compId);
     if (!comp || !this.helper.isCustomChildComp(comp)) return false;
-    if (comp.compKey == "Container" && this.store.streamCardIds.length == 1)
+    if (comp.compKey == "StreamCard" && this.store.streamCardIds.length == 1)
       return false;
     return true;
     // if (this.store.isEditComp) return true;

src/modules/editor/objects/DesignTemp/versions/1.0.0.ts

@@ -45,6 +45,7 @@ export function dataTransform(data: any) {
   const roots = []
   for (const item of childrens) {
     let card = compMap[item]
+    //@ts-ignore
     if (card.compKey != "Container" ) {
         card.layout.position = "absolute";
         card = CompUI.Page.createComp({

src/modules/editor/objects/Elements/RxValue.ts

@@ -75,9 +75,8 @@ class RxValue {
                     }
                 })
 
-                const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1).toLowerCase();
-
-
+                const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1);
+                
                 obj["set"+CamName] = function(value:T, nohistory = false){
                     f.next({value, _hstry: !nohistory});
                 }

src/modules/editor/objects/Elements/base.ts

@@ -2,12 +2,14 @@ import { Container } from "../../controllers/SelectCtrl/objects/container";
 import { RxValue } from "./RxValue";
 import { nanoid } from "nanoid";
 import { ICompKeys } from "../../typings";
+import { utils } from "./utils";
+import { HistoryController } from "./history";
 
 class CompBase<T extends object> extends Container {
     id = nanoid();
     title = "";
     thumbnail = "";
-    compKey: ICompKeys = "Container";
+    compKey: ICompKeys = "StreamCard";
     value: ReturnType< typeof RxValue.create<T> >;
     
     state = RxValue.create({
@@ -28,14 +30,62 @@ class CompBase<T extends object> extends Container {
     constructor(value:T) {
         super();
         this.value = RxValue.create(value);
+        this.onCreated();
+    }
+    onCreated() {
+        console.log("set compkey here!");
+    }
+
+    setHistory(h :HistoryController) {
+        this.value.setHistory(h);
+        this.state.setHistory(h);
+    }
+
+    override _calculateBounds() {
+        const size = this.state.size;
+        this._bounds.addFrame(this.transform, 0,0, size[0], size[1]);
     }
 
     createStyle() {
         const state = this.state;
-        const style = {
-            width: state.refSize()[0] + "px",
+        const style :any = {opacity: state.refOpacity()}
+        const size = state.refSize();
+        const pos = state.refPos();
+
+        if (!state.refVisible()) {
+            style.display = "none";
+        } 
+        if (state.refClipPath()) {
+            style.clipPath = state.refClipPath();
+        }
+        if (state.refBgColor()) {
+            style.backgroundColor = state.refBgColor();
+        }
+        if (state.refRadius()) {
+            style.borderRadius = state.refRadius()
+        }
+        style.position = state.refPosition();
+
+        if (state.refPosition() == "relative") {
+            if (size[0] > -1) {
+                style.width = utils.designToNaturalSize(size[0]);
+            }
+            if (size[1] > -1) {
+                style.height = utils.designToNaturalSize(size[1]);
+            }
+            style.left = utils.designToNaturalSize(pos[0]);
+            style.top = utils.designToNaturalSize(pos[1]);
+        } else {
+            style.width = utils.designToNaturalSize(size[0]);
+            style.height = utils.designToNaturalSize(size[1]);
+            style.left = utils.designToNaturalSize(pos[0]);
+            style.top = utils.designToNaturalSize(pos[1]);
 
+            const pivot = state.refPivots();
+            style.transformOrigin = `${utils.designToNaturalSize(pivot[0])} ${utils.designToNaturalSize(pivot[1])}`
+            style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
         }
+        return style;
     }
 
     fromJson(json:any) {
@@ -68,7 +118,7 @@ class CompBase<T extends object> extends Container {
             this.width = size[0];
             this.height = size[1];
         })
-        this.state.onPositionChanged((pos)=>{
+        this.state.onPosChanged((pos)=>{
             this.position.x = pos[0]
             this.position.y = pos[1]
         })

src/modules/editor/objects/Elements/image.ts

@@ -1,14 +1,40 @@
 import { effect } from "vue";
 import { CompBase } from "./base"
 import { HistoryController } from "./history";
+import { Dict_Imgs } from "@/dict";
 
 export type ImageValue = {
     url: string;
     showLink: boolean;
     link: string;
+    initSized?: boolean
 }
 
+export type ImageContenValue = {
+    url: string;
+}
+
+export class CompImageContent extends CompBase<ImageContenValue> {
+    override onCreated() {
+        this.compKey = "ImageContent" as any;
+    }
+}   
+    
+
 export class CompImage extends CompBase<ImageValue> {
+    
+   override onCreated() {
+        this.compKey = "Image";
+        this.state.size = [750, 400];
+        this.state.bgColor = "green";
+        this.value.initSized = false;
+        this.state.children.push(new CompImageContent({url: this.value.url}))
+   }
+
+   get imageObj() {
+      return this.state.children[0];
+   }
+
     override init(): void {
         super.init();
 
@@ -18,20 +44,48 @@ export class CompImage extends CompBase<ImageValue> {
 
             }
         })
+        this.updateTransform();
     }
 }
 
 
-export async function createImageComp(url:string) {
+export async function createImageComp(url:string = Dict_Imgs.Default): Promise<CompImage> {
     return new Promise((r)=>{
+
         const obj = new CompImage({url: url, showLink: false, link: ""})
+        const isDefaultUrl = url == Dict_Imgs.Default;
+        const size = obj.state.size;
         const temImg = new Image();
         temImg.src = url;
         temImg.onload = function () {
           const ratio = temImg.width / temImg.height;
-          const W = temImg.width > 750 ? 750 : temImg.width;
-          const h  = W / ratio;
-          obj.state.size = [W, h];
+          if (!isDefaultUrl) { //不是默认的图片
+                const W = temImg.width > 750 ? 750 : temImg.width;
+                const h  = W / ratio;
+                obj.state.size = [W, h];
+                obj.imageObj.state.size = [W, h];
+                obj.imageObj.updateTransform();
+          } else { //保持默认的750x400尺寸 cantain
+            const r1 = size[0] / size[1];
+            let srcWidth = size[0]
+            let srcHeight = size[1]
+            let srcOffx = 0, srcOffy=0;
+            if (r1 < ratio) { 
+                const s = size[1] / temImg.height
+                srcWidth = temImg.width * s;
+                srcOffx = (size[0] - srcWidth) /2.0;
+            }  else {
+                //高度不变,计算宽度
+                const s = size[0] / temImg.width
+                srcHeight = s * temImg.height;
+                srcOffy = (size[1] - srcHeight) / 2.0;
+            }
+            obj.imageObj.state.size = [srcWidth, srcHeight];
+            obj.imageObj.state.pos = [srcOffx, srcOffy];
+            obj.imageObj.updateTransform();
+          }
+          obj.init();
+
           r(obj);
         };
     })

src/modules/editor/objects/Elements/page.ts

@@ -1,54 +1,94 @@
+
 import { CompBase } from "./base";
+import { HistoryController } from "./history";
+import { utils } from "./utils";
 
 export type PageValue = {
     music:string
 }
 
 export type CardValue = {
-
+    test:number
 }
 
-
 export class CompCard extends CompBase<CardValue>  {
 
+  override onCreated(): void {
+    this.compKey = "StreamCard";
+    this.state.size = [750, 300];
+    this.state.position = "relative";
+  }
+
+  addComp( comp: CompBase<any>) {
+     const childrens = this.state.children.slice(0)
+     childrens.push(comp);
+
+     let maxH = 0, n = childrens.length;
+     while (n--) {
+       const c = childrens[n];
+       const aabb = c.getLocalBounds();
+       maxH = Math.max(maxH, aabb.y + aabb.height);
+     }
+     if (childrens.length < 1 ) {
+       maxH = 200
+     }
+     this.state.setSize([this.state.size[0], maxH])
+     this.state.setChildren(childrens);
+  }
 }
 
 
 export class CompPage extends CompBase<PageValue> {
-
-    override init(): void {
-        super.init();
+    override onCreated(): void {
+        this.state.position = "relative";
+        this.state.bgColor = "#ffffff";
+        this.compKey = "Page";
+        this.state.size = [750,  -1];//默认设置一页的高度
     }
 
 
-
-
-    addCard(index: number,  comp:CompCard) {
-
+    insertCard(srcCardId: string,  card:CompCard) {
+        const state = this.state
+        const children = state.children.slice(0);
+        let childs = children.map(item=>item.id);
+        const index = childs.indexOf(srcCardId) + 1;
+        children.splice(index, 0, card);
+        state.setChildren(children);
+        return index;
     }
 
-    removeCard(index:number) {
-
+    removeCard(srcCardId: string) {
+        const state = this.state
+        const children = state.children.slice(0);
+        let childs = children.map(item=>item.id);
+        const index = childs.indexOf(srcCardId);
+        children.splice(index, 1);
+        state.setChildren(children);
+        return index;
     }
 
-    switchCard(fromIndex:number, toIndex:number) {
 
+    switchCard(fromIndex:number, toIndex:number) {
+        console.log("switch")
     }
 }
 
-export function createPage() {
-    const obj = new CompPage({ BgAudio:""});
-    obj.state.size = [750,  window.innerHeight];//默认设置一页的高度
+export function createPage(histry: HistoryController) {
+
+    const obj = new CompPage({ music:""});
+    obj.state.children.push( createCard(histry) );  //默认有一页卡片
+    obj.init();
 
-    obj.state.children.push( createCard() );  //默认有一页卡片
+    obj.setHistory(histry);
 
     return obj;
 }
 
-export function createCard() {
-    const obj = new CompCard({})
-    obj.state.size = [750, 300];
-    
+export function createCard(histry: HistoryController) {
+    const obj = new CompCard({test: 1})
+    obj.init();
+
+    obj.setHistory(histry);
     return obj;
 }
 

src/modules/editor/objects/Elements/utils.ts

@@ -0,0 +1,11 @@
+export const utils = {
+    designToNaturalSize(value: number) {
+        return value / 2 + "px";
+    },
+    pxToDesignSize(value: number) {
+        return value * 2;
+    },
+    designSizeToPx(value: number) {
+        return value / 2.0;
+    },
+}