functional zoom

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

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') {