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

wip prop on change script

This commit is contained in:
Rizky 2023-12-05 14:08:45 +07:00
parent 54372957c9
commit 76700d7417
9 changed files with 141 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import {
EPage,
ESite,
IScopeComp,
PropFieldKind,
} from "../../../web/src/nova/ed/logic/ed-global";
import { IItem } from "../../../web/src/utils/types/item";
import { site_group } from "./actions/site_group";
@ -105,10 +106,9 @@ export const SyncActions = {
}
| {
type: "prop";
page_id?: string;
comp_id?: string;
item_id: string;
comp_id: string;
prop_name: string;
prop_kind: PropFieldKind;
value: Uint8Array;
}
) => ({}) as boolean,

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

@ -8,13 +8,15 @@ import { gunzipAsync } from "../entity/zlib";
import { SyncConnection } from "../type";
import { transform } from "esbuild";
const decoder = new TextDecoder();
export const code_edit: SAction["code"]["edit"] = async function (
this: SyncConnection,
arg
) {
const src = decoder.decode(await gunzipAsync(arg.value));
if (arg.type === "adv") {
const { item_id, mode, comp_id, page_id, value } = arg;
const src = decoder.decode(await gunzipAsync(value));
let root = undefined as undefined | MRoot | MItem;
let doc = undefined as undefined | Doc;
@ -24,6 +26,12 @@ export const code_edit: SAction["code"]["edit"] = async function (
root = ref.doc.getMap("map").get("root");
doc = ref.doc as Doc;
}
} else if (comp_id) {
const ref = docs.comp[comp_id];
if (ref) {
root = ref.doc.getMap("map").get("root");
doc = ref.doc as Doc;
}
}
if (root) {
@ -33,23 +41,48 @@ export const code_edit: SAction["code"]["edit"] = async function (
const adv = mitem.get("adv");
if (adv) {
doc?.transact(async () => {
const res = await transform(`render(${src})`, {
jsx: "transform",
format: "cjs",
loader: "tsx",
minify: true,
sourcemap: "inline",
});
doc?.transact(() => {
adv.set(mode, src);
if (mode === "js") {
const res = await transform(`render(${src})`, {
jsx: "transform",
format: "cjs",
loader: "tsx",
minify: true,
sourcemap: "inline",
});
adv.set("jsBuilt", res.code);
}
});
}
}
}
} else {
const { comp_id, prop_kind, prop_name, value } = arg;
if (comp_id) {
const ref = docs.comp[comp_id];
if (ref) {
const root = ref.doc.getMap("map").get("root");
const doc = ref.doc as Doc;
if (root) {
const mprops = root.get("component")?.get("props");
const mprop = mprops?.get(prop_name);
if (mprop) {
const res = await transform(`return ${src}`, {
jsx: "transform",
format: "cjs",
loader: "tsx",
});
doc?.transact(() => {
if (prop_kind === "value") {
mprop.set("value", src);
mprop.set("valueBuilt", res.code.substring(6));
}
});
}
}
}
}
}
return false;

8
app/srv/ws/sync/editor/load-component.ts
View File

@ -12,6 +12,8 @@ export const loadComponent = async (id: string, sync: SyncConnection) => {
const conf = sync.conf;
if (!conf) return undefined;
console.log(id, sync.client_id);
const createUndoManager = async (root: Y.Map<any>) => {
const um = new Y.UndoManager(root, {
ignoreRemoteMapChanges: true,
@ -28,17 +30,21 @@ export const loadComponent = async (id: string, sync: SyncConnection) => {
snapshot.set("comp", id, "bin", bin);
const sv_local = await gzipAsync(update);
console.log("comp on_update", id);
user.active.findAll({ comp_id: id }).map((e) => {
if (origin !== um) {
if (e.client_id === origin) return;
}
const ws = conns.get(e.client_id)?.ws;
if (ws)
if (ws) {
console.log("remote_svlocal", id, !!e);
sendWS(ws, {
type: SyncType.Event,
event: "remote_svlocal",
data: { type: "comp", sv_local, id },
});
}
});
});
};

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

@ -234,7 +234,7 @@ export const EDGlobal = {
script: {
open: false,
mode: "js" as "js" | "css" | "html",
type: "item" as "item" | "prop",
type: "item" as "item" | "prop-master" | "prop-instance",
prop_kind: "" as PropFieldKind,
prop_name: "",
},

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

@ -113,7 +113,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
}
}
doc.transact(async () => {
doc.transact(() => {
const sections = root.get("childs");
if (sections) {
sections.map((e) => {

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

@ -128,7 +128,7 @@ export const ScriptMonaco = () => {
}
}
if (p.ui.popup.script.type === "prop") {
if (p.ui.popup.script.type === "prop-master") {
const mprops = mitem?.get("component")?.get("props");
if (mprops) {
const mprop = mprops.get(p.ui.popup.script.prop_name);
@ -169,13 +169,23 @@ export const ScriptMonaco = () => {
arg.page_id = p.page.cur.id;
}
p.sync.code.edit({
type: "adv",
mode: type,
item_id: active.item_id,
value: compress(encode.encode(val || "")),
...arg,
});
if (p.ui.popup.script.type === "prop-master") {
p.sync.code.edit({
type: "prop",
prop_kind: p.ui.popup.script.prop_kind,
prop_name: p.ui.popup.script.prop_name,
value: compress(encode.encode(val || "")),
...arg,
});
} else {
p.sync.code.edit({
type: "adv",
mode: type,
item_id: active.item_id,
value: compress(encode.encode(val || "")),
...arg,
});
}
}
}, 1000);
}}

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

@ -1,6 +1,7 @@
import { useGlobal } from "web-utils";
import { ScriptMonaco } from "./monaco";
import { EDGlobal, active } from "../../../logic/ed-global";
import { IItem } from "../../../../../utils/types/item";
export const ScriptWorkbench = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -8,8 +9,8 @@ export const ScriptWorkbench = () => {
<div className="flex flex-1 items-stretch">
<div className="flex flex-1 flex-col ">
<div className="flex p-2 border-b space-x-2">
{p.ui.popup.script.type === "prop" ? (
<></>
{p.ui.popup.script.type === "prop-master" ? (
<CompTitle />
) : (
<>
{[
@ -52,3 +53,43 @@ export const ScriptWorkbench = () => {
</div>
);
};
const CompTitle = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const item = p.comp.list[active.comp_id].doc
.getMap("map")
.get("root")
?.toJSON() as IItem;
if (item && item.component?.id) {
const props = item.component.props;
return (
<div className="flex text-xs space-x-1 items-center">
<div>{item.name}</div>
<ArrowRight />
<div>{p.ui.popup.script.prop_name}</div>
<ArrowRight />
<div>{p.ui.popup.script.prop_kind}</div>
</div>
);
}
return <></>;
};
const ArrowRight = () => (
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
);

2
app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx
View File

@ -16,7 +16,7 @@ export const createEditScript = (
if (meta) {
p.ui.popup.script.mode = "js";
p.ui.popup.script.open = true;
p.ui.popup.script.type = "prop";
p.ui.popup.script.type = "prop-master";
p.ui.popup.script.prop_kind = kind;
p.ui.popup.script.prop_name = name;
p.render();

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

@ -1,6 +1,7 @@
import { FC } from "react";
import { useGlobal } from "web-utils";
import { EDGlobal, EdMeta } from "../../logic/ed-global";
import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
import { IItem } from "../../../../utils/types/item";
export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -11,7 +12,28 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
<div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
{meta.item.name}
</div>
<div className="border px-1 cursor-pointer bg-white hover:bg-blue-100">
<div
className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
onClick={() => {
const item = meta.item as IItem;
const comp_id = item.component?.id;
if (comp_id) {
active.instance.item_id = item.id;
active.instance.comp_id = active.comp_id;
active.comp_id = comp_id || "";
const root = p.comp.list[comp_id].tree.find(
(e) => e.parent === "root"
);
if (root && typeof root.id === "string") {
active.item_id = root.id || "";
}
p.render();
}
}}
>
Edit Component
</div>
</div>