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

package/src/toggle-bar.jsx

@@ -1,224 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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();
-    });
-  });
-});