remove cleanCrops from config; split grid into two modes

src/collages.ts

@@ -1,7 +1,7 @@
 import {CollageMode} from "@/types";
 import {randint, shuffle} from "@/utils";
 
-const collageModeType = ["grid", "row", "irow", "col", "icol", "concentric_factor", "concentric_spaced"] as const;
+const collageModeType = ["clean_grid", "chaos_grid", "row", "irow", "col", "icol", "concentric_factor", "concentric_spaced"] as const;
 export type CollageModeType = typeof collageModeType[number];
 
 function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap,
@@ -16,18 +16,7 @@ function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap,
     );
 }
 
-const modes: { [key in CollageModeType]: CollageMode } = {
+function getGridPoints(ctx: CanvasRenderingContext2D, idx: number) {
-    "grid": {
-        name: "Regular Grid",
-        minImages: 4,
-        forceConfig: {
-            numImages: 4
-        },
-        place: (ctx, images, config) => {
-            const quadrantSize = [ctx.canvas.width / 2, ctx.canvas.height / 2];
-            const selectedImages = shuffle(images).slice(0, 4);
-            shuffle(selectedImages.map((image, idx) => [image, idx] as [ImageBitmap, number]))
-              .forEach(([image, idx]) => {
     let x!: number, y!: number;
     switch (idx) {
         case 0:
@@ -47,23 +36,47 @@ const modes: { [key in CollageModeType]: CollageMode } = {
             y = ctx.canvas.height * .75;
             break;
     }
-                  if (config.cleanCrops) {
+    return [x, y];
+}
+
+const modes: { [key in CollageModeType]: CollageMode } = {
+    "clean_grid": {
+        name: "Clean Grid",
+        minImages: 4,
+        forceConfig: {
+            numImages: 4
+        },
+        place: (ctx, images, config) => {
+            const quadrantSize = [ctx.canvas.width / 2, ctx.canvas.height / 2];
+            const selectedImages = shuffle(images).slice(0, 4);
+            selectedImages.forEach((image, idx) => {
+                const [x, y] = getGridPoints(ctx, idx);
                 cleanDraw(ctx, image, x, y, quadrantSize[0], quadrantSize[1]);
-                  } else {
+            });
+        }
+    },
+    "chaos_grid": {
+        name: "Irregular Grid",
+        minImages: 4,
+        forceConfig: {
+            numImages: 4
+        },
+        place: (ctx, images, config) => {
+            const quadrantSize = [ctx.canvas.width / 2, ctx.canvas.height / 2];
+            const selectedImages = shuffle(images).slice(0, 4);
+            shuffle(selectedImages.map((image, idx) => [image, idx] as [ImageBitmap, number]))
+              .forEach(([image, idx]) => {
+                  const [x, y] = getGridPoints(ctx, idx);
                   const scaleRatio = Math.max(quadrantSize[0] / image.width, quadrantSize[1] / image.height);
                   ctx.drawImage(image,
                     x - (image.width * scaleRatio / 2), y - (image.height * scaleRatio / 2),
                     image.width * scaleRatio, image.height * scaleRatio);
-                  }
               });
         }
     },
     "row": {
         name: "Regular Row",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const quadrantSize = [ctx.canvas.width / selectedImages.length, ctx.canvas.height];
@@ -77,9 +90,6 @@ const modes: { [key in CollageModeType]: CollageMode } = {
     "irow": {
         name: "Irregular Row",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const quadrantSize = [ctx.canvas.width / selectedImages.length, ctx.canvas.height];
@@ -95,9 +105,6 @@ const modes: { [key in CollageModeType]: CollageMode } = {
     "col": {
         name: "Regular Column",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const quadrantSize = [ctx.canvas.width, ctx.canvas.height / selectedImages.length];
@@ -111,9 +118,6 @@ const modes: { [key in CollageModeType]: CollageMode } = {
     "icol": {
         name: "Irregular Column",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const quadrantSize = [ctx.canvas.width, ctx.canvas.height / selectedImages.length];
@@ -129,9 +133,6 @@ const modes: { [key in CollageModeType]: CollageMode } = {
     "concentric_factor": {
         name: "Constant factor concentric",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const x = ctx.canvas.width / 2;
@@ -153,9 +154,6 @@ const modes: { [key in CollageModeType]: CollageMode } = {
     "concentric_spaced": {
         name: "Equally spaced concentric",
         minImages: 2,
-        forceConfig: {
-            cleanCrops: true
-        },
         place: (ctx, images, config) => {
             const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
             const x = ctx.canvas.width / 2;

src/components/Collage.vue

@@ -33,12 +33,6 @@
                        :disabled="Object.keys(forceConfig).includes('numImages')"
                        v-model="forceConfig.numImages || collageConfig.numImages">
             </label>
-            <label>
-                <input type="checkbox"
-                       :disabled="Object.keys(forceConfig).includes('cleanCrops')"
-                       v-model="forceConfig.cleanCrops || collageConfig.cleanCrops">
-                Crop cleanly
-            </label>
         </div>
     </div>
 </div>
@@ -60,8 +54,7 @@ export default class Collage extends Vue {
         height: 640
     };
     private collageConfig: CollageConfig = {
-        numImages: undefined,
+        numImages: undefined
-        cleanCrops: false
     };
     private currentModeType: DisplayCollageModeType = "shuffle";
     private lastActiveModeType: DisplayCollageModeType | null = null;

src/types.d.ts

@@ -7,5 +7,4 @@ export interface CollageMode {
 
 export interface CollageConfig {
     numImages?: number;
-    cleanCrops?: boolean;
 }