@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.34

package/src/toggle-bar.jsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { color } from '@pie-lib/render-ui';
+import { allTools } from './tools';
+import { DragProvider } from '@pie-lib/drag';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { arrayMove } from '@dnd-kit/sortable';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const StyledMiniButton = styled(Button, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop),
+})(({ selected, disabled }) => ({
+  color: color.text(),
+  backgroundColor: color.background(),
+  border: `1px solid ${color.buttonBorder()}`,
+  '&:hover': {
+    backgroundColor: color.buttonHoverBg(),
+  },
+  ...(selected && {
+    border: `1px solid ${color.secondary()}`,
+  }),
+  ...(!selected && {
+    '& span': {
+      color: color.primary(),
+    },
+  }),
+  ...(disabled && {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.disabled(),
+  }),
+}));
+
+export const MiniButton = (props) => {
+  const { disabled, className, selected, value, onClick, language } = props;
+  const translatorKey = value.toLowerCase();
+
+  return (
+    <StyledMiniButton
+      size="small"
+      disabled={disabled}
+      className={className}
+      selected={selected}
+      value={value}
+      key={value}
+      variant="outlined"
+      onClick={(e) => onClick({ ...e, buttonValue: value })}
+    >
+      {translator.t(`graphing.${translatorKey}`, { lng: language })}
+    </StyledMiniButton>
+  );
+};
+
+MiniButton.propTypes = {
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  disabledClassName: PropTypes.string,
+  selected: PropTypes.bool,
+  value: PropTypes.string,
+  onClick: PropTypes.func,
+  language: PropTypes.string,
+};
+
+const StyledToolsContainer = styled('div')(() => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledButton = styled(MiniButton)(({ theme }) => ({
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(0.5),
+  color: color.text(),
+}));
+
+const StyledWrapper = styled('div')({
+  position: 'relative',
+});
+
+export class ToggleBar extends React.Component {
+  static propTypes = {
+    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 newOptions = arrayMove(options, dragIndex, hoverIndex);
+    onChangeToolsOrder(newOptions);
+  };
+
+  handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (!over || !active) return;
+
+    const activeData = active.data.current;
+    const overData = over.data.current;
+
+    if (activeData?.type === 'tool' && overData?.type === 'tool') {
+      const dragIndex = activeData.index;
+      const hoverIndex = overData.index;
+
+      if (dragIndex !== hoverIndex) {
+        this.moveTool(dragIndex, hoverIndex);
+      }
+    }
+  };
+
+  render() {
+    const { className, disabled, options, selectedToolType, draggableTools, language } = this.props;
+
+    return (
+      <DragProvider onDragEnd={this.handleDragEnd}>
+        <StyledToolsContainer className={className}>
+          {(options || []).map((option, index) => {
+            if ((allTools || []).includes(option)) {
+              const isSelected = option === selectedToolType;
+              const toolRef = React.createRef();
+
+              return (
+                <DragTool
+                  key={option}
+                  index={index}
+                  value={option}
+                  draggable={draggableTools}
+                  moveTool={this.moveTool}
+                  toolRef={toolRef}
+                >
+                  <StyledButton
+                    disabled={disabled}
+                    disableRipple={true}
+                    onClick={this.select}
+                    value={option}
+                    selected={isSelected}
+                    language={language}
+                  />
+                </DragTool>
+              );
+            }
+          })}
+        </StyledToolsContainer>
+      </DragProvider>
+    );
+  }
+}
+
+// DragTool functional component using @dnd-kit hooks
+function DragTool({ children, index, draggable, toolRef, value }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useDraggable({
+    id: `tool-${value}-${index}`,
+    disabled: !draggable,
+    data: {
+      type: 'tool',
+      index,
+      value,
+    },
+  });
+
+  const { setNodeRef: setDropNodeRef } = useDroppable({
+    id: `drop-tool-${value}-${index}`,
+    data: {
+      type: 'tool',
+      index,
+      accepts: ['tool'],
+    },
+  });
+
+  // Combine refs
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+    if (toolRef?.current) {
+      toolRef.current = node;
+    }
+  };
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <StyledWrapper ref={setNodeRef} style={style}>
+      <div {...attributes} {...listeners}>
+        {children}
+      </div>
+    </StyledWrapper>
+  );
+}
+
+DragTool.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number,
+  draggable: PropTypes.bool,
+  moveTool: PropTypes.func,
+  toolRef: PropTypes.object,
+  value: PropTypes.string,
+};
+
+export default ToggleBar;

package/src/tool-menu.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import ToggleBar 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,
+    onChangeTools: PropTypes.func,
+    toolbarTools: PropTypes.arrayOf(PropTypes.string),
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    toolbarTools: [],
+  };
+
+  updateToolsOrder = (tools) => {
+    const { onChangeTools } = this.props;
+    onChangeTools(tools);
+  };
+
+  render() {
+    const { className, currentToolType, disabled, draggableTools, onChange, language } = this.props;
+    let { toolbarTools } = this.props;
+
+    return (
+      <div className={classNames(className)}>
+        <ToggleBar
+          disabled={disabled}
+          draggableTools={draggableTools}
+          options={toolbarTools}
+          selectedToolType={currentToolType}
+          onChange={onChange}
+          onChangeToolsOrder={(tools) => this.updateToolsOrder(tools)}
+          language={language}
+        />
+      </div>
+    );
+  }
+}
+
+export default ToolMenu;

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

@@ -0,0 +1,53 @@
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { absoluteFromTwoPoints, buildDataPoints } 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 { absoluteFromTwoPoints, buildDataPoints } from '@pie-lib/graphing-utils';
+import { rootEdgeComponent, withRootEdge } 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__/bg-circle.test.jsx

@@ -0,0 +1,26 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { BgCircle } from '../bg-circle';
+import { graphProps } from '../../../__tests__/utils';
+
+describe('BgCircle', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      x: 0,
+      y: 0,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<BgCircle {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});