From 4543881808fa8ff3fbb2849ab9f5e0371dd054d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Tue, 28 May 2024 08:51:23 +0200
Subject: [PATCH] functional zoom

---
 client/homebrew/brewRenderer/brewRenderer.jsx | 28 ++++++++++++++++++-
 .../homebrew/brewRenderer/toolBar/toolBar.jsx |  7 ++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 34d239040..474f28937 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -65,6 +65,7 @@ const BrewRenderer = (props)=>{
 		height             : PAGE_HEIGHT,
 		isMounted          : false,
 		visibility         : 'hidden',
+		zoom			   : 100,
 	});
 
 	const mainRef  = useRef(null);
@@ -182,6 +183,30 @@ const BrewRenderer = (props)=>{
 	const themePath     = props.theme ?? '5ePHB';
 	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
 
+
+	//Toolbar settings:
+
+	const updateZoom = (newZoom) => {
+		setState((prevState)=>({
+			...prevState,
+			zoom : newZoom
+		}));
+	};
+
+	const makeZoom = () => {
+
+		return(
+			<style>
+        {`
+          .pages {
+            scale:${state.zoom}%;
+          }
+        `}
+      </style>
+		);
+	}
+
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -199,7 +224,7 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<ToolBar />
+				<ToolBar updateZoom={updateZoom} />
 				<div className={'brewRenderer'}
 					onScroll={handleScroll}
 					style={{ height: state.height }}>
@@ -214,6 +239,7 @@ const BrewRenderer = (props)=>{
 						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>
 					}
 					<link href={`/themes/${rendererPath}/${themePath}/style.css`} type='text/css' rel='stylesheet'/>
+					{makeZoom()}
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}
 					{state.isMounted
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 11eb6ecb9..60e1a437e 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,13 +3,18 @@ const React = require('react');
 const { useState, useRef, useEffect } = React;
 const _ = require('lodash');
 
-const ToolBar = () => {
+const ToolBar = ({updateZoom}) => {
     const [state, setState] = useState({
         currentPage: 1,
         totalPages: 10,
         zoomLevel: 100,
     });
 
+    useEffect(() => {
+        console.log(`Zoom to: ${state.zoomLevel}`);
+        updateZoom(state.zoomLevel);
+    }, [state.zoomLevel]);
+
     const setZoomLevel = (direction) => {
         let zoomLevel = state.zoomLevel;
         if (direction === 'in') {