@pie-element/complex-rubric 1.12.2-next.8 → 1.12.2

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/protractor/graphic.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import range from 'lodash/range';
-import PropTypes from 'prop-types';
-import { strokeColor, noSelect } from '../style-utils';
-
-const Line = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes, major, minor }) => (
-  <line
-    transform={`rotate(${angle}, 50.5,50)`}
-    className={classes.line}
-    style={{}}
-    x1="1"
-    x2={major ? 10 : minor ? 6 : 3}
-    y1="50"
-    y2="50"
-  />
-));
-
-const Spike = withStyles((theme) => ({
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-}))(({ angle, classes }) => (
-  <line transform={`rotate(${angle}, 50.5,50)`} className={classes.line} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
-));
-
-const Text = withStyles((theme) => ({
-  text: {
-    fontSize: '2.5px',
-    textAnchor: 'middle',
-    fill: strokeColor(theme),
-    ...noSelect(),
-  },
-}))(({ angle, classes }) => (
-  <text transform={`rotate(${angle - 90}, 50.5, 50)`} className={classes.text} x="50" y="12.5">
-    {angle}
-  </text>
-));
-
-export class Graphic extends React.PureComponent {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { classes } = this.props;
-    return (
-      <svg viewBox="0 0 102 61">
-        <path className={classes.path} d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
-        {range(0, 181).map((r) => (
-          <Line minor={r % 5 === 0} major={r % 10 === 0} angle={r} key={r} />
-        ))}
-        {range(0, 181, 10).map((r) => (
-          <React.Fragment key={r}>
-            <Spike angle={r} />
-            <Text angle={r} />
-          </React.Fragment>
-        ))}
-        <circle r="4" cx="50.5" cy="50" className={classes.circle} />
-        <line className={classes.line} x1="48.5" x2="52.5" y1="50" y2="50" />
-        <line className={classes.line} transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
-      </svg>
-    );
-  }
-}
-
-export default withStyles((theme) => ({
-  path: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  line: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-  },
-  circle: {
-    strokeWidth: '0.2',
-    stroke: strokeColor(theme),
-    fill: 'none',
-  },
-}))(Graphic);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/protractor/index.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-import Graphic from './graphic';
-import Anchor from '../anchor';
-import Rotatable from '../rotatable';
-import classNames from 'classnames';
-
-export class Protractor extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired,
-    className: PropTypes.string,
-    startPosition: PropTypes.shape({
-      left: PropTypes.number,
-      top: PropTypes.number,
-    }),
-  };
-
-  static defaultProps = {
-    width: 450,
-    startPosition: { left: 0, top: 0 },
-  };
-
-  render() {
-    const { classes, width, className, startPosition } = this.props;
-    return (
-      <Rotatable
-        className={className}
-        startPosition={startPosition}
-        handle={[
-          {
-            class: 'leftAnchor',
-            origin: `${width * 0.495}px ${width * 0.49}px`,
-          },
-          {
-            class: 'rightAnchor',
-            origin: `${width * 0.495}px ${width * 0.49}px`,
-          },
-        ]}
-      >
-        <div className={classes.protractor} style={{ width: `${width}px` }}>
-          <Graphic />
-
-          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />
-          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />
-        </div>
-      </Rotatable>
-    );
-  }
-}
-
-export default withStyles(() => ({
-  protractor: { position: 'relative' },
-  leftAnchor: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-  },
-  rightAnchor: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-  },
-}))(Protractor);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/rotatable.jsx

@@ -1,295 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { getAnchor as calcAnchor, distanceBetween, arctangent } from './anchor-utils';
-import { Portal } from 'react-portal';
-import Point from '@mapbox/point-geometry';
-import { parse as parseOrigin } from './transform-origin';
-import classNames from 'classnames';
-
-const Anchor = withStyles({
-  anchor: {
-    position: 'absolute',
-    zIndex: 100,
-    width: '200px',
-    height: '80px',
-  },
-})(({ classes, left, top, color, fill }) => {
-  color = color || 'green';
-  fill = fill || 'white';
-  return (
-    <Portal>
-      <svg
-        className={classes.anchor}
-        style={{
-          left: left - 10,
-          top: top - 10,
-        }}
-      >
-        <circle cx={10} cy={10} r={8} strokeWidth={1} stroke={color} fill={fill} />
-      </svg>
-    </Portal>
-  );
-});
-
-/**
- * Tip o' the hat to:
- * https://bl.ocks.org/joyrexus/7207044
- */
-export class Rotatable extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    showAnchor: PropTypes.bool,
-    handle: PropTypes.arrayOf(
-      PropTypes.shape({
-        class: PropTypes.string.isRequired,
-        origin: PropTypes.string,
-      }),
-    ),
-    className: PropTypes.string,
-    startPosition: PropTypes.shape({
-      left: PropTypes.number,
-      top: PropTypes.number,
-    }),
-  };
-
-  static defaultProps = {
-    showAnchor: false,
-    startPosition: { left: 0, top: 0 },
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isRotating: false,
-      rotation: 0,
-      startAngle: 0,
-      angle: 0,
-      position: {
-        left: props.startPosition.left,
-        top: props.startPosition.top,
-      },
-    };
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.rotateStop);
-    document.removeEventListener('mousemove', this.drag);
-    document.removeEventListener('mousemove', this.rotate);
-
-    this.handles.forEach((h) => {
-      h.el.removeEventListener('mousedown', h.mousedownHandler);
-      h.el.removeEventListener('mouseup', this.rotateStop);
-    });
-  }
-
-  componentDidMount() {
-    this.addMouseUpHandler();
-    this.initHandles();
-  }
-
-  initHandles = () => {
-    const { handle } = this.props;
-
-    if (Array.isArray(handle)) {
-      this.handles = [];
-      handle.forEach((h) => {
-        const el = this.rotatable.querySelector(`.${h.class}`);
-
-        if (el) {
-          const mousedownHandler = this.rotateStart(h.origin);
-          el.addEventListener('mousedown', mousedownHandler);
-          el.addEventListener('mouseup', this.rotateStop);
-          this.handles.push({ el, mousedownHandler });
-        }
-      });
-    }
-  };
-
-  addMouseUpHandler = () => {
-    document.addEventListener('mouseup', this.rotateStop);
-  };
-
-  originToXY = (origin) => {
-    const { clientWidth: width, clientHeight: height } = this.rotatable;
-    return parseOrigin({ width, height }, origin);
-  };
-
-  /**
-   * Get the anchor point for the given element, origin and rotation.
-   * @returns {{left:number, top: number}} - the co-ordinates of the anchor point relative to the whole page.
-   */
-  getAnchor = (origin) => {
-    const { rotation } = this.state;
-    const { clientWidth, clientHeight } = this.rotatable;
-    const { top, left } = this.rotatable.getBoundingClientRect();
-    const xy = this.originToXY(origin);
-    const { top: anchorTop, left: anchorLeft } = calcAnchor(
-      {
-        width: clientWidth,
-        height: clientHeight,
-      },
-      xy,
-      rotation,
-    );
-
-    return {
-      top: top + anchorTop,
-      left: left + anchorLeft,
-    };
-  };
-
-  rotateStart = (origin) => (e) => {
-    const { isRotating } = this.state;
-    if (isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    const anchor = this.getAnchor(origin);
-    const { rotation } = this.state;
-    const { angle: startAngle } = this.getAngle(anchor, e);
-
-    let diff = { x: 0, y: 0 };
-    if (origin !== this.state.origin) {
-      const { clientWidth: width, clientHeight: height } = this.rotatable;
-      diff = distanceBetween({ width, height }, rotation, this.state.origin, origin);
-    }
-
-    this.setState(
-      {
-        origin,
-        isRotating: true,
-        startAngle,
-        anchor,
-        position: {
-          left: this.state.position.left + diff.x,
-          top: this.state.position.top + diff.y,
-        },
-      },
-      () => {
-        document.addEventListener('mousemove', this.rotate);
-      },
-    );
-  };
-
-  rotateStop = (e) => {
-    const { isRotating } = this.state;
-
-    if (!isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    this.setState(
-      {
-        isRotating: false,
-        angle: this.state.rotation,
-        anchor: null,
-        current: null,
-      },
-      () => {
-        document.removeEventListener('mousemove', this.rotate);
-        document.removeEventListener('mousemove', this.drag);
-      },
-    );
-  };
-
-  getAngle(anchor, e) {
-    const x = e.clientX - anchor.left;
-    const y = (e.clientY - anchor.top) * -1;
-    return { angle: arctangent(x, y), x, y };
-  }
-
-  rotate = (e) => {
-    const { isRotating } = this.state;
-    if (!isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    const { startAngle, angle, anchor } = this.state;
-    const { angle: current, x, y } = this.getAngle(anchor, e);
-    const computedAnchor = { x, y };
-    const diff = current - startAngle;
-    const rotation = angle + diff;
-    this.setState({ rotation, diff, current, computedAnchor });
-  };
-
-  mouseDown = (e) => {
-    const handle = this.handles.find((h) => h.el === e.target);
-
-    if (!handle) {
-      this.dragStart(e);
-    }
-  };
-
-  dragStart = (e) => {
-    const dragPoint = new Point(e.pageX, e.pageY);
-    this.setState({ dragPoint }, () => {
-      document.addEventListener('mousemove', this.drag);
-    });
-  };
-
-  drag = (e) => {
-    e.preventDefault();
-    const current = new Point(e.pageX, e.pageY);
-    const translate = current.sub(this.state.dragPoint);
-    this.setState({ translate });
-  };
-
-  mouseUp = () => {
-    if (!this.state.translate) {
-      return;
-    }
-
-    const { position: lastPosition, translate } = this.state;
-
-    const position = {
-      left: lastPosition.left + translate.x,
-      top: lastPosition.top + translate.y,
-    };
-
-    document.removeEventListener('mousemove', this.drag);
-    this.setState({ position, dragPoint: null, translate: null });
-  };
-
-  render() {
-    const { children, classes, showAnchor, className } = this.props;
-    const { rotation, anchor, origin, translate, position } = this.state;
-
-    const t = translate ? `translate(${translate.x}px, ${translate.y}px)` : '';
-
-    const style = {
-      left: position.left,
-      top: position.top,
-      transformOrigin: origin,
-      transform: `${t} rotate(${rotation}deg)`,
-    };
-
-    return (
-      <div
-        className={classNames(classes.rotatable, className)}
-        style={style}
-        ref={(r) => (this.rotatable = r)}
-        onMouseDown={this.mouseDown}
-        onMouseUp={this.mouseUp}
-      >
-        {anchor && showAnchor && <Anchor {...anchor} />}
-        {children}
-      </div>
-    );
-  }
-}
-
-export default withStyles({
-  rotatable: {
-    position: 'relative',
-    display: 'inline-block',
-    cursor: 'move',
-  },
-})(Rotatable);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/ruler/graphic.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import UnitType from './unit-type';
-import range from 'lodash/range';
-import Unit from './unit';
-import { strokeColor, fillColor } from '../style-utils';
-
-const Bg = ({ width, height, className }) => <rect width={width} height={height} cx={0} cy={0} className={className} />;
-
-Bg.propTypes = {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  className: PropTypes.string.isRequired,
-};
-
-export class Graphic extends React.PureComponent {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    units: PropTypes.number.isRequired,
-    unit: PropTypes.object.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { width, height, classes, units, unit } = this.props;
-    const viewBox = `0 0 ${width} ${height}`;
-    const unitWidth = width / units;
-    const unitHeight = height;
-
-    return (
-      <svg viewBox={viewBox}>
-        <Bg width={width} height={height} className={classes.bg} />
-        <UnitType label={unit.type} />
-        {range(1, units + 1).map((r) => (
-          <Unit width={unitWidth} height={unitHeight} key={r} index={r} config={unit} last={r === units} />
-        ))}
-      </svg>
-    );
-  }
-}
-const styles = (theme) => ({
-  bg: {
-    stroke: strokeColor(theme),
-    strokeWidth: '2px',
-    fill: fillColor(theme),
-  },
-});
-
-export default withStyles(styles)(Graphic);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/ruler/index.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Rotatable from '../rotatable';
-import classNames from 'classnames';
-import RulerGraphic from './graphic';
-import PropTypes from 'prop-types';
-import Anchor from '../anchor';
-
-export class Ruler extends React.Component {
-  static propTypes = {
-    width: PropTypes.number,
-    height: PropTypes.number,
-    units: PropTypes.number.isRequired,
-    measure: PropTypes.oneOf(['imperial', 'metric']).isRequired,
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    startPosition: PropTypes.shape({
-      left: PropTypes.number.isRequired,
-      top: PropTypes.number.isRequired,
-    }),
-    label: PropTypes.string,
-    tickCount: PropTypes.number,
-  };
-
-  static defaultProps = {
-    width: 480,
-    height: 60,
-    measure: 'imperial',
-    units: 12,
-  };
-
-  render() {
-    const { classes, width, height, units, measure, className, startPosition, label, tickCount } = this.props;
-
-    const unit =
-      measure === 'imperial'
-        ? {
-            type: label,
-            ticks: tickCount && tickCount % 4 === 0 ? tickCount : 16,
-          }
-        : {
-            type: label,
-            ticks: 10,
-          };
-    return (
-      <Rotatable
-        className={className}
-        startPosition={startPosition}
-        handle={[
-          { class: 'leftAnchor', origin: 'bottom right' },
-          { class: 'rightAnchor', origin: 'bottom left' },
-        ]}
-      >
-        <div className={classes.ruler} style={{ width: `${width}px`, height: `${height}px` }}>
-          <RulerGraphic width={width} height={height} units={units} unit={unit} />
-          <Anchor className={classNames('leftAnchor', classes.leftAnchor)} />
-          <Anchor className={classNames('rightAnchor', classes.rightAnchor)} />
-        </div>
-      </Rotatable>
-    );
-  }
-}
-const styles = (theme) => ({
-  ruler: {
-    cursor: 'move',
-    position: 'relative',
-    backgroundColor: theme.palette.secondary.light,
-    opacity: 1.0,
-    border: `solid 0px ${theme.palette.primary.main}`,
-  },
-  leftAnchor: {
-    left: '-10px',
-    top: '40%',
-  },
-  rightAnchor: {
-    right: '-10px',
-    top: '40%',
-  },
-});
-
-export default withStyles(styles)(Ruler);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/ruler/unit-type.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { noSelect, strokeColor } from '../style-utils';
-import { withStyles } from '@material-ui/core/styles';
-
-export const UnitType = (props) => {
-  const { classes, label, x, y, textAlign, fill, fontSize, stroke } = props;
-
-  return (
-    <text
-      className={classes.unitType}
-      x={x}
-      y={y}
-      textAnchor={textAlign}
-      stroke={stroke}
-      fill={fill}
-      fontSize={fontSize}
-    >
-      {label}
-    </text>
-  );
-};
-
-UnitType.propTypes = {
-  classes: PropTypes.object.isRequired,
-  label: PropTypes.string.isRequired,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  textAlign: PropTypes.string,
-  fill: PropTypes.string,
-  fontSize: PropTypes.number,
-  stroke: PropTypes.string,
-};
-
-UnitType.defaultProps = {
-  textAnchor: 'start',
-  fontSize: 11,
-  stroke: 'none',
-  x: 8,
-  y: 14,
-};
-
-export default withStyles((theme) => ({
-  unitType: { ...noSelect(), fill: strokeColor(theme) },
-}))(UnitType);

package/configure/node_modules/@pie-element/multi-trait-rubric/node_modules/@pie-lib/pie-toolbox/src/code/tools/ruler/unit.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { noSelect, strokeColor } from '../style-utils';
-import range from 'lodash/range';
-
-const Tick = withStyles((theme) => ({
-  tick: {
-    stroke: strokeColor(theme),
-  },
-}))(({ x, height, bottom, classes, major, minor }) => {
-  const y1 = major ? bottom - height * 2 : minor ? bottom - height * 1.5 : bottom - height;
-
-  return <line y1={y1} y2={bottom} x1={x} x2={x} className={classes.tick} />;
-});
-
-const Ticks = ({ count, width, height }) => {
-  return (
-    <React.Fragment>
-      {range(1, count).map((r) => {
-        return (
-          <Tick
-            key={r}
-            value={r}
-            x={r * (width / count)}
-            major={r % (count / 2) === 0}
-            minor={r % (count / 4) === 0}
-            bottom={height}
-            height={10}
-          />
-        );
-      })}
-    </React.Fragment>
-  );
-};
-
-Ticks.propTypes = {
-  count: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
-
-export class Unit extends React.Component {
-  static propTypes = {
-    index: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    classes: PropTypes.object.isRequired,
-    last: PropTypes.bool.isRequired,
-    config: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { index, width, height, classes, last, config } = this.props;
-
-    const style = {
-      transform: `translate(${width * (index - 1)}px, 0px)`,
-    };
-    return (
-      <g style={style}>
-        {!last && <line x1={width} y1={0} x2={width} y2={height} className={classes.endTick} />}
-
-        <Ticks count={config.ticks} width={width} height={height} />
-        <text width={width} className={classes.label} x={width - 5} y={15}>
-          {index}
-        </text>
-      </g>
-    );
-  }
-}
-
-export default withStyles((theme) => ({
-  endTick: {
-    stroke: strokeColor(theme),
-    strokeWidth: 1,
-  },
-  label: {
-    textAnchor: 'end',
-    fontSize: '12px',
-    fill: strokeColor(theme),
-    ...noSelect(),
-  },
-  base: {
-    fill: 'none',
-    stroke: 'red',
-  },
-}))(Unit);