Add settings menu and allow customization of print options

package.json

@@ -23,6 +23,7 @@
     }
   },
   "dependencies": {
+    "ajv": "8.6.3",
     "jimp": "0.16.1",
     "jspdf": "2.3.1",
     "lodash": "4.17.21",
@@ -34,7 +35,10 @@
     "redux-logic": "3.0.3",
     "rxjs": "7.3.0",
     "semantic-ui-css": "2.4.1",
-    "semantic-ui-react": "2.0.3"
+    "semantic-ui-react": "2.0.3",
+    "uniforms": "3.6.2",
+    "uniforms-bridge-json-schema": "3.6.2",
+    "uniforms-semantic": "3.6.2"
   },
   "devDependencies": {
     "@types/jest": "27.0.2",

src/api/actions.ts

@@ -13,6 +13,9 @@ import {
   REMOVE_IMAGE,
   RemoveAllAction,
   RemoveImageAction,
+  SET_SETTINGS,
+  SetSettingsAction,
+  Settings,
   UPLOAD_IMAGES,
   UploadImagesAction,
 } from './types';
@@ -48,3 +51,8 @@ export const uploadImages = (files: FileList | null): UploadImagesAction => ({
   type: UPLOAD_IMAGES,
   payload: files ? [...files] : [],
 });
+
+export const setSettings = (settings: Partial<Settings>): SetSettingsAction => ({
+  type: SET_SETTINGS,
+  payload: settings,
+});

src/api/lib.ts

@@ -1,10 +1,12 @@
+import Ajv, { SchemaObject } from 'ajv';
 import Jimp from 'jimp';
 import JsPDF from 'jspdf';
 import chunk from 'lodash/chunk';
 import random from 'lodash/random';
 import shuffle from 'lodash/shuffle';
+import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 
-import { CardImage, CardSymbol, Prime } from './types';
+import { CardImage, CardSymbol, Prime, Settings } from './types';
 
 /**
  * Generate supported plains (dimensions) according to the Ray-Chaudhuri–Wilson theorem
@@ -67,23 +69,26 @@ export const sleep = (t: number = 0) => new Promise(r => setTimeout(r, t));
  */
 export const generatePdf = async (
   images: CardImage[] = [],
-  options: { n: Prime },
+  options: { n: Prime } & Settings,
 ): Promise<JsPDF> => {
-  const { n } = options;
+  const {
+    n, // No of plains
+    pageWidth = 210, // A4
+    pageHeight = 297, // A4
+    cardRadius = 42, // Size of a single card
+    symbolMargin = -0.1, // Percent of card radius; value is negative to allow overlap since rotated symbols are smaller
+    rotateSymbols = true, // Whether the symbols should be randomly rotated
+  } = options;
 
   // Apply images to generated card sequences
   const cards = generateCards(n).map(card => card.map(s => images[s]));
 
   // PDF sizes in mm
-  const pageWidth = 210; // A4
-  const pageHeight = 297; // A4
-  const cardRadius = 42; // Size of a single card
   const columnsPerPage = Math.floor(pageWidth / (cardRadius * 2));
   const rowsPerPage = Math.floor(pageHeight / (cardRadius * 2));
   const cardsPerPage = columnsPerPage * rowsPerPage;
   const columnWidth = pageWidth / columnsPerPage;
   const rowHeight = pageHeight / rowsPerPage;
-  const symbolMargin = -0.1; // Percent of card radius; value is negative to allow overlap since rotated symbols are smaller
 
   const pdf = new JsPDF();
 
@@ -101,7 +106,9 @@ export const generatePdf = async (
 
       // Add symbols to pdf
       for (let s of symbols) {
-        s = await rotateSymbol(s);
+        if (rotateSymbols) {
+          s = await rotateSymbol(s);
+        }
         pdf.addImage(
           s.image.base64src,
           'PNG',
@@ -111,7 +118,7 @@ export const generatePdf = async (
           cardRadius * s.height,
           s.image.id,
           'NONE',
-          0
+          0,
         )
       }
     }
@@ -223,3 +230,17 @@ function getCardMiddle(i: number, columnWidth: number, rowHeight: number): { x:
   }
 }
 
+export function createBridge(schema: SchemaObject): JSONSchemaBridge {
+  const ajv = new Ajv({ allErrors: true, useDefaults: true });
+
+  function createValidator(schema: SchemaObject) {
+    const validator = ajv.compile(schema);
+
+    return (model: object) => {
+      validator(model);
+      return validator.errors?.length ? { details: validator.errors } : null;
+    };
+  }
+
+  return new JSONSchemaBridge(schema, createValidator(schema));
+}

src/api/logic.ts

@@ -57,12 +57,12 @@ export const generatePdfLogic = createLogic({
     dispatch,
     done,
   ) {
-    const images: CardImage[] = getState().images;
+    const { settings, images } = getState();
 
     // Unlock the thread before heavy computations starts
     await sleep(100);
 
-    const pdf = await generatePdf(images, action.payload).catch(err =>
+    const pdf = await generatePdf(images, { ...settings, ...action.payload }).catch(err =>
       alert(err.message),
     );
 

src/api/reducers.ts

@@ -5,12 +5,20 @@ import {
   GENERATE_PDF_COMPLETE,
   REMOVE_ALL,
   REMOVE_IMAGE,
+  SET_SETTINGS,
   State,
 } from './types';
 
 const initialState: State = {
   images: [],
   processing: false,
+  settings: {
+    pageWidth: 210, // A4
+    pageHeight: 297, // A4
+    cardRadius: 42, // Size of a single card
+    symbolMargin: -0.1, // Percent of card radius
+    rotateSymbols: true, // Whether the symbols should be randomly rotated
+  }
 };
 
 export default function(state = initialState, action: Actions): State {
@@ -40,6 +48,14 @@ export default function(state = initialState, action: Actions): State {
         ...state,
         images: state.images.filter(image => image.id !== action.payload),
       };
+    case SET_SETTINGS:
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          ...action.payload,
+        },
+      };
     default:
       return state;
   }

src/api/types.ts

@@ -2,6 +2,7 @@
 export interface State {
   images: CardImage[];
   processing: boolean;
+  settings: Settings;
 }
 
 // Possible redux action types
@@ -12,10 +13,19 @@ export const LOAD_EXAMPLES = 'LOAD_EXAMPLES';
 export const REMOVE_ALL = 'REMOVE_ALL';
 export const REMOVE_IMAGE = 'REMOVE_IMAGE';
 export const UPLOAD_IMAGES = 'UPLOAD_IMAGES';
+export const SET_SETTINGS = 'SET_SETTINGS';
 
 // Payload types
 export type Prime = 2 | 3 | 5 | 7 | 11;
 
+export interface Settings {
+  pageWidth: number; // Page width in mm
+  pageHeight: number; // Page height in mm
+  cardRadius: number; // Size of a single card
+  symbolMargin: number; // Percent of card radius
+  rotateSymbols: boolean; // Whether the symbols should be randomly rotated
+}
+
 export interface CardImage {
   base64src: string;
   id: string;
@@ -66,6 +76,10 @@ export interface UploadImagesAction {
   type: typeof UPLOAD_IMAGES;
   payload: File[];
 }
+export interface SetSettingsAction {
+  type: typeof SET_SETTINGS;
+  payload: Partial<Settings>;
+}
 
 export type Actions =
   | AppendImagesAction
@@ -74,4 +88,5 @@ export type Actions =
   | LoadExamplesAction
   | RemoveAllAction
   | RemoveImageAction
-  | UploadImagesAction;
+  | UploadImagesAction
+  | SetSettingsAction;

src/components/Files.tsx

@@ -18,6 +18,8 @@ import {
 import { State } from '../api/store';
 import { CardImage } from '../api/types';
 
+import Settings from './Settings';
+
 interface Props {
   images: CardImage[];
   loadExamples: typeof loadExamples;
@@ -71,10 +73,13 @@ const Files: FC<Props> = ({
         ))}
       </Image.Group>
       {images.length > 0 && (
-        <Button onClick={removeAll}>
-          <Icon name="trash" />
-          Remove all images
-        </Button>
+        <>
+          <Button onClick={removeAll}>
+            <Icon name="trash" />
+            Remove all images
+          </Button>
+          <Settings />
+        </>
       )}
     </Segment>
   </Container>

src/components/Settings.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useState } from 'react';
+import { connect } from 'react-redux';
+import { Button, Icon, Modal, Message } from 'semantic-ui-react';
+import { AutoForm } from 'uniforms-semantic';
+
+import { setSettings } from '../api/actions';
+import { createBridge } from '../api/lib';
+import { State } from '../api/store';
+import { Settings } from '../api/types';
+
+const formSchema = createBridge({
+  title: 'Settings',
+  type: 'object',
+  properties: {
+    pageWidth: { type: 'integer' },
+    pageHeight: { type: 'integer' },
+    cardRadius: { type: 'number' },
+    symbolMargin: { type: 'number' },
+    rotateSymbols: { type: 'boolean' },
+  },
+});
+
+interface Props {
+  settings: Settings,
+  setSettings: typeof setSettings;
+}
+
+const SettingsComponent: FC<Props> = ({
+                                        settings,
+                                        setSettings,
+                                      }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Modal
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
+      open={open}
+      dimmer="blurring"
+      trigger={
+        <Button>
+          <Icon name="cog"/>
+          Settings
+        </Button>
+      }
+    >
+      <Modal.Header>Adjust settings for the print</Modal.Header>
+      <Modal.Content>
+        <AutoForm
+          schema={formSchema}
+          model={settings}
+          onSubmit={(model) => {
+            setSettings(model);
+            setOpen(false);
+          }}
+        />
+        <Message success header="Tips:" list={[
+          'Page sizes and card radius are in millimeters',
+          'Symbol margin is a percentage of a symbol that should be left as a margin between other symbols',
+          'If you rotate symbols, the margin value should be negative to allow overlap since rotated symbols are smaller',
+          'Experiment and see what fit best for your pictures!'
+        ]}/>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default connect((state: State) => ({ settings: state.settings }), {
+  setSettings,
+})(SettingsComponent);