From 4bc0ae688168bbf9090e6358f98ed0ccbffab6b7 Mon Sep 17 00:00:00 2001 From: Rizky Date: Wed, 18 Oct 2023 06:18:13 +0700 Subject: [PATCH] fix --- app/web/src/render/editor/elements/e-item.tsx | 3 +- .../src/render/editor/elements/e-render.tsx | 7 +- app/web/src/render/editor/elements/e-text.tsx | 3 +- app/web/src/render/editor/logic/global.ts | 5 +- .../src/render/editor/logic/tree-logic.tsx | 128 ++++++++---------- app/web/src/render/editor/panel/tree/body.tsx | 14 +- app/web/src/render/live/logic/tree-logic.tsx | 3 +- 7 files changed, 75 insertions(+), 88 deletions(-) diff --git a/app/web/src/render/editor/elements/e-item.tsx b/app/web/src/render/editor/elements/e-item.tsx index 78b38f33..06bf4946 100644 --- a/app/web/src/render/editor/elements/e-item.tsx +++ b/app/web/src/render/editor/elements/e-item.tsx @@ -6,7 +6,8 @@ import { EText } from "./e-text"; export const EItem: FC<{ id: string; fromProp?: boolean; -}> = ({ id, fromProp }) => { + _scopeIndex?: Record; +}> = ({ id, fromProp, _scopeIndex }) => { return ( diff --git a/app/web/src/render/editor/elements/e-render.tsx b/app/web/src/render/editor/elements/e-render.tsx index d8326e7c..6bb5e194 100644 --- a/app/web/src/render/editor/elements/e-render.tsx +++ b/app/web/src/render/editor/elements/e-render.tsx @@ -22,7 +22,8 @@ export const ERender: FC<{ id: string; children?: (childs: IContent[]) => ReactNode; fromProp?: boolean; -}> = ({ id, children }) => { + _scopeIndex?: Record; +}> = ({ id, children, _scopeIndex }) => { const p = useGlobal(EditorGlobal, "EDITOR"); const meta = p.treeMeta[id]; @@ -31,10 +32,6 @@ export const ERender: FC<{ } let item = meta.item; - if (item.hidden) { - return null; - } - if ( meta.parent_prop && typeof item.adv?.js === "string" && diff --git a/app/web/src/render/editor/elements/e-text.tsx b/app/web/src/render/editor/elements/e-text.tsx index 557350f7..e7c39ddf 100644 --- a/app/web/src/render/editor/elements/e-text.tsx +++ b/app/web/src/render/editor/elements/e-text.tsx @@ -9,7 +9,8 @@ import { ERender } from "./e-render"; export const EText: FC<{ id: string; fromProp?: boolean; -}> = ({ id, fromProp }) => { + _scopeIndex?: Record; +}> = ({ id, fromProp, _scopeIndex }) => { return ( diff --git a/app/web/src/render/editor/logic/global.ts b/app/web/src/render/editor/logic/global.ts index 7245c962..ae592484 100644 --- a/app/web/src/render/editor/logic/global.ts +++ b/app/web/src/render/editor/logic/global.ts @@ -16,6 +16,7 @@ export type ItemMeta = { mitem?: MContent; item: IContent; parent_id: string; + indexedScope: Record; parent_comp?: WithRequired & { item: IItem }; parent_prop?: ItemMeta; scope?: any; @@ -150,7 +151,10 @@ export const EditorGlobal = { text: string; data: { meta: ItemMeta; idx: number }; }[], + treePending: null as null | Promise, treeMeta: {} as Record, + cachedParentID: {} as Record, + compInstance: {} as Record>, /** components */ comp: null as null | { @@ -177,7 +181,6 @@ export const EditorGlobal = { }, compDirectEdit: false, compLoading: {} as Record, - compInstance: {} as Record>, /** routing */ pagePreload: {} as Record, diff --git a/app/web/src/render/editor/logic/tree-logic.tsx b/app/web/src/render/editor/logic/tree-logic.tsx index 5a3bd6b3..545f1eef 100644 --- a/app/web/src/render/editor/logic/tree-logic.tsx +++ b/app/web/src/render/editor/logic/tree-logic.tsx @@ -23,88 +23,65 @@ export const rebuildTree = async ( p: PG, opt?: { render?: () => void; mode?: REBUILD_MODE; note: string } ) => { - if (p.pendingRebuild || p.focused) { - return; - } - p.pendingRebuild = true; + p.treePending = new Promise(async (resolve) => { + const _render = () => { + if (opt?.render) { + opt?.render(); + } else { + p.render(); + } + }; - const _render = () => { - if (opt?.render) { - opt?.render(); - } else { - p.render(); + const mode = opt?.mode || "update"; + // console.log("rebuild", mode); + + if (mode === "reset") { + p.treeMeta = {}; + p.compInstance = {}; } - }; - const mode = opt?.mode || "update"; - // console.log("rebuild", mode); + p.treeFlatTemp = []; - if (mode === "reset") { - p.treeMeta = {}; - p.compInstance = {}; - } + if (p.mpage) { + if (DEBUG) { + DEBUG_CUR_IDX = 0; + console.clear(); + } + const mpage = p.mpage.getMap("map").get("content_tree"); - p.treeFlatTemp = []; + await mpage?.doc?.transact(async () => { + let parent_id = "root"; + let includeTree = p.comp?.id ? false : true; + await Promise.all( + mpage?.get("childs")?.map(async (mitem) => { + await walk(p, mode, { + mitem, + parent_id, + depth: 0, + idx: 0, + includeTree, + }); + }) || [] + ); + }); + p.treeFlat = p.treeFlatTemp; - if (p.mpage) { - if (DEBUG) { - DEBUG_CUR_IDX = 0; - console.clear(); + const root = p.treeFlat.find((e) => e.parent === "root"); + if ( + p.comp && + root && + p.comp.id === root.data.meta.comp?.id && + p.comp.instance_id !== root.data.meta.item.id + ) { + p.comp.instance_id = root.id; + } } - const mpage = p.mpage.getMap("map").get("content_tree"); - await mpage?.doc?.transact(async () => { - let parent_id = "root"; - let includeTree = p.comp?.id ? false : true; - // const pageName = p.mpage?.getMap("map").get("name") as string; - // if ( - // p.layout.section && - // p.layout.content && - // !pageName.startsWith("layout:") - // ) { - // await walk(p, mode, { - // item: p.layout.section, - // parent_id: "root", - // depth: 0, - // idx: 0, - // includeTree: false, - // }); + resolve(); + p.treePending = null; - // parent_id = p.layout.content.id; - // p.layout.content.type = "item"; - // if (p.layout.content.type === "item") { - // p.layout.content.childs = (p.page?.content_tree.childs || - // []) as unknown as IItem[]; - // } - // } - - await Promise.all( - mpage?.get("childs")?.map(async (mitem) => { - await walk(p, mode, { - mitem, - parent_id, - depth: 0, - idx: 0, - includeTree, - }); - }) || [] - ); - }); - p.treeFlat = p.treeFlatTemp; - - const root = p.treeFlat.find((e) => e.parent === "root"); - if ( - p.comp && - root && - p.comp.id === root.data.meta.comp?.id && - p.comp.instance_id !== root.data.meta.item.id - ) { - p.comp.instance_id = root.id; - } - } - - p.pendingRebuild = false; - _render(); + _render(); + }); }; export const walk = async ( @@ -125,7 +102,6 @@ export const walk = async ( } ) => { let item = val.item as IContent; - let mitem = val.mitem; if (val.mitem) { @@ -172,6 +148,7 @@ export const walk = async ( } if (item) { + if (item.hidden) return; let comp: ItemMeta["comp"] = undefined as any; if (item.type === "item" && item.component?.id) { @@ -242,7 +219,7 @@ export const walk = async ( const meta: ItemMeta = { mitem: mitem, item, - parent_id: val.parent_id, + parent_id: p.cachedParentID[item.id] || val.parent_id, parent_comp: val.parent_comp as any, depth: val.depth || 0, elprop: createElProp(item, p), @@ -252,6 +229,7 @@ export const walk = async ( hover: p.item.sideHover ? false : p.item.hover === item.id, active: p.item.sideHover ? false : p.item.active === item.id, }), + indexedScope: p.treeMeta[item.id] ? p.treeMeta[item.id].indexedScope : {}, comp, }; diff --git a/app/web/src/render/editor/panel/tree/body.tsx b/app/web/src/render/editor/panel/tree/body.tsx index 0c58f1e6..f456d68f 100644 --- a/app/web/src/render/editor/panel/tree/body.tsx +++ b/app/web/src/render/editor/panel/tree/body.tsx @@ -167,10 +167,15 @@ export const ETreeBody: FC<{ tree: NodeModel[]; meta?: any }> = ({ [tree] ); + const onOut = useCallback(() => { + p.item.hover = ""; + p.softRender.all(); + }, []); + useEffect(() => { (async () => { - if (p.pendingRebuild) { - await waitUntil(() => !p.pendingRebuild); + if (p.treePending) { + await p.treePending; } const open = new Set(); @@ -252,7 +257,10 @@ export const ETreeBody: FC<{ tree: NodeModel[]; meta?: any }> = ({ )} -
+
{local.rightClick.node && (