Collage.js

var _evancz$elm_graphics$Native_Collage = function()
{

function setStrokeStyle(ctx, style)
{
	ctx.lineWidth = style.width;

	var cap = style.cap.ctor;
	ctx.lineCap = cap === 'Flat'
		? 'butt'
		: cap === 'Round'
			? 'round'
			: 'square';

	var join = style.join.ctor;
	ctx.lineJoin = join === 'Smooth'
		? 'round'
		: join === 'Sharp'
			? 'miter'
			: 'bevel';

	ctx.miterLimit = style.join._0 || 10;
	ctx.strokeStyle = _evancz$elm_graphics$Text$colorToCss(style.color);
}

function setFillStyle(redo, ctx, style)
{
	var sty = style.ctor;
	ctx.fillStyle = sty === 'Solid'
		? _evancz$elm_graphics$Text$colorToCss(style._0)
		: sty === 'Texture'
			? texture(redo, ctx, style._0)
			: gradient(ctx, style._0);
}

function trace(ctx, path)
{
	var points = _elm_lang$core$Native_List.toArray(path);
	var i = points.length - 1;
	if (i <= 0)
	{
		return;
	}
	ctx.moveTo(points[i]._0, points[i]._1);
	while (i--)
	{
		ctx.lineTo(points[i]._0, points[i]._1);
	}
	if (path.closed)
	{
		i = points.length - 1;
		ctx.lineTo(points[i]._0, points[i]._1);
	}
}

function line(ctx, style, path)
{
	if (style.dashing.ctor === '[]')
	{
		trace(ctx, path);
	}
	else
	{
		customLineHelp(ctx, style, path);
	}
	ctx.scale(1, -1);
	ctx.stroke();
}

function customLineHelp(ctx, style, path)
{
	var points = _elm_lang$core$Native_List.toArray(path);
	if (path.closed)
	{
		points.push(points[0]);
	}
	var pattern = _elm_lang$core$Native_List.toArray(style.dashing);
	var i = points.length - 1;
	if (i <= 0)
	{
		return;
	}
	var x0 = points[i]._0, y0 = points[i]._1;
	var x1 = 0, y1 = 0, dx = 0, dy = 0, remaining = 0;
	var pindex = 0, plen = pattern.length;
	var draw = true, segmentLength = pattern[0];
	ctx.moveTo(x0, y0);
	while (i--)
	{
		x1 = points[i]._0;
		y1 = points[i]._1;
		dx = x1 - x0;
		dy = y1 - y0;
		remaining = Math.sqrt(dx * dx + dy * dy);
		while (segmentLength <= remaining)
		{
			x0 += dx * segmentLength / remaining;
			y0 += dy * segmentLength / remaining;
			ctx[draw ? 'lineTo' : 'moveTo'](x0, y0);
			// update starting position
			dx = x1 - x0;
			dy = y1 - y0;
			remaining = Math.sqrt(dx * dx + dy * dy);
			// update pattern
			draw = !draw;
			pindex = (pindex + 1) % plen;
			segmentLength = pattern[pindex];
		}
		if (remaining > 0)
		{
			ctx[draw ? 'lineTo' : 'moveTo'](x1, y1);
			segmentLength -= remaining;
		}
		x0 = x1;
		y0 = y1;
	}
}

function drawLine(ctx, style, path)
{
	setStrokeStyle(ctx, style);
	return line(ctx, style, path);
}

function texture(redo, ctx, src)
{
	var img = new Image();
	img.src = src;
	img.onload = redo;
	return ctx.createPattern(img, 'repeat');
}

function gradient(ctx, grad)
{
	var g;
	var stops = [];
	if (grad.ctor === 'Linear')
	{
		var p0 = grad._0, p1 = grad._1;
		g = ctx.createLinearGradient(p0._0, -p0._1, p1._0, -p1._1);
		stops = _elm_lang$core$Native_List.toArray(grad._2);
	}
	else
	{
		var p0 = grad._0, p2 = grad._2;
		g = ctx.createRadialGradient(p0._0, -p0._1, grad._1, p2._0, -p2._1, grad._3);
		stops = _elm_lang$core$Native_List.toArray(grad._4);
	}
	var len = stops.length;
	for (var i = 0; i < len; ++i)
	{
		var stop = stops[i];
		g.addColorStop(stop._0, _evancz$elm_graphics$Text$colorToCss(stop._1));
	}
	return g;
}

function drawShape(redo, ctx, style, path)
{
	trace(ctx, path);
	setFillStyle(redo, ctx, style);
	ctx.scale(1, -1);
	ctx.fill();
}


// TEXT RENDERING

function fillText(redo, ctx, text)
{
	drawText(ctx, text, ctx.fillText);
}

function strokeText(redo, ctx, style, text)
{
	setStrokeStyle(ctx, style);
	// Use native canvas API for dashes only for text for now
	// Degrades to non-dashed on IE 9 + 10
	if (style.dashing.ctor !== '[]' && ctx.setLineDash)
	{
		var pattern = _elm_lang$core$Native_List.toArray(style.dashing);
		ctx.setLineDash(pattern);
	}
	drawText(ctx, text, ctx.strokeText);
}

function drawText(ctx, text, canvasDrawFn)
{
	var textChunks = chunkText(copy(defaultFacts), text);

	var totalWidth = 0;
	var maxHeight = 0;
	var numChunks = textChunks.length;

	ctx.scale(1,-1);

	for (var i = numChunks; i--; )
	{
		var chunk = textChunks[i];
		ctx.font = chunk.font;
		var metrics = ctx.measureText(chunk.text);
		chunk.width = metrics.width;
		totalWidth += chunk.width;
		if (chunk.height > maxHeight)
		{
			maxHeight = chunk.height;
		}
	}

	var x = -totalWidth / 2.0;
	for (var i = 0; i < numChunks; ++i)
	{
		var chunk = textChunks[i];
		ctx.font = chunk.font;
		ctx.fillStyle = chunk.color;
		canvasDrawFn.call(ctx, chunk.text, x, maxHeight / 2);
		x += chunk.width;
	}
}

function toFont(facts)
{
	return facts['font-style']
		+ ' ' + facts['font-variant']
		+ ' ' + facts['font-weight']
		+ ' ' + facts['font-size']
		+ ' ' + facts['font-family'];
}


// Convert the object returned by the text module
// into something we can use for styling canvas text
function chunkText(facts, text)
{
	switch (text.ctor)
	{
		case 'Append':
			var leftChunks = chunkText(copy(facts), text._0);
			var rightChunks = chunkText(copy(facts), text._1);
			return leftChunks.concat(rightChunks);

		case 'Str':
			return [{
				text: text._0,
				color: facts['color'],
				height: facts['font-size'].slice(0, -2) | 0,
				font: toFont(facts)
			}];

		case 'Link':
			return chunkText(facts, text._1);

		case 'Meta':
			facts[text._0] = text._1;
			return chunkText(facts, text._2);
	}
}

function copy(facts)
{
	return {
		'font-style': facts['font-style'],
		'font-variant': facts['font-variant'],
		'font-weight': facts['font-weight'],
		'font-size': facts['font-size'],
		'font-family': facts['font-family'],
		'color': facts['color']
	};
}

var defaultFacts = {
	'font-style': 'normal',
	'font-variant': 'normal',
	'font-weight': 'normal',
	'font-size': '12px',
	'font-family': 'sans-serif',
	'color': 'black'
};


// IMAGES

function drawImage(redo, ctx, form)
{
	var img = new Image();
	img.onload = redo;
	img.src = form._3;
	var w = form._0,
		h = form._1,
		pos = form._2,
		srcX = pos._0,
		srcY = pos._1,
		srcW = w,
		srcH = h,
		destX = -w / 2,
		destY = -h / 2,
		destW = w,
		destH = h;

	ctx.scale(1, -1);
	ctx.drawImage(img, srcX, srcY, srcW, srcH, destX, destY, destW, destH);
}

function renderForm(redo, ctx, form)
{
	ctx.save();

	var x = form.x,
		y = form.y,
		theta = form.theta,
		scale = form.scale;

	if (x !== 0 || y !== 0)
	{
		ctx.translate(x, y);
	}
	if (theta !== 0)
	{
		ctx.rotate(theta % (Math.PI * 2));
	}
	if (scale !== 1)
	{
		ctx.scale(scale, scale);
	}
	if (form.alpha !== 1)
	{
		ctx.globalAlpha = ctx.globalAlpha * form.alpha;
	}

	ctx.beginPath();
	var f = form.form;
	switch (f.ctor)
	{
		case 'FPath':
			drawLine(ctx, f._0, f._1);
			break;

		case 'FImage':
			drawImage(redo, ctx, f);
			break;

		case 'FShape':
			if (f._0.ctor === 'Line')
			{
				f._1.closed = true;
				drawLine(ctx, f._0._0, f._1);
			}
			else
			{
				drawShape(redo, ctx, f._0._0, f._1);
			}
			break;

		case 'FText':
			fillText(redo, ctx, f._0);
			break;

		case 'FOutlinedText':
			strokeText(redo, ctx, f._0, f._1);
			break;
	}
	ctx.restore();
}

function formToMatrix(form)
{
	var scale = form.scale;
	var matrix = A6( _evancz$elm_graphics$Transform$matrix, scale, 0, 0, scale, form.x, form.y );

	var theta = form.theta;
	if (theta !== 0)
	{
		matrix = A2(
			_evancz$elm_graphics$Transform$multiply,
			matrix,
			_evancz$elm_graphics$Transform$rotation(theta)
		);
	}

   return matrix;
}

function str(n)
{
	if (n < 0.00001 && n > -0.00001)
	{
		return 0;
	}
	return n;
}

function makeTransform(w, h, form, matrices)
{
	var props = form.form._0._0.props;
	var m = A6(
		_evancz$elm_graphics$Transform$matrix,
		1,
		0,
		0,
		-1,
		(w - props.width ) / 2,
		(h - props.height) / 2
	);

	var len = matrices.length;
	for (var i = 0; i < len; ++i)
	{
		m = A2( _evancz$elm_graphics$Transform$multiply, m, matrices[i] );
	}
	m = A2( _evancz$elm_graphics$Transform$multiply, m, formToMatrix(form) );

	return 'matrix(' +
		str( m[0]) + ', ' + str( m[3]) + ', ' +
		str(-m[1]) + ', ' + str(-m[4]) + ', ' +
		str( m[2]) + ', ' + str( m[5]) + ')';
}

function stepperHelp(list)
{
	var arr = _elm_lang$core$Native_List.toArray(list);
	var i = 0;
	function peekNext()
	{
		return i < arr.length ? arr[i]._0.form.ctor : '';
	}
	// assumes that there is a next element
	function next()
	{
		var out = arr[i]._0;
		++i;
		return out;
	}
	return {
		peekNext: peekNext,
		next: next
	};
}

function formStepper(forms)
{
	var ps = [stepperHelp(forms)];
	var matrices = [];
	var alphas = [];
	function peekNext()
	{
		var len = ps.length;
		var formType = '';
		for (var i = 0; i < len; ++i )
		{
			if (formType = ps[i].peekNext()) return formType;
		}
		return '';
	}
	// assumes that there is a next element
	function next(ctx)
	{
		while (!ps[0].peekNext())
		{
			ps.shift();
			matrices.pop();
			alphas.shift();
			if (ctx)
			{
				ctx.restore();
			}
		}
		var out = ps[0].next();
		var f = out.form;
		if (f.ctor === 'FGroup')
		{
			ps.unshift(stepperHelp(f._1));
			var m = A2(_evancz$elm_graphics$Transform$multiply, f._0, formToMatrix(out));
			ctx.save();
			ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
			matrices.push(m);

			var alpha = (alphas[0] || 1) * out.alpha;
			alphas.unshift(alpha);
			ctx.globalAlpha = alpha;
		}
		return out;
	}
	function transforms()
	{
		return matrices;
	}
	function alpha()
	{
		return alphas[0] || 1;
	}
	return {
		peekNext: peekNext,
		next: next,
		transforms: transforms,
		alpha: alpha
	};
}

function makeCanvas(w, h)
{
	var canvas = _evancz$elm_graphics$Native_Element.createNode('canvas');
	canvas.style.width  = w + 'px';
	canvas.style.height = h + 'px';
	canvas.style.display = 'block';
	canvas.style.position = 'absolute';
	var ratio = window.devicePixelRatio || 1;
	canvas.width  = w * ratio;
	canvas.height = h * ratio;
	return canvas;
}

function render(model)
{
	var div = _evancz$elm_graphics$Native_Element.createNode('div');
	div.style.overflow = 'hidden';
	div.style.position = 'relative';
	update(div, model, model);
	return div;
}

function nodeStepper(w, h, div)
{
	var kids = div.childNodes;
	var i = 0;
	var ratio = window.devicePixelRatio || 1;

	function transform(transforms, ctx)
	{
		ctx.translate( w / 2 * ratio, h / 2 * ratio );
		ctx.scale( ratio, -ratio );
		var len = transforms.length;
		for (var i = 0; i < len; ++i)
		{
			var m = transforms[i];
			ctx.save();
			ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
		}
		return ctx;
	}
	function nextContext(transforms)
	{
		while (i < kids.length)
		{
			var node = kids[i];
			if (node.getContext)
			{
				node.width = w * ratio;
				node.height = h * ratio;
				node.style.width = w + 'px';
				node.style.height = h + 'px';
				++i;
				return transform(transforms, node.getContext('2d'));
			}
			div.removeChild(node);
		}
		var canvas = makeCanvas(w, h);
		div.appendChild(canvas);
		// we have added a new node, so we must step our position
		++i;
		return transform(transforms, canvas.getContext('2d'));
	}
	function addElement(matrices, alpha, form)
	{
		var kid = kids[i];
		var elem = form.form._0;

		var node = (!kid || kid.getContext)
			? _evancz$elm_graphics$Native_Element.render(elem)
			: _evancz$elm_graphics$Native_Element.update(kid, kid.oldElement, elem);

		node.style.position = 'absolute';
		node.style.opacity = alpha * form.alpha * elem._0.props.opacity;
		_evancz$elm_graphics$Native_Element.addTransform(node.style, makeTransform(w, h, form, matrices));
		node.oldElement = elem;
		++i;
		if (!kid)
		{
			div.appendChild(node);
		}
		else
		{
			div.insertBefore(node, kid);
		}
	}
	function clearRest()
	{
		while (i < kids.length)
		{
			div.removeChild(kids[i]);
		}
	}
	return {
		nextContext: nextContext,
		addElement: addElement,
		clearRest: clearRest
	};
}


function update(div, _, model)
{
	var w = model.w;
	var h = model.h;

	var forms = formStepper(model.forms);
	var nodes = nodeStepper(w, h, div);
	var ctx = null;
	var formType = '';

	while (formType = forms.peekNext())
	{
		// make sure we have context if we need it
		if (ctx === null && formType !== 'FElement')
		{
			ctx = nodes.nextContext(forms.transforms());
			ctx.globalAlpha = forms.alpha();
		}

		var form = forms.next(ctx);
		// if it is FGroup, all updates are made within formStepper when next is called.
		if (formType === 'FElement')
		{
			// update or insert an element, get a new context
			nodes.addElement(forms.transforms(), forms.alpha(), form);
			ctx = null;
		}
		else if (formType !== 'FGroup')
		{
			renderForm(function() { update(div, model, model); }, ctx, form);
		}
	}
	nodes.clearRest();
	return div;
}


function collage(w, h, forms)
{
	return A3(_evancz$elm_graphics$Native_Element.newElement, w, h, {
		ctor: 'Custom',
		type: 'Collage',
		render: render,
		update: update,
		model: {w: w, h: h, forms: forms}
	});
}

return {
	collage: F3(collage)
};

}();