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

package/src/tools/ray/component.jsx

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

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

package/src/tools/segment/component.jsx

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

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

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

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

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

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

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