From 79dfc0375b4f5d97897ce79a40ccdcd8b9b7657b Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Fri, 24 Nov 2023 20:50:06 +0700
Subject: [PATCH] wip fix

---
 app/srv/ws/sync/editor/load-page.ts           | 10 +--
 app/web/src/nova/ed/ed-left.tsx               |  2 +-
 app/web/src/nova/ed/logic/ed-global.ts        |  1 +
 .../src/nova/ed/panel/popup/script/scope.tsx  | 45 ++++++++++-
 .../src/nova/ed/panel/popup/script/script.tsx |  1 -
 app/web/src/nova/ed/panel/tree/body.tsx       | 58 +++++++-------
 .../nova/ed/panel/tree/node/item/action.tsx   | 75 ++++++++++++++-----
 .../src/nova/ed/panel/tree/node/render.tsx    | 11 ++-
 8 files changed, 142 insertions(+), 61 deletions(-)

diff --git a/app/srv/ws/sync/editor/load-page.ts b/app/srv/ws/sync/editor/load-page.ts
index 3676b8b9..5e7ab225 100644
--- a/app/srv/ws/sync/editor/load-page.ts
+++ b/app/srv/ws/sync/editor/load-page.ts
@@ -191,7 +191,7 @@ export const serverWalkMap = (
         }
 
         const pcomp = p.scope_comps[item_comp.id];
-        pcomp.scope[item.id] = { p: arg.parent_ids, s: null };
+        pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
         const js = item.adv?.js;
         if (typeof js === "string") {
           const res = parseJs(js);
@@ -205,9 +205,9 @@ export const serverWalkMap = (
         if (!parent_mcomp) {
           p.scope[item.id] = {
             p: arg.parent_ids,
-            name: item.name,
+            n: item.name,
             s: null,
-          } as any;
+          };
           if (scope) p.scope[item.id].s = scope;
         }
 
@@ -234,14 +234,14 @@ export const serverWalkMap = (
 
   if (arg.parent_mcomp && !arg.is_prop) {
     const pcomp = p.scope_comps[arg.parent_mcomp.id];
-    pcomp.scope[item.id] = { p: arg.parent_ids, s: null };
+    pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
     const js = item.adv?.js;
     if (typeof js === "string") {
       const scope = parseJs(js);
       if (scope) pcomp.scope[item.id].s = scope;
     }
   } else {
-    p.scope[item.id] = { p: arg.parent_ids, name: item.name, s: null } as any;
+    p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
     const js = item.adv?.js;
     if (typeof js === "string") {
       const scope = parseJs(js);
diff --git a/app/web/src/nova/ed/ed-left.tsx b/app/web/src/nova/ed/ed-left.tsx
index 21481e40..9969b6b8 100644
--- a/app/web/src/nova/ed/ed-left.tsx
+++ b/app/web/src/nova/ed/ed-left.tsx
@@ -34,7 +34,7 @@ export const EdLeft = () => {
 
         <EdTreeSearch />
         <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
-          <div className="absolute inset-0 flex">
+          <div className="absolute inset-0 flex flex-col">
             <DndProvider backend={MultiBackend} options={getBackendOptions()}>
               <EdTreeBody />
             </DndProvider>
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 617c4c74..f8b427f6 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -25,6 +25,7 @@ export type EComp = typeof EmptyComp;
 
 export type ISingleScope = {
   p: string[];
+  n: string;
   s: null | Exclude<ReturnType<typeof parseJs>, undefined>;
 };
 export type IScope = Record<string, ISingleScope>;
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 5bc0f205..404f5897 100644
--- a/app/web/src/nova/ed/panel/popup/script/scope.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/scope.tsx
@@ -1,6 +1,6 @@
 import type { OnMount } from "@monaco-editor/react";
 import { deepClone } from "web-utils";
-import { ISingleScope, PG, active } from "../../../logic/ed-global";
+import { EPage, ISingleScope, PG, active } from "../../../logic/ed-global";
 type Monaco = Parameters<OnMount>[1];
 export type MonacoEditor = Parameters<OnMount>[0];
 
@@ -44,12 +44,16 @@ export const declareScope = async (
 export const {};
 const __val = ${arg.value};
 declare global {
-  const ${arg.name}: typeof __val;
+  const ${arg.name}: typeof __val ${
+    arg.type === "local" ? " & { render: ()=>void}" : ""
+  };
 }`
     );
   });
 };
 
+const layout_scope = {} as Record<string, ISingleScope>;
+
 type IEachArgScope = {
   s: ISingleScope;
   name: string;
@@ -64,8 +68,41 @@ const spreadScope = (
   s: ISingleScope,
   each: (arg: IEachArgScope) => void
 ) => {
-  for (const parent_id of s.p) {
-    const item = p.page.scope[parent_id];
+  const parents = [...s.p];
+  const layout_id = p.site.layout.id;
+  let layout = null as null | EPage;
+  if (layout_id && p.page.list[layout_id]) {
+    layout = p.page.list[layout_id].page;
+    if (!layout_scope[layout_id]) {
+      if (layout) {
+        const scope = Object.values(layout.scope).find((e) => {
+          return e.n === "content";
+        });
+        if (scope) {
+          layout_scope[layout_id] = scope;
+        }
+      }
+    }
+
+    const scope = layout_scope[layout_id];
+    if (scope) {
+      parents.shift();
+      scope.p.forEach((e) => parents.unshift(e));
+    }
+  }
+
+  for (const parent_id of parents) {
+    let item = null as null | ISingleScope;
+    if (layout && layout_scope[layout_id]) {
+      const scope = layout_scope[layout_id];
+      if (scope.p.includes(parent_id)) {
+        item = layout.scope[parent_id];
+      }
+    }
+    if (!item) {
+      item = p.page.scope[parent_id];
+    }
+
     if (item) {
       const scope = item.s;
       if (scope) {
diff --git a/app/web/src/nova/ed/panel/popup/script/script.tsx b/app/web/src/nova/ed/panel/popup/script/script.tsx
index 0b3eb923..55f334d7 100644
--- a/app/web/src/nova/ed/panel/popup/script/script.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/script.tsx
@@ -3,7 +3,6 @@ import { jscript } from "../../../../../utils/script/jscript";
 import { Loading } from "../../../../../utils/ui/loading";
 import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal } from "../../../logic/ed-global";
-import { ScriptMonaco } from "./monaco";
 import { ScriptWorkbench } from "./workbench";
 
 export const EdPopScript = () => {
diff --git a/app/web/src/nova/ed/panel/tree/body.tsx b/app/web/src/nova/ed/panel/tree/body.tsx
index 24f76b4c..3b432c6b 100644
--- a/app/web/src/nova/ed/panel/tree/body.tsx
+++ b/app/web/src/nova/ed/panel/tree/body.tsx
@@ -5,13 +5,13 @@ import {
   PlaceholderRender,
   TreeMethods,
 } from "@minoru/react-dnd-treeview";
+import { FC } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { DEPTH_WIDTH } from "./node/item/indent";
 import { indentHook } from "./node/item/indent-hook";
 import { canDrop, nodeOnDrop } from "./node/on-drop";
 import { nodeRender } from "./node/render";
-import { FC } from "react";
-import { DEPTH_WIDTH } from "./node/item/indent";
 import { doTreeSearch } from "./search";
 
 export const EdTreeBody = () => {
@@ -25,9 +25,15 @@ export const EdTreeBody = () => {
   if (p.ui.tree.search) {
     tree = doTreeSearch(p);
   } else {
-    if (active.comp_id) {
+    if (
+      active.comp_id &&
+      p.comp.list[active.comp_id] &&
+      p.comp.list[active.comp_id].tree
+    ) {
+      tree = p.comp.list[active.comp_id].tree;
+    } else {
+      tree = p.page.tree;
     }
-    tree = p.page.tree;
   }
 
   if (tree.length === 0)
@@ -47,27 +53,29 @@ export const EdTreeBody = () => {
     );
 
   return (
-    <TypedTree
-      tree={tree}
-      rootId={"root"}
-      insertDroppableFirst={false}
-      classes={treeClasses}
-      ref={(el) => {
-        local.tree = el;
-      }}
-      sort={false}
-      dropTargetOffset={10}
-      render={nodeRender}
-      onDrop={nodeOnDrop}
-      canDrop={(_, args) => {
-        if (!args.dragSource?.data?.item) return false;
-        return canDrop(p, args);
-      }}
-      dragPreviewRender={DragPreview}
-      placeholderRender={(node, params) => (
-        <Placeholder node={node} params={params} />
-      )}
-    />
+    <>
+      <TypedTree
+        tree={tree}
+        rootId={"root"}
+        insertDroppableFirst={false}
+        classes={treeClasses}
+        ref={(el) => {
+          local.tree = el;
+        }}
+        sort={false}
+        dropTargetOffset={10}
+        render={nodeRender}
+        onDrop={nodeOnDrop}
+        canDrop={(_, args) => {
+          if (!args.dragSource?.data?.item) return false;
+          return canDrop(p, args);
+        }}
+        dragPreviewRender={DragPreview}
+        placeholderRender={(node, params) => (
+          <Placeholder node={node} params={params} />
+        )}
+      />
+    </>
   );
 };
 
diff --git a/app/web/src/nova/ed/panel/tree/node/item/action.tsx b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
index 45c26c4e..82a1cf77 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/action.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
@@ -13,7 +13,10 @@ export const EdTreeAction = ({
   const p = useGlobal(EDGlobal, "EDITOR");
   const item = node.data?.item;
   if (!item) return null;
-  const isComponent = item.type === "item" && !!item.component?.id;
+  const comp = {
+    enabled: item.type === "item" && !!item.component?.id,
+    id: item.type === "item" && item.component ? item.component.id : "",
+  };
 
   let mode = "";
   if (item.adv?.js) mode = "js";
@@ -22,27 +25,61 @@ export const EdTreeAction = ({
 
   return (
     <div className="flex items-center pr-1">
-      {isComponent && (
-        <Tooltip
-          content="Edit Component"
-          className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
+      {comp.enabled && (
+        <>
+          {comp.id !== active.comp_id && (
+            <Tooltip content="Edit Component">
+              <div
+                className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
 
-            const comp_id = item.component?.id;
-            if (comp_id) {
-              active.comp_id = comp_id;
-              active.comp_item_id = item.id;
-              p.render();
-            }
-          }}
-        >
-          <>Edit</>
-        </Tooltip>
+                  const comp_id = comp.id;
+                  if (comp_id) {
+                    active.comp_id = comp_id;
+                    active.comp_item_id = item.id;
+                    const root = p.comp.list[comp_id].tree.find(
+                      (e) => e.parent === "root"
+                    );
+                    if (root && typeof root.id === "string") {
+                      active.item_id = root.id;
+                    }
+
+                    p.render();
+                  }
+                }}
+              >
+                Edit
+              </div>
+            </Tooltip>
+          )}
+          {comp.id === active.comp_id && (
+            <>
+              <Tooltip content="Edit Component">
+                <div
+                  className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+
+                    if (active.comp_id) {
+                      active.comp_id = "";
+                      active.item_id = active.comp_item_id;
+                      active.comp_item_id = "";
+                      p.render();
+                    }
+                  }}
+                >
+                  Close
+                </div>
+              </Tooltip>
+            </>
+          )}
+        </>
       )}
 
-      {!isComponent && (
+      {!comp.enabled && (
         <Tooltip
           content={`Edit ${mode}`}
           className={cx(
diff --git a/app/web/src/nova/ed/panel/tree/node/render.tsx b/app/web/src/nova/ed/panel/tree/node/render.tsx
index 625325fc..d1d9b8d6 100644
--- a/app/web/src/nova/ed/panel/tree/node/render.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/render.tsx
@@ -34,11 +34,6 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         "relative border-b flex items-stretch outline-none min-h-[26px]",
         prm.hasChild && "has-child",
         css`
-          &:focus {
-            .focus {
-              display: flex;
-            }
-          }
           &:hover {
             .action-script {
               opacity: 0.6;
@@ -251,7 +246,11 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         p.page.render();
       }}
     >
-      <div className="focus hidden absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500"></div>
+      {active.item_id === item.id && (
+        <div
+          className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500")}
+        ></div>
+      )}
       {local.rightClick && (
         <EdTreeCtxMenu
           node={node}