objMaps植入对象种

package.json

@@ -31,7 +31,7 @@
     "@queenjs-modules/queentree": "^0.0.10",
     "@queenjs-modules/queentree-explorer": "^0.0.6",
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
-    "@queenjs/components": "^0.0.21",
+    "@queenjs/components": "^0.0.22",
     "@queenjs/controllers": "^0.0.6",
     "@queenjs/icons": "^0.0.20",
     "@queenjs/theme": "^0.0.8",

src/modules/editor/assets/icons/group.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="red" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="green" stroke="blue" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>

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

@@ -1,6 +1,5 @@
 import { defineComponent, ref, onMounted} from "vue";
 import { string } from "vue-types";
-
 import { useEditor } from "../../../..";
 import { View } from "../View";
 import { CompUI } from "../..";
@@ -8,6 +7,7 @@ import { useCompData } from "../../defines/createCompHooks";
 import { IconAdd, IconMove } from "@/assets/icons";
 import { IconDelete } from "@queenjs/icons";
 import { css } from "@linaria/core";
+import { CompCard } from "@/modules/editor/objects/Elements/page";
 
 
 export const Component = defineComponent({
@@ -16,12 +16,14 @@ export const Component = defineComponent({
   },
   setup(props) {
     const {controls, store} = useEditor();
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompCard>(props.compId);
     const compCtrl = controls.compCtrl;
 
     return () => (
       <View compId={props.compId} class={[compCtrl.currCardId == props.compId && CurrCompStyle,]}>
-        {comp.state.children.map((compItem) => {
+        {comp.state.children.map((id) => {
+          const compItem = comp.getObj(id)
+
           const Comp =
             controls.compUICtrl.state.components.get(compItem.compKey)
               ?.Component || CompUI.StreamCard.Component;

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

@@ -13,7 +13,7 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const comp = useCompData<ImageValue>(props.compId) as CompImage;
+    const comp = useCompData<CompImage>(props.compId);
     const { actions, store, controls, helper } = useEditor();
 
     async function changeVal() {

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

@@ -7,7 +7,7 @@ import { css } from "@linaria/core";
 import { PageMusic } from "./PageMusic";
 import { MusicOptions } from "./localMusic";
 import { useCompData } from "../../defines/createCompHooks";
-import { PageValue } from "@/modules/editor/objects/Elements/page";
+import { CompPage, PageValue } from "@/modules/editor/objects/Elements/page";
 
 export const Component = defineComponent({
   props: {
@@ -16,7 +16,7 @@ export const Component = defineComponent({
   setup(props, { slots }) {
     const editor = useEditor();
     const { compCtrl } = editor.controls;
-    const comp = useCompData<PageValue>(props.compId);
+    const comp = useCompData<CompPage>(props.compId);
     const compRef = useCompRef(props.compId);
     const compMusic = comp.value.music || "";
     const curValue = MusicOptions.find((e) => {
@@ -30,8 +30,8 @@ export const Component = defineComponent({
         class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
       >
           {slots.Container?.(
-            comp.state.children.map((comp) => {
-              return slots.CompItem?.(comp);
+            comp.state.children.map((id) => {
+              return slots.CompItem?.(comp.getObj(id));
             })
           )}
           {curValue?.value && !editor.store.isEditMode && <PageMusic />}

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

@@ -89,7 +89,7 @@ export const Component = defineComponent({
     compId: string().def(""),
   },
   setup(props) {
-    const comp = useCompData<TextValue>(props.compId) as CompText;
+    const comp = useCompData<CompText>(props.compId);
 
     const { store, actions, controls } = useEditor();
 

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

@@ -17,7 +17,7 @@ export const View = defineComponent({
     const compRef = useCompRef(props.compId);
   
     return () => {
-      const comp = controls.compCtrl.getObj<object>(props.compId);
+      const comp = controls.compCtrl.getObj(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
 
       const isGroupComp = helper.isGroupComp(props.compId);

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

@@ -3,7 +3,7 @@ import { inject, onMounted, provide, ref } from "vue";
 
 export function useCompRef(compId: string) {
   const compRef = ref();
-  const { store, helper } = useEditor();
+  const { store, helper, controls } = useEditor();
 
   const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
   provide("compParentId", compId);

src/modules/editor/components/CompUI/defines/createCompHooks.ts

@@ -56,5 +56,5 @@ export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
 
 export function useCompData<T extends object>(compId:string) {
   const editor = useEditor();
-  return editor.controls.compCtrl.getObj<T>(compId);
+  return editor.controls.compCtrl.getObj(compId) as T;
 }

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

@@ -173,7 +173,7 @@ const CompNode = defineComponent({
   },
   setup(props) {
     const editor = useEditor();
-    const comp = editor.controls.compCtrl.getObj<any>(props.id);
+    const comp = editor.controls.compCtrl.getObj(props.id);
     return () => {
       if (!comp) return;
       const compOpts = editor.controls.compUICtrl.state.components.get(

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

@@ -11,18 +11,18 @@ export class CompCtrl extends ModuleControl<EditorModule> {
   objsMap = new Map<string, CompBase<any>>();
   history = new HistoryController();
 
-  root = createPage({}, this.history, this.objsMap);
+  root = createPage({}, this.history);
   state = RxValue.create({
     rootPage: this.root.id,
-    currCompId: this.root.state.children[0].id
+    currCompId: this.root.state.children[0]
   })
 
   get currCardObj() {
-    return this.getObj<object>(this.currCardId) as CompCard;
+    return this.root.getObj(this.currCardId) as CompCard;
   }
 
   get currCompObj() {
-    return this.getObj<CompBase<object>>(this.state.currCompId);
+    return this.root.getObj(this.state.currCompId);
   }
 
   get currCompId() {
@@ -49,23 +49,19 @@ export class CompCtrl extends ModuleControl<EditorModule> {
     super(m)
     this.init();
 
-    this.factory = createElementFactory(this.history, this.objsMap);
+    this.factory = createElementFactory(this.history);
   }
 
-  init() {
-    this.store.currStreamCardId = this.root.state.children[0].id;
-  }
-
-  getRootPage() {
-    return this.getObj<PageValue>( this.state.rootPage );
+  getObj(id:string) {
+    return this.getRootPage().getObj(id);
   }
 
-  setObj( obj: CompBase<any>) {
-    this.objsMap.set(obj.id, obj);
+  init() {
+    this.store.currStreamCardId = this.root.state.children[0];
   }
 
-  getObj<T extends object>(id:string) {
-    return this.objsMap.get(id) as CompBase<T>;
+  getRootPage() {
+    return this.root.getObj( this.state.rootPage ) as CompPage;
   }
 
   async addStreamCardAfter(compId:string) {
@@ -86,9 +82,9 @@ export class CompCtrl extends ModuleControl<EditorModule> {
 
     let nextCard = this.currCardId;
     if (compId == this.currCardId) {
-      nextCard = page.state.children[index]?.id;
+      nextCard = page.state.children[index];
       if (!nextCard) {
-        nextCard = page.state.children[index - 1].id;
+        nextCard = page.state.children[index - 1];
       }
       this.pickComp( nextCard )
     }
@@ -123,8 +119,6 @@ export class CompCtrl extends ModuleControl<EditorModule> {
     let addedObj:CompBase<any> = await creator(values);
     if (!addedObj) return;
 
-    this.setObj(addedObj);
-
     let yOffset = 0;
     if ( this.state.currCompId != this.currCardId ) {
       const rect = this.currCompObj.getLocalBounds()

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

@@ -20,7 +20,7 @@ export const helpers = EditorModule.helper({
   },
   
   findComp(compId: string) {
-    return this.controls.compCtrl.getObj<any>(compId);
+    return this.controls.compCtrl.getObj(compId);
   },
   
   isStreamCard(compId: string) {
@@ -81,20 +81,8 @@ export const helpers = EditorModule.helper({
     return m;
   },
 
-
   getCompTrees(compId: string) {
-    const comps: CompBase<any>[] = [];
-    const getParentComp = (compId: string) => {
-      const comp = this.controls.compCtrl.getObj(compId);
-      if (comp) {
-        comps.unshift(comp);
-        if (comp.parent) {
-          getParentComp(comp.parent.id);
-        }
-      }
-    };
-    getParentComp(compId);
-    return comps;
+    return this.controls.compCtrl.getRootPage().getCompTrees(compId);
   },
 
   createStyle(layout: Partial<Layout> & {size:any[]}) {

src/modules/editor/objects/Elements/base.ts

@@ -13,6 +13,8 @@ class CompBase<T extends object> extends Container {
     value: ReturnType< typeof RxValue.create<T> >;
     $el: HTMLElement = {} as HTMLElement;
 
+    static objsMap = new Map<string, CompBase<any>>();
+    
     state = RxValue.create({
         size: [0, 0],
         pos: [0,0],
@@ -25,21 +27,33 @@ class CompBase<T extends object> extends Container {
         bgColor: "transparent",
         radius: "", 
         position: "absolute" as "absolute" | "relative",
-        children: [] as CompBase<any>[]
+        children: [] as string[]
     });
 
     constructor(value:T) {
         super();
         this.value = RxValue.create(value);
         this.onCreated();
+
+        CompBase.objsMap.set(this.id, this);
+    }
+
+    getObj(id:string) {
+        return CompBase.objsMap.get(id) as CompBase<any>;
     }
+    
+    setObj(obj: CompBase<any> ) {
+        CompBase.objsMap.set(obj.id, obj);
+    }
+
     onCreated() {
         console.log("set compkey here!");
     }
+
     getChildIds() {
         if (this.state.children.length < 1) return [];
 
-        return this.state.children.map(item=>item.id);
+        return this.state.children;
     }
 
     setH( h: number) {
@@ -155,10 +169,10 @@ class CompBase<T extends object> extends Container {
     }
 
     _updateChildObjs() {
-        const childrens = this.state.children as CompBase<any>[];
+        const childrens = this.state.children;
         this.removeChildren(0, this.children.length);
         childrens.forEach(c=>{
-            this.addChild(c)
+            this.addChild(CompBase.objsMap.get(c) as any)
         })
         this.updateTransform();
     }

src/modules/editor/objects/Elements/factory.ts

@@ -8,13 +8,14 @@ import { TextValue, createTextComp } from "./text";
 import { VideoValue, createVideoComp } from "./video";
 import { Web3DValue, createWeb3DComp } from "./web3d";
 
-export function createElementFactory(h:HistoryController, objMap: Map<string, any>) {
+export function createElementFactory(h:HistoryController) {
+
     return {
-        Image: (value: Partial<ImageValue>)=>createImageComp(value, h, objMap),
-        Video: (value: Partial<VideoValue>)=>createVideoComp(value, h, objMap),
-        Text: (value: Partial<TextValue>)=>createTextComp(value, h, objMap),
-        Web3D: (value: Partial<Web3DValue>)=>createWeb3DComp(value, h, objMap),
-        Page: (value: Partial<PageValue>)=>createPage(value, h, objMap),
-        StreamCard: (value: Partial<CardValue>)=>createCard(h, objMap),
+        Image: (value: Partial<ImageValue>)=>createImageComp(value, h),
+        Video: (value: Partial<VideoValue>)=>createVideoComp(value, h),
+        Text: (value: Partial<TextValue>)=>createTextComp(value, h),
+        Web3D: (value: Partial<Web3DValue>)=>createWeb3DComp(value, h),
+        Page: (value: Partial<PageValue>)=>createPage(value, h),
+        StreamCard: (value: Partial<CardValue>)=>createCard(h),
     };
 }

src/modules/editor/objects/Elements/image.ts

@@ -1,4 +1,3 @@
-import { effect } from "vue";
 import { CompBase } from "./base";
 import { HistoryController } from "./history";
 import { Dict_Imgs } from "@/dict";
@@ -29,13 +28,15 @@ export class CompImage extends CompBase<ImageValue> {
     this.compKey = "Image";
     this.state.size = [750, 400];
     this.value.initSized = false;
-    this.state.children.push(new CompImageContent({ url: this.value.url }));
+    const c = new CompImageContent({ url: this.value.url });
+    this.state.children.push(c.id);
   }
 
   get imageObj() {
-    return this.state.children[0];
+    return this.getObj(this.state.children[0]) as CompImageContent;
   }
 
+
   override init(): void {
     super.init();
 
@@ -51,8 +52,7 @@ export class CompImage extends CompBase<ImageValue> {
 
 export async function createImageComp(
   values: Partial<ImageValue>,
-  h: HistoryController,
-  objMap: Map<string, any>
+  h: HistoryController
 ): Promise<CompImage> {
   return new Promise((r) => {
     const options = {
@@ -99,7 +99,7 @@ export async function createImageComp(
       }
       obj.init();
       obj.setHistory(h);
-      objMap.set(obj.id, obj);
+
       r(obj);
     };
   });

src/modules/editor/objects/Elements/page.ts

@@ -1,6 +1,5 @@
 import { CompBase } from "./base";
 import { HistoryController } from "./history";
-import { utils } from "./utils";
 
 export type PageValue = {
   music: string;
@@ -22,7 +21,8 @@ export class CompCard extends CompBase<CardValue> {
     super.init();
 
     this.state.children.forEach((c) => {
-      c.on("transformChange", () => {
+      const obj = this.getObj(c)
+      obj.on("transformChange", () => {
         this.extendHeight();
       });
     });
@@ -30,7 +30,7 @@ export class CompCard extends CompBase<CardValue> {
 
   addComp(comp: CompBase<any>) {
     const childrens = this.state.children.slice(0);
-    childrens.push(comp);
+    childrens.push(comp.id);
     this.state.setChildren(childrens);
     this.extendHeight();
     comp.on("transformChange", ()=>{
@@ -43,7 +43,7 @@ export class CompCard extends CompBase<CardValue> {
     let maxH = 0,
       n = childrens.length;
     while (n--) {
-      const c = childrens[n];
+      const c = this.getObj(childrens[n]) ;
       const aabb = c.getLocalBounds();
       maxH = Math.max(maxH, aabb.y + aabb.height);
     }
@@ -66,44 +66,57 @@ export class CompPage extends CompBase<PageValue> {
   insertCard(srcCardId: string, card: CompCard) {
     const state = this.state;
     const children = state.children.slice(0);
-    let childs = children.map((item) => item.id);
-    const index = childs.indexOf(srcCardId) + 1;
-    children.splice(index, 0, card);
+    const index = children.indexOf(srcCardId) + 1;
+    children.splice(index, 0, card.id);
     state.setChildren(children);
+
     return index;
   }
 
   removeCard(srcCardId: string) {
     const state = this.state;
     const children = state.children.slice(0);
-    let childs = children.map((item) => item.id);
-    const index = childs.indexOf(srcCardId);
+    const index = children.indexOf(srcCardId);
     children.splice(index, 1);
     state.setChildren(children);
     return index;
   }
 
-  switchCard(fromIndex: number, toIndex: number) {
-    console.log("switch");
+  getCompTrees(compId: string) {
+    const comps: CompBase<any>[] = [];
+    const getParentComp = (compId: string) => {
+      const comp = this.getObj(compId);
+      if (comp) {
+        comps.unshift(comp);
+        if (comp.parent) {
+          getParentComp(comp.parent.id);
+        }
+      }
+    };
+    getParentComp(compId);
+    return comps;
   }
 }
 
-export function createPage( values: Partial<PageValue>,  h: HistoryController, objMap: Map<string, any>) {
+export  function createPage( values: Partial<PageValue>,  h: HistoryController) {
 
   const options = {music: "", volume: 100, ...values}
   const obj = new CompPage(options);
-  obj.state.children.push(createCard(h, objMap)); //默认有一页卡片
+  const card =  createCard(h);
+
+
+  obj.state.children.push(card.id); //默认有一页卡片
+
   obj.init();
+
   obj.setHistory(h);
-  objMap.set(obj.id, obj);
+  
   return obj;
 }
 
-export function createCard(histry: HistoryController, objMap: Map<string, any>) {
+export function createCard(histry: HistoryController) {
   const obj = new CompCard({ test: 1 });
   obj.init();
   obj.setHistory(histry);
-  
-  objMap.set(obj.id, obj);
   return obj;
 }

src/modules/editor/objects/Elements/text.ts

@@ -20,13 +20,11 @@ export class CompText extends CompBase<TextValue> {
 }
 
 const DefaultText = `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`;
-export async function createTextComp(values: Partial<TextValue>, h: HistoryController, objMap: Map<string, any>) {
+export async function createTextComp(values: Partial<TextValue>, h: HistoryController) {
     const options = {text: DefaultText, ...values};
     const obj = new CompText(options)
     obj.init();
     obj.setHistory(h);
-
-    objMap.set(obj.id, obj);
-
+    
     return obj;
 }

src/modules/editor/objects/Elements/video.ts

@@ -25,12 +25,11 @@ export class CompVideo extends CompBase<VideoValue> {
 }
 
 const DefaultVideo = `//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm`;
-export async function createVideoComp(values: Partial<VideoValue>, h:HistoryController, objMap: Map<string, any>) {
+export async function createVideoComp(values: Partial<VideoValue>, h:HistoryController) {
     const options = {url: DefaultVideo, ratio: 1, autoplay:true, loop: true, controls:true, poster:"", ...values};
     const obj = new CompVideo(options)
     obj.state.size = [750, 750];
     obj.init();
     obj.setHistory(h);
-    objMap.set(obj.id, obj);
     return obj;
 }

src/modules/editor/objects/Elements/web3d.ts

@@ -23,13 +23,12 @@ export class CompWeb3D extends CompBase<Web3DValue> {
 
 
 const DefaultVideo = `https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82`;
-export async function createWeb3DComp(values: Partial<Web3DValue>, h:HistoryController, objMap: Map<string, any>) {
+export async function createWeb3DComp(values: Partial<Web3DValue>, h:HistoryController) {
     const options = {url: DefaultVideo, ratio: 1, inline:true, poster: Dict_Imgs.Default, ...values};
     const obj = new CompWeb3D(options)
     obj.state.size = [750, 750];
     obj.init();
     obj.setHistory(h);
-
-    objMap.set(obj.id, obj);
+    
     return obj;
 }

yarn.lock

@@ -1770,10 +1770,10 @@
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz#f6344ab32ba0163a3b8cf4f4b9fe6641aef2bea7"
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
-"@queenjs/components@^0.0.21":
-  version "0.0.21"
-  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.21.tgz#fa422ce3eadcd0271d0a97561bb65c3f9f59d090"
-  integrity sha512-6gDhEQuDc2g5h7T5xyuev35qqje0VcejsRhm8kLrOrKmgmZIejurw5eWBVsgzRH3tqbn3oLOtIjCsYRrDjuTzA==
+"@queenjs/components@^0.0.22":
+  version "0.0.22"
+  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.22.tgz#c1fbf2c8e38a3e02f2e9625a3f64b44e84e8461a"
+  integrity sha512-DwbnVsrc5NZXv3gL1H/GFxqQaI455H0G6HAVruR4B2I3IXvYUBbli/eArAyDnK5WOp6cVX11dnWt8BWa5sJZ9Q==
   dependencies:
     "@queenjs/utils" "^0.0.1"