API Design for js-graphic-designer

js-graphic-designer.js

// Initialze
var designer = graphicDesigner({
	// required:
	element: '#container',
	// optional:
	unit: 'pixel' // `pixel` or `inch` or `mm`
	dpi: 300, // only use with inch or mm
	width: 500,
	height: 500,
	scaleFactor: 1,
	selectBodyClass: 'item-selected',
	itemClass: 'item',
	itemSelectClass: 'selected',
	itemDragClass: 'dragging'
})

// All the following plugins are optional

.graphicCache({
	// optional:
	storageKey: 'graphicDesignerGraphic'
})
.backgroundColorPicker({
	// required:
	element: '#background-color', 
	image: 'colorpicker.png',
	// optional:
	color: '#ffffff',
	setButtonColor: true,
	setTextColor: true
})
.imageUpload({
	// required:
	element: '#image-upload',
	// optional:
	dropBodyClass: 'image-drop'
})
.sizeSelect({
	// required:
	element: '#type-select',
	// optional:
	idAttribute: 'value',
	widthAttribute: 'data-width',
	heightAttribute: 'data-height'
})
.previewLink({
	// required:
	element: '#preview-button',
	// optional:
	buttonReadyText: 'Open Preview',
	windowName: 'preview'
})
.deleteButton({
	// required:
	element: '#destroy',
	confirmText: 'Are you sure you want to delete the selected element?'
})
.zIndexUpdate({
	// optional:
	toBack: '#to-back',
	toFron: '#to-front'
})
.scaling({
	// required:
	image: 'scale.svg'
})
.rotating({
	// required:
	image: 'rotate.svg'
})
.insertText({
	// required:
	insertButton: '#insert-text',
	editInput: '#edit-text',
})
.fontSelect({
	// required:
	element: '#font-select',
	fontFamilyAttribute: 'data-font'
})

// Events
.on('cache:update', function() {
	console.log('nice!');
});


// External Methods
designer.exportPng(function(error, result) {

});