pixel-editor.js

import { render, html } from "uhtml";
import { dispatch } from "../dispatch.js";
import { bitmapTextToImageData } from "../engine/bitmap.js";
import { global_state } from "../global_state.js";
import { style } from "./style.js";
import { hexToRGBA, RGBA_to_hex, transparentBg } from "../palette.js";

// Horrible way of doing this but it works.
// 
const sharedState = {
  tool: "brush",
  color: [0, 0, 0, 255]
}

// NOTE: kognise - Could the editor canvas be 16x16 and just scaled up with CSS?
//                 Whole file here could do with a refactor, maybe I will at some point.
export function createPixelEditor(target) {
  const state = {
    canvas: null,
    gridColors: [],
    tempGridColors: [],
    viewboxSize: [16, 16],
    canvasSize: [1, 1],
    maxCanvasSize: 350,
    selected: [],
    tool: "brush",
    color: [0, 0, 0, 255],
    mousedown: false,
    rightClick: false,
    mousedownPt: [0, 0],
    currentPt: [0, 0],
    showGrid: false,
    gridSize: [16, 16],
    undoRedoStack: [],
    animationId: null,
    selectHandle: {
      clicked: false,
      dragged: false,
    },
    palette: global_state.palette,
    clearConfirm: false
    // hoveredCell: null,
  };

  function upload(files, extensions = []) {
    let file = files[0];
    let fileName = file.name.split(".");
    let name = fileName[0];
    const extension = fileName[fileName.length - 1];

    if (extensions.length > 0 && extensions.includes(extension))
      throw "Extension not recongized: " + fileName;

    readFile(file);
  }

  function readFile(file) {
    var reader = new FileReader();
    reader.readAsText(file);

    reader.onloadend = (event) => {
      let raw = reader.result;

      // const json = JSON.parse(raw);
      // const { song, cells, bpm } = json;

      // state.cells = cells;
      // state.bpm = bpm;
      setImageData(file);
      r();
    };
  }

  function addDropUpload() {
    const container = target.querySelector(".pixel-editor-container");

    container.addEventListener("drop", (e) => {
      let dt = e.dataTransfer;
      let files = dt.files;

      upload(files);

      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
      e.cancelBubble = true;
      e.returnValue = false;
    });

    container.addEventListener("dragover", (e) => {
      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
      e.cancelBubble = true;
      e.returnValue = false;
    });
  }

  function stateUpdate() {
    const imageData = drawImageDataNoBg();
    const colors = Object.fromEntries(state.palette.map(x => [x[1].join(","), x[0]]));

    let text = "";
    for (let i = 0; i < imageData.width*imageData.height; i += 1) {
      const r = imageData.data[i*4];
      const g = imageData.data[i*4+1];
      const b = imageData.data[i*4+2];
      const a = imageData.data[i*4+3];
      const key = `${r},${g},${b},${a}`;
      const color = colors[key] ?? ".";
      
      if ((i % imageData.width === 0) && i !== 0) text += "\n";
      text += color;
    }

    text = "\n" + text.trim();
    dispatch("SET_EDITOR_TEXT", { text, range: global_state.editRange });
  }

  const setImageData = (file) => {
    let reader = new FileReader();
    reader.onload = (event) => {
      const dataURL = event.target.result;
      const canvas = target.querySelector("#offscreen-canvas");
      canvas.width = state.viewboxSize[0];
      canvas.height = state.viewboxSize[1];
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const image = new Image();
      image.onload = () => {
        const w = Math.min(image.width, state.gridSize[0]);
        const h = Math.min(image.height, state.gridSize[1]);
        ctx.drawImage(image, 0, 0, w, h);
        const imageData = ctx.getImageData(0, 0, state.gridSize[0], state.gridSize[1]);
        for (let i = 0; i < state.gridColors.length; i++) {
          state.gridColors[i] = [
            imageData.data[i * 4],
            imageData.data[i * 4 + 1],
            imageData.data[i * 4 + 2],
            imageData.data[i * 4 + 3],
          ];
        }
      };
      image.src = dataURL;
    };
    reader.readAsDataURL(file);
    stateUpdate();
  };

  const renderTool = ([ toolName, icon ], state) => html`
    <button
      class=${[sharedState.tool === toolName ? "active" : ""].join(" ")}
      @click=${() => { sharedState.tool = toolName; r(); }}
      title=${toolName}
    >
      <ion-icon name=${icon} />
      <div>${toolName}</div>
    </button>
  `;

  const view = (state) => html`
    <style>${style}</style>
    <div class="pixel-editor-container">
      <div class="canvas-container">
        <canvas class="drawing-canvas"></canvas>
      </div>
      <div class="toolbox">
        <div class="tools">
          ${[
            ["brush", "brush"],
            ["line", "arrow-forward"],
            ["circle", "ellipse"],
            ["box", "square"],
            ["bucket", "color-fill"],
            ["move", "move"],
          ].map((tool) => renderTool(tool, state))}
        </div>

        <div class="spacer" />

        <div class="tools">
          <button
            @click=${() => {
              if (state.undoRedoStack.length === 0) return;
              const grid = JSON.parse(state.undoRedoStack.pop());
              state.gridColors.forEach((arr, i) => {
                state.gridColors[i] = grid[i];
              });
              stateUpdate();
            }}
            title="undo"
          >
            <ion-icon name="arrow-undo" />
            <div>undo</div>
          </button>

          <button
            @click=${() => {
              if (!state.clearConfirm) {
                state.clearConfirm = true;
                r();
              } else {
                state.clearConfirm = false;
                r();
                state.undoRedoStack.push(JSON.stringify(state.gridColors));
                if (state.undoRedoStack.length > 15) state.undoRedoStack.unshift();
                state.gridColors.forEach((_, i) => state.gridColors[i] = [0, 0, 0, 0]);
                stateUpdate();
              }
            }}
            title="clear"
          >
            <ion-icon name="trash" />
            <div>${state.clearConfirm ? 'you sure?' : 'clear'}</div>
          </button>

          <button
            @click=${() => {
              state.undoRedoStack.push(JSON.stringify(state.gridColors));
              if (state.undoRedoStack.length > 15) state.undoRedoStack.unshift();
              const temp = [ ...state.gridColors ];
              for (let j = 0; j < 16; ++j) {
                for (let i = 0; i < 16; ++i) {
                  state.gridColors[j + i*16] = temp[i + (15 - j)*16];
                }
              }
              stateUpdate();
            }}
            title="rotate"
          >
            <ion-icon name="reload" />
            <div>rotate</div>
          </button>

          <button
            title="export"
            @click=${() => {
              const canvas = document.createElement("canvas");
              canvas.width = state.viewboxSize[0];
              canvas.height = state.viewboxSize[1];
              drawCanvasNoBg(canvas);
              const image = canvas.toDataURL();
              const aDownloadLink = document.createElement("a");
              aDownloadLink.download = "sprite.png";
              aDownloadLink.href = image;
              aDownloadLink.click();
            }}
          >
            <ion-icon name="image" />
            <div>export</div>
          </button>
        </div>

        <div class="colors">
          ${state.palette.map(drawColorButton)}
        </div>
      </div>
    </div>
  `;

  const drawColorButton = (color) => {
    let style = `background-color: ${RGBA_to_hex(color[1])};`;
    color[1][3] === 0 ? style += `background-image: url("${transparentBg}");` : ``

    return html`
      <div 
        class=${RGBA_to_hex(sharedState.color) === RGBA_to_hex(color[1]) ? "active" : ""}
        style=${style}
        @click=${() => { sharedState.color = color[1]; r(); }}>
      </div>
    `
  };

  const r = () => {
    render(target, view(state));
  };

  const readCanvas = (canvas) => {
    const w = canvas.width;
    const h = canvas.height;
    const ctx = canvas.getContext("2d");

    return [w, h, ctx];
  };

  function line(from, to) {
    const points = [];
    if (Math.abs(from[0] - to[0]) > Math.abs(from[1] - to[1])) {
      if (from[0] > to[0]) [from, to] = [to, from];
      let slope = (to[1] - from[1]) / (to[0] - from[0]);
      for (let [x, y] = from; x <= to[0]; x++) {
        points.push([x, Math.round(y)]);
        y += slope;
      }
    } else {
      if (from[1] > to[1]) [from, to] = [to, from];
      let slope = (to[0] - from[0]) / (to[1] - from[1]);
      for (let [x, y] = from; y <= to[1]; y++) {
        points.push([Math.round(x), y]);
        x += slope;
      }
    }
    return points;
  }

  const drawGrid = (canvas) => {
    if (!state.showGrid) return;
    const [w, h, ctx] = readCanvas(canvas);
    const [gridW, gridH] = state.viewboxSize;
    const xSize = w / gridW;
    const ySize = h / gridH;

    for (let i = 0; i < gridW; i++) {
      const x = i * xSize;
      if (x === 0) continue;
      ctx.strokeStyle = `black`;
      ctx.lineWidth = xSize / 20;
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
      ctx.stroke();
    }

    for (let i = 0; i < gridH; i++) {
      const y = i * ySize;
      if (y === 0) continue;
      ctx.strokeStyle = `black`;
      ctx.lineWidth = xSize / 20;
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.stroke();
    }
  };

  const tools_mousedown = {
    brush: (x, y) => {
      const [gridW, gridH] = state.gridSize;
      state.gridColors[gridW * y + x] = state.rightClick ? [0,0,0,0] : sharedState.color;
    },
    bucket: (x, y) => {
      const [gridW, gridH] = state.gridSize;

      const startColor = RGBA_to_hex(state.gridColors[gridW * y + x]);
      const newColor = RGBA_to_hex(state.rightClick ? [0,0,0,0] : sharedState.color);
      const grid = state.gridColors;

      const checkValidity = (x, y) => {
        return (
          x >= 0 &&
          y >= 0 &&
          x < gridW &&
          y < gridH &&
          RGBA_to_hex(grid[gridW * y + x]) === startColor &&
          startColor !== newColor
        );
      };

      const q = [];
      q.push([x, y]);
      while (q.length > 0) {
        const [x1, y1] = q.pop();
        grid[gridW * y1 + x1] = state.rightClick ? [0,0,0,0] : sharedState.color;
        if (checkValidity(x1 + 1, y1)) q.push([x1 + 1, y1]);
        if (checkValidity(x1 - 1, y1)) q.push([x1 - 1, y1]);
        if (checkValidity(x1, y1 + 1)) q.push([x1, y1 + 1]);
        if (checkValidity(x1, y1 - 1)) q.push([x1, y1 - 1]);
      }
    },
    move: (x, y) => {
      const [gridW, gridH] = state.gridSize;
      const grid = state.gridColors;

      const checkValidity = (x, y) => {
        if (x < 0 || y < 0 || x > gridW - 1 || y > gridH - 1) return false;

        const color = RGBA_to_hex(grid[gridW * y + x]);
        return color !== "#00000000" && !seen.includes(y * gridW + x);
      };

      const seen = [];

      const q = [];

      const add = (x, y) => {
        q.push([x, y]);
        seen.push(y * gridW + x);
      };

      if (checkValidity(x, y)) add(x, y);

      while (q.length > 0) {
        const [x1, y1] = q.pop();
        if (checkValidity(x1 + 1, y1)) add(x1 + 1, y1);
        if (checkValidity(x1 + 1, y1 + 1)) add(x1 + 1, y1 + 1);
        if (checkValidity(x1 - 1, y1)) add(x1 - 1, y1);
        if (checkValidity(x1 - 1, y1 - 1)) add(x1 - 1, y1 - 1);
        if (checkValidity(x1, y1 + 1)) add(x1, y1 + 1);
        if (checkValidity(x1 - 1, y1 + 1)) add(x1 - 1, y1 + 1);
        if (checkValidity(x1, y1 - 1)) add(x1, y1 - 1);
        if (checkValidity(x1 + 1, y1 - 1)) add(x1 + 1, y1 - 1);
      }

      const newSelected = new Set([...state.selected, ...seen]);
      state.selected = seen.length > 0 ? [...newSelected] : [];

      const avg = (array) => array.reduce((a, b) => a + b) / array.length;

      if (state.selected.length > 0) {
        state.selectHandle.clicked = true;
      }
    },
  };

  const tools_mousemove = {
    brush: (x, y) => {
      if (!state.mousedown) return;
      const [gridW, gridH] = state.gridSize;

      const pts = line(state.currentPt, state.mousedownPt);

      pts.forEach(([x, y]) => {
        state.tempGridColors[gridW * y + x] = state.rightClick ? [0,0,0,0] : sharedState.color;
      });

      state.mousedownPt = state.currentPt;
    },
    box: (x, y) => {
      state.tempGridColors = state.tempGridColors.fill(null);
      if (!state.mousedown) return;
      const [gridW, gridH] = state.gridSize;

      const xMin = Math.min(state.currentPt[0], state.mousedownPt[0]);
      const xMax = Math.max(state.currentPt[0], state.mousedownPt[0]);
      const yMin = Math.min(state.currentPt[1], state.mousedownPt[1]);
      const yMax = Math.max(state.currentPt[1], state.mousedownPt[1]);
      for (let x = xMin; x <= xMax; x++) {
        for (let y = yMin; y <= yMax; y++) {
          state.tempGridColors[gridW * y + x] = state.rightClick ? [0,0,0,0] : sharedState.color;
        }
      }
    },
    line: (x, y) => {
      state.tempGridColors = state.tempGridColors.fill(null);
      if (!state.mousedown) return;

      const [gridW, gridH] = state.gridSize;

      const pts = line(state.currentPt, state.mousedownPt);

      pts.forEach(([x, y]) => {
        state.tempGridColors[gridW * y + x] = state.rightClick ? [0,0,0,0] : sharedState.color;
      });
    },
    circle: (x, y) => {
      state.tempGridColors = state.tempGridColors.fill(null);
      if (!state.mousedown) return;

      const [gridW, gridH] = state.gridSize;

      const xMin = Math.min(state.currentPt[0], state.mousedownPt[0]);
      const xMax = Math.max(state.currentPt[0], state.mousedownPt[0]);
      const yMin = Math.min(state.currentPt[1], state.mousedownPt[1]);
      const yMax = Math.max(state.currentPt[1], state.mousedownPt[1]);
      const horizAxisR = (xMax - xMin) / 2;
      const vertAxisR = (yMax - yMin) / 2;
      const center = [xMin + horizAxisR, yMin + vertAxisR];
      const inCircle = (x, y) =>
        Math.pow(x - center[0], 2) / Math.pow(horizAxisR, 2) +
          Math.pow(y - center[1], 2) / Math.pow(vertAxisR, 2) <
        1;

      for (let x = xMin; x <= xMax; x++) {
        for (let y = yMin; y <= yMax; y++) {
          if (inCircle(x, y)) {
            state.tempGridColors[gridW * y + x] = state.rightClick ? [0,0,0,0] : sharedState.color;
          }
        }
      }
    },
  };

  const i_to_xy = (i) => {
    const x = i % state.gridSize[0];
    const y = Math.floor(i / state.gridSize[1]);

    return [x, y];
  };

  const BACKGROUND_BLUE = hexToRGBA("#b4e2fc87");
  const BACKGROUND_WHITE = hexToRGBA("#e3e3e34a");
  const tempCanvas = document.createElement("canvas");
  const tempCtx = tempCanvas.getContext("2d");

  const drawCanvas = (canvas, main = true) => {
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const grid = state.tempGridColors.map((color, i) => {
      if (color === null) return state.gridColors[i];
      else return color;
    });

    const [ w, h ] = readCanvas(canvas);
    const [gridW, gridH] = main ? state.viewboxSize : state.gridSize;
    const xSize = w/gridW;
    const ySize = h/gridH;
    const rectOffset = 0.3;

    grid.forEach((color, i) => {
      if (color[3] === 0) { // empty
        const [x, y] = i_to_xy(i);

        ctx.fillStyle = RGBA_to_hex(BACKGROUND_WHITE);
        ctx.fillRect(x*xSize, y*ySize, xSize/2, ySize/2);
        ctx.fillRect(x*xSize+xSize/2, y*ySize+ySize/2, xSize/2, ySize/2);

        ctx.fillStyle = RGBA_to_hex(BACKGROUND_BLUE);
        ctx.fillRect(x*xSize+xSize/2, y*ySize, xSize/2, ySize/2);
        ctx.fillRect(x*xSize, y*ySize+ySize/2, xSize/2, ySize/2);
      } else {
        const [x, y] = i_to_xy(i);
        ctx.fillStyle = RGBA_to_hex(color);
        ctx.fillRect(x*xSize-rectOffset, y*ySize-rectOffset, xSize+rectOffset, ySize+rectOffset);
      }

    });

    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    state.selected.forEach((i) => {
      const [x, y] = i_to_xy(i);
      ctx.fillStyle = "#aaaaaaaa";
      ctx.fillRect(x*xSize, y*ySize, xSize, ySize);
    });

    const [ x, y ] = state.currentPt;
    // ctx.fillStyle = "none";
    ctx.beginPath();
    ctx.strokeStyle = "#ffff00";
    ctx.lineWidth = "3";
    ctx.rect(x*xSize-0.1, y*ySize-0.1, xSize+0.1, ySize+0.1);
    ctx.stroke();
  };

  const drawImageDataNoBg = () => {
    const pixels = new Uint8ClampedArray(
      state.gridSize[0] * state.gridSize[1] * 4
    ).fill(0);

    state.gridColors.forEach((color, i) => {
      let index = i * 4;
      pixels[index] = color[0];
      pixels[index + 1] = color[1];
      pixels[index + 2] = color[2];
      pixels[index + 3] = color[3];
    });

    const image = new ImageData(pixels, state.gridSize[0], state.gridSize[1]);
    return image
  }

  const drawCanvasNoBg = (canvas) => {
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    ctx.putImageData(drawImageDataNoBg(), 0, 0);
  };

  const setCanvasSize = (c) => {
    if (state.viewboxSize[0] < state.viewboxSize[1]) {
      state.canvasSize[0] =
        (state.viewboxSize[0] / state.viewboxSize[1]) * state.maxCanvasSize;
      state.canvasSize[1] = state.maxCanvasSize;
    } else {
      state.canvasSize[0] = state.maxCanvasSize;
      state.canvasSize[1] =
        (state.viewboxSize[1] / state.viewboxSize[0]) * state.maxCanvasSize;
    }

    c.width = state.canvasSize[0];
    c.height = state.canvasSize[1];
    // const ctx = c.getContext("2d");
    // ctx.translate(0.5, 0.5);
  };

  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

  function getPoint(e) {
    const c = target.querySelector(".drawing-canvas");
    const rect = c.getBoundingClientRect();
    const rawX = e.clientX - rect.left;
    const rawY = e.clientY - rect.top;

    const [w, h, ctx] = readCanvas(c);
    const [gridW, gridH] = state.viewboxSize;
    const xSize = w / gridW;
    const ySize = h / gridH;

    let x = Math.floor(rawX / xSize);
    let y = Math.floor(rawY / ySize);

    x = clamp(x, 0, state.gridSize[0] - 1);
    y = clamp(y, 0, state.gridSize[1] - 1);

    return [x, y];
  }

  const init = (state) => {
    r();
    const c = target.querySelector(".drawing-canvas");
    state.canvas = c;
    setCanvasSize(c);
    
    // init canvas data
    const [gridW, gridH] = state.viewboxSize;
    state.gridColors = new Array(state.gridSize[0] * state.gridSize[1]).fill(
      hexToRGBA("#00000000")
    );
    state.tempGridColors = new Array(
      state.gridSize[0] * state.gridSize[1]
    ).fill(null);

    animate();

    addDropUpload();

    c.addEventListener("contextmenu", (e) => e.preventDefault());

    c.addEventListener("mousedown", (e) => {
      e.preventDefault();
      if (e.button === 2) state.rightClick = true;

      state.undoRedoStack.push(JSON.stringify(state.gridColors));
      if (state.undoRedoStack.length > 15) state.undoRedoStack.unshift();

      state.mousedown++;
      const pt = getPoint(e);
      state.mousedownPt = pt;
      state.currentPt = pt;

      if (sharedState.tool in tools_mousedown) tools_mousedown[sharedState.tool](...pt);
    });

    c.addEventListener("mousemove", (e) => {
      const pt = getPoint(e);
      state.currentPt = pt;

      if (sharedState.tool in tools_mousemove) tools_mousemove[sharedState.tool](...pt);

      if (state.selectHandle.clicked) {
        state.tempGridColors.fill(null);

        state.selected.forEach((i) => {
          const [x, y] = i_to_xy(i);
          const dx = pt[0] - state.mousedownPt[0];
          const dy = pt[1] - state.mousedownPt[1];
          const newX = x + dx;
          const newY = y + dy;
          if (
            newX < 0 ||
            newX >= state.gridSize[0] ||
            newY < 0 ||
            newY >= state.gridSize[1]
          )
            return;

          const newI = state.gridSize[0] * newY + newX;

          const currentColor = state.gridColors[i];
          state.tempGridColors[newI] = currentColor;
        });

        state.selectHandle.dragged = true;
      }
    });

    const resetDrawing = (e) => {
      state.rightClick = false;
      state.mousedown = 0;
      state.mousedownPt = [0, 0];
      // state.currentPt = [0, 0];

      if (state.selectHandle.dragged) {
        state.selected.forEach((i) => {
          state.gridColors[i] = [0, 0, 0, 0];
        });

        state.selected = [];
      }

      state.selectHandle.clicked = false;
      state.selectHandle.dragged = false;

      state.tempGridColors.forEach((c, i) => {
        if (c !== null) state.gridColors[i] = c;
      });
      state.tempGridColors.fill(null);
      stateUpdate();
    };

    c.addEventListener("mouseup", (e) => {
      state.mousedown--;
      if (e.button === 2) state.rightClick = false;
      if (state.mousedown <= 0) resetDrawing();
    });

    c.addEventListener("mouseleave", (e) => {
      resetDrawing();
    });
  };

  const animate = () => {
    drawCanvas(state.canvas);
    state.animationId = window.requestAnimationFrame(animate); // need to cancel this animation frame
  };

  init(state);

  return {
    loadInitValue({ text }) {
      const rows = text.trim().split("\n");

      while (rows.length < 16) rows.push("................");

      rows.forEach((row, i) => {
        while (rows[i].length < 16) rows[i] = rows[i] + ".";
      })

      text = rows.join("\n");

      const imageData = bitmapTextToImageData(text, state.palette);
      for (let i = 0; i < state.gridColors.length; i++) {
        state.gridColors[i] = [
          imageData.data[i * 4],
          imageData.data[i * 4 + 1],
          imageData.data[i * 4 + 2],
          imageData.data[i * 4 + 3],
        ];
      }
    },
    setGridColors: ({ colors, size }) => {
      state.gridColors = colors;
      state.gridSize = size;
      state.viewboxSize = size;
    },
    createEmptyGrid: () => ({
      size: state.gridSize,
      colors: new Array(state.gridSize[0] * state.gridSize[1]).fill([
        0, 0, 0, 0,
      ]),
    }),
    gridColors: () => state.gridColors,
    end() {
      if (state.animationId) window.cancelAnimationFrame(state.animationId);
    },
  };
}

class PixelEditor extends HTMLElement {
  constructor() {
    super();
  }
  
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    const methods = createPixelEditor(shadow);
    for (const i in methods) {
      this[i] = methods[i];
    }
  }

  disconnectedCallback() {
    this.end();
  }
}

customElements.define("pixel-editor", PixelEditor);