@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/plot/label.jsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { color, Readable } from '../../render-ui';
+import cn from 'classnames';
+import EditableHtml from '../editable-html';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+const LabelComponent = (props) => {
+  const {
+    classes,
+    disabledLabel,
+    graphHeight,
+    graphWidth,
+    isChartBottomLabel,
+    isDefineChartBottomLabel,
+    isChartLeftLabel,
+    isDefineChartLeftLabel,
+    placeholder,
+    text,
+    side,
+    onChange,
+    mathMlOptions = {},
+    charactersLimit,
+  } = props;
+  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
+  const activePlugins = [
+    'bold',
+    'italic',
+    'underline',
+    'strikethrough',
+    'math',
+    // 'languageCharacters'
+  ];
+
+  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
+
+  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
+  const defaultStyle = {
+    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
+    top:
+      chartValue ||
+      (isChartLeftLabel && `${graphHeight - 70}px`) ||
+      (side === 'left' && `${graphHeight - 8}px`) ||
+      (isChartBottomLabel && `${graphHeight - 30}px`) ||
+      (side === 'bottom' && `${graphHeight - 90}px`) ||
+      0,
+    left:
+      (side === 'right' && `${graphWidth - 8}px`) ||
+      ((isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px') ||
+      (isChartBottomLabel && '-10px') ||
+      0,
+  };
+
+  const rotatedStyle = {
+    width: graphWidth - 8,
+    top: (side === 'right' && `${graphHeight - 22}px`) || 0,
+    left: 0,
+  };
+
+  const rotateLabel = () => !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
+
+  return (
+    <Readable false>
+      <div
+        className={cn(isChart ? classes.chartLabel : classes.axisLabel, {
+          [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
+          [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
+          [classes.editLabel]: rotatedToHorizontal,
+          [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
+        })}
+        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
+        onClick={rotateLabel}
+      >
+        {disabledLabel ? (
+          <div className={classes.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />
+        ) : (
+          <EditableHtml
+            markup={text || ''}
+            onChange={onChange}
+            placeholder={!disabledLabel && placeholder}
+            toolbarOpts={{
+              position: side === 'bottom' ? 'top' : 'bottom',
+              noBorder: true,
+            }}
+            disableScrollbar
+            activePlugins={activePlugins}
+            onDone={() => setRotatedToHorizontal(false)}
+            mathMlOptions={mathMlOptions}
+            charactersLimit={charactersLimit}
+          />
+        )}
+      </div>
+    </Readable>
+  );
+};
+LabelComponent.propTypes = {
+  classes: PropTypes.object,
+  disabledLabel: PropTypes.bool,
+  graphHeight: PropTypes.number,
+  graphWidth: PropTypes.number,
+  isChartBottomLabel: PropTypes.bool,
+  isDefineChartBottomLabel: PropTypes.bool,
+  isChartLeftLabel: PropTypes.bool,
+  isDefineChartLeftLabel: PropTypes.bool,
+  placeholder: PropTypes.string,
+  text: PropTypes.string,
+  side: PropTypes.string,
+  onChange: PropTypes.func,
+  mathMlOptions: PropTypes.object,
+  charactersLimit: PropTypes.number,
+};
+
+export default withStyles((theme) => ({
+  label: {
+    fill: color.secondary(),
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 0`,
+  },
+  chartLabel: {
+    fontSize: theme.typography.fontSize + 2,
+    textAlign: 'center',
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 0`,
+  },
+  disabledLabel: {
+    pointerEvents: 'none',
+    width: '100%',
+  },
+  editLabel: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    borderRadius: '4px',
+    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
+    zIndex: 10,
+  },
+  rotateLeftLabel: {
+    '-webkit-transform': 'rotate(-90deg)',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute',
+  },
+  rotateRightLabel: {
+    '-webkit-transform': 'rotate(90deg)',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute',
+  },
+  customBottom: {
+    position: 'absolute',
+  },
+}))(LabelComponent);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/plot/root.jsx

@@ -0,0 +1,344 @@
+import React from 'react';
+import { ChildrenType } from './types';
+import { withStyles } from '@material-ui/core/styles';
+import { select, mouse } from 'd3-selection';
+import PropTypes from 'prop-types';
+import { GraphPropsType } from './types';
+import { color, Readable } from '../render-ui';
+import EditableHtml from '../editable-html';
+import cn from 'classnames';
+import Label from './label';
+
+export class Root extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    children: ChildrenType,
+    defineChart: PropTypes.bool,
+    disabledLabels: PropTypes.bool,
+    disabledTitle: PropTypes.bool,
+    graphProps: GraphPropsType.isRequired,
+    isChart: PropTypes.bool,
+    labels: PropTypes.object,
+    labelsPlaceholders: PropTypes.object,
+    onChangeTitle: PropTypes.func,
+    onMouseMove: PropTypes.func,
+    classes: PropTypes.object.isRequired,
+    showLabels: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    showPixelGuides: PropTypes.bool,
+    rootRef: PropTypes.func,
+    onChangeLabels: PropTypes.func,
+    titlePlaceholder: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
+  };
+
+  mouseMove = (g) => {
+    const { graphProps, onMouseMove } = this.props;
+
+    if (!onMouseMove) {
+      return;
+    }
+
+    const { scale, snap } = graphProps;
+    const coords = mouse(g._groups[0][0]);
+    const x = scale.x.invert(coords[0]);
+    const y = scale.y.invert(coords[1]);
+
+    const snapped = {
+      x: snap.x(x),
+      y: snap.y(y),
+    };
+
+    onMouseMove(snapped);
+  };
+
+  componentDidMount() {
+    const g = select(this.g);
+    g.on('mousemove', this.mouseMove.bind(this, g));
+  }
+
+  componentWillUnmount() {
+    const g = select(this.g);
+    g.on('mousemove', null);
+  }
+
+  onChangeLabel = (newValue, side) => {
+    const { labels, onChangeLabels, isChart } = this.props;
+
+    if (isChart) {
+      if (side === 'left') {
+        onChangeLabels('range', newValue);
+      } else {
+        onChangeLabels('domain', newValue);
+      }
+
+      return;
+    }
+
+    onChangeLabels({
+      ...labels,
+      [side]: newValue,
+    });
+  };
+
+  render() {
+    const {
+      disabledTitle,
+      disabledLabels,
+      labels,
+      labelsPlaceholders,
+      titlePlaceholder,
+      graphProps,
+      children,
+      classes,
+      defineChart,
+      onChangeTitle,
+      isChart,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      rootRef,
+      mathMlOptions = {},
+      labelsCharactersLimit,
+    } = this.props;
+    const {
+      size: { width = 500, height = 500 },
+      domain,
+      range,
+    } = graphProps;
+
+    const topPadding = 40;
+    const leftPadding = showLabels ? 80 : 60;
+    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
+
+    const activeTitlePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'math',
+      // 'languageCharacters'
+    ];
+
+    const actualHeight = defineChart && showPixelGuides ? height - 160 : height;
+    const nbOfVerticalLines = parseInt(width / 100);
+    const nbOfHorizontalLines = parseInt(actualHeight / 100);
+    const sideGridlinesPadding = parseInt(actualHeight % 100);
+
+    return (
+      <div className={classes.root}>
+        {showPixelGuides && (
+          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 80 : showLabels ? 30 : 10 }}>
+            {[...Array(nbOfVerticalLines + 1).keys()].map((value) => (
+              <Readable false key={`top-guide-${value}`}>
+                <div className={classes.topPixelIndicator}>
+                  <div>{value * 100}px</div>
+                  <div>|</div>
+                </div>
+              </Readable>
+            ))}
+          </div>
+        )}
+        {showTitle &&
+          (disabledTitle ? (
+            <div
+              style={
+                isChart && {
+                  width: finalWidth,
+                }
+              }
+              className={cn(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle)}
+              dangerouslySetInnerHTML={{ __html: title || '' }}
+            />
+          ) : (
+            <EditableHtml
+              style={
+                isChart && {
+                  width: finalWidth,
+                }
+              }
+              className={cn(
+                { [classes.rightMargin]: showPixelGuides },
+                isChart ? classes.chartTitle : classes.graphTitle,
+              )}
+              markup={title || ''}
+              onChange={onChangeTitle}
+              placeholder={
+                (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
+              }
+              toolbarOpts={{ noBorder: true }}
+              activePlugins={activeTitlePlugins}
+              disableScrollbar
+            />
+          ))}
+        {showLabels && !isChart && (
+          <Label
+            side="top"
+            text={labels.top}
+            disabledLabel={disabledLabels}
+            placeholder={labelsPlaceholders?.top}
+            graphHeight={finalHeight}
+            graphWidth={finalWidth}
+            onChange={(value) => this.onChangeLabel(value, 'top')}
+            mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
+          />
+        )}
+        <div className={classes.wrapper}>
+          {showLabels && (
+            <Label
+              side="left"
+              text={labels.left}
+              disabledLabel={disabledLabels}
+              placeholder={labelsPlaceholders?.left}
+              graphHeight={finalHeight}
+              graphWidth={finalWidth}
+              isChartLeftLabel={isChart && !defineChart}
+              isDefineChartLeftLabel={isChart && defineChart}
+              onChange={(value) => this.onChangeLabel(value, 'left')}
+              mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
+            />
+          )}
+          <svg width={finalWidth} height={finalHeight} className={defineChart ? classes.defineChart : classes.chart}>
+            <g
+              ref={(r) => {
+                this.g = r;
+                if (rootRef) {
+                  rootRef(r);
+                }
+              }}
+              className={classes.graphBox}
+              transform={`translate(${leftPadding}, ${topPadding})`}
+            >
+              {children}
+            </g>
+          </svg>
+          {showLabels && !isChart && (
+            <Label
+              side="right"
+              text={labels.right}
+              disabledLabel={disabledLabels}
+              placeholder={labelsPlaceholders?.right}
+              graphHeight={finalHeight}
+              graphWidth={finalWidth}
+              onChange={(value) => this.onChangeLabel(value, 'right')}
+              mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
+            />
+          )}
+          {showPixelGuides && (
+            <div
+              className={classes.sidePixelGuides}
+              style={{
+                paddingTop: sideGridlinesPadding,
+                marginTop: 31,
+              }}
+            >
+              {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map((value) => (
+                <Readable false key={`top-guide-${value}`}>
+                  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
+                </Readable>
+              ))}
+            </div>
+          )}
+        </div>
+        {showLabels && (
+          <Label
+            side="bottom"
+            text={labels.bottom}
+            disabledLabel={disabledLabels}
+            placeholder={labelsPlaceholders?.bottom}
+            graphHeight={finalHeight}
+            graphWidth={finalWidth}
+            isChartBottomLabel={isChart && !defineChart}
+            isDefineChartBottomLabel={isChart && defineChart}
+            onChange={(value) => this.onChangeLabel(value, 'bottom')}
+            mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+// use default color theme style to avoid color contrast issues
+const styles = (theme) => ({
+  root: {
+    border: `solid 1px ${color.primaryLight()}`,
+    color: color.defaults.TEXT,
+    backgroundColor: theme.palette.common.white,
+    touchAction: 'none',
+    position: 'relative',
+  },
+  wrapper: {
+    display: 'flex',
+    position: 'relative',
+  },
+  svg: {},
+  defineChart: {
+    paddingLeft: '50px',
+    overflow: 'visible',
+  },
+  chart: {
+    overflow: 'visible',
+  },
+  graphBox: {
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+  graphTitle: {
+    color: color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 2,
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
+    textAlign: 'center',
+  },
+  chartTitle: {
+    color: color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 4,
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
+    textAlign: 'center',
+  },
+  disabledTitle: {
+    pointerEvents: 'none',
+  },
+  rightMargin: {
+    marginRight: '74px',
+  },
+  topPixelGuides: {
+    display: 'flex',
+    paddingTop: '6px',
+  },
+  topPixelIndicator: {
+    color: color.defaults.PRIMARY_LIGHT,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+  sidePixelGuides: {
+    width: '70px',
+    display: 'flex',
+    flexDirection: 'column',
+    marginRight: '6px',
+  },
+  sidePixelIndicator: {
+    color: color.defaults.PRIMARY_LIGHT,
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    '&:not(:last-child)': {
+      marginBottom: '80px',
+    },
+  },
+});
+
+export default withStyles(styles)(Root);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/plot/trig.js

@@ -0,0 +1,150 @@
+import { xy } from './utils';
+import Point from '@mapbox/point-geometry';
+import debug from 'debug';
+const log = debug('pie-lib:plot:trig');
+
+export const toDegrees = (radians) => radians * (180 / Math.PI);
+export const toRadians = (degrees) => degrees * (Math.PI / 180);
+/**
+ * return angle in radians between 2 points using counting degrees counter clockwise
+ *
+ * 0,0 + 1,1 = 45 in radians
+ * 1,1 + 0,0 = 45?
+ * @param {Point} a
+ * @param {Point} b
+ */
+export const angle = (a, b) => {
+  const vd = b.y - a.y;
+  const hd = b.x - a.x;
+  log(a, b, 'vd: ', vd, 'hd: ', hd);
+  const radians = Math.atan2(vd, hd);
+  return radians < 0 ? radians + Math.PI * 2 : radians;
+};
+
+const NINETY = Math.PI / 2;
+const ONE_EIGHTY = Math.PI;
+const TWO_SEVENTY = ONE_EIGHTY + NINETY;
+
+export const acuteXAngle = (a) => {
+  log(toDegrees(a));
+
+  if (a < NINETY) {
+    return a;
+  }
+
+  if (a < ONE_EIGHTY) {
+    return Math.abs(ONE_EIGHTY - a);
+  }
+
+  if (a < TWO_SEVENTY) {
+    return Math.abs(ONE_EIGHTY - a);
+  }
+
+  return Math.abs(Math.PI * 2 - a);
+};
+
+export const acuteYAngle = (a) => NINETY - acuteXAngle(a);
+
+export const hypotenuse = (a, alpha) => {
+  const out = Math.abs(a / Math.sin(alpha));
+
+  return out;
+};
+
+/**
+ * return 2 edge points for a,b within domain + range.
+ * - one edge is from following a -> b to the bounds
+ * - one edge is from following b -> a to the bounds
+ * @param {{min: number, max: number}} domain
+ * @param {{min: number, max: number}} range
+ * @param {{x: number, y: number}} a
+ * @param {{x: number, y: number}} b
+ * @returns [{x: number, y: number}, {x: number, y: number}]
+ */
+export const edges = (domain, range) => (a, b) => {
+  // const xDest =
+  const destX = a.x < b.x ? domain.max : domain.min;
+  const destY = a.y < b.y ? range.max : range.min;
+  const aToB = diffEdge(xy(destX, destY), a, b);
+
+  const dX = b.x < a.x ? domain.max : domain.min;
+  const dY = b.y < a.y ? range.max : range.min;
+  const bToA = diffEdge(xy(dX, dY), b, a);
+  return [aToB, bToA];
+};
+
+/** get length of side A of a triangle from H and angle Alpha */
+export const getOpposingSide = (hyp, angle) => {
+  log('[getOpposingSide] hyp: ', hyp, 'angle:', angle);
+  return Math.abs(hyp * Math.sin(angle));
+};
+
+const getShortestSide = (xh, yh) => {
+  if (Number.isFinite(xh) && Number.isFinite(yh)) {
+    if (xh === 0 && yh > 0) {
+      return 'y';
+    }
+    if (yh === 0 && xh > 0) {
+      return 'x';
+    }
+    return xh < yh ? 'x' : 'y';
+  }
+  if (isNaN(xh) && !isNaN(yh)) {
+    return 'y';
+  }
+  if (!isNaN(xh) && isNaN(yh)) {
+    return 'x';
+  }
+  if (xh === Infinity) {
+    return 'y';
+  }
+  if (yh === Infinity) {
+    return 'x';
+  }
+
+  // eslint-disable-next-line no-console
+  console.warn('hypotenuse - which is shorter? x:', xh, 'y:', yh);
+};
+/**
+ * return the difference between bounds and a as a Point
+ * @param {*} bounds
+ */
+export const diffEdge = (bounds, a, b) => {
+  let l = log.enabled ? log.bind(log, `diffEdge: [${a.x},${a.y} -> ${b.x},${b.y}]`) : () => {};
+  const xRadians = angle(a, b);
+  l('x angle', toDegrees(xRadians));
+  const yRadians = Math.abs(xRadians - toRadians(90));
+  l('y angle', toDegrees(yRadians));
+  const xSide = Math.abs(a.x - bounds.x);
+
+  /**
+   * Draw 2 triangles:
+   * 1 with a horizontal line from a to the graph x edge
+   * 1 with a vertical line from a to the graph y edge
+   * Calculate the hypotenuse for both, whichever is shorter
+   * indicates that we should use that triangle to get the edge point.
+   */
+  const xH = hypotenuse(xSide, yRadians);
+
+  const ySide = Math.abs(a.y - bounds.y);
+  const yH = hypotenuse(ySide, xRadians);
+
+  l('x: side', xSide, 'h:', xH);
+  l('y: side', ySide, 'h:', yH);
+  const side = getShortestSide(xH, yH);
+
+  if (side !== 'x' && side !== 'y') {
+    throw new Error('Cant decide which hypotenuse to use');
+  }
+  const point =
+    side === 'x' ? new Point(xSide, getOpposingSide(xH, xRadians)) : new Point(getOpposingSide(yH, yRadians), ySide);
+
+  l('point:', point);
+  const multiplier = new Point(b.x < a.x ? -1 : 1, b.y < a.y ? -1 : 1);
+  l('multiplier:', multiplier);
+  const out = point.multByPoint(multiplier);
+  l('out:', out);
+  const normalized = out.add(new Point(a.x, a.y));
+  l('normalized:', normalized);
+  return normalized;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/plot/types.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+export const BaseDomainRangeType = {
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  step: PropTypes.number,
+};
+
+export const DomainType = PropTypes.shape(BaseDomainRangeType);
+
+export const RangeType = PropTypes.shape(BaseDomainRangeType);
+
+export const SizeType = PropTypes.shape({
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+});
+
+export const PointType = PropTypes.shape({
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+});
+
+export const ChildrenType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired;
+
+export const ScaleType = PropTypes.shape({
+  x: PropTypes.func.isRequired,
+  y: PropTypes.func.isRequired,
+});
+
+export const SnapType = PropTypes.shape({
+  x: PropTypes.func.isRequired,
+  y: PropTypes.func.isRequired,
+});
+
+export const GraphPropsType = PropTypes.shape({
+  scale: ScaleType.isRequired,
+  snap: SnapType.isRequired,
+  domain: DomainType.isRequired,
+  range: RangeType.isRequired,
+  size: SizeType.isRequired,
+});