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

import { Effect, ModuleControl } from "queenjs";
import { EditorModule } from "../../module";
import { reactive } from "vue";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { RxValue } from "../ReactCtrl/rxValue";
import { CardState } from "../../objects/DesignTemp";
import { isPc } from "@queenjs/utils";

const PCConst = {
   minRate: 0.42,
   maxRate: 0.8,
   height: 1520,
   factor: 0.8067,
   widths: [1900, 2356, 2920],
   ranges: [[0.64537, 0.8], [0.52063, 0.64537], [0.42, 0.52063]]
}

const MobileConst = {
   minRate: 0.4495,
   maxRate: 0.75,
   width: 750,
   factor: 0.84312,
   heights: [1000, 1186, 1406],
   ranges: [[0.63234, 0.75], [0.5331387120830735, 0.632340125298328], [0.4495, 0.5331387120830735]]
}

const AllSize = ["short","normal", "long"];

export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
export class ScreenCtrl extends ModuleControl<EditorModule> {
   state = RxValue.create({
      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,
      currScreenId: ""
   })

   get isShortPage () {
      return this.state.screen.pageMode == "short";
   }
   get isLongPage() {
      return this.state.screen.pageMode == "long";
   }
   get currScreenId() {
      return this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
   }
   
   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());
       
      const {factor, sizes, ranges} = this.createSteps(MobileConst.width, MobileConst.minRate,  MobileConst.maxRate)
      console.log("range=>", ranges, factor, sizes);

      console.log( this.getRightScreenId() );
   }

   createSteps(base: number, min:number, max:number, size = 3) {
      const factor =  Math.pow((min / max) , 1.0 / size);
      const ranges = [];
      const sizes = [];

      for (let i=0; i<size; i++) {
         const w =  factor * base / min 
         let pre = min;
         min = base / w;
         sizes.push( w )
         ranges.push([pre, min])
      }
      const t = sizes[0]
      sizes[0] = sizes[2]
      sizes[2] = t;
      
      const t2 = ranges[0]
      ranges[0] = ranges[2]
      ranges[2] = t2;

      return {factor, sizes, ranges}
   } 

   getAdapterIndex() {
      if(this.state.screen.pageMode == "long") return 1;
      return ["short", "normal", "long"].indexOf(this.state.screen.pageSizeType)
   }

   applyScreen() {
      const option = this.getRightScreenId();
      if ( this.isScreenExit(option.sreenId) ) {
         this.restorScreenPage(option.sreenId);
         this.state.currScreenId = option.sreenId;
         return;
      }

      let n= AllSize.length;
      while(n--) {
         const screenId = option.device + option.pageMode + AllSize[n];
         if ( this.isScreenExit(screenId) ) {
            this.restorScreenPage(screenId);
            this.state.currScreenId = screenId;
            return;
         }
      }
      if (option.pageMode == "short") {
         option.pageMode = "long"; 
         return;
      }

      if (option.pageMode == "long") {//如果长页面模式找一个合适端页面拼成长页面
         let n= AllSize.length;
         while(n--) {
            const screenId = option.device + "short" + AllSize[n];
            if ( this.isScreenExit(screenId) ) {
               this.restorScreenPage(screenId);
               this.state.currScreenId = screenId;
               return;
            }
         }
      }
   }

   getRightScreenId() {
      const currScreen = isPc() ? "pc" : "mobile";
      const rate = isPc() ? window.innerHeight / window.innerWidth : window.innerWidth / window.innerHeight;

      const sizes = currScreen == "pc" ? PCConst.ranges : MobileConst.ranges;
      let n = 3;
      let index = 1;
      while(n--) {
        const m = sizes[n]
        if (rate >= m[0]) {
             index = n;
        }
      }
      if (this.state.screen.pageMode == "long") index = 1;

      console.log("rate=>", rate);

      const sreenId = currScreen + this.state.screen.pageMode + ["short", "normal", "long"][index];
      return {sreenId, index, device: currScreen, pageMode: this.state.screen.pageMode};

   }

   updateAdapterState() {
      const page = this.controls.pageCtrl;
      if (!page.rootPage) return;

      this.restorScreenPage();
      let total = 0;
      page.streamCardIds.forEach(c=>{
         const card = this.helper.findComp(c) as DesignComp;
         card.setW(this.getCurrScreenWidth());
         total += this.helper.extendStreamCard(card.id);
      })
      const w = this.helper.designSizeToPx(this.getCurrScreenWidth());
      let h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
      if (this.state.screen.pageMode == "long") {
         h = this.helper.designSizeToPx(total)
      }
      
      this.controls.editorCtrl.state.setPage({w, h});
      page.rootPage.layout.size[0] = this.getCurrScreenWidth();
      page.rootPage.layout.size[1] = this.getCurrScreenHeight(); 

      this.state.safeFactor = this.state.screen.useFor == "pc" ? PCConst.factor : MobileConst.factor;

      this.state.currScreenId = this.currScreenId;
   }
   isScreenExit(screenId:string) {
      const page = this.controls.pageCtrl;
      return !!page.designData.compScreenMap[screenId] && 
         page.designData.compScreenMap[screenId].length > 0 &&
         page.designData.compScreenMap[screenId][0].children.length > 0;
   }

   restorScreenPage(screenId = "") {
      const page = this.controls.pageCtrl;
      if (!page.rootPage) return;
         

      //获取当前screen的配置
      screenId = screenId ? screenId : this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
      const screenCards = page.designData.compScreenMap[screenId] || [];

      console.log("apply screen=>", screenId);

      //刷新当前card的配置
      page.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 || [];
         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;
            screenComp.layout.size[0] = item.size[0];
            screenComp.layout.size[1] = item.size[1];
            screenComp.layout.transformMatrix = item.matrix;
         })
         card.children.default = newChilds;
      })
   }

   saveScreenPage() {
      const page = this.controls.pageCtrl;
      
      //获取当前screen的配置
      const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
      const screenCards =  ScreenCtrl.createScreenCards(this.store.compMap, page.rootPage);
      if (!page.designData.compScreenMap) page.designData.compScreenMap = {};
      page.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,
            size: [card.layout.size[0], card.layout.size[1]],
            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.screen.useFor == "pc") {
         return PCConst.height;
      }
      const currScreenIndex = this.getAdapterIndex();
      return MobileConst.heights[currScreenIndex];
   }

   getCurrScreenWidth() {
      const currScreenIndex = this.getAdapterIndex();
      const pageValue = this.state
      if ( pageValue.screen.useFor == "pc" ) {
         return PCConst.widths[currScreenIndex];
      }
      return MobileConst.width;
   }
}