Merge pull request viveknigam3003#61 from akram-r/main

Optimizations and Bugfixes

package.json

@@ -54,6 +54,7 @@
 		"prettier": "^3.1.0",
 		"typescript": "^5.0.2",
 		"vite": "^5.0.0",
+		"vite-plugin-pwa": "^0.17.4",
 		"vite-plugin-svgr": "^4.2.0"
 	}
 }

src/App.tsx

@@ -34,6 +34,7 @@ import {
 	setArtboards,
 	setSelectedArtboards,
 	updateActiveArtboardLayers,
+	setZoomLevel,
 } from './modules/app/actions';
 import NewArtboardModal from './modules/artboard/NewArtboardModal';
 import { getArtboardDimensions, getArtboardPosition } from './modules/artboard/helpers';
@@ -67,8 +68,7 @@ import store from './store';
 import { RootState } from './store/rootReducer';
 import { Artboard, FixedArray, colorSpaceType, guidesRefType } from './types';
 import { generateId, getMultiplierFor4K } from './utils';
-import demoJson from './data/demo.json';
-import mcd from './data/mcd.json';
+// lazy load demo json
 import workflows from './data/workflows.json';
 import WorkflowComponent from './modules/workflows';
 import { FabricGuide } from './modules/snapping/fabricGuide';
@@ -86,8 +86,9 @@ store.dispatch(appStart());
 	window.location.reload();
 };
 
-(window as any).loadDemo = () => {
-	localStorage.setItem('artboards', JSON.stringify(demoJson));
+(window as any).loadDemo = async () => {
+	const demoJson = await import('./data/demo.json');
+	localStorage.setItem('artboards', JSON.stringify(demoJson.default));
 	window.location.reload();
 };
 
@@ -167,6 +168,7 @@ const useStyles = createStyles(theme => ({
 
 function App() {
 	const dispatch = useDispatch();
+	console.log('first');
 	const artboards = useSelector((state: RootState) => state.app.artboards);
 	const activeArtboard = useSelector((state: RootState) => state.app.activeArtboard);
 	const selectedArtboards = useSelector((state: RootState) => state.app.selectedArtboards);
@@ -188,7 +190,6 @@ function App() {
 	//TODO: Ak maybe use saga here for scalability and take effect on undo/redo?
 	const [currentSelectedElements, setCurrentSelectedElements] = useState<fabric.Object[] | null>(null);
 	const [isNewArtboardModalOpen, { open: openNewArtboardModal, close: closeNewArtboardModal }] = useDisclosure();
-	const [zoomLevel, setZoomLevel] = useState(1);
 	const canvasRef = useRef<fabric.Canvas | null>(null);
 	const canvasContainerRef = useRef<HTMLDivElement | null>(null);
 	const [showAll, setShowAll] = useState(false);
@@ -339,7 +340,7 @@ function App() {
 		canvasRef.current?.setZoom(1);
 		// Place the canvas in the center of the screen
 		centerBoardToCanvas();
-		setZoomLevel(canvasRef.current?.getZoom() || 1);
+		dispatch(setZoomLevel(canvasRef.current?.getZoom() || 1));
 		if (showRuler) {
 			renderRuler();
 		}
@@ -644,7 +645,7 @@ function App() {
 		zoomFromCenter(zoom);
 		centerBoardToCanvas();
 
-		setZoomLevel(canvasRef.current?.getZoom() || zoom);
+		dispatch(setZoomLevel(canvasRef.current?.getZoom() || zoom));
 		if (showRuler) {
 			renderRuler();
 		}
@@ -654,7 +655,7 @@ function App() {
 		const zoom = canvasRef.current?.getZoom();
 		if (zoom) {
 			zoomFromCenter(zoom + 0.1);
-			setZoomLevel(canvasRef.current?.getZoom() || zoom + 0.1);
+			dispatch(setZoomLevel(canvasRef.current?.getZoom() || zoom + 0.1));
 		}
 		if (showRuler) {
 			renderRuler();
@@ -665,7 +666,7 @@ function App() {
 		const zoom = canvasRef.current?.getZoom();
 		if (zoom) {
 			zoomFromCenter(zoom - 0.1);
-			setZoomLevel(canvasRef.current?.getZoom() || zoom - 0.1);
+			dispatch(setZoomLevel(canvasRef.current?.getZoom() || zoom - 0.1));
 		}
 		if (showRuler) {
 			renderRuler();
@@ -967,7 +968,7 @@ function App() {
 					zoom = minZoom;
 				}
 				canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
-				setZoomLevel(zoom);
+				dispatch(setZoomLevel(zoom));
 				if (showRuler) {
 					renderRuler();
 				}
@@ -1152,9 +1153,10 @@ function App() {
 		],
 		[
 			'mod+1',
-			(event: KeyboardEvent) => {
+			async (event: KeyboardEvent) => {
+				const mcd = await import('./data/mcd.json');
 				event.preventDefault();
-				dispatch(setArtboards(mcd));
+				dispatch(setArtboards(mcd.default));
 			},
 		],
 		[
@@ -1246,13 +1248,7 @@ function App() {
 							<IconDeviceFloppy />
 						</ActionIcon>
 					</Tooltip>
-					<ZoomMenu
-						zoom={zoomLevel}
-						zoomIn={zoomIn}
-						zoomOut={zoomOut}
-						zoomReset={resetZoom}
-						zoomToFit={zoomToFit}
-					/>
+					<ZoomMenu zoomIn={zoomIn} zoomOut={zoomOut} zoomReset={resetZoom} zoomToFit={zoomToFit} />
 					<Button size="xs" leftIcon={<IconDownload size={14} />} variant="light" onClick={exportArtboard}>
 						Export
 					</Button>

src/modules/app/actions.ts

@@ -14,6 +14,7 @@ export enum ApplicationActionType {
 	SET_SELECTED_ARTBOARDS = 'app/setSelectedArtboards',
 	UPDATE_SELECTED_ARTBOARDS = 'app/updateSelectedArtboards',
 	APPLY_BULK_EDIT = 'app/applyBulkEdit',
+	SET_ZOOM = 'app/setZoom',
 }
 
 export const appStart = createAction(ApplicationActionType.APP_START);
@@ -44,3 +45,5 @@ export const applyBulkEdit = createAction<{
 	element: fabric.Object;
 	properties: Record<string, any>;
 }>(ApplicationActionType.APPLY_BULK_EDIT);
+
+export const setZoomLevel = createAction<number>(ApplicationActionType.SET_ZOOM);

src/modules/app/reducer.ts

@@ -6,16 +6,19 @@ import {
 	updateArtboards,
 	updateActiveArtboard,
 	updateSelectedArtboards,
+	setZoomLevel,
 } from './actions';
 
 export interface ApplicationState {
+	zoomLevel: number;
 	artboards: Array<Artboard>;
 	activeArtboard: Artboard | null;
 	activeArtboardLayers: Array<any>;
 	selectedArtboards: Array<string>;
 }
 
 export const initialState: ApplicationState = {
+	zoomLevel: 1,
 	activeArtboard: null,
 	artboards: [],
 	activeArtboardLayers: [],
@@ -41,6 +44,9 @@ const appReducer = createReducer(initialState, builder => {
 		})
 		.addCase(updateSelectedArtboards, (state, action) => {
 			state.selectedArtboards = action.payload;
+		})
+		.addCase(setZoomLevel, (state, action) => {
+			state.zoomLevel = action.payload;
 		});
 });
 

src/modules/artboard/helpers.ts

@@ -21,7 +21,7 @@ export const getArtboardDimensions = (
 	const width = artboard.width;
 	const height = artboard.height;
 
-	if (!width || !height) {
+	if (width === undefined || height === undefined) {
 		throw new Error('Artboard dimensions not found');
 	}
 

src/modules/image/helpers.ts

@@ -44,7 +44,7 @@ export const getScaledPosition = (artboard: fabric.Rect): { left: number; top: n
 	const width = artboard.width;
 	const height = artboard.height;
 
-	if (!left || !top || !width || !height) {
+	if (left === undefined || top === undefined || width === undefined || height === undefined) {
 		throw new Error('Artboard dimensions not found');
 	}
 

src/modules/zoom/index.tsx

@@ -3,12 +3,10 @@ import { IconFocusCentered, IconZoomIn, IconZoomOut, IconZoomReset } from '@tabl
 import React from 'react';
 import { useMenuStyles } from '../../styles/menu';
 import { getKeyboardShortcuts, parseKeyString } from '../keyboard/helpers';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/rootReducer';
 
 interface Props {
-	/**
-	 * Zoom value
-	 */
-	zoom: number;
 	/**
 	 * Zoom value setter
 	 */
@@ -27,7 +25,8 @@ interface Props {
 	zoomToFit: () => void;
 }
 
-const ZoomMenu: React.FC<Props> = ({ zoom, zoomIn, zoomOut, zoomReset, zoomToFit }) => {
+const ZoomMenu: React.FC<Props> = ({ zoomIn, zoomOut, zoomReset, zoomToFit }) => {
+	const zoom = useSelector((state: RootState) => state.app.zoomLevel);
 	const { classes } = useMenuStyles();
 	const zoomPercentage = Math.round(zoom * 100);
 	const keyboardShortcuts = getKeyboardShortcuts();

vite.config.ts

@@ -1,10 +1,65 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
-
+import { VitePWA } from 'vite-plugin-pwa';
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react(), svgr()],
+	plugins: [
+		react(),
+		svgr(),
+		VitePWA({
+			registerType: 'autoUpdate',
+			devOptions: {
+				enabled: false,
+			},
+			workbox: {
+				runtimeCaching: [
+					{
+						urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'google-fonts-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
+							},
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+						},
+					},
+					{
+						urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'gstatic-fonts-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
+							},
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+						},
+					},
+					{
+						urlPattern: /https:\/\/www\.rocketium\.com\/.*\.(ttf|otf|woff|woff2)/i,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'rocketium-fonts-cache',
+							expiration: {
+								maxEntries: 20,
+								maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
+							},
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+						},
+					},
+				],
+			},
+		}),
+	],
 	optimizeDeps: {
 		exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
 	},