device ctrl

src/comm/controllers/DeviceController.ts

@@ -0,0 +1,458 @@
+import { Events } from "queenjs";
+import { NormMsg, decodeNormMsg, encodeNormMsg } from "./entity/message";
+import { Controller } from "../core/controller";
+import { array } from "vue-types";
+
+type UploadItem = {
+  id: string;
+  fpath: string;
+  dir: string;
+  name?: string;
+  url?: string;
+  size?: number;
+};
+
+export type FileInfo = {
+  Fpath: string;
+  Size: number;
+  CreateAt: number; //info.ModTime().Unix()
+};
+
+export class DeviceController extends Controller {
+  ipc: any;
+  constructor() {
+    super();
+
+    //@ts-ignore
+    if (window.ipc) {
+      //@ts-ignore
+      this.ipc = window.ipc;
+    } else {
+      this.ipc = {
+        emit(name: string, ...args: any[]) {
+          console.error("emit msg=>", name, args);
+        },
+        on(name: string) {
+          console.error("on message", name);
+        },
+      };
+    }
+    this.initEvent();
+  }
+  _conn?: WebSocket;
+
+  initEvent() {
+    let scope = this;
+    this.ipc.on("OnDragEnter", function (files: string[]) {
+      scope.emit("onDragEnter", files);
+    });
+
+    this.ipc.emit("GetSocketUri", [], (uri: any) => {
+      let conn = new WebSocket(uri);
+      conn.onopen = (e) => {
+        console.log("bus socket connected!!!");
+      };
+      conn.onclose = (evt) => {
+        console.log("app bus socket conn closed", evt);
+
+        setTimeout(() => {
+          this._conn = new WebSocket(uri);
+        }, 1000);
+      };
+      conn.onmessage = function (evt) {
+        if (!evt.data || evt.data == "") return;
+
+        try {
+          const blob = evt.data as Blob;
+          blob.arrayBuffer().then((buff) => {
+            const msg = decodeNormMsg(new Uint8Array(buff));
+            console.log("vvvv=>", msg);
+            scope.emit("on" + msg.sub, msg);
+          });
+        } catch (error) {
+          console.error(evt.data, typeof evt.data, error);
+        }
+      };
+      this._conn = conn;
+    });
+  }
+
+  //选择磁盘文件夹
+  SelectDir(): Promise<string> {
+    const sid = Date.now();
+    const cbname = "c" + sid;
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("SelectDir", [sid], function (ok: boolean) {
+        console.log("call=>", ok);
+        if (!ok) {
+          r("");
+        }
+        ipc.on(cbname, function (dir: string) {
+          r(dir);
+        });
+      });
+    });
+  }
+  IsDirEmpty(dir: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("IsDirEmpty", [dir], function (ok: boolean) {
+        r(ok);
+      });
+    });
+  }
+  IsFileExit(fpath: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("IsFileExit", [fpath], function (ok: boolean) {
+        r(ok);
+      });
+    });
+  }
+
+  WriteFileText(dir: string, content: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("WriteFileText", [dir, content], function (ok: boolean) {
+        r(ok);
+      });
+    });
+  }
+
+  ReadFileText(dir: string): Promise<{ error: string; text: string }> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("ReadFileText", [dir], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  //拷贝文件
+  CopyFile(srcFile: string, targetFile: string): Promise<boolean> {
+    const sid = Date.now();
+    const cbname = "copy" + sid;
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.on(cbname, function (ok: any) {
+        r(ok);
+      });
+      ipc.emit("CopyFile", [cbname, srcFile, targetFile]);
+    });
+  }
+
+  //保存应用级的配置
+  SaveSysConfigItem(key: string, value: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("SaveAppConfigItem", [key, value], function (data: any) {
+        r(data);
+      });
+    });
+  }
+  GetSysConfigItem(key: string): Promise<{ error: string; text: string }> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetAppConfigItem", [key], function (data: any) {
+        r(data);
+      });
+    });
+  }
+  RemoveSysConfigItem(key: string): Promise<{ error: string; text: string }> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("RemoveSysConfigItem", [key], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  //获取应用的baseUrl
+  GetSysDataBaseUrl() {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetAppDataBaseUrl", [], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  //获取应用的baseUrl
+  CopyFileToAppData(src: string, targetRelativePath: string): Promise<string> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit(
+        "CopyFileToAppData",
+        [src, targetRelativePath],
+        function (data: any) {
+          r(data);
+        }
+      );
+    });
+  }
+
+  RemoveAppData(targetRelativePath: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("RemoveAppData", [targetRelativePath], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  //打开文件所在的目录
+  OpenDir(dir: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("OpenDir", [dir], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  SelectOneFilePath(title: string, filters: string): Promise<string> {
+    const sid = Date.now();
+
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      const cbname = "c" + sid;
+      ipc.emit("SelectOneFilePath", [sid, title, filters], function (ok: any) {
+        if (!ok) {
+          r("");
+        }
+        ipc.on(cbname, function (dir: string) {
+          r(dir);
+        });
+      });
+    });
+  }
+
+  //开启projects 的httpserver
+  StartHttpServer(prjFile: string): Promise<string> {
+    const sid = Date.now();
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("StartProjectHttpServer", [prjFile], function (data: any) {
+        r(data);
+      });
+    });
+  }
+
+  //下在线文件 默认超时时间20分钟
+  DownloadFile(
+    url: string,
+    fpath: string,
+    timeoutSecend: number = 60 * 20,
+    cb?: (event: "start" | "progress" | "error" | "succ", p1: NormMsg) => void
+  ): Promise<boolean> {
+    const sid = "d" + Date.now();
+    return new Promise((r) => {
+      const cancel = this.OnMsg(sid, (data) => {
+        cb && cb(data.type as any, data);
+        if (data.type == "succ") {
+          r(true);
+          cancel.unbind();
+          return;
+        }
+        if (data.type == "error") {
+          r(false);
+          cancel.unbind();
+        }
+      });
+
+      const ipc = this.ipc;
+      ipc.emit(
+        "DownloadFile",
+        [sid, fpath, url, timeoutSecend],
+        function (err: string) {
+          console.log("DownloadFile callback");
+          if (err) {
+            console.error(err);
+            r(false);
+          }
+        }
+      );
+    });
+  }
+
+  //获取文件夹的大小
+  //文件目录不要太大，不然会卡死程序
+  GetDirSize(dir: string): Promise<number> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetDirSize", [dir], function (size: number) {
+        r(size);
+      });
+    });
+  }
+
+  //获取系统数据目录
+  GetAppDataDir(): Promise<string> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetAppDataDir", [], function (dir: string) {
+        r(dir);
+      });
+    });
+  }
+
+  OpenAssetWindow(projectPath: string) {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit(
+        "openAssetsWindow",
+        [
+          `${location.host}/library.html?path=${projectPath}`,
+          "资源管理库",
+          800,
+          600,
+        ],
+        function (ok: any) {
+          r(ok);
+        }
+      );
+    });
+  }
+
+  SendMsg(subject: string, msg: string) {
+    const conn = this._conn;
+    if (!conn) {
+      console.error("应用socket异常");
+      return;
+    }
+    conn.send(encodeNormMsg({ sub: subject, msg: msg }));
+  }
+
+  OnMsg(subject: string, cb: (msg: NormMsg) => any) {
+    return this.on("on" + subject, cb);
+  }
+
+  //同步阻塞当前进程
+  UploadSync(files: UploadItem[]): Promise<UploadItem[]> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("UploadSync", [files], function (ret: any) {
+        r(ret);
+      });
+    });
+  }
+
+  //异步上传不会阻塞当前进程
+  UploadASync(files: UploadItem[]): Promise<UploadItem[]> {
+    const sid = "u" + Date.now();
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("UploadASync", [sid, files], function (ok: any) {
+        if (!ok) {
+          r([]);
+          return;
+        }
+        ipc.on(sid, (items: any) => {
+          r(items);
+        });
+      });
+    });
+  }
+
+  //异步上传不会阻塞当前进程
+  UploadDir(dir: string, targetDir: string): Promise<UploadItem[]> {
+    const sid = "u" + Date.now();
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("UploadDir", [sid, dir, targetDir], function (ok: any) {
+        if (!ok) {
+          r([]);
+          return;
+        }
+        ipc.on(sid, (items: any) => {
+          r(items);
+        });
+      });
+    });
+  }
+
+  GetFilesInDir(dir: string, filter: string): Promise<FileInfo[]> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetFilesInDir", [dir, filter], function (ret: any) {
+        r(ret);
+      });
+    });
+  }
+
+  RemoveFile(fpath: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("RemoveFile", [fpath], function (ok: any) {
+        r(ok);
+      });
+    });
+  }
+
+  GetSaveFile(title: string, filter = "图片(*.png;*.jpg)"): Promise<string> {
+    const sid = "sf" + Date.now();
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetSaveFile", [sid, title, filter], function (ok: any) {
+        if (ok) {
+          ipc.on(sid, (ret: any) => {
+            r(ret);
+          });
+          return;
+        }
+        r("");
+      });
+    });
+  }
+
+  OpenOneFile(title: string, filter = "图片(*.png;*.jpg)"): Promise<string> {
+    const sid = "sf" + Date.now();
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("OpenOneFile", [sid, title, filter], function (file: any) {
+        setTimeout(() => {
+          r(file);
+        }, 0);
+      });
+    });
+  }
+
+  GetImageMeta(
+    fpath: string
+  ): Promise<{ Width: number; Height: number; Size: number }> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("GetImageMeta", [fpath], function (meta: any) {
+        r(meta);
+      });
+    });
+  }
+
+  SetMainTitle(title: string): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("SetMainTitle", [title], function (ok: any) {
+        r(ok);
+      });
+    });
+  }
+
+  SaveFile(fpath: string, buff: any): Promise<string> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("SaveFile", [fpath, Array.from(buff)], function (err: any) {
+        r(err);
+      });
+    });
+  }
+
+  OpenQueen5(url: string, title: any): Promise<boolean> {
+    return new Promise((r) => {
+      const ipc = this.ipc;
+      ipc.emit("OpenQueen5", [url, title], function (err: any) {
+        r(err);
+      });
+    });
+  }
+}

src/comm/controllers/HistoryController.ts

@@ -0,0 +1,98 @@
+import {reactive,  computed} from "vue"
+import { ValueSnap } from "./rxValue";
+
+export class HistoryController {
+  enable = false;
+  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>();
+
+  changeCbs:((flag:number)=>void)[]  = [];
+
+  // 添加缓存记录
+  record(snap: ValueSnap) {
+    if ( !this.enable ) return;
+
+    const first = this.cacheSnapValues.get(snap.Id)
+    if (first) {
+        snap.OldValue = first.OldValue;
+    }
+    this.cacheSnapValues.set(snap.Id, snap);
+  }
+
+  // 保存缓存记录到历史栈中
+  submit(change:(flag:number)=>void=(flag)=>{console.log("default history changed ", flag)}) {
+    if (this.cacheSnapValues.size < 1  || !this.enable) return;
+
+    console.log("submiting history=>", this.cacheSnapValues.size);
+    const state = this.state;
+    const queue = this.queues;
+
+    // 将缓存操作记录保存到当前指针的下一栈中
+    const index = ++state.opIndex;
+    queue[index] = this.cacheSnapValues;
+    this.changeCbs[index] = change;
+
+    // 重置缓存记录
+    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 || !this.enable ) return;
+
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const index = this.state.opIndex--;
+    const snaps = this.queues[index]
+
+    snaps.forEach((vn)=>vn.undo())
+
+    const cb = this.changeCbs[index];
+  
+    cb && cb(1);
+  }
+
+  redo() {
+    if (!this.refCanRedo.value  || !this.enable) return;
+
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+    const index = ++this.state.opIndex;
+    const snaps = this.queues[index];
+    snaps.forEach(vn=>vn.redo());
+
+    const cb = this.changeCbs[index];
+    cb && cb(2);
+  }
+
+  //清除操作
+  clear() {
+    if ( !this.enable ) return;
+
+    this.queues = [];
+    this.changeCbs = [];
+    this.state.currLen = 0;
+    this.state.opIndex = -1;
+    this.cacheSnapValues = new Map<string, ValueSnap>();
+  }
+}

src/comm/controllers/ProjectCtrl/editor.ts

@@ -0,0 +1,64 @@
+import { Controller } from "@/comm/core/controller";
+import { RxValue } from "../rxValue";
+import { PackSource } from "@/comm/objects/packSource";
+import { useCtx } from "@/comm/ctx";
+import { PackScene } from "@/comm/objects/pack";
+
+
+export class EditorCtrl extends Controller {
+    state = RxValue.create({
+        currSceneIndex: -1,
+    })
+    pack: PackSource
+    constructor(pack: PackSource) {
+        super();
+        this.pack = pack;
+        if (pack.scenes.length > 0) {
+            this.state.currSceneIndex = 0;
+        }
+    }
+    addEmptyPackScene() {
+        let s = new PackScene();
+        let scenes = this.pack.state.scenes.slice(0);
+        scenes.push(s);
+        this.pack.state.setScenes(scenes);
+    }
+
+    removePackScene(index:number) {
+        console.log("remove scene=>", index);
+    }
+    loadScene(index:number) {
+        const scene = this.pack.scenes[index]
+        const ctx = useCtx();
+
+        this.state.currSceneIndex = index;
+        // ctx.gpuCtrl.proxy.loadScene(scene as any, this.pack as any);
+    }
+
+    get currScene() {
+        return this.pack.scenes[this.state.currSceneIndex];
+    }
+    get products() {
+        return this.pack.state.products
+    }
+
+    get currActiveMat() {
+        return null;
+    }
+
+    updateCurrPackFormData(data:any, path:string, value:string) {
+        console.log("data=>", data, path, value);
+    }
+
+    updateMatByColorMatch(data:any, mat:any) {
+        console.log("updateMatByColorMatch=>", data, mat);
+    }
+
+    updateEditItemBaseInfo(data:any, result:any) {
+        console.log("updateEditItemBaseInfo=>", data, result);
+    }
+
+    updateEditItemThumbnail(data:any, type: string ) {//"screenshot" | "upload" 
+        console.log("updateEditItemThumbnail=>", data, type);
+    }
+}

src/comm/controllers/ProjectCtrl/index.ts

@@ -0,0 +1,220 @@
+import { Events } from "queenjs";
+import { useCtx } from "../../ctx";
+import { Controller } from "../../core/controller";
+import { PackSource } from "../../objects/packSource";
+import { EditorCtrl } from "./editor";
+import { PackScene, PackGeom, PackProduct , PackSceneProduct} from "@/comm/objects/pack";
+
+
+
+async function createDefaultSpu3dConf() {
+  const currTime = new Date().toISOString();
+  const source = new PackSource();
+  source.state.scenes = [new PackScene() ];
+
+  // 初始化模型资产
+
+  const geom = new PackGeom();
+  geom.file = { url: "assets/box.fbx", size: 0 };
+
+  const product = new PackProduct();
+  product.geomId =  geom.id;
+
+  const sceneProd = new PackSceneProduct();
+  sceneProd.state.prodId = product.id;
+
+  const currScene = source.scenes[0];
+  // currScene.envId = env.id;
+  source.geoms.push(geom);
+  source.products.push(product);
+  // source.env3ds.push(env);
+  currScene.products.push(sceneProd);
+
+  const defaultData = {
+    name: "",
+    source: source.toJson(),
+    createTime: currTime,
+    updateTime: currTime,
+  };
+  return defaultData;
+}
+
+
+export class ProjectController extends Controller {
+  RootDir = "";
+  DataDir = "";
+  HostURL = "";
+  _swiftLocal = true;
+  _editor?:EditorCtrl
+  _spu3dFile:any;
+
+  get editor () {
+    return this._editor as EditorCtrl;
+  }
+
+  async onReady() {
+    const params = new URLSearchParams(location.search);
+    const projectPath = params.get("path") as string;
+    this.RootDir = projectPath;
+    const deviceCtrl = useCtx().deviceCtrl;
+
+    deviceCtrl.GetAppDataDir().then((dir:any) => {
+      this.DataDir = dir;
+    });
+
+    if (!projectPath) {
+      deviceCtrl.SetMainTitle("spu3d");
+      return;
+    }
+    deviceCtrl.SetMainTitle("项目:" + projectPath);
+    this.HostURL = await deviceCtrl.StartHttpServer(this.RootDir);
+    
+    console.log("host url=>", this.HostURL);
+
+    await this.loadProject();
+
+  }
+  async save() {
+    const detail = this._spu3dFile;
+    detail.source = this.editor.pack.toJson();
+    detail.updateTime = new Date().toISOString();
+    const deviceCtrl = useCtx().deviceCtrl;
+    const ok = await deviceCtrl.WriteFileText(
+      `${this.RootDir}/project.spu3d`,
+      JSON.stringify(detail)
+    );
+    if (!ok) {
+      return Promise.reject("保存项目失败");
+    }
+  }
+
+  async loadProject() {
+    const deviceCtrl = useCtx().deviceCtrl;
+    try {
+      const { text } = await deviceCtrl.ReadFileText(`${this.RootDir}/project.spu3d`);
+      const project = JSON.parse(text);
+      this._spu3dFile = project;
+      const pack = new PackSource();
+      pack.fromJson(project.source);
+      console.log("=================>", pack);
+      this._editor = new EditorCtrl(pack);
+    } catch (error) {
+      alert("项目加载失败" + error);
+    }
+  }
+
+  async getProjectDetail(dir: string): ReturnType<typeof createDefaultSpu3dConf> {
+    const deviceCtrl = useCtx().deviceCtrl;
+    const ret = await deviceCtrl.ReadFileText(`${dir}/project.spu3d`);
+    if (ret.text) {
+      const info = JSON.parse(ret.text);
+      return info;
+    } else {
+      //项目可能已经删除或数据错误了
+      return Promise.reject("获取项目详情失败");
+    }
+  }
+
+  getOutputDir() {
+    return this.RootDir + "/" + "outputs";
+  }
+  getAppDataDir() {
+    return this.DataDir;
+  }
+  getDefaultLogo() {
+    return this.DataDir + "/static/thumbnail.png";
+  }
+  createPath(fpath:string) {
+    return this.RootDir + "/" + fpath;
+  }
+  
+
+  getSwiftUri(assetPath:string) {
+      if (this._swiftLocal) return this.getLocalAbsoluteUri(assetPath);
+      return this.getHttpAbsoluteUri(assetPath);
+  }
+
+  getHttpAbsoluteUri(url:string) {
+    if (url.substring(0,2) == "//" ) return "http://" + url;
+    if (url.substring(0, 4) == "http") return url;
+    if (url.charAt(0) == '/') return this.HostURL + url.substring(1);
+    return this.HostURL + url;
+  }
+
+  getLocalAbsoluteUri(url:string) {
+    if (url.substring(0,2) == "//" ) return "http://" + url;
+    if (url.substring(0, 4) == "http") return url;
+    if (url.charAt(0) == '/') return this.RootDir + url;
+    return this.RootDir + "/" + url;
+  }
+  
+  getRelativeUri(url:string) {
+    let s = this.HostURL.length;
+    let pre = url.substring(0, s);
+    if (pre == this.HostURL) return url.substring(s+1);
+
+    s = this.RootDir.length
+    pre = url.substring(0, s);
+    if (pre == this.RootDir) return url.substring(s + 1);
+
+    return "";
+  }
+
+  async createProject(path: string) {
+
+    const deviceCtrl = useCtx().deviceCtrl;
+    const filePath = `${path}/project.spu3d`;
+    const isFileExit = await deviceCtrl.IsFileExit(filePath);
+
+    if (isFileExit) {
+      return Promise.reject("该项目已存在");
+    }
+
+    const name = path.split("/").pop() || "";
+
+    const defSpu3dConf = await createDefaultSpu3dConf();
+    defSpu3dConf.name = name;
+
+    const appDir = await deviceCtrl.GetAppDataDir();
+    await deviceCtrl.CopyFile(
+      `${appDir}/static/default.png`,
+      `${path}/assets/thumbnail.png`
+    );
+    await deviceCtrl.CopyFile(
+      `${appDir}/static/box.fbx`,
+      `${path}/assets/box.fbx`
+    );
+    await deviceCtrl.WriteFileText(filePath, JSON.stringify(defSpu3dConf));
+    return filePath;
+  }
+
+  async pickProject() {
+    const deviceCtrl = useCtx().deviceCtrl;
+    const projectDir = await deviceCtrl.SelectDir();
+    if (await this.isProjectExit(projectDir)) {
+      return projectDir;
+    } else {
+      return Promise.reject();
+    }
+  }
+
+  async isProjectExit(dir: string) {
+    const deviceCtrl = useCtx().deviceCtrl;
+    return await deviceCtrl.IsFileExit(`${dir}/project.spu3d`);
+  }
+
+  async saveProjectSource() {
+
+    const detail = await this.getProjectDetail(this.RootDir);
+    detail.source = this.editor.pack.toJson();
+    detail.updateTime = new Date().toISOString();
+    const deviceCtrl = useCtx().deviceCtrl;
+    const ok = await deviceCtrl.WriteFileText(
+      `${this.RootDir}/project.spu3d`,
+      JSON.stringify(detail)
+    );
+    if (!ok) {
+      return Promise.reject("保存项目失败");
+    }
+  }
+}

src/comm/controllers/entity/message.ts

@@ -0,0 +1,637 @@
+export interface NormMsg {
+  sub?: string;
+  msg?: string;
+  error?: string;
+  type?: string;
+  fva11?: number;
+  fva12?: number;
+  iva11?: number;
+  iva12?: number;
+}
+
+export function encodeNormMsg(message: NormMsg): Uint8Array {
+  let bb = popByteBuffer();
+  _encodeNormMsg(message, bb);
+  return toUint8Array(bb);
+}
+
+function _encodeNormMsg(message: NormMsg, bb: ByteBuffer): void {
+  // optional string sub = 1;
+  let $sub = message.sub;
+  if ($sub !== undefined) {
+    writeVarint32(bb, 10);
+    writeString(bb, $sub);
+  }
+
+  // optional string msg = 2;
+  let $msg = message.msg;
+  if ($msg !== undefined) {
+    writeVarint32(bb, 18);
+    writeString(bb, $msg);
+  }
+
+  // optional string error = 3;
+  let $error = message.error;
+  if ($error !== undefined) {
+    writeVarint32(bb, 26);
+    writeString(bb, $error);
+  }
+
+  // optional string type = 4;
+  let $type = message.type;
+  if ($type !== undefined) {
+    writeVarint32(bb, 34);
+    writeString(bb, $type);
+  }
+
+  // optional float fva11 = 5;
+  let $fva11 = message.fva11;
+  if ($fva11 !== undefined) {
+    writeVarint32(bb, 45);
+    writeFloat(bb, $fva11);
+  }
+
+  // optional float fva12 = 6;
+  let $fva12 = message.fva12;
+  if ($fva12 !== undefined) {
+    writeVarint32(bb, 53);
+    writeFloat(bb, $fva12);
+  }
+
+  // optional int32 iva11 = 7;
+  let $iva11 = message.iva11;
+  if ($iva11 !== undefined) {
+    writeVarint32(bb, 56);
+    writeVarint64(bb, intToLong($iva11));
+  }
+
+  // optional int32 iva12 = 8;
+  let $iva12 = message.iva12;
+  if ($iva12 !== undefined) {
+    writeVarint32(bb, 64);
+    writeVarint64(bb, intToLong($iva12));
+  }
+}
+
+export function decodeNormMsg(binary: Uint8Array): NormMsg {
+  return _decodeNormMsg(wrapByteBuffer(binary));
+}
+
+function _decodeNormMsg(bb: ByteBuffer): NormMsg {
+  let message: NormMsg = {} as any;
+
+  end_of_message: while (!isAtEnd(bb)) {
+    let tag = readVarint32(bb);
+
+    switch (tag >>> 3) {
+      case 0:
+        break end_of_message;
+
+      // optional string sub = 1;
+      case 1: {
+        message.sub = readString(bb, readVarint32(bb));
+        break;
+      }
+
+      // optional string msg = 2;
+      case 2: {
+        message.msg = readString(bb, readVarint32(bb));
+        break;
+      }
+
+      // optional string error = 3;
+      case 3: {
+        message.error = readString(bb, readVarint32(bb));
+        break;
+      }
+
+      // optional string type = 4;
+      case 4: {
+        message.type = readString(bb, readVarint32(bb));
+        break;
+      }
+
+      // optional float fva11 = 5;
+      case 5: {
+        message.fva11 = readFloat(bb);
+        break;
+      }
+
+      // optional float fva12 = 6;
+      case 6: {
+        message.fva12 = readFloat(bb);
+        break;
+      }
+
+      // optional int32 iva11 = 7;
+      case 7: {
+        message.iva11 = readVarint32(bb);
+        break;
+      }
+
+      // optional int32 iva12 = 8;
+      case 8: {
+        message.iva12 = readVarint32(bb);
+        break;
+      }
+
+      default:
+        skipUnknownField(bb, tag & 7);
+    }
+  }
+
+  return message;
+}
+
+export interface Long {
+  low: number;
+  high: number;
+  unsigned: boolean;
+}
+
+interface ByteBuffer {
+  bytes: Uint8Array;
+  offset: number;
+  limit: number;
+}
+
+function pushTemporaryLength(bb: ByteBuffer): number {
+  let length = readVarint32(bb);
+  let limit = bb.limit;
+  bb.limit = bb.offset + length;
+  return limit;
+}
+
+function skipUnknownField(bb: ByteBuffer, type: number): void {
+  switch (type) {
+    case 0: while (readByte(bb) & 0x80) { } break;
+    case 2: skip(bb, readVarint32(bb)); break;
+    case 5: skip(bb, 4); break;
+    case 1: skip(bb, 8); break;
+    default: throw new Error("Unimplemented type: " + type);
+  }
+}
+
+function stringToLong(value: string): Long {
+  return {
+    low: value.charCodeAt(0) | (value.charCodeAt(1) << 16),
+    high: value.charCodeAt(2) | (value.charCodeAt(3) << 16),
+    unsigned: false,
+  };
+}
+
+function longToString(value: Long): string {
+  let low = value.low;
+  let high = value.high;
+  return String.fromCharCode(
+    low & 0xFFFF,
+    low >>> 16,
+    high & 0xFFFF,
+    high >>> 16);
+}
+
+// The code below was modified from https://github.com/protobufjs/bytebuffer.js
+// which is under the Apache License 2.0.
+
+let f32 = new Float32Array(1);
+let f32_u8 = new Uint8Array(f32.buffer);
+
+let f64 = new Float64Array(1);
+let f64_u8 = new Uint8Array(f64.buffer);
+
+function intToLong(value: number): Long {
+  value |= 0;
+  return {
+    low: value,
+    high: value >> 31,
+    unsigned: value >= 0,
+  };
+}
+
+let bbStack: ByteBuffer[] = [];
+
+function popByteBuffer(): ByteBuffer {
+  const bb = bbStack.pop();
+  if (!bb) return { bytes: new Uint8Array(64), offset: 0, limit: 0 };
+  bb.offset = bb.limit = 0;
+  return bb;
+}
+
+function pushByteBuffer(bb: ByteBuffer): void {
+  bbStack.push(bb);
+}
+
+function wrapByteBuffer(bytes: Uint8Array): ByteBuffer {
+  return { bytes, offset: 0, limit: bytes.length };
+}
+
+function toUint8Array(bb: ByteBuffer): Uint8Array {
+  let bytes = bb.bytes;
+  let limit = bb.limit;
+  return bytes.length === limit ? bytes : bytes.subarray(0, limit);
+}
+
+function skip(bb: ByteBuffer, offset: number): void {
+  if (bb.offset + offset > bb.limit) {
+    throw new Error('Skip past limit');
+  }
+  bb.offset += offset;
+}
+
+function isAtEnd(bb: ByteBuffer): boolean {
+  return bb.offset >= bb.limit;
+}
+
+function grow(bb: ByteBuffer, count: number): number {
+  let bytes = bb.bytes;
+  let offset = bb.offset;
+  let limit = bb.limit;
+  let finalOffset = offset + count;
+  if (finalOffset > bytes.length) {
+    let newBytes = new Uint8Array(finalOffset * 2);
+    newBytes.set(bytes);
+    bb.bytes = newBytes;
+  }
+  bb.offset = finalOffset;
+  if (finalOffset > limit) {
+    bb.limit = finalOffset;
+  }
+  return offset;
+}
+
+function advance(bb: ByteBuffer, count: number): number {
+  let offset = bb.offset;
+  if (offset + count > bb.limit) {
+    throw new Error('Read past limit');
+  }
+  bb.offset += count;
+  return offset;
+}
+
+function readBytes(bb: ByteBuffer, count: number): Uint8Array {
+  let offset = advance(bb, count);
+  return bb.bytes.subarray(offset, offset + count);
+}
+
+function writeBytes(bb: ByteBuffer, buffer: Uint8Array): void {
+  let offset = grow(bb, buffer.length);
+  bb.bytes.set(buffer, offset);
+}
+
+function readString(bb: ByteBuffer, count: number): string {
+  // Sadly a hand-coded UTF8 decoder is much faster than subarray+TextDecoder in V8
+  let offset = advance(bb, count);
+  let fromCharCode = String.fromCharCode;
+  let bytes = bb.bytes;
+  let invalid = '\uFFFD';
+  let text = '';
+
+  for (let i = 0; i < count; i++) {
+    let c1 = bytes[i + offset], c2: number, c3: number, c4: number, c: number;
+
+    // 1 byte
+    if ((c1 & 0x80) === 0) {
+      text += fromCharCode(c1);
+    }
+
+    // 2 bytes
+    else if ((c1 & 0xE0) === 0xC0) {
+      if (i + 1 >= count) text += invalid;
+      else {
+        c2 = bytes[i + offset + 1];
+        if ((c2 & 0xC0) !== 0x80) text += invalid;
+        else {
+          c = ((c1 & 0x1F) << 6) | (c2 & 0x3F);
+          if (c < 0x80) text += invalid;
+          else {
+            text += fromCharCode(c);
+            i++;
+          }
+        }
+      }
+    }
+
+    // 3 bytes
+    else if ((c1 & 0xF0) == 0xE0) {
+      if (i + 2 >= count) text += invalid;
+      else {
+        c2 = bytes[i + offset + 1];
+        c3 = bytes[i + offset + 2];
+        if (((c2 | (c3 << 8)) & 0xC0C0) !== 0x8080) text += invalid;
+        else {
+          c = ((c1 & 0x0F) << 12) | ((c2 & 0x3F) << 6) | (c3 & 0x3F);
+          if (c < 0x0800 || (c >= 0xD800 && c <= 0xDFFF)) text += invalid;
+          else {
+            text += fromCharCode(c);
+            i += 2;
+          }
+        }
+      }
+    }
+
+    // 4 bytes
+    else if ((c1 & 0xF8) == 0xF0) {
+      if (i + 3 >= count) text += invalid;
+      else {
+        c2 = bytes[i + offset + 1];
+        c3 = bytes[i + offset + 2];
+        c4 = bytes[i + offset + 3];
+        if (((c2 | (c3 << 8) | (c4 << 16)) & 0xC0C0C0) !== 0x808080) text += invalid;
+        else {
+          c = ((c1 & 0x07) << 0x12) | ((c2 & 0x3F) << 0x0C) | ((c3 & 0x3F) << 0x06) | (c4 & 0x3F);
+          if (c < 0x10000 || c > 0x10FFFF) text += invalid;
+          else {
+            c -= 0x10000;
+            text += fromCharCode((c >> 10) + 0xD800, (c & 0x3FF) + 0xDC00);
+            i += 3;
+          }
+        }
+      }
+    }
+
+    else text += invalid;
+  }
+
+  return text;
+}
+
+function writeString(bb: ByteBuffer, text: string): void {
+  // Sadly a hand-coded UTF8 encoder is much faster than TextEncoder+set in V8
+  let n = text.length;
+  let byteCount = 0;
+
+  // Write the byte count first
+  for (let i = 0; i < n; i++) {
+    let c = text.charCodeAt(i);
+    if (c >= 0xD800 && c <= 0xDBFF && i + 1 < n) {
+      c = (c << 10) + text.charCodeAt(++i) - 0x35FDC00;
+    }
+    byteCount += c < 0x80 ? 1 : c < 0x800 ? 2 : c < 0x10000 ? 3 : 4;
+  }
+  writeVarint32(bb, byteCount);
+
+  let offset = grow(bb, byteCount);
+  let bytes = bb.bytes;
+
+  // Then write the bytes
+  for (let i = 0; i < n; i++) {
+    let c = text.charCodeAt(i);
+    if (c >= 0xD800 && c <= 0xDBFF && i + 1 < n) {
+      c = (c << 10) + text.charCodeAt(++i) - 0x35FDC00;
+    }
+    if (c < 0x80) {
+      bytes[offset++] = c;
+    } else {
+      if (c < 0x800) {
+        bytes[offset++] = ((c >> 6) & 0x1F) | 0xC0;
+      } else {
+        if (c < 0x10000) {
+          bytes[offset++] = ((c >> 12) & 0x0F) | 0xE0;
+        } else {
+          bytes[offset++] = ((c >> 18) & 0x07) | 0xF0;
+          bytes[offset++] = ((c >> 12) & 0x3F) | 0x80;
+        }
+        bytes[offset++] = ((c >> 6) & 0x3F) | 0x80;
+      }
+      bytes[offset++] = (c & 0x3F) | 0x80;
+    }
+  }
+}
+
+function writeByteBuffer(bb: ByteBuffer, buffer: ByteBuffer): void {
+  let offset = grow(bb, buffer.limit);
+  let from = bb.bytes;
+  let to = buffer.bytes;
+
+  // This for loop is much faster than subarray+set on V8
+  for (let i = 0, n = buffer.limit; i < n; i++) {
+    from[i + offset] = to[i];
+  }
+}
+
+function readByte(bb: ByteBuffer): number {
+  return bb.bytes[advance(bb, 1)];
+}
+
+function writeByte(bb: ByteBuffer, value: number): void {
+  let offset = grow(bb, 1);
+  bb.bytes[offset] = value;
+}
+
+function readFloat(bb: ByteBuffer): number {
+  let offset = advance(bb, 4);
+  let bytes = bb.bytes;
+
+  // Manual copying is much faster than subarray+set in V8
+  f32_u8[0] = bytes[offset++];
+  f32_u8[1] = bytes[offset++];
+  f32_u8[2] = bytes[offset++];
+  f32_u8[3] = bytes[offset++];
+  return f32[0];
+}
+
+function writeFloat(bb: ByteBuffer, value: number): void {
+  let offset = grow(bb, 4);
+  let bytes = bb.bytes;
+  f32[0] = value;
+
+  // Manual copying is much faster than subarray+set in V8
+  bytes[offset++] = f32_u8[0];
+  bytes[offset++] = f32_u8[1];
+  bytes[offset++] = f32_u8[2];
+  bytes[offset++] = f32_u8[3];
+}
+
+function readDouble(bb: ByteBuffer): number {
+  let offset = advance(bb, 8);
+  let bytes = bb.bytes;
+
+  // Manual copying is much faster than subarray+set in V8
+  f64_u8[0] = bytes[offset++];
+  f64_u8[1] = bytes[offset++];
+  f64_u8[2] = bytes[offset++];
+  f64_u8[3] = bytes[offset++];
+  f64_u8[4] = bytes[offset++];
+  f64_u8[5] = bytes[offset++];
+  f64_u8[6] = bytes[offset++];
+  f64_u8[7] = bytes[offset++];
+  return f64[0];
+}
+
+function writeDouble(bb: ByteBuffer, value: number): void {
+  let offset = grow(bb, 8);
+  let bytes = bb.bytes;
+  f64[0] = value;
+
+  // Manual copying is much faster than subarray+set in V8
+  bytes[offset++] = f64_u8[0];
+  bytes[offset++] = f64_u8[1];
+  bytes[offset++] = f64_u8[2];
+  bytes[offset++] = f64_u8[3];
+  bytes[offset++] = f64_u8[4];
+  bytes[offset++] = f64_u8[5];
+  bytes[offset++] = f64_u8[6];
+  bytes[offset++] = f64_u8[7];
+}
+
+function readInt32(bb: ByteBuffer): number {
+  let offset = advance(bb, 4);
+  let bytes = bb.bytes;
+  return (
+    bytes[offset] |
+    (bytes[offset + 1] << 8) |
+    (bytes[offset + 2] << 16) |
+    (bytes[offset + 3] << 24)
+  );
+}
+
+function writeInt32(bb: ByteBuffer, value: number): void {
+  let offset = grow(bb, 4);
+  let bytes = bb.bytes;
+  bytes[offset] = value;
+  bytes[offset + 1] = value >> 8;
+  bytes[offset + 2] = value >> 16;
+  bytes[offset + 3] = value >> 24;
+}
+
+function readInt64(bb: ByteBuffer, unsigned: boolean): Long {
+  return {
+    low: readInt32(bb),
+    high: readInt32(bb),
+    unsigned,
+  };
+}
+
+function writeInt64(bb: ByteBuffer, value: Long): void {
+  writeInt32(bb, value.low);
+  writeInt32(bb, value.high);
+}
+
+function readVarint32(bb: ByteBuffer): number {
+  let c = 0;
+  let value = 0;
+  let b: number;
+  do {
+    b = readByte(bb);
+    if (c < 32) value |= (b & 0x7F) << c;
+    c += 7;
+  } while (b & 0x80);
+  return value;
+}
+
+function writeVarint32(bb: ByteBuffer, value: number): void {
+  value >>>= 0;
+  while (value >= 0x80) {
+    writeByte(bb, (value & 0x7f) | 0x80);
+    value >>>= 7;
+  }
+  writeByte(bb, value);
+}
+
+function readVarint64(bb: ByteBuffer, unsigned: boolean): Long {
+  let part0 = 0;
+  let part1 = 0;
+  let part2 = 0;
+  let b: number;
+
+  b = readByte(bb); part0 = (b & 0x7F); if (b & 0x80) {
+    b = readByte(bb); part0 |= (b & 0x7F) << 7; if (b & 0x80) {
+      b = readByte(bb); part0 |= (b & 0x7F) << 14; if (b & 0x80) {
+        b = readByte(bb); part0 |= (b & 0x7F) << 21; if (b & 0x80) {
+
+          b = readByte(bb); part1 = (b & 0x7F); if (b & 0x80) {
+            b = readByte(bb); part1 |= (b & 0x7F) << 7; if (b & 0x80) {
+              b = readByte(bb); part1 |= (b & 0x7F) << 14; if (b & 0x80) {
+                b = readByte(bb); part1 |= (b & 0x7F) << 21; if (b & 0x80) {
+
+                  b = readByte(bb); part2 = (b & 0x7F); if (b & 0x80) {
+                    b = readByte(bb); part2 |= (b & 0x7F) << 7;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    low: part0 | (part1 << 28),
+    high: (part1 >>> 4) | (part2 << 24),
+    unsigned,
+  };
+}
+
+function writeVarint64(bb: ByteBuffer, value: Long): void {
+  let part0 = value.low >>> 0;
+  let part1 = ((value.low >>> 28) | (value.high << 4)) >>> 0;
+  let part2 = value.high >>> 24;
+
+  // ref: src/google/protobuf/io/coded_stream.cc
+  let size =
+    part2 === 0 ?
+      part1 === 0 ?
+        part0 < 1 << 14 ?
+          part0 < 1 << 7 ? 1 : 2 :
+          part0 < 1 << 21 ? 3 : 4 :
+        part1 < 1 << 14 ?
+          part1 < 1 << 7 ? 5 : 6 :
+          part1 < 1 << 21 ? 7 : 8 :
+      part2 < 1 << 7 ? 9 : 10;
+
+  let offset = grow(bb, size);
+  let bytes = bb.bytes;
+
+  switch (size) {
+    case 10: bytes[offset + 9] = (part2 >>> 7) & 0x01;
+    case 9: bytes[offset + 8] = size !== 9 ? part2 | 0x80 : part2 & 0x7F;
+    case 8: bytes[offset + 7] = size !== 8 ? (part1 >>> 21) | 0x80 : (part1 >>> 21) & 0x7F;
+    case 7: bytes[offset + 6] = size !== 7 ? (part1 >>> 14) | 0x80 : (part1 >>> 14) & 0x7F;
+    case 6: bytes[offset + 5] = size !== 6 ? (part1 >>> 7) | 0x80 : (part1 >>> 7) & 0x7F;
+    case 5: bytes[offset + 4] = size !== 5 ? part1 | 0x80 : part1 & 0x7F;
+    case 4: bytes[offset + 3] = size !== 4 ? (part0 >>> 21) | 0x80 : (part0 >>> 21) & 0x7F;
+    case 3: bytes[offset + 2] = size !== 3 ? (part0 >>> 14) | 0x80 : (part0 >>> 14) & 0x7F;
+    case 2: bytes[offset + 1] = size !== 2 ? (part0 >>> 7) | 0x80 : (part0 >>> 7) & 0x7F;
+    case 1: bytes[offset] = size !== 1 ? part0 | 0x80 : part0 & 0x7F;
+  }
+}
+
+function readVarint32ZigZag(bb: ByteBuffer): number {
+  let value = readVarint32(bb);
+
+  // ref: src/google/protobuf/wire_format_lite.h
+  return (value >>> 1) ^ -(value & 1);
+}
+
+function writeVarint32ZigZag(bb: ByteBuffer, value: number): void {
+  // ref: src/google/protobuf/wire_format_lite.h
+  writeVarint32(bb, (value << 1) ^ (value >> 31));
+}
+
+function readVarint64ZigZag(bb: ByteBuffer): Long {
+  let value = readVarint64(bb, /* unsigned */ false);
+  let low = value.low;
+  let high = value.high;
+  let flip = -(low & 1);
+
+  // ref: src/google/protobuf/wire_format_lite.h
+  return {
+    low: ((low >>> 1) | (high << 31)) ^ flip,
+    high: (high >>> 1) ^ flip,
+    unsigned: false,
+  };
+}
+
+function writeVarint64ZigZag(bb: ByteBuffer, value: Long): void {
+  let low = value.low;
+  let high = value.high;
+  let flip = high >> 31;
+
+  // ref: src/google/protobuf/wire_format_lite.h
+  writeVarint64(bb, {
+    low: (low << 1) ^ flip,
+    high: ((high << 1) | (low >>> 31)) ^ flip,
+    unsigned: false,
+  });
+}

src/comm/controllers/index.ts

@@ -0,0 +1,5 @@
+import { ProjectController } from "./ProjectCtrl";
+
+import { DeviceController } from "./DeviceController";
+
+export { ProjectController, DeviceController };

src/comm/controllers/rxValue.ts

@@ -0,0 +1,166 @@
+import { HistoryController } from "./HistoryController";
+import {BehaviorSubject} from "rxjs";
+import { reactive, toRaw } 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 type RxValueType<T> = {
+    value: T,
+    _hstry?: boolean
+}
+
+
+function createRxValue<T>(value: T, histry:boolean) {
+    return new BehaviorSubject< RxValueType<T> >({value:value,  _hstry: histry})
+}
+
+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);
+}
+
+class RxValue {
+   static create<T extends {[key:string]: any}>(_fields:T, histroy?: HistoryController ) {
+        let obj = {__rx:true} as any;
+        
+        obj._historySnap = {} as any;
+        obj._historySub = {} as any;
+        obj._rxs = {} as any;
+        obj._fields = _fields;
+        obj._history = histroy;
+        obj._refs = {} as any;
+
+        const names = Object.keys(_fields);
+        
+        names.forEach(name=>{
+
+
+               const currName = name;
+               const initValue = _fields[currName]
+
+               const isRxField = typeof initValue == "object" && initValue.__rx
+               if (isRxField) {
+                    obj[currName] = initValue;
+                    return;
+               }
+
+                const f = createRxValue(initValue, !!histroy);
+                obj._rxs[name] = f;
+
+                const snap = createValueSnap(initValue, initValue, f);
+                obj._historySnap[name] = snap;
+                const rxc =  reactive({value: initValue});
+
+                Object.defineProperty(obj, currName, {
+                    get: function(){
+                        return rxc.value;
+                    },
+                    set: function(v) {
+                        f.next({value: v});
+                    },
+                    configurable: true,
+                    enumerable: true
+                })
+
+                const CamName = currName.slice(0,1).toUpperCase() +currName.slice(1);
+                
+                obj["set"+CamName] = function(value:T, nohistory = false){
+                    f.next({value, _hstry: !nohistory});
+                }
+        
+                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)=>{
+                    //if (CamName == "Transform") console.log("history 11111111111111111111111111")
+                    snap.OldValue = rxc.value;
+                    rxc.value = v.value;
+                    if (obj._history && obj._history.enable) {
+                        if (!v._hstry) return;
+                        const s = snap.clone();
+                        s.Value = v.value;
+                        obj._history.record(s);
+                    }
+                })
+        });
+
+
+        obj["setHistory"] = function(h: HistoryController){
+            obj._history = h;
+        }
+        obj["toJson"] = function() {
+            const out:any = {};
+            const names = Object.keys(_fields);
+
+            names.forEach(name=>{
+                const initV = _fields[name]
+                const isRxField = typeof initV == "object" && initV.__rx
+                if (isRxField) {
+                    out[name] = obj[name].toJson();
+                    return;
+                }
+                out[name] = toRaw(obj._rxs[name].getValue().value);
+            })
+            return out;
+        }
+        obj["fromJson"] = function(json:any) {
+            const out:any = {};
+            const names = Object.keys(_fields);
+            names.forEach(name=>{
+                const initV = _fields[name]
+                const isRxField = typeof initV == "object" && initV.__rx
+                if (isRxField ) {
+                    if(json[name]) out[name] = obj[name].fromJson( json[name] );
+                    return;
+                }
+                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 `ref${Capitalize<string & K>}`]: () => typeof _fields[K];
+        // } &
+        {
+            setHistory: (history: HistoryController)=>void
+            toJson:()=>typeof _fields
+            fromJson:(json:typeof _fields)=>void
+        }
+    }
+}
+
+export {RxValue};

src/comm/core/controller.ts

@@ -0,0 +1,15 @@
+import { Events } from "queenjs";
+
+export class Controller extends Events {
+    constructor(){
+        super();
+        this.init();
+    }
+    init() {
+        console.log("controller init");
+    }
+    
+    onReady() {
+        console.log("here can call other controller");
+    }
+}

src/comm/ctx/index.ts

@@ -0,0 +1,31 @@
+import * as Controls from "../controllers";
+
+const ctx: { [key: string]: any } = {
+  prjCtrl: new Controls.ProjectController(),
+  deviceCtrl: new Controls.DeviceController(),
+};
+
+const initOrder = ["deviceCtrl", "prjCtrl"];
+
+export async function InitControllers() {
+  console.log("begin init ");
+  let n = initOrder.length;
+  for (let i = 0; i < n; i++) {
+    await ctx[initOrder[i]].onReady();
+  }
+  const keys = Object.keys(ctx);
+  n = keys.length;
+  while (n--) {
+    if (initOrder.indexOf(keys[n]) != -1) {
+      keys.splice(n, 1);
+    }
+  }
+  keys.forEach((k) => {
+    ctx[k].onReady();
+  });
+  console.log("end init");
+}
+
+export function useCtx() {
+  return ctx;
+}

src/comm/globals/index.ts

@@ -0,0 +1,3 @@
+
+import { HistoryController } from "../controllers/HistoryController";
+export const  history = new HistoryController();

src/comm/objects/pack/PackEnv.ts

@@ -0,0 +1,58 @@
+import { nanoid } from "nanoid";
+import { createBackground, createOss } from "./create";
+import { RxValue } from "@/comm/controllers/rxValue";
+
+export class PackEnv {
+  id = nanoid();
+  name = "";
+  cusNum = "";
+  thumbnail = createOss();
+  hdr = createOss();
+  file = createOss();
+  config: any = null;
+  userData: any;
+
+  state = RxValue.create({
+    background: createBackground(),
+    options: {
+      rotation: 0,
+      exposure: 1,
+    },
+    toneMap: {
+      method: 1, //0 "linear" 值0 "reinhard" 值 1 "filmic”:值2
+      exposure: 1.0,
+      brightness: 0.1,
+      contrast: 0.06,
+      saturation: 1,
+    }
+  })
+  get options() {
+    return this.state.options;
+  }
+  
+  toJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      cusNum: this.cusNum,
+      thumbnail: this.thumbnail,
+      hdr: this.hdr,
+      file: this.file,
+      config: this.config,
+      userData: this.userData,
+      ...this.state.toJson(),
+    }
+  }
+
+  fromJson( data:any ) {
+    this.id = data.id;
+    this.name = data.name;
+    this.cusNum = data.cusNum;
+    this.thumbnail = data.thumbnail;
+    this.hdr = data.hdr;
+    this.file = data.file;
+    this.config = data.config;
+    this.userData = data.userData;
+    this.state.fromJson(data);
+  }
+}

src/comm/objects/pack/PackEnvBackground.ts

@@ -0,0 +1,7 @@
+import { createOss } from "./create";
+
+export class PackEnvBackground {
+    color = [1, 1, 1];
+    image = createOss();
+    type = 1;
+  }

src/comm/objects/pack/PackGeom.ts

@@ -0,0 +1,41 @@
+import { nanoid } from "nanoid";
+import { createOss } from "./create";
+
+//没有响应式数据
+export class PackGeom {
+  id = nanoid();
+  name = "";
+  thumbnail = createOss();
+  osgjs = createOss();
+  file = createOss();
+  glb = createOss();
+  shadow = createOss();
+  boundingBox = {
+    min: { x: 0, y: 0, z: 0 },
+    max: { x: 0, y: 0, z: 0 },
+  };
+
+  fromJson(data:any) {
+    this.id = data.id;
+    this.name = data.name;
+    this.thumbnail = data.thumbnail;
+    this.osgjs = data.osgjs;
+    this.file = data.file;
+    this.glb = data.glb;
+    this.shadow = data.shadow;
+    this.boundingBox = data.boundingBox;
+  }
+
+  toJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      thumbnail: this.thumbnail,
+      osgjs:this.osgjs,
+      file: this.file,
+      glb: this.glb,
+      shadow: this.shadow,
+      boundingBox: this.boundingBox
+    }
+  }
+}

src/comm/objects/pack/PackMat.ts

@@ -0,0 +1,95 @@
+import { nanoid } from "nanoid";
+import { createDiamond, createOss, createTexture, createUV } from "./create";
+import { RxValue } from "@/comm/controllers/rxValue";
+
+export class PackMat {
+  id = nanoid();
+  generateType?: "colormatch" | "tech" | undefined;
+  userData: any;
+
+  state = RxValue.create({
+    name: "未命名",
+    cusNum: "编号",
+    thumbnail: createOss(),
+    classType: "pbr" as "pbr" | "diamond" | "cuscolor",
+    type: "meta" as "meta" | "spec",
+    uvMap: "box" as "box" | "uv",
+    cullFace: "",
+    diamond: createDiamond(),
+    normal: createTexture({
+      factor: 1,
+    }),
+    metalness: createTexture({
+      factor: 0,
+    }),
+    roughness: createTexture({
+      factor: 1,
+    }),
+    gloss: createTexture({
+      factor: 1,
+    }),
+    albedo: createTexture({
+      color: [0, 1, 0],
+    }),
+    diffuse: createTexture({
+      color: [0, 1, 0],
+    }),
+
+    specular: createTexture({ 
+      color: [1, 1, 1],
+    }),
+    displace: createTexture({
+      factor: 1,
+      enable: false,
+    }),
+    opacity: createTexture({
+      factor: 1,
+      enable: false,
+    }),
+    uv: createUV(),
+    cusUv: createUV(),
+  })
+  // colorMatch?: any;
+
+  get uv() {
+    return this.state.uv;
+  }
+  get cusUv() {
+    return this.state.cusUv;
+  }
+  
+  get albedo() {
+    return this.state.albedo;
+  }
+  get diffuse() {
+    return this.state.diffuse;
+  }
+  
+  get normal() {
+    return this.state.normal;
+  }
+  get metalness() {
+    return this.state.metalness;
+  }
+  get name() {
+    return this.state.name;
+  }
+  
+  get roughness() {
+    return this.state.roughness;
+  }
+  
+  toJson() {
+    let out = {
+      id: this.id, generateType: this.generateType, userData: this.userData,
+      ...this.state.toJson()
+    }
+    return out;
+  }
+  fromJson( data:any ) {
+    this.id = data.id;
+    this.generateType = data.generateType;
+    this.userData = data.userData;
+    this.state.fromJson(data);
+  }
+}

src/comm/objects/pack/PackProduct.ts

@@ -0,0 +1,48 @@
+import { nanoid } from "nanoid";
+import { createOss } from "./create";
+import { PackProductComp } from "./PackProductComp";
+
+
+export class PackProduct {
+  id = nanoid();
+  userData: any;
+  geomId = "";
+  name = "";
+  cusNum = "";
+  type = ""; //shoe  heel sole xx
+  thumbnail = createOss();
+  components = [] as PackProductComp[]
+  
+  toJson() {
+    
+    return {
+      id : this.id,
+      userData: this.userData,
+      geomId: this.geomId,
+      name: this.name,
+      cusNum: this.cusNum,
+      type: this.type,
+      thumbnail: this.thumbnail,
+      components: this.components.map(c=>c.toJson()),
+    }
+  }
+
+  fromJson(data:any) {
+     this.id = data.id;
+     this.userData = data.userData;
+     this.geomId = data.geomId;
+     this.name = data.name;
+     this.cusNum = data.cusNum;
+     this.type = data.type;
+     this.thumbnail = data.thumbnail;
+
+     const comps = (data.components||[]).filter((item: any)=>!!item)
+     this.components = (comps || []).map((d:any)=>{
+        const c = new PackProductComp();
+        c.fromJson(d);
+        return c;
+     })
+  }
+}
+
+

src/comm/objects/pack/PackProductComp.ts

@@ -0,0 +1,121 @@
+import { nanoid } from "nanoid";
+import { createOss } from "./create";
+import { RxValue } from "@/comm/controllers/rxValue";
+
+export class CraftImage {
+  id =  nanoid();
+  state = RxValue.create({
+    width: 0,
+    height: 0,
+    image: { url: "", size: 0 },
+    position: [0, 0],
+    scale: [1, 1],
+    rotation: 0,
+    fillType: "tz" as "tz" | "mb", //贴图方式 tz 贴纸 mb 满版
+    technology: "ss" as "ss" | "tj" | "ty" | "at" | "ls" | "uv" //工艺类型 ss四色 tj烫金 ty烫银 at凹凸 ls镭射 uvUV
+  })
+  get width() {
+    return this.state.width;
+  }
+  get height() {
+    return this.state.height;
+  }
+  
+  get image() {
+    return this.state.image;
+  }
+  get technology () {
+    return this.state.technology;
+  }
+  get rotation () {
+    return this.state.rotation;
+  }
+  get fillType () {
+    return this.state.fillType;
+  }
+  get scale () {
+    return this.state.scale;
+  }
+  get position () {
+    return this.state.position;
+  }
+  
+  toJson() {
+    return {
+      id: this.id,
+      ...this.state.toJson()
+    }
+  }
+  fromJson( data:any) {
+    this.id = data.id;
+    this.state.fromJson( data );
+  }
+}
+
+export class PackProductComp {
+  id = "mustfromMeshCompId"
+  userData: any;
+
+  state = RxValue.create({
+    name : "",
+    matId: "",
+    groupId: "",  //组件打组
+    uvMap: createOss(),
+    uvsize: { width: 0, height: 0 },
+    visible: true,
+    locked: false, //当前部件是否被锁定
+    images:  [] as CraftImage[] //工艺贴图
+  })
+  
+  get images () {
+    return this.state.images || [];
+  }
+  get matId() {
+     return this.state.matId;
+  }
+  
+  toJson() {
+    const out :any = {
+      id: this.id,
+      userData: this.userData,
+      ...this.state.toJson()
+    }
+    out.images = this.state.images.map(item=>item.toJson())
+    return out;
+  }
+  
+  fromJson(data:any) {
+    this.id = data.id;
+    this.userData = data.userData;
+    if (!data.images) data.images = [];
+    this.state.fromJson(data);
+    this.state.images = data.images.map((item:any)=>{
+       const s = new CraftImage();
+       s.fromJson(item);
+       return s;
+    })
+  }
+
+  addImage(uri:string, width: number, height: number, Size:number) {
+      let m = new CraftImage();
+      m.state.image.url = uri;
+      m.state.image.size = Size;
+      m.state.width = width;
+      m.state.height = height;
+      let images = this.state.images.slice(0)
+      images.push(m);
+      this.state.setImages(images);
+  }
+
+  removeImage(id:string) {
+    let n = this.state.images.length;
+    let images = this.state.images.slice(0)
+    while(n--) {
+      if(images[n].id == id) {
+        images.splice(n, 1);
+        break
+      }
+    }
+    this.state.setImages(images);
+  }
+}

src/comm/objects/pack/PackScene.ts

@@ -0,0 +1,68 @@
+import { nanoid } from "nanoid";
+import { createBackground, createOss } from "./create";
+import { PackSceneLight } from "./PackSceneLight";
+import { PackSceneProduct } from "./PackSceneProduct";
+import { RxValue } from "@/comm/controllers/rxValue";
+
+export class PackScene {
+  id = nanoid();
+  name = "";
+  thumbnail = createOss();
+  userData: any;
+  stickers: any[] = [];
+
+  state = RxValue.create({
+    envId: "",
+    lights: {
+      enable: false,
+      list: [] as PackSceneLight[],
+    },
+    products: [] as PackSceneProduct[],
+    background: createBackground(),
+    options: {
+      rotation: 0,
+      exposure: 1,
+    },
+    toneMap: {
+      method: 1, //0 "linear" 值0 "reinhard" 值 1 "filmic”:值2
+      exposure: 1.0,
+      brightness: 0.1,
+      contrast: 0.06,
+      saturation: 1,
+    }
+  })
+  get products() {
+    return this.state.products;
+  }
+  get envId() {
+    return this.state.envId;
+  }
+
+  
+
+  toJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      thumbnail: this.thumbnail,
+      userData: this.userData,
+      stickers: this.stickers,
+      ...this.state.toJson(),
+      products: this.state.products.map(item=>item.toJson()),
+    }
+  }
+
+  fromJson(data:any) {
+    this.id = data.id;
+    this.name = data.name;
+    this.thumbnail = data.thumbnail;
+    this.userData = data.userData;
+    this.stickers = data.stickers;
+    this.state.fromJson(data);
+    this.state.products = (data.products || []).map((item:any)=>{
+       const s = new PackSceneProduct();
+       s.fromJson(item);
+       return s;
+    })
+  }
+}

src/comm/objects/pack/PackSceneLight.ts

@@ -0,0 +1,30 @@
+import { nanoid } from "nanoid";
+
+export class PackSceneLight {
+  id = nanoid();
+  type = "NONE";
+  enable = false;
+  matrix: number[] = [];
+  color: number[] = [];
+  intensity = 0;
+
+  toJson() {
+    return {
+      id: this.id,
+      type: this.type,
+      enable: this.enable,
+      matrix: this.matrix,
+      color: this.color,
+      intensity: this.intensity
+    }
+  }
+
+  fromJson(data:any) {
+    this.id = data.id;
+    this.type = data.type;
+    this.enable= data.enable;
+    this.matrix = data.matrix;
+    this.color = data.color;
+    this.intensity = data.intensity;
+  }
+}

src/comm/objects/pack/PackSceneProduct.ts

@@ -0,0 +1,24 @@
+import { nanoid } from "nanoid";
+import { PackSource } from "./extends";
+import { RxValue } from "@/comm/controllers/rxValue";
+
+export class PackSceneProduct {
+  id = nanoid();
+  state = RxValue.create({
+    prodId: "",
+    transform: {
+      pos: [0, 0, 0],
+      scale: [1, 1, 1],
+      rotation: [0, 0, 0, 1],
+    },
+    visible: true,
+    noShadow: false, //不显示阴影
+  })
+  toJson() {
+    return {id: this.id, ...this.state.toJson()}
+  }
+  fromJson(data:any) {
+    this.id = data.id;
+    this.state.fromJson( data );
+  }
+}

src/comm/objects/pack/create.ts

@@ -0,0 +1,55 @@
+import { nanoid } from "nanoid";
+
+export function createUid(type = "PackSource") {
+  return `${type}_${nanoid()}`;
+}
+export type OssType = {
+  url: string;
+  size:number;
+}
+
+export function createOss(): OssType {
+  return { url: "", size: 0 };
+}
+
+export function createDiamond() {
+  return {
+    brightness: 1.0,
+    color: [0.4, 0.4, 0.4],
+    scaleX: 1,
+    scaleY: 1,
+  };
+}
+
+export function createUV() {
+  return { scale: 1, rotate: 0, offsetX: 0.5, offsetY: 0 };
+}
+
+export function createBackground() {
+  return {
+    type: 1,
+    color: [1, 1, 1],
+    image: createOss(),
+  };
+}
+
+type MatFeature = {
+  factor: number;
+  color: number[];
+  texture: {
+    url: string;
+    size: number;
+  };
+  useTexture: boolean;
+  enable: boolean;
+};
+
+export function createTexture<
+  T extends Partial<MatFeature>,
+  R extends T & { texture: OssType; useTexture: boolean }
+>(options: T): { [name in keyof R]: R[name] } {
+  return Object.assign(
+    { texture: createOss(), useTexture: false },
+    options
+  ) as any;
+}

src/comm/objects/pack/extends.ts

@@ -0,0 +1,99 @@
+import { cloneDeep, isEqual } from "lodash";
+import { createUid } from "./create";
+
+type PackSourceType = typeof PackSource;
+
+// 资源基础类型
+export abstract class PackSource {
+  // 通过初始数据创建类型资源
+  static create<T extends PackSourceType>(
+    this: T,
+    data: Partial<InstanceType<T>> = {}
+  ): InstanceType<T> {
+    if (data instanceof this) {
+      return data as InstanceType<T>;
+    }
+    data.id || (data.id = createUid(this.prototype.constructor.name));
+    const newSource = new (this as any)();
+    Object.assign(newSource, data);
+    newSource.onInit?.(data);
+    return newSource;
+  }
+  // 通过已有数据来源创建类型资源
+  static createOrigin<T extends PackSourceType>(this: T, origin: PackSource) {
+    const newSource = cloneDeep(origin);
+    newSource.id = createUid(this.prototype.constructor.name);
+    newSource.origin = {
+      sourceId: origin.id,
+    };
+    return newSource as InstanceType<T>;
+  }
+  // 通过类型创建资源数组
+  static createGroup<T extends PackSourceType>(
+    this: T,
+    arr?: InstanceType<T>[]
+  ) {
+    class PackSourceGroup extends SourceGroup<T> {}
+    PackSourceGroup.prototype.sourceType = this;
+    const group = new PackSourceGroup();
+    group.init(arr);
+    return group;
+  }
+
+  id!: string;
+  origin?: {
+    sourceId: string;
+  };
+
+  onInit(data: any) {
+    void data;
+  }
+
+  isHashEqual(data: any): boolean {
+    const options = {
+      excludeKeys: ["id", "origin"],
+    };
+    const d1 = createObjByOwnKeys(this, options);
+    const d2 = createObjByOwnKeys(data, options);
+    return isEqual(d1, d2);
+  }
+}
+
+// 资源包类型，一类资源的数组类型
+export abstract class SourceGroup<T extends PackSourceType> extends Array<
+  InstanceType<T>
+> {
+  declare sourceType: T;
+  init(list?: InstanceType<T>[]) {
+    this.length = 0;
+    list && this.push(...list.map((d) => this.sourceType.create(d)));
+  }
+
+  add(data: InstanceType<T>) {
+    if (data.origin?.sourceId) {
+      const { sourceId } = data.origin;
+      const currItem = this.find((d) => {
+        if (sourceId === d.id || sourceId === d.origin?.sourceId) {
+          if (d.isHashEqual(data)) {
+            return true;
+          }
+        }
+      });
+      if (currItem) return currItem;
+    }
+    this.push(data);
+    return data;
+  }
+}
+
+function createObjByOwnKeys(obj: object, options?: { excludeKeys?: string[] }) {
+  const keys = new Set(Object.getOwnPropertyNames(obj));
+  options?.excludeKeys?.forEach((key) => {
+    keys.delete(key);
+  });
+  const newObj: any = {};
+  keys.forEach((key) => {
+    newObj[key] = obj[key as keyof typeof obj];
+  });
+  return newObj;
+}

src/comm/objects/pack/index.ts

@@ -0,0 +1,8 @@
+export * from "./PackEnv";
+export * from "./PackMat";
+export * from "./PackGeom";
+export * from "./PackProduct";
+export * from "./PackProductComp";
+export * from "./PackScene";
+export * from "./PackSceneLight";
+export * from "./PackSceneProduct";

src/comm/objects/pack/pack.ts

@@ -0,0 +1,51 @@
+import { PackEnv } from "./PackEnv";
+import { PackGeom } from "./PackGeom";
+import { PackMat } from "./PackMat";
+import { PackProduct } from "./PackProduct";
+import { PackScene } from "./PackScene";
+import { PackSource } from "../packSource";
+
+export class Pack {
+    
+    
+    source = new PackSource();
+
+    // 添加模型
+    addGeom(geom: PackGeom) {
+        this.source.geoms.push(geom);
+        return geom;
+    }
+  
+    // 添加材质
+    addMat(mat: PackMat) {
+       this.source.mats.push(mat);
+       return mat;
+    }
+  
+    // 添加环境
+    addEnv(env: PackEnv) {
+       this.source.env3ds.push(env);
+       return env;
+    }
+  
+    // 添加单品
+    addProduct(product: PackProduct, source: PackSource = this.source) {
+
+      const geom = source.geoms.find((item) => item.id === product.geomId);
+      geom && (product.geomId = this.addGeom(geom).id);
+
+      product.components.forEach((comp) => {
+        const mat = source.mats.find((mat) => mat.id === comp.matId);
+        mat && (comp.state.matId = this.addMat(mat).id);
+      });
+       this.source.products.push(product);
+       return product;
+    }
+  
+    // 添加场景
+    addScene(scene: PackScene) {
+      this.source.scenes.push(scene);
+      return scene;
+    }
+  }
+  

src/comm/objects/packSource.ts

@@ -0,0 +1,84 @@
+
+import { RxValue } from "../controllers/rxValue";
+import { PackEnv } from "./pack/PackEnv";
+import { PackGeom } from "./pack/PackGeom";
+import { PackMat } from "./pack/PackMat";
+import { PackProduct } from "./pack/PackProduct";
+import { PackScene } from "./pack/PackScene";
+
+export class PackSource {
+    version = "2.0.0";
+    viewMode = "scene";
+
+    state = RxValue.create({
+        mats: [] as PackMat[],
+        geoms: [] as PackGeom[],
+        env3ds: [] as PackEnv[],
+        products: [] as PackProduct[],
+        scenes: [] as PackScene[],
+    })
+    userData:any = null;
+    
+    get scenes() {
+        return this.state.scenes;
+    }
+    get mats() {
+        return this.state.mats;
+    }
+    get geoms() {
+        return this.state.geoms;
+    }
+    get env3ds() {
+        return this.state.env3ds;
+    }
+    get products() {
+        return this.state.products;
+    }
+
+    toJson( ) {
+
+        const toJson = (item:any)=>item.toJson();
+
+        return {
+            version: this.version,
+            viewMode: this.viewMode,
+            userData: this.userData,
+            mats: this.mats.map(toJson),
+            env3ds: this.env3ds.map(toJson),
+            geoms: this.geoms.map(toJson),
+            scenes: this.scenes.map(toJson),
+            products: this.products.map(toJson),
+        }
+    }
+    fromJson(data:any) {
+        
+        this.version = data.version;
+        this.viewMode = data.viewMode;
+        this.userData = data.userData;
+        this.state.env3ds = (data.env3ds||[]).map((item:any)=>{
+            const s = new PackEnv();
+            s.fromJson(item);
+            return s;
+        })
+        this.state.mats = (data.mats||[]).map((item:any)=>{
+            const s = new PackMat();
+            s.fromJson(item);
+            return s;
+        })
+        this.state.geoms = (data.geoms||[]).map((item:any)=>{
+            const s = new PackGeom();
+            s.fromJson(item);
+            return s;
+        })
+        this.state.products = (data.products||[]).map((item:any)=>{
+            const s = new PackProduct();
+            s.fromJson(item);
+            return s;
+        })
+        this.state.scenes = (data.scenes||[]).map((item:any)=>{
+            const s = new PackScene();
+            s.fromJson(item);
+            return s;
+        })
+    }
+}