@pie-element/complex-rubric 2.6.6 → 2.6.8

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor-utils.js

@@ -1,152 +0,0 @@
-import { trigCalculator } from 'trigonometry-calculator';
-import Point from '@mapbox/point-geometry';
-import debug from 'debug';
-import { parse as parseOrigin } from './transform-origin';
-const log = debug('@pie-lib:tools:anchor-utils');
-
-export const toDegrees = (radians) => radians * (180 / Math.PI);
-export const toRadians = (degrees) => degrees * (Math.PI / 180);
-
-export const normalizeAngle = (a) => {
-  if (a > 360) {
-    return a % 360;
-  } else if (a < 0) {
-    return 360 + (a % 360);
-  }
-  return a;
-};
-
-export const toPoint = (rect, edge) => {
-  const out = parseOrigin(rect, edge);
-  return new Point(out.x, out.y);
-};
-
-/**
- * Get the distance between to anchor points in a rect.
- * @param {{width: number, height: number}} rect - the rect
- * @param {number} degrees - the degrees
- * @param {string} from - from anchor
- * @param {string} to - to anchor
- * @returns {Point} point - the distance as a Point
- */
-export const distanceBetween = (rect, degrees, from, to) => {
-  const center = new Point(rect.width / 2, rect.height / 2);
-  const radians = toRadians(degrees);
-  const fromCenter = center.rotateAround(radians, toPoint(rect, from));
-  const toCenter = center.rotateAround(radians, toPoint(rect, to));
-  const diff = fromCenter.sub(toCenter);
-  return diff;
-};
-
-/**
- * For a corner string, a point and a rect, return a relative x,y from that point to a corner.
- * Note that the y value descends as it goes down (unlike for a screen's y value), so this is only really useful for math functions.
- * @example
- * ```
- * getXAndY('top-left', {width: 100, height: 100}, 10, 10) //=> {x:10, y: -90}
- * ```
- * @param {*} corner
- * @param {*} rect
- * @param {*} point
- */
-export const getXAndY = (corner, rect, point) => {
-  if (corner === 'top-left') {
-    const x = point.x * -1;
-    const y = point.y;
-    return { x, y };
-  } else if (corner === 'bottom-left') {
-    const x = point.x * -1;
-    const y = point.y - rect.height;
-    return { x, y };
-  } else if (corner === 'top-right') {
-    const x = rect.width - point.x;
-    const y = point.y;
-    return { x, y };
-  } else if (corner === 'bottom-right') {
-    const x = rect.width - point.x;
-    const y = point.y - rect.height;
-    return { x, y };
-  }
-};
-
-export const arctangent = (x, y) => toDegrees(Math.atan2(x, y));
-
-export const getAngleAndHypotenuse = (corner, rect, point) => {
-  const { x, y } = getXAndY(corner, rect, point);
-  const degrees = arctangent(x, y);
-  const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
-  return { x, y, degrees, hypotenuse };
-};
-
-const getPosition = (side, rect, point, angle, calcAngle) => {
-  if (angle === 0) {
-    return side === 'left' ? point.x : point.y;
-  }
-  const points = anglePoints(angle);
-  const key = points[side];
-
-  const { degrees, hypotenuse } = getAngleAndHypotenuse(key, rect, point);
-
-  const ra = calcAngle(degrees);
-
-  if (ra === 0) {
-    return hypotenuse;
-  }
-
-  const t = {
-    angles: { 0: ra, 1: 90 },
-    sides: { 1: hypotenuse },
-  };
-  const out = trigCalculator(t);
-  return out.sides[2];
-};
-
-export const getTop = (rect, point, angle) => {
-  return getPosition('top', rect, point, angle, (degrees) => {
-    return Math.abs(angle + degrees);
-  });
-};
-
-export const getLeft = (rect, point, angle) => {
-  return getPosition('left', rect, point, angle, (degrees) => {
-    return Math.abs(angle + degrees + 90);
-  });
-};
-
-/**
- * Calculate the position of an anchor within a bounding rect, if the source rect has been rotated by an angle.
- * It does this by finding the appropriate corner of the src rect, that touches the bounding rect, calculates
- * the hypotenuse (h) of that anchor to that point. Then using that plus the rotation it calculates
- * the sides of the triangle and returns the length of the side that touches the bounding rect.
- * @param {{width: number, height: number}} rect - the rect which contains the point
- * @param {{x:number, y: number}} point - the point within the rect
- * @param {number} angle - the angle in degrees that the rect has rotated.
- * @returns {{left: number, top: number}} position
- */
-export const getAnchor = (rect, point, angle) => {
-  log('[getAnchor] rect: ', rect, 'point:', point, 'angle: ', angle);
-  if (point.x > rect.width) {
-    throw new Error(`x: ${point.x} cannot be greater than width: ${rect.width}`);
-  }
-  if (point.y > rect.height) {
-    throw new Error(`y: ${point.y} cannot be greater than height: ${rect.height}`);
-  }
-  const a = normalizeAngle(angle);
-  const top = getTop(rect, point, a);
-  const left = getLeft(rect, point, a);
-
-  log('[getAnchor] top: ', top, 'left: ', left);
-  return { top, left };
-};
-
-const anglePoints = (angle) => {
-  if (angle <= 90) {
-    return { top: 'top-left', left: 'bottom-left' };
-  } else if (angle > 90 && angle <= 180) {
-    return { top: 'bottom-left', left: 'bottom-right' };
-  } else if (angle > 180 && angle <= 270) {
-    return { top: 'bottom-right', left: 'top-right' };
-  } else if (angle > 270 && angle < 360) {
-    return { top: 'top-right', left: 'top-left' };
-  }
-};

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-
-const Anchor = withStyles((theme) => ({
-  anchor: {
-    cursor: 'pointer',
-    width: '20px',
-    height: '20px',
-    position: 'absolute',
-    borderRadius: '10px',
-    backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,
-    transition: 'background-color 200ms ease-in',
-    border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,
-    '&:hover': {
-      backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,
-    },
-  },
-}))(({ classes, className }) => <div className={classNames(classes.anchor, className)} />);
-
-export default Anchor;

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/tools/index.js

@@ -1,6 +0,0 @@
-import Protractor from './protractor';
-import Ruler from './ruler';
-import Rotatable from './rotatable';
-import * as utils from './anchor-utils';
-
-export { Protractor, Ruler, Rotatable, utils };

package/controller/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/controller/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/controller/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/controller/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);