@pie-lib/graphing-solution-set 2.16.0-beta.0

package/src/graph-with-controls.jsx

@@ -0,0 +1,263 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import uniq from 'lodash/uniq';
+import isString from 'lodash/isString';
+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 { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/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 Collapsible = ({ classes, children, title }) => (
+  <ExpansionPanel elevation={0} className={classes.expansionPanel} disabledGutters={true} square={true}>
+    <ExpansionPanelSummary
+      classes={{
+        root: classes.summaryRoot,
+        content: classes.summaryContent,
+      }}
+      expandIcon={<ExpandMoreIcon />}
+    >
+      <Typography variant="subheading">{title}</Typography>
+    </ExpansionPanelSummary>
+    <ExpansionPanelDetails className={classes.details}>{children}</ExpansionPanelDetails>
+  </ExpansionPanel>
+);
+
+Collapsible.propTypes = {
+  classes: PropTypes.object,
+  children: PropTypes.array,
+  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), // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
+    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,
+      classes,
+      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;
+
+    // make sure only valid tool types are kept (string) and without duplicates
+    toolbarTools = uniq(toolbarTools || []).filter((tT) => !!isString(tT)) || [];
+
+    // keep only the backgroundMarks that have valid types
+    backgroundMarks = filterByValidToolTypes(backgroundMarks || []);
+
+    // keep only the marks that have types which appear in toolbar
+    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);
+
+    // set current tool if there's no current tool or if the existing one is no longer available
+    if (!currentTool || !toolIsAvailable(tools, currentTool)) {
+      currentTool = getAvailableTool(tools);
+    }
+
+    const gssActions = gssLineData && (
+      <React.Fragment>
+        <ToolMenu
+          numberOfLines={gssLineData.numberOfLines}
+          gssLineData={gssLineData}
+          onChange={onChangeGssLineData}
+          disabled={!!disabled}
+          language={language}
+        />
+        {!disabled && (
+          <UndoRedo
+            className={classes.undoRedoOuterDiv}
+            onUndo={onUndo}
+            onRedo={onRedo}
+            onReset={onCustomReset}
+            language={language}
+          />
+        )}
+      </React.Fragment>
+    );
+
+    return (
+      <div className={classNames(classes.graphWithControls, className)}>
+        {!disableToolbar && (
+          <div className={classes.controls}>
+            {collapsibleToolbar ? (
+              <Collapsible classes={classes} title={collapsibleToolbarTitle}>
+                {gssActions}
+              </Collapsible>
+            ) : (
+              gssActions
+            )}
+          </div>
+        )}
+
+        <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}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  graphWithControls: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'min-content',
+  },
+  controls: {
+    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',
+    },
+  },
+  expansionPanel: {
+    backgroundColor: color.primaryLight(),
+    width: '100%',
+  },
+  summaryRoot: {
+    padding: `0 ${theme.spacing.unit}px`,
+    minHeight: '32px !important',
+  },
+  summaryContent: {
+    margin: '4px 0 !important',
+  },
+  details: {
+    padding: 0,
+    marginTop: theme.spacing.unit,
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  undoRedoOuterDiv: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: '.5rem',
+  },
+});
+
+export default withStyles(styles)(GraphWithControls);

package/src/graph.jsx

@@ -0,0 +1,334 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import { Root, types, createGraphProps } 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 { isDuplicatedMark, areArraysOfObjectsEqual } 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;