midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
Rizky 2023-11-25 19:01:37 +07:00
parent 92de71ecdd
commit 3ee9550064
6 changed files with 136 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/web/src/nova/ed/logic/ed-global.ts
View File

@ -186,6 +186,7 @@ export const EDGlobal = {
scope: IScope;
tree: NodeModel<EdMeta>[];
meta: Record<string, EdMeta>;
on_update: (bin: Uint8Array, origin: any) => Promise<void>;
}
>,
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,

2
app/web/src/nova/ed/logic/ed-route.ts
View File

@ -2,7 +2,7 @@ import { compress, decompress } from "wasm-gzip";
import { PG } from "./ed-global";
import { loadSite } from "./ed-site";
import { treeRebuild } from "./tree/build";
import { loadCompSnapshot } from "./tree/sync-walk";
import { loadCompSnapshot } from "./tree/sync-walk-comp";
export const edRoute = async (p: PG) => {
if (p.status === "ready" || p.status === "init") {

102
app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx Normal file
View File

@ -0,0 +1,102 @@
import { NodeModel } from "@minoru/react-dnd-treeview";
import { compress, decompress } from "wasm-gzip";
import { DComp } from "../../../../utils/types/root";
import { EdMeta, IScope, PG, active } from "../ed-global";
import { treeRebuild } from "./build";
import { loadComponent, syncWalkLoad, syncWalkMap } from "./sync-walk";
import { MItem } from "../../../../utils/types/item";
export const loadCompSnapshot = async (
p: PG,
id_comp: string,
loaded: Set<string>,
snapshot: Uint8Array,
scope: IScope
) => {
if (loaded.has(id_comp)) {
return;
}
const doc = new Y.Doc() as DComp;
Y.applyUpdate(doc as any, decompress(snapshot));
const mitem = doc.getMap("map").get("root");
if (mitem) {
if (typeof p.comp.list[id_comp]?.on_update === "function") {
doc.off("update", p.comp.list[id_comp].on_update);
}
const { tree, meta } = await walkCompTree(p, mitem, loaded);
p.comp.list[id_comp] = {
comp: { id: id_comp, snapshot },
doc,
scope: scope,
meta,
tree,
async on_update(bin, origin) {
if (origin === "sv_remote" || origin === "local") return;
const res = await p.sync.yjs.sv_local(
"comp",
id_comp,
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");
const mitem = doc.getMap("map").get("root");
if (mitem) {
const { tree, meta } = await walkCompTree(p, mitem, loaded);
p.comp.list[id_comp].tree = tree;
p.comp.list[id_comp].meta = meta;
await treeRebuild(p);
if (active.comp_id === id_comp) {
p.comp.tree = tree;
}
}
await p.sync.yjs.diff_local(
"comp",
id_comp,
Buffer.from(compress(diff_local))
);
p.render();
}
},
};
doc.on("update", p.comp.list[id_comp].on_update);
}
};
const walkCompTree = async (p: PG, mitem: MItem, loaded: Set<string>) => {
const tree: NodeModel<EdMeta>[] = [];
const meta = {};
const portal = {
in: {} as Record<string, EdMeta>,
out: {} as Record<string, EdMeta>,
};
await syncWalkLoad(p, mitem, loaded, (id) => loadComponent(p, id, loaded));
syncWalkMap(
{
comps: p.comp.list,
item_loading: p.ui.tree.item_loading,
meta,
tree,
warn_component_loaded: false,
},
{
mitem,
isLayout: false,
parent_item: { id: "root" },
portal,
tree_root_id: "root",
}
);
return { tree, meta };
};

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

@ -1,18 +1,20 @@
import { NodeModel } from "@minoru/react-dnd-treeview";
import { createId } from "@paralleldrive/cuid2";
import { decompress } from "wasm-gzip";
import { compress, decompress } from "wasm-gzip";
import { TypedArray } from "yjs-types";
import { MContent } from "../../../../utils/types/general";
import { IItem, MItem } from "../../../../utils/types/item";
import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
import { DComp } from "../../../../utils/types/root";
import { MSection } from "../../../../utils/types/section";
import { EdMeta, IScope, PG } from "../ed-global";
import { EdMeta, IScope, PG, active } from "../ed-global";
import {
ensureMItemProps,
ensureMProp,
ensurePropContent,
} from "./sync-walk-utils";
import { treeRebuild } from "./build";
import { loadCompSnapshot } from "./sync-walk-comp";
export const syncWalkLoad = async (
p: PG,
@ -273,53 +275,6 @@ export const syncWalkMap = (
}
};
export const loadCompSnapshot = async (
p: PG,
id_comp: string,
loaded: Set<string>,
snapshot: Uint8Array,
scope: IScope
) => {
if (loaded.has(id_comp)) {
return;
}
const doc = new Y.Doc() as DComp;
Y.applyUpdate(doc as any, decompress(snapshot));
const mitem = doc.getMap("map").get("root");
if (mitem) {
await syncWalkLoad(p, mitem, loaded, (id) => loadComponent(p, id, loaded));
const tree: NodeModel<EdMeta>[] = [];
const meta = {};
const portal = {
in: {} as Record<string, EdMeta>,
out: {} as Record<string, EdMeta>,
};
syncWalkMap(
{
comps: p.comp.list,
item_loading: p.ui.tree.item_loading,
meta,
tree,
warn_component_loaded: false,
},
{
mitem,
isLayout: false,
parent_item: { id: "root" },
portal,
tree_root_id: "root",
}
);
p.comp.list[id_comp] = {
comp: { id: id_comp, snapshot },
doc,
scope: scope,
meta,
tree,
};
}
};
const loadcomp = { timeout: 0 as any, pending: new Set<string>() };
export const component = {
pending: null as null | Promise<void>,

1
app/web/src/nova/ed/panel/popup/script/scope.tsx
View File

@ -26,6 +26,7 @@ export const declareScope = async (
});
const existing: Record<string, IEachArgScope> = {};
spreadScope(p, s, (arg) => {
const { name } = arg;

30
app/web/src/nova/ed/panel/tree/node/item/name.tsx
View File

@ -1,7 +1,7 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
import { useGlobal, useLocal } from "web-utils";
import { useEffect } from "react";
import { FC, useEffect } from "react";
export const EdTreeName = ({
node,
@ -26,7 +26,7 @@ export const EdTreeName = ({
const isRenaming = p.ui.tree.rename_id === item.id;
return (
<div className="text-[14px] relative flex flex-col justify-center cursor-pointer flex-1">
<div className="text-[10px]">{item.id}</div>
{/* <div className="text-[10px]">{item.id}</div> */}
{isRenaming ? (
<input
@ -35,7 +35,7 @@ export const EdTreeName = ({
)}
autoFocus
spellCheck={false}
value={local.rename}
defaultValue={local.rename}
onFocus={(e) => {
e.currentTarget.select();
}}
@ -72,10 +72,32 @@ export const EdTreeName = ({
/>
) : (
<div className="flex flex-col">
{node.text}
<Name name={node.text} />
{/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
</div>
)}
</div>
);
};
const Name: FC<{ name: string }> = ({ name }) => {
if (name.startsWith("jsx=")) {
return (
<div className="flex items-center space-x-1">
<div
className="flex text-purple-500 items-center"
dangerouslySetInnerHTML={{
__html: `<svg width="25px" viewBox="0 0 98 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M95 22L77.755 2H2V42H77.755L95 22Z" stroke="currentColor" stroke-width="4"/>
<path d="M22.075 34.352C19.707 34.352 17.8296 33.7013 16.443 32.4C15.0776 31.0773 14.395 29.3067 14.395 27.088H18.395C18.395 28.2613 18.7256 29.1787 19.387 29.84C20.0483 30.5013 20.9443 30.832 22.075 30.832C23.2056 30.832 24.1016 30.512 24.763 29.872C25.4243 29.2107 25.755 28.2933 25.755 27.12V14.352H20.315V10.64H29.755V27.12C29.755 29.36 29.0616 31.1307 27.675 32.432C26.3096 33.712 24.443 34.352 22.075 34.352ZM42.2865 34.32C40.6865 34.32 39.2998 34.0533 38.1265 33.52C36.9531 32.9867 36.0465 32.2293 35.4065 31.248C34.7878 30.2453 34.4678 29.072 34.4465 27.728H38.4465C38.4465 28.688 38.7878 29.4453 39.4705 30C40.1745 30.5333 41.1238 30.8 42.3185 30.8C43.4705 30.8 44.3665 30.5333 45.0065 30C45.6678 29.4667 45.9985 28.7307 45.9985 27.792C45.9985 27.0027 45.7638 26.32 45.2945 25.744C44.8465 25.1467 44.1958 24.7413 43.3425 24.528L40.6545 23.792C38.8198 23.3227 37.4011 22.48 36.3985 21.264C35.4171 20.048 34.9265 18.576 34.9265 16.848C34.9265 15.5253 35.2251 14.3733 35.8225 13.392C36.4198 12.4107 37.2625 11.6533 38.3505 11.12C39.4598 10.5867 40.7611 10.32 42.2545 10.32C44.5158 10.32 46.3078 10.9067 47.6305 12.08C48.9531 13.232 49.6251 14.7893 49.6465 16.752H45.6465C45.6465 15.8347 45.3478 15.12 44.7505 14.608C44.1531 14.0747 43.3105 13.808 42.2225 13.808C41.1771 13.808 40.3665 14.0533 39.7905 14.544C39.2145 15.0347 38.9265 15.728 38.9265 16.624C38.9265 17.4347 39.1398 18.128 39.5665 18.704C40.0145 19.2587 40.6545 19.6533 41.4865 19.888L44.2705 20.656C46.1265 21.1253 47.5451 21.968 48.5265 23.184C49.5078 24.3787 49.9985 25.8613 49.9985 27.632C49.9985 28.9547 49.6785 30.128 49.0385 31.152C48.3985 32.1547 47.5025 32.9333 46.3505 33.488C45.1985 34.0427 43.8438 34.32 42.2865 34.32ZM52.706 34L59.17 22.032L53.09 10.64H57.57L60.514 16.496C60.7273 16.9227 60.9193 17.3387 61.09 17.744C61.2606 18.128 61.3886 18.4267 61.474 18.64C61.538 18.4267 61.6553 18.128 61.826 17.744C61.9966 17.3387 62.1886 16.9227 62.402 16.496L65.378 10.64H69.73L63.65 21.936L70.114 34H65.634L62.338 27.536C62.1246 27.1093 61.922 26.6933 61.73 26.288C61.5593 25.8827 61.4313 25.5627 61.346 25.328C61.2606 25.5627 61.1326 25.8827 60.962 26.288C60.7913 26.6933 60.5993 27.1093 60.386 27.536L57.058 34H52.706Z" fill="currentColor"/>
</svg>
`,
}}
></div>
<div>{name.substring(4)}</div>
</div>
);
}
return <div>{name}</div>;
};