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

wip comps scope

This commit is contained in:
Rizky 2023-11-23 13:02:54 +07:00
parent cd5ef5cbda
commit 7eada6fde4
7 changed files with 131 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/srv/ws/sync/actions.ts
View File

@ -1,8 +1,11 @@
import { component, page } from "dbgen";
import { EComp, EPage, ESite } from "../../../web/src/nova/ed/logic/ed-global";
import {
EPage,
ESite,
IScopeComp
} from "../../../web/src/nova/ed/logic/ed-global";
import { IItem } from "../../../web/src/utils/types/item";
import { site_group } from "./actions/site_group";
import { activity } from "./entity/activity";
import { parseJs } from "./editor/parser/parse-js";
/*
@ -41,7 +44,7 @@ export const SyncActions = {
({}) as Record<string, Exclude<component, "content_tree">>,
group: async (id_site: string) =>
({}) as Record<string, { id: string; name: string; comps: string[] }>,
load: async (id: string) => ({}) as EComp | void,
load: async (id: string) => ({}) as IScopeComp | void,
},
page: {
list: async (id_site: string) =>

45
app/srv/ws/sync/actions/comp_load.ts
View File

@ -1,10 +1,53 @@
import { IScopeComp } from "../../../../web/src/nova/ed/logic/ed-global";
import { MItem } from "../../../../web/src/utils/types/item";
import { DComp } from "../../../../web/src/utils/types/root";
import { SAction } from "../actions";
import { loadComponent } from "../editor/load-component";
import { serverWalkLoad, serverWalkMap } from "../editor/load-page";
import { docs } from "../entity/docs";
import { gzipAsync } from "../entity/zlib";
import { SyncConnection } from "../type";
export const comp_load: SAction["comp"]["load"] = async function (
this: SyncConnection,
id: string
) {
return await loadComponent(id, this);
const root = await loadComponent(id, this);
let ref = docs.comp[id];
if (ref) {
return scanMeta(id, ref.doc, this);
}
};
const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {
const scope = {};
const scope_comps: IScopeComp = {};
const loaded = new Set<string>();
const root = doc.getMap("map").get("root");
if (root) {
const name = root.get("name") || "";
const childs = root.get("childs");
if (childs) {
await Promise.all(
childs.map((m) => serverWalkLoad(m, scope_comps, sync, loaded))
);
childs.map((m, i) => {
serverWalkMap(
{ sync, scope, scope_comps },
{
mitem: m,
parent_item: { id: "root" },
parent_ids: ["root"],
}
);
});
}
const bin = Y.encodeStateAsUpdate(doc as any);
const snapshot = await gzipAsync(bin);
scope_comps[id] = { id, name, scope, snapshot };
}
return scope_comps;
};

25
app/srv/ws/sync/editor/load-page.ts
View File

@ -96,32 +96,7 @@ export const serverWalkMap = (
const { mitem, parent_item, parent_mcomp } = arg;
const item = {} as unknown as IItem;
let override_id = "";
const id = mitem.get("id");
if (parent_mcomp && id) {
const fcomp = parent_mcomp.mitem.get("component");
if (fcomp) {
const ref_ids = fcomp.get("ref_ids");
if (ref_ids) {
let ref_id = ref_ids.get(id);
if (!ref_id) {
ref_id = createId();
ref_ids.set(id, ref_id);
}
override_id = ref_id;
}
}
}
mapItem(mitem, item);
if (override_id) {
item.id = override_id;
}
const item_comp = item.component;
const mitem_comp = mitem.get("component");

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

@ -127,7 +127,7 @@ export const EDGlobal = {
doc: null as null | DComp,
item: null as null | IItem,
map: {} as Record<string, { id: string; item: IItem }>,
list: {} as Record<string, { comp: EComp; doc: DComp }>,
list: {} as Record<string, { comp: EComp; doc: DComp; scope: IScope }>,
group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
},
ui: {

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

@ -1,4 +1,6 @@
import { compress, decompress } from "wasm-gzip";
import { IItem } from "../../../utils/types/item";
import { DComp } from "../../../utils/types/root";
import { PG } from "./ed-global";
import { treeRebuild } from "./tree/build";
@ -43,8 +45,21 @@ export const reloadPage = async (p: PG) => {
p.render();
return;
}
console.log(remotePage.scope, remotePage.scope_comps);
if (remotePage.scope_comps) {
for (const [id_comp, c] of Object.entries(remotePage.scope_comps)) {
if (c && c.snapshot) {
const doc = new Y.Doc() as DComp;
if (c.snapshot) {
Y.applyUpdate(doc as any, decompress(c.snapshot));
p.comp.map[id_comp] = {
id: id_comp,
item: doc.getMap("map").get("root")?.toJSON() as IItem,
};
p.comp.list[id_comp] = { comp: c, doc, scope: c.scope };
}
}
}
}
p.page.cur = remotePage;
if (remotePage.snapshot) {

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

@ -3,14 +3,15 @@ import { 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 { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
import { DComp } from "../../../../utils/types/root";
import { MSection } from "../../../../utils/types/section";
import { EdMeta, PG } from "../ed-global";
import { ensureMItemProps, ensureMProp, ensurePropContent } from "./sync-walk-utils";
import {
ensureMItemProps,
ensureMProp,
ensurePropContent,
} from "./sync-walk-utils";
export const syncWalkLoad = async (
p: PG,
@ -256,18 +257,23 @@ export const syncWalkMap = (
};
export const loadComponent = async (p: PG, id_comp: string) => {
const cur = await p.sync.comp.load(id_comp);
if (cur && cur.snapshot) {
const doc = new Y.Doc() as DComp;
if (cur.snapshot) {
Y.applyUpdate(doc as any, decompress(cur.snapshot));
p.comp.map[id_comp] = {
id: id_comp,
item: doc.getMap("map").get("root")?.toJSON() as IItem,
};
p.comp.list[id_comp] = { comp: cur, doc };
return true;
const comps = await p.sync.comp.load(id_comp);
if (comps) {
for (const cur of Object.values(comps)) {
if (cur && cur.snapshot) {
const doc = new Y.Doc() as DComp;
if (cur.snapshot) {
Y.applyUpdate(doc as any, decompress(cur.snapshot));
p.comp.map[id_comp] = {
id: id_comp,
item: doc.getMap("map").get("root")?.toJSON() as IItem,
};
p.comp.list[id_comp] = { comp: cur, doc, scope: cur.scope };
}
}
}
return true;
}
return false;
};

72
app/web/src/nova/ed/panel/tree/node/item/action.tsx
View File

@ -12,41 +12,51 @@ 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;
let mode = "";
if (item.adv?.js) mode = "js";
if (!mode && item.adv?.css) mode = "css";
if (!mode && item.adv?.html) mode = "html";
return (
<div className="flex items-center pr-1">
<div
className={cx(
"border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
item.adv?.js || item.adv?.css || item.adv?.html
? `opacity-100`
: cx(
`opacity-0 action-script transition-all`,
css`
&:hover {
opacity: 1 !important;
}
`
),
!(item.adv?.js || item.adv?.css || item.adv?.html) &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
item.adv?.js &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
item.adv?.css &&
`bg-green-100 border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
item.adv?.html &&
`bg-blue-100 border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
)}
onClick={() => {
p.ui.popup.script.open = true;
p.render();
}}
>
{!isComponent && (
<div
dangerouslySetInnerHTML={{
__html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
className={cx(
"border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
item.adv?.js || item.adv?.css || item.adv?.html
? `opacity-100`
: cx(
`opacity-0 action-script transition-all`,
css`
&:hover {
opacity: 1 !important;
}
`
),
!(item.adv?.js || item.adv?.css || item.adv?.html) &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "js" &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "css" &&
`bg-green-100 border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
mode === "html" &&
`bg-blue-100 border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
)}
onClick={() => {
p.ui.popup.script.open = true;
p.ui.popup.script.mode = (mode || "js") as any;
p.render();
}}
></div>
</div>
>
<div
dangerouslySetInnerHTML={{
__html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</div>
)}
</div>
);
};