添加手机屏幕适配

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

@@ -7,6 +7,7 @@ import { View } from "../View";
 import { CompUI } from "../..";
 import { SelectTransfer } from "../Transfer/select";
 import { sortedArray } from "three/src/animation/AnimationUtils";
+import { css } from "@linaria/core";
 
 export const Component = defineComponent({
   props: {
@@ -19,18 +20,41 @@ export const Component = defineComponent({
 
     const isStreamCard = helper.isStreamCard(props.compId);
 
-    
-    return () => (
-      <View compId={props.compId} showMask={props.showMask}>
-        {children.default?.map((compId) => {
-          const compItem = helper.findComp(compId) as DesignComp;
-          const Comp =
-            controls.compUICtrl.state.components.get(compItem?.compKey)
-              ?.Component || CompUI.Container.Component;
-
-          return <Comp key={compItem.id} compId={compItem.id} />;
-        })}
-      </View>
-    );
+    return () => {
+
+      const rootPage = store.rootPage;
+      const style:any = {};
+      if (isStreamCard && rootPage?.value.pageMode == "short" && store.isDisplay) {
+        console.log("is stream card");
+        style.height = "100vh";
+        style.width = "100vw";
+        style.display =  "flex";
+        style.justifyContent =  "center";
+        style.flexDirection = "column";
+        style.justifyItems = "center";
+        style.position = "relative";
+        style.overflow =  "hidden";
+        
+      }
+
+      return (
+        <div class={CardStyle} style={style}>
+          <View compId={props.compId} showMask={props.showMask}>
+            {children.default?.map((compId) => {
+              const compItem = helper.findComp(compId) as DesignComp;
+              const Comp =
+                controls.compUICtrl.state.components.get(compItem?.compKey)
+                  ?.Component || CompUI.Container.Component;
+
+              return <Comp key={compItem.id} compId={compItem.id} />;
+            })}
+          </View>
+        </div>
+      );
+    }
   },
 });
+
+const CardStyle = css`
+
+`

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

@@ -68,16 +68,6 @@ export const View = defineComponent({
       const style = helper.createStyle(comp.layout, comp);
       const page = helper.findRootComp() as DesignComp;
 
-      if (isStreamCard && page.value.pageMode == "short" && store.isDisplay) {
-        //  const cards = store.streamCardIds;
-        //  const index = cards.indexOf(props.compId)
-        //  style.position = "absolute";
-        //  style.top = index * 100  + "vh";
-        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
-          adaptiveH: true,
-        });
-      }
-
       // if (comp.anim && comp.anim.transition) {
       //   style.transition = "all 1s ease-out";
       // }
@@ -279,6 +269,7 @@ const viewStyle = css`
   position: relative;
   font-size: 0;
   cursor: pointer;
+  flex-shrink: 0;
 
   > :first-child {
     width: 100%;

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

@@ -54,7 +54,7 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
      }
 
      onMounted(()=>{
-        setTimeout(init, 200);
+        setTimeout(init, 1000);
      })
 
      this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};

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

@@ -37,6 +37,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       docWidth: window.innerWidth,   //实际屏幕宽度
       docHeight: window.innerHeight,  //实际屏幕高度
       safeFactor: 0.8,
+      currScreenId: ""
    })
 
    get isShortPage () {
@@ -50,6 +51,14 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
    
    initEvent() {
+
+      window.addEventListener("resize", ()=>{
+          if ( !this.store.isDisplay ) return;
+
+          console.log("apply screen");
+          this.applyScreen();
+      })
+
       if ( !this.store.isEditMode ) return;
       this.state.onScreenChanged(()=>this.updateAdapterState());
        
@@ -91,6 +100,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       const option = this.getRightScreenId();
       if ( this.isScreenExit(option.sreenId) ) {
          this.restorScreenPage(option.sreenId);
+         this.state.currScreenId = option.sreenId;
          return;
       }
 
@@ -99,6 +109,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
          const screenId = option.device + option.pageMode + AllSize[n];
          if ( this.isScreenExit(screenId) ) {
             this.restorScreenPage(screenId);
+            this.state.currScreenId = screenId;
             return;
          }
       }
@@ -113,6 +124,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
             const screenId = option.device + "short" + AllSize[n];
             if ( this.isScreenExit(screenId) ) {
                this.restorScreenPage(screenId);
+               this.state.currScreenId = screenId;
                return;
             }
          }
@@ -143,7 +155,9 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
 
    updateAdapterState() {
       if (!this.store.rootPage) return;
-      
+
+    
+
       this.restorScreenPage();
 
       this.store.streamCardIds.forEach(c=>{
@@ -158,7 +172,9 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
       this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 
 
-      this.state.safeFactor = this.state.screen.useFor == "pc" ? PCConst.factor : MobileConst.factor; 
+      this.state.safeFactor = this.state.screen.useFor == "pc" ? PCConst.factor : MobileConst.factor;
+
+      this.state.currScreenId = this.currScreenId;
    }
    isScreenExit(screenId:string) {
       return !!this.store.designData.compScreenMap[screenId] && 
@@ -168,8 +184,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
 
    restorScreenPage(screenId = "") {
       if (!this.store.rootPage) return;
-
-   
+         
       //获取当前screen的配置
       screenId = screenId ? screenId : this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
       const screenCards = this.store.designData.compScreenMap[screenId] || [];
@@ -182,6 +197,11 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
          const screenCard = screenCards.find(item=>item.id == c)
          let newChilds:string[] = [];
          let childrs = screenCard?.children || [];
+         if (screenCard && screenCard.size){
+            card.layout.size[0] = screenCard.size[0];
+            card.layout.size[1] = screenCard.size[1];
+         }
+
          childrs.forEach(item=>{
             newChilds.push(item.id);
             const screenComp = this.helper.findComp(item.id) as DesignComp;
@@ -209,6 +229,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
          const card = compMap[c] as DesignComp;
          const screenCard :CardState = {
             id: c,
+            size: [card.layout.size[0], card.layout.size[1]],
             children: []
          }
          let childrs = card.children.default || [];

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

@@ -4,6 +4,7 @@ import { dataTransform as V101Upgrade } from "./versions/1.0.1";
 
 export type CardState = {
   id: string;
+  size: [number, number];
   children: {id:string, matrix: string, size: [number, number, { unit?: "px" | "%" }?]}[]
 }