JSchematic is a React-Redux application for drawing molecules and chemical reactions. Sample Deployment
Clone the GitHub repository to a local directory, and install the required dependencies using npm.
$ git clone https://github.com/nicksenger/JSchematic.git $ cd JSchematic $ npm install
The test-page (index.html), and Webpack-bundled build.js file are stored under JSchematic/build. The source components are stored in JSchematic/src.
Customizing JSchematic, and integrating it into your own web application, will require familiarity with React.js and Redux. Each has excellent documentation available, and should be referred to as needed.
JSchematic's source code is divided into subdirectories by filetype, and further subdivided based on function.
The entrypoint for the app is contained within app.js of the js directory. This file renders the JSchematic React Component to an arbitrary 'container' element of the test-page's index.html.
- actions: contains Redux action creators (index.js)
- components: contains simple, stateless React components
- containers: contains React components which require access to the global state provided by Redux
- reducers: contains Redux reducers
- utilities: contains shared functions and logic used by multiple components/containers/reducers
Files contained within the reducers subdirectory provide a basic outline of the app's data structure. Here is a short summary of each reducer:
- reducerActiveButton: handles information regarding which button from the menu bar is selected, or being hovered over
- reducerBodyHover: handles information regarding which bond is being highlighted by the mouse cursor
- reducerButtons: contains information (image links, action names, etc) about the buttons to be rendered into the menu and sub-menus
- reducerCanvasDown: handles whether the mouse is clicked 'down' on the main canvas element
- reducerCanvasUp: handles whether the mouse is 'up' on the main canvas element
- reducerElementSizes: contains information about sizing for basic bond and text elements rendered to the canvas
- reducerHighlight: handles the state of which atoms are highlighted
- reducerLockPositions: handles the positioning of atoms relative to bond elements
- reducerManageElements: state containing the information about the type, position, and orientation of every element drawn in the canvas
- reducerMouseCoord: handles information about the position of the user's mouse cursor on the page
- reducerSubSelect: handles rendering of sub-menus
- reducerTextHover: state regarding whether or not a user is hovering over a text element
JSchematic's functionality involves the interplay of numerous React components, most of which require access to the global state. All components and containers are linked to corresponding SASS scss files of the same name in the css folder. The stateless components are:
- App (app.js): contains and organizes other important elements
- Highlight (highlight.js): simple blue highlighting when user hovers over a particular atom
BasicBond (basicBond.js): this is the lowest-level bond component, all bond-systems involve rendering of the
BasicBond, or a collection of
BasicBonds in a particular orientation
BondHead (bondHead.js): within each
BondHeads, corresponding to each atom involved in the bond
BasicButton (button.js): menu buttons are each BasicButton components
Canvas (canvas.js): the main drawing space for the application, controls creation and removal of elements, and triggers rendering of top-level elements
ExpandaButton (expandaButton.js): menu buttons that trigger the enpansion of a sub-menu
MenuBar (menuBar.js): main menu component
SubButton (subButton.js): buttons of a sub-menu
SubMenu (subMenu.js): sub-menus that appear on mouse-down of menu SubButtons
Text (text.js): text boxes rendered in the canvas
bondSystems: These components simply render particular arrangements of
elements: These components are special added items like charges, arrows, symbols and lobes
Contributions that address any unresolved issues or provide additional features are encouraged and appreciated! Please indicate what changes are being made in the commit message.
JSchematic is copyright (c) 2016, Nicholas Senger. It is distributed under the BSD 3-Clause License.