@pictogrammers/components 0.3.2 → 0.4.0

package/pg/inputPixelEditor/utils/bitmapToMask.ts

@@ -0,0 +1,202 @@
+interface Edge {
+  x: number;
+  y: number;
+  type?: 'H' | 'V';
+  next?: Edge;
+}
+
+interface Options {
+  width?: number;
+  height?: number;
+  scale?: number;
+  offsetX?: number;
+  offsetY?: number;
+}
+
+export function toIndex(x: number, y: number, width: number) {
+  return y * width + x;
+}
+
+export default function bitmaskToPath(data: number[] | number[][], options: Options = {}) {
+
+  let bitmask: number[] | number[][],
+    width: number,
+    height: number,
+    scale = 1,
+    offsetX = 0,
+    offsetY = 0;
+
+  if (options.width) {
+    bitmask = data;
+    width = options.width;
+    height = bitmask.length / width;
+    if (height % 1 !== 0) {
+      throw new Error(`Invalid bitmask width. ${height} = ${bitmask.length} / ${width}`);
+    }
+  } else if (data[0] instanceof Array) {
+    bitmask = data.flat();
+    width = data[0].length;
+    height = data.length;
+  } else {
+    throw new Error(`options.width is required for 1 dimensional array.`)
+  }
+
+  if (options.scale) {
+    scale = options.scale;
+  }
+
+  if (options.offsetX) {
+    offsetX = options.offsetX;
+  }
+
+  if (options.offsetY) {
+    offsetY = options.offsetY;
+  }
+
+  // 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;
+  const bm = Array(newWidth * newHeight).fill(0);
+
+  // BM is just shifted over (1, 1) for the padding
+  function BMXYToIndex(x: number, y: number) {
+    return (y + 1) * newWidth + (x + 1);
+  }
+
+  for (let y = 0; y < height; ++y) {
+    for (let x = 0; x < width; ++x) {
+      bm[BMXYToIndex(x, y)] = bitmask[toIndex(x, y, width)];
+    }
+  }
+
+  // Edges data structure has [x, y, nextEdge, group]
+  const edgeXCount = width * (height + 1);
+  const edgeYCount = (width + 1) * height;
+  const edgeCount = edgeXCount + edgeYCount;
+
+  const edges = Array(edgeCount).fill(0).map(() => ({ x: 0, y: 0, next: undefined })) as Edge[];
+  function EdgeXIndex(x: number, y: number) {
+    return y * width + x;
+  }
+  function EdgeYIndex(x: number, y: number) {
+    return edgeXCount + y * (width + 1) + x;
+  }
+
+  const groups = new Set<Edge>();
+
+  function SetEdge(edge: Edge, x: number, y: number) {
+    edge.x = x;
+    edge.y = y;
+    groups.add(edge);
+  }
+
+  function UnionGroup(edge: Edge) {
+    for (var itr = edge.next; itr !== undefined && itr !== edge; itr = itr.next) {
+      groups.delete(itr);
+    }
+    if (itr !== undefined) {
+      groups.add(edge);
+    }
+  }
+
+  for (let y = 0; y < height; ++y) {
+    for (let x = 0; x < width; ++x) {
+      if (bm[BMXYToIndex(x, y)] == 1) {
+        const left = bm[BMXYToIndex(x - 1, y)];
+        if (left == 0) {
+          const edge = edges[EdgeYIndex(x, y)];
+          SetEdge(edge, x, y + 1);
+          if (bm[BMXYToIndex(x - 1, y - 1)]) {
+            edge.next = edges[EdgeXIndex(x - 1, y)];
+          } else if (bm[BMXYToIndex(x, y - 1)]) {
+            edge.next = edges[EdgeYIndex(x, y - 1)];
+          } else {
+            edge.next = edges[EdgeXIndex(x, y)];
+          }
+          UnionGroup(edge);
+        }
+        const right = bm[BMXYToIndex(x + 1, y)];
+        if (right == 0) {
+          const edge = edges[EdgeYIndex(x + 1, y)];
+          SetEdge(edge, x + 1, y);
+          if (bm[BMXYToIndex(x + 1, y + 1)]) {
+            edge.next = edges[EdgeXIndex(x + 1, y + 1)];
+          } else if (bm[BMXYToIndex(x, y + 1)]) {
+            edge.next = edges[EdgeYIndex(x + 1, y + 1)];
+          } else {
+            edge.next = edges[EdgeXIndex(x, y + 1)];
+          }
+          UnionGroup(edge);
+        }
+        const top = bm[BMXYToIndex(x, y - 1)];
+        if (top == 0) {
+          const edge: Edge = edges[EdgeXIndex(x, y)];
+          SetEdge(edge, x, y);
+          if (bm[BMXYToIndex(x + 1, y - 1)]) {
+            edge.next = edges[EdgeYIndex(x + 1, y - 1)];
+          } else if (bm[BMXYToIndex(x + 1, y)]) {
+            edge.next = edges[EdgeXIndex(x + 1, y)];
+          } else {
+            edge.next = edges[EdgeYIndex(x + 1, y)];
+          }
+          UnionGroup(edge);
+        }
+        const bottom = bm[BMXYToIndex(x, y + 1)];
+        if (bottom == 0) {
+          const edge = edges[EdgeXIndex(x, y + 1)];
+          SetEdge(edge, x + 1, y + 1);
+          if (bm[BMXYToIndex(x - 1, y + 1)]) {
+            edge.next = edges[EdgeYIndex(x, y + 1)];
+          } else if (bm[BMXYToIndex(x - 1, y)]) {
+            edge.next = edges[EdgeXIndex(x - 1, y + 1)];
+          } else {
+            edge.next = edges[EdgeYIndex(x, y)];
+          }
+          UnionGroup(edge);
+        }
+      }
+    }
+  }
+
+  for (const edge of groups) {
+    let itr = edge;
+    do {
+      if (itr.next) {
+        itr.next.type = itr.x == itr?.next?.x ? 'V' : 'H';
+        itr = itr.next;
+      }
+    } while (itr !== edge);
+  }
+
+  // Compress sequences of H and V
+  for (let edge of groups) {
+    let itr = edge;
+    do {
+      if (itr.type != itr.next?.type) {
+        while (itr.next?.type == itr.next?.next?.type) {
+          if (itr.next === edge) {
+            groups.delete(edge);
+            edge = itr.next.next as Edge;
+            groups.add(edge); // Note this will cause it to iterate over this group again, meh.
+          }
+          itr.next = itr.next?.next;
+        }
+      }
+      itr = itr.next as Edge;
+    } while (itr !== edge);
+  }
+
+  let path = '';
+  for (const edge of groups) {
+    path += `M${edge.x * scale},${edge.y * scale}`;
+    for (var itr = edge.next; itr != edge; itr = itr?.next) {
+      if (itr?.type == 'H') {
+        path += `H${(itr?.x * scale) + offsetX}`;
+      } else if (itr?.type == 'V') {
+        path += `V${(itr?.y * scale) + offsetY}`;
+      }
+    }
+    path += 'Z';
+  }
+  return path;
+}

package/pg/inputPixelEditor/utils/cloneGrid.ts

@@ -0,0 +1,17 @@
+
+/**
+ * Copy array to new array instance.
+ *
+ * @param data 2d
+ * @returns cloned matrix
+ */
+export default function cloneGrid(data: number[][]) {
+  const newData: number[][] = [];
+  for (let iy = 0; iy < data.length; iy++) {
+    newData.push([]);
+    for (let ix = 0; ix < data[0].length; ix++) {
+      newData[iy].push(data[iy][ix]);
+    }
+  }
+  return newData;
+}

package/pg/inputPixelEditor/utils/constants.ts

@@ -0,0 +1 @@
+export const WHITE = '#FFFFFF';

package/pg/inputPixelEditor/utils/createLayer.ts

@@ -0,0 +1,8 @@
+type CanvasArray = [HTMLCanvasElement, CanvasRenderingContext2D];
+
+export default function createCanvas(width: number, height: number): CanvasArray {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return [canvas, canvas.getContext('2d') as CanvasRenderingContext2D];
+}

package/pg/inputPixelEditor/utils/debounce.ts

@@ -0,0 +1,5 @@
+let timer: NodeJS.Timeout;
+export default function debounce(func: Function, timeout = 300) {
+  clearTimeout(timer);
+  timer = setTimeout(() => { func(); }, timeout);
+}

package/pg/inputPixelEditor/utils/diffGrid.ts

@@ -0,0 +1,26 @@
+/**
+ * Get a difference between 2d arrays.
+ *
+ * @param oldData Before the change.
+ * @param newData After the change.
+ * @returns list of changes [[x, y, color], ...]
+ */
+export default function diffGrid(oldData: number[][], newData: number[][]): number[][] {
+    const changes: [number, number, number, number][] = [];
+    // Loop the larger grid
+    const oldWidth = oldData[0].length;
+    const oldHeight = oldData.length;
+    const newWidth = newData[0].length;
+    const newHeight = newData.length;
+    const width = Math.max(oldWidth, newWidth);
+    const height = Math.max(oldHeight, newHeight);
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const newColor = newData && newData[y] && newData[y][x];
+            const oldColor = oldData && oldData[y] && oldData[y][x];
+            if (newColor === oldColor) { continue; }
+            changes.push([x, y, oldColor, newColor]);
+        }
+    }
+    return changes;
+}

package/pg/inputPixelEditor/utils/fillGrid.ts

@@ -0,0 +1,11 @@
+export default function fillGrid(width: number, height: number): number[][] {
+  let arr: number[][] = [];
+  for (let y = 0; y < height; y++) {
+    const row: number[] = [];
+    for (let x = 0; x < width; x++) {
+      row.push(0);
+    }
+    arr.push(row);
+  }
+  return arr;
+}

package/pg/inputPixelEditor/utils/getEllipseOutlinePixels.ts

@@ -0,0 +1,105 @@
+function circle(x0: number, y0: number, x1: number, y1: number) {
+  let r = Math.abs(x0 - x1) / 2;
+  console.log('circle', r);
+  const xm = Math.min(x0, x1) + r;
+  const ym = Math.min(y0, y1) + r;
+  let x = -r, y = 0, err = 2 - 2 * r;         /* bottom left to top right */
+  const pixels: { x: number, y: number }[] = [];
+  do {
+    pixels.push({ x: xm - x, y: ym + y });    /*   I. Quadrant +x +y */
+    pixels.push({ x: xm - y, y: ym - x });    /*  II. Quadrant -x +y */
+    pixels.push({ x: xm + x, y: ym - y });    /* III. Quadrant -x -y */
+    pixels.push({ x: xm + y, y: ym + x });    /*  IV. Quadrant +x -y */
+    r = err;
+    if (r <= y) err += ++y * 2 + 1;           /* y step */
+    if (r > x || err > y) err += ++x * 2 + 1; /* x step */
+  } while (x < 0);
+  return pixels;
+}
+
+export function distance(x: number, y: number, ratio: number): number {
+	return Math.sqrt((Math.pow(y * ratio, 2)) + Math.pow(x, 2));
+}
+
+function filled(x: number, y: number, radius: number, ratio: number): boolean {
+	return distance(x, y, ratio) <= radius;
+}
+
+function thinfilled(x: number, y: number, radius: number, ratio: number): boolean {
+	return filled(x, y, radius, ratio) && !(
+		filled(x + 1, y, radius, ratio) &&
+		filled(x - 1, y, radius, ratio) &&
+		filled(x, y + 1, radius, ratio) &&
+		filled(x, y - 1, radius, ratio)
+	);
+}
+
+function isFilled(x: number, y: number, width: number, height: number): boolean {
+  const bounds = {
+    minX: 0,
+    maxX: width,
+    minY: 0,
+    maxY: height,
+  };
+
+  x = -.5 * (bounds.maxX - 2 * (x + .5));
+  y = -.5 * (bounds.maxY - 2 * (y + .5));
+
+  return thinfilled(x, y, (bounds.maxX / 2), bounds.maxX / bounds.maxY);
+}
+
+function betterCircle(x0: number, y0: number, x1: number, y1: number) {
+  const width = Math.abs(x0 - x1);
+  const height = Math.abs(y0 - y1);
+  const minX = Math.min(x0, x1);
+  const minY = Math.min(y0, y1);
+
+  const pixels: { x: number, y: number }[] = [];
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      if (isFilled(x, y, width, height)) {
+        pixels.push({ x: x + minX, y: y + minY });
+      }
+    }
+  }
+  return pixels;
+}
+
+function ellipse(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+  var a = Math.abs(x1 - x0), b = Math.abs(y1 - y0), b1 = b & 1; /* diameter */
+  var dx = 4 * (1.0 - a) * b * b, dy = 4 * (b1 + 1) * a * a;    /* error increment */
+  var err = dx + dy + b1 * a * a, e2;                           /* error of 1.step */
+
+  if (x0 > x1) { x0 = x1; x1 += a; }        /* if called with swapped points */
+  if (y0 > y1) y0 = y1;                     /* .. exchange them */
+  y0 += (b + 1) >> 1; y1 = y0 - b1;         /* starting pixel */
+  a = 8 * a * a; b1 = 8 * b * b;
+
+  do {
+    pixels.push({ x: x1, y: y0 });          /*   I. Quadrant */
+    pixels.push({ x: x0, y: y0 });          /*  II. Quadrant */
+    pixels.push({ x: x0, y: y1 });          /* III. Quadrant */
+    pixels.push({ x: x1, y: y1 });          /*  IV. Quadrant */
+    e2 = 2 * err;
+    if (e2 <= dy) { y0++; y1--; err += dy += a; }                 /* y step */
+    if (e2 >= dx || 2 * err > dy) { x0++; x1--; err += dx += b1; }       /* x */
+  } while (x0 <= x1);
+
+  while (y0 - y1 <= b) {                /* too early stop of flat ellipses a=1 */
+    pixels.push({ x: x0 - 1, y: y0 });                         /* -> finish tip of ellipse */
+    pixels.push({ x: x1 + 1, y: y0++ });
+    pixels.push({ x: x0 - 1, y: y1 });
+    pixels.push({ x: x1 + 1, y: y1-- });
+  }
+
+  return pixels;
+}
+
+export default function getEllipseOutlinePixels(x0: number, y0: number, x1: number, y1: number) {
+  if (Math.abs(x0 - x1) === Math.abs(y0 - y1) && Math.abs(x0 - x1)) {
+    console.log('circle', Math.abs(x0 - x1), Math.abs(y0 - y1))
+    return betterCircle(x0, y0, x1 + 1, y1 + 1);
+  }
+  return ellipse(x0, y0, x1, y1);
+}

package/pg/inputPixelEditor/utils/getEllipsePixels.ts

@@ -0,0 +1,28 @@
+export default function getEllipsePixels(x0: number, y0: number, x1: number, y1: number) {
+  let a = Math.abs(x1 - x0), b = Math.abs(y1 - y0), b1 = b & 1; /* values of diameter */
+  let dx = 4 * (1 - a) * b * b, dy = 4 * (b1 + 1) * a * a; /* error increment */
+  let err = dx + dy + b1 * a * a, e2; /* error of 1.step */
+
+  if (x0 > x1) { x0 = x1; x1 += a; } /* if called with swapped points */
+  if (y0 > y1) y0 = y1; /* .. exchange them */
+  y0 += (b + 1) / 2; y1 = y0 - b1;   /* starting pixel */
+  a *= 8 * a; b1 = 8 * b * b;
+  const pixels: { x: number, y: number }[] = [];
+  do {
+    pixels.push({ x: x1, y: y0 }); /*   I. Quadrant */
+    pixels.push({ x: x0, y: y0 }); /*  II. Quadrant */
+    pixels.push({ x: x0, y: y1 }); /* III. Quadrant */
+    pixels.push({ x: x1, y: y1 }); /*  IV. Quadrant */
+    e2 = 2 * err;
+    if (e2 <= dy) { y0++; y1--; err += dy += a; }  /* y step */
+    if (e2 >= dx || 2 * err > dy) { x0++; x1--; err += dx += b1; } /* x step */
+  } while (x0 <= x1);
+
+  while (y0 - y1 < b) {  /* too early stop of flat ellipses a=1 */
+    pixels.push({ x: x0 - 1, y: y0 }); /* -> finish tip of ellipse */
+    pixels.push({ x: x1 + 1, y: y0++ });
+    pixels.push({ x: x0 - 1, y: y1 });
+    pixels.push({ x: x1 + 1, y: y1-- });
+  }
+  return pixels;
+}

package/pg/inputPixelEditor/utils/getGuides.ts

@@ -0,0 +1,232 @@
+type Guide = {
+  name: string;
+  width?: number;
+  height?: number;
+  color: string;
+  opacity: number;
+  lines: number[][];
+  dashed?: number[];
+  dashOffset?: number;
+}
+
+const guides: Guide[] = [
+  {
+    name: 'Circle Outer',
+    width: 22,
+    height: 22,
+    color: '#F00',
+    opacity: 1.0,
+    lines: [
+      [7, 1],
+      [15, 1],
+      [15, 2],
+      [17, 2],
+      [17, 3],
+      [18, 3],
+      [18, 4],
+      [19, 4],
+      [19, 5],
+      [20, 5],
+      [20, 7],
+      [21, 7],
+      [21, 15],
+      [20, 15],
+      [20, 17],
+      [19, 17],
+      [19, 18],
+      [18, 18],
+      [18, 19],
+      [17, 19],
+      [17, 20],
+      [15, 20],
+      [15, 21],
+      [7, 21],
+      [7, 20],
+      [5, 20],
+      [5, 19],
+      [4, 19],
+      [4, 18],
+      [3, 18],
+      [3, 17],
+      [2, 17],
+      [2, 15],
+      [1, 15],
+      [1, 7],
+      [2, 7],
+      [2, 5],
+      [3, 5],
+      [3, 4],
+      [4, 4],
+      [4, 3],
+      [5, 3],
+      [5, 2],
+      [7, 2],
+      [7, 1]
+    ]
+  },
+  {
+    name: 'Circle Inner',
+    width: 22,
+    height: 22,
+    color: '#00F',
+    opacity: 1.0,
+    lines: [
+      [8, 3],
+      [14, 3],
+      [14, 4],
+      [16, 4],
+      [16, 5],
+      [17, 5],
+      [17, 6],
+      [18, 6],
+      [18, 8],
+      [19, 8],
+      [19, 14],
+      [18, 14],
+      [18, 16],
+      [17, 16],
+      [17, 17],
+      [16, 17],
+      [16, 18],
+      [14, 18],
+      [14, 19],
+      [8, 19],
+      [8, 18],
+      [6, 18],
+      [6, 17],
+      [5, 17],
+      [5, 16],
+      [4, 16],
+      [4, 14],
+      [3, 14],
+      [3, 8],
+      [4, 8],
+      [4, 6],
+      [5, 6],
+      [5, 5],
+      [6, 5],
+      [6, 4],
+      [8, 4],
+      [8, 3]
+    ]
+  },
+  {
+    name: 'Square',
+    width: 22,
+    height: 22,
+    color: '#9932cc',
+    opacity: 1.0,
+    dashed: [4, 4],
+    lines: [
+      [2, 2],
+      [20, 2],
+      [20, 20],
+      [2, 20],
+      [2, 2]
+    ]
+  },
+  {
+    name: 'Square',
+    width: 22,
+    height: 22,
+    color: '#9932cc',
+    opacity: 0.1,
+    dashed: [4, 4],
+    dashOffset: 4,
+    lines: [
+      [2, 2],
+      [20, 2],
+      [20, 20],
+      [2, 20],
+      [2, 2]
+    ]
+  }
+];
+
+const cache = new Map();
+
+export function clearGuides() {
+  cache.clear();
+}
+
+/**
+ * This should generate an image and cache it!!!!!!!!!!!!!!!!!!!!!
+ * 
+ * @param width Width
+ * @param height Height
+ * @returns ctx cache
+ */
+export function getGuides(width: number, height: number, size: number, gridSize: number): CanvasImageSource {
+  const cacheKey = `${width}:${height}:${size}:${gridSize}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+  let filteredGuides = guides.filter(g => {
+    return g.width === width && g.height === height;
+  });
+  // Guides
+  if (filteredGuides.length === 0) {
+    // Always render center lines for even sizes
+    if (width % 2 === 0 && height % 2 === 0) {
+      filteredGuides =  [
+        {
+          name: 'Horizontal',
+          color: '#00F',
+          opacity: 1.0,
+          lines: [
+            [0, height / 2],
+            [width, height / 2]
+          ]
+        },
+        {
+          name: 'Vertical',
+          color: '#00F',
+          opacity: 1.0,
+          lines: [
+            [width / 2, 0],
+            [width / 2, height]
+          ]
+        }
+      ]
+    }
+  }
+  // Canvas Size
+  const totalSize = size + gridSize;
+  const actualWidth = ((width * totalSize) - gridSize);
+  const actualHeight = ((height * totalSize) - gridSize);
+  // Cache grid to an image
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  canvas.width = actualWidth;
+  canvas.height = actualHeight;
+  // Grid
+  if (gridSize !== 0) {
+    ctx.fillStyle = '#BBB';
+    for (let x = 1; x < width; x++) {
+      ctx.fillRect(x * totalSize - gridSize, 0, 1, actualHeight);
+    }
+    for (let y = 1; y < height; y++) {
+      ctx.fillRect(0, y * totalSize - gridSize, actualWidth, 1);
+    }
+  }
+  // Guides
+  filteredGuides.forEach(guide => {
+    ctx.lineDashOffset = guide.dashOffset || 0;
+    ctx.setLineDash(guide.dashed || [1]);
+    ctx.strokeStyle = guide.color;
+    ctx.globalAlpha = guide.opacity;
+    ctx.lineWidth = 1;
+    ctx.fillStyle = 'transparent';
+    ctx.beginPath();
+    guide.lines.forEach((coordinates, i) => {
+      if (i === 0) {
+        ctx.moveTo(coordinates[0] * (size + gridSize) - 0.5, coordinates[1] * (size + gridSize) - 0.5);
+      } else {
+        ctx.lineTo(coordinates[0] * (size + gridSize) - 0.5, coordinates[1] * (size + gridSize) - 0.5);
+      }
+    });
+    ctx.stroke();
+  });
+  cache.set(cacheKey, canvas);
+  return canvas;
+}

package/pg/inputPixelEditor/utils/getLinePixels.ts

@@ -0,0 +1,18 @@
+export default function getLinePixels(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const sx = (x0 < x1) ? 1 : -1;
+  const sy = (y0 < y1) ? 1 : -1;
+  let err = dx - dy;
+
+  while (true) {
+    pixels.push({x: x0, y: y0 });
+
+    if ((x0 === x1) && (y0 === y1)) break;
+    var e2 = 2 * err;
+    if (e2 > -dy) { err -= dy; x0 += sx; }
+    if (e2 < dx) { err += dx; y0 += sy; }
+  }
+  return pixels;
+}

package/pg/inputPixelEditor/utils/getRectangleOutlinePixels.ts

@@ -0,0 +1,20 @@
+export default function getRectangleOutlinePixels(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+  const oX = Math.min(x0, x1);
+  const oY = Math.min(y0, y1);
+  var w = Math.abs(x1 - x0);
+  var h = Math.abs(y1 - y0);
+
+  // Vertical
+  for (var y = oY; y <= oY + h; y++) {
+    pixels.push({ x: oX, y });
+    pixels.push({ x: oX + w, y });
+  }
+  // Horizontal (minus the vertical squares)
+  for (var x = oX + 1; x <= oX + w - 1; x++) {
+    pixels.push({ x, y: oY });
+    pixels.push({ x, y: oY + h });
+  }
+
+  return pixels;
+}

package/pg/inputPixelEditor/utils/getRectanglePixels.ts

@@ -0,0 +1,15 @@
+export default function getRectanglePixels(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+  const oX = Math.min(x0, x1);
+  const oY = Math.min(y0, y1);
+  var w = Math.abs(x1 - x0) + 1;
+  var h = Math.abs(y1 - y0) + 1;
+
+  for (var y = oY; y < oY + h; y++) {
+    for (var x = oX; x < oX + w; x++) {
+      pixels.push({ x, y });
+    }
+  }
+
+  return pixels;
+}