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,9 +16,47 @@ function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap,
     );
 }
 
+function getGridPoints(ctx: CanvasRenderingContext2D, idx: number) {
+    let x!: number, y!: number;
+    switch (idx) {
+        case 0:
+            x = ctx.canvas.width * .25;
+            y = ctx.canvas.height * .25;
+            break;
+        case 1:
+            x = ctx.canvas.width * .75;
+            y = ctx.canvas.height * .25;
+            break;
+        case 2:
+            x = ctx.canvas.width * .25;
+            y = ctx.canvas.height * .75;
+            break;
+        case 3:
+            x = ctx.canvas.width * .75;
+            y = ctx.canvas.height * .75;
+            break;
+    }
+    return [x, y];
+}
+
 const modes: { [key in CollageModeType]: CollageMode } = {
-    "grid": {
+    "clean_grid": {
-        name: "Regular 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]);
+            });
+        }
+    },
+    "chaos_grid": {
+        name: "Irregular Grid",
         minImages: 4,
         forceConfig: {
             numImages: 4
@@ -28,42 +66,17 @@ const modes: { [key in CollageModeType]: CollageMode } = {
             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;
+                  const [x, y] = getGridPoints(ctx, idx);
-                  switch (idx) {
+                  const scaleRatio = Math.max(quadrantSize[0] / image.width, quadrantSize[1] / image.height);
-                      case 0:
+                  ctx.drawImage(image,
-                          x = ctx.canvas.width * .25;
+                    x - (image.width * scaleRatio / 2), y - (image.height * scaleRatio / 2),
-                          y = ctx.canvas.height * .25;
+                    image.width * scaleRatio, image.height * scaleRatio);
-                          break;
-                      case 1:
-                          x = ctx.canvas.width * .75;
-                          y = ctx.canvas.height * .25;
-                          break;
-                      case 2:
-                          x = ctx.canvas.width * .25;
-                          y = ctx.canvas.height * .75;
-                          break;
-                      case 3:
-                          x = ctx.canvas.width * .75;
-                          y = ctx.canvas.height * .75;
-                          break;
-                  }
-                  if (config.cleanCrops) {
-                      cleanDraw(ctx, image, x, y, quadrantSize[0], quadrantSize[1]);
-                  } else {
-                      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;
 }