@pie-element/rubric 8.1.1-next.39 → 8.1.1-next.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +44 -3
- package/lib/index.js.map +1 -1
- package/module/element.js +1 -1
- package/package.json +2 -2
- package/src/index.js +42 -3
package/lib/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
8
9
|
var _main = _interopRequireDefault(require("./main"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _client = require("react-dom/client");
|
|
@@ -13,9 +14,49 @@ var _mathRendering = require("@pie-lib/math-rendering");
|
|
|
13
14
|
class RubricRender extends HTMLElement {
|
|
14
15
|
constructor() {
|
|
15
16
|
super();
|
|
17
|
+
// React commits asynchronously, so a queueMicrotask(renderMath) can run before
|
|
18
|
+
// the LaTeX spans are in the DOM and leave raw LaTeX on first render — this is
|
|
19
|
+
// especially visible when rubric is mounted inside complex-rubric, which swaps
|
|
20
|
+
// its innerHTML and re-defines the inner element. Observing the DOM and
|
|
21
|
+
// typesetting after each commit keeps math in sync regardless of timing.
|
|
22
|
+
(0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
|
|
23
|
+
if (this._mathRenderPending) return;
|
|
24
|
+
this._mathRenderPending = true;
|
|
25
|
+
requestAnimationFrame(() => {
|
|
26
|
+
if (this._mathObserver) {
|
|
27
|
+
this._mathObserver.disconnect();
|
|
28
|
+
}
|
|
29
|
+
(0, _mathRendering.renderMath)(this);
|
|
30
|
+
this._mathRenderPending = false;
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
if (this._mathObserver) {
|
|
33
|
+
this._mathObserver.observe(this, {
|
|
34
|
+
childList: true,
|
|
35
|
+
subtree: true
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
}, 50);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
16
41
|
_debug.default.log('constructor called');
|
|
17
42
|
this.onModelChanged = this.onModelChanged.bind(this);
|
|
18
43
|
this._root = null;
|
|
44
|
+
this._mathObserver = null;
|
|
45
|
+
this._mathRenderPending = false;
|
|
46
|
+
}
|
|
47
|
+
_initMathObserver() {
|
|
48
|
+
if (this._mathObserver) return;
|
|
49
|
+
this._mathObserver = new MutationObserver(this._scheduleMathRender);
|
|
50
|
+
this._mathObserver.observe(this, {
|
|
51
|
+
childList: true,
|
|
52
|
+
subtree: true
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
_disconnectMathObserver() {
|
|
56
|
+
if (this._mathObserver) {
|
|
57
|
+
this._mathObserver.disconnect();
|
|
58
|
+
this._mathObserver = null;
|
|
59
|
+
}
|
|
19
60
|
}
|
|
20
61
|
set model(s) {
|
|
21
62
|
this._model = s;
|
|
@@ -26,10 +67,12 @@ class RubricRender extends HTMLElement {
|
|
|
26
67
|
this._render();
|
|
27
68
|
}
|
|
28
69
|
connectedCallback() {
|
|
70
|
+
this._initMathObserver();
|
|
29
71
|
this._render();
|
|
30
72
|
}
|
|
31
73
|
_render() {
|
|
32
74
|
if (this._model) {
|
|
75
|
+
this._initMathObserver();
|
|
33
76
|
const el = /*#__PURE__*/_react.default.createElement(_main.default, {
|
|
34
77
|
value: this._model
|
|
35
78
|
});
|
|
@@ -37,12 +80,10 @@ class RubricRender extends HTMLElement {
|
|
|
37
80
|
this._root = (0, _client.createRoot)(this);
|
|
38
81
|
}
|
|
39
82
|
this._root.render(el);
|
|
40
|
-
queueMicrotask(() => {
|
|
41
|
-
(0, _mathRendering.renderMath)(this);
|
|
42
|
-
});
|
|
43
83
|
}
|
|
44
84
|
}
|
|
45
85
|
disconnectedCallback() {
|
|
86
|
+
this._disconnectMathObserver();
|
|
46
87
|
if (this._root) {
|
|
47
88
|
this._root.unmount();
|
|
48
89
|
}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_main","_interopRequireDefault","require","_react","_client","_debug","_mathRendering","RubricRender","HTMLElement","constructor","debug","log","onModelChanged","bind","_root","model","s","_model","_render","m","connectedCallback","el","React","createElement","Rubric","value","createRoot","render","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_main","_interopRequireDefault","require","_react","_client","_debug","_mathRendering","RubricRender","HTMLElement","constructor","_defineProperty2","default","_mathRenderPending","requestAnimationFrame","_mathObserver","disconnect","renderMath","setTimeout","observe","childList","subtree","debug","log","onModelChanged","bind","_root","_initMathObserver","MutationObserver","_scheduleMathRender","_disconnectMathObserver","model","s","_model","_render","m","connectedCallback","el","React","createElement","Rubric","value","createRoot","render","disconnectedCallback","unmount","exports"],"sources":["../src/index.js"],"sourcesContent":["import Rubric from './main';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport default class RubricRender extends HTMLElement {\n constructor() {\n super();\n debug.log('constructor called');\n this.onModelChanged = this.onModelChanged.bind(this);\n this._root = null;\n this._mathObserver = null;\n this._mathRenderPending = false;\n }\n\n // React commits asynchronously, so a queueMicrotask(renderMath) can run before\n // the LaTeX spans are in the DOM and leave raw LaTeX on first render — this is\n // especially visible when rubric is mounted inside complex-rubric, which swaps\n // its innerHTML and re-defines the inner element. Observing the DOM and\n // typesetting after each commit keeps math in sync regardless of timing.\n _scheduleMathRender = () => {\n if (this._mathRenderPending) return;\n this._mathRenderPending = true;\n\n requestAnimationFrame(() => {\n if (this._mathObserver) {\n this._mathObserver.disconnect();\n }\n renderMath(this);\n this._mathRenderPending = false;\n setTimeout(() => {\n if (this._mathObserver) {\n this._mathObserver.observe(this, { childList: true, subtree: true });\n }\n }, 50);\n });\n };\n\n _initMathObserver() {\n if (this._mathObserver) return;\n this._mathObserver = new MutationObserver(this._scheduleMathRender);\n this._mathObserver.observe(this, { childList: true, subtree: true });\n }\n\n _disconnectMathObserver() {\n if (this._mathObserver) {\n this._mathObserver.disconnect();\n this._mathObserver = null;\n }\n }\n\n set model(s) {\n this._model = s;\n this._render();\n }\n\n onModelChanged(m) {\n this._model = m;\n this._render();\n }\n\n connectedCallback() {\n this._initMathObserver();\n this._render();\n }\n\n _render() {\n if (this._model) {\n this._initMathObserver();\n\n const el = React.createElement(Rubric, { value: this._model });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(el);\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/module/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_dll_react as e,_dll_mui__material_styles as t,_dll_mui__material as
|
|
1
|
+
import{_dll_react as e,_dll_mui__material_styles as t,_dll_mui__material as i,_dll_mui__material_collapse as r,_dll_pie_lib__render_ui as n,_dll_prop_types as s,_dll_react_dom_client as o,_dll_debug as l}from"../../../@pie-lib/shared-module@^5.2.6/module/index.js";import{_dll_pie_lib__math_rendering as a}from"../../../@pie-lib/math-rendering-module@^5.0.11/module/index.js";const h=e,{styled:d}=t,{ListItem:c}=i,{List:m}=i,p=r,{color:u}=n,{UiLayout:b}=n,g=s,_=d(b)({color:u.text(),backgroundColor:u.background(),"&:not(.MathJax) table":{borderCollapse:"collapse"},"&:not(.MathJax) table td, &:not(.MathJax) table th":{padding:"8px 12px",textAlign:"left"},"& ul p, & ol p":{marginBottom:0,marginTop:0,lineHeight:"normal"}}),x=d(c)({display:"flex",flexDirection:"column",alignItems:"flex-start",padding:"12px 0px"}),v=d("div")({color:u.text()}),f=d("h3")({color:u.text(),fontSize:"16px",fontWeight:"700",margin:0,paddingBottom:"6px"}),O=d("h4")({color:u.text(),fontSize:"16px",fontWeight:"normal",margin:0,paddingBottom:"6px"}),y=d("h2")(({theme:e})=>({display:"flex",alignItems:"center",cursor:"pointer",userSelect:"none",fontSize:e.typography.fontSize,fontWeight:"500",color:u.tertiary(),margin:0})),S=d("span")({display:"inline-flex",transition:"transform 0.2s",marginLeft:2,alignSelf:"center"}),k=d("h2")({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",border:0,whiteSpace:"nowrap"}),E=g.shape({excludeZero:g.bool,points:g.arrayOf(g.string),sampleAnswers:g.arrayOf(g.string),animationsDisabled:g.bool});class M extends h.Component{__init(){this.dudUrl="javascript:;"}constructor(e){super(e),M.prototype.__init.call(this),M.prototype.__init2.call(this),this.state={rubricOpen:!1,linkPrefix:"Show"},this.toggleRubric=this.toggleRubric.bind(this)}static __initStatic(){this.propTypes={model:g.object.isRequired,animationsDisabled:g.bool,value:E}}toggleRubric(){this.setState({rubricOpen:!this.state.rubricOpen}),this.setState({linkPrefix:this.state.rubricOpen?"Show":"Hide"})}__init2(){this.shouldRenderPoint=(e,t)=>!t.excludeZero||0!==e}render(){const{model:e,value:t}=this.props;let{animationsDisabled:i}=this.props;if(i=i||t.animationsDisabled,t&&t.points){const{extraCSSRules:r}=e||{},{points:n,sampleAnswers:s}=t,o=h.createElement(m,{component:"nav"},n.slice(0).reverse().map((e,i)=>{i=n.length-i-1;const r=t.excludeZero?i+1:i;return h.createElement(h.Fragment,{key:i},h.createElement(x,{key:`P${i}`},h.createElement(f,null,1===r?`${r} PT`:`${r} PTS`),h.createElement(v,{dangerouslySetInnerHTML:{__html:e}})),s&&s[i]&&h.createElement(x,{key:`S${i}`},h.createElement(O,null,"Sample Answer"),h.createElement(v,{dangerouslySetInnerHTML:{__html:s[i]}})))}));return h.createElement(_,{extraCSSRules:r},h.createElement(k,null,"Rubric"),i?o:h.createElement(h.Fragment,null,h.createElement(y,{id:"rubric-toggle",tabIndex:0,role:"button","aria-expanded":this.state.rubricOpen,onClick:this.toggleRubric,onKeyPress:e=>{"Enter"!==e.key&&" "!==e.key||this.toggleRubric()}},this.state.linkPrefix," Rubric",h.createElement(S,{"aria-hidden":"true"},this.state.rubricOpen?h.createElement("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},h.createElement("polyline",{points:"18 15 12 9 6 15"})):h.createElement("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},h.createElement("polyline",{points:"6 9 12 15 18 9"})))),h.createElement(p,{in:this.state.rubricOpen,timeout:{enter:225,exit:195}},o)))}return null}}M.__initStatic();const R=e,{createRoot:w}=o,C=l,{renderMath:L}=a;class P extends HTMLElement{constructor(){super(),P.prototype.__init.call(this),C.log("constructor called"),this.onModelChanged=this.onModelChanged.bind(this),this._root=null,this._mathObserver=null,this._mathRenderPending=!1}__init(){this._scheduleMathRender=()=>{this._mathRenderPending||(this._mathRenderPending=!0,requestAnimationFrame(()=>{this._mathObserver&&this._mathObserver.disconnect(),L(this),this._mathRenderPending=!1,setTimeout(()=>{this._mathObserver&&this._mathObserver.observe(this,{childList:!0,subtree:!0})},50)}))}}_initMathObserver(){this._mathObserver||(this._mathObserver=new MutationObserver(this._scheduleMathRender),this._mathObserver.observe(this,{childList:!0,subtree:!0}))}_disconnectMathObserver(){this._mathObserver&&(this._mathObserver.disconnect(),this._mathObserver=null)}set model(e){this._model=e,this._render()}onModelChanged(e){this._model=e,this._render()}connectedCallback(){this._initMathObserver(),this._render()}_render(){if(this._model){this._initMathObserver();const e=R.createElement(M,{value:this._model});this._root||(this._root=w(this)),this._root.render(e)}}disconnectedCallback(){this._disconnectMathObserver(),this._root&&this._root.unmount()}}export{P as default};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/rubric",
|
|
3
3
|
"repository": "pie-framework/pie-elements",
|
|
4
|
-
"version": "8.1.1-next.
|
|
4
|
+
"version": "8.1.1-next.44+7ba1005b3",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"author": "pie framework developers",
|
|
32
32
|
"license": "ISC",
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "7ba1005b3c46a4bed78d1512999d3a3981cb5448",
|
|
34
34
|
"scripts": {
|
|
35
35
|
"postpublish": "../../scripts/postpublish"
|
|
36
36
|
}
|
package/src/index.js
CHANGED
|
@@ -10,6 +10,44 @@ export default class RubricRender extends HTMLElement {
|
|
|
10
10
|
debug.log('constructor called');
|
|
11
11
|
this.onModelChanged = this.onModelChanged.bind(this);
|
|
12
12
|
this._root = null;
|
|
13
|
+
this._mathObserver = null;
|
|
14
|
+
this._mathRenderPending = false;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// React commits asynchronously, so a queueMicrotask(renderMath) can run before
|
|
18
|
+
// the LaTeX spans are in the DOM and leave raw LaTeX on first render — this is
|
|
19
|
+
// especially visible when rubric is mounted inside complex-rubric, which swaps
|
|
20
|
+
// its innerHTML and re-defines the inner element. Observing the DOM and
|
|
21
|
+
// typesetting after each commit keeps math in sync regardless of timing.
|
|
22
|
+
_scheduleMathRender = () => {
|
|
23
|
+
if (this._mathRenderPending) return;
|
|
24
|
+
this._mathRenderPending = true;
|
|
25
|
+
|
|
26
|
+
requestAnimationFrame(() => {
|
|
27
|
+
if (this._mathObserver) {
|
|
28
|
+
this._mathObserver.disconnect();
|
|
29
|
+
}
|
|
30
|
+
renderMath(this);
|
|
31
|
+
this._mathRenderPending = false;
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
if (this._mathObserver) {
|
|
34
|
+
this._mathObserver.observe(this, { childList: true, subtree: true });
|
|
35
|
+
}
|
|
36
|
+
}, 50);
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
_initMathObserver() {
|
|
41
|
+
if (this._mathObserver) return;
|
|
42
|
+
this._mathObserver = new MutationObserver(this._scheduleMathRender);
|
|
43
|
+
this._mathObserver.observe(this, { childList: true, subtree: true });
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
_disconnectMathObserver() {
|
|
47
|
+
if (this._mathObserver) {
|
|
48
|
+
this._mathObserver.disconnect();
|
|
49
|
+
this._mathObserver = null;
|
|
50
|
+
}
|
|
13
51
|
}
|
|
14
52
|
|
|
15
53
|
set model(s) {
|
|
@@ -23,24 +61,25 @@ export default class RubricRender extends HTMLElement {
|
|
|
23
61
|
}
|
|
24
62
|
|
|
25
63
|
connectedCallback() {
|
|
64
|
+
this._initMathObserver();
|
|
26
65
|
this._render();
|
|
27
66
|
}
|
|
28
67
|
|
|
29
68
|
_render() {
|
|
30
69
|
if (this._model) {
|
|
70
|
+
this._initMathObserver();
|
|
71
|
+
|
|
31
72
|
const el = React.createElement(Rubric, { value: this._model });
|
|
32
73
|
|
|
33
74
|
if (!this._root) {
|
|
34
75
|
this._root = createRoot(this);
|
|
35
76
|
}
|
|
36
77
|
this._root.render(el);
|
|
37
|
-
queueMicrotask(() => {
|
|
38
|
-
renderMath(this);
|
|
39
|
-
});
|
|
40
78
|
}
|
|
41
79
|
}
|
|
42
80
|
|
|
43
81
|
disconnectedCallback() {
|
|
82
|
+
this._disconnectMathObserver();
|
|
44
83
|
if (this._root) {
|
|
45
84
|
this._root.unmount();
|
|
46
85
|
}
|