添加基础组件

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

@@ -2,85 +2,41 @@ 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 { ImageValue } from "@/modules/editor/objects/Elements/image";
+import { useCompData } from "../../defines/createCompHooks";
 
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
-    editlayer: bool().def(true),
   },
   setup(props) {
-    const comp = useCompData(props.compId);
-
-    const { actions, helper, store, controls } = useEditor();
-
-    function setImageSize(url: string) {
-      if (!helper.isStreamCardChild(props.compId)) return;
-      const temImg = new Image();
-      temImg.src = url;
-
-      temImg.onload = function () {
-        const ratio = temImg.width / temImg.height;
-        const W = temImg.width > comp.getW() ? comp.getW() : temImg.width;
-        comp.setW(W);
-        comp.setH(W / ratio);
-        actions.onCompLayoutUpdated(comp);
-        helper.extendStreamCard(store.currStreamCardId);
-      };
-    }
+    const comp = useCompData<ImageValue>(props.compId);
+    const { actions, store, controls } = useEditor();
 
     async function changeVal() {
       try {
         const url = await controls.pickCtrl.pickOneImage();
         if (!url) return;
-
         comp.value.url = url;
-        comp.value.x = 0;
-        comp.value.y = 0;
-        comp.value.s = 1;
-        comp.value.matrix = "";
       } catch (error) {
         console.log(error);
       }
     }
 
-    watch(
-      () => comp.value.url,
-      (value, oldValue) => {
-        if (oldValue !== Dict_Imgs.Default) return;
-        setImageSize(value);
-      }
-    );
-
     return () => {
+
       const value = comp.value;
-      const scale = value?.s || 1;
-      const ox = value?.x || 0;
-      const oy = value?.y || 0;
-      const objectFit =
-        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
-          ? "cover"
-          : "contain";
       const isCropping = controls.cropCtrl.state.compId == props.compId;
-
-      const offsetUnit = value.offsetUnit || "%";
-
+      const sizes = comp.state.refSize();
       const styleObj = {
-        transform: `scale(${scale}) translate(${ox}${offsetUnit},${oy}${offsetUnit})`,
-        objectFit,
-        transformOrigin: "center",
-        width: "100%",
-        height: "100%"
-      }
-
-      if (value.matrix) {
-        styleObj.transform = value.matrix;
-        styleObj.transformOrigin = "0 0";
-        styleObj.width = value.w + "px";
-        styleObj.height = value.h + "px";
+          transform: comp.getChildAt(0).localTransform.getMatrixStr(),
+          transformOrigin: "0 0 ",
+          width: sizes[0] + "px",
+          height: sizes[1] + "px",
+          position: "absolute"
       }
 
       return (
@@ -94,7 +50,6 @@ export const Component = defineComponent({
               actions.previewImage(value.url, store.previewImageList);
             }
           }}
-          editlayer={props.editlayer}
         >
           <div class={["w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden", isCropping && cropingBorder]} >
             <img

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

@@ -1,6 +1,4 @@
-import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createCompHooks } from "../../defines/createCompHooks";
 
 export { Component } from "./component";
 
@@ -9,20 +7,6 @@ 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],
-  },
-});
 
 export const Form = createAttrsForm([
   // {

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

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

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

@@ -0,0 +1,5 @@
+
+
+export default useCompData<T>(compId:string) {
+    
+} 

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

@@ -4,7 +4,6 @@ import Header from "./Header";
 import SliderLeft from "./Slider/SliderLeft";
 import SliderRight from "./Slider/SliderRight";
 import Toolbar from "./Toolbar";
-import { BaseObject } from "../../objects/Elements/base";
 
 export default defineUI({
   slots: {
@@ -18,16 +17,6 @@ export default defineUI({
   setup(props, { slots }) {
     return () => (
       <div class="flex flex-col h-1/1">
-        <div>
-            height: 
-           {
-            BaseObject.refHeight().value
-           }
-            width: 
-           {
-            BaseObject.refWidth().value
-           }
-        </div>
         <slots.Header class="p-16px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="w-300px bg-component border-right !border-2px" />

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

@@ -0,0 +1,16 @@
+import { Exception, ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+
+import { CompBase } from "../../objects/Elements/base";
+
+
+export class CompCtrl extends ModuleControl<EditorModule> {
+  objsMap = new Map<string, CompBase<any>>();
+  init() {
+    this.objsMap.clear();
+  }
+  getObj<T extends {[key:string]: any}>(id:string) {
+    return this.objsMap.get(id) as CompBase<T>;
+  }
+}
+

src/modules/editor/module/index.ts

@@ -22,7 +22,8 @@ import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
-import { BaseObject, History } from "../objects/Elements/base";
+import { CompCtrl } from "../controllers/CompCtrl";
+
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -63,37 +64,13 @@ export class EditorModule extends ModuleRoot {
     selectCtrl: new SelectCtrl(this),
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),
+    compCtrl: new CompCtrl(this),
   };
+  
   compObjsMap = new Map<string, CompObject>();
 
   onReady() {
     this.actions.init();
-
-    console.log("---------");
-
-    console.log( BaseObject.refWidth().value )
-
-    console.log( BaseObject.Width )
-
-    History.submit();
-
-    BaseObject.Width = 100;
-    BaseObject.setWidth(200);
-    BaseObject.setHeight(300);
-    History.submit();
-
-    console.log( BaseObject.refHeight().value )
-
-    BaseObject.setWidth(300);
-    History.submit();
-
-    setTimeout(() => {
-        console.log("----222---");
-        BaseObject.setWidth(500);
-        console.log( BaseObject.refWidth().value )
-        console.log( BaseObject.Width )
-        BaseObject.setHeight(700);
-    }, 5000);
   }
 
   jumpIndexHtml(route = "#/") {

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

@@ -1,27 +1,71 @@
+import { Filter } from "queenjs/typing";
 import { HistoryController } from "./history";
-import {BehaviorSubject, Subject, concatAll} from "rxjs";
+import {BehaviorSubject} from "rxjs";
 import { ref } from  "vue";
 
-type RxValueType<T> = {
+export class ValueSnap {
+    Id:string;
+    Value: any;
+    OldValue: any;
+
+    Rx: BehaviorSubject<any>;
+    constructor(id:string, value:any, oldValue:any, rx: BehaviorSubject<any>) {
+        this.Id = id;
+        this.Value = value;
+        this.OldValue = oldValue;
+        this.Rx = rx
+    }
+    redo() {
+        this.Rx.next({value: this.Value, _hstry:false});
+    }
+    undo() {
+        this.Rx.next({value: this.OldValue, _hstry:false});
+    }
+
+    clone() {
+        return new ValueSnap(this.Id, this.Value,this.OldValue, this.Rx);
+    }
+}
+
+export type RxValueType<T> = {
     value: T,
     _hstry?: boolean
 }
+
+
 function createRxValue<T>(value: T, histry:boolean) {
     return new BehaviorSubject< RxValueType<T> >({value:value,  _hstry: histry})
 }
 
-class RxValue {
+let _valueIndex = 0;
+export function createValueSnap(value:any, oldValue:any, rx:BehaviorSubject<any>) {
+  let i = _valueIndex + 1;
+  _valueIndex +=1;
+  return new ValueSnap(i+"", value, oldValue, rx);
+}
 
-   static create<T extends {[key:string]: any}>(fields:T, histroy?: HistoryController ) {
+class RxValue {
+   static create<T extends {[key:string]: any}>(_fields:T, histroy?: HistoryController ) {
         let obj = {} as any;
         let refs = {} as any;
 
-        const names = Object.keys(fields);
+        obj._historySnap = {} as any;
+        obj._historySub = {} as any;
+        obj._rxs = {} as any;
+        obj._fields = _fields;
+        obj._history = histroy;
+
+        const names = Object.keys(_fields);
         
         names.forEach(name=>{
                const currName = name;
-               const initValue = fields[currName]
+               const initValue = _fields[currName]
                 const f = createRxValue(initValue, !!histroy);
+                obj._rxs[name] = f;
+
+                const snap = createValueSnap(initValue, initValue, f);
+                obj._historySnap[name] = snap;
+
                 Object.defineProperty(obj, currName, {
                     get: function(){
                         return f.getValue().value;
@@ -31,12 +75,13 @@ class RxValue {
                     }
                 })
 
+
                 obj["set"+currName] = function(value:T, nohistory = false){
                     f.next({value, _hstry: !nohistory});
                 }
-
-                obj["on"+currName + "Changed"] = function(subscribe: (value:T)=>void){
-                    return f.subscribe((v)=>subscribe(v.value))
+        
+                obj["on"+currName + "Changed"] = function(subscribe: (value:T, oldValue:T)=>void){
+                    return f.subscribe((v)=>subscribe(v.value, snap.OldValue))
                 }
 
                 obj["ref"+currName] = function(){
@@ -47,31 +92,52 @@ class RxValue {
                             refs[currName].value = v.value;
                         })
                     }
-                    return refs[currName];
+                    return refs[currName].value;
                 }
 
-                //历史回退
-                if (histroy) {
-                    const snap = histroy.createValueSnap(initValue, initValue, f);
-                    f.subscribe((v)=>{
-                        if (!v._hstry) return;
+                obj._historySub[name] = f.subscribe((v)=>{
+                    if (!v._hstry) return;
+                    snap.OldValue = v.value;
+                    if (obj._history) {
                         const s = snap.clone();
                         s.Value = v.value;
-                        snap.OldValue = s.Value;
-
-                        histroy.record(s);
-                    })
-                }
+                        obj._history.record(s);
+                    }
+                })
         });
 
 
-        return obj as typeof fields & {
-            [K in keyof typeof fields as `set${Capitalize<string & K>}`]: (value: typeof fields[K], nohistory?:boolean) => void;
+        obj["setHistory"] = function(h: HistoryController){
+            obj._history = h;
+        }
+        obj["toJson"] = function() {
+            const out:any = {};
+            const names = Object.keys(_fields);
+            names.forEach(name=>{
+                out[name] = obj._rxs[name].getValue().value;
+            })
+            return out;
+        }
+        obj["fromJson"] = function(json:any) {
+            const out:any = {};
+            const names = Object.keys(_fields);
+            names.forEach(name=>{
+                obj._rxs[name].next({value: json[name], _hstry: false})
+            })
+            return out;
+        }
+        
+        return obj as typeof _fields & {
+            [K in keyof typeof _fields as `set${Capitalize<string & K>}`]: (value: typeof _fields[K], nohistory?:boolean) => void;
+        } & {
+            [K in keyof typeof _fields as `on${Capitalize<string & K>}Changed`]: (subscribe: (value: typeof _fields[K], oldValue:typeof _fields[K])=>void) => void;
         } & {
-            [K in keyof typeof fields as `on${Capitalize<string & K>}Changed`]: (subscribe: (value: typeof fields[K])=>void) => void;
+            [K in keyof typeof _fields as `ref${Capitalize<string & K>}`]: () => typeof _fields[K];
         } & {
-            [K in keyof typeof fields as `ref${Capitalize<string & K>}`]: () => ReturnType< typeof ref<typeof fields[K]> >;
-        };
+            setHistory: (history: HistoryController)=>void
+            toJson:()=>typeof _fields
+            fromJson:(json:typeof _fields)=>void
+        }
     }
 }
 

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

@@ -1,14 +1,87 @@
+import { Container } from "../../controllers/SelectCtrl/objects/container";
+import { RxValue } from "./RxValue";
+import { nanoid } from "nanoid";
+import { ICompKeys } from "../../typings";
 
+class CompBase<T extends {[key:string]: any}> extends Container {
+    id = nanoid();
+    title = "";
+    thumbnail = "";
+    compKey: ICompKeys = "Container";
+    value: ReturnType< typeof RxValue.create<T> >;
 
+    state = RxValue.create({
+        size: [750, 400],
+        position: [0,0],
+        pivots: [0,0],
+        scale: [1,1],
+        rotation: 0,
+        visible: true,
+        opacity: 1,
+        clipPath: "",
+        bgColor: "",
+        radius: "", 
+        children: []
+    });
 
+    constructor(value:T) {
+        super();
+        this.value = RxValue.create(value);
+    }
 
-BaseObject.onWidthChanged((width:number)=>{
-    console.log("width changeinged", BaseObject.Width, BaseObject.Height);
-})
+    fromJson(json:any) {
+        this.id = json.id;
+        this.compKey = json.compKey;
+        this.thumbnail = json.thumbnail;
+        this.title = json.title;
+        this.value.fromJson(json.value);
+        this.state.fromJson(json.state);
+    }
+    
+    toJson() {
+        const out = {
+            id: this.id, 
+            title: this.title, 
+            thumbnail: this.thumbnail,
+            compKey: this.compKey,
+            value: this.value.toJson(),
+            state: this.state.toJson(),
+        }
+        return out;
+    }
 
-BaseObject.onHeightChanged((width:number)=>{
-    console.log("Height changeinged", BaseObject.Width, BaseObject.Height);
-})
+    //初始化
+    init() {
+        this.state.onChildrenChanged(()=>{
+            this._updateChildObjs();
+        })
+        this.state.onSizeChanged((size)=>{
+            this.width = size[0];
+            this.height = size[1];
+        })
+        this.state.onPositionChanged((pos)=>{
+            this.position.x = pos[0]
+            this.position.y = pos[1]
+        })
 
+        this.state.onScaleChanged((scales)=>{
+            this.scale.x = scales[0]
+            this.scale.y = scales[1]
+        })
 
-export {BaseObject, History}
+        this.state.onRotationChanged((r)=>{
+            this.rotation = r;
+        })
+    }
+
+    _updateChildObjs() {
+        const childrens = this.state.children as CompBase<any>[];
+        this.removeChildren(0, this.children.length);
+        childrens.forEach(c=>{
+            this.addChild(c)
+        })
+        this.updateTransform();
+    }
+}
+
+export {CompBase};

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

@@ -7,12 +7,6 @@ const History = new HistoryController();
 function createComponent(key: string,  h?: HistoryController) {
     if (!h ) h = History;
 
-    const BaseObject = RxValue.create({
-            Width: 750,
-            Height: 400,
-            Left: 0,
-            
-    }, h)
-
+    
 
 }

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

@@ -1,39 +1,8 @@
 import { BehaviorSubject } from "rxjs";
 import {reactive,  computed} from "vue"
-
-export class ValueSnap {
-    Id:string;
-    Value: any;
-    OldValue: any;
-
-    Rx: BehaviorSubject<any>;
-    constructor(id:string, value:any, oldValue:any, rx: BehaviorSubject<any>) {
-        this.Id = id;
-        this.Value = value;
-        this.OldValue = oldValue;
-        this.Rx = rx
-    }
-    redo() {
-        this.Rx.next({value: this.Value, _hstry:false});
-    }
-    undo() {
-        this.Rx.next({value: this.OldValue, _hstry:false});
-    }
-
-    clone() {
-        return new ValueSnap(this.Id, this.Value,this.OldValue, this.Rx);
-    }
-}
+import { ValueSnap } from "./RxValue";
 
 export class HistoryController {
-
-  _valueIndex = 0;
-  createValueSnap(value:any, oldValue:any, rx:BehaviorSubject<any>) {
-    let i = this._valueIndex + 1;
-    this._valueIndex +=1;
-    return new ValueSnap(i+"", value, oldValue, rx);
-  }
-
   state = reactive({
         currLen: 0, //操作栈的长度
         maxLen: 100, //操作栈总长度

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

@@ -0,0 +1,38 @@
+import { effect } from "vue";
+import { CompBase } from "./base"
+import { HistoryController } from "./history";
+
+export type ImageValue = {
+    url: string;
+    showLink: boolean;
+    link: string;
+}
+
+export class CompImage extends CompBase<ImageValue> {
+    override init(): void {
+        super.init();
+
+        this.value.onUrlChanged((value, old)=>{
+            console.log("iamge url change=>", value, old)
+            if (value != old) {//重新把对象放置在容器中间
+
+            }
+        })
+    }
+}
+
+
+export async function createImageComp(url:string) {
+    return new Promise((r)=>{
+        const obj = new CompImage({url: url, showLink: false, link: ""})
+        const temImg = new Image();
+        temImg.src = url;
+        temImg.onload = function () {
+          const ratio = temImg.width / temImg.height;
+          const W = temImg.width > 750 ? 750 : temImg.width;
+          const h  = W / ratio;
+          obj.state.size = [W, h];
+          r(obj);
+        };
+    })
+}

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

@@ -0,0 +1,30 @@
+import { CompBase } from "./base";
+
+export type PageValue = {
+
+}
+
+export type CardValue = {
+
+}
+
+
+export class CompCard extends CompBase<CardValue>  {
+
+}
+
+
+export class CompPage extends CompBase<PageValue> {
+
+    addCard(index: number,  comp:CompCard) {
+
+    }
+
+    removeCard(index:number) {
+
+    }
+
+    switchCard(fromIndex:number, toIndex:number) {
+
+    }
+}