From e60325a729d8585872b085a983227b2524c0d6e8 Mon Sep 17 00:00:00 2001 From: Rizky Date: Mon, 23 Oct 2023 17:48:00 +0700 Subject: [PATCH] fix --- app/web/src/render/ed/logic/ed-global.ts | 22 +++++++++++++----- .../ed/panel/tree/node/item/action/attach.tsx | 1 - .../ed/panel/tree/node/item/action/paste.tsx | 6 +++-- .../ed/panel/tree/node/item/indent-hook.ts | 23 ++++++++++++++++--- .../src/render/ed/panel/tree/node/render.tsx | 17 ++++++++++---- app/web/src/render/ed/panel/tree/tree.tsx | 2 +- pkgs/web-utils/src/use-global.ts | 2 +- 7 files changed, 54 insertions(+), 19 deletions(-) diff --git a/app/web/src/render/ed/logic/ed-global.ts b/app/web/src/render/ed/logic/ed-global.ts index dbc4624a..e73a3170 100644 --- a/app/web/src/render/ed/logic/ed-global.ts +++ b/app/web/src/render/ed/logic/ed-global.ts @@ -3,9 +3,8 @@ import { clientStartSync } from "../../../utils/sync/ws-client"; import { IContent, MContent } from "../../../utils/types/general"; import { IItem, MItem } from "../../../utils/types/item"; import { DComp, DPage, IRoot } from "../../../utils/types/root"; -import { IText, MText } from "../../../utils/types/text"; -import { FNCompDef } from "../../../utils/types/meta-fn"; import { ISection } from "../../../utils/types/section"; +import { IText, MText } from "../../../utils/types/text"; const EmptySite = { id: "", @@ -31,6 +30,20 @@ const EmptyComp = { snapshot: null as null | Uint8Array, }; +const target = { active_id: false as any }; +export const active = { + get item_id() { + if (target.active_id === false) { + target.active_id = localStorage.getItem("prasi-active-id") || ""; + } + return target.active_id; + }, + set item_id(val: string) { + localStorage.setItem("prasi-active-id", val); + target.active_id = val; + }, +}; + export type EdMeta = { item: IItem | IText | ISection; mitem?: MItem | MText; @@ -59,7 +72,7 @@ export const EDGlobal = { root: null as null | IRoot, entry: [] as string[], tree: [] as NodeModel[], - meta: {} as Record, + meta: {} as Record, list: {} as Record, }, comp: { @@ -69,9 +82,6 @@ export const EDGlobal = { list: {} as Record, }, ui: { - select: { - id: "", - }, tree: { open: {} as Record, }, diff --git a/app/web/src/render/ed/panel/tree/node/item/action/attach.tsx b/app/web/src/render/ed/panel/tree/node/item/action/attach.tsx index 98ace4d7..8ab5bc33 100644 --- a/app/web/src/render/ed/panel/tree/node/item/action/attach.tsx +++ b/app/web/src/render/ed/panel/tree/node/item/action/attach.tsx @@ -2,7 +2,6 @@ import { IItem } from "../../../../../../../utils/types/item"; import { PG } from "../../../../../logic/ed-global"; export const edActionAttach = (p: PG, item: IItem) => { - p.ui.select.id = item.id; const pick = () => { p.ui.popup.comp = (comp_id) => {}; p.render(); diff --git a/app/web/src/render/ed/panel/tree/node/item/action/paste.tsx b/app/web/src/render/ed/panel/tree/node/item/action/paste.tsx index e5756493..70daa0ee 100644 --- a/app/web/src/render/ed/panel/tree/node/item/action/paste.tsx +++ b/app/web/src/render/ed/panel/tree/node/item/action/paste.tsx @@ -1,7 +1,7 @@ import { syncronize } from "y-pojo"; import { IContent } from "../../../../../../../utils/types/general"; import { MItem } from "../../../../../../../utils/types/item"; -import { PG } from "../../../../../logic/ed-global"; +import { PG, active } from "../../../../../logic/ed-global"; import { treeRebuild } from "../../../../../logic/tree/build"; import { fillID } from "../../../../../../editor/tools/fill-id"; @@ -31,8 +31,10 @@ export const edActionPaste = async (p: PG, item: IContent) => { } } const map = new Y.Map(); - syncronize(map, fillID(child)); + const newchild = fillID(child); + syncronize(map, newchild); mchilds.push([map]); + active.item_id = newchild.id; } }); } diff --git a/app/web/src/render/ed/panel/tree/node/item/indent-hook.ts b/app/web/src/render/ed/panel/tree/node/item/indent-hook.ts index dc735dfe..7db07254 100644 --- a/app/web/src/render/ed/panel/tree/node/item/indent-hook.ts +++ b/app/web/src/render/ed/panel/tree/node/item/indent-hook.ts @@ -1,6 +1,6 @@ import { TreeMethods } from "@minoru/react-dnd-treeview"; import { useEffect } from "react"; -import { PG } from "../../../../logic/ed-global"; +import { PG, active } from "../../../../logic/ed-global"; export const indentHook = ( p: PG, @@ -9,9 +9,26 @@ export const indentHook = ( useEffect(() => { const open = JSON.parse(localStorage.getItem("prasi-tree-open") || "{}"); p.ui.tree.open = open; - if (open[p.page.cur.id] && local.tree) { - local.tree.open(open[p.page.cur.id]); + + let shouldOpen = open[p.page.cur.id] || []; + + let meta = p.page.meta[active.item_id]; + while (meta) { + if (meta.item.id) shouldOpen.push(meta.item.id); + meta = p.page.meta[meta.parent_item.id]; + } + + if (shouldOpen.length > 0 && local.tree) { + local.tree.open(shouldOpen); local.render(); + if (active.item_id) { + setTimeout(() => { + const el = document.getElementsByClassName(active.item_id); + if (el.length > 0) { + el[0].scrollIntoView({ behavior: "instant", block: "center" }); + } + }); + } } }, [p.page.tree]); }; diff --git a/app/web/src/render/ed/panel/tree/node/render.tsx b/app/web/src/render/ed/panel/tree/node/render.tsx index c673c895..a698f8d3 100644 --- a/app/web/src/render/ed/panel/tree/node/render.tsx +++ b/app/web/src/render/ed/panel/tree/node/render.tsx @@ -1,13 +1,13 @@ import { NodeRender } from "@minoru/react-dnd-treeview"; -import { EdMeta } from "../../../logic/ed-global"; +import { useGlobal, useLocal } from "web-utils"; +import { EDGlobal, EdMeta, active } from "../../../logic/ed-global"; import { EdTreeAction } from "./item/action"; import { EdTreeCtxMenu } from "./item/ctx-menu"; import { EdTreeIndent } from "./item/indent"; import { EdTreeName } from "./item/name"; -import { indentHook } from "./item/indent-hook"; -import { useLocal } from "web-utils"; export const nodeRender: NodeRender = (node, prm) => { + const p = useGlobal(EDGlobal, "EDITOR"); const local = useLocal({ rightClick: null as null | React.MouseEvent, }); @@ -18,14 +18,21 @@ export const nodeRender: NodeRender = (node, prm) => { return (
{ event.preventDefault(); local.rightClick = event; local.render(); }} + onClick={() => { + active.item_id = item.id; + p.render(); + }} > {local.rightClick && ( { return (
-
+
diff --git a/pkgs/web-utils/src/use-global.ts b/pkgs/web-utils/src/use-global.ts index 8755bbc4..19247764 100644 --- a/pkgs/web-utils/src/use-global.ts +++ b/pkgs/web-utils/src/use-global.ts @@ -43,7 +43,7 @@ export const useGlobal = ( const { global, render } = ctx; if (!global[_id]) { - global[_id] = deepClone(defaultValue); + global[_id] = defaultValue; } useEffect(() => {