@pie-lib/graphing 2.14.22-next.0 → 2.16.0-beta.0

package/src/mark-label.jsx

@@ -6,32 +6,71 @@ import AutosizeInput from 'react-input-autosize';
 import { useDebounce } from './use-debounce';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
+import SvgIcon from './label-svg-icon';
+
+const inputStyles = (theme) => ({
+  float: 'right',
+  padding: theme.spacing.unit * 0.5,
+  borderRadius: '4px',
+  fontSize: '10px',
+  backgroundColor: color.defaults.WHITE,
+});
 
 const styles = (theme) => ({
+  inputStudent: {
+    ...inputStyles(theme),
+    padding: '0',
+    border: 'none',
+    color: 'inherit',
+    fontWeight: 'bold',
+  },
   input: {
     float: 'right',
     padding: theme.spacing.unit * 0.5,
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    border: `solid 1px ${color.secondary()}`,
+    fontSize: '10px',
+    border: `solid 1px ${color.defaults.SECONDARY}`,
     borderRadius: '3px',
-    color: color.primaryDark(),
+    color: color.defaults.PRIMARY_DARK,
+    backgroundColor: color.defaults.WHITE,
   },
   disabled: {
-    border: `solid 1px ${color.primaryDark()}`,
-    background: theme.palette.background.paper,
+    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,
+    backgroundColor: color.defaults.WHITE,
+    '-webkit-opacity': '1',
   },
   disabledMark: {
     border: `solid 1px ${color.disabled()}`,
-    background: theme.palette.background.paper,
     color: color.disabled(),
+    '-webkit-text-fill-color': color.disabled(),
+  },
+  inputCorrect: {
+    ...inputStyles(theme),
+    color: color.defaults.CORRECT_WITH_ICON,
+    border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,
+  },
+  inputIncorrect: {
+    ...inputStyles(theme),
+    color: color.defaults.INCORRECT_WITH_ICON,
+    border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,
+  },
+  inputMissing: {
+    ...inputStyles(theme),
+    color: color.defaults.MISSING_WITH_ICON,
+    border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,
+    fontWeight: 'bold',
+  },
+  incorrect: {
+    ...inputStyles(theme),
+    color: color.defaults.INCORRECT_WITH_ICON,
+    fontWeight: 'bold',
+    padding: '0',
   },
 });
 
-export const position = (graphProps, mark, rect) => {
-  rect = rect || { width: 0, height: 0 };
+export const position = (graphProps, mark, rect = { width: 0, height: 0 }) => {
   const { scale, domain, range } = graphProps;
-  const shift = 10;
+  const shift = 5;
 
   const rightEdge = scale.x(mark.x) + rect.width + shift;
   const bottomEdge = scale.y(mark.y) + rect.height + shift;
@@ -42,40 +81,37 @@ export const position = (graphProps, mark, rect) => {
   return `${v}-${h}`;
 };
 
-export const coordinates = (graphProps, mark, rect, position, fontSize) => {
+export const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, position) => {
   const { scale } = graphProps;
-  const shift = 10;
-  const font = fontSize ? fontSize : 16;
-  rect = rect || { width: 0, height: 0 };
+  const shift = 5;
 
   switch (position) {
-    case 'bottom-right': {
-      return { left: `${(scale.x(mark.x) + shift) / font}rem`, top: `${(scale.y(mark.y) + shift) / font}rem` };
-    }
-
-    case 'bottom-left': {
-      return {
-        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
-        top: `${(scale.y(mark.y) + shift) / font}rem`,
-      };
-    }
-
-    case 'top-left': {
-      return {
-        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
-        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,
-      };
-    }
-
-    case 'top-right': {
-      return {
-        left: `${(scale.x(mark.x) + shift) / font}rem`,
-        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,
-      };
-    }
+    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 };
+    default:
+      return {};
   }
 };
 
+const LabelInput = ({ _ref, externalInputRef, label, disabled, inputClassName, onChange }) => (
+  <AutosizeInput
+    inputRef={(r) => {
+      _ref(r);
+      externalInputRef(r);
+    }}
+    disabled={disabled}
+    inputClassName={inputClassName}
+    value={label}
+    onChange={onChange}
+  />
+);
+
 export const MarkLabel = (props) => {
   const [input, setInput] = useState(null);
   const _ref = useCallback((node) => setInput(node));
@@ -83,7 +119,7 @@ export const MarkLabel = (props) => {
   const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;
 
   const [label, setLabel] = useState(mark.label);
-
+  const { correctness, correctnesslabel, correctlabel } = mark;
   const onChange = (e) => setLabel(e.target.value);
 
   const debouncedLabel = useDebounce(label, 200);
@@ -100,35 +136,96 @@ export const MarkLabel = (props) => {
     }
   }, [debouncedLabel]);
 
-  const fontSize = theme && theme.typography ? theme.typography.fontSize + 2 : 16;
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
-  const leftTop = coordinates(graphProps, mark, rect, pos, fontSize);
+  const leftTop = coordinates(graphProps, mark, rect, pos);
 
   const style = {
     position: 'fixed',
     pointerEvents: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '3px',
     ...leftTop,
   };
 
+  const secondLabelStyle = {
+    ...style,
+    top: leftTop.top + 25,
+  };
+
   const disabledInput = disabled || mark.disabled;
 
-  return (
-    <AutosizeInput
-      inputRef={(r) => {
-        _ref(r);
-        externalInputRef(r);
-      }}
+  const renderInput = (inputClass, labelValue) => (
+    <LabelInput
+      _ref={_ref}
+      externalInputRef={externalInputRef}
+      label={labelValue}
       disabled={disabledInput}
-      inputClassName={cn(classes.input, {
-        [classes.disabled]: disabled,
-        [classes.disabledMark]: mark.disabled,
-      })}
-      value={label}
-      style={style}
+      inputClassName={cn(inputClass)}
       onChange={onChange}
     />
   );
+
+  if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {
+    return (
+      <div className={classes.inputCorrect} style={style}>
+        <SvgIcon type="correct" />
+        {renderInput(classes.inputStudent, correctlabel)}
+      </div>
+    );
+  }
+
+  // avoid rendering empty label when a correct point without label  was provided
+  if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {
+    return null;
+  }
+
+  if (correctness === 'correct' && correctnesslabel === 'incorrect') {
+    return (
+      <>
+        <div className={classes.inputIncorrect} style={style}>
+          <SvgIcon type="incorrect" />
+          {label === '' ? (
+            <SvgIcon type="empty" style={{ marginLeft: '3px' }} />
+          ) : (
+            renderInput(classes.inputStudent, label)
+          )}
+        </div>
+        <div className={classes.inputMissing} style={secondLabelStyle}>
+          {renderInput(classes.inputStudent, correctlabel)}
+        </div>
+      </>
+    );
+  }
+
+  if (correctness === 'missing') {
+    return (
+      <div className={classes.inputMissing} style={style}>
+        {renderInput(classes.inputStudent, label)}
+      </div>
+    );
+  }
+
+  if (correctness === 'incorrect') {
+    return (
+      <div className={classes.incorrect} style={style}>
+        {renderInput(classes.inputStudent, label)}
+      </div>
+    );
+  }
+
+  return (
+    <div style={style}>
+      {renderInput(
+        cn(classes.input, {
+          [classes.disabled]: disabled,
+          [classes.disabledMark]: mark.disabled,
+        }),
+        label,
+      )}
+    </div>
+  );
 };
 
 MarkLabel.propTypes = {

package/src/toggle-bar.jsx

@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 import cn from 'classnames';
 import Button from '@material-ui/core/Button';
 import { color } from '@pie-lib/render-ui';
-import { allTools } from './tools/index';
+import { allTools } from './tools';
 import { withDragContext, DragSource, DropTarget } from '@pie-lib/drag';
 import Translator from '@pie-lib/translator';
 
@@ -135,7 +135,6 @@ const styles = (theme) => ({
     marginRight: theme.spacing.unit / 2,
     marginBottom: theme.spacing.unit / 2,
     color: color.text(),
-    backgroundColor: color.background(),
   },
   under: {
     position: 'absolute',

package/src/tool-menu.jsx

@@ -12,7 +12,6 @@ export class ToolMenu extends React.Component {
     draggableTools: PropTypes.bool,
     labelModeEnabled: PropTypes.bool,
     onChange: PropTypes.func,
-    onToggleLabelMode: PropTypes.func,
     onChangeTools: PropTypes.func,
     toolbarTools: PropTypes.arrayOf(PropTypes.string),
     language: PropTypes.string,
@@ -22,33 +21,15 @@ export class ToolMenu extends React.Component {
     toolbarTools: [],
   };
 
-  updateToolsOrder = (tools, showLabel) => {
+  updateToolsOrder = (tools) => {
     const { onChangeTools } = this.props;
-
-    if (showLabel) {
-      tools.push('label');
-    }
-
     onChangeTools(tools);
   };
 
   render() {
-    const {
-      className,
-      currentToolType,
-      disabled,
-      draggableTools,
-      labelModeEnabled,
-      onToggleLabelMode,
-      onChange,
-      language
-    } = this.props;
+    const { className, currentToolType, disabled, draggableTools, 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
@@ -57,13 +38,9 @@ export class ToolMenu extends React.Component {
           options={toolbarTools}
           selectedToolType={currentToolType}
           onChange={onChange}
-          onChangeToolsOrder={(tools) => this.updateToolsOrder(tools, showLabel)}
+          onChangeToolsOrder={(tools) => this.updateToolsOrder(tools)}
           language={language}
         />
-
-        {showLabel && (
-          <MiniButton disabled={disabled} value={'Label'} onClick={onToggleLabelMode} selected={labelModeEnabled} language={language} />
-        )}
       </div>
     );
   }

package/src/tools/absolute/__tests__/component.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, absoluteFromTwoPoints } from '@pie-lib/graphing-utils';
+import { utils } from '@pie-lib/plot';
+
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+const { xy } = utils;
+
+jest.mock('@pie-lib/graphing-utils', () => ({
+  buildDataPoints: jest.fn().mockReturnValue([]),
+  absoluteFromTwoPoints: jest.fn(() => jest.fn()),
+  getAmplitudeAndFreq: jest.fn().mockReturnValue({ freq: 4, amplitude: 1 }),
+}));
+
+jest.mock('../../shared/line/with-root-edge', () => ({
+  withRootEdge: jest.fn(),
+  rootEdgeComponent: jest.fn(),
+}));
+
+describe('Absolute', () => {
+  let fnBody;
+  let graphProps;
+  let root;
+  let edge;
+  let result;
+
+  beforeEach(() => {
+    require('../component');
+    fnBody = withRootEdge.mock.calls[0][0];
+    graphProps = getGraphProps();
+    root = xy(0, 0);
+    edge = xy(1, 1);
+
+    result = fnBody({ graphProps, root, edge });
+  });
+
+  it('fnBody is not null', () => {
+    expect(fnBody).toBeDefined();
+  });
+
+  it('calls buildDataPoints', () => {
+    const { domain, range } = graphProps;
+    expect(buildDataPoints).toHaveBeenCalledWith(domain, range, root, edge, expect.anything(), true);
+  });
+
+  it('calls absoluteFromTwoPoints', () => {
+    expect(absoluteFromTwoPoints).toHaveBeenCalledWith(root, edge);
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ enableCurve: false, root, edge, dataPoints: [] });
+  });
+});

package/src/tools/absolute/component.jsx

@@ -0,0 +1,23 @@
+import debug from 'debug';
+import { buildDataPoints, absoluteFromTwoPoints } from '@pie-lib/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;

package/src/tools/absolute/index.js

@@ -0,0 +1,31 @@
+import Absolute from './component';
+import debug from 'debug';
+import { equalPoints, sameAxes } from '../../utils';
+
+const log = debug('pie-lib:graphing:absolute');
+
+export const tool = () => ({
+  type: 'absolute',
+  Component: Absolute,
+  complete: (data, mark) => ({ ...mark, building: false, closed: true }),
+  addPoint: (point, mark) => {
+    log('add point to absolute model: ', point, 'mark: ', mark);
+    if (mark && (equalPoints(mark.root, point) || sameAxes(mark.root, point))) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type: 'absolute',
+        root: point,
+        edge: undefined,
+        closed: false,
+        building: true,
+      };
+    } else if (mark && !mark.root) {
+      throw new Error('no root - should never happen');
+    } else {
+      return { ...mark, edge: point, closed: true, building: false };
+    }
+  },
+});

package/src/tools/circle/__tests__/__snapshots__/bg-circle.test.jsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BgCircle snapshot renders 1`] = `
+<RawCircle
+  className="className"
+  classes={
+    Object {
+      "bgCircle": "RawCircle-bgCircle-1",
+      "correct": "RawCircle-correct-4",
+      "disabled": "RawCircle-disabled-2",
+      "disabledSecondary": "RawCircle-disabledSecondary-3",
+      "incorrect": "RawCircle-incorrect-5",
+      "missing": "RawCircle-missing-6",
+    }
+  }
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+  x={0}
+  y={0}
+/>
+`;