How to use react-art - 10 common examples

To help you get started, we’ve selected a few react-art examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github talldan / hex-demo / src / js / index.js View on Github external
// libs
container
	.register('React', React, { maker: 'fixed' })
	.register('_', require('lodash'), { maker: 'fixed' })
	.register('rsvp', require('rsvp'), { maker: 'fixed' })
	.register('eventEmitter', function() { return new Events.EventEmitter() })
	.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
	.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });

// components
container
	.register('Surface', ReactArt.Surface, { maker : 'fixed' })
	.register('Group', ReactArt.Group, { maker : 'fixed' })
	.register('Path', ReactArt.Path, { maker : 'fixed' })
	.register('Shape', ReactArt.Shape, { maker : 'fixed' })
	.register('App', require('./components/app.jsx'))
	.register('GameBoard', require('./components/game-board.jsx'))
	.register('HexGrid', require('./components/hex-grid.jsx'))
	.register('HexTile', require('./components/hex-tile.jsx'));

// mixins
container
	.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });

var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);
github allofthenorthwood / algorithms / ConnectionViewer.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;


var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
github allofthenorthwood / algorithms / NodeTree.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;

var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)
github circuitsim / circuit-simulator / src / components / CircuitCanvas.jsx View on Github external
import React from 'react';
import ReactArt from 'react-art';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {Map} from 'immutable';

import Colors from '../styles/Colors.js';
import EventTypes from '../update/EventTypes.js';
import {relMouseCoords} from './utils/DrawingUtils.js';
import {getKeyCombo} from '../utils/KeyboardShortcuts.js';

const Surface = ReactArt.Surface;

const addPropsAndCreate = (extraProps) => (element) => {
  // https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
  const props = Object.assign({key: element.props.id}, extraProps || {}, element.props);
  return React.createElement(element.component, props);
};

const toJS = e => e.toJS();

const convert = {
  mousedown: EventTypes.CanvasMouseDown,
  mousemove: EventTypes.CanvasMouseMove,
  mouseup: EventTypes.CanvasMouseUp,
  keydown: EventTypes.KeyDown
};
github talldan / hex-demo / src / js / index.js View on Github external
var Events = require('events');
var indejection = require('indejection');
var container = indejection();

// libs
container
	.register('React', React, { maker: 'fixed' })
	.register('_', require('lodash'), { maker: 'fixed' })
	.register('rsvp', require('rsvp'), { maker: 'fixed' })
	.register('eventEmitter', function() { return new Events.EventEmitter() })
	.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
	.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });

// components
container
	.register('Surface', ReactArt.Surface, { maker : 'fixed' })
	.register('Group', ReactArt.Group, { maker : 'fixed' })
	.register('Path', ReactArt.Path, { maker : 'fixed' })
	.register('Shape', ReactArt.Shape, { maker : 'fixed' })
	.register('App', require('./components/app.jsx'))
	.register('GameBoard', require('./components/game-board.jsx'))
	.register('HexGrid', require('./components/hex-grid.jsx'))
	.register('HexTile', require('./components/hex-tile.jsx'));

// mixins
container
	.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });

var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);
github allofthenorthwood / algorithms / NodeTree.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;

var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)
        .lineTo(x2, y2);
github allofthenorthwood / algorithms / ConnectionViewer.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;


var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
    return new Path()
        .moveTo(x1, y1)
github allofthenorthwood / algorithms / NodeTree.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;

var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

var linePath = function(x1, y1, x2, y2) {
github talldan / hex-demo / src / js / index.js View on Github external
var indejection = require('indejection');
var container = indejection();

// libs
container
	.register('React', React, { maker: 'fixed' })
	.register('_', require('lodash'), { maker: 'fixed' })
	.register('rsvp', require('rsvp'), { maker: 'fixed' })
	.register('eventEmitter', function() { return new Events.EventEmitter() })
	.register('seedrandom', require('seedrandom'), { maker: 'fixed' })
	.register('displayHelper', require('./utilities/displayHelper'), { maker: 'singleton' });

// components
container
	.register('Surface', ReactArt.Surface, { maker : 'fixed' })
	.register('Group', ReactArt.Group, { maker : 'fixed' })
	.register('Path', ReactArt.Path, { maker : 'fixed' })
	.register('Shape', ReactArt.Shape, { maker : 'fixed' })
	.register('App', require('./components/app.jsx'))
	.register('GameBoard', require('./components/game-board.jsx'))
	.register('HexGrid', require('./components/hex-grid.jsx'))
	.register('HexTile', require('./components/hex-tile.jsx'));

// mixins
container
	.register('PureRenderMixin', React.addons.PureRenderMixin, { maker: 'fixed' });

var React = container.get('React');
var AppElement = React.createElement(container.get('App'));
React.render(AppElement, document.body);
github allofthenorthwood / algorithms / ConnectionViewer.jsx View on Github external
var _ = require('underscore');
var React = require('react');
var ReactART = require('react-art');

var Group = ReactART.Group;
var Path = ReactART.Path;
var Shape = ReactART.Shape;
var Surface = ReactART.Surface;
var Text = ReactART.Text;
var Pattern = ReactART.Pattern;


var circlePath = function(r) {
    return new Path()
        .moveTo(0, -r)
        // Two arcs make a circle
        .arcTo(0, r, r, r, true)
        .arcTo(0, -r, r, r, true)
        .close();
};

react-art

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

MIT
Latest version published 2 years ago

Package Health Score

78 / 100
Full package analysis