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

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

@@ -62,7 +62,7 @@ export const SelectTransfer = defineComponent({
       return (
         <div
           class={[
-            "absolute transfer z-1001",
+            "absolute transfer z-1000",
             transferStyle.showGizmo ? showgizmo : hideGizmo,
            
           ]}

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

@@ -43,14 +43,14 @@ export const View = defineComponent({
           onDblclick={() => emit("dblclick")}
         >
           <div
-            onMousedown={(e) => {
-              if (helper.isGroupCompChild(props.compId)) return;
-              e.stopPropagation();
+            // onMousedown={(e) => {
+            //   if (helper.isGroupCompChild(props.compId)) return;
+            //   e.stopPropagation();
 
-              if (store.isEditMode) {
-                actions.pickComp(props.compId);
-              }
-            }}
+            //   if (store.isEditMode) {
+            //     actions.pickComp(props.compId);
+            //   }
+            // }}
 
             onMousemove={(e) => {
               if (

src/modules/editor/components/CompUI/customUI/Cards/Card3/component.tsx

@@ -13,7 +13,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="relative flex justify-between">
+      <div class="relative flex justify-between px-0.35rem overflow-hidden">
         <div class="flex flex-col justify-center">
           <Text.Component compId={children.text1} />
           <Text.Component class="mt-0.07rem" compId={children.text2} />

src/modules/editor/components/CompUI/customUI/Cards/Card3/index.ts

@@ -16,13 +16,15 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.2rem",
-    size: [750, 300],
+    size: [750, 250],
   },
   children: {
     bgImg: () =>
       createCompId("Image", {
         value: { url: thumbnail, x: -25.0, y: -0.5, s: 2.1 },
+        layout: {
+          size: [317, 240],
+        },
       }),
     item1: () =>
       createCompId("Image", {
@@ -39,10 +41,16 @@ export const { createComp, useCompData } = createCompHooks({
     text1: () =>
       createCompId("Text", {
         value: `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
+        layout: {
+          size: [300, 50],
+        },
       }),
     text2: () =>
       createCompId("Text", {
         value: `复古羊巴 / 2023年新品`,
+        layout: {
+          size: [300, 40],
+        },
       }),
   },
 });

src/modules/editor/components/CompUI/customUI/index.ts

@@ -5,7 +5,7 @@ export * as Cards13 from "./Cards/Card13";
 export * as Cards14 from "./Cards/Card14";
 export * as Cards15 from "./Cards/Card15";
 export * as Card2 from "./Cards/Card2";
-// export * as Card3 from "./Cards/Card3";
+export * as Card3 from "./Cards/Card3";
 // export * as Card4 from "./Cards/Card4";
 export * as Card5 from "./Cards/Card5";
 export * as CardList from "./Cards/CardList";

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

@@ -56,9 +56,7 @@ export default defineUI({
                         <Container
                           behaiver="drop-zone"
                           class={store.isEditPage ? "!min-h-750px" : ""}
-                          drag-handle-selector=".draganchor"
-                          drop-placeholder={false}
-                          animation-duration={0}
+                          // drag-handle-selector=".draganchor"
                           ref={containRef}
                           should-accept-drop={(
                             sourceContainerOptions: any,
@@ -85,7 +83,10 @@ export default defineUI({
                             }
                           }}
                           onDragStart={() => (state.draging = true)}
-                          onDragEnd={() => (state.draging = false)}
+                          onDragEnd={() => {
+                            state.draging = false
+                            controls.selectCtrl.selecteObjs([])
+                          }}
                           non-drag-area-selector={".drag-disable"}
                         >
                           {children}
@@ -104,9 +105,9 @@ export default defineUI({
                           !state.draging && (
                             <Transfer key={store.currCompId + streamCardIndex} />
                           )} */}
-
-                        
-                        <SelectTransfer />
+                        {
+                          !state.draging && <SelectTransfer />
+                        }
                       </>
                     );
                   },

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

@@ -44,7 +44,7 @@ export const MySources = defineComponent({
             : "materialVideoListCtrl"
         ];
       return (
-        <div class="space-y-20px -mt-10px">
+        <div class="space-y-20px -mt-10px flex flex-col overflow-hidden">
           <Radio.Group
             class={radioCls}
             value={state.sourceType}
@@ -54,35 +54,36 @@ export const MySources = defineComponent({
             <Radio.Button value="Image">图片</Radio.Button>
             <Radio.Button value="Video">视频</Radio.Button>
           </Radio.Group>
-
-          <List data={control.state.list} columns={2} gap="20px">
-            {{
-              item(item: any) {
-                return (
-                  <div
-                    style={{ aspectRatio: 1 }}
-                    onClick={() => clickToDesign(item.file.url)}
-                  >
-                    <Image
-                      class="w-full h-full"
-                      src={item.file.url}
-                      size={240}
+          <div class="scrollbar flex-1 -mr-15px pr-15px">
+            <List data={control.state.list} columns={2} gap="20px">
+              {{
+                item(item: any) {
+                  return (
+                    <div
+                      style={{ aspectRatio: 1 }}
+                      onClick={() => clickToDesign(item.file.url)}
+                    >
+                      <Image
+                        class="w-full h-full"
+                        src={item.file.url}
+                        size={240}
+                      />
+                    </div>
+                  );
+                },
+                loadmore() {
+                  return (
+                    <Loadmore
+                      class="mt-20px"
+                      loading={control.state.loading}
+                      canLoad={control.state.canLoadNext}
+                      onChange={control.loadNextPage}
                     />
-                  </div>
-                );
-              },
-              loadmore() {
-                return (
-                  <Loadmore
-                    class="mt-20px"
-                    loading={control.state.loading}
-                    canLoad={control.state.canLoadNext}
-                    onChange={control.loadNextPage}
-                  />
-                );
-              },
-            }}
-          </List>
+                  );
+                },
+              }}
+            </List>
+          </div>
         </div>
       );
     };

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

@@ -20,10 +20,12 @@ export const CompTree = defineComponent({
   setup() {
     const { store, actions, helper, controls } = useEditor();
     const { compUICtrl } = controls;
+
     const state = useReactive(() => ({
       expandedKeys: [] as string[],
       treeData() {
         const rootComp = helper.findRootComp();
+      
         function getCompChildren(ids: string[]): TreeItem[] {
           return ids.map((id) => {
             const comp = helper.findComp(id) as DesignComp;
@@ -42,16 +44,15 @@ export const CompTree = defineComponent({
       },
     }));
 
-    effect(() => {
-      state.expandedKeys = helper
-        .getCompTrees(store.currCompId)
-        .map((comp) => comp.id);
-    });
+   
+
+    return () => {
 
-    return () => (
+      state.expandedKeys = store.currCompId  ? helper.getCompTrees(store.currCompId).map((comp) => comp.id):[];
+      return (
       <Tree
         class={treeStyle}
-        treeData={state.treeData}
+        treeData={ state.treeData}
         v-model={[state.expandedKeys, "expandedKeys"]}
         selectedKeys={[store.currCompId]}
         blockNode={true}
@@ -71,7 +72,7 @@ export const CompTree = defineComponent({
         }}
       </Tree>
     );
-  },
+  }},
 });
 
 const CompNode = defineComponent({

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

@@ -81,8 +81,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.h = selCanvas.height * 2;
 
     document.addEventListener("mousedown", this.onDocMouseDown.bind(this), {capture: true});
-    document.addEventListener("mousemove", this.onDocMouseMove.bind(this));
-    document.addEventListener("mouseup", this.onDocMouseUp.bind(this));
+    document.addEventListener("mousemove", this.onDocMouseMove.bind(this), {capture: true});
+    document.addEventListener("mouseup", this.onDocMouseUp.bind(this), {capture: true});
 
     window.addEventListener("resize", this.onResize.bind(this));
   }
@@ -283,10 +283,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   onDocMouseMove(e: MouseEvent) {
     if (!this.pageEl) return;
-
-    if (!this._downed) {
-      this.checkHover();
-      return;
+    // if (!this._downed) {
+    //   this.checkHover();
+    //   return;
+    // }
+    if (this._state) {
+        e.preventDefault();
+        e.stopPropagation();
     }
 
     switch (this._state) {
@@ -358,7 +361,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._selCanvaseSize.w,
       this._selCanvaseSize.h
     );
-
+    this.mouseDownSelects = [];
     this.upgateGizmoStyle();
   }
 

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

@@ -24,12 +24,21 @@ export const editActions = EditorModule.action({
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
 
+    //点击默认都创建一个容器
+    //创建容器
+    const isCreatCard =  compKey != "Text" && compKey != "Image" && compKey != "Video" && compKey != "Web3D";
+
     let yOffset = 0;
-    if (this.store.currCompId != this.store.currStreamCardId) {
+    if (this.store.currCompId != this.store.currStreamCardId && !isCreatCard) {
         const bound = this.helper.getCardCompBound(this.store.currCompId);
         yOffset = bound.y + bound.h
     }
 
+    if (isCreatCard) { //先创建卡片
+      const index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+      const compId = await this.store.insertDesignContent("Container", index);
+      this.actions.pickComp(compId);
+    }
     await this.actions.addCompToDesign(compKey);
     const { currComp } = this.store;
     cb?.(currComp);
@@ -38,6 +47,7 @@ export const editActions = EditorModule.action({
     const selectCtrl = this.controls.selectCtrl;
     let xOffset = this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2);
     selectCtrl.translate(xOffset, yOffset);
+    selectCtrl.selecteObjs([]);
 
     //扩展
     this.helper.extendStreamCard(this.store.currStreamCardId);
@@ -115,10 +125,10 @@ export const editActions = EditorModule.action({
   removeComp(compId: string) {
 
     if (this.helper.isCompCanDelete(compId)) {
-      if (compId === this.store.currCompId) {
-        this.controls.selectCtrl.selecteObjs([]);
+      if (compId === this.store.currCompId) { 
         this.store.setCurrComp("root");
       }
+      this.controls.selectCtrl.selecteObjs([]);
       this.store.deleteComp(compId);
     }
   },
@@ -126,9 +136,10 @@ export const editActions = EditorModule.action({
   async removeStreamCard(compId: string) {
     await queenApi.showConfirm({ title: "删除", content: "确认删除当前内容?" });
 
-    if (this.store.streamCardIds.length < 2) {
-      return;
-    }
+    // if (this.store.streamCardIds.length < 2) {
+    //   queenApi.messageError("")
+    //   return;
+    // }
     let nextCard = this.store.currStreamCardId;
     if (compId == this.store.currStreamCardId) {
       const i = this.store.streamCardIds.indexOf(compId);
@@ -137,7 +148,10 @@ export const editActions = EditorModule.action({
         nextCard = this.store.streamCardIds[i - 1];
       }
     }
+    this.controls.selectCtrl.selecteObjs([])
+
     this.store.deleteComp(compId);
+    
     this.store.setCurrComp(nextCard);
   },
   // 移动组件顺序

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

@@ -135,6 +135,8 @@ export const helpers = EditorModule.helper({
   },
 
   extendStreamCard(streamCardId: string) {
+    if (!streamCardId) return;
+    
     const compMap = this.store.designData.compMap;
     const card = compMap[streamCardId];
     const childs = card.children.default || [];

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

@@ -79,10 +79,6 @@ export const store = EditorModule.store({
       return compId;
     },
     setCurrComp(compId: string) {
-      if (compId != "root") {
-        this.store.currStreamCardId = "";
-      }
-     
       this.store.currCompId = compId;
 
       const comps = this.helper.getCompTrees(compId);