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

package/src/coordinates-label.jsx

@@ -1,62 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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

@@ -1,333 +0,0 @@
-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;