Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:infinia-yzl/Reactive-Resume into infinia-yzl-main

Browse Source
This commit is contained in:
Amruth Pillai
2025-01-12 16:24:54 +01:00
parent 374b9bcc58 5827576ffb
commit dda47f51ec
2 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/artboard/src/pages/builder.tsx
View File

@ -1,7 +1,7 @@
import { SectionKey } from "@reactive-resume/schema";
import { pageSizeMap, Template } from "@reactive-resume/utils";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useMemo, useRef } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import { MM_TO_PX, Page } from "../components/page";
@ -14,6 +14,8 @@ export const BuilderLayout = () => {
const layout = useArtboardStore((state) => state.resume.metadata.layout);
const template = useArtboardStore((state) => state.resume.metadata.template as Template);
const [wheelPanning, setWheelPanning] = useState(true);
const Template = useMemo(() => getTemplate(template), [template]);
useEffect(() => {
@ -27,6 +29,9 @@ export const BuilderLayout = () => {
transformRef.current?.resetTransform(0);
setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
}
if (event.data.type === "TOGGLE_PAN_MODE") {
setWheelPanning(event.data.panMode);
}
};
window.addEventListener("message", handleMessage);
@ -44,6 +49,12 @@ export const BuilderLayout = () => {
minScale={0.4}
initialScale={0.8}
limitToBounds={false}
panning={{
wheelPanning: wheelPanning,
}}
wheel={{
wheelDisabled: wheelPanning,
}}
>
<TransformComponent
wrapperClass="!w-screen !h-screen"