Skip to content

Commit 99bb588

Browse files
softmarshmallowsoftmarshmallow
committed
wip - adding interactive canvas
1 parent 92f3c54 commit 99bb588

6 files changed

Lines changed: 213 additions & 20 deletions

File tree

‎editor/components/app-runner/runner-frame.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎editor/components/canvas/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./interactive-canvas";

‎editor/components/canvas/interactive-canvas.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { useRef, useState } from "react";
2+
import { useSpring, animated } from "react-spring";
3+
import { usePinch } from "@use-gesture/react";
4+
import { Resizable } from "re-resizable";
5+
6+
export function InteractiveCanvas({
7+
children,
8+
}: {
9+
children?: React.ReactNode;
10+
}) {
11+
const [scale, setScale] = useState(1);
12+
13+
return (
14+
<div id="interactive-canvas" style={{ width: "100%", height: "100%" }}>
15+
<ScalableFrame onRescale={setScale} scale={scale}>
16+
<ResizableFrame scale={scale}>{children}</ResizableFrame>
17+
</ScalableFrame>
18+
</div>
19+
);
20+
}
21+
22+
function ScalableFrame({
23+
children,
24+
scale,
25+
onRescale,
26+
}: {
27+
scale: number;
28+
onRescale?: (scale: number) => void;
29+
children?: React.ReactNode;
30+
}) {
31+
// const [{ xyzs }, set] = useSpring(() => ({ xyzs: [0, 0, 0, 100] }));
32+
const ref = useRef();
33+
34+
usePinch(
35+
(state) => {
36+
const { offset } = state;
37+
const [scale] = offset;
38+
onRescale(scale);
39+
},
40+
{ target: ref }
41+
);
42+
43+
return (
44+
<div
45+
id="scale-event-listener"
46+
ref={ref}
47+
style={{
48+
width: "100%",
49+
height: "100%",
50+
}}
51+
>
52+
<div
53+
style={{
54+
transform: `scale(${scale})`,
55+
// xyzs
56+
// .to((x, y, z, s): string => {
57+
// return `translate3D(${x}px, ${y}px, 0) scale(${s / 100})`;
58+
// })
59+
// .get(),
60+
}}
61+
>
62+
{children}
63+
</div>
64+
</div>
65+
);
66+
}
67+
68+
function ResizableFrame({
69+
scale,
70+
children,
71+
}: {
72+
scale: number;
73+
children?: React.ReactNode;
74+
}) {
75+
return (
76+
<Resizable
77+
style={{
78+
overflow: "hidden",
79+
}}
80+
scale={scale}
81+
>
82+
{children}
83+
</Resizable>
84+
);
85+
}

‎editor/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"react-dom": "17.0.1",
4646
"react-json-tree": "^0.15.0",
4747
"react-resizable": "^3.0.1",
48+
"react-spring": "^9.3.2",
4849
"recoil": "^0.2.0"
4950
},
5051
"devDependencies": {

‎editor/scaffolds/canvas/canvas.tsx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import styled from "@emotion/styled";
33
import { PreviewAndRunPanel } from "components/preview-and-run";
44
import { EditorAppbarFragments, EditorSidebar } from "components/editor";
55
import { Result } from "@designto/code";
6+
import { InteractiveCanvas } from "components/canvas";
7+
import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
68

79
export function Canvas({
810
preview,
@@ -18,7 +20,7 @@ export function Canvas({
1820
return (
1921
<>
2022
<EditorAppbarFragments.Canvas />
21-
{preview ? (
23+
{/* {preview ? (
2224
<PreviewAndRunPanel
2325
// key={_key_for_preview}
2426
config={{
@@ -37,7 +39,32 @@ export function Canvas({
3739
/>
3840
) : (
3941
<EditorCanvasSkeleton />
40-
)}
42+
)} */}
43+
<InteractiveCanvas>
44+
{preview ? (
45+
<div
46+
style={{
47+
width: originsize.width,
48+
height: originsize.height,
49+
}}
50+
>
51+
<VanillaRunner
52+
source={preview.scaffold.raw}
53+
width={"100%"}
54+
height={"100%"}
55+
componentName={preview.name}
56+
/>
57+
</div>
58+
) : (
59+
<EditorCanvasSkeleton />
60+
)}
61+
{/* <div
62+
style={{
63+
height: 812,
64+
background: "white",
65+
}}
66+
></div> */}
67+
</InteractiveCanvas>
4168
</>
4269
);
4370
}

‎yarn.lock‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3643,6 +3643,91 @@
36433643
dependencies:
36443644
"@babel/runtime" "^7.13.10"
36453645

3646+
"@react-spring/animated@~9.3.0":
3647+
version "9.3.1"
3648+
resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.1.tgz#ffc4706121e8406efeaeacb407b42b5022943b46"
3649+
integrity sha512-23YaERZ++BwZ8F8PxPFqrpOwp/JZun1Pj6aHZtPAU42j5LycBRasT9XMw7Eyr7zNFhT+rl3R3wFfd4WX6Ax+UA==
3650+
dependencies:
3651+
"@react-spring/shared" "~9.3.0"
3652+
"@react-spring/types" "~9.3.0"
3653+
3654+
"@react-spring/core@~9.3.0":
3655+
version "9.3.1"
3656+
resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.3.1.tgz#b98e1dca1eb4871dec75fdab350327e8a5222865"
3657+
integrity sha512-8rmfmEHLHGtF1CUiXRn64YJqsXNxv2cGX8oNnBnsuoE33c48Zc34t2VIMB4R9q5zwIUCvDBGfiEenA8ZAPxqOQ==
3658+
dependencies:
3659+
"@react-spring/animated" "~9.3.0"
3660+
"@react-spring/shared" "~9.3.0"
3661+
"@react-spring/types" "~9.3.0"
3662+
3663+
"@react-spring/konva@~9.3.0":
3664+
version "9.3.1"
3665+
resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.3.1.tgz#7a915c1c912a81dc27d1a1bc31eb47c0a2a0c643"
3666+
integrity sha512-woG2DeDcUlz5hB8g9pA/tyUWU6dMrAzyUsNiBWVCyI9UqKA7CUKjz+ODOUi+hS++3Kz7kZSr3u0zzHHfxvoTPQ==
3667+
dependencies:
3668+
"@react-spring/animated" "~9.3.0"
3669+
"@react-spring/core" "~9.3.0"
3670+
"@react-spring/shared" "~9.3.0"
3671+
"@react-spring/types" "~9.3.0"
3672+
3673+
"@react-spring/native@~9.3.0":
3674+
version "9.3.1"
3675+
resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.3.1.tgz#e1ac9d04d833b8d97e2d63630c4204f71915a29a"
3676+
integrity sha512-NAC1wHIUvy1umCVQRxcS+31Dmr9NszBY06sHy3jR8/HVuKNtaDUARVF3AYL/HfbIy4m6yR3tcIkM2NQ0SO+rZA==
3677+
dependencies:
3678+
"@react-spring/animated" "~9.3.0"
3679+
"@react-spring/core" "~9.3.0"
3680+
"@react-spring/shared" "~9.3.0"
3681+
"@react-spring/types" "~9.3.0"
3682+
3683+
"@react-spring/rafz@~9.3.0":
3684+
version "9.3.1"
3685+
resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.3.1.tgz#8dd6a598ffea487252b75d05d199e4aca5ea9d5e"
3686+
integrity sha512-fEBMCarGVl+/2kdO+g6Zig4F+3ymwmcGN8S71gb1c7Cbbxb87kviPz8EhshfIHoiLeJPGlqwcuGbxNmZbBamvA==
3687+
3688+
"@react-spring/shared@~9.3.0":
3689+
version "9.3.1"
3690+
resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.3.1.tgz#e7f22a4b8f5fea4491fa6a24c108db5abd19ddba"
3691+
integrity sha512-jhPpxzURGo6Nty90ex1lkxmZae7w/VAbnGmb/nXcYoZwSoNR+W2aAd00iXsh2ZGz6MgoJOsc495JeG3uC7Am8A==
3692+
dependencies:
3693+
"@react-spring/rafz" "~9.3.0"
3694+
"@react-spring/types" "~9.3.0"
3695+
3696+
"@react-spring/three@~9.3.0":
3697+
version "9.3.1"
3698+
resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.3.1.tgz#91a50851639c5a88fed8f76b4e25ff388d2b24e7"
3699+
integrity sha512-40iRIX2DrY+a81hIliOog6TMg/ZAtHGeZr95r0vKAsl+iX1g9Hs8XCS4wTeQIUgydZpbpShk/JL6mkcstEfBdw==
3700+
dependencies:
3701+
"@react-spring/animated" "~9.3.0"
3702+
"@react-spring/core" "~9.3.0"
3703+
"@react-spring/shared" "~9.3.0"
3704+
"@react-spring/types" "~9.3.0"
3705+
3706+
"@react-spring/types@~9.3.0":
3707+
version "9.3.1"
3708+
resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.3.1.tgz#20f392ecad15a1ea6c0865ffe86ca5016c05a278"
3709+
integrity sha512-W/YMJMX35XgGGzX0gKORBTwnvQ+1loDOFN3XlZkW5fgpEY+7VkRUpPyqPWXQr3n6lHrsLmHIGdpznqZi54ACTQ==
3710+
3711+
"@react-spring/web@~9.3.0":
3712+
version "9.3.1"
3713+
resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.3.1.tgz#5b377ba7ad52e746c2b59e2738c021de3f219d0b"
3714+
integrity sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==
3715+
dependencies:
3716+
"@react-spring/animated" "~9.3.0"
3717+
"@react-spring/core" "~9.3.0"
3718+
"@react-spring/shared" "~9.3.0"
3719+
"@react-spring/types" "~9.3.0"
3720+
3721+
"@react-spring/zdog@~9.3.0":
3722+
version "9.3.1"
3723+
resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.3.1.tgz#70fccd80c35248217de6252c4c2ffca16b4cff2f"
3724+
integrity sha512-QflA/fII9zWe9CSOA8QGSLMjUwyrtD1TX6YVzUSn/nlr2f7PlZPijdpdu9Cvdirgss472cUS7cRIUfll0TepqA==
3725+
dependencies:
3726+
"@react-spring/animated" "~9.3.0"
3727+
"@react-spring/core" "~9.3.0"
3728+
"@react-spring/shared" "~9.3.0"
3729+
"@react-spring/types" "~9.3.0"
3730+
36463731
"@reflect-blocks/figma-embed@^0.0.5":
36473732
version "0.0.5"
36483733
resolved "https://registry.yarnpkg.com/@reflect-blocks/figma-embed/-/figma-embed-0.0.5.tgz#68b0b8de5d3774ac694e6f0aada3def61f587367"
@@ -10598,6 +10683,18 @@ react-resizable@^3.0.1, react-resizable@^3.0.4:
1059810683
prop-types "15.x"
1059910684
react-draggable "^4.0.3"
1060010685

10686+
react-spring@^9.3.2:
10687+
version "9.3.2"
10688+
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.3.2.tgz#1456ef1ab1a3997c6c39693a9fd18cfd46c92930"
10689+
integrity sha512-LMFgjvTJVg2ltthzgJcZ7siOdRig7L8wJZIHrc7p6ss4AaJ446xHzm9L2ZQha1ZC9QVY8/e6XfLhMTFAG6dtjw==
10690+
dependencies:
10691+
"@react-spring/core" "~9.3.0"
10692+
"@react-spring/konva" "~9.3.0"
10693+
"@react-spring/native" "~9.3.0"
10694+
"@react-spring/three" "~9.3.0"
10695+
"@react-spring/web" "~9.3.0"
10696+
"@react-spring/zdog" "~9.3.0"
10697+
1060110698
react-style-singleton@^2.1.0:
1060210699
version "2.1.1"
1060310700
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"

0 commit comments

Comments
 (0)