@pie-lib/graphing 2.20.0 → 2.22.0

package/lib/mark-label.js

@@ -0,0 +1,321 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.position = exports["default"] = exports.coordinates = exports.MarkLabel = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
+
+var _useDebounce = require("./use-debounce");
+
+var _plot = require("@pie-lib/plot");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _labelSvgIcon = _interopRequireDefault(require("./label-svg-icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var inputStyles = function inputStyles(theme) {
+  return {
+    "float": 'right',
+    padding: theme.spacing.unit * 0.5,
+    borderRadius: '4px',
+    fontSize: '10px',
+    backgroundColor: _renderUi.color.defaults.WHITE
+  };
+};
+
+var styles = function styles(theme) {
+  return {
+    inputStudent: _objectSpread(_objectSpread({}, inputStyles(theme)), {}, {
+      padding: '0',
+      border: 'none',
+      color: 'inherit',
+      fontWeight: 'bold'
+    }),
+    input: {
+      "float": 'right',
+      padding: theme.spacing.unit * 0.5,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: '10px',
+      border: "solid 1px ".concat(_renderUi.color.defaults.SECONDARY),
+      borderRadius: '3px',
+      color: _renderUi.color.defaults.PRIMARY_DARK,
+      backgroundColor: _renderUi.color.defaults.WHITE
+    },
+    disabled: {
+      border: "solid 1px ".concat(_renderUi.color.defaults.PRIMARY_DARK),
+      backgroundColor: _renderUi.color.defaults.WHITE,
+      '-webkit-opacity': '1'
+    },
+    disabledMark: {
+      border: "solid 1px ".concat(_renderUi.color.disabled()),
+      color: _renderUi.color.disabled(),
+      '-webkit-text-fill-color': _renderUi.color.disabled()
+    },
+    inputCorrect: _objectSpread(_objectSpread({}, inputStyles(theme)), {}, {
+      color: _renderUi.color.defaults.CORRECT_WITH_ICON,
+      border: "solid 1px ".concat(_renderUi.color.defaults.CORRECT_WITH_ICON)
+    }),
+    inputIncorrect: _objectSpread(_objectSpread({}, inputStyles(theme)), {}, {
+      color: _renderUi.color.defaults.INCORRECT_WITH_ICON,
+      border: "solid 1px ".concat(_renderUi.color.defaults.INCORRECT_WITH_ICON)
+    }),
+    inputMissing: _objectSpread(_objectSpread({}, inputStyles(theme)), {}, {
+      color: _renderUi.color.defaults.MISSING_WITH_ICON,
+      border: "solid 1px ".concat(_renderUi.color.defaults.MISSING_WITH_ICON),
+      fontWeight: 'bold'
+    }),
+    incorrect: _objectSpread(_objectSpread({}, inputStyles(theme)), {}, {
+      color: _renderUi.color.defaults.INCORRECT_WITH_ICON,
+      fontWeight: 'bold',
+      padding: '0'
+    })
+  };
+};
+
+var position = function position(graphProps, mark) {
+  var rect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    width: 0,
+    height: 0
+  };
+  var scale = graphProps.scale,
+      domain = graphProps.domain,
+      range = graphProps.range;
+  var shift = 5;
+  var rightEdge = scale.x(mark.x) + rect.width + shift;
+  var bottomEdge = scale.y(mark.y) + rect.height + shift;
+  var h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';
+  var v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
+  return "".concat(v, "-").concat(h);
+};
+
+exports.position = position;
+
+var coordinates = function coordinates(graphProps, mark) {
+  var rect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    width: 0,
+    height: 0
+  };
+  var position = arguments.length > 3 ? arguments[3] : undefined;
+  var scale = graphProps.scale;
+  var shift = 5;
+
+  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
+      };
+
+    default:
+      return {};
+  }
+};
+
+exports.coordinates = coordinates;
+
+var LabelInput = function LabelInput(_ref2) {
+  var _ref = _ref2._ref,
+      externalInputRef = _ref2.externalInputRef,
+      label = _ref2.label,
+      disabled = _ref2.disabled,
+      inputClassName = _ref2.inputClassName,
+      onChange = _ref2.onChange;
+  return /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
+    inputRef: function inputRef(r) {
+      _ref(r);
+
+      externalInputRef(r);
+    },
+    disabled: disabled,
+    inputClassName: inputClassName,
+    value: label,
+    onChange: onChange
+  });
+};
+
+var MarkLabel = function MarkLabel(props) {
+  var _cn;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      input = _useState2[0],
+      setInput = _useState2[1];
+
+  var _ref = (0, _react.useCallback)(function (node) {
+    return setInput(node);
+  });
+
+  var mark = props.mark,
+      graphProps = props.graphProps,
+      classes = props.classes,
+      disabled = props.disabled,
+      externalInputRef = props.inputRef,
+      theme = props.theme;
+
+  var _useState3 = (0, _react.useState)(mark.label),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      label = _useState4[0],
+      setLabel = _useState4[1];
+
+  var correctness = mark.correctness,
+      correctnesslabel = mark.correctnesslabel,
+      correctlabel = mark.correctlabel;
+
+  var onChange = function onChange(e) {
+    return setLabel(e.target.value);
+  };
+
+  var debouncedLabel = (0, _useDebounce.useDebounce)(label, 200); // useState only sets the value once, to synch props to state need useEffect
+
+  (0, _react.useEffect)(function () {
+    setLabel(mark.label);
+  }, [mark.label]); // pick up the change to debouncedLabel and save it
+
+  (0, _react.useEffect)(function () {
+    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
+      props.onChange(debouncedLabel);
+    }
+  }, [debouncedLabel]);
+  var rect = input ? input.getBoundingClientRect() : {
+    width: 0,
+    height: 0
+  };
+  var pos = position(graphProps, mark, rect);
+  var leftTop = coordinates(graphProps, mark, rect, pos);
+
+  var style = _objectSpread({
+    position: 'fixed',
+    pointerEvents: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '3px'
+  }, leftTop);
+
+  var secondLabelStyle = _objectSpread(_objectSpread({}, style), {}, {
+    top: leftTop.top + 25
+  });
+
+  var disabledInput = disabled || mark.disabled;
+
+  var renderInput = function renderInput(inputClass, labelValue) {
+    return /*#__PURE__*/_react["default"].createElement(LabelInput, {
+      _ref: _ref,
+      externalInputRef: externalInputRef,
+      label: labelValue,
+      disabled: disabledInput,
+      inputClassName: (0, _classnames["default"])(inputClass),
+      onChange: onChange
+    });
+  };
+
+  if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.inputCorrect,
+      style: style
+    }, /*#__PURE__*/_react["default"].createElement(_labelSvgIcon["default"], {
+      type: "correct"
+    }), renderInput(classes.inputStudent, correctlabel));
+  } // avoid rendering empty label when a correct point without label  was provided
+
+
+  if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {
+    return null;
+  }
+
+  if (correctness === 'correct' && correctnesslabel === 'incorrect') {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.inputIncorrect,
+      style: style
+    }, /*#__PURE__*/_react["default"].createElement(_labelSvgIcon["default"], {
+      type: "incorrect"
+    }), label === '' ? /*#__PURE__*/_react["default"].createElement(_labelSvgIcon["default"], {
+      type: "empty",
+      style: {
+        marginLeft: '3px'
+      }
+    }) : renderInput(classes.inputStudent, label)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.inputMissing,
+      style: secondLabelStyle
+    }, renderInput(classes.inputStudent, correctlabel)));
+  }
+
+  if (correctness === 'missing') {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.inputMissing,
+      style: style
+    }, renderInput(classes.inputStudent, label));
+  }
+
+  if (correctness === 'incorrect') {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.incorrect,
+      style: style
+    }, renderInput(classes.inputStudent, label));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: style
+  }, renderInput((0, _classnames["default"])(classes.input, (_cn = {}, (0, _defineProperty2["default"])(_cn, classes.disabled, disabled), (0, _defineProperty2["default"])(_cn, classes.disabledMark, mark.disabled), _cn)), label));
+};
+
+exports.MarkLabel = MarkLabel;
+MarkLabel.propTypes = {
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType,
+  classes: _propTypes["default"].object,
+  inputRef: _propTypes["default"].func,
+  mark: _propTypes["default"].object,
+  theme: _propTypes["default"].object
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  withTheme: true
+})(MarkLabel);
+
+exports["default"] = _default;
+//# sourceMappingURL=mark-label.js.map

package/lib/mark-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["inputStyles","theme","padding","spacing","unit","borderRadius","fontSize","backgroundColor","color","defaults","WHITE","styles","inputStudent","border","fontWeight","input","fontFamily","typography","SECONDARY","PRIMARY_DARK","disabled","disabledMark","inputCorrect","CORRECT_WITH_ICON","inputIncorrect","INCORRECT_WITH_ICON","inputMissing","MISSING_WITH_ICON","incorrect","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","LabelInput","_ref","externalInputRef","label","inputClassName","onChange","r","MarkLabel","props","setInput","node","classes","inputRef","setLabel","correctness","correctnesslabel","correctlabel","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","display","alignItems","gap","secondLabelStyle","disabledInput","renderInput","inputClass","labelValue","marginLeft","propTypes","PropTypes","bool","func","types","GraphPropsType","object","withTheme"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport { useDebounce } from './use-debounce';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport SvgIcon from './label-svg-icon';\n\nconst inputStyles = (theme) => ({\n  float: 'right',\n  padding: theme.spacing.unit * 0.5,\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n});\n\nconst styles = (theme) => ({\n  inputStudent: {\n    ...inputStyles(theme),\n    padding: '0',\n    border: 'none',\n    color: 'inherit',\n    fontWeight: 'bold',\n  },\n  input: {\n    float: 'right',\n    padding: theme.spacing.unit * 0.5,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: '10px',\n    border: `solid 1px ${color.defaults.SECONDARY}`,\n    borderRadius: '3px',\n    color: color.defaults.PRIMARY_DARK,\n    backgroundColor: color.defaults.WHITE,\n  },\n  disabled: {\n    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,\n    backgroundColor: color.defaults.WHITE,\n    '-webkit-opacity': '1',\n  },\n  disabledMark: {\n    border: `solid 1px ${color.disabled()}`,\n    color: color.disabled(),\n    '-webkit-text-fill-color': color.disabled(),\n  },\n  inputCorrect: {\n    ...inputStyles(theme),\n    color: color.defaults.CORRECT_WITH_ICON,\n    border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,\n  },\n  inputIncorrect: {\n    ...inputStyles(theme),\n    color: color.defaults.INCORRECT_WITH_ICON,\n    border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,\n  },\n  inputMissing: {\n    ...inputStyles(theme),\n    color: color.defaults.MISSING_WITH_ICON,\n    border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,\n    fontWeight: 'bold',\n  },\n  incorrect: {\n    ...inputStyles(theme),\n    color: color.defaults.INCORRECT_WITH_ICON,\n    fontWeight: 'bold',\n    padding: '0',\n  },\n});\n\nexport const position = (graphProps, mark, rect = { width: 0, height: 0 }) => {\n  const { scale, domain, range } = graphProps;\n  const shift = 5;\n\n  const rightEdge = scale.x(mark.x) + rect.width + shift;\n  const bottomEdge = scale.y(mark.y) + rect.height + shift;\n\n  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';\n  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';\n\n  return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, position) => {\n  const { scale } = graphProps;\n  const shift = 5;\n\n  switch (position) {\n    case 'bottom-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n    case 'bottom-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n    case 'top-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) - shift - rect.height };\n    case 'top-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) - shift - rect.height };\n    default:\n      return {};\n  }\n};\n\nconst LabelInput = ({ _ref, externalInputRef, label, disabled, inputClassName, onChange }) => (\n  <AutosizeInput\n    inputRef={(r) => {\n      _ref(r);\n      externalInputRef(r);\n    }}\n    disabled={disabled}\n    inputClassName={inputClassName}\n    value={label}\n    onChange={onChange}\n  />\n);\n\nexport const MarkLabel = (props) => {\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node));\n\n  const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const { correctness, correctnesslabel, correctlabel } = mark;\n  const onChange = (e) => setLabel(e.target.value);\n\n  const debouncedLabel = useDebounce(label, 200);\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  // pick up the change to debouncedLabel and save it\n  useEffect(() => {\n    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {\n      props.onChange(debouncedLabel);\n    }\n  }, [debouncedLabel]);\n\n  const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };\n  const pos = position(graphProps, mark, rect);\n  const leftTop = coordinates(graphProps, mark, rect, pos);\n\n  const style = {\n    position: 'fixed',\n    pointerEvents: 'auto',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '3px',\n    ...leftTop,\n  };\n\n  const secondLabelStyle = {\n    ...style,\n    top: leftTop.top + 25,\n  };\n\n  const disabledInput = disabled || mark.disabled;\n\n  const renderInput = (inputClass, labelValue) => (\n    <LabelInput\n      _ref={_ref}\n      externalInputRef={externalInputRef}\n      label={labelValue}\n      disabled={disabledInput}\n      inputClassName={cn(inputClass)}\n      onChange={onChange}\n    />\n  );\n\n  if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {\n    return (\n      <div className={classes.inputCorrect} style={style}>\n        <SvgIcon type=\"correct\" />\n        {renderInput(classes.inputStudent, correctlabel)}\n      </div>\n    );\n  }\n\n  // avoid rendering empty label when a correct point without label  was provided\n  if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {\n    return null;\n  }\n\n  if (correctness === 'correct' && correctnesslabel === 'incorrect') {\n    return (\n      <>\n        <div className={classes.inputIncorrect} style={style}>\n          <SvgIcon type=\"incorrect\" />\n          {label === '' ? (\n            <SvgIcon type=\"empty\" style={{ marginLeft: '3px' }} />\n          ) : (\n            renderInput(classes.inputStudent, label)\n          )}\n        </div>\n        <div className={classes.inputMissing} style={secondLabelStyle}>\n          {renderInput(classes.inputStudent, correctlabel)}\n        </div>\n      </>\n    );\n  }\n\n  if (correctness === 'missing') {\n    return (\n      <div className={classes.inputMissing} style={style}>\n        {renderInput(classes.inputStudent, label)}\n      </div>\n    );\n  }\n\n  if (correctness === 'incorrect') {\n    return (\n      <div className={classes.incorrect} style={style}>\n        {renderInput(classes.inputStudent, label)}\n      </div>\n    );\n  }\n\n  return (\n    <div style={style}>\n      {renderInput(\n        cn(classes.input, {\n          [classes.disabled]: disabled,\n          [classes.disabledMark]: mark.disabled,\n        }),\n        label,\n      )}\n    </div>\n  );\n};\n\nMarkLabel.propTypes = {\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  theme: PropTypes.object,\n};\n\nexport default withStyles(styles, { withTheme: true })(MarkLabel);\n"],"file":"mark-label.js"}