From 23f87887f6e5832603268c69513a74e651a6fa1e Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Fri, 15 Apr 2022 13:29:56 +0900 Subject: [PATCH 01/16] init canvas page --- editor/pages/canvas/index.tsx | 6 ++++++ editor/pages/canvas/readme.md | 1 + 2 files changed, 7 insertions(+) create mode 100644 editor/pages/canvas/index.tsx create mode 100644 editor/pages/canvas/readme.md diff --git a/editor/pages/canvas/index.tsx b/editor/pages/canvas/index.tsx new file mode 100644 index 00000000..b700809f --- /dev/null +++ b/editor/pages/canvas/index.tsx @@ -0,0 +1,6 @@ +import React from "react"; + +// TODO: +export function CanvasPage() { + return <>canvs; +} diff --git a/editor/pages/canvas/readme.md b/editor/pages/canvas/readme.md new file mode 100644 index 00000000..e69dbec2 --- /dev/null +++ b/editor/pages/canvas/readme.md @@ -0,0 +1 @@ +# this page is for embeddable canvas used internally for performance optimization. From db528b99007f89812a0937fa47c49c8c05d506ab Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Sat, 16 Apr 2022 03:30:27 +0900 Subject: [PATCH 02/16] extract preview renderer --- editor/scaffolds/canvas/canvas.tsx | 6 ++-- editor/scaffolds/preview/index.tsx | 45 ++++++++++++++++++++++++------ 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx index e79d81f1..7dc4d1ee 100644 --- a/editor/scaffolds/canvas/canvas.tsx +++ b/editor/scaffolds/canvas/canvas.tsx @@ -2,7 +2,7 @@ import React, { useCallback } from "react"; import styled from "@emotion/styled"; import { Canvas } from "@code-editor/canvas"; import { useEditorState, useWorkspace } from "core/states"; -import { Preview } from "scaffolds/preview"; +import { D2CVanillaPreview } from "scaffolds/preview"; import useMeasure from "react-use-measure"; import { useDispatch } from "core/dispatch"; import { FrameTitleRenderer } from "./render/frame-title"; @@ -121,7 +121,9 @@ export function VisualContentArea() { nodes={thisPageNodes} // initialTransform={ } // TODO: if the initial selection is provided from first load, from the query param, we have to focus to fit that node. renderItem={(p) => { - return ; + return ( + + ); }} config={{ can_highlight_selected_layer: true, diff --git a/editor/scaffolds/preview/index.tsx b/editor/scaffolds/preview/index.tsx index 5773cd52..1ff742c6 100644 --- a/editor/scaffolds/preview/index.tsx +++ b/editor/scaffolds/preview/index.tsx @@ -50,7 +50,7 @@ const cache = { }, }; -export function Preview({ +export function D2CVanillaPreview({ target, isZooming, isPanning, @@ -158,27 +158,56 @@ export function Preview({ const __bg = colorFromFills(target.fills); const bg_color_str = __bg ? "#" + __bg.hex : "transparent"; + return ( + + ); +} + +function PreviewContent({ + width, + height, + backgroundColor, + id, + source, + name, +}: { + width: number; + height: number; + backgroundColor: string; + id: string; + source: string; + name: string; +}) { return (
- {preview && ( + {source && ( )}
From b541006efb46d7cee560f36abdd73ee4f71c997a Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Sat, 16 Apr 2022 03:30:41 +0900 Subject: [PATCH 03/16] update og finder logic --- packages/designto-token/token-layout/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/designto-token/token-layout/index.ts b/packages/designto-token/token-layout/index.ts index 25759f92..ddf325d7 100644 --- a/packages/designto-token/token-layout/index.ts +++ b/packages/designto-token/token-layout/index.ts @@ -247,7 +247,8 @@ function find_original(ogchildren: Array, of: Widget) { c.id === (_unwrappedChild && _unwrappedChild.key.id) || // target the widget itself - some widgets are not wrapped, yet being converted to a container-like (e.g. maskier) c.id === of.key.id || - c.id === of.key.id.split(".")[0] // {id}.positioned or {id}.scroll-wrap TODO: this logic can cause problem later on. + c.id === of.key.id.split(".")[0] || // {id}.positioned or {id}.scroll-wrap TODO: this logic can cause problem later on. + of.key.id.includes(c.id) // other cases ); if (!ogchild) { console.error( From d2eeed4229a200d48c2e5571c156d1489d756a3f Mon Sep 17 00:00:00 2001 From: "UZU, J" Date: Sat, 16 Apr 2022 03:30:59 +0900 Subject: [PATCH 04/16] testing webworker version preview canvas --- editor/scaffolds/canvas/canvas.tsx | 12 ++- editor/scaffolds/preview/index.tsx | 89 ++++++++++++++++--- .../preview/workers/vanilla.worker.js | 78 ++++++++++++++++ externals/design-sdk | 2 +- 4 files changed, 167 insertions(+), 14 deletions(-) create mode 100644 editor/scaffolds/preview/workers/vanilla.worker.js diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx index 7dc4d1ee..a064d4ec 100644 --- a/editor/scaffolds/canvas/canvas.tsx +++ b/editor/scaffolds/canvas/canvas.tsx @@ -2,7 +2,10 @@ import React, { useCallback } from "react"; import styled from "@emotion/styled"; import { Canvas } from "@code-editor/canvas"; import { useEditorState, useWorkspace } from "core/states"; -import { D2CVanillaPreview } from "scaffolds/preview"; +import { + D2CVanillaPreview, + WebWorkerD2CVanillaPreview, +} from "scaffolds/preview"; import useMeasure from "react-use-measure"; import { useDispatch } from "core/dispatch"; import { FrameTitleRenderer } from "./render/frame-title"; @@ -122,7 +125,12 @@ export function VisualContentArea() { // initialTransform={ } // TODO: if the initial selection is provided from first load, from the query param, we have to focus to fit that node. renderItem={(p) => { return ( - + + // ); }} config={{ diff --git a/editor/scaffolds/preview/index.tsx b/editor/scaffolds/preview/index.tsx index 1ff742c6..d0977116 100644 --- a/editor/scaffolds/preview/index.tsx +++ b/editor/scaffolds/preview/index.tsx @@ -50,19 +50,28 @@ const cache = { }, }; +const cachekey = (target: { filekey; id }) => + target ? `${target.filekey}-${target.id}-${new Date().getMinutes()}` : null; + +const blurred_bg_fill = (target: ReflectSceneNode) => { + const __bg = colorFromFills(target.fills); + const bg_color_str = __bg ? "#" + __bg.hex : "transparent"; + return bg_color_str; +}; + +type VanillaPreviewProps = { + target: ReflectSceneNode & { + filekey: string; + }; +} & FrameOptimizationFactors; + export function D2CVanillaPreview({ target, isZooming, isPanning, -}: { - target: ReflectSceneNode & { - filekey: string; - }; -} & FrameOptimizationFactors) { +}: VanillaPreviewProps) { const [preview, setPreview] = useState(); - const key = target - ? `${target.filekey}-${target.id}-${new Date().getMinutes()}` - : null; + const key = cachekey(target); const on_preview_result = (result: Result, __image: boolean) => { if (preview) { @@ -155,14 +164,72 @@ export function D2CVanillaPreview({ } }, [target?.id, isZooming, isPanning]); - const __bg = colorFromFills(target.fills); - const bg_color_str = __bg ? "#" + __bg.hex : "transparent"; + const bg_color_str = blurred_bg_fill(target); + + return ( + + ); +} + +import { createWorkerQueue } from "@code-editor/webworker-services-core"; +import { useFigmaAccessToken } from "hooks/use-figma-access-token"; + +export function WebWorkerD2CVanillaPreview({ target }: VanillaPreviewProps) { + const [preview, setPreview] = useState(); + const bg_color_str = blurred_bg_fill(target); + + const fat = useFigmaAccessToken(); + + useEffect(() => { + if (preview) { + return; + } + + const { worker, terminate } = createWorkerQueue( + new Worker(new URL("./workers/vanilla.worker.js", import.meta.url)) + ); + + const input = target + ? { + id: target.id, + name: target.name, + entry: target, + } + : null; + + // TODO: this is not production ready + worker.postMessage({ + input, + authentication: fat, + filekey: target.filekey, + }); + + worker.onmessage = (e) => { + // console.log(target.id, e.data.id); + // if (((e.data as Result).id = target.id)) { + setPreview(e.data as Result); + // } + }; + + () => { + terminate(); + }; + }, [target?.id]); return ( { + function respond(data) { + setTimeout(() => { + postMessage({ type: "response", ...data }); + }, 0); + } + + try { + const { input, authentication, filekey } = event.data; + + MainImageRepository.instance = new RemoteImageRepositories(filekey, { + authentication: authentication, + }); + + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); + + const result = await designToCode({ + input: input, + build_config: build_config, + framework: framework_config, + asset_config: { + skip_asset_replacement: false, + asset_repository: MainImageRepository.instance, + custom_asset_replacement: { + type: "static", + resource: placeholderimg, + }, + }, + }); + + respond(result); + } catch (error) { + respond({ error }); + } +}); diff --git a/externals/design-sdk b/externals/design-sdk index 722578d6..003bcf70 160000 --- a/externals/design-sdk +++ b/externals/design-sdk @@ -1 +1 @@ -Subproject commit 722578d679cc1705fa007fc23bbe933b2cb3be14 +Subproject commit 003bcf703a10dad42f8c7f26ade77c2a4e90aefc From e8396c276145b55e073bb7a7879bb5758c295671 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 16 Apr 2022 15:21:22 +0900 Subject: [PATCH 05/16] bump modules --- externals/design-sdk | 2 +- packages/reflect-detection | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/externals/design-sdk b/externals/design-sdk index 003bcf70..50c261ac 160000 --- a/externals/design-sdk +++ b/externals/design-sdk @@ -1 +1 @@ -Subproject commit 003bcf703a10dad42f8c7f26ade77c2a4e90aefc +Subproject commit 50c261ac07ecce5a0550c0fd3cd81cf2c2c86fcc diff --git a/packages/reflect-detection b/packages/reflect-detection index 36621cc0..1a5c7194 160000 --- a/packages/reflect-detection +++ b/packages/reflect-detection @@ -1 +1 @@ -Subproject commit 36621cc08370386f6f16ac9b313b3862951f1997 +Subproject commit 1a5c71946b10c4034d975926ea5283feca9ef556 From b01611e6eebd2a700cb7b6e44a0a5b4ddd11d6f5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 16 Apr 2022 22:05:58 +0900 Subject: [PATCH 06/16] wip --- editor/pages/canvas-server/index.tsx | 88 ++++++++++++++++++++++- editor/pages/canvas/index.tsx | 6 -- editor/pages/canvas/readme.md | 1 - editor/scaffolds/canvas/server-canvas.tsx | 30 ++++++++ editor/scaffolds/preview/index.tsx | 4 +- 5 files changed, 117 insertions(+), 12 deletions(-) delete mode 100644 editor/pages/canvas/index.tsx delete mode 100644 editor/pages/canvas/readme.md create mode 100644 editor/scaffolds/canvas/server-canvas.tsx diff --git a/editor/pages/canvas-server/index.tsx b/editor/pages/canvas-server/index.tsx index 1e25babe..a7bd1f8b 100644 --- a/editor/pages/canvas-server/index.tsx +++ b/editor/pages/canvas-server/index.tsx @@ -1,5 +1,87 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import { + D2CVanillaPreview, + WebWorkerD2CVanillaPreview, +} from "scaffolds/preview"; +import { Canvas } from "@code-editor/canvas"; +import useMeasure from "react-use-measure"; +import { FrameTitleRenderer } from "scaffolds/canvas/render/frame-title"; +import { useRouter } from "next/router"; -export default function CanvasServer() { - return <>; +export default function CanvasServerPage() { + const router = useRouter(); + + const { key: __fk } = router.query; + const filkey = __fk as string; + + const [canvasSizingRef, canvasBounds] = useMeasure(); + const [selectedPage, setSelectedPage] = useState(null); + + // useEffect(() => { + // const handler = (e) => { + // // + // }; + + // window.addEventListener("message", handler); + // return () => { + // window.removeEventListener("message", handler); + // }; + // }, []); + + // const thisPageNodes = selectedPage + // ? design.pages.find((p) => p.id == selectedPage).children.filter(Boolean) + // : []; + + const thisPageNodes = []; + + return ( +
+ { + // dispatch({ type: "select-node", node: node?.id }); + }} + onClearSelection={() => { + // dispatch({ type: "select-node", node: null }); + }} + nodes={thisPageNodes} + // initialTransform={ } // TODO: if the initial selection is provided from first load, from the query param, we have to focus to fit that node. + renderItem={(p) => { + return ( + // + + ); + }} + config={{ + can_highlight_selected_layer: true, + marquee: { + disabled: true, + }, + }} + renderFrameTitle={(p) => ( + { + // startIsolatedViewMode(); + }} + /> + )} + /> +
+ ); } diff --git a/editor/pages/canvas/index.tsx b/editor/pages/canvas/index.tsx deleted file mode 100644 index b700809f..00000000 --- a/editor/pages/canvas/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; - -// TODO: -export function CanvasPage() { - return <>canvs; -} diff --git a/editor/pages/canvas/readme.md b/editor/pages/canvas/readme.md deleted file mode 100644 index e69dbec2..00000000 --- a/editor/pages/canvas/readme.md +++ /dev/null @@ -1 +0,0 @@ -# this page is for embeddable canvas used internally for performance optimization. diff --git a/editor/scaffolds/canvas/server-canvas.tsx b/editor/scaffolds/canvas/server-canvas.tsx new file mode 100644 index 00000000..caa7b62a --- /dev/null +++ b/editor/scaffolds/canvas/server-canvas.tsx @@ -0,0 +1,30 @@ +import React, { useEffect } from "react"; +import { useEditorState, useWorkspace } from "core/states"; +import { useDispatch } from "core/dispatch"; + +export function ServerCanvas() { + const [state] = useEditorState(); + + const { highlightedLayer, highlightLayer } = useWorkspace(); + const dispatch = useDispatch(); + + const { + selectedPage, + design, + selectedNodes, + canvasMode, + canvasMode_previous, + } = state; + + useEffect(() => { + // + }, []); + + return ( +