update

src/modules/editor/components/CompUI/basicUI/Container/index.ts

@@ -14,7 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
-    size: [750, 700],
+    size: [750, 300],
     // background: {
     //   color: "#ffffff",
     // },

src/modules/editor/components/CompUI/basicUI/Image2/index.ts

@@ -12,7 +12,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1 },
   layout: {
-    size: [400, 400],
+    size: [750, 400],
   },
 });
 

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

@@ -3,6 +3,7 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
+import { css } from "@linaria/core";
 
 export const Component = defineComponent({
   props: {
@@ -15,7 +16,7 @@ export const Component = defineComponent({
     const compRef = useCompRef(props.compId);
 
     return () => (
-      <div ref={compRef} style={helper.createStyle(layout)} class="!h-auto">
+      <div ref={compRef} style={helper.createStyle(layout)} class={["!h-auto" , editor.store.isEditMode? pageEditStyle :""]}>
         <div class="relative">
           {slots.Container?.(
             children.default.map((compId) => {
@@ -28,3 +29,7 @@ export const Component = defineComponent({
     );
   },
 });
+
+const pageEditStyle = css`
+   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
+`

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -39,32 +39,26 @@ export const SelectTransfer = defineComponent({
       });
     });
 
-    const scaleFlagRef = ref();
-
     return () => {
+      if (selectCtrl.transferStyle.showOrthScale) {
+        nextTick(() => {
+          scaleRightRef.value.editable = "scaleright";
+          scaleLeftRef.value.editable = "scaleleft";
+          scaleTopRef.value.editable = "scaletop";
+          scaleBottomRef.value.editable = "scalebottom";
+        });
+      }
 
-        if (selectCtrl.transferStyle.showOrthScale && !scaleFlagRef.value) {
-            scaleFlagRef.value = true
-            nextTick(()=>{
-                scaleRightRef.value.editable = "scaleright";
-                scaleLeftRef.value.editable = "scaleleft";
-                scaleTopRef.value.editable = "scaletop";
-                scaleBottomRef.value.editable = "scalebottom";
-            })
-        }
-
-      
-
-      let toolbarOpts = CompToolbars.default
-      let comp :any= null;
+      let toolbarOpts = CompToolbars.default;
+      let comp: any = null;
       if (selectCtrl.selected.length == 1) {
-         comp = selectCtrl.selected[0].comp;
+        comp = selectCtrl.selected[0].comp;
         //@ts-ignore
         toolbarOpts = CompToolbars[comp.compKey] || toolbarOpts;
       }
-      
+
       const w = selectCtrl.objContainer?.getBound();
-      
+
       return (
         <div
           class={[
@@ -72,20 +66,23 @@ export const SelectTransfer = defineComponent({
             transferStyle.showGizmo ? showgizmo : hideGizmo,
           ]}
         >
-          <div class={toolbarStyle}  style={{
-             top: w?.y + "px", 
-             left: w?.x + "px",
-          }}>
-
-            {comp && toolbarOpts.map((item) => {
-                  return item.getVisible.call(editor, comp) ? (
-                    <item.component
-                      class="p-4px"
-                      value={item.getValue?.(comp)}
-                      onClick={() => item.onClick.call(editor, comp)}
-                    />
-                  ) : null;
-                })}
+          <div
+            class={toolbarStyle}
+            style={{
+              top: w?.y + "px",
+              left: w?.x + "px",
+            }}
+          >
+            {comp &&
+              toolbarOpts.map((item) => {
+                return item.getVisible.call(editor, comp) ? (
+                  <item.component
+                    class="p-4px"
+                    value={item.getValue?.(comp)}
+                    onClick={() => item.onClick.call(editor, comp)}
+                  />
+                ) : null;
+              })}
           </div>
 
           <div
@@ -132,30 +129,30 @@ export const SelectTransfer = defineComponent({
                 </div>
               </div>
 
-              {
-                
-                transferStyle.showOrthScale && <div
-                    class={[resizeHeightBtnCls, scaleTopCls]}
-                    ref={scaleTopRef}
-                  />
-              }
-              {
-                 transferStyle.showOrthScale &&  <div
-                    class={[resizeHeightBtnCls, scaleBottomCls]}
-                    ref={scaleBottomRef}
-                  />
-              }
-              {
-                transferStyle.showOrthScale && <div
-                    class={[resizeWidthBtnCls, scaleRightCls]}
-                    ref={scaleRightRef}
-                  />
-              }
-               { transferStyle.showOrthScale && <div
-                    class={[resizeWidthBtnCls, scaleLeftCls]}
-                    ref={scaleLeftRef}
-                  />
-              }
+              {transferStyle.showOrthScale && (
+                <div
+                  class={[resizeHeightBtnCls, scaleTopCls]}
+                  ref={scaleTopRef}
+                />
+              )}
+              {transferStyle.showOrthScale && (
+                <div
+                  class={[resizeHeightBtnCls, scaleBottomCls]}
+                  ref={scaleBottomRef}
+                />
+              )}
+              {transferStyle.showOrthScale && (
+                <div
+                  class={[resizeWidthBtnCls, scaleRightCls]}
+                  ref={scaleRightRef}
+                />
+              )}
+              {transferStyle.showOrthScale && (
+                <div
+                  class={[resizeWidthBtnCls, scaleLeftCls]}
+                  ref={scaleLeftRef}
+                />
+              )}
             </>
           </div>
         </div>

src/modules/editor/components/CompUI/basicUI/Transfer/streamCard.tsx

@@ -1,8 +1,9 @@
 import { IconResizeY } from "@/assets/icons";
 import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted } from "vue";
+import { defineComponent, onMounted, onUnmounted , ref} from "vue";
 import { useEditor } from "../../../..";
+import { object } from "vue-types";
 
 export const StreamCardTransfer = defineComponent({
   setup() {
@@ -45,25 +46,6 @@ export const StreamCardTransfer = defineComponent({
                 height: transferStyle.height,
               }}
             />
-
-            <div
-              class={resizeHeightBtnCls}
-              style={{ top: transferStyle.height }}
-              onMousedown={(e) => {
-                e.stopPropagation();
-
-                    streamCardTransferCtrl.mousedown(e, "resizeY", store.currStreamCard)
-                }
-              }
-            >
-              <IconResizeY />
-            </div>
-
-            {/* <div class={hudStyle}>
-                    <IconMove class="draganchor" />
-                    <IconClear />
-                    <IconAdd />
-                </div> */}
           </div>
         )
       );
@@ -71,16 +53,47 @@ export const StreamCardTransfer = defineComponent({
   },
 });
 
+// const ResizeY = defineComponent({
+
+//   props: {
+//     ctrl: object<TransferCtrl>().isRequired,
+//   },
+//   setup(props) {
+//     const editor = useEditor();
+//     const { store, helper } = editor;
+   
+//     const btnRef = ref();
+//     onMounted(()=>{
+//       btnRef.value.editable = "cardResizeY";
+//     })
+
+//     return ()=>(
+//       <div ref={btnRef}
+//               class={resizeHeightBtnCls}
+//               style={{ top: props.ctrl.transferStyle.height }}
+//               onMousedown={(e) => {
+//                   e.stopPropagation();
+//                   props.ctrl.mousedown(e, "resizeY", store.currStreamCard)
+//                 }
+//               }
+//             >
+//               <IconResizeY />
+//             </div>
+//       )
+//     }
+// })
+
+
 const borderStyle = css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  outline: 2px solid @inf-primary-color;
+  outline: 1px solid @inf-primary-color;
   pointer-events: none;
   /* z-index: 999; */
-  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
 `;
 
 const hudStyle = css`

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

@@ -1,7 +1,7 @@
 import { IconAdd, IconMove } from "@/assets/icons";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
-import { defineComponent } from "vue";
+import { defineComponent , onMounted, ref} from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
 import { useCompRef } from "./hooks";
@@ -46,7 +46,7 @@ export const View = defineComponent({
             onMousedown={(e) => {
               if (helper.isGroupCompChild(props.compId)) return;
               e.stopPropagation();
-              
+
               if (store.isEditMode) {
                 actions.pickComp(props.compId);
               }
@@ -65,9 +65,28 @@ export const View = defineComponent({
             
             {slots.default?.()}
           </div>
+          {
+            store.isEditMode && isStreamCard && <Hudop compId={props.compId} />
+          }
+        </div>
+      );
+    };
+  },
+});
 
-          {store.isEditMode && isStreamCard && (
-            <div class="hudop">
+export const Hudop = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { store, actions, helper, controls } = useEditor();
+
+    const opref= ref();
+    onMounted(()=>{
+        opref.value.editable = "hudop";
+    })
+    return ()=>(
+      <div class="hudop" ref={opref}>
               {store.streamCardIds.length > 1 && (
                 <IconMove class="draganchor" />
               )}
@@ -82,13 +101,10 @@ export const View = defineComponent({
                   actions.addCompToDesign("Container", index);
                 }}
               />
-            </div>
-          )}
         </div>
-      );
-    };
-  },
-});
+    )
+  } 
+})
 
 const viewStyle = css`
   position: relative;

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

@@ -78,9 +78,6 @@ export default defineUI({
                             console.log("p", p);
                           }}
                           onDrop={(e: any) => {
-                            console.log(e);
-                            return;
-
                             if (e.payload) {
                               actions.addCompToDesign(e.payload, e.addedIndex);
                             } else {
@@ -93,7 +90,7 @@ export default defineUI({
                         >
                           {children}
                         </Container>
-                        {store.currStreamCardId && (
+                        {store.currStreamCardId && !state.draging && (
                           <StreamCardTransfer
                             key={store.currStreamCardId + streamCardIndex}
                           />

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

@@ -165,9 +165,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let i = 0;
     do {
       if (c.editable) return c.editable;
-      c = div.parentElement;
+      c = c.parentElement;
       i += 1;
-      if (i > 3) {
+      if (i > 5) {
         return;
       }
     } while (c);
@@ -378,6 +378,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   upgateGizmoStyle() {
+    this.helper.extendStreamCard(this.store.currStreamCardId);
+    
     if (this.selected.length < 1) {
       this.transferStyle.showGizmo = false;
       return;

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

@@ -24,7 +24,11 @@ export const editActions = EditorModule.action({
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
 
-    const bound = this.helper.getCardCompBound(this.store.currCompId);
+    let yOffset = 0;
+    if (this.store.currCompId != this.store.currStreamCardId) {
+        const bound = this.helper.getCardCompBound(this.store.currCompId);
+        yOffset = bound.y + bound.h
+    }
 
     await this.actions.addCompToDesign(compKey);
     const { currComp } = this.store;
@@ -33,7 +37,8 @@ export const editActions = EditorModule.action({
     //添加组件到当前选中的组件下面
     const obj = new CompObject(currComp);
     const selectCtrl = this.controls.selectCtrl;
-    selectCtrl.translate(0, bound.y + bound.h);
+    let xOffset = this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2);
+    selectCtrl.translate(xOffset, yOffset);
 
     //扩展
     this.helper.extendStreamCard(this.store.currStreamCardId);

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

@@ -145,10 +145,9 @@ export const helpers = EditorModule.helper({
       const aabb = this.helper.getCardCompBound(c);
       maxH = Math.max(maxH, aabb.y + aabb.h);
     }
-    maxH = this.helper.pxToDesignSize(maxH) + 10;
-    const cardH = card.layout.size?.[1] as number;
-    if (cardH < maxH ) {
-      card.setH(maxH);
-    }
+    maxH = this.helper.pxToDesignSize(maxH);
+    card.setH(maxH);
   },
+
+
 });

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -58,6 +58,8 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
 
   if (layout.transformMatrix) {
     style.transform = layout.transformMatrix;
+    style.transformOrigin = "0 0";
+
   } else {
     //转换成matrix形式
     const m = new Matrix();
@@ -70,13 +72,11 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
       if (transform.r != undefined) {
         m.rotateDeg(transform.r);
       }
+      style.transform = m.getMatrixStr();
     }
-    style.transform = m.getMatrixStr();
-    // const s = 
-    // style.transform = parseTransform(transform);
   }
-  style.transformOrigin = "0 0";
   
+
   if (layout.background) {
     if (layout.background.color) {
       style.backgroundColor = layout.background.color;