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

package/src/labels.jsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { types } from '@pie-lib/plot';
+import { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+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':
+    case 'top':
+      return -height;
+    case 'right':
+      return -height - 10;
+    default:
+      return -height + 10;
+  }
+};
+
+const PREFIX = 'Label';
+const classes = {
+  label: `${PREFIX}-label`,
+  axisLabel: `${PREFIX}-axisLabel`,
+  disabledAxisLabel: `${PREFIX}-disabledAxisLabel`,
+  bottomLabel: `${PREFIX}-bottomLabel`,
+};
+
+const Root = styled('div')(({ theme }) => ({
+  [`& .${classes.label}`]: {
+    fill: color.defaults.SECONDARY,
+  },
+  [`& .${classes.axisLabel}`]: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px',
+  },
+  [`& .${classes.disabledAxisLabel}`]: {
+    pointerEvents: 'none',
+  },
+  [`& .${classes.bottomLabel}`]: {
+    marginTop: '44px',
+  },
+}));
+
+class RawLabel extends React.Component {
+  static propTypes = {
+    text: PropTypes.string,
+    side: PropTypes.string,
+    disabledLabel: PropTypes.bool,
+    placeholder: PropTypes.string,
+    graphProps: types.GraphPropsType.isRequired,
+    onChange: PropTypes.func,
+    mathMlOptions: PropTypes.object,
+  };
+
+  static defaultProps = {
+    onChange: () => {},
+  };
+
+  render() {
+    const { disabledLabel, placeholder, text, side, graphProps, 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'];
+
+    return (
+      <Root>
+        <foreignObject
+          x={-(width / 2)}
+          y={y}
+          width={width}
+          height={finalHeight}
+          transform={transform}
+          textAnchor="middle"
+        >
+          <Readable>
+            <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>
+      </Root>
+    );
+  }
+}
+
+export const LabelType = {
+  left: PropTypes.string,
+  top: PropTypes.string,
+  bottom: PropTypes.string,
+  right: PropTypes.string,
+};
+
+export class Labels extends React.Component {
+  static propTypes = {
+    disabledLabels: PropTypes.bool,
+    placeholders: PropTypes.object,
+    value: PropTypes.shape(LabelType),
+    graphProps: PropTypes.object,
+    onChange: PropTypes.func,
+    mathMlOptions: PropTypes.object,
+  };
+
+  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 (
+      <>
+        {['left', 'top', 'bottom', 'right'].map((side) => (
+          <RawLabel
+            key={side}
+            side={side}
+            text={value[side]}
+            disabledLabel={disabledLabels}
+            placeholder={placeholders[side]}
+            graphProps={graphProps}
+            onChange={(val) => this.onChangeLabel(val, side)}
+            mathMlOptions={mathMlOptions}
+          />
+        ))}
+      </>
+    );
+  }
+}
+
+export default RawLabel;

package/src/mark-label.jsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/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 StyledAutosizeInput = styled(AutosizeInput, {
+  shouldForwardProp: (prop) => !['disabled', 'markDisabled'].includes(prop),
+})(({ theme, disabled, markDisabled }) => ({
+  '& input': {
+    float: 'right',
+    padding: theme.spacing(0.5),
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    border: `solid 1px ${disabled ? color.defaults.PRIMARY_DARK : markDisabled ? color.disabled() : color.defaults.SECONDARY}`,
+    borderRadius: '3px',
+    color: markDisabled ? color.disabled() : color.defaults.PRIMARY_DARK,
+    background: disabled || markDisabled ? theme.palette.background.paper : 'transparent',
+  },
+}));
+
+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, disabled, inputRef: externalInputRef } = 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 (
+    <StyledAutosizeInput
+      inputRef={(r) => {
+        _ref(r);
+        externalInputRef(r);
+      }}
+      disabled={disabledInput}
+      markDisabled={mark.disabled}
+      value={label}
+      style={style}
+      onChange={onChange}
+    />
+  );
+};
+
+MarkLabel.propTypes = {
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType,
+  inputRef: PropTypes.func,
+  mark: PropTypes.object,
+  theme: PropTypes.object,
+};
+
+export default MarkLabel;

package/src/toggle-bar.jsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import { color } from '@pie-lib/render-ui';
+import { allTools } from './tools';
+import { DragProvider } from '@pie-lib/drag';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { arrayMove } from '@dnd-kit/sortable';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const StyledMiniButton = styled(Button, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop),
+})(({ selected, disabled }) => ({
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...(selected && {
+    border: `1px solid ${color.secondary()}`,
+  }),
+  ...(!selected && {
+    '& span': {
+      color: color.primary(),
+    },
+  }),
+  ...(disabled && {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.disabled(),
+  }),
+}));
+
+export const MiniButton = (props) => {
+  const { disabled, className, selected, value, onClick, language } = props;
+  const translatorKey = value.toLowerCase();
+
+  return (
+    <StyledMiniButton
+      size="small"
+      disabled={disabled}
+      className={className}
+      selected={selected}
+      value={value}
+      key={value}
+      variant="outlined"
+      onClick={(e) => onClick({ ...e, buttonValue: value })}
+    >
+      {translator.t(`graphing.${translatorKey}`, { lng: language })}
+    </StyledMiniButton>
+  );
+};
+
+MiniButton.propTypes = {
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  disabledClassName: PropTypes.string,
+  selected: PropTypes.bool,
+  value: PropTypes.string,
+  onClick: PropTypes.func,
+  language: PropTypes.string,
+};
+
+const StyledToolsContainer = styled('div')(() => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledButton = styled(MiniButton)(({ theme }) => ({
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(0.5),
+  color: color.text(),
+}));
+
+const StyledWrapper = styled('div')({
+  position: 'relative',
+});
+
+export class ToggleBar extends React.Component {
+  static propTypes = {
+    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 newOptions = arrayMove(options, dragIndex, hoverIndex);
+
+    onChangeToolsOrder(newOptions);
+  };
+
+  handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (!over || !active) return;
+
+    const activeData = active.data.current;
+    const overData = over.data.current;
+
+    if (activeData?.type === 'tool' && overData?.type === 'tool') {
+      const dragIndex = activeData.index;
+      const hoverIndex = overData.index;
+
+      if (dragIndex !== hoverIndex) {
+        this.moveTool(dragIndex, hoverIndex);
+      }
+    }
+  };
+
+  render() {
+    const { className, disabled, options, selectedToolType, draggableTools, language } = this.props;
+
+    return (
+      <DragProvider onDragEnd={this.handleDragEnd}>
+        <StyledToolsContainer className={className}>
+          {(options || []).map((option, index) => {
+            if ((allTools || []).includes(option)) {
+              const isSelected = option === selectedToolType;
+              const toolRef = React.createRef();
+
+              return (
+                <DragTool
+                  key={option}
+                  index={index}
+                  value={option}
+                  draggable={draggableTools}
+                  moveTool={this.moveTool}
+                  toolRef={toolRef}
+                >
+                  <StyledButton
+                    disabled={disabled}
+                    disableRipple={true}
+                    onClick={this.select}
+                    value={option}
+                    selected={isSelected}
+                    language={language}
+                  />
+                </DragTool>
+              );
+            }
+          })}
+        </StyledToolsContainer>
+      </DragProvider>
+    );
+  }
+}
+
+// DragTool functional component using @dnd-kit hooks
+function DragTool({ children, index, draggable, toolRef, value }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useDraggable({
+    id: `tool-${value}-${index}`,
+    disabled: !draggable,
+    data: {
+      type: 'tool',
+      index,
+      value,
+    },
+  });
+
+  const { setNodeRef: setDropNodeRef } = useDroppable({
+    id: `drop-tool-${value}-${index}`,
+    data: {
+      type: 'tool',
+      index,
+      accepts: ['tool'],
+    },
+  });
+
+  // Combine refs
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+    if (toolRef?.current) {
+      toolRef.current = node;
+    }
+  };
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <StyledWrapper ref={setNodeRef} style={style}>
+      <div {...attributes} {...listeners}>
+        {children}
+      </div>
+    </StyledWrapper>
+  );
+}
+
+DragTool.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number,
+  draggable: PropTypes.bool,
+  moveTool: PropTypes.func,
+  toolRef: PropTypes.object,
+  value: PropTypes.string,
+};
+
+export default ToggleBar;