@pie-element/ebsr 9.12.1-next.9 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor-utils.js

@@ -0,0 +1,152 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor.jsx

@@ -0,0 +1,21 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/index.js

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

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/protractor/graphic.jsx

@@ -0,0 +1,87 @@
+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/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/protractor/index.jsx

@@ -0,0 +1,65 @@
+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/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/rotatable.jsx

@@ -0,0 +1,295 @@
+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/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/tools/ruler/graphic.jsx

@@ -0,0 +1,51 @@
+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);