@pie-element/number-line 12.2.0-next.0 → 12.2.0-next.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.2.0-next.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/number-line@12.2.0-next.1...@pie-element/number-line@12.2.0-next.2) (2026-03-19)
+
+### Features
+
+- bump libs PD-5669, PD-5530, PD-5496,PD-5501, PD-5790, PD-5622, PD-5811, PD-5590, PD-5510 ([1c7cfc4](https://github.com/pie-framework/pie-elements/commit/1c7cfc4ea91dfd631b9e2ca23810b65a4a4585cf))
+
+# [12.2.0-next.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/number-line@12.2.0-next.0...@pie-element/number-line@12.2.0-next.1) (2026-03-18)
+
+### Bug Fixes
+
+- **number-line:** use observer to render math PD-5563 ([0b5833f](https://github.com/pie-framework/pie-elements/commit/0b5833fc929ce67a8e3811e161ddafccf046b1c2))
+
 # [12.2.0-next.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/number-line@12.1.1-next.5...@pie-element/number-line@12.2.0-next.0) (2026-03-18)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [10.2.0-next.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/number-line-configure@10.1.1-next.4...@pie-element/number-line-configure@10.2.0-next.0) (2026-03-19)
+
+### Features
+
+- bump libs PD-5669, PD-5530, PD-5496,PD-5501, PD-5790, PD-5622, PD-5811, PD-5590, PD-5510 ([1c7cfc4](https://github.com/pie-framework/pie-elements/commit/1c7cfc4ea91dfd631b9e2ca23810b65a4a4585cf))
+
 ## [10.1.1-next.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/number-line-configure@10.1.1-next.3...@pie-element/number-line-configure@10.1.1-next.4) (2026-03-12)
 
 ### Bug Fixes

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/number-line-configure",
   "private": true,
-  "version": "10.1.1-next.4",
+  "version": "10.2.0-next.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
@@ -10,9 +10,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.2.0-next.17",
-    "@pie-lib/editable-html-tip-tap": "1.2.0-next.16",
-    "@pie-lib/render-ui": "5.2.0-next.4",
+    "@pie-lib/config-ui": "12.2.0-next.20",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.19",
+    "@pie-lib/render-ui": "5.2.0-next.6",
     "lodash-es": "^4.17.23",
     "react": "18.3.1",
     "react-dom": "18.3.1"

package/lib/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "NumberLineComponent", {
   }
 });
 exports.tickUtils = exports.pointChooser = exports.default = exports.dataConverter = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _dataConverter = _interopRequireWildcard(require("./data-converter"));
 var dataConverter = _dataConverter;
 exports.dataConverter = _dataConverter;
@@ -36,7 +37,46 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 class NumberLine extends HTMLElement {
   constructor() {
     super();
+    (0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
+      if (this._mathRenderPending) return;
+      this._mathRenderPending = true;
+      requestAnimationFrame(() => {
+        if (this._mathObserver) {
+          this._mathObserver.disconnect();
+        }
+        (0, _mathRendering.renderMath)(this);
+        this._mathRenderPending = false;
+        setTimeout(() => {
+          if (this._mathObserver) {
+            this._mathObserver.observe(this, {
+              childList: true,
+              subtree: true,
+              characterData: false
+            });
+          }
+        }, 50);
+      });
+    });
     this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+  }
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(() => {
+      this._scheduleMathRender();
+    });
+    this._mathObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: false
+    });
+  }
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
   }
   set model(m) {
     this._model = m;
@@ -53,6 +93,7 @@ class NumberLine extends HTMLElement {
     return this._session;
   }
   connectedCallback() {
+    this._initMathObserver();
     this._render();
   }
   isComplete() {
@@ -139,12 +180,13 @@ class NumberLine extends HTMLElement {
         this._root = (0, _client.createRoot)(this);
       }
       this._root.render(el);
-      queueMicrotask(() => {
-        (0, _mathRendering.renderMath)(this);
-      });
+
+      // schedule math rendering via observer pipeline (for initial render as well)
+      this._scheduleMathRender();
     }
   }
   disconnectedCallback() {
+    this._disconnectMathObserver();
     if (this._root) {
       this._root.unmount();
     }

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_dataConverter","_interopRequireWildcard","require","dataConverter","exports","pointChooser","tickUtils","_graph","_interopRequireDefault","_numberLine","_react","_client","_lodashEs","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NumberLine","HTMLElement","constructor","_root","model","m","_model","_applyInitialElements","_render","dispatch","session","s","_session","connectedCallback","isComplete","answer","length","type","dispatchEvent","CustomEvent","bubbles","detail","complete","dispatchSessionChanged","addElement","data","push","toSessionFormat","moveElement","index","el","position","Error","left","right","update","lineIsSwitched","switchGraphLine","splice","deleteElements","indices","filter","v","some","d","undoElement","pop","clearElements","graph","initialElements","cloneDeep","map","toGraphFormat","correctResponse","props","onAddElement","bind","onMoveElement","onDeleteElements","onUndoElement","onClearElements","React","createElement","RootComponent","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount"],"sources":["../src/index.js"],"sourcesContent":["import * as dataConverter from './data-converter';\nimport * as pointChooser from './number-line/point-chooser';\nimport * as tickUtils from './number-line/graph/tick-utils';\n\nimport { lineIsSwitched, switchGraphLine, toGraphFormat, toSessionFormat } from './data-converter';\n\nimport Graph from './number-line/graph';\nimport NumberLineComponent from './number-line';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport RootComponent from './number-line';\nimport { cloneDeep } from 'lodash-es';\nimport { renderMath } from '@pie-lib/math-rendering';\n\n//Expose some additional modules for configuration\nexport { Graph, NumberLineComponent, tickUtils, dataConverter, pointChooser };\nexport default class NumberLine extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this._applyInitialElements();\n    this._render();\n    this.dispatch('model-set');\n  }\n\n  set session(s) {\n    this._session = s;\n    this._applyInitialElements();\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  isComplete() {\n    return this._session ? (this._session.answer || []).length > 0 : false;\n  }\n\n  dispatch(type) {\n    this.dispatchEvent(\n      new CustomEvent(type, {\n        bubbles: true,\n        detail: {\n          complete: this.isComplete(),\n        },\n      }),\n    );\n  }\n\n  dispatchSessionChanged() {\n    this.dispatch('session-changed');\n  }\n\n  addElement(data) {\n    if (!this._session) {\n      return;\n    }\n\n    this._session.answer = this._session.answer || [];\n    this._session.answer.push(toSessionFormat(data));\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  moveElement(index, el, position) {\n    let answer = this._session.answer[index];\n\n    if (!answer) {\n      throw new Error('cant find element at index: ', index);\n    }\n\n    if (el.type === 'line' && position.left === position.right) {\n      this._render();\n      return;\n    }\n\n    //set the new position\n    el.position = position;\n\n    let update = el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el;\n\n    this._session.answer.splice(index, 1, toSessionFormat(update));\n\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  deleteElements(indices) {\n    this._session.answer = this._session.answer.filter((v, index) => {\n      return !indices.some((d) => d === index);\n    });\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  undoElement() {\n    this._session.answer.pop();\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  clearElements() {\n    this._session.answer = [];\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  _applyInitialElements() {\n    if (\n      this._model &&\n      this._model.graph &&\n      this._model.graph.initialElements &&\n      this._session &&\n      (!this._session.answer || !this._session.answer.length)\n    ) {\n      this._session.answer = cloneDeep(this._model.graph.initialElements);\n    }\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      if (!this._session.answer) {\n        this._applyInitialElements();\n      }\n\n      let answer = (this._session.answer || []).map(toGraphFormat);\n      let model = cloneDeep(this._model);\n      model.correctResponse = model.correctResponse && model.correctResponse.map(toGraphFormat);\n\n      let props = {\n        model,\n        answer,\n        onAddElement: this.addElement.bind(this),\n        onMoveElement: this.moveElement.bind(this),\n        onDeleteElements: this.deleteElements.bind(this),\n        onUndoElement: this.undoElement.bind(this),\n        onClearElements: this.clearElements.bind(this),\n      };\n\n      let el = React.createElement(RootComponent, props);\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_dataConverter","_interopRequireWildcard","require","dataConverter","exports","pointChooser","tickUtils","_graph","_interopRequireDefault","_numberLine","_react","_client","_lodashEs","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NumberLine","HTMLElement","constructor","_defineProperty2","_mathRenderPending","requestAnimationFrame","_mathObserver","disconnect","renderMath","setTimeout","observe","childList","subtree","characterData","_root","_initMathObserver","MutationObserver","_scheduleMathRender","_disconnectMathObserver","model","m","_model","_applyInitialElements","_render","dispatch","session","s","_session","connectedCallback","isComplete","answer","length","type","dispatchEvent","CustomEvent","bubbles","detail","complete","dispatchSessionChanged","addElement","data","push","toSessionFormat","moveElement","index","el","position","Error","left","right","update","lineIsSwitched","switchGraphLine","splice","deleteElements","indices","filter","v","some","d","undoElement","pop","clearElements","graph","initialElements","cloneDeep","map","toGraphFormat","correctResponse","props","onAddElement","bind","onMoveElement","onDeleteElements","onUndoElement","onClearElements","React","createElement","RootComponent","createRoot","render","disconnectedCallback","unmount"],"sources":["../src/index.js"],"sourcesContent":["import * as dataConverter from './data-converter';\nimport * as pointChooser from './number-line/point-chooser';\nimport * as tickUtils from './number-line/graph/tick-utils';\n\nimport { lineIsSwitched, switchGraphLine, toGraphFormat, toSessionFormat } from './data-converter';\n\nimport Graph from './number-line/graph';\nimport NumberLineComponent from './number-line';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport RootComponent from './number-line';\nimport { cloneDeep } from 'lodash-es';\nimport { renderMath } from '@pie-lib/math-rendering';\n\n//Expose some additional modules for configuration\nexport { Graph, NumberLineComponent, tickUtils, dataConverter, pointChooser };\nexport default class NumberLine extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n    this._mathObserver = null;\n    this._mathRenderPending = false;\n  }\n\n  _scheduleMathRender = () => {\n    if (this._mathRenderPending) return;\n    this._mathRenderPending = true;\n\n    requestAnimationFrame(() => {\n      if (this._mathObserver) {\n        this._mathObserver.disconnect();\n      }\n\n      renderMath(this);\n      this._mathRenderPending = false;\n\n      setTimeout(() => {\n        if (this._mathObserver) {\n          this._mathObserver.observe(this, {\n            childList: true,\n            subtree: true,\n            characterData: false,\n          });\n        }\n      }, 50);\n    });\n  };\n\n  _initMathObserver() {\n    if (this._mathObserver) return;\n\n    this._mathObserver = new MutationObserver(() => {\n      this._scheduleMathRender();\n    });\n\n    this._mathObserver.observe(this, {\n      childList: true,\n      subtree: true,\n      characterData: false,\n    });\n  }\n\n  _disconnectMathObserver() {\n    if (this._mathObserver) {\n      this._mathObserver.disconnect();\n      this._mathObserver = null;\n    }\n  }\n\n  set model(m) {\n    this._model = m;\n    this._applyInitialElements();\n    this._render();\n    this.dispatch('model-set');\n  }\n\n  set session(s) {\n    this._session = s;\n    this._applyInitialElements();\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._initMathObserver();\n    this._render();\n  }\n\n  isComplete() {\n    return this._session ? (this._session.answer || []).length > 0 : false;\n  }\n\n  dispatch(type) {\n    this.dispatchEvent(\n      new CustomEvent(type, {\n        bubbles: true,\n        detail: {\n          complete: this.isComplete(),\n        },\n      }),\n    );\n  }\n\n  dispatchSessionChanged() {\n    this.dispatch('session-changed');\n  }\n\n  addElement(data) {\n    if (!this._session) {\n      return;\n    }\n\n    this._session.answer = this._session.answer || [];\n    this._session.answer.push(toSessionFormat(data));\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  moveElement(index, el, position) {\n    let answer = this._session.answer[index];\n\n    if (!answer) {\n      throw new Error('cant find element at index: ', index);\n    }\n\n    if (el.type === 'line' && position.left === position.right) {\n      this._render();\n      return;\n    }\n\n    //set the new position\n    el.position = position;\n\n    let update = el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el;\n\n    this._session.answer.splice(index, 1, toSessionFormat(update));\n\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  deleteElements(indices) {\n    this._session.answer = this._session.answer.filter((v, index) => {\n      return !indices.some((d) => d === index);\n    });\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  undoElement() {\n    this._session.answer.pop();\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  clearElements() {\n    this._session.answer = [];\n    this.dispatchSessionChanged();\n    this._render();\n  }\n\n  _applyInitialElements() {\n    if (\n      this._model &&\n      this._model.graph &&\n      this._model.graph.initialElements &&\n      this._session &&\n      (!this._session.answer || !this._session.answer.length)\n    ) {\n      this._session.answer = cloneDeep(this._model.graph.initialElements);\n    }\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      if (!this._session.answer) {\n        this._applyInitialElements();\n      }\n\n      let answer = (this._session.answer || []).map(toGraphFormat);\n      let model = cloneDeep(this._model);\n      model.correctResponse = model.correctResponse && model.correctResponse.map(toGraphFormat);\n\n      let props = {\n        model,\n        answer,\n        onAddElement: this.addElement.bind(this),\n        onMoveElement: this.moveElement.bind(this),\n        onDeleteElements: this.deleteElements.bind(this),\n        onUndoElement: this.undoElement.bind(this),\n        onClearElements: this.clearElements.bind(this),\n      };\n\n      let el = React.createElement(RootComponent, props);\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n\n      // schedule math rendering via observer pipeline (for initial render as well)\n      this._scheduleMathRender();\n    }\n  }\n\n  disconnectedCallback() {\n    this._disconnectMathObserver();\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/number-line",
   "repository": "pie-framework/pie-elements",
-  "version": "12.2.0-next.0",
+  "version": "12.2.0-next.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,10 +12,10 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/correct-answer-toggle": "3.2.0-next.4",
+    "@pie-lib/correct-answer-toggle": "3.2.0-next.6",
     "@pie-lib/icons": "3.2.0-next.4",
     "@pie-lib/math-rendering": "4.2.0-next.3",
-    "@pie-lib/render-ui": "5.2.0-next.4",
+    "@pie-lib/render-ui": "5.2.0-next.6",
     "@pie-lib/translator": "3.2.0-next.3",
     "classnames": "^2.2.5",
     "d3-scale": "^4.0.2",
@@ -29,7 +29,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "11169f258ac462817f622c5272b360009b6675ab",
+  "gitHead": "d1fbd8c1e27606d50d58f5e0f6f43f0b67a21b18",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },