Drawing Fabric

Drawing Fabric is designed to create a highly configurable and extendable vector drawing editor built on top of Fabric.js.

It achieves this by using Functionality blocks. These are used in combination with each other to build an editor that suits what you need. Please check out the demo page and source to see how this in action.

By allowing all functionality blocks to be optional the production codebase size can be kept to a minimum.

Usage

After DOM load, we need to initalize the DrawingFabric.Canvas like so:

var c = new DrawingFabric.Canvas('canvas');

We can then start bolting the functionality we want into it. For example we may want a simple one that adds double click support:

c.addFunctionality(new DrawingFabric.Functionality.addDoubleClick());

This will use the existing fabric.js event mechanism to trigger a new event called object:dblselected.

Some things are more complicated, and we need to be able to configure them. Say for example we want a widget that tracks where the mouse is. We can pass it information about where we want the results in our DOM, and it'll take care of the rest:

c.addFunctionality(new DrawingFabric.Functionality.mouseInfo({
  x: $('.js-mouse-info-x'),
  y: $('.js-mouse-info-y')
}));

Functionality Blocks

Here's a list of what functionality has been created so far:

• keyboardEvents - Adds key:down event
• keyboardCommands - Allows objects to be moved and deleted using the keyboard
• tools - Provides a very simple tool selector (cursor, ellipse, ...) that is used by other parts of functionality
• mouseInfo - Updates a part of the DOM with mouse coordinates
• addDoubleClick - Adds object:dblselected event
• addText - Enables text boxes to drawn and edited within page with the mouse
• drawWithMouse - Allows freehand lines to be drawn with the mouse
• drawShapeWithMouse - Allows basic shapes (rectangles, ellipses and triangles) to be drawn
• drawArcWithMouse - Can draw an arc on the page using the mouse to set centre, radius and sweep
• drawLineWithMouse - Allows straight lines to be drawn on the page
• selectedProperties - Shows what properties the selected object has (stroke, colour, ...)
• selectWithCursor - Ensures that objects are only selected when the cursor tool is being used
• canvasResizer - Resizes the drawing area based on the dimensions of a wrapping element

Building

In order to help maintainability the code (found in src) is split into multiple files. Sprockets is used to describe the dependencies between the files. If you want to use this code in something like Rails with the asset pipeline, then just copy the src directory to your project and let that deal with the build dependencies. This allows you to specify exactly what bits of DrawingFabric you need.

However, if you just need a file with everything in it then that can be found in the build directory.

If you want to generate a new version of this you must first install Ruby and Bundler.

Once you have this:

$ bundle install $ bundle exec rake build

This will create a new copy of the code in the build folder. It will not package any external dependencies (jQuery, fabric.js).

TODO

This project is very much in it's infancy, here is what is top of the list:

• Refactor tools for controlling object properties like fill, stroke, font etc, the code here can be simplified.
• Adjust how focus works so that items are not accidentally drawn when selecting, or selected when drawing.
• Look into ways of testing the blocks.
• Some kind of 'traits' system so that interdependencies of Functionality can be described
• Remove jQuery dependency for Functionality blocks that use it.
• Manipulating external images
• Documentation
• ...

Contributing

Please make pull requests for new bits of funtionality, or fine tuning existing functionality.