fix

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<string, any>;
+}> = ({ id, fromProp, _scopeIndex }) => {
   return (
     <ErrorBox id={id}>
       <ERender id={id} fromProp={fromProp}>

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<string, any>;
+}> = ({ 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" &&

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<string, any>;
+}> = ({ id, fromProp, _scopeIndex }) => {
   return (
     <ErrorBox id={id}>
       <ERender id={id} fromProp={fromProp} />

app/web/src/render/editor/logic/global.ts

@@ -16,6 +16,7 @@ export type ItemMeta = {
   mitem?: MContent;
   item: IContent;
   parent_id: string;
+  indexedScope: Record<string, any>;
   parent_comp?: WithRequired<ItemMeta, "comp"> & { 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<void>,
   treeMeta: {} as Record<string, ItemMeta>,
+  cachedParentID: {} as Record<string, string>,
+  compInstance: {} as Record<string, Record<string, string>>,
 
   /** components */
   comp: null as null | {
@@ -177,7 +181,6 @@ export const EditorGlobal = {
   },
   compDirectEdit: false,
   compLoading: {} as Record<string, true>,
-  compInstance: {} as Record<string, Record<string, string>>,
 
   /** routing */
   pagePreload: {} as Record<string, true>,

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<void>(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,
     };
 

app/web/src/render/editor/panel/tree/body.tsx

@@ -167,10 +167,15 @@ export const ETreeBody: FC<{ tree: NodeModel<NodeMeta>[]; 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<string>();
 
@@ -252,7 +257,10 @@ export const ETreeBody: FC<{ tree: NodeModel<NodeMeta>[]; meta?: any }> = ({
         </div>
       )}
       <DndProvider backend={MultiBackend} options={getBackendOptions()}>
-        <div className="flex flex-col items-stretch bg-white right-0 left-0">
+        <div
+          className="flex flex-col items-stretch bg-white right-0 left-0"
+          onPointerOut={onOut}
+        >
           {local.rightClick.node && (
             <ETreeRightClick
               node={local.rightClick.node}

app/web/src/render/live/logic/tree-logic.tsx

@@ -46,7 +46,6 @@ export const rebuildTree = async (
     p.treePending = null;
 
     if (_.render !== false) {
-      console.log("rendering");
       p.render();
     }
   });
@@ -67,7 +66,7 @@ const walk = async (
   const treeMeta = val.treeMeta;
   let item = val.item as IContent;
 
-  if (item.hidden) return;
+  if (item.hidden === 'all') return;
 
   if (val.parent_comp) {
     const pchild_ids = val.parent_comp.comp?.child_ids;