wip fix

app/web/src/nova/ed/logic/ed-global.ts

@@ -63,7 +63,7 @@ const target = {
   instance_item_id: false as any,
 };
 export const active = {
-  hover_id: "",
+  hover: { id: "", renderTree: () => {}, renderMain: () => {} },
   text: { id: "", content: "", timeout: null as any, el: null as any },
   get item_id() {
     if (target.active_id === false) {

app/web/src/nova/ed/logic/tree/sync-walk.tsx

@@ -212,7 +212,7 @@ export const syncWalkMap = (
           string,
           FNCompDef
         >;
-
+        const propvis = {};
         if (mprops) {
           const mitem_comp = mitem.get("component");
           if (mitem_comp) {

app/web/src/nova/ed/panel/main/main.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { useGlobal } from "web-utils";
+import { ReactNode, useEffect } from "react";
+import { useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../utils/ui/loading";
 import { View } from "../../../view/view";
 import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
@@ -9,18 +9,13 @@ import { code } from "../popup/code/code";
 
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  return (
-    <div
-      className={cx(
-        "flex flex-1 relative overflow-auto ",
-        css`
-          contain: content;
-        `
-      )}
-    >
-      <div className="absolute inset-0 flex flex-col">
-        {!!p.page.building && <Loading backdrop={false} />}
-        {!p.page.building && code.mode !== "" && (
+  const local = useLocal({
+    el: null as ReactNode,
+  });
+  active.hover.renderMain = local.render;
+
+  if (code.mode && !p.page.building) {
+    local.el = (
       <View
         mode={p.mode}
         code_mode={code.mode}
@@ -49,16 +44,17 @@ export const EdMain = () => {
         }}
         hover={{
           get(meta) {
-                return active.hover_id === meta.item.id;
+            return false;
           },
           set(meta) {
             const outer = getOuterItem(meta);
             if (outer) {
-                  active.hover_id = outer.id;
+              if (active.hover.id !== outer.id) {
+                active.hover.id = outer.id;
+                active.hover.renderTree();
+                active.hover.renderMain();
+              }
             }
-
-                p.render();
-                p.page.render();
           },
         }}
         active={{
@@ -67,8 +63,6 @@ export const EdMain = () => {
           },
           set(meta) {
             const outer = getOuterItem(meta);
-                console.log(meta);
-
             if (outer) {
               active.item_id = outer.id;
             }
@@ -116,8 +110,7 @@ export const EdMain = () => {
                   )}
                   ref={(ref) => {
                     if (ref !== document.activeElement && ref) {
-                          const renaming =
-                            document.querySelector(".rename-item");
+                      const renaming = document.querySelector(".rename-item");
                       const modals = document.querySelectorAll(
                         "[data-floating-ui-portal]"
                       );
@@ -148,7 +141,41 @@ export const EdMain = () => {
           },
         }}
       />
+    );
+  }
+
+  return (
+    <div
+      className={cx(
+        "flex flex-1 relative overflow-auto ",
+        css`
+          contain: content;
+        `,
+        active.hover.id &&
+          active.hover.id !== active.item_id &&
+          css`
+            .s-${active.hover.id} {
+              position: relative;
+
+              &::after {
+                content: " ";
+                pointer-events: none;
+                position: absolute;
+                z-index: 100;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                top: 0;
+                border: 2px solid #b2d2fd;
+              }
+            }
+          `
       )}
+    >
+      {/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
+      <div className="absolute inset-0 flex flex-col">
+        {!!p.page.building && <Loading backdrop={false} />}
+        {!p.page.building && code.mode !== "" && local.el}
       </div>
     </div>
   );

app/web/src/nova/ed/panel/tree/body.tsx

@@ -19,6 +19,8 @@ export const EdTreeBody = () => {
   const local = useLocal({ tree: null as TreeMethods | null, comp_id: "" });
   const TypedTree = DNDTree<EdMeta>;
 
+  active.hover.renderTree = local.render;
+
   expandTreeHook(p, local);
 
   if (active.comp_id && local.comp_id !== active.comp_id) {

app/web/src/nova/ed/panel/tree/node/render.tsx

@@ -9,8 +9,7 @@ import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
 import { treeItemKeyMap } from "./key-map";
 
-const jsxPropLoadingRender = {} as Record<string, string>;
-const jsxPropVisCache = {} as Record<string, any>;
+const jsxPropVis = {} as Record<string, string>;
 
 export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -30,11 +29,29 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
   }
 
   if (node.data?.jsx_prop_root && node.data?.jsx_prop_name) {
+    const prop_name = node.data?.jsx_prop_name;
     const meta = getMetaById(p, node.data?.parent_item.id);
-    if (meta) {
-      if (meta.propvis) {
-        jsxPropVisCache[meta.item.id] = meta.propvis;
-        if (meta.propvis[node.data.jsx_prop_name] === false) return <></>;
+
+    if (meta && prop_name && !active.comp_id) {
+      if (!meta.propvis) {
+        if (!meta.parent_mcomp) {
+          setTimeout(local.render, 100);
+          const id = meta.item.originalId || meta.item.id;
+          if (!jsxPropVis[id] || jsxPropVis[id] === prop_name) {
+            jsxPropVis[id] = prop_name;
+            return (
+              <div
+                className={"relative border-b flex items-stretch  min-h-[26px]"}
+              >
+                <Loading backdrop={false} />
+              </div>
+            );
+          } else {
+            return <></>;
+          }
+        }
+      } else {
+        if (meta.propvis[prop_name] === false) return <></>;
       }
     }
   }
@@ -61,7 +78,7 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         active.item_id === item.id
           ? ["bg-blue-100"]
           : [isComponent && `bg-purple-50`],
-        active.hover_id === item.id && "bg-blue-50"
+        active.hover.id === item.id && "bg-blue-50"
       )}
       onKeyDown={treeItemKeyMap(p, prm, item)}
       onContextMenu={(event) => {
@@ -80,12 +97,12 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         p.page.render();
       }}
       onMouseOver={() => {
-        active.hover_id = item.id;
-        p.render();
-        p.page.render();
+        active.hover.id = item.id;
+        active.hover.renderTree();
+        active.hover.renderMain();
       }}
     >
-      {active.hover_id === item.id && (
+      {active.hover.id === item.id && (
         <div
           className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-300")}
         ></div>

app/web/src/utils/css/gen.ts

@@ -21,7 +21,7 @@ export const produceCSS = (
 ): string => {
   try {
     return cx([
-      item.name,
+      `s-${item.id}`,
       css`
         display: flex;
         position: relative;