@pie-lib/graphing-solution-set 4.1.0-beta.9 → 5.0.0-next.36

package/src/tools/polygon/line.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { gridDraggable, types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
-import * as utils from '../../utils';
-import { correct, disabled, incorrect, missing } from '../shared/styles';
-
-const StyledLine = styled('line', {
-  shouldForwardProp: (prop) => !['disabled', 'correctness'].includes(prop),
-})(({ disabled: isDisabled, correctness }) => ({
-  strokeWidth: 6,
-  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
-  stroke: 'transparent',
-  '&:hover': {
-    strokeWidth: 7,
-    stroke: color.defaults.SECONDARY,
-  },
-  ...(isDisabled && {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-  ...(correctness === 'missing' && missing('stroke')),
-}));
-
-class RawLine extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    from: types.PointType,
-    to: types.PointType,
-    graphProps: types.GraphPropsType.isRequired,
-    disabled: PropTypes.bool,
-    correctness: PropTypes.string,
-  };
-
-  static defaultProps = {
-    from: {},
-    to: {},
-  };
-
-  render() {
-    const { graphProps, from, to, className, disabled, correctness, ...rest } = this.props;
-    const { scale } = graphProps;
-    return (
-      <StyledLine
-        x1={scale.x(from.x)}
-        y1={scale.y(from.y)}
-        x2={scale.x(to.x)}
-        y2={scale.y(to.y)}
-        disabled={disabled}
-        correctness={correctness}
-        className={className}
-        {...rest}
-      />
-    );
-  }
-}
-
-export const Line = RawLine;
-
-export default gridDraggable({
-  bounds: (props, { domain, range }) => {
-    const { from, to } = props;
-    const area = utils.lineToArea(from, to);
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    const { from } = props;
-    return from;
-  },
-  fromDelta: (props, delta) => {
-    const { from, to } = props;
-    return {
-      from: utils.point(from).add(utils.point(delta)),
-      to: utils.point(to).add(utils.point(delta)),
-    };
-  },
-})(Line);

package/src/tools/polygon/polygon.jsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { gridDraggable, types } from '@pie-lib/plot';
-import * as utils from '../../utils';
-import { correct, incorrect } from '../shared/styles';
-
-const StyledPolygon = styled('polygon', {
-  shouldForwardProp: (prop) => !['isSolution', 'correctness'].includes(prop),
-})(({ isSolution, correctness }) => ({
-  fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'transparent',
-  strokeWidth: 2,
-  '&:hover': {
-    fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'rgb(0, 0, 0, 0.25)',
-  },
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-}));
-
-const StyledPolyline = styled('polyline', {
-  shouldForwardProp: (prop) => !['isSolution', 'correctness'].includes(prop),
-})(({ isSolution, correctness }) => ({
-  fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'transparent',
-  strokeWidth: 2,
-  '&:hover': {
-    fill: isSolution ? 'rgb(60, 73, 150, 0.6)' : 'rgb(0, 0, 0, 0.25)',
-  },
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-}));
-
-export const getPointString = (points, scale) => {
-  return (points || [])
-    .map((p) => {
-      const scaledPoint = {
-        x: scale.x(p.x),
-        y: scale.y(p.y),
-      };
-      return `${scaledPoint.x},${scaledPoint.y}`;
-    })
-    .join(' ');
-};
-
-export class RawPolygon extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    isSolution: PropTypes.bool,
-    points: PropTypes.arrayOf(types.PointType),
-    graphProps: types.GraphPropsType.isRequired,
-    closed: PropTypes.bool.isRequired,
-    correctness: PropTypes.string,
-  };
-
-  static defaultProps = {
-    points: [],
-  };
-
-  render() {
-    const { points, className, correctness, graphProps, closed, isSolution, ...rest } = this.props;
-    const { scale } = graphProps;
-
-    const pointString = getPointString(points, scale);
-    const Component = closed ? StyledPolygon : StyledPolyline;
-    return (
-      <Component
-        points={pointString}
-        isSolution={isSolution}
-        correctness={correctness}
-        className={className}
-        {...rest}
-      />
-    );
-  }
-}
-
-export const Polygon = RawPolygon;
-
-export default gridDraggable({
-  bounds: (props, { domain, range }) => {
-    const { points } = props;
-    const area = utils.polygonToArea(points);
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    const { points } = props;
-    return points[0];
-  },
-  fromDelta: (props, delta) => {
-    const { points } = props;
-
-    return points.map((p) => utils.point(p).add(utils.point(delta)));
-  },
-})(Polygon);

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
-
-export const ArrowHead = ({ size, transform, points }) => (
-  <polygon points={points || `0,0 ${size},${size / 2} 0,${size}`} transform={transform} />
-);
-ArrowHead.propTypes = {
-  points: PropTypes.string,
-  size: PropTypes.number,
-  transform: 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 }) => {
-  return (
-    <marker
-      id={id}
-      viewBox={`0 0 ${size} ${size}`}
-      refX={size / 2}
-      refY={size / 2}
-      markerWidth={size}
-      markerHeight={size}
-      orient="auto-start-reverse"
-      className={className}
-      style={{ fill: color.defaults.BLACK }}
-    >
-      <ArrowHead size={size} />
-    </marker>
-  );
-};
-ArrowMarker.propTypes = {
-  id: PropTypes.string,
-  size: PropTypes.number,
-  className: PropTypes.string,
-};
-ArrowMarker.defaultProps = {
-  size: 5,
-};

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

@@ -1,471 +0,0 @@
-import React from 'react';
-import { cloneDeep, isEmpty, isEqual } from 'lodash-es';
-import { BasePoint } from '../point';
-import { gridDraggable, trig, types, utils } from '@pie-lib/plot';
-import PropTypes from 'prop-types';
-import { correct, disabled, incorrect, missing } from '../styles';
-import ReactDOM from 'react-dom';
-import MarkLabel from '../../../mark-label';
-import { color } from '@pie-lib/render-ui';
-import { equalPoints, getMiddleOfTwoPoints, sameAxes } from '../../../utils';
-
-export const lineTool = (type, Component) => () => ({
-  type,
-  Component,
-  addPoint: (point, mark) => {
-    if (mark && equalPoints(mark.root, point)) {
-      return mark;
-    }
-
-    if (!mark) {
-      return {
-        type,
-        building: true,
-        from: point,
-      };
-    }
-
-    if (equalPoints(point, mark.from)) {
-      return { ...mark };
-    }
-
-    return { ...mark, building: false, to: point };
-  },
-});
-
-export const lineToolComponent = (Component) => {
-  return class LineToolComponent extends React.Component {
-    static propTypes = {
-      ...types.ToolPropTypeFields,
-      graphProps: types.GraphPropsType.isRequired,
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {};
-    }
-
-    startDrag = () => this.setState({ mark: { ...this.props.mark } });
-
-    stopDrag = () => {
-      const { onChange, mark } = this.props;
-      const update = { ...this.state.mark };
-
-      this.setState({ mark: undefined }, () => {
-        const { type } = update;
-        let shouldNotChange =
-          type &&
-          (type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') &&
-          sameAxes(update.from, update.to);
-        if (!shouldNotChange && type && type === 'exponential' && update.from && update.to) {
-          shouldNotChange = update.from.y === 0 || update.to.y === 0 || update.from.y * update.to.y < 0;
-        }
-        if (!isEqual(mark, update) && !shouldNotChange) {
-          onChange(mark, update);
-        }
-      });
-    };
-
-    changeMark = ({ from, to, middle }) => {
-      let mark = { ...this.state.mark, from, to };
-
-      if (middle) {
-        mark = { ...mark, middle };
-      }
-
-      this.setState({ mark });
-    };
-
-    changeMarkProps = ({ from, to, middle }) => {
-      const { onChange, mark } = this.props;
-      let update = { ...mark, ...this.state.mark };
-
-      if (from) {
-        update = { ...update, from };
-      }
-
-      if (to) {
-        update = { ...update, to };
-      }
-
-      if (middle) {
-        update = { ...update, middle };
-      }
-
-      if (!isEqual(mark, update)) {
-        onChange(mark, update);
-      }
-    };
-
-    render() {
-      const { graphProps, onClick, labelNode, labelModeEnabled, coordinatesOnHover, gssLineData } = this.props;
-      const mark = this.state.mark ? this.state.mark : this.props.mark;
-
-      const from = cloneDeep(mark.from);
-      const to = cloneDeep(mark.to);
-      const middle = cloneDeep(mark.middle);
-
-      // SET DISABLED
-      // if it's a background mark, we need to force disable it
-      if (from && mark.isBackground) {
-        from.disabled = true;
-      }
-
-      if (to && mark.isBackground) {
-        to.disabled = true;
-      }
-
-      if (middle && mark.isBackground) {
-        middle.disabled = true;
-      }
-
-      return (
-        <Component
-          disabled={mark.disabled}
-          coordinatesOnHover={coordinatesOnHover}
-          correctness={mark.correctness}
-          from={from}
-          to={to}
-          middle={middle}
-          graphProps={graphProps}
-          fill={mark && mark.fill}
-          gssLineData={gssLineData}
-          onChange={this.changeMark}
-          changeMarkProps={this.changeMarkProps}
-          onClick={onClick}
-          onDragStart={this.startDrag}
-          onDragStop={this.stopDrag}
-          labelNode={labelNode}
-          labelModeEnabled={labelModeEnabled}
-        />
-      );
-    }
-  };
-};
-
-const dragOpts = () => ({
-  bounds: (props, { domain, range }) => {
-    const area = utils.lineToArea(props.from, props.to);
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    const { from } = props;
-    return from;
-  },
-  fromDelta: (props, delta) => {
-    const { from, to } = props;
-    return {
-      from: utils.point(from).add(utils.point(delta)),
-      to: utils.point(to).add(utils.point(delta)),
-    };
-  },
-});
-
-export const lineBase = (Comp, opts) => {
-  const DraggableComp = gridDraggable(dragOpts())(Comp);
-
-  const FromPoint = opts && opts.from ? opts.from : BasePoint;
-  const ToPoint = opts && opts.to ? opts.to : BasePoint;
-
-  class LineBase extends React.Component {
-    static propTypes = {
-      coordinatesOnHover: PropTypes.bool,
-      graphProps: types.GraphPropsType,
-      from: types.PointType,
-      to: types.PointType,
-      middle: types.PointType,
-      onChange: PropTypes.func,
-      onDragStart: PropTypes.func,
-      onDragStop: PropTypes.func,
-      onClick: PropTypes.func,
-      correctness: PropTypes.string,
-      fill: PropTypes.string,
-      gssLineData: PropTypes.object,
-      disabled: PropTypes.bool,
-      labelNode: PropTypes.object,
-      labelModeEnabled: PropTypes.bool,
-      changeMarkProps: PropTypes.func,
-    };
-
-    onChangePoint = (point) => {
-      const { middle, onChange } = this.props;
-      const { from, to } = point;
-
-      // because point.from.label and point.to.label can be different
-      if (!equalPoints(from, to)) {
-        if (middle) {
-          point.middle = { ...middle, ...getMiddleOfTwoPoints(from, to) };
-        }
-
-        onChange(point);
-      }
-    };
-
-    dragComp = ({ from: draggedFrom, to: draggedTo }) => {
-      const { from, to, onChange, middle } = this.props;
-
-      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) };
-      }
-
-      onChange(updated);
-    };
-
-    dragFrom = (draggedFrom) => {
-      const { from, to } = this.props;
-
-      if (from.label) {
-        draggedFrom.label = from.label;
-      }
-
-      if (!equalPoints(draggedFrom, to)) {
-        this.onChangePoint({ from: draggedFrom, to: to });
-      }
-    };
-
-    dragTo = (draggedTo) => {
-      const { from, to } = this.props;
-
-      if (to.label) {
-        draggedTo.label = to.label;
-      }
-
-      if (!equalPoints(from, draggedTo)) {
-        this.onChangePoint({ from: from, to: draggedTo });
-      }
-    };
-
-    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, labelModeEnabled, onClick } = this.props;
-
-      if (!labelModeEnabled) {
-        onClick(point || data);
-        return;
-      }
-
-      if (disabled) {
-        return;
-      }
-
-      if (type === 'middle' && !point && from && to) {
-        point = { ...point, ...getMiddleOfTwoPoints(from, to) };
-      }
-
-      changeMarkProps({ from, to, [type]: { label: '', ...point } });
-
-      if (this.input[type]) {
-        this.input[type].focus();
-      }
-    };
-
-    // IMPORTANT, do not remove
-    input = {};
-
-    render() {
-      const {
-        coordinatesOnHover,
-        graphProps,
-        fill,
-        gssLineData,
-        onDragStart,
-        onDragStop,
-        from,
-        to,
-        middle,
-        disabled,
-        correctness,
-        onClick,
-        labelNode,
-        labelModeEnabled,
-      } = this.props;
-      let common = { graphProps, fill, onDragStart, onDragStop, disabled, correctness, onClick };
-      if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
-        //removing dragging option for line if solution set is clicked.
-        common = { graphProps, fill, disabled, correctness, onClick };
-      }
-      const angle = to ? trig.toDegrees(trig.angle(from, to)) : 0;
-
-      let fromLabelNode = null;
-      let toLabelNode = null;
-      let lineLabelNode = null;
-
-      if (labelNode) {
-        if (from && Object.prototype.hasOwnProperty.call(from, 'label')) {
-          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 && Object.prototype.hasOwnProperty.call(to, 'label')) {
-          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 && Object.prototype.hasOwnProperty.call(middle, 'label')) {
-          lineLabelNode = ReactDOM.createPortal(
-            <MarkLabel
-              inputRef={(r) => (this.input.middle = r)}
-              disabled={!labelModeEnabled}
-              mark={middle}
-              graphProps={graphProps}
-              onChange={(label) => this.labelChange({ ...middle, label }, 'middle')}
-            />,
-            labelNode,
-          );
-        }
-      }
-      if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
-        //removing dragging feature of line and point if solution set is true.
-        return (
-          <g>
-            {to && <DraggableComp from={from} to={to} middle={middle} {...common} />}
-            {lineLabelNode}
-
-            <FromPoint
-              x={from.x}
-              y={from.y}
-              labelNode={labelNode}
-              coordinatesOnHover={coordinatesOnHover}
-              {...common}
-            />
-            {fromLabelNode}
-
-            {to && (
-              <ToPoint
-                x={to.x}
-                y={to.y}
-                angle={angle} //angle + 45}
-                labelNode={labelNode}
-                coordinatesOnHover={coordinatesOnHover}
-                {...common}
-              />
-            )}
-            {toLabelNode}
-          </g>
-        );
-      } else {
-        return (
-          <g>
-            {to && (
-              <DraggableComp
-                from={from}
-                to={to}
-                middle={middle}
-                onDrag={this.dragComp}
-                {...common}
-                onClick={(data) => this.clickPoint(middle, 'middle', data)}
-              />
-            )}
-            {lineLabelNode}
-
-            <FromPoint
-              x={from.x}
-              y={from.y}
-              labelNode={labelNode}
-              coordinatesOnHover={coordinatesOnHover}
-              onDrag={this.dragFrom}
-              {...common}
-              onClick={(data) => this.clickPoint(from, 'from', data)}
-            />
-            {fromLabelNode}
-
-            {to && (
-              <ToPoint
-                x={to.x}
-                y={to.y}
-                angle={angle} //angle + 45}
-                labelNode={labelNode}
-                coordinatesOnHover={coordinatesOnHover}
-                onDrag={this.dragTo}
-                {...common}
-                onClick={(data) => this.clickPoint(to, 'to', data)}
-              />
-            )}
-            {toLabelNode}
-          </g>
-        );
-      }
-    }
-  }
-
-  return LineBase;
-};
-
-export const styles = {
-  line: () => ({
-    fill: 'transparent',
-    stroke: color.defaults.BLACK,
-    strokeWidth: 4,
-    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.defaults.BLACK,
-    },
-  }),
-  dashedLine: () => ({
-    fill: 'transparent',
-    stroke: color.defaults.BLACK,
-    strokeWidth: 4,
-    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.defaults.BLACK,
-    },
-    strokeDasharray: '3,3',
-  }),
-  arrow: () => ({
-    fill: color.defaults.SECONDARY,
-  }),
-  disabledArrow: () => ({
-    ...disabled(),
-  }),
-  disabled: () => ({
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  correct: (theme, key) => ({
-    ...correct(key),
-  }),
-  incorrect: (theme, key) => ({
-    ...incorrect(key),
-  }),
-  missing: (theme, key) => ({
-    ...missing(key),
-  }),
-};