Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-15 17:21:35 +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

22
apps/client/src/pages/builder/_components/toolbar.tsx
View File

@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
import {
ArrowClockwise,
ArrowCounterClockwise,
ArrowsOutCardinal,
CircleNotch,
ClockClockwise,
CubeFocus,
@ -9,6 +10,7 @@ import {
Hash,
LineSegment,
LinkSimple,
MagnifyingGlass,
MagnifyingGlassMinus,
MagnifyingGlassPlus,
} from "@phosphor-icons/react";
@ -19,6 +21,7 @@ import { useToast } from "@/client/hooks/use-toast";
import { usePrintResume } from "@/client/services/resume";
import { useBuilderStore } from "@/client/stores/builder";
import { useResumeStore, useTemporalResumeStore } from "@/client/stores/resume";
import { useState } from "react";
const openInNewTab = (url: string) => {
const win = window.open(url, "_blank");
@ -31,6 +34,7 @@ export const BuilderToolbar = () => {
const undo = useTemporalResumeStore((state) => state.undo);
const redo = useTemporalResumeStore((state) => state.redo);
const frameRef = useBuilderStore((state) => state.frame.ref);
const [panMode, setPanMode] = useState<boolean>(true);
const id = useResumeStore((state) => state.resume.id);
const isPublic = useResumeStore((state) => state.resume.visibility === "public");
@ -59,6 +63,10 @@ export const BuilderToolbar = () => {
const onZoomOut = () => frameRef?.contentWindow?.postMessage({ type: "ZOOM_OUT" }, "*");
const onResetView = () => frameRef?.contentWindow?.postMessage({ type: "RESET_VIEW" }, "*");
const onCenterView = () => frameRef?.contentWindow?.postMessage({ type: "CENTER_VIEW" }, "*");
const onTogglePanMode = () => {
setPanMode(!panMode); // local button state
frameRef?.contentWindow?.postMessage({ type: "TOGGLE_PAN_MODE", panMode: !panMode }, "*"); // toggle artboard state
};
return (
<motion.div className="fixed inset-x-0 bottom-0 mx-auto hidden py-6 text-center md:block">
@ -91,6 +99,20 @@ export const BuilderToolbar = () => {
<Separator orientation="vertical" className="h-9" />
<Tooltip
content={
panMode
? t`Scroll to Pan (Click to switch to Zoom)`
: t`Scroll to Zoom (Click to switch to Pan)`
}
>
<Toggle className="rounded-none" pressed={panMode} onPressedChange={onTogglePanMode}>
{panMode ? <ArrowsOutCardinal /> : <MagnifyingGlass />}
</Toggle>
</Tooltip>
<Separator orientation="vertical" className="h-9" />
<Tooltip content={t`Zoom In`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomIn}>
<MagnifyingGlassPlus />