update

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

@@ -51,7 +51,7 @@ export const Component = defineComponent({
                 ? value.url
                 : value.url + "?editMode=" + store.isEditMode
             }
-            onLoad={() => {
+            onLoad={(e) => {
               if (helper.isCurrComp(props.compId)) {
                 controls.transferCtrl.initStyle();
               }

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

@@ -28,7 +28,7 @@ export const Transfer = defineComponent({
     return () => {
       const comp = transferCtrl.currComp;
       const toolbarOpts =
-        CompToolbars[transferCtrl.currComp.compKey] || CompToolbars.default;
+        CompToolbars[transferCtrl.currComp?.compKey] || CompToolbars.default;
 
       // const showTransfer =
       //   store.isEditComp || store.pageCompIds.includes(comp.id);

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

@@ -41,7 +41,13 @@ export const View = defineComponent({
                   controls.transferCtrl.mousedown(e, "move",  store.currComp)
                 }               
               }
-            }}>
+            }}
+            
+             onMousemove={(e)=>{
+              if (!store.isEditMode || !controls.dragAddCtrl.dragingCompKey || !helper.isStreamCard(props.compId) ) return;
+                actions.pickComp(props.compId);
+             }}
+            >
             {slots.default?.()}
           </div>
         

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

@@ -2,12 +2,13 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { onUnmounted, reactive, onMounted , ref} from "vue";
-import { Container, Draggable } from "vue-dndrop";
+import { Container, Draggable, vueDndrop } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
 import { Transfer } from "../../CompUI/basicUI/Transfer";
 import { StreamCardTransfer } from "../../CompUI/basicUI/Transfer/streamCard";
+import { DragAddCtrl } from "@/modules/editor/controllers/DragAddCtrl";
 
 export default defineUI({
   setup() {
@@ -18,6 +19,7 @@ export default defineUI({
     hotKeyCtrl.init();
     onUnmounted(() => {
       hotKeyCtrl.destroy();
+
     });
 
     const state = reactive({
@@ -26,7 +28,8 @@ export default defineUI({
 
     const NotFoundComp = () => <div>无效的组件</div>;
     const flagRef = ref();
-
+    const containRef = ref();
+    
     return () => {
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
@@ -47,10 +50,32 @@ export default defineUI({
                   return (
                     <>
                       <Container
+                        behaiver = "drop-zone"
+                       
                         class={store.isEditPage ? "!min-h-750px" : ""}
-                        group-name="canvas"
+
                         drag-handle-selector=".draganchor"
+                        drop-placeholder={false}
+                        animation-duration={0}
+                        ref={containRef}
+                        should-accept-drop={(sourceContainerOptions:any, payload:any)=>{
+                          console.log("sourceContainerOptions:any, payload:any", sourceContainerOptions, payload)
+                          if (sourceContainerOptions.groupName != "canvas") return false
+                          controls.dragAddCtrl.updateCompKey(payload)
+                          return false;
+                        }}
+
+                        drop-not-allowed = {
+                          (p:any)=>{
+                            console.log("p", p)
+                          }
+                        }
+                        
+
                         onDrop={(e: any) => {
+                          console.log( e );
+                          return
+
                           if (e.payload) {
                             actions.addCompToDesign(e.payload, e.addedIndex);
                           } else {

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -22,6 +22,7 @@ export default defineUI({
         class="space-y-10px scrollbar"
         behaviour="copy"
         group-name="canvas"
+        animation-duration={0}
         get-child-payload={(index: number) => {
           return props.components[index].compKey;
         }}

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

@@ -0,0 +1,46 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+
+export class DragAddCtrl extends ModuleControl<EditorModule> {
+    dragingCompKey = ""
+
+    _cancel?:()=>void
+    _mouseUping = false
+
+    updateCompKey(k:string) {
+        if (this._mouseUping) return;
+
+        const isSame = (k == this.dragingCompKey);
+        this.dragingCompKey = k;
+        if (!isSame && k) {
+            if (this._cancel) this._cancel();
+            this._cancel = this.initEvent();
+        }
+    }
+
+    initEvent() {
+        const scope = this;
+
+        function mouseup(e:MouseEvent) {
+            console.log("mouseup=>", scope.dragingCompKey)
+            scope._mouseUping = true;
+            setTimeout(() => {
+                scope._mouseUping = false;
+            }, 400);
+
+            if (scope._cancel) scope._cancel();
+
+            if (!scope.dragingCompKey ) return;
+            scope.actions.addCompToDesign(scope.dragingCompKey as any)
+            scope.dragingCompKey = "";
+          
+        }
+
+        document.addEventListener("mouseup", mouseup)
+
+        return ()=> {
+            document.removeEventListener("mouseup", mouseup)
+            scope._cancel = undefined;
+        }
+    }
+}

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

@@ -99,6 +99,8 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
   }
 
   initStyle() {
+    if (!this.compEl) return;
+    
     const rect = this.compEl.getBoundingClientRect();
     const pageRect = this.pageEl.getBoundingClientRect();
     this.transferStyle.width = rect.width + "px";

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

@@ -43,12 +43,16 @@ export const editActions = EditorModule.action({
     //   const comps = this.helper.getCompTrees(compId);
     //   nextCompId = comps[1].id;
     // }
+      if (this.store.currCompId == compId) {
+          return
+      }
       this.store.currCompId = "";
       this.store.currStreamCardId = "";
       this.store.setCurrComp(compId);
       if (this.store.currCompId == this.store.currStreamCardId) {
         this.controls.transferCtrl.destroy();
       }
+
   },
   // 切换到父组件
   pickParentComp(compId: string) {
@@ -66,7 +70,7 @@ export const editActions = EditorModule.action({
   },
 
   async removeStreamCard(compId: string) {
-    
+
     await queenApi.showConfirm({title:"删除", content:"确认删除当前内容?"})
 
     if (this.store.streamCardIds.length < 2) {

src/modules/editor/module/index.ts

@@ -13,6 +13,7 @@ import { initActions } from "./actions/init";
 import { helpers } from "./helpers";
 import { https } from "./https";
 import { store } from "./stores";
+import { DragAddCtrl } from "../controllers/DragAddCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -37,6 +38,7 @@ export class EditorModule extends ModuleRoot {
       dir: "queenshow",
     }),
     transferCtrl: new TransferCtrl(this),
+    dragAddCtrl: new DragAddCtrl(this),
     streamCardTransferCtrl: new TransferCtrl(this),
     historyCtrl: new HistoryCtrl(this),
     pickCtrl: new ImagePickController(),

src/typings/pro.d.ts

@@ -18,4 +18,5 @@ declare type TableListResult<T> = Promise<{
 declare module "vue-dndrop" {
   export const Container: any;
   export const Draggable: any;
+  export const vueDndrop: any;
 }