The PaperBuilder

This is restricted (demo) version of my editor engine "PaperBuilder". It has been designed to construct online layouts and any sort of documents with vector- and raster graphics. Restrictions is:

Well, in simple words this editor is like Photoshop / Illustrator, but, of course, far less powerful.

With this demo I try to show some of engine's features, as well as myself and my skills.

Key features

Vector editing. User operates with vector primitives, e.g. rectangles, lines, ellipses (polygones, curves, stars, Bezier curves, whatever, could be added easily).

All objects are stored in JSON easy-read format, so editor could be embedded into the any environment as part of process, for example, as photobook editor.

Now then —

Light and dark themes

Theme selector

User can use one of two predefined styles (and defining new styles is pretty easy)

Various backgrounds

Various backgrounds

Editor allows loading background texture (.jpg) as well as using clean colors.

Various paper sizes

Various paper sizes

You can easily make your own list of dimensions.

Margin controls

Various margins

To help users with printing borders.

Move and rotate with selection control

Rotating selector

Shows extra-convenient "compass" to make the rotation more accurate.

Multiselection

Multiselection

Move, align, distribute or delete bunch of objects.

Align and distribute

Aligning and distribution

"Must have" tool when you work with multiple object.

Layers

Layers

Makes objects above or below others.

Undo and Redo

Undo/Redo

No comments. Frankly speaking, I had one, but I had clicked "undo" on it.

Style clipboard

Style clipboard

And a lot of other conveniences.

Specially designed stylish controls

Controls

I made my very own controls for this editor.

Color chooser

Color chooser

Convenient and powerful color chooser dialog.

Google Web Fonts

Fonts

Any Google WebFont could be attached.

Techologies

Well, first of all, this is a contemporary stack of technologies and not all browsers and computers can work with it.

I used HTML-5 and CSS-3 here. The heart of Builder is HTML canvas with the excellent library KineticJS.

Twitter Bootstrap with my own addons and extensions is the skeleton, if I'd continue association. I used LESS PHP interpreter to manage a lot of CSS rules and files.

Some parts were written with the CoffeeScript and Node.js was used in compiler role.

There is very little PHP code here because editor is client-side application. PHP serves only as aggregator and localization background. I used poEditor (.po and .mo files from Mozilla foundation).

I used jQuery and AmplifyJS to deal with events.

And, last but not least, the Google WebFonts are plugged here to use fonts.