update

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

@@ -32,6 +32,7 @@ export const View = defineComponent({
             viewStyle,
             store.isEditMode && editCompStyle,
             isGroupComp && groupCompCls,
+            store.currStreamCardId == props.compId && CurrCompStyle
           ]}
           style={helper.createStyle(comp.layout)}
           // onClick={(e) => {
@@ -99,6 +100,7 @@ export const Hudop = defineComponent({
                 onClick={() => {
                   const index = store.streamCardIds.indexOf(props.compId) + 1;
                   actions.addCompToDesign("Container", index);
+
                 }}
               />
         </div>
@@ -141,6 +143,12 @@ const editCompStyle = css`
   }
 `;
 
+
+const CurrCompStyle = css`
+  outline: 1px solid @inf-primary-color;
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
+`
+
 const groupCompCls = css`
   outline: 2px solid @inf-primary-color !important;
 `;

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

@@ -91,11 +91,11 @@ export default defineUI({
                         >
                           {children}
                         </Container>
-                        {store.currStreamCardId && !state.draging && (
+                        {/* {store.currStreamCardId && (
                           <StreamCardTransfer
                             key={store.currStreamCardId + streamCardIndex}
                           />
-                        )}
+                        )} */}
 
                         {/* {store.currCompId &&
                           store.currStreamCardId &&

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

@@ -44,7 +44,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   });
 
   selected: any[] = []; //选中的所有组件ids
-  mouseDownSelects: any[] = []; //鼠标按下时选中的
 
   pageEl?: HTMLElement;
   selCanvas = {} as HTMLCanvasElement;
@@ -88,7 +87,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   _mouseDownFlag = "";
+  _mouseDownTimestamp = 0;
+
   onDocMouseDown(e: MouseEvent) {
+    this._mouseDownTimestamp = Date.now();
+    
     if (!this.pageEl || !this.selCanvas) return;
 
     if (this.store.textEditingState) {
@@ -98,10 +101,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const pageX = e.clientX - box?.left;
     const pageY = e.clientY - box?.top;
 
-    const card = this.store.currStreamCard.$el;
-    box = card.getBoundingClientRect();
-    const cardX = pageX;
-    const cardY = e.clientY - box.top;
+    this._state = MODE_NONE;
 
     const sel = this.selCanvas.getBoundingClientRect();
     const selX = e.clientX - sel.left;
@@ -113,7 +113,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._downClientX = e.clientX;
     this._downClientY = e.clientY;
 
-    console.log(cardX, selX, cardY, sely);
+    // console.log(cardX, selX, cardY, sely);
 
     this._downed = true;
     this._mouseDownFlag = this.getDivFlag(e.target as any);
@@ -121,6 +121,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       //选框点击判断
       let isClickSelRect = false;
       if (this.selected.length > 0) {
+        const card = this.store.currStreamCard.$el;
+        box = card.getBoundingClientRect();
+        const cardX = pageX;
+        const cardY = e.clientY - box.top;
         isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
         if (isClickSelRect) {
           this._state = MODE_MOVING;
@@ -130,9 +134,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (!isClickSelRect) {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
-        this.mouseDownSelects = comps;
         console.log("comps=>", comps);       
         if (comps.length < 1) {
+
+          const test = this.streamCardClickTest(e)
+          if (test) {
+            const childs = this.compMap[test.id].children.default || [];
+            if (childs.length < 1) {
+               return;
+            }
+          }
+          
           const view = this.viewport?.getBoundingClientRect() as any;
           const isOut =
             e.clientX < view.left ||
@@ -159,6 +171,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
+    
   }
 
   getDivFlag(div: HTMLElement) {
@@ -183,13 +196,14 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const pbox = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - pbox?.left;
 
-    const Out = [];
+    const Out:any[] = [];
     while (n--) {
       const cardComp = compMap[cards[n]];
       const box = cardComp.$el.getBoundingClientRect();
       const cardY = e.clientY - box.top;
-
       const cardChilds = cardComp.children.default || [];
+      let maxZ = -1;
+      let topItem = null;
       for (const key of cardChilds) {
         const c = compMap[key];
         const m = Matrix.createFromDiv(c.$el);
@@ -199,16 +213,24 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         const out =
           localp.x < 0 || localp.x > cw || localp.y < 0 || localp.y > ch;
         if (!out) {
-          Out.push({
-            id: key,
-            el: c.$el,
-            cardX: pageX,
-            cardY: cardY,
-            cardId: cards[n],
-            startMatrix: m,
-          });
+          let z = c.layout.zIndex || 0;
+          if (z > maxZ) {
+            maxZ = z;
+            topItem = {
+              id: key,
+              el: c.$el,
+              cardX: pageX,
+              cardY: cardY,
+              cardId: cards[n],
+              startMatrix: m,
+            }
+          }
         }
       }
+      if (topItem) {
+        Out.push(topItem);
+        return Out;
+      }
     }
     return Out;
   }
@@ -232,35 +254,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   _moveSelectUpdated = false;
 
-  updateSelects() {
-    if (this._moveSelectUpdated) return;
-    this._moveSelectUpdated = true;
-
-    //鼠标按下并移动中 修正当前选中的对象
-    if (this.selected.length < 1) {
-      //没有被选中的
-      this.selected = this.mouseDownSelects;
-    } else {
-      //当前有选中的
-      let findSeleted = false;
-      let n = this.selected.length;
-      if (this.mouseDownSelects.length > 0) {
-        while (n--) {
-          const item = this.mouseDownSelects.find(
-            (item) => item.id == this.selected[n].id
-          );
-          if (item) findSeleted = true;
-        }
-      }
-      if (!findSeleted) {
-        this.selected = this.mouseDownSelects;
-      }
-    }
-    if (this.selected.length > 0) {
-      this._state = MODE_MOVING;
-    }
-  }
-
   translate(xOffset: number, yOffset: number) {
     const objContainer = this.objContainer as ObjsContainer;
     objContainer.translate(xOffset, yOffset);
@@ -316,22 +309,27 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   onDocMouseUp(e: MouseEvent) {
     let isClick = false;
+    let offsetT = Date.now() - this._mouseDownTimestamp;
+
     const dx = Math.abs(e.clientX - this._downClientX);
     const dy = Math.abs(e.clientY - this._downClientY);
-    if (dx < 2 && dy < 2 && !this.store.textEditingState ) {
+    if (dx < 2 && dy < 2 && !this.store.textEditingState && offsetT < 200) {
       isClick = true;
     }
     if (isClick) {
       this._state = MODE_NONE;
-      if (this.mouseDownSelects.length < 1) this.selecteObjs([]);
-      else {
-        const objs = this.mouseDownSelects.map(
-          (item) => new CompObject(this.compMap[item.id])
-        );
-        this.selecteObjs(objs);
+      const comps = this.compClickTest(e);
+      if (comps.length < 1) {
+        const card = this.streamCardClickTest(e);
+        if (card) {
+          this.actions.pickComp(card.id);
+        }
+        this.selecteObjs([]);
+      } else {
+        const objs = new CompObject(this.compMap[comps[0].id])
+        this.selecteObjs([objs]);
       }
     }
-
     console.log("up");
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -361,7 +359,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._selCanvaseSize.w,
       this._selCanvaseSize.h
     );
-    this.mouseDownSelects = [];
     this.upgateGizmoStyle();
   }
 
@@ -484,6 +481,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
     if (this.selected.length == 0 && objs.length == 0) return;
+
     if (
       this.selected.length == 1 &&
       objs.length == 1 &&

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

@@ -66,6 +66,8 @@ export const editActions = EditorModule.action({
       // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent(compKey, index);
       this.actions.pickComp(compId);
+
+      this.controls.selectCtrl.selecteObjs([]);
       return;
     }
     const compId = await this.store.insertCompContainer(
@@ -152,7 +154,7 @@ export const editActions = EditorModule.action({
     this.controls.selectCtrl.selecteObjs([])
 
     this.store.deleteComp(compId);
-    
+
     this.store.setCurrComp(nextCard);
   },
   // 移动组件顺序