@pie-lib/graphing-solution-set 4.0.4-next.30 → 4.0.4-next.34

package/src/coordinates-label.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { roundNumber } from './utils';
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.fontSize,
+  borderRadius: '8px',
+  background: theme.palette.common.white,
+  color: color.defaults.BLACK,
+  '& .MuiInputBase-input': {
+    padding: 0,
+  },
+}));
+
+export const getLabelPosition = (graphProps, x, y, labelLength) => {
+  const { scale, domain, range } = graphProps;
+  // treat corner cases for maximum and minimum
+  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
+  const leftShift = 10;
+  const rightEdge = scale.x(x) + labelLength + leftShift;
+
+  if (rightEdge >= scale.x(domain.max)) {
+    return {
+      left: scale.x(x) - leftShift - labelLength,
+      top: scale.y(y) - topShift,
+    };
+  }
+
+  return {
+    left: scale.x(x) + leftShift,
+    top: scale.y(y) - topShift,
+  };
+};
+
+export const CoordinatesLabel = ({ x, y, graphProps }) => {
+  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
+  const labelLength = (label.length || 0) * 6;
+  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
+
+  const style = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: labelLength,
+    padding: 0,
+    ...labelPosition,
+  };
+
+  return <StyledInputBase style={style} value={label} inputProps={{ ariaLabel: 'naked' }} />;
+};
+
+CoordinatesLabel.propTypes = {
+  graphProps: types.GraphPropsType,
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default CoordinatesLabel;

package/src/graph-with-controls.jsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { isString, uniq } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+import ToolMenu from './tool-menu';
+import Graph, { graphPropTypes } from './graph';
+import UndoRedo from './undo-redo';
+import { allTools, toolsArr } from './tools';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+export const setToolbarAvailability = (toolbarTools) =>
+  toolsArr.map((tA) => ({
+    ...tA,
+    toolbar: !!toolbarTools.find((t) => t === tA.type),
+  })) || [];
+
+export const toolIsAvailable = (tools, currentTool) =>
+  currentTool && tools && (tools.find((tool) => tool.type === currentTool.type) || {}).toolbar;
+
+export const getAvailableTool = (tools) => tools.find((tool) => tool.toolbar);
+
+export const filterByValidToolTypes = (backgroundMarks) =>
+  backgroundMarks.filter((bM) => !!allTools.find((tool) => tool === bM.type));
+
+export const filterByVisibleToolTypes = (toolbarTools, marks) =>
+  marks.filter((bM) => !!toolbarTools.find((tool) => tool === bM.type));
+
+const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
+
+const GraphWithControlsRoot = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 'min-content',
+}));
+
+const Controls = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: 'calc(1.25rem - 12px) calc(1.25rem - 12px) 1.25rem',
+  color: color.text(),
+  backgroundColor: '#9FA8DA',
+  '& button': {
+    fontSize: '0.875rem',
+    padding: '0.25rem .3rem',
+    width: '5rem',
+  },
+}));
+
+const StyledAccordion = styled(Accordion)(() => ({
+  backgroundColor: color.primaryLight(),
+  width: '100%',
+  boxShadow: 'none',
+}));
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+  padding: `0 ${theme.spacing(1)}`,
+  minHeight: '32px !important',
+  '& .MuiAccordionSummary-content': {
+    margin: '4px 0 !important',
+  },
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+  padding: 0,
+  marginTop: theme.spacing(1),
+  display: 'flex',
+  justifyContent: 'space-between',
+}));
+
+const UndoRedoOuterDiv = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: '.5rem',
+}));
+
+const Collapsible = ({ children, title }) => (
+  <StyledAccordion square disableGutters>
+    <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
+      <Typography variant="subtitle1">{title}</Typography>
+    </StyledAccordionSummary>
+    <StyledAccordionDetails>{children}</StyledAccordionDetails>
+  </StyledAccordion>
+);
+
+Collapsible.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+};
+
+export class GraphWithControls extends React.Component {
+  static propTypes = {
+    ...graphPropTypes,
+    onUndo: PropTypes.func,
+    onRedo: PropTypes.func,
+    onReset: PropTypes.func,
+    toolbarTools: PropTypes.arrayOf(PropTypes.string),
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    collapsibleToolbar: false,
+    collapsibleToolbarTitle: '',
+    disabledLabels: false,
+    disabledTitle: false,
+    showLabels: true,
+    showTitle: true,
+    toolbarTools: [],
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentTool: getDefaultCurrentTool(props.defaultTool),
+      labelModeEnabled: false,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { defaultTool } = this.props;
+    if (prevProps.defaultTool !== defaultTool) {
+      const currentTool = getDefaultCurrentTool(defaultTool);
+      this.setState({ currentTool });
+    }
+  }
+
+  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
+
+  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
+
+  render() {
+    let { currentTool, labelModeEnabled } = this.state;
+    const {
+      axesSettings,
+      className,
+      coordinatesOnHover,
+      collapsibleToolbar,
+      collapsibleToolbarTitle,
+      disabled,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      labels,
+      labelsPlaceholders,
+      onChangeLabels,
+      onChangeMarks,
+      onChangeTitle,
+      onUndo,
+      onRedo,
+      range,
+      size,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      titlePlaceholder,
+      language,
+      disableToolbar = false,
+      gssLineData,
+      onChangeGssLineData,
+      onSolutionSetSelected,
+      onCustomReset,
+    } = this.props;
+
+    let { backgroundMarks, marks, toolbarTools } = this.props;
+
+    toolbarTools = uniq(toolbarTools || []).filter((tT) => !!isString(tT)) || [];
+    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
+    marks = filterByVisibleToolTypes(toolbarTools, marks || []);
+
+    if (gssLineData && gssLineData.lineA && marks[0] && marks[0].type === 'line')
+      marks[0].fill = gssLineData.lineA.lineType;
+    if (gssLineData && gssLineData.lineB && marks[1] && marks[1].type === 'line')
+      marks[1].fill = gssLineData.lineB.lineType;
+
+    const tools = setToolbarAvailability(toolbarTools);
+    if (!currentTool || !toolIsAvailable(tools, currentTool)) {
+      currentTool = getAvailableTool(tools);
+    }
+
+    const gssActions = gssLineData && (
+      <>
+        <ToolMenu
+          numberOfLines={gssLineData.numberOfLines}
+          gssLineData={gssLineData}
+          onChange={onChangeGssLineData}
+          disabled={!!disabled}
+          language={language}
+        />
+        {!disabled && (
+          <UndoRedoOuterDiv>
+            <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onCustomReset} language={language} />
+          </UndoRedoOuterDiv>
+        )}
+      </>
+    );
+
+    return (
+      <GraphWithControlsRoot className={classNames(className)}>
+        {!disableToolbar && (
+          <Controls>
+            {collapsibleToolbar ? <Collapsible title={collapsibleToolbarTitle}>{gssActions}</Collapsible> : gssActions}
+          </Controls>
+        )}
+
+        <div ref={(r) => (this.labelNode = r)} />
+
+        <Graph
+          axesSettings={axesSettings}
+          backgroundMarks={backgroundMarks}
+          coordinatesOnHover={coordinatesOnHover}
+          currentTool={currentTool}
+          disabledLabels={disabledLabels}
+          disabledTitle={disabledTitle}
+          domain={domain}
+          labels={labels}
+          labelModeEnabled={labelModeEnabled}
+          labelsPlaceholders={labelsPlaceholders}
+          marks={marks}
+          onChangeMarks={!disabled ? onChangeMarks : undefined}
+          onChangeLabels={onChangeLabels}
+          onChangeTitle={onChangeTitle}
+          range={range}
+          size={size}
+          showLabels={showLabels}
+          showPixelGuides={showPixelGuides}
+          showTitle={showTitle}
+          title={title}
+          titlePlaceholder={titlePlaceholder}
+          tools={tools}
+          gssLineData={gssLineData}
+          onSolutionSetSelected={onSolutionSetSelected}
+          disabled={!!disabled}
+        />
+      </GraphWithControlsRoot>
+    );
+  }
+}
+
+export default GraphWithControls;

package/src/graph.jsx

@@ -0,0 +1,333 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { createGraphProps, Root, types } from '@pie-lib/plot';
+import debug from 'debug';
+
+import { Axes, AxisPropTypes } from './axis';
+import Grid from './grid';
+import { LabelType } from './labels';
+import Bg from './bg';
+import { areArraysOfObjectsEqual, isDuplicatedMark } from './utils';
+
+const log = debug('pie-lib:graphing-solution-set:graph');
+
+export const graphPropTypes = {
+  axesSettings: PropTypes.shape(AxisPropTypes),
+  backgroundMarks: PropTypes.array,
+  className: PropTypes.string,
+  collapsibleToolbar: PropTypes.bool,
+  collapsibleToolbarTitle: PropTypes.string,
+  disabledLabels: PropTypes.bool,
+  disabledTitle: PropTypes.bool,
+  domain: types.DomainType,
+  labels: PropTypes.shape(LabelType),
+  labelModeEnabled: PropTypes.bool,
+  coordinatesOnHover: PropTypes.bool,
+  marks: PropTypes.array,
+  onChangeLabels: PropTypes.func,
+  onChangeMarks: PropTypes.func,
+  onChangeTitle: PropTypes.func,
+  range: types.DomainType,
+  size: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+  }),
+  showLabels: PropTypes.bool,
+  showPixelGuides: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  title: PropTypes.string,
+  tools: PropTypes.array,
+};
+
+const getMaskSize = (size) => ({
+  x: -23,
+  y: -23,
+  width: size.width + 46,
+  height: size.height + 46,
+});
+
+export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {
+  const buildingMark = marks.filter((m) => m.building)[0];
+  let newMarks = cloneDeep(marks);
+
+  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {
+    const index = newMarks.findIndex((m) => isEqual(m, buildingMark));
+
+    if (index >= 0) {
+      newMarks.splice(index, 1);
+    }
+  }
+
+  return newMarks;
+};
+
+export class Graph extends React.Component {
+  constructor(props) {
+    super(props);
+    this.maskUid = this.generateMaskId();
+  }
+
+  static propTypes = {
+    ...graphPropTypes,
+    currentTool: PropTypes.object,
+  };
+
+  static defaultProps = {
+    onChangeMarks: () => {},
+    disabledLabels: false,
+    disabledTitle: false,
+  };
+
+  state = {};
+
+  generateMaskId() {
+    return 'graph-' + (Math.random() * 10000).toFixed();
+  }
+
+  componentDidMount = () => this.setState({ labelNode: this.labelNode });
+
+  changeMark = (oldMark, newMark) => {
+    const { onChangeMarks, marks, gssLineData } = this.props;
+
+    if (gssLineData?.selectedTool === 'solutionSet') {
+      return;
+    }
+
+    let newMarks = cloneDeep(marks);
+
+    const index = newMarks.findIndex((m) => isEqual(m, oldMark));
+
+    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {
+      newMarks.splice(index, 1, newMark);
+
+      onChangeMarks(newMarks);
+    }
+  };
+
+  completeMark = (markData) => {
+    const { currentTool, marks } = this.props;
+    const buildingMark = marks.filter((m) => m.building)[0];
+
+    if (!buildingMark || !currentTool) return;
+
+    const updatedMark = currentTool.complete(buildingMark, markData);
+
+    this.updateMarks(buildingMark, updatedMark);
+  };
+
+  updateMarks = (existing, update, addIfMissing = false) => {
+    const { onChangeMarks, marks } = this.props;
+    let newMarks = cloneDeep(marks);
+
+    if (!update || (!update.building && isDuplicatedMark(update, marks))) {
+      return;
+    }
+
+    const index = newMarks.findIndex((m) => isEqual(m, existing));
+
+    if (index >= 0) {
+      newMarks.splice(index, 1, update);
+
+      onChangeMarks(newMarks);
+    } else if (addIfMissing) {
+      onChangeMarks([...newMarks, update]);
+    }
+  };
+
+  getComponent = (mark) => {
+    if (!mark) return null;
+
+    const tool = (this.props.tools || []).find((t) => t.type === mark.type);
+
+    return (tool && tool.Component) || null;
+  };
+
+  onBgClick = (point) => {
+    const { x, y } = point || {};
+    const { labelModeEnabled, currentTool, marks, gssLineData, onSolutionSetSelected } = this.props;
+    if (gssLineData) {
+      if (gssLineData.selectedTool === 'solutionSet') {
+        onSolutionSetSelected(point);
+        return;
+      }
+      if (
+        gssLineData.numberOfLines === 1 &&
+        gssLineData.selectedTool === 'lineA' &&
+        marks.length === 1 &&
+        !marks[0].building
+      ) {
+        return;
+      }
+      if (gssLineData.numberOfLines === 2 && gssLineData.selectedTool === 'lineA' && marks.length === 2) {
+        return;
+      }
+      if (
+        gssLineData.numberOfLines === 2 &&
+        gssLineData.selectedTool === 'lineA' &&
+        marks.length === 1 &&
+        !marks[0].building
+      ) {
+        return;
+      }
+      if (
+        gssLineData.numberOfLines === 2 &&
+        gssLineData.selectedTool === 'lineB' &&
+        marks.length === 2 &&
+        !marks[1].building
+      ) {
+        return;
+      }
+    }
+    if (labelModeEnabled || !currentTool || [null, undefined].includes(x) || [null, undefined].includes(y)) {
+      return;
+    }
+
+    log('[onBgClick] x,y: ', x, y);
+
+    const buildingMark = marks.filter((m) => m.building)[0];
+    let updatedMark;
+
+    // if the building mark has a different type, we just replace it
+    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {
+      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });
+    } else {
+      updatedMark = currentTool.addPoint({ x, y }, undefined);
+    }
+
+    this.updateMarks(buildingMark, updatedMark, true);
+  };
+
+  render() {
+    const {
+      axesSettings,
+      currentTool,
+      coordinatesOnHover,
+      size,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      backgroundMarks,
+      range,
+      title,
+      labels,
+      labelModeEnabled,
+      labelsPlaceholders,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      titlePlaceholder,
+      onChangeLabels,
+      onChangeTitle,
+      mathMlOptions = {},
+      gssLineData,
+      disabled,
+    } = this.props;
+    let { marks } = this.props;
+
+    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);
+
+    const maskSize = getMaskSize(size);
+    let common = { graphProps, labelModeEnabled, gssLineData };
+
+    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
+    let solutionSet = marks.filter((mark) => mark.type === 'polygon');
+    if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
+      gssLineData.sections.forEach((section) => {
+        if (solutionSet.length === 0 || !areArraysOfObjectsEqual(section, solutionSet[0].points)) {
+          let polygon = {
+            type: 'polygon',
+            building: false,
+            closed: true,
+            points: section,
+            isSolution: false,
+          };
+          if (!disabled) marks.push(polygon);
+        }
+      });
+    }
+    //Adjusted layering of added svg elements so that polygons will be added first and lines will be added second
+    let newMarks = [];
+    newMarks.push(...marks.filter((mark) => mark.type === 'polygon'));
+    newMarks.push(...marks.filter((mark) => mark.type === 'line'));
+
+    return (
+      <Root
+        rootRef={(r) => (this.rootNode = r)}
+        disabledTitle={disabledTitle}
+        disabledLabels={disabledLabels}
+        labels={labels}
+        labelsPlaceholders={labelsPlaceholders || {}}
+        showPixelGuides={showPixelGuides}
+        showLabels={showLabels}
+        showTitle={showTitle}
+        title={title}
+        titlePlaceholder={titlePlaceholder}
+        onChangeTitle={onChangeTitle}
+        onChangeLabels={onChangeLabels}
+        mathMlOptions={mathMlOptions}
+        {...common}
+      >
+        <g
+          transform={
+            domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined
+          }
+        >
+          <Grid {...common} />
+          <Axes {...axesSettings} {...common} />
+          <Bg {...size} onClick={this.onBgClick} {...common} />
+          <mask id={`${this.maskUid}`}>
+            <rect {...maskSize} fill="white" /> {/* TODO hardcoded color */}
+          </mask>
+
+          <g id="marks" mask={`url('#${this.maskUid}')`}>
+            {(backgroundMarks || []).map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}-bg`}
+                  mark={{ ...m, disabled: true, isBackground: true }}
+                  labelNode={this.state.labelNode}
+                  onClick={this.onBgClick}
+                  {...common}
+                />
+              );
+            })}
+
+            {newMarks.map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}`}
+                  mark={m}
+                  coordinatesOnHover={coordinatesOnHover}
+                  onChange={this.changeMark}
+                  onComplete={this.completeMark}
+                  onClick={this.onBgClick}
+                  onDragStart={this.startDrag}
+                  onDragStop={this.stopDrag}
+                  labelNode={this.state.labelNode}
+                  isToolActive={currentTool && markType === currentTool.type}
+                  {...common}
+                />
+              );
+            })}
+            <foreignObject
+              ref={(labelNode) => (this.labelNode = labelNode)}
+              x="0"
+              y="0"
+              {...size}
+              style={{ pointerEvents: 'none', fontSize: '14px' }}
+            />
+          </g>
+        </g>
+      </Root>
+    );
+  }
+}
+
+export default Graph;