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

wip fix

This commit is contained in:
Rizky 2024-01-22 18:53:47 +07:00
parent c83e459a4c
commit 0bcbac81d4
13 changed files with 336 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,7 +125,7 @@ export const SyncActions = {
prop_name: string;
value: Uint8Array;
}
) => ({}) as boolean | ParsedScope,
) => ({}) as boolean | ParsedScope | string,
parse: async (code: string | Record<string, string>) =>
({}) as Record<string, ReturnType<typeof parseJs>>,
},

12
app/srv/ws/sync/actions/code_edit.ts
View File

@ -41,6 +41,7 @@ export const code_edit: SAction["code"]["edit"] = async function (
if (mitem) {
if (arg.type === "adv") {
try {
const res = await transform(`render(${src})`, {
jsx: "transform",
format: "cjs",
@ -76,6 +77,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
}
}
});
} catch (e: any) {
return e.message.toString();
}
} else {
const mprop = mitem
.get("component")
@ -94,7 +98,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
mprop.set("value", src);
mprop.set("valueBuilt", res.code.substring(6));
});
} catch (e) {}
} catch (e: any) {
return e.message.toString();
}
}
}
}
@ -134,8 +140,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
}
}
});
} catch (e) {
g.log.error(e);
} catch (e: any) {
return e.message.toString();
}
}
}

24
app/web/src/nova/ed/ed-base.tsx
View File

@ -28,7 +28,7 @@ export const EdBase = () => {
edRoute(p);
if (p.status === "post-init") {
if (p.status === "load-site") {
return <Loading note={`page-${p.status}`} />;
}
if (p.status === "site-not-found" || p.status === "page-not-found") {
@ -47,7 +47,12 @@ export const EdBase = () => {
<EdPane type="left" min_size={200} />
<div className="flex flex-1 flex-col items-stretch">
<EdMid />
<div className="flex flex-1 items-stretch">
<div
className={cx(
"flex flex-1 items-stretch",
p.mode === "mobile" ? mobileCSS : "bg-white"
)}
>
<EdMain />
<EdPane type="right" min_size={240} />
<EdRight />
@ -138,3 +143,18 @@ const style = css`
}
}
`;
export const mobileCSS = css`
background-color: white;
background-image: linear-gradient(45deg, #fafafa 25%, transparent 25%),
linear-gradient(-45deg, #fafafa 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #fafafa 75%),
linear-gradient(-45deg, transparent 75%, #fafafa 75%);
background-size: 20px 20px;
background-position:
0 0,
0 10px,
10px -10px,
-10px 0px;
`;

2
app/web/src/nova/ed/ed-right.tsx
View File

@ -19,7 +19,7 @@ export const EdRight = () => {
css`
width: ${p.ui.layout.right}px;
`,
"border-l flex flex-col"
"border-l flex flex-col bg-white"
)}
>
{!meta ? (

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

@ -132,7 +132,7 @@ export const EDGlobal = {
clients: {} as Record<string, { id: string; username: string }>,
status: "init" as
| "init"
| "post-init"
| "load-site"
| "reload"
| "site-not-found"
| "page-not-found"
@ -228,6 +228,8 @@ export const EDGlobal = {
prop_kind: "" as PropFieldKind,
prop_name: "",
on_close: () => {},
typings: { status: "ok" as "ok" | "loading" | "error", err_msg: "" },
wb_render: () => {},
},
site: null as null | ((site_id: string) => void | Promise<void>),
site_form: null as null | {

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

@ -8,7 +8,7 @@ import { treeRebuild } from "./tree/build";
export const edRoute = async (p: PG) => {
if (p.status === "ready" || p.status === "init") {
if (!p.site.domain && !p.site.name) {
p.status = "post-init";
p.status = "load-site";
const site = await p.sync.site.load(p.site.id);
if (!site) {
p.status = "site-not-found";

25
app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx
View File

@ -7,11 +7,9 @@ export const ResponsiveToggle = () => {
const c = useGlobal(EDGlobal, "EDITOR");
const mode = c.mode;
const activeModeClassName = "border-b-2 border-blue-500";
return (
<ToolbarBox
className="flex"
items={[
{
const box = {
mobile: {
onClick() {
c.mode = "mobile";
w.isMobile = true;
@ -37,7 +35,7 @@ export const ResponsiveToggle = () => {
</svg>
),
},
{
desktop: {
onClick() {
c.mode = "desktop";
w.isMobile = false;
@ -63,7 +61,16 @@ export const ResponsiveToggle = () => {
</svg>
),
},
]}
/>
);
};
const items: any[] = [];
if (c.site.responsive === "mobile-only") {
items.push(box.mobile);
} else if (c.site.responsive === "desktop-only") {
items.push(box.desktop);
} else {
items.push(box.mobile);
items.push(box.desktop);
}
return <ToolbarBox className="flex" items={items} />;
};

7
app/web/src/nova/ed/panel/main/main-per-item.tsx
View File

@ -75,6 +75,9 @@ export const mainPerItemVisit = (
}
}
};
if (parts.props.className && !parts.props.className.includes("el-active")) {
parts.props.className += " el-active";
}
prop.onInput = (e) => {
e.stopPropagation();
@ -160,10 +163,6 @@ export const mainPerItemVisit = (
};
};
function getCaret(el: any) {
return getSelectionOffset(el);
}
function setCaret(el: any, offset: any) {
setSelectionOffset(el, offset[0], offset[1]);
}

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

@ -60,9 +60,7 @@ export const EdMain = () => {
<div
className={cx(
"flex flex-1 relative overflow-auto",
css`
contain: content;
`
p.mode === "mobile" ? "flex-col items-center" : ""
)}
ref={(el) => {
if (el) {
@ -75,23 +73,39 @@ export const EdMain = () => {
}
}}
>
{meta && <div className={mainStyle(p, meta, local)}>{local.cache}</div>}
<div className={mainStyle(p, meta)}>{local.cache}</div>
</div>
);
};
const mainStyle = (
p: PG,
meta: IMeta,
local: { width: number; height: number }
) => {
const mainStyle = (p: PG, meta?: IMeta) => {
let is_active = meta ? isMetaActive(p, meta) : false;
const scale = parseInt(p.ui.zoom.replace("%", "")) / 100;
let width = `${(1 / scale) * 100}%`;
if (p.mode === "mobile") {
width = `${(1 / scale) * 375}px`;
}
return cx(
"absolute inset-0 flex",
"absolute flex",
css`
width: ${(1 / scale) * 100}%;
contain: content;
`,
p.mode === "mobile"
? css`
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: white;
top: 0px;
overflow-x: hidden;
overflow-y: auto;
bottom: 0px;
`
: "inset-0",
css`
width: ${width};
transform: scale(${scale});
transform-origin: 0% 0% 0px;
`,

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

@ -288,6 +288,8 @@ export const EdScriptMonaco: FC<{}> = () => {
}
onChange={(value) => {
const stype = p.ui.popup.script.type;
p.ui.popup.script.typings.status = "loading";
p.ui.popup.script.wb_render();
if ((value || "").includes(IMPORT_SEPARATOR)) {
const valparts = (value || "").split(IMPORT_SEPARATOR + "\n");
if (valparts.length === 2) local.value = valparts[1];
@ -318,6 +320,8 @@ export const EdScriptMonaco: FC<{}> = () => {
arg.page_id = p.page.cur.id;
}
let scope: boolean | ParsedScope = false;
p.ui.popup.script.typings.status = "ok";
p.ui.popup.script.typings.err_msg = "";
if (stype === "prop-master") {
p.sync.code.edit({
type: "prop-master",
@ -327,7 +331,7 @@ export const EdScriptMonaco: FC<{}> = () => {
...arg,
});
} else if (stype === "prop-instance") {
scope = await p.sync.code.edit({
const code_result = await p.sync.code.edit({
type: "prop-instance",
mode: mode,
prop_name: p.ui.popup.script.prop_name,
@ -335,18 +339,32 @@ export const EdScriptMonaco: FC<{}> = () => {
value: compress(encode.encode(value || "")),
...arg,
});
if (typeof code_result === "string") {
p.ui.popup.script.typings.status = "error";
p.ui.popup.script.typings.err_msg = code_result;
} else if (typeof code_result === "object") {
scope = code_result;
}
} else {
scope = await p.sync.code.edit({
const code_result = await p.sync.code.edit({
type: "adv",
mode: mode,
item_id: active.item_id,
value: compress(encode.encode(value || "")),
...arg,
});
if (typeof code_result === "string") {
p.ui.popup.script.typings.status = "error";
p.ui.popup.script.typings.err_msg = code_result;
} else if (typeof code_result === "object") {
scope = code_result;
}
}
if (typeof scope === "object") {
meta.item.script = scope;
}
p.ui.popup.script.wb_render();
}
};
p.ui.popup.script.on_close = () => {

47
app/web/src/nova/ed/panel/popup/script/workbench.tsx
View File

@ -5,10 +5,12 @@ import { EdScriptMonaco } from "./monaco";
import { EdScriptSnippet } from "./snippet";
import { useEffect } from "react";
import { Loading } from "../../../../../utils/ui/loading";
import { Tooltip } from "../../../../../utils/ui/tooltip";
export const EdScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ active_id: "" });
p.ui.popup.script.wb_render = local.render;
useEffect(() => {
if (!local.active_id) {
@ -27,10 +29,19 @@ export const EdScriptWorkbench = () => {
canBack: active.script_nav.list.length > 0,
};
const is_error =
p.ui.popup.script.typings.status === "error" &&
p.ui.popup.script.mode === "js";
return (
<div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col ">
<div className="flex border-b items-stretch">
<div
className={cx(
"flex border-b items-stretch justify-between",
is_error && "bg-red-100"
)}
>
<div className={cx("flex items-stretch")}>
<div className="border-r px-2 flex items-center">
<div
className={cx(
@ -84,7 +95,9 @@ export const EdScriptWorkbench = () => {
</div>
</div>
{p.ui.popup.script.type === "prop-master" && <CompTitleMaster />}
{p.ui.popup.script.type === "prop-instance" && <CompTitleInstance />}
{p.ui.popup.script.type === "prop-instance" && (
<CompTitleInstance />
)}
{p.ui.popup.script.type === "item" && (
<>
<div className="flex p-2 space-x-1">
@ -124,6 +137,36 @@ export const EdScriptWorkbench = () => {
</>
)}
</div>
<div className="flex items-center text-xs pr-2">
{p.ui.popup.script.mode === "js" && (
<div>
{
(
{
ok: <div className="text-green-700">Typings: OK</div>,
loading: <div className="text-slate-500">Loading ⌛</div>,
error: (
<Tooltip
content={
<div className="font-mono whitespace-pre-wrap text-[11px]">
{p.ui.popup.script.typings.err_msg}
</div>
}
delay={0}
>
<div className="text-red-700 border-red-700 border bg-white bg-opacity-80 p-1">
⚠️ Typings: ERROR
</div>
</Tooltip>
),
} as any
)[p.ui.popup.script.typings.status]
}
</div>
)}
</div>
</div>
<div className="relative flex flex-1">
{local.active_id === active.item_id ? (
<EdScriptMonaco />

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

@ -9,11 +9,15 @@ export const edActionDelete = async (p: PG, item: IContent) => {
if (meta) {
const mitem = meta.mitem;
if (mitem) {
mitem.doc?.transact(() => {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
});
});
await treeRebuild(p);
p.render();
}
}
};
@ -23,17 +27,19 @@ export const edActionDeleteById = async (p: PG, id: string) => {
if (meta) {
const mitem = meta.mitem;
if (mitem) {
mitem.doc?.transact(() => {
mitem.parent.forEach((e, k) => {
if (e == mitem) {
deleteByParent(p, mitem, k);
}
});
});
await treeRebuild(p);
p.render();
}
}
};
const deleteByParent = (p: PG, mitem: MItem, index: number) => {
const mchild = mitem.parent.get(index);
mitem.parent.delete(index);
treeRebuild(p);
};

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

@ -122,12 +122,14 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
active.item_id = item.id;
p.ui.tree.search = "";
p.render();
if ((item as IContent).type === "text") {
setTimeout(() => {
if (document.activeElement?.tagName === "INPUT") {
return;
}
const el_active = document.querySelector(".el-active") as any;
if (el_active) {
setEndOfContenteditable(el_active);
}