script.js

import { samplePixel, drawArrow } from './imageProcessing.js';

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fileInput = document.getElementById('fileInput');
const dropZone = document.getElementById('dropZone');
const outputField = document.getElementById('outputField');
const colorBlock = document.getElementById('colorBlock');
const copyUnity = document.getElementById('copyUnity');
const copyUnreal = document.getElementById('copyUnreal');
const flipGreenToggle = document.getElementById('flipGreen');

let img = new Image();
let scaleX = 1, scaleY = 1;
let lastClick = null;

const offCanvas = document.createElement('canvas');
const offCtx = offCanvas.getContext('2d');

function drawImage(source) {
  img = new Image();
  img.crossOrigin = "anonymous"; // must be set before src
  img.onload = () => {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    const drawW = img.width * scale;
    const drawH = img.height * scale;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, drawW, drawH);

    offCanvas.width = img.width;
    offCanvas.height = img.height;
    offCtx.drawImage(img, 0, 0);

    scaleX = img.width / drawW;
    scaleY = img.height / drawH;
  };
  img.src = source; // after crossOrigin is set
}

// File upload
fileInput.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = ev => drawImage(ev.target.result);
  reader.readAsDataURL(file);
});

// Load from URL
const urlInput = document.getElementById('urlInput');
const loadUrlBtn = document.getElementById('loadUrlBtn');

loadUrlBtn.addEventListener('click', () => {
  const url = urlInput.value.trim();
  if (!url) return;
  drawImage(url);
});

// Drag & drop
dropZone.addEventListener('dragover', e => {
  e.preventDefault();
  dropZone.style.background = '#eee';
});
dropZone.addEventListener('dragleave', () => {
  dropZone.style.background = '';
});
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  dropZone.style.background = '';
  const file = e.dataTransfer.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = ev => drawImage(ev.target.result);
    reader.readAsDataURL(file);
  }
});

// Clipboard paste
document.addEventListener('paste', e => {
  const items = e.clipboardData.items;
  for (let item of items) {
    if (item.type.indexOf('image') !== -1) {
      const file = item.getAsFile();
      const reader = new FileReader();
      reader.onload = ev => drawImage(ev.target.result);
      reader.readAsDataURL(file);
    }
  }
});

function recalcAndDraw(x, y) {
  const origX = Math.floor(x * scaleX);
  const origY = Math.floor(y * scaleY);

  const { nx, ny, nz } = samplePixel(offCtx, origX, origY, flipGreenToggle.checked);

  const unityStr = `Vector3(${nx.toFixed(3)}, ${ny.toFixed(3)}, ${nz.toFixed(3)})`;
  const unrealStr = `X=${nx.toFixed(3)} Y=${ny.toFixed(3)} Z=${nz.toFixed(3)}`;

  outputField.value = unityStr;

  const cr = Math.round((nx + 1) * 127.5);
  const cg = Math.round((ny + 1) * 127.5);
  const cb = Math.round((nz + 1) * 127.5);
  colorBlock.style.backgroundColor = `rgb(${cr},${cg},${cb})`;

  drawArrow(ctx, img, canvas, x, y, nx, ny, nz);

  copyUnity.dataset.value = unityStr;
  copyUnreal.dataset.value = unrealStr;
}

canvas.addEventListener('click', e => {
  if (!img.src) return;
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  lastClick = {x, y};
  recalcAndDraw(x, y);
});

flipGreenToggle.addEventListener('change', () => {
  if (lastClick) recalcAndDraw(lastClick.x, lastClick.y);
});

copyUnity.addEventListener('click', () => {
  const val = copyUnity.dataset.value || outputField.value;
  navigator.clipboard.writeText(val).then(() => alert("Copied for Unity: " + val));
});

copyUnreal.addEventListener('click', () => {
  const val = copyUnreal.dataset.value || "";
  if (val) {
    navigator.clipboard.writeText(val).then(() => alert("Copied for Unreal: " + val));
  }
});

window.addEventListener('resize', () => {
  if (img.src) drawImage(img.src);
});