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-24 00:14:47 +07:00
parent 7ba849f468
commit 22d6821986
15 changed files with 304 additions and 232 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

@ -195,7 +195,6 @@ export const EDGlobal = {
global_prop: [] as string[],
ui: {
zoom: localStorage.zoom || "100%",
should_render: false,
side: { prop: true },
layout: {
left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),

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

@ -1,7 +1,7 @@
import { compress, decompress } from "wasm-gzip";
import { isTextEditing } from "./active/is-editing";
import { loadCompSnapshot } from "./comp/load";
import { PG } from "./ed-global";
import { PG, active } from "./ed-global";
import { loadSite } from "./ed-site";
import { treeRebuild } from "./tree/build";
@ -77,13 +77,13 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
const res = await p.sync.yjs.sv_local(
"page",
p.page.cur.id,
Buffer.from(compress(bin)),
Buffer.from(compress(bin))
);
if (res) {
const diff_local = Y.encodeStateAsUpdate(
doc as any,
decompress(res.sv),
decompress(res.sv)
);
Y.applyUpdate(doc as any, decompress(res.diff), "local");
@ -94,7 +94,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
await p.sync.yjs.diff_local(
"page",
p.page.cur.id,
Buffer.from(compress(diff_local)),
Buffer.from(compress(diff_local))
);
p.ui.syncing = false;
@ -104,7 +104,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
?.get("childs")
?.map((e: any) => e.get("id")) as string[];
if (p.ui.should_render) p.render();
if (active.should_render_main) p.render();
}
};

2
app/web/src/nova/ed/panel/header/mid/add-item.tsx
View File

@ -29,7 +29,7 @@ export const EdAddItem = () => {
const json = {
id: createId(),
name: `New Item`,
name: `new_item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],

4
app/web/src/nova/ed/panel/header/mid/add-text.tsx
View File

@ -33,7 +33,7 @@ export const EdAddText = () => {
const json = {
id: createId(),
name: `New Text`,
name: `new_text`,
type: "text",
dim: { w: "full", h: "full" },
layout: { align: "center", dir: "col", gap: 0 },
@ -68,7 +68,7 @@ export const EdAddText = () => {
if (mitem.get("type") === "section") {
const json = {
id: createId(),
name: `New Item`,
name: `new_item`,
type: "item",
dim: { w: "full", h: "full" },
childs: [],

2
app/web/src/nova/ed/panel/header/mid/comp-picker.tsx
View File

@ -105,7 +105,7 @@ const addComponent = (mitem: MItem | MSection, comp: IItem) => {
const addSection = (root: MRoot) => {
const json = {
id: createId(),
name: `New Section`,
name: `new_section`,
type: "section",
dim: { w: "full", h: "full" },
childs: [],

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

@ -39,7 +39,7 @@ export const EdMain = () => {
visit={(meta, parts) => {
return mainPerItemVisit(p, meta, parts);
}}
onStatusChanged={(status) => {
on_status_changed={(status) => {
if (status !== "ready") {
active.should_render_main = true;
local.render();
@ -60,7 +60,7 @@ export const EdMain = () => {
<div
className={cx(
"flex flex-1 relative overflow-auto",
p.mode === "mobile" ? "flex-col items-center" : "",
p.mode === "mobile" ? "flex-col items-center" : ""
)}
ref={(el) => {
if (el) {
@ -148,6 +148,6 @@ const mainStyle = (p: PG, meta?: IMeta) => {
border: 2px solid #1c88f3;
}
}
`,
`
);
};

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

@ -34,11 +34,13 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
for (const path of paths) {
if (path.includes(meta)) {
for (const m of path) {
if (m) {
if (m.instances) {
cur_path.length = 0;
}
cur_path.push(m);
}
}
break;
}
}

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

@ -11,6 +11,7 @@ import { PanelLink } from "./panel/link";
import { PanelPadding } from "./panel/padding";
import { SideBox } from "./ui/SideBox";
import { SideLabel } from "./ui/SideLabel";
import { treeRebuild } from "../../../logic/tree/build";
export const EdStyleAll = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -27,7 +28,7 @@ export const EdStyleAll = () => {
let mitem = meta.mitem;
if (mitem) {
p.ui.should_render = true;
active.should_render_main = true;
mitem.doc?.transact(() => {
if (mitem) {
if (p.mode === "mobile") {

6
app/web/src/nova/ed/panel/side/style/ui/FieldNumUnit.tsx
View File

@ -70,8 +70,6 @@ export const FieldNumUnit: FC<{
local.render();
}, [value, unit]);
const [txPending, tx] = useTransition();
useEffect(() => {
// Only change the value if the drag was actually started.
const onUpdate = (event: any) => {
@ -86,9 +84,7 @@ export const FieldNumUnit: FC<{
local.render();
tx(() => {
update(local.val + local.unit);
});
}
};
@ -105,7 +101,7 @@ export const FieldNumUnit: FC<{
document.removeEventListener("pointermove", onUpdate);
document.removeEventListener("pointerup", onEnd);
};
}, [local.drag.clientX, local.drag.old, local.val]);
}, [local.drag.clientX, local.drag.old, local.val, update]);
const onStart = useCallback(
(event: React.MouseEvent) => {

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

@ -1,8 +1,9 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { FC, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
import { IItem, MItem } from "../../../../../../utils/types/item";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { EDGlobal, IMeta, PG, active } from "../../../../logic/ed-global";
import { treeRebuild } from "../../../../logic/tree/build";
export const EdTreeName = ({
@ -101,13 +102,15 @@ export const EdTreeName = ({
}
}}
onChange={(e) => {
local.rename = e.target.value.replace(/[\W_]+/g, "_");
local.rename = e.target.value
.replace(/[^a-zA-Z\:\d\s:]+/g, "_")
.toLowerCase();
p.render();
}}
/>
) : (
<div className="flex flex-col">
<Name name={name} is_jsx_prop={is_jsx_prop} />
<Name name={name} is_jsx_prop={is_jsx_prop} meta={node.data} />
{/* <div className={"text-[9px] text-gray-500 -mt-1"}>
{node.id} - {item.originalId}
</div> */}
@ -117,20 +120,22 @@ export const EdTreeName = ({
);
};
const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
name,
is_jsx_prop,
meta,
}) => {
if (is_jsx_prop) {
return (
<div className="flex items-center space-x-1">
<div className={cx("flex items-center space-x-1 pr-1")}>
<Tooltip
content={`Type: JSX Prop`}
className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]"
>
P
</Tooltip>
<div>{name}</div>
<div className="flex-1">{name}</div>
{meta && meta.mitem && <GenerateJSX mitem={meta.mitem} />}
</div>
);
}
@ -153,3 +158,76 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
return <div>{name}</div>;
};
const GenerateJSX: FC<{ mitem: MItem }> = ({ mitem }) => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<Tooltip
content="Generate JSX"
onClick={() => {
const genJSX = findDefaultJSX(p, mitem);
const ijson = mitem.toJSON() as IItem;
mitem.doc?.transact(() => {
syncronize(mitem as any, {
...genJSX,
name: ijson.name,
id: ijson.id,
hidden: false,
originalId: ijson.originalId,
});
});
treeRebuild(p);
p.render();
}}
>
<div
className="action-script px-1 py-[2px] rounded-sm text-purple-500 bg-white border border-purple-400 opacity-0 transition-all hover:bg-purple-700 hover:text-white hover:border-purple-700"
dangerouslySetInnerHTML={{
__html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</Tooltip>
);
};
export const findDefaultJSX = (p: PG, mitem: MItem): IItem => {
let resetJSXProp: any = false;
if (mitem && mitem.parent && (mitem.parent as any).get("content")) {
let name = "";
(mitem as any).parent.parent.forEach((e: any, k: any) => {
if (e === mitem.parent) {
name = k;
}
});
if (name) {
try {
const cid = (mitem as any).parent.parent.parent.get("id");
const comp = p.comp.list[cid].doc;
if (comp) {
const mchilds = comp
.getMap("map")
.get("root")
?.get("childs")
?.toJSON() as IItem[];
for (const c of mchilds) {
if (
c &&
c.name &&
c.name.startsWith("jsx:") &&
c.name.substring(4).trim() === name
) {
c.hidden = false;
c.name = name;
c.id = mitem.get("id") || "";
c.originalId = mitem.get("originalId") || "";
resetJSXProp = c;
}
}
}
} catch (e) {}
}
}
return resetJSXProp;
};

1
app/web/src/nova/vi/render/render.tsx
View File

@ -52,7 +52,6 @@ export const ViRender: FC<{
}
if (!meta) return null;
if (meta.item.hidden) return null;
if (meta.item.adv?.js || meta.item.component?.id) {

8
app/web/src/nova/vi/render/script/eval-script.tsx
View File

@ -84,13 +84,7 @@ const JsxProp: FC<{
meta: IMeta;
passprop: any;
}> = ({ fn, meta, passprop }) => {
const local = useLocal({ init: false, result: null as any });
if (!local.init) {
local.init = true;
local.result = fn({ passprop, meta });
}
return local.result;
return fn({ passprop, meta });
};
export const replacement = {

8
app/web/src/nova/vi/vi.tsx
View File

@ -1,4 +1,4 @@
import { FC, Suspense } from "react";
import { FC, Suspense, useState } from "react";
import { useGlobal } from "web-utils";
import { IMeta } from "../ed/logic/ed-global";
import { viLoad } from "./load/load";
@ -19,7 +19,7 @@ export const Vi: FC<{
script?: { init_local_effect: Record<string, boolean> };
visit?: VG["visit"];
render_stat?: "enabled" | "disabled";
onStatusChanged?: (status: VG["status"]) => void;
on_status_changed?: (status: VG["status"]) => void;
}> = ({
meta,
entry,
@ -30,10 +30,10 @@ export const Vi: FC<{
visit,
script,
render_stat: rs,
onStatusChanged,
on_status_changed,
}) => {
const vi = useGlobal(ViGlobal, "VI");
vi.on_status_changes = onStatusChanged;
vi.on_status_changes = on_status_changed;
if (rs === "disabled") {
render_stat.enabled = false;

1
app/web/src/render/editor/panel/side/Side.tsx
View File

@ -17,6 +17,7 @@ import { CPInstance } from "./props/CPInstance";
import { CPMaster } from "./props/CPMaster";
import { SideBox } from "./ui/SideBox";
import { SideLabel } from "./ui/SideLabel";
import { treeRebuild } from "../../../../nova/ed/logic/tree/build";
export const ESide = () => {
const p = useGlobal(EditorGlobal, "EDITOR");

4
app/web/src/utils/css/font.ts
View File

@ -36,7 +36,7 @@ export const cssFont = (
font.family = glbFont.defaultFont;
}
return cx(
const res = cx(
font.color &&
`
color: ${font.color};
@ -69,4 +69,6 @@ export const cssFont = (
font-family: ${font.family};
`
);
return res;
};