update

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

@@ -71,7 +71,7 @@ export const View = defineComponent({
                   </div>
                    <div class={maskStyleUp}></div>
                     <div class={[divideStyle, "bottom"]} >
-                      <span class="tip">上页内容</span>
+                      <span class="tip">上一页分割线</span>
                     </div>
 
              </div> );
@@ -93,7 +93,7 @@ export const View = defineComponent({
         
              <div class={maskStyle}></div>
              <div class={[divideStyle, "top"]} >
-                <span class="tip">下页内容</span>
+                <span class="tip">下一页分割线</span>
              </div>
            </div>);
         }
@@ -240,10 +240,11 @@ const AnchorCompStyle = css`
 const CurrCompStyle = css`
   position: relative;
   outline: 1px solid @inf-primary-color;
-  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
   z-index: 998;
 `;
 
+//box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
+
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;
 `;
@@ -301,7 +302,7 @@ const divideStyle = css`
     font-size: 12px;
     position: absolute;
     left: 100%;
-    width: 50px;
+    width: 80px;
     top: -10px;
     color: #EB684E;
   }

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

@@ -73,6 +73,8 @@ export default defineUI({
                     const r = c.layout.size[1] / c.layout.size[0];
                     let h = (80 * r);
                     if (h>80) h = 80;
+                    if (h <40 ) h = 40;
+
                     const style:any = {height:h+ "px"}
                     if (store.currStreamCardId == item) {
                       style.border = "3px solid #EA9E40"
@@ -85,7 +87,7 @@ export default defineUI({
                              actions.removeStreamCard(item);
                           }} class="deleteitem absolute right-4px top-4px text-black" />
 
-                          <Comp compId={c.id} style={{transformOrigin:"0 0", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
+                          <Comp compId={c.id} style={{transformOrigin:"0 0", pointerEvent:"none", transform: `scale(${80.0 / helper.designSizeToPx(c.layout.size[0])})`}} />
                       </div>
                     </Draggable>)
                   })
@@ -105,9 +107,35 @@ export default defineUI({
                   Container(children: any) {
                     return (
                       <>
-                        <div>
+                        <Container behaiver="drop-zone"
+                        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;
+                        }}
+
+                        onDrop={(e: any) => {
+                            debugger;
+                            if (e.payload) {
+                              console.log("xx a")
+                              actions.addCompToDesign(e.payload, e.addedIndex);
+                            } 
+                          }}>
                             {children}
-                        </div>
+                        </Container>
                         {!state.draging && <SelectTransfer />}
                       </>
                     );

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

@@ -0,0 +1,13 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+
+
+
+export class CtxMenuCtrl extends ModuleControl<EditorModule> {
+    initEvent() {
+        window.oncontextmenu=function(e){
+            //取消默认的浏览器自带右键 很重要！！
+            e.preventDefault();
+        }
+    }
+}

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

@@ -70,7 +70,11 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     // 监听键盘的 keydown 事件
     document.addEventListener("keydown", (event)=>{
         this.state.keyCode = event.keyCode;
+        if (this.isKeyDown(KeySpace)) {
+            parent.style.cursor = "grab";
+        }
     });
+
     // 监听键盘的 keyup 事件
     document.addEventListener("keyup", (event)=>{
         this.state.keyCode = -1;
@@ -93,11 +97,11 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     let moveX = 0, moveY = 0;
     parent.addEventListener("mousemove",(e:MouseEvent)=>{
         //this.state.setMouse({x: e.offsetX, y: e.offsetY});
-
-        if (isMoving) {
+        if (isMoving || e.button == 2) { //鼠标右键
+            e.preventDefault();
+            parent.style.cursor = "grab";
             const xOffset = e.pageX - moveX;
             const yOffset = e.pageY - moveY;
-            console.log(this.state.pos, xOffset, yOffset);
             this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
         }
         moveX = e.pageX;
@@ -105,6 +109,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     });
 
     document.addEventListener("mouseup",(e:MouseEvent)=>{
+        if (isMoving) {
+            parent.style.cursor = "pointer";
+        }
         isMoving = false;
     })
 
@@ -118,8 +125,10 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     })
 
     parent.addEventListener("mousedown", (e:MouseEvent)=>{
-        isMoving = this.isKeyDown(KeySpace)
+        isMoving = this.isKeyDown(KeySpace) || e.button == 2;
         if (isMoving) {
+            parent.style.cursor = "grab";
+            e.preventDefault();
             editorLayer.focus();
         }
         moveX = e.pageX;

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

@@ -27,13 +27,17 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       docHeight: window.innerHeight,  //实际屏幕高度
       safeFactor: 0.8,
    })
-
+   get isShortPage () {
+      return this.state.pageMode == "short";
+   }
+   
    initEvent() {
+      if ( !this.store.isEditMode ) return;
+
       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;
@@ -52,18 +56,26 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    getAdapterIndex() {
+      if(this.state.pageMode == "long") return 1;
       return ["short", "normal", "long"].indexOf(this.state.pageSizeType)
    }
 
    updateAdapterState() {
+      if (!this.store.rootPage) return;
+
       this.store.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
          card.setW(this.getCurrScreenWidth());
-         card.setH(this.getCurrScreenHeight());
+         this.helper.extendStreamCard(card.id);
       })
       const w = this.helper.designSizeToPx(this.getCurrScreenWidth());
       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();
    }
 
    getCurrScreenHeight() {
@@ -78,7 +90,7 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    getCurrScreenWidth() {
       const currScreenIndex = this.getAdapterIndex();
       const pageValue = this.state
-      if ( pageValue.useFor == "pc") {
+      if ( pageValue.useFor == "pc" ) {
          return PCWidths[currScreenIndex];
       }
       return MobleDesignWidth

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

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

src/modules/editor/module/helpers/index.ts

@@ -175,7 +175,7 @@ export const helpers = EditorModule.helper({
 
     const compMap = this.store.designData.compMap;
     const card = compMap[streamCardId];
-    if (this.store.isShortPage) {
+    if (this.controls.screenCtrl.isShortPage) {
        card.setH(this.controls.screenCtrl.getCurrScreenHeight());
        return;
     }

src/modules/editor/module/index.ts

@@ -26,6 +26,7 @@ import { AnimCtrl } from "../controllers/AnimCtrl";
 import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
 import { ScreenCtrl } from "../controllers/ScreenCtrl";
 import { EditorCtrl } from "../controllers/EditorCtrl";
+import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -70,6 +71,7 @@ export class EditorModule extends ModuleRoot {
     animCtrl: new AnimCtrl(this),
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
+    menuCtrl: new CtxMenuCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();
@@ -78,6 +80,7 @@ export class EditorModule extends ModuleRoot {
     this.actions.init();
     this.controls.animCtrl.initEvent();
     this.controls.screenCtrl.initEvent();
+    this.controls.menuCtrl.initEvent();
   }
 
   jumpIndexHtml(route = "#/") {

src/modules/editor/module/stores/index.ts

@@ -33,10 +33,6 @@ export const store = EditorModule.store({
     },
   }),
   getters: {
-    isShortPage(state) {
-      return state.designData.compMap["root"]?.value.pageMode == "short";
-    },
-
     rootPage(state) {
       return state.designData.compMap["root"] as DesignComp;
     },