Add setting for cellsize

src/main.ts

@@ -11,6 +11,7 @@ import { cycle, comp, range, iterator, map, mapcat, reverse, zip } from "@thi.ng
 const width_ = 420
 const height_ = 594
 const cellSize_ = 12
+const padding_ = 5 // * cellSize
 
 const xSeeds_ = "101110100101100"
 const ySeeds_ = "101001111001110000101"
@@ -21,6 +22,9 @@ const unit_ = 'mm'
 const width = reactive(width_)
 const height = reactive(height_)
 const unit = reactive(unit_)
+const cellSize = reactive(cellSize_).map(num => Number.isNaN(num) || num < 5 ? 5 : num) // restrict cells to be at least 5 $unit
+const padding = reactive(padding_)
+
 const size = sync({ src: { width, height } }).map(({ width, height }) => [width, height])
 
 const toNumber = (v: any) => typeof v === 'number' ? v : Number.parseInt(v, 10)
@@ -28,7 +32,6 @@ const parsePattern = (pattern: string) => pattern.split('').map(toNumber)
 
 const xSeeds = reactive(xSeeds_).map((pattern) => parsePattern(pattern))
 const ySeeds = reactive(ySeeds_).map((pattern) => parsePattern(pattern))
-const cellSize = reactive(cellSize_).map(num => Number.isNaN(num) || num < 5 ? 5 : num) // restrict cells to be at least 5 $unit
 
 // const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color')
 const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
@@ -80,23 +83,24 @@ const scene = sync({
   src: {
     size,
     cellSize,
+    padding,
     xSeeds,
     ySeeds,
   }
 }).map(({
   size,
   cellSize,
+  padding,
   xSeeds,
   ySeeds,
 }) => {
   const [width, height] = size
-  const minPadding = cellSize
 
   // calculate available drawing area
-  const xCells = Math.floor((width - 2 * minPadding) / cellSize)
+  const xCells = Math.floor((width - 2 * padding * cellSize) / cellSize)
   const xPadding = (width - (xCells * cellSize)) / 2
 
-  const yCells = Math.floor((height - 2 * minPadding) / cellSize)
+  const yCells = Math.floor((height - 2 * padding * cellSize) / cellSize)
   const yPadding = (height - (yCells * cellSize)) / 2
 
   const xLines = [...map(l => scale(l, cellSize), generateLines(yCells, xCells, cycle(ySeeds), xLineGen))]
@@ -143,6 +147,12 @@ $compile(
       value: cellSize.deref()!,
       oninput: $inputNum(cellSize),
     }),
+    input("Padding", {
+      type: "number",
+      min: "1",
+      value: padding.deref()!,
+      oninput: $inputNum(padding),
+    }),
     input("X Pattern: ", {
       type: "text",
       value: xSeeds_,