Graphical Notes

 

• npm: npm install graphical-notes

---

Package License

This package is fully free with limited usages, but in advanced cases and to use this package as a whole drawing area with all features and +2000 shapes, you may request the pro version.

Getting Started

This package lets the simplicity for adding a new shape in your next project in simple steps by passing a string representation for the shape. For example graphics.add('rect') would add a rectangle to the canvas.

var rect = graphics.add('rect');

In the case we mentioned, the rect is an instance of Interface which have useful accessor methods for manipulating the shape, without exposing you to the complexity beneath.

You can also set attributes using setAttr and get attributes using getAttr – Interface also has shorthand methods for setting attributes individually, such as x(), y(), height(), width(), etc...

Interface also has the attr method for setting or getting depending on if a value was passed:

var value = Math.random();
expect(rectangle.width(value).width()).toEqual(value); // √

Note: The z() method is for setting the z-index but isn't applied directly to your rect shape, it is instead applied to the g element that is wrapped around your shape. When you define the z-index for your shape, the Events.REORDER event will be dispatched and all elements will be re-ordered using their z-indexes using d3.sort. See Z-Index Management for further information.

For the graphics.all method the interface of each shapes object is returned:

return this.shapes.map((model) => model.interface);

Change Data Attribute

By default Graphics sets the data-id attribute on each element's group, but this can be changed using the constructor:

var graphics = new Graphics(svg, {
    dataAttribute: 'data-graphics-id'
});

Creating Shapes

All of the shapes in Graphics use hooks to allow for the easy creation of custom shapes.

• [x] getTag — For specifying the root element's tag name;
• [x] addInterface — For adding the specialised interface;
• [ ] addAttributes — For applying custom attributes;
• [ ] addElements — For appending elements to the group/shape elements;

Shapes can be registered with the register method on the Graphics object – it accepts a name (string) and an object (Shape).

class Circle extends Shape {}
graphics.register('circle', Circle);

Removing Shapes

Once you've created a shape, you will probably wish to remove it at some point. For this, the Interface object has a remove method which dispatches an Events.REMOVE event to the Graphics object. By using this method to remove the shape, Graphics can ensure the cleanup is invoked to prevent memory leaks.

var rect = graphics.add('rect').fill('blue').x(100);
rect.remove(); // bye bye.

Dispatchers

Each Shape has a Dispatcher (this.dispatcher) which is capable of dispatching events that affect every shape, whereas Feature and Interface objects only have dispatchers capable of dispatching events to the Shape object — if an event is intended to be broadcast to all shapes, then it's the responsibility of the Shape object to relay the dispatched event to the Graphics object, such as in the case of Events.DESELECT from Selectable.

Z-Index Management

Technically SVG doesn't have a z-index property as CSS does, and therefore the Z value is determined by the insertion order of the elements. Graphics provides a handful of convenience methods for managing the Z index. Aside from the typical z method which accepts any numerical value — including Infinity and -Infinity which will be translated to in between 1 and groups.length — Graphics has the following methods:

• sendToBack() sends the shape to the back — 1;
• bringToFront() brings the shape to the front — groups.length;
• sendBackwards() sends the shape backwards one step — z() - 1;
• bringForwards() brings the shape forwards one step — z() + 1;

// shufflin', shufflin'...
var rect = graphics.add('rect').z(-Infinity);
rect.bringToFront().sendBackwards().bringForwards().sendToBack();