@pie-lib/graphing 4.0.5-next.30 → 4.0.5-next.34

package/src/coordinates-label.jsx

@@ -0,0 +1,63 @@
+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.PRIMARY_DARK,
+  '& .MuiInputBase-input': {
+    padding: 0,
+  },
+}));
+
+// eslint-disable-next-line react/prop-types
+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,239 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+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';
+
+const StyledGraphContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 'min-content',
+});
+
+const StyledControls = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: theme.spacing(1),
+  color: color.text(),
+  backgroundColor: color.primaryLight(),
+  '& button': {
+    fontSize: theme.typography.fontSize,
+  },
+}));
+
+const StyledAccordion = styled(Accordion)({
+  backgroundColor: color.primaryLight(),
+  width: '100%',
+});
+
+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',
+}));
+
+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 = ({ children, title }) => (
+  <StyledAccordion
+    elevation={0}
+    disableGutters={true}
+    square={true}
+    TransitionProps={{ timeout: { enter: 225, exit: 195 } }}
+  >
+    <StyledAccordionSummary expandIcon={<ExpandMoreIcon />}>
+      <Typography variant="subheading">{title}</Typography>
+    </StyledAccordionSummary>
+    <StyledAccordionDetails>{children}</StyledAccordionDetails>
+  </StyledAccordion>
+);
+
+Collapsible.propTypes = {
+  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), labelModeEnabled: tool === 'label' });
+
+  render() {
+    let { currentTool, labelModeEnabled } = this.state;
+    const {
+      axesSettings,
+      className,
+      coordinatesOnHover,
+      collapsibleToolbar,
+      collapsibleToolbarTitle,
+      disabled,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      draggableTools,
+      labels,
+      labelsPlaceholders,
+      onChangeLabels,
+      onChangeMarks,
+      onChangeTitle,
+      onChangeTools,
+      onUndo,
+      onRedo,
+      onReset,
+      range,
+      size,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      titlePlaceholder,
+      language,
+      removeIncompleteTool,
+      limitLabeling,
+    } = 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 || []);
+
+    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 graphActions = (
+      <React.Fragment>
+        <ToolMenu
+          currentToolType={currentTool && currentTool.type}
+          disabled={!!disabled}
+          draggableTools={draggableTools}
+          labelModeEnabled={labelModeEnabled}
+          onChange={(tool) => this.changeCurrentTool(tool, tools)}
+          toolbarTools={toolbarTools}
+          onChangeTools={onChangeTools}
+          language={language}
+        />
+
+        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} language={language} />}
+      </React.Fragment>
+    );
+
+    return (
+      <StyledGraphContainer className={className}>
+        <StyledControls>
+          {collapsibleToolbar ? (
+            <Collapsible title={collapsibleToolbarTitle}>{graphActions}</Collapsible>
+          ) : (
+            graphActions
+          )}
+        </StyledControls>
+
+        <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}
+          removeIncompleteTool={removeIncompleteTool}
+          limitLabeling={limitLabeling}
+        />
+      </StyledGraphContainer>
+    );
+  }
+}
+
+export default GraphWithControls;

package/src/graph.jsx

@@ -0,0 +1,303 @@
+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 { isDuplicatedMark } from './utils';
+
+const log = debug('pie-lib:graphing: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,
+  limitLabeling: PropTypes.bool,
+};
+
+const getMaskSize = (size) => ({
+  x: -23,
+  y: -23,
+  width: size.width + 46,
+  height: size.height + 46,
+});
+
+export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool, onChangeMarks, removeIncompleteTool }) => {
+  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);
+    }
+  }
+  if (removeIncompleteTool && !isEqual(newMarks, marks)) {
+    onChangeMarks(newMarks);
+  }
+  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 = {};
+  _justDragged = false;
+
+  startDrag = () => {
+    this._justDragged = false;
+  };
+
+  stopDrag = () => {
+    this._justDragged = true;
+    // Reset after a short delay — long enough for any trailing click/bg-click to fire first.
+    setTimeout(() => {
+      this._justDragged = false;
+    }, 300);
+  };
+
+  generateMaskId() {
+    return 'graph-' + (Math.random() * 10000).toFixed();
+  }
+
+  componentDidMount = () => this.setState({ labelNode: this.labelNode });
+
+  changeMark = (oldMark, newMark) => {
+    const { onChangeMarks, marks } = this.props;
+    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 } = this.props;
+
+    if (this._justDragged) {
+      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,
+      limitLabeling,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      titlePlaceholder,
+      onChangeLabels,
+      onChangeTitle,
+      mathMlOptions = {},
+      onChangeMarks,
+      removeIncompleteTool,
+    } = this.props;
+    let { marks } = this.props;
+
+    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);
+
+    const maskSize = getMaskSize(size);
+    const common = { graphProps, labelModeEnabled, limitLabeling };
+
+    marks = removeBuildingToolIfCurrentToolDiffers({
+      marks: marks || [],
+      currentTool,
+      onChangeMarks,
+      removeIncompleteTool,
+    });
+
+    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}
+                />
+              );
+            })}
+
+            {marks.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;