update

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

@@ -1,11 +1,13 @@
 import { defineComponent } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
 import { css } from "@linaria/core";
 import { PageMusic } from "./PageMusic";
 import { MusicOptions } from "./localMusic";
+import { useCompData } from "../../defines/createCompHooks";
+import { PageValue } from "@/modules/editor/objects/Elements/page";
 
 export const Component = defineComponent({
   props: {
@@ -13,24 +15,23 @@ export const Component = defineComponent({
   },
   setup(props, { slots }) {
     const editor = useEditor();
-    const { helper } = editor;
-    const { children, layout, value } = useCompData(props.compId);
+    const { compCtrl } = editor.controls;
+    const comp = useCompData<PageValue>(props.compId);
     const compRef = useCompRef(props.compId);
-    const compMusic = value.music || "";
+    const compMusic = comp.value.music || "";
     const curValue = MusicOptions.find((e) => {
       return e.value == compMusic;
     });
+
     return () => (
       <div
         ref={compRef}
-        style={helper.createStyle(layout || { size: [750] })}
+        style={comp.createStyle()}
         class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
       >
         <div class="relative">
           {slots.Container?.(
-            children.default.map((compId) => {
-              const comp = helper.findComp(compId);
-              if (!comp) return;
+            comp.state.refChildren().map((comp) => {
               return slots.CompItem?.(comp);
             })
           )}

src/modules/editor/components/CompUI/customUI/Cards/Card2/component.tsx

@@ -80,20 +80,17 @@ export const Component = createUIComp({
 
           <Image.Component
                 class="rounded-1/2 overflow-hidden top-0"
-                editlayer = {false}
                 compId={children.item1}
               />
 
             <Image.Component
                       class="rounded-1/2 overflow-hidden top-0"
                       compId={children.item2}
-                      editlayer = {false}
                     />   
 
           <Image.Component
                   class="rounded-1/2 overflow-hidden top-0"
                   compId={children.item3}
-                  editlayer = {false}
               />
 
         <Text.Component compId={children.text1} class={"top-0"} />

src/modules/editor/components/CompUI/defines/createCompHooks.ts

@@ -54,7 +54,7 @@ export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
 }
 
 
-export function useCompData<T extends {}>(compId:string) {
+export function useCompData<T extends object>(compId:string) {
   const editor = useEditor();
   return editor.controls.compCtrl.getObj<T>(compId);
 }

src/modules/editor/components/CompUI/defines/createCompId.ts

@@ -14,6 +14,8 @@ export function createCompId(
   compKey: keyof typeof CompUI,
   options?: any
 ): string {
+  
+  //@ts-ignore
   const comp = CompUI[compKey].createComp(
     Object.assign(options || {}, { compKey })
   );

src/modules/editor/components/CompUI/hooks.ts

@@ -1,5 +0,0 @@
-
-
-export default useCompData<T>(compId:string) {
-    
-} 

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

@@ -0,0 +1,214 @@
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { css } from "@linaria/core";
+import { defineUI } from "queenjs";
+import { onUnmounted, reactive, ref, onMounted } from "vue";
+import { Container, Draggable } from "vue-dndrop";
+import { useEditor } from "../../..";
+import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
+import { CompUI } from "../../CompUI";
+import { Transfer } from "../../CompUI/basicUI/Transfer";
+import { Transforms } from "../../CompUI/basicUI/Transfer/transform";
+
+import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
+import { TipIcons } from "../../TipIcons";
+
+export default defineUI({
+  setup() {
+    const editor = useEditor();
+    const { store, actions, helper, controls } = editor;
+
+    const hotKeyCtrl = new HotKeyCtrl(editor);
+    hotKeyCtrl.init();
+    onUnmounted(() => {
+      hotKeyCtrl.destroy();
+    });
+
+    const state = reactive({
+      draging: false,
+    });
+
+    const NotFoundComp = () => <div>无效的组件</div>;
+    const flagRef = ref();
+    const containRef = ref();
+    const selectCanvasRef = ref();
+    const viewportRef = ref();
+    controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
+    const editLayerRef = ref();
+
+    return () => {
+      const pageRoot = helper.findRootComp();
+      if (!pageRoot) return;
+      const streamCardIndex = store.streamCardIds.indexOf(
+        store.currStreamCardId
+      );
+      if (!flagRef.value) {
+        flagRef.value = true;
+        setTimeout(() => {
+          actions.onViewReady(
+            pageRoot.$el,
+            selectCanvasRef.value,
+            viewportRef.value
+          );
+          helper.initEditLayer(editLayerRef.value);
+        }, 0);
+      }
+      
+      return (
+        <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
+          <div class="relative">
+            <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
+              <CompUI.Page.Component compId={pageRoot.id}>
+                {{
+                  Container(children: any) {
+                    return (
+                      <>
+                        <Container
+                          behaiver="drop-zone"
+                          class={store.isEditPage ? "!min-h-750px" : ""}
+                          // drag-handle-selector=".draganchor"
+                          ref={containRef}
+                          should-accept-drop={(
+                            sourceContainerOptions: any,
+                            payload: any
+                          ) => {
+                            if (sourceContainerOptions.groupName != "canvas") {
+                              return false;
+                            }
+                            if (typeof payload == "string")
+                              controls.dragAddCtrl.updateCompKey(payload);
+                            else {
+                              controls.dragAddCtrl.updateCompKey(payload.type);
+                              controls.dragAddCtrl.updateCompData(payload.data);
+                            }
+                            return false;
+                          }}
+                          drop-not-allowed={(p: any) => {
+                            console.log("p", p);
+                          }}
+                          onDrop={(e: any) => {
+                            if (e.payload) {
+                              actions.addCompToDesign(e.payload, e.addedIndex);
+                            } else {
+                              actions.moveComp(e.removedIndex, e.addedIndex);
+                            }
+                          }}
+                          onDragStart={() => (state.draging = true)}
+                          onDragEnd={() => {
+                            state.draging = false;
+                          }}
+                          non-drag-area-selector={".drag-disable"}
+                        >
+                          {children}
+                        </Container>
+
+                        {/* {store.currStreamCardId && (
+                          <StreamCardTransfer
+                            key={store.currStreamCardId + streamCardIndex}
+                          />
+                        )} */}
+
+                        {/* { 
+                          !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)
+                        ?.Component || NotFoundComp;
+                    return (
+                      <Draggable key={comp.id}>
+                        <Comp compId={comp.id} />
+                      </Draggable>
+                    );
+                  },
+                }}
+              </CompUI.Page.Component>
+            </div>
+            
+            <div class={editLayerStyle} ref={editLayerRef}>
+            </div>
+            <canvas class={selectCls} ref={selectCanvasRef} />
+          </div>
+          <div class={meatureStyle}>
+            <div class="ruler top" id="rulerTop"></div>
+            <div class="ruler left" id="rulerLeft"></div>
+            <div class="ruler right" id="rulerRight"></div>
+            <div class="ruler bottom" id="rulerBottom"></div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const contentCls = css`
+  .dndrop-container.vertical > .dndrop-draggable-wrapper {
+    overflow: unset;
+  }
+`;
+const selectCls = css`
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+`;
+
+const meatureStyle = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  pointer-events: none;
+
+  .ruler {
+    position: absolute;
+    cursor: ns-resize;
+    pointer-events: auto;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .bottom {
+    bottom: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .left {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 10px;
+    cursor: ew-resize;
+  }
+  .right {
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 10px;
+    cursor: ew-resize;
+  }
+`;
+
+const editLayerStyle = css`
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+`

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

@@ -45,6 +45,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
         thumbnail: value.options.thumbnail,
         Component: markRaw(value.Component),
         Form: markRaw(value.Form),
+        //@ts-ignore
         createComp: value.createComp,
       });
     });

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

@@ -12,6 +12,7 @@ export function dataTransform(data: any) {
     set(data.content, paths.join("."), comp.id);
     compMap[comp.id] = comp;
     if (!comp.children) {
+      //@ts-ignore
       comp.children = CompUI[comp.compKey].createComp({
         compKey: comp.compKey,
       }).children;

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

@@ -75,16 +75,18 @@ class RxValue {
                     }
                 })
 
+                const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1).toLowerCase();
 
-                obj["set"+currName] = function(value:T, nohistory = false){
+
+                obj["set"+CamName] = function(value:T, nohistory = false){
                     f.next({value, _hstry: !nohistory});
                 }
         
-                obj["on"+currName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
+                obj["on"+CamName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
                     return f.subscribe((v)=>subscribe(v.value, snap.OldValue))
                 }
 
-                obj["ref"+currName] = function(){
+                obj["ref"+CamName] = function(){
                     const initV = f.getValue().value;
                     if (!refs[currName]) {
                         refs[currName] = ref(initV);

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

@@ -3,16 +3,16 @@ import { RxValue } from "./RxValue";
 import { nanoid } from "nanoid";
 import { ICompKeys } from "../../typings";
 
-class CompBase<T extends {[key:string]: any}> extends Container {
+class CompBase<T extends object> extends Container {
     id = nanoid();
     title = "";
     thumbnail = "";
     compKey: ICompKeys = "Container";
     value: ReturnType< typeof RxValue.create<T> >;
-
+    
     state = RxValue.create({
-        size: [750, 400],
-        position: [0,0],
+        size: [0, 0],
+        pos: [0,0],
         pivots: [0,0],
         scale: [1,1],
         rotation: 0,
@@ -21,7 +21,8 @@ class CompBase<T extends {[key:string]: any}> extends Container {
         clipPath: "",
         bgColor: "",
         radius: "", 
-        children: []
+        position: "absolute" as "absolute" | "relative",
+        children: [] as CompBase<any>[]
     });
 
     constructor(value:T) {
@@ -29,6 +30,14 @@ class CompBase<T extends {[key:string]: any}> extends Container {
         this.value = RxValue.create(value);
     }
 
+    createStyle() {
+        const state = this.state;
+        const style = {
+            width: state.refSize()[0] + "px",
+
+        }
+    }
+
     fromJson(json:any) {
         this.id = json.id;
         this.compKey = json.compKey;

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

@@ -1,7 +1,7 @@
 import { CompBase } from "./base";
 
 export type PageValue = {
-
+    music:string
 }
 
 export type CardValue = {
@@ -16,6 +16,13 @@ export class CompCard extends CompBase<CardValue>  {
 
 export class CompPage extends CompBase<PageValue> {
 
+    override init(): void {
+        super.init();
+    }
+
+
+
+
     addCard(index: number,  comp:CompCard) {
 
     }
@@ -27,4 +34,21 @@ export class CompPage extends CompBase<PageValue> {
     switchCard(fromIndex:number, toIndex:number) {
 
     }
-}
+}
+
+export function createPage() {
+    const obj = new CompPage({ BgAudio:""});
+    obj.state.size = [750,  window.innerHeight];//默认设置一页的高度
+
+    obj.state.children.push( createCard() );  //默认有一页卡片
+
+    return obj;
+}
+
+export function createCard() {
+    const obj = new CompCard({})
+    obj.state.size = [750, 300];
+    
+    return obj;
+}
+