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

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', () => {});
+});

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

@@ -0,0 +1,228 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps, xy } from '../../../__tests__/utils';
+
+import { RawBaseCircle } from '../component';
+
+const xyLabel = (x, y, label) => ({ x, y, label });
+
+describe('Component', () => {
+  let w;
+  let onChange = jest.fn();
+  let changeMarkProps = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      changeMarkProps,
+      graphProps: graphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+
+    return shallow(<RawBaseCircle {...props} />);
+  };
+
+  // used to test items that have labels attached to points
+  const labelNode = document.createElement('foreignObject');
+  const fromWithLabel = { x: 0, y: 0, label: 'A' };
+  const toWithLabel = { x: 1, y: 1, label: 'B' };
+  const wrapperWithLabels = (extras = {}) =>
+    wrapper({
+      ...extras,
+      labelNode: labelNode,
+      from: fromWithLabel,
+      to: toWithLabel,
+    });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with labels', () => {
+      w = wrapperWithLabels();
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    beforeEach(() => (w = wrapper()));
+
+    describe('dragFrom', () => {
+      it('calls onChange', () => {
+        w = wrapper();
+        w.instance().dragFrom(xy(1, 1));
+        expect(onChange).not.toHaveBeenCalledWith({
+          from: xy(1, 1),
+          to: xy(1, 1),
+        });
+
+        w.instance().dragFrom(xy(2, 2));
+        expect(onChange).toHaveBeenCalledWith({
+          from: xy(2, 2),
+          to: xy(1, 1),
+        });
+      });
+    });
+
+    describe('dragFrom keeps labels on "from"', () => {
+      it('calls onChange', () => {
+        w = wrapperWithLabels();
+
+        // drag "from" to { x: 1, y: 1 }
+        w.instance().dragFrom({ x: 1, y: 1 });
+
+        // won't change because points overlap
+        expect(onChange).not.toHaveBeenCalledWith({
+          from: xyLabel(1, 1, 'A'),
+          to: toWithLabel,
+        });
+
+        // wil change and will keep labels
+        w.instance().dragFrom({ x: 2, y: 2 });
+        expect(onChange).toHaveBeenCalledWith({
+          from: xyLabel(2, 2, 'A'),
+          to: toWithLabel,
+        });
+      });
+    });
+
+    describe('dragTo', () => {
+      it('calls onChange', () => {
+        w.instance().dragTo(xy(4, 4));
+        expect(onChange).toHaveBeenCalledWith({
+          from: xy(0, 0),
+          to: xy(4, 4),
+        });
+      });
+    });
+
+    describe('dragTo keeps labels on "to"', () => {
+      it('calls onChange', () => {
+        w = wrapperWithLabels();
+
+        // won't change because points overlap
+        w.instance().dragTo({ x: 0, y: 0 });
+        expect(onChange).not.toHaveBeenCalledWith({
+          from: fromWithLabel,
+          to: xyLabel(1, 1, 'B'),
+        });
+
+        // wil change and will keep labels
+        w.instance().dragTo({ x: 2, y: 2 });
+        expect(onChange).toHaveBeenCalledWith({
+          from: fromWithLabel,
+          to: xyLabel(2, 2, 'B'),
+        });
+      });
+    });
+
+    describe('dragCircle', () => {
+      it('calls onChange', () => {
+        w.instance().dragCircle(xy(1, 1));
+        expect(onChange).toHaveBeenCalledWith({
+          from: xy(1, 1),
+          to: xy(2, 2),
+        });
+      });
+    });
+
+    describe('dragCircle keeps labels on both "from" and "to"', () => {
+      it('calls onChange', () => {
+        w = wrapperWithLabels();
+
+        // wil change and will keep labels
+        w.instance().dragCircle({ x: 10, y: 10 });
+        expect(onChange).toHaveBeenCalledWith({
+          from: xyLabel(10, 10, 'A'),
+          to: xyLabel(11, 11, 'B'),
+        });
+
+        // wil change and will keep labels
+        w.instance().dragCircle({ x: 2, y: 2 });
+        expect(onChange).toHaveBeenCalledWith({
+          from: xyLabel(2, 2, 'A'),
+          to: xyLabel(3, 3, 'B'),
+        });
+      });
+    });
+
+    describe('labelChange', () => {
+      it('updates "label" property for point', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().labelChange(xyLabel(0, 0, 'Label A'), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'Label A'),
+        });
+
+        w.instance().labelChange(xyLabel(0, 0, 'Label B'), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          to: xyLabel(0, 0, 'Label B'),
+        });
+      });
+
+      it('removes "label" property if the field is empty', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().labelChange(xyLabel(0, 0, ''), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xy(0, 0),
+        });
+
+        w.instance().labelChange(xyLabel(0, 0, ''), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          to: xy(0, 0),
+        });
+      });
+    });
+
+    describe('clickPoint', () => {
+      it('adds "label" property to a point', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().clickPoint(xy(0, 0), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, ''),
+          to: xyLabel(1, 1, 'B'),
+        });
+
+        w.instance().clickPoint(xy(1, 1), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'A'),
+          to: xyLabel(1, 1, ''),
+        });
+      });
+
+      it('adds "label" property to a point when limit labeling', () => {
+        const changeMarkProps = jest.fn();
+        w = wrapperWithLabels({ labelModeEnabled: true, limitLabeling: true, changeMarkProps });
+
+        w.instance().clickPoint(xy(0, 0), 'from');
+        expect(changeMarkProps).toHaveBeenCalledTimes(0);
+      });
+
+      it('if point already has label, keeps that value', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().clickPoint(fromWithLabel, 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: fromWithLabel,
+          to: xyLabel(1, 1, 'B'),
+        });
+
+        w.instance().clickPoint(toWithLabel, 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'A'),
+          to: toWithLabel,
+        });
+      });
+    });
+  });
+});

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { types, gridDraggable } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
-import { disabled, correct, incorrect, missing } from '../shared/styles';
+import { disabled, disabledSecondary, correct, incorrect, missing } from '../shared/styles';
 
 /**
  * A low level circle component
@@ -33,7 +33,7 @@ class RawCircle extends React.Component {
 
     return (
       <ellipse
-        className={classNames(classes.bgCircle, disabled && classes.disabled, classes[correctness], className)}
+        className={classNames(classes.bgCircle, disabled && classes.disabledSecondary, classes[correctness], className)}
         cx={scale.x(x)}
         cy={scale.y(y)}
         rx={rx}
@@ -55,15 +55,16 @@ const applyStyle = (fn) => ({
 const styles = () => ({
   bgCircle: {
     fill: 'transparent',
-    stroke: color.primaryLight(),
+    stroke: color.defaults.BLACK,
     strokeWidth: 3,
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark(),
+      stroke: color.defaults.PRIMARY_DARK,
     },
   },
   disabled: applyStyle(disabled),
+  disabledSecondary: applyStyle(disabledSecondary),
   correct: applyStyle(correct),
   incorrect: applyStyle(incorrect),
   missing: applyStyle(missing),