@pie-lib/graphing 4.1.0-beta.9 → 5.0.0-next.37

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/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/bg-circle.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { gridDraggable, types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
-import * as utils from '../../utils';
-import { correct, disabled, disabledSecondary, incorrect, missing } from '../shared/styles';
-import { styled } from '@mui/material/styles';
-
-class RawCircle extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    correctness: PropTypes.string,
-    disabled: PropTypes.bool,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    radius: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const { disabled, className, correctness, x, y, radius, graphProps, ...rest } = this.props;
-    const { scale } = graphProps;
-    const rx = Math.abs(scale.x(x + radius) - scale.x(x));
-    const ry = Math.abs(scale.y(y + radius) - scale.y(y));
-
-    return (
-      <StyledEllipse
-        className={classNames(className, disabled && 'disabledSecondary', correctness)}
-        cx={scale.x(x)}
-        cy={scale.y(y)}
-        rx={rx}
-        ry={ry}
-        {...rest}
-      />
-    );
-  }
-}
-
-// helper to convert old style functions
-const applyStyle = (fn) => ({
-  ...fn('stroke'),
-  '&:hover': {
-    strokeWidth: 3,
-    ...fn('stroke'),
-  },
-});
-
-const StyledEllipse = styled('ellipse')(() => ({
-  fill: 'transparent',
-  stroke: color.defaults.BLACK,
-  strokeWidth: 3,
-  transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-  '&:hover': {
-    strokeWidth: 6,
-    stroke: color.defaults.PRIMARY_DARK,
-  },
-  '&.disabled': applyStyle(disabled),
-  '&.disabledSecondary': applyStyle(disabledSecondary),
-  '&.correct': applyStyle(correct),
-  '&.incorrect': applyStyle(incorrect),
-  '&.missing': applyStyle(missing),
-}));
-
-export const BgCircle = RawCircle;
-
-export default gridDraggable({
-  bounds: (props, { domain, range }) => {
-    const { x, y } = props;
-    const area = { left: x, top: y, bottom: y, right: x };
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    const { x, y } = props;
-    return { x, y };
-  },
-  fromDelta: (props, delta) => {
-    const newPoint = utils.point(props).add(utils.point(delta));
-    return newPoint;
-  },
-})(BgCircle);

package/src/tools/circle/component.jsx

@@ -1,264 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { BasePoint } from '../shared/point';
-import BgCircle from './bg-circle';
-import { equalPoints, getMiddleOfTwoPoints, point, stripEmptyLabel } from '../../utils';
-import { types } from '@pie-lib/plot';
-import { rootEdgeComponent } from '../shared/line/with-root-edge';
-import ReactDOM from 'react-dom';
-import MarkLabel from '../../mark-label';
-import { isEmpty } from 'lodash-es';
-import { color } from '@pie-lib/render-ui';
-import { keyframes, styled } from '@mui/material/styles';
-
-const opacityPulsate = (opacity) =>
-  keyframes({
-    '0%': { opacity: '0.0' },
-    '50%': { opacity },
-    '100%': { opacity: '0.0' },
-  });
-
-const getRadius = (from, outer) => {
-  const c = point(from);
-  return c.dist(point(outer));
-};
-
-export class RawBaseCircle extends React.Component {
-  static propTypes = {
-    building: PropTypes.bool,
-    className: PropTypes.string,
-    coordinatesOnHover: PropTypes.bool,
-    correctness: PropTypes.string,
-    from: types.PointType,
-    disabled: PropTypes.bool,
-    to: types.PointType,
-    middle: types.PointType,
-    onChange: PropTypes.func.isRequired,
-    onDragStart: PropTypes.func,
-    onDragStop: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-    onClick: PropTypes.func,
-    labelNode: PropTypes.object,
-    labelModeEnabled: PropTypes.bool,
-    changeMarkProps: PropTypes.func,
-    limitLabeling: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    onClick: () => ({}),
-  };
-
-  onChangePoint = (point) => {
-    const { middle, onChange } = this.props;
-    const { from, to } = point;
-
-    if (!equalPoints(from, to)) {
-      if (middle) {
-        point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };
-      }
-      onChange(point);
-    }
-  };
-
-  dragFrom = (draggedFrom) => {
-    const { from, to } = this.props;
-
-    if (from.label) draggedFrom.label = from.label;
-    if (!equalPoints(draggedFrom, to)) {
-      this.onChangePoint({ from: draggedFrom, to });
-    }
-  };
-
-  dragTo = (draggedTo) => {
-    const { from, to } = this.props;
-
-    if (to.label) draggedTo.label = to.label;
-    if (!equalPoints(from, draggedTo)) {
-      this.onChangePoint({ from, to: draggedTo });
-    }
-  };
-
-  dragCircle = (draggedFrom) => {
-    const { from, to, onChange, middle } = this.props;
-    const diff = point(from).sub(point(draggedFrom));
-    const draggedTo = point(to).sub(diff);
-
-    if (from.label) draggedFrom.label = from.label;
-    if (to.label) draggedTo.label = to.label;
-
-    const updated = { from: draggedFrom, to: draggedTo };
-    if (middle) {
-      updated.middle = { ...middle, ...getMiddleOfTwoPoints(draggedFrom, draggedTo) };
-    }
-
-    this.setState({ draggedroot: undefined, draggedOuter: undefined, isCircleDrag: false }, () => onChange(updated));
-  };
-
-  labelChange = (point, type) => {
-    const { changeMarkProps } = this.props;
-    const update = { ...point };
-    if (!point.label || isEmpty(point.label)) delete update.label;
-    changeMarkProps({ [type]: update });
-  };
-
-  clickPoint = (point, type, data) => {
-    const { changeMarkProps, disabled, from, to, middle, labelModeEnabled, limitLabeling, onClick } = this.props;
-
-    if (!labelModeEnabled) {
-      onClick(point || data);
-      return;
-    }
-
-    if (disabled || limitLabeling) return;
-
-    if (type === 'middle' && !point && from && to) {
-      point = { ...point, ...getMiddleOfTwoPoints(from, to) };
-    }
-    changeMarkProps({
-      from: stripEmptyLabel(from),
-      to: stripEmptyLabel(to),
-      middle: stripEmptyLabel(middle),
-      [type]: { label: '', ...point },
-    });
-
-    if (this.input[type]) {
-      this.input[type].focus();
-    }
-  };
-
-  input = {};
-
-  render() {
-    let {
-      from,
-      to,
-      middle,
-      disabled,
-      building,
-      coordinatesOnHover,
-      onDragStart,
-      onDragStop,
-      onClick,
-      correctness,
-      graphProps,
-      labelNode,
-      labelModeEnabled,
-    } = this.props;
-
-    const common = { onDragStart, onDragStop, graphProps, onClick };
-    to = to || from;
-    const radius = getRadius(from, to);
-
-    let fromLabelNode = null;
-    let toLabelNode = null;
-    let circleLabelNode = null;
-
-    if (labelNode) {
-      if (from?.label !== undefined) {
-        fromLabelNode = ReactDOM.createPortal(
-          <MarkLabel
-            inputRef={(r) => (this.input.from = r)}
-            disabled={!labelModeEnabled}
-            mark={from}
-            graphProps={graphProps}
-            onChange={(label) => this.labelChange({ ...from, label }, 'from')}
-          />,
-          labelNode,
-        );
-      }
-
-      if (to?.label !== undefined) {
-        toLabelNode = ReactDOM.createPortal(
-          <MarkLabel
-            inputRef={(r) => (this.input.to = r)}
-            disabled={!labelModeEnabled}
-            mark={to}
-            graphProps={graphProps}
-            onChange={(label) => this.labelChange({ ...to, label }, 'to')}
-          />,
-          labelNode,
-        );
-      }
-
-      if (middle?.label !== undefined) {
-        circleLabelNode = ReactDOM.createPortal(
-          <MarkLabel
-            inputRef={(r) => (this.input.middle = r)}
-            disabled={!labelModeEnabled}
-            mark={middle}
-            graphProps={graphProps}
-            onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
-          />,
-          labelNode,
-        );
-      }
-    }
-
-    return (
-      <g>
-        <StyledBgCircle
-          disabled={building || disabled}
-          correctness={correctness}
-          className={classNames(building && 'bgCircleBuilding')}
-          x={from.x}
-          y={from.y}
-          radius={radius}
-          onDrag={this.dragCircle}
-          {...common}
-          onClick={(data) => this.clickPoint(middle, 'middle', data)}
-        />
-        {circleLabelNode}
-
-        <BasePoint
-          disabled={building || disabled}
-          coordinatesOnHover={coordinatesOnHover}
-          correctness={correctness}
-          labelNode={labelNode}
-          x={to.x}
-          y={to.y}
-          onDrag={this.dragTo}
-          {...common}
-          onClick={(data) => this.clickPoint(to, 'to', data)}
-        />
-        {toLabelNode}
-
-        <BasePoint
-          disabled={building || disabled}
-          coordinatesOnHover={coordinatesOnHover}
-          correctness={correctness}
-          labelNode={labelNode}
-          x={from.x}
-          y={from.y}
-          className="from"
-          onDrag={this.dragFrom}
-          {...common}
-          onClick={(data) => this.clickPoint(from, 'from', data)}
-        />
-        {fromLabelNode}
-      </g>
-    );
-  }
-}
-
-// MUI v5 styled() replaces withStyles
-const StyledBgCircle = styled(BgCircle)(() => ({
-  '&.outerLine': {
-    fill: color.transparent(),
-    stroke: color.defaults.BLACK,
-    strokeWidth: 4,
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.defaults.PRIMARY_DARK,
-    },
-  },
-  '&.bgCircleBuilding': {
-    stroke: color.defaults.BLACK,
-    animation: `${opacityPulsate('0.3')} 2s ease-out infinite`,
-    opacity: 1,
-  },
-}));
-
-export const BaseCircle = RawBaseCircle;
-const Component = rootEdgeComponent(BaseCircle);
-export default Component;

package/src/tools/circle/index.js

@@ -1,25 +0,0 @@
-import Circle from './component';
-import { equalPoints } from '../../utils';
-
-export const tool = () => ({
-  type: 'circle',
-  Component: Circle,
-  hover: (point, mark) => {
-    return { ...mark, edge: point };
-  },
-  addPoint: (point, mark) => {
-    if (mark && equalPoints(mark.root, point)) {
-      return mark;
-    }
-
-    if (!mark) {
-      return {
-        type: 'circle',
-        root: point,
-        building: true,
-      };
-    } else {
-      return { ...mark, edge: point, building: false };
-    }
-  },
-});