From 3ee95500646ec1dfb5f3c57dc611ba162c87c291 Mon Sep 17 00:00:00 2001 From: Rizky Date: Sat, 25 Nov 2023 19:01:37 +0700 Subject: [PATCH] wip fix --- app/web/src/nova/ed/logic/ed-global.ts | 1 + app/web/src/nova/ed/logic/ed-route.ts | 2 +- .../src/nova/ed/logic/tree/sync-walk-comp.tsx | 102 ++++++++++++++++++ app/web/src/nova/ed/logic/tree/sync-walk.tsx | 53 +-------- .../src/nova/ed/panel/popup/script/scope.tsx | 3 +- .../src/nova/ed/panel/tree/node/item/name.tsx | 30 +++++- 6 files changed, 136 insertions(+), 55 deletions(-) create mode 100644 app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts index d8cded83..70a5ecdc 100644 --- a/app/web/src/nova/ed/logic/ed-global.ts +++ b/app/web/src/nova/ed/logic/ed-global.ts @@ -186,6 +186,7 @@ export const EDGlobal = { scope: IScope; tree: NodeModel[]; meta: Record; + on_update: (bin: Uint8Array, origin: any) => Promise; } >, group: {} as Record>>, diff --git a/app/web/src/nova/ed/logic/ed-route.ts b/app/web/src/nova/ed/logic/ed-route.ts index 2991572c..24cffea1 100644 --- a/app/web/src/nova/ed/logic/ed-route.ts +++ b/app/web/src/nova/ed/logic/ed-route.ts @@ -2,7 +2,7 @@ import { compress, decompress } from "wasm-gzip"; import { PG } from "./ed-global"; import { loadSite } from "./ed-site"; import { treeRebuild } from "./tree/build"; -import { loadCompSnapshot } from "./tree/sync-walk"; +import { loadCompSnapshot } from "./tree/sync-walk-comp"; export const edRoute = async (p: PG) => { if (p.status === "ready" || p.status === "init") { diff --git a/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx b/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx new file mode 100644 index 00000000..9c835747 --- /dev/null +++ b/app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx @@ -0,0 +1,102 @@ +import { NodeModel } from "@minoru/react-dnd-treeview"; +import { compress, decompress } from "wasm-gzip"; +import { DComp } from "../../../../utils/types/root"; +import { EdMeta, IScope, PG, active } from "../ed-global"; +import { treeRebuild } from "./build"; +import { loadComponent, syncWalkLoad, syncWalkMap } from "./sync-walk"; +import { MItem } from "../../../../utils/types/item"; + +export const loadCompSnapshot = async ( + p: PG, + id_comp: string, + loaded: Set, + snapshot: Uint8Array, + scope: IScope +) => { + if (loaded.has(id_comp)) { + return; + } + const doc = new Y.Doc() as DComp; + Y.applyUpdate(doc as any, decompress(snapshot)); + const mitem = doc.getMap("map").get("root"); + if (mitem) { + if (typeof p.comp.list[id_comp]?.on_update === "function") { + doc.off("update", p.comp.list[id_comp].on_update); + } + + const { tree, meta } = await walkCompTree(p, mitem, loaded); + + p.comp.list[id_comp] = { + comp: { id: id_comp, snapshot }, + doc, + scope: scope, + meta, + tree, + async on_update(bin, origin) { + if (origin === "sv_remote" || origin === "local") return; + + const res = await p.sync.yjs.sv_local( + "comp", + id_comp, + Buffer.from(compress(bin)) + ); + + if (res) { + const diff_local = Y.encodeStateAsUpdate( + doc as any, + decompress(res.sv) + ); + Y.applyUpdate(doc as any, decompress(res.diff), "local"); + const mitem = doc.getMap("map").get("root"); + if (mitem) { + const { tree, meta } = await walkCompTree(p, mitem, loaded); + p.comp.list[id_comp].tree = tree; + p.comp.list[id_comp].meta = meta; + await treeRebuild(p); + + if (active.comp_id === id_comp) { + p.comp.tree = tree; + } + } + await p.sync.yjs.diff_local( + "comp", + id_comp, + Buffer.from(compress(diff_local)) + ); + p.render(); + } + }, + }; + + doc.on("update", p.comp.list[id_comp].on_update); + } +}; + +const walkCompTree = async (p: PG, mitem: MItem, loaded: Set) => { + const tree: NodeModel[] = []; + const meta = {}; + const portal = { + in: {} as Record, + out: {} as Record, + }; + await syncWalkLoad(p, mitem, loaded, (id) => loadComponent(p, id, loaded)); + + syncWalkMap( + { + comps: p.comp.list, + item_loading: p.ui.tree.item_loading, + meta, + tree, + warn_component_loaded: false, + }, + { + mitem, + isLayout: false, + parent_item: { id: "root" }, + portal, + tree_root_id: "root", + } + ); + + return { tree, meta }; +}; diff --git a/app/web/src/nova/ed/logic/tree/sync-walk.tsx b/app/web/src/nova/ed/logic/tree/sync-walk.tsx index a5e95449..3c109d14 100644 --- a/app/web/src/nova/ed/logic/tree/sync-walk.tsx +++ b/app/web/src/nova/ed/logic/tree/sync-walk.tsx @@ -1,18 +1,20 @@ import { NodeModel } from "@minoru/react-dnd-treeview"; import { createId } from "@paralleldrive/cuid2"; -import { decompress } from "wasm-gzip"; +import { compress, decompress } from "wasm-gzip"; import { TypedArray } from "yjs-types"; import { MContent } from "../../../../utils/types/general"; import { IItem, MItem } from "../../../../utils/types/item"; import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn"; import { DComp } from "../../../../utils/types/root"; import { MSection } from "../../../../utils/types/section"; -import { EdMeta, IScope, PG } from "../ed-global"; +import { EdMeta, IScope, PG, active } from "../ed-global"; import { ensureMItemProps, ensureMProp, ensurePropContent, } from "./sync-walk-utils"; +import { treeRebuild } from "./build"; +import { loadCompSnapshot } from "./sync-walk-comp"; export const syncWalkLoad = async ( p: PG, @@ -273,53 +275,6 @@ export const syncWalkMap = ( } }; -export const loadCompSnapshot = async ( - p: PG, - id_comp: string, - loaded: Set, - snapshot: Uint8Array, - scope: IScope -) => { - if (loaded.has(id_comp)) { - return; - } - const doc = new Y.Doc() as DComp; - Y.applyUpdate(doc as any, decompress(snapshot)); - const mitem = doc.getMap("map").get("root"); - if (mitem) { - await syncWalkLoad(p, mitem, loaded, (id) => loadComponent(p, id, loaded)); - const tree: NodeModel[] = []; - const meta = {}; - const portal = { - in: {} as Record, - out: {} as Record, - }; - syncWalkMap( - { - comps: p.comp.list, - item_loading: p.ui.tree.item_loading, - meta, - tree, - warn_component_loaded: false, - }, - { - mitem, - isLayout: false, - parent_item: { id: "root" }, - portal, - tree_root_id: "root", - } - ); - p.comp.list[id_comp] = { - comp: { id: id_comp, snapshot }, - doc, - scope: scope, - meta, - tree, - }; - } -}; - const loadcomp = { timeout: 0 as any, pending: new Set() }; export const component = { pending: null as null | Promise, diff --git a/app/web/src/nova/ed/panel/popup/script/scope.tsx b/app/web/src/nova/ed/panel/popup/script/scope.tsx index 8ecaae2a..c04e0d0c 100644 --- a/app/web/src/nova/ed/panel/popup/script/scope.tsx +++ b/app/web/src/nova/ed/panel/popup/script/scope.tsx @@ -26,6 +26,7 @@ export const declareScope = async ( }); const existing: Record = {}; + spreadScope(p, s, (arg) => { const { name } = arg; @@ -133,7 +134,7 @@ const spreadScope = ( } } - if (!item) { + if (!item) { if (comp_id) { item = p.comp.list[comp_id].scope[parent_id]; } else if (active.comp_id && p.comp.list[active.comp_id]) { diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx index 6b51002f..2a77d902 100644 --- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx +++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx @@ -1,7 +1,7 @@ import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview"; import { EDGlobal, EdMeta } from "../../../../logic/ed-global"; import { useGlobal, useLocal } from "web-utils"; -import { useEffect } from "react"; +import { FC, useEffect } from "react"; export const EdTreeName = ({ node, @@ -26,7 +26,7 @@ export const EdTreeName = ({ const isRenaming = p.ui.tree.rename_id === item.id; return (
-
{item.id}
+ {/*
{item.id}
*/} {isRenaming ? ( { e.currentTarget.select(); }} @@ -72,10 +72,32 @@ export const EdTreeName = ({ /> ) : (
- {node.text} + {/*
{item.id}
*/}
)}
); }; + +const Name: FC<{ name: string }> = ({ name }) => { + if (name.startsWith("jsx=")) { + return ( +
+
+ + + + `, + }} + >
+ +
{name.substring(4)}
+
+ ); + } + return
{name}
; +};