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-12-11 20:36:17 +07:00
parent efafe38cdc
commit def09a9087
36 changed files with 355 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,18 @@
import { NodeModel } from "@minoru/react-dnd-treeview";
import { page } from "dbgen";
import { FC, ReactElement } from "react";
import { deepClone } from "web-utils";
import { SAction } from "../../../../../srv/ws/sync/actions";
import { parseJs } from "../../../../../srv/ws/sync/editor/parser/parse-js";
import { clientStartSync } from "../../../utils/sync/ws-client";
import { IItem, MItem } from "../../../utils/types/item";
import { IItem } from "../../../utils/types/item";
import { DComp, DPage } from "../../../utils/types/root";
import { ISection } from "../../../utils/types/section";
import { IText, MText } from "../../../utils/types/text";
import { PageItem } from "../panel/popup/page/page-tree";
import { FMCompDef } from "../../../utils/types/meta-fn";
import { IMeta, ISimpleMeta } from "../../view/logic/meta/types";
import {
GenMetaP,
IMeta as LogicMeta,
ISimpleMeta,
} from "../../view/logic/meta/types";
export type IMeta = LogicMeta;
export const EmptySite = {
id: "",
@ -20,7 +21,7 @@ export const EmptySite = {
config: { api_url: "" },
js: "",
js_compiled: "",
layout: { snapshot: null as null | Uint8Array, id: "" },
layout: { id: "", meta: {} as Record<string, IMeta>, entry: [] as string[] },
};
export type ESite = typeof EmptySite;
@ -113,38 +114,6 @@ export const active = {
},
};
export type EdMeta = {
item: IItem | IText | ISection;
mitem?: MItem | MText;
parent_item: {
id: string;
mitem?: MItem;
};
parent_mcomp?: {
minstance: MItem;
meta: EdMeta;
mcomp: MItem;
};
el?: ReactElement;
is_layout?: boolean;
jsx_prop_name?: string;
jsx_prop_root?: boolean;
/** script related meta **/
jsx_scope_id?: string;
propval?: Record<string, any>;
propvis?: Record<string, boolean>;
indexed_scope: Record<string, any>;
memoize?: Record<
string,
{
Local: FC<any>;
PassProp: FC<any>;
}
>;
scope?: Record<string, any>;
render?: () => void;
};
export const EDGlobal = {
mode: "" as "desktop" | "mobile",
user: { id: "", username: "", client_id: "" },
@ -179,23 +148,23 @@ export const EDGlobal = {
>,
scope: {} as IScope,
building: false,
meta: {} as Record<string, EdMeta>,
meta: {} as Record<string, IMeta>,
entry: [] as string[],
tree: [] as NodeModel<EdMeta>[],
tree: [] as NodeModel<IMeta>[],
render: () => {},
},
comp: {
doc: null as null | DComp,
item: null as null | IItem,
tree: [] as NodeModel<EdMeta>[],
tree: [] as NodeModel<IMeta>[],
loaded: {} as GenMetaP["comps"],
list: {} as Record<
string,
{
comp: EComp;
doc: DComp;
scope: IScope;
tree: NodeModel<EdMeta>[];
meta: Record<string, EdMeta>;
tree: NodeModel<IMeta>[];
meta: Record<string, IMeta>;
on_update: (bin: Uint8Array, origin: any) => Promise<void>;
}
>,

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

@ -47,15 +47,16 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
return;
}
p.page.scope = remotePage.scope || {};
if (remotePage.scope_comps) {
for (const [id_comp, c] of Object.entries(remotePage.scope_comps)) {
if (remotePage.comps) {
for (const [id_comp, c] of Object.entries(remotePage.comps)) {
if (c && c.snapshot) {
await loadCompSnapshot(p, id_comp, c.snapshot, c.scope);
await loadCompSnapshot(p, id_comp, c.snapshot);
}
}
}
p.page.entry = remotePage.entry;
p.page.cur = remotePage;
if (remotePage.snapshot) {
const doc = new Y.Doc();

69
app/web/src/nova/ed/logic/tree/build.tsx
View File

@ -1,7 +1,74 @@
import { deepClone } from "web-utils";
import { IItem, MItem } from "../../../../utils/types/item";
import { genMeta } from "../../../view/logic/meta/meta";
import { PG, active } from "../ed-global";
export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
console.log(p.comp.list);
const is_layout =
p.site.layout &&
p.site.layout.id === p.page.cur.id &&
arg?.note === "load-layout page-init";
for (const [k, v] of Object.entries(p.comp.list)) {
if (!p.comp.loaded[k]) {
const mcomp = v.doc.getMap("map").get("root");
const icomp = mcomp?.toJSON() as IItem | undefined;
if (icomp) {
p.comp.loaded[k] = {
comp: icomp,
mcomp,
};
}
}
}
const mroot = p.page.doc?.getMap("map").get("root");
const mitems: MItem[] = [];
mroot?.get("childs")?.forEach((m) => mitems.push(m));
const meta = {};
for (const mitem of mitems) {
const item = mitem.toJSON() as IItem;
if (item) {
genMeta(
{
comps: p.comp.loaded,
meta,
on: !is_layout
? {
visit(meta) {
},
}
: undefined,
},
{ item, mitem }
);
}
}
if (is_layout) {
p.site.layout.meta = meta;
} else {
let root_id = "root";
if (p.site.layout && p.site.layout.meta) {
for (const [_, v] of Object.entries(p.site.layout.meta)) {
if (v.item.component?.id) {
if (v.item.name === "content") {
root_id = v.item.id;
break;
}
}
}
p.page.root_id = root_id;
if (p.site.layout && p.site.layout.id === p.page.cur.id) {
p.page.meta = meta;
} else {
p.page.meta = { ...p.site.layout.meta, ...meta };
}
}
}
};
export const getMRoot = (p: PG) => {

14
app/web/src/nova/ed/logic/tree/load-walk.tsx
View File

@ -3,7 +3,7 @@
// import { IContent } from "../../../../utils/types/general";
// import { IItem } from "../../../../utils/types/item";
// import { FNComponent } from "../../../../utils/types/meta-fn";
// import { EdMeta, PG } from "../ed-global";
// import { IMeta, PG } from "../ed-global";
// export const walkLoad = async (
// p: { map: PG["comp"]["map"] },
@ -48,7 +48,7 @@
// export const walkMap = (
// p: {
// meta: Record<string, EdMeta>;
// meta: Record<string, IMeta>;
// comps: Record<string, { id: string; item: IItem }>;
// },
// arg: {
@ -56,10 +56,10 @@
// item: IContent;
// parent_item: { id: string };
// portal: {
// in: Record<string, EdMeta>;
// out: Record<string, EdMeta>;
// in: Record<string, IMeta>;
// out: Record<string, IMeta>;
// };
// each?: (meta: EdMeta) => void;
// each?: (meta: IMeta) => void;
// parent_comp?: { id: string; comp_id: string };
// }
// ) => {
@ -112,7 +112,7 @@
// item = deepClone(mcomp);
// item.id = original_id;
// const meta: EdMeta = {
// const meta: IMeta = {
// item,
// parent_item,
// idexed_scope: {},
@ -156,7 +156,7 @@
// return;
// }
// const meta: EdMeta = {
// const meta: IMeta = {
// item,
// parent_item,
// idexed_scope: {},

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

@ -2,7 +2,7 @@ import { NodeModel } from "@minoru/react-dnd-treeview";
import { compress, decompress } from "wasm-gzip";
import { MItem } from "../../../../utils/types/item";
import { DComp } from "../../../../utils/types/root";
import { EdMeta, IScope, PG, active } from "../ed-global";
import { IMeta, IScope, PG, active } from "../ed-global";
import { treeRebuild } from "./build";
import {
loadComponent,
@ -15,8 +15,7 @@ import { waitUntil } from "web-utils";
export const loadCompSnapshot = async (
p: PG,
id_comp: string,
snapshot: Uint8Array,
scope: IScope
snapshot: Uint8Array
) => {
const doc = new Y.Doc() as DComp;
Y.applyUpdate(doc as any, decompress(snapshot));
@ -29,7 +28,6 @@ export const loadCompSnapshot = async (
p.comp.list[id_comp] = {
comp: { id: id_comp, snapshot },
doc,
scope: scope,
} as any;
const { tree, meta } = await walkCompTree(p, mitem, id_comp);
@ -80,11 +78,11 @@ export const loadCompSnapshot = async (
};
const walkCompTree = async (p: PG, mitem: MItem, comp_id: string) => {
const tree: NodeModel<EdMeta>[] = [];
const tree: NodeModel<IMeta>[] = [];
const meta = {};
const portal = {
in: {} as Record<string, EdMeta>,
out: {} as Record<string, EdMeta>,
in: {} as Record<string, IMeta>,
out: {} as Record<string, IMeta>,
};
syncWalkLoad(p, mitem, (id) => loadComponent(p, id));
mitem.doc?.transact(() => {

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

@ -5,7 +5,7 @@ import { MContent } from "../../../../utils/types/general";
import { IItem, MItem } from "../../../../utils/types/item";
import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
import { MSection } from "../../../../utils/types/section";
import { EdMeta, IScope, PG } from "../ed-global";
import { IMeta, IScope, PG } from "../ed-global";
import { loadCompSnapshot } from "./sync-walk-comp";
import {
ensureMItemProps,
@ -60,9 +60,9 @@ export const syncWalkMap = (
p: {
note?: string;
item_loading: PG["ui"]["tree"]["item_loading"];
tree?: NodeModel<EdMeta>[];
tree?: NodeModel<IMeta>[];
comps: PG["comp"]["list"];
meta: Record<string, EdMeta>;
meta: Record<string, IMeta>;
component_not_found?: (comp_id: string) => void;
scope?: null | IScope;
},
@ -70,16 +70,16 @@ export const syncWalkMap = (
is_layout: boolean;
mitem: MItem | MSection;
portal: {
in: Record<string, EdMeta>;
out: Record<string, EdMeta>;
in: Record<string, IMeta>;
out: Record<string, IMeta>;
};
parent_item: EdMeta["parent_item"];
parent_mcomp?: EdMeta["parent_mcomp"];
parent_item: IMeta["parent_item"];
parent_mcomp?: IMeta["parent_mcomp"];
jsx_prop_name?: string;
jsx_prop_root?: boolean;
skip_add_tree?: boolean;
tree_root_id: string;
each?: (meta: EdMeta) => void;
each?: (meta: IMeta) => void;
}
) => {
const { mitem, parent_item } = arg;
@ -180,7 +180,7 @@ export const syncWalkMap = (
mapItem(mcomp, item, ref_ids);
item.id = old_id;
const meta: EdMeta = {
const meta: IMeta = {
item,
mitem: mitem as MItem,
parent_item,
@ -277,7 +277,7 @@ export const syncWalkMap = (
return;
}
const meta: EdMeta = {
const meta: IMeta = {
is_layout: arg.is_layout,
item,
jsx_prop_name: arg.jsx_prop_name,

340
app/web/src/nova/ed/panel/main/main.tsx
View File

@ -2,195 +2,185 @@ import { ReactNode, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { Loading } from "../../../../utils/ui/loading";
import { View } from "../../../view/view";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { EDGlobal, active } from "../../logic/ed-global";
import { getMetaById } from "../../logic/tree/build";
import { loadComponent } from "../../logic/tree/sync-walk";
import { code } from "../popup/code/code";
import { IMeta } from "../../../view/logic/meta/types";
export const EdMain = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
el: null as ReactNode,
});
active.hover.renderMain = local.render;
return <div className="flex-1"></div>;
// const p = useGlobal(EDGlobal, "EDITOR");
// const local = useLocal({
// el: null as ReactNode,
// });
// active.hover.renderMain = local.render;
if (code.mode && !p.page.building) {
local.el = (
<View
mode={p.mode}
code_mode={code.mode}
layout={{ show: false }}
isEditor={true}
api_url={p.site.config.api_url}
component={{
async load(id_comp) {
await loadComponent(p, id_comp);
},
}}
load={{
mode: "tree_meta",
meta: p.page.meta,
entry: p.page.entry,
scope: p.page.scope,
}}
site_id={p.site.id}
page_id={p.page.cur.id}
bind={({ render }) => {
p.page.render = render;
}}
hidden={(meta) => {
if (meta.item.hidden) return true;
return false;
}}
hover={{
get(meta) {
return false;
},
set(meta) {
const outer = getOuterItem(meta);
if (outer) {
if (active.hover.id !== outer.id) {
active.hover.id = outer.id;
active.hover.renderTree();
active.hover.renderMain();
}
}
},
}}
active={{
get(meta) {
return active.item_id === meta.item.id;
},
set(meta) {
const outer = getOuterItem(meta);
if (outer) {
active.item_id = outer.id;
}
// if (code.mode && !p.page.building) {
// local.el = (
// <View
// mode={p.mode}
// code_mode={code.mode}
// layout={{ show: false }}
// isEditor={true}
// api_url={p.site.config.api_url}
// component={{
// async load(id_comp) {
// await loadComponent(p, id_comp);
// },
// }}
// load={{
// mode: "tree_meta",
// meta: p.page.meta,
// entry: p.page.entry,
// scope: p.page.scope,
// }}
// site_id={p.site.id}
// page_id={p.page.cur.id}
// bind={({ render }) => {
// p.page.render = render;
// }}
// hidden={(meta) => {
// if (meta.item.hidden) return true;
// return false;
// }}
// hover={{
// get(meta) {
// return false;
// },
// set(meta) {
// const outer = getOuterItem(meta);
// if (outer) {
// if (active.hover.id !== outer.id) {
// active.hover.id = outer.id;
// active.hover.renderTree();
// active.hover.renderMain();
// }
// }
// },
// }}
// active={{
// get(meta) {
// return active.item_id === meta.item.id;
// },
// set(meta) {
// const outer = getOuterItem(meta);
// if (outer) {
// active.item_id = outer.id;
// }
p.render();
p.page.render();
focus();
},
text({ meta }) {
const { item } = meta;
// p.render();
// p.page.render();
// focus();
// },
// text({ meta }) {
// const { item } = meta;
useEffect(() => {
return () => {
active.text.id = "";
p.render();
};
}, []);
// useEffect(() => {
// return () => {
// active.text.id = "";
// p.render();
// };
// }, []);
const updateWithTimeout = (timeout: number) => {
return new Promise<void>((resolve) => {
const saving = {
id: active.text.id,
content: active.text.content,
};
// const updateWithTimeout = (timeout: number) => {
// return new Promise<void>((resolve) => {
// const saving = {
// id: active.text.id,
// content: active.text.content,
// };
clearTimeout(active.text.timeout);
active.text.timeout = setTimeout(() => {
const meta = getMetaById(p, saving.id);
if (meta && meta.mitem) {
meta.mitem.set("html", saving.content);
}
resolve();
}, timeout);
});
};
// clearTimeout(active.text.timeout);
// active.text.timeout = setTimeout(() => {
// const meta = getMetaById(p, saving.id);
// if (meta && meta.mitem) {
// meta.mitem.set("html", saving.content);
// }
// resolve();
// }, timeout);
// });
// };
if (active.text.id !== item.id) {
clearTimeout(active.text.timeout);
active.text.id = item.id;
active.text.content = item.html || "";
active.text.el = (
<div
className={cx(
`v-text-${item.id} v-text-${item.originalId} outline-none`
)}
ref={(ref) => {
if (ref !== document.activeElement && ref) {
const renaming = document.querySelector(".rename-item");
const modals = document.querySelectorAll(
"[data-floating-ui-portal]"
);
if (modals.length === 0 && !renaming) {
ref.focus();
setEndOfContenteditable(ref);
}
}
}}
onPointerDownCapture={(e) => {
e.stopPropagation();
}}
contentEditable
spellCheck={false}
onInput={(e) => {
const val = e.currentTarget.innerHTML;
item.html = val;
active.text.id = item.id;
active.text.content = val;
updateWithTimeout(100);
}}
dangerouslySetInnerHTML={{ __html: item.html || "" }}
></div>
);
}
// if (active.text.id !== item.id) {
// clearTimeout(active.text.timeout);
// active.text.id = item.id;
// active.text.content = item.html || "";
// active.text.el = (
// <div
// className={cx(
// `v-text-${item.id} v-text-${item.originalId} outline-none`
// )}
// ref={(ref) => {
// if (ref !== document.activeElement && ref) {
// const renaming = document.querySelector(".rename-item");
// const modals = document.querySelectorAll(
// "[data-floating-ui-portal]"
// );
// if (modals.length === 0 && !renaming) {
// ref.focus();
// setEndOfContenteditable(ref);
// }
// }
// }}
// onPointerDownCapture={(e) => {
// e.stopPropagation();
// }}
// contentEditable
// spellCheck={false}
// onInput={(e) => {
// const val = e.currentTarget.innerHTML;
// item.html = val;
// active.text.id = item.id;
// active.text.content = val;
// updateWithTimeout(100);
// }}
// dangerouslySetInnerHTML={{ __html: item.html || "" }}
// ></div>
// );
// }
return active.text.el;
},
}}
/>
);
}
// return active.text.el;
// },
// }}
// />
// );
// }
return (
<div
className={cx(
"flex flex-1 relative overflow-auto ",
css`
contain: content;
`,
active.hover.id &&
active.hover.id !== active.item_id &&
css`
.s-${active.hover.id} {
position: relative;
// return (
// <div
// className={cx(
// "flex flex-1 relative overflow-auto ",
// css`
// contain: content;
// `,
// active.hover.id &&
// active.hover.id !== active.item_id &&
// css`
// .s-${active.hover.id} {
// position: relative;
&::after {
content: " ";
pointer-events: none;
position: absolute;
z-index: 100;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 2px solid #b2d2fd;
}
}
`
)}
>
{/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
<div className="absolute inset-0 flex flex-col">
{!!p.page.building && <Loading backdrop={false} />}
{!p.page.building && code.mode !== "" && local.el}
</div>
</div>
);
};
const getOuterItem = (meta: EdMeta) => {
let cur: undefined | EdMeta = meta;
if (cur.jsx_prop_name) return meta.item;
while (cur.parent_mcomp) {
cur = cur.parent_mcomp.meta;
}
return cur.item;
// &::after {
// content: " ";
// pointer-events: none;
// position: absolute;
// z-index: 100;
// left: 0;
// right: 0;
// bottom: 0;
// top: 0;
// border: 2px solid #b2d2fd;
// }
// }
// `
// )}
// >
// {/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
// <div className="absolute inset-0 flex flex-col">
// {!!p.page.building && <Loading backdrop={false} />}
// {!p.page.building && code.mode !== "" && local.el}
// </div>
// </div>
// );
};
function setEndOfContenteditable(div: any) {

6
app/web/src/nova/ed/panel/popup/comp/comp-preview-tree.tsx
View File

@ -6,17 +6,17 @@ import {
} from "@minoru/react-dnd-treeview";
import { FC, useEffect } from "react";
import { HTML5Backend } from "react-dnd-html5-backend";
import { EDGlobal, EdMeta } from "../../../logic/ed-global";
import { EDGlobal, IMeta } from "../../../logic/ed-global";
import { compPicker } from "./comp-reload";
import { nodeRender } from "../../tree/node/render";
import { useGlobal, useLocal } from "web-utils";
export const EdCompPreviewTree: FC<{ tree: NodeModel<EdMeta>[] }> = ({
export const EdCompPreviewTree: FC<{ tree: NodeModel<IMeta>[] }> = ({
tree,
}) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ ref: null as any });
const TypedTree = DNDTree<EdMeta>;
const TypedTree = DNDTree<IMeta>;
useEffect(() => {
if (local.ref) local.ref.openAll();

4
app/web/src/nova/ed/panel/popup/script/monaco.tsx
View File

@ -7,7 +7,7 @@ import { useGlobal, useLocal } from "web-utils";
import { jscript } from "../../../../../utils/script/jscript";
import { jsMount } from "../../../../../utils/script/mount";
import { monacoTypings } from "../../../../../utils/script/typings";
import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
import { getMetaById } from "../../../logic/tree/build";
import { declareScope } from "./scope";
@ -32,7 +32,7 @@ export const ScriptMonaco = () => {
const Editor = jscript.editor;
if (!Editor) return null;
let meta: EdMeta | null = p.page.meta[active.item_id];
let meta: IMeta | null = p.page.meta[active.item_id];
if (active.comp_id) {
if (p.comp.list[active.comp_id]) {
meta = p.comp.list[active.comp_id].meta[active.item_id];

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

@ -2,7 +2,7 @@ import type { OnMount } from "@monaco-editor/react";
import { deepClone } from "web-utils";
import {
EPage,
EdMeta,
IMeta,
ISingleScope,
PG,
active,
@ -13,7 +13,7 @@ export type MonacoEditor = Parameters<OnMount>[0];
export const declareScope = async (
p: PG,
meta: EdMeta,
meta: IMeta,
editor: MonacoEditor,
monaco: Monaco
) => {

4
app/web/src/nova/ed/panel/side/prop-instance.tsx
View File

@ -3,13 +3,13 @@ import { useGlobal, useLocal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FMCompDef } from "../../../../utils/types/meta-fn";
import { Menu, MenuItem } from "../../../../utils/ui/context-menu";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../logic/ed-global";
import { EdPropInstanceCode } from "./prop-instance/prop-code";
import { EdPropInstanceOptions } from "./prop-instance/prop-option";
import { reset } from "./prop-instance/prop-reset";
import { EdPropInstanceText } from "./prop-instance/prop-text";
export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
rightClickEvent: null as any,

4
app/web/src/nova/ed/panel/side/prop-master.tsx
View File

@ -10,7 +10,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
import { useGlobal, useLocal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FMCompDef } from "../../../../utils/types/meta-fn";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../logic/ed-global";
import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
import { propPopover } from "./prop-master/prop-form";
@ -18,7 +18,7 @@ const propRef = {
el: null as any,
};
export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({});
const item = meta?.item as IItem;

4
app/web/src/nova/ed/panel/side/side-style.tsx
View File

@ -1,10 +1,10 @@
import { FC } from "react";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../logic/ed-global";
import { useGlobal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { EdSidePropComp } from "./prop-master";
export const EdSideStyle: FC<{ meta: EdMeta }> = ({ meta }) => {
export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const item = meta?.item as IItem;

12
app/web/src/nova/ed/panel/tree/body.tsx
View File

@ -7,7 +7,7 @@ import {
} from "@minoru/react-dnd-treeview";
import { FC } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../logic/ed-global";
import { DEPTH_WIDTH } from "./node/item/indent";
import { expandTreeHook } from "./node/item/indent-hook";
import { canDrop, nodeOnDrop } from "./node/on-drop";
@ -17,7 +17,7 @@ import { doTreeSearch } from "./search";
export const EdTreeBody = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ tree: null as TreeMethods | null, comp_id: "" });
const TypedTree = DNDTree<EdMeta>;
const TypedTree = DNDTree<IMeta>;
active.hover.renderTree = local.render;
@ -31,7 +31,7 @@ export const EdTreeBody = () => {
}
}
let tree: NodeModel<EdMeta>[] = [];
let tree: NodeModel<IMeta>[] = [];
if (p.ui.tree.search) {
tree = doTreeSearch(p);
} else {
@ -114,7 +114,7 @@ const treeClasses = {
`,
};
export const DragPreview: DragPreviewRender<EdMeta> = (props) => {
export const DragPreview: DragPreviewRender<IMeta> = (props) => {
const item = props.item;
return (
@ -127,8 +127,8 @@ export const DragPreview: DragPreviewRender<EdMeta> = (props) => {
};
export const Placeholder: FC<{
node: Parameters<PlaceholderRender<EdMeta>>[0];
params: Parameters<PlaceholderRender<EdMeta>>[1];
node: Parameters<PlaceholderRender<IMeta>>[0];
params: Parameters<PlaceholderRender<IMeta>>[1];
}> = ({ params }) => {
return (
<div

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

@ -1,13 +1,13 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { useGlobal } from "web-utils";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { EDGlobal, EdMeta, active } from "../../../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
export const EdTreeAction = ({
node,
prm,
}: {
node: NodeModel<EdMeta>;
node: NodeModel<IMeta>;
prm: RenderParams;
}) => {
const p = useGlobal(EDGlobal, "EDITOR");

4
app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx
View File

@ -3,7 +3,7 @@ import { useGlobal, useLocal } from "web-utils";
import { IItem } from "../../../../../../utils/types/item";
import { FNComponent } from "../../../../../../utils/types/meta-fn";
import { Menu, MenuItem } from "../../../../../../utils/ui/context-menu";
import { EDGlobal, EdMeta, active } from "../../../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
import { edActionAttach } from "./action/attach";
import { edActionClone } from "./action/clone";
import { edActionCopy } from "./action/copy";
@ -24,7 +24,7 @@ export const EdTreeCtxMenu = ({
onClose,
}: {
event: React.MouseEvent<HTMLDivElement, MouseEvent>;
node: NodeModel<EdMeta>;
node: NodeModel<IMeta>;
prm: RenderParams;
onClose: () => void;
}) => {

4
app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts
View File

@ -1,6 +1,6 @@
import { TreeMethods } from "@minoru/react-dnd-treeview";
import { useEffect } from "react";
import { EdMeta, PG, active } from "../../../../logic/ed-global";
import { IMeta, PG, active } from "../../../../logic/ed-global";
import { getMetaById } from "../../../../logic/tree/build";
export const expandTreeHook = (
@ -26,7 +26,7 @@ export const expandTreeHook = (
if (id) {
shouldOpen.add(id);
let meta: EdMeta | undefined = getMetaById(p, id);
let meta: IMeta | undefined = getMetaById(p, id);
while (meta) {
const id = meta.parent_item.id;
if (id && !shouldOpen.has(id)) {

4
app/web/src/nova/ed/panel/tree/node/item/indent.tsx
View File

@ -1,12 +1,12 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
import { EDGlobal, IMeta } from "../../../../logic/ed-global";
import { useGlobal } from "web-utils";
export const DEPTH_WIDTH = 5;
export const EdTreeIndent = ({
node,
prm,
}: {
node: NodeModel<EdMeta>;
node: NodeModel<IMeta>;
prm: RenderParams;
}) => {
const p = useGlobal(EDGlobal, "EDITOR");

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

@ -1,14 +1,14 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { FC, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
import { EDGlobal, IMeta } from "../../../../logic/ed-global";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
export const EdTreeName = ({
node,
prm,
}: {
node: NodeModel<EdMeta>;
node: NodeModel<IMeta>;
prm: RenderParams;
}) => {
const p = useGlobal(EDGlobal, "EDITOR");

10
app/web/src/nova/ed/panel/tree/node/on-drop.tsx
View File

@ -1,14 +1,14 @@
import { DropOptions, NodeModel } from "@minoru/react-dnd-treeview";
import get from "lodash.get";
import { MContent } from "../../../../../utils/types/general";
import { EdMeta, PG, active } from "../../../logic/ed-global";
import { IMeta, PG, active } from "../../../logic/ed-global";
import { getMetaById } from "../../../logic/tree/build";
import { fillID } from "../../../logic/tree/fill-id";
export const nodeOnDrop: (
p: PG,
tree: NodeModel<EdMeta>[],
options: DropOptions<EdMeta>
tree: NodeModel<IMeta>[],
options: DropOptions<IMeta>
) => void = (p, tree, options) => {
const { dragSource, dropTarget, relativeIndex, dragSourceId, dropTargetId } =
options;
@ -47,7 +47,7 @@ export const nodeOnDrop: (
}
};
export const canDrop = (p: PG, arg: DropOptions<EdMeta>) => {
export const canDrop = (p: PG, arg: DropOptions<IMeta>) => {
const { dragSource, dragSourceId, dropTargetId, dropTarget } = arg;
try {
const parentSource: MContent | undefined = get(
@ -69,7 +69,7 @@ export const canDrop = (p: PG, arg: DropOptions<EdMeta>) => {
const to = dropTarget.data.item.type;
if (from === "section" || from === "item") {
let parent: EdMeta | undefined = dropTarget.data;
let parent: IMeta | undefined = dropTarget.data;
while (parent) {
if (parent.item.id === dragSource.data.item.id) {
return false;

4
app/web/src/nova/ed/panel/tree/node/render.tsx
View File

@ -1,7 +1,7 @@
import { NodeRender } from "@minoru/react-dnd-treeview";
import { useGlobal, useLocal } from "web-utils";
import { Loading } from "../../../../../utils/ui/loading";
import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
import { getMetaById } from "../../../logic/tree/build";
import { EdTreeAction } from "./item/action";
import { EdTreeCtxMenu } from "./item/ctx-menu";
@ -11,7 +11,7 @@ import { treeItemKeyMap } from "./key-map";
const jsxPropVis = {} as Record<string, string>;
export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
export const nodeRender: NodeRender<IMeta> = (node, prm) => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
rightClick: null as null | React.MouseEvent<HTMLDivElement, MouseEvent>,

4
app/web/src/nova/ed/panel/tree/search.tsx
View File

@ -1,7 +1,7 @@
import { NodeModel } from "@minoru/react-dnd-treeview";
import { useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta, PG, active } from "../../logic/ed-global";
import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
import { fuzzy } from "../../../../utils/ui/fuzzy";
export const EdTreeSearch = () => {
@ -100,7 +100,7 @@ export const EdTreeSearch = () => {
};
export const doTreeSearch = (p: PG) => {
let tree: Record<string, { idx: number; node: NodeModel<EdMeta> }> = {};
let tree: Record<string, { idx: number; node: NodeModel<IMeta> }> = {};
if (p.ui.tree.search_mode.Name) {
const found = fuzzy(p.page.tree, "text", p.ui.tree.search);

14
app/web/src/nova/view/logic/global.ts
View File

@ -1,12 +1,12 @@
import { ReactElement, ReactNode } from "react";
import { EdMeta, IScope } from "../../ed/logic/ed-global";
import { IMeta, IScope } from "../../ed/logic/ed-global";
export const ViewGlobal = {
mode: "" as "desktop" | "mobile",
status: "init" as "init" | "load-code" | "loading-code" | "ready" | "rebuild",
current: { site_id: "", page_id: "" },
layout: { show: false },
meta: {} as Record<string, EdMeta>,
meta: {} as Record<string, IMeta>,
scope: null as null | IScope,
entry: [] as string[],
body_cache: null as null | ReactElement,
@ -19,17 +19,17 @@ export const ViewGlobal = {
api: null as any,
},
view: {
hidden: undefined as undefined | ((meta: EdMeta) => boolean),
hidden: undefined as undefined | ((meta: IMeta) => boolean),
active: undefined as
| undefined
| {
get: (meta: EdMeta) => boolean;
set: (meta: EdMeta) => void;
text?: (arg: { meta: EdMeta }) => ReactNode;
get: (meta: IMeta) => boolean;
set: (meta: IMeta) => void;
text?: (arg: { meta: IMeta }) => ReactNode;
},
hover: undefined as
| undefined
| { get: (meta: EdMeta) => boolean; set: (meta: EdMeta) => void },
| { get: (meta: IMeta) => boolean; set: (meta: IMeta) => void },
},
};

10
app/web/src/nova/view/logic/meta/comp.tsx
View File

@ -4,7 +4,7 @@ import { instantiate } from "./comp/instantiate";
import { walkProp } from "./comp/walk-prop";
import { genMeta } from "./meta";
import { applyRefIds } from "./ref-ids";
import { simplifyItem } from "./simplify";
import { simplifyItemChild } from "./simplify";
import { GenMetaArg, GenMetaP, IMeta } from "./types";
export const genComp = (
@ -16,10 +16,14 @@ export const genComp = (
const mitem = arg.mitem as MItem | undefined;
if (item.type === "item" && item.component?.id && arg.parent?.item.id) {
let pcomp = p.comps[item.component.id];
if (!pcomp && p.on?.visit_component) {
if (p.on?.visit_component) {
p.on.visit_component(item.component.id);
}
if (!pcomp) {
return;
}
if (pcomp) {
const ref_ids = r?.ref_ids || item.component?.ref_ids || {};
let mref_ids = r?.mref_ids || mitem?.get("component")?.get("ref_ids");
@ -32,7 +36,7 @@ export const genComp = (
instantiate(item, pcomp.comp, ref_ids, mref_ids);
const meta: IMeta = {
item: simplifyItem(item),
item: simplifyItemChild(item),
parent: {
id: arg.parent.item.id,
instance_id: arg.parent?.instance?.id,

3
app/web/src/nova/view/logic/meta/comp/init-load-comp.tsx
View File

@ -13,8 +13,9 @@ export const initLoadComp = async (
...p,
on: {
visit_component: async (id) => {
if (!p.comps[id]) {
comp_ids.push(id);
return { item: null as any };
}
},
},
set_meta: false,

4
app/web/src/nova/view/logic/meta/meta.tsx
View File

@ -1,7 +1,7 @@
import { IItem, MItem } from "../../../../utils/types/item";
import { genComp } from "./comp";
import { applyRefIds } from "./ref-ids";
import { simplifyItem } from "./simplify";
import { simplifyItemChild } from "./simplify";
import { GenMetaArg, GenMetaP, IMeta } from "./types";
export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
@ -28,7 +28,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
}
const meta: IMeta = {
item: simplifyItem(item),
item: simplifyItemChild(item),
parent: {
id: arg.parent?.item.id || "root",
instance_id: arg.parent?.instance?.id,

2
app/web/src/nova/view/logic/meta/simplify.tsx
View File

@ -1,7 +1,7 @@
import { IItem } from "../../../../utils/types/item";
import { IMeta, ISimpleMeta } from "./types";
export const simplifyItem = (item: IItem) => {
export const simplifyItemChild = (item: IItem) => {
const newitem = {} as any;
for (const [k, v] of Object.entries(item)) {
if (k === "childs") {

4
app/web/src/nova/view/logic/types.ts
View File

@ -1,4 +1,4 @@
import { EdMeta, IScope, PG } from "../../ed/logic/ed-global";
import { IMeta, IScope, PG } from "../../ed/logic/ed-global";
export type VLoad =
| { mode: "page"; page_id: string }
@ -7,7 +7,7 @@ export type VLoad =
mode: "tree_meta";
entry: string[];
scope?: IScope;
meta: Record<string, EdMeta>;
meta: Record<string, IMeta>;
};
export type VLoadComponent = {

4
app/web/src/nova/view/render/meta/children.tsx
View File

@ -1,11 +1,11 @@
import { FC, Fragment, ReactNode } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EdMeta } from "../../../ed/logic/ed-global";
import { IMeta } from "../../../ed/logic/ed-global";
import { ViewGlobal } from "../../logic/global";
import { ViewMeta } from "./meta";
export const ViewMetaChildren: FC<{
meta: EdMeta;
meta: IMeta;
className?: string;
}> = ({ meta, className }) => {
const v = useGlobal(ViewGlobal, "VIEW");

4
app/web/src/nova/view/render/meta/render.tsx
View File

@ -1,11 +1,11 @@
import { FC } from "react";
import { produceCSS } from "../../../../utils/css/gen";
import { EdMeta } from "../../../ed/logic/ed-global";
import { IMeta } from "../../../ed/logic/ed-global";
import { VG } from "../../logic/global";
import { ViewMetaChildren } from "./children";
export const ViewMetaRender: FC<{
meta: EdMeta;
meta: IMeta;
v: VG;
props?: any;
className?: string;

6
app/web/src/nova/view/render/meta/script/comp-propval.tsx
View File

@ -1,7 +1,7 @@
import { createAPI, createDB } from "../../../../../utils/script/init-api";
import { IItem } from "../../../../../utils/types/item";
import { FNCompDef } from "../../../../../utils/types/meta-fn";
import { EdMeta } from "../../../../ed/logic/ed-global";
import { IMeta } from "../../../../ed/logic/ed-global";
import { VG } from "../../../logic/global";
import { extractNavigate, preload } from "../../../logic/router";
import { ViewMeta } from "../meta";
@ -10,7 +10,7 @@ import { mergeScopeUpwards } from "./merge-upward";
const jsxProps = {} as Record<string, any>;
export const compPropVal = (
v: VG,
meta: EdMeta,
meta: IMeta,
scopeIndex?: Record<string, any>
) => {
let props = {} as Record<string, FNCompDef>;
@ -76,7 +76,7 @@ export const compPropVal = (
scopeIndex?: Record<string, any>;
}) => {
if (prop.content) {
const meta = v.meta[prop.content.id] as EdMeta;
const meta = v.meta[prop.content.id] as IMeta;
let parent = v.meta[parent_id];
if (meta && parent) {

4
app/web/src/nova/view/render/meta/script/create-local.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode, useEffect, useState } from "react";
import { deepClone } from "web-utils";
import { EdMeta } from "../../../../ed/logic/ed-global";
import { IMeta } from "../../../../ed/logic/ed-global";
import { VG } from "../../../logic/global";
import { modifyChildScopeIndex } from "./mod-scope-index";
@ -31,7 +31,7 @@ export const createLocal = (
deps?: any[];
cache?: boolean;
}) => {
const meta = v.meta[id] as EdMeta;
const meta = v.meta[id] as IMeta;
const [_, set] = useState({});
let scope = null as any;

4
app/web/src/nova/view/render/meta/script/error-box.tsx
View File

@ -1,6 +1,6 @@
import { useErrorBoundary, withErrorBoundary } from "react-use-error-boundary";
import { useGlobal, useLocal } from "web-utils";
import { EdMeta } from "../../../../ed/logic/ed-global";
import { IMeta } from "../../../../ed/logic/ed-global";
import { ViewGlobal } from "../../../logic/global";
export const ErrorBox = withErrorBoundary(
@ -11,7 +11,7 @@ export const ErrorBox = withErrorBoundary(
silent,
}: {
children: any;
meta?: EdMeta;
meta?: IMeta;
id?: string;
silent?: boolean;
}) => {

4
app/web/src/nova/view/render/meta/script/merge-upward.tsx
View File

@ -1,11 +1,11 @@
import { EdMeta } from "../../../../ed/logic/ed-global";
import { IMeta } from "../../../../ed/logic/ed-global";
import { VG } from "../../../logic/global";
export const mergeScopeUpwards = (
v: VG,
id: string,
scopeIndex?: Record<string, any>,
each?: (meta: EdMeta, values: Record<string, any>) => boolean
each?: (meta: IMeta, values: Record<string, any>) => boolean
) => {
const meta = v.meta[id];

12
app/web/src/nova/view/view.tsx
View File

@ -1,7 +1,7 @@
import { FC, ReactNode, Suspense } from "react";
import { useGlobal } from "web-utils";
import { Loading } from "../../utils/ui/loading";
import { EdMeta } from "../ed/logic/ed-global";
import { IMeta } from "../ed/logic/ed-global";
import { ViewGlobal } from "./logic/global";
import { vInit } from "./logic/init";
import { newLoadCode } from "./logic/load-code-new";
@ -21,12 +21,12 @@ type ViewProp = {
layout?: { show: boolean };
isEditor?: boolean;
bind?: (arg: { render: () => void }) => void;
hidden?: (item: EdMeta) => boolean;
hover?: { get: (item: EdMeta) => boolean; set: (meta: EdMeta) => void };
hidden?: (item: IMeta) => boolean;
hover?: { get: (item: IMeta) => boolean; set: (meta: IMeta) => void };
active?: {
get: (item: EdMeta) => boolean;
set: (item: EdMeta) => void;
text?: (arg: { meta: EdMeta }) => ReactNode;
get: (item: IMeta) => boolean;
set: (item: IMeta) => void;
text?: (arg: { meta: IMeta }) => ReactNode;
};
};

2
pkgs/web-utils/src/use-global.ts
View File

@ -43,7 +43,7 @@ export const useGlobal = <T extends object>(
const { global, render } = ctx;
if (!global[_id]) {
global[_id] = deepClone(defaultValue);
global[_id] = defaultValue;
}
useEffect(() => {