@pie-lib/graphing 3.2.0-next.8 → 4.0.0

package/src/grid-setup.jsx

@@ -118,6 +118,15 @@ const AxisConfig = (props) => {
   const { axisLabel = {}, min = {}, max = {} } = displayedFields;
   const activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
 
+  const onKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      // prevent adding new lines - cancelling event
+      return true;
+    }
+
+    return false;
+  };
+
   return (
     <ColumnView>
       {displayHeader && (
@@ -159,6 +168,7 @@ const AxisConfig = (props) => {
                 onChange={(value) => onChange('axisLabel', value)}
                 markup={label || ''}
                 charactersLimit={5}
+                onKeyDown={onKeyDown}
                 activePlugins={activePlugins}
               />
             </AxisLabel>

package/src/toggle-bar.jsx

@@ -17,6 +17,10 @@ const StyledMiniButton = styled(Button, {
 })(({ selected, disabled }) => ({
   color: color.text(),
   backgroundColor: color.background(),
+  border: `1px solid ${color.buttonBorder()}`,
+  '&:hover': {
+    backgroundColor: color.buttonHoverBg(),
+  },
   ...(selected && {
     border: `1px solid ${color.secondary()}`,
   }),

package/src/tools/circle/component.jsx

@@ -240,7 +240,7 @@ export class RawBaseCircle extends React.Component {
 // MUI v5 styled() replaces withStyles
 const StyledBgCircle = styled(BgCircle)(() => ({
   '&.outerLine': {
-    fill: 'rgba(0,0,0,0)',
+    fill: color.transparent(),
     stroke: color.defaults.BLACK,
     strokeWidth: 4,
     '&:hover': {

package/src/tools/line/component.jsx

@@ -7,18 +7,29 @@ import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
 import { styled } from '@mui/material/styles';
 
-const StyledArrowedLineRoot = styled('g')(({ theme }) => ({
-  line: styles.line(theme),
-  enabledArrow: styles.arrow(theme),
-  disabledArrow: styles.disabledArrow(theme),
-  disabled: styles.disabled(theme),
-  disabledSecondary: styles.disabledSecondary(theme),
-  correct: styles.correct(theme, 'stroke'),
-  correctArrow: styles.correct(theme),
-  incorrect: styles.incorrect(theme, 'stroke'),
-  incorrectArrow: styles.incorrect(theme),
-  missing: styles.missing(theme, 'stroke'),
-  missingArrow: styles.missing(theme),
+const StyledArrowedLineRoot = styled('g')(({ theme, disabled, correctness }) => ({
+  '& line:not(.hit-area)': {
+    ...styles.line(theme),
+    ...(disabled && styles.disabledSecondary(theme)),
+    ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
+    ...(correctness === 'incorrect' && styles.incorrect(theme, 'stroke')),
+    ...(correctness === 'missing' && styles.missing(theme, 'stroke')),
+  },
+  '& .enabledArrow': {
+    ...styles.arrow(theme),
+  },
+  '& .disabledArrow': {
+    ...styles.disabledArrow(theme),
+  },
+  '& .correctArrow': {
+    ...styles.correct(theme),
+  },
+  '& .incorrectArrow': {
+    ...styles.incorrect(theme),
+  },
+  '& .missingArrow': {
+    ...styles.missing(theme),
+  },
 }));
 
 export const ArrowedLine = (props) => {
@@ -31,7 +42,7 @@ export const ArrowedLine = (props) => {
   const finalMarkerId = propMarkerId || markerId;
 
   return (
-    <StyledArrowedLineRoot>
+    <StyledArrowedLineRoot disabled={disabled} correctness={correctness}>
       <defs>
         <ArrowMarker
           size={thinnerShapesNeeded(graphProps) ? 4 : 5}
@@ -41,12 +52,23 @@ export const ArrowedLine = (props) => {
           )}
         />
       </defs>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
       <line
         x1={scale.x(eFrom.x)}
         y1={scale.y(eFrom.y)}
         x2={scale.x(eTo.x)}
         y2={scale.y(eTo.y)}
-        className={classNames('line', disabled && 'disabledSecondary', correctness, className)}
+        className="hit-area"
+        stroke="transparent"
+        strokeWidth={7}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+      />
+      <line
+        x1={scale.x(eFrom.x)}
+        y1={scale.y(eFrom.y)}
+        x2={scale.x(eTo.x)}
+        y2={scale.y(eTo.y)}
+        className={className}
         markerEnd={`url(#${finalMarkerId}-${suffix})`}
         markerStart={`url(#${finalMarkerId}-${suffix})`}
         {...rest}

package/src/tools/point/component.jsx

@@ -25,21 +25,24 @@ export class Point extends React.Component {
   };
 
   startDrag = () => {
+    const { onDragStart } = this.props;
     const update = { ...this.props.mark };
 
     if (update.label === '') {
       delete update.label;
     }
     this.setState({ mark: update });
+    if (onDragStart) onDragStart();
   };
 
   stopDrag = () => {
-    const { onChange } = this.props;
+    const { onChange, onDragStop } = this.props;
     const mark = { ...this.state.mark };
     this.setState({ mark: undefined }, () => {
       if (!isEqual(this.props.mark, mark)) {
         onChange(this.props.mark, mark);
       }
+      if (onDragStop) onDragStop();
     });
   };
 
@@ -70,9 +73,13 @@ export class Point extends React.Component {
 
     onChange(mark, { label: '', ...mark });
 
-    if (this.input) {
-      this.input.focus();
-    }
+    // MarkLabel is only rendered after the parent re-renders with the new label prop,
+    // so we defer focus until after that render cycle completes.
+    setTimeout(() => {
+      if (this.input) {
+        this.input.focus();
+      }
+    }, 0);
   };
 
   render() {

package/src/tools/polygon/line.jsx

@@ -7,9 +7,10 @@ import * as utils from '../../utils';
 import { correct, disabled, incorrect, missing } from '../shared/styles';
 
 const StyledLine = styled('line')(({ disabled: isDisabled, correctness }) => ({
-  strokeWidth: 3,
+  strokeWidth: 7,
   transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
   stroke: 'transparent',
+  pointerEvents: 'stroke',
   '&:hover': {
     strokeWidth: 4,
     stroke: color.defaults.BLACK,

package/src/tools/polygon/polygon.jsx

@@ -2,15 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { alpha, styled } from '@mui/material/styles';
 import { gridDraggable, types } from '@pie-lib/plot';
-import * as utils from '../../utils';
 import { color } from '@pie-lib/render-ui';
-import { correct, disabled, incorrect, missing } from '../shared/styles';
 
-const StyledPolygon = styled('polygon')(({ theme, disabled: isDisabled, correctness }) => ({
-  fill: alpha(theme.palette.primary.light, 0.2),
+import * as utils from '../../utils';
+import { correct, disabledSecondary, incorrect, missing, graphingShapeFill } from '../shared/styles';
+
+const StyledPolygon = styled('polygon')(({ disabled: isDisabled, correctness }) => ({
+  fill: alpha(graphingShapeFill(), 0.2),
   strokeWidth: 2,
   stroke: color.defaults.BLACK,
-  ...(isDisabled && disabled('stroke')),
+  ...(isDisabled && disabledSecondary('stroke')),
   ...(correctness === 'correct' && correct('stroke')),
   ...(correctness === 'incorrect' && incorrect('stroke')),
   ...(correctness === 'missing' && {
@@ -19,12 +20,12 @@ const StyledPolygon = styled('polygon')(({ theme, disabled: isDisabled, correctn
   }),
 }));
 
-const StyledPolyline = styled('polyline')(({ theme, disabled: isDisabled, correctness }) => ({
-  fill: alpha(theme.palette.primary.light, 0.0),
+const StyledPolyline = styled('polyline')(({ disabled: isDisabled, correctness }) => ({
+  fill: alpha(graphingShapeFill(), 0.0),
   strokeWidth: 2,
   stroke: color.defaults.BLACK,
   pointerEvents: 'none',
-  ...(isDisabled && disabled('stroke')),
+  ...(isDisabled && disabledSecondary('stroke')),
   ...(correctness === 'correct' && correct('stroke')),
   ...(correctness === 'incorrect' && incorrect('stroke')),
   ...(correctness === 'missing' && {

package/src/tools/ray/component.jsx

@@ -8,7 +8,7 @@ import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
 import { styled } from '@mui/material/styles';
 
 const StyledRayRoot = styled('g')(({ theme, disabled, correctness }) => ({
-  '& line': {
+  '& line:not(.hit-area)': {
     ...styles.line(theme),
     ...(disabled && styles.disabledSecondary(theme)),
     ...(correctness === 'correct' && styles.correct(theme, 'stroke')),
@@ -52,6 +52,17 @@ export const RayLine = (props) => {
           )}
         />
       </defs>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
+      <line
+        x1={scale.x(from.x)}
+        y1={scale.y(from.y)}
+        x2={scale.x(aToB.x)}
+        y2={scale.y(aToB.y)}
+        className="hit-area"
+        stroke="transparent"
+        strokeWidth={7}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+      />
       <line
         x1={scale.x(from.x)}
         y1={scale.y(from.y)}

package/src/tools/segment/component.jsx

@@ -18,20 +18,23 @@ const StyledLineRoot = styled('line')(({ theme, disabled, correctness }) => ({
 export const Line = (props) => {
   const { className, correctness, disabled, graphProps, from, to, ...rest } = props;
   const { scale } = graphProps;
+  const x1 = scale.x(from.x);
+  const y1 = scale.y(from.y);
+  const x2 = scale.x(to.x);
+  const y2 = scale.y(to.y);
 
   return (
-    <StyledLineRoot
-      stroke="green"
-      strokeWidth={6}
-      x1={scale.x(from.x)}
-      y1={scale.y(from.y)}
-      x2={scale.x(to.x)}
-      y2={scale.y(to.y)}
-      className={className}
-      disabled={disabled}
-      correctness={correctness}
-      {...rest}
-    />
+    <g>
+      {/* Transparent wider line captures pointer events (+2px each side) */}
+      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="transparent" strokeWidth={7} style={{ cursor: 'pointer', pointerEvents: 'stroke' }} />
+      <StyledLineRoot
+        x1={x1} y1={y1} x2={x2} y2={y2}
+        className={className}
+        disabled={disabled}
+        correctness={correctness}
+        {...rest}
+      />
+    </g>
   );
 };
 

package/src/tools/shared/arrow-head.jsx

@@ -6,7 +6,7 @@ import { color } from '@pie-lib/render-ui';
 const StyledArrowHead = styled('polygon')(({ disabled, correctness }) => ({
   fill: color.defaults.BLACK,
   ...(disabled && {
-    fill: color.disabled(),
+    fill: color.disabledSecondary(),
   }),
   ...(correctness === 'correct' && {
     fill: color.correctWithIcon(),
@@ -23,7 +23,7 @@ const StyledMarker = styled('marker')(({ disabled, correctness }) => ({
   '& polygon': {
     fill: color.defaults.BLACK,
     ...(disabled && {
-      fill: color.disabled(),
+      fill: color.disabledSecondary(),
     }),
     ...(correctness === 'correct' && {
       fill: color.correctWithIcon(),

package/src/tools/shared/line/index.jsx

@@ -89,10 +89,14 @@ export const lineToolComponent = (Component) => {
       this.state = {};
     }
 
-    startDrag = () => this.setState({ mark: { ...this.props.mark } });
+    startDrag = () => {
+      const { onDragStart } = this.props;
+      this.setState({ mark: { ...this.props.mark } });
+      if (onDragStart) onDragStart();
+    };
 
     stopDrag = () => {
-      const { onChange, mark } = this.props;
+      const { onChange, mark, onDragStop } = this.props;
       const update = { ...this.state.mark };
 
       this.setState({ mark: undefined }, () => {
@@ -107,6 +111,7 @@ export const lineToolComponent = (Component) => {
         if (!isEqual(mark, update) && !shouldNotChange) {
           onChange(mark, update);
         }
+        if (onDragStop) onDragStop();
       });
     };
 
@@ -303,7 +308,6 @@ export const lineBase = (Comp, opts) => {
 
       if (!labelModeEnabled) {
         onClick(point || data);
-        return;
       }
 
       if (disabled) {

package/src/tools/shared/line/line-path.jsx

@@ -29,10 +29,11 @@ const StyledDrawLine = styled(vx.LinePath)(({ disabled: isDisabled, correctness
 }));
 
 const StyledLine = styled(vx.LinePath)(({ theme, disabled: isDisabled, correctness, isDragging }) => ({
-  strokeWidth: 3,
+  strokeWidth: 7,
   fill: 'none',
   transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
   stroke: 'transparent',
+  pointerEvents: 'stroke',
   '&:hover': dragging(theme),
   ...(isDragging && dragging(theme)),
   ...(isDisabled && {

package/src/tools/shared/point/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { gridDraggable } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
 import * as utils from '../../../utils';
 import { RawBp } from './base-point';
 import { RawArrow } from './arrow-point';
@@ -27,6 +28,11 @@ const PointStyle = styled('g')(() => ({
   '& circle, & polygon': {
     cursor: 'pointer',
   },
+  '&[disabled]': {
+    '& circle, & polygon': {
+      fill: color.disabledSecondary(),
+    },
+  },
 }));
 
 export const BasePoint = gridDraggable(opts)((props) => (

package/src/tools/shared/styles.js

@@ -1,7 +1,9 @@
 import { color } from '@pie-lib/render-ui';
 
+export const graphingShapeFill = () => color.visualElementsColors.SHAPES_FILL_COLOR;
+
 export const disabled = (key = 'fill') => ({
-  [key]: color.disabled(),
+  [key]: color.disabledSecondary(), // this is needed to match previous disabled color for backward compatibility
   pointerEvents: 'none',
 });
 

package/src/undo-redo.jsx

@@ -15,6 +15,9 @@ const StyledButton = styled(Button)(({ theme }) => ({
   '&:not(:last-of-type)': {
     marginRight: theme.spacing(0.5),
   },
+  '&:hover': {
+    backgroundColor: color.buttonHoverBg(),
+  },
 }));
 
 export class UndoRedo extends React.Component {