@pie-lib/plot 4.0.4-next.30 → 4.0.4-next.34

package/src/graph-props.js

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

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

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

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