@pie-lib/plot 4.0.4-next.3 → 4.0.4-next.31

package/src/graph-props.js

@@ -1,34 +0,0 @@
-import invariant from 'invariant';
-import { snapTo } from './utils';
-import { scaleLinear } from 'd3-scale';
-
-const createSnapMinAndMax = ({ min, max, step }) => {
-  // for graphing, if step is a value with decimals, we have to calculate the min & max for the grid taking in consideration that 0 has to be exactly in the middle
-  // for example, if min: -5 & max: 5 & step: 0.75, in order to keep 0 in the middle we have to set min: -4.5 & max: 4.5
-
-  return {
-    step,
-    min: parseInt(min / step) * step,
-    max: parseInt(max / step) * step,
-  };
-};
-
-export const create = (domain, range, size, getRootNode) => {
-  invariant(domain.min < domain.max, 'domain: min must be less than max');
-  invariant(range.min < range.max, 'range: min must be less than max');
-
-  const domainMinMax = createSnapMinAndMax(domain);
-  const rangeMinMax = createSnapMinAndMax(range);
-
-  const scale = {
-    x: scaleLinear().domain([domain.min, domain.max]).range([0, size.width]),
-    y: scaleLinear().domain([range.max, range.min]).range([0, size.height]),
-  };
-
-  const snap = {
-    x: snapTo.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),
-    y: snapTo.bind(null, rangeMinMax.min, rangeMinMax.max, rangeMinMax.step),
-  };
-
-  return { scale, snap, domain, range, size, getRootNode };
-};

package/src/grid-draggable.jsx

@@ -1,332 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { GraphPropsType } from './types';
-import { DraggableCore } from './draggable';
-import debug from 'debug';
-import * as utils from './utils';
-import { isFunction } from 'lodash-es';
-import invariant from 'invariant';
-import { pointer } from 'd3-selection';
-
-const log = debug('pie-lib:plot:grid-draggable');
-
-export const deltaFn = (scale, snap, val) => (delta) => {
-  const normalized = delta + scale(0);
-  const inverted = scale.invert(normalized);
-
-  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;
-
-  return fixDecimalsArithmetic;
-};
-
-/**
- * Creates a Component that is draggable, within a bounded grid.
- * @param {*} opts
- */
-export const gridDraggable = (opts) => (Comp) => {
-  invariant(
-    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),
-    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }',
-  );
-  return class GridDraggable extends React.Component {
-    static propTypes = {
-      disabled: PropTypes.bool,
-      onDragStart: PropTypes.func,
-      onDrag: PropTypes.func,
-      onDragStop: PropTypes.func,
-      onClick: PropTypes.func,
-      onMove: PropTypes.func,
-      graphProps: GraphPropsType.isRequired,
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        startX: null,
-        startY: null,
-      };
-    }
-
-    grid = () => {
-      const { graphProps } = this.props;
-      const { scale, domain, range } = graphProps;
-      return {
-        x: scale.x(domain.step) - scale.x(0),
-        y: scale.y(range.step) - scale.y(0),
-      };
-    };
-    onStart = (e) => {
-      const { onDragStart } = this.props;
-      if (document.activeElement) {
-        document.activeElement.blur();
-      }
-      this._didDrag = false;
-      this.setState({ startX: e.clientX, startY: e.clientY });
-
-      // Intercept the native 'click' event that the browser fires after mouseup.
-      // We use a one-time capture-phase listener so we can suppress it when a
-      // real drag occurred, preventing Bg's d3 click listener from creating a new mark.
-      const target = e.target;
-      const onNativeClick = (clickEvent) => {
-        target.removeEventListener('click', onNativeClick, true);
-        if (this._didDrag) {
-          clickEvent.stopPropagation();
-          clickEvent.preventDefault();
-        }
-      };
-      target.addEventListener('click', onNativeClick, true);
-
-      if (onDragStart) {
-        onDragStart();
-      }
-    };
-    position = () => {
-      const { x, y } = opts.anchorPoint(this.props);
-      const { graphProps } = this.props;
-      const { scale, snap } = graphProps;
-
-      return {
-        anchorPoint: {
-          x,
-          y,
-        },
-        x: deltaFn(scale.x, snap.x, x),
-        y: deltaFn(scale.y, snap.y, y),
-      };
-    };
-
-    tiny = (key, event) => {
-      const K = key.toUpperCase();
-      const end = event[`client${K}`];
-      const start = this.state[`start${K}`];
-      const delta = Math.abs(end - start);
-      const out = delta < Math.abs(this.grid()[key]) / 10;
-      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);
-      return out;
-    };
-
-    getScaledBounds = () => {
-      const bounds = opts.bounds(this.props, this.props.graphProps);
-      log('bounds: ', bounds);
-      const grid = this.grid();
-
-      let scaled = {
-        left: bounds.left * grid.x,
-        right: bounds.right * grid.x,
-        top: bounds.top * grid.y,
-        bottom: bounds.bottom * grid.y,
-      };
-
-      // Normalize Y bounds so that:
-      // - top is <= 0 (negative or zero, allowing upward movement)
-      // - bottom is >= 0 (positive or zero, allowing downward movement)
-      // This compensates for the inverted Y scale (range.max -> 0, range.min -> size.height)
-      // Add a small buffer (1 grid unit) to ensure we can reach exact boundaries
-      const buffer = Math.abs(grid.y);
-      scaled = {
-        ...scaled,
-        top: Math.min(0, scaled.top) - buffer, // More negative to allow reaching max
-        bottom: Math.abs(scaled.bottom) + buffer, // More positive to allow reaching min
-      };
-
-      log('[getScaledBounds]: ', scaled);
-      return scaled;
-    };
-
-    /**
-     * Retrieves the coordinates of a mouse or touch event relative to an SVG element.
-     * This method has been overwritten from the d3-selection library's clientPoint to handle touch events and improve clarity.
-     * @param {Element} node - The SVG element.
-     * @param {Event} event - The mouse or touch event.
-     * @returns {Array} - An array containing the coordinates [x, y] relative to the SVG element.
-     */
-    getClientPoint = (node, event) => {
-      if (!node || !event) {
-        return null;
-      }
-      const svg = node.ownerSVGElement || node;
-
-      if (svg && svg.createSVGPoint) {
-        let point = svg.createSVGPoint();
-        // Check if it's a touch event and use the first touch point
-        if (event.touches && event.touches.length > 0) {
-          const touch = event.touches[0];
-          point.x = touch.clientX;
-          point.y = touch.clientY;
-        } else {
-          // Fall back to mouse event properties
-          point.x = event.clientX;
-          point.y = event.clientY;
-        }
-        if (node.getScreenCTM) {
-          point = point.matrixTransform(node.getScreenCTM().inverse());
-          return [point.x, point.y];
-        } else {
-          return null;
-        }
-      }
-
-      const rect = node.getBoundingClientRect();
-      if (rect) {
-        return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
-      } else {
-        return null;
-      }
-    };
-
-    skipDragOutsideOfBounds = (dd, e, graphProps) => {
-      // Ignore drag movement outside of the domain and range.
-      const rootNode = graphProps.getRootNode();
-      const clientPoint = this.getClientPoint(rootNode, e);
-
-      if (clientPoint === null) {
-        return true; // Indicate that the drag is outside of bounds
-      }
-
-      const [rawX, rawY] = clientPoint;
-      const { scale, domain, range } = graphProps;
-      let x = scale.x.invert(rawX);
-      let y = scale.y.invert(rawY);
-
-      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);
-      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);
-      return xOutside || yOutside;
-    };
-
-    onDrag = (e, dd) => {
-      const { onDrag, graphProps, disabled } = this.props;
-
-      // Track drag movement BEFORE any early returns so that onStop always
-      // knows a real drag occurred, even when onDrag prop is absent or disabled.
-      if (Math.abs(dd.deltaX) > 1 || Math.abs(dd.deltaY) > 1) {
-        this._didDrag = true;
-      }
-
-      if (!onDrag || disabled) {
-        return;
-      }
-
-      const bounds = this.getScaledBounds();
-
-      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {
-        return;
-      }
-
-      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {
-        return;
-      }
-
-      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {
-        return;
-      }
-
-      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {
-        return;
-      }
-
-      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {
-        return;
-      }
-
-      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });
-
-      if (dragArg !== undefined || dragArg !== null) {
-        onDrag(dragArg);
-      }
-    };
-
-    getDelta = (point) => {
-      const pos = this.position();
-
-      const p = {
-        x: pos.x(point.x),
-        y: pos.y(point.y),
-      };
-
-      return utils.getDelta(pos.anchorPoint, p);
-    };
-
-    applyDelta = (point) => {
-      const delta = this.getDelta(point);
-      log('[applyDelta] delta:', delta);
-      return opts.fromDelta(this.props, delta);
-    };
-
-    onStop = (e, dd) => {
-      log('[onStop] dd:', dd);
-      const { onDragStop, onClick, disabled } = this.props;
-
-      if (onDragStop && !disabled) {
-        onDragStop();
-      }
-
-      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);
-      const isClick = !this._didDrag;
-
-      if (isClick) {
-        // For non-disabled marks, stop propagation so the Bg d3 listener
-        // doesn't also create a new mark on top of this one.
-        // Disabled/background marks allow propagation so Bg can handle the click.
-        if (!disabled && typeof e?.stopPropagation === 'function') {
-          e.stopPropagation();
-        }
-
-        if (onClick) {
-          log('call onClick');
-          this.setState({ startX: null, startY: null });
-          const { graphProps } = this.props;
-          const { scale, snap } = graphProps;
-          try {
-            const [rawX, rawY] = pointer(e, e.target);
-            let x = scale.x.invert(rawX);
-            let y = scale.y.invert(rawY);
-            x = snap.x(x);
-            y = snap.y(y);
-            onClick({ x, y });
-          } catch (_) {
-            // pointer() can fail on SVG elements (e.g. <circle>) that lack a valid
-            // coordinate transform. Label-mode callbacks use props data, not coords.
-            onClick({});
-          }
-        }
-
-        return false;
-      }
-
-      this.setState({ startX: null, startY: null });
-      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.
-      return false;
-    };
-
-    render() {
-      // we extract onClick here to prevent it from being passed to the DraggableCore
-      // and to prevent it from being included in the ...rest that gets passed to the Comp
-      // because otherwise it is called on every drag event
-      // eslint-disable-next-line no-unused-vars
-      const { disabled, onClick, ...rest } = this.props;
-      const grid = this.grid();
-
-      // prevent the text select icon from rendering.
-      const onMouseDown = (e) => e.nativeEvent.preventDefault();
-
-      /**
-       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.
-       * But they aren't being unset. If we continue with this lib, we'll have to fix this.
-       */
-      const isDragging = this.state ? !!this.state.startX : false;
-
-      return (
-        <DraggableCore
-          onMouseDown={onMouseDown}
-          onStart={this.onStart}
-          onDrag={this.onDrag}
-          onStop={this.onStop}
-          axis={opts.axis || 'both'}
-          grid={[grid.x, grid.y]}
-        >
-          <Comp {...rest} disabled={disabled} isDragging={isDragging} onClick={isDragging ? undefined : onClick} />
-        </DraggableCore>
-      );
-    }
-  };
-};

package/src/index.js

@@ -1,9 +0,0 @@
-import Root from './root';
-import Draggable from './draggable';
-import { gridDraggable } from './grid-draggable';
-import * as utils from './utils';
-import * as trig from './trig';
-import * as types from './types';
-import { create as createGraphProps } from './graph-props';
-
-export { Root, Draggable, gridDraggable, utils, trig, types, createGraphProps };

package/src/label.jsx

@@ -1,199 +0,0 @@
-import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Readable } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import PropTypes from 'prop-types';
-import { extractTextFromHTML, isEmptyString } from './utils';
-
-const styles = {
-  axisLabel: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 4,
-    padding: '4px 0',
-  },
-  chartLabel: {
-    fontSize: 16,
-    textAlign: 'center',
-    margin: 4,
-    padding: '4px 0',
-  },
-  disabledLabel: {
-    pointerEvents: 'none',
-    width: '100%',
-  },
-  editLabel: {
-    position: 'absolute',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    boxShadow: '0px 5px 8px rgba(0,0,0,0.15)',
-    zIndex: 10,
-  },
-  rotateLeftLabel: {
-    transform: 'rotate(-90deg)',
-    transformOrigin: '0 0',
-    position: 'absolute',
-  },
-  rotateRightLabel: {
-    transform: 'rotate(90deg)',
-    transformOrigin: '0 0',
-    position: 'absolute',
-  },
-  customBottom: {
-    position: 'absolute',
-  },
-  displayNone: {
-    display: 'none',
-  },
-  centerPlaceholder: {
-    '& .ProseMirror p.is-editor-empty::before, & .ProseMirror div.is-editor-empty::before': {
-      left: 0,
-      right: 0,
-      width: '100%',
-      textAlign: 'center',
-    },
-  },
-};
-
-
-const LabelWrapper = styled('div')({
-  ...styles.centerPlaceholder,
-});
-
-const LabelContent = styled('div')({
-  ...styles.disabledLabel,
-  '& p': {
-    margin: 0,
-  },
-});
-
-const LabelComponent = (props) => {
-  const {
-    disabledLabel,
-    graphHeight,
-    graphWidth,
-    isChartBottomLabel,
-    isDefineChartBottomLabel,
-    isChartLeftLabel,
-    isDefineChartLeftLabel,
-    placeholder,
-    text,
-    side,
-    onChange,
-    mathMlOptions = {},
-    charactersLimit,
-    titleHeight,
-    preventNewLines,
-  } = props;
-
-  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
-
-  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
-
-  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
-
-  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
-
-  const defaultStyle = {
-    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
-    top:
-      chartValue ||
-      (isChartLeftLabel && `${graphHeight - 70}px`) ||
-      (side === 'left' && `${graphHeight - 8}px`) ||
-      (isChartBottomLabel && `${graphHeight - 60 + titleHeight}px`) ||
-      (side === 'bottom' && `${graphHeight - 120 + titleHeight}px`) ||
-      0,
-    left:
-      (side === 'right' && `${graphWidth - 8}px`) ||
-      ((isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px') ||
-      (isChartBottomLabel && '-10px') ||
-      0,
-  };
-
-  const rotatedStyle = {
-    width: graphWidth - 8,
-    top: side === 'right' ? `${graphHeight - 22}px` : 0,
-    left: 0,
-  };
-
-  const rotateLabel = () => {
-    if (!disabledLabel && (side === 'left' || side === 'right')) {
-      setRotatedToHorizontal(true);
-    }
-  };
-
-  const exitEditMode = () => {
-    setRotatedToHorizontal(false);
-
-    // blur active element because rotation is causing editing issues on exit
-    requestAnimationFrame(() => {
-      document.activeElement?.blur?.();
-    });
-  };
-
-  const onKeyDown = (event) => {
-    if (preventNewLines && event.key === 'Enter') {
-      // prevent adding new lines - cancelling event
-      return true;
-    }
-
-    return false;
-  };
-
-  return (
-    <Readable false>
-      <LabelWrapper
-        onClick={rotateLabel}
-        style={{
-          ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),
-          ...(isChart ? styles.chartLabel : styles.axisLabel),
-          ...(side === 'left' && !rotatedToHorizontal ? styles.rotateLeftLabel : {}),
-          ...(side === 'right' && !rotatedToHorizontal ? styles.rotateRightLabel : {}),
-          ...(rotatedToHorizontal ? styles.editLabel : {}),
-          ...(isChartBottomLabel || isDefineChartBottomLabel ? styles.customBottom : {}),
-          ...(disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)) && styles.displayNone),
-        }}
-      >
-        {disabledLabel ? (
-          <LabelContent dangerouslySetInnerHTML={{ __html: text || '' }} />
-        ) : (
-          <EditableHtml
-            markup={text || ''}
-            onChange={onChange}
-            placeholder={!disabledLabel && placeholder}
-            toolbarOpts={{
-              position: side === 'bottom' ? 'top' : 'bottom',
-              noPadding: true,
-              noBorder: true,
-            }}
-            disableScrollbar
-            activePlugins={activePlugins}
-            onDone={exitEditMode}
-            onKeyDown={onKeyDown}
-            mathMlOptions={mathMlOptions}
-            charactersLimit={charactersLimit}
-          />
-        )}
-      </LabelWrapper>
-    </Readable>
-  );
-};
-
-LabelComponent.propTypes = {
-  disabledLabel: PropTypes.bool,
-  graphHeight: PropTypes.number,
-  graphWidth: PropTypes.number,
-  isChartBottomLabel: PropTypes.bool,
-  isDefineChartBottomLabel: PropTypes.bool,
-  isChartLeftLabel: PropTypes.bool,
-  isDefineChartLeftLabel: PropTypes.bool,
-  placeholder: PropTypes.string,
-  text: PropTypes.string,
-  side: PropTypes.string,
-  onChange: PropTypes.func,
-  mathMlOptions: PropTypes.object,
-  charactersLimit: PropTypes.number,
-  titleHeight: PropTypes.number,
-};
-
-export default LabelComponent;