更新属性的添加

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

@@ -20,15 +20,15 @@ export const Component = defineComponent({
     const compCtrl = controls.compCtrl;
 
     return () => (
-      <View compId={props.compId} class={[compCtrl.state.refCurrCardId() == props.compId && CurrCompStyle,]}>
-        {comp.state.refChildren().map((compItem) => {
+      <View compId={props.compId} class={[compCtrl.state.currCardId == props.compId && CurrCompStyle,]}>
+        {comp.state.children.map((compItem) => {
           const Comp =
             controls.compUICtrl.state.components.get(compItem.compKey)
               ?.Component || CompUI.StreamCard.Component;
 
           return <Comp key={compItem.id} compId={compItem.id} />;
         })}
-        {store.isEditMode && compCtrl.state.refCurrCardId() == props.compId && <Hudop compId={props.compId} />}
+        {store.isEditMode && compCtrl.state.currCardId == props.compId && <Hudop compId={props.compId} />}
 
       </View>
     );
@@ -51,13 +51,13 @@ export const Hudop = defineComponent({
 
     return () => (
       <div class={[Style, "shadow"]} ref={opref}>
-        {compCtrl.getRootPage().state.refChildren().length > 1 && (
+        {compCtrl.getRootPage().state.children.length > 1 && (
           <IconMove
             class="draganchor"
             onMousedown={() => actions.pickComp(props.compId)}
           />
         )}
-        {compCtrl.getRootPage().state.refChildren().length > 1 && (
+        {compCtrl.getRootPage().state.children.length > 1 && (
           <IconDelete
             onClick={(e: any) => {
               e.stopPropagation();

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

@@ -1,43 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { defineComponent } from "vue";
-import { string } from "vue-types";
-import { useCompData } from ".";
-import { View } from "../View";
-import { useImage } from "./useImage";
-
-export const Component = defineComponent({
-  props: {
-    compId: string().isRequired,
-  },
-  setup(props) {
-    const comp = useCompData(props.compId);
-    const { store, controls } = useEditor();
-    const img = useImage(() => ({ value: comp.value, size: comp.layout.size }));
-
-    async function changeVal() {
-      if (!store.isEditMode) return;
-      const url = await controls.pickCtrl.pickOneImage();
-      if (!url) return;
-
-      comp.value.url = url;
-      comp.value.x = 0;
-      comp.value.y = 0;
-      comp.value.s = 1;
-    }
-
-    return () => (
-      <View
-        class="overflow-hidden"
-        compId={props.compId}
-        onDblclick={changeVal}
-      >
-        <img
-          crossorigin="anonymous"
-          class="w-full h-full pointer-events-none"
-          src={img.url}
-          style={img.style}
-        />
-      </View>
-    );
-  },
-});

src/modules/editor/components/CompUI/basicUI/Image/index.ts

@@ -1,37 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
-
-export { Component } from "./component";
-
-export const options = {
-  name: "图片",
-  thumbnail: Dict_Imgs.Default,
-};
-
-export const { createComp, useCompData } = createCompHooks({
-  value: { url: Dict_Imgs.Default, x: 0, y: 0, s: 1 },
-});
-
-export const Form = createAttrsForm([
-  {
-    label: "图片",
-    dataIndex: "value.url",
-    component: "Input",
-  },
-  {
-    label: "x偏移",
-    dataIndex: "value.x",
-    component: "Input",
-  },
-  {
-    label: "y偏移",
-    dataIndex: "value.y",
-    component: "Input",
-  },
-  {
-    label: "缩放",
-    dataIndex: "value.s",
-    component: "Input",
-  },
-]);

src/modules/editor/components/CompUI/basicUI/Image/useImage.ts

@@ -1,68 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { useEditor } from "@/modules/editor";
-import { AnyFun } from "queenjs/typing";
-import { effect, reactive, watchEffect } from "vue";
-
-export function useImage(
-  getVal: () => {
-    value: {
-      url: string;
-      x: number;
-      y: number;
-      s: number;
-    };
-    size?: number[];
-  }
-) {
-  const { helper } = useEditor();
-  const state = reactive({
-    url: Dict_Imgs.Default,
-    style: {} as any,
-  });
-
-  const image = new Image();
-  image.crossOrigin = "anonymous";
-
-  let watchStop: AnyFun | null = null;
-
-  image.onload = function () {
-    watchStop = watchEffect(() => {
-      const { value, size = [] } = getVal();
-      const { url, x = 0, y = 0, s = 1 } = value;
-      const ratio = image.naturalWidth / image.naturalHeight;
-      const w = size[0] || 750;
-      const h = size[1] || w / ratio;
-      const style: any = {};
-      const currRatio = w / h;
-      if (currRatio > ratio) {
-        const imgH = w / ratio;
-        style.width = helper.designToNaturalSize(w);
-        style.height = helper.designToNaturalSize(imgH);
-        style.marginTop = helper.designToNaturalSize((h - imgH) / 2);
-      } else {
-        const imgW = h * ratio;
-        style.height = helper.designToNaturalSize(h);
-        style.width = helper.designToNaturalSize(imgW);
-        style.marginLeft = helper.designToNaturalSize((w - imgW) / 2);
-      }
-      style.transform = `translate(${x}%,${y}%) scale(${s})`;
-      state.style = style;
-      state.url = url;
-    });
-  };
-
-  image.onerror = function () {
-    state.style = {
-      width: "100%",
-      height: "100%",
-    };
-    state.url = Dict_Imgs.Default;
-  };
-
-  watchEffect(() => {
-    if (watchStop) watchStop();
-    image.src = getVal().value.url;
-  });
-
-  return state;
-}

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

@@ -26,12 +26,14 @@ export const Component = defineComponent({
       }
     }
 
+
+   
     return () => {
 
       const value = comp.value;
       const isCropping = controls.cropCtrl.state.compId == props.compId;
-      const sizes = comp.imageObj.state.refSize();
-      const pos = comp.imageObj.state.refPos();
+      const sizes = comp.imageObj.state.size;
+      const pos = comp.imageObj.state.pos;
       const styleObj = {
           transform: comp.imageObj.localTransform.getMatrixStr(),
           transformOrigin: "0 0 ",
@@ -42,6 +44,7 @@ export const Component = defineComponent({
           top: helper.designToNaturalSize(pos[1])
       }
 
+   
       return (
         <View
           class={"overflow-hidden"}

src/modules/editor/components/CompUI/basicUI/Image2/index.ts

@@ -32,10 +32,12 @@ export const Form = createAttrsForm([
   {
     label: "添加链接",
     dataIndex: "value.showLink",
+    setterIndex: "value.setShowLink",
     component: "Switch",
   },
   {
     dataIndex: "value.link",
+    setterIndex: "value.setLink",
     component: "Input",
     props: {
       placeholder: "http://",

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

@@ -30,7 +30,7 @@ export const Component = defineComponent({
         class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
       >
           {slots.Container?.(
-            comp.state.refChildren().map((comp) => {
+            comp.state.children.map((comp) => {
               return slots.CompItem?.(comp);
             })
           )}

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

@@ -106,7 +106,7 @@ export const Component = defineComponent({
         }
         state.editableId = "";
       });
-      
+
       if (controls.compCtrl.currCompId == props.compId) {
           state.editableId = "" + Date.now();
       }
@@ -133,7 +133,7 @@ export const Component = defineComponent({
           />
         ) : (
           <div
-            innerHTML={comp.value.refText()}
+            innerHTML={comp.value.text}
             class={[textStyle, store.isEditMode && `pointer-events-none`]}
           />
         )}

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

@@ -1,10 +1,11 @@
 import { defineComponent, ref, watch, onMounted } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
 import { useEditor } from "@/modules/editor";
 import { IconPicture } from "@queenjs/icons";
 import { css } from "@linaria/core";
+import { useCompData } from "../../defines/createCompHooks";
+import { CompVideo } from "@/modules/editor/objects/Elements/video";
 
 export const Component = defineComponent({
   props: {
@@ -12,29 +13,36 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { store, controls, actions } = useEditor();
-    const comp = useCompData(props.compId);
-    const { value } = comp;
+    const compCtrl = controls.compCtrl;
+    const comp = useCompData(props.compId) as CompVideo;
+
     const videoRef = ref();
 
     async function changeVal() {
       try {
         const url = await controls.pickCtrl.pickOneImage();
         if (!url) return;
-        value.url = url;
+        comp.value.setUrl(url);
+        compCtrl.history.submit();
+
       } catch (error) {
         console.log(error);
       }
     }
 
-    watch(
-      () => [value.ratio],
-      () => {
+    if (store.isEditMode) {
+      comp.value.onRatioChanged(()=>{
+        if ( !videoRef.value ) return;
+
         const { videoWidth, videoHeight } = videoRef.value;
-        const t = value.ratio || videoWidth / videoHeight;
-        comp.setH(comp.getW() / t);
-        actions.onCompLayoutUpdated(comp);
-      }
-    );
+        const t = comp.value.ratio || videoWidth / videoHeight;
+        const h  = comp.state.size[0] / t;
+        if (h != comp.state.size[1]) {
+          comp.state.setSize([comp.state.size[0], h]);
+        }
+      })
+    }
+   
     onMounted(() => {
       videoRef.value.addEventListener("play", () => {
         controls.mediaCtrl.pauseOtherMedia(props.compId);
@@ -42,6 +50,7 @@ export const Component = defineComponent({
       controls.mediaCtrl.setMediasInstance(props.compId, videoRef.value);
     });
     return () => {
+      const value = comp.value;
       const options: any = {};
       if (value.autoplay) options.autoplay = false;
       if (value.loop) options.loop = true;

src/modules/editor/components/CompUI/basicUI/Video/index.ts

@@ -1,5 +1,5 @@
+import { partial } from "lodash";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { ImagePicker } from "../../formItems/ImagePicker";
 
 export { Component } from "./component";
@@ -9,20 +9,6 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/video2.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    url: "//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm",
-    ratio: 1,
-    autoplay: true,
-    loop: true,
-    controls: true,
-    poster: "",
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
-
 export const Form = createAttrsForm([
   // {
   //   label: "视频地址",
@@ -32,11 +18,13 @@ export const Form = createAttrsForm([
   {
     label: "封面",
     dataIndex: "value.poster",
+    setterIndex: "value.setPoster",
     component: ImagePicker,
   },
   {
     label: "视频比例",
     dataIndex: "value.ratio",
+    setterIndex: "value.setRatio",
     component: "Select",
     props: {
       options: [
@@ -57,6 +45,7 @@ export const Form = createAttrsForm([
   {
     label: "循环播放",
     dataIndex: "value.loop",
+    setterIndex: "value.setLoop",
     component: "Switch",
   },
   // {
@@ -65,3 +54,4 @@ export const Form = createAttrsForm([
   //   component: "Switch",
   // },
 ]);
+

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

@@ -22,6 +22,7 @@ export const View = defineComponent({
 
       const isGroupComp = helper.isGroupComp(props.compId);
 
+      
       return (
         <div
           ref={compRef}

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

@@ -4,10 +4,11 @@ import { css } from "@linaria/core";
 import { Effect, queenApi, useModal } from "queenjs";
 import { defineComponent, reactive, watch, watchEffect } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
 import { IconClose } from "@queenjs/icons";
 import { Image } from "@queenjs/ui";
+import { useCompData } from "../../defines/createCompHooks";
+import { CompWeb3D } from "@/modules/editor/objects/Elements/web3d";
 
 export const Component = defineComponent({
   props: {
@@ -15,7 +16,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { store, actions } = useEditor();
-    const comp = useCompData(props.compId);
+    const comp = useCompData(props.compId) as CompWeb3D;
     const { value } = comp;
 
     async function pickPack() {
@@ -39,13 +40,14 @@ export const Component = defineComponent({
       show3d: false,
     });
 
-    watch(
-      () => [value.ratio],
-      () => {
-        comp.setH(comp.getW() / value.ratio);
-        actions.onCompLayoutUpdated(comp);
-      }
-    );
+    if (store.isEditMode) {
+      comp.value.onRatioChanged(()=>{
+        const h = comp.state.size[0] / value.ratio;
+        if ( h !=  comp.state.size[1]) {
+          comp.state.size = [comp.state.size[0], h];
+        }
+      })
+    }
 
     return () => {
       return (

src/modules/editor/components/CompUI/basicUI/Web3D/index.ts

@@ -1,6 +1,4 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { ImagePicker } from "../../formItems/ImagePicker";
 
 export { Component } from "./component";
@@ -10,32 +8,24 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/cube.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
-    inline: true,
-    poster: Dict_Imgs.Default,
-    ratio: 1,
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
 
 export const Form = createAttrsForm([
   {
     label: "3D链接",
     dataIndex: "value.url",
+    setterIndex: "value.setUrl",
     component: "Input",
   },
   {
     label: "封面",
     dataIndex: "value.poster",
+    setterIndex: "value.setPoster",
     component: ImagePicker,
   },
   {
     label: "场景比例",
     dataIndex: "value.ratio",
+    setterIndex: "value.setRatio",
     component: "Select",
     props: {
       options: [
@@ -50,6 +40,7 @@ export const Form = createAttrsForm([
   {
     label: "是否内嵌3D",
     dataIndex: "value.inline",
+    setterIndex: "value.setInline",
     component: "Switch",
   },
 ]);

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -3,17 +3,18 @@ import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { compMasks } from "@/modules/editor/objects/DesignTemp/creates/CompMasks";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { Input, InputNumber, Select } from "ant-design-vue";
-import { isEmpty } from "lodash";
+import _, { isEmpty } from "lodash";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { GroupNumber } from "../formItems/GroupNumber";
 import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
+import { CompBase } from "@/modules/editor/objects/Elements/base";
 
 export const layoutColumns: ColumnItem[] = [
   {
     label: "尺寸",
-    dataIndex: "layout.size",
+    dataIndex: "state.size",
     component: GroupNumber,
     props: {
       labels: ["宽度", "高度"],
@@ -84,7 +85,7 @@ export const layoutColumns: ColumnItem[] = [
   // },
   {
     label: "透明度",
-    dataIndex: "layout.opacity",
+    dataIndex: "state.opacity",
     component: Slider,
     props: {
       defaultValue: 1,
@@ -98,7 +99,7 @@ export const layoutColumns: ColumnItem[] = [
 export const bgColumns: ColumnItem[] = [
   {
     label: "背景颜色",
-    dataIndex: "layout.background.color",
+    dataIndex: "state.bgColor",
     ...createColorOpts(),
   },
   // {
@@ -160,13 +161,26 @@ export const bgColumns: ColumnItem[] = [
 export function createAttrsForm(valueColumns: ColumnItem[]) {
   return defineComponent({
     props: {
-      component: any<DesignComp>().isRequired,
+      component: any<CompBase<any>>().isRequired,
     },
     setup(props) {
-      const { store, actions } = useEditor();
-      function changeVal(e: { dataIndex: string; value: any }) {
-        actions.updateCompData(store.currComp, e.dataIndex, e.value);
-        actions.submitUpdate();
+      const {controls } = useEditor();
+
+      function changeVal(e: { dataIndex: string; value: any , setterIndex:string}) {
+        let setterpath = e.setterIndex;
+        if (!setterpath) {
+            const dataIndex = e.dataIndex;
+            const paths = dataIndex.split(".")
+            const prop = paths[paths.length-1];
+            paths[paths.length-1] = "set" + prop.slice(0, 1).toUpperCase() + prop.slice(1);
+            setterpath = paths.join(".");
+        }
+        _.invoke(props.component, setterpath, e.value)
+      }
+
+      function changeValEnd(e: { dataIndex: string; value: any , setterIndex:string}) {
+        changeVal(e);
+        controls.compCtrl.history.submit();
       }
 
       return () => {
@@ -180,6 +194,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                   data={component}
                   columns={valueColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
               </>
             ) : null}
@@ -188,14 +203,16 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
               data={component}
               columns={layoutColumns}
               onChange={changeVal}
+              onChangeEnd={changeValEnd}
             />
-            {!isEmpty(component?.layout?.background) ? (
+            {!isEmpty(component.state.bgColor) ? (
               <>
                 <div>背景</div>
                 <FormUI
                   data={component}
                   columns={bgColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
               </>
             ) : null}

src/modules/editor/components/CompUI/defines/formOpts/createColorOpts.ts

@@ -9,6 +9,7 @@ export function createColorOpts(): Pick<
     component: "ColorPicker",
     getValue(v) {
       try {
+        if (v== "transparent") return [0,0,0]
         return hexToColor(v);
       } catch (error) {
         return [0, 0, 0];

src/modules/editor/components/CompUI/formItems/GroupNumber.tsx

@@ -1,5 +1,5 @@
 import { InputNumber } from "ant-design-vue";
-import { defineComponent } from "vue";
+import { defineComponent , reactive} from "vue";
 import { any } from "vue-types";
 
 export const GroupNumber = defineComponent({
@@ -9,8 +9,9 @@ export const GroupNumber = defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
+
     function changeVal(index: number, v: any) {
-      const { value } = props;
+      const value  = [...props.value];
       value[index] = parseInt(v) || 0;
       emit("change", value);
     }

src/modules/editor/components/CompUI/formItems/Slider.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
     max: number(),
     step: number(),
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     const state = reactive({
       value: props.value,
@@ -23,6 +23,11 @@ export default defineComponent({
       emit("change", state.value);
     };
 
+    const changeValEnd = () => {
+      emit("change", state.value);
+      emit("changeEnd", state.value);
+    };
+
     watchEffect(() => {
       if (props.value != undefined) {
         state.value = props.value;
@@ -49,12 +54,12 @@ export default defineComponent({
             class="item_slider"
             tooltipVisible={false}
             {...attr}
-            onAfterChange={() => changeVal()}
+            onAfterChange={() => changeValEnd()}
           />
           <InputNumber
             class="item_input"
             {...attr}
-            onPressEnter={() => changeVal()}
+            onPressEnter={() => changeValEnd()}
             // onBlur={() => {
             //   if (state.value !== props.value) changeVal();
             // }}

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

@@ -7,9 +7,10 @@ import { css } from "@linaria/core";
 export default defineUI({
   setup() {
     const editor = useEditor();
+    const compCtrl = editor.controls.compCtrl;
 
     return () => {
-      const { currComp } = editor.store;
+      const currComp  = compCtrl.currCompObj;
       const Form =
         editor.controls.compUICtrl.state.components.get(currComp?.compKey)
           ?.Form || Empty;

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

@@ -1,14 +1,11 @@
-import { Exception, ModuleControl, queenApi } from "queenjs";
+import { ModuleControl, queenApi } from "queenjs";
 import { EditorModule } from "../../module";
 
 import { CompBase } from "../../objects/Elements/base";
 import { RxValue } from "../../objects/Elements/RxValue";
-import { CardValue, CompCard, CompPage, PageValue, createCard, createPage } from "../../objects/Elements/page";
+import { CompCard, CompPage, PageValue, createCard, createPage } from "../../objects/Elements/page";
 import { HistoryController } from "../../objects/Elements/history";
-import { CompImage, createImageComp } from "../../objects/Elements/image";
-import { createTextComp } from "../../objects/Elements/text";
-
-
+import { createElementFactory } from "../../objects/Elements/factory";
 
 export class CompCtrl extends ModuleControl<EditorModule> {
   objsMap = new Map<string, CompBase<any>>();
@@ -40,11 +37,20 @@ export class CompCtrl extends ModuleControl<EditorModule> {
     this.state.setCurrCompId(compId);
   }
 
+  factory: ReturnType<typeof createElementFactory>
+
+  getCompKeyFactory( compKey: string) {
+    return this.factory[compKey as keyof typeof this.factory];
+  }
+
   constructor(m:EditorModule) {
     super(m)
     this.init();
+
+    this.factory = createElementFactory(this.history, this.objsMap);
   }
 
+
   init() {
     this.objsMap.clear();
     this.setObj(this.root);
@@ -54,7 +60,7 @@ export class CompCtrl extends ModuleControl<EditorModule> {
   }
 
   getRootPage() {
-    return this.getObj<PageValue>( this.state.refRootPage() );
+    return this.getObj<PageValue>( this.state.rootPage );
   }
 
   setObj( obj: CompBase<any>) {
@@ -111,20 +117,14 @@ export class CompCtrl extends ModuleControl<EditorModule> {
         queenApi.messageError("请先选中一个卡片");
         return;
     }
-    let addedObj:CompBase<any> | null = null; // as CompBase<any>;
-
-    if(compKey == "Image")
-    {
-          const objIm = values?.url ?await createImageComp(values.url) : await createImageComp();
-          this.setObj(objIm.imageObj);
-          addedObj = objIm;
-    } else if (compKey == "Text") {
-        const t = values?.text ? values.text: undefined;
-        const  objt = createTextComp(t);
-        this.setObj(objt);
-        addedObj = objt;
+  
+    const creator  = this.getCompKeyFactory(compKey);
+    if ( !creator ) {
+      queenApi.messageError("不支持的组件");
+      return;
     }
 
+    let addedObj:CompBase<any> = await creator(values);
     if (!addedObj) return;
 
     this.setObj(addedObj);
@@ -139,9 +139,6 @@ export class CompCtrl extends ModuleControl<EditorModule> {
     addedObj.position = {x: xOffset, y: yOffset} as any;
     addedObj.updateTransform();
 
-    console.log( addedObj.worldTransform, addedObj.localTransform)
-   
-
     this.currCardObj.addComp(addedObj);
 
     this.pickComp( addedObj.id );

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

@@ -1,7 +1,7 @@
 import { Filter } from "queenjs/typing";
 import { HistoryController } from "./history";
 import {BehaviorSubject} from "rxjs";
-import { ref } from  "vue";
+import { ref, reactive } from  "vue";
 
 export class ValueSnap {
     Id:string;
@@ -47,13 +47,14 @@ export function createValueSnap(value:any, oldValue:any, rx:BehaviorSubject<any>
 class RxValue {
    static create<T extends {[key:string]: any}>(_fields:T, histroy?: HistoryController ) {
         let obj = {} as any;
-        let refs = {} as any;
+        
 
         obj._historySnap = {} as any;
         obj._historySub = {} as any;
         obj._rxs = {} as any;
         obj._fields = _fields;
         obj._history = histroy;
+        obj._refs = {} as any;
 
         const names = Object.keys(_fields);
         
@@ -65,14 +66,17 @@ class RxValue {
 
                 const snap = createValueSnap(initValue, initValue, f);
                 obj._historySnap[name] = snap;
+                const rxc =  reactive({value: initValue});
 
                 Object.defineProperty(obj, currName, {
                     get: function(){
-                        return f.getValue().value;
+                        return rxc.value;
                     },
                     set: function(v) {
                         f.next({value: v});
-                    }
+                    },
+                    configurable: true,
+                    enumerable: true
                 })
 
                 const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1);
@@ -82,24 +86,18 @@ class RxValue {
                 }
         
                 obj["on"+CamName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
-                    return f.subscribe((v)=>subscribe(v.value, snap.OldValue))
-                }
-
-                obj["ref"+CamName] = function(){
-                    const initV = f.getValue().value;
-                    if (!refs[currName]) {
-                        refs[currName] = ref(initV);
-                        f.subscribe((v)=>{
-                            refs[currName].value = v.value;
-                        })
-                    }
-                    return refs[currName].value;
+                    return f.subscribe((v)=>{
+                            subscribe(v.value, snap.OldValue)
+                        }
+                    )
                 }
-
+                
                 obj._historySub[name] = f.subscribe((v)=>{
-                    if (!v._hstry) return;
                     snap.OldValue = v.value;
+                    rxc.value = v.value;
+
                     if (obj._history) {
+                        if (!v._hstry) return;
                         const s = snap.clone();
                         s.Value = v.value;
                         obj._history.record(s);
@@ -132,9 +130,11 @@ class RxValue {
             [K in keyof typeof _fields as `set${Capitalize<string & K>}`]: (value: typeof _fields[K], nohistory?:boolean) => void;
         } & {
             [K in keyof typeof _fields as `on${Capitalize<string & K>}Changed`]: (subscribe: (value: typeof _fields[K], oldValue:typeof _fields[K])=>void) => void;
-        } & {
-            [K in keyof typeof _fields as `ref${Capitalize<string & K>}`]: () => typeof _fields[K];
-        } & {
+        } & 
+        // {
+        //     [K in keyof typeof _fields as `ref${Capitalize<string & K>}`]: () => typeof _fields[K];
+        // } &
+        {
             setHistory: (history: HistoryController)=>void
             toJson:()=>typeof _fields
             fromJson:(json:typeof _fields)=>void

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

@@ -21,7 +21,7 @@ class CompBase<T extends object> extends Container {
         visible: true,
         opacity: 1,
         clipPath: "",
-        bgColor: "",
+        bgColor: "transparent",
         radius: "", 
         position: "absolute" as "absolute" | "relative",
         children: [] as CompBase<any>[]
@@ -48,25 +48,25 @@ class CompBase<T extends object> extends Container {
 
     createStyle() {
         const state = this.state;
-        const style :any = {opacity: state.refOpacity()}
-        const size = state.refSize();
-        const pos = state.refPos();
+        const style :any = {opacity: state.opacity}
+        const size = state.size;
+        const pos = state.pos;
 
-        if (!state.refVisible()) {
+        if (!state.visible) {
             style.display = "none";
         } 
-        if (state.refClipPath()) {
-            style.clipPath = state.refClipPath();
+        if (state.clipPath) {
+            style.clipPath = state.clipPath;
         }
-        if (state.refBgColor()) {
-            style.backgroundColor = state.refBgColor();
+        if (state.bgColor) {
+            style.backgroundColor = state.bgColor;
         }
-        if (state.refRadius()) {
-            style.borderRadius = state.refRadius()
+        if (state.radius) {
+            style.borderRadius = state.radius
         }
-        style.position = state.refPosition();
+        style.position = state.position;
 
-        if (state.refPosition() == "relative") {
+        if (state.position == "relative") {
             if (size[0] > -1) {
                 style.width = utils.designToNaturalSize(size[0]);
             }
@@ -81,7 +81,7 @@ class CompBase<T extends object> extends Container {
             style.left = utils.designToNaturalSize(pos[0]);
             style.top = utils.designToNaturalSize(pos[1]);
 
-            const pivot = state.refPivots();
+            const pivot = state.pivots;
             style.transformOrigin = `${utils.designToNaturalSize(pivot[0])} ${utils.designToNaturalSize(pivot[1])}`
             style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
         }
@@ -121,7 +121,7 @@ class CompBase<T extends object> extends Container {
 
             this.emit("transformChange");
         })
-        
+
         this.state.onPosChanged((pos)=>{
             this.position.x = pos[0]
             this.position.y = pos[1]

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

@@ -1,12 +1,17 @@
-import { RxValue } from "./RxValue";
-import { HistoryController } from "./history";
-
 
-const History = new HistoryController();
 
-function createComponent(key: string,  h?: HistoryController) {
-    if (!h ) h = History;
+import { HistoryController } from "./history";
 
-    
+import { ImageValue, createImageComp } from "./image";
+import { TextValue, createTextComp } from "./text";
+import { VideoValue, createVideoComp } from "./video";
+import { Web3DValue, createWeb3DComp } from "./web3d";
 
+export function createElementFactory(h:HistoryController, objMap: Map<string, any>) {
+    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),
+    };
 }

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

@@ -26,7 +26,6 @@ export class CompImage extends CompBase<ImageValue> {
    override onCreated() {
         this.compKey = "Image";
         this.state.size = [750, 400];
-        this.state.bgColor = "green";
         this.value.initSized = false;
         this.state.children.push(new CompImageContent({url: this.value.url}))
    }
@@ -49,14 +48,16 @@ export class CompImage extends CompBase<ImageValue> {
 }
 
 
-export async function createImageComp(url:string = Dict_Imgs.Default): Promise<CompImage> {
+export async function createImageComp(values: Partial<ImageValue>, h:HistoryController, objMap: Map<string, any>): Promise<CompImage> {
     return new Promise((r)=>{
 
-        const obj = new CompImage({url: url, showLink: false, link: ""})
-        const isDefaultUrl = url == Dict_Imgs.Default;
+        const options = {url: Dict_Imgs.Default, showLink: false, link: "", ...values};
+        const obj = new CompImage(options)
+        const isDefaultUrl = options.url == Dict_Imgs.Default;
+
         const size = obj.state.size;
         const temImg = new Image();
-        temImg.src = url;
+        temImg.src = options.url;
         temImg.onload = function () {
           const ratio = temImg.width / temImg.height;
           if (!isDefaultUrl) { //不是默认的图片
@@ -85,7 +86,8 @@ export async function createImageComp(url:string = Dict_Imgs.Default): Promise<C
             obj.imageObj.updateTransform();
           }
           obj.init();
-
+          obj.setHistory(h);
+          objMap.set(obj.id, obj);
           r(obj);
         };
     })

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

@@ -36,7 +36,7 @@ export class CompCard extends CompBase<CardValue> {
         this.extendHeight();
     })
   }
-  
+
   extendHeight() {
     const childrens = this.state.children;
     let maxH = 0,

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

@@ -1,4 +1,5 @@
 import { CompBase } from "./base"
+import { HistoryController } from "./history";
 
 export type TextValue = {
     text: string;
@@ -19,8 +20,13 @@ 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 function createTextComp(text:string = DefaultText) {
-    const obj = new CompText({text: text})
+export async function createTextComp(values: Partial<TextValue>, h: HistoryController, objMap: Map<string, any>) {
+    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

@@ -0,0 +1,36 @@
+import { async } from "rxjs";
+import { CompBase } from "./base"
+import { HistoryController } from "./history";
+
+export type VideoValue = {
+    url: string,
+    ratio: number,
+    autoplay: boolean,
+    loop: boolean,
+    controls: boolean,
+    poster: string,
+}
+
+export class CompVideo extends CompBase<VideoValue> {
+    
+   override onCreated() {
+        this.compKey = "Video";
+   }
+
+    override init(): void {
+        super.init();
+
+        this.updateTransform();
+    }
+}
+
+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>) {
+    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

@@ -0,0 +1,35 @@
+import { Dict_Imgs } from "@/dict"
+import { CompBase } from "./base"
+import { HistoryController } from "./history"
+
+export type Web3DValue = {
+    url: string
+    inline: boolean
+    poster: string
+    ratio: number
+}
+
+export class CompWeb3D extends CompBase<Web3DValue> {
+   override onCreated() {
+        this.compKey = "Web3D";
+   }
+
+    override init(): void {
+        super.init();
+
+        this.updateTransform();
+    }
+}
+
+
+const DefaultVideo = `https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82`;
+export async function createWeb3DComp(values: Partial<Web3DValue>, h:HistoryController, objMap: Map<string, any>) {
+    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;
+}