script.js

(() => {
	const fileInput = document.getElementById('fileInput');
	const urlInput = document.getElementById('urlInput');
	const loadUrlBtn = document.getElementById('loadUrlBtn');
	const downloadBtn = document.getElementById('downloadBtn');
	const stage = document.getElementById('stage');
	const image = document.getElementById('image');
	const minusBtn = document.getElementById('minusBtn');
	const plusBtn = document.getElementById('plusBtn');
	const scaleSlider = document.getElementById('scaleSlider');
	const scalePxLabel = document.getElementById('scalePx');
	const fitBtn = document.getElementById('fitBtn');
	const centerBtn = document.getElementById('centerBtn');

	// State
	let naturalWidth = 0;
	let naturalHeight = 0;
	let viewSizePx = 0; // circular viewport diameter in CSS pixels
	let currentScalePx = 0; // image width in CSS pixels (for UI)
	let imgLeft = 0; // image center offset in stage coords (px)
	let imgTop = 0;
	let isDragging = false;
	let dragStart = { x: 0, y: 0 };
	let posStart = { x: 0, y: 0 };

	function updateViewSize() {
		const rect = stage.getBoundingClientRect();
		viewSizePx = Math.min(rect.width, rect.height) * 0.82; // circle-guide size
	}

	function enableControls(enabled) {
		minusBtn.disabled = !enabled;
		plusBtn.disabled = !enabled;
		scaleSlider.disabled = !enabled;
		downloadBtn.disabled = !enabled;
		if (fitBtn) fitBtn.disabled = !enabled;
		if (centerBtn) centerBtn.disabled = !enabled;
	}

	function fitImageToView() {
		if (!naturalWidth || !naturalHeight || !viewSizePx) return;
		// Fit smallest dimension to circle, start centered
		const minFit = Math.min(naturalWidth, naturalHeight);
		const scaleFactor = viewSizePx / minFit;
		currentScalePx = Math.round(naturalWidth * scaleFactor);
		imgLeft = 0;
		imgTop = 0;
		applyTransform();
		updateScaleUI();
	}

	function applyTransform() {
		image.style.width = `${currentScalePx}px`;
		image.style.transform = `translate(calc(-50% + ${imgLeft}px), calc(-50% + ${imgTop}px))`;
	}

	function centerImage() {
		imgLeft = 0;
		imgTop = 0;
		applyTransform();
	}

	function updateScaleUI() {
		scalePxLabel.textContent = Math.max(1, Math.round(currentScalePx)).toString();
		// Clamp slider range around image size; allow up to 4k px for HQ
		scaleSlider.min = '50';
		scaleSlider.max = Math.max(1000, Math.ceil(Math.max(naturalWidth, naturalHeight) * 3)).toString();
		scaleSlider.value = Math.round(currentScalePx).toString();
	}

	function nudgeScale(deltaPx) {
		const next = Math.min(parseInt(scaleSlider.max, 10), Math.max(50, currentScalePx + deltaPx));
		if (next === currentScalePx) return;
		currentScalePx = next;
		applyTransform();
		updateScaleUI();
	}

	function onFileSelected(file) {
		if (!file) return;
		const url = URL.createObjectURL(file);
		// Load at full resolution
		const tmp = new Image();
		tmp.decoding = 'async';
		tmp.onload = () => {
			naturalWidth = tmp.naturalWidth;
			naturalHeight = tmp.naturalHeight;
			image.src = url;
			requestAnimationFrame(() => {
				updateViewSize();
				fitImageToView();
				enableControls(true);
			});
		};
		tmp.src = url;
	}

	function getStageCenter() {
		const rect = stage.getBoundingClientRect();
		return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
	}

	// Pointer interactions
	stage.addEventListener('pointerdown', (e) => {
		if (!image.src) return;
		isDragging = true;
		stage.setPointerCapture(e.pointerId);
		dragStart = { x: e.clientX, y: e.clientY };
		posStart = { x: imgLeft, y: imgTop };
	});
	stage.addEventListener('pointermove', (e) => {
		if (!isDragging) return;
		imgLeft = posStart.x + (e.clientX - dragStart.x);
		imgTop = posStart.y + (e.clientY - dragStart.y);
		applyTransform();
	});
	const endDrag = () => { isDragging = false; };
	stage.addEventListener('pointerup', endDrag);
	stage.addEventListener('pointercancel', endDrag);

	// Keyboard shortcuts
	window.addEventListener('keydown', (e) => {
		if (!image.src) return;
		const withShift = e.shiftKey;
		if (withShift && (e.key === 'ArrowUp' || e.key === 'Up')) {
			e.preventDefault();
			nudgeScale(1);
			return;
		}
		if (withShift && (e.key === 'ArrowDown' || e.key === 'Down')) {
			e.preventDefault();
			nudgeScale(-1);
			return;
		}
		switch (e.key) {
			case 'ArrowUp':
			case 'Up':
				e.preventDefault();
				imgTop -= 1;
				applyTransform();
				break;
			case 'ArrowDown':
			case 'Down':
				e.preventDefault();
				imgTop += 1;
				applyTransform();
				break;
			case 'ArrowLeft':
			case 'Left':
				e.preventDefault();
				imgLeft -= 1;
				applyTransform();
				break;
			case 'ArrowRight':
			case 'Right':
				e.preventDefault();
				imgLeft += 1;
				applyTransform();
				break;
		}
	});

	// Controls
	minusBtn.addEventListener('click', () => nudgeScale(-1));
	plusBtn.addEventListener('click', () => nudgeScale(1));
	scaleSlider.addEventListener('input', () => {
		currentScalePx = Number(scaleSlider.value);
		applyTransform();
		updateScaleUI();
	});

	if (fitBtn) {
		fitBtn.addEventListener('click', () => {
			fitImageToView();
		});
	}

	if (centerBtn) {
		centerBtn.addEventListener('click', () => {
			centerImage();
		});
	}

	fileInput.addEventListener('change', (e) => {
		const file = e.target.files && e.target.files[0];
		onFileSelected(file);
	});

	window.addEventListener('resize', () => {
		const prevView = viewSizePx;
		updateViewSize();
		if (prevView === 0 && viewSizePx > 0 && image.src) {
			fitImageToView();
		}
	});

	// Export high-quality cropped circle (fixed 800x800)
	downloadBtn.addEventListener('click', () => {
		if (!image.src) return;
		const outSize = 800; // fixed output size
		const canvas = document.createElement('canvas');
		canvas.width = outSize;
		canvas.height = outSize;
		const ctx = canvas.getContext('2d');
		if (!ctx) return;

		// Compute source-to-canvas mapping
		// currentScalePx is CSS width of image; map to image pixel scale
		const scaleToNatural = naturalWidth / currentScalePx; // px_image / px_css
		const center = getStageCenter();
		const rect = stage.getBoundingClientRect();
		const circleLeft = rect.left + rect.width * 0.09;
		const circleTop = rect.top + rect.height * 0.09;
		const circleSizeCss = viewSizePx; // matches .circle-guide 82% of stage

		// Compute the top-left of the image in stage coords (CSS px)
		const imgCssWidth = currentScalePx;
		const imgCssHeight = imgCssWidth * (naturalHeight / naturalWidth);
		const imgTopLeftX = center.x - imgCssWidth / 2 + imgLeft;
		const imgTopLeftY = center.y - imgCssHeight / 2 + imgTop;

		// Source rect in image pixels that corresponds to the circular viewport
		const srcX = Math.max(0, (circleLeft - imgTopLeftX) * scaleToNatural);
		const srcY = Math.max(0, (circleTop - imgTopLeftY) * scaleToNatural);
		const srcSize = circleSizeCss * scaleToNatural;

		// Clip to circle and draw
		ctx.save();
		ctx.beginPath();
		ctx.arc(outSize / 2, outSize / 2, outSize / 2, 0, Math.PI * 2);
		ctx.closePath();
		ctx.clip();
		ctx.imageSmoothingEnabled = true;
		ctx.imageSmoothingQuality = 'high';
		ctx.drawImage(
			image,
			srcX,
			srcY,
			srcSize,
			srcSize,
			0,
			0,
			outSize,
			outSize
		);

		// Apply 10px feather at the edge (fade to transparent)
		const featherPx = 10;
		const cx = outSize / 2;
		const cy = outSize / 2;
		const r = outSize / 2;
		ctx.globalCompositeOperation = 'destination-in';
		const g = ctx.createRadialGradient(cx, cy, Math.max(0, r - featherPx), cx, cy, r);
		g.addColorStop(0, 'rgba(0,0,0,1)');
		g.addColorStop(1, 'rgba(0,0,0,0)');
		ctx.fillStyle = g;
		ctx.beginPath();
		ctx.arc(cx, cy, r, 0, Math.PI * 2);
		ctx.closePath();
		ctx.fill();
		ctx.globalCompositeOperation = 'source-over';
		ctx.restore();

		canvas.toBlob((blob) => {
			if (!blob) return;
			const a = document.createElement('a');
			const url = URL.createObjectURL(blob);
			a.href = url;
			a.download = 'circle-crop.png';
			document.body.appendChild(a);
			a.click();
			a.remove();
			URL.revokeObjectURL(url);
		}, 'image/png', 1.0);
	});

	async function loadImageFromUrl(url) {
		if (!url) return;
		try {
			const response = await fetch(url, { mode: 'cors' });
			if (!response.ok) throw new Error('Network error');
			const blob = await response.blob();
			const objectUrl = URL.createObjectURL(blob);
			const tmp = new Image();
			tmp.decoding = 'async';
			tmp.onload = () => {
				naturalWidth = tmp.naturalWidth;
				naturalHeight = tmp.naturalHeight;
				image.src = objectUrl;
				requestAnimationFrame(() => {
					updateViewSize();
					fitImageToView();
					enableControls(true);
				});
			};
			tmp.src = objectUrl;
		} catch (err) {
			// Fallback: direct load (may taint canvas if no CORS)
			const tmp = new Image();
			tmp.crossOrigin = 'anonymous';
			tmp.decoding = 'async';
			tmp.onload = () => {
				naturalWidth = tmp.naturalWidth;
				naturalHeight = tmp.naturalHeight;
				image.src = url;
				requestAnimationFrame(() => {
					updateViewSize();
					fitImageToView();
					enableControls(true);
				});
			};
			tmp.src = url;
		}
	}

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

	urlInput.addEventListener('keydown', (e) => {
		if (e.key === 'Enter') {
			const url = (urlInput.value || '').trim();
			if (!url) return;
			loadImageFromUrl(url);
		}
	});
})();