@pie-lib/graphing-solution-set 0.1.0

package/src/tools/polygon/index.ts

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/polygon/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 Polygon from './component.js';
+import { equalPoints } from '../../utils.js';
+
+export const addPointToArray = (point, arr) => {
+  arr = arr || [];
+
+  if (arr.length === 0) {
+    return { points: [point], closed: false };
+  } else if (arr.length === 1) {
+    if (equalPoints(point, arr[0])) {
+      return { points: arr, closed: false };
+    } else {
+      return { points: [...arr, point], closed: false };
+    }
+  } else if (arr.length >= 2) {
+    const closed = equalPoints(point, arr[0]);
+
+    if (closed) {
+      return { points: arr, closed };
+    } else {
+      const hasPoint = !!arr.find((p) => equalPoints(p, point));
+
+      if (hasPoint) {
+        return { points: arr, closed: false };
+      } else {
+        return { points: [...arr, point], closed: false };
+      }
+    }
+  }
+};
+
+export const tool = () => ({
+  type: 'polygon',
+  Component: Polygon,
+  complete: (data, mark) => {
+    return { ...mark, building: false, closed: true };
+  },
+  addPoint: (point, mark) => {
+    if (!mark) {
+      return {
+        type: 'polygon',
+        points: [point],
+        closed: false,
+        building: true,
+      };
+    } else {
+      const { closed, points } = addPointToArray(point, mark.points);
+
+      return { ...mark, closed, points, building: !closed };
+    }
+  },
+});

package/src/tools/polygon/line.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/polygon/line.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 { styled } from '@mui/material/styles';
+import { gridDraggable, types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import * as utils from '../../utils.js';
+import { correct, disabled, incorrect, missing } from '../shared/styles.js';
+
+const StyledLine: any = 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.tsx

@@ -0,0 +1,103 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/polygon/polygon.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 { styled } from '@mui/material/styles';
+import { gridDraggable, types } from '@pie-lib/plot';
+import * as utils from '../../utils.js';
+import { correct, incorrect } from '../shared/styles.js';
+
+const StyledPolygon: any = 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: any = 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.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/tools/shared/arrow-head.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 { 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,
+};