From 98bce81b29d80f43b476caea3b8d2da07ebb24cd Mon Sep 17 00:00:00 2001 From: Rizky Date: Wed, 25 Oct 2023 09:29:24 +0700 Subject: [PATCH] fix --- app/web/src/render/ed/ed-base.tsx | 15 ++- .../ed/{panel/tree/tree.tsx => ed-left.tsx} | 25 ++++- app/web/src/render/ed/logic/ed-global.ts | 4 +- app/web/src/render/ed/logic/ed-route.ts | 92 +++++++++++-------- app/web/src/render/ed/logic/tree/build.tsx | 2 +- .../src/render/ed/panel/main/pane-resize.tsx | 6 +- app/web/src/render/ed/panel/top/left/api.tsx | 5 + .../src/render/ed/panel/top/left/export.tsx | 22 +++++ app/web/src/render/ed/panel/top/left/npm.tsx | 19 ++++ app/web/src/render/ed/panel/top/left/site.tsx | 19 ++++ app/web/src/render/ed/panel/top/top-btn.tsx | 41 +++++++++ .../src/render/ed/panel/tree/node/render.tsx | 2 +- 12 files changed, 195 insertions(+), 57 deletions(-) rename app/web/src/render/ed/{panel/tree/tree.tsx => ed-left.tsx} (52%) create mode 100644 app/web/src/render/ed/panel/top/left/api.tsx create mode 100644 app/web/src/render/ed/panel/top/left/export.tsx create mode 100644 app/web/src/render/ed/panel/top/left/npm.tsx create mode 100644 app/web/src/render/ed/panel/top/left/site.tsx create mode 100644 app/web/src/render/ed/panel/top/top-btn.tsx diff --git a/app/web/src/render/ed/ed-base.tsx b/app/web/src/render/ed/ed-base.tsx index 095d4a24..222064c3 100644 --- a/app/web/src/render/ed/ed-base.tsx +++ b/app/web/src/render/ed/ed-base.tsx @@ -4,7 +4,7 @@ import { EDGlobal } from "./logic/ed-global"; import { edInit } from "./logic/ed-init"; import { edRoute } from "./logic/ed-route"; import { EdMain } from "./panel/main/main"; -import { EdTree } from "./panel/tree/tree"; +import { EdLeft } from "./ed-left"; import { edUndoManager } from "./logic/ed-undo"; import { EdPopCompGroup } from "./panel/popup/comp-group"; import { EdPaneResize } from "./panel/main/pane-resize"; @@ -34,19 +34,16 @@ export const EdBase = () => {
- + { - if (size > 100) { - p.ui.layout.left = size; - p.render(); - } + p.ui.layout.left = size; + p.render(); }} onDone={(size) => { - if (size > 100) { - localStorage.setItem("prasi-layout-left", size.toString()); - } + localStorage.setItem("prasi-layout-left", size.toString()); }} /> diff --git a/app/web/src/render/ed/panel/tree/tree.tsx b/app/web/src/render/ed/ed-left.tsx similarity index 52% rename from app/web/src/render/ed/panel/tree/tree.tsx rename to app/web/src/render/ed/ed-left.tsx index 45bd02bc..804c7945 100644 --- a/app/web/src/render/ed/panel/tree/tree.tsx +++ b/app/web/src/render/ed/ed-left.tsx @@ -1,11 +1,15 @@ import { MultiBackend, getBackendOptions } from "@minoru/react-dnd-treeview"; import { DndProvider } from "react-dnd"; -import { EdTreeBody } from "./body"; -import { EdTreeSearch } from "./search"; import { useGlobal } from "web-utils"; -import { EDGlobal } from "../../logic/ed-global"; +import { EDGlobal } from "./logic/ed-global"; +import { EdTreeBody } from "./panel/tree/body"; +import { EdTreeSearch } from "./panel/tree/search"; +import { EdSitePicker } from "./panel/top/left/site"; +import { EdApiConfig } from "./panel/top/left/api"; +import { EdExport } from "./panel/top/left/export"; +import { EdNpmConfig } from "./panel/top/left/npm"; -export const EdTree = () => { +export const EdLeft = () => { const p = useGlobal(EDGlobal, "EDITOR"); return (
{ )} >
+
+ +
+ + + +
+
+
diff --git a/app/web/src/render/ed/logic/ed-global.ts b/app/web/src/render/ed/logic/ed-global.ts index db8747d0..2edad355 100644 --- a/app/web/src/render/ed/logic/ed-global.ts +++ b/app/web/src/render/ed/logic/ed-global.ts @@ -77,13 +77,13 @@ export const EDGlobal = { entry: [] as string[], tree: [] as NodeModel[], meta: {} as Record, - list: {} as Record, + list: {} as Record, }, comp: { cur: EmptyComp, doc: null as null | DComp, item: null as null | IItem, - list: {} as Record, + list: {} as Record, group: {} as Record>>, }, ui: { diff --git a/app/web/src/render/ed/logic/ed-route.ts b/app/web/src/render/ed/logic/ed-route.ts index a165c8fc..023dedfd 100644 --- a/app/web/src/render/ed/logic/ed-route.ts +++ b/app/web/src/render/ed/logic/ed-route.ts @@ -16,55 +16,69 @@ export const edRoute = async (p: PG) => { p.site = site; } - if (p.page.cur.id !== params.page_id || !p.page.cur.snapshot) { - p.status = "loading"; - const page = await p.sync.page.load(params.page_id); + if ( + p.page.cur.id !== params.page_id || + !p.page.cur.snapshot || + !p.page.list[p.page.cur.id] + ) { + if (p.page.cur.snapshot && p.page.list[p.page.cur.id]) { + console.log("loading page from cache"); + } else { + p.status = "loading"; + const page = await p.sync.page.load(params.page_id); - if (!page) { - p.status = "page-not-found"; - p.render(); - return; - } + if (!page) { + p.status = "page-not-found"; + p.render(); + return; + } - p.page.cur = page; - if (page.snapshot) { - const doc = new Y.Doc(); - Y.applyUpdate(doc, decompress(page.snapshot)); - doc.on("update", async (bin: Uint8Array, origin: any) => { - if (origin === "sv_remote" || origin === "local") return; + p.page.cur = page; + if (page.snapshot) { + const doc = new Y.Doc(); + Y.applyUpdate(doc, decompress(page.snapshot)); + doc.on("update", async (bin: Uint8Array, origin: any) => { + if (origin === "sv_remote" || origin === "local") return; - const res = await p.sync.yjs.sv_local( - "page", - p.page.cur.id, - Buffer.from(compress(bin)) - ); - - if (res) { - const diff_local = Y.encodeStateAsUpdate( - doc as any, - decompress(res.sv) - ); - Y.applyUpdate(doc as any, decompress(res.diff), "local"); - await treeRebuild(p); - - await p.sync.yjs.diff_local( + const res = await p.sync.yjs.sv_local( "page", p.page.cur.id, - Buffer.from(compress(diff_local)) + Buffer.from(compress(bin)) ); - p.ui.syncing = false; - p.render(); + + if (res) { + const diff_local = Y.encodeStateAsUpdate( + doc as any, + decompress(res.sv) + ); + Y.applyUpdate(doc as any, decompress(res.diff), "local"); + await treeRebuild(p); + + await p.sync.yjs.diff_local( + "page", + p.page.cur.id, + Buffer.from(compress(diff_local)) + ); + p.ui.syncing = false; + p.render(); + } + }); + + p.page.doc = doc as any; + if (p.page.doc) { + p.page.list[page.id] = { + page: p.page.cur, + doc: p.page.doc, + }; } - }); - p.page.doc = doc as any; - - if (p.page.doc) { - await treeRebuild(p); + if (p.page.doc) { + await treeRebuild(p); + } } + p.status = "ready"; + p.render(); } - p.status = "ready"; - p.render(); } } }; diff --git a/app/web/src/render/ed/logic/tree/build.tsx b/app/web/src/render/ed/logic/tree/build.tsx index 095da7e8..77f14857 100644 --- a/app/web/src/render/ed/logic/tree/build.tsx +++ b/app/web/src/render/ed/logic/tree/build.tsx @@ -306,7 +306,7 @@ const loadComponent = async (p: PG, item_comp: FNComponent) => { const doc = new Y.Doc() as DComp; if (cur.snapshot) { Y.applyUpdate(doc as any, decompress(cur.snapshot)); - p.comp.list[item_comp.id] = { cur, doc }; + p.comp.list[item_comp.id] = { comp: cur, doc }; return true; } } diff --git a/app/web/src/render/ed/panel/main/pane-resize.tsx b/app/web/src/render/ed/panel/main/pane-resize.tsx index ac993555..54a05956 100644 --- a/app/web/src/render/ed/panel/main/pane-resize.tsx +++ b/app/web/src/render/ed/panel/main/pane-resize.tsx @@ -1,6 +1,7 @@ import { useLocal } from "web-utils"; export const EdPaneResize = (arg: { + minSize: number; size: number; onResize: (size: number) => void; onDone: (size: number) => void; @@ -29,7 +30,10 @@ export const EdPaneResize = (arg: { local.inzone = true; }} onPointerMove={(e) => { - local.result = Math.max(0, local.size + e.clientX - local.sx); + local.result = Math.max( + arg.minSize, + local.size + e.clientX - local.sx + ); arg.onResize(local.result); }} onPointerUp={stopDrag} diff --git a/app/web/src/render/ed/panel/top/left/api.tsx b/app/web/src/render/ed/panel/top/left/api.tsx new file mode 100644 index 00000000..9a5a7f6b --- /dev/null +++ b/app/web/src/render/ed/panel/top/left/api.tsx @@ -0,0 +1,5 @@ +import { TopBtn } from "../top-btn"; + +export const EdApiConfig = () => { + return API; +}; diff --git a/app/web/src/render/ed/panel/top/left/export.tsx b/app/web/src/render/ed/panel/top/left/export.tsx new file mode 100644 index 00000000..9b458803 --- /dev/null +++ b/app/web/src/render/ed/panel/top/left/export.tsx @@ -0,0 +1,22 @@ +import { TopBtn } from "../top-btn"; + +export const EdExport = () => { + return ( + + + + + + ); +}; diff --git a/app/web/src/render/ed/panel/top/left/npm.tsx b/app/web/src/render/ed/panel/top/left/npm.tsx new file mode 100644 index 00000000..ae8ef38a --- /dev/null +++ b/app/web/src/render/ed/panel/top/left/npm.tsx @@ -0,0 +1,19 @@ +import { TopBtn } from "../top-btn"; + +export const EdNpmConfig = () => { + return ( + + + + + + ); +}; diff --git a/app/web/src/render/ed/panel/top/left/site.tsx b/app/web/src/render/ed/panel/top/left/site.tsx new file mode 100644 index 00000000..8f3fc852 --- /dev/null +++ b/app/web/src/render/ed/panel/top/left/site.tsx @@ -0,0 +1,19 @@ +import { useGlobal } from "web-utils"; +import { EDGlobal } from "../../../logic/ed-global"; +import { TopBtn } from "../top-btn"; + +export const EdSitePicker = () => { + const p = useGlobal(EDGlobal, "EDITOR"); + return ( + +
`, + }} + >
+
+ {p.site.name} +
+ + ); +}; diff --git a/app/web/src/render/ed/panel/top/top-btn.tsx b/app/web/src/render/ed/panel/top/top-btn.tsx new file mode 100644 index 00000000..1024e41d --- /dev/null +++ b/app/web/src/render/ed/panel/top/top-btn.tsx @@ -0,0 +1,41 @@ +import { ReactNode } from "react"; + +export const TopBtn = ({ + children, + className, + disabled, + underlight, +}: { + children: ReactNode; + className?: string; + disabled?: boolean; + underlight?: string; +}) => { + return ( +
+ {underlight && ( +
+ )} + {children} +
+ ); +}; 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 0d61fee8..d39a7e16 100644 --- a/app/web/src/render/ed/panel/tree/node/render.tsx +++ b/app/web/src/render/ed/panel/tree/node/render.tsx @@ -220,7 +220,7 @@ export const nodeRender: NodeRender = (node, prm) => { return; } - if (e.key.length === 1) { + if (e.key.length === 1 && !e.altKey && !e.metaKey && !e.shiftKey) { p.ui.tree.search_ref?.focus(); } }}