react-blueprint-svg

Pannable, zoomable SVG with menu of displaying options inspired by maker.js.

Link to Demo

Install

npm install --save react-blueprint-svg

or

yarn add react-blueprint-svg

Usage

import React from 'react'
import Blueprint from 'react-blueprint-svg'

function App() {
  let smile = new SmileModel();

  return <div className="container">
    <Blueprint model={smile} />
  </div>
}

You can also add children elements to the header of the blueprint area, to give it a title or a headline with a link to download your CNC file:

    const filename = "output.dxf"
    const file = makerjs.exporter.toDXF(model)
    <Blueprint model={model}> 
      <h3><a href={file}>{filename}</a></h3>
    </Blueprint>

Input

The model property may either be makerjs.IModel object or *.svg data supplied as a string. When putting in a plain string, advanced display options like path names and flow are disabled, as those rely on makerjs to convert the model into annotated <svg>.

  var model = {
    models: {
      ring1: new makerjs.models.Ring(40, 100),
      bc1: new makerjs.models.BoltCircle(90, 4, 10),
      bc2: new makerjs.models.BoltCircle(55, 7, 6, 30)
    }
  }

  return <Blueprint model={model} /> // no automatic sizing or path flow annotation

Output:

  let svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />'
  
  return <Blueprint model={svg} /> // no automatic sizing or path flow annotation

Output:

TODO

• multitouch support for Zooming & Panning, and therefore also React Native support

Contact

Post an issue or contact me on twitter.

License

MIT © Bersaelor