@pictogrammers/components 0.4.9 → 0.5.1

package/pg/inputPixelEditor/utils/bitmapToMask.ts

@@ -6,28 +6,38 @@ interface Edge {
 }
 
 interface Options {
+  x?: number;
+  y?: number;
   width?: number;
   height?: number;
   scale?: number;
   offsetX?: number;
   offsetY?: number;
+  include?: number[];
 }
 
 export function toIndex(x: number, y: number, width: number) {
   return y * width + x;
 }
 
+/**
+ * Convert a 2d array to a SVG path.
+ * @param data
+ * @param options
+ * @returns path string
+ */
 export default function bitmaskToPath(data: number[] | number[][], options: Options = {}) {
 
-  let bitmask: number[] | number[][],
+  let bitmask: number[],
     width: number,
     height: number,
     scale = 1,
     offsetX = 0,
-    offsetY = 0;
+    offsetY = 0,
+    include = [1];
 
   if (options.width) {
-    bitmask = data;
+    bitmask = data as number[]; // already flat
     width = options.width;
     height = bitmask.length / width;
     if (height % 1 !== 0) {
@@ -53,6 +63,10 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     offsetY = options.offsetY;
   }
 
+  if (options.include) {
+    include = options.include;
+  }
+
   // Naively copy into a new bitmask with a border of 1 to make sampling easier (no out of bounds checks)
   const newWidth = width + 2;
   const newHeight = height + 2;
@@ -65,7 +79,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
 
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      bm[BMXYToIndex(x, y)] = bitmask[toIndex(x, y, width)];
+      bm[BMXYToIndex(x, y)] = include.includes(bitmask[toIndex(x, y, width)]) ? 1 : 0;
     }
   }
 
@@ -101,7 +115,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
 
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      if (bm[BMXYToIndex(x, y)] == 1) {
+      if (bm[BMXYToIndex(x, y)] === 1) {
         const left = bm[BMXYToIndex(x - 1, y)];
         if (left == 0) {
           const edge = edges[EdgeYIndex(x, y)];
@@ -116,7 +130,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const right = bm[BMXYToIndex(x + 1, y)];
-        if (right == 0) {
+        if (right === 0) {
           const edge = edges[EdgeYIndex(x + 1, y)];
           SetEdge(edge, x + 1, y);
           if (bm[BMXYToIndex(x + 1, y + 1)]) {
@@ -129,7 +143,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const top = bm[BMXYToIndex(x, y - 1)];
-        if (top == 0) {
+        if (top === 0) {
           const edge: Edge = edges[EdgeXIndex(x, y)];
           SetEdge(edge, x, y);
           if (bm[BMXYToIndex(x + 1, y - 1)]) {
@@ -142,7 +156,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const bottom = bm[BMXYToIndex(x, y + 1)];
-        if (bottom == 0) {
+        if (bottom === 0) {
           const edge = edges[EdgeXIndex(x, y + 1)];
           SetEdge(edge, x + 1, y + 1);
           if (bm[BMXYToIndex(x - 1, y + 1)]) {

package/pg/inputPixelEditor/utils/blobToImage.ts

@@ -0,0 +1,11 @@
+export function blobToImage(blob) {
+  return new Promise(resolve => {
+    const url = URL.createObjectURL(blob)
+    let img = new Image()
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      resolve(img)
+    }
+    img.src = url
+  });
+}

package/pg/inputPixelEditor/utils/canvasToPngBuffer.ts

@@ -0,0 +1,12 @@
+export async function canvasToPngBuffer(canvas: HTMLCanvasElement): Promise<ArrayBuffer> {
+    const blob = await new Promise((resolve: BlobCallback) =>
+        canvas.toBlob(resolve, 'image/png')
+    );
+
+    // `canvas.toBlob` can return null, so guard it
+    if (!blob) {
+        throw new Error("Failed to convert canvas to Blob");
+    }
+
+    return await blob.arrayBuffer();
+}

package/pg/inputPixelEditor/utils/constants.ts

@@ -1 +1,55 @@
-export const WHITE = '#FFFFFF';
+export const WHITE = '#FFFFFF';
+
+export type Pixel = { x: number, y: number };
+
+export type Point = [number, number];
+
+export enum LayerType {
+  Pixel = 'pixel',
+  Reference = 'reference',
+  Pattern = 'pattern',
+  Linear = 'linear',
+  Radial = 'radial',
+}
+
+/**
+ * stop 0 to 1
+ * colorIndex
+ */
+export type GradientStop = [number, number];
+
+interface LayerPixel {
+  type: LayerType.Pixel;
+  path: string;
+  color: number;
+}
+
+interface LayerReference {
+  type: LayerType.Reference;
+  id: string;
+  position: Point;
+}
+
+interface LayerPattern {
+  type: LayerType.Pattern;
+  id: string;
+  path: string;
+  offset: Point;
+}
+
+interface LayerLinear {
+  type: LayerType.Linear;
+  start: Point;
+  end: Point;
+  stops: GradientStop[];
+  dither: 'bayer4' | 'bayer8' | 'bayer16';
+}
+
+interface LayerRadial {
+  type: LayerType.Radial;
+  start: Point;
+  end: Point;
+  stops: GradientStop[];
+  transform: [number, number, number, number, number, number];
+  dither: 'bayer4' | 'bayer8' | 'bayer16';
+}

package/pg/inputPixelEditor/utils/crc32.ts

@@ -0,0 +1,116 @@
+/**
+ * Compute CRC32 lookup tables as described at:
+ * https://github.com/komrad36/CRC#option-6-1-byte-tabular
+ *
+ * An iteration of CRC computation can be performed on 8 bits of input at once. By pre-computing a
+ * table of the values of CRC(?) for all 2^8 = 256 possible byte values, during the final
+ * computation we can replace a loop over 8 bits with a single lookup in the table.
+ *
+ * For further speedup, we can also pre-compute the values of CRC(?0) for all possible bytes when a
+ * zero byte is appended. Then we can process two bytes of input at once by computing CRC(AB) =
+ * CRC(A0) ^ CRC(B), using one lookup in the CRC(?0) table and one lookup in the CRC(?) table.
+ *
+ * The same technique applies for any number of bytes to be processed at once, although the speed
+ * improvements diminish.
+ *
+ * @param polynomial The binary representation of the polynomial to use (reversed, i.e. most
+ * significant bit represents x^0).
+ * @param numTables The number of bytes of input that will be processed at once.
+ */
+function crc32GenerateTables({
+  polynomial,
+  numTables,
+}: {
+  polynomial: number;
+  numTables: number;
+}): Uint32Array {
+  const table = new Uint32Array(256 * numTables);
+  for (let i = 0; i < 256; i++) {
+    let r = i;
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    table[i] = r;
+  }
+  for (let i = 256; i < table.length; i++) {
+    const value = table[i - 256]!;
+    table[i] = table[value & 0xff]! ^ (value >>> 8);
+  }
+  return table;
+}
+
+const CRC32_TABLE = crc32GenerateTables({ polynomial: 0xedb88320, numTables: 8 });
+
+/**
+ * Initialize a CRC32 to all 1 bits.
+ */
+function crc32Init(): number {
+  return ~0;
+}
+
+/**
+ * Update a streaming CRC32 calculation.
+ *
+ * For performance, this implementation processes the data 8 bytes at a time, using the algorithm
+ * presented at: https://github.com/komrad36/CRC#option-9-8-byte-tabular
+ */
+function crc32Update(prev: number, data: ArrayBufferView): number {
+  const byteLength = data.byteLength;
+  const view = new DataView(data.buffer, data.byteOffset, byteLength);
+  let r = prev;
+  let offset = 0;
+
+  // Process bytes one by one until we reach 4-byte alignment, which will speed up uint32 access.
+  const toAlign = -view.byteOffset & 3;
+  for (; offset < toAlign && offset < byteLength; offset++) {
+    r = CRC32_TABLE[(r ^ view.getUint8(offset)) & 0xff]! ^ (r >>> 8);
+  }
+  if (offset === byteLength) {
+    return r;
+  }
+
+  offset = toAlign;
+
+  // Process 8 bytes (2 uint32s) at a time.
+  let remainingBytes = byteLength - offset;
+  for (; remainingBytes >= 8; offset += 8, remainingBytes -= 8) {
+    r ^= view.getUint32(offset, true);
+    const r2 = view.getUint32(offset + 4, true);
+    r =
+      CRC32_TABLE[0 * 256 + ((r2 >>> 24) & 0xff)]! ^
+      CRC32_TABLE[1 * 256 + ((r2 >>> 16) & 0xff)]! ^
+      CRC32_TABLE[2 * 256 + ((r2 >>> 8) & 0xff)]! ^
+      CRC32_TABLE[3 * 256 + ((r2 >>> 0) & 0xff)]! ^
+      CRC32_TABLE[4 * 256 + ((r >>> 24) & 0xff)]! ^
+      CRC32_TABLE[5 * 256 + ((r >>> 16) & 0xff)]! ^
+      CRC32_TABLE[6 * 256 + ((r >>> 8) & 0xff)]! ^
+      CRC32_TABLE[7 * 256 + ((r >>> 0) & 0xff)]!;
+  }
+
+  // Process any remaining bytes one by one. (Perf note: inexplicably, using a temporary variable
+  // `i` rather than reusing `offset` here is faster in V8.)
+  for (let i = offset; i < byteLength; i++) {
+    r = CRC32_TABLE[(r ^ view.getUint8(i)) & 0xff]! ^ (r >>> 8);
+  }
+  return r;
+}
+
+/**
+ * Finalize a CRC32 by inverting the output value. An unsigned right-shift of 0 is used to ensure the result is a positive number.
+ */
+function crc32Final(prev: number): number {
+  return (prev ^ ~0) >>> 0;
+}
+
+/**
+ * Calculate a one-shot CRC32. If the data is being accumulated incrementally, use the functions
+ * `crc32Init`, `crc32Update`, and `crc32Final` instead.
+ */
+export function crc32(data: ArrayBufferView): number {
+  return crc32Final(crc32Update(crc32Init(), data));
+}

package/pg/inputPixelEditor/utils/diffMap.ts

@@ -0,0 +1,32 @@
+export function diffMap(map1, map2) {
+  // 1. Get all keys from both maps as Sets
+  const keys1 = new Set(map1.keys());
+  const keys2 = new Set(map2.keys());
+
+  // 2. Combine all unique keys into a single Set
+  const allKeys = new Set([...new Set(map1.keys()), ...new Set(map2.keys())]);
+
+  // 3. Filter the combined keys to find those not present in either original Set
+  const uniqueKeys = new Set();
+  for (const key of allKeys) {
+    if (!keys1.has(key) || !keys2.has(key)) {
+      uniqueKeys.add(key);
+    }
+  }
+
+  return uniqueKeys;
+}
+
+export function diffLeftMapPixels(map1: Map<string, number[]>, map2: Map<string, number[]>) {
+  const leftPixels: number[][] = [];
+
+  // Iterate over all keys in the first map
+  for (const key of map1.keys()) {
+    // If the second map does not have the current key, add it to the results
+    if (!map2.has(key)) {
+      leftPixels.push(map1.get(key) as number[]);
+    }
+  }
+
+  return leftPixels;
+}

package/pg/inputPixelEditor/utils/generateGradient.ts

@@ -0,0 +1,112 @@
+// Not used but included
+const byerMatrix2x2 = [
+  [0, 2],
+  [3, 1]
+];
+
+const bayerMatrix4x4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5]
+];
+
+const bayerMatrix8x8 = [
+  [0, 32, 8, 40, 2, 34, 10, 42],
+  [48, 16, 56, 24, 50, 18, 58, 26],
+  [12, 44, 4, 36, 14, 46, 6, 38],
+  [60, 28, 52, 20, 62, 30, 54, 22],
+  [3, 35, 11, 43, 1, 33, 9, 41],
+  [51, 19, 59, 27, 49, 17, 57, 25],
+  [15, 47, 7, 39, 13, 45, 5, 37],
+  [63, 31, 55, 23, 61, 29, 53, 21]
+];
+
+const bayerMatrix16x16 = [
+  [0, 128, 32, 160, 8, 136, 40, 168, 2, 130, 34, 162, 10, 138, 42, 170],
+  [192, 64, 224, 96, 200, 72, 232, 104, 194, 66, 226, 98, 202, 74, 234, 106],
+  [48, 176, 16, 144, 56, 184, 24, 152, 50, 178, 18, 146, 58, 186, 26, 154],
+  [240, 112, 208, 80, 248, 120, 216, 88, 242, 114, 210, 82, 250, 122, 218, 90],
+  [12, 140, 44, 172, 4, 132, 36, 164, 14, 142, 46, 174, 6, 134, 38, 166],
+  [204, 76, 236, 108, 196, 68, 228, 100, 206, 78, 238, 110, 198, 70, 230, 102],
+  [60, 188, 28, 156, 52, 180, 20, 148, 62, 190, 30, 158, 54, 182, 22, 150],
+  [252, 124, 220, 92, 244, 116, 212, 84, 254, 126, 222, 94, 246, 118, 214, 86],
+  [3, 131, 35, 163, 11, 139, 43, 171, 1, 129, 33, 161, 9, 137, 41, 169],
+  [195, 67, 227, 99, 203, 75, 235, 107, 193, 65, 225, 97, 201, 73, 233, 105],
+  [51, 179, 19, 147, 59, 187, 27, 155, 49, 177, 17, 145, 57, 185, 25, 153],
+  [243, 115, 211, 83, 251, 123, 219, 91, 241, 113, 209, 81, 249, 121, 217, 89],
+  [15, 143, 47, 175, 7, 135, 39, 167, 13, 141, 45, 173, 5, 133, 37, 165],
+  [207, 79, 239, 111, 199, 71, 231, 103, 205, 77, 237, 109, 197, 69, 229, 101],
+  [63, 191, 31, 159, 55, 183, 23, 151, 61, 189, 29, 157, 53, 181, 21, 149],
+  [255, 127, 223, 95, 247, 119, 215, 87, 253, 125, 221, 93, 245, 117, 213, 85]
+];
+
+// Normalize the Bayer matrix values to a 0-1 range
+const normalizeBayerMatrix = (matrix) => {
+    const maxVal = matrix.flat().reduce((max, val) => Math.max(max, val), 0);
+    return matrix.map(row => row.map(val => val / (maxVal + 1))); // +1 to ensure values are strictly less than 1
+};
+
+const normalizedBayerMatrix = normalizeBayerMatrix(bayerMatrix4x4);
+
+/**
+ * Applies Bayer dithering to an image data array between two specified colors.
+ * @param imageData The ImageData object containing pixel data.
+ * @param color1 The first color (e.g., [r, g, b]).
+ * @param color2 The second color (e.g., [r, g, b]).
+ * @returns The dithered ImageData object.
+ */
+function applyBayerDithering(
+    imageData,
+    color1,
+    color2
+) {
+    const { data, width, height } = imageData;
+    const matrixSize = normalizedBayerMatrix.length;
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const i = (y * width + x) * 4; // Index for R component
+
+            // Calculate grayscale intensity (luminance) of the original pixel
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const intensity = (0.299 * r + 0.587 * g + 0.114 * b) / 255; // Normalize to 0-1
+
+            // Get the threshold from the normalized Bayer matrix
+            const threshold = normalizedBayerMatrix[y % matrixSize][x % matrixSize];
+
+            // Assign color based on intensity and threshold
+            if (intensity > threshold) {
+                data[i] = color2[0];
+                data[i + 1] = color2[1];
+                data[i + 2] = color2[2];
+            } else {
+                data[i] = color1[0];
+                data[i + 1] = color1[1];
+                data[i + 2] = color1[2];
+            }
+        }
+    }
+    return imageData;
+}
+/*
+// Example usage (assuming you have an ImageData object from a canvas)
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+const linearGradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // x0, y0, x1, y1
+
+// Add color stops
+linearGradient.addColorStop(0, 'white'); // Start color at 0%
+linearGradient.addColorStop(1, 'black'); // End color at 100%
+
+// Apply the gradient to fillStyle and draw a rectangle
+ctx.fillStyle = linearGradient;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+const ditheredImageData = applyBayerDithering(originalImageData, [0, 0, 0], [255, 255, 255]);
+ctx.putImageData(ditheredImageData, 0, 0);
+*/

package/pg/inputPixelEditor/utils/getFloodFill.ts

@@ -0,0 +1,83 @@
+/**
+ * Represents a coordinate in the 2D array.
+ */
+type Coordinate = [number, number];
+
+/**
+ * Flood fills a 2D array starting from a specific coordinate to find all connected numbers
+ * that are within a specified set of target values.
+ *
+ * @param grid The 2D array (grid) of numbers.
+ * @param startX The starting x-coordinate.
+ * @param startY The starting y-coordinate.
+ * @param targetValues The set of numbers to search for (e.g., [1, 2, 5]).
+ * @returns A list of [x, y] coordinates that were found during the flood fill.
+ */
+export function getFloodFill(
+  grid: number[][],
+  startX: number,
+  startY: number,
+  targetValues: number[]
+): Coordinate[] {
+  // Use a Set for quick lookups of target values
+  const targets = new Set(targetValues);
+
+  // Check if starting coordinates are valid and if the value at the start is a target
+  if (
+    startY < 0 ||
+    startY >= grid.length ||
+    startX < 0 ||
+    startX >= grid[0].length ||
+    !targets.has(grid[startY][startX])
+  ) {
+    return [];
+  }
+
+  // Queue for Breadth-First Search (BFS)
+  const queue: Coordinate[] = [[startX, startY]];
+  // Set to keep track of visited coordinates to avoid cycles and redundant processing
+  const visited = new Set<string>();
+  const foundPixels: Coordinate[] = [];
+
+  // Helper to convert [x, y] to a string key for the 'visited' set
+  const toKey = (x: number, y: number) => `${x},${y}`;
+
+  // Mark the starting pixel as visited and add to found list
+  visited.add(toKey(startX, startY));
+  foundPixels.push([startX, startY]);
+
+  while (queue.length > 0) {
+    const [currentX, currentY] = queue.shift()!;
+    const currentValue = grid[currentY][currentX];
+
+    // Define potential neighbors (up, down, left, right)
+    const neighbors: Coordinate[] = [
+      [currentX + 1, currentY],
+      [currentX - 1, currentY],
+      [currentX, currentY + 1],
+      [currentX, currentY - 1],
+    ];
+
+    for (const [nextX, nextY] of neighbors) {
+      // Check bounds
+      if (
+        nextY >= 0 &&
+        nextY < grid.length &&
+        nextX >= 0 &&
+        nextX < grid[0].length
+      ) {
+        const neighborValue = grid[nextY][nextX];
+        const key = toKey(nextX, nextY);
+
+        // If the neighbor has a target value and has not been visited yet
+        if (targets.has(neighborValue) && !visited.has(key)) {
+          visited.add(key);
+          foundPixels.push([nextX, nextY]);
+          queue.push([nextX, nextY]);
+        }
+      }
+    }
+  }
+
+  return foundPixels;
+}

package/pg/inputPixelEditor/utils/getGridColorIndexes.ts

@@ -0,0 +1,13 @@
+export function getGridColorIndexes(arr: number[][]) {
+  const seen = new Set([0]);
+  const result: number[] = [];
+  for (const innerArray of arr) {
+    for (const value of innerArray) {
+      if (!seen.has(value)) {
+        seen.add(value);
+        result.push(value);
+      }
+    }
+  }
+  return result;
+}

package/pg/inputPixelEditor/utils/getOutline.ts

@@ -0,0 +1,92 @@
+export function getOutline(pixels: number[][], ignoreInside: boolean = false, include: number[] = []) {
+  const moatPixels: number[][] = [];
+  const height = pixels.length;
+  if (height === 0) return moatPixels;
+  const width = pixels[0].length;
+
+  const directions = [
+    [0, 1],
+    [0, -1],
+    [1, 0],
+    [-1, 0]
+  ];
+
+  // ---------------------------------------------------------
+  // STEP 1: If ignoring inside, flood-fill from the outside
+  // ---------------------------------------------------------
+  let outsideZero: boolean[][] = Array.from({ length: height }, () =>
+    Array(width).fill(false)
+  );
+
+  if (ignoreInside) {
+    const queue: [number, number][] = [];
+
+    // Seed flood-fill with all border zeros
+    for (let x = 0; x < width; x++) {
+      if (pixels[0][x] === 0) queue.push([x, 0]);
+      if (pixels[height - 1][x] === 0) queue.push([x, height - 1]);
+    }
+    for (let y = 0; y < height; y++) {
+      if (pixels[y][0] === 0) queue.push([0, y]);
+      if (pixels[y][width - 1] === 0) queue.push([width - 1, y]);
+    }
+
+    // BFS flood-fill
+    while (queue.length > 0) {
+      const [x, y] = queue.shift()!;
+      if (outsideZero[y][x]) continue;
+      outsideZero[y][x] = true;
+
+      for (const [dx, dy] of directions) {
+        const nx = x + dx;
+        const ny = y + dy;
+        if (
+          nx >= 0 &&
+          nx < width &&
+          ny >= 0 &&
+          ny < height &&
+          pixels[ny][nx] === 0 &&
+          !outsideZero[ny][nx]
+        ) {
+          queue.push([nx, ny]);
+        }
+      }
+    }
+  }
+
+  // ---------------------------------------------------------
+  // STEP 2: Collect moat pixels
+  // ---------------------------------------------------------
+  const moatSet = new Set<string>();
+
+  let condition = (pixel) => pixel === 0;
+  if (include.length !== 0) {
+    condition = (pixel) => !include.includes(pixel);
+  }
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      if (condition(pixels[y][x])) continue;
+
+      for (const [dx, dy] of directions) {
+        const nx = x + dx;
+        const ny = y + dy;
+
+        if (nx < 0 || nx >= width || ny < 0 || ny >= height) continue;
+
+        if (pixels[ny][nx] === 0) {
+          // If ignoring inside, only count zeros reachable from outside
+          if (ignoreInside && !outsideZero[ny][nx]) continue;
+
+          const key = `${nx},${ny}`;
+          if (!moatSet.has(key)) {
+            moatSet.add(key);
+            moatPixels.push([nx, ny]);
+          }
+        }
+      }
+    }
+  }
+
+  return moatPixels;
+}

package/pg/inputPixelEditor/utils/inputMode.ts

@@ -1,8 +1,14 @@
 export const enum InputMode {
+  Cursor,
+  SelectRectangle,
+  SelectEllipse,
+  SelectLasso,
+  SelectMagicWand,
+  Stamp,
   Pixel,
   Line,
   Rectangle,
   RectangleOutline,
   Ellipse,
   EllipseOutline
-}
+};

package/pg/inputPixelEditor/utils/pixelSizes.ts

@@ -0,0 +1,47 @@
+type Pixel = { x: number, y: number };
+
+export const pixelSizes: { [key: number]: number[][] } = {
+  1: [
+    [0, 0]
+  ],
+  3: [
+    [0, -1],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [0, 1]
+  ],
+  5: [
+    [0, -2],
+    [-1, -1],
+    [0, -1],
+    [1, -1],
+    [-2, 0],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [2, 0],
+    [-1, 1],
+    [0, 1],
+    [1, 1],
+    [0, 2],
+  ],
+  7: [
+    [-1, -3],
+    [0, -3],
+    [1, -3],
+    [-2, -2],
+    [-1, -1],
+    [0, -1],
+    [1, -1],
+    [-2, 0],
+    [-1, 0],
+    [0, 0],
+    [1, 0],
+    [2, 0],
+    [-1, 1],
+    [0, 1],
+    [1, 1],
+    [0, 2],
+  ]
+}