Chord Definition Editor

A simple point-n-click editor that generates ChordPro markup "define" tag.

by buzcarter

HTML

<h2>Chord Definition Editor</h2>
<p><label for="chordName">Chord Name: <input class="chordName" type="text" id="chordName" value="CHORDNAME" /></label></p>
<p><label for="startingFret">Starting fret: <select id="startingFret"></select></label></p>
<canvas id="myCanvas" width="400" height="250"></canvas>
<p>Your ChordPro <code>define</code> tag:</p>
<pre id="myOutput"></pre>

CSS

input[type=text]{
	border: 1px solid #D7D7D7;
	border-radius: 5px 5px 5px 5px;
	display: block;
	font-size: 30pt;
	text-align: center;
    width:400px;
}
canvas{
	border: solid 1px #f2f2f2;
}
pre {
    font-size:12pt;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

JavaScript

var crdEdt = window.crdEdt || {};

/**
 *
 * @class
 * @namespace crdEdt
 * @static
 */
crdEdt.entities = new function() {
	this.boundingBox = function(pos, dimensions) {
		this.x = pos ? pos.x : 0;
		this.y = pos ? pos.y : 0;
		this.width = dimensions ? dimensions.width : 1;
		this.height = dimensions ? dimensions.height : 1;
	}
};

/**
 *
 * @class
 * @namespace crdEdt
 * @static
 */
crdEdt.settings = new function() {
	this.anchorPos = {
		x: 60,
		y: 40
	};

	this.cursor = {
		fillColor: 'rgba(220, 216, 73, 0.35)', // 'rgba(245, 127, 18, 0.3)',
		strokeWidth: 1,
		strokeColor: '#AAB444', // '#F57F12',
		radius: 9
	};

	this.fretBoard = {
		numFrets: 5,
		stringNames: ['G', 'C', 'E', 'A'],
		//fillColor: '#E3DEB8',
		strokeWidth: 4,
		strokeColor: '#8F8569',
		//stringWidth: 2,
		//fretLines: 'black',
		//lineWidth: 2,
		/**
		 * Row Height -- vertical height between frets (pixels)
		 * @property settings.fretBox.fretSpace
		 * @type int
		 */
		fretSpace: 35,
		/**
		 * String Spacing -- horizontal distance between strings (pixels)
		 * @property settings.fretBox.stringSpace
		 * @type int
		 */
		stringSpace: 30
	};

	this.dot = {
		fillColor: '#F68014',
		radius: 11,
		strokeWidth: 2,
		strokeColor: '#D56333'
	};

	this.fretLabel = {
		fontFamily: 'Calibri',
		fontSize: 28, // Pixels
		color: '#6A6A63',
		lightColor: '#EAEAE8' //D6D6D6' //A4A4A3'
	};

	this.stringLabel = {
		fontFamily: 'Calibri',
		fontSize: 34, // Pixels
		color: '#DCD849' // #AAB444'//
	};

	this.target = {
		fillColor: {
			r: 159,
			g: 207,
			b: 101
		}
	};

	/**
	 * Dimensions of a single target
	 * @return {JSON} {width: ?, height: ? }
	 */
	this.targetDimensions = function() {
		return {
			height: crdEdt.settings.fretBoard.fretSpace,
			width: crdEdt.settings.fretBoard.stringSpace
		};
	};

	/**
	 * Top left-hand corner where Targets begin positioning
	 * @return {JSON} {x: ?, y: ? }
	 */
	this.targetAnchorPos = function() {
		var dimensions = this.targetDimensions();
		return...