@pie-lib/graphing 2.14.21 → 2.14.22-next.1618

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}
+/>
+`;

package/src/tools/circle/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,293 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component snapshot renders 1`] = `
+<g>
+  <GridDraggable
+    className=""
+    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],
+        },
+      }
+    }
+    onClick={[Function]}
+    onDrag={[Function]}
+    radius={1.4142135623730951}
+    x={0}
+    y={0}
+  />
+  <WithStyles(GridDraggable)
+    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],
+        },
+      }
+    }
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={1}
+    y={1}
+  />
+  <WithStyles(GridDraggable)
+    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],
+        },
+      }
+    }
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={0}
+    y={0}
+  />
+</g>
+`;
+
+exports[`Component snapshot renders with labels 1`] = `
+<g>
+  <GridDraggable
+    className=""
+    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],
+        },
+      }
+    }
+    onClick={[Function]}
+    onDrag={[Function]}
+    radius={1.4142135623730951}
+    x={0}
+    y={0}
+  />
+  <WithStyles(GridDraggable)
+    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],
+        },
+      }
+    }
+    labelNode={<foreignobject />}
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={1}
+    y={1}
+  />
+  <Portal
+    containerInfo={<foreignobject />}
+  >
+    <WithStyles(MarkLabel)
+      disabled={true}
+      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],
+          },
+        }
+      }
+      inputRef={[Function]}
+      mark={
+        Object {
+          "label": "B",
+          "x": 1,
+          "y": 1,
+        }
+      }
+      onChange={[Function]}
+    />
+  </Portal>
+  <WithStyles(GridDraggable)
+    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],
+        },
+      }
+    }
+    labelNode={<foreignobject />}
+    onClick={[Function]}
+    onDrag={[Function]}
+    x={0}
+    y={0}
+  />
+  <Portal
+    containerInfo={<foreignobject />}
+  >
+    <WithStyles(MarkLabel)
+      disabled={true}
+      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],
+          },
+        }
+      }
+      inputRef={[Function]}
+      mark={
+        Object {
+          "label": "A",
+          "x": 0,
+          "y": 0,
+        }
+      }
+      onChange={[Function]}
+    />
+  </Portal>
+</g>
+`;

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

@@ -0,0 +1,28 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { BgCircle } from '../bg-circle';
+import { graphProps } from '../../../__tests__/utils';
+
+describe('BgCircle', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      x: 0,
+      y: 0,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<BgCircle {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {});
+});