Fix nCols formula missing gap in numerator (#31)

* fix nCols formula missing gap in numerator

* update deps

* add prop calcCols: (masonryWidth: number, minColWidth: number, gap: number): number

defaults to Math.min(
  items.length,
  Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1
)

* add test 'calculates correct number of columns based masonryWidth, minColWidth, gap'

* document calcCols in readme

* svelte.config.js set compilerOptions.accessors=process.env.TEST

package.json

@@ -20,16 +20,16 @@
     "changelog": "npx auto-changelog --package --output changelog.md --hide-credit --commit-limit false"
   },
   "dependencies": {
-    "svelte": "^4.2.1"
+    "svelte": "^4.2.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.25.0",
+    "@sveltejs/kit": "^1.27.1",
     "@sveltejs/package": "^2.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "eslint": "^8.49.0",
-    "eslint-plugin-svelte": "^2.33.2",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-plugin-svelte": "^2.34.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
     "prettier": "^3.0.3",
@@ -38,10 +38,10 @@
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.22",
+    "svelte2tsx": "^0.6.23",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.5"
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   },
   "keywords": [
     "svelte",

readme.md

@@ -72,6 +72,21 @@ Additional optional props are:
 
    Whether to [FLIP-animate](https://svelte.dev/tutorial/animate) masonry items when viewport resizing or other events cause `items` to rearrange.
 
+1. ```ts
+   calcCols = (
+     masonryWidth: number,
+     minColWidth: number,
+     gap: number,
+   ): number => {
+     return Math.min(
+       items.length,
+       Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1,
+     )
+   }
+   ```
+
+   Function used to compute the number of columns based on the masonry width, minimum column width and gap.
+
 1. ```ts
    class: string = ``
    ```

src/lib/Masonry.svelte

@@ -3,6 +3,16 @@
   import { fade } from 'svelte/transition'
 
   export let animate: boolean = true
+  export let calcCols = (
+    masonryWidth: number,
+    minColWidth: number,
+    gap: number
+  ): number => {
+    return Math.min(
+      items.length,
+      Math.floor((masonryWidth + gap) / (minColWidth + gap)) || 1
+    )
+  }
   export { className as class }
   export let columnClass: string = ``
   export let duration: number = 200
@@ -25,7 +35,7 @@
   type Item = $$Generic
   let className = ``
 
-  $: nCols = Math.min(items.length, Math.floor(masonryWidth / (minColWidth + gap)) || 1)
+  $: nCols = calcCols(masonryWidth, minColWidth, gap)
   $: itemsToCols = items.reduce(
     (cols: [Item, number][][], item, idx) => {
       cols[idx % cols.length].push([item, idx])

svelte.config.js

@@ -19,4 +19,11 @@ export default {
       $site: `src/site`,
     },
   },
+
+  compilerOptions: {
+    // https://github.com/janosh/svelte-multiselect/issues/196
+    immutable: true,
+    // enable direct prop access for vitest unit tests
+    accessors: process.env.TEST,
+  },
 }

tests/masonry.test.ts

@@ -64,4 +64,19 @@ describe(`Masonry`, () => {
       `gap: ${gap}px; max-width: ${maxColWidth}px;`,
     )
   })
+
+  test(`calculates correct number of columns based masonryWidth, minColWidth, gap`, () => {
+    const masonryWidth = 370
+    const minColWidth = 50
+    const gap = 10
+    // floor((370 + 10) / (50 + 10)) = 6 columns
+    const expected_cols = Math.floor((masonryWidth + gap) / (minColWidth + gap))
+
+    const masonry = new Masonry({
+      target: document.body,
+      props: { items: indices, masonryWidth, minColWidth, gap },
+    })
+
+    expect(masonry.calcCols(masonryWidth, minColWidth, gap)).toBe(expected_cols)
+  })
 })