Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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/Page/component.tsx

@@ -46,7 +46,7 @@ export const Component = defineComponent({
           class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
         >
           {
-             store.isDisplay && <div class="relative z-1000" style={contextStyle}>
+             (store.isDisplay || (store.isEditMode && controls.screenCtrl.state.screen.pageMode != "short")) && <div class="relative z-1000" style={contextStyle}>
              {slots.Container?.(
                children.default.map((compId) => {
                  const comp = helper.findComp(compId);
@@ -56,15 +56,14 @@ export const Component = defineComponent({
              )}
              {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>
-
+            store.isEditMode && controls.screenCtrl.state.screen.pageMode == "short" && store.currStreamCard && <div class="relative z-1000" style={contextStyle}>
+              {
+                slots.Container?.( [slots.CompItem?.(store.currStreamCard)])
+              }
+            </div>
           }
 
         </div>

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";
       // }
@@ -106,21 +96,21 @@ export const View = defineComponent({
           ) as any;
           return (
             <div
-              class="absolute w-full h-150px"
+              class="absolute w-full h-150px pointer-events-none"
               style={{
                 bottom: style.height,
               }}
             >
-              <div class="absolute w-full h-150px pointer-events-none overflow-hidden">
+              {/* <div class="absolute w-full h-150px pointer-events-none overflow-hidden">
                 <PreComp.Component
                   compId={c.id}
                   key={c.id}
                   style={{ position: "absolute", bottom: "0" }}
                 />
-              </div>
+              </div> */}
               <div class={maskStyleUp}></div>
               <div class={[divideStyle, "bottom"]}>
-                <span class="tip">上一页分割线</span>
+                {/* <span class="tip">上一页分割线</span> */}
               </div>
             </div>
           );
@@ -142,14 +132,14 @@ export const View = defineComponent({
             c.compKey
           ) as any;
           return (
-            <div class="relative">
-              <div class="h-150px pointer-events-none overflow-hidden">
+            <div class="relative pointer-events-none">
+              {/* <div class="h-150px pointer-events-none overflow-hidden">
                 <AfterComp.Component compId={c.id} key={c.id} />
-              </div>
+              </div> */}
 
               <div class={maskStyle}></div>
               <div class={[divideStyle, "top"]}>
-                <span class="tip">下一页分割线</span>
+                {/* <span class="tip">下一页分割线</span> */}
               </div>
             </div>
           );
@@ -279,6 +269,7 @@ const viewStyle = css`
   position: relative;
   font-size: 0;
   cursor: pointer;
+  flex-shrink: 0;
 
   > :first-child {
     width: 100%;
@@ -318,6 +309,7 @@ const CurrCompStyle = css`
   position: relative;
   outline: 1px solid @inf-primary-color;
   z-index: 998;
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
 `;
 
 //box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);

src/modules/editor/components/TipIcons/index.ts

@@ -48,7 +48,7 @@ import { FontSize } from "./TipIcon";
 export const TipIcons = {
   Move: createTipIcon({
     icons: [IconMove],
-    tips: ["移动模式"],
+    tips: ["平移"],
   }),
   Rename: createTipIcon({
     icons: [IconEdit],

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

@@ -162,12 +162,14 @@ export default defineUI({
             <div class={editLayerStyle} ref={editLayerRef}></div>
           </div>
           <canvas class={selectCls} ref={refs.canvas} />
-          <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>
-            <div class="ruler bottom" id="rulerBottom"></div> */}
-          </div>
+            <div class="ruler right" id="rulerRight"></div>
+            <div class="ruler bottom" id="rulerBottom"></div> 
+          </div> */}
+          
         </div>
         </div>
       );

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

@@ -36,8 +36,15 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
      const ParentRef = ref<HTMLElement>();
      const PageRef = ref<HTMLElement>();
      const CanvasRef = ref<HTMLElement>();
-     const init = () => {
-        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value) return;
+     let inited = false;
+
+     const init = () => {    
+        if (!EditorRef.value || !CanvasRef.value || !ParentRef.value  || inited) return;
+        
+        clearInterval(refInteral.value) 
+        refInteral.value = null;
+        inited = true;
+    
         console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
         EditorRef.value.style.width = this.state.width + "px";
         EditorRef.value.style.height = this.state.height + "px";
@@ -53,8 +60,9 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         this.initEditorEvent(EditorRef.value, ParentRef.value as any);
      }
 
+     const refInteral = ref();
      onMounted(()=>{
-        setTimeout(init, 200);
+       refInteral.value = setInterval(init, 100);
      })
 
      this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
@@ -120,6 +128,11 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
         moveY = e.pageY;
     });
 
+    
+    parent.addEventListener("mouseup",(e:MouseEvent)=>{
+        if(this.state.moveMode) this.moveEditor();
+    })
+
     document.addEventListener("mouseup",(e:MouseEvent)=>{
         if(!this.isMoving()){
             parent.style.cursor = "default";

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

@@ -95,6 +95,14 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
 
   init() {
     const { module, hotKeys } = this;
+    document.addEventListener('keydown',(event) =>{
+      // 判断按下的键是否是 Ctrl 键和 A 键
+      if (event.ctrlKey && event.key === 'a') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.actions.ctrlAndA();
+      }
+    });
 
     hotkeys(
       hotKeys.map((d) => d.hotKey).join(","),

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/controllers/SelectCtrl/index.ts

@@ -659,12 +659,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
 
     this.assistCtrl?.flashDrawCardDists();
-    this.transferStyle.showGizmo = false;
+    this.transferStyle.showGizmo = false; 
+
+    const s = this.controls.editorCtrl.state.scale;
+
 
     //@ts-ignore
     const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
-    this.transferStyle.baseCardTop = yoff + "px";
-
+    this.transferStyle.baseCardTop = yoff / s  + "px";
+    
     const selector = this.objContainer as ObjsContainer;
     if (!selector) {
       return;

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

@@ -38,7 +38,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       }
       blocks[blocks.length - 1] = blocks[blocks.length - 1].replace(
         pTagReg,
-        `$1$2${alink}$3`
+        `$1$3${alink}$4`
       );
       this.actions.updateCompData(
         this.store.currComp,

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

@@ -488,7 +488,13 @@ export const editActions = EditorModule.action({
     childs.push(...ids);
     this.store.currStreamCard.children.default = childs;
   },
-
+  ctrlAndA() {
+    const childrens = (this.store.currStreamCard.children.default ||[]).slice(0);
+    this.actions.selectObjs(childrens);
+    // this.controls.selectCtrl.
+    //objc.updateSize();
+    //selectCtrl.upgateGizmoStyle();
+  },
   // 删除组件
   removeSelectComps() {
     const selected = this.store.selected.slice(0);
@@ -551,6 +557,7 @@ export const editActions = EditorModule.action({
   },
   // 移动组件顺序
   moveComp(selIndex: number, targetIndex: number) {
+    this.actions.selectObjs([]);
     if (selIndex === targetIndex) return;
     this.store.moveComp(selIndex, targetIndex);
   },

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" | "%" }?]}[]
 }
 

src/pages/editor/index.ts

@@ -5,7 +5,7 @@ import { initResource } from "@/modules/resource";
 // import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 
-document.title = "推广编辑器";
+document.title = "Queen5.鲲舞";
 
 startApp(router, [initAuthDef, initResource, initLauncher], (app) => {
   // app.use(CKEditor);

src/pages/website/index.ts

@@ -7,7 +7,7 @@ import { initResource } from "@/modules/resource";
 import router from "./router";
 import { initRemSize } from "@/hooks/initRemSize";
 
-document.title = "推广编辑器";
+document.title = "Queen5.鲲舞";
 startApp(
   router,
   [initViewportSize, initRemSize, initAuthDef, initResource, initEditor],