How to Contribute

Same as Smoothieware github guidline :

Fork the original repositiory.
Clone the forked repository.
Create a new branch for your bugfix/feature.
Commit your changes and push it back on Github.
Submit your pull request (Only one feature per pull request).

Developer Resources of interest:

The package list changes frequently; expect to do an npm install every time you do a git pull until things settle down. LaserWeb Development Environment

---

• npm install - Install the development environment.
• npm start - Start the live development server.
• npm run bundle-dev - Bundle the project for development.
• npm run bundle-prod - Bundle the project for production.
• npm run build-docs - Build the sources documentations.
• npm run installdev - Resolve git submodules and install.

---

Push update to live gh-pages version

Once tested, push updates to Github Pages

git checkout gh-pages && git pull && git merge dev-es6 && npm run bundle-dev && git add dist && git commit -m regen && git push && git checkout dev-es6

Please Note:

• Application state is in a redux store.

  • e.g. document tree, operations, settings, camera position, current tab

• State is never modified, only replaced. This is critical for undo/redo support. New state shares objects with old state to save memory.

• Reducers are the only thing which can create new state. Actions tell the reducers what to do. Components render the state. They also install event callbacks which create actions and dispatch them to the store.

• Only objects which can be serialized to/from JSON go in the store, no regl objects, DOM nodes, image objects, etc. This is critical for state saving and loading.

  • e.g. Polygons are in a 2d arrays: [[x, y, x, y, ...], ...]
  • e.g. Images are in base-64-encoded strings

• React components convert objects to other forms as needed. Functions in lib/ aid this.

• The DocumentCacheHolder component converts document data into more usable forms.

  • It converts:
    • Polygon data [[x, y, x, y, ...], ...] into:
      • outlines: array of Float32Array of (x, y, x, y, ...). This draws polygon outlines in regl.
      • triangles: Float32Array of (x, y, x, y, ...), This draws polygon filled areas in regl.
    • Base-64-encoded image data into:
      • Browser's Image class
      • A regl texture
  • It monitors the store and regenerates cache data when needed.
  • It installs itself in React's context like react-redux's Provider.
  • withDocumentCache() wraps other React components like react-redux's connect(). It sets the component's props.documentCacheHolder.

Example: loading an SVG file.

• The Cam component sets up a callback for the file input
• The callback fetches the file, creates a loadDocument action with the file content, and dispatches it to the store
• The documents reducer handles the loadDocument action. It looks at the file type, sees that it's image/svg+xml, and passes it to the loadSvg reducer.
• The loadSvg reducer uses SnapSvg and functions in lib/ to convert the SVG and add it to a new state.
• The store triggers a UI render.