update

package.json

@@ -71,6 +71,7 @@
     "queen3d": "^0.0.80",
     "queenjs": "^1.0.0-beta.77",
     "rimraf": "^3.0.2",
+    "rxjs": "^7.8.1",
     "scp2": "^0.5.0",
     "swiper": "^8.4.4",
     "three": "^0.146.0",

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

@@ -8,6 +8,7 @@ import { PageMusic } from "./PageMusic";
 import { Select } from "ant-design-vue";
 import { MusicOptions } from "./localMusic";
 import { css } from "@linaria/core";
+import screen from "./screen";
 const styleColumns = (muisc?: string): ColumnItem[] => {
   return [
     {
@@ -25,37 +26,14 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
     },
-    {
-      label: "屏幕类型",
-      dataIndex: "value.useFor",
-      component: Select,
-      props: {
-        class: "w-full flex-1 overflow-hidden",
-        options: [{ label: "手机", value: "mobile" }, { label: "PC", value: "pc" }],
-      },
-    },
-    {
-      label: "页面模式",
-      dataIndex: "value.pageMode",
-      component: Select,
-      props: {
-        class: "w-full flex-1 overflow-hidden",
-        options: [{ label: "长页", value: "long" }, { label: "翻页", value: "short" }],
-      },
-    },{
-      label: "屏幕长度",
-      component: Select,
-      dataIndex: "value.pageSizeType",
-      props: {
-        class: "w-full flex-1 overflow-hidden",
-        options: [{ label: "短屏幕", value: "short" }, { label: "普通屏幕", value: "normal"},  { label: "长屏幕", value: "long"}],
-      },
-    },
     {
       dataIndex: "value.music",
       component: PageMusic,
       isVisible: (value, data) => data?.value?.music != "" && muisc != "",
     },
+    {
+      component: screen,
+    }
   ];
 };
 export const PageForm = defineComponent({

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

@@ -13,7 +13,7 @@ export const Component = defineComponent({
   },
   setup(props, { slots }) {
     const editor = useEditor();
-    const { helper, store } = editor;
+    const { helper, store, controls } = editor;
     const compRef = useCompRef(props.compId);
 
   
@@ -31,7 +31,7 @@ export const Component = defineComponent({
       }
 
       let contextStyle:any = null;
-      if (store.rootPage.value.pageMode == "short") {
+      if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
         contextStyle = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
         if (!store.shortPage.isMoving) {
           contextStyle.transition = "transform .4s ease-out";
@@ -44,16 +44,28 @@ export const Component = defineComponent({
           style={style}
           class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
         >
-          <div class="relative z-1000" style={contextStyle}>
-            {slots.Container?.(
-              children.default.map((compId) => {
-                const comp = helper.findComp(compId);
-                if (!comp) return;
-                return slots.CompItem?.(comp);
-              })
-            )}
-            {curValue?.value && !editor.store.isEditMode && <PageMusic />}
+          {
+             store.isDisplay && <div class="relative z-1000" style={contextStyle}>
+             {slots.Container?.(
+               children.default.map((compId) => {
+                 const comp = helper.findComp(compId);
+                 if (!comp) return;
+                 return slots.CompItem?.(comp);
+               })
+             )}
+             {curValue?.value && !editor.store.isEditMode && <PageMusic />}
+           </div>
+ 
+          }
+          {
+            store.isEditMode && store.currStreamCard && <div class="relative z-1000" style={contextStyle}>
+            {
+              slots.Container?.( [slots.CompItem?.(store.currStreamCard)])
+            }
           </div>
+
+          }
+
         </div>
       );
     };

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

@@ -0,0 +1,35 @@
+import { useEditor } from "@/modules/editor"
+import { Select } from "ant-design-vue"
+import { defineComponent } from "vue"
+
+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);
+                        }} 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"}]}  />
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -9,6 +9,7 @@ export function useCompRef(compId: string) {
   provide("compParentId", compId);
   store.setCompPid(compId, parentId);
 
+  
   onMounted(() => {
     const comp = helper.findComp(compId);
     if (comp) {

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

@@ -28,11 +28,11 @@ export default defineUI({
     const NotFoundComp = () => <div>无效的组件</div>;
     const flagRef = ref();
     const containRef = ref();
-    const selectCanvasRef = ref();
-    const viewportRef = ref();
     controls.cropCtrl.modifyCtrl.toolbars = TipIcons;
     const editLayerRef = ref();
 
+    const refs = controls.editorCtrl.useEditor();
+
     return () => {
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
@@ -44,77 +44,25 @@ export default defineUI({
         setTimeout(() => {
           actions.onViewReady(
             pageRoot.$el,
-            selectCanvasRef.value,
-            viewportRef.value
+            refs.canvas.value,
+            refs.parent.value
           );
           helper.initEditLayer(editLayerRef.value);
-        }, 0);
+        }, 100);
       }
 
       return (
-        <div class="scrollbar overflow-y-auto flex-1" ref={viewportRef}>
-          <div class="relative">
-            <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
+        <div ref={refs.parent} class="scrollbar overflow-y-auto flex-1">
+          <div ref={refs.editor}>
+            <div ref={refs.page}  class={"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;
-                            }
-
-                            console.log("payload===>", "xxx", payload);
-                            
-                            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} />
-                        } */}
-
+                        <div>
+                            {children}
+                        </div>
                         {!state.draging && <SelectTransfer />}
                       </>
                     );
@@ -124,9 +72,7 @@ export default defineUI({
                       controls.compUICtrl.state.components.get(comp.compKey)
                         ?.Component || NotFoundComp;
                     return (
-                      <Draggable key={comp.id}>
                         <Comp compId={comp.id} />
-                      </Draggable>
                     );
                   },
                 }}
@@ -134,9 +80,9 @@ export default defineUI({
             </div>
 
             <div class={editLayerStyle} ref={editLayerRef}></div>
-            <canvas class={selectCls} ref={selectCanvasRef} />
+            <canvas class={selectCls} ref={refs.canvas} />
           </div>
-          <div class={meatureStyle}>
+          <div class={meatureStyle}>      
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
             {/* <div class="ruler right" id="rulerRight"></div>
@@ -149,13 +95,13 @@ export default defineUI({
 });
 
 const contentCls = css`
+   position: absolute;
   .dndrop-container.vertical > .dndrop-draggable-wrapper {
     overflow: unset;
   }
 `;
 const selectCls = css`
   pointer-events: none;
-  position: fixed;
   left: 0;
   top: 0;
   width: 100%;

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

@@ -0,0 +1,173 @@
+import { Effect, ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { Matrix } from "../SelectCtrl/matrix";
+import {ref, onMounted, nextTick} from "vue";
+import { RxValue } from "../ReactCtrl/rxValue";
+import { DisplayObject } from "../SelectCtrl/objects/displayObject";
+import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
+
+
+const KeySpace = 32;
+
+export class EditorCtrl extends ModuleControl<EditorModule> {
+
+
+    state = RxValue.create({
+        width: 1500,
+        height: 1000,
+        pos: {
+            x: 0, y:0
+        },
+        
+        scale:  1,
+        mouse: {x: 0, y: 0},
+        keyCode: -1,
+
+        page: {w: 375, h: 650}
+    })
+
+    doms:any = {};
+
+  useEditor() {
+     const EditorRef = ref<HTMLElement>();
+     const ParentRef = ref<HTMLElement>();
+     const PageRef = ref<HTMLElement>();
+     const CanvasRef = ref<HTMLElement>();
+     const init = () => {
+        if (!EditorRef.value || !CanvasRef.value) return;
+        console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
+        EditorRef.value.style.width = this.state.width + "px";
+        EditorRef.value.style.height = this.state.height + "px";
+        EditorRef.value.style.position = "absolute";
+        EditorRef.value.style.backgroundColor = "greenyellow";
+        EditorRef.value.style.left = "0";
+        EditorRef.value.style.top = "0";
+
+        CanvasRef.value.style.width = "100%"
+        CanvasRef.value.style.height = "100%"
+        EditorRef.value.style.position = "absolute";
+
+        this.initEditorEvent(EditorRef.value, ParentRef.value as any);
+     }
+
+     onMounted(()=>{
+        setTimeout(init, 200);
+     })
+
+     this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
+     return this.doms;
+  }
+  
+  isKeyDown( key:number) {
+    return this.state.keyCode === key;
+  }
+  isMoving() {
+    return this.isKeyDown(KeySpace);
+  }
+  Obj = new ObjsContainer([]);
+
+  initEditorEvent(editorLayer: HTMLElement , parent:HTMLElement) {
+
+    const Obj = this.Obj;
+    Obj.rect.width = this.state.width;
+    Obj.rect.height = this.state.height;
+
+    // 监听键盘的 keydown 事件
+    document.addEventListener("keydown", (event)=>{
+        this.state.keyCode = event.keyCode;
+    });
+    // 监听键盘的 keyup 事件
+    document.addEventListener("keyup", (event)=>{
+        this.state.keyCode = -1;
+        isMoving = false;
+    });
+    
+
+    editorLayer.addEventListener("wheel", (event:any)=>{
+        // 检查滚轮方向
+        let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
+        console.log( delta );
+
+        let s = this.state.scale +  0.1 * delta
+        if ( s < 0.5 ) s = 0.5;
+        if (s > 2) s = 2.0;
+        this.state.setScale( s)
+    });
+
+    let isMoving = false;
+    let moveX = 0, moveY = 0;
+    editorLayer.addEventListener("mousemove",(e:MouseEvent)=>{
+        this.state.setMouse({x: e.offsetX, y: e.offsetY});
+
+        console.log("move", isMoving);
+
+        if (isMoving) {
+            const xOffset = e.pageX - moveX;
+            const yOffset = e.pageY - moveY;
+            console.log(xOffset, yOffset);
+            this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
+
+            moveX = e.pageX;
+            moveY = e.pageY;
+        }
+    });
+
+    document.addEventListener("mouseup",(e:MouseEvent)=>{
+        isMoving = false;
+    })
+
+    this.state.onScaleChanged((v)=>{
+        Obj.setPivot2(this.state.width / 2, this.state.height / 2);
+        Obj.scale(v, v);
+        editorLayer.style.transform = `scale(${v})`;
+        editorLayer.style.transformOrigin = "50% 50%";
+    })
+    this.state.onPosChanged((v)=>{
+        editorLayer.style.left= v.x + "px";
+        editorLayer.style.top = v.y + "px";
+    })
+    
+    editorLayer.addEventListener("mousedown", (e:MouseEvent)=>{
+        isMoving = this.isKeyDown(KeySpace)
+        if (isMoving) {
+            editorLayer.focus();
+        }
+        moveX = e.pageX;
+        moveY = e.pageY;
+    })
+
+    window.addEventListener("resize", ()=>this.updateEditorSize());
+    this.state.onPageChanged(()=>this.updateCardSize());
+  }
+
+  updateCardSize() {
+    const page = this.doms.page.value as HTMLElement;
+    const state = this.state;
+    page.style.left = (state.width - state.page.w) / 2.0 + "px";
+    page.style.top = (state.height - state.page.h) / 2.0 + "px";
+
+    console.log("size");
+
+    this.updateEditorSize();
+  }
+
+  updateEditorSize() {
+    const page = this.doms.editor.value as HTMLElement;
+    const state = this.state;
+    const parent = this.doms.parent.value as HTMLElement;
+
+    console.log( parent.clientWidth, parent.clientHeight);
+
+    const left = ( parent.clientWidth - state.width) / 2.0
+    const top =  (parent.clientHeight - state.height) / 2.0
+
+    // this.Obj.parent.x = 0;
+    // this.Obj.parent.y = 0;
+    // this.Obj.parent.updateTransform();
+    // page.style.transform = this.Obj.parent.worldTransform.getMatrixStr();
+
+    page.style.left = left + "px";
+    page.style.top = top + "px";
+  }
+}

src/modules/editor/controllers/ReactCtrl/history.ts

@@ -0,0 +1,76 @@
+import {reactive,  computed} from "vue"
+import { ValueSnap } from "./rxValue";
+
+export class HistoryController {
+  state = reactive({
+        currLen: 0, //操作栈的长度
+        maxLen: 100, //操作栈总长度
+        opIndex: -1, //操作栈的指针
+  });
+
+  refCanUndo = computed(() => {
+    return this.state.opIndex >= 0;
+  });
+  refCanRedo = computed(() => {
+    return this.state.opIndex < this.state.currLen - 1;
+  });
+
+  queues: Map<string, ValueSnap>[] = [];
+  cacheSnapValues = new Map<string , ValueSnap>();
+
+  // 添加缓存记录
+  record(snap: ValueSnap) {
+    const first = this.cacheSnapValues.get(snap.Id)
+    if (first) {
+        snap.OldValue = first.OldValue;
+    }
+    this.cacheSnapValues.set(snap.Id, snap);
+  }
+
+  // 保存缓存记录到历史栈中
+  submit() {
+    if (this.cacheSnapValues.size < 1) return;
+
+    const state = this.state;
+    const queue = this.queues;
+
+    // 将缓存操作记录保存到当前指针的下一栈中
+    queue[++state.opIndex] = this.cacheSnapValues;
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+
+    // 设置栈的长度为指针的长度，舍弃后面的记录
+    queue.length = state.opIndex + 1;
+    // 若栈长度超过上限, 舍弃之前的记录
+    if (queue.length > state.maxLen) {
+      queue.splice(0, queue.length - state.maxLen);
+      state.opIndex = state.maxLen - 1;
+    }
+    // 更新当前长度状态
+    state.currLen = queue.length;
+  }
+
+  undo() {
+    if (!this.refCanUndo.value) return;
+
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const snaps = this.queues[this.state.opIndex--]
+
+    snaps.forEach((vn)=>vn.undo())
+  }
+
+  redo() {
+    if (!this.refCanRedo.value ) return;
+    
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const snaps = this.queues[++this.state.opIndex];
+    snaps.forEach(vn=>vn.redo());
+  }
+
+  //清除操作
+  clear() {
+    this.queues = [];
+    this.state.currLen = 0;
+    this.state.opIndex = -1;
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+  }
+}

src/modules/editor/controllers/ReactCtrl/rxValue.ts

@@ -0,0 +1,143 @@
+import { HistoryController } from "./history";
+import {BehaviorSubject} from "rxjs";
+import { reactive } from  "vue";
+
+export class ValueSnap {
+    Id:string;
+    Value: any;
+    OldValue: any;
+
+    Rx: BehaviorSubject<any>;
+    constructor(id:string, value:any, oldValue:any, rx: BehaviorSubject<any>) {
+        this.Id = id;
+        this.Value = value;
+        this.OldValue = oldValue;
+        this.Rx = rx
+    }
+    redo() {
+        this.Rx.next({value: this.Value, _hstry:false});
+    }
+    undo() {
+        this.Rx.next({value: this.OldValue, _hstry:false});
+    }
+
+    clone() {
+        return new ValueSnap(this.Id, this.Value,this.OldValue, this.Rx);
+    }
+}
+
+export type RxValueType<T> = {
+    value: T,
+    _hstry?: boolean
+}
+
+
+function createRxValue<T>(value: T, histry:boolean) {
+    return new BehaviorSubject< RxValueType<T> >({value:value,  _hstry: histry})
+}
+
+let _valueIndex = 0;
+export function createValueSnap(value:any, oldValue:any, rx:BehaviorSubject<any>) {
+  let i = _valueIndex + 1;
+  _valueIndex +=1;
+  return new ValueSnap(i+"", value, oldValue, rx);
+}
+
+class RxValue {
+   static create<T extends {[key:string]: any}>(_fields:T, histroy?: HistoryController ) {
+        let obj = {} as any;
+        
+        obj._historySnap = {} as any;
+        obj._historySub = {} as any;
+        obj._rxs = {} as any;
+        obj._fields = _fields;
+        obj._history = histroy;
+        obj._refs = {} as any;
+
+        const names = Object.keys(_fields);
+        
+        names.forEach(name=>{
+               const currName = name;
+               const initValue = _fields[currName]
+                const f = createRxValue(initValue, !!histroy);
+                obj._rxs[name] = f;
+
+                const snap = createValueSnap(initValue, initValue, f);
+                obj._historySnap[name] = snap;
+                const rxc =  reactive({value: initValue});
+
+                Object.defineProperty(obj, currName, {
+                    get: function(){
+                        return rxc.value;
+                    },
+                    set: function(v) {
+                        f.next({value: v});
+                    },
+                    configurable: true,
+                    enumerable: true
+                })
+
+                const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1);
+                
+                obj["set"+CamName] = function(value:T, nohistory = false){
+                    f.next({value, _hstry: !nohistory});
+                }
+        
+                obj["on"+CamName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
+                    return f.subscribe((v:any)=>{
+                            subscribe(v.value, snap.OldValue)
+                        }
+                    )
+                }
+                
+                obj._historySub[name] = f.subscribe((v)=>{
+                    snap.OldValue = v.value;
+                    rxc.value = v.value;
+
+                    if (obj._history) {
+                        if (!v._hstry) return;
+                        const s = snap.clone();
+                        s.Value = v.value;
+                        obj._history.record(s);
+                    }
+                })
+        });
+
+
+        obj["setHistory"] = function(h: HistoryController){
+            obj._history = h;
+        }
+        obj["toJson"] = function() {
+            const out:any = {};
+            const names = Object.keys(_fields);
+            names.forEach(name=>{
+                out[name] = obj._rxs[name].getValue().value;
+            })
+            return out;
+        }
+        obj["fromJson"] = function(json:any) {
+            const out:any = {};
+            const names = Object.keys(_fields);
+            names.forEach(name=>{
+                obj._rxs[name].next({value: json[name], _hstry: false})
+            })
+            return out;
+        }
+        
+        return obj as typeof _fields & {
+            [K in keyof typeof _fields as `set${Capitalize<string & K>}`]: (value: typeof _fields[K], nohistory?:boolean) => void;
+        } & {
+            [K in keyof typeof _fields as `on${Capitalize<string & K>}Changed`]: (subscribe: (value: typeof _fields[K], oldValue:typeof _fields[K])=>void) => void;
+        } & 
+        // {
+        //     [K in keyof typeof _fields as `ref${Capitalize<string & K>}`]: () => typeof _fields[K];
+        // } &
+        {
+            setHistory: (history: HistoryController)=>void
+            toJson:()=>typeof _fields
+            fromJson:(json:typeof _fields)=>void
+        }
+    }
+}
+
+export {RxValue};

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

@@ -2,6 +2,7 @@ import { Effect, ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
 import { reactive } from "vue";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { RxValue } from "../ReactCtrl/rxValue";
 
 
 // const WidthHeightRatios = [1.377, 1.777, 2.177];
@@ -10,38 +11,76 @@ const MobleDesignWidth = 750;
 const MobleSafeHeights = [860, 1080, 1300]
 const MobleHeights = [1080, 1300, 1520]
 
+const PCWidths = [] as number[];
+const PCDesignHeight = 1520
+const PCRates = [0.42, 0.8];
+
 
 export const MobleScreenNames = ["短屏", "普通", "长屏幕"];
 export class ScreenCtrl extends ModuleControl<EditorModule> {
-   state = reactive({
-      currScreenIndex: 1, //普通屏幕
-      safeTip: 0.5      
+   state = RxValue.create({
+      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,
    })
+
    initEvent() {
-       //监听页面的模式
-     Effect.value(()=>this.store.rootPage?.value).item((v)=>v?.pageMode && v.pageSizeType, (pageValue)=>{
-         console.log("pageMode=>change", pageValue)
-
-         const types = ["short", "normal", "long"];
-         let i = types.indexOf(pageValue.pageSizeType)
-         if (i == -1) i = 1;
-         this.state.currScreenIndex = i;
-
-         if (pageValue.pageMode == "short") {
-            this.onSetShortMode()
-         }
-      }).run();
-   }
-   getCurrScreenHeight() {
+      this.state.onUseForChanged(()=>this.updateAdapterState());
+      this.state.onPageModeChanged(()=>this.updateAdapterState());
+      this.state.onPageSizeTypeChanged(()=>this.updateAdapterState());
+
 
+      const size = 3;
+      const safeFactor =  Math.pow((PCRates[0] / PCRates[1]) , 1.0 / size);
+      let min = 0.42;
+      const pcDesignWidthRanges = [];
+      for (let i=0; i<size; i++) {
+         const w =  safeFactor * PCDesignHeight / min 
+         let pre = min;
+         min = PCDesignHeight / w;
+         PCWidths.push( w )
+         pcDesignWidthRanges.push([pre, min])
+      }
+      const t = PCWidths[0]
+      PCWidths[0] = PCWidths[2]
+      PCWidths[2] = t; 
+      this.state.safeFactor = safeFactor;
+   }
 
-      return MobleHeights[this.state.currScreenIndex];
+   getAdapterIndex() {
+      return ["short", "normal", "long"].indexOf(this.state.pageSizeType)
    }
 
-   onSetShortMode() {
+   updateAdapterState() {
       this.store.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
+         card.setW(this.getCurrScreenWidth());
          card.setH(this.getCurrScreenHeight());
       })
+      const w = this.helper.designSizeToPx(this.getCurrScreenWidth());
+      const h =  this.helper.designSizeToPx(this.getCurrScreenHeight());
+      this.controls.editorCtrl.state.setPage({w, h});
+   }
+
+   getCurrScreenHeight() {
+      const pageValue = this.state
+      if ( pageValue.useFor == "pc") {
+         return PCDesignHeight;
+      }
+      const currScreenIndex = this.getAdapterIndex();
+      return MobleHeights[currScreenIndex];
+   }
+
+   getCurrScreenWidth() {
+      const currScreenIndex = this.getAdapterIndex();
+      const pageValue = this.state
+      if ( pageValue.useFor == "pc") {
+         return PCWidths[currScreenIndex];
+      }
+      return MobleDesignWidth
    }
 }

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

@@ -167,6 +167,20 @@ export class ObjsContainer {
         return { x: point.x, y: point.y};
     }
 
+    setPivot2(x:number, y:number) {
+      
+        let targetPivot = {x, y}
+        let point = { x, y } as any;
+        this.parent.worldTransform.apply(point, point);
+
+        this.parent.pivot = targetPivot as any;
+        this.parent.position.x = point.x;
+        this.parent.position.y = point.y;
+        this.parent.updateTransform();
+        return { x: point.x, y: point.y};
+    }
+
+
     getPivotXY(index:number) {
         let rect = this.rect;
         let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];

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

@@ -171,9 +171,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _downClickedCompId = "";
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
-    if (!this.pageEl || !this.selCanvas) return;
-
-    
+    if (!this.pageEl || !this.selCanvas || this.controls.editorCtrl.isMoving() ) return;
 
     document.addEventListener("mousemove", this.onDocMouseMove, {
       capture: true,

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

@@ -29,7 +29,21 @@ export const initActions = EditorModule.action({
   async initDesign(id: string, isSys = false) {
     const ret = await this.https.getDesignDetail(id, { isSys });
     this.store.setDesignData(ret.result);
+    
+    //设置组件父子关系
+    const ite = (root:any)=> {
+      const cards = root.children?.default || [];
+      cards.forEach((c:string)=>{
+          this.store.setCompPid(c, root.id);
+          const r = this.helper.findComp(c);
+          if (r) {
+            ite(r);
+          }
+      })
+    }
+    ite(this.store.rootPage);
   },
+
   async initWkDesign(id: string) {
     this.store.setWk(true);
     const ret = await this.https.getWkDesignDetail(id);

src/modules/editor/module/index.ts

@@ -25,6 +25,7 @@ import { MediaCtrl } from "../controllers/MediaCtrl/indext";
 import { AnimCtrl } from "../controllers/AnimCtrl";
 import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
 import { ScreenCtrl } from "../controllers/ScreenCtrl";
+import { EditorCtrl } from "../controllers/EditorCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -68,6 +69,7 @@ export class EditorModule extends ModuleRoot {
     textEditorCtrl: new TextEditorCtrl(this),
     animCtrl: new AnimCtrl(this),
     screenCtrl: new ScreenCtrl(this),
+    editorCtrl: new EditorCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();

yarn.lock

@@ -7628,6 +7628,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "http://124.70.149.18:4873/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "http://124.70.149.18:4873/safe-buffer/-/safe-buffer-5.1.2.tgz"