init rxvalue

package.json

@@ -67,6 +67,7 @@
     "queen3d": "^0.0.80",
     "queenjs": "^1.0.0-beta.77",
     "rimraf": "^3.0.2",
+    "rxjs": "^7.8.1",
     "scp2": "^0.5.0",
     "swiper": "^8.4.4",
     "three": "^0.146.0",

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

@@ -4,6 +4,7 @@ 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: {
@@ -17,6 +18,16 @@ 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/module/index.ts

@@ -22,6 +22,7 @@ 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";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -67,6 +68,32 @@ export class EditorModule extends ModuleRoot {
 
   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

@@ -0,0 +1,78 @@
+import { HistoryController } from "./history";
+import {BehaviorSubject, Subject, concatAll} from "rxjs";
+import { ref } from  "vue";
+
+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 {
+
+   static create<T extends {[key:string]: any}>(fields:T, histroy?: HistoryController ) {
+        let obj = {} as any;
+        let refs = {} as any;
+
+        const names = Object.keys(fields);
+        
+        names.forEach(name=>{
+               const currName = name;
+               const initValue = fields[currName]
+                const f = createRxValue(initValue, !!histroy);
+                Object.defineProperty(obj, currName, {
+                    get: function(){
+                        return f.getValue().value;
+                    },
+                    set: function(v) {
+                        f.next({value: v});
+                    }
+                })
+
+                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["ref"+currName] = function(){
+                    const initV = f.getValue().value;
+                    if (!refs[currName]) {
+                        refs[currName] = ref(initV);
+                        f.subscribe((v)=>{
+                            refs[currName].value = v.value;
+                        })
+                    }
+                    return refs[currName];
+                }
+
+                //历史回退
+                if (histroy) {
+                    const snap = histroy.createValueSnap(initValue, initValue, f);
+                    f.subscribe((v)=>{
+                        if (!v._hstry) return;
+                        const s = snap.clone();
+                        s.Value = v.value;
+                        snap.OldValue = s.Value;
+
+                        histroy.record(s);
+                    })
+                }
+        });
+
+
+        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])=>void) => void;
+        } & {
+            [K in keyof typeof fields as `ref${Capitalize<string & K>}`]: () => ReturnType< typeof ref<typeof fields[K]> >;
+        };
+    }
+}
+
+export {RxValue};

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

@@ -0,0 +1,14 @@
+
+
+
+
+BaseObject.onWidthChanged((width:number)=>{
+    console.log("width changeinged", BaseObject.Width, BaseObject.Height);
+})
+
+BaseObject.onHeightChanged((width:number)=>{
+    console.log("Height changeinged", BaseObject.Width, BaseObject.Height);
+})
+
+
+export {BaseObject, History}

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

@@ -0,0 +1,18 @@
+import { RxValue } from "./RxValue";
+import { HistoryController } from "./history";
+
+
+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

@@ -0,0 +1,108 @@
+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);
+    }
+}
+
+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, //操作栈总长度
+        opIndex: -1, //操作栈的指针
+  });
+
+  refCanUndo = computed(() => {
+    return this.state.opIndex >= 0;
+  });
+  refCanRedo = computed(() => {
+    return this.state.opIndex < this.state.currLen - 1;
+  });
+
+  queues: Map<string, ValueSnap>[] = [];
+  cacheSnapValues = new Map<string , ValueSnap>();
+
+  // 添加缓存记录
+  record(snap: ValueSnap) {
+    const first = this.cacheSnapValues.get(snap.Id)
+    if (first) {
+        snap.OldValue = first.OldValue;
+    }
+    this.cacheSnapValues.set(snap.Id, snap);
+  }
+
+  // 保存缓存记录到历史栈中
+  submit() {
+    if (this.cacheSnapValues.size < 1) return;
+
+    const state = this.state;
+    const queue = this.queues;
+
+    // 将缓存操作记录保存到当前指针的下一栈中
+    queue[++state.opIndex] = this.cacheSnapValues;
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+
+    // 设置栈的长度为指针的长度，舍弃后面的记录
+    queue.length = state.opIndex + 1;
+    // 若栈长度超过上限, 舍弃之前的记录
+    if (queue.length > state.maxLen) {
+      queue.splice(0, queue.length - state.maxLen);
+      state.opIndex = state.maxLen - 1;
+    }
+    // 更新当前长度状态
+    state.currLen = queue.length;
+  }
+
+  undo() {
+    if (!this.refCanUndo.value) return;
+
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const snaps = this.queues[this.state.opIndex--]
+
+    snaps.forEach((vn)=>vn.undo())
+  }
+
+  redo() {
+    if (!this.refCanRedo.value ) return;
+    
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const snaps = this.queues[++this.state.opIndex];
+    snaps.forEach(vn=>vn.redo());
+  }
+
+  //清除操作
+  clear() {
+    this.queues = [];
+    this.state.currLen = 0;
+    this.state.opIndex = -1;
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+  }
+}

yarn.lock

@@ -7565,6 +7565,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "http://124.70.149.18:4873/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"