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

package/src/tools/ray/component.jsx

@@ -0,0 +1,92 @@
+import { lineBase, lineToolComponent, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ArrowMarker, genUid } from '../shared/arrow-head';
+import { trig, types } from '@pie-lib/plot';
+import classNames from 'classnames';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
+import { styled } from '@mui/material/styles';
+
+const StyledRayRoot = styled('g')(({ theme, disabled, correctness }) => ({
+  '& line:not(.hit-area)': {
+    ...styles.line(theme),
+    ...(disabled && styles.disabledSecondary(theme)),
+    ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+    ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+    ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+  },
+  '& .enabledArrow': {
+    ...styles.arrow(theme),
+  },
+  '& .disabledArrow': {
+    ...styles.disabledArrow(theme),
+  },
+  '& .correctArrow': {
+    ...styles.correct(theme),
+  },
+  '& .incorrectArrow': {
+    ...styles.incorrect(theme),
+  },
+  '& .missingArrow': {
+    ...styles.missing(theme),
+  },
+}));
+
+export const RayLine = (props) => {
+  const markerId = genUid();
+  const { graphProps, from, to, disabled, correctness, className, markerId: propMarkerId, ...rest } = props;
+  const { scale } = graphProps;
+  const { domain, range } = getAdjustedGraphLimits(graphProps);
+  const [aToB] = trig.edges(domain, range)(from, to);
+  const suffix = correctness || (disabled && 'disabled') || 'enabled';
+  const finalMarkerId = propMarkerId || markerId;
+
+  return (
+    <StyledRayRoot disabled={disabled} correctness={correctness}>
+      <defs>
+        <ArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${finalMarkerId}-${suffix}`}
+          className={classNames(
+            suffix === 'enabled' ? 'enabledArrow' : suffix === 'disabled' ? 'disabledArrow' : `${suffix}Arrow`,
+          )}
+        />
+      </defs>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
+      <line
+        x1={scale.x(from.x)}
+        y1={scale.y(from.y)}
+        x2={scale.x(aToB.x)}
+        y2={scale.y(aToB.y)}
+        className="hit-area"
+        stroke="transparent"
+        strokeWidth={7}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+      />
+      <line
+        x1={scale.x(from.x)}
+        y1={scale.y(from.y)}
+        x2={scale.x(aToB.x)}
+        y2={scale.y(aToB.y)}
+        className={className}
+        markerEnd={`url(#${finalMarkerId}-${suffix})`}
+        {...rest}
+      />
+    </StyledRayRoot>
+  );
+};
+
+RayLine.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+  graphProps: PropTypes.any,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const Ray = lineBase(RayLine);
+const Component = lineToolComponent(Ray);
+
+export default Component;

package/src/tools/ray/index.js

@@ -0,0 +1,4 @@
+import Ray from './component';
+import { lineTool } from '../shared/line';
+
+export const tool = lineTool('ray', Ray);

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

@@ -0,0 +1,28 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { Line } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+const { xy } = utils;
+describe('Line', () => {
+  let onChange = jest.fn();
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: getGraphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Line {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/segment/component.jsx

@@ -0,0 +1,65 @@
+import { lineBase, lineToolComponent, styles } from '../shared/line';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { styled } from '@mui/material/styles';
+
+const StyledLineRoot = styled('line')(({ theme, disabled, correctness }) => ({
+  ...styles.line(theme),
+  ...(disabled && {
+    ...styles.disabled(theme),
+    ...styles.disabledSecondary(theme),
+  }),
+  ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+  ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+  ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+}));
+
+export const Line = (props) => {
+  const { className, correctness, disabled, graphProps, from, to, ...rest } = props;
+  const { scale } = graphProps;
+  const x1 = scale.x(from.x);
+  const y1 = scale.y(from.y);
+  const x2 = scale.x(to.x);
+  const y2 = scale.y(to.y);
+
+  return (
+    <g>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
+      <line
+        className="hit-area"
+        x1={x1}
+        y1={y1}
+        x2={x2}
+        y2={y2}
+        stroke="transparent"
+        strokeWidth={7}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+      />
+      <StyledLineRoot
+        x1={x1}
+        y1={y1}
+        x2={x2}
+        y2={y2}
+        className={className}
+        disabled={disabled}
+        correctness={correctness}
+        {...rest}
+      />
+    </g>
+  );
+};
+
+Line.propTypes = {
+  className: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: PropTypes.any,
+  from: types.PointType,
+  to: types.PointType,
+};
+
+const Segment = lineBase(Line);
+const Component = lineToolComponent(Segment);
+
+export default Component;

package/src/tools/segment/index.js

@@ -0,0 +1,4 @@
+import Segment from './component';
+import { lineTool } from '../shared/line';
+
+export const tool = lineTool('segment', Segment);

package/src/tools/shared/__tests__/arrow-head.test.jsx

@@ -0,0 +1,31 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { ArrowHead, ArrowMarker } from '../arrow-head';
+
+describe('ArrowHead', () => {
+  const renderComponent = (extras) => {
+    const defaults = { size: 10, transform: '' };
+    const props = { ...defaults, ...extras };
+    return render(<ArrowHead {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+describe('ArrowMarker', () => {
+  const renderComponent = (extras) => {
+    const defaults = { id: 'id', size: 10, className: 'className' };
+    const props = { ...defaults, ...extras };
+    return render(<ArrowMarker {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/shared/arrow-head.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+const StyledArrowHead = styled('polygon')(({ disabled, correctness }) => ({
+  fill: color.defaults.BLACK,
+  ...(disabled && {
+    fill: color.disabledSecondary(),
+  }),
+  ...(correctness === 'correct' && {
+    fill: color.correctWithIcon(),
+  }),
+  ...(correctness === 'incorrect' && {
+    fill: color.incorrectWithIcon(),
+  }),
+  ...(correctness === 'missing' && {
+    fill: color.missingWithIcon(),
+  }),
+}));
+
+const StyledMarker = styled('marker')(({ disabled, correctness }) => ({
+  '& polygon': {
+    fill: color.defaults.BLACK,
+    ...(disabled && {
+      fill: color.disabledSecondary(),
+    }),
+    ...(correctness === 'correct' && {
+      fill: color.correctWithIcon(),
+    }),
+    ...(correctness === 'incorrect' && {
+      fill: color.incorrectWithIcon(),
+    }),
+    ...(correctness === 'missing' && {
+      fill: color.missingWithIcon(),
+    }),
+  },
+}));
+
+export const ArrowHead = ({ size, transform, points, disabled, correctness }) => (
+  <StyledArrowHead
+    points={points || `0,0 ${size},${size / 2} 0,${size}`}
+    transform={transform}
+    disabled={disabled}
+    correctness={correctness}
+  />
+);
+ArrowHead.propTypes = {
+  points: PropTypes.string,
+  size: PropTypes.number,
+  transform: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+};
+ArrowHead.defaultProps = {
+  points: '',
+  size: 10,
+  transform: '',
+};
+export const genUid = () => {
+  const v = (Math.random() * 1000).toFixed(0);
+  return `arrow-${v}`;
+};
+export const ArrowMarker = ({ id, size, className, disabled, correctness }) => {
+  // Parse styling info from className if provided (for backward compatibility)
+  const isDisabled = disabled || className?.includes('disabled');
+  const parsedCorrectness =
+    correctness ||
+    (className?.includes('incorrect')
+      ? 'incorrect'
+      : className?.includes('correct')
+        ? 'correct'
+        : className?.includes('missing')
+          ? 'missing'
+          : null);
+
+  return (
+    <StyledMarker
+      id={id}
+      viewBox={`0 0 ${size} ${size}`}
+      refX={size / 2}
+      refY={size / 2}
+      markerWidth={size}
+      markerHeight={size}
+      orient="auto-start-reverse"
+      disabled={isDisabled}
+      correctness={parsedCorrectness}
+    >
+      <ArrowHead size={size} disabled={isDisabled} correctness={parsedCorrectness} />
+    </StyledMarker>
+  );
+};
+ArrowMarker.propTypes = {
+  id: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+};
+ArrowMarker.defaultProps = {
+  size: 5,
+};

package/src/tools/shared/icons/CorrectSVG.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CorrectSVG = ({ scale, x, y }) => (
+  <svg
+    width="11"
+    height="13"
+    viewBox="0 0 14 14"
+    fill="none"
+    stroke="#ffffff"
+    x={scale.x(x) - 5}
+    y={scale.y(y) - 6}
+    style={{ pointerEvents: 'none' }}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.1953 2.46875C10.3125 2.35156 10.5 2.35156 10.5938 2.46875L11.2734 3.125C11.3672 3.24219 11.3672 3.42969 11.2734 3.52344L4.24219 10.5547C4.125 10.6719 3.96094 10.6719 3.84375 10.5547L0.703125 7.4375C0.609375 7.32031 0.609375 7.13281 0.703125 7.03906L1.38281 6.35938C1.47656 6.26562 1.66406 6.26562 1.78125 6.35938L4.03125 8.63281L10.1953 2.46875Z"
+      fill="white"
+    />
+  </svg>
+);
+
+CorrectSVG.propTypes = {
+  scale: PropTypes.shape({
+    x: PropTypes.func,
+    y: PropTypes.func,
+  }),
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default CorrectSVG;

package/src/tools/shared/icons/IncorrectSVG.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IncorrectSVG = ({ scale, x, y }) => (
+  <svg
+    width="14px"
+    height="14px"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#ffffff"
+    strokeWidth="2"
+    x={scale.x(x) - 7}
+    y={scale.y(y) - 7}
+    style={{ pointerEvents: 'none' }}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"></path>
+  </svg>
+);
+
+IncorrectSVG.propTypes = {
+  scale: PropTypes.shape({
+    x: PropTypes.func,
+    y: PropTypes.func,
+  }),
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default IncorrectSVG;

package/src/tools/shared/icons/MissingSVG.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MissingSVG = ({ scale, x, y }) => (
+  <svg
+    width="9"
+    height="10"
+    viewBox="0 0 9 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    x={scale.x(x) - 4.5}
+    y={scale.y(y) - 5}
+    style={{ pointerEvents: 'none' }}
+  >
+    <path
+      d="M0.125 3.76562V1.34375C0.125 1.08984 0.320312 0.875 0.59375 0.875H3.01562C3.13281 0.875 3.25 0.992188 3.25 1.10938V1.89062C3.25 2.02734 3.13281 2.125 3.01562 2.125H1.375V3.76562C1.375 3.90234 1.25781 4 1.14062 4H0.359375C0.222656 4 0.125 3.90234 0.125 3.76562ZM5.75 1.10938C5.75 0.992188 5.84766 0.875 5.98438 0.875H8.40625C8.66016 0.875 8.875 1.08984 8.875 1.34375V3.76562C8.875 3.90234 8.75781 4 8.64062 4H7.85938C7.72266 4 7.625 3.90234 7.625 3.76562V2.125H5.98438C5.84766 2.125 5.75 2.02734 5.75 1.89062V1.10938ZM8.64062 6.5C8.75781 6.5 8.875 6.61719 8.875 6.73438V9.15625C8.875 9.42969 8.66016 9.625 8.40625 9.625H5.98438C5.84766 9.625 5.75 9.52734 5.75 9.39062V8.60938C5.75 8.49219 5.84766 8.375 5.98438 8.375H7.625V6.73438C7.625 6.61719 7.72266 6.5 7.85938 6.5H8.64062ZM3.25 9.39062C3.25 9.52734 3.13281 9.625 3.01562 9.625H0.59375C0.320312 9.625 0.125 9.42969 0.125 9.15625V6.73438C0.125 6.61719 0.222656 6.5 0.359375 6.5H1.14062C1.25781 6.5 1.375 6.61719 1.375 6.73438V8.375H3.01562C3.13281 8.375 3.25 8.49219 3.25 8.60938V9.39062Z"
+      fill="white"
+    />
+  </svg>
+);
+
+MissingSVG.propTypes = {
+  scale: PropTypes.shape({
+    x: PropTypes.func,
+    y: PropTypes.func,
+  }),
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default MissingSVG;

package/src/tools/shared/line/__tests__/index.test.jsx

@@ -0,0 +1,109 @@
+import { lineBase, lineTool, lineToolComponent } from '../index';
+import { utils } from '@pie-lib/plot';
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+
+const { xy } = utils;
+const xyLabel = (x, y, label) => ({ x, y, label });
+
+describe('lineTool', () => {
+  describe('addPoint', () => {
+    let toolbar;
+    beforeEach(() => {
+      toolbar = lineTool('lineType', () => <div />)();
+    });
+    it('returns a building mark', () => {
+      const result = toolbar.addPoint(xy(1, 1));
+      expect(result).toEqual({
+        type: 'lineType',
+        building: true,
+        from: xy(1, 1),
+      });
+    });
+
+    it('returns a complete mark', () => {
+      const result = toolbar.addPoint(xy(1, 1), { from: xy(0, 0) });
+      expect(result).toEqual({
+        building: false,
+        from: xy(0, 0),
+        to: xy(1, 1),
+      });
+    });
+  });
+});
+
+describe('lineToolComponent', () => {
+  let Comp;
+  let mark;
+  let onChange;
+  const renderComponent = (extras) => {
+    const defaults = {
+      mark,
+      onChange: jest.fn(),
+      graphProps: getGraphProps(),
+    };
+    const props = { ...defaults, ...extras };
+
+    return render(<Comp {...props} />);
+  };
+
+  beforeEach(() => {
+    Comp = lineToolComponent(() => <text />);
+    mark = { from: xy(0, 0), to: xy(1, 1) };
+  });
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+describe('lineBase', () => {
+  let Comp;
+  let onChange = jest.fn();
+  let changeMarkProps = jest.fn();
+
+  beforeEach(() => {
+    Comp = lineBase(() => <text />);
+    onChange.mockClear();
+    changeMarkProps.mockClear();
+  });
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      onChange,
+      changeMarkProps,
+      graphProps: getGraphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+
+    return render(<Comp {...props} />);
+  };
+
+  // used to test items that have labels attached to points
+  const labelNode = document.createElement('foreignObject');
+  const renderWithLabels = (extras = {}) =>
+    renderComponent({
+      ...extras,
+      labelNode: labelNode,
+      from: xyLabel(0, 0, 'A'),
+      to: xyLabel(1, 1, 'B'),
+    });
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with labels', () => {
+      const { container } = renderWithLabels();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/shared/line/__tests__/line-path.test.jsx

@@ -0,0 +1,53 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+import * as lineUtils from '../../../../utils';
+
+const { xy } = utils;
+
+const { bounds, pointsToArea } = lineUtils;
+jest.mock('../../../../utils', () => {
+  const a = jest.requireActual('../../../../utils');
+  return {
+    pointsToArea: jest.fn().mockReturnValue({}),
+    bounds: jest.fn().mockReturnValue({}),
+    point: a.point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const a = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => jest.fn()),
+    types: a.types,
+    utils: a.utils,
+  };
+});
+
+describe('LinePath', () => {
+  let LinePath;
+  let onChange = jest.fn();
+  beforeEach(() => {
+    LinePath = require('../line-path').LinePath;
+  });
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: getGraphProps(),
+      from: xy(0, 0, 0),
+      to: xy(1, 1, 0),
+      data: [xy(0, 0, 0), xy(1, 1, 0)],
+    };
+    const props = { ...defaults, ...extras };
+    return render(<LinePath {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/tools/shared/line/__tests__/with-root-edge.test.jsx

@@ -0,0 +1,73 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { rootEdgeComponent, rootEdgeToFromToWrapper } from '../with-root-edge';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+const { xy } = utils;
+jest.mock('../index', () => {
+  const out = {
+    lineBase: jest.fn().mockReturnValue(() => <div />),
+    lineToolComponent: jest.fn().mockReturnValue(() => <div />),
+  };
+  return out;
+});
+
+describe('rootEdgeToToFromWrapper', () => {
+  let Comp;
+  let onChange = jest.fn();
+  beforeEach(() => {
+    Comp = rootEdgeToFromToWrapper(() => <div />);
+  });
+  const renderComponent = (extras) => {
+    const defaults = {
+      mark: { root: xy(1, 1), edge: xy(2, 2) },
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Comp {...props} />);
+  };
+
+  it('renders without crashing', () => {
+    const { container } = renderComponent();
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('passes mark as from/to', () => {
+    const { container } = renderComponent();
+    // Component transforms root/edge to from/to internally
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('handles onChange with root/edge transformation', () => {
+    renderComponent();
+    // onChange transformation is tested through component behavior
+    expect(onChange).toBeDefined();
+  });
+});
+
+describe('rootEdgeComponent', () => {
+  let onChange = jest.fn();
+  let Comp;
+  let mark;
+  beforeEach(() => {
+    mark = { root: xy(0, 0), edge: xy(1, 1) };
+    Comp = rootEdgeComponent(() => <text />);
+  });
+  const renderComponent = (extras) => {
+    const defaults = {
+      mark,
+      graphProps: getGraphProps(),
+      onChange,
+    };
+
+    const props = { ...defaults, ...extras };
+    return render(<Comp {...props} />);
+  };
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});