@pie-lib/graphing 2.11.9 → 2.12.1-next.2

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.11.9...@pie-lib/graphing@2.12.0) (2023-01-16)
+
+
+### Bug Fixes
+
+* **graphing:** add background for objects labels PD-2061 ([f27ba7a](https://github.com/pie-framework/pie-lib/commit/f27ba7a1f8f476f9b9806505d1b3271057793921))
+* **graphing:** fix calculation for mark-label coordinates, fix and update tests ([84bedd2](https://github.com/pie-framework/pie-lib/commit/84bedd2139cd2b5578b951ccb32f4f29917ff6e1))
+* **graphing:** fix calculation for mark-label coordinates, fix and update tests ([a83213d](https://github.com/pie-framework/pie-lib/commit/a83213d26d28ca41c2e9575f619adb8006b4e5ee))
+* **graphing:** fix calculation for mark-label coordinates, fix and update tests ([09c1445](https://github.com/pie-framework/pie-lib/commit/09c1445e7b60a2ad10120a78e3f54acdfc162cbe))
+* **graphing:** fix mark labels position for touch devices ([12a2362](https://github.com/pie-framework/pie-lib/commit/12a2362f013b677ef912a75f212e68af1399af5e))
+* **graphing:** fix style for points, refactor ([5d5893b](https://github.com/pie-framework/pie-lib/commit/5d5893bbb993081b79ad712ed362d350574853ed))
+* **graphing:** make the base point tappable on touch devices ([d633d64](https://github.com/pie-framework/pie-lib/commit/d633d64ec1b5dde39513d49b6697f3bc12d0d994))
+* **graphing:** make the label tool responsive wip ([0694f9c](https://github.com/pie-framework/pie-lib/commit/0694f9c2816c58f16c52c4deeba04da2d55d3a54))
+* **graphing:** try to make the point tappable on touch devices ([7cfb116](https://github.com/pie-framework/pie-lib/commit/7cfb1165496b60b392c90585038f2d3f30c5e261))
+
+
+### Features
+
+* added theme naming support + cleanup ([72d562d](https://github.com/pie-framework/pie-lib/commit/72d562d509e5d31d883690eb455a9afea6bf54fc))
+
+
+
+
+
 ## [2.11.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.11.8...@pie-lib/graphing@2.11.9) (2023-01-04)
 
 **Note:** Version bump only for package @pie-lib/graphing

package/lib/axis/arrow.js

@@ -31,10 +31,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var style = {
-  root: {
-    fill: 'var(--arrow-color, black)'
-  }
+var style = function style(theme) {
+  return {
+    root: {
+      fill: "var(--arrow-color, ".concat(theme.palette.common.black, ")")
+    }
+  };
 };
 
 var Arrow = /*#__PURE__*/function (_React$Component) {

package/lib/axis/arrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/axis/arrow.jsx"],"names":["style","root","fill","Arrow","props","x","y","classes","className","scale","names","direction","xv","yv","transform","getTransform","rotate","React","Component","propTypes","PropTypes","number","oneOf","object","isRequired","string","types","ScaleType","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,IAAI,EAAE;AACJC,IAAAA,IAAI,EAAE;AADF;AADM,CAAd;;IAMaC,K;;;;;;;;;;;;WACX,kBAAS;AACP,wBAA4C,KAAKC,KAAjD;AAAA,UAAQC,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AAAA,UAAcC,OAAd,eAAcA,OAAd;AAAA,UAAuBC,SAAvB,eAAuBA,SAAvB;AAAA,UAAkCC,KAAlC,eAAkCA,KAAlC;AACA,UAAMC,KAAK,GAAG,4BAAWH,OAAO,CAACN,IAAnB,EAAyBO,SAAzB,CAAd;AACA,UAAIG,SAAS,GAAG,KAAKP,KAAL,CAAWO,SAAX,IAAwB,MAAxC;AAEA,UAAMC,EAAE,GAAGH,KAAK,CAACJ,CAAN,CAAQA,CAAR,CAAX;AACA,UAAMQ,EAAE,GAAGJ,KAAK,CAACH,CAAN,CAAQA,CAAR,CAAX;AAEA,UAAIQ,SAAS,GAAG,EAAhB;;AAEA,UAAMC,YAAY,GAAG,SAAfA,YAAe,CAACV,CAAD,EAAIC,CAAJ,EAAOU,MAAP;AAAA,mCAA+BX,CAA/B,eAAqCC,CAArC,sBAAkDU,MAAlD;AAAA,OAArB;;AAEA,UAAIL,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,CAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,OAAlB,EAA2B;AACzBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,IAAlB,EAAwB;AACtBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,EAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,0BAAO;AAAM,QAAA,CAAC,EAAC,uBAAR;AAAgC,QAAA,SAAS,EAAEC,SAA3C;AAAsD,QAAA,SAAS,EAAEJ;AAAjE,QAAP;AACD;;;EA9BwBO,kBAAMC,S;;;AAiCjCf,KAAK,CAACgB,SAAN,GAAkB;AAChBb,EAAAA,CAAC,EAAEc,sBAAUC,MADG;AAEhBhB,EAAAA,CAAC,EAAEe,sBAAUC,MAFG;AAGhBV,EAAAA,SAAS,EAAES,sBAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,EAAkB,IAAlB,EAAwB,MAAxB,CAAhB,CAHK;AAIhBf,EAAAA,OAAO,EAAEa,sBAAUG,MAAV,CAAiBC,UAJV;AAKhBhB,EAAAA,SAAS,EAAEY,sBAAUK,MALL;AAMhBhB,EAAAA,KAAK,EAAEiB,YAAMC,SAAN,CAAgBH;AANP,CAAlB;AASArB,KAAK,CAACyB,YAAN,GAAqB;AACnBtB,EAAAA,CAAC,EAAE,CADgB;AAEnBD,EAAAA,CAAC,EAAE,CAFgB;AAGnBM,EAAAA,SAAS,EAAE;AAHQ,CAArB;;eAMe,wBAAWX,KAAX,EAAkBG,KAAlB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\n\nconst style = {\n  root: {\n    fill: 'var(--arrow-color, black)',\n  },\n};\n\nexport class Arrow extends React.Component {\n  render() {\n    const { x, y, classes, className, scale } = this.props;\n    const names = classNames(classes.root, className);\n    let direction = this.props.direction || 'left';\n\n    const xv = scale.x(x);\n    const yv = scale.y(y);\n\n    let transform = '';\n\n    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;\n\n    if (direction === 'left') {\n      transform = getTransform(xv - 15, yv, 0);\n    }\n\n    if (direction === 'right') {\n      transform = getTransform(xv + 15, yv, 180);\n    }\n\n    if (direction === 'up') {\n      transform = getTransform(xv, yv - 15, 90);\n    }\n\n    if (direction === 'down') {\n      transform = getTransform(xv, yv + 15, 270);\n    }\n\n    return <path d=\"m 0,0 8,-5 0,10 -8,-5\" transform={transform} className={names} />;\n  }\n}\n\nArrow.propTypes = {\n  y: PropTypes.number,\n  x: PropTypes.number,\n  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  scale: types.ScaleType.isRequired,\n};\n\nArrow.defaultProps = {\n  y: 0,\n  x: 0,\n  direction: 'left',\n};\n\nexport default withStyles(style)(Arrow);\n"],"file":"arrow.js"}
+{"version":3,"sources":["../../src/axis/arrow.jsx"],"names":["style","theme","root","fill","palette","common","black","Arrow","props","x","y","classes","className","scale","names","direction","xv","yv","transform","getTransform","rotate","React","Component","propTypes","PropTypes","number","oneOf","object","isRequired","string","types","ScaleType","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;AAAA,SAAY;AACxBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,+BAAwBF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,KAA7C;AADA;AADkB,GAAZ;AAAA,CAAd;;IAMaC,K;;;;;;;;;;;;WACX,kBAAS;AACP,wBAA4C,KAAKC,KAAjD;AAAA,UAAQC,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AAAA,UAAcC,OAAd,eAAcA,OAAd;AAAA,UAAuBC,SAAvB,eAAuBA,SAAvB;AAAA,UAAkCC,KAAlC,eAAkCA,KAAlC;AACA,UAAMC,KAAK,GAAG,4BAAWH,OAAO,CAACT,IAAnB,EAAyBU,SAAzB,CAAd;AACA,UAAIG,SAAS,GAAG,KAAKP,KAAL,CAAWO,SAAX,IAAwB,MAAxC;AAEA,UAAMC,EAAE,GAAGH,KAAK,CAACJ,CAAN,CAAQA,CAAR,CAAX;AACA,UAAMQ,EAAE,GAAGJ,KAAK,CAACH,CAAN,CAAQA,CAAR,CAAX;AAEA,UAAIQ,SAAS,GAAG,EAAhB;;AAEA,UAAMC,YAAY,GAAG,SAAfA,YAAe,CAACV,CAAD,EAAIC,CAAJ,EAAOU,MAAP;AAAA,mCAA+BX,CAA/B,eAAqCC,CAArC,sBAAkDU,MAAlD;AAAA,OAArB;;AAEA,UAAIL,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,CAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,OAAlB,EAA2B;AACzBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,IAAlB,EAAwB;AACtBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,EAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,0BAAO;AAAM,QAAA,CAAC,EAAC,uBAAR;AAAgC,QAAA,SAAS,EAAEC,SAA3C;AAAsD,QAAA,SAAS,EAAEJ;AAAjE,QAAP;AACD;;;EA9BwBO,kBAAMC,S;;;AAiCjCf,KAAK,CAACgB,SAAN,GAAkB;AAChBb,EAAAA,CAAC,EAAEc,sBAAUC,MADG;AAEhBhB,EAAAA,CAAC,EAAEe,sBAAUC,MAFG;AAGhBV,EAAAA,SAAS,EAAES,sBAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,EAAkB,IAAlB,EAAwB,MAAxB,CAAhB,CAHK;AAIhBf,EAAAA,OAAO,EAAEa,sBAAUG,MAAV,CAAiBC,UAJV;AAKhBhB,EAAAA,SAAS,EAAEY,sBAAUK,MALL;AAMhBhB,EAAAA,KAAK,EAAEiB,YAAMC,SAAN,CAAgBH;AANP,CAAlB;AASArB,KAAK,CAACyB,YAAN,GAAqB;AACnBtB,EAAAA,CAAC,EAAE,CADgB;AAEnBD,EAAAA,CAAC,EAAE,CAFgB;AAGnBM,EAAAA,SAAS,EAAE;AAHQ,CAArB;;eAMe,wBAAWf,KAAX,EAAkBO,KAAlB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\n\nconst style = (theme) => ({\n  root: {\n    fill: `var(--arrow-color, ${theme.palette.common.black})`,\n  },\n});\n\nexport class Arrow extends React.Component {\n  render() {\n    const { x, y, classes, className, scale } = this.props;\n    const names = classNames(classes.root, className);\n    let direction = this.props.direction || 'left';\n\n    const xv = scale.x(x);\n    const yv = scale.y(y);\n\n    let transform = '';\n\n    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;\n\n    if (direction === 'left') {\n      transform = getTransform(xv - 15, yv, 0);\n    }\n\n    if (direction === 'right') {\n      transform = getTransform(xv + 15, yv, 180);\n    }\n\n    if (direction === 'up') {\n      transform = getTransform(xv, yv - 15, 90);\n    }\n\n    if (direction === 'down') {\n      transform = getTransform(xv, yv + 15, 270);\n    }\n\n    return <path d=\"m 0,0 8,-5 0,10 -8,-5\" transform={transform} className={names} />;\n  }\n}\n\nArrow.propTypes = {\n  y: PropTypes.number,\n  x: PropTypes.number,\n  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  scale: types.ScaleType.isRequired,\n};\n\nArrow.defaultProps = {\n  y: 0,\n  x: 0,\n  direction: 'left',\n};\n\nexport default withStyles(style)(Arrow);\n"],"file":"arrow.js"}

package/lib/coordinates-label.js

@@ -33,7 +33,7 @@ var styles = function styles(theme) {
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.fontSize,
       borderRadius: '8px',
-      background: '#FFFFFF',
+      background: theme.palette.common.white,
       color: _renderUi.color.primaryDark()
     },
     inputLabel: {

package/lib/coordinates-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/coordinates-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","borderRadius","background","color","primaryDark","inputLabel","padding","getLabelPosition","graphProps","x","y","labelLength","scale","domain","topShift","leftShift","rightEdge","max","left","top","CoordinatesLabel","classes","label","length","labelPosition","style","position","pointerEvents","width","ariaLabel","propTypes","types","GraphPropsType","PropTypes","object","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport InputBase from '@material-ui/core/InputBase';\nimport { roundNumber } from './utils';\n\nconst styles = (theme) => ({\n  input: {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    borderRadius: '8px',\n    background: '#FFFFFF',\n    color: color.primaryDark(),\n  },\n  inputLabel: {\n    padding: 0,\n  },\n});\n\nexport const getLabelPosition = (graphProps, x, y, labelLength) => {\n  const { scale, domain } = graphProps;\n  const topShift = 8;\n  const leftShift = 10;\n  const rightEdge = scale.x(x) + labelLength + leftShift;\n\n  if (rightEdge >= scale.x(domain.max)) {\n    return {\n      left: scale.x(x) - leftShift - labelLength,\n      top: scale.y(y) - topShift,\n    };\n  }\n\n  return {\n    left: scale.x(x) + leftShift,\n    top: scale.y(y) - topShift,\n  };\n};\n\nexport const CoordinatesLabel = ({ x, y, graphProps, classes }) => {\n  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;\n  const labelLength = (label.length || 0) * 6;\n  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);\n\n  const style = {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    width: labelLength,\n    padding: 0,\n    ...labelPosition,\n  };\n\n  return (\n    <InputBase\n      style={style}\n      classes={{ input: classes.inputLabel }}\n      className={classes.input}\n      value={label}\n      inputProps={{ ariaLabel: 'naked' }}\n    />\n  );\n};\n\nCoordinatesLabel.propTypes = {\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n};\n\nexport default withStyles(styles)(CoordinatesLabel);\n"],"file":"coordinates-label.js"}
+{"version":3,"sources":["../src/coordinates-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","borderRadius","background","palette","common","white","color","primaryDark","inputLabel","padding","getLabelPosition","graphProps","x","y","labelLength","scale","domain","topShift","leftShift","rightEdge","max","left","top","CoordinatesLabel","classes","label","length","labelPosition","style","position","pointerEvents","width","ariaLabel","propTypes","types","GraphPropsType","PropTypes","object","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport InputBase from '@material-ui/core/InputBase';\nimport { roundNumber } from './utils';\n\nconst styles = (theme) => ({\n  input: {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    borderRadius: '8px',\n    background: theme.palette.common.white,\n    color: color.primaryDark(),\n  },\n  inputLabel: {\n    padding: 0,\n  },\n});\n\nexport const getLabelPosition = (graphProps, x, y, labelLength) => {\n  const { scale, domain } = graphProps;\n  const topShift = 8;\n  const leftShift = 10;\n  const rightEdge = scale.x(x) + labelLength + leftShift;\n\n  if (rightEdge >= scale.x(domain.max)) {\n    return {\n      left: scale.x(x) - leftShift - labelLength,\n      top: scale.y(y) - topShift,\n    };\n  }\n\n  return {\n    left: scale.x(x) + leftShift,\n    top: scale.y(y) - topShift,\n  };\n};\n\nexport const CoordinatesLabel = ({ x, y, graphProps, classes }) => {\n  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;\n  const labelLength = (label.length || 0) * 6;\n  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);\n\n  const style = {\n    position: 'absolute',\n    pointerEvents: 'auto',\n    width: labelLength,\n    padding: 0,\n    ...labelPosition,\n  };\n\n  return (\n    <InputBase\n      style={style}\n      classes={{ input: classes.inputLabel }}\n      className={classes.input}\n      value={label}\n      inputProps={{ ariaLabel: 'naked' }}\n    />\n  );\n};\n\nCoordinatesLabel.propTypes = {\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n};\n\nexport default withStyles(styles)(CoordinatesLabel);\n"],"file":"coordinates-label.js"}

package/lib/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","collapsibleToolbar","bool","collapsibleToolbarTitle","disabledLabels","disabledTitle","domain","types","DomainType","labels","LabelType","labelModeEnabled","coordinatesOnHover","marks","onChangeLabels","func","onChangeMarks","onChangeTitle","range","size","width","number","isRequired","height","showLabels","showPixelGuides","showTitle","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","labelsPlaceholders","titlePlaceholder","graphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  collapsibleToolbar: PropTypes.bool,\n  collapsibleToolbarTitle: PropTypes.string,\n  disabledLabels: PropTypes.bool,\n  disabledTitle: PropTypes.bool,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeLabels: PropTypes.func,\n  onChangeMarks: PropTypes.func,\n  onChangeTitle: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n  }),\n  showLabels: PropTypes.bool,\n  showPixelGuides: PropTypes.bool,\n  showTitle: PropTypes.bool,\n  title: PropTypes.string,\n  tools: PropTypes.array,\n};\n\nconst getMaskSize = (size) => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46,\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter((m) => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex((m) => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object,\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {},\n    disabledLabels: false,\n    disabledTitle: false,\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex((m) => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = (markData) => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter((m) => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex((m) => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = (mark) => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find((t) => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = (point) => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter((m) => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      disabledLabels,\n      disabledTitle,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled,\n      labelsPlaceholders,\n      showLabels,\n      showPixelGuides,\n      showTitle,\n      titlePlaceholder,\n      onChangeLabels,\n      onChangeTitle,\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root\n        rootRef={(r) => (this.rootNode = r)}\n        disabledTitle={disabledTitle}\n        disabledLabels={disabledLabels}\n        labels={labels}\n        labelsPlaceholders={labelsPlaceholders || {}}\n        showPixelGuides={showPixelGuides}\n        showLabels={showLabels}\n        showTitle={showTitle}\n        title={title}\n        titlePlaceholder={titlePlaceholder}\n        onChangeTitle={onChangeTitle}\n        onChangeLabels={onChangeLabels}\n        {...common}\n      >\n        <g\n          transform={\n            domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined\n          }\n        >\n          <Grid {...common} />\n          <Axes {...axesSettings} {...common} />\n          <Bg {...size} onClick={this.onBgClick} {...common} />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n          </mask>\n\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            {(backgroundMarks || []).map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}-bg`}\n                  mark={{ ...m, disabled: true, isBackground: true }}\n                  labelNode={this.state.labelNode}\n                  {...common}\n                />\n              );\n            })}\n\n            {marks.map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}`}\n                  mark={m}\n                  coordinatesOnHover={coordinatesOnHover}\n                  onChange={this.changeMark}\n                  onComplete={this.completeMark}\n                  onClick={this.onBgClick}\n                  onDragStart={this.startDrag}\n                  onDragStop={this.stopDrag}\n                  labelNode={this.state.labelNode}\n                  isToolActive={currentTool && markType === currentTool.type}\n                  {...common}\n                />\n              );\n            })}\n\n            <foreignObject\n              ref={(labelNode) => (this.labelNode = labelNode)}\n              x=\"0\"\n              y=\"0\"\n              {...size}\n              style={{ pointerEvents: 'none' }}\n            />\n          </g>\n        </g>\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}
+{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","collapsibleToolbar","bool","collapsibleToolbarTitle","disabledLabels","disabledTitle","domain","types","DomainType","labels","LabelType","labelModeEnabled","coordinatesOnHover","marks","onChangeLabels","func","onChangeMarks","onChangeTitle","range","size","width","number","isRequired","height","showLabels","showPixelGuides","showTitle","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","labelsPlaceholders","titlePlaceholder","graphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  collapsibleToolbar: PropTypes.bool,\n  collapsibleToolbarTitle: PropTypes.string,\n  disabledLabels: PropTypes.bool,\n  disabledTitle: PropTypes.bool,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeLabels: PropTypes.func,\n  onChangeMarks: PropTypes.func,\n  onChangeTitle: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n  }),\n  showLabels: PropTypes.bool,\n  showPixelGuides: PropTypes.bool,\n  showTitle: PropTypes.bool,\n  title: PropTypes.string,\n  tools: PropTypes.array,\n};\n\nconst getMaskSize = (size) => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46,\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter((m) => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex((m) => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object,\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {},\n    disabledLabels: false,\n    disabledTitle: false,\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex((m) => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = (markData) => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter((m) => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex((m) => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = (mark) => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find((t) => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = (point) => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter((m) => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      disabledLabels,\n      disabledTitle,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled,\n      labelsPlaceholders,\n      showLabels,\n      showPixelGuides,\n      showTitle,\n      titlePlaceholder,\n      onChangeLabels,\n      onChangeTitle,\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root\n        rootRef={(r) => (this.rootNode = r)}\n        disabledTitle={disabledTitle}\n        disabledLabels={disabledLabels}\n        labels={labels}\n        labelsPlaceholders={labelsPlaceholders || {}}\n        showPixelGuides={showPixelGuides}\n        showLabels={showLabels}\n        showTitle={showTitle}\n        title={title}\n        titlePlaceholder={titlePlaceholder}\n        onChangeTitle={onChangeTitle}\n        onChangeLabels={onChangeLabels}\n        {...common}\n      >\n        <g\n          transform={\n            domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined\n          }\n        >\n          <Grid {...common} />\n          <Axes {...axesSettings} {...common} />\n          <Bg {...size} onClick={this.onBgClick} {...common} />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n          </mask>\n\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            {(backgroundMarks || []).map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}-bg`}\n                  mark={{ ...m, disabled: true, isBackground: true }}\n                  labelNode={this.state.labelNode}\n                  {...common}\n                />\n              );\n            })}\n\n            {marks.map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}`}\n                  mark={m}\n                  coordinatesOnHover={coordinatesOnHover}\n                  onChange={this.changeMark}\n                  onComplete={this.completeMark}\n                  onClick={this.onBgClick}\n                  onDragStart={this.startDrag}\n                  onDragStop={this.stopDrag}\n                  labelNode={this.state.labelNode}\n                  isToolActive={currentTool && markType === currentTool.type}\n                  {...common}\n                />\n              );\n            })}\n            <foreignObject\n              ref={(labelNode) => (this.labelNode = labelNode)}\n              x=\"0\"\n              y=\"0\"\n              {...size}\n              style={{ pointerEvents: 'none' }}\n            />\n          </g>\n        </g>\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}

package/lib/mark-label.js

@@ -17,16 +17,16 @@ 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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _useDebounce = require("./use-debounce");
 
 var _plot = require("@pie-lib/plot");
 
-var _useDebounce = require("./use-debounce");
-
 var _renderUi = require("@pie-lib/render-ui");
 
 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); }
@@ -50,11 +50,11 @@ var styles = function styles(theme) {
     },
     disabled: {
       border: "solid 1px ".concat(_renderUi.color.primaryDark()),
-      background: _renderUi.color.background()
+      background: theme.palette.background.paper
     },
     disabledMark: {
       border: "solid 1px ".concat(_renderUi.color.disabled()),
-      background: _renderUi.color.background(),
+      background: theme.palette.background.paper,
       color: _renderUi.color.disabled()
     }
   };
@@ -78,9 +78,10 @@ var position = function position(graphProps, mark, rect) {
 
 exports.position = position;
 
-var coordinates = function coordinates(graphProps, mark, rect, position) {
+var coordinates = function coordinates(graphProps, mark, rect, position, fontSize) {
   var scale = graphProps.scale;
   var shift = 10;
+  var font = fontSize ? fontSize : 16;
   rect = rect || {
     width: 0,
     height: 0
@@ -90,32 +91,32 @@ var coordinates = function coordinates(graphProps, mark, rect, position) {
     case 'bottom-right':
       {
         return {
-          left: scale.x(mark.x) + shift,
-          top: scale.y(mark.y) + shift
+          left: "".concat((scale.x(mark.x) + shift) / font, "rem"),
+          top: "".concat((scale.y(mark.y) + shift) / font, "rem")
         };
       }
 
     case 'bottom-left':
       {
         return {
-          left: scale.x(mark.x) - shift - rect.width,
-          top: scale.y(mark.y) + shift
+          left: "".concat((scale.x(mark.x) - shift - rect.width) / font, "rem"),
+          top: "".concat((scale.y(mark.y) + shift) / font, "rem")
         };
       }
 
     case 'top-left':
       {
         return {
-          left: scale.x(mark.x) - shift - rect.width,
-          top: scale.y(mark.y) - shift - rect.height
+          left: "".concat((scale.x(mark.x) - shift - rect.width) / font, "rem"),
+          top: "".concat((scale.y(mark.y) - shift - rect.height) / font, "rem")
         };
       }
 
     case 'top-right':
       {
         return {
-          left: scale.x(mark.x) + shift,
-          top: scale.y(mark.y) - shift - rect.height
+          left: "".concat((scale.x(mark.x) + shift) / font, "rem"),
+          top: "".concat((scale.y(mark.y) - shift - rect.height) / font, "rem")
         };
       }
   }
@@ -124,6 +125,8 @@ var coordinates = function coordinates(graphProps, mark, rect, position) {
 exports.coordinates = coordinates;
 
 var MarkLabel = function MarkLabel(props) {
+  var _cn;
+
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       input = _useState2[0],
@@ -137,7 +140,8 @@ var MarkLabel = function MarkLabel(props) {
       graphProps = props.graphProps,
       classes = props.classes,
       disabled = props.disabled,
-      externalInputRef = props.inputRef;
+      externalInputRef = props.inputRef,
+      theme = props.theme;
 
   var _useState3 = (0, _react.useState)(mark.label),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -159,15 +163,16 @@ var MarkLabel = function MarkLabel(props) {
       props.onChange(debouncedLabel);
     }
   }, [debouncedLabel]);
+  var fontSize = theme && theme.typography ? theme.typography.fontSize + 2 : 16;
   var rect = input ? input.getBoundingClientRect() : {
     width: 0,
     height: 0
   };
   var pos = position(graphProps, mark, rect);
-  var leftTop = coordinates(graphProps, mark, rect, pos);
+  var leftTop = coordinates(graphProps, mark, rect, pos, fontSize);
 
   var style = _objectSpread({
-    position: 'absolute',
+    position: 'fixed',
     pointerEvents: 'auto'
   }, leftTop);
 
@@ -179,7 +184,7 @@ var MarkLabel = function MarkLabel(props) {
       externalInputRef(r);
     },
     disabled: disabledInput,
-    inputClassName: (0, _classnames["default"])(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark),
+    inputClassName: (0, _classnames["default"])(classes.input, (_cn = {}, (0, _defineProperty2["default"])(_cn, classes.disabled, disabled), (0, _defineProperty2["default"])(_cn, classes.disabledMark, mark.disabled), _cn)),
     value: label,
     style: style,
     onChange: onChange
@@ -193,10 +198,13 @@ MarkLabel.propTypes = {
   graphProps: _plot.types.GraphPropsType,
   classes: _propTypes["default"].object,
   inputRef: _propTypes["default"].func,
-  mark: _propTypes["default"].object
+  mark: _propTypes["default"].object,
+  theme: _propTypes["default"].object
 };
 
-var _default = (0, _styles.withStyles)(styles)(MarkLabel);
+var _default = (0, _styles.withStyles)(styles, {
+  withTheme: true
+})(MarkLabel);
 
 exports["default"] = _default;
 //# sourceMappingURL=mark-label.js.map

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","disabledMark","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","propTypes","PropTypes","bool","func","types","GraphPropsType","object"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn 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 { useDebounce } from './use-debounce';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    padding: theme.spacing.unit * 0.5,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: `solid 1px ${color.secondary()}`,\n    borderRadius: '3px',\n    color: color.primaryDark(),\n  },\n  disabled: {\n    border: `solid 1px ${color.primaryDark()}`,\n    background: color.background(),\n  },\n  disabledMark: {\n    border: `solid 1px ${color.disabled()}`,\n    background: color.background(),\n    color: color.disabled(),\n  },\n});\n\nexport const position = (graphProps, mark, rect) => {\n  rect = rect || { width: 0, height: 0 };\n  const { scale, domain, range } = graphProps;\n  const shift = 10;\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  return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect, position) => {\n  const { scale } = graphProps;\n  const shift = 10;\n  rect = rect || { width: 0, height: 0 };\n\n  switch (position) {\n    case 'bottom-right': {\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n    }\n    case 'bottom-left': {\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n    }\n    case 'top-left': {\n      return {\n        left: scale.x(mark.x) - shift - rect.width,\n        top: scale.y(mark.y) - shift - rect.height,\n      };\n    }\n    case 'top-right': {\n      return {\n        left: scale.x(mark.x) + shift,\n        top: scale.y(mark.y) - shift - rect.height,\n      };\n    }\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 } = props;\n  const [label, setLabel] = useState(mark.label);\n\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: 'absolute',\n    pointerEvents: 'auto',\n    ...leftTop,\n  };\n\n  const disabledInput = disabled || mark.disabled;\n\n  return (\n    <AutosizeInput\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      disabled={disabledInput}\n      inputClassName={cn(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark)}\n      value={label}\n      style={style}\n      onChange={onChange}\n    />\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};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","palette","paper","disabledMark","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","font","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","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';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    padding: theme.spacing.unit * 0.5,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: `solid 1px ${color.secondary()}`,\n    borderRadius: '3px',\n    color: color.primaryDark(),\n  },\n  disabled: {\n    border: `solid 1px ${color.primaryDark()}`,\n    background: theme.palette.background.paper,\n  },\n  disabledMark: {\n    border: `solid 1px ${color.disabled()}`,\n    background: theme.palette.background.paper,\n    color: color.disabled(),\n  },\n});\n\nexport const position = (graphProps, mark, rect) => {\n  rect = rect || { width: 0, height: 0 };\n  const { scale, domain, range } = graphProps;\n  const shift = 10;\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, position, fontSize) => {\n  const { scale } = graphProps;\n  const shift = 10;\n  const font = fontSize ? fontSize : 16;\n  rect = rect || { width: 0, height: 0 };\n\n  switch (position) {\n    case 'bottom-right': {\n      return { left: `${(scale.x(mark.x) + shift) / font}rem`, top: `${(scale.y(mark.y) + shift) / font}rem` };\n    }\n\n    case 'bottom-left': {\n      return {\n        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,\n        top: `${(scale.y(mark.y) + shift) / font}rem`,\n      };\n    }\n\n    case 'top-left': {\n      return {\n        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,\n        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,\n      };\n    }\n\n    case 'top-right': {\n      return {\n        left: `${(scale.x(mark.x) + shift) / font}rem`,\n        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,\n      };\n    }\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\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 fontSize = theme && theme.typography ? theme.typography.fontSize + 2 : 16;\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, fontSize);\n\n  const style = {\n    position: 'fixed',\n    pointerEvents: 'auto',\n    ...leftTop,\n  };\n\n  const disabledInput = disabled || mark.disabled;\n\n  return (\n    <AutosizeInput\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      disabled={disabledInput}\n      inputClassName={cn(classes.input, {\n        [classes.disabled]: disabled,\n        [classes.disabledMark]: mark.disabled,\n      })}\n      value={label}\n      style={style}\n      onChange={onChange}\n    />\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"}

package/lib/tools/point/component.js

@@ -146,7 +146,17 @@ var Point = /*#__PURE__*/function (_React$Component) {
         onDrag: this.move,
         onDragStart: this.startDrag,
         onDragStop: this.stopDrag,
-        onClick: this.clickPoint
+        onClick: this.clickPoint,
+        onTouchStart: function onTouchStart(e) {
+          e.stopPropagation();
+
+          _this2.clickPoint();
+        },
+        onTouchEnd: function onTouchEnd(e) {
+          e.stopPropagation();
+
+          _this2.clickPoint();
+        }
       })), labelNode && mark.hasOwnProperty('label') && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
         inputRef: function inputRef(r) {
           return _this2.input = r;

package/lib/tools/point/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tools/point/component.jsx"],"names":["Point","props","p","mark","state","setState","update","label","onChange","undefined","labelModeEnabled","onClick","input","focus","coordinatesOnHover","graphProps","labelNode","move","startDrag","stopDrag","clickPoint","hasOwnProperty","ReactDOM","createPortal","r","labelChange","React","Component","types","GraphPropsType","isRequired","ToolPropTypeFields"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { BasePoint } from '../shared/point';\nimport { ToolPropTypeFields } from '../shared/types';\nimport { types } from '@pie-lib/plot';\nimport ReactDOM from 'react-dom';\nimport MarkLabel from '../../mark-label';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\n\nexport class Point extends React.Component {\n  static propTypes = {\n    graphProps: types.GraphPropsType.isRequired,\n    ...ToolPropTypeFields,\n  };\n\n  static defaultProps = {};\n\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  move = (p) => {\n    const mark = { ...this.state.mark, ...p };\n    this.setState({ mark });\n  };\n\n  startDrag = () => {\n    const update = { ...this.props.mark };\n\n    if (update.label === '') {\n      delete update.label;\n    }\n    this.setState({ mark: update });\n  };\n\n  stopDrag = () => {\n    const { onChange } = this.props;\n    const mark = { ...this.state.mark };\n    this.setState({ mark: undefined }, () => {\n      if (!isEqual(this.props.mark, mark)) {\n        onChange(this.props.mark, mark);\n      }\n    });\n  };\n\n  labelChange = (label) => {\n    const { onChange } = this.props;\n    const update = { ...this.props.mark, label };\n\n    if (!label || isEmpty(label)) {\n      delete update.label;\n    }\n\n    this.setState({ mark: update }, () => {\n      onChange(this.props.mark, update);\n    });\n  };\n\n  clickPoint = () => {\n    const { labelModeEnabled, onChange, onClick, mark } = this.props;\n\n    if (labelModeEnabled) {\n      onChange(mark, { label: '', ...mark });\n      if (this.input) {\n        this.input.focus();\n      }\n    } else {\n      onClick(mark);\n    }\n  };\n\n  render() {\n    const { coordinatesOnHover, graphProps, labelNode, labelModeEnabled } = this.props;\n    const mark = this.state.mark ? this.state.mark : this.props.mark;\n\n    return (\n      <React.Fragment>\n        <BasePoint\n          {...mark}\n          coordinatesOnHover={coordinatesOnHover}\n          graphProps={graphProps}\n          labelNode={labelNode}\n          onDrag={this.move}\n          onDragStart={this.startDrag}\n          onDragStop={this.stopDrag}\n          onClick={this.clickPoint}\n        />\n        {labelNode &&\n          mark.hasOwnProperty('label') &&\n          ReactDOM.createPortal(\n            <MarkLabel\n              inputRef={(r) => (this.input = r)}\n              disabled={!labelModeEnabled}\n              mark={mark}\n              graphProps={graphProps}\n              onChange={this.labelChange}\n            />,\n            labelNode,\n          )}\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Point;\n"],"file":"component.js"}
+{"version":3,"sources":["../../../src/tools/point/component.jsx"],"names":["Point","props","p","mark","state","setState","update","label","onChange","undefined","labelModeEnabled","onClick","input","focus","coordinatesOnHover","graphProps","labelNode","move","startDrag","stopDrag","clickPoint","e","stopPropagation","hasOwnProperty","ReactDOM","createPortal","r","labelChange","React","Component","types","GraphPropsType","isRequired","ToolPropTypeFields"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { BasePoint } from '../shared/point';\nimport { ToolPropTypeFields } from '../shared/types';\nimport { types } from '@pie-lib/plot';\nimport ReactDOM from 'react-dom';\nimport MarkLabel from '../../mark-label';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\n\nexport class Point extends React.Component {\n  static propTypes = {\n    graphProps: types.GraphPropsType.isRequired,\n    ...ToolPropTypeFields,\n  };\n\n  static defaultProps = {};\n\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  move = (p) => {\n    const mark = { ...this.state.mark, ...p };\n    this.setState({ mark });\n  };\n\n  startDrag = () => {\n    const update = { ...this.props.mark };\n\n    if (update.label === '') {\n      delete update.label;\n    }\n    this.setState({ mark: update });\n  };\n\n  stopDrag = () => {\n    const { onChange } = this.props;\n    const mark = { ...this.state.mark };\n    this.setState({ mark: undefined }, () => {\n      if (!isEqual(this.props.mark, mark)) {\n        onChange(this.props.mark, mark);\n      }\n    });\n  };\n\n  labelChange = (label) => {\n    const { onChange } = this.props;\n    const update = { ...this.props.mark, label };\n\n    if (!label || isEmpty(label)) {\n      delete update.label;\n    }\n\n    this.setState({ mark: update }, () => {\n      onChange(this.props.mark, update);\n    });\n  };\n\n  clickPoint = () => {\n    const { labelModeEnabled, onChange, onClick, mark } = this.props;\n\n    if (labelModeEnabled) {\n      onChange(mark, { label: '', ...mark });\n      if (this.input) {\n        this.input.focus();\n      }\n    } else {\n      onClick(mark);\n    }\n  };\n\n  render() {\n    const { coordinatesOnHover, graphProps, labelNode, labelModeEnabled } = this.props;\n    const mark = this.state.mark ? this.state.mark : this.props.mark;\n\n    return (\n      <React.Fragment>\n        <BasePoint\n          {...mark}\n          coordinatesOnHover={coordinatesOnHover}\n          graphProps={graphProps}\n          labelNode={labelNode}\n          onDrag={this.move}\n          onDragStart={this.startDrag}\n          onDragStop={this.stopDrag}\n          onClick={this.clickPoint}\n          onTouchStart={(e) =>{ e.stopPropagation(); this.clickPoint();}} \n          onTouchEnd={(e) =>{ e.stopPropagation(); this.clickPoint();}} \n        />\n        {labelNode &&\n          mark.hasOwnProperty('label') &&\n          ReactDOM.createPortal(\n            <MarkLabel\n              inputRef={(r) => (this.input = r)}\n              disabled={!labelModeEnabled}\n              mark={mark}\n              graphProps={graphProps}\n              onChange={this.labelChange}\n            />,\n            labelNode,\n          )}\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Point;\n"],"file":"component.js"}

package/lib/tools/shared/point/base-point.js

@@ -37,7 +37,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _utils = require("../../../utils");
 
-var _excluded = ["classes", "className", "coordinatesOnHover", "x", "y", "disabled", "correctness", "graphProps", "labelNode"];
+var _excluded = ["classes", "className", "coordinatesOnHover", "x", "y", "disabled", "correctness", "graphProps", "labelNode", "style"];
 
 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); }; }
 
@@ -74,12 +74,20 @@ var RawBp = /*#__PURE__*/function (_React$Component) {
           correctness = _this$props.correctness,
           graphProps = _this$props.graphProps,
           labelNode = _this$props.labelNode,
+          style = _this$props.style,
           rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
       var showCoordinates = this.state.showCoordinates;
       var scale = graphProps.scale;
       var r = (0, _utils.thinnerShapesNeeded)(graphProps) ? 5 : 7;
-      return /*#__PURE__*/_react["default"].createElement("g", (0, _extends2["default"])({
-        className: (0, _classnames["default"])(classes.point, disabled && classes.disabled, classes[correctness], className),
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+        style: {
+          fill: 'transparent',
+          cursor: 'pointer',
+          pointerEvents: 'all'
+        },
+        r: r * 3,
+        cx: scale.x(x),
+        cy: scale.y(y),
         onMouseEnter: function onMouseEnter() {
           return _this2.setState({
             showCoordinates: true
@@ -90,22 +98,27 @@ var RawBp = /*#__PURE__*/function (_React$Component) {
             showCoordinates: false
           });
         }
-      }, rest), /*#__PURE__*/_react["default"].createElement("circle", {
-        style: {
-          fill: 'transparent'
+      }, rest)), /*#__PURE__*/_react["default"].createElement("g", (0, _extends2["default"])({
+        className: (0, _classnames["default"])(classes.point, disabled && classes.disabled, classes[correctness], className),
+        onMouseEnter: function onMouseEnter() {
+          return _this2.setState({
+            showCoordinates: true
+          });
         },
-        r: r * 2,
-        cx: 2 * scale.x(x),
-        cy: 2 * scale.y(y)
-      }), /*#__PURE__*/_react["default"].createElement("circle", {
+        onMouseLeave: function onMouseLeave() {
+          return _this2.setState({
+            showCoordinates: false
+          });
+        }
+      }, rest), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({}, rest, {
         r: r,
         cx: scale.x(x),
         cy: scale.y(y)
-      }), labelNode && coordinatesOnHover && showCoordinates && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_coordinatesLabel["default"], {
+      })), labelNode && coordinatesOnHover && showCoordinates && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_coordinatesLabel["default"], {
         graphProps: graphProps,
         x: x,
         y: y
-      }), labelNode));
+      }), labelNode)));
     }
   }]);
   return RawBp;

package/lib/tools/shared/point/base-point.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/tools/shared/point/base-point.jsx"],"names":["RawBp","props","state","showCoordinates","classes","className","coordinatesOnHover","x","y","disabled","correctness","graphProps","labelNode","rest","scale","r","point","setState","fill","ReactDOM","createPortal","React","Component","PropTypes","object","string","bool","number","types","GraphPropsType","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;IAEaA,K;;;;;AAaX,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AAAEC,MAAAA,eAAe,EAAE;AAAnB,KAAb;AAFiB;AAGlB;;;;WAED,kBAAS;AAAA;;AACP,wBAWI,KAAKF,KAXT;AAAA,UACEG,OADF,eACEA,OADF;AAAA,UAEEC,SAFF,eAEEA,SAFF;AAAA,UAGEC,kBAHF,eAGEA,kBAHF;AAAA,UAIEC,CAJF,eAIEA,CAJF;AAAA,UAKEC,CALF,eAKEA,CALF;AAAA,UAMEC,QANF,eAMEA,QANF;AAAA,UAOEC,WAPF,eAOEA,WAPF;AAAA,UAQEC,UARF,eAQEA,UARF;AAAA,UASEC,SATF,eASEA,SATF;AAAA,UAUKC,IAVL;AAYA,UAAQV,eAAR,GAA4B,KAAKD,KAAjC,CAAQC,eAAR;AACA,UAAQW,KAAR,GAAkBH,UAAlB,CAAQG,KAAR;AACA,UAAMC,CAAC,GAAG,gCAAoBJ,UAApB,IAAkC,CAAlC,GAAsC,CAAhD;AAEA,0BACE;AACE,QAAA,SAAS,EAAE,4BAAWP,OAAO,CAACY,KAAnB,EAA0BP,QAAQ,IAAIL,OAAO,CAACK,QAA9C,EAAwDL,OAAO,CAACM,WAAD,CAA/D,EAA8EL,SAA9E,CADb;AAEE,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACY,QAAL,CAAc;AAAEd,YAAAA,eAAe,EAAE;AAAnB,WAAd,CAAN;AAAA,SAFhB;AAGE,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACc,QAAL,CAAc;AAAEd,YAAAA,eAAe,EAAE;AAAnB,WAAd,CAAN;AAAA;AAHhB,SAIMU,IAJN,gBAME;AAAQ,QAAA,KAAK,EAAE;AAAEK,UAAAA,IAAI,EAAE;AAAR,SAAf;AAAwC,QAAA,CAAC,EAAEH,CAAC,GAAG,CAA/C;AAAkD,QAAA,EAAE,EAAE,IAAID,KAAK,CAACP,CAAN,CAAQA,CAAR,CAA1D;AAAsE,QAAA,EAAE,EAAE,IAAIO,KAAK,CAACN,CAAN,CAAQA,CAAR;AAA9E,QANF,eAOE;AAAQ,QAAA,CAAC,EAAEO,CAAX;AAAc,QAAA,EAAE,EAAED,KAAK,CAACP,CAAN,CAAQA,CAAR,CAAlB;AAA8B,QAAA,EAAE,EAAEO,KAAK,CAACN,CAAN,CAAQA,CAAR;AAAlC,QAPF,EAQGI,SAAS,IACRN,kBADD,IAECH,eAFD,iBAGCgB,qBAASC,YAAT,eAAsB,gCAAC,4BAAD;AAAkB,QAAA,UAAU,EAAET,UAA9B;AAA0C,QAAA,CAAC,EAAEJ,CAA7C;AAAgD,QAAA,CAAC,EAAEC;AAAnD,QAAtB,EAAgFI,SAAhF,CAXJ,CADF;AAeD;;;EAlDwBS,kBAAMC,S;;;iCAApBtB,K,eACQ;AACjBI,EAAAA,OAAO,EAAEmB,sBAAUC,MADF;AAEjBnB,EAAAA,SAAS,EAAEkB,sBAAUE,MAFJ;AAGjBnB,EAAAA,kBAAkB,EAAEiB,sBAAUG,IAHb;AAIjBhB,EAAAA,WAAW,EAAEa,sBAAUE,MAJN;AAKjBhB,EAAAA,QAAQ,EAAEc,sBAAUG,IALH;AAMjBd,EAAAA,SAAS,EAAEW,sBAAUC,MANJ;AAOjBjB,EAAAA,CAAC,EAAEgB,sBAAUI,MAPI;AAQjBnB,EAAAA,CAAC,EAAEe,sBAAUI,MARI;AASjBhB,EAAAA,UAAU,EAAEiB,YAAMC,cAAN,CAAqBC;AAThB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { types } from '@pie-lib/plot';\nimport CoordinatesLabel from '../../../coordinates-label';\nimport ReactDOM from 'react-dom';\nimport { thinnerShapesNeeded } from '../../../utils';\n\nexport class RawBp extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    coordinatesOnHover: PropTypes.bool,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool,\n    labelNode: PropTypes.object,\n    x: PropTypes.number,\n    y: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { showCoordinates: false };\n  }\n\n  render() {\n    const {\n      classes,\n      className,\n      coordinatesOnHover,\n      x,\n      y,\n      disabled,\n      correctness,\n      graphProps,\n      labelNode,\n      ...rest\n    } = this.props;\n    const { showCoordinates } = this.state;\n    const { scale } = graphProps;\n    const r = thinnerShapesNeeded(graphProps) ? 5 : 7;\n\n    return (\n      <g\n        className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}\n        onMouseEnter={() => this.setState({ showCoordinates: true })}\n        onMouseLeave={() => this.setState({ showCoordinates: false })}\n        {...rest}\n      >\n        <circle style={{ fill: 'transparent' }} r={r * 2} cx={2 * scale.x(x)} cy={2 * scale.y(y)} />\n        <circle r={r} cx={scale.x(x)} cy={scale.y(y)} />\n        {labelNode &&\n          coordinatesOnHover &&\n          showCoordinates &&\n          ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}\n      </g>\n    );\n  }\n}\n"],"file":"base-point.js"}
+{"version":3,"sources":["../../../../src/tools/shared/point/base-point.jsx"],"names":["RawBp","props","state","showCoordinates","classes","className","coordinatesOnHover","x","y","disabled","correctness","graphProps","labelNode","style","rest","scale","r","fill","cursor","pointerEvents","setState","point","ReactDOM","createPortal","React","Component","PropTypes","object","string","bool","number","types","GraphPropsType","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { types } from '@pie-lib/plot';\nimport CoordinatesLabel from '../../../coordinates-label';\nimport ReactDOM from 'react-dom';\nimport { thinnerShapesNeeded } from '../../../utils';\n\nexport class RawBp extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    coordinatesOnHover: PropTypes.bool,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool,\n    labelNode: PropTypes.object,\n    x: PropTypes.number,\n    y: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { showCoordinates: false };\n  }\n\n  render() {\n    const {\n      classes,\n      className,\n      coordinatesOnHover,\n      x,\n      y,\n      disabled,\n      correctness,\n      graphProps,\n      labelNode,\n      style,\n      ...rest\n    } = this.props;\n    const { showCoordinates } = this.state;\n    const { scale } = graphProps;\n    const r = thinnerShapesNeeded(graphProps) ? 5 : 7;\n\n    return (\n      <>\n        <circle\n          style={{ fill: 'transparent', cursor: 'pointer', pointerEvents: 'all' }}\n          r={r * 3}\n          cx={scale.x(x)}\n          cy={scale.y(y)}\n          onMouseEnter={() => this.setState({ showCoordinates: true })}\n          onMouseLeave={() => this.setState({ showCoordinates: false })}\n          {...rest}\n        />\n        <g\n          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}\n          onMouseEnter={() => this.setState({ showCoordinates: true })}\n          onMouseLeave={() => this.setState({ showCoordinates: false })}\n          {...rest}\n        >\n          <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />\n          {labelNode &&\n            coordinatesOnHover &&\n            showCoordinates &&\n            ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}\n        </g>\n      </>\n    );\n  }\n}\n"],"file":"base-point.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.11.9",
+  "version": "2.12.1-next.2+25f03b77",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -18,9 +18,9 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/drag": "^2.0.6",
+    "@pie-lib/drag": "^2.1.1-next.2+25f03b77",
     "@pie-lib/graphing-utils": "^1.1.21",
-    "@pie-lib/plot": "^2.5.4",
+    "@pie-lib/plot": "^2.6.1-next.2+25f03b77",
     "@pie-lib/render-ui": "^4.13.7",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
@@ -44,6 +44,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "7d35be038ac82f281b0de61e730a84fdc966fb20",
+  "gitHead": "25f03b77864a5c0f7ac64d85aea34692cd2e2aac",
   "scripts": {}
 }

package/src/axis/arrow.jsx

@@ -5,11 +5,11 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
 
-const style = {
+const style = (theme) => ({
   root: {
-    fill: 'var(--arrow-color, black)',
+    fill: `var(--arrow-color, ${theme.palette.common.black})`,
   },
-};
+});
 
 export class Arrow extends React.Component {
   render() {

package/src/coordinates-label.jsx

@@ -11,7 +11,7 @@ const styles = (theme) => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.fontSize,
     borderRadius: '8px',
-    background: '#FFFFFF',
+    background: theme.palette.common.white,
     color: color.primaryDark(),
   },
   inputLabel: {

package/src/graph.jsx

@@ -178,6 +178,7 @@ export class Graph extends React.Component {
     let { marks } = this.props;
 
     const graphProps = createGraphProps(domain, range, size, () => this.rootNode);
+
     const maskSize = getMaskSize(size);
     const common = { graphProps, labelModeEnabled };
 
@@ -246,7 +247,6 @@ export class Graph extends React.Component {
                 />
               );
             })}
-
             <foreignObject
               ref={(labelNode) => (this.labelNode = labelNode)}
               x="0"

package/src/mark-label.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import AutosizeInput from 'react-input-autosize';
-import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
 import { useDebounce } from './use-debounce';
+import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 
 const styles = (theme) => ({
@@ -19,11 +19,11 @@ const styles = (theme) => ({
   },
   disabled: {
     border: `solid 1px ${color.primaryDark()}`,
-    background: color.background(),
+    background: theme.palette.background.paper,
   },
   disabledMark: {
     border: `solid 1px ${color.disabled()}`,
-    background: color.background(),
+    background: theme.palette.background.paper,
     color: color.disabled(),
   },
 });
@@ -38,31 +38,39 @@ export const position = (graphProps, mark, rect) => {
 
   const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';
   const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
+
   return `${v}-${h}`;
 };
 
-export const coordinates = (graphProps, mark, rect, position) => {
+export const coordinates = (graphProps, mark, rect, position, fontSize) => {
   const { scale } = graphProps;
   const shift = 10;
+  const font = fontSize ? fontSize : 16;
   rect = rect || { width: 0, height: 0 };
 
   switch (position) {
     case 'bottom-right': {
-      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };
+      return { left: `${(scale.x(mark.x) + shift) / font}rem`, top: `${(scale.y(mark.y) + shift) / font}rem` };
     }
+
     case 'bottom-left': {
-      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };
+      return {
+        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
+        top: `${(scale.y(mark.y) + shift) / font}rem`,
+      };
     }
+
     case 'top-left': {
       return {
-        left: scale.x(mark.x) - shift - rect.width,
-        top: scale.y(mark.y) - shift - rect.height,
+        left: `${(scale.x(mark.x) - shift - rect.width) / font}rem`,
+        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,
       };
     }
+
     case 'top-right': {
       return {
-        left: scale.x(mark.x) + shift,
-        top: scale.y(mark.y) - shift - rect.height,
+        left: `${(scale.x(mark.x) + shift) / font}rem`,
+        top: `${(scale.y(mark.y) - shift - rect.height) / font}rem`,
       };
     }
   }
@@ -72,7 +80,8 @@ export const MarkLabel = (props) => {
   const [input, setInput] = useState(null);
   const _ref = useCallback((node) => setInput(node));
 
-  const { mark, graphProps, classes, disabled, inputRef: externalInputRef } = props;
+  const { mark, graphProps, classes, disabled, inputRef: externalInputRef, theme } = props;
+
   const [label, setLabel] = useState(mark.label);
 
   const onChange = (e) => setLabel(e.target.value);
@@ -91,12 +100,13 @@ export const MarkLabel = (props) => {
     }
   }, [debouncedLabel]);
 
+  const fontSize = theme && theme.typography ? theme.typography.fontSize + 2 : 16;
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
-  const leftTop = coordinates(graphProps, mark, rect, pos);
+  const leftTop = coordinates(graphProps, mark, rect, pos, fontSize);
 
   const style = {
-    position: 'absolute',
+    position: 'fixed',
     pointerEvents: 'auto',
     ...leftTop,
   };
@@ -110,7 +120,10 @@ export const MarkLabel = (props) => {
         externalInputRef(r);
       }}
       disabled={disabledInput}
-      inputClassName={cn(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark)}
+      inputClassName={cn(classes.input, {
+        [classes.disabled]: disabled,
+        [classes.disabledMark]: mark.disabled,
+      })}
       value={label}
       style={style}
       onChange={onChange}
@@ -125,6 +138,7 @@ MarkLabel.propTypes = {
   classes: PropTypes.object,
   inputRef: PropTypes.func,
   mark: PropTypes.object,
+  theme: PropTypes.object,
 };
 
-export default withStyles(styles)(MarkLabel);
+export default withStyles(styles, { withTheme: true })(MarkLabel);

package/src/tools/point/component.jsx

@@ -85,6 +85,8 @@ export class Point extends React.Component {
           onDragStart={this.startDrag}
           onDragStop={this.stopDrag}
           onClick={this.clickPoint}
+          onTouchStart={(e) =>{ e.stopPropagation(); this.clickPoint();}} 
+          onTouchEnd={(e) =>{ e.stopPropagation(); this.clickPoint();}} 
         />
         {labelNode &&
           mark.hasOwnProperty('label') &&

package/src/tools/shared/point/base-point.jsx

@@ -35,6 +35,7 @@ export class RawBp extends React.Component {
       correctness,
       graphProps,
       labelNode,
+      style,
       ...rest
     } = this.props;
     const { showCoordinates } = this.state;
@@ -42,19 +43,29 @@ export class RawBp extends React.Component {
     const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
 
     return (
-      <g
-        className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
-        onMouseEnter={() => this.setState({ showCoordinates: true })}
-        onMouseLeave={() => this.setState({ showCoordinates: false })}
-        {...rest}
-      >
-        <circle style={{ fill: 'transparent' }} r={r * 2} cx={2 * scale.x(x)} cy={2 * scale.y(y)} />
-        <circle r={r} cx={scale.x(x)} cy={scale.y(y)} />
-        {labelNode &&
-          coordinatesOnHover &&
-          showCoordinates &&
-          ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
-      </g>
+      <>
+        <circle
+          style={{ fill: 'transparent', cursor: 'pointer', pointerEvents: 'all' }}
+          r={r * 3}
+          cx={scale.x(x)}
+          cy={scale.y(y)}
+          onMouseEnter={() => this.setState({ showCoordinates: true })}
+          onMouseLeave={() => this.setState({ showCoordinates: false })}
+          {...rest}
+        />
+        <g
+          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+          onMouseEnter={() => this.setState({ showCoordinates: true })}
+          onMouseLeave={() => this.setState({ showCoordinates: false })}
+          {...rest}
+        >
+          <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />
+          {labelNode &&
+            coordinatesOnHover &&
+            showCoordinates &&
+            ReactDOM.createPortal(<CoordinatesLabel graphProps={graphProps} x={x} y={y} />, labelNode)}
+        </g>
+      </>
     );
   }
 }