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

package/src/labels.jsx

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

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

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