@pie-lib/charting 5.15.6 → 5.15.7-next.1618

package/lib/line/line-cross.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,25 +23,35 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _plot = require("@pie-lib/plot");
-
 var _shape = require("@vx/shape");
 
 var _group = require("@vx/group");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _renderUi = require("@pie-lib/render-ui");
+
 var _utils = require("../utils");
 
+var _plot = require("@pie-lib/plot");
+
 var _line = _interopRequireDefault(require("./common/line"));
 
-var _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness"];
+var _correctnessIndicators = require("../common/correctness-indicators");
+
+var _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness", "interactive", "correctData", "label"];
+
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -54,10 +66,23 @@ var DraggableComponent = function DraggableComponent(props) {
       y = props.y,
       r = props.r,
       correctness = props.correctness,
+      interactive = props.interactive,
+      correctData = props.correctData,
+      label = props.label,
       rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_group.Group, (0, _extends2["default"])({}, rest, {
-    className: (0, _classnames["default"])(className, classes.line, correctness && correctness.value)
-  }), /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      hover = _useState2[0],
+      setHover = _useState2[1];
+
+  var squareSize = r * 4;
+  var squareHalf = squareSize / 2;
+  var cx = scale.x(x);
+  var cy = scale.y(y);
+  return /*#__PURE__*/_react["default"].createElement(_group.Group, {
+    className: (0, _classnames["default"])(className, classes.line, correctness && !interactive && classes.disabledPoint)
+  }, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: scale.x(x) - r,
       y: scale.y(y) + r
@@ -72,7 +97,10 @@ var DraggableComponent = function DraggableComponent(props) {
     y: function y(d) {
       return d.y;
     },
-    strokeWidth: 5
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
   }), /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: scale.x(x) - r,
@@ -88,7 +116,46 @@ var DraggableComponent = function DraggableComponent(props) {
     y: function y(d) {
       return d.y;
     },
-    strokeWidth: 5
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), hover && /*#__PURE__*/_react["default"].createElement("rect", {
+    x: cx - squareHalf,
+    y: cy - squareHalf,
+    width: squareSize,
+    height: squareSize,
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    fill: "none",
+    strokeWidth: 2,
+    pointerEvents: "none"
+  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: cx,
+    cy: cy,
+    r: r * 2,
+    className: (0, _classnames["default"])(classes.transparentHandle),
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
+  }, rest)), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
   }));
 };
 

package/lib/line/line-cross.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/line/line-cross.js"],"names":["DraggableComponent","props","classes","className","scale","x","y","r","correctness","rest","line","value","d","propTypes","PropTypes","object","number","string","shape","label","LineCross","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\nimport classNames from 'classnames';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\n\nconst DraggableComponent = (props) => {\n  const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;\n\n  return (\n    <Group {...rest} className={classNames(className, classes.line, correctness && correctness.value)}>\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) + r },\n          { x: scale.x(x) + r, y: scale.y(y) - r },\n        ]}\n        key={`point-${x}-${y}-1`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n      />\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) - r },\n          { x: scale.x(x) + r, y: scale.y(y) + r },\n        ]}\n        key={`point-${x}-${y}-2`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n      />\n    </Group>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineCross extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineCross',\n  Component: LineCross,\n  name: 'Line Cross',\n});\n"],"file":"line-cross.js"}
+{"version":3,"sources":["../../src/line/line-cross.js"],"names":["DraggableComponent","props","classes","className","scale","x","y","r","correctness","interactive","correctData","label","rest","hover","setHover","squareSize","squareHalf","cx","cy","line","disabledPoint","d","pointerEvents","color","defaults","BORDER_GRAY","transparentHandle","propTypes","PropTypes","object","number","string","shape","value","LineCross","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\nimport classNames from 'classnames';\n\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport { types } from '@pie-lib/plot';\nimport RawLine from './common/line';\nimport { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';\n\nconst DraggableComponent = (props) => {\n  const { classes = {}, className, scale, x, y, r, correctness, interactive, correctData, label, ...rest } = props;\n  const [hover, setHover] = useState(false);\n\n  const squareSize = r * 4;\n  const squareHalf = squareSize / 2;\n  const cx = scale.x(x);\n  const cy = scale.y(y);\n\n  return (\n    <Group className={classNames(className, classes.line, correctness && !interactive && classes.disabledPoint)}>\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) + r },\n          { x: scale.x(x) + r, y: scale.y(y) - r },\n        ]}\n        key={`point-${x}-${y}-1`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) - r },\n          { x: scale.x(x) + r, y: scale.y(y) + r },\n        ]}\n        key={`point-${x}-${y}-2`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      {hover && (\n        <rect\n          x={cx - squareHalf}\n          y={cy - squareHalf}\n          width={squareSize}\n          height={squareSize}\n          stroke={color.defaults.BORDER_GRAY}\n          fill=\"none\"\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r * 2}\n        className={classNames(classes.transparentHandle)}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        {...rest}\n      />\n      {/* show correctness indicators */}\n      <CorrectnessIndicator\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        r={r}\n        correctness={correctness}\n        interactive={interactive}\n      />\n      {/* show correct point if answer was incorrect */}\n      <SmallCorrectPointIndicator\n        scale={scale}\n        x={x}\n        r={r}\n        correctness={correctness}\n        classes={classes}\n        correctData={correctData}\n        label={label}\n      />\n    </Group>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineCross extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineCross',\n  Component: LineCross,\n  name: 'Line Cross',\n});\n"],"file":"line-cross.js"}

package/lib/line/line-dot.js

@@ -21,21 +21,27 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _plot = require("@pie-lib/plot");
 
+var _renderUi = require("@pie-lib/render-ui");
+
 var _utils = require("../utils");
 
 var _line = _interopRequireDefault(require("./common/line"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _correctnessIndicators = require("../common/correctness-indicators");
 
-var _excluded = ["scale", "x", "y", "className", "classes", "r", "correctness"];
+var _excluded = ["scale", "x", "y", "className", "classes", "r", "correctness", "interactive", "correctData", "label"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -49,13 +55,60 @@ var DraggableComponent = function DraggableComponent(_ref) {
       classes = _ref.classes,
       r = _ref.r,
       correctness = _ref.correctness,
+      interactive = _ref.interactive,
+      correctData = _ref.correctData,
+      label = _ref.label,
       rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isHovered = _React$useState2[0],
+      setIsHovered = _React$useState2[1];
+
+  var allowRolloverEvent = !correctness && interactive;
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r * 3,
+    className: (0, _classnames["default"])(classes.transparentHandle, className),
+    pointerEvents: correctness ? 'none' : ''
+  }, rest)), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
     cx: scale.x(x),
     cy: scale.y(y),
     r: r,
-    className: (0, _classnames["default"])(className, classes.handle, correctness && correctness.value)
-  }, rest));
+    className: (0, _classnames["default"])(className, classes.handle, correctness && !interactive && classes.disabledPoint)
+  }, rest)), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
+  }), isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
+    x: scale.x(x) - r * 2,
+    y: scale.y(y) - r * 2,
+    width: r * 4,
+    height: r * 4,
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    strokeWidth: "1",
+    fill: "none"
+  }));
 };
 
 DraggableComponent.propTypes = {

package/lib/line/line-dot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/line/line-dot.js"],"names":["DraggableComponent","scale","x","y","className","classes","r","correctness","rest","handle","value","propTypes","PropTypes","object","number","string","shape","label","LineDot","props","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,CAAV,QAAUA,CAAV;AAAA,MAAaC,CAAb,QAAaA,CAAb;AAAA,MAAgBC,SAAhB,QAAgBA,SAAhB;AAAA,MAA2BC,OAA3B,QAA2BA,OAA3B;AAAA,MAAoCC,CAApC,QAAoCA,CAApC;AAAA,MAAuCC,WAAvC,QAAuCA,WAAvC;AAAA,MAAuDC,IAAvD;AAAA,sBACzB;AACE,IAAA,EAAE,EAAEP,KAAK,CAACC,CAAN,CAAQA,CAAR,CADN;AAEE,IAAA,EAAE,EAAED,KAAK,CAACE,CAAN,CAAQA,CAAR,CAFN;AAGE,IAAA,CAAC,EAAEG,CAHL;AAIE,IAAA,SAAS,EAAE,4BAAWF,SAAX,EAAsBC,OAAO,CAACI,MAA9B,EAAsCF,WAAW,IAAIA,WAAW,CAACG,KAAjE;AAJb,KAKMF,IALN,EADyB;AAAA,CAA3B;;AAUAR,kBAAkB,CAACW,SAAnB,GAA+B;AAC7BV,EAAAA,KAAK,EAAEW,sBAAUC,MADY;AAE7BX,EAAAA,CAAC,EAAEU,sBAAUE,MAFgB;AAG7BX,EAAAA,CAAC,EAAES,sBAAUE,MAHgB;AAI7BR,EAAAA,CAAC,EAAEM,sBAAUE,MAJgB;AAK7BV,EAAAA,SAAS,EAAEQ,sBAAUG,MALQ;AAM7BV,EAAAA,OAAO,EAAEO,sBAAUC,MANU;AAO7BN,EAAAA,WAAW,EAAEK,sBAAUI,KAAV,CAAgB;AAC3BN,IAAAA,KAAK,EAAEE,sBAAUG,MADU;AAE3BE,IAAAA,KAAK,EAAEL,sBAAUG;AAFU,GAAhB;AAPgB,CAA/B;;IAaaG,O;;;;;;;;;;;;WAOX,kBAAS;AACP,UAAMC,KAAK,GAAG,KAAKA,KAAnB;AACA,UAAQC,IAAR,GAA6BD,KAA7B,CAAQC,IAAR;AAAA,UAAcC,UAAd,GAA6BF,KAA7B,CAAcE,UAAd;;AACA,kBAAkCA,UAAU,IAAI,EAAhD;AAAA,8BAAQpB,KAAR;AAAA,UAAQA,KAAR,4BAAgB,EAAhB;AAAA,6BAAoBqB,IAApB;AAAA,UAAoBA,IAApB,2BAA2B,EAA3B;;AACA,UAAMC,KAAK,GAAG,wBAAYtB,KAAK,CAACC,CAAlB,EAAqBkB,IAArB,EAA2BE,IAAI,CAACE,KAAhC,EAAuC,SAAvC,CAAd;AAEA,0BAAO,gCAAC,gBAAD,gCAAaL,KAAb;AAAoB,QAAA,KAAK,EAAEI,KAA3B;AAAkC,QAAA,wBAAwB,EAAEvB;AAA5D,SAAP;AACD;;;EAd0ByB,kBAAMC,S;;;iCAAtBR,O,eACQ;AACjBE,EAAAA,IAAI,EAAER,sBAAUe,KADC;AAEjBC,EAAAA,QAAQ,EAAEhB,sBAAUiB,IAFH;AAGjBR,EAAAA,UAAU,EAAES,YAAMC,cAAN,CAAqBC;AAHhB,C;;eAgBN;AAAA,SAAO;AACpBC,IAAAA,IAAI,EAAE,SADc;AAEpBP,IAAAA,SAAS,EAAER,OAFS;AAGpBgB,IAAAA,IAAI,EAAE;AAHc,GAAP;AAAA,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\nimport classNames from 'classnames';\n\nconst DraggableComponent = ({ scale, x, y, className, classes, r, correctness, ...rest }) => (\n  <circle\n    cx={scale.x(x)}\n    cy={scale.y(y)}\n    r={r}\n    className={classNames(className, classes.handle, correctness && correctness.value)}\n    {...rest}\n  />\n);\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineDot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'lineDot');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineDot',\n  Component: LineDot,\n  name: 'Line Dot',\n});\n"],"file":"line-dot.js"}
+{"version":3,"sources":["../../src/line/line-dot.js"],"names":["DraggableComponent","scale","x","y","className","classes","r","correctness","interactive","correctData","label","rest","React","useState","isHovered","setIsHovered","allowRolloverEvent","transparentHandle","handle","disabledPoint","color","defaults","BORDER_GRAY","propTypes","PropTypes","object","number","string","shape","value","LineDot","props","data","graphProps","size","xBand","width","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\nimport { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';\n\nconst DraggableComponent = ({\n  scale,\n  x,\n  y,\n  className,\n  classes,\n  r,\n  correctness,\n  interactive,\n  correctData,\n  label,\n  ...rest\n}) => {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const allowRolloverEvent = !correctness && interactive;\n\n  return (\n    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r * 3}\n        className={classNames(classes.transparentHandle, className)}\n        pointerEvents={correctness ? 'none' : ''}\n        {...rest}\n      />\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r}\n        className={classNames(className, classes.handle, correctness && !interactive && classes.disabledPoint)}\n        {...rest}\n      />\n      {/* show correctness indicators */}\n      <CorrectnessIndicator\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        r={r}\n        correctness={correctness}\n        interactive={interactive}\n      />\n\n      {/* show correct point if answer was incorrect */}\n      <SmallCorrectPointIndicator\n        scale={scale}\n        x={x}\n        r={r}\n        correctness={correctness}\n        classes={classes}\n        correctData={correctData}\n        label={label}\n      />\n\n      {/* show rollover rectangle */}\n      {isHovered && allowRolloverEvent && (\n        <rect\n          x={scale.x(x) - r * 2}\n          y={scale.y(y) - r * 2}\n          width={r * 4}\n          height={r * 4}\n          stroke={color.defaults.BORDER_GRAY}\n          strokeWidth=\"1\"\n          fill=\"none\"\n        />\n      )}\n    </g>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineDot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'lineDot');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineDot',\n  Component: LineDot,\n  name: 'Line Dot',\n});\n"],"file":"line-dot.js"}

package/lib/mark-label.js

@@ -46,12 +46,11 @@ var styles = function styles(theme) {
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.fontSize,
       border: 'none',
-      color: _renderUi.color.primaryDark(),
       '&.correct': (0, _styles2.correct)('color'),
       '&.incorrect': (0, _styles2.incorrect)('color'),
-      '&.disabled': _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
+      '&.disabled': {
         backgroundColor: 'transparent !important'
-      }),
+      },
       '&.error': {
         border: "2px solid ".concat(theme.palette.error.main)
       }
@@ -59,9 +58,10 @@ var styles = function styles(theme) {
     mathInput: {
       pointerEvents: 'auto',
       textAlign: 'center',
-      fontSize: theme.typography.fontSize,
+      fontSize: theme.typography.fontSize + 2,
       fontFamily: theme.typography.fontFamily,
-      color: _renderUi.color.primaryDark()
+      color: _renderUi.color.primaryDark(),
+      paddingTop: theme.typography.fontSize / 2
     },
     disabled: _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
       backgroundColor: 'transparent !important'
@@ -70,7 +70,12 @@ var styles = function styles(theme) {
       border: "2px solid ".concat(theme.palette.error.main)
     },
     correct: _objectSpread({}, (0, _styles2.correct)('color')),
-    incorrect: _objectSpread({}, (0, _styles2.incorrect)('color'))
+    incorrect: _objectSpread({}, (0, _styles2.incorrect)('color')),
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    }
   };
 };
 
@@ -127,7 +132,10 @@ var MarkLabel = function MarkLabel(props) {
       rotate = props.rotate,
       correctness = props.correctness,
       autoFocus = props.autoFocus,
-      error = props.error;
+      error = props.error,
+      isHiddenLabel = props.isHiddenLabel,
+      limitCharacters = props.limitCharacters,
+      correctnessIndicator = props.correctnessIndicator;
 
   var _useState3 = (0, _react.useState)(mark.label),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -147,6 +155,10 @@ var MarkLabel = function MarkLabel(props) {
   var root = (0, _react.useRef)(null);
 
   var onChange = function onChange(e) {
+    if (limitCharacters && e.target.value && e.target.value.length > 20) {
+      return;
+    }
+
     setLabel(e.target.value);
   };
 
@@ -176,19 +188,27 @@ var MarkLabel = function MarkLabel(props) {
   (0, _react.useEffect)(function () {
     (0, _mathRendering.renderMath)(root);
   }, []);
-  return isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, correctnessIndicator, isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
     ref: function ref(r) {
-      return root = r;
+      root = r;
+      externalInputRef(r);
     },
     dangerouslySetInnerHTML: {
       __html: getLabelMathFormat(label)
     },
-    className: (0, _classnames["default"])(classes.mathInput, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.error, error), (0, _defineProperty2["default"])(_classNames, classes.correct, correctness && correctness.label === 'correct'), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correctness && correctness.label === 'incorrect'), _classNames)),
+    className: (0, _classnames["default"])(classes.mathInput, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.error, error), (0, _defineProperty2["default"])(_classNames, classes.correct, mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'correct'), (0, _defineProperty2["default"])(_classNames, classes.incorrect, mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'incorrect'), _classNames)),
     onClick: function onClick() {
       return setIsEditing(true);
     },
     style: {
-      minWidth: barWidth
+      minWidth: barWidth,
+      position: 'fixed',
+      transformOrigin: 'left',
+      transform: "rotate(".concat(rotate, "deg)"),
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
     }
   }) : /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
     inputRef: function inputRef(r) {
@@ -198,7 +218,7 @@ var MarkLabel = function MarkLabel(props) {
     },
     autoFocus: isEditing || autoFocus,
     disabled: disabled,
-    inputClassName: (0, _classnames["default"])(classes.input, correctness && correctness.label, disabled && 'disabled', error && 'error'),
+    inputClassName: (0, _classnames["default"])(classes.input, correctness && mark.editable ? correctness.label : null, disabled && 'disabled', error && 'error'),
     inputStyle: _objectSpread({
       minWidth: barWidth,
       textAlign: 'center',
@@ -215,11 +235,13 @@ var MarkLabel = function MarkLabel(props) {
       left: 0,
       minWidth: barWidth,
       transformOrigin: 'left',
-      transform: "rotate(".concat(rotate, "deg)")
+      transform: "rotate(".concat(rotate, "deg)"),
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
     },
     onChange: onChange,
     onBlur: onChangeProp
-  });
+  }));
 };
 
 exports.MarkLabel = MarkLabel;
@@ -237,7 +259,10 @@ MarkLabel.propTypes = {
   correctness: _propTypes["default"].shape({
     value: _propTypes["default"].string,
     label: _propTypes["default"].string
-  })
+  }),
+  isHiddenLabel: _propTypes["default"].bool,
+  limitCharacters: _propTypes["default"].bool,
+  correctnessIndicator: _propTypes["default"].node
 };
 
 var _default = (0, _styles.withStyles)(styles)(MarkLabel);

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","color","primaryDark","backgroundColor","palette","error","main","mathInput","pointerEvents","textAlign","disabled","correct","incorrect","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","isMathRendering","onChangeProp","extraStyle","width","r","__html","minWidth","background","boxSizing","paddingLeft","paddingRight","position","top","left","transformOrigin","transform","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    color: color.primaryDark(),\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      ...disabled('color'),\n      backgroundColor: 'transparent !important',\n    },\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n  },\n  mathInput: {\n    pointerEvents: 'auto',\n    textAlign: 'center',\n    fontSize: theme.typography.fontSize,\n    fontFamily: theme.typography.fontFamily,\n    color: color.primaryDark(),\n  },\n  disabled: {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  correct: {\n    ...correct('color'),\n  },\n  incorrect: {\n    ...incorrect('color'),\n  },\n});\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\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  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return isMathRendering() ? (\n    <div\n      ref={(r) => (root = r)}\n      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n      className={classNames(classes.mathInput, {\n        [classes.disabled]: disabled,\n        [classes.error]: error,\n        [classes.correct]: correctness && correctness.label === 'correct',\n        [classes.incorrect]: correctness && correctness.label === 'incorrect',\n      })}\n      onClick={() => setIsEditing(true)}\n      style={{ minWidth: barWidth }}\n    ></div>\n  ) : (\n    <AutosizeInput\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      autoFocus={isEditing || autoFocus}\n      disabled={disabled}\n      inputClassName={classNames(\n        classes.input,\n        correctness && correctness.label,\n        disabled && 'disabled',\n        error && 'error',\n      )}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle,\n      }}\n      value={label}\n      style={{\n        position: 'fixed',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`,\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","backgroundColor","palette","error","main","mathInput","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","correct","incorrect","flexContainer","display","flexDirection","alignItems","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","correctnessIndicator","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","length","isMathRendering","onChangeProp","extraStyle","width","r","__html","editable","minWidth","position","transformOrigin","transform","visibility","marginTop","background","boxSizing","paddingLeft","paddingRight","top","left","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,KAAK,EAAE;AACL,eAAO,OADF;AAELC,MAAAA,UAAU,EAAEF,KAAK,CAACG,UAAN,CAAiBD,UAFxB;AAGLE,MAAAA,QAAQ,EAAEJ,KAAK,CAACG,UAAN,CAAiBC,QAHtB;AAILC,MAAAA,MAAM,EAAE,MAJH;AAKL,mBAAa,sBAAQ,OAAR,CALR;AAML,qBAAe,wBAAU,OAAV,CANV;AAOL,oBAAc;AACZC,QAAAA,eAAe,EAAE;AADL,OAPT;AAUL,iBAAW;AAAED,QAAAA,MAAM,sBAAeL,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAAnC;AAAR;AAVN,KADkB;AAazBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,aAAa,EAAE,MADN;AAETC,MAAAA,SAAS,EAAE,QAFF;AAGTR,MAAAA,QAAQ,EAAEJ,KAAK,CAACG,UAAN,CAAiBC,QAAjB,GAA4B,CAH7B;AAITF,MAAAA,UAAU,EAAEF,KAAK,CAACG,UAAN,CAAiBD,UAJpB;AAKTW,MAAAA,KAAK,EAAEA,gBAAMC,WAAN,EALE;AAMTC,MAAAA,UAAU,EAAEf,KAAK,CAACG,UAAN,CAAiBC,QAAjB,GAA4B;AAN/B,KAbc;AAqBzBY,IAAAA,QAAQ,kCACH,uBAAS,OAAT,CADG;AAENV,MAAAA,eAAe,EAAE;AAFX,MArBiB;AAyBzBE,IAAAA,KAAK,EAAE;AACLH,MAAAA,MAAM,sBAAeL,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAAnC;AADD,KAzBkB;AA4BzBQ,IAAAA,OAAO,oBACF,sBAAQ,OAAR,CADE,CA5BkB;AA+BzBC,IAAAA,SAAS,oBACJ,wBAAU,OAAV,CADI,CA/BgB;AAkCzBC,IAAAA,aAAa,EAAE;AACbC,MAAAA,OAAO,EAAE,MADI;AAEbC,MAAAA,aAAa,EAAE,QAFF;AAGbC,MAAAA,UAAU,EAAE;AAHC;AAlCU,GAAZ;AAAA,CAAf;;AAyCA,SAASC,gBAAT,CAA0BC,KAA1B,EAAiC;AAC/B,MAAMC,YAAY,GAAG,CAAAD,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,IAAP,OAAiB,EAAtC;AACA,MAAMC,SAAS,GAAG,IAAIC,MAAJ,CAAW,2CAAX,CAAlB;AACA,SAAOD,SAAS,CAACE,IAAV,CAAeJ,YAAf,CAAP;AACD;;AAED,SAASK,kBAAT,CAA4BN,KAA5B,EAAmC;AACjC,MAAMC,YAAY,GAAG,CAAAD,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,IAAP,OAAiB,EAAtC;AACA,MAAIK,QAAJ;AACA,MAAIC,OAAO,GAAG,EAAd;AACA,MAAIC,gBAAgB,GAAGR,YAAY,CAACS,KAAb,CAAmB,GAAnB,CAAvB;;AACA,MAAID,gBAAgB,CAAC,CAAD,CAAhB,IAAuBA,gBAAgB,CAAC,CAAD,CAAhB,CAAoBE,QAApB,CAA6B,GAA7B,CAA3B,EAA8D;AAC5DJ,IAAAA,QAAQ,GAAGE,gBAAgB,CAAC,CAAD,CAAhB,CAAoBC,KAApB,CAA0B,GAA1B,KAAkC,EAA7C;AACD,GAFD,MAEO;AACLH,IAAAA,QAAQ,GAAG,CAAAN,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAES,KAAd,CAAoB,GAApB,MAA4B,EAAvC;AACD;;AAED,MAAIE,eAAJ;;AACA,MAAIb,gBAAgB,CAACC,KAAD,CAApB,EAA6B;AAC3B,QAAIS,gBAAgB,CAAC,CAAD,CAAhB,IAAuBA,gBAAgB,CAAC,CAAD,CAA3C,EAAgD;AAC9CD,MAAAA,OAAO,GAAGC,gBAAgB,CAAC,CAAD,CAA1B;AACD;;AACDG,IAAAA,eAAe,gBAASJ,OAAT,oBAA0BD,QAAQ,CAAC,CAAD,CAAlC,eAA0CA,QAAQ,CAAC,CAAD,CAAlD,SAAf;AACA,WAAOK,eAAP;AACD;;AACD,SAAOC,SAAP;AACD;;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;AAAA;;AAClC;AACA,kBAA0B,qBAAS,IAAT,CAA1B;AAAA;AAAA,MAAOtC,KAAP;AAAA,MAAcuC,QAAd;;AACA,MAAMC,IAAI,GAAG,wBAAY,UAACC,IAAD;AAAA,WAAUF,QAAQ,CAACE,IAAD,CAAlB;AAAA,GAAZ,EAAsC,IAAtC,CAAb;;AAEA,MACEC,IADF,GAaIJ,KAbJ,CACEI,IADF;AAAA,MAEEC,OAFF,GAaIL,KAbJ,CAEEK,OAFF;AAAA,MAGE5B,QAHF,GAaIuB,KAbJ,CAGEvB,QAHF;AAAA,MAIY6B,gBAJZ,GAaIN,KAbJ,CAIEO,QAJF;AAAA,MAKEC,QALF,GAaIR,KAbJ,CAKEQ,QALF;AAAA,MAMEC,MANF,GAaIT,KAbJ,CAMES,MANF;AAAA,MAOEC,WAPF,GAaIV,KAbJ,CAOEU,WAPF;AAAA,MAQEC,SARF,GAaIX,KAbJ,CAQEW,SARF;AAAA,MASE1C,KATF,GAaI+B,KAbJ,CASE/B,KATF;AAAA,MAUE2C,aAVF,GAaIZ,KAbJ,CAUEY,aAVF;AAAA,MAWEC,eAXF,GAaIb,KAbJ,CAWEa,eAXF;AAAA,MAYEC,oBAZF,GAaId,KAbJ,CAYEc,oBAZF;;AAeA,mBAA0B,qBAASV,IAAI,CAACnB,KAAd,CAA1B;AAAA;AAAA,MAAOA,KAAP;AAAA,MAAc8B,QAAd;;AACA,mBAAkC,qBAASxB,kBAAkB,CAACa,IAAI,CAACnB,KAAN,CAA3B,CAAlC;AAAA;AAAA,MAAO+B,SAAP;AAAA,MAAkBC,YAAlB;;AACA,mBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAIC,IAAI,GAAG,mBAAO,IAAP,CAAX;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,CAAD,EAAO;AACtB,QAAIT,eAAe,IAAIS,CAAC,CAACC,MAAF,CAASC,KAA5B,IAAqCF,CAAC,CAACC,MAAF,CAASC,KAAT,CAAeC,MAAf,GAAwB,EAAjE,EAAqE;AACnE;AACD;;AAEDV,IAAAA,QAAQ,CAACO,CAAC,CAACC,MAAF,CAASC,KAAV,CAAR;AACD,GAND;;AAQA,MAAME,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,WAAOR,SAAS,KAAK,KAAd,IAAuBF,SAAS,KAAKlB,SAA5C;AACD,GAFD;;AAIA,MAAM6B,YAAY,GAAG,SAAfA,YAAe,CAACL,CAAD,EAAO;AAC1BL,IAAAA,YAAY,CAAC1B,kBAAkB,CAACa,IAAI,CAACnB,KAAN,CAAnB,CAAZ;AACAkC,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACAnB,IAAAA,KAAK,CAACqB,QAAN,CAAeC,CAAC,CAACC,MAAF,CAASC,KAAxB;AACD,GAJD;;AAKA,MAAII,UAAU,GAAG,EAAjB;;AAEA,MAAInB,MAAJ,EAAY;AACVmB,IAAAA,UAAU,GAAG;AACXC,MAAAA,KAAK,EAAE,OADI;AAEXxD,MAAAA,SAAS,EAAE;AAFA,KAAb;AAID,GAjDiC,CAmDlC;;;AACA,wBAAU,YAAM;AACd0C,IAAAA,QAAQ,CAACX,IAAI,CAACnB,KAAN,CAAR;AACD,GAFD,EAEG,CAACmB,IAAI,CAACnB,KAAN,CAFH;AAIA,wBAAU,YAAM;AACd,mCAAWmC,IAAX;AACD,GAFD,EAEG,EAFH;AAIA,sBACE;AAAK,IAAA,SAAS,EAAEf,OAAO,CAACzB;AAAxB,KACGkC,oBADH,EAEGY,eAAe,kBACd;AACE,IAAA,GAAG,EAAE,aAACI,CAAD,EAAO;AACVV,MAAAA,IAAI,GAAGU,CAAP;AACAxB,MAAAA,gBAAgB,CAACwB,CAAD,CAAhB;AACD,KAJH;AAKE,IAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAExC,kBAAkB,CAACN,KAAD;AAA5B,KAL3B;AAME,IAAA,SAAS,EAAE,4BAAWoB,OAAO,CAAClC,SAAnB,mEACRkC,OAAO,CAAC5B,QADA,EACWA,QADX,iDAER4B,OAAO,CAACpC,KAFA,EAEQA,KAFR,iDAGRoC,OAAO,CAAC3B,OAHA,EAGU0B,IAAI,CAAC4B,QAAL,IAAiB,CAAAtB,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEzB,KAAb,MAAuB,SAHlD,iDAIRoB,OAAO,CAAC1B,SAJA,EAIYyB,IAAI,CAAC4B,QAAL,IAAiB,CAAAtB,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEzB,KAAb,MAAuB,WAJpD,gBANb;AAYE,IAAA,OAAO,EAAE;AAAA,aAAMkC,YAAY,CAAC,IAAD,CAAlB;AAAA,KAZX;AAaE,IAAA,KAAK,EAAE;AACLc,MAAAA,QAAQ,EAAEzB,QADL;AAEL0B,MAAAA,QAAQ,EAAE,OAFL;AAGLC,MAAAA,eAAe,EAAE,MAHZ;AAILC,MAAAA,SAAS,mBAAY3B,MAAZ,SAJJ;AAKL4B,MAAAA,UAAU,EAAEzB,aAAa,GAAG,QAAH,GAAc,OALlC;AAML0B,MAAAA,SAAS,EAAExB,oBAAoB,GAAG,MAAH,GAAY;AANtC;AAbT,IADc,gBAwBd,gCAAC,8BAAD;AACE,IAAA,QAAQ,EAAE,kBAACgB,CAAD,EAAO;AACf5B,MAAAA,IAAI,CAAC4B,CAAD,CAAJ;;AACAxB,MAAAA,gBAAgB,CAACwB,CAAD,CAAhB;AACD,KAJH;AAKE,IAAA,SAAS,EAAEZ,SAAS,IAAIP,SAL1B;AAME,IAAA,QAAQ,EAAElC,QANZ;AAOE,IAAA,cAAc,EAAE,4BACd4B,OAAO,CAAC3C,KADM,EAEdgD,WAAW,IAAIN,IAAI,CAAC4B,QAApB,GAA+BtB,WAAW,CAACzB,KAA3C,GAAmD,IAFrC,EAGdR,QAAQ,IAAI,UAHE,EAIdR,KAAK,IAAI,OAJK,CAPlB;AAaE,IAAA,UAAU;AACRgE,MAAAA,QAAQ,EAAEzB,QADF;AAERnC,MAAAA,SAAS,EAAE,QAFH;AAGRkE,MAAAA,UAAU,EAAE,aAHJ;AAIRC,MAAAA,SAAS,EAAE,YAJH;AAKRC,MAAAA,WAAW,EAAE,CALL;AAMRC,MAAAA,YAAY,EAAE;AANN,OAOLd,UAPK,CAbZ;AAsBE,IAAA,KAAK,EAAE3C,KAtBT;AAuBE,IAAA,KAAK,EAAE;AACLiD,MAAAA,QAAQ,EAAE,OADL;AAEL9D,MAAAA,aAAa,EAAE,MAFV;AAGLuE,MAAAA,GAAG,EAAE,CAHA;AAILC,MAAAA,IAAI,EAAE,CAJD;AAKLX,MAAAA,QAAQ,EAAEzB,QALL;AAML2B,MAAAA,eAAe,EAAE,MANZ;AAOLC,MAAAA,SAAS,mBAAY3B,MAAZ,SAPJ;AAQL4B,MAAAA,UAAU,EAAEzB,aAAa,GAAG,QAAH,GAAc,OARlC;AASL0B,MAAAA,SAAS,EAAExB,oBAAoB,GAAG,MAAH,GAAY;AATtC,KAvBT;AAkCE,IAAA,QAAQ,EAAEO,QAlCZ;AAmCE,IAAA,MAAM,EAAEM;AAnCV,IA1BJ,CADF;AAmED,CA/HM;;;AAiIP5B,SAAS,CAAC8C,SAAV,GAAsB;AACpBlC,EAAAA,SAAS,EAAEmC,sBAAUC,IADD;AAEpBtE,EAAAA,QAAQ,EAAEqE,sBAAUC,IAFA;AAGpB9E,EAAAA,KAAK,EAAE6E,sBAAUE,GAHG;AAIpB3B,EAAAA,QAAQ,EAAEyB,sBAAUG,IAJA;AAKpBC,EAAAA,UAAU,EAAEC,YAAMC,cALE;AAMpB/C,EAAAA,OAAO,EAAEyC,sBAAUO,MANC;AAOpB9C,EAAAA,QAAQ,EAAEuC,sBAAUG,IAPA;AAQpB7C,EAAAA,IAAI,EAAE0C,sBAAUO,MARI;AASpB7C,EAAAA,QAAQ,EAAEsC,sBAAUQ,MATA;AAUpB7C,EAAAA,MAAM,EAAEqC,sBAAUQ,MAVE;AAWpB5C,EAAAA,WAAW,EAAEoC,sBAAUS,KAAV,CAAgB;AAC3B/B,IAAAA,KAAK,EAAEsB,sBAAUU,MADU;AAE3BvE,IAAAA,KAAK,EAAE6D,sBAAUU;AAFU,GAAhB,CAXO;AAepB5C,EAAAA,aAAa,EAAEkC,sBAAUC,IAfL;AAgBpBlC,EAAAA,eAAe,EAAEiC,sBAAUC,IAhBP;AAiBpBjC,EAAAA,oBAAoB,EAAEgC,sBAAU3C;AAjBZ,CAAtB;;eAoBe,wBAAW3C,MAAX,EAAmBuC,SAAnB,C","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\n\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      backgroundColor: 'transparent !important',\n    },\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n  },\n  mathInput: {\n    pointerEvents: 'auto',\n    textAlign: 'center',\n    fontSize: theme.typography.fontSize + 2,\n    fontFamily: theme.typography.fontFamily,\n    color: color.primaryDark(),\n    paddingTop: theme.typography.fontSize / 2,\n  },\n  disabled: {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  correct: {\n    ...correct('color'),\n  },\n  incorrect: {\n    ...incorrect('color'),\n  },\n  flexContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n    correctnessIndicator,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\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  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return (\n    <div className={classes.flexContainer}>\n      {correctnessIndicator}\n      {isMathRendering() ? (\n        <div\n          ref={(r) => {\n            root = r;\n            externalInputRef(r);\n          }}\n          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n          className={classNames(classes.mathInput, {\n            [classes.disabled]: disabled,\n            [classes.error]: error,\n            [classes.correct]: mark.editable && correctness?.label === 'correct',\n            [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',\n          })}\n          onClick={() => setIsEditing(true)}\n          style={{\n            minWidth: barWidth,\n            position: 'fixed',\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n        ></div>\n      ) : (\n        <AutosizeInput\n          inputRef={(r) => {\n            _ref(r);\n            externalInputRef(r);\n          }}\n          autoFocus={isEditing || autoFocus}\n          disabled={disabled}\n          inputClassName={classNames(\n            classes.input,\n            correctness && mark.editable ? correctness.label : null,\n            disabled && 'disabled',\n            error && 'error',\n          )}\n          inputStyle={{\n            minWidth: barWidth,\n            textAlign: 'center',\n            background: 'transparent',\n            boxSizing: 'border-box',\n            paddingLeft: 0,\n            paddingRight: 0,\n            ...extraStyle,\n          }}\n          value={label}\n          style={{\n            position: 'fixed',\n            pointerEvents: 'auto',\n            top: 0,\n            left: 0,\n            minWidth: barWidth,\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n          onChange={onChange}\n          onBlur={onChangeProp}\n        />\n      )}\n    </div>\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n  correctnessIndicator: PropTypes.node,\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}