Merge pull request #1 from dan-kwiat/master

Published version v1.0.0

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-class-properties"]
+}

.eslintrc

@@ -0,0 +1,180 @@
+{
+  root: true,
+  parser: 'babel-eslint',
+  plugins: [/*'import', */'jsx-a11y', 'react'],
+env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    jest: true,
+    node: true
+  },
+parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      generators: true,
+      experimentalObjectRestSpread: true
+    }
+  },
+settings: {
+    'import/ignore': [
+      'node_modules',
+      '\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$',
+    ],
+    'import/extensions': ['.js'],
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.json']
+      }
+    }
+  },
+rules: {
+    // http://eslint.org/docs/rules/
+    'array-callback-return': 'warn',
+    'camelcase': 'warn',
+    'curly': 'warn',
+    'default-case': ['warn', { commentPattern: '^no default$' }],
+    'dot-location': ['warn', 'property'],
+    'eol-last': 'warn',
+    'eqeqeq': ['warn', 'always'],
+    'indent': ['warn', 2, { "SwitchCase": 1 }],
+    'guard-for-in': 'warn',
+    'keyword-spacing': 'warn',
+    'new-parens': 'warn',
+    'no-array-constructor': 'warn',
+    'no-caller': 'warn',
+    'no-cond-assign': ['warn', 'always'],
+    'no-const-assign': 'warn',
+    'no-control-regex': 'warn',
+    'no-delete-var': 'warn',
+    'no-dupe-args': 'warn',
+    'no-dupe-class-members': 'warn',
+    'no-dupe-keys': 'warn',
+    'no-duplicate-case': 'warn',
+    'no-empty-character-class': 'warn',
+    'no-empty-pattern': 'warn',
+    'no-eval': 'warn',
+    'no-ex-assign': 'warn',
+    'no-extend-native': 'warn',
+    'no-extra-bind': 'warn',
+    'no-extra-label': 'warn',
+    'no-fallthrough': 'warn',
+    'no-func-assign': 'warn',
+    'no-global-assign': 'warn',
+    'no-implied-eval': 'warn',
+    'no-invalid-regexp': 'warn',
+    'no-iterator': 'warn',
+    'no-label-var': 'warn',
+    'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
+    'no-lone-blocks': 'warn',
+    'no-loop-func': 'warn',
+    'no-mixed-operators': ['warn', {
+      groups: [
+        ['&', '|', '^', '~', '<<', '>>', '>>>'],
+        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+        ['&&', '||'],
+        ['in', 'instanceof']
+      ],
+      allowSamePrecedence: false
+    }],
+    'no-multi-str': 'warn',
+    'no-new-func': 'warn',
+    'no-new-object': 'warn',
+    'no-new-symbol': 'warn',
+    'no-new-wrappers': 'warn',
+    'no-obj-calls': 'warn',
+    'no-octal': 'warn',
+    'no-octal-escape': 'warn',
+    'no-redeclare': 'warn',
+    'no-regex-spaces': 'warn',
+    'no-restricted-syntax': [
+      'warn',
+      'LabeledStatement',
+      'WithStatement',
+    ],
+    'no-script-url': 'warn',
+    'no-self-assign': 'warn',
+    'no-self-compare': 'warn',
+    'no-sequences': 'warn',
+    'no-shadow-restricted-names': 'warn',
+    'no-sparse-arrays': 'warn',
+    'no-template-curly-in-string': 'warn',
+    'no-this-before-super': 'warn',
+    'no-throw-literal': 'warn',
+    'no-undef': 'warn',
+    'no-unexpected-multiline': 'warn',
+    'no-unreachable': 'warn',
+    'no-unsafe-negation': 'warn',
+    'no-unused-expressions': 'warn',
+    'no-unused-labels': 'warn',
+    'no-unused-vars': ['warn', { vars: 'local', args: 'none' }],
+    'no-use-before-define': ['warn', 'nofunc'],
+    'no-useless-computed-key': 'warn',
+    'no-useless-concat': 'warn',
+    'no-useless-constructor': 'warn',
+    'no-useless-escape': 'warn',
+    'no-useless-rename': ['warn', {
+      ignoreDestructuring: false,
+      ignoreImport: false,
+      ignoreExport: false,
+    }],
+    'no-with': 'warn',
+    'no-whitespace-before-property': 'warn',
+    'object-curly-spacing': ['warn', 'always'],
+    'operator-assignment': ['warn', 'always'],
+    radix: 'warn',
+    'require-yield': 'warn',
+    'rest-spread-spacing': ['warn', 'never'],
+    'semi': 'warn',
+    strict: ['warn', 'never'],
+    'unicode-bom': ['warn', 'never'],
+    'use-isnan': 'warn',
+    'valid-typeof': 'warn',
+'react/jsx-boolean-value': 'warn',
+    'react/jsx-closing-bracket-location': 'warn',
+    'react/jsx-curly-spacing': 'warn',
+    'react/jsx-equals-spacing': ['warn', 'never'],
+    'react/jsx-first-prop-new-line': ['warn', 'multiline'],
+    'react/jsx-handler-names': 'warn',
+    'react/jsx-indent': ['warn', 2],
+    'react/jsx-indent-props': ['warn', 2],
+    'react/jsx-key': 'warn',
+    'react/jsx-max-props-per-line': 'warn',
+    'react/jsx-no-bind': ['warn', {'allowArrowFunctions': true}],
+    'react/jsx-no-comment-textnodes': 'warn',
+    'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
+    'react/jsx-no-undef': 'warn',
+    'react/jsx-pascal-case': ['warn', {
+      allowAllCaps: true,
+      ignore: [],
+    }],
+    'react/jsx-sort-props': 'warn',
+    'react/jsx-tag-spacing': 'warn',
+    'react/jsx-uses-react': 'warn',
+    'react/jsx-uses-vars': 'warn',
+    'react/jsx-wrap-multilines': 'warn',
+    'react/no-deprecated': 'warn',
+    'react/no-did-mount-set-state': 'warn',
+    'react/no-did-update-set-state': 'warn',
+    'react/no-direct-mutation-state': 'warn',
+    'react/no-is-mounted': 'warn',
+    'react/no-unused-prop-types': 'warn',
+    'react/prefer-es6-class': 'warn',
+    'react/prefer-stateless-function': 'warn',
+    'react/prop-types': 'warn',
+    'react/react-in-jsx-scope': 'warn',
+    'react/require-render-return': 'warn',
+    'react/self-closing-comp': 'warn',
+    'react/sort-comp': 'warn',
+    'react/sort-prop-types': 'warn',
+    'react/style-prop-object': 'warn',
+    'react/void-dom-elements-no-children': 'warn',
+// https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
+    'jsx-a11y/aria-role': 'warn',
+    'jsx-a11y/img-has-alt': 'warn',
+    'jsx-a11y/img-redundant-alt': 'warn',
+    'jsx-a11y/no-access-key': 'warn'
+  }
+}

.gitignore

@@ -1,3 +1,6 @@
+.DS_Store
+build
+
 # Logs
 logs
 *.log

.npmignore

@@ -0,0 +1,2 @@
+.babelrc
+lib

lib/helpers/index.js

@@ -0,0 +1,14 @@
+export const polarToCartesian = (centerX, centerY, radius, degrees) => {
+  const radians = degrees * Math.PI / 180.0;
+  return {
+    x: centerX + (radius * Math.cos(radians)),
+    y: centerY + (radius * Math.sin(radians)),
+  };
+};
+
+export const circularArc = (centerX, centerY, minAngle, maxAngle, r) => {
+  var start = polarToCartesian(centerX, centerY, r, maxAngle);
+  var end = polarToCartesian(centerX, centerY, r, minAngle);
+  const largeArcFlag = maxAngle - minAngle <= 180 ? 0 : 1;
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+};

lib/index.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { polarToCartesian, circularArc } from './helpers';
+
+
+export class DraggableArc extends Component {
+  state = {
+    angle: 200,
+  }
+  padding = 10
+  center = {
+    x: this.props.r + this.padding,
+    y: this.props.r + this.padding,
+  }
+  size = 2*(this.props.r + this.padding)
+  render() {
+    const { angle } = this.state;
+    const { x, y } = this.center;
+    const { color, minAngle, maxAngle, r } = this.props;
+    const draggerPosition = polarToCartesian(x, y, r, angle);
+
+    return (
+      <svg style={{ width: this.size, height: this.size }}>
+        <circle
+          cx={draggerPosition.x}
+          cy={draggerPosition.y}
+          fill={color}
+          r={5}
+        />
+
+        {this.props.showLine ? (
+          <line
+            stroke={color}
+            strokeWidth="1"
+            x1={x}
+            x2={draggerPosition.x}
+            y1={y}
+            y2={draggerPosition.y}
+          />
+        ) : null}
+
+        {this.props.showArc ? (
+          <path
+            d={circularArc(x, y, minAngle, maxAngle, r)}
+            fill="transparent"
+            stroke={color}
+          />
+        ) : null}
+      </svg>
+    );
+  }
+}
+
+DraggableArc.propTypes = {
+  color: PropTypes.string,
+  maxAngle: PropTypes.number,
+  minAngle: PropTypes.number,
+  r: PropTypes.number,
+  showArc: PropTypes.bool,
+  showLine: PropTypes.bool,
+};
+
+DraggableArc.defaultProps = {
+  color: "#555",
+  maxAngle: 360,
+  minAngle: 180,
+  r: 100,
+  showArc: true,
+  showLine: true,
+};

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "draggable-arc",
+  "version": "1.0.0",
+  "description": "React component to drag a point along a circular arc",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "babel lib -d build",
+    "build:watch": "babel lib -w -d build",
+    "lint": "eslint lib/**; exit 0",
+    "lint:watch": "esw -w lib/**",
+    "prepublish": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tythe-org/draggable-arc.git"
+  },
+  "keywords": [
+    "react",
+    "arc",
+    "circular",
+    "path",
+    "drag",
+    "draggable"
+  ],
+  "author": {
+    "name": "Dan Kwiatkowski",
+    "email": "[email protected]",
+    "url": "http://tythe.org"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tythe-org/draggable-arc/issues"
+  },
+  "homepage": "https://github.com/tythe-org/draggable-arc#readme",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^4.1.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^7.1.0",
+    "eslint-watch": "^3.1.2",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  }
+}