修复选区的bug

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

@@ -12,7 +12,7 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { helper, controls } = useEditor();
+    const { helper, controls , store} = useEditor();
     const { children } = useCompData(props.compId);
     return () => (
       <View compId={props.compId}>
@@ -24,10 +24,8 @@ export const Component = defineComponent({
 
           return <Comp key={compItem.id} compId={compItem.id} />;
         })}
-
-
         {
-          <SelectTransfer />
+          store.currStreamCardId == props.compId && <SelectTransfer />
         }
       </View>
     );

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

@@ -29,6 +29,7 @@ export default defineUI({
     const flagRef = ref();
     const containRef = ref();
     const selectCanvasRef = ref();
+    const viewportRef = ref();
 
     return () => {
       const pageRoot = helper.findRootComp();
@@ -39,12 +40,12 @@ export default defineUI({
       if (!flagRef.value) {
         flagRef.value = true;
         setTimeout(() => {
-          actions.onViewReady(pageRoot.$el, selectCanvasRef.value);
+          actions.onViewReady(pageRoot.$el, selectCanvasRef.value, viewportRef.value);
         }, 0);
       }
 
       return (
-        <div class="scrollbar overflow-y-auto h-1/1">
+        <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
           <div class="relative">
             <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
               <CompUI.Page.Component compId={pageRoot.id}>
@@ -137,7 +138,7 @@ const contentCls = css`
 `;
 const selectCls = css`
   pointer-events: none;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   width: 100%;

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -7,6 +7,7 @@ import { defineComponent, effect } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -54,11 +55,14 @@ export const CompTree = defineComponent({
         v-model={[state.expandedKeys, "expandedKeys"]}
         selectedKeys={[store.currCompId]}
         blockNode={true}
-        onSelect={(ids) =>
-          actions.pickComp(
-            (ids[0] as string) || state.expandedKeys.at(-2) || "root"
-          )
-        }
+        onSelect={(ids) =>{
+          const id = ids[0] as string || state.expandedKeys.at(-2) || "root";
+          if (helper.isStreamCardChild(id)) {
+            controls.selectCtrl.selecteObjs([new CompObject(store.compMap[id])])
+            return;
+          } 
+          actions.pickComp(id)
+        }}
       >
         {{
           title: (data: any) => {

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

@@ -59,8 +59,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _downClientY = 0;
   //groupCtrl = new GroupActionCtrl(this.module);
   bus = new Event();
+  viewport?:HTMLElement;
 
-  initEvents(pageEl: HTMLElement, selCanvas: HTMLCanvasElement) {
+  initEvents(pageEl: HTMLElement, selCanvas: HTMLCanvasElement, viewport:HTMLElement) {
+    this.viewport = viewport;
     this.pageEl = pageEl;
     this.selCanvas = selCanvas;
     const b = selCanvas.getBoundingClientRect();
@@ -122,7 +124,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         this.mouseDownSelects = comps;
         console.log("comps=>", comps);
         if (comps.length < 1) {
-          this._state = MODE_SEL_RECT;
+            const view =  this.viewport?.getBoundingClientRect() as any;
+            const isOut = (e.clientX < view.left || e.clientX > (view.right) || e.clientY < view.top || e.clientY > view.bottom)
+            if (!isOut) {
+                this._state = MODE_SEL_RECT;
+            }
         } else {
           this._state = MODE_MOVING;
           const obj = this.compMap[comps[0].id];
@@ -462,6 +468,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     )
       return;
 
+    if (objs.length == 1) {
+        this.actions.pickComp(objs[0].comp.id);
+    }
+
     // objs = this.getSceneObjOrderArr(objs);
 
     const preObjContainer = this.objContainer;

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

@@ -11,17 +11,13 @@ export const editActions = EditorModule.action({
   async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) {
     await this.actions.addCompToDesign(compKey);
 
-
-
     const cardPoints = this.helper.getPointOffsetWith(
       event,
       this.store.currStreamCard.$el
     );
     const { currComp } = this.store;
     let selCtrl = this.controls.selectCtrl
-    selCtrl.selecteObjs([new CompObject(currComp) ])
     selCtrl.translate(this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2), cardPoints.y);
-
     this.helper.extendStreamCard(this.store.currStreamCardId);
 
   },
@@ -36,7 +32,6 @@ export const editActions = EditorModule.action({
     //添加组件到当前选中的组件下面
     const obj = new CompObject(currComp);
     const selectCtrl = this.controls.selectCtrl;
-    selectCtrl.selecteObjs([obj]);
     selectCtrl.translate(0, bound.y + bound.h);
 
     //扩展
@@ -51,7 +46,6 @@ export const editActions = EditorModule.action({
       //必须选中一个streamCard
       return;
     }
-
     if (compKey == "Container") {
       index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
@@ -62,33 +56,35 @@ export const editActions = EditorModule.action({
       compKey,
       this.store.currStreamCard
     );
-    this.actions.pickComp(compId);
-    this.actions.setCompPositionFloat(this.store.currComp);
-  
+    const addedComp = this.store.compMap[compId]
+    this.actions.setCompPositionFloat(addedComp);
+
+    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)])
   },
+
   // 切换当前组件
   pickComp(compId: string) {
     const { store, helper } = this;
     // 组合模式下，切换组件
-    if (store.currCompId && store.groupModeStatus) {
-      const enableGroupIds = helper
-        .findParentComp(compId)
-        ?.getChildIds() as string[];
-      const comps = helper.getCompTrees(compId);
-      while (comps.length) {
-        const comp = comps.pop() as DesignComp;
-        const index = store.groupIds.indexOf(comp.id);
-        if (index >= 0) {
-          const groupIds = [...store.groupIds];
-          groupIds.splice(index, 1);
-          store.setGroupIds(groupIds);
-        } else if (enableGroupIds.includes(comp.id)) {
-          store.groupIds.push(comp.id);
-          return;
-        }
-      }
-      return;
-    }
+    // if (store.currCompId && store.groupModeStatus) {
+    //   const enableGroupIds = helper
+    //     .findParentComp(compId)
+    //     ?.getChildIds() as string[];
+    //   const comps = helper.getCompTrees(compId);
+    //   while (comps.length) {
+    //     const comp = comps.pop() as DesignComp;
+    //     const index = store.groupIds.indexOf(comp.id);
+    //     if (index >= 0) {
+    //       const groupIds = [...store.groupIds];
+    //       groupIds.splice(index, 1);
+    //       store.setGroupIds(groupIds);
+    //     } else if (enableGroupIds.includes(comp.id)) {
+    //       store.groupIds.push(comp.id);
+    //       return;
+    //     }
+    //   }
+    //   return;
+    // }
     // let nextCompId = compId;
     // if (this.store.isEditPage) {
     //   const comps = this.helper.getCompTrees(compId);
@@ -97,7 +93,6 @@ export const editActions = EditorModule.action({
     if (this.store.currCompId == compId) {
       return;
     }
-
     this.store.setCurrComp(compId);
     if (this.store.currCompId == this.store.currStreamCardId) {
       this.controls.transferCtrl.destroy();

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

@@ -29,8 +29,8 @@ export const initActions = EditorModule.action({
     this.store.setMode(v);
   },
 
-  onViewReady(pageEl, selEl) {
+  onViewReady(pageEl, selEl, viewPort) {
     this.store.currStreamCardId = this.store.streamCardIds[0];
-    this.controls.selectCtrl.initEvents(pageEl, selEl);
+    this.controls.selectCtrl.initEvents(pageEl, selEl, viewPort);
   },
 });

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

@@ -37,6 +37,20 @@ export const helpers = EditorModule.helper({
     }
     return false;
   },
+  isStreamCardChild(compId:string) {
+    if (compId == "root" || this.helper.isStreamCard(compId) ) {
+      return false;
+    }
+    const cards = this.store.streamCardIds
+    let n = cards.length;
+    const compMap = this.store.designData.compMap;
+    while(n--) {
+       const childs = compMap[cards[n]].children.default || [];
+       if (childs.indexOf(compId) > -1 ) return true;
+    }
+    return false;
+  },
+
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
     if (comp) return this.helper.findComp(this.store.compPids[compId]);
@@ -116,7 +130,7 @@ export const helpers = EditorModule.helper({
     const c = compMap[compId];
     const obj = new CompObject(c);
     const bound = obj.getBox();
-    
+
     return bound;
   },
 

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

@@ -28,7 +28,10 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
-
+    compMap(state) {
+      return state.designData.compMap;
+    },
+    
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },