重新定义数据驱动

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

@@ -1,27 +1,19 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
-import { useEditor } from "../../../..";
-import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
-import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompArcObj } from ".";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
-
-    
+    const data = useCompData<CompArcObj>(props.compId);
     onMounted(()=>{
         // draw();
         effect(draw);
     })
-
-    
-
     const canvasRef =  ref<HTMLCanvasElement>();
     function draw() {
         const canvas = canvasRef.value as HTMLCanvasElement;

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

@@ -1,9 +1,9 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
-import { InputNumber, Switch } from "ant-design-vue";
+import { InputNumber } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import Slider from "../../formItems/Slider";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -12,20 +12,30 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/arc.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "#000000",
-    reverseFill: false,
-    start: 0,
-    end: 360
-  },
-  layout: {
-    size: [400, 400],
-  },
-});
+
+const ArcValue = {
+  lineColor: "#000000",
+  lineWidth: 1,
+  isFill: false,
+  fillColor: "#000000",
+  reverseFill: false,
+  start: 0,
+  end: 360
+}
+
+export class CompArcObj extends DesignCompObj<typeof ArcValue> {
+  value = RxValue.create({...ArcValue})
+  onCreated() {
+    this.compKey = "Arc";
+    this.layout.size = [400, 400];
+  }
+}
+
+export function createComp() {
+  return new CompArcObj();
+}
+
+
 
 export const Form = createAttrsForm([
     {

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

@@ -1,6 +1,5 @@
 import { defineComponent } from "vue";
 import { bool, string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
@@ -8,6 +7,8 @@ import { CompUI } from "../..";
 import { SelectTransfer } from "../Transfer/select";
 import { sortedArray } from "three/src/animation/AnimationUtils";
 import { css } from "@linaria/core";
+import { useCompData } from "../../defines/hook";
+import { CompCardObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -16,13 +17,12 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const { children } = useCompData(props.compId);
-
+    const { children } = useCompData<CompCardObj>(props.compId);
     const isStreamCard = helper.isStreamCard(props.compId);
 
     return () => {
 
-      const rootPage = store.rootPage;
+      const rootPage = controls.pageCtrl.rootPage;
       const style:any = {};
       if (isStreamCard && rootPage?.value.pageMode == "short" && store.isDisplay) {
         console.log("is stream card");

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

@@ -1,24 +1,32 @@
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
+
+const CardValue = {
+}
+
+export class CompCardObj extends DesignCompObj<typeof CardValue> {
+  value = RxValue.create({...CardValue})
+  
+  constructor(){
+    super();
+    this.compKey = "Container";
+    this.layout.size = [750, 300];
+    this.layout.background.color = "#ffffff";
+  }
+}
+
+
+export function createComp() {
+  return new CompCardObj();
+}
+
 export const options = {
   name: "容器",
   thumbnail: require("@/modules/editor/assets/icons/group.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
-  children: {
-    default: () => [] as string[],
-  },
-  layout: {
-    size: [750, 300],
-    background: {
-      color: "#ffffff",
-    },
-  },
-});
-
 export const Form = createAttrsForm([]);

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

@@ -1,13 +1,10 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { View } from "../View";
-import { CompUI } from "../..";
-import { values } from "lodash";
 import { Angle, VectorLenth } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
-import { ObjsContainer } from "@/modules/editor/controllers/SelectCtrl/ObjsContainer";
+import { useCompData } from "../../defines/hook";
+import { CompCurveObj } from ".";
 
 function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
    const n = points.length;
@@ -163,7 +160,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
+    const data = useCompData<CompCurveObj>(props.compId);
     const canvasRef =  ref<HTMLCanvasElement>();
     onMounted(()=>{
         
@@ -230,7 +227,7 @@ export const Component = defineComponent({
                     e.preventDefault();
                     e.stopPropagation();
 
-                    const obj = controls.selectCtrl.objContainer as ObjsContainer;  
+                    const obj = controls.selectCtrl.objContainer;  
                     const cardX = e.clientX - box.left, cardY =  e.clientY - box.top;
                     const p = {x: cardX, y:cardY} as any;
                     obj.parent.worldTransform.applyInverse(p, p);

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

@@ -1,8 +1,10 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import { eagerComputed } from "@vueuse/core";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -11,21 +13,29 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/curve.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "#000000",
-    reverseFill: false,
-    points: [],
-    isClose: true,
-    isCurve: false,
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
+const CurveValue = {
+  lineColor: "#000000",
+  lineWidth: 1,
+  isFill: false,
+  fillColor: "#000000",
+  reverseFill: false,
+  points: [] as any[],
+  isClose: true,
+  isCurve: false,
+}
+
+export class CompCurveObj extends DesignCompObj<typeof CurveValue> {
+  value = RxValue.create({...CurveValue})
+  onCreated() {
+    this.compKey = "Curve";
+    this.layout.size = [750, 750];
+  }
+}
+
+export function createComp() {
+  return new CompCurveObj();
+}
+
 
 export const Form = createAttrsForm([
   {

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

@@ -1,27 +1,24 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompEllipseObj } from ".";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
 
-    
+    const data = useCompData<CompEllipseObj>(props.compId);
     onMounted(()=>{
         // draw();
         effect(draw);
     })
-
     
-
     const canvasRef =  ref<HTMLCanvasElement>();
     function draw() {
         const canvas = canvasRef.value as HTMLCanvasElement;

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

@@ -1,9 +1,9 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import Slider from "../../formItems/Slider";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -12,20 +12,26 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/ellicipe.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "#000000",
-    reverseFill: false,
-    start: 0,
-    end: 360
-  },
-  layout: {
-    size: [200, 400],
-  },
-});
+const EllipseValue = {
+  lineColor: "#000000",
+  lineWidth: 1,
+  isFill: false,
+  fillColor: "#000000",
+  reverseFill: false,
+  start: 0,
+  end: 360
+}
+export class CompEllipseObj extends DesignCompObj<typeof EllipseValue> {
+  value = RxValue.create({...EllipseValue})
+  
+  onCreated() {
+    this.compKey = "Ellipse";
+    this.layout.size = [200, 400];
+  }
+}
+export function createComp() {
+  return new CompEllipseObj();
+}
 
 export const Form = createAttrsForm([
     {

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

@@ -1,10 +1,11 @@
 import { defineComponent } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompGroupObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -12,7 +13,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls } = useEditor();
-    const { children } = useCompData(props.compId);
+    const { children } = useCompData<CompGroupObj>(props.compId);
     return () => (
       <View compId={props.compId}>
         <div>

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

@@ -1,18 +1,24 @@
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
+const GroupValue = {}
+export class CompGroupObj extends DesignCompObj<typeof GroupValue> {
+   value = RxValue.create({...GroupValue})
+   onCreated() {
+    this.compKey = "Group";
+   }
+}
+
+export function createComp() {
+  return new CompGroupObj();
+}
+
 export const options = {
   name: "组合",
   thumbnail: require("@/modules/editor/assets/icons/container.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
-  children: {
-    default: () => [] as string[],
-  },
-});
-
 export const Form = createAttrsForm([]);

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

@@ -2,10 +2,11 @@ import { Dict_Imgs } from "@/dict";
 import { useEditor } from "@/modules/editor";
 import { defineComponent, watch } from "vue";
 import { string, bool } from "vue-types";
-import { useCompData } from ".";
+
 import { View } from "../View";
 import { css } from "@linaria/core";
-
+import { CompImageObj } from ".";
+import { useCompData } from "../../defines/hook";
 
 export const Component = defineComponent({
   props: {
@@ -13,7 +14,7 @@ export const Component = defineComponent({
     editlayer: bool().def(true),
   },
   setup(props) {
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompImageObj>(props.compId);
 
     const { actions, helper, store, controls } = useEditor();
 
@@ -57,7 +58,7 @@ export const Component = defineComponent({
 
     return () => {
       const value = comp.value;
-      const scale = value?.s || 1;
+      const scale = value.s || 1;
       const ox = value?.x || 0;
       const oy = value?.y || 0;
       const objectFit =

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

@@ -1,6 +1,7 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -9,20 +10,32 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/image.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    url: Dict_Imgs.Default,
-    x: 0,
-    y: 0,
-    s: 1,
-    showLink: false,
-    offsetUnit: "%",
-    link: "",
-  },
-  layout: {
-    size: [750, 400],
-  },
-});
+const ImageValue = {
+  url: Dict_Imgs.Default,
+  x: 0,
+  y: 0,
+  s: 1,
+  showLink: false,
+  offsetUnit: "%",
+  link: "",
+  matrix: "",
+  w: 0,
+  h: 0,
+}
+export class CompImageObj extends DesignCompObj<typeof ImageValue> {
+  value = RxValue.create({
+     ...ImageValue
+  })
+  constructor() {
+    super();
+    this.compKey = "Image";
+    this.layout.size = [750, 400]
+  }
+}
+
+export function createComp() {
+  return new CompImageObj();
+}
 
 export const Form = createAttrsForm([
   // {

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

@@ -1,10 +1,11 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompLineObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -12,9 +13,8 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
+    const data = useCompData<CompLineObj>(props.compId);
 
-    
     onMounted(()=>{
         // draw();
         effect(draw);

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

@@ -1,9 +1,10 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import Slider from "../../formItems/Slider";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -11,19 +12,24 @@ export const options = {
   name: "直线",
   thumbnail: require("@/modules/editor/assets/icons/line.svg"),
 };
+const LineValue = {
+  lineColor: "#000000",
+  lineWidth: 1,
+  dashX: 0,
+  dashY: 0,
+}
+export function createComp() {
+  return new CompLineObj();
+}
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
-    lineWidth: 1,
-    dashX: 0,
-    dashY: 0,
-  },
+export class CompLineObj extends DesignCompObj<typeof LineValue> {
+  value = RxValue.create({...LineValue});
+  onCreated() {
+    this.compKey = "Line";
+    this.layout.size = [400, 30];
+  }
+}
 
-  layout: {
-    size: [400, 30],
-  },
-});
 
 export const Form = createAttrsForm([
   {

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

@@ -2,8 +2,9 @@ import { IconAirPlain } from "@/assets/icons";
 import { useEditor } from "@/modules/editor";
 import { defineComponent, onMounted, ref, watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
+import { useCompData } from "../../defines/hook";
+import { CompMapObj } from ".";
 // import AMapLoader from "@amap/amap-jsapi-loader";
 
 declare const AMap: any;
@@ -17,7 +18,7 @@ export const Component = defineComponent({
 
     const mapContainerRef = ref();
 
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompMapObj>(props.compId);
     const { value } = comp;
 
     // const AMap = ref();

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

@@ -1,6 +1,7 @@
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import MapAttr from "../../formItems/MapAttr";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -9,17 +10,25 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/address.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    addressInfo: {
-      lnglat: [116.397428, 39.90923],
-      address: "天安门",
-    },
+const MapValue = {
+  addressInfo: {
+    lnglat: [116.397428, 39.90923],
+    address: "天安门",
   },
-  layout: {
-    size: [710, 710],
-  },
-});
+}
+
+export class CompMapObj extends DesignCompObj<typeof MapValue> {
+  value = RxValue.create({...MapValue})
+
+  onCreated() {
+    this.compKey = "Map";
+    this.layout.size = [710, 710];
+  }
+}
+
+export function createComp() {
+  return new CompMapObj();
+}
 
 export const Form = createAttrsForm([
   {

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

@@ -1,11 +1,12 @@
-import { defineComponent , reactive} from "vue";
+import { defineComponent } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
 import { css } from "@linaria/core";
 import { PageMusic } from "./PageMusic";
 import { MusicOptions } from "./localMusic";
+import { useCompData } from "../../defines/hook";
+import { CompPageObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -19,7 +20,9 @@ export const Component = defineComponent({
   
 
     return () => {
-      const comp = useCompData(props.compId);
+      const page = controls.pageCtrl;
+
+      const comp = useCompData<CompPageObj>(props.compId);
       const { children, layout, value } = comp;
       const compMusic = value.music || "";
       const curValue = MusicOptions.find((e) => {
@@ -32,7 +35,7 @@ export const Component = defineComponent({
       } 
 
       let contextStyle:any = null;
-      if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
+      if (page.rootPage.value.pageMode == "short" && !store.isEditMode) {
         contextStyle = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
         if (!store.shortPage.isMoving) {
           contextStyle.transition = "transform .4s ease-out";
@@ -40,7 +43,8 @@ export const Component = defineComponent({
       }
       console.log("curr card=>", store.currStreamCardId, store.currStreamCard?.children.default?.length);
       style.transform = "matrix(1,0,0,1,0,0)";
-      
+      style.overflow = "unset";
+
       return (
         <div
           ref={compRef}

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

@@ -1,6 +1,7 @@
 import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { PageForm } from "./PageForm";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -9,21 +10,23 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/container.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    useFor: "mobile",
-    pageMode: "long",
-    pageSizeType: "normal"
-  },
-  children: {
-    default: () => [] as string[],
-  },
-  layout: {
-    size: [...(Design_Page_Size as [number, number])],
-    background: {
-      color: "#ffffff",
-    },
-  },
-});
+const PageValue = {
+  useFor: "mobile",
+  pageMode: "long",
+  pageSizeType: "normal",
+  music:  ""
+}
+
+export class CompPageObj extends DesignCompObj<typeof PageValue> {
+  value = RxValue.create({...PageValue})
+  onCreated() {
+    this.compKey = "Page";
+    this.layout.size = [...(Design_Page_Size as [number, number])]
+    this.layout.background.color = "#ffffff";
+  }
+}
+export function createComp() {
+  return new CompPageObj();
+}
 
 export const Form = PageForm;

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

@@ -1,6 +1,5 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { View } from "../View";
 import { CompUI } from "../..";
@@ -8,6 +7,8 @@ import { values } from "lodash";
 import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
 
 import {editState} from "./toolbar"
+import { useCompData } from "../../defines/hook";
+import { CompPolygonObj } from ".";
 
 function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
    const n = points.length;
@@ -56,7 +57,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
+    const data = useCompData<CompPolygonObj>(props.compId);
     const canvasRef =  ref<HTMLCanvasElement>();
     onMounted(()=>{
         
@@ -180,7 +181,7 @@ export const Component = defineComponent({
             ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
 
-        if (data.value.res)
+        // if (data.value.res)
         ctx.strokeStyle = data.value.lineColor;
     
         const padding = 0.2;

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

@@ -1,10 +1,11 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import toolbarUI from "./toolbarUI";
 import toolbarRight from "./toolbarRight";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -13,20 +14,26 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/polygon2.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
-    lineWidth: 0,
-    isFill: true,
-    fillColor: "#A4A4A4",
-    points: [],
-    isClose: true,
-    reverseFill: false,
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
+const PolygonValue = {
+  lineColor: "#000000",
+  lineWidth: 0,
+  isFill: true,
+  fillColor: "#A4A4A4",
+  points: [] as any,
+  isClose: true,
+  reverseFill: false,
+}
+export class CompPolygonObj extends DesignCompObj<typeof PolygonValue> {
+  value = RxValue.create({...PolygonValue})
+  onCreated() {
+    this.compKey = "Polygon";
+    this.layout.size = [750, 750]
+  }
+}
+
+export function createComp() {
+  return new CompPolygonObj();
+}
 
 export const Form = createAttrsForm([
   {

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

@@ -1,11 +1,9 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
-import { useEditor } from "../../../..";
 import { View } from "../View";
-import { CompUI } from "../..";
-import { values } from "lodash";
 import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
+import { useCompData } from "../../defines/hook";
+import { CompPolygonNormalObj } from ".";
 
 function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
    const n = points.length;
@@ -53,7 +51,7 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const data = useCompData(props.compId);
+    const data = useCompData<CompPolygonNormalObj>(props.compId);
     const canvasRef =  ref<HTMLCanvasElement>();
 
     onMounted(()=>{

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

@@ -1,9 +1,10 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import Slider from "../../formItems/Slider";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -12,8 +13,7 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/polygon.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
+const PolygonNormalValue = {
     lineColor: "#000000",
     lineWidth: 0,
     isFill: true,
@@ -23,11 +23,18 @@ export const { createComp, useCompData } = createCompHooks({
     reverseFill: false,
     edges: 6,
     baseAngle: 0,
-  },
-  layout: {
-    size: [400, 400],
-  },
-});
+}
+
+export class CompPolygonNormalObj extends DesignCompObj<typeof PolygonNormalValue> {
+  value = RxValue.create({...PolygonNormalValue})
+  onCreated() {
+    this.compKey = "PolygonNormal";
+    this.layout.size = [400, 400];
+  }
+}
+export function createComp() {
+  return new CompPolygonNormalObj();
+}
 
 export const Form = createAttrsForm([
 

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

@@ -1,10 +1,9 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
-import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
-import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompRectObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -12,9 +11,8 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
+    const data = useCompData<CompRectObj>(props.compId);
 
-    
     onMounted(()=>{
         // draw();
         effect(draw);

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

@@ -1,28 +1,40 @@
-import { Dict_Imgs } from "@/dict";
+
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
-import { InputNumber, Switch } from "ant-design-vue";
+import { InputNumber } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
+
+
 export const options = {
   name: "四边形",
   thumbnail: require("@/modules/editor/assets/icons/rect.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
+
+const RectValue = {
+  lineColor: "#000000",
     lineWidth: 0,
     isFill: true,
     fillColor: "#A4A4A4",
     reverseFill: false,
-  },
-  layout: {
-    size: [400, 400],
-  },
-});
+}
+
+export class CompRectObj extends DesignCompObj<typeof RectValue> {
+  value = RxValue.create({...RectValue});
+  onCreated() {
+    this.compKey = "Rectage";
+    this.layout.size = [400, 400];
+  }
+}
+
+export function createComp() {
+  return new CompRectObj();
+}
+
 
 export const Form = createAttrsForm([
   {

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

@@ -30,6 +30,7 @@ import {
 import { any, bool, func, number, object, string } from "vue-types";
 import NewColorPicker from "../../formItems/NewColorPicker";
 import { isFinite } from "lodash";
+import { history } from "@/modules/editor/objects/DesignTemp/factory";
 interface ColumnItem {
   label?: string;
   component?: ((...args: any[]) => any) | Record<string, any>;
@@ -461,27 +462,11 @@ export const TextToolItem = defineComponent({
       }
     );
     watch(
-      () => store.currComp.value,
+      () => store.currComp.value.text,
       () => {
         editor = toRaw(controls.textEditorCtrl.state.currEditor);
         if (!editor && store.currComp.compKey == "Text") {
           initCommands();
-          nextTick(() => {
-            const element: HTMLElement | null = document.querySelector(
-              `#editor_${store.currComp.id}`
-            );
-            if (!element) {
-              return;
-            }
-            const h = helper.pxToDesignSize(element.clientHeight);
-            console.log(h);
-            actions.updateCompData(store.currComp, "layout.size.1", h);
-            helper.extendStreamCard(store.currStreamCardId);
-            actions.selectObjs([]);
-            setTimeout(() => {
-              actions.selectObjs([store.currComp.id]);
-            }, 0);
-          });
         }
       }
     );
@@ -501,7 +486,9 @@ export const TextToolItem = defineComponent({
         if (!column?.dataIndex) {
           return;
         }
-        const compValue = store.currComp.value;
+        if (store.currComp.compKey != "Text") return;
+
+        const compValue = store.currComp.value.text;
         if (tagsKey[column.dataIndex]) {
           const hasTag = compValue.indexOf(tagsKey[column.dataIndex]);
           if (hasTag != -1) {

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

@@ -2,7 +2,7 @@ import { useEditor } from "@/modules/editor";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 import { css } from "@linaria/core";
-import { defineComponent, toRaw, watch } from "vue";
+import { defineComponent, toRaw, watch, nextTick} from "vue";
 import { any } from "vue-types";
 import { Divider } from "ant-design-vue";
 import {
@@ -16,13 +16,14 @@ import {
   TextColor,
   TextStroke,
 } from "./TextToolComp";
+import { history } from "@/modules/editor/objects/DesignTemp/factory";
 
 export const TextToolForm = defineComponent({
   props: {
     component: any<DesignComp>().isRequired,
   },
   setup(props) {
-    const { controls } = useEditor();
+    const { controls, store , helper} = useEditor();
 
     const changeVal = (e: { dataIndex: string; value: any }) => {
       let editor = controls.textEditorCtrl.state.currEditor;
@@ -39,6 +40,29 @@ export const TextToolForm = defineComponent({
         editor.editing.view.focus();
       }, 100);
     };
+
+    watch(
+      () => store.currComp.value.text,
+      () => {
+        const editor = toRaw(controls.textEditorCtrl.state.currEditor);
+        if (!editor && store.currComp.compKey == "Text") {
+   
+          nextTick(() => {
+            const element: HTMLElement | null = document.querySelector(
+              `#editor_${store.currComp.id}`
+            );
+            if (!element) {
+              return;
+            }
+            const h = helper.pxToDesignSize(element.clientHeight);
+            const size :any = store.currComp.layout.size.slice(0);
+            size[1] = h;
+            store.currComp.layout.setSize(size);
+            helper.extendStreamCard(store.currStreamCardId);
+          });
+        }
+      }
+    );
     return () => {
       return (
         <div id="text_toolform">

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

@@ -17,8 +17,8 @@ import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
 import { nextTick } from "process";
 import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
+import { useCompData } from "../../defines/hook";
 
 function GetConfig() {
   const fontSizeOptions = [];
@@ -90,7 +90,7 @@ export const Component = defineComponent({
     compId: string().def(""),
   },
   setup(props) {
-    const comp = useCompData(props.compId);
+    const comp = useCompData<any>(props.compId);
     const { store, actions } = useEditor();
 
     const state = reactive({
@@ -146,7 +146,7 @@ const EditorComp = defineComponent({
   setup(props, { emit }) {
     const inputRef = ref();
     let editorInstance = ref<InlineEditor>();
-    const comp = useCompData(props.compId);
+    const comp = useCompData<any>(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
     let blurCanceler: any = null;

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

@@ -3,15 +3,16 @@ import { css } from "@linaria/core";
 import { nextTick } from "process";
 import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
 import HeadlessEditor from "./EditorCustom";
+import { useCompData } from "../../defines/hook";
+import { CompTextObj } from ".";
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
   },
   setup(props) {
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompTextObj>(props.compId);
     const { store, actions, controls } = useEditor();
 
     const state = reactive({
@@ -50,7 +51,7 @@ export const Component = defineComponent({
           />
         ) : (
           <div
-            innerHTML={comp.value}
+            innerHTML={comp.value.text}
             id={`editor_${props.compId}`}
             class={[textStyle, store.isEditMode && `pointer-events-none`]}
           />
@@ -69,7 +70,7 @@ const EditorComp = defineComponent({
   setup(props, { emit }) {
     let editorRefVal = ref<HeadlessEditor>().value;
     let editorDomRef = ref<HTMLElement>();
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompTextObj>(props.compId);
     const { store, actions, helper, controls } = useEditor();
 
     let blurCanceler: any = null;
@@ -88,13 +89,11 @@ const EditorComp = defineComponent({
       const h = helper.pxToDesignSize(dom.clientHeight);
       const isChange = Math.abs(preHeight.value - h) > 1;
       preHeight.value = h;
-      actions.updateCompData(comp, "layout.size.1", preHeight.value);
-      helper.extendStreamCard(store.currStreamCardId);
       if (isChange) {
-        actions.selectObjs([]);
-        setTimeout(() => {
-          actions.selectObjs([props.compId]);
-        }, 0);
+        const size :any = comp.layout.size.slice(0);
+        size[1] = h;
+        comp.layout.size = size;
+        helper.extendStreamCard(store.currStreamCardId);
       }
     };
     function isInCkBodyWrapper(dom: HTMLElement) {
@@ -167,7 +166,7 @@ const EditorComp = defineComponent({
         return;
       }
       editorRefVal = await HeadlessEditor.create(editorDomRef.value);
-      editorRefVal.setData(comp.value);
+      editorRefVal.setData(comp.value.text);
       editorRefVal.focus();
       const range = document.createRange();
       range.selectNodeContents(editorDomRef.value);
@@ -178,8 +177,9 @@ const EditorComp = defineComponent({
       editorRefVal.model.document.on("change:data", () => {
         const value = editorRefVal?.getData();
 
-        if (comp.value !== value) {
-          actions.updateCompData(comp, "value", value);
+        if (comp.value.text !== value) {
+          actions.updateCompData(comp, "value.text", value);
+
           nextTick(() => {
             const element = editorRefVal?.ui.view.editable.element || null;
             if (!element) {
@@ -188,13 +188,12 @@ const EditorComp = defineComponent({
             const h = helper.pxToDesignSize(element.clientHeight);
             const isChange = Math.abs(preHeight.value - h) > 1;
             preHeight.value = h;
-            actions.updateCompData(comp, "layout.size.1", preHeight.value);
-            helper.extendStreamCard(store.currStreamCardId);
+
             if (isChange) {
-              actions.selectObjs([]);
-              setTimeout(() => {
-                actions.selectObjs([props.compId]);
-              }, 0);
+              const size: any =  comp.layout.size.slice(0);
+              size[1] = h;
+              comp.layout.size = size;
+              helper.extendStreamCard(store.currStreamCardId);
             }
           });
         }

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

@@ -1,7 +1,8 @@
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { TextToolForm } from "./TextToolForm";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 export { Component } from "./component2";
 
 export const options = {
@@ -9,14 +10,28 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/text2.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`,
-  layout: {
-    size: [750, 60],
-  },
-});
 
-// export const Form = TextForm;
+const TextValue = {
+  text: `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`
+}
+
+export class CompTextObj extends DesignCompObj<typeof TextValue> {
+  value = RxValue.create({...TextValue})
+  onCreated() {
+    this.compKey = "Text";
+    this.layout.size = [750, 60];
+  }
+  fromJson(data:any) {
+    if (data.value.text == undefined && typeof data.value == "string" ) {
+      data.value = {text: data.value};
+    }
+    super.fromJson(data);
+  }
+}
+
+export function createComp() {
+  return new CompTextObj();
+}
 
 export const Form = createAttrsForm(
   [

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

@@ -1,216 +0,0 @@
-import { IconRotate } from "@/assets/icons";
-import { CompToolbars } from "@/modules/editor/objects/Toolbars";
-import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted } from "vue";
-import { useEditor } from "../../../..";
-
-export const Transfer = defineComponent({
-  setup() {
-    const editor = useEditor();
-    const { controls, helper } = editor;
-    const { transferCtrl } = controls;
-    const { transferStyle } = transferCtrl;
-
-    onMounted(() => {
-      setTimeout(() => {
-        const pageEl = helper.findRootComp()?.$el;
-        if (pageEl) {
-          transferCtrl.init(pageEl.firstChild as HTMLElement);
-        }
-      });
-    });
-
-    onUnmounted(() => {
-      transferCtrl.destroy();
-      // console.log("transferCtrl.destroy========================");
-    });
-
-    return () => {
-      const comp = transferCtrl.currComp;
-      const toolbarOpts =
-        CompToolbars[transferCtrl.currComp?.compKey] || CompToolbars.default;
-
-      // const showTransfer =
-      //   store.isEditComp || store.pageCompIds.includes(comp.id);
-      const showTransfer = true;
-
-      return (
-        transferStyle.width && (
-          <div
-            class="absolute transfer z-999"
-            style={{
-              top: transferStyle.top,
-              left: transferStyle.left,
-              width: transferStyle.width,
-              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
-            }}
-          >
-            {showTransfer && (
-              <div class={toolbarStyle}>
-                {toolbarOpts.map((item) => {
-                  return item.getVisible.call(editor, comp) ? (
-                    <item.component
-                      class="p-4px"
-                      value={item.getValue?.(comp)}
-                      onClick={() => item.onClick.call(editor, comp)}
-                    />
-                  ) : null;
-                })}
-              </div>
-            )}
-            <div
-              style={{
-                transform: `rotate(${transferStyle.transform.rotate})`,
-                transformOrigin: `center ${
-                  parseInt(transferStyle.height.split("px")[0]) / 2
-                }px`,
-              }}
-            >
-              <div
-                class={borderStyle}
-                style={{
-                  width: transferStyle.width,
-                  height: transferStyle.height,
-                }}
-              />
-
-              {showTransfer && (
-                <>
-                  <div
-                    class={resizeStyle}
-                    style={{ marginBottom: "-" + transferStyle.height }}
-                    onMousedown={(e) =>
-                      transferCtrl.mousedown(
-                        e,
-                        comp.compKey === "Image" ? "resizeXY" : "scale"
-                      )
-                    }
-                  />
-
-                  <div
-                    class={transformBtnsStyle}
-                    style={{ marginBottom: "-" + transferStyle.height }}
-                  >
-                    <div
-                      class={transBtnStyle}
-                      onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
-                    >
-                      <IconRotate />
-                    </div>
-                  </div>
-                  <div
-                    class={resizeHeightBtnCls}
-                    style={{ top: transferStyle.height }}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeY")}
-                  />
-                  <div
-                    class={resizeWidthBtnCls}
-                    style={{ top: parseInt(transferStyle.height) / 2 + "px" }}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeX")}
-                  />
-                </>
-              )}
-            </div>
-          </div>
-        )
-      );
-    };
-  },
-});
-
-const borderStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  outline: 2px solid @inf-primary-color;
-  pointer-events: none;
-  z-index: 999;
-`;
-
-const resizeStyle = css`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  z-index: 999;
-  transform: translate(50%, 50%);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
-  cursor: nwse-resize;
-  &:hover {
-    border-color: @inf-primary-color;
-  }
-`;
-
-const transformBtnsStyle = css`
-  @apply space-x-10px whitespace-nowrap;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  font-size: 16px;
-  z-index: 999;
-  transform: translate(-50%, 50px);
-`;
-
-const transBtnStyle = css`
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #fff;
-  text-align: center;
-  line-height: 36px;
-  font-size: 20px;
-  color: #333;
-  @apply shadow cursor-move;
-
-  &:hover {
-    color: #fff;
-    background-color: @inf-primary-color;
-  }
-`;
-
-const toolbarStyle = css`
-  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -60px);
-  z-index: 999;
-`;
-
-const resizeHeightBtnCls = css`
-  position: absolute;
-  width: 30px;
-  height: 8px;
-  border-radius: 4px;
-  left: 50%;
-  transform: translate(-50%, -4px);
-  cursor: ns-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-`;
-
-const resizeWidthBtnCls = css`
-  position: absolute;
-  width: 8px;
-  height: 30px;
-  border-radius: 4px;
-  right: 0;
-  transform: translate(4px, -50%);
-  cursor: ew-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-`;

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

@@ -39,8 +39,8 @@ export const SelectTransfer = defineComponent({
         comp = store.compMap[store.selected[0]];
       }
 
-      const w :any = selectCtrl.objContainer?.getBound();
-      const isTextEdit = selectCtrl.selected.length == 1 && selectCtrl.selected[0].comp.compKey == "Text";
+      const w :any = selectCtrl.objContainer.getBound();
+      const isTextEdit = selectCtrl.gizmo.selected.length == 1 && selectCtrl.gizmo.selected[0].comp.compKey == "Text";
       let yTop = w?.y;
       if ( yTop < 0) {
         yTop = 0;
@@ -94,7 +94,7 @@ export const SelectTransfer = defineComponent({
             <>
               
               {
-                <div
+                !isTextEdit && <div
                   class={[resizeStyle, scaleBottomRightStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleBottomright"
@@ -102,7 +102,7 @@ export const SelectTransfer = defineComponent({
               }
 
                 {
-                    <div
+                  !isTextEdit &&  <div
                     class={[resizeStyle, scaleBottomLeftStyle]}
                     style={{ transform: transferStyle.matrixInvert }}
                     id="scaleBottomleft"
@@ -110,14 +110,14 @@ export const SelectTransfer = defineComponent({
                 }
 
               {
-                  <div
+                  !isTextEdit && <div
                   class={[resizeStyle, scaleTopLeftStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleTopleft"
                 />
               }
               {
-                <div
+                !isTextEdit && <div
                   class={[resizeStyle, scaleTopRightStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleTopright"

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

@@ -1,209 +0,0 @@
-import { IconResizeY } from "@/assets/icons";
-import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
-import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted , ref} from "vue";
-import { useEditor } from "../../../..";
-import { object } from "vue-types";
-
-export const StreamCardTransfer = defineComponent({
-  setup() {
-    const editor = useEditor();
-    const { store, helper } = editor;
-
-    const streamCardTransferCtrl = new TransferCtrl(editor);
-    onMounted(() => {
-      const pageEl = helper.findRootComp()?.$el;
-      if (pageEl) {
-        streamCardTransferCtrl.currComp = store.currStreamCard;
-        streamCardTransferCtrl.pageEl = pageEl.firstChild as any;
-        streamCardTransferCtrl.compEl = streamCardTransferCtrl.currComp?.$el;
-        streamCardTransferCtrl.observe();
-      }
-    });
-
-    onUnmounted(() => {
-      streamCardTransferCtrl.destroy();
-    });
-
-    return () => {
-      const transferStyle = streamCardTransferCtrl.transferStyle;
-
-      return (
-        transferStyle.width && (
-          <div
-            class="transfer absolute z-998"
-            style={{
-              top: transferStyle.top,
-              left: transferStyle.left,
-              width: transferStyle.width,
-              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
-            }}
-          >
-            <div
-              class={borderStyle}
-              style={{
-                width: transferStyle.width,
-                height: transferStyle.height,
-              }}
-            />
-          </div>
-        )
-      );
-    };
-  },
-});
-
-// const ResizeY = defineComponent({
-
-//   props: {
-//     ctrl: object<TransferCtrl>().isRequired,
-//   },
-//   setup(props) {
-//     const editor = useEditor();
-//     const { store, helper } = editor;
-   
-//     const btnRef = ref();
-//     onMounted(()=>{
-//       btnRef.value.editable = "cardResizeY";
-//     })
-
-//     return ()=>(
-//       <div ref={btnRef}
-//               class={resizeHeightBtnCls}
-//               style={{ top: props.ctrl.transferStyle.height }}
-//               onMousedown={(e) => {
-//                   e.stopPropagation();
-//                   props.ctrl.mousedown(e, "resizeY", store.currStreamCard)
-//                 }
-//               }
-//             >
-//               <IconResizeY />
-//             </div>
-//       )
-//     }
-// })
-
-
-const borderStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  outline: 1px solid @inf-primary-color;
-  pointer-events: none;
-  /* z-index: 999; */
-  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
-`;
-
-const hudStyle = css`
-  position: absolute;
-  top: 0px;
-  left: -46px;
-  background-color: white;
-  flex-direction: column;
-  color: black;
-  display: flex;
-  font-size: 12px;
-  width: 28px;
-  align-items: center;
-  border-radius: 4px;
-  .inficon {
-    padding: 8px;
-  }
-  z-index: 1000;
-`;
-
-const resizeStyle = css`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  z-index: 999;
-  transform: translate(50%, 50%);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
-  cursor: nwse-resize;
-  &:hover {
-    border-color: @inf-primary-color;
-  }
-`;
-
-const transformBtnsStyle = css`
-  @apply space-x-10px whitespace-nowrap;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  font-size: 16px;
-  z-index: 999;
-  transform: translate(-50%, 50px);
-`;
-
-const transBtnStyle = css`
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #fff;
-  text-align: center;
-  line-height: 36px;
-  font-size: 20px;
-  color: #333;
-  @apply shadow cursor-move;
-
-  &:hover {
-    color: #fff;
-    background-color: @inf-primary-color;
-  }
-`;
-
-const toolbarStyle = css`
-  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -40px);
-  z-index: 999;
-`;
-
-const resizeHeightBtnCls = css`
-  position: absolute;
-  width: 30px;
-  height: 8px;
-  border-radius: 4px;
-  left: 50%;
-  transform: translate(-50%, -4px);
-  cursor: ns-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-
-  .inficon {
-    font-size: 20px;
-    position: relative;
-    top: -6px;
-  }
-`;
-
-const resizeWidthBtnCls = css`
-  position: absolute;
-  width: 8px;
-  height: 30px;
-  border-radius: 4px;
-  right: 0;
-  transform: translate(4px, -50%);
-  cursor: ew-resize;
-  background: rgba(255, 255, 255, 0.3);
-  &:hover {
-    background: @inf-primary-color;
-  }
-  @apply shadow;
-  z-index: 999;
-`;

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

@@ -1,27 +1,23 @@
 import { defineComponent, onMounted , ref, effect} from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
+import { useCompData } from "../../defines/hook";
+import { CompTriangleObj } from ".";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { helper, controls , store} = useEditor();
-    const data = useCompData(props.compId);
-
-    
+    const data = useCompData<CompTriangleObj>(props.compId);
     onMounted(()=>{
         // draw();
         effect(draw);
     })
-
     
-
     const canvasRef =  ref<HTMLCanvasElement>();
     function draw() {
         const canvas = canvasRef.value as HTMLCanvasElement;

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

@@ -1,8 +1,8 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -11,18 +11,25 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/triangle.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    lineColor: "#000000",
+const TriangleValue = {
+  lineColor: "#000000",
     lineWidth: 0,
     isFill: true,
     fillColor: "#A4A4A4",
     reverseFill: false,
-  },
-  layout: {
-    size: [400, 400],
-  },
-});
+}
+
+export class CompTriangleObj extends DesignCompObj<typeof TriangleValue> {
+  value = RxValue.create({...TriangleValue})
+  onCreated() {
+    this.compKey = "Triangle";
+    this.layout.size = [400, 400];
+  }
+}
+export function createComp() {
+  return new CompTriangleObj();
+}
+
 
 export const Form = createAttrsForm([
   {

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

@@ -1,10 +1,11 @@
 import { defineComponent, ref, watch, onMounted,nextTick } 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/hook";
+import { CompVideoObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -12,7 +13,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const { store, controls, actions, helper } = useEditor();
-    const comp = useCompData(props.compId);
+    const comp = useCompData<CompVideoObj>(props.compId);
     const { value } = comp;
     const videoRef = ref<HTMLVideoElement>();
 

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

@@ -1,6 +1,7 @@
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { ImagePicker } from "../../formItems/ImagePicker";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -9,20 +10,27 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/video2.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
 
-  value: {
-    url: "//sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1689723277730_hPbfyN_shoe.mp4",
-    ratio: 0,
-    autoplay: true,
-    loop: true,
-    controls: true,
-    poster: "",
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
+const VideoValue = {
+  url: "//sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1689723277730_hPbfyN_shoe.mp4",
+  ratio: 0,
+  autoplay: true,
+  loop: true,
+  controls: true,
+  poster: "",
+}
+
+export class CompVideoObj extends DesignCompObj<typeof VideoValue> {
+  value = RxValue.create({...VideoValue})
+  onCreated() {
+    this.compKey = "Video";
+    this.layout.size = [750, 750];
+  }
+}
+
+export function createComp() {
+  return new CompVideoObj();
+}
 
 export const Form = createAttrsForm([
   // {

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

@@ -1,6 +1,5 @@
 import { IconAdd, IconMove } from "@/assets/icons";
 import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
-import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
@@ -46,16 +45,18 @@ export const View = defineComponent({
       });
       intersectionObserver.observe(compRef.value);
     });
+   
+    const pageCtrl = controls.pageCtrl;
 
     return () => {
+     
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
-      const isGroupComp = helper.isGroupComp(props.compId);
       const isStreamChild = helper.isStreamCardChild(props.compId);
       const cardId = helper.getCompTrees(props.compId)[1]?.id;
-      const cardIndex = store.streamCardIds.indexOf(cardId)
-      const obj = new CompObject(store.compMap[props.compId]);
+      const cardIndex = pageCtrl.streamCardIds.indexOf(cardId)
+      const obj = new CompObject(pageCtrl.compMap[props.compId]);
       const m = obj.worldTransform.clone();
       m.invert();
 
@@ -68,9 +69,11 @@ export const View = defineComponent({
       const style = helper.createStyle(comp.layout, comp);
       const page = helper.findRootComp() as DesignComp;
 
-      // if (comp.anim && comp.anim.transition) {
-      //   style.transition = "all 1s ease-out";
-      // }
+
+      if (isStreamCard) {
+        style.overflow = "unset";
+        style.position = "relative";
+      }
 
       let aniStyles = "";
       if (
@@ -88,9 +91,9 @@ export const View = defineComponent({
           !store.isEditMode
         )
           return;
-        let i = store.streamCardIds.indexOf(props.compId);
+        let i = pageCtrl.streamCardIds.indexOf(props.compId);
         if (i > 0) {
-          const c = helper.findComp(store.streamCardIds[i - 1]) as DesignComp;
+          const c = helper.findComp(pageCtrl.streamCardIds[i - 1]) as DesignComp;
           const PreComp = controls.compUICtrl.state.components.get(
             c.compKey
           ) as any;
@@ -125,9 +128,9 @@ export const View = defineComponent({
         )
           return;
 
-        let i = store.streamCardIds.indexOf(props.compId);
-        if (i < store.streamCardIds.length - 1) {
-          const c = helper.findComp(store.streamCardIds[i + 1]) as DesignComp;
+        let i = pageCtrl.streamCardIds.indexOf(props.compId);
+        if (i < pageCtrl.streamCardIds.length - 1) {
+          const c = helper.findComp(pageCtrl.streamCardIds[i + 1]) as DesignComp;
           const AfterComp = controls.compUICtrl.state.components.get(
             c.compKey
           ) as any;
@@ -150,11 +153,12 @@ export const View = defineComponent({
         <div
           ref={compRef}
           class={[
+            comp.compKey,
+
             viewStyle,
             store.isEditMode &&
               controls.selectCtrl._state != 0 &&
               editCompStyle,
-            isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
             isFocus && AnchorCompStyle,
           ]}
@@ -178,7 +182,7 @@ export const View = defineComponent({
                 !helper.isStreamCard(props.compId)
               )
                 return;
-              actions.pickComp(props.compId);
+              controls.editorCtrl.clickPickComp(props.compId);
             }}
           >
             {slots.default?.()}
@@ -237,15 +241,17 @@ export const Hudop = defineComponent({
       opref.value.editable = "hudop";
     });
 
+    const page = controls.pageCtrl;
+
     return () => (
       <div class="hudop shadow" ref={opref}>
-        {store.streamCardIds.length > 1 && (
+        {page.streamCardIds.length > 1 && (
           <IconMove
             class="draganchor"
-            onMousedown={() => actions.pickComp(props.compId)}
+            onMousedown={() => controls.editorCtrl.clickPickComp(props.compId)}
           />
         )}
-        {store.streamCardIds.length > 1 && (
+        {page.streamCardIds.length > 1 && (
           <IconDelete
             onClick={(e: any) => {
               e.stopPropagation();
@@ -256,7 +262,7 @@ export const Hudop = defineComponent({
         <IconAdd
           onClick={(e: any) => {
             e.stopPropagation();
-            const index = store.streamCardIds.indexOf(props.compId) + 1;
+            const index = page.streamCardIds.indexOf(props.compId) + 1;
             actions.addCompToDesign("Container", index);
           }}
         />

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

@@ -6,8 +6,9 @@ import { Image } from "@queenjs/ui";
 import { queenApi, useModal } from "queenjs";
 import { defineComponent, reactive, watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
 import { View } from "../View";
+import { useCompData } from "../../defines/hook";
+import { CompWeb3DObj } from ".";
 
 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<CompWeb3DObj>(props.compId);
     const { value } = comp;
 
     async function pickPack() {

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

@@ -1,7 +1,8 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 import { ImagePicker } from "../../formItems/ImagePicker";
+import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";
 
 export { Component } from "./component";
 
@@ -10,17 +11,25 @@ export const options = {
   thumbnail: require("@/modules/editor/assets/icons/3d.svg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {
-    url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
+const Web3dValue = {
+  url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
     inline: true,
     poster: Dict_Imgs.Default,
     ratio: 1,
-  },
-  layout: {
-    size: [750, 750],
-  },
-});
+}
+
+export function createComp() {
+  return new CompWeb3DObj();
+}
+
+export class CompWeb3DObj extends DesignCompObj<typeof Web3dValue> {
+  value = RxValue.create({...Web3dValue})
+  onCreated() {
+    this.compKey = "Web3D";
+    this.layout.size = [750, 750];
+  }
+}
+
 
 export const Form = createAttrsForm([
   {

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

@@ -3,13 +3,14 @@ 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);
-  store.setCompPid(compId, parentId);
+  // const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
+  // provide("compParentId", compId);
+  // store.setCompPid(compId, parentId);
+
+  const pageCtrl = controls.pageCtrl;
 
-  
   onMounted(() => {
     const comp = helper.findComp(compId);
     if (comp) {
@@ -22,8 +23,8 @@ export function useCompRef(compId: string) {
       compRef.value.compId= compId;
       compRef.value.compKey= comp.compKey;
     }
-
-    if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
+  
+    if (comp?.compKey == "Page" && !store.isEditMode && controls.pageCtrl.rootPage.value.pageMode == "short") {
       let downY = 0;
       compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
           //  e.preventDefault();
@@ -44,7 +45,7 @@ export function useCompRef(compId: string) {
         console.log("touch moving", offset);
         store.shortPage.isMoving = true;
         if (offset < 0 ) {
-           if (store.shortPage.index == store.streamCardIds.length -1) {
+           if (store.shortPage.index == pageCtrl.streamCardIds.length -1) {
             offset = 0;
            }
         }

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

@@ -38,30 +38,35 @@ export const Component = createUIComp({
       const item1Comp = store.compMap[children.item1]
       if ( !item1Comp.layout.transformMatrix) {
         item1Comp.layout.transformMatrix = "matrix(1,0,0,1, 40, 170)"
-        item1Comp.layout.position = "absolute";
+ 
       }
 
       const item2Comp = store.compMap[children.item2]
       if ( !item2Comp.layout.transformMatrix) {
+        
         item2Comp.layout.transformMatrix = "matrix(1, 0, 0, 1, 153, 136)",
+        //@ts-ignore
         item2Comp.layout.position = "absolute";
       }
 
       const item3Comp = store.compMap[children.item3]
       if ( !item3Comp.layout.transformMatrix) {
         item3Comp.layout.transformMatrix = "matrix(1, 0, 0, 1, 269, 100)",
+        //@ts-ignore
         item3Comp.layout.position = "absolute";
       }
 
       const text1Comp = store.compMap[children.text1]
       if ( !text1Comp.layout.transformMatrix) {
         text1Comp.layout.transformMatrix = "matrix(1,0,0,1,0, 50)",
+        //@ts-ignore
         text1Comp.layout.position = "absolute";
       }
 
       const text2Comp = store.compMap[children.text2]
       if ( !text2Comp.layout.transformMatrix) {
         text2Comp.layout.transformMatrix = "matrix(1,0,0,1, 0, 248)",
+        //@ts-ignore
         text2Comp.layout.position = "absolute";
       }
     }

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -23,7 +23,7 @@ export const Component = createUIComp({
 
     if (!editor.store.isEditMode) {
       watch(
-        () => editor.store.compPids[props.compId],
+        () => editor.controls.pageCtrl.compPids[props.compId],
         () => {
           const height =
             document.body.clientHeight * (750 / document.body.clientWidth);

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

@@ -10,6 +10,8 @@ import { Divider } from "ant-design-vue";
 import Align from "./align";
 import { css } from "@linaria/core";
 import AlignMulti from "./alignMulti";
+import _, { isEmpty } from "lodash";
+import { history } from "@/modules/editor/objects/DesignTemp/factory";
 
 export const layoutColumns: ColumnItem[] = [
   {
@@ -21,6 +23,8 @@ export const layoutColumns: ColumnItem[] = [
     label: "对齐",
     component: Align,
     dataIndex: "id",
+    isVisible: (value, data) =>
+    ["Page", "Container"].includes(data.compKey) ? false : true,
   },
   // {
   //   label: "对齐",
@@ -262,11 +266,23 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
     setup(props) {
       const { store, actions } = useEditor();
       function changeVal(e: { dataIndex: string; value: any }) {
-        actions.updateCompData(store.currComp, e.dataIndex, e.value);
-        actions.submitUpdate();
-      }
 
+        let setterpath = "";
+        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);
+        history.submit();
+        console.log("changing end");
+      }
 
       return () => {
         const { component } = props;
@@ -275,8 +291,6 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
 
         return (
           <div class={formStyle}>
-           
-
             {valueColumns.length ? (
               <>
                 <div>
@@ -286,6 +300,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   data={component}
                   columns={valueColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
                 <Divider></Divider>
               </>
@@ -299,6 +314,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
               columns={layoutColumns}
               style={{ color: "red" }}
               onChange={changeVal}
+              onChangeEnd={changeValEnd}
             />
             {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
               <>
@@ -310,6 +326,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   data={component}
                   columns={bgColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
               </>
             )}
@@ -323,6 +340,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   data={component}
                   columns={bdColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
               </>
             ) : null}
@@ -335,6 +353,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                   data={component}
                   columns={animateColumns}
                   onChange={changeVal}
+                  onChangeEnd={changeValEnd}
                 />
                 <Divider />
               </>

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

@@ -24,12 +24,13 @@ export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
     }
     const options = defaultsDeep(opts, defData);
 
+    //@ts-ignore
     return new DesignComp(options);
   }
 
   function useCompData(compId: string) {
     const editor = useEditor();
-    const comp = editor.store.designData.compMap[compId];
+    const comp = editor.controls.pageCtrl.designData.compMap[compId];
     return comp as DesignComp & {
       value: T;
       children: { [name in keyof C]: ReturnType<C[name]> };
@@ -40,7 +41,7 @@ export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
     const editor = useEditor();
     const createChild: any = (...args: any) => {
       const result = (defaultOpts as any).children[key](defaultOpts, ...args);
-      addCacheToMap(editor.store.designData.compMap);
+      addCacheToMap(editor.controls.pageCtrl.designData.compMap);
       return result;
     };
     return createChild as C[T];

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

@@ -1,5 +1,6 @@
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { CompUI } from "..";
+import { createObj } from "@/modules/editor/objects/DesignTemp/factory";
 
 const cacheCompMap = new Map<string, DesignComp>();
 
@@ -14,10 +15,10 @@ export function createCompId(
   compKey: keyof typeof CompUI,
   options?: any
 ): string {
-  const comp = CompUI[compKey].createComp(
-    Object.assign(options || {}, { compKey })
-  );
+  // const comp = CompUI[compKey].createComp(
+  //   Object.assign(options || {}, { compKey })
+  // );
+  const comp = createObj({compKey}, false)
   cacheCompMap.set(comp.id, comp);
-
   return comp.id;
 }

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

@@ -4,6 +4,7 @@ import { cloneDeep } from "lodash";
 
 type CommPropType = Pick<
   DesignComp,
+  //@ts-ignore
   "compKey" | "background" | "layout" | "id"
 >;
 
@@ -21,6 +22,7 @@ function RegCompType<T>(
     const c = Object.assign({}, defvalues, comm, {
       value: values,
     }) as CommPropType & { value: T };
+    //@ts-ignore
     return new DesignComp(c) as typeof c;
   };
 
@@ -28,6 +30,7 @@ function RegCompType<T>(
 
   function useCompData(compId: string) {
     const editor = useEditor();
+    //@ts-ignore
     return editor.store.designData.compMap[compId] as ValueType;
   }
   return { useCompData, createCompData };

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

@@ -0,0 +1,6 @@
+import { useEditor } from "@/modules/editor";
+export function useCompData<T>(compId: string) {
+    const editor = useEditor();
+    const comp = editor.controls.pageCtrl.compMap[compId];
+    return comp as T
+  }

src/modules/editor/components/CompUI/formItems/NewColorPicker/Panel.tsx

@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import { IconAddLine } from "@queenjs/icons";
 import { Divider, Popover, Tabs } from "ant-design-vue";
-import { computed, defineComponent, onMounted, reactive, watch } from "vue";
+import { computed, defineComponent, onMounted, reactive, watch , ref, nextTick} from "vue";
 import { any, bool } from "vue-types";
 import ColorList, { ColorItem, gradientColorType } from "./ColorList";
 import Picker from "./Picker";
@@ -11,19 +11,25 @@ export default defineComponent({
     value: any<string | gradientColorType>().isRequired,
     showGradient: bool().def(true),
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     const state = reactive({
       key: typeof props.value == "string" ? "0" : "1",
     });
 
+
     return () => {
       const { showGradient } = props;
       if (!showGradient) {
         return (
           <PureColor
             value={props.value}
-            onChange={(data) => emit("change", data)}
+            onChange={(data) =>{
+              emit("change", data)
+            }}
+            onChangeEnd={()=>{
+              emit("changeEnd")
+            }}
           />
         );
       }
@@ -39,13 +45,21 @@ export default defineComponent({
             <Tabs.TabPane tab="纯色" key={"0"}>
               <PureColor
                 value={props.value}
-                onChange={(data) => emit("change", data)}
+                onChange={(data) => {
+                  emit("change", data)
+                }}
+                onChangeEnd={()=>{
+                  emit("changeEnd")
+                }}
               />
             </Tabs.TabPane>
             <Tabs.TabPane tab="渐变" key={"1"}>
               <GradientColor
                 value={props.value}
-                onChange={(data) => emit("change", data)}
+                onChange={(data) => {
+                  emit("change", data)
+                  emit("changeEnd")
+                }}
               />
             </Tabs.TabPane>
           </Tabs>
@@ -59,7 +73,7 @@ const PureColor = defineComponent({
   props: {
     value: any<string | gradientColorType>().isRequired,
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     onMounted(() => {
       if (typeof props.value !== "string") {
@@ -69,7 +83,9 @@ const PureColor = defineComponent({
     return () => {
       const color =
         typeof props.value == "string" ? props.value : props.value.colors[0];
-      return <Picker value={color} onChange={(data) => emit("change", data)} />;
+      return <Picker value={color} onChange={(data) => emit("change", data)}  onChangeEnd={()=>{
+        emit("changeEnd");
+      }} />;
     };
   },
 });

src/modules/editor/components/CompUI/formItems/NewColorPicker/Picker.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
   props: {
     value: string().def("#ffffffff"),
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     const pickr = ref<any>(null);
     const containerRef = ref();
@@ -65,10 +65,15 @@ export default defineComponent({
         ],
       });
 
-      pickr.value.on("input:end", changePickerColor);
+      pickr.value.on("input:end", changePickerColorEnd);
       pickr.value.on("input:move", changePickerColor);
     }
 
+    function changePickerColorEnd(color: any) {
+      changePickerColor(color);
+      emit("changeEnd");
+    }
+
     function changePickerColor(color: any) {
       let res = "";
       if (color.alpha == 1) {
@@ -92,6 +97,7 @@ export default defineComponent({
           state.hex = result.sRGBHex;
           state.opacity = 100;
           setPickerColor();
+          emit("changeEnd");
         })
         .catch((e: any) => {
           console.log("e: ", e);
@@ -155,6 +161,10 @@ export default defineComponent({
               maxlength={7}
               class="flex-1 bg-[#3B3B3B] h-36px text-center cursor-pointer hover:bg-[#3B3B3B] focus:bg-[#3B3B3B]"
               onChange={changeColor}
+              onPressEnter={(e)=>{
+                changeColor(e)
+                emit("changeEnd");
+              }}
               onBlur={colorBlur}
             />
             <InputNumber
@@ -164,6 +174,10 @@ export default defineComponent({
               max={100}
               formatter={(v) => v + "%"}
               onChange={changeOpacity}
+              onPressEnter={(e)=>{
+                changeOpacity(e);
+                emit("changeEnd")
+              }}
               controls={false}
               class={cx(
                 inputStyle,

src/modules/editor/components/CompUI/formItems/NewColorPicker/index.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
     value: any<string | gradientColorType>(),
     showGradient: bool().def(false),
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     const color = getColor();
 
@@ -42,6 +42,10 @@ export default defineComponent({
       emit("change", data);
     }
 
+    function changeValueEnd() {
+      emit("changeEnd", state.color);
+    }
+
     function storeColors() {
       const list = localStorage.getItem("latestColors");
       let colors = list ? JSON.parse(list) : ["#fff"];
@@ -70,7 +74,10 @@ export default defineComponent({
               <ColorLib
                 showGradient={props.showGradient}
                 value={color}
-                onChange={changeValue}
+                onChange={(data)=>{
+                  changeValue(data);
+                  changeValueEnd();
+                }}
               />
             }
             onVisibleChange={(v) => {
@@ -94,7 +101,11 @@ export default defineComponent({
             content={
               <Panel
                 showGradient={props.showGradient}
-                onChange={changeValue}
+                onChange={(data)=>{
+                  changeValue(data);
+                }}
+                onChangeEnd={()=>changeValueEnd()}
+                
                 value={color}
               />
             }

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

@@ -13,7 +13,7 @@ export default defineComponent({
     step: number(),
     formatter: func<(...args: any[]) => string>(),
   },
-  emits: ["change"],
+  emits: ["change", "changeEnd"],
   setup(props, { emit }) {
     const state = reactive({
       value: props.value,
@@ -21,8 +21,12 @@ export default defineComponent({
 
     const changeVal = () => {
       if (state.value == props.value) return;
+
       emit("change", state.value);
     };
+    const changeValEnd = () => {
+      emit("changeEnd", state.value);
+    };
 
     watchEffect(() => {
       if (props.value != undefined) {
@@ -50,13 +54,15 @@ export default defineComponent({
             class="item_slider"
             tooltipVisible={false}
             {...attr}
-            onAfterChange={() => changeVal()}
+            onAfterChange={()=>{
+              changeValEnd();
+            }}
           />
           <InputNumber
             class="item_input"
             {...attr}
             formatter={formatter}
-            onPressEnter={() => changeVal()}
+            onPressEnter={() => changeValEnd()}
             // onBlur={() => {
             //   if (state.value !== props.value) changeVal();
             // }}

src/modules/editor/components/Preview/index.tsx

@@ -5,7 +5,7 @@ import { CompUI } from "../CompUI";
 
 export default defineComponent({
   setup() {
-    const { store, helper } = useEditor();
+    const { store, helper , controls} = useEditor();
     return () => {
       const pageComp = helper.findRootComp();
       if (!pageComp) return;
@@ -14,7 +14,7 @@ export default defineComponent({
           {{
             Container: (children: any) => children,
             CompItem(comp: DesignComp) {
-              const compKey = store.designData.compMap[comp.id]?.compKey;
+              const compKey = controls.pageCtrl.designData.compMap[comp.id]?.compKey;
               const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
               return Comp && <Comp key={comp.id} compId={comp.id} />;
             },

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

@@ -10,6 +10,7 @@ import { CompUI } from "../../CompUI";
 import { SelectTransfer } from "../../CompUI/basicUI/Transfer/select";
 import { TipIcons } from "../../TipIcons";
 import { IconDelete } from "@/assets/icons";
+import { history } from "@/modules/editor/objects/DesignTemp/factory";
 
 export default defineUI({
   setup() {
@@ -35,6 +36,9 @@ export default defineUI({
     const refs = controls.editorCtrl.useEditor();
 
     return () => {
+      console.log("rootId=>", controls.pageCtrl.state.rootId );
+      const page = controls.pageCtrl;
+
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
       // const streamCardIndex = store.streamCardIds.indexOf(
@@ -65,7 +69,7 @@ export default defineUI({
                   }
                 }}
               >
-                {store.streamCardIds.map((item) => {
+                {page.streamCardIds.map((item) => {
                   const c = helper.findComp(item) as DesignComp;
                   const Comp =
                     controls.compUICtrl.state.components.get(c.compKey)
@@ -89,15 +93,15 @@ export default defineUI({
                         ]}
                         style={style}
                         onClick={() => {
-                          actions.selectObjs([]);
-                          actions.pickComp(item, false);
+                          controls.editorCtrl.clickPickComp(item);
+                          history.submit();
 
                           nextTick(()=>{
                             controls.editorCtrl.autoInScreen();
                           })
                         }}
                       >
-                        {store.streamCardIds.length > 1 && (
+                        {page.streamCardIds.length > 1 && (
                           <IconDelete
                             onClick={() => {
                               actions.removeStreamCard(item);
@@ -124,8 +128,10 @@ export default defineUI({
                 <img
                   class="mt-15px cursor-pointer"
                   onClick={() => {
-                    const index = store.streamCardIds.length;
+                    const index = page.streamCardIds.length;
                     actions.addCompToDesign("Container", index);
+                    history.submit();
+
                     setTimeout(() => {
                       controls.editorCtrl.autoInScreen();
                     }, 200);

src/modules/editor/components/Viewport/Header/ShareBox.tsx

@@ -7,23 +7,24 @@ import { defineComponent } from "vue";
 
 export const ShareBox = defineComponent({
   setup() {
-    const { store } = useEditor();
+    const { store , controls} = useEditor();
     const auth = useAuth();
     const userInfo: any = auth.store.userInfo;
     const isSys = userInfo.roles?.includes("system") ? true : false;
     const isWk = store.isWk;
+    const page = controls.pageCtrl;
 
     let shareLink =
       location.origin +
       "/share.html?id=" +
-      store.designData._id +
+      page.designData._id +
       "&isSys=" +
       isSys;
     if (isWk) {
       shareLink =
         location.origin +
         "/share.html?id=" +
-        store.designData._id +
+        page.designData._id +
         "&isWk=true";
     }
     // if (location.host == "www.infish.cn") {

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

@@ -6,7 +6,7 @@ import History from "../Toolbar/History";
 
 export default defineUI({
   setup() {
-    const { store, actions, jumpIndexHtml } = useEditor();
+    const { store, actions, controls, jumpIndexHtml } = useEditor();
 
     return () => (
       <div class="relative flex justify-between items-center">
@@ -32,7 +32,7 @@ export default defineUI({
         </Radio.Group> */}
         <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
           <div class="text-16px font-bold text-light-50 max-w-240px truncate leading-normal">
-            {store.designData?.title}
+            {controls.pageCtrl.designData?.title}
           </div>
         </div>
         <aside class="space-x-12px">

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/List.tsx

@@ -35,6 +35,12 @@ export const Sources = defineComponent({
     }
 
     function clickToDesign(url: string) {
+      
+      if (props.sourceType == "Image") {
+          editor.actions.addImageToDesign(url);
+          return;
+      }
+      
       editor.actions.clickCompToDesign(props.sourceType, (comp) => {
         comp.value.url = url;
       });

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

@@ -22,7 +22,9 @@ export default defineUI({
           <Button
             block
             type="primary"
-            onClick={() => editor.actions.clickCompToDesign("Text")}
+            onClick={() => editor.actions.clickCompToDesign("Text", (comp)=>{
+                comp.layout.size = [750, 54];
+            })}
           >
             添加文本框
           </Button>
@@ -37,7 +39,8 @@ export default defineUI({
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {
-                      editor.actions.updateCompData(comp, "value", h2);
+                      comp.value.text = h2;
+                      comp.layout.size = [750, 72];
                     }
                   );
                 }}
@@ -52,7 +55,8 @@ export default defineUI({
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {
-                      editor.actions.updateCompData(comp, "value", h3);
+                      comp.value.text = h3;
+                      comp.layout.size = [750, 60];
                     }
                   );
                 }}
@@ -67,7 +71,8 @@ export default defineUI({
                   editor.actions.clickCompToDesign(
                     "Text",
                     (comp: DesignComp) => {
-                      editor.actions.updateCompData(comp, "value", text);
+                      comp.value.text = text;
+                      comp.layout.size = [750, 42];
                     }
                   );
                 }}

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

@@ -134,7 +134,7 @@ export const CompTree = defineComponent({
         }
       }
       nextTick(() => {
-        actions.pickComp(currComp.id, false);
+        controls.editorCtrl.clickPickComp(currComp.id);
         helper.extendStreamCard(parentComp.id);
       });
     };
@@ -186,7 +186,7 @@ export const CompTree = defineComponent({
           onSelect={(ids) => {
             const id =
               (ids[0] as string) || state.expandedKeys.at(-2) || "root";
-            actions.pickComp(id);
+            controls.editorCtrl.clickPickComp(id);
           }}
         >
           {{

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

@@ -1,15 +1,15 @@
 import { Empty } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { useEditor } from "../../../..";
-import { CompTree } from "./CompTree";
 import { css } from "@linaria/core";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
+    const props = editor.controls.propsCtrl;
 
     return () => {
-      const { currComp } = editor.store;
+      const currComp = props.getCurrComp();
       const Form =
         editor.controls.compUICtrl.state.components.get(currComp?.compKey)
           ?.Form || Empty;
@@ -19,10 +19,6 @@ export default defineUI({
           <div class="flex-1 p-16px px-8px scrollbar">
             <Form component={currComp} />
           </div>
-          {/* <div class="p-16px border-bottom !border-2px border-top">组件树</div>
-          <div class="h-360px py-20px pr-20px scrollbar">
-            <CompTree class={compTreeCls} />
-          </div> */}
         </div>
       );
     };

src/modules/editor/components/Viewport/Toolbar/History.tsx

@@ -1,30 +1,27 @@
-import { useEditor } from "@/modules/editor";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
+import { history } from "@/modules/editor/objects/DesignTemp/factory";
 
 export default defineUI({
   setup() {
-    const { controls } = useEditor();
-
-    const { history } = controls.historyCtrl;
+    const h = history;
 
     return () => {
+      console.log("h.refCanUndo.value=>", h.refCanUndo.value )
       return (
         <div class="space-x-20px z-999">
           <TipIcons.Undo
-            disable={
-              !controls.historyCtrl.state.enable || !history.state.canUndo
-            }
+            disable={ !h.enable || !h.refCanUndo.value}
             class={btnCls}
-            onClick={() => history.undo()}
+            onClick={() => h.undo()}
           />
           <TipIcons.Redo
             disable={
-              !controls.historyCtrl.state.enable || !history.state.canRedo
+              !h.enable || !h.refCanRedo.value
             }
             class={btnCls}
-            onClick={() => history.redo()}
+            onClick={() => h.redo()}
           />
         </div>
       );

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

@@ -1,65 +0,0 @@
-import { Effect, ModuleControl } from "queenjs";
-import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "../SelectCtrl/matrix";
-
-
-export class AnimCtrl extends ModuleControl<EditorModule> {
-
-  initEvent() {
-     Effect.value(()=>this.store.shortPage).item((v)=>v.offset, (shortState)=>{
-        console.log("xx")
-        let next = shortState.index;
-        if (shortState.offset < 0 ) {
-            next = shortState.index + 1;
-        }
-        if (shortState.offset > 0 ) {
-            next = shortState.index - 1;
-        }
-        this.startAnim(next);
-     }).run();
-  }
-  
-  startAnim(index:number) {
-    this.store.shortPage.next = index;
-    // const childrens = this.helper.findCardAllChildren(index);
-
-    // console.log("start anim=>", index, childrens.length);
-    // childrens.forEach((c)=>{
-    //     const comp = this.helper.findComp(c) as DesignComp;
-    //     if (!comp.anim) return;
-    //     comp.anim.transition = false;
-    //     comp.layout.transformMatrix = comp.anim.startMatrix;
-    //     comp.layout.opacity = 0;
-
-    //     setTimeout(() => {
-    //         if (comp.anim) {
-    //             comp.anim.transition = true;
-    //             comp.layout.transformMatrix = comp.anim.endMatrix;
-    //             comp.layout.opacity = 1;
-    //         }
-    //     }, 100);
-    // })
-  }
-
-  
-  inited = false;
-  initAnim() {
-    if (this.inited) return;
-    this.inited = true;
-
-    let n = this.store.streamCardIds.length;
-    for( let i=0; i<n; i++) {
-        const childrens = this.helper.findCardAllChildren(i);
-        childrens.forEach((c)=>{
-            const comp = this.helper.findComp(c) as DesignComp;
-            const end = comp.layout.transformMatrix || "matrix(1,0,0,1,0,0)";
-            const m = Matrix.createFromMatrixStr(end);
-            m.ty = m.ty - comp.getH();
-            m.tx = m.tx - comp.getW();
-
-            comp.anim = {transition:false, startMatrix: m.getMatrixStr(), endMatrix: end}
-        })
-    }
-  }
-}

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

@@ -82,14 +82,15 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
 
 
   createCompId(compKey: ICompKeys) {
+
+    const page = this.controls.pageCtrl;
     let compId = "";
     const compItem = this.state.components.get(compKey);
     if (!compItem) throw Exception.error("无效的组件");
 
-
     compId = createCompId(compKey);
-    addCacheToMap(this.store.designData.compMap);
-    
+    addCacheToMap(page.designData.compMap);
+
     return compId;
   }
 }

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

@@ -3,6 +3,8 @@ import { onMounted, ref } from "vue";
 import { EditorModule } from "../../module";
 import { RxValue } from "../ReactCtrl/rxValue";
 import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
+import { DesignTemp } from "../../objects/DesignTemp";
+import { CompPageObj } from "../../components/CompUI/basicUI/Page";
 
 const KeySpace = 32;
 
@@ -23,7 +25,6 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     moveMode: false,
     page: { w: 375, h: 650 },
   });
-
   doms: any = {};
 
   useEditor() {
@@ -41,7 +42,6 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
       refInteral.value = null;
       inited = true;
 
-      console.log("xxxxxxxx=>", ParentRef.value, PageRef.value);
       EditorRef.value.style.width = this.state.width + "px";
       EditorRef.value.style.height = this.state.height + "px";
       EditorRef.value.style.position = "absolute";
@@ -272,4 +272,26 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
     else if (scale > 2) scale = 2.0;
     this.state.setScale(scale);
   }
+
+  clickPickComp(compId: string) {
+    //右边属性栏
+    if (!compId || compId == "") {
+      this.controls.propsCtrl.showProp("root");
+    } else {
+      this.controls.propsCtrl.showProp(compId);
+    }
+
+    //中间编辑器
+    const page = this.controls.pageCtrl;
+    page.setCurrComp(compId);
+  
+    const paths = this.helper.getCompTrees(compId);
+    const cardChilds = paths[2];
+    if (cardChilds) {
+        this.controls.selectCtrl.gizmo.selectObjs([cardChilds.id]);
+        return;
+    } 
+    this.controls.selectCtrl.gizmo.selectObjs([]);
+  }
+
 }

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

@@ -14,7 +14,7 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
     {
       hotKey: "esc",
       action() {
-        this.actions.pickComp("");
+        this.controls.editorCtrl.clickPickComp("");
       },
     },
     // 切换到父组件
@@ -70,9 +70,9 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
     {
       hotKey: "ctrl+z",
       action() {
-        if (!this.controls.historyCtrl.state.enable) return;
-
-        this.controls.historyCtrl.history.undo();
+        // if (!this.controls.historyCtrl.state.enable) return;
+        // this.controls.historyCtrl.history.undo();
+        this.controls.selectCtrl.gizmo.history.undo();
       },
     },
     // 重做

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

@@ -0,0 +1,178 @@
+import { ModuleControl } from "queenjs";
+import { onMounted, ref } from "vue";
+import { EditorModule } from "../../module";
+import { RxValue } from "../ReactCtrl/rxValue";
+import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
+import { DesignTemp } from "../../objects/DesignTemp";
+import { CompPageObj } from "../../components/CompUI/basicUI/Page";
+import { createObj, history } from "../../objects/DesignTemp/factory";
+import { ICompKeys } from "../../typings";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { nanoid } from "nanoid";
+import { eachValuesAndPathsDeep } from "@/utils";
+import { set } from "lodash";
+
+
+export class PageCtrl extends ModuleControl<EditorModule> {
+  
+    state = RxValue.create({
+        currCompId: "root",
+        currStreamCardId: "",
+        rootId: ""
+    }, history)
+
+    initEvent() {
+
+        this.rootPage.children.default.forEach(cid=>{
+            const card = this.compMap[cid];
+            let first = true;
+            card.children.onDefaultChanged(()=>{
+                if (first) {
+                    first = false;
+                    return;
+                }
+                this.helper.extendStreamCard(cid);
+            })
+        })
+    }
+
+    designData = {} as DesignTemp
+    compPids = {} as Record<string, string>;
+
+    setCompPid(compId: string, pid: string) {
+        this.compPids[compId] = pid;
+    }
+    get compMap() {
+        return this.designData.compMap || {};
+    }
+    get currComp() {
+        return this.compMap[this.state.currCompId];
+    }
+    get currStreamCard() {
+        return this.compMap[this.state.currStreamCardId];
+    }
+    
+    get streamCardIds(): string[] {
+        return this.rootPage?.children.default || [];
+    }
+
+    setDesignData(data: Partial<DesignTemp>) {     
+       this.controls.pageCtrl.designData = new DesignTemp(data);
+       this.state.rootId = "root";
+       this.state.currStreamCardId = this.streamCardIds[0];
+       this.initEvent();
+       this.controls.propsCtrl.state.propId = "root";
+
+       setTimeout(() => {
+            history.enable = true;
+       }, 1000);
+    }
+
+    get rootPage() {
+        return this.compMap[this.state.rootId] as CompPageObj;
+    }
+
+    setCurrComp(compId: string) {
+        this.state.setCurrCompId(compId);
+        const comps = this.helper.getCompTrees(compId);
+  
+        if (compId == "root") {
+          return;
+        }
+        let cardId = comps[1]?.id || "";
+        if (this.helper.isStreamCard(compId)) {
+          cardId = compId;
+        }
+        this.state.setCurrStreamCardId(cardId);
+    }
+
+    deleteComp(compId: string) {
+        const parentComp = this.helper.findParentComp(compId);
+        let deleteOK = false;
+        if (parentComp) {
+          const ids = [...(parentComp.children.default || [])];
+          // 只能删除children.default中的组件
+          if (ids?.includes(compId)) {
+            const index = ids.findIndex((id) => id === compId);
+            if (index >= 0) {
+              ids.splice(index, 1);
+              parentComp.children.default = ids;
+              deleteOK = true;
+            }
+          }
+        }
+        if (deleteOK) {
+          delete this.compPids[compId];
+        }
+    }
+
+    insertDesignCard(index?: number) {
+        const card = createObj({compKey: "Container"}, false);
+        this.setCompPid(card.id, this.rootPage.id);
+        this.compMap[card.id] = card;
+        const childIds = [...this.rootPage.children.default];
+        index === undefined && (index = childIds.length);
+        childIds.splice(index, 0, card.id);
+        this.rootPage.children.setDefault(childIds);
+        card.children.onDefaultChanged(()=>{
+            this.helper.extendStreamCard(card.id);
+        })
+        return card.id;
+    }
+
+    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
+        const compId = this.controls.compUICtrl.createCompId(compKey);
+        this.setCompPid(compId, container.id);
+
+        const childIds = [...(container.children.default || [])];
+        childIds.push(compId);
+        container.children.setDefault(childIds);
+
+        return compId;
+    }
+
+    moveComp(selIndex: number, targetIndex: number) {
+
+        const pageCompIds = [...this.streamCardIds];
+        const [selComp] = pageCompIds.splice(selIndex, 1);
+        pageCompIds.splice(targetIndex, 0, selComp);
+        this.rootPage.children.setDefault(pageCompIds );
+
+        history.submit();
+    }
+
+    addUserCard(detail: any) {
+        const { compMap } = this.controls.pageCtrl.designData;
+        const idMap = new Map<string, string>();
+        const nextCompMap: Record<string, DesignComp> = {};
+        Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
+          ([key, comp]) => {
+            
+            if (key === "root") {
+              idMap.set(key, nanoid());
+              comp.title = detail.title;
+              comp.thumbnail = detail.thumbnail;
+            }
+            const newPid = idMap.get(key) || nanoid();
+            idMap.set(key, newPid);
+            comp.id = newPid;
+            eachValuesAndPathsDeep(
+              comp.children,
+              (v) => typeof v === "string",
+              (v, paths) => {
+                const id = idMap.get(v) || nanoid();
+                idMap.set(v, id);
+
+                this.setCompPid(id, newPid)
+                
+                set(comp.children, paths, id);
+              }
+            );
+            nextCompMap[newPid] = createObj(comp);
+          }
+        );
+        Object.assign(compMap, nextCompMap);
+        return nextCompMap[idMap.get("root") as string];
+    }
+  
+}

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

@@ -0,0 +1,31 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { RxValue } from "../ReactCtrl/rxValue";
+import { history } from "../../objects/DesignTemp/factory";
+
+
+export class PropsCtrl extends ModuleControl<EditorModule> {
+    state = RxValue.create({
+        propId: "",
+        isMultiSel: false,
+    }, history);
+
+    getCurrComp() {
+       return this.controls.pageCtrl.compMap[this.state.propId];
+    }
+    
+    initEvents() {
+       const gizmo = this.controls.selectCtrl.gizmo;
+       gizmo.state.onTransformChanged((t)=>{
+          this.state.isMultiSel = t.selected.length > 1;
+       })
+       gizmo.state.onLastIdChanged((id)=>{
+          this.state.propId = id;
+       })
+    }
+
+    showProp(id:string) {
+        this.state.setPropId(id);
+        this.state.setIsMultiSel(false);
+    }
+}

src/modules/editor/controllers/ReactCtrl/history.ts

@@ -2,6 +2,7 @@ import {reactive,  computed} from "vue"
 import { ValueSnap } from "./rxValue";
 
 export class HistoryController {
+  enable = false;
   state = reactive({
         currLen: 0, //操作栈的长度
         maxLen: 100, //操作栈总长度
@@ -20,6 +21,8 @@ export class HistoryController {
 
   // 添加缓存记录
   record(snap: ValueSnap) {
+    if ( !this.enable ) return;
+
     const first = this.cacheSnapValues.get(snap.Id)
     if (first) {
         snap.OldValue = first.OldValue;
@@ -29,7 +32,7 @@ export class HistoryController {
 
   // 保存缓存记录到历史栈中
   submit() {
-    if (this.cacheSnapValues.size < 1) return;
+    if (this.cacheSnapValues.size < 1  || !this.enable) return;
 
     const state = this.state;
     const queue = this.queues;
@@ -50,7 +53,7 @@ export class HistoryController {
   }
 
   undo() {
-    if (!this.refCanUndo.value) return;
+    if (!this.refCanUndo.value || !this.enable ) return;
 
     this.cacheSnapValues = new Map<string, ValueSnap>();
     const snaps = this.queues[this.state.opIndex--]
@@ -59,7 +62,7 @@ export class HistoryController {
   }
 
   redo() {
-    if (!this.refCanRedo.value ) return;
+    if (!this.refCanRedo.value  || !this.enable) return;
     
     this.cacheSnapValues = new Map<string, ValueSnap>();
     const snaps = this.queues[++this.state.opIndex];
@@ -68,6 +71,8 @@ export class HistoryController {
 
   //清除操作
   clear() {
+    if ( !this.enable ) return;
+
     this.queues = [];
     this.state.currLen = 0;
     this.state.opIndex = -1;

src/modules/editor/controllers/ReactCtrl/rxValue.ts

@@ -1,6 +1,6 @@
 import { HistoryController } from "./history";
 import {BehaviorSubject} from "rxjs";
-import { reactive } from  "vue";
+import { reactive, toRaw } from  "vue";
 
 export class ValueSnap {
     Id:string;
@@ -85,16 +85,17 @@ class RxValue {
         
                 obj["on"+CamName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
                     return f.subscribe((v:any)=>{
+                        if (CamName == "Transform") console.log("history 2222222222222222222222222222")
                             subscribe(v.value, snap.OldValue)
                         }
                     )
                 }
                 
                 obj._historySub[name] = f.subscribe((v)=>{
-                    snap.OldValue = v.value;
+                    if (CamName == "Transform") console.log("history 11111111111111111111111111")
+                    snap.OldValue = rxc.value;
                     rxc.value = v.value;
-
-                    if (obj._history) {
+                    if (obj._history && obj._history.enable) {
                         if (!v._hstry) return;
                         const s = snap.clone();
                         s.Value = v.value;

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

@@ -154,11 +154,12 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    updateAdapterState() {
-      if (!this.store.rootPage) return;
+      const page = this.controls.pageCtrl;
+      if (!page.rootPage) return;
 
       this.restorScreenPage();
       let total = 0;
-      this.store.streamCardIds.forEach(c=>{
+      page.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
          card.setW(this.getCurrScreenWidth());
          total += this.helper.extendStreamCard(card.id);
@@ -170,30 +171,33 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
       }
       
       this.controls.editorCtrl.state.setPage({w, h});
-      this.store.rootPage.layout.size[0] = this.getCurrScreenWidth();
-      this.store.rootPage.layout.size[1] = this.getCurrScreenHeight(); 
+      page.rootPage.layout.size[0] = this.getCurrScreenWidth();
+      page.rootPage.layout.size[1] = this.getCurrScreenHeight(); 
 
       this.state.safeFactor = this.state.screen.useFor == "pc" ? PCConst.factor : MobileConst.factor;
 
       this.state.currScreenId = this.currScreenId;
    }
    isScreenExit(screenId:string) {
-      return !!this.store.designData.compScreenMap[screenId] && 
-            this.store.designData.compScreenMap[screenId].length > 0 &&
-            this.store.designData.compScreenMap[screenId][0].children.length > 0;
+      const page = this.controls.pageCtrl;
+      return !!page.designData.compScreenMap[screenId] && 
+         page.designData.compScreenMap[screenId].length > 0 &&
+         page.designData.compScreenMap[screenId][0].children.length > 0;
    }
 
    restorScreenPage(screenId = "") {
-      if (!this.store.rootPage) return;
+      const page = this.controls.pageCtrl;
+      if (!page.rootPage) return;
          
+
       //获取当前screen的配置
       screenId = screenId ? screenId : this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
-      const screenCards = this.store.designData.compScreenMap[screenId] || [];
+      const screenCards = page.designData.compScreenMap[screenId] || [];
 
       console.log("apply screen=>", screenId);
 
       //刷新当前card的配置
-      this.store.streamCardIds.forEach(c=>{
+      page.streamCardIds.forEach(c=>{
          const card = this.helper.findComp(c) as DesignComp;
          const screenCard = screenCards.find(item=>item.id == c)
          let newChilds:string[] = [];
@@ -215,11 +219,13 @@ export class ScreenCtrl extends ModuleControl<EditorModule> {
    }
 
    saveScreenPage() {
+      const page = this.controls.pageCtrl;
+      
       //获取当前screen的配置
       const screenId = this.state.screen.useFor + this.state.screen.pageMode + this.state.screen.pageSizeType;
-      const screenCards =  ScreenCtrl.createScreenCards(this.store.compMap, this.store.rootPage);
-      if (!this.store.designData.compScreenMap) this.store.designData.compScreenMap = {};
-      this.store.designData.compScreenMap[screenId] = screenCards;
+      const screenCards =  ScreenCtrl.createScreenCards(this.store.compMap, page.rootPage);
+      if (!page.designData.compScreenMap) page.designData.compScreenMap = {};
+      page.designData.compScreenMap[screenId] = screenCards;
    }
 
   static createScreenCards(compMap:any, rootPage: DesignComp) {

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

@@ -102,8 +102,6 @@ export class ObjsContainer {
 
         this.rect = rect;
 
-        console.log("xxxx=>", rect);
-        
         //设置位置
         let p = this.parent.position;
         p.x = center.x;

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

@@ -43,8 +43,9 @@ export class CompObject extends DisplayObject {
             }
         }
         this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
-        this.updateTransform();
         this._boundsID++;
+        
+        this.updateTransform();
     }
 
     get width() {

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

@@ -0,0 +1,470 @@
+import { Bounds } from './objects/bounds';
+import { Rectangle } from './objects/rectangle';
+import { Container } from './objects/container';
+import { CompObject } from './compObj';
+import { Matrix } from './matrix';
+import { Events } from "queenjs"
+import { HistoryController } from '../ReactCtrl/history';
+import { RxValue } from '../ReactCtrl/rxValue';
+import { DesignComp } from '../../objects/DesignTemp/DesignComp';
+import { Transform } from './objects/transform';
+import { history } from '../../objects/DesignTemp/factory';
+
+type FnGetCompObj = (id:string)=>DesignComp;
+
+const AngleNames = [
+    "scaleBottomright",
+    "scaleBottomleft",
+    "scaleTopleft",
+    "scaleTopright",
+  ];
+const EdgeNames = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
+  
+
+export class Gizemo extends Events {
+    aabb = new Bounds();
+    tempBound = new Bounds();
+    parent = new Container();
+
+    rect = new Rectangle();
+    pivotIndex = 0;
+    selected:CompObject[] = [];
+
+    history = history;
+
+    state = RxValue.create({
+      transform: {
+        selected: [] as string[],
+        x: 0, 
+        y: 0,
+        w: 0, 
+        h: 0,
+        sx: 1,
+        sy: 1,
+        px: 0,
+        py: 0,
+        r: 0,
+      },
+      lastId: "",
+      scaleWidth: 1,
+      scaleHeight: 1,
+      mouse: ""
+    }, this.history)
+
+    getCompObj: FnGetCompObj;
+
+    constructor(getCompObj: FnGetCompObj) {
+        super()
+        this.getCompObj = getCompObj;
+
+        this.parent.sortableChildren = false;
+
+        this.initGizmoEvent();
+    }
+
+    getBound() {
+        //加上parent的旋转和平移
+        this.tempBound.clear();
+        this.tempBound.addFrame(this.parent.transform, 0, 0, this.rect.width, this.rect.height);
+        return this.tempBound.getRectangle();
+    }
+    get width() {
+        return  this.rect.width
+    }
+    get height() {
+        return this.rect.height;
+    }
+
+    childSubs = [] as any[];
+
+    initGizmoEvent() {
+        
+        this.state.onTransformChanged((t, ot)=>{
+          if (t.selected != ot.selected) {
+            this.destroy();
+
+            this.parent.x = t.x;
+            this.parent.y = t.y;
+            this.rect.width = t.w;
+            this.rect.height = t.h;
+            this.parent.scale.x = t.sx;
+            this.parent.scale.y = t.sy;
+            this.parent.width = t.w;
+            this.parent.height = t.h;
+            this.parent.rotation = t.r;
+            this.parent.pivot.x = t.px;
+            this.parent.pivot.y = t.py;
+            this.parent._boundsID++;
+            this.parent.updateTransform();
+            
+            const objs :any= [];
+            t.selected.forEach((oid) => {
+              const obj = new CompObject(this.getCompObj(oid))
+              let box = obj.calculateBounds();
+              this.aabb.addBounds(box);
+              
+              objs.push(obj);
+              this.parent.addChildWorldNoChange(obj);
+                let first = true;
+                const s = obj.comp.layout.onSizeChanged(()=>{
+                    if (first) {
+                        first = false;
+                        return;
+                    }
+                    this.updateSize();
+                })
+                this.childSubs.push(s);
+            });
+
+            this.selected = objs;
+            this.parent.updateTransform();
+            this.updateCompState();
+            this.emit("change");
+            return;
+          }
+
+          if (t.selected.length < 1) {
+            this.destroy();
+            this.emit("change");
+            return;
+          }
+
+          //只是移动操作
+          this.parent.x = t.x;
+          this.parent.y = t.y;
+          this.rect.width = t.w;
+          this.rect.height = t.h;
+          this.parent.scale.x = t.sx;
+          this.parent.scale.y = t.sy;
+          this.parent.rotation = t.r;
+          this.parent.pivot.x = t.px;
+          this.parent.pivot.y = t.py;
+          this.parent._boundsID++;
+
+          if (this.selected.length == 1 && this.state.mouse ) {//调整宽度
+            
+            if (this.selected[0].comp.compKey != "Text") {//文本只有左右 可以进行宽度设置
+                
+                const sx = t.sx * t.w / this.selected[0].width;
+                const sy = t.sy * t.h / this.selected[0].height;
+                this.applyChildWidth({scaleX: sx, scaleY: sy});
+            } 
+            else {
+                if ( EdgeNames.indexOf(this.state.mouse) != -1 ) {
+                    const sx = t.sx * t.w / this.selected[0].width;
+                    this.applyChildWidth({scaleX: sx, scaleY: 1});
+                }
+            }
+          }
+          this.parent.updateTransform();
+          this.updateCompState();
+          this.emit("change");
+        })
+    }
+    initScaleSizeEvent() {
+        this.state.onScaleWidthChanged((x)=>{
+            const prew = this.parent.scale.x * this.rect.width;
+            //怎么改对应的偏移值
+            this.parent.scale.x = x
+            const w = this.parent.scale.x * this.rect.width;
+            this.parent.updateTransform();
+            this.applyChildWidth({scaleX: w / prew })
+            this.updateCompState();
+            this.emit("change");
+        })
+    }
+    
+    selectObjs(ids: string[]) {
+        if (this.selected.length == ids.length ) {
+            if (ids.length == 0) return;
+            if (ids.length == 1) {
+                if (ids[0] == this.selected[0].comp.id) return;
+            } else {
+                const id1 = ids.sort().join("");
+                const id2 = this.selected.map(item=>item.comp.id).sort().join("");
+                if (id1 == id2) return;
+            }
+        }
+        let n = ids.length;
+        const selected = ids;
+        let w = 0, h = 0, x = 0, y = 0, sx = 1 , sy = 1, r = 0, px=0, py=0;
+        if (n == 1) { //单对象
+            let obj = new CompObject(this.getCompObj(selected[0]));
+            w = obj.width;
+            h = obj.height;
+            const transform = new Transform();
+            transform.setFromMatrix(obj.worldTransform);
+            x = transform.position.x;
+            y = transform.position.y;
+            sx = transform.scale.x;
+            sy = transform.scale.y;
+            r = transform.rotation;
+            
+        } else if (n>1) {
+            const bound = new Bounds();
+            while (n--) {
+                let obj = new CompObject(this.getCompObj(selected[n]) );
+                let box = obj.calculateBounds();
+                bound.addBounds(box);
+            }
+            //构建当前对象的转换矩阵
+            let rect = new Rectangle();
+            bound.getRectangle(rect);
+            this.rect = rect;
+            w = rect.width;
+            h = rect.height;
+            x = rect.x;
+            y = rect.y;
+        }
+        this.state.setTransform({selected: ids, x, y, w, h, sx,sy, r, px, py})
+    }
+    
+    testClick(sx:number,sy:number)
+    {
+        let w = this.width;
+        let h = this.height;
+        let local = {x:0,y:0} as any;
+        this.parent.worldTransform.applyInverse({x:sx,y:sy} as any, local);
+
+        if(  local.x < 0 || local.x > w ) return false;
+        if(  local.y < 0 || local.y > h ) return false;
+
+        return true;
+    }
+
+    rotate(r:number, submit = false) {
+        const t = {...this.state.transform};
+        t.r = r;
+        this.state.setTransform(t);
+        if (submit) this.history.submit();
+    }
+
+    //index
+    // 0 ---- 1
+    // |  4   |
+    // 3 -----2
+    setPivot(index:number) {
+        let rect = this.rect;
+        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
+        let targetPivot = pivots[index];
+        let point = { x: targetPivot.x, y: targetPivot.y } as any;
+        this.parent.worldTransform.apply(point, point);
+
+        const t = {...this.state.transform};
+        t.px = targetPivot.x;
+        t.py = targetPivot.y;
+        t.x = point.x;
+        t.y = point.y;
+        this.pivotIndex = index;
+        this.state.setTransform(t);
+
+        return { x: point.x, y: point.y};
+    }
+
+    setPivot2(x:number, y:number) {
+      
+        let targetPivot = {x, y}
+        let point = { x, y } as any;
+        this.parent.worldTransform.apply(point, point);
+        const t = {...this.state.transform};
+        t.px = targetPivot.x;
+        t.py = targetPivot.y;
+        t.x = point.x;
+        t.y = point.y;
+        this.state.setTransform(t);
+
+        return { x: point.x, y: point.y};
+    }
+
+
+    getPivotXY(index:number) {
+        let rect = this.rect;
+        let pivots = [{ x: 0, y: 0 }, { x: rect.width, y: 0 }, { x: rect.width, y: rect.height }, { x: 0, y: rect.height }, { x: rect.width / 2, y: rect.height / 2 }];
+        let targetPivot = pivots[index];
+
+        let point = { x: targetPivot.x, y: targetPivot.y } as any;
+        this.parent.worldTransform.apply(point, point);
+
+        let yIndex = 0, xIndex = 0;
+        if (index == 3) {
+            yIndex = 0;
+            xIndex = 2;
+        } else if (index == 0) {
+            yIndex = 3;
+            xIndex = 1;
+        } else if (index == 1) {
+            yIndex = 2;
+            xIndex = 0;
+        } else if (index == 2) {
+            yIndex = 1;
+            xIndex = 3;
+        }
+
+        let pointY = pivots[yIndex];
+        let pY = { x: pointY.x, y: pointY.y } as any;
+        this.parent.worldTransform.apply(pY, pY);
+
+        let pointX = pivots[xIndex];
+        let pX = { x: pointX.x, y: pointX.y } as any;
+        this.parent.worldTransform.apply(pX, pX);
+
+        let xVec = { x: (pX.x - point.x), y: (pX.y - point.y) };
+        let yVec = { x: (pY.x - point.x), y: (pY.y - point.y) };
+
+        return { x: xVec, y: yVec };
+    }
+
+    scale(x:number, y:number, submit = false) {
+        const t = {...this.state.transform};
+        t.sx = x;
+        t.sy = y;
+        this.state.setTransform(t);
+        if (submit) this.history.submit();
+    }
+
+
+    scaleX(x:number, submit= false) {
+        console.log("scalex=>", x);
+
+        const t = {...this.state.transform};
+        t.sx = x;
+        this.state.setTransform(t);
+        if (submit) this.history.submit();
+    }
+
+    scaleY(y:number, submit= false) {
+        const t = {...this.state.transform};
+        t.sy = y;
+        this.state.setTransform(t);
+        if (submit) this.history.submit();
+    }
+
+    applyChildWidth(option:{scaleX?:number, scaleY?:number}) {
+
+        if (this.selected.length < 1) return;
+        const obj = this.selected[0];
+
+        //先移除
+        this.parent.removeChildWorldNoChange(obj);
+        const m = new Matrix();
+        m.scale(option.scaleX ? option.scaleX : 1, option.scaleY? option.scaleY  : 1)
+        m.invert();
+        m.prepend(obj.worldTransform)
+        obj.transform.setFromMatrix(m)
+        if (option.scaleX) {
+            obj.width = option.scaleX * obj.width;
+        }
+        if (option.scaleY) {
+            obj.height = option.scaleY * obj.height;
+        }
+        
+        obj.updateTransform();
+
+        this.parent.addChildWorldNoChange(obj);
+
+        
+    }
+
+    scaleSize(x:number, y:number) {
+
+        let preW = this.parent.scale.x * this.rect.width;
+        let preH = this.parent.scale.y * this.rect.height;
+
+        this.parent.scale.y = y 
+        this.parent.scale.x = x
+
+        const Width = this.parent.scale.x * this.rect.width;
+        const Height = this.parent.scale.y * this.rect.height;
+
+        this.parent.updateTransform();
+
+        this.applyChildWidth({scaleX: Width / preW, scaleY: Height/preH})
+        this.updateCompState();
+
+    }
+
+
+    scaleWidth(x:number) {
+        this.state.setScaleWidth(x);
+    }
+
+    scaleHeight(y:number) {
+        const preH = this.parent.scale.y * this.rect.height;
+        this.parent.scale.y = y
+        const h = this.parent.scale.y * this.rect.height;
+        this.parent.updateTransform();
+        this.applyChildWidth({scaleY: h / preH});
+        this.updateCompState();
+    }
+
+    translate(xOffset:number, yOffset:number, submit=false) {
+        const t = {...this.state.transform};
+        t.x += xOffset;
+        t.y += yOffset;
+        this.state.setTransform(t);
+        if (submit) this.history.submit();
+    }
+
+    destroy() {//选中的对象坐标转到画布空间坐标
+        let selected = this.selected;
+        let n = selected.length;
+        while (n--) {
+            let child = selected[n];
+            this.parent.removeChildWorldNoChange(child)
+            child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
+        }
+        this.selected = [];
+        this.parent.removeChildren(0, this.parent.children.length);
+
+        //获取选择对象的aabb（画布空间）
+        this.aabb.clear();
+
+        this.childSubs.forEach(s=>{
+            s.unsubscribe();
+        })
+        this.childSubs = [];
+    }
+
+    updateCompState() {
+        let n = this.selected.length;
+        while (n--) {
+            let child = this.selected[n];
+            if (child.comp)  child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
+        }
+    }
+
+    updateSize() {
+
+        let selected = this.selected;
+        let n = selected.length;
+        while (n--) {
+            let child = selected[n];
+            this.parent.removeChildWorldNoChange(child)
+            child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
+        }
+        this.parent.removeChildren(0, this.parent.children.length);
+
+
+        this.selected.forEach(s=>s.updateSize());
+        this.aabb.clear();
+        this.selected.forEach((obj) => {
+          let box = obj.calculateBounds();
+          this.aabb.addBounds(box);
+        });
+        this.aabb.getRectangle(this.rect);
+        this.parent.x = this.rect.x;
+        this.parent.y = this.rect.y;
+        this.parent.scale.x = 1;
+        this.parent.scale.y = 1;
+        this.parent.updateTransform();
+
+        n = selected.length;
+        while (n--) {
+            let child = selected[n];
+            this.parent.addChildWorldNoChange(child);
+        }
+
+        this.parent.updateTransform();
+        this.emit("change");
+    }
+}

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

@@ -12,6 +12,11 @@ import { AssistCtrl } from "./assistCtrl";
 import { AssistRulerCtrl } from "./assistRulerCtrl";
 import { AssistMagnetCtrl } from "./assistMagnetCtrl";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { RxValue } from "../ReactCtrl/rxValue";
+import { HistoryCtrl } from "../HistoryCtrl";
+import { HistoryController } from "../ReactCtrl/history";
+import { Gizemo } from "./gizemo";
+import { history } from "../../objects/DesignTemp/factory";
 
 /**
  *  页面画布空间进行选择
@@ -19,7 +24,6 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 const MODE_SEL_RECT = 1;
 const MODE_MOVING = 2;
 const MODE_ROTATE = 3;
-const MODE_SCALE_WIDTH = 4;
 const MODE_SCALE_SCALE = 5;
 const MODE_RULER_LINE = 6;
 const MODE_RULER_DRAG = 7;
@@ -51,7 +55,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   });
 
   selected: any[] = []; //选中的所有组件ids
-
   pageEl?: HTMLElement;
   selCanvas = {} as HTMLCanvasElement;
 
@@ -116,7 +119,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     return this.store.currStreamCard.$el.getBoundingClientRect();
   }
   getProjectId() {
-    return this.store.designData._id;
+    const page = this.controls.pageCtrl;
+    return page.designData._id;
   }
 
   getUnSelectChilds() {
@@ -130,12 +134,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
     return out;
   }
+  
+  gizmo = new Gizemo((id)=>{
+    return this.compMap[id] as DesignComp;
+  })
 
   initEvents(
     pageEl: HTMLElement,
     selCanvas: HTMLCanvasElement,
     viewport: HTMLElement
   ) {
+
     this.viewport = viewport;
     this.pageEl = pageEl;
     this.selCanvas = selCanvas;
@@ -155,43 +164,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
     window.addEventListener("resize", this.onResize.bind(this));
 
-    this.initEffects();
-  }
-
-  initEffects() {
-    //相应相应的事件
-    Effect.array(() => this.store.selected)
-      .list({
-        remove: () => {
-          console.log("xxx");
-        },
-        change: (added: string[], removed: string[]) => {
-          console.log("changeMap=>", added, removed);
-          this._updateSelects();
-        },
-      })
-      .run();
+    
+    this.gizmo.on("change", ()=>{
+       this.upgateGizmoStyle();
+       this.helper.extendStreamCard(this.store.currStreamCardId);
+    })
   }
 
   _mouseDownFlag = "";
   _mouseDownTimestamp = 0;
 
-  _containers: Map<string, ObjsContainer> = new Map();
 
   _updateSelects() {
     const selecteds = this.store.selected;
-    const ObjC = this._containers.get(this.store.selectId);
-    let objs = [];
-    for (let item of selecteds) {
-      objs.push(new CompObject(this.compMap[item]));
-    }
-    this.selecteObjs(objs, ObjC);
-    if (this.store.selectId) {
-      this._containers.set(
-        this.store.selectId,
-        this.objContainer as ObjsContainer
-      );
-    }
+    this.gizmo.selectObjs(selecteds);
   }
 
   _downClickedCompId = "";
@@ -208,10 +194,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       once: true,
     });
 
-    let box = this.pageEl.getBoundingClientRect();
-    const pageX = e.clientX - box?.left;
-    const pageY = e.clientY - box?.top;
-
     const draging = this.assistRuler?.dragTest(e)
 
 
@@ -233,13 +215,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._downed = true;
     this._mouseDownFlag = this.getDivTransformFlag(e.target as any);
     
+    const gizmo = this.gizmo;
+
     if (!draging) {
       if (!this._mouseDownFlag) {
         //选框点击判断
         let isClickSelRect = false;
-        if (this.selected.length > 0) {
+        if (gizmo.selected.length > 0) {
           const pos = this.viewportPos2DesignPos(e.clientX, e.clientY);
-          isClickSelRect = this.objContainer?.testClick(pos.x, pos.y) as boolean;
+          isClickSelRect = gizmo.testClick(pos.x, pos.y) as boolean;
           if (isClickSelRect) {
             this._state = MODE_MOVING;
           }
@@ -247,46 +231,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         if (!isClickSelRect) {
           //点击在选框之外
           this._state = MODE_SEL_RECT;
-          
-          // if (!this._downClickedCompId) {
-          //   //没有点击到组件
-          //   const view = this.viewport?.getBoundingClientRect() as any;
-          //   const isOut =
-          //     e.clientX < view.left ||
-          //     e.clientX > view.right ||
-          //     e.clientY < view.top ||
-          //     e.clientY > view.bottom;
-          //   if (!isOut) {
-          //     this._state = MODE_SEL_RECT;
-          //   }
-          // }
-          //else {//点击到选框之外的组件, 把时间放到mouseup 时相应.
-          //   this._state = MODE_MOVING;
-          //   const obj = this.compMap[comps[0].id];
-          //   this.selecteObjs([new CompObject(obj)]);
-          // }
         }
       } else if (this._mouseDownFlag == "rotate") {
         this._state = MODE_ROTATE;
       } else if (this._mouseDownFlag.indexOf("move") > -1) {
         this._state = MODE_MOVING;
       } else if (this._mouseDownFlag.indexOf("scale") > -1) {
-        this._state = MODE_SCALE_WIDTH;
-        if (
-          this.store.selected.length == 1 &&
-          (this.selected[0].comp.compKey == "Text" || this.selected[0].comp.compKey == "Group")
-        ) {
-          //拖拽的是文本
-          const scaleFlags = [
-            "scaleBottomright",
-            "scaleBottomleft",
-            "scaleTopleft",
-            "scaleTopright",
-          ];
-          if (scaleFlags.indexOf(this._mouseDownFlag) > -1) {
-            this._state = MODE_SCALE_SCALE;
-          }
-        }
+        this._state = MODE_SCALE_SCALE
       } else if (this._mouseDownFlag.indexOf("ruler") > -1) {
         this._state = MODE_RULER_LINE;
       }
@@ -295,7 +246,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._movePreClientY = this._downClientY;
     this._initMovePos.x = -1;
     this._initMovePos.y = -1;
+    this.gizmo.state.mouse = this._mouseDownFlag;
   }
+
   _initMovePos = { x: -1, y: -1 };
 
   getDivFlag(div: HTMLElement, flag = "editable") {
@@ -350,9 +303,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   compClickTest(e: MouseEvent) {
-    const cards = this.store.streamCardIds;
+    const page = this.controls.pageCtrl;
+    const cards = page.streamCardIds;
     let n = cards.length;
-    const compMap = this.store.designData.compMap;
+    const compMap = page.designData.compMap;
     //@ts-ignore
     const pbox = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - pbox?.left;
@@ -374,7 +328,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         const out =
           localp.x < 0 || localp.x > cw || localp.y < 0 || localp.y > ch;
         if (!out) {
-          let z = c.layout.zIndex || 0;
+          let z =  0;
           if (z > maxZ) {
             maxZ = z;
             topItem = {
@@ -397,9 +351,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   streamCardClickTest(e: MouseEvent) {
-    const cards = this.store.streamCardIds;
+    const page = this.controls.pageCtrl;
+    const cards = page.streamCardIds;
+
     let n = cards.length;
-    const compMap = this.store.designData.compMap;
+    const compMap = page.designData.compMap;
     //@ts-ignore
     const pbox = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - pbox?.left;
@@ -416,31 +372,23 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _moveSelectUpdated = false;
 
   translate(xOffset: number, yOffset: number) {
-    const objContainer = this.objContainer as ObjsContainer;
-    objContainer.translate(xOffset, yOffset);
-    this.upgateGizmoStyle();
-    this.helper.extendStreamCard(this.store.currStreamCardId);
+    this.gizmo.translate(xOffset, yOffset);
   }
 
 
   movingMousemove(e: MouseEvent) {
-    const objContainer = this.objContainer as ObjsContainer;
+    const gizmo = this.gizmo
     const magnet = this.assistMagnet as AssistMagnetCtrl;
 
     if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
-      const obj = this.objContainer as ObjsContainer;
-      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
+      this._initMovePos = { x: gizmo.parent.x, y: gizmo.parent.y };
     }
     magnet.test(e);
     const s = this.controls.editorCtrl.state.scale;
-
-    objContainer.setPivot(0);
-    objContainer.translate(
+    gizmo.translate(
       (magnet.clientX - this._movePreClientX) / s,
       (magnet.clientY - this._movePreClientY ) / s
     );
-
-    this.upgateGizmoStyle();
   }
 
   _movePreClientX = 0;
@@ -464,7 +412,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       case MODE_ROTATE:
         this.rotateMousemove(e);
         break;
-      case MODE_SCALE_WIDTH:
       case MODE_SCALE_SCALE:
         this.scaleMousemove(e);
         break
@@ -481,7 +428,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   };
 
   get compMap() {
-    return this.store.designData.compMap;
+    const page = this.controls.pageCtrl;
+    return page.designData.compMap;
   }
 
   onDocMouseUp(e: MouseEvent) {
@@ -492,6 +440,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (dx < 2 && dy < 2 && offsetT < 200) {
       isClick = true;
     }
+    const page = this.controls.pageCtrl;
+
+    this.gizmo.state.setMouse("");
     document.removeEventListener("mousemove", this.onDocMouseMove, {
       capture: true,
     });
@@ -503,7 +454,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (isClick) {
       this._state = MODE_NONE;
       if ((!e.shiftKey && !e.ctrlKey) ) {
-          this.actions.pickComp(this._downClickedCompId);
+          this.controls.editorCtrl.clickPickComp(this._downClickedCompId);
+          history.submit();
+
       } else {
         const paths = this.helper.getCompTrees(this._downClickedCompId)
         if (paths[2]) {
@@ -514,7 +467,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (this._state == MODE_SEL_RECT && !isClick) {
       //选择空间转 streamCard空间
-      const card = this.store.currStreamCard;
+      const card = page.currStreamCard;
       const box = card.$el.getBoundingClientRect();
       const s = this.controls.editorCtrl.state.scale;
 
@@ -525,12 +478,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         this._lastSelRect[3] / s,
         e
       );
+      history.submit();
     }
 
     if (this._state == MODE_ROTATE) {
       this.rotateMouseUp(e);
     } else if (
-      this._state == MODE_SCALE_WIDTH ||
       this._state == MODE_SCALE_SCALE
     ) {
       this.scaleMouseUp(e);
@@ -552,52 +505,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   moveMouseUp(e: MouseEvent, clicked: boolean) {
-    const history = this.controls.historyCtrl.history;
-
-    const obj = this.objContainer as ObjsContainer;
-    const lastX = obj.parent.x,
-      lastY = obj.parent.y;
-
     const initX = this._initMovePos.x,
       initY = this._initMovePos.y;
-
-    this._initMovePos.x = -1;
-    this._initMovePos.y = -1;
-
     if (initX == -1 && initY == -1) return;
 
-    obj.setPivot(0);
-
-    history.record({
-      undo: () => {
-        console.log("undo ");
-        const currObj = this.objContainer as ObjsContainer;
-        currObj.setPivot(0);
-        currObj.parent.x = initX;
-        currObj.parent.y = initY;
-        currObj.parent.updateTransform();
-        currObj.updateCompState();
-
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-      redo: () => {
-        const currObj = this.objContainer as ObjsContainer;
-        currObj.setPivot(0);
-        currObj.parent.x = lastX;
-        currObj.parent.y = lastY;
-        currObj.parent.updateTransform();
-        currObj.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-    } as any);
-    history.submit();
+    this.gizmo.history.submit();
   }
 
   rectSelect(x: number, y: number, width: number, height: number, e:MouseEvent) {
     const childs =
-      this.compMap[this.store.currStreamCardId].children.default || [];
+      this.compMap[this.controls.pageCtrl.state.currStreamCardId].children.default || [];
     let n = childs.length;
     const outs:string[] = [];
     while (n--) {
@@ -607,6 +524,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         outs.push(o.comp.id);
       }
     }
+  
     this._selectObjs(outs, e);
   }
 
@@ -620,8 +538,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
          outs.splice(n, 1);
       }
     }
+    const gizemo = this.controls.selectCtrl.gizmo;
 
-    let objs = this.store.selected.slice(0);
+    let objs = gizemo.selected.map(item=>item.comp.id);
     let lastId = outs[outs.length-1];
    
     if (e.shiftKey) {
@@ -640,20 +559,21 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       })
       lastId = selected[selected.length-1] || "";
     }
-
     if (lastId) {
-        this.actions.pickComp(lastId, false);
+        this.controls.editorCtrl.clickPickComp(lastId); 
     }
-    this.actions.selectObjs(selected, lastId);
-    
     if (selected.length < 1) {
-      this.actions.pickComp(this.store.currStreamCardId);
+      this.controls.propsCtrl.showProp(this.store.currStreamCardId);
     }
+
+    this.gizmo.selectObjs(selected);
   }
 
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
-    if (this.selected.length < 1) {
+
+    const selected = this.gizmo.selected;
+    if (selected.length < 1) {
       this.transferStyle.showGizmo = false;
       return;
     }
@@ -668,13 +588,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
     this.transferStyle.baseCardTop = yoff / s  + "px";
     
-    const selector = this.objContainer as ObjsContainer;
-    if (!selector) {
-      return;
-    }
+  
     this.transferStyle.showGizmo = true;
 
-    let obj = selector.parent;
+    const selector = this.gizmo;
+    let obj = this.gizmo.parent;
     let w = selector.rect.width,
       h = selector.rect.height;
 
@@ -693,16 +611,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.transferStyle.matrix = matrix;
     this.transferStyle.matrixInvert = matrixInvert;
-    this.transferStyle.showOrthScale = this.selected.length == 1;
+    this.transferStyle.showOrthScale = selected.length == 1;
 
-    if (this.selected.length == 1) {
-        const comp = this.selected[0].comp
+    if (selected.length == 1) {
+        const comp = selected[0].comp
         if (comp.compKey == "Group") {
           this.transferStyle.showOrthScale = false;
         }
         if (comp.layout.locked) {
           this.transferStyle.showGizmo = false;
         }
+        
         if (comp.compKey == "Text") {
           if (!this.helper.isStreamCardChild(comp.id)) {
             this.transferStyle.showGizmo = false;
@@ -737,8 +656,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const currX = pos.x;
     const currY = pos.y;
 
-    console.log("xxxxxxxx=>", currX, currY);
-
     const x = Math.min(currX, dx),
       y = Math.min(dy, currY);
 
@@ -774,8 +691,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   //
   checkIntersect(compId: string, e: MouseEvent) {
     const currCard = this.store.currStreamCard.$el;
+    const page = this.controls.pageCtrl;
 
-    const comp = this.store.designData.compMap[compId];
+    const comp = page.designData.compMap[compId];
 
     //排除坐标没有在streamCard空间内的坐标
 
@@ -786,9 +704,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     //const m = Matrix.createFromComp(comp.layout.transform)
   }
-  objContainer?: ObjsContainer;
+  get objContainer() { 
+    return this.gizmo 
+  };
   getSelectBound() {
-    const Objc = this.objContainer as ObjsContainer;
+    const Objc = this.objContainer
     const w = Objc.getBound();
     const s = this.controls.editorCtrl.state.scale;
     w.x = w.x * s;
@@ -798,42 +718,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     return w;
   }
 
-  selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
-    if (this.selected.length == 0 && objs.length == 0) return;
-
-    if (
-      this.selected.length == 1 &&
-      objs.length == 1 &&
-      this.selected[0] == objs[0]
-    )
-      return;
-
-    if (this.objContainer) {
-      this.objContainer.destroy();
-      this.objContainer = undefined;
-    }
-
-    let newObjContainer = undefined;
-
-    if (objs.length > 0 && objs[0]) {
-      newObjContainer = ContainerBox ? ContainerBox : new ObjsContainer(objs);
-      if (ContainerBox) {
-        objs.forEach((obj) => {
-          ContainerBox.parent.addChildWorldNoChange(obj);
-        });
-        ContainerBox.selected = objs;
-        ContainerBox.parent.updateTransform();
-      }
-    }
-    this.objContainer = newObjContainer;
-    this.selected = objs;
-
-    this.emitChange();
-
-    this.upgateGizmoStyle();
-
-    return this.selected;
-  }
 
   emitChange() {
     const selected = this.selected;
@@ -857,7 +741,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let StartX = pos.x;
     let StartY = pos.y;
 
-    const objContainer = this.objContainer as ObjsContainer;
+    const objContainer = this.objContainer;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
     if (!this.rotateCenter) {
@@ -906,7 +790,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       }
     }
     this.lastRad = dta;
-    console.log("rotate=>", dta);
 
     objContainer.rotate(dta);
 
@@ -917,38 +800,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   rotateMouseUp(e: MouseEvent) {
     this.rotateCenter = undefined;
     if (!this.rotateCmd) return;
-    let scope = this;
-    let last = this.lastRad;
-    let initrad = scope.objinitAngleRad;
-
-    const history = this.controls.historyCtrl.history;
-    this.objContainer?.setPivot(0);
-
-    history.record({
-      undo: () => {
-        const objContainer = this.objContainer as ObjsContainer;
-
-        this.objContainer?.setPivot(4);
-        this.objContainer?.rotate(initrad);
-        this.objContainer?.setPivot(0);
-        this.objContainer?.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-
-      redo: () => {
-        console.log("redo ");
-        const objContainer = this.objContainer as ObjsContainer;
-        this.objContainer?.setPivot(4);
-        this.objContainer?.rotate(last);
-        this.objContainer?.setPivot(0);
-        this.objContainer?.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-    } as any);
-    history.submit();
     this.rotateCmd = false;
+    this.gizmo.history.submit();
   }
 
   //缩放选中的对象
@@ -984,7 +837,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let StartX = pos.x;
     let StartY = pos.y;
 
-    const objContainer = this.objContainer as ObjsContainer;
+    const objContainer = this.objContainer;
+    const gizmo = this.gizmo;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
     if (!this.scalePivot) {
@@ -1042,20 +896,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (i == -1) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
-
-        if (this._state == MODE_SCALE_SCALE) {
-          objContainer.scale(this.lastScale.x, this.lastScale.y);
-        } else {
-          objContainer.scaleSize(this.lastScale.x, this.lastScale.y);
-        }
+        gizmo.scale(this.lastScale.x, this.lastScale.y);
+        
       } else if (i == 0 || i == 1) {
+
         this.lastScale.x = dtaScale * this.initScale.x;
-        // objContainer.scaleX(this.lastScale.x);
-        objContainer.scaleWidth(this.lastScale.x);
+        gizmo.scaleX(this.lastScale.x);
+        
       } else if (i == 2 || i == 3) {
         this.lastScale.y = dtaScale * this.initScale.y;
-        // objContainer.scaleY(this.lastScale.y);
-        objContainer.scaleHeight(this.lastScale.y);
+        gizmo.scaleY(this.lastScale.y);
       }
     }
 
@@ -1065,46 +915,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   scaleMouseUp(event: MouseEvent) {
     this.scalePivot = undefined;
     if (this.scaleCmd) {
-      let preScale = { x: this.initScale.x, y: this.initScale.y };
-      let scaleIndex = this.scaleIndex;
-      let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
-
-      const history = this.controls.historyCtrl.history;
-      this.objContainer?.setPivot(0);
-      const scaleMode = this._state;
-
-      history.record({
-        undo: () => {
-          console.log("undo ");
-
-          this.objContainer?.setPivot(scaleIndex);
-          if (scaleMode == MODE_SCALE_WIDTH) {
-            this.objContainer?.scaleSize(preScale.x, preScale.y);
-          } else {
-            this.objContainer?.scale(preScale.x, preScale.y);
-          }
-          this.objContainer?.setPivot(0);
-          this.objContainer?.updateCompState();
-
-          this.upgateGizmoStyle();
-          this.helper.extendStreamCard(this.store.currStreamCardId);
-        },
-        redo: () => {
-          console.log("redo ");
-          this.objContainer?.setPivot(scaleIndex);
-          if (scaleMode == MODE_SCALE_WIDTH) {
-            this.objContainer?.scaleSize(lastScale.x, lastScale.y);
-          } else {
-            this.objContainer?.scale(lastScale.x, lastScale.y);
-          }
-          this.objContainer?.setPivot(0);
-          this.objContainer?.updateCompState();
-          this.upgateGizmoStyle();
-          this.helper.extendStreamCard(this.store.currStreamCardId);
-        },
-      } as any);
-      history.submit();
       this.scaleCmd = false;
+      this.gizmo.history.submit();
     }
   }
 }

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

@@ -1,6 +1,7 @@
 import { ModuleControl, queenApi } from "queenjs";
 import { reactive, toRaw } from "vue";
 import { EditorModule } from "../../module";
+import { history } from "../../objects/DesignTemp/factory";
 const stylesKey: { [key: string]: any } = {
   fontSize: "font-size",
   fontFamily: "font-family",
@@ -30,7 +31,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
     }
     if (!this.state.currEditor) {
       let alink = `<a href="${res}"><span style="font-size:14px">${res}</span></a>`;
-      const compValue = this.store.currComp.value;
+      const compValue = this.store.currComp.value.text;
       const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
       const blocks = compValue.match(pTagReg);
       if (!blocks) {
@@ -56,7 +57,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       this.addCompValueTags(key, e);
       return;
     }
-    const compValue = this.store.currComp.value;
+    const compValue = this.store.currComp.value.text;
 
     const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
@@ -76,7 +77,10 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
 
       blocks[index] = stylesStr;
     });
-    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+    this.store.currComp.value.setText( blocks.join("") )
+    
+    history.submit();
+    console.log("changing....");
   }
   blockStyleChange(item: string, key: string, e: any) {
     const pStyleReg = /<(p|h2|h3)[\s|\s]*style=[\s|\S]*?>/;
@@ -133,7 +137,7 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
   }
 
   addCompValueTags(key: string, e: any) {
-    const compValue = this.store.currComp.value;
+    const compValue = this.store.currComp.value.text;
     const pTagReg = /(<(p|h2|h3)[\s\S]*?>)([\s\S]*?)(<\/(p|h2|h3)>)/gi;
     const blocks = compValue.match(pTagReg);
     if (!blocks) {
@@ -151,8 +155,12 @@ export class TextEditorCtrl extends ModuleControl<EditorModule> {
       );
       blocks[index] = this.formatSortTags(spanStr, key, e);
     });
-    this.actions.updateCompData(this.store.currComp, "value", blocks.join(""));
+
+    this.store.currComp.value.setText(blocks.join("") );
+    history.submit();
+    console.log("changing....");
   }
+
   formatSortTags(item: string, key: string, e: any) {
     const keyToTags: { [key: string]: any }[] = [
       {

src/modules/editor/controllers/TransferCtrl/GroupCtrl.ts

@@ -1,146 +0,0 @@
-import { ModuleControl } from "queenjs";
-import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "./Matrix";
-
-export class GroupActionCtrl extends ModuleControl<EditorModule> {
-  // init() {
-  //   document.body.addEventListener("keydown", this.enableGroupMode);
-  // }
-  // enableGroupMode = (event: KeyboardEvent) => {
-  //   if (event.key === "Control" && !this.store.groupModeStatus) {
-  //     this.actions.enableGroupMode();
-  //     document.body.addEventListener("keyup", this.disableGroupMode);
-  //   }
-  // };
-  // disableGroupMode = (event: KeyboardEvent) => {
-  //   if (event.key === "Control") {
-  //     this.actions.disableGroupMode();
-  //     document.body.removeEventListener("keyup", this.disableGroupMode);
-  //   }
-  // };
-  // destroy() {
-  //   document.body.removeEventListener("keydown", this.enableGroupMode);
-  // }
-
-  async combineGroup() {
-    const { helper, store } = this;
-    const { groupIds } = store;
-    if (groupIds.length < 2) return;
-    const compsRect: Record<
-      string,
-      { t: number; l: number; r: number; b: number }
-    > = {};
-    const parentComp = helper.findParentComp(groupIds[0]) as DesignComp;
-    const parentRect = parentComp.$el.getBoundingClientRect();
-    groupIds.forEach((id) => {
-      const comp = helper.findComp(id) as DesignComp;
-      const itemRect = comp.$el.getBoundingClientRect();
-      compsRect[id] = {
-        t: itemRect.top - parentRect.top,
-        l: itemRect.left - parentRect.left,
-        r: itemRect.right - parentRect.left,
-        b: itemRect.bottom - parentRect.top,
-      };
-    });
-
-    const confVals = Object.values(compsRect);
-    const groupConf = {
-      t: Math.min(...confVals.map((d) => d.t)),
-      l: Math.min(...confVals.map((d) => d.l)),
-      r: Math.max(...confVals.map((d) => d.r)),
-      b: Math.max(...confVals.map((d) => d.b)),
-    };
-
-    const groupId = await this.store.insertCompContainer("Group", parentComp);
-
-    const groupComp = helper.findComp(groupId) as DesignComp;
-
-    groupComp.layout = {
-      size: [
-        helper.pxToDesignSize(groupConf.r - groupConf.l),
-        helper.pxToDesignSize(groupConf.b - groupConf.t),
-      ],
-      position: "absolute",
-      transform: {
-        x: helper.pxToDesignSize(groupConf.l),
-        y: helper.pxToDesignSize(groupConf.t),
-      },
-    };
-
-    groupIds.forEach((id) => {
-      const comp = helper.findComp(id) as DesignComp;
-      comp.layout.transform || (comp.layout.transform = {});
-      comp.layout.transform.x =
-        (comp.layout.transform.x || 0) - (groupComp.layout.transform?.x || 0);
-
-      comp.layout.transform.y =
-        (comp.layout.transform.y || 0) - (groupComp.layout.transform?.y || 0);
-    });
-
-    groupComp.children.default = parentComp.children.default?.filter((d) =>
-      groupIds.includes(d)
-    );
-    parentComp.children.default = parentComp.children.default?.filter(
-      (d) => !groupIds.includes(d)
-    );
-
-    return groupId;
-  }
-
-  async cancelGroup(groupComp: DesignComp) {
-    const { helper } = this;
-    const groupChildIds = groupComp.children.default as string[];
-
-    const parentComp = helper.findParentComp(groupComp.id) as DesignComp;
-
-    const parentMatrix = new Matrix();
-
-    groupChildIds.forEach((id) => {
-      const comp = helper.findComp(id) as DesignComp;
-
-      parentMatrix.setFormDiv(groupComp.$el);
-      const originArr = window
-        .getComputedStyle(groupComp.$el)
-        .transformOrigin.split(" ")
-        .map((v) => parseFloat(v));
-
-      const porigin = new Matrix();
-      porigin.translate(originArr[0], originArr[1]);
-      const invOrigin = new Matrix();
-      invOrigin.translate(-originArr[0], -originArr[1]);
-
-      const childOrigArr = window
-        .getComputedStyle(comp.$el)
-        .transformOrigin.split(" ")
-        .map((v) => parseFloat(v));
-      const corigin = new Matrix();
-      corigin.translate(childOrigArr[0], childOrigArr[1]);
-      const cinvOrigin = new Matrix();
-      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);
-
-      comp.layout.transform || (comp.layout.transform = {});
-      comp.layout.transform.x = helper.pxToDesignSize(result.getX());
-      comp.layout.transform.y = helper.pxToDesignSize(result.getY());
-      comp.layout.transform.s = result.getScale();
-      comp.layout.transform.r = result.getRotate();
-    });
-
-    const childIds = [...(parentComp.children.default as string[])];
-
-    const groupIndex = childIds.findIndex((id) => groupComp.id === id);
-    childIds.splice(groupIndex, 1, ...groupChildIds);
-
-    parentComp.children.default = childIds;
-  }
-}

src/modules/editor/controllers/TransferCtrl/Matrix.ts

@@ -1,470 +0,0 @@
-export class Matrix {
-  a = 1;
-  b = 0;
-  c = 0;
-  d = 1;
-  e = 0;
-  f = 0;
-
-  clone() {
-     const out = new Matrix();
-     out.a = this.a;
-     out.b = this.b;
-     out.c = this.c;
-     out.d = this.d;
-     out.e = this.e;
-     out.f = this.f;
-     return out;
-  }
-
-  static createFromDiv(div: HTMLElement) {
-     const out = new Matrix();
-     out.setFormDiv(div);
-     return out;
-  }
-
-  setFormDiv(div: HTMLElement) {
-    let transformMatrix = window
-      .getComputedStyle(div)
-      .getPropertyValue("transform");
-    if (!transformMatrix || transformMatrix === "none") {
-      transformMatrix = "matrix(1,0,0,1,0,0)";
-    }
-
-    
-    const pivot = window.getComputedStyle(div).transformOrigin
-    let px = 0;
-    let py = 0;
-    if (pivot) {
-      const flags = pivot.split(" ")
-      px = +flags[0].substring(0, flags[0].length-2)
-      py = +flags[1].substring(0, flags[1].length-2)
-    }
-
-    const values = transformMatrix.split("(")[1].split(")")[0].split(",");
-    this.a = +values[0];
-    this.b = +values[1];
-    this.c = +values[2];
-    this.d = +values[3];
-
-    this.e = +values[4]; //- ((px * this.a) + (py * this.c));
-    this.f = +values[5]; //- ((px * this.b) + (py * this.d));
-  }
-
-  apply(div: HTMLElement) {
-    div.style.transform = this.getMatrixStr();
-    div.style.transformOrigin = "0 0";
-    return this;
-  }
-  
-  getMatrixStr() {
-    return `matrix(${this.a},${this.b},${this.c},${this.d},${this.e},${this.f})`
-  }
-  
-  getX() {
-    return this.e;
-  }
-
-  getY() {
-    return this.f;
-  }
-
-  getRotate() {
-    const b = this.b;
-    const a = this.a;
-    return Math.round(Math.atan2(b, a) * (180 / Math.PI));
-  }
-
-  getScale() {
-    const b = this.b;
-    const a = this.a;
-
-    return Math.sqrt(a * a + b * b);
-  }
-
-  // /**
-  //  * Flips the horizontal values.
-  //  */
-  // flipX() {
-  //   this.transform(-1, 0, 0, 1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Flips the vertical values.
-  //  */
-  // flipY() {
-  //   this.transform(1, 0, 0, -1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Short-hand to reset current matrix to an identity matrix.
-  //  */
-  // reset() {
-  //   this.a = this.d = 1;
-  //   this.b = this.c = this.e = this.f = 0;
-  //   this._setCtx();
-  //   return this;
-  // }
-
-  /**
-   * Rotates current matrix accumulative by angle.
-   * @param {number} angle - angle in radians
-   */
-  rotate(angle:number) {
-    const cos = Math.cos(angle),
-      sin = Math.sin(angle);
-    this.transform(cos, sin, -sin, cos, 0, 0);
-    return this;
-  }
-
-  /**
-   * Helper method to make a rotation based on an angle in degrees.
-   * @param {number} angle - angle in degrees
-   */
-  rotateDeg(angle:number) {
-    this.rotate(angle * 0.017453292519943295);
-    return this;
-  }
-
-  /**
-   * Scales current matrix accumulative.
-   * @param {number} sx - scale factor x (1 does nothing)
-   * @param {number} sy - scale factor y (1 does nothing)
-   */
-  scale(sx:number, sy:number) {
-    this.transform(sx, 0, 0, sy, 0, 0);
-    return this;
-  }
-
-  // /**
-  //  * Scales current matrix on x axis accumulative.
-  //  * @param {number} sx - scale factor x (1 does nothing)
-  //  */
-  // scaleX(sx) {
-  //   this.transform(sx, 0, 0, 1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Scales current matrix on y axis accumulative.
-  //  * @param {number} sy - scale factor y (1 does nothing)
-  //  */
-  // scaleY(sy) {
-  //   this.transform(1, 0, 0, sy, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Apply skew to the current matrix accumulative.
-  //  * @param {number} sx - amount of skew for x
-  //  * @param {number} sy - amount of skew for y
-  //  */
-  // skew(sx, sy) {
-  //   this.transform(1, sy, sx, 1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Apply skew for x to the current matrix accumulative.
-  //  * @param {number} sx - amount of skew for x
-  //  */
-  // skewX(sx) {
-  //   this.transform(1, 0, sx, 1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Apply skew for y to the current matrix accumulative.
-  //  * @param {number} sy - amount of skew for y
-  //  */
-  // skewY(sy) {
-  //   this.transform(1, sy, 0, 1, 0, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Set current matrix to new absolute matrix.
-  //  * @param {number} a - scale x
-  //  * @param {number} b - skew y
-  //  * @param {number} c - skew x
-  //  * @param {number} d - scale y
-  //  * @param {number} e - translate x
-  //  * @param {number} f - translate y
-  //  */
-  // setTransform(a, b, c, d, e, f) {
-  //   this.a = a;
-  //   this.b = b;
-  //   this.c = c;
-  //   this.d = d;
-  //   this.e = e;
-  //   this.f = f;
-  //   this._setCtx();
-
-  //   return this;
-  // }
-
-  // /**
-  //  * Translate current matrix accumulative.
-  //  * @param {number} tx - translation for x
-  //  * @param {number} ty - translation for y
-  //  */
-  translate(tx: any, ty: any) {
-    this.transform(1, 0, 0, 1, tx, ty);
-    return this;
-  }
-
-  // /**
-  //  * Translate current matrix on x axis accumulative.
-  //  * @param {number} tx - translation for x
-  //  */
-  // translateX(tx) {
-  //   this.transform(1, 0, 0, 1, tx, 0);
-  //   return this;
-  // }
-
-  // /**
-  //  * Translate current matrix on y axis accumulative.
-  //  * @param {number} ty - translation for y
-  //  */
-  // translateY(ty) {
-  //   this.transform(1, 0, 0, 1, 0, ty);
-  //   return this;
-  // }
-
-  multipy(m2: Matrix) {
-    return this.transform(m2.a, m2.b, m2.c, m2.d, m2.e, m2.f);
-  }
-
-  /**
-   * Multiplies current matrix with new matrix values.
-   * @param {number} a2 - scale x
-   * @param {number} b2 - skew y
-   * @param {number} c2 - skew x
-   * @param {number} d2 - scale y
-   * @param {number} e2 - translate x
-   * @param {number} f2 - translate y
-   */
-  transform(
-    a2: number,
-    b2: number,
-    c2: number,
-    d2: number,
-    e2: number,
-    f2: number
-  ) {
-    const a1 = this.a,
-      b1 = this.b,
-      c1 = this.c,
-      d1 = this.d,
-      e1 = this.e,
-      f1 = this.f;
-
-    /* matrix order (canvas compatible):
-     * ace
-     * bdf
-     * 001
-     */
-    this.a = a1 * a2 + c1 * b2;
-    this.b = b1 * a2 + d1 * b2;
-    this.c = a1 * c2 + c1 * d2;
-    this.d = b1 * c2 + d1 * d2;
-    this.e = a1 * e2 + c1 * f2 + e1;
-    this.f = b1 * e2 + d1 * f2 + f1;
-
-    return this;
-  }
-
-  // /**
-  //  * Get an inverse matrix of current matrix. The method returns a new
-  //  * matrix with values you need to use to get to an identity matrix.
-  //  * Context from parent matrix is not applied to the returned matrix.
-  //  * @returns {Matrix}
-  //  */
-  getInverse() {
-    const a = this.a,
-      b = this.b,
-      c = this.c,
-      d = this.d,
-      e = this.e,
-      f = this.f,
-      m = new Matrix(),
-      dt = a * d - b * c;
-
-    m.a = d / dt;
-    m.b = -b / dt;
-    m.c = -c / dt;
-    m.d = a / dt;
-    m.e = (c * f - d * e) / dt;
-    m.f = -(a * f - b * e) / dt;
-
-    return m;
-  }
-
-  // /**
-  //  * Interpolate this matrix with another and produce a new matrix.
-  //  * t is a value in the range [0.0, 1.0] where 0 is this instance and
-  //  * 1 is equal to the second matrix. The t value is not constrained.
-  //  *
-  //  * Context from parent matrix is not applied to the returned matrix.
-  //  *
-  //  * @param {Matrix} m2 - the matrix to interpolate with.
-  //  * @param {number} t - interpolation [0.0, 1.0]
-  //  * @returns {Matrix} - new instance with the interpolated result
-  //  */
-  // interpolate(m2, t) {
-  //   var m = new Matrix();
-
-  //   m.a = this.a + (m2.a - this.a) * t;
-  //   m.b = this.b + (m2.b - this.b) * t;
-  //   m.c = this.c + (m2.c - this.c) * t;
-  //   m.d = this.d + (m2.d - this.d) * t;
-  //   m.e = this.e + (m2.e - this.e) * t;
-  //   m.f = this.f + (m2.f - this.f) * t;
-
-  //   return m;
-  // }
-
-  // /**
-  //  * Apply current matrix to x and y point.
-  //  * Returns a point object.
-  //  *
-  //  * @param {number} x - value for x
-  //  * @param {number} y - value for y
-  //  * @returns {{x: number, y: number}} A new transformed point object
-  //  */
-  applyToPoint(x:number, y:number) {
-    return {
-      x: x * this.a + y * this.c + this.e,
-      y: x * this.b + y * this.d + this.f,
-    };
-  }
-
-  // /**
-  //  * Apply current matrix to array with point objects or point pairs.
-  //  * Returns a new array with points in the same format as the input array.
-  //  *
-  //  * A point object is an object literal:
-  //  *
-  //  * {x: x, y: y}
-  //  *
-  //  * so an array would contain either:
-  //  *
-  //  * [{x: x1, y: y1} {x: x2, y: y2} ... {x: xn, y: yn}]
-  //  *
-  //  * or
-  //  * [x1, y1, x2, y2, ... xn, yn]
-  //  *
-  //  * @param {Array} points - array with point objects or pairs
-  //  * @returns {Array} A new array with transformed points
-  //  */
-  // applyToArray(points) {
-  //   var i = 0,
-  //     p,
-  //     l,
-  //     mxPoints = [];
-
-  //   if (typeof points[0] === "number") {
-  //     l = points.length;
-
-  //     while (i < l) {
-  //       p = this.applyToPoint(points[i++], points[i++]);
-  //       mxPoints.push(p.x, p.y);
-  //     }
-  //   } else {
-  //     for (; (p = points[i]); i++) {
-  //       mxPoints.push(this.applyToPoint(p.x, p.y));
-  //     }
-  //   }
-
-  //   return mxPoints;
-  // }
-
-  // /**
-  //  * Apply current matrix to a typed array with point pairs. Although
-  //  * the input array may be an ordinary array, this method is intended
-  //  * for more performant use where typed arrays are used. The returned
-  //  * array is regardless always returned as a Float32Array.
-  //  *
-  //  * @param {*} points - (typed) array with point pairs
-  //  * @returns {Float32Array} A new array with transformed points
-  //  */
-  // applyToTypedArray(points) {
-  //   var i = 0,
-  //     p,
-  //     l = points.length,
-  //     mxPoints = new Float32Array(l);
-
-  //   while (i < l) {
-  //     p = this.applyToPoint(points[i], points[i + 1]);
-  //     mxPoints[i++] = p.x;
-  //     mxPoints[i++] = p.y;
-  //   }
-
-  //   return mxPoints;
-  // }
-
-  // /**
-  //  * Apply to any canvas 2D context object. This does not affect the
-  //  * context that optionally was referenced in constructor unless it is
-  //  * the same context.
-  //  * @param {CanvasRenderingContext2D} context
-  //  */
-  // applyToContext(context) {
-  //   context.setTransform(this.a, this.b, this.c, this.d, this.e, this.f);
-  //   return this;
-  // }
-
-  // /**
-  //  * Returns true if matrix is an identity matrix (no transforms applied).
-  //  * @returns {boolean} True if identity (not transformed)
-  //  */
-  // isIdentity() {
-  //   return (
-  //     this._isEqual(this.a, 1) &&
-  //     this._isEqual(this.b, 0) &&
-  //     this._isEqual(this.c, 0) &&
-  //     this._isEqual(this.d, 1) &&
-  //     this._isEqual(this.e, 0) &&
-  //     this._isEqual(this.f, 0)
-  //   );
-  // }
-
-  // /**
-  //  * Compares current matrix with another matrix. Returns true if equal
-  //  * (within epsilon tolerance).
-  //  * @param {Matrix} m - matrix to compare this matrix with
-  //  * @returns {boolean}
-  //  */
-  // isEqual(m) {
-  //   return (
-  //     this._isEqual(this.a, m.a) &&
-  //     this._isEqual(this.b, m.b) &&
-  //     this._isEqual(this.c, m.c) &&
-  //     this._isEqual(this.d, m.d) &&
-  //     this._isEqual(this.e, m.e) &&
-  //     this._isEqual(this.f, m.f)
-  //   );
-  // }
-
-  // /**
-  //  * Compares floating point values with some tolerance (epsilon)
-  //  * @param {number} f1 - float 1
-  //  * @param {number} f2 - float 2
-  //  * @returns {boolean}
-  //  * @private
-  //  */
-  // _isEqual(f1, f2) {
-  //   return Math.abs(f1 - f2) < 1e-14;
-  // }
-
-  // /**
-  //  * Apply current absolute matrix to context if defined, to sync it.
-  //  * @private
-  //  */
-  // _setCtx() {
-  //   if (this.context)
-  //     this.context.setTransform(this.a, this.b, this.c, this.d, this.e, this.f);
-  // }
-}

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

@@ -1,158 +0,0 @@
-import { ModuleControl } from "queenjs";
-import { reactive } from "vue";
-import { EditorModule } from "../../module";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "./Matrix";
-import * as transforms from "./transforms";
-import { GroupActionCtrl } from "./GroupCtrl";
-
-type TransHandle = (this: TransferCtrl, e: MouseEvent) => void;
-
-export type TransCreateFn = (...args: any[]) => {
-  mousedown?: TransHandle;
-  mousemove: TransHandle;
-  mouseup: TransHandle;
-};
-
-export class TransferCtrl extends ModuleControl<EditorModule> {
-  compEl!: HTMLElement;
-  pageEl!: HTMLElement;
-  currComp!: DesignComp;
-  currTransfer!: ReturnType<TransCreateFn>;
-  currObserver?: MutationObserver;
-  transforms = transforms;
-
-  groupCtrl = new GroupActionCtrl(this.module);
-
-  transEvent = {
-    startX: 0,
-    startY: 0,
-    offsetX: 0,
-    offsetY: 0,
-    width: 0,
-    height: 0,
-  };
-  transferStyle = reactive({
-    top: "",
-    left: "",
-    width: "",
-    height: "",
-    transform: {
-      scale: 1,
-      rotate: "0deg",
-      translateX: "-50%",
-      translateY: "-50%",
-    },
-  });
-
-  originPiont = {
-    x: 0,
-    y: 0,
-  };
-
-  init(pageEl: HTMLElement) {
-    this.currComp = this.module.store.currComp;
-    this.compEl = this.currComp.$el;
-    this.pageEl = pageEl;
-    this.observe();
-  }
-
-  mousedown(e: MouseEvent, type: keyof typeof transforms, currComp?: any) {
-    if (!currComp) {
-      currComp = this.store.currComp;
-    }
-    this.currComp = currComp;
-    this.compEl = currComp.$el;
-    this.transEvent = {
-      startX: e.clientX,
-      startY: e.clientY,
-      offsetX: 0,
-      offsetY: 0,
-      width: currComp.layout.size?.[0] || currComp.$el.clientWidth * 2,
-      height: currComp.layout.size?.[1] || currComp.$el.clientHeight * 2,
-    };
-    this.currTransfer = this.transforms[type]();
-    document.addEventListener("mousemove", this.mousemove);
-    document.addEventListener("mouseup", this.mouseup);
-    this.currTransfer.mousedown?.call(this, e);
-  }
-
-  private mousemove = (e: MouseEvent) => {
-    const { transEvent } = this;
-    transEvent.offsetX = e.clientX - transEvent.startX;
-    transEvent.offsetY = e.clientY - transEvent.startY;
-    this.currTransfer.mousemove.call(this, e);
-  };
-  private mouseup = (e: MouseEvent) => {
-    document.removeEventListener("mousemove", this.mousemove);
-    document.removeEventListener("mouseup", this.mouseup);
-    this.currTransfer.mouseup.call(this, e);
-  };
-
-  observe() {
-    if (this.currObserver) {
-      this.currObserver.disconnect();
-    }
-    this.initStyle();
-    this.currObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === "childList" ||
-          (mutation.type === "attributes" && mutation.attributeName === "style")
-        ) {
-          this.initStyle();
-        }
-      });
-    });
-    this.currObserver.observe(this.compEl, {
-      attributes: true,
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
-  }
-
-  initStyle() {
-    if (!this.compEl) return;
-
-    const rect = this.compEl.getBoundingClientRect();
-    const pageRect = this.pageEl.getBoundingClientRect();
-
-    const matrix = new Matrix();
-    matrix.setFormDiv(this.compEl);
-
-    const width = this.compEl.clientWidth * matrix.getScale();
-    const height = this.compEl.clientHeight * matrix.getScale();
-
-    this.transferStyle.width = width + "px";
-    this.transferStyle.height = height + "px";
-    this.transferStyle.top = rect.top + rect.height / 2 - pageRect.top + "px";
-    this.transferStyle.left = rect.left + rect.width / 2 - pageRect.left + "px";
-    if (!this.transferStyle.transform) {
-      this.transferStyle.transform = {
-        scale: 1,
-        rotate: "0deg",
-        translateX: "-50%",
-        translateY: "-50%",
-      };
-    }
-    this.transferStyle.transform.scale = matrix.getScale();
-    this.transferStyle.transform.rotate = matrix.getRotate() + "deg";
-    this.transferStyle.transform.translateY = "-" + height / 2 + "px";
-
-    this.originPiont.x = rect.left + rect.width / 2;
-    this.originPiont.y = rect.top + rect.height / 2;
-  }
-
-  resetStyle() {
-    Object.keys(this.transferStyle).forEach((key) => {
-      (this.transferStyle as any)[key] = "";
-    });
-  }
-
-  destroy() {
-    this.groupCtrl.destroy();
-    this.currObserver?.disconnect();
-    this.resetStyle();
-  }
-}

src/modules/editor/controllers/TransferCtrl/transforms/index.ts

@@ -1,2 +0,0 @@
-export * from "./resize";
-export * from "./transform";

src/modules/editor/controllers/TransferCtrl/transforms/resize.ts

@@ -1,35 +0,0 @@
-import { TransCreateFn, TransferCtrl } from "..";
-
-function getResize(this: TransferCtrl, direction: string) {
-  const { transEvent, currComp } = this;
-  const size = currComp.layout.size;
-  if (direction.indexOf("x") != -1) {
-    size[0] = transEvent.width + transEvent.offsetX * 2;
-  }
-  if (direction.indexOf("y") != -1) {
-    size[1] = transEvent.height + transEvent.offsetY * 2;
-  }
-  return size;
-}
-
-const resize: TransCreateFn = (direction: string) => ({
-  mousemove() {
-    const style = this.module.helper.createStyle({
-      size: getResize.call(this, direction),
-    }, {} as any);
-    Object.entries(style).forEach(([key, value]: any[]) => {
-      this.compEl.style[key] = value;
-    });
-  },
-  mouseup() {
-    this.module.actions.updateCompData(
-      this.currComp,
-      "layout.size",
-      getResize.call(this, direction)
-    );
-  },
-});
-
-export const resizeX = resize.bind(null, "x");
-export const resizeY = resize.bind(null, "y");
-export const resizeXY = resize.bind(null, "xy");

src/modules/editor/controllers/TransferCtrl/transforms/transform.ts

@@ -1,60 +0,0 @@
-import { TransCreateFn, TransferCtrl } from "..";
-
-function getTransform(this: TransferCtrl, transType: string) {
-  const { transEvent, originPiont } = this;
-  const { transform = {} } = this.currComp?.layout || {};
-  const offset = {
-    x: transform.x || 0,
-    y: transform.y || 0,
-    r: transform.r || 0,
-    s: transform.s || 1,
-  };
-
-  const offsetX = transEvent.offsetX + transEvent.startX - originPiont.x;
-  const offsetY = transEvent.offsetY + transEvent.startY - originPiont.y;
-
-  switch (transType) {
-    case "move":
-      offset.x += transEvent.offsetX * 2;
-      offset.y += transEvent.offsetY * 2;
-      break;
-    case "rotate":
-      if (offsetY > 0) {
-        offset.r = (Math.atan(-offsetX / offsetY) * 180) / Math.PI;
-      } else if (offsetX < 0) {
-        offset.r = (Math.atan(offsetY / offsetX) * 180) / Math.PI + 90;
-      } else {
-        offset.r = (Math.atan(offsetY / offsetX) * 180) / Math.PI - 90;
-      }
-      break;
-    case "scale":
-      offset.s = +(
-        offset.s *
-        (1 + (transEvent.offsetX * 2) / transEvent.width)
-      ).toFixed(2);
-  }
-
-  return offset;
-}
-
-const transform: TransCreateFn = (transType: string) => ({
-  mousemove() {
-    const style = this.module.helper.createStyle({
-      transform: getTransform.call(this, transType),
-      size: [0,0]
-    }, {} as any);
-    Object.entries(style).forEach(([key, value]: any[]) => {
-      this.compEl.style[key] = value;
-    });
-  },
-  mouseup() {
-    this.module.actions.setCompTransform(
-      this.currComp,
-      getTransform.call(this, transType)
-    );
-  },
-});
-
-export const move = transform.bind(null, "move");
-export const rotate = transform.bind(null, "rotate");
-export const scale = transform.bind(null, "scale");

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

@@ -10,6 +10,7 @@ import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
 import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
 import { nanoid } from "nanoid";
+import { createObj, history } from "../../objects/DesignTemp/factory";
 
 const ctrlState = {
   selected: [] as string[],
@@ -22,31 +23,26 @@ const ctrlState = {
 };
 
 export const editActions = EditorModule.action({
-  pickComp(compId: string, selected = true) {
-    if (compId == "") {
-      //空的时候,就选择根页面
-      compId = "root";
-    }
-    const selectCardChild = (id: string) => {
-      const paths = this.helper.getCompTrees(id);
-      const cardChilds = paths[2];
-      if (cardChilds) {
-        this.actions.selectObjs([cardChilds.id]);
-      } else {
-        this.actions.selectObjs([]);
-        if (id != "root") {
-          this.store.setCurrComp(this.store.currStreamCardId);
-        }
+  
+  async addImageToDesign(url) {
+      queenApi.showLoading("图片加载中")
+      const maxW = this.controls.screenCtrl.getCurrScreenWidth();
+      try {
+        const temImg :any = await this.helper.loadImage(url);
+        const ratio = temImg.width / temImg.height;
+        const W = temImg.width > maxW ? maxW : temImg.width;
+        const H = W / ratio;
+        await this.actions.clickCompToDesign("Image", (comp)=>{
+
+          comp.setSize(W,  H );
+          comp.value.url = url;
+        })
+      } catch(e) {
+        queenApi.hideLoading();
+        queenApi.messageError("图片加载失败");
+        return
       }
-    };
-
-    if (this.store.currCompId == compId) {
-      return;
-    }
-    this.store.setCurrComp(compId);
-    if (selected) {
-      selectCardChild(compId);
-    }
+      queenApi.hideLoading();
   },
 
   // 通过点击添加组件到画布
@@ -55,54 +51,30 @@ export const editActions = EditorModule.action({
       queenApi.messageError("请先选中一个卡片");
       return;
     }
-
-    //点击默认都创建一个容器
-    //创建容器
-    const isCreatCard =
-      compKey != "Text" &&
-      compKey != "Image" &&
-      compKey != "Rectage" &&
-      compKey != "Line" &&
-      compKey != "Arc" &&
-      compKey != "Triangle" &&
-      compKey != "Ellipse" &&
-      compKey != "Polygon" &&
-      compKey != "PolygonNormal" &&
-      compKey != "Curve";
+    
+    const page = this.controls.pageCtrl;
 
     let yOffset = 0;
     if (
-      this.store.currCompId != this.store.currStreamCardId &&
-      !isCreatCard &&
-      this.store.currCompId != "root"
+      page.state.currCompId != page.state.currStreamCardId &&
+      page.state.currCompId != "root"
     ) {
-      const bound = this.helper.getCardCompBound(this.store.currCompId);
+      const bound = this.helper.getCardCompBound(page.state.currCompId);
       yOffset = bound.y + bound.h;
     }
+    let currCard = page.currStreamCard;
 
-    let currCard = this.store.currStreamCard;
+    const currComp = createObj({compKey}, false);
 
-    if (isCreatCard) {
-      //先创建卡片
-      const currCardIndex =
-        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-      const compId = await this.store.insertDesignContent(
-        "Container",
-        currCardIndex
-      );
-      currCard = this.helper.findComp(compId) as DesignComp;
-      currCard.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
-    }
-
-    const compId = await this.store.insertCompContainer(compKey, currCard);
-    const addedComp = this.store.compMap[compId];
-    addedComp.layout.position = "absolute";
-
-    const currComp = this.helper.findComp(compId) as DesignComp;
+    page.designData.compMap[currComp.id] = currComp;
+    page.setCompPid(currComp.id, currCard.id);
+    const childIds = [...currCard.children.default];
+    childIds.push(currComp.id);
+    currCard.children.setDefault(childIds);
+    const compId = currComp.id;
     cb?.(currComp);
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
-
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
       w / 2.0 - (currComp.layout.size?.[0] || w) / 2
@@ -118,46 +90,44 @@ export const editActions = EditorModule.action({
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
 
-    this.actions.pickComp(compId);
+    this.controls.editorCtrl.clickPickComp(compId);
     this.helper.extendStreamCard(currCard.id);
 
     if (compKey == "Text") {
       this.actions.textFocus(compId, true);
     }
     this.controls.cropCtrl.close();
+
+    this.history.submit();
   },
 
   // 通过点击添加组件到画布
   async clickCompUserToDesign(id: string, isSys) {
+
+    const page = this.controls.pageCtrl;
+
     if (!this.store.currStreamCardId) {
       queenApi.messageError("请先选中一个卡片");
       return;
     }
     const { result } = await this.https.getCompDetail(id, isSys);
 
-    //先创建卡片
-    // const currCardIndex =  this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-    // const cardId = await this.store.insertDesignContent(
-    //   "Container",
-    //   currCardIndex
-    // );
-    //  const currCard = this.helper.findComp(cardId) as DesignComp;
-    const currCard = this.store.currStreamCard;
-    const comp = this.store.addUserCard(result);
+    const currCard = page.currStreamCard;
+    const comp = page.addUserCard(result);
 
     const compId = comp.id;
     const childIds = [...(currCard.children.default || [])];
     childIds.push(compId);
-    currCard.children.default = childIds;
+    currCard.children.setDefault(childIds);
 
-    this.store.setCompPid(compId, currCard.id);
+    page.setCompPid(compId, currCard.id);
 
-    const addedComp = this.store.compMap[compId];
-    addedComp.layout.position = "absolute";
 
     this.actions.initAddedCompPos(this.store.currCompId, compId, currCard.id);
 
-    this.actions.pickComp(compId);
+    this.controls.editorCtrl.clickPickComp(compId);
+    
+    history.submit();
   },
 
   initAddedCompPos(currId: string, addedId: string, cardId: string) {
@@ -195,22 +165,22 @@ export const editActions = EditorModule.action({
   // 通过拖拽添加组件到画布
   async dragCompToDesign(event: MouseEvent, compKey: string, data: any) {
     const currCardDom = this.store.currStreamCard.$el;
+    const page = this.controls.pageCtrl;
 
     if (compKey == "CompCard") {
       const { result } = await this.https.getCompDetail(data.id, data.isSys);
-      const comp = this.store.addUserCard(result);
+      const comp = page.addUserCard(result);
 
-      const currCard = this.store.currStreamCard;
+      const currCard = page.currStreamCard;
       const compId = comp.id;
       const childIds = [...(currCard.children.default || [])];
       childIds.push(compId);
-      currCard.children.default = childIds;
+      currCard.children.setDefault(childIds);
 
-      const addedComp = this.store.compMap[compId];
-      addedComp.layout.position = "absolute";
-      this.store.setCompPid(compId, currCard.id);
+      page.setCompPid(compId, currCard.id);
 
-      this.actions.pickComp(compId);
+      this.controls.editorCtrl.clickPickComp(compId);
+    
     } else {
       await this.actions.addCompToDesign(compKey as any);
     }
@@ -229,7 +199,7 @@ export const editActions = EditorModule.action({
         cardPoints.y
       );
 
-      this.helper.extendStreamCard(this.store.currStreamCardId);
+      this.helper.extendStreamCard(page.state.currStreamCardId);
 
       if (compKey == "Text") {
         this.actions.selectObjs([]);
@@ -237,6 +207,8 @@ export const editActions = EditorModule.action({
       }
       this.controls.cropCtrl.close();
     }, 100);
+
+
   },
 
   async selectObjs(ids: string[], last = "") {
@@ -251,34 +223,23 @@ export const editActions = EditorModule.action({
 
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
-    if (!this.store.currStreamCardId) {
+    const page = this.controls.pageCtrl;
+    if (!page.state.currStreamCardId) {
       //必须选中一个streamCard
       return;
     }
     if (compKey == "Container") {
-      // index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-      const compId = await this.store.insertDesignContent(compKey, index);
-      this.actions.pickComp(compId);
-
-      const c = this.helper.findComp(compId) as DesignComp;
-      c.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
-      c.layout.size[1] = this.controls.screenCtrl.getCurrScreenHeight();
-
-      this.helper.extendStreamCard(compId);
-
-      this.actions.selectObjs([]);
-
+      const  compId = page.insertDesignCard(index);
+      this.controls.editorCtrl.clickPickComp(compId);
       return;
     }
 
-    const compId = await this.store.insertCompContainer(
+    const compId = page.insertCompContainer(
       compKey,
       this.store.currStreamCard
     );
-    const addedComp = this.store.compMap[compId];
-    this.actions.setCompPositionFloat(addedComp);
 
-    this.actions.pickComp(compId);
+    this.controls.editorCtrl.clickPickComp(compId);
   },
 
   // 切换当前组件
@@ -322,8 +283,9 @@ export const editActions = EditorModule.action({
   // },
   // 切换到父组件
   pickParentComp(compId: string) {
+    const page = this.controls.pageCtrl;
     const parentComp = this.helper.findParentComp(compId);
-    parentComp && this.store.setCurrComp(parentComp.id);
+    parentComp && page.setCurrComp(parentComp.id);
   },
 
   ctrlc() {
@@ -337,7 +299,7 @@ export const editActions = EditorModule.action({
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 1;
-    const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+    const objc = this.controls.selectCtrl.objContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
     objc.setPivot(0);
     const currX = objc.parent.x,
@@ -357,16 +319,25 @@ export const editActions = EditorModule.action({
 
   setSameSize(isWidth: boolean) {
     const selectCtrl = this.controls.selectCtrl;
-    const objc = selectCtrl.objContainer as ObjsContainer;
-    const w = this.controls.screenCtrl.getCurrScreenWidth();
-    if (this.store.selected.length == 1) {
-      if (isWidth) this.store.currComp.layout.size[0] = w;
-      else
-        this.store.currComp.layout.size[1] =
-          this.store.currStreamCard.layout.size[1];
+    const objc = selectCtrl.objContainer;
+    const layout = this.store.currComp.layout;
 
-      objc.updateSize();
-      selectCtrl.upgateGizmoStyle();
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
+    if (this.selected.length == 1) {
+      const size :any = layout.size.slice(0);
+      let isSame = false;
+      if (isWidth) {
+        isSame = w == size[0]
+        size[0] = w;
+      }
+      else {
+        isSame = size[1] == this.store.currStreamCard.layout.size[1]
+        size[1] = this.store.currStreamCard.layout.size[1];
+      }
+      if (!isSame) {
+        layout.setSize(size);
+        this.history.submit();
+      }
       return;
     }
 
@@ -413,7 +384,7 @@ export const editActions = EditorModule.action({
     ctrlState.cardId = this.store.currStreamCardId;
     ctrlState.type = 2;
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
-    const objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+    const objc = this.controls.selectCtrl.objContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
     objc.setPivot(0);
     const currX = objc.parent.x,
@@ -425,6 +396,7 @@ export const editActions = EditorModule.action({
 
   ctrlv() {
     if (ctrlState.selected.length < 1) return;
+    const ctrl = this.controls.pageCtrl;
 
     const news: string[] = [];
 
@@ -435,8 +407,8 @@ export const editActions = EditorModule.action({
           const cp = this.helper.findComp(id) as DesignComp;
           const cp1 = cloneDeep(cp);
           cp1.id = nanoid();
-          this.store.compMap[cp1.id] = cp1;
-          this.store.setCompPid(cp1.id, c.id);
+          ctrl.compMap[cp1.id] = cp1;
+          ctrl.setCompPid(cp1.id, c.id);
           childs[index] = cp1.id;
 
           deepCopy(cp);
@@ -449,8 +421,8 @@ export const editActions = EditorModule.action({
       const cp1 = cloneDeep(cp);
       cp1.id = nanoid();
       news.push(cp1.id);
-      this.store.compMap[cp1.id] = cp1;
-      this.store.setCompPid(cp1.id, this.store.currStreamCardId);
+      ctrl.compMap[cp1.id] = cp1;
+      ctrl.setCompPid(cp1.id, this.store.currStreamCardId);
 
       deepCopy(cp);
     });
@@ -517,6 +489,8 @@ export const editActions = EditorModule.action({
 
   // 删除组件
   removeComp(compId: string) {
+    const ctrl = this.controls.pageCtrl;
+
     const paths = this.helper.getCompTrees(compId);
     if (!paths[2]) {
       if (this.helper.isStreamCard(compId)) {
@@ -534,9 +508,9 @@ export const editActions = EditorModule.action({
       }
       const cardid = this.store.currStreamCardId;
       if (compId === this.store.currCompId) {
-        this.store.setCurrComp(this.store.currStreamCardId);
+        ctrl.setCurrComp(this.store.currStreamCardId);
       }
-      this.store.deleteComp(compId);
+      ctrl.deleteComp(compId);
 
       this.helper.extendStreamCard(cardid);
 
@@ -545,35 +519,36 @@ export const editActions = EditorModule.action({
   },
 
   async removeStreamCard(compId: string) {
+    const ctrl = this.controls.pageCtrl;
+
     await queenApi.showConfirm({ title: "删除", content: "确认删除当前页面?" });
 
-    // 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);
-      nextCard = this.store.streamCardIds[i + 1];
+    let nextCard = ctrl.state.currStreamCardId;
+    if (compId == ctrl.state.currStreamCardId) {
+      const i = ctrl.streamCardIds.indexOf(compId);
+      nextCard =ctrl.streamCardIds[i + 1];
       if (!nextCard) {
-        nextCard = this.store.streamCardIds[i - 1];
+        nextCard = ctrl.streamCardIds[i - 1];
       }
     }
-    this.controls.selectCtrl.selecteObjs([]);
+    this.controls.selectCtrl.gizmo.selectObjs([]);
+    this.controls.propsCtrl.showProp("root");
 
-    this.store.setCurrComp(nextCard);
-
-    this.store.deleteComp(compId);
+    ctrl.setCurrComp(nextCard);
+    ctrl.deleteComp(compId);
   },
   // 移动组件顺序
   moveComp(selIndex: number, targetIndex: number) {
     this.actions.selectObjs([]);
     if (selIndex === targetIndex) return;
-    this.store.moveComp(selIndex, targetIndex);
+
+    this.controls.pageCtrl.moveComp(selIndex, targetIndex);
   },
 
   // 保存容器为组件
   async saveAsComp(comp: DesignComp) {
+    const ctrl = this.controls.pageCtrl;
+
     try {
       const CompSave = this.components.CompSave as any;
       let title = "";
@@ -611,7 +586,7 @@ export const editActions = EditorModule.action({
         title,
         type,
         thumbnail,
-        compMap: cloneDeep(this.store.designData.compMap),
+        compMap: cloneDeep(ctrl.designData.compMap),
       };
       this.helper.clearUnusedComps(data.compMap, comp.id);
       data.compMap.root = data.compMap[comp.id];
@@ -640,9 +615,11 @@ export const editActions = EditorModule.action({
 
   // 保存项目
   async saveDesign() {
+    const ctrl = this.controls.pageCtrl;
+
     try {
       // 清除无用组件
-      this.helper.clearProjectUnusedComps(this.store.designData.compMap);
+      this.helper.clearProjectUnusedComps(ctrl.designData.compMap);
       const c = this.controls.screenCtrl;
       c.saveScreenPage();
       const root = this.helper.findRootComp() as DesignComp;
@@ -651,21 +628,20 @@ export const editActions = EditorModule.action({
       root.value.pageSizeType = c.state.screen.pageSizeType;
 
       // 封面截屏
-      if (!this.store.designData.thumbnail) {
+      if (!ctrl.designData.thumbnail) {
         await this.actions.updateThumbnailByScreenshot();
       }
       queenApi.showLoading("保存中");
-      await this.controls.uploader.uploadBlobs(this.store.designData);
+      await this.controls.uploader.uploadBlobs(ctrl.designData);
       if (this.store.isWk) {
         await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
-          this.store.designData
+          ctrl.designData
         );
       } else {
         await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
-          this.store.designData
+          ctrl.designData
         );
       }
-
       queenApi.messageSuccess("保存成功");
     } catch (error: any) {
       throw Exception.error(error.toString());
@@ -676,6 +652,8 @@ export const editActions = EditorModule.action({
 
   // 截屏保存封面
   async updateThumbnailByScreenshot(autoSave?: boolean) {
+    const ctrl = this.controls.pageCtrl;
+
     try {
       const rootComp = this.helper.findRootComp();
       if (!rootComp) return;
@@ -688,9 +666,9 @@ export const editActions = EditorModule.action({
       this.store.setDesignThumbnail(thumbnail);
 
       if (autoSave) {
-        await this.controls.uploader.uploadBlobs(this.store.designData);
+        await this.controls.uploader.uploadBlobs(ctrl.designData);
         await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
-          pick(this.store.designData, ["_id", "thumbnail"])
+          pick(ctrl.designData, ["_id", "thumbnail"])
         );
         queenApi.messageSuccess("保存成功");
       }
@@ -701,14 +679,6 @@ export const editActions = EditorModule.action({
     }
   },
 
-  // 设置组件变换
-  setCompTransform(comp: DesignComp, transform: Layout["transform"]) {
-    if (!comp) return;
-
-    comp.layout.transform = transform;
-    console.log(comp);
-  },
-
   // 设置组件变换
   setCompTransformMatrix(comp: DesignComp, transformMatrix: string) {
     if (!comp) return;
@@ -716,16 +686,7 @@ export const editActions = EditorModule.action({
     comp.layout.transformMatrix = transformMatrix;
   },
 
-  // 设置组件浮动
-  setCompPositionFloat(comp: DesignComp) {
-    comp.layout.position = "absolute";
-  },
 
-  // 设置组件浮动
-  setCompPosition(comp: DesignComp) {
-    comp.layout.position =
-      comp.layout.position === "absolute" ? undefined : "absolute";
-  },
   // 设置组件显示隐藏
   setCompVisible(comp: DesignComp) {
     comp.layout.visible = comp.layout.visible === false ? true : false;
@@ -740,13 +701,13 @@ export const editActions = EditorModule.action({
     comp.title = res;
   },
   // 清除组件变换
-  clearCompTransform(comp: DesignComp) {
-    comp.layout.margin = "";
-    comp.layout.transform = undefined;
-  },
+  // clearCompTransform(comp: DesignComp) {
+  //   comp.layout.margin = "";
+  //   comp.layout.transform = undefined;
+  // },
   // 设置组件锁定状态
   setCompLock(comp: DesignComp) {
-    comp.layout.locked = !comp.layout.locked;
+    comp.layout.setLocked(!comp.layout.locked);
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
@@ -780,9 +741,10 @@ export const editActions = EditorModule.action({
     const w = this.helper.designSizeToPx(
       this.controls.screenCtrl.getCurrScreenWidth()
     );
+    const gizmo = selectCtrl.gizmo;
 
-    if (this.store.selected.length == 1 || isGroup) {
-      const objc = selectCtrl.objContainer as ObjsContainer;
+    if (gizmo.selected.length == 1 || isGroup) {
+      const objc = selectCtrl.objContainer;
       const box = objc.getBound();
 
       switch (flag) {
@@ -796,6 +758,7 @@ export const editActions = EditorModule.action({
           selectCtrl.translate(w - box.right, 0);
           break;
       }
+      history.submit();
       return;
     }
 
@@ -806,7 +769,7 @@ export const editActions = EditorModule.action({
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
-    const objc = selectCtrl.objContainer as ObjsContainer;
+    const objc = selectCtrl.objContainer;
     let min = 10000,
       max = -10000;
     let step = 0;
@@ -844,6 +807,7 @@ export const editActions = EditorModule.action({
       });
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
+      history.submit();
       return;
     }
 
@@ -868,12 +832,14 @@ export const editActions = EditorModule.action({
     });
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
+    history.submit();
   },
 
   setAlignY(flag: 0 | 1 | 2 | 3, isGroup = false) {
     const selectCtrl = this.controls.selectCtrl;
-    if (this.store.selected.length == 1 || isGroup) {
-      const objc = selectCtrl.objContainer as ObjsContainer;
+    const gizmo = selectCtrl.gizmo;
+    if (gizmo.selected.length == 1 || isGroup) {
+      const objc = selectCtrl.objContainer;
       const box = objc.getBound();
 
       const card = new CompObject(this.store.currStreamCard);
@@ -890,6 +856,7 @@ export const editActions = EditorModule.action({
           selectCtrl.translate(0, cardBox.h - box.bottom);
           break;
       }
+      history.submit();
       return;
     }
 
@@ -899,7 +866,7 @@ export const editActions = EditorModule.action({
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
-    const objc = selectCtrl.objContainer as ObjsContainer;
+    const objc = selectCtrl.objContainer;
 
     let min = 10000;
     let max = -10000;
@@ -939,6 +906,7 @@ export const editActions = EditorModule.action({
       });
       objc.updateSize();
       selectCtrl.upgateGizmoStyle();
+      history.submit();
       return;
     }
 
@@ -963,40 +931,19 @@ export const editActions = EditorModule.action({
     });
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
+    history.submit();
   },
 
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
     comp.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
   },
-  //
-  setCompAlign(comp: DesignComp, align: string) {
-    comp.layout.alignSelf = align;
-    if (comp.layout.transform?.x) {
-      comp.layout.transform.x = 0;
-    }
-  },
+  
 
-  // 开启组合模式
-  enableGroupMode() {
-    this.store.setGroupIds(
-      this.store.currCompId ? [this.store.currCompId] : []
-    );
-    this.store.setGroupMode(true);
-  },
-  // 关闭组合模式
-  async disableGroupMode() {
-    const groupId = await this.controls.transferCtrl.groupCtrl.combineGroup();
-    if (groupId) {
-      this.store.setCurrComp(groupId);
-    }
-    this.store.setGroupIds([]);
-    this.store.setGroupMode(false);
-  },
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
     const childs = groupComp.children.default || [];
-    const objC = this.controls.selectCtrl.objContainer as ObjsContainer;
+    const objC = this.controls.selectCtrl.objContainer;
     const parentMtrx = objC.parent.worldTransform.clone();
     childs.forEach((o) => {
       const obj = this.helper.findComp(o) as DesignComp;
@@ -1018,15 +965,15 @@ export const editActions = EditorModule.action({
   },
 
   createGroupComps() {
-    const selectCtrl = this.controls.selectCtrl;
-    const Objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+ 
+    const gizmo = this.controls.selectCtrl.gizmo;
+    const page = this.controls.pageCtrl;
+
+    const sels = gizmo.selected.map(item=>item.comp.id);
     const id = this.controls.compUICtrl.createCompId("Group");
+    
     const comp = this.helper.findComp(id) as DesignComp;
-    comp.layout.position = "absolute";
-
-    //先删除现有的节点
-    const sels = this.store.selected.slice(0);
-    const chils = this.store.currStreamCard.children.default || [];
+    const chils = this.controls.pageCtrl.currStreamCard.children.default || [];
     const newChilds: any = [];
     const groupChilds: any = [];
     chils.forEach((c) => {
@@ -1037,10 +984,11 @@ export const editActions = EditorModule.action({
     });
 
     newChilds.push(id);
-    this.store.currStreamCard.children.default = newChilds;
+    page.currStreamCard.children.setDefault(newChilds);
+    page.setCompPid(id, page.currStreamCard.id);
 
     //更新节点的新位置
-    Objc.parent.children.forEach((obj) => {
+    gizmo.parent.children.forEach((obj) => {
       const cobj = obj as CompObject;
       const comp = cobj.comp;
       comp.layout.transformMatrix = cobj.localTransform.getMatrixStr();
@@ -1048,17 +996,19 @@ export const editActions = EditorModule.action({
 
     //再添加新的节点
     comp.layout.size = [
-      this.helper.pxToDesignSize(Objc.width),
-      this.helper.pxToDesignSize(Objc.height),
+      this.helper.pxToDesignSize(gizmo.width),
+      this.helper.pxToDesignSize(gizmo.height),
     ];
-    comp.layout.transformMatrix = selectCtrl.transferStyle.matrix;
+
+    comp.layout.transformMatrix = gizmo.parent.worldTransform.getMatrixStr();
 
     comp.children.default = groupChilds;
 
-    this.actions.selectObjs([]);
-    setTimeout(() => {
-      this.actions.pickComp(comp.id);
-    }, 0);
+    this.controls.propsCtrl.showProp(comp.id);
+
+    this.controls.selectCtrl.gizmo.selectObjs([comp.id]);
+
+    history.submit();
   },
 
   handleSelectMoving(key: string) {
@@ -1085,6 +1035,8 @@ export const editActions = EditorModule.action({
 
   // 点击模板
   async clickTplToDesign(record) {
+    const ctrl = this.controls.pageCtrl;
+
     const res = await queenApi.showConfirm({
       title: "",
       content: "要替换正在编辑的内容？",
@@ -1096,7 +1048,7 @@ export const editActions = EditorModule.action({
     const { compMap, content, desc, thumbnail, title } = frameData.result;
 
     const designData = {
-      ...this.store.designData,
+      ...ctrl.designData,
       compMap,
       content,
       desc,
@@ -1105,8 +1057,7 @@ export const editActions = EditorModule.action({
     };
 
     this.actions.selectObjs([]);
-    this.store.setCurrComp("root");
-    this.store.setDesignData(designData);
-    this.store.currStreamCardId = this.store.streamCardIds[0];
+    ctrl.setCurrComp("root");
+    ctrl.setDesignData(designData);
   },
 });

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

@@ -1,5 +1,6 @@
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
+import { DesignTemp } from "../../objects/DesignTemp";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createProxyEffect } from "../../objects/ProxyStore/create";
 import { EditorMode } from "../../typings";
@@ -8,40 +9,45 @@ import { editActions } from "./edit";
 export const initActions = EditorModule.action({
   // 模块初始化
   init() {
-    const { historyCtrl } = this.controls;
-    historyCtrl.bindActions(Object.keys(editActions));
+    // const { historyCtrl } = this.controls;
+    // historyCtrl.bindActions(Object.keys(editActions));
     this.controls.compUICtrl.init();
       this.controls.mediaCtrl.init();
-    createProxyEffect(this.store, (type, paths, value, oldValue) => {
-      if (
-        paths[0] === "designData" ||
-        paths[0] === "currCompId" ||
-        paths[0] === "selected" ||
-        paths[0] === "currStreamCardId" ||
-        paths[0] === "selectId"
-      ) {
-        historyCtrl.record(this.store, type, paths, value, oldValue);
-      }
-    });
+
+    // createProxyEffect(this.store, (type, paths, value, oldValue) => {
+    //   if (
+    //     paths[0] === "designData" ||
+    //     paths[0] === "currCompId" ||
+    //     paths[0] === "selected" ||
+    //     paths[0] === "currStreamCardId" ||
+    //     paths[0] === "selectId"
+    //   ) {
+    //     historyCtrl.record(this.store, type, paths, value, oldValue);
+    //   }
+    // });
   },
 
   // 初始化数据
   async initDesign(id: string, isSys = false) {
     const ret = await this.https.getDesignDetail(id, { isSys });
-    this.store.setDesignData(ret.result);
+    // this.store.setDesignData(ret.result);
+
+    const page = this.controls.pageCtrl;
+    page.setDesignData(ret.result);
+    
 
     //设置组件父子关系
     const ite = (root:any)=> {
       const cards = root.children?.default || [];
       cards.forEach((c:string)=>{
-          this.store.setCompPid(c, root.id);
+        page.setCompPid(c, root.id);
           const r = this.helper.findComp(c);
           if (r) {
             ite(r);
           }
       })
     }
-    ite(this.store.rootPage);
+    ite(page.rootPage);
 
     const root = this.helper.findRootComp() as DesignComp;
     this.controls.screenCtrl.state.screen.useFor= root.value.useFor || "mobile"
@@ -67,13 +73,13 @@ export const initActions = EditorModule.action({
     this.store.setWk(v);
   },
   onViewReady(pageEl, selEl, viewPort) {
-    this.store.currStreamCardId = this.store.streamCardIds[0];
+    // this.store.currStreamCardId = this.controls.pageCtrl.streamCardIds[0];
     this.controls.selectCtrl.initEvents(pageEl, selEl, viewPort);
   },
 
-  onCompLayoutUpdated(comp: DesignComp) {
+  onCompLayoutUpdated(comp: DesignComp) {//组件自身延迟加载了，影响了布局
     if (this.helper.isCurrComp(comp.id)) {
-      this.controls.selectCtrl.selecteObjs([new CompObject(comp)]);
+      this.controls.selectCtrl.gizmo.selectObjs([comp.id]);
     }
   },
 });

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

@@ -28,16 +28,15 @@ export const helpers = EditorModule.helper({
   },
 
   findComp(compId: string) {
-    const { compMap } = this.store.designData;
+    const compMap = this.controls.pageCtrl.compMap;
+    if (!compMap) return;
     const comp = compMap[compId];
     if (comp) return comp;
   },
   isStreamCard(compId: string) {
-    return this.store.streamCardIds.indexOf(compId) > -1;
-  },
-  isGroupComp(compId: string) {
-    return this.store.groupIds.indexOf(compId) > -1;
+    return this.controls.pageCtrl.streamCardIds.indexOf(compId) > -1;
   },
+  
   isGroupCompChild(compId: string) {
     const comps = this.helper.getCompTrees(compId);
     comps.pop();
@@ -53,9 +52,10 @@ export const helpers = EditorModule.helper({
     if (compId == "root" || this.helper.isStreamCard(compId)) {
       return false;
     }
-    const cards = this.store.streamCardIds;
+    const cards = this.controls.pageCtrl.streamCardIds;
     let n = cards.length;
-    const compMap = this.store.designData.compMap;
+    const ctrl = this.controls.pageCtrl
+    const compMap = ctrl.designData.compMap;
     while (n--) {
       const childs = compMap[cards[n]].children.default || [];
       if (childs.indexOf(compId) > -1) return true;
@@ -65,15 +65,19 @@ export const helpers = EditorModule.helper({
 
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
-    if (comp) return this.helper.findComp(this.store.compPids[compId]);
+
+    if (comp) return this.helper.findComp(this.controls.pageCtrl.compPids[compId]);
   },
+
   findRootComp(): DesignComp | undefined {
-    return this.store.designData.compMap["root"];
+    return this.controls.pageCtrl.designData.compMap?.["root"];
   },
 
   findCardAllChildren(index:number) {
-    const cardId = this.store.streamCardIds[index];
-    return this.store.designData.compMap[cardId].children.default || [] as string[];
+  
+    const ctrl = this.controls.pageCtrl
+    const cardId = ctrl.streamCardIds[index];
+    return ctrl.designData.compMap[cardId].children.default || [] as string[];
   },
 
   getCompCard(compId: string) {
@@ -99,12 +103,14 @@ export const helpers = EditorModule.helper({
   },
 
   getCompTrees(compId: string) {
+    const  ctrl = this.controls.pageCtrl;
+
     const comps: DesignComp[] = [];
     const getParentComp = (compId: string) => {
       const comp = this.helper.findComp(compId);
       if (comp) {
         comps.unshift(comp);
-        getParentComp(this.store.compPids[comp.id]);
+        getParentComp(ctrl.compPids[comp.id]);
       }
     };
     getParentComp(compId);
@@ -124,9 +130,10 @@ export const helpers = EditorModule.helper({
     return i >= 0;
   },
   isCompCanDelete(compId: string): boolean {
+    const page = this.controls.pageCtrl;
     return (
       this.helper.isStreamCardChild(compId) ||
-      (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1)
+      (this.helper.isStreamCard(compId) && page.streamCardIds.length > 1)
     );
   },
 
@@ -167,8 +174,8 @@ export const helpers = EditorModule.helper({
       return used;
     };
     getUsedIds(["root"]);
-
-    const compScreenMap = this.store.designData.compScreenMap
+    const ctrl = this.controls.pageCtrl;
+    const compScreenMap = ctrl.designData.compScreenMap
     const keys = Object.keys(compScreenMap) 
     keys.forEach(k=>{
         const card = compScreenMap[k];
@@ -199,7 +206,9 @@ export const helpers = EditorModule.helper({
   },
 
   getCardCompBound(compId: string) {
-    const compMap = this.store.designData.compMap;
+
+    const ctrl = this.controls.pageCtrl;
+    const compMap = ctrl.designData.compMap;
     const c = compMap[compId];
     const obj = new CompObject(c);
     const bound = obj.getBox();
@@ -209,12 +218,14 @@ export const helpers = EditorModule.helper({
 
   extendStreamCard(streamCardId: string) {
     if (!streamCardId) return 0;
-
-    const compMap = this.store.designData.compMap;
+    const ctrl = this.controls.pageCtrl;
+    const compMap = ctrl.designData.compMap;
     const card = compMap[streamCardId];
+    const size:any = card.layout.size.slice(0)
     if (this.controls.screenCtrl.isShortPage) {
       const  h = this.controls.screenCtrl.getCurrScreenHeight();
-       card.setH(h);
+      size[1] = h;
+      card.layout.setSize(size);
        return h;
     }
     
@@ -227,12 +238,11 @@ export const helpers = EditorModule.helper({
       maxH = Math.max(maxH, aabb.y + aabb.h);
     }
     maxH = this.helper.pxToDesignSize(maxH);
-
     if (childs.length < 1) {
       maxH = 200;
     }
-    card.setH(maxH);
-    
+    size[1] = maxH;
+    card.layout.setSize(size);    
     return maxH;
   },
 
@@ -277,4 +287,22 @@ export const helpers = EditorModule.helper({
     }
     return clientId;
   },
+
+  loadImage(url ) {
+    return new Promise((res, rej)=>{
+       let t = setTimeout(() => {
+        t = null as any;
+        rej("下载超时")
+       }, 1000 * 10);
+       const img = new Image();
+       img.onload = ()=>{
+          res(img);
+          if (t) clearTimeout(t);
+       }
+       img.onerror = (e)=>{
+         rej("下载失败!")
+       }
+       img.src = url;
+    })
+  }
 });

src/modules/editor/module/index.ts

@@ -5,7 +5,6 @@ import components from "../components";
 import { CompUICtrl } from "../controllers/CompUICtrl";
 import { HistoryCtrl } from "../controllers/HistoryCtrl";
 import { ImagePickController } from "../controllers/ImagePickerController";
-import { TransferCtrl } from "../controllers/TransferCtrl";
 import { createProxy } from "../objects/ProxyStore/create";
 import { editActions } from "./actions/edit";
 import { ImgCompActions } from "./actions/image";
@@ -22,12 +21,14 @@ import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
-import { AnimCtrl } from "../controllers/AnimCtrl";
 import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
 import { ScreenCtrl } from "../controllers/ScreenCtrl";
 import { EditorCtrl } from "../controllers/EditorCtrl";
 import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
 import { CategoryCtrl } from "../controllers/CategoryCtrl";
+import { history } from "../objects/DesignTemp/factory";
+import { PageCtrl } from "../controllers/PageCtrl";
+import { PropsCtrl } from "../controllers/PropsCtrol";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -44,9 +45,7 @@ export class EditorModule extends ModuleRoot {
     manualActions,
   ]);
   https = this.createHttps(https);
-  store = this.createStore(store, {
-    transform: (state) => createProxy(state),
-  });
+  store = this.createStore(store);
   helper = this.createHelper([helpers, editHelpers]);
 
   controls = {
@@ -59,9 +58,7 @@ export class EditorModule extends ModuleRoot {
     wxCtrl: new wxController({
       url: `${Dict_Apis.promotion}/wechat/share?`,
     }),
-    transferCtrl: new TransferCtrl(this),
     dragAddCtrl: new DragAddCtrl(this),
-    streamCardTransferCtrl: new TransferCtrl(this),
     historyCtrl: new HistoryCtrl(this),
     pickCtrl: new ImagePickController(),
     compUICtrl: new CompUICtrl(this),
@@ -69,11 +66,12 @@ export class EditorModule extends ModuleRoot {
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),
     textEditorCtrl: new TextEditorCtrl(this),
-    animCtrl: new AnimCtrl(this),
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
     menuCtrl: new CtxMenuCtrl(this),
     categoryCtrl: new CategoryCtrl(this),
+    pageCtrl: new PageCtrl(this),
+    propsCtrl: new PropsCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();
@@ -84,8 +82,9 @@ export class EditorModule extends ModuleRoot {
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
     this.controls.categoryCtrl.init();
+    this.controls.propsCtrl.initEvents();
   }
-
+  
   jumpIndexHtml(route = "#/") {
     const _params = new URLSearchParams(decodeURIComponent(location.search));
     const host = _params.get("host");
@@ -95,4 +94,15 @@ export class EditorModule extends ModuleRoot {
     // }
     location.href = link;
   }
+  get selected () {
+    return this.controls.selectCtrl.gizmo.selectObjs;
+  }
+  get gizmo() {
+    return this.controls.selectCtrl.gizmo;
+  }
+  get history() {
+    return history;
+  }
+
+
 }

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

@@ -5,20 +5,14 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { EditorMode, ICompKeys } from "../../typings";
 import { eachValuesAndPathsDeep } from "@/utils";
 import { set } from "lodash";
+import { createObj } from "../../objects/DesignTemp/factory";
 
 export const store = EditorModule.store({
   state: () => ({
     textEditingState: false,
     mode: "editPage" as EditorMode,
     isWk: false, //作品集内作品
-    currCompId: "root",
-    currStreamCardId: "",
-    designData: new DesignTemp(),
-
-    groupModeStatus: false,
-    groupIds: [] as string[],
-    compPids: {} as Record<string, string>,
-
+    
     selected: [] as string[], //选中的组件
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
@@ -34,9 +28,13 @@ export const store = EditorModule.store({
     },
   }),
   getters: {
-    rootPage(state) {
-      return state.designData.compMap["root"] as DesignComp;
+    currCompId() {
+      return this.controls.pageCtrl.state.currCompId;
     },
+    currStreamCardId() {
+      return this.controls.pageCtrl.state.currStreamCardId;
+    },
+
     isEditMode(): boolean {
       return !this.store.isPreview && !this.store.isDisplay;
     },
@@ -53,26 +51,23 @@ export const store = EditorModule.store({
       return state.mode === "display";
     },
     compMap(state) {
-      return state.designData.compMap;
+      return this.controls.pageCtrl.compMap;
     },
+
     currComp(state) {
-      return state.designData.compMap[state.currCompId];
+      return this.controls.pageCtrl.currComp;
     },
+
     currStreamCard(state) {
-      return state.designData.compMap[state.currStreamCardId];
-    },
-    pageCompIds(state): string[] {
-      return state.designData.compMap.root?.children.default || [];
-    },
-    streamCardIds(state): string[] {
-      return state.designData.compMap.root?.children.default || [];
+      return this.controls.pageCtrl.currStreamCard;
     },
+    
     previewImageList(state) {
       const res: string[] = [];
-
+      let scope = this;
       function deepChild(item: any) {
         if (typeof item == "string") {
-          const comp = state.designData.compMap[item];
+          const comp = scope.controls.pageCtrl.compMap[item];
           if (comp.compKey === "Image") {
             res.push(comp.value.url);
           } else if (comp.children) {
@@ -90,14 +85,14 @@ export const store = EditorModule.store({
           }
         }
       }
-      deepChild(state.designData.compMap["root"].children);
+      deepChild(this.controls.pageCtrl.compMap["root"].children);
 
       return res;
     },
   },
   actions: {
     setCompData(id: string, data: any) {
-      this.store.designData.compMap[id] = data;
+      this.controls.pageCtrl.compMap[id] = data;
     },
     setMode(v: EditorMode) {
       this.store.mode = v;
@@ -105,111 +100,16 @@ export const store = EditorModule.store({
     setWk(v: boolean) {
       this.store.isWk = v;
     },
-    setGroupMode(status: boolean) {
-      this.store.groupModeStatus = status;
-    },
-    setGroupIds(ids: string[]) {
-      this.store.groupIds = ids;
-    },
+   
     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 compId = await this.controls.compUICtrl.createCompId(compKey);
-      const childIds = [...this.store.pageCompIds];
-
-      index === undefined && (index = childIds.length);
-      childIds.splice(index, 0, compId);
-      this.store.designData.compMap.root.children.default = childIds;
-      return compId;
-    },
-
-    async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
-      const compId = this.controls.compUICtrl.createCompId(compKey);
-      const childIds = [...(container.children.default || [])];
-      childIds.push(compId);
-      container.children.default = childIds;
-      return compId;
+      this.controls.pageCtrl.designData = new DesignTemp(data);
     },
 
-    addUserCard(detail: any) {
-      const { compMap } = this.store.designData;
-      const idMap = new Map<string, string>();
-      const nextCompMap: Record<string, DesignComp> = {};
-      Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
-        ([key, comp]) => {
-          if (key === "root") {
-            idMap.set(key, nanoid());
-            comp.title = detail.title;
-            comp.thumbnail = detail.thumbnail;
-          }
-          const id = idMap.get(key) || nanoid();
-          idMap.set(key, id);
-          comp.id = id;
-          eachValuesAndPathsDeep(
-            comp.children,
-            (v) => typeof v === "string",
-            (v, paths) => {
-              const id = idMap.get(v) || nanoid();
-              idMap.set(v, id);
-              set(comp.children, paths, id);
-            }
-          );
-          nextCompMap[id] = new DesignComp(comp);
-        }
-      );
-      Object.assign(compMap, nextCompMap);
-      return nextCompMap[idMap.get("root") as string];
-    },
-
-    setCurrComp(compId: string) {
-      this.store.currCompId = compId;
-      const comps = this.helper.getCompTrees(compId);
-
-      if (compId == "root") {
-        return;
-      }
-      let cardId = comps[1]?.id || "";
-      if (this.helper.isStreamCard(compId)) {
-        cardId = compId;
-      }
-      this.store.currStreamCardId = cardId;
-    },
-
-    deleteComp(compId: string) {
-      const parentComp = this.helper.findParentComp(compId);
-      let deleteOK = false;
-      if (parentComp) {
-        const ids = [...(parentComp.children.default || [])];
-        // 只能删除children.default中的组件
-        if (ids?.includes(compId)) {
-          const index = ids.findIndex((id) => id === compId);
-          if (index >= 0) {
-            ids.splice(index, 1);
-            parentComp.children.default = ids;
-            deleteOK = true;
-          }
-        }
-      }
-
-      if (deleteOK) {
-        delete this.store.compPids[compId];
-      }
-    },
-    moveComp(selIndex: number, targetIndex: number) {
-      const pageCompIds = [...this.store.pageCompIds];
-      const [selComp] = pageCompIds.splice(selIndex, 1);
-      pageCompIds.splice(targetIndex, 0, selComp);
-      this.store.designData.compMap.root.children.default = pageCompIds;
-    },
     setTextEditingState(state: boolean) {
       this.store.textEditingState = state;
     },
     setDesignThumbnail(url: string) {
-      this.store.designData.thumbnail = url;
+      this.controls.pageCtrl.designData.thumbnail = url;
     },
   },
 });

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

@@ -1,62 +1,82 @@
-import { cloneDeep, isEmpty } from "lodash";
 import { nanoid } from "nanoid";
-import { Background, ICompKeys, Layout } from "../../typings";
-import { mapValuesDeep } from "@/utils";
+import { ICompKeys } from "../../typings";
+import { RxValue } from "../../controllers/ReactCtrl/rxValue";
+import { Events } from "queenjs"
 
-export class DesignComp {
+export type DesignComp = DesignCompObj<any>
+
+export class DesignCompObj<T extends {[key:string]: any}> extends Events {
   // declare pid: string; // pid 作为前端临时数据，不存储到服务器，在初始化时关联
   declare $el: HTMLElement; // $el 映射dom
   id = nanoid();
   title = "";
   thumbnail = "";
   compKey: ICompKeys = "Text";
-  value: any = undefined;
-  layout: Layout = { size: [200, 200] };
-  background: Background = {};
-  children: Record<string, any> & { default?: string[] } = {};
-  anim?:{startMatrix: string, endMatrix:string, transition: boolean}
+  declare value: ReturnType< typeof RxValue.create<T> >
 
-  constructor(data?: Partial<DesignComp>) {
-    if (!data) return;
-    if (data instanceof DesignComp) return data;
-    const fromData = Object.fromEntries(
-      Object.entries(data).filter(
-        ([, value]) => value !== null && value !== undefined
-      )
-    );
-    Object.assign(this, cloneDeep(fromData));
-  }
+  layout = RxValue.create({
+    visible: true,
+    size: [200, 200] as [number, number, { unit?: "px" | "%" }?], // width height wUnit hUnit
+    border: RxValue.create({
+      style: "",
+      width: 0,
+      color: "",
+      radius: 0,
+      radius2: 0,
+     }),
+    transformMatrix: "matrix(1,0,0, 1,0,0)",
+    opacity: 1,
+    locked: false,
+    background: RxValue.create({
+      color: ""
+    }),
+    anim: "",
+  });
+  children = RxValue.create({
+    default:  [] as string[]
+  })
 
-  getChildIds() {
-    return mapValuesDeep(
-      this.children,
-      (v) => typeof v === "string",
-      (v: string) => v
-    );
+  constructor() {
+    super();
+    this.onCreated();
   }
-
-  isPostioned() {
-    return this.layout.position === "absolute";
+  onCreated() {
+    console.log("please override me");
   }
-  isTransformed() {
-    return !isEmpty(this.layout.transform);
+  
+  fromJson(data:any) {
+    this.id = data.id;
+    this.title = data.title;
+    this.thumbnail = data.thumbnail;
+    this.compKey = data.compKey;
+    this.value.fromJson(data.value);
+    this.children.fromJson(data.children || {default: []});
+    this.layout.fromJson(data.layout);
   }
-  isFullWidth() {
-    const w = this.layout.size?.[0];
-    return !w || w === 750;
+
+
+  toJson()  {
+    const out:any= {};
+    out.id = this.id;
+    out.title = this.title;
+    out.thumbnail = this.thumbnail;
+    out.compKey = this.compKey;
+    out.value = this.value.toJson();
+    out.children = this.children.toJson();
+    out.layout = this.layout.toJson();
   }
 
-  translate(x: number, y: number) {
-    this.layout.transform || (this.layout.transform = {});
-    x && (this.layout.transform.x = x);
-    y && (this.layout.transform.y = y);
+  getChildIds() {
+    return this.children.default;
   }
+
   getW() {
-    return this.layout.size?.[0] || 0;
+    return this.layout.size[0] || 0;
   }
   getH() {
-    return this.layout.size?.[1] || 0;
+    return this.layout.size[1] || 0;
   }
+
   getBoundRect() {
     const out = { x: 0, y: 0, w: 0, h: 0 };
     if (!this.$el) return out;

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -67,21 +67,6 @@ export function createCompStyle(
     style.clipPath = compMasks[layout.mask]?.value || layout.mask;
   }
 
-  if (layout.transform) {
-    if (layout.transform.x) {
-      transform.translateX = designToNaturalSize(layout.transform.x);
-    }
-    if (layout.transform.y) {
-      transform.translateY = designToNaturalSize(layout.transform.y);
-    }
-    if (layout.transform.r) {
-      transform.rotate = layout.transform.r + "deg";
-    }
-    if (layout.transform.s) {
-      transform.scale = layout.transform.s;
-    }
-  }
-
   if (layout.size) {
     const [w, h, sizeOpts] = layout.size;
     if (w) {
@@ -94,28 +79,18 @@ export function createCompStyle(
     }
   }
 
-  if (layout.position) {
-    style.position = layout.position;
-  }
-
   if (layout.transformMatrix) {
     const m = Matrix.createFromMatrixStr(layout.transformMatrix);
-    // m.ty = parseFloat(
-    //   designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
-    // );
-    style.transform = m.getMatrixStr(); //layout.transformMatrix;
+    style.transform = m.getMatrixStr(); 
     style.transformOrigin = "0 0";
-  } else {
-    const v = parseTransform(transform);
-    if (v) style.transform = v;
   }
-
+  
   if (layout.background) {
     if (layout.background.color) {
       style.background = formatColor(layout.background.color);
     }
   }
-
+  style.position = "absolute";
   return style;
 }
 

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

@@ -0,0 +1,91 @@
+import { CompArcObj } from "../../components/CompUI/basicUI/Arc";
+import { CompCardObj } from "../../components/CompUI/basicUI/Container";
+import { CompCurveObj } from "../../components/CompUI/basicUI/Curve";
+import { CompEllipseObj } from "../../components/CompUI/basicUI/Ellipse";
+import { CompGroupObj } from "../../components/CompUI/basicUI/Group";
+import { CompImageObj } from "../../components/CompUI/basicUI/Image2";
+import { CompLineObj } from "../../components/CompUI/basicUI/Line";
+import { CompMapObj } from "../../components/CompUI/basicUI/Map";
+import { CompPageObj } from "../../components/CompUI/basicUI/Page";
+import { CompPolygonObj } from "../../components/CompUI/basicUI/Polygon";
+import { CompPolygonNormalObj } from "../../components/CompUI/basicUI/PolygonNormal";
+import { CompRectObj } from "../../components/CompUI/basicUI/Rectage";
+import { CompTextObj } from "../../components/CompUI/basicUI/Text";
+import { CompTriangleObj } from "../../components/CompUI/basicUI/Triangle";
+import { CompVideoObj } from "../../components/CompUI/basicUI/Video";
+import { CompWeb3DObj } from "../../components/CompUI/basicUI/Web3D";
+import { HistoryController } from "../../controllers/ReactCtrl/history";
+import { ICompKeys } from "../../typings";
+import { DesignComp } from "./DesignComp";
+
+
+const history = new HistoryController();
+
+export function createObj( data:any, init = true)  {
+    const compKey = data.compKey as ICompKeys 
+    let obj = {} as DesignComp;
+    switch(compKey) {
+        case "Container":
+            obj = new CompCardObj();
+            break;
+        case "Image": 
+            obj = new CompImageObj();
+            break;
+        case "Text":
+            obj = new CompTextObj();
+            break;
+        case "Group":
+            obj = new CompGroupObj();
+            break;
+        case "Page":
+            obj = new CompPageObj();
+            break;
+        case "Video":
+            obj = new CompVideoObj();
+            break;
+        case "Web3D":
+            obj = new CompWeb3DObj();
+            break;
+        case "Rectage":
+            obj = new CompRectObj();
+            break;
+        case "Line":
+            obj = new CompLineObj();
+            break;
+        case "Arc":
+            obj = new CompArcObj();
+            break;
+        case "Ellipse":
+            obj = new CompEllipseObj();
+            break;  
+        case "Triangle":
+            obj = new CompTriangleObj();
+            break;
+        case "Polygon":
+            obj = new CompPolygonObj();
+            break;
+        case "PolygonNormal":
+            obj = new CompPolygonNormalObj();
+            break;
+        case "Curve":
+            obj = new CompCurveObj();
+            break;
+        case "Map":
+            obj = new CompMapObj()
+            
+            break;
+    }
+    
+    obj.compKey = compKey;
+    obj.value.setHistory( history );
+    obj.layout.setHistory(history);
+    obj.layout.background.setHistory(history);
+    obj.layout.border.setHistory(history);
+    obj.children.setHistory(history);
+
+    if (init) obj.fromJson(data);
+
+    return obj;
+}
+
+export {history};

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

@@ -1,5 +1,6 @@
 import { DesignComp } from "./DesignComp";
-import { dataTransform } from "./versions/1.0.0";
+import { createObj } from "./factory";
+// import { dataTransform } from "./versions/1.0.0";
 import { dataTransform as V101Upgrade } from "./versions/1.0.1";
 
 export type CardState = {
@@ -21,21 +22,10 @@ export class DesignTemp {
 
   constructor(data?: Partial<DesignTemp>) {
     if (!data) return;
-    Object.assign(this, V101Upgrade(dataTransform(data)));
+    Object.assign(this, V101Upgrade(data));
     // 初始化DesignComp
     Object.entries(this.compMap).forEach(([key, value]) => {
-      this.compMap[key] = new DesignComp(value);
-    });
-    // 初始化DesignComp的pid
-    Object.values(this.compMap).forEach((comp) => {
-      if (comp.children.default) {
-        // comp.children.default = Array.from(new Set(comp.children.default));
-      }
-      const childIds = comp.getChildIds();
-      childIds.forEach((cid) => {
-        const childComp = this.compMap[cid];
-        // Object.defineProperty(childComp, "pid", { value: comp.id });
-      });
+      this.compMap[key] = createObj(value);
     });
   }
 }

src/modules/editor/objects/DesignTemp/versions/0.0.1.ts

@@ -19,16 +19,16 @@ export function dataTransform(data: any) {
     }
   });
 
-  if (!compMap.root) {
-    compMap.root = CompUI.Page.createComp({
-      id: "root",
-      compKey: "Page",
-      layout: data.pageStyle,
-      children: {
-        default: data.content,
-      },
-    });
-  }
+  // if (!compMap.root) {
+  //   compMap.root = CompUI.Page.createComp({
+  //     id: "root",
+  //     compKey: "Page",
+  //     layout: data.pageStyle,
+  //     children: {
+  //       default: data.content,
+  //     },
+  //   });
+  // }
 
   return data;
 }

src/modules/editor/objects/DesignTemp/versions/1.0.0.ts

@@ -1,7 +1,6 @@
 import { CompUI } from "@/modules/editor/components/CompUI";
-import { addCacheToMap } from "@/modules/editor/components/CompUI/defines/createCompId";
-import { set } from "lodash";
 import { DesignComp } from "../DesignComp";
+import { createObj } from "../factory";
 
 export function dataTransform(data: any) {
   if (data.version == "1.0.0") {
@@ -10,28 +9,12 @@ export function dataTransform(data: any) {
   data.version = "1.0.0";
 
   if (!data.compMap) {
+    const root = createObj({compKey: "Page"}, false);
+    root.id = "root";
     data.compMap = {
-        root: CompUI.Page.createComp({
-            id: "root",
-            compKey: "Page",
-            layout: data.pageStyle,
-            children: {
-              default: [],
-            },
-          })
-    }
-    const card = CompUI.Page.createComp({
-        compKey: "Container",
-        children: {
-          default: []
-        },
-        layout: {
-            size: [750, 200],
-            background: {
-              color: "#ffffff",
-            },
-        },
-    });
+        root,
+    };
+    const card = createObj({compKey: "Container"}, false);
     data.compMap[card.id] = card;
     data.compMap.root.children.default = [card.id]
     return data
@@ -40,23 +23,23 @@ export function dataTransform(data: any) {
   data.compMap || (data.compMap = {});
   const compMap: Record<string, DesignComp> = data.compMap;
 
-  const childrens = compMap.root.children.default || []
+  //const childrens = compMap.root.children.default || []
 
-  const roots = []
-  for (const item of childrens) {
-    let card = compMap[item]
-    if (card.compKey != "Container" ) {
-        card.layout.position = "absolute";
-        card = CompUI.Page.createComp({
-            compKey: "Container",
-            children: {
-              default: [card.id]
-            },
-        });
-        compMap[card.id] = card;
-    }
-    roots.push( card.id );
-  }
-  compMap.root.children.default = roots;
+  //const roots = []
+  // for (const item of childrens) {
+  //   let card = compMap[item]
+  //   if (card.compKey != "Container" ) {
+  //       // card.layout.position = "absolute";
+  //       card = CompUI.Page.createComp({
+  //           compKey: "Container",
+  //           children: {
+  //             default: [card.id]
+  //           },
+  //       });
+  //       compMap[card.id] = card;
+  //   }
+  //   roots.push( card.id );
+  // }
+  //compMap.root.children.default = roots;
   return data;
 }

src/modules/editor/objects/DesignTemp/versions/1.0.1.ts

@@ -1,9 +1,23 @@
 import { ScreenCtrl } from "@/modules/editor/controllers/ScreenCtrl";
+import { DesignComp } from "../DesignComp";
+import { createObj } from "../factory";
 export function dataTransform(data: any) {
   if (data.version == "1.0.1") {
     return data;
   }
   data.version = "1.0.1";
+  if (!data.compMap) {
+    const root = createObj({compKey: "Page"}, false);
+    root.id = "root";
+    data.compMap = {
+        root,
+    };
+    const card = createObj({compKey: "Container"}, false);
+    data.compMap[card.id] = card;
+    data.compMap.root.children.default = [card.id]
+    return data
+  }
+
   if (!data.compScreenMap) { //默认为手机 long页面
         data.compMap.root.value.pageMode = "long";
         data.compMap.root.value.useFor = "mobile";

src/modules/editor/objects/Toolbars/CompToolbars.ts

@@ -6,9 +6,7 @@ export const CompToolbars: ICompToolbars = {
     // toolbars.position,
     toolbars.layerUp,
     toolbars.layerDown,
-    toolbars.clearTransform,
     // toolbars.fullWidth,
-    toolbars.align,
     toolbars.delete,
     toolbars.imageCropper,
     toolbars.textLink,

src/modules/editor/objects/Toolbars/default.ts

@@ -132,30 +132,18 @@ export const toolbars = createToolbars({
       this.actions.removeComp(comp.id);
     },
   },
-
-  // 对齐
-  align: {
-    component: TipIcons.Align,
-    getVisible: (comp) => !comp.isPostioned() && !comp.isFullWidth(),
-    getValue: (comp) =>
-      ["start", "center", "end"].indexOf(comp.layout.alignSelf || "start"),
-    onClick(comp) {
-      const vals = ["start", "center", "end"];
-      let index = vals.indexOf(comp.layout.alignSelf || "start");
-      this.actions.setCompAlign(comp, vals[++index % 3]);
-    },
-  },
-  // 绝对定位
-  position: {
-    component: TipIcons.Position,
-    getVisible(comp) {
-      return this.helper.isCustomChildComp(comp);
-    },
-    getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
-    onClick(comp) {
-      this.actions.setCompPosition(comp);
-    },
-  },
+  
+  // // 绝对定位
+  // position: {
+  //   component: TipIcons.Position,
+  //   getVisible(comp) {
+  //     return this.helper.isCustomChildComp(comp);
+  //   },
+  //   getValue: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
+  //   onClick(comp) {
+  //     this.actions.setCompPosition(comp);
+  //   },
+  // },
   // 编辑模式
   editor: {
     component: TipIcons.Edit,
@@ -195,22 +183,22 @@ export const toolbars = createToolbars({
     },
   },
 
-  // 全屏尺寸
-  fullWidth: {
-    component: TipIcons.FullWidth,
-    getVisible: (comp) => !!comp && !comp.isTransformed && !comp.isFullWidth,
-    onClick(comp) {
-      this.actions.fullCompWidth(comp);
-    },
-  },
-  // 清除变换
-  clearTransform: {
-    component: TipIcons.ClearTransform,
-    getVisible: (comp) => !!comp && comp.isTransformed(),
-    onClick(comp) {
-      this.actions.clearCompTransform(comp);
-    },
-  },
+  // // 全屏尺寸
+  // fullWidth: {
+  //   component: TipIcons.FullWidth,
+  //   getVisible: (comp) => !!comp && !comp.isTransformed && !comp.isFullWidth,
+  //   onClick(comp) {
+  //     this.actions.fullCompWidth(comp);
+  //   },
+  // },
+  // // 清除变换
+  // clearTransform: {
+  //   component: TipIcons.ClearTransform,
+  //   getVisible: (comp) => !!comp && comp.isTransformed(),
+  //   onClick(comp) {
+  //     this.actions.clearCompTransform(comp);
+  //   },
+  // },
   // 定位图层上移
   layerUp: {
     component: TipIcons.LayerUp,
@@ -281,7 +269,7 @@ export const toolbars = createToolbars({
   imageCropper: {
     component: TipIcons.Cropper,
     getVisible(comp) {
-      return this.store.currComp.compKey == "Image";
+      return  this.store.currComp && this.store.currComp.compKey == "Image";
     },
     onClick(comp) {
       this.controls.cropCtrl.croppImage(this.store.currComp.id);
@@ -291,7 +279,7 @@ export const toolbars = createToolbars({
   textLink: {
     component: TipIcons.TextLink,
     getVisible(comp) {
-      return this.store.currComp.compKey == "Text";
+      return this.store.currComp && this.store.currComp.compKey == "Text";
     },
     onClick(comp) {
       this.controls.textEditorCtrl.setLinkUrl();

src/modules/editor/objects/Toolbars/layout.ts

@@ -5,14 +5,14 @@ import { createToolbars } from "./default";
 export const LayoutToolbars = createToolbars({
     xLeft: {
         component: TipIcons.AlignXLeft,
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id) },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(0, isGroup);
         },
     },
     xCenter: {
         component: TipIcons.AlignXCenter,
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(1, isGroup);
         },
@@ -20,7 +20,7 @@ export const LayoutToolbars = createToolbars({
     xRight: {
         component: TipIcons.AlignXRight,
 
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(2, isGroup);
         },
@@ -28,7 +28,7 @@ export const LayoutToolbars = createToolbars({
     xBetween: {
         component: TipIcons.AlignXBetween,
 
-        getVisible(comp) { return this.store.selected.length > 2 },
+        getVisible(comp) { return this.selected.length > 2 },
         onClick(comp) {
             this.actions.setAlignX(3);
         },
@@ -36,7 +36,7 @@ export const LayoutToolbars = createToolbars({
 
     yBetween: {
         component: TipIcons.AlignYBetween,
-        getVisible(comp) { return this.store.selected.length > 2 },
+        getVisible(comp) { return this.selected.length > 2 },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(3, isGroup);
         },
@@ -45,7 +45,7 @@ export const LayoutToolbars = createToolbars({
     YTop: {
         component: TipIcons.AlignYTop,
 
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(0, isGroup);
         },
@@ -53,14 +53,14 @@ export const LayoutToolbars = createToolbars({
     YCenter: {
         component: TipIcons.AlignYCenter,
 
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(1, isGroup);
         },
     },
     YBottom: {
         component: TipIcons.AlignYBottom,
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(2, isGroup);
         },
@@ -68,21 +68,21 @@ export const LayoutToolbars = createToolbars({
 
     Copy: {
         component: TipIcons.Copy,
-        getVisible(comp) { return !!this.store.lastSelected },
+        getVisible(comp) { return !!this.gizmo.state.lastId },
         onClick(comp) {
             this.actions.copyLastSelected();
         },
     },
     SameWidth: {
         component: TipIcons.SameWidth,
-        getVisible(comp) { return this.store.selected.length > 0 },
+        getVisible(comp) { return this.selected.length > 0 },
         onClick(comp) {
             this.actions.setSameSize(true);
         },
     },
     SameHeight: {
         component: TipIcons.SameHeight,
-        getVisible(comp) { return this.store.selected.length > 1 && !!this.store.lastSelected },
+        getVisible(comp) { return this.selected.length > 1 && !!this.gizmo.state.lastId },
         onClick(comp) {
             this.actions.setSameSize(false);
         },

src/modules/editor/objects/Toolbars/topToolbars.ts

@@ -10,7 +10,6 @@ export const TopToolbarsLeft: ToolbarItem[] = [
     // LayoutToolbars.Copy,
     toolbars.layerUp,
     toolbars.layerDown,
-    toolbars.align,
    
     toolbars.imageCropper,
     toolbars.createGroup,

src/pages/h5/share/Promotion.tsx

@@ -23,7 +23,7 @@ export default defineComponent(() => {
     editor.controls.wxCtrl.setup(window.location.href);
 
     editor.actions.on("initDesign:success", () => {
-      const data = editor.store.designData;
+      const data = editor.controls.pageCtrl.designData;
       document.title = data.title;
       const shareData = {
         title: data.title,