Home

This page explains how to add custom icons.

1st Step: Add new toolbox icon!

You've to add something through which end-users can use/access your feature – you can add any HTML element for this purpose (e.g. checkbox, radio-button, button, etc.) – however I recommend you add new toolbox icon instead! (which is a <canvas> element!)

• Line#L28-L41

<div id="tool-box" class="tool-box">
	........................................
	<canvas id="pencil-icon" width="40" height="40"></canvas>
</div>

2nd Step: Decorate the icon!

After adding above HTML code, if you refresh the page; you'll see an empty icon appended in the bottom of the toolbox. Now you've to decorate this icon so end users can understand it!

Open decorator.js file and append following code anywhere in the file.

function givenName() {
	var context = getContext('pencil-icon');

	// 2d context relevant code here! (decoration code!!!)

	bindEvent(context, 'PencilSelected');
}
givenName();

FeatureSelected is a global property used to understand the current state of your new toolbox icon (whether icon is selected or not).

In common.js:

var is = {
	......................
	isPencilSelected: false,

	set: function (shape) {
		...................... = is.isPencilSelected = false;
		.............................................
	}
};

3rd Step: Create new JavaScript file

Now you've to create a new javascript file where you'll put all your "new feature" relevant code! Name the file like this: pencil-handler.js

var pencilHandler = {
	ismousedown: false,

	mousedown: function(e) {
		this.ismousedown = true;
	},
	
	mouseup: function(e) { 
		this.ismousedown = false;
	},
	
	mousemove: function(e) {
		if(this.ismousedown) { ... }
	}
};

4th Step: Bind mouse events

Now you've to bind mouse events to your newly created object. Open events-handler.js and append following code:

addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function (e) {
	............................................................
	else if (is.isPencilSelected) pencilHandler.mousedown(e);
	............................................................
});

addEvent(document, isTouch ? 'touchend' : 'mouseup', function (e) {
	............................................................
	else if (is.isPencilSelected) pencilHandler.mouseup(e);
	............................................................
});

addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function (e) {
	............................................................
	else if (is.isPencilSelected) pencilHandler.mousemove(e);
	............................................................
});

Now you are 80% done! I strongly recommend you place your feature's drawing relevant code in the draw-helper.js file as I did for other features! - Reusability!!

5th Step: Handle the output (textarea!)

This is the last step. You've to handle the output for textarea.

Open common.js file; there is a function "updateTextArea" in the "common" object – which is aimed to output into textarea element.

You don't have to change "updateTextArea". For simplicity purpose, code is separated in different functions/properties that you've to edit:

1. common.forLoop
2. common.absoluteShortened
3. common.absoluteNOTShortened
4. common.relativeShortened
5. common.relativeNOTShortened

E.g.

common.absoluteNOTShortened = function(toFixed) {
    var tempArray = [],
        i, point, p;

    for (i = 0; i < points.length; i++) {
        p = points[i];
        point = p[1];

        //----------

        if (p[0] === 'pencil') {
            // your code goes here, e.g.
            tempArray[i] = ['context.beginPath();\n' + 'context.moveTo(' + point[0] + ', ' + point[1] + ');\n' + 'context.lineTo(' + point[2] + ', ' + point[3] + ');\n' + this.strokeOrFill(p[2])];
        }

        //----------

    }
    textarea.value = tempArray.join('\n\n') + this.strokeFillText;

    this.prevProps = null;
}