@pie-lib/graphing 4.0.3-next.3 → 4.0.4-next.11

package/src/mark-label.jsx

@@ -103,7 +103,7 @@ export const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, po
   }
 };
 
-const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange }) => (
+const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange, onBlur }) => (
   <AutosizeInput
     inputRef={(r) => {
       _ref(r);
@@ -113,6 +113,7 @@ const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onCha
     inputStyle={inputStyle}
     value={label}
     onChange={onChange}
+    onBlur={onBlur}
   />
 );
 
@@ -123,6 +124,7 @@ LabelInput.propTypes = {
   disabled: PropTypes.bool,
   inputStyle: PropTypes.object,
   onChange: PropTypes.func,
+  onBlur: PropTypes.func,
 };
 
 export const MarkLabel = (props) => {
@@ -134,8 +136,15 @@ export const MarkLabel = (props) => {
 
   const [label, setLabel] = useState(mark.label);
   const { correctness, correctnesslabel, correctlabel } = mark;
+
   const onChange = (e) => setLabel(e.target.value);
 
+  const handleBlur = useCallback(() => {
+    if (label === '') {
+      props.onChange('');
+    }
+  }, [label, props.onChange]);
+
   const debouncedLabel = useDebounce(label, 200);
 
   // useState only sets the value once, to synch props to state need useEffect
@@ -178,6 +187,7 @@ export const MarkLabel = (props) => {
       disabled={disabledInput}
       inputStyle={inputStyle}
       onChange={onChange}
+      onBlur={handleBlur}
     />
   );
 
@@ -192,7 +202,6 @@ export const MarkLabel = (props) => {
     );
   }
 
-  // avoid rendering empty label when a correct point without label  was provided
   if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {
     return null;
   }

package/src/tools/circle/component.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { BasePoint } from '../shared/point';
 import BgCircle from './bg-circle';
-import { equalPoints, getMiddleOfTwoPoints, point } from '../../utils';
+import { equalPoints, getMiddleOfTwoPoints, point, stripEmptyLabel } from '../../utils';
 import { types } from '@pie-lib/plot';
 import { rootEdgeComponent } from '../shared/line/with-root-edge';
 import ReactDOM from 'react-dom';
@@ -103,7 +103,7 @@ export class RawBaseCircle extends React.Component {
   };
 
   clickPoint = (point, type, data) => {
-    const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;
+    const { changeMarkProps, disabled, from, to, middle, labelModeEnabled, limitLabeling, onClick } = this.props;
 
     if (!labelModeEnabled) {
       onClick(point || data);
@@ -115,8 +115,12 @@ export class RawBaseCircle extends React.Component {
     if (type === 'middle' && !point && from && to) {
       point = { ...point, ...getMiddleOfTwoPoints(from, to) };
     }
-
-    changeMarkProps({ from, to, [type]: { label: '', ...point } });
+    changeMarkProps({
+      from: stripEmptyLabel(from),
+      to: stripEmptyLabel(to),
+      middle: stripEmptyLabel(middle),
+      [type]: { label: '', ...point },
+    });
 
     if (this.input[type]) {
       this.input[type].focus();

package/src/tools/polygon/component.jsx

@@ -10,7 +10,7 @@ import { types } from '@pie-lib/plot';
 import invariant from 'invariant';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../mark-label';
-import { equalPoints, getMiddleOfTwoPoints, getRightestPoints } from '../../utils';
+import { equalPoints, getMiddleOfTwoPoints, getRightestPoints, stripEmptyLabel } from '../../utils';
 
 const log = debug('pie-lib:graphing:polygon');
 
@@ -82,6 +82,7 @@ export class RawBaseComponent extends React.Component {
     labelModeEnabled: PropTypes.bool,
     limitLabeling: PropTypes.bool,
     onChangeLabelProps: PropTypes.func,
+    onSetMiddleLabel: PropTypes.func,
     onChangeProps: PropTypes.func,
   };
 
@@ -165,12 +166,12 @@ export class RawBaseComponent extends React.Component {
     const {
       closed,
       disabled,
+      middle: currentMiddle,
       onClick,
       isToolActive,
       labelModeEnabled,
       limitLabeling,
-      onChangeProps,
-      onChangeLabelProps,
+      onSetMiddleLabel,
       points,
     } = this.props;
 
@@ -184,12 +185,13 @@ export class RawBaseComponent extends React.Component {
         const { a, b } = getRightestPoints(points);
         const middle = { label: '', ...point, ...getMiddleOfTwoPoints(a, b) };
 
-        onChangeLabelProps(middle);
+        onSetMiddleLabel(middle, points.map(stripEmptyLabel));
       } else {
-        const update = [...points];
+        const strippedPoints = points.map(stripEmptyLabel);
+        strippedPoints.splice(index, 1, { label: '', ...point });
 
-        update.splice(index, 1, { label: '', ...point });
-        onChangeProps(update);
+        const strippedMiddle = currentMiddle ? stripEmptyLabel(currentMiddle) : currentMiddle;
+        onSetMiddleLabel(strippedMiddle, strippedPoints);
       }
 
       // defer the focus() call with setTimeout to allow the re-render to complete first.
@@ -237,7 +239,7 @@ export class RawBaseComponent extends React.Component {
       polygonLabelNode = ReactDOM.createPortal(
         <MarkLabel
           inputRef={(r) => (this.input[polygonLabelIndex] = r)}
-          disabled={!labelModeEnabled}
+          disabled={disabled || !labelModeEnabled}
           mark={middle}
           graphProps={graphProps}
           onChange={(label) => onChangeLabelProps({ ...middle, label })}
@@ -289,7 +291,7 @@ export class RawBaseComponent extends React.Component {
               ? ReactDOM.createPortal(
                   <MarkLabel
                     inputRef={(r) => (this.input[index] = r)}
-                    disabled={!labelModeEnabled}
+                    disabled={disabled || !labelModeEnabled}
                     mark={p}
                     graphProps={graphProps}
                     onChange={(label) => this.labelChange({ ...p, label }, index)}
@@ -344,9 +346,22 @@ export default class Component extends React.Component {
     const { mark, onChange } = this.props;
     const middle = { ...mark.middle, ...point };
 
+    if (!middle.label || isEmpty(middle.label)) {
+      delete middle.label;
+    }
+
     onChange(mark, { ...mark, middle });
   };
 
+  setMiddleLabel = (middle, strippedPoints) => {
+    const { mark, onChange } = this.props;
+    const next = { ...mark, middle };
+    if (strippedPoints) {
+      next.points = strippedPoints;
+    }
+    onChange(mark, next);
+  };
+
   closePolygon = () => {
     log('[closePolygon] ...');
     const { onComplete, mark } = this.props;
@@ -377,6 +392,7 @@ export default class Component extends React.Component {
         coordinatesOnHover={coordinatesOnHover}
         onChange={this.change}
         onChangeLabelProps={this.changeLabelProps}
+        onSetMiddleLabel={this.setMiddleLabel}
         onChangeProps={this.changeProps}
         onClosePolygon={this.closePolygon}
         onDragStart={this.dragStart}

package/src/tools/polygon/line.jsx

@@ -15,17 +15,7 @@ const StyledLine = styled('line')(({ disabled: isDisabled, correctness }) => ({
     strokeWidth: 4,
     stroke: color.defaults.BLACK,
   },
-  ...(isDisabled && {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-  ...(correctness === 'missing' && {
-    ...missing('stroke'),
-    strokeWidth: 1,
-    strokeDasharray: '4 3',
-  }),
+  ...((isDisabled || correctness) && { pointerEvents: 'none' }),
 }));
 
 class RawLine extends React.Component {

package/src/tools/segment/component.jsx

@@ -26,9 +26,21 @@ export const Line = (props) => {
   return (
     <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' }} />
+      <line
+        className="hit-area"
+        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}
+        x1={x1}
+        y1={y1}
+        x2={x2}
+        y2={y2}
         className={className}
         disabled={disabled}
         correctness={correctness}

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

@@ -7,11 +7,11 @@ import { correct, disabled, disabledSecondary, incorrect, missing } from '../sty
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../../mark-label';
 import { color } from '@pie-lib/render-ui';
-import { equalPoints, getMiddleOfTwoPoints, sameAxes } from '../../../utils';
+import { equalPoints, getMiddleOfTwoPoints, sameAxes, stripEmptyLabel } from '../../../utils';
 import { styled } from '@mui/material/styles';
 
 const StyledLineGroup = styled('g')(({ disabled, correctness }) => ({
-  '& line': {
+  '& line:not(.hit-area)': {
     fill: 'transparent',
     stroke: color.defaults.BLACK,
     strokeWidth: 3,
@@ -22,23 +22,23 @@ const StyledLineGroup = styled('g')(({ disabled, correctness }) => ({
     },
   },
   ...(disabled && {
-    '& line': {
+    '& line:not(.hit-area)': {
       ...disabledSecondary('stroke'),
       strokeWidth: 2,
     },
   }),
   ...(correctness === 'correct' && {
-    '& line': {
+    '& line:not(.hit-area)': {
       ...correct('stroke'),
     },
   }),
   ...(correctness === 'incorrect' && {
-    '& line': {
+    '& line:not(.hit-area)': {
       ...incorrect('stroke'),
     },
   }),
   ...(correctness === 'missing' && {
-    '& line': {
+    '& line:not(.hit-area)': {
       ...missing('stroke'),
       strokeWidth: 1,
       strokeDasharray: '4 3',
@@ -304,7 +304,7 @@ export const lineBase = (Comp, opts) => {
     };
 
     clickPoint = (point, type, data) => {
-      const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;
+      const { changeMarkProps, disabled, from, to, middle, labelModeEnabled, limitLabeling, onClick } = this.props;
 
       if (!labelModeEnabled) {
         onClick(point || data);
@@ -324,7 +324,12 @@ export const lineBase = (Comp, opts) => {
         point = { ...point, ...getMiddleOfTwoPoints(from, to) };
       }
 
-      changeMarkProps({ from, to, [type]: { label: '', ...point } });
+      changeMarkProps({
+        from: stripEmptyLabel(from),
+        to: stripEmptyLabel(to),
+        middle: stripEmptyLabel(middle),
+        [type]: { label: '', ...point },
+      });
 
       if (this.input[type]) {
         this.input[type].focus();

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

@@ -13,7 +13,7 @@ const dragging = () => ({
 
 const StyledDrawLine = styled(vx.LinePath)(({ disabled: isDisabled, correctness }) => ({
   fill: 'none',
-  strokeWidth: 2,
+  strokeWidth: 3,
   stroke: color.black(),
   ...(isDisabled && {
     ...disabledSecondary('stroke'),
@@ -36,17 +36,7 @@ const StyledLine = styled(vx.LinePath)(({ theme, disabled: isDisabled, correctne
   pointerEvents: 'stroke',
   '&:hover': dragging(theme),
   ...(isDragging && dragging(theme)),
-  ...(isDisabled && {
-    ...disabled('stroke'),
-    strokeWidth: 2,
-  }),
-  ...(correctness === 'correct' && correct('stroke')),
-  ...(correctness === 'incorrect' && incorrect('stroke')),
-  ...(correctness === 'missing' && {
-    ...missing('stroke'),
-    strokeWidth: 1,
-    strokeDasharray: '4 3',
-  }),
+  ...((isDisabled || correctness) && { pointerEvents: 'none' }),
 }));
 
 export class RawLinePath extends React.Component {

package/src/utils.js

@@ -1,6 +1,8 @@
 import { utils } from '@pie-lib/plot';
 import invariant from 'invariant';
-import { cloneDeep, head, isEmpty, isEqual, tail } from 'lodash-es';
+import { cloneDeep, head, isEmpty, isEqual, omit, tail } from 'lodash-es';
+
+export const stripEmptyLabel = (pt) => (pt?.label === '' ? omit(pt, 'label') : pt);
 
 export const tickCount = utils.tickCount;
 export const bounds = utils.bounds;