添加数据升级

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

@@ -6,28 +6,43 @@ export default defineComponent({
     setup(props, ctx) {
         const editor = useEditor();
         const ctrl = editor.controls.screenCtrl;
-        
+
         return ()=>{
             return (
                 <div class="px-16px">
                     <div class="flex items-center">
                         <span class="w-70px">屏幕类型</span>
-                        <Select value={ctrl.state.useFor} onChange={(v)=>{
-                            ctrl.state.setUseFor(v as any);
+                        <Select value={ctrl.state.screen.useFor} onChange={(v)=>{
+                            const s = {useFor: v, pageMode: ctrl.state.screen.pageMode, pageSizeType: ctrl.state.screen.pageSizeType}
+                            ctrl.saveScreenPage();
+                            ctrl.state.setScreen(s as any);
+
                         }} class = "flex-1 overflow-hidden" options={[{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }]}  />
                     </div>
                     <div  class="flex items-center mt-5px">
                         <span class="w-70px">页面模式</span>
                         <Select onChange={(v)=>{
-                            ctrl.state.setPageMode(v as any);
-                        }} value={ctrl.state.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
-                    </div>
-                    <div  class="flex items-center mt-5px">
-                        <span class="w-70px">屏幕长度</span>
-                        <Select onChange={(v)=>{
-                            ctrl.state.setPageSizeType(v as any);
-                        }} value={ctrl.state.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
+                            ctrl.saveScreenPage();
+                            const s = {useFor: ctrl.state.screen.useFor, pageMode:v, pageSizeType: ctrl.state.screen.pageSizeType} 
+                            if( v == "long") {
+                                s.pageSizeType = "normal";
+                            }
+                            ctrl.state.setScreen(s as any);
+                            editor.controls.editorCtrl.autoInScreen();
+
+                        }} value={ctrl.state.screen.pageMode} class = "flex-1 overflow-hidden" options={[{ label: "长页", value: "long" }, { label: "翻页", value: "short" }]}  />
                     </div>
+                    {
+                        ctrl.state.screen.pageMode == "short" && <div  class="flex items-center mt-5px">
+                           <span class="w-70px">屏幕长度</span>
+                           <Select onChange={(v)=>{
+                               ctrl.saveScreenPage();
+                               const s = {useFor: ctrl.state.screen.useFor, pageMode:ctrl.state.screen.pageMode, pageSizeType: v}
+                               ctrl.state.setScreen(s as any);
+                           }} value={ctrl.state.screen.pageSizeType} class = "flex-1 overflow-hidden" options={[{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}]}  />
+                       </div>
+                    }
+                 
                 </div>
             )
         }

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

@@ -122,7 +122,7 @@ export const View = defineComponent({
         }
       }
 
-      const isLongPage = controls.screenCtrl.state.pageMode == "long";
+      const isLongPage = controls.screenCtrl.isLongPage
 
       return (
         <div

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

@@ -3,6 +3,7 @@ import { EditorModule } from "../../module";
 import { reactive } from "vue";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { RxValue } from "../ReactCtrl/rxValue";
+import { CardState } from "../../objects/DesignTemp";
 
 
 // const WidthHeightRatios = [1.377, 1.777, 2.177];
@@ -19,24 +20,26 @@ const PCRates = [0.42, 0.8];
 export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 export class ScreenCtrl extends ModuleControl<EditorModule> {
    state = RxValue.create({
-      useFor: "mobile" as "mobile" | "pc", // pc 还是 手机
-      pageMode: "long" as "long" | "short", //长页面还是短页面(一屏高度)
-      pageSizeType: "normal" as "normal" | "long" | "short", //适配类型 长屏 正常 短屏幕
-
+      screen: {
+            useFor: "mobile" as "mobile" | "pc", // pc 还是 手机
+            pageMode: "long" as "long" | "short", //长页面还是短页面(一屏高度)
+            pageSizeType: "normal" as "normal" | "long" | "short", //适配类型 长屏 正常 短屏幕
+      },
       docWidth: window.innerWidth,   //实际屏幕宽度
       docHeight: window.innerHeight,  //实际屏幕高度
       safeFactor: 0.8,
    })
+
    get isShortPage () {
-      return this.state.pageMode == "short";
+      return this.state.screen.pageMode == "short";
+   }
+   get isLongPage() {
+      return this.state.screen.pageMode == "long";
    }
-   
+
    initEvent() {
       if ( !this.store.isEditMode ) return;
-
-      this.state.onUseForChanged(()=>this.updateAdapterState());
-      this.state.onPageModeChanged(()=>this.updateAdapterState());
-      this.state.onPageSizeTypeChanged(()=>this.updateAdapterState());
+      this.state.onScreenChanged(()=>this.updateAdapterState());
 
       const size = 3;
       const safeFactor =  Math.pow((PCRates[0] / PCRates[1]) , 1.0 / size);
@@ -56,8 +59,8 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    getAdapterIndex() {
-      if(this.state.pageMode == "long") return 1;
-      return ["short", "normal", "long"].indexOf(this.state.pageSizeType)
+      if(this.state.screen.pageMode == "long") return 1;
+      return ["short", "normal", "long"].indexOf(this.state.screen.pageSizeType)
    }
 
    updateAdapterState() {
@@ -72,15 +75,67 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       const h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
 
       this.controls.editorCtrl.state.setPage({w, h});
-
-     
       this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
       this.store.rootPage.layout.size[1] = this.getCurrScreenHeight();
+
+      this.restorScreenPage();
+   }
+
+   restorScreenPage() {
+      if (!this.store.rootPage) return;
+
+      //获取当前screen的配置
+      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
+      const screenCards = this.store.designData.compScreenMap[screenId] || [];
+      
+      //刷新当前card的配置
+      this.store.streamCardIds.forEach(c=>{
+         const card = this.helper.findComp(c) as DesignComp;
+         const screenCard = screenCards.find(item=>item.id == c)
+         let newChilds:string[] = [];
+         let childrs = screenCard?.children || [];
+         childrs.forEach(item=>{
+            newChilds.push(item.id);
+            const screenComp = this.helper.findComp(item.id) as DesignComp;
+            screenComp.layout.size[0] = item.size[0];
+            screenComp.layout.size[1] = item.size[1];
+            screenComp.layout.transformMatrix = item.matrix;
+         })
+         card.children.default = newChilds;
+      })
+   }
+
+   saveScreenPage() {
+      //获取当前screen的配置
+      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
+      const screenCards =  ScreenCtrl.createScreenCards(this.store.compMap, this.store.rootPage);
+      if (!this.store.designData.compScreenMap) this.store.designData.compScreenMap = {};
+      this.store.designData.compScreenMap[screenId] = screenCards;
+   }
+
+  static createScreenCards(compMap:any, rootPage: DesignComp) {
+      //获取当前screen的配置
+      const screenCards =  [] as CardState [];
+      const streamCardIds = rootPage.children.default || [];
+      streamCardIds.forEach(c=>{
+         const card = compMap[c] as DesignComp;
+         const screenCard :CardState = {
+            id: c,
+            children: []
+         }
+         let childrs = card.children.default || [];
+         childrs.forEach(item=>{
+            const c = compMap[item] as DesignComp;
+            screenCard.children.push({id: item, size: c.layout.size, matrix: c.layout.transformMatrix as string} );
+         })
+         screenCards.push(screenCard);
+      })
+      return screenCards;
    }
 
    getCurrScreenHeight() {
       const pageValue = this.state
-      if ( pageValue.useFor == "pc") {
+      if ( pageValue.screen.useFor == "pc") {
          return PCDesignHeight;
       }
       const currScreenIndex = this.getAdapterIndex();
@@ -90,7 +145,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    getCurrScreenWidth() {
       const currScreenIndex = this.getAdapterIndex();
       const pageValue = this.state
-      if ( pageValue.useFor == "pc" ) {
+      if ( pageValue.screen.useFor == "pc" ) {
          return PCWidths[currScreenIndex];
       }
       return MobleDesignWidth

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

@@ -608,12 +608,12 @@ export const editActions = EditorModule.action({
       // 清除无用组件
       this.helper.clearUnusedComps(this.store.designData.compMap);
       const c = this.controls.screenCtrl;
-
+      c.saveScreenPage();
       const root = this.helper.findRootComp() as DesignComp;
-      root.value.useFor = c.state.useFor;
-      root.value.pageMode = c.state.pageMode;
-      root.value.pageSizeType = c.state.pageSizeType;
-
+      root.value.useFor = c.state.screen.useFor;
+      root.value.pageMode = c.state.screen.pageMode;
+      root.value.pageSizeType = c.state.screen.pageSizeType;
+      
       // 封面截屏
       if (!this.store.designData.thumbnail) {
         await this.actions.updateThumbnailByScreenshot();

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

@@ -30,11 +30,6 @@ export const initActions = EditorModule.action({
     const ret = await this.https.getDesignDetail(id, { isSys });
     this.store.setDesignData(ret.result);
 
-    const root = this.helper.findRootComp() as DesignComp;
-    this.controls.screenCtrl.state.useFor = root.value.useFor || "mobile";
-    this.controls.screenCtrl.state.pageMode = root.value.pageMode || "long";
-    this.controls.screenCtrl.state.pageSizeType = root.value.pageSizeType || "normal";
-  
     //设置组件父子关系
     const ite = (root:any)=> {
       const cards = root.children?.default || [];
@@ -47,6 +42,15 @@ export const initActions = EditorModule.action({
       })
     }
     ite(this.store.rootPage);
+
+    const root = this.helper.findRootComp() as DesignComp;
+    this.controls.screenCtrl.state.screen.useFor= root.value.useFor || "mobile"
+    this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode || "long"  
+    this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType || "normal"
+
+    if ( !root.value.useFor && !root.value.pageMode ) {//模板版本
+
+    }
   },
 
   async initWkDesign(id: string) {

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

@@ -1,5 +1,11 @@
 import { DesignComp } from "./DesignComp";
 import { dataTransform } from "./versions/1.0.0";
+import { dataTransform as V101Upgrade } from "./versions/1.0.1";
+
+export type CardState = {
+  id: string;
+  children: {id:string, matrix: string, size: [number, number, { unit?: "px" | "%" }?]}[]
+}
 
 export class DesignTemp {
   version?: string;
@@ -7,13 +13,14 @@ export class DesignTemp {
   title = "";
   desc = "";
   pageStyle?: any;
-  content: string[] = ["root"];
+  content: string[] = ["root"]; //rootPcShort rootPcNormal rootPcLong rootMobShort rootMobLong
   thumbnail?: string;
   compMap: { [compId: string]: DesignComp } = {};
+  compScreenMap: {[Screen: string]: CardState[]} = {}
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    Object.assign(this, dataTransform(data));
+    Object.assign(this, V101Upgrade(dataTransform(data)));
     // 初始化DesignComp
     Object.entries(this.compMap).forEach(([key, value]) => {
       this.compMap[key] = new DesignComp(value);

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

@@ -0,0 +1,14 @@
+import { ScreenCtrl } from "@/modules/editor/controllers/ScreenCtrl";
+export function dataTransform(data: any) {
+  if (data.version == "1.0.1") {
+    return data;
+  }
+  data.version = "1.0.1";
+  if (!data.compScreenMap) { //默认为手机 long页面
+        data.compMap.root.value.pageMode = "long";
+        data.compMap.root.value.useFor = "mobile";
+        data.compMap.root.value.pageSizeType = "normal";
+      data.compScreenMap = {"mobilelongnormal": ScreenCtrl.createScreenCards(data.compMap, data.compMap.root)}
+   }
+   return data;
+}