@pie-element/ebsr 9.12.1 → 9.12.2-next.19

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { gridDraggable, types } from '../../../plot';
+import * as utils from '../../utils';
+import classNames from 'classnames';
+import { color } from '../../../render-ui';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { correct, disabled, incorrect } from '../shared/styles';
+
+export const getPointString = (points, scale) => {
+  return (points || [])
+    .map((p) => {
+      const scaledPoint = {
+        x: scale.x(p.x),
+        y: scale.y(p.y),
+      };
+      return `${scaledPoint.x},${scaledPoint.y}`;
+    })
+    .join(' ');
+};
+
+export class RawPolygon extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    points: PropTypes.arrayOf(types.PointType),
+    graphProps: types.GraphPropsType.isRequired,
+    closed: PropTypes.bool.isRequired,
+    correctness: PropTypes.string,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  render() {
+    const { points, classes, className, disabled, correctness, graphProps, closed, ...rest } = this.props;
+    const { scale } = graphProps;
+
+    const pointString = getPointString(points, scale);
+    const Tag = closed ? 'polygon' : 'polyline';
+    return (
+      <Tag
+        points={pointString}
+        className={classNames(
+          closed && classes.closed,
+          !closed && classes.open,
+          disabled && classes.disabled,
+          classes[correctness],
+          className,
+        )}
+        {...rest}
+      />
+    );
+  }
+}
+
+export const Polygon = withStyles((theme) => ({
+  closed: {
+    fill: fade(theme.palette.primary.light, 0.2), // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT,
+  },
+  open: {
+    fill: fade(theme.palette.primary.light, 0.0), // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT,
+    pointerEvents: 'none',
+  },
+  disabled: {
+    ...disabled('stroke'),
+  },
+  correct: {
+    ...correct('stroke'),
+  },
+  incorrect: {
+    ...incorrect('stroke'),
+  },
+}))(RawPolygon);
+
+export default gridDraggable({
+  bounds: (props, { domain, range }) => {
+    const { points } = props;
+    const area = utils.polygonToArea(points);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { points } = props;
+    return points[0];
+  },
+  fromDelta: (props, delta) => {
+    const { points } = props;
+
+    return points.map((p) => utils.point(p).add(utils.point(delta)));
+  },
+})(Polygon);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/ray/component.jsx

@@ -0,0 +1,69 @@
+import { lineToolComponent, lineBase, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ArrowMarker, genUid } from '../shared/arrow-head';
+import { trig, types } from '../../../plot';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+
+const rayStyles = (theme) => ({
+  line: styles.line(theme),
+  enabledArrow: styles.arrow(theme),
+  disabledArrow: styles.disabledArrow(theme),
+  disabled: styles.disabled(theme),
+  correct: styles.correct(theme, 'stroke'),
+  correctArrow: styles.correct(theme),
+  incorrect: styles.incorrect(theme, 'stroke'),
+  incorrectArrow: styles.incorrect(theme),
+  missing: styles.missing(theme, 'stroke'),
+  missingArrow: styles.missing(theme),
+});
+
+export const RayLine = (props) => {
+  const markerId = genUid();
+  const { graphProps, from, to, classes, disabled, correctness, className, ...rest } = props;
+  const { scale } = graphProps;
+  const { domain, range } = getAdjustedGraphLimits(graphProps);
+  const [aToB] = trig.edges(domain, range)(from, to);
+  const suffix = correctness || (disabled && 'disabled') || 'enabled';
+
+  return (
+    <g>
+      <defs>
+        <ArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${props.markerId || markerId}-${suffix}`}
+          className={classNames(classes[`${suffix}Arrow`])}
+        />
+      </defs>
+      <line
+        x1={scale.x(from.x)}
+        y1={scale.y(from.y)}
+        x2={scale.x(aToB.x)}
+        y2={scale.y(aToB.y)}
+        {...rest}
+        className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
+        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
+      />
+    </g>
+  );
+};
+
+RayLine.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+  graphProps: PropTypes.any,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const StyledRay = withStyles(rayStyles)(RayLine);
+
+const Ray = lineBase(StyledRay);
+const Component = lineToolComponent(Ray);
+
+export default Component;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/ray/index.js

@@ -0,0 +1,4 @@
+import Ray from './component';
+import { lineTool } from '../shared/line';
+
+export const tool = lineTool('ray', Ray);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/segment/component.jsx

@@ -0,0 +1,48 @@
+import { lineToolComponent, lineBase, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { types } from '../../../plot';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+const lineStyles = (theme) => ({
+  line: styles.line(theme),
+  disabled: styles.disabled(theme),
+  correct: styles.correct(theme, 'stroke'),
+  incorrect: styles.incorrect(theme, 'stroke'),
+  missing: styles.missing(theme, 'stroke'),
+});
+export const Line = (props) => {
+  const { className, classes, correctness, disabled, graphProps, from, to, ...rest } = props;
+  const { scale } = graphProps;
+
+  return (
+    <line
+      stroke="green"
+      strokeWidth="6"
+      x1={scale.x(from.x)}
+      y1={scale.y(from.y)}
+      x2={scale.x(to.x)}
+      y2={scale.y(to.y)}
+      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
+      {...rest}
+    />
+  );
+};
+
+Line.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: PropTypes.any,
+  from: types.PointType,
+  to: types.PointType,
+};
+
+const StyledLine = withStyles(lineStyles)(Line);
+const Segment = lineBase(StyledLine);
+const Component = lineToolComponent(Segment);
+
+export default Component;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/segment/index.js

@@ -0,0 +1,4 @@
+import Segment from './component';
+import { lineTool } from '../shared/line';
+
+export const tool = lineTool('segment', Segment);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/arrow-head.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const ArrowHead = ({ size, transform, points }) => (
+  <polygon points={points || `0,0 ${size},${size / 2} 0,${size}`} transform={transform} />
+);
+ArrowHead.propTypes = {
+  points: PropTypes.string,
+  size: PropTypes.number,
+  transform: PropTypes.string,
+};
+ArrowHead.defaultProps = {
+  points: '',
+  size: 10,
+  transform: '',
+};
+export const genUid = () => {
+  const v = (Math.random() * 1000).toFixed(0);
+  return `arrow-${v}`;
+};
+export const ArrowMarker = ({ id, size, className }) => {
+  return (
+    <marker
+      id={id}
+      viewBox={`0 0 ${size} ${size}`}
+      refX={size / 2}
+      refY={size / 2}
+      markerWidth={size}
+      markerHeight={size}
+      orient="auto-start-reverse"
+      className={className}
+    >
+      <ArrowHead size={size} />
+    </marker>
+  );
+};
+ArrowMarker.propTypes = {
+  id: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+};
+ArrowMarker.defaultProps = {
+  size: 5,
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/shared/line/index.jsx

@@ -0,0 +1,422 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import { BasePoint } from '../point';
+import { types, utils, gridDraggable, trig } from '../../../../plot';
+import PropTypes from 'prop-types';
+import { disabled, correct, incorrect, missing } from '../styles';
+import ReactDOM from 'react-dom';
+import MarkLabel from '../../../mark-label';
+import isEmpty from 'lodash/isEmpty';
+import { color } from '../../../../render-ui';
+import { getMiddleOfTwoPoints, equalPoints, sameAxes } from '../../../utils';
+
+export const lineTool = (type, Component) => () => ({
+  type,
+  Component,
+  addPoint: (point, mark) => {
+    if (mark && equalPoints(mark.root, point)) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type,
+        building: true,
+        from: point,
+      };
+    }
+
+    if (equalPoints(point, mark.from)) {
+      return { ...mark };
+    }
+
+    return { ...mark, building: false, to: point };
+  },
+});
+
+export const lineToolComponent = (Component) => {
+  return class LineToolComponent extends React.Component {
+    static propTypes = {
+      ...types.ToolPropTypeFields,
+      graphProps: types.GraphPropsType.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
+
+    startDrag = () => this.setState({ mark: { ...this.props.mark } });
+
+    stopDrag = () => {
+      const { onChange, mark } = this.props;
+      const update = { ...this.state.mark };
+
+      this.setState({ mark: undefined }, () => {
+        const { type } = update;
+        let shouldNotChange =
+          type &&
+          (type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') &&
+          sameAxes(update.from, update.to);
+        if (!shouldNotChange && type && type === 'exponential' && update.from && update.to) {
+          shouldNotChange = update.from.y === 0 || update.to.y === 0 || update.from.y * update.to.y < 0;
+        }
+        if (!isEqual(mark, update) && !shouldNotChange) {
+          onChange(mark, update);
+        }
+      });
+    };
+
+    changeMark = ({ from, to, middle }) => {
+      let mark = { ...this.state.mark, from, to };
+
+      if (middle) {
+        mark = { ...mark, middle };
+      }
+
+      this.setState({ mark });
+    };
+
+    changeMarkProps = ({ from, to, middle }) => {
+      const { onChange, mark } = this.props;
+      let update = { ...mark, ...this.state.mark };
+
+      if (from) {
+        update = { ...update, from };
+      }
+
+      if (to) {
+        update = { ...update, to };
+      }
+
+      if (middle) {
+        update = { ...update, middle };
+      }
+
+      if (!isEqual(mark, update)) {
+        onChange(mark, update);
+      }
+    };
+
+    render() {
+      const { graphProps, onClick, labelNode, labelModeEnabled, coordinatesOnHover } = this.props;
+      const mark = this.state.mark ? this.state.mark : this.props.mark;
+
+      const from = cloneDeep(mark.from);
+      const to = cloneDeep(mark.to);
+      const middle = cloneDeep(mark.middle);
+
+      // SET DISABLED
+      // if it's a background mark, we need to force disable it
+      if (from && mark.isBackground) {
+        from.disabled = true;
+      }
+
+      if (to && mark.isBackground) {
+        to.disabled = true;
+      }
+
+      if (middle && mark.isBackground) {
+        middle.disabled = true;
+      }
+
+      return (
+        <Component
+          disabled={mark.disabled}
+          coordinatesOnHover={coordinatesOnHover}
+          correctness={mark.correctness}
+          from={from}
+          to={to}
+          middle={middle}
+          graphProps={graphProps}
+          onChange={this.changeMark}
+          changeMarkProps={this.changeMarkProps}
+          onClick={onClick}
+          onDragStart={this.startDrag}
+          onDragStop={this.stopDrag}
+          labelNode={labelNode}
+          labelModeEnabled={labelModeEnabled}
+        />
+      );
+    }
+  };
+};
+
+const dragOpts = () => ({
+  bounds: (props, { domain, range }) => {
+    const area = utils.lineToArea(props.from, props.to);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    const { from } = props;
+    return from;
+  },
+  fromDelta: (props, delta) => {
+    const { from, to } = props;
+    return {
+      from: utils.point(from).add(utils.point(delta)),
+      to: utils.point(to).add(utils.point(delta)),
+    };
+  },
+});
+
+export const lineBase = (Comp, opts) => {
+  const DraggableComp = gridDraggable(dragOpts())(Comp);
+
+  const FromPoint = opts && opts.from ? opts.from : BasePoint;
+  const ToPoint = opts && opts.to ? opts.to : BasePoint;
+
+  class LineBase extends React.Component {
+    static propTypes = {
+      coordinatesOnHover: PropTypes.bool,
+      graphProps: types.GraphPropsType,
+      from: types.PointType,
+      to: types.PointType,
+      middle: types.PointType,
+      onChange: PropTypes.func,
+      onDragStart: PropTypes.func,
+      onDragStop: PropTypes.func,
+      onClick: PropTypes.func,
+      correctness: PropTypes.string,
+      disabled: PropTypes.bool,
+      labelNode: PropTypes.object,
+      labelModeEnabled: PropTypes.bool,
+      changeMarkProps: PropTypes.func,
+    };
+
+    onChangePoint = (point) => {
+      const { middle, onChange } = this.props;
+      const { from, to } = point;
+
+      // because point.from.label and point.to.label can be different
+      if (!equalPoints(from, to)) {
+        if (middle) {
+          point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };
+        }
+
+        onChange(point);
+      }
+    };
+
+    dragComp = ({ from: draggedFrom, to: draggedTo }) => {
+      const { from, to, onChange, middle } = this.props;
+
+      if (from.label) {
+        draggedFrom.label = from.label;
+      }
+
+      if (to.label) {
+        draggedTo.label = to.label;
+      }
+
+      const updated = { from: draggedFrom, to: draggedTo };
+
+      if (middle) {
+        updated.middle = { ...middle, ...getMiddleOfTwoPoints(draggedFrom, draggedTo) };
+      }
+
+      onChange(updated);
+    };
+
+    dragFrom = (draggedFrom) => {
+      const { from, to } = this.props;
+
+      if (from.label) {
+        draggedFrom.label = from.label;
+      }
+
+      if (!equalPoints(draggedFrom, to)) {
+        this.onChangePoint({ from: draggedFrom, to: to });
+      }
+    };
+
+    dragTo = (draggedTo) => {
+      const { from, to } = this.props;
+
+      if (to.label) {
+        draggedTo.label = to.label;
+      }
+
+      if (!equalPoints(from, draggedTo)) {
+        this.onChangePoint({ from: from, to: draggedTo });
+      }
+    };
+
+    labelChange = (point, type) => {
+      const { changeMarkProps } = this.props;
+      const update = { ...point };
+
+      if (!point.label || isEmpty(point.label)) {
+        delete update.label;
+      }
+
+      changeMarkProps({ [type]: update });
+    };
+
+    clickPoint = (point, type, data) => {
+      const { changeMarkProps, disabled, from, to, labelModeEnabled, onClick } = this.props;
+
+      if (!labelModeEnabled) {
+        onClick(point || data);
+        return;
+      }
+
+      if (disabled) {
+        return;
+      }
+
+      if (type === 'middle' && !point && from && to) {
+        point = { ...point, ...getMiddleOfTwoPoints(from, to) };
+      }
+
+      changeMarkProps({ from, to, [type]: { label: '', ...point } });
+
+      if (this.input[type]) {
+        this.input[type].focus();
+      }
+    };
+
+    // IMPORTANT, do not remove
+    input = {};
+
+    render() {
+      const {
+        coordinatesOnHover,
+        graphProps,
+        onDragStart,
+        onDragStop,
+        from,
+        to,
+        middle,
+        disabled,
+        correctness,
+        onClick,
+        labelNode,
+        labelModeEnabled,
+      } = this.props;
+      const common = { graphProps, onDragStart, onDragStop, disabled, correctness, onClick };
+      const angle = to ? trig.toDegrees(trig.angle(from, to)) : 0;
+
+      let fromLabelNode = null;
+      let toLabelNode = null;
+      let lineLabelNode = null;
+
+      if (labelNode) {
+        if (from && from.hasOwnProperty('label')) {
+          fromLabelNode = ReactDOM.createPortal(
+            <MarkLabel
+              inputRef={(r) => (this.input.from = r)}
+              disabled={!labelModeEnabled}
+              mark={from}
+              graphProps={graphProps}
+              onChange={(label) => this.labelChange({ ...from, label }, 'from')}
+            />,
+            labelNode,
+          );
+        }
+
+        if (to && to.hasOwnProperty('label')) {
+          toLabelNode = ReactDOM.createPortal(
+            <MarkLabel
+              inputRef={(r) => (this.input.to = r)}
+              disabled={!labelModeEnabled}
+              mark={to}
+              graphProps={graphProps}
+              onChange={(label) => this.labelChange({ ...to, label }, 'to')}
+            />,
+            labelNode,
+          );
+        }
+
+        if (middle && middle.hasOwnProperty('label')) {
+          lineLabelNode = ReactDOM.createPortal(
+            <MarkLabel
+              inputRef={(r) => (this.input.middle = r)}
+              disabled={!labelModeEnabled}
+              mark={middle}
+              graphProps={graphProps}
+              onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
+            />,
+            labelNode,
+          );
+        }
+      }
+
+      return (
+        <g>
+          {to && (
+            <DraggableComp
+              from={from}
+              to={to}
+              middle={middle}
+              onDrag={this.dragComp}
+              {...common}
+              onClick={(data) => this.clickPoint(middle, 'middle', data)}
+            />
+          )}
+          {lineLabelNode}
+
+          <FromPoint
+            x={from.x}
+            y={from.y}
+            labelNode={labelNode}
+            coordinatesOnHover={coordinatesOnHover}
+            onDrag={this.dragFrom}
+            {...common}
+            onClick={(data) => this.clickPoint(from, 'from', data)}
+          />
+          {fromLabelNode}
+
+          {to && (
+            <ToPoint
+              x={to.x}
+              y={to.y}
+              angle={angle} //angle + 45}
+              labelNode={labelNode}
+              coordinatesOnHover={coordinatesOnHover}
+              onDrag={this.dragTo}
+              {...common}
+              onClick={(data) => this.clickPoint(to, 'to', data)}
+            />
+          )}
+          {toLabelNode}
+        </g>
+      );
+    }
+  }
+
+  return LineBase;
+};
+
+export const styles = {
+  line: () => ({
+    fill: 'transparent',
+    stroke: color.defaults.PRIMARY_LIGHT,
+    strokeWidth: 3,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+    '&:hover': {
+      strokeWidth: 6,
+      stroke: color.defaults.PRIMARY_DARK,
+    },
+  }),
+  arrow: () => ({
+    fill: color.defaults.SECONDARY,
+  }),
+  disabledArrow: () => ({
+    ...disabled(),
+  }),
+  disabled: () => ({
+    ...disabled('stroke'),
+    strokeWidth: 2,
+  }),
+  correct: (theme, key) => ({
+    ...correct(key),
+  }),
+  incorrect: (theme, key) => ({
+    ...incorrect(key),
+  }),
+  missing: (theme, key) => ({
+    ...missing(key),
+  }),
+};