@pie-element/rubric 3.6.1 → 3.6.2

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/labels.jsx

@@ -1,213 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { types } from '../plot';
-import { color, Readable } from '../render-ui';
-import EditableHtml from '../editable-html';
-import cn from 'classnames';
-
-const rotations = {
-  left: -90,
-  top: 0,
-  bottom: 0,
-  right: 90,
-};
-
-export const getTransform = (side, width, height) => {
-  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;
-
-  if (side === 'left') {
-    return t(-20, height / 2, rotations[side]);
-  }
-  if (side === 'right') {
-    return t(width + 30, height / 2, rotations[side]);
-  }
-  if (side === 'top') {
-    return t(width / 2, -20, rotations[side]);
-  }
-  if (side === 'bottom') {
-    return t(width / 2, height + 30, rotations[side]);
-  }
-};
-
-const getY = (side, height) => {
-  switch (side) {
-    case 'left':
-      return -height;
-    case 'top':
-      return -height;
-    case 'right':
-      return -height - 10;
-    default:
-      return -height + 10;
-  }
-};
-
-class RawLabel extends React.Component {
-  static propTypes = {
-    text: PropTypes.string,
-    side: PropTypes.string,
-    classes: PropTypes.object,
-    disabledLabel: PropTypes.bool,
-    placeholder: PropTypes.string,
-    graphProps: types.GraphPropsType.isRequired,
-    onChange: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onChange: () => {},
-  };
-
-  render() {
-    const { disabledLabel, placeholder, text, side, graphProps, classes, onChange, mathMlOptions = {} } = this.props;
-    const { size, domain, range } = graphProps;
-    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
-    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
-
-    const transform = getTransform(side, totalWidth, totalHeight);
-    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
-    const height = 36;
-    const y = getY(side, height);
-    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
-
-    const activePlugins = [
-      'bold',
-      'italic',
-      'underline',
-      'strikethrough',
-      'math',
-      // 'languageCharacters'
-    ];
-
-    return (
-      <foreignObject
-        x={-(width / 2)}
-        y={y}
-        width={width}
-        height={finalHeight}
-        transform={transform}
-        textAnchor="middle"
-      >
-        <Readable false>
-          <EditableHtml
-            className={cn(
-              {
-                [classes.bottomLabel]: side === 'bottom',
-                [classes.disabledAxisLabel]: disabledLabel,
-              },
-              classes.axisLabel,
-            )}
-            markup={text || ''}
-            onChange={onChange}
-            placeholder={!disabledLabel && placeholder}
-            toolbarOpts={{
-              position: side === 'bottom' ? 'top' : 'bottom',
-              noBorder: true,
-            }}
-            activePlugins={activePlugins}
-            mathMlOptions={mathMlOptions}
-          />
-        </Readable>
-      </foreignObject>
-    );
-  }
-}
-
-const Label = withStyles((theme) => ({
-  label: {
-    fill: color.defaults.SECONDARY,
-  },
-  axisLabel: {
-    fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center',
-    padding: '0 4px',
-  },
-  disabledAxisLabel: {
-    pointerEvents: 'none',
-  },
-  bottomLabel: {
-    marginTop: '44px',
-  },
-}))(RawLabel);
-
-export const LabelType = {
-  left: PropTypes.string,
-  top: PropTypes.string,
-  bottom: PropTypes.string,
-  right: PropTypes.string,
-};
-
-export class Labels extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    disabledLabels: PropTypes.bool,
-    placeholders: PropTypes.object,
-    value: PropTypes.shape(LabelType),
-    graphProps: PropTypes.object,
-    onChange: PropTypes.object,
-  };
-
-  static defaultProps = {};
-
-  onChangeLabel = (newValue, side) => {
-    const { value, onChange } = this.props;
-    const labels = {
-      ...value,
-      [side]: newValue,
-    };
-
-    onChange(labels);
-  };
-
-  render() {
-    const { disabledLabels, placeholders = {}, value = {}, graphProps, mathMlOptions = {} } = this.props;
-
-    return (
-      <React.Fragment>
-        <Label
-          key="left"
-          side="left"
-          text={value.left}
-          disabledLabel={disabledLabels}
-          placeholder={placeholders.left}
-          graphProps={graphProps}
-          onChange={(value) => this.onChangeLabel(value, 'left')}
-          mathMlOptions={mathMlOptions}
-        />
-        <Label
-          key="top"
-          side="top"
-          text={value.top}
-          disabledLabel={disabledLabels}
-          placeholder={placeholders.top}
-          graphProps={graphProps}
-          onChange={(value) => this.onChangeLabel(value, 'top')}
-          mathMlOptions={mathMlOptions}
-        />
-        <Label
-          key="bottom"
-          side="bottom"
-          text={value.bottom}
-          disabledLabel={disabledLabels}
-          placeholder={placeholders.bottom}
-          graphProps={graphProps}
-          onChange={(value) => this.onChangeLabel(value, 'bottom')}
-          mathMlOptions={mathMlOptions}
-        />
-        <Label
-          key="right"
-          side="right"
-          text={value.right}
-          disabledLabel={disabledLabels}
-          placeholder={placeholders.right}
-          graphProps={graphProps}
-          onChange={(value) => this.onChangeLabel(value, 'right')}
-          mathMlOptions={mathMlOptions}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export default Labels;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/mark-label.jsx

@@ -1,136 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import AutosizeInput from 'react-input-autosize';
-import { useDebounce } from './use-debounce';
-import { types } from '../plot';
-import { color } from '../render-ui';
-
-const styles = (theme) => ({
-  input: {
-    float: 'right',
-    padding: theme.spacing.unit * 0.5,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    border: `solid 1px ${color.defaults.SECONDARY}`,
-    borderRadius: '3px',
-    color: color.defaults.PRIMARY_DARK,
-  },
-  disabled: {
-    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,
-    background: theme.palette.background.paper,
-  },
-  disabledMark: {
-    border: `solid 1px ${color.disabled()}`,
-    background: theme.palette.background.paper,
-    color: color.disabled(),
-  },
-});
-
-export const position = (graphProps, mark, rect) => {
-  rect = rect || { width: 0, height: 0 };
-  const { scale, domain, range } = graphProps;
-  const shift = 10;
-
-  const rightEdge = scale.x(mark.x) + rect.width + shift;
-  const bottomEdge = scale.y(mark.y) + rect.height + shift;
-
-  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';
-  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
-
-  return `${v}-${h}`;
-};
-
-export const coordinates = (graphProps, mark, rect, position) => {
-  const { scale } = graphProps;
-  const shift = 10;
-  rect = rect || { width: 0, height: 0 };
-
-  switch (position) {
-    case 'bottom-right': {
-      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };
-    }
-    case 'bottom-left': {
-      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };
-    }
-    case 'top-left': {
-      return {
-        left: scale.x(mark.x) - shift - rect.width,
-        top: scale.y(mark.y) - shift - rect.height,
-      };
-    }
-    case 'top-right': {
-      return {
-        left: scale.x(mark.x) + shift,
-        top: scale.y(mark.y) - shift - rect.height,
-      };
-    }
-  }
-};
-
-export const MarkLabel = (props) => {
-  const [input, setInput] = useState(null);
-  const _ref = useCallback((node) => setInput(node));
-
-  const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;
-
-  const [label, setLabel] = useState(mark.label);
-
-  const onChange = (e) => setLabel(e.target.value);
-
-  const debouncedLabel = useDebounce(label, 200);
-
-  // useState only sets the value once, to synch props to state need useEffect
-  useEffect(() => {
-    setLabel(mark.label);
-  }, [mark.label]);
-
-  // pick up the change to debouncedLabel and save it
-  useEffect(() => {
-    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
-      props.onChange(debouncedLabel);
-    }
-  }, [debouncedLabel]);
-
-  const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
-  const pos = position(graphProps, mark, rect);
-  const leftTop = coordinates(graphProps, mark, rect, pos);
-
-  const style = {
-    position: 'fixed',
-    pointerEvents: 'auto',
-    ...leftTop,
-  };
-
-  const disabledInput = disabled || mark.disabled;
-
-  return (
-    <AutosizeInput
-      inputRef={(r) => {
-        _ref(r);
-        externalInputRef(r);
-      }}
-      disabled={disabledInput}
-      inputClassName={cn(classes.input, {
-        [classes.disabled]: disabled,
-        [classes.disabledMark]: mark.disabled,
-      })}
-      value={label}
-      style={style}
-      onChange={onChange}
-    />
-  );
-};
-
-MarkLabel.propTypes = {
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
-  inputRef: PropTypes.func,
-  mark: PropTypes.object,
-  theme: PropTypes.object,
-};
-
-export default withStyles(styles, { withTheme: true })(MarkLabel);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/toggle-bar.jsx

@@ -1,242 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import cn from 'classnames';
-import Button from '@material-ui/core/Button';
-import { color } from '../render-ui';
-import { allTools } from './tools';
-import { withDragContext, DragSource, DropTarget } from '../drag';
-import Translator from '../translator';
-
-const { translator } = Translator;
-
-const buttonStyles = () => ({
-  root: {
-    color: color.text(),
-  },
-  selected: {
-    backgroundColor: color.background(),
-    border: `1px solid ${color.secondary()}`,
-  },
-  notSelected: {
-    '& span': {
-      color: color.primary(),
-    },
-    backgroundColor: color.background(),
-  },
-  disabled: {
-    '& span': {
-      color: color.primary(),
-    },
-    backgroundColor: color.disabled(),
-  },
-});
-
-export const MiniButton = withStyles(buttonStyles)((props) => {
-  const { disabled, classes, className, selected, value, onClick, language } = props;
-  const translatorKey = value.toLowerCase();
-
-  return (
-    <Button
-      size="small"
-      disabled={disabled}
-      className={cn(classes.root, selected && classes.selected, className)}
-      classes={{ disabled: cn(disabled && classes.disabled) }}
-      value={value}
-      key={value}
-      variant="outlined"
-      onClick={(e) => onClick({ ...e, buttonValue: value })}
-    >
-      {translator.t(`graphing.${translatorKey}`, { lng: language })}
-    </Button>
-  );
-});
-
-MiniButton.propTypes = {
-  disabled: PropTypes.bool,
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  disabledClassName: PropTypes.string,
-  selected: PropTypes.bool,
-  value: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
-export class ToggleBar extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.string),
-    selectedToolType: PropTypes.string,
-    disabled: PropTypes.bool,
-    draggableTools: PropTypes.bool,
-    onChange: PropTypes.func,
-    onChangeToolsOrder: PropTypes.func,
-    language: PropTypes.string,
-  };
-
-  static defaultProps = {};
-
-  select = (e) => this.props.onChange(e.buttonValue || e.target.textContent);
-
-  moveTool = (dragIndex, hoverIndex) => {
-    const { options, onChangeToolsOrder } = this.props;
-    const dragged = options[dragIndex];
-
-    options.splice(dragIndex, 1);
-    options.splice(hoverIndex, 0, dragged);
-
-    onChangeToolsOrder(options);
-  };
-
-  render() {
-    const { classes, className, disabled, options, selectedToolType, draggableTools, language } = this.props;
-
-    return (
-      <div className={cn(className, classes.toolsContainer)}>
-        {(options || []).map((option, index) => {
-          if ((allTools || []).includes(option)) {
-            const isSelected = option === selectedToolType;
-            const toolRef = React.createRef();
-
-            return (
-              <DragTool
-                key={option}
-                index={index}
-                draggable={draggableTools}
-                moveTool={this.moveTool}
-                classes={classes}
-                toolRef={toolRef}
-              >
-                <MiniButton
-                  className={cn(classes.button, isSelected && classes.selected)}
-                  disabled={disabled}
-                  disableRipple={true}
-                  onClick={this.select}
-                  value={option}
-                  selected={isSelected}
-                  language={language}
-                />
-              </DragTool>
-            );
-          }
-        })}
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  toolsContainer: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  button: {
-    marginRight: theme.spacing.unit / 2,
-    marginBottom: theme.spacing.unit / 2,
-    color: color.text(),
-  },
-  under: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: -1,
-    pointerEvents: 'none',
-  },
-  wrapper: {
-    position: 'relative',
-  },
-  hidden: {
-    opacity: 0,
-  },
-});
-
-export default withDragContext(withStyles(styles)(ToggleBar));
-
-const DRAG_TYPE = 'tool';
-
-export class Item extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    connectDragSource: PropTypes.func.isRequired,
-    connectDragPreview: PropTypes.func.isRequired,
-    connectDropTarget: PropTypes.func.isRequired,
-    isDragging: PropTypes.bool,
-    toolRef: PropTypes.any,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const {
-      classes,
-      children,
-      connectDragSource,
-      connectDropTarget,
-      connectDragPreview,
-      isDragging,
-      toolRef,
-    } = this.props;
-
-    return (
-      <div className={classes.wrapper} ref={toolRef}>
-        {connectDragSource(connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>))}
-        {connectDragPreview(<div className={classes.under}>{children}</div>)}
-      </div>
-    );
-  }
-}
-
-const itemSource = {
-  canDrag(props) {
-    return props.draggable;
-  },
-  beginDrag(props) {
-    return {
-      index: props.index,
-    };
-  },
-};
-
-const itemTarget = {
-  hover(props, monitor) {
-    const dragIndex = monitor.getItem().index;
-    const { toolRef, index: hoverIndex } = props;
-
-    if (dragIndex === hoverIndex || !toolRef.current) {
-      return;
-    }
-
-    const hoverBoundingRect = toolRef.current?.getBoundingClientRect();
-    const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
-    const clientOffset = monitor.getClientOffset();
-    const hoverClientX = clientOffset.x - hoverBoundingRect.left;
-
-    if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
-      return;
-    }
-
-    if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
-      return;
-    }
-
-    props.moveTool(dragIndex, hoverIndex);
-    monitor.getItem().index = hoverIndex;
-  },
-};
-
-const collectTarget = (connect) => ({ connectDropTarget: connect.dropTarget() });
-
-const collectSource = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging(),
-});
-
-const DragTool = DropTarget(
-  DRAG_TYPE,
-  itemTarget,
-  collectTarget,
-)(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tool-menu.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import ToggleBar, { MiniButton } from './toggle-bar';
-
-export class ToolMenu extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    currentToolType: PropTypes.string,
-    disabled: PropTypes.bool,
-    draggableTools: PropTypes.bool,
-    labelModeEnabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onToggleLabelMode: PropTypes.func,
-    onChangeTools: PropTypes.func,
-    toolbarTools: PropTypes.arrayOf(PropTypes.string),
-    language: PropTypes.string,
-  };
-
-  static defaultProps = {
-    toolbarTools: [],
-  };
-
-  updateToolsOrder = (tools, showLabel) => {
-    const { onChangeTools } = this.props;
-
-    if (showLabel) {
-      tools.push('label');
-    }
-
-    onChangeTools(tools);
-  };
-
-  render() {
-    const {
-      className,
-      currentToolType,
-      disabled,
-      draggableTools,
-      labelModeEnabled,
-      onToggleLabelMode,
-      onChange,
-      language
-    } = this.props;
-    let { toolbarTools } = this.props;
-
-    const showLabel = toolbarTools && toolbarTools.some((t) => t === 'label');
-
-    toolbarTools = (toolbarTools || []).filter((tT) => tT !== 'label');
-
-    return (
-      <div className={classNames(className)}>
-        <ToggleBar
-          disabled={disabled}
-          draggableTools={draggableTools}
-          options={toolbarTools}
-          selectedToolType={currentToolType}
-          onChange={onChange}
-          onChangeToolsOrder={(tools) => this.updateToolsOrder(tools, showLabel)}
-          language={language}
-        />
-
-        {showLabel && (
-          <MiniButton disabled={disabled} value={'Label'} onClick={onToggleLabelMode} selected={labelModeEnabled} language={language} />
-        )}
-      </div>
-    );
-  }
-}
-
-export default ToolMenu;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing/tools/absolute/component.jsx

@@ -1,23 +0,0 @@
-import debug from 'debug';
-import { buildDataPoints, absoluteFromTwoPoints } from '../../../graphing-utils';
-import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
-
-const log = debug('pie-lib:graphing:absolute');
-
-const Absolute = withRootEdge((props) => {
-  const { root, edge, graphProps } = props;
-  const { domain, range } = graphProps;
-
-  const dataPoints =
-    edge && edge.x === root.x
-      ? []
-      : buildDataPoints(domain, range, root, edge, absoluteFromTwoPoints(root, edge), true);
-
-  log('dataPoints:', dataPoints);
-
-  return { root: props.root, edge: props.edge, dataPoints, enableCurve: false };
-});
-
-const Component = rootEdgeComponent(Absolute);
-
-export default Component;