@pie-lib/graphing-solution-set 0.1.0

package/src/tool-menu.tsx

@@ -0,0 +1,245 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tool-menu.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Radio, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export class ToolMenu extends React.Component {
+  static propTypes = {
+    gssLineData: PropTypes.object,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  onChangeRadioValue: any = (event) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData.selectedTool = event.target.value;
+    onChange(gssLineData, oldSelectedTool);
+  };
+
+  lineTypeChange: any = (line, type) => {
+    let { gssLineData, onChange } = this.props;
+    let oldSelectedTool = gssLineData.selectedTool;
+    gssLineData[`line${line}`].lineType = type;
+    onChange(gssLineData, oldSelectedTool);
+  };
+
+  render() {
+    const { gssLineData, disabled } = this.props;
+
+    return (
+      <Root>
+        <div className="selectLineRadioGroup">
+          {/* LINE A */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="lineA"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'lineA'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Line A</Typography>
+            </div>
+            <div className="radioFieldButtons">
+              <Button
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Solid' ? 'primary' : 'inherit'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Solid')}
+                className={
+                  gssLineData.lineA.lineType === 'Solid'
+                    ? disabled
+                      ? 'lineTypeButtonLeftSelectedDisabled'
+                      : 'lineTypeButtonLeftSelected'
+                    : disabled
+                      ? 'lineTypeButtonLeftUnSelectedDisabled'
+                      : 'lineTypeButtonLeftUnSelected'
+                }
+              >
+                {gssLineData.lineA.lineType === 'Solid' && '✔'} Solid
+              </Button>
+
+              <Button
+                size="small"
+                variant="contained"
+                color={gssLineData.lineA.lineType === 'Dashed' ? 'primary' : 'inherit'}
+                disabled={!!disabled}
+                onClick={() => this.lineTypeChange('A', 'Dashed')}
+                className={
+                  gssLineData.lineA.lineType === 'Dashed'
+                    ? disabled
+                      ? 'lineTypeButtonRightSelectedDisabled'
+                      : 'lineTypeButtonRightSelected'
+                    : disabled
+                      ? 'lineTypeButtonRightUnSelectedDisabled'
+                      : 'lineTypeButtonRightUnSelected'
+                }
+              >
+                {gssLineData.lineA.lineType === 'Dashed' && '✔'} Dashed
+              </Button>
+            </div>
+          </div>
+
+          {/* LINE B (if applicable) */}
+          {gssLineData.numberOfLines === 2 && (
+            <div className="radioFieldOuter">
+              <div className="radioFieldInner">
+                <Radio
+                  name="select-line-radio-buttons"
+                  onChange={this.onChangeRadioValue}
+                  value="lineB"
+                  disabled={!!disabled}
+                  checked={gssLineData.selectedTool === 'lineB'}
+                  className="lineTypeRadio"
+                />
+                <Typography className="lineNameFont">Line B</Typography>
+              </div>
+              <div className="radioFieldButtons">
+                <Button
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Solid' ? 'primary' : 'inherit'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Solid')}
+                  className={
+                    gssLineData.lineB.lineType === 'Solid'
+                      ? disabled
+                        ? 'lineTypeButtonLeftSelectedDisabled'
+                        : 'lineTypeButtonLeftSelected'
+                      : disabled
+                        ? 'lineTypeButtonLeftUnSelectedDisabled'
+                        : 'lineTypeButtonLeftUnSelected'
+                  }
+                >
+                  {gssLineData.lineB.lineType === 'Solid' && '✔'} Solid
+                </Button>
+
+                <Button
+                  size="small"
+                  variant="contained"
+                  color={gssLineData.lineB.lineType === 'Dashed' ? 'primary' : 'inherit'}
+                  disabled={!!disabled}
+                  onClick={() => this.lineTypeChange('B', 'Dashed')}
+                  className={
+                    gssLineData.lineB.lineType === 'Dashed'
+                      ? disabled
+                        ? 'lineTypeButtonRightSelectedDisabled'
+                        : 'lineTypeButtonRightSelected'
+                      : disabled
+                        ? 'lineTypeButtonRightUnSelectedDisabled'
+                        : 'lineTypeButtonRightUnSelected'
+                  }
+                >
+                  {gssLineData.lineB.lineType === 'Dashed' && '✔'} Dashed
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* SOLUTION SET */}
+          <div className="radioFieldOuter">
+            <div className="radioFieldInner">
+              <Radio
+                name="select-line-radio-buttons"
+                onChange={this.onChangeRadioValue}
+                value="solutionSet"
+                disabled={!!disabled}
+                checked={gssLineData.selectedTool === 'solutionSet'}
+                className="lineTypeRadio"
+              />
+              <Typography className="lineNameFont">Solution Set</Typography>
+            </div>
+          </div>
+        </div>
+      </Root>
+    );
+  }
+}
+
+const Root: any = styled('div')(() => ({
+  '& .selectLineRadioGroup': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+  },
+  '& .radioFieldOuter': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+  },
+  '& .radioFieldInner': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  '& .radioFieldButtons': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    padding: '0 .9rem',
+  },
+  '& .lineNameFont': {
+    fontWeight: 'bold',
+    padding: '0 5px 0 0',
+  },
+  '& .lineTypeRadio': {
+    color: '#000000 !important',
+  },
+  '& .lineTypeButtonLeftSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    borderRadius: '4px 0 0 4px',
+  },
+  '& .lineTypeButtonLeftUnSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    borderRadius: '4px 0 0 4px',
+  },
+  '& .lineTypeButtonRightSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    borderRadius: '0 4px 4px 0',
+  },
+  '& .lineTypeButtonRightUnSelected': {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    borderRadius: '0 4px 4px 0',
+  },
+  '& .lineTypeButtonLeftSelectedDisabled, & .lineTypeButtonRightSelectedDisabled': {
+    backgroundColor: '#3E4EB1 !important',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+  '& .lineTypeButtonLeftUnSelectedDisabled, & .lineTypeButtonRightUnSelectedDisabled': {
+    backgroundColor: '#FFFFFF !important',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+}));
+
+export default ToolMenu;

package/src/tools/index.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { tool as polygon } from './polygon/index.js';
+import { tool as line } from './line/index.js';
+
+const allTools = ['line', 'polygon'];
+
+const toolsArr = [line(), polygon()];
+
+export { allTools, toolsArr, line, polygon };

package/src/tools/line/component.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/line/component.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { lineBase, lineToolComponent, styles } from '../shared/line/index.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { trig, types } from '@pie-lib/plot';
+import { styled } from '@mui/material/styles';
+import { ArrowMarker, genUid } from '../shared/arrow-head.js';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils.js';
+
+const StyledLine: any = styled('line', {
+  shouldForwardProp: (prop) => !['fill', 'disabled', 'correctness'].includes(prop),
+})(({ theme, fill, disabled, correctness }) => ({
+  ...(fill === 'Solid' ? styles.line(theme) : styles.dashedLine(theme)),
+  ...(disabled && styles.disabled(theme)),
+  ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+  ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+  ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+}));
+
+const StyledArrowMarker: any = styled(ArrowMarker, {
+  shouldForwardProp: (prop) => !['suffix'].includes(prop),
+})(({ theme, suffix }) => ({
+  ...(suffix === 'enabled' && styles.arrow(theme)),
+  ...(suffix === 'disabled' && styles.disabledArrow(theme)),
+  ...(suffix === 'correct' && styles.correct(theme)),
+  ...(suffix === 'incorrect' && styles.incorrect(theme)),
+  ...(suffix === 'missing' && styles.missing(theme)),
+}));
+
+export const ArrowedLine = (props) => {
+  const markerId = genUid();
+  const { className, correctness, disabled, graphProps, fill = 'Solid', from, to, ...rest } = props;
+  const { scale } = graphProps;
+  const { domain, range } = getAdjustedGraphLimits(graphProps);
+  const [eFrom, eTo] = trig.edges(domain, range)(from, to);
+  const suffix = correctness || (disabled && 'disabled') || 'enabled';
+
+  return (
+    <g>
+      <defs>
+        <StyledArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
+          id={`${props.markerId || markerId}-${suffix}`}
+          suffix={suffix}
+        />
+      </defs>
+      <StyledLine
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        fill={fill}
+        disabled={disabled}
+        correctness={correctness}
+        className={className}
+        markerEnd={`url(#${props.markerId || markerId}-${suffix})`}
+        markerStart={`url(#${props.markerId || markerId}-${suffix})`}
+        {...rest}
+      />
+    </g>
+  );
+};
+
+ArrowedLine.propTypes = {
+  className: PropTypes.string,
+  fill: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: types.GraphPropsType,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string,
+};
+
+const Line = lineBase(ArrowedLine);
+const Component = lineToolComponent(Line);
+
+export default Component;

package/src/tools/line/index.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/line/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Line from './component.js';
+import { lineTool } from '../shared/line/index.js';
+
+export const tool = lineTool('line', Line);

package/src/tools/polygon/component.tsx

@@ -0,0 +1,334 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/polygon/component.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToolPropTypeFields } from '../shared/types.js';
+import { chunk, initial, isEmpty } from 'lodash-es';
+import debug from 'debug';
+import DraggablePolygon from './polygon.js';
+import { types } from '@pie-lib/plot';
+import invariant from 'invariant';
+import ReactDOM from 'react-dom';
+import MarkLabel from '../../mark-label.js';
+import { equalPoints, getMiddleOfTwoPoints, getRightestPoints } from '../../utils.js';
+
+const log = debug('pie-lib:graphing-solution-set:polygon');
+
+export const buildLines = (points, closed) => {
+  const expanded = points.reduce((acc, p, index) => {
+    acc.push({ ...p, index });
+
+    const isLast = index === points.length - 1;
+    const next = isLast ? 0 : index + 1;
+
+    acc.push({ ...points[next], index: next });
+
+    return acc;
+  }, []);
+
+  const all = chunk(expanded, 2).map(([from, to]) => {
+    return { from, to };
+  });
+
+  return closed ? all : initial(all);
+};
+
+export const swap = (arr, ...rest) => {
+  const pairs = chunk(rest, 2);
+
+  return pairs.reduce(
+    (acc, pr) => {
+      if (pr.length === 2) {
+        let [e, replacement] = pr;
+
+        invariant(Number.isFinite(e.index), 'Index must be defined');
+
+        const index = e.index;
+        // const i = acc.findIndex(pt => pt.x === e.x && pt.y === e.y);
+
+        if (index >= 0) {
+          acc.splice(index, 1, replacement);
+
+          return acc;
+        } else {
+          return acc;
+        }
+      } else {
+        return acc;
+      }
+    },
+    [...arr],
+  );
+};
+
+export class RawBaseComponent extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    correctness: PropTypes.string,
+    points: PropTypes.arrayOf(types.PointType),
+    closed: PropTypes.bool,
+    isSolution: PropTypes.bool,
+    coordinatesOnHover: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onClosePolygon: PropTypes.func.isRequired,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onClick: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    isToolActive: PropTypes.bool,
+    middle: PropTypes.object,
+    labelNode: PropTypes.object,
+    labelModeEnabled: PropTypes.bool,
+    onChangeLabelProps: PropTypes.func,
+    onChangeProps: PropTypes.func,
+  };
+
+  static defaultProps = {
+    points: [],
+  };
+
+  dragPoint: any = (index, from, to) => {
+    log('[dragPoint] from, to:', from, to);
+    const { onChange, points } = this.props;
+    const update = [...points];
+    const overlapPoint = !!(points || []).find((p) => equalPoints(p, to));
+
+    if (equalPoints(from, to) || overlapPoint) {
+      return;
+    }
+
+    if (points[index].label) {
+      to.label = points[index].label;
+    }
+
+    update.splice(index, 1, to);
+    onChange(update);
+  };
+
+  dragLine: any = (existing, next) => {
+    log('[dragLine]: ', existing, next);
+    const { onChange } = this.props;
+
+    if (existing.from.label) {
+      next.from.label = existing.from.label;
+    }
+
+    if (existing.to.label) {
+      next.to.label = existing.to.label;
+    }
+
+    const points = swap(this.props.points, existing.from, next.from, existing.to, next.to);
+    onChange(points);
+  };
+
+  dragPoly: any = (existing, next) => {
+    log('[dragPoly] ', existing, next);
+    const { onChange } = this.props;
+
+    next.forEach((point, index) => {
+      if (existing[index].label) {
+        next[index].label = existing[index].label;
+      }
+    });
+
+    onChange(next);
+  };
+
+  close: any = () => {
+    const { points, onClosePolygon } = this.props;
+    log('[close] ...');
+
+    if (points.length >= 3) {
+      onClosePolygon();
+    } else {
+      log('[close] - nope');
+    }
+  };
+
+  labelChange: any = (point, index) => {
+    const { points, onChangeProps } = this.props;
+    const updatedPoint = { ...point };
+
+    if (!point.label || isEmpty(point.label)) {
+      delete updatedPoint.label;
+    }
+
+    const update = [...points];
+
+    update.splice(index, 1, updatedPoint);
+    onChangeProps(update);
+  };
+
+  clickPoint: any = (point, index, data) => {
+    const { closed, disabled, onClick, isToolActive, labelModeEnabled, onChangeProps, onChangeLabelProps, points } =
+      this.props;
+
+    if (labelModeEnabled) {
+      if (disabled) {
+        return;
+      }
+
+      if (points && index === points.length) {
+        const { a, b } = getRightestPoints(points);
+        const middle = { label: '', ...point, ...getMiddleOfTwoPoints(a, b) };
+
+        onChangeLabelProps(middle);
+      } else {
+        const update = [...points];
+
+        update.splice(index, 1, { label: '', ...point });
+        onChangeProps(update);
+      }
+
+      if (this.input[index]) {
+        this.input[index].focus();
+      }
+
+      return;
+    }
+
+    if (isToolActive && !closed && index === 0) {
+      this.close();
+      return;
+    }
+
+    onClick(point || data);
+  };
+
+  // IMPORTANT, do not remove
+  input = {};
+
+  render() {
+    const {
+      closed,
+      graphProps,
+      onChangeLabelProps,
+      points,
+      middle,
+      labelNode,
+      labelModeEnabled,
+      isSolution = false,
+    } = this.props;
+    const polygonLabelIndex = (points && points.length) || 0;
+    if (labelNode && middle && Object.prototype.hasOwnProperty.call(middle, 'label')) {
+      ReactDOM.createPortal(
+        <MarkLabel
+          inputRef={(r) => (this.input[polygonLabelIndex] = r)}
+          disabled={!labelModeEnabled}
+          mark={middle}
+          graphProps={graphProps}
+          onChange={(label) => onChangeLabelProps({ ...middle, label })}
+        />,
+        labelNode,
+      );
+    }
+    return (
+      <g>
+        <React.Fragment>
+          <DraggablePolygon
+            points={points}
+            closed={closed}
+            isSolution={isSolution}
+            graphProps={graphProps}
+            onClick={this.clickPoint.bind(this, middle, polygonLabelIndex)}
+          />
+        </React.Fragment>
+      </g>
+    );
+  }
+}
+
+export const BaseComponent = RawBaseComponent;
+
+export default class Component extends React.Component {
+  static propTypes = {
+    ...ToolPropTypeFields,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  change: any = (points) => {
+    const {
+      mark: { middle },
+    } = this.props;
+    const mark = { ...this.state.mark, points };
+
+    if (middle) {
+      const { a, b } = getRightestPoints(points);
+
+      mark.middle = { ...middle, ...getMiddleOfTwoPoints(a, b) };
+    }
+
+    this.setState({ mark });
+  };
+
+  changeProps: any = (points) => {
+    const mark = { ...this.props.mark, points };
+
+    this.props.onChange(this.props.mark, mark);
+  };
+
+  changeLabelProps: any = (point) => {
+    const { mark, onChange } = this.props;
+    const middle = { ...mark.middle, ...point };
+
+    onChange(mark, { ...mark, middle });
+  };
+
+  closePolygon: any = () => {
+    log('[closePolygon] ...');
+    const { onComplete, mark } = this.props;
+    const update = { ...mark, closed: true };
+
+    onComplete(mark, update);
+  };
+
+  dragStart = () => this.setState({ mark: this.props.mark });
+
+  dragStop: any = () => {
+    const { onChange } = this.props;
+    const m = { ...this.state.mark };
+
+    this.setState({ mark: undefined }, () => {
+      onChange(this.props.mark, m);
+    });
+  };
+
+  render() {
+    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled } = this.props;
+    const { mark: stateMark } = this.state;
+
+    return (
+      <BaseComponent
+        {...(stateMark || mark)}
+        coordinatesOnHover={coordinatesOnHover}
+        onChange={this.change}
+        onChangeLabelProps={this.changeLabelProps}
+        onChangeProps={this.changeProps}
+        onClosePolygon={this.closePolygon}
+        onDragStart={this.dragStart}
+        onDragStop={this.dragStop}
+        onClick={onClick}
+        graphProps={graphProps}
+        isToolActive={isToolActive}
+        labelNode={labelNode}
+        labelModeEnabled={labelModeEnabled}
+      />
+    );
+  }
+}