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

package/src/labels.jsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { types } from '@pie-lib/plot';
+import { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
+import cn from 'classnames';
+
+const rotations = {
+  left: -90,
+  top: 0,
+  bottom: 0,
+  right: 90,
+};
+
+export const getTransform = (side, width, height) => {
+  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;
+
+  if (side === 'left') {
+    return t(-20, height / 2, rotations[side]);
+  }
+  if (side === 'right') {
+    return t(width + 30, height / 2, rotations[side]);
+  }
+  if (side === 'top') {
+    return t(width / 2, -20, rotations[side]);
+  }
+  if (side === 'bottom') {
+    return t(width / 2, height + 30, rotations[side]);
+  }
+};
+
+const getY = (side, height) => {
+  switch (side) {
+    case 'left':
+      return -height;
+    case 'top':
+      return -height;
+    case 'right':
+      return -height - 10;
+    default:
+      return -height + 10;
+  }
+};
+
+class RawLabel extends React.Component {
+  static propTypes = {
+    text: PropTypes.string,
+    side: PropTypes.string,
+    classes: PropTypes.object,
+    disabledLabel: PropTypes.bool,
+    placeholder: PropTypes.string,
+    graphProps: types.GraphPropsType.isRequired,
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onChange: () => {},
+  };
+
+  render() {
+    const { disabledLabel, placeholder, text, side, graphProps, classes, onChange, mathMlOptions = {} } = this.props;
+    const { size, domain, range } = graphProps;
+    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
+    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
+
+    const transform = getTransform(side, totalWidth, totalHeight);
+    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
+    const height = 36;
+    const y = getY(side, height);
+    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
+
+    const activePlugins = [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'math',
+      // 'languageCharacters'
+    ];
+
+    return (
+      <foreignObject
+        x={-(width / 2)}
+        y={y}
+        width={width}
+        height={finalHeight}
+        transform={transform}
+        textAnchor="middle"
+      >
+        <Readable false>
+          <EditableHtml
+            className={cn(
+              {
+                [classes.bottomLabel]: side === 'bottom',
+                [classes.disabledAxisLabel]: disabledLabel,
+              },
+              classes.axisLabel,
+            )}
+            markup={text || ''}
+            onChange={onChange}
+            placeholder={!disabledLabel && placeholder}
+            toolbarOpts={{
+              position: side === 'bottom' ? 'top' : 'bottom',
+              noPadding: true,
+              noBorder: true,
+            }}
+            activePlugins={activePlugins}
+            mathMlOptions={mathMlOptions}
+          />
+        </Readable>
+      </foreignObject>
+    );
+  }
+}
+
+const Label = withStyles((theme) => ({
+  label: {
+    fill: color.defaults.SECONDARY,
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px',
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none',
+  },
+  bottomLabel: {
+    marginTop: '44px',
+  },
+}))(RawLabel);
+
+export const LabelType = {
+  left: PropTypes.string,
+  top: PropTypes.string,
+  bottom: PropTypes.string,
+  right: PropTypes.string,
+};
+
+export class Labels extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    disabledLabels: PropTypes.bool,
+    placeholders: PropTypes.object,
+    value: PropTypes.shape(LabelType),
+    graphProps: PropTypes.object,
+    onChange: PropTypes.object,
+  };
+
+  static defaultProps = {};
+
+  onChangeLabel = (newValue, side) => {
+    const { value, onChange } = this.props;
+    const labels = {
+      ...value,
+      [side]: newValue,
+    };
+
+    onChange(labels);
+  };
+
+  render() {
+    const { disabledLabels, placeholders = {}, value = {}, graphProps, mathMlOptions = {} } = this.props;
+
+    return (
+      <React.Fragment>
+        <Label
+          key="left"
+          side="left"
+          text={value.left}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.left}
+          graphProps={graphProps}
+          onChange={(value) => this.onChangeLabel(value, 'left')}
+          mathMlOptions={mathMlOptions}
+        />
+        <Label
+          key="top"
+          side="top"
+          text={value.top}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.top}
+          graphProps={graphProps}
+          onChange={(value) => this.onChangeLabel(value, 'top')}
+          mathMlOptions={mathMlOptions}
+        />
+        <Label
+          key="bottom"
+          side="bottom"
+          text={value.bottom}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.bottom}
+          graphProps={graphProps}
+          onChange={(value) => this.onChangeLabel(value, 'bottom')}
+          mathMlOptions={mathMlOptions}
+        />
+        <Label
+          key="right"
+          side="right"
+          text={value.right}
+          disabledLabel={disabledLabels}
+          placeholder={placeholders.right}
+          graphProps={graphProps}
+          onChange={(value) => this.onChangeLabel(value, 'right')}
+          mathMlOptions={mathMlOptions}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+export default Labels;

package/src/mark-label.jsx

@@ -0,0 +1,136 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AutosizeInput from 'react-input-autosize';
+import { useDebounce } from './use-debounce';
+import { types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+
+const styles = (theme) => ({
+  input: {
+    float: 'right',
+    padding: theme.spacing.unit * 0.5,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    border: `solid 1px ${color.defaults.SECONDARY}`,
+    borderRadius: '3px',
+    color: color.defaults.PRIMARY_DARK,
+  },
+  disabled: {
+    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,
+    background: theme.palette.background.paper,
+  },
+  disabledMark: {
+    border: `solid 1px ${color.disabled()}`,
+    background: theme.palette.background.paper,
+    color: color.disabled(),
+  },
+});
+
+export const position = (graphProps, mark, rect) => {
+  rect = rect || { width: 0, height: 0 };
+  const { scale, domain, range } = graphProps;
+  const shift = 10;
+
+  const rightEdge = scale.x(mark.x) + rect.width + shift;
+  const bottomEdge = scale.y(mark.y) + rect.height + shift;
+
+  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';
+  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
+
+  return `${v}-${h}`;
+};
+
+export const coordinates = (graphProps, mark, rect, position) => {
+  const { scale } = graphProps;
+  const shift = 10;
+  rect = rect || { width: 0, height: 0 };
+
+  switch (position) {
+    case 'bottom-right': {
+      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };
+    }
+    case 'bottom-left': {
+      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };
+    }
+    case 'top-left': {
+      return {
+        left: scale.x(mark.x) - shift - rect.width,
+        top: scale.y(mark.y) - shift - rect.height,
+      };
+    }
+    case 'top-right': {
+      return {
+        left: scale.x(mark.x) + shift,
+        top: scale.y(mark.y) - shift - rect.height,
+      };
+    }
+  }
+};
+
+export const MarkLabel = (props) => {
+  const [input, setInput] = useState(null);
+  const _ref = useCallback((node) => setInput(node));
+
+  const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;
+
+  const [label, setLabel] = useState(mark.label);
+
+  const onChange = (e) => setLabel(e.target.value);
+
+  const debouncedLabel = useDebounce(label, 200);
+
+  // useState only sets the value once, to synch props to state need useEffect
+  useEffect(() => {
+    setLabel(mark.label);
+  }, [mark.label]);
+
+  // pick up the change to debouncedLabel and save it
+  useEffect(() => {
+    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
+      props.onChange(debouncedLabel);
+    }
+  }, [debouncedLabel]);
+
+  const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
+  const pos = position(graphProps, mark, rect);
+  const leftTop = coordinates(graphProps, mark, rect, pos);
+
+  const style = {
+    position: 'fixed',
+    pointerEvents: 'auto',
+    ...leftTop,
+  };
+
+  const disabledInput = disabled || mark.disabled;
+
+  return (
+    <AutosizeInput
+      inputRef={(r) => {
+        _ref(r);
+        externalInputRef(r);
+      }}
+      disabled={disabledInput}
+      inputClassName={cn(classes.input, {
+        [classes.disabled]: disabled,
+        [classes.disabledMark]: mark.disabled,
+      })}
+      value={label}
+      style={style}
+      onChange={onChange}
+    />
+  );
+};
+
+MarkLabel.propTypes = {
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType,
+  classes: PropTypes.object,
+  inputRef: PropTypes.func,
+  mark: PropTypes.object,
+  theme: PropTypes.object,
+};
+
+export default withStyles(styles, { withTheme: true })(MarkLabel);

package/src/toggle-bar.jsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import cn from 'classnames';
+import Button from '@material-ui/core/Button';
+import { color } from '@pie-lib/render-ui';
+import { allTools } from './tools';
+import { withDragContext, DragSource, DropTarget } from '@pie-lib/drag';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const buttonStyles = () => ({
+  root: {
+    color: color.text(),
+  },
+  selected: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.secondary()}`,
+  },
+  notSelected: {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.background(),
+  },
+  disabled: {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.disabled(),
+  },
+});
+
+export const MiniButton = withStyles(buttonStyles)((props) => {
+  const { disabled, classes, className, selected, value, onClick, language } = props;
+  const translatorKey = value.toLowerCase();
+
+  return (
+    <Button
+      size="small"
+      disabled={disabled}
+      className={cn(classes.root, selected && classes.selected, className)}
+      classes={{ disabled: cn(disabled && classes.disabled) }}
+      value={value}
+      key={value}
+      variant="outlined"
+      onClick={(e) => onClick({ ...e, buttonValue: value })}
+    >
+      {translator.t(`graphing.${translatorKey}`, { lng: language })}
+    </Button>
+  );
+});
+
+MiniButton.propTypes = {
+  disabled: PropTypes.bool,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  disabledClassName: PropTypes.string,
+  selected: PropTypes.bool,
+  value: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export class ToggleBar extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.string),
+    selectedToolType: PropTypes.string,
+    disabled: PropTypes.bool,
+    draggableTools: PropTypes.bool,
+    onChange: PropTypes.func,
+    onChangeToolsOrder: PropTypes.func,
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {};
+
+  select = (e) => this.props.onChange(e.buttonValue || e.target.textContent);
+
+  moveTool = (dragIndex, hoverIndex) => {
+    const { options, onChangeToolsOrder } = this.props;
+    const dragged = options[dragIndex];
+
+    options.splice(dragIndex, 1);
+    options.splice(hoverIndex, 0, dragged);
+
+    onChangeToolsOrder(options);
+  };
+
+  render() {
+    const { classes, className, disabled, options, selectedToolType, draggableTools, language } = this.props;
+
+    return (
+      <div className={cn(className, classes.toolsContainer)}>
+        {(options || []).map((option, index) => {
+          if ((allTools || []).includes(option)) {
+            const isSelected = option === selectedToolType;
+            const toolRef = React.createRef();
+
+            return (
+              <DragTool
+                key={option}
+                index={index}
+                draggable={draggableTools}
+                moveTool={this.moveTool}
+                classes={classes}
+                toolRef={toolRef}
+              >
+                <MiniButton
+                  className={cn(classes.button, isSelected && classes.selected)}
+                  disabled={disabled}
+                  disableRipple={true}
+                  onClick={this.select}
+                  value={option}
+                  selected={isSelected}
+                  language={language}
+                />
+              </DragTool>
+            );
+          }
+        })}
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  toolsContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  button: {
+    marginRight: theme.spacing.unit / 2,
+    marginBottom: theme.spacing.unit / 2,
+    color: color.text(),
+  },
+  under: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: -1,
+    pointerEvents: 'none',
+  },
+  wrapper: {
+    position: 'relative',
+  },
+  hidden: {
+    opacity: 0,
+  },
+});
+
+export default withDragContext(withStyles(styles)(ToggleBar));
+
+const DRAG_TYPE = 'tool';
+
+export class Item extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    connectDragSource: PropTypes.func.isRequired,
+    connectDragPreview: PropTypes.func.isRequired,
+    connectDropTarget: PropTypes.func.isRequired,
+    isDragging: PropTypes.bool,
+    toolRef: PropTypes.any,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const {
+      classes,
+      children,
+      connectDragSource,
+      connectDropTarget,
+      connectDragPreview,
+      isDragging,
+      toolRef,
+    } = this.props;
+
+    return (
+      <div className={classes.wrapper} ref={toolRef}>
+        {connectDragSource(connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>))}
+        {connectDragPreview(<div className={classes.under}>{children}</div>)}
+      </div>
+    );
+  }
+}
+
+const itemSource = {
+  canDrag(props) {
+    return props.draggable;
+  },
+  beginDrag(props) {
+    return {
+      index: props.index,
+    };
+  },
+};
+
+const itemTarget = {
+  hover(props, monitor) {
+    const dragIndex = monitor.getItem().index;
+    const { toolRef, index: hoverIndex } = props;
+
+    if (dragIndex === hoverIndex || !toolRef.current) {
+      return;
+    }
+
+    const hoverBoundingRect = toolRef.current?.getBoundingClientRect();
+    const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+    const clientOffset = monitor.getClientOffset();
+    const hoverClientX = clientOffset.x - hoverBoundingRect.left;
+
+    if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
+      return;
+    }
+
+    if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
+      return;
+    }
+
+    props.moveTool(dragIndex, hoverIndex);
+    monitor.getItem().index = hoverIndex;
+  },
+};
+
+const collectTarget = (connect) => ({ connectDropTarget: connect.dropTarget() });
+
+const collectSource = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  connectDragPreview: connect.dragPreview(),
+  isDragging: monitor.isDragging(),
+});
+
+const DragTool = DropTarget(
+  DRAG_TYPE,
+  itemTarget,
+  collectTarget,
+)(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));