update pid in store

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

@@ -22,11 +22,7 @@ export const Component = defineComponent({
               controls.compUICtrl.state.components.get(compItem.compKey)
                 ?.Component || CompUI.Container.Component;
 
-            return (
-              <div class="flex flex-col">
-                <Comp key={compItem.id} compId={compItem.id} />
-              </div>
-            );
+            return <Comp key={compItem.id} compId={compItem.id} />;
           })}
         </div>
       </View>

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -3,11 +3,12 @@ import { onMounted, ref, inject, provide } from "vue";
 
 export function useCompRef(compId: string) {
   const compRef = ref();
-  const { helper } = useEditor();
+  const { store, helper } = useEditor();
 
-  const parentId = compId !== "root" ? inject("compParentId") : "";
+  const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
   provide("compParentId", compId);
-  
+  store.setCompPid(compId, parentId);
+
   onMounted(() => {
     const comp = helper.findComp(compId);
     if (comp) {
@@ -16,10 +17,6 @@ export function useCompRef(compId: string) {
           value: compRef.value,
           configurable: true,
         },
-        pid: {
-          value: parentId,
-          configurable: true,
-        },
       });
     }
   });

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

@@ -1,14 +1,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, vueDndrop } from "vue-dndrop";
+import { onUnmounted, reactive, ref } from "vue";
+import { Container, Draggable } 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() {
@@ -19,7 +18,6 @@ export default defineUI({
     hotKeyCtrl.init();
     onUnmounted(() => {
       hotKeyCtrl.destroy();
-
     });
 
     const state = reactive({
@@ -29,12 +27,14 @@ export default defineUI({
     const NotFoundComp = () => <div>无效的组件</div>;
     const flagRef = ref();
     const containRef = ref();
-    
+
     return () => {
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
-      const streamCardIndex = store.streamCardIds.indexOf(store.currStreamCardId)
-      if (!flagRef.value ) {
+      const streamCardIndex = store.streamCardIds.indexOf(
+        store.currStreamCardId
+      );
+      if (!flagRef.value) {
         flagRef.value = true;
         setTimeout(() => {
           actions.onViewReady();
@@ -50,31 +50,32 @@ export default defineUI({
                   return (
                     <>
                       <Container
-                        behaiver = "drop-zone"
-                       
+                        behaiver="drop-zone"
                         class={store.isEditPage ? "!min-h-750px" : ""}
-
                         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)
+                        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)
-                          }
-                        }
-                        
-
+                        drop-not-allowed={(p: any) => {
+                          console.log("p", p);
+                        }}
                         onDrop={(e: any) => {
-                          console.log( e );
-                          return
+                          console.log(e);
+                          return;
 
                           if (e.payload) {
                             actions.addCompToDesign(e.payload, e.addedIndex);
@@ -88,14 +89,20 @@ export default defineUI({
                       >
                         {children}
                       </Container>
-                      {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId + streamCardIndex} />}
+                      {store.currStreamCardId && (
+                        <StreamCardTransfer
+                          key={store.currStreamCardId + streamCardIndex}
+                        />
+                      )}
 
                       {store.currCompId &&
-                       store.currStreamCardId &&
-                       store.currCompId !== "root" &&
-                       !store.textEditingState &&
-                       store.currCompId !== store.currStreamCardId && 
-                       !state.draging && <Transfer key={store.currCompId + streamCardIndex} />}
+                        store.currStreamCardId &&
+                        store.currCompId !== "root" &&
+                        !store.textEditingState &&
+                        store.currCompId !== store.currStreamCardId &&
+                        !state.draging && (
+                          <Transfer key={store.currCompId + streamCardIndex} />
+                        )}
                     </>
                   );
                 },
@@ -104,9 +111,8 @@ export default defineUI({
                     controls.compUICtrl.state.components.get(comp.compKey)
                       ?.Component || NotFoundComp;
                   return (
-                    <Draggable class="!flex flex-col" key={comp.id}>
+                    <Draggable key={comp.id}>
                       <Comp compId={comp.id} />
-                    
                     </Draggable>
                   );
                 },

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

@@ -342,25 +342,34 @@ export const editActions = EditorModule.action({
       const comp = helper.findComp(id) as DesignComp;
 
       parentMatrix.setFormDiv(groupComp.$el);
-      const originArr = window.getComputedStyle(groupComp.$el).transformOrigin.split(" ").map(parseFloat);
+      const originArr = window
+        .getComputedStyle(groupComp.$el)
+        .transformOrigin.split(" ")
+        .map(parseFloat);
 
       const porigin = new Matrix();
-      porigin.translate(originArr[0], originArr[1])
+      porigin.translate(originArr[0], originArr[1]);
       const invOrigin = new Matrix();
-      invOrigin.translate(-originArr[0], -originArr[1])
+      invOrigin.translate(-originArr[0], -originArr[1]);
 
-      const childOrigArr = window.getComputedStyle(comp.$el).transformOrigin.split(" ").map(parseFloat);
+      const childOrigArr = window
+        .getComputedStyle(comp.$el)
+        .transformOrigin.split(" ")
+        .map(parseFloat);
       const corigin = new Matrix();
-      corigin.translate(childOrigArr[0], childOrigArr[1])
+      corigin.translate(childOrigArr[0], childOrigArr[1]);
       const cinvOrigin = new Matrix();
-      cinvOrigin.translate(-childOrigArr[0], -childOrigArr[1])
-
+      cinvOrigin.translate(-childOrigArr[0], -childOrigArr[1]);
 
       const childMatrix = new Matrix();
       childMatrix.setFormDiv(comp.$el);
-    
-      const result = cinvOrigin.multipy(porigin).multipy(parentMatrix).multipy(invOrigin).multipy(corigin).multipy(childMatrix);
-      
+
+      const result = cinvOrigin
+        .multipy(porigin)
+        .multipy(parentMatrix)
+        .multipy(invOrigin)
+        .multipy(corigin)
+        .multipy(childMatrix);
 
       comp.layout.transform || (comp.layout.transform = {});
       comp.layout.transform.x = helper.pxToDesignSize(result.getX());
@@ -375,5 +384,6 @@ export const editActions = EditorModule.action({
     childIds.splice(groupIndex, 1, ...groupChildIds);
 
     parentComp.children.default = childIds;
+    this.store.setCurrComp(groupChildIds[0]);
   },
 });

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

@@ -33,10 +33,9 @@ export const helpers = EditorModule.helper({
     }
     return false;
   },
-
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
-    if (comp) return this.helper.findComp(comp.pid);
+    if (comp) return this.helper.findComp(this.store.compPids[compId]);
   },
   findRootComp(): DesignComp | undefined {
     return this.store.designData.compMap["root"];
@@ -47,7 +46,7 @@ export const helpers = EditorModule.helper({
       const comp = this.helper.findComp(compId);
       if (comp) {
         comps.unshift(comp);
-        getParentComp(comp.pid);
+        getParentComp(this.store.compPids[comp.id]);
       }
     };
     getParentComp(compId);

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

@@ -13,6 +13,7 @@ export const store = EditorModule.store({
 
     groupModeStatus: false,
     groupIds: [] as string[],
+    compPids: {} as Record<string, string>,
   }),
   getters: {
     isEditMode(): boolean {
@@ -57,6 +58,9 @@ export const store = EditorModule.store({
     setDesignData(data: Partial<DesignTemp>) {
       this.store.designData = new DesignTemp(data);
     },
+    setCompPid(compId: string, pid: string) {
+      this.store.compPids[compId] = pid;
+    },
     async insertDesignContent(compKey: ICompKeys, index?: number) {
       const { pageCompIds } = this.store;
       index === undefined && (index = pageCompIds.length);
@@ -66,8 +70,9 @@ export const store = EditorModule.store({
     },
     async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
       const compId = await this.controls.compUICtrl.createCompId(compKey);
-      container.children.default || (container.children.default = []);
-      container.children.default.push(compId);
+      const childIds = [...(container.children.default || [])];
+      childIds.push(compId);
+      container.children.default = childIds;
       return compId;
     },
     setCurrComp(compId: string) {
@@ -131,6 +136,7 @@ export const store = EditorModule.store({
         [compId, ...ids].forEach((id) => {
           delete compMap[id];
         });
+        delete this.store.compPids[compId];
       }
     },
     moveComp(selIndex: number, targetIndex: number) {

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -4,7 +4,7 @@ import { Background, ICompKeys, Layout } from "../../typings";
 import { mapValuesDeep } from "@/utils";
 
 export class DesignComp {
-  declare pid: string; // pid 作为前端临时数据，不存储到服务器，在初始化时关联
+  // declare pid: string; // pid 作为前端临时数据，不存储到服务器，在初始化时关联
   declare $el: HTMLElement; // $el 映射dom
   id = nanoid();
   title = "";