@pie-element/number-line 9.6.8-next.3 → 9.6.8-next.7

package/lib/number-line/graph/ticks.js

@@ -89,20 +89,27 @@ var Tick = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(Tick, [{
     key: "updateTextBox",
     value: function updateTextBox() {
+      var _this2 = this;
+
       if (this.text) {
-        var _this$text$getBBox = this.text.getBBox(),
-            width = _this$text$getBBox.width,
-            height = _this$text$getBBox.height,
-            x = _this$text$getBBox.x,
-            y = _this$text$getBBox.y;
-
-        this.setState({
-          textBox: {
-            width: width,
-            height: height,
-            x: x,
-            y: y
-          }
+        // ensure the DOM is "ready" → layout is done before getting text measurements
+        requestAnimationFrame(function () {
+          var _this2$text$getBBox = _this2.text.getBBox(),
+              width = _this2$text$getBBox.width,
+              height = _this2$text$getBBox.height,
+              x = _this2$text$getBBox.x,
+              y = _this2$text$getBBox.y;
+
+          _this2.text.setAttribute('x', width / 2 * -1);
+
+          _this2.setState({
+            textBox: {
+              width: width,
+              height: height,
+              x: x,
+              y: y
+            }
+          });
         });
       }
     }
@@ -112,22 +119,7 @@ var Tick = /*#__PURE__*/function (_React$Component) {
       //center align the tick text
       if (this.text) {
         var fraction = this.props.fraction;
-
-        var _this$text$getBBox2 = this.text.getBBox(),
-            width = _this$text$getBBox2.width,
-            height = _this$text$getBBox2.height,
-            x = _this$text$getBBox2.x,
-            y = _this$text$getBBox2.y;
-
-        this.text.setAttribute('x', width / 2 * -1);
-        this.setState({
-          textBox: {
-            width: width,
-            height: height,
-            x: x,
-            y: y
-          }
-        });
+        this.updateTextBox();
 
         if (fraction && !this.wasRendered) {
           // used for rendering the line fraction
@@ -139,7 +131,7 @@ var Tick = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       //the domain value
       var _this$props = this.props,
@@ -185,7 +177,7 @@ var Tick = /*#__PURE__*/function (_React$Component) {
         y2: textY + textHeight / 2
       }), labelTick && /*#__PURE__*/_react["default"].createElement("text", {
         ref: function ref(text) {
-          return _this2.text = text;
+          return _this3.text = text;
         },
         className: classes.text,
         y: "14",

package/lib/number-line/graph/ticks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/number-line/graph/ticks.jsx"],"names":["style","text","userSelect","textAlign","fill","color","primary","line","stroke","TickValidator","PropTypes","shape","major","props","propName","minor","componentName","Error","isRequired","Tick","wasRendered","state","textBox","width","height","x","y","getBBox","setState","fraction","setAttribute","forceUpdate","type","classes","xScale","displayFraction","n","d","labelTick","textWidth","textHeight","textX","textY","xText","Number","toFixed","s","React","Component","object","number","bool","func","string","Ticks","domain","ticks","context","tickData","map","min","max"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { buildTickData } from './tick-utils';\nimport injectSheet from 'react-jss';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst style = {\n  text: {\n    userSelect: 'none',\n    textAlign: 'center',\n    fill: color.primary(),\n  },\n  line: {\n    stroke: color.primary(),\n  },\n};\n\nexport const TickValidator = PropTypes.shape({\n  /** the number of major ticks (including min + max)\n   * to display. cant be lower than 2.\n   */\n  major: (props, propName) => {},\n  /** the number of minor ticks to display between major ticks.\n   * Can't be less than zero.\n   */\n  minor: (props, propName, componentName) => {\n    let minor = props[propName];\n    if (minor <= 0) {\n      return new Error(`Invalid prop ${propName} must be > 0. ${componentName}`);\n    }\n  },\n}).isRequired;\n\nexport class Tick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    y: PropTypes.number.isRequired,\n    x: PropTypes.number.isRequired,\n    major: PropTypes.bool,\n    fraction: PropTypes.bool,\n    xScale: PropTypes.func,\n    type: PropTypes.string,\n  };\n\n  static defaultProps = {\n    major: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.wasRendered = false;\n    this.state = {\n      textBox: {\n        width: 0,\n        height: 0,\n        x: 0,\n        y: 0,\n      }\n    };\n  }\n  \n  updateTextBox() {\n    if (this.text) {\n      const { width, height, x, y } = this.text.getBBox();\n      this.setState({ textBox: { width, height, x, y } });\n    }\n  }\n\n  componentDidMount() {\n    //center align the tick text\n    if (this.text) {\n      const { fraction } = this.props;\n      let { width, height, x, y } = this.text.getBBox();\n      this.text.setAttribute('x', (width / 2) * -1);\n      this.setState({ textBox: { width, height, x, y } });\n\n      if (fraction && !this.wasRendered) {\n        // used for rendering the line fraction\n        this.wasRendered = true;\n        this.forceUpdate();\n      }\n    }\n  }\n\n  render() {\n    //the domain value\n    let { x, y, type, classes, xScale, fraction } = this.props;\n    const displayFraction = fraction && x.n !== x.d && x.n !== 0 && x.d !== 1;\n    const labelTick = type === 'major';\n    const height = labelTick ? 20 : 10;\n    const {\n      width: textWidth = 0,\n      height: textHeight = 0,\n      x: textX = 0,\n      y: textY = 0,\n    } = this.state.textBox;\n\n    const xText = !fraction ? (\n      Number(x.toFixed(3))\n    ) : !displayFraction ? (\n      x.n * x.s\n    ) : (\n      <React.Fragment>\n        <tspan x=\"0\" dy=\"0.71em\">\n          {x.n * x.s}\n        </tspan>\n        <tspan x=\"0\" dy=\"1.11em\">\n          {x.d}\n        </tspan>\n      </React.Fragment>\n    );\n\n    return (\n      <g opacity=\"1\" transform={`translate(${xScale(x)}, ${y})`}>\n        <line className={classes.line} y1={(height / 2) * -1} y2={height / 2} x1=\"0.5\" x2=\"0.5\" />\n\n        {displayFraction && (\n          <line\n            className={classes.line}\n            x1={textX}\n            x2={textX + textWidth}\n            y1={textY + textHeight / 2}\n            y2={textY + textHeight / 2}\n          />\n        )}\n\n        {labelTick && (\n          <text\n            ref={(text) => (this.text = text)}\n            className={classes.text}\n            y=\"14\"\n            width=\"10\"\n            dy=\"0.71em\"\n            textAnchor={displayFraction && 'middle'}\n          >\n            {xText}\n          </text>\n        )}\n      </g>\n    );\n  }\n}\n\nexport class Ticks extends React.Component {\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n  };\n\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    domain: PropTypes.shape({\n      min: PropTypes.number.isRequired,\n      max: PropTypes.number.isRequired,\n    }).isRequired,\n    fraction: PropTypes.bool,\n    width: PropTypes.number,\n    ticks: TickValidator,\n    y: PropTypes.number.isRequired,\n  };\n\n  render() {\n    let { domain, width, ticks, y, classes, fraction } = this.props;\n    let { xScale } = this.context;\n\n    const tickData = buildTickData(domain, width, ticks, { fraction });\n\n    return (\n      <g>\n        {tickData.map(({ x, type }) => {\n          return (\n            <Tick\n              classes={classes}\n              fraction={fraction}\n              x={x}\n              y={y}\n              type={type}\n              xScale={xScale}\n              key={`${x}-${type}-${fraction}`}\n            />\n          );\n        })}\n      </g>\n    );\n  }\n}\n\nexport default injectSheet(style)(Ticks);\n"],"file":"ticks.js"}
+{"version":3,"sources":["../../../src/number-line/graph/ticks.jsx"],"names":["style","text","userSelect","textAlign","fill","color","primary","line","stroke","TickValidator","PropTypes","shape","major","props","propName","minor","componentName","Error","isRequired","Tick","wasRendered","state","textBox","width","height","x","y","requestAnimationFrame","getBBox","setAttribute","setState","fraction","updateTextBox","forceUpdate","type","classes","xScale","displayFraction","n","d","labelTick","textWidth","textHeight","textX","textY","xText","Number","toFixed","s","React","Component","object","number","bool","func","string","Ticks","domain","ticks","context","tickData","map","min","max"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { buildTickData } from './tick-utils';\nimport injectSheet from 'react-jss';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst style = {\n  text: {\n    userSelect: 'none',\n    textAlign: 'center',\n    fill: color.primary(),\n  },\n  line: {\n    stroke: color.primary(),\n  },\n};\n\nexport const TickValidator = PropTypes.shape({\n  /** the number of major ticks (including min + max)\n   * to display. cant be lower than 2.\n   */\n  major: (props, propName) => {},\n  /** the number of minor ticks to display between major ticks.\n   * Can't be less than zero.\n   */\n  minor: (props, propName, componentName) => {\n    let minor = props[propName];\n    if (minor <= 0) {\n      return new Error(`Invalid prop ${propName} must be > 0. ${componentName}`);\n    }\n  },\n}).isRequired;\n\nexport class Tick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    y: PropTypes.number.isRequired,\n    x: PropTypes.number.isRequired,\n    major: PropTypes.bool,\n    fraction: PropTypes.bool,\n    xScale: PropTypes.func,\n    type: PropTypes.string,\n  };\n\n  static defaultProps = {\n    major: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.wasRendered = false;\n    this.state = {\n      textBox: {\n        width: 0,\n        height: 0,\n        x: 0,\n        y: 0,\n      }\n    };\n  }\n\n  updateTextBox() {\n    if (this.text) {\n      // ensure the DOM is \"ready\" → layout is done before getting text measurements\n      requestAnimationFrame(() => {\n        const { width, height, x, y } = this.text.getBBox();\n        this.text.setAttribute('x', (width / 2) * -1);\n        this.setState({ textBox: { width, height, x, y } });\n      });\n    }\n  }\n\n  componentDidMount() {\n    //center align the tick text\n    if (this.text) {\n      const { fraction } = this.props;\n      this.updateTextBox();\n      if (fraction && !this.wasRendered) {\n        // used for rendering the line fraction\n        this.wasRendered = true;\n        this.forceUpdate();\n      }\n    }\n  }\n\n  render() {\n    //the domain value\n    let { x, y, type, classes, xScale, fraction } = this.props;\n    const displayFraction = fraction && x.n !== x.d && x.n !== 0 && x.d !== 1;\n    const labelTick = type === 'major';\n    const height = labelTick ? 20 : 10;\n    const {\n      width: textWidth = 0,\n      height: textHeight = 0,\n      x: textX = 0,\n      y: textY = 0,\n    } = this.state.textBox;\n\n    const xText = !fraction ? (\n      Number(x.toFixed(3))\n    ) : !displayFraction ? (\n      x.n * x.s\n    ) : (\n      <React.Fragment>\n        <tspan x=\"0\" dy=\"0.71em\">\n          {x.n * x.s}\n        </tspan>\n        <tspan x=\"0\" dy=\"1.11em\">\n          {x.d}\n        </tspan>\n      </React.Fragment>\n    );\n\n    return (\n      <g opacity=\"1\" transform={`translate(${xScale(x)}, ${y})`}>\n        <line className={classes.line} y1={(height / 2) * -1} y2={height / 2} x1=\"0.5\" x2=\"0.5\" />\n\n        {displayFraction && (\n          <line\n            className={classes.line}\n            x1={textX}\n            x2={textX + textWidth}\n            y1={textY + textHeight / 2}\n            y2={textY + textHeight / 2}\n          />\n        )}\n\n        {labelTick && (\n          <text\n            ref={(text) => (this.text = text)}\n            className={classes.text}\n            y=\"14\"\n            width=\"10\"\n            dy=\"0.71em\"\n            textAnchor={displayFraction && 'middle'}\n          >\n            {xText}\n          </text>\n        )}\n      </g>\n    );\n  }\n}\n\nexport class Ticks extends React.Component {\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n  };\n\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    domain: PropTypes.shape({\n      min: PropTypes.number.isRequired,\n      max: PropTypes.number.isRequired,\n    }).isRequired,\n    fraction: PropTypes.bool,\n    width: PropTypes.number,\n    ticks: TickValidator,\n    y: PropTypes.number.isRequired,\n  };\n\n  render() {\n    let { domain, width, ticks, y, classes, fraction } = this.props;\n    let { xScale } = this.context;\n\n    const tickData = buildTickData(domain, width, ticks, { fraction });\n\n    return (\n      <g>\n        {tickData.map(({ x, type }) => {\n          return (\n            <Tick\n              classes={classes}\n              fraction={fraction}\n              x={x}\n              y={y}\n              type={type}\n              xScale={xScale}\n              key={`${x}-${type}-${fraction}`}\n            />\n          );\n        })}\n      </g>\n    );\n  }\n}\n\nexport default injectSheet(style)(Ticks);\n"],"file":"ticks.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/number-line",
-  "version": "9.6.8-next.3+11b54d1f9",
+  "version": "9.6.8-next.7+ea1831187",
   "repository": "pie-framework/pie-elements",
   "description": "",
   "publishConfig": {
@@ -23,7 +23,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "11b54d1f9605e763bdc809c494c50fcafc3db593",
+  "gitHead": "ea18311870fbffe39749d88765a5118d9ff00b21",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },