From 76700d741770e8359569e0ffa5418d7e85b56ca3 Mon Sep 17 00:00:00 2001 From: Rizky Date: Tue, 5 Dec 2023 14:08:45 +0700 Subject: [PATCH] wip prop on change script --- app/srv/ws/sync/actions.ts | 6 +-- app/srv/ws/sync/actions/code_edit.ts | 53 +++++++++++++++---- app/srv/ws/sync/editor/load-component.ts | 8 ++- app/web/src/nova/ed/logic/ed-global.ts | 2 +- app/web/src/nova/ed/logic/tree/build.tsx | 2 +- .../src/nova/ed/panel/popup/script/monaco.tsx | 26 ++++++--- .../nova/ed/panel/popup/script/workbench.tsx | 45 +++++++++++++++- .../ed/panel/side/prop-comp/edit-script.tsx | 2 +- .../src/nova/ed/panel/side/prop-instance.tsx | 26 ++++++++- 9 files changed, 141 insertions(+), 29 deletions(-) diff --git a/app/srv/ws/sync/actions.ts b/app/srv/ws/sync/actions.ts index dbb7409b..d9071d68 100644 --- a/app/srv/ws/sync/actions.ts +++ b/app/srv/ws/sync/actions.ts @@ -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, diff --git a/app/srv/ws/sync/actions/code_edit.ts b/app/srv/ws/sync/actions/code_edit.ts index 9486fe56..c8baf2f3 100644 --- a/app/srv/ws/sync/actions/code_edit.ts +++ b/app/srv/ws/sync/actions/code_edit.ts @@ -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; diff --git a/app/srv/ws/sync/editor/load-component.ts b/app/srv/ws/sync/editor/load-component.ts index c8452bf7..a9ddf48c 100644 --- a/app/srv/ws/sync/editor/load-component.ts +++ b/app/srv/ws/sync/editor/load-component.ts @@ -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) => { 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 }, }); + } }); }); }; diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts index 76015e97..5b2c0885 100644 --- a/app/web/src/nova/ed/logic/ed-global.ts +++ b/app/web/src/nova/ed/logic/ed-global.ts @@ -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: "", }, diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx index f6ef262a..06e5426b 100644 --- a/app/web/src/nova/ed/logic/tree/build.tsx +++ b/app/web/src/nova/ed/logic/tree/build.tsx @@ -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) => { diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx index 222021a1..bdd81a60 100644 --- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx +++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx @@ -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); }} diff --git a/app/web/src/nova/ed/panel/popup/script/workbench.tsx b/app/web/src/nova/ed/panel/popup/script/workbench.tsx index d5c1865c..5ee6540c 100644 --- a/app/web/src/nova/ed/panel/popup/script/workbench.tsx +++ b/app/web/src/nova/ed/panel/popup/script/workbench.tsx @@ -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 = () => {
- {p.ui.popup.script.type === "prop" ? ( - <> + {p.ui.popup.script.type === "prop-master" ? ( + ) : ( <> {[ @@ -52,3 +53,43 @@ export const ScriptWorkbench = () => {
); }; + +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 ( +
+
{item.name}
+ +
{p.ui.popup.script.prop_name}
+ +
{p.ui.popup.script.prop_kind}
+
+ ); + } + return <>; +}; + +const ArrowRight = () => ( + + + +); diff --git a/app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx b/app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx index b93d8d84..37fed768 100644 --- a/app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx +++ b/app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx @@ -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(); diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx index 223f7db6..d22649bf 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx @@ -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 }) => {
{meta.item.name}
-
+
{ + 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