latest stable release: v1.0.0

current:

aim of the project

The aim of this project is to create a light-weight, AngularJS-based editor for producing structural formulas (organic molecules mainly). The editor is from the beginning designed to support svg, thus enabling drawing of good-looking, scalable structures.

examples

Visit AngularDrawChem page!

possible usage

1. By adding mmAngularDrawChem module to your project, making it available for the users of your website, so they can interact with it and make their own structures.
2. You can use it on the project website, make structures that you need, grab the svg and place it within your html.
3. Download:

• Github
• npm npm i angular-draw-chem
• bower bower install angular-draw-chem

features

The following features have been already implemented:

✔ open/close editor,

✔ transfer svg,

✔ clear canvas,

✔ go one structure forward/back,

✔ copy/cut/paste selected structures,

✔ select/deselect all structures,

✔ move selected structure with arrows/mouse,

✔ align selected structures up/down/left/right,

✔ delete selected structures,

✔ erase single atom/bond,

✔ basic reaction arrows,

✔ cyclic structures (from three- to nine-membered rings),

✔ bonds (single, double, triple, dash, wedge, undefined),

✔ predefined labels,

✔ removing labels,

✔ custom labels.

Still to do:

− make different cache 'instances',

− add 'align middle' tools (vertical and horizontal),

− enable adding text elements (e.g. for comments or adding reaction conditions over an arrow),

− add possibility to select single atoms/bonds,

− add possibility to make fused rings,

− add possibility to make simple calculations (mass weight, formula, etc.),

− add more scenario tests,

− add user manual.

components

The project consists of the following components:

editor directive

1. drawChemEditor directive - the directive for interaction between the user and the editor,
2. DrawChemDirectiveMouseActions factory - helper service with all mouse actions for drawChemEditor directive,
3. DrawChemDirectiveUtils factory - helper service with some utility functions for drawChemEditor directive,
4. DrawChemDirectiveFlags factory - helper service containing info about currently selected tools; keeps track of mouse-related stuff.

svg rendering services

1. DrawChem factory - the main entry point for the use in a custom controller,
2. DrawChemSvgUtils factory - utilities for constructing svg elements,
3. DrawChemSvgBonds factory - utilities for making bonds in svg,
4. DrawChemSvgRenderer factory - contains key functionalities for transforming a Structure object into svg.

structure modify services

1. DrawChemModStructure - contains utilities for modifying a Structure object (adding new bonds, etc.)

helper services

1. DrawChemConstants factory - contains constant values, such as bond length, bond width, etc.,
2. DrawChemCache factory - caching service for Structure objects,
3. DrawChemUtils factory - various utilities, e.g. for vectors (addition, subtraction, etc.).

keyboard shortcuts

1. dcShortcuts directive - the directive binding keydown and keyup event listeners,
2. DCShortcutsStorage factory - service that enables registering of new keyboard shortcuts; it also keeps track of keys pushed and released, in order to fire a suitable event.

paths provider

1. DrawChemPaths provider - enables to configure paths to some static resources related to the editor (templateUrl for drawChemEditor directive, svgs used in the UI).

menu items

1. DrawChemActions factory - contains all actions available under Actions menu,
2. DrawChemEdits factory - contains all actions available under Edit menu,
3. DrawChemArrows factory - contains all arrows available under Arrows menu,
4. DrawChemGeomShapes factory - contains all geometrical shapes available under Shapes menu,
5. DrawChemStructures factory - defines basic structures, such as single bond, basic molecules (benzene, cyclohexane, etc.), available under Structures menu,
6. DrawChemLabels factory - defines basic labels, such as oxygen, sulfur, etc., available under Labels menu.

classes

1. DCSvg factory - defines Svg class, which encapsulates svg-relevant data,
2. DCAtom factory - defines Atom class, which encapsulates data about a single atom,
3. DCBond factory - defines Bond class, which encapsulates data about a single bond,
4. DCStructure factory - defines Structure class, which encapsulates data about thw hole structure and some tools (selection, alignment),
5. DCStructureCluster factory - defines StructureCluster class, which enables grouping of multiple Structure objects; used for predefined structures,
6. DCLabel factory - defines Label class, which encapsulates data about a label,
7. DCArrow factory - defines Arrow class, which encapsulates data about an arrow,
8. DCArrowCluster factory - defines ArrowCluster class, which enables grouping of multiple Arrow objects,
9. DCCyclicStructure - defines CyclicStructure which encapsulates data about cyclic structures,
10. DCBondStructure - defines BondStructure which encapsulates data about non-cyclic structures (only bonds for now).

license

MIT