@pie-element/extended-text-entry 15.2.0 → 15.2.2-beta.2
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/CHANGELOG.md +28 -44
- package/configure/CHANGELOG.md +28 -37
- package/configure/lib/__tests__/main.test.js +123 -0
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +39 -3
- package/controller/lib/__tests__/index.test.js +350 -0
- package/controller/package.json +1 -1
- package/docs/demo/pie.manifest.json +11 -0
- package/lib/__tests__/index.test.js +37 -0
- package/lib/annotation/__tests__/annotation-editor.test.js +326 -0
- package/lib/annotation/__tests__/freeform-editor.test.js +136 -0
- package/lib/annotation/annotation-menu.js +14 -17
- package/lib/annotation/annotation-menu.js.map +1 -1
- package/lib/annotation/freeform-editor.js +12 -11
- package/lib/annotation/freeform-editor.js.map +1 -1
- package/package.json +5 -5
- package/docs/demo/PIE-927-math-repro.md +0 -170
- package/module/configure.js +0 -1
- package/module/controller.js +0 -139
- package/module/demo.js +0 -38
- package/module/element.js +0 -1
- package/module/index.html +0 -21
- package/module/manifest.json +0 -22
- package/module/print-demo.js +0 -76
- package/module/print.html +0 -18
- package/module/print.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","
|
|
1
|
+
{"version":3,"file":"annotation-menu.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_material","StyledPopover","styled","Popover","overflowX","overflowY","marginTop","position","left","border","content","height","width","pointerEvents","borderWidth","borderTopColor","MainWrapper","theme","overflow","borderRadius","backgroundColor","palette","common","white","grey","AnnotationsWrapper","display","flexWrap","ControlsWrapper","borderTop","Button","variant","textAlign","padding","cursor","borderBottom","borderRight","flexGrow","filter","AnnotationMenu","React","Component","render","anchorEl","annotations","isNewAnnotation","onAnnotate","onClose","onEdit","onDelete","onWrite","open","props","default","createElement","elevation","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","map","annotation","index","key","type","onClick","label","style","Fragment","_defineProperty2","PropTypes","object","bool","array","func","_default","exports"],"sources":["../../src/annotation/annotation-menu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { Popover } from '@mui/material';\n\nconst StyledPopover = styled(Popover)({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginTop: '-16px',\n '&::after': {\n position: 'absolute',\n left: 'calc(50% - 7px)',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderTopColor: 'black',\n },\n },\n});\n\nconst MainWrapper = styled('div')(({ theme }) => ({\n width: '300px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: theme.palette.common.white,\n border: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst AnnotationsWrapper = styled('div')({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\nconst ControlsWrapper = styled('div')(({ theme }) => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst Button = styled('div')(({ theme, variant }) => ({\n width: '22%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n borderBottom: `1px solid ${theme.palette.grey[100]}`,\n '&:not(:nth-child(4n))': {\n borderRight: `1px solid ${theme.palette.grey[100]}`,\n },\n '&:nth-child(4n)': {\n flexGrow: 1,\n },\n '&:hover': {\n backgroundColor: theme.palette.grey[100],\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n}));\n\nclass AnnotationMenu extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n annotations: PropTypes.array,\n isNewAnnotation: PropTypes.bool,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onEdit: PropTypes.func,\n onWrite: PropTypes.func,\n onAnnotate: PropTypes.func,\n };\n\n render() {\n const { anchorEl, annotations, isNewAnnotation, onAnnotate, onClose, onEdit, onDelete, onWrite, open } =\n this.props;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n open={open}\n onClose={onClose}\n elevation={5}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n >\n <MainWrapper>\n <AnnotationsWrapper>\n {annotations.map((annotation, index) => (\n <Button\n key={`annotation-${index}`}\n variant={annotation.type}\n onClick={() => onAnnotate(annotation)}\n >\n {annotation.label}\n </Button>\n ))}\n </AnnotationsWrapper>\n <ControlsWrapper>\n <Button onClick={onClose}>\n Cancel\n </Button>\n <Button style={{ pointerEvents: 'none' }} />\n {isNewAnnotation ? (\n <React.Fragment>\n <Button variant=\"positive\" onClick={() => onWrite('positive')}>\n Write\n </Button>\n <Button variant=\"negative\" onClick={() => onWrite('negative')}>\n Write\n </Button>\n </React.Fragment>\n ) : (\n <React.Fragment>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button onClick={onEdit}>\n Edit\n </Button>\n </React.Fragment>\n )}\n </ControlsWrapper>\n </MainWrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default AnnotationMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,8 +10,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _material = require("@mui/material");
|
|
12
12
|
var _styles = require("@mui/material/styles");
|
|
13
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
14
13
|
const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
14
|
+
theme,
|
|
15
15
|
annotationType
|
|
16
16
|
}) => ({
|
|
17
17
|
'& .MuiPaper-root': {
|
|
@@ -28,7 +28,7 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
28
28
|
width: 0,
|
|
29
29
|
pointerEvents: 'none',
|
|
30
30
|
borderWidth: '7px',
|
|
31
|
-
borderRightColor:
|
|
31
|
+
borderRightColor: theme.palette.grey[100]
|
|
32
32
|
},
|
|
33
33
|
...(annotationType === 'negative' && {
|
|
34
34
|
'&::before': {
|
|
@@ -42,17 +42,15 @@ const StyledPopover = (0, _styles.styled)(_material.Popover)(({
|
|
|
42
42
|
})
|
|
43
43
|
}
|
|
44
44
|
}));
|
|
45
|
-
|
|
46
|
-
// See annotation-menu: the popover surface has to follow the scheme alongside its
|
|
47
|
-
// stroke, or a scheme's border colour lands on a permanently white card.
|
|
48
45
|
const Wrapper = (0, _styles.styled)('div')(({
|
|
46
|
+
theme,
|
|
49
47
|
annotationType
|
|
50
48
|
}) => ({
|
|
51
49
|
width: '200px',
|
|
52
50
|
overflow: 'hidden',
|
|
53
51
|
borderRadius: '4px',
|
|
54
|
-
backgroundColor:
|
|
55
|
-
border: `4px solid ${
|
|
52
|
+
backgroundColor: '#ffffff',
|
|
53
|
+
border: `4px solid ${theme.palette.grey[100]}`,
|
|
56
54
|
...(annotationType === 'negative' && {
|
|
57
55
|
borderColor: 'rgb(255, 204, 238) !important'
|
|
58
56
|
}),
|
|
@@ -60,12 +58,15 @@ const Wrapper = (0, _styles.styled)('div')(({
|
|
|
60
58
|
borderColor: 'rgb(153, 255, 153) !important'
|
|
61
59
|
})
|
|
62
60
|
}));
|
|
63
|
-
const Holder = (0, _styles.styled)('div')((
|
|
61
|
+
const Holder = (0, _styles.styled)('div')(({
|
|
62
|
+
theme
|
|
63
|
+
}) => ({
|
|
64
64
|
display: 'flex',
|
|
65
65
|
flexWrap: 'wrap',
|
|
66
|
-
borderTop: `2px solid ${
|
|
66
|
+
borderTop: `2px solid ${theme.palette.grey[100]}`
|
|
67
67
|
}));
|
|
68
68
|
const Button = (0, _styles.styled)('div')(({
|
|
69
|
+
theme,
|
|
69
70
|
variant,
|
|
70
71
|
annotationType
|
|
71
72
|
}) => ({
|
|
@@ -75,10 +76,10 @@ const Button = (0, _styles.styled)('div')(({
|
|
|
75
76
|
padding: '4px',
|
|
76
77
|
cursor: 'pointer',
|
|
77
78
|
'&:not(:nth-child(3n))': {
|
|
78
|
-
borderRight: `1px solid ${
|
|
79
|
+
borderRight: `1px solid ${theme.palette.grey[100]}`
|
|
79
80
|
},
|
|
80
81
|
'&:hover': {
|
|
81
|
-
backgroundColor:
|
|
82
|
+
backgroundColor: theme.palette.grey[100]
|
|
82
83
|
},
|
|
83
84
|
...(variant === 'positive' && {
|
|
84
85
|
backgroundColor: 'rgb(153, 255, 153) !important',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","_renderUi","StyledPopover","styled","Popover","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","color","Wrapper","overflow","borderRadius","backgroundColor","white","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","backgroundDark","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledPopover = styled(Popover)(({ annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: color.border(),\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\n// See annotation-menu: the popover surface has to follow the scheme alongside its\n// stroke, or a scheme's border colour lands on a permanently white card.\nconst Wrapper = styled('div')(({ annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: color.white(),\n border: `4px solid ${color.border()}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${color.border()}`,\n}));\n\nconst Button = styled('div')(({ variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${color.border()}`,\n },\n '&:hover': {\n backgroundColor: color.backgroundDark(),\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","StyledPopover","styled","Popover","theme","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","palette","grey","Wrapper","overflow","borderRadius","backgroundColor","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\nconst StyledPopover = styled(Popover)(({ theme, annotationType }) => ({\n '& .MuiPaper-root': {\n overflowX: 'unset',\n overflowY: 'unset',\n marginLeft: '16px',\n '&::before': {\n position: 'absolute',\n right: '100%',\n top: '13px',\n border: 'solid transparent',\n content: '\"\"',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n borderWidth: '7px',\n borderRightColor: theme.palette.grey[100],\n },\n ...(annotationType === 'negative' && {\n '&::before': {\n borderRightColor: 'rgb(255, 204, 238) !important',\n },\n }),\n ...(annotationType === 'positive' && {\n '&::before': {\n borderRightColor: 'rgb(153, 255, 153) !important',\n },\n }),\n },\n}));\n\nconst Wrapper = styled('div')(({ theme, annotationType }) => ({\n width: '200px',\n overflow: 'hidden',\n borderRadius: '4px',\n backgroundColor: '#ffffff',\n border: `4px solid ${theme.palette.grey[100]}`,\n ...(annotationType === 'negative' && {\n borderColor: 'rgb(255, 204, 238) !important',\n }),\n ...(annotationType === 'positive' && {\n borderColor: 'rgb(153, 255, 153) !important',\n }),\n}));\n\nconst Holder = styled('div')(({ theme }) => ({\n display: 'flex',\n flexWrap: 'wrap',\n borderTop: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst Button = styled('div')(({ theme, variant, annotationType }) => ({\n flexGrow: 1,\n width: '28%',\n textAlign: 'center',\n padding: '4px',\n cursor: 'pointer',\n '&:not(:nth-child(3n))': {\n borderRight: `1px solid ${theme.palette.grey[100]}`,\n },\n '&:hover': {\n backgroundColor: theme.palette.grey[100],\n },\n ...(variant === 'positive' && {\n backgroundColor: 'rgb(153, 255, 153) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'negative' && {\n backgroundColor: 'rgb(255, 204, 238) !important',\n '&:hover': {\n filter: 'brightness(85%)',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'negative' && {\n '&:hover': {\n backgroundColor: 'rgb(153, 255, 153) !important',\n },\n }),\n ...(variant === 'typeChange' && annotationType === 'positive' && {\n '&:hover': {\n backgroundColor: 'rgb(255, 204, 238) !important',\n },\n }),\n}));\n\nclass FreeformEditor extends React.Component {\n static propTypes = {\n anchorEl: PropTypes.object,\n open: PropTypes.bool,\n offset: PropTypes.number,\n value: PropTypes.string,\n type: PropTypes.string,\n onClose: PropTypes.func,\n onDelete: PropTypes.func,\n onSave: PropTypes.func,\n onTypeChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.state = { value: props.value };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { value } = nextProps;\n const { value: propsValue } = this.props;\n\n if (value !== propsValue) {\n this.setState({ value });\n }\n }\n\n onValueChange = (event) => this.setState({ value: event.target.value });\n\n handleSave = () => {\n const { value: oldValue, onSave, onClose, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n }\n\n if (oldValue !== value) {\n onSave(oldValue, value);\n }\n\n this.setState({ value: '' });\n onClose();\n };\n\n handleTypeChange = () => {\n const { onTypeChange, onDelete } = this.props;\n const { value } = this.state;\n\n if (value === '') {\n onDelete();\n } else {\n onTypeChange(value);\n }\n\n this.setState({ value: '' });\n };\n\n render() {\n const { anchorEl, offset, onDelete, open, type } = this.props;\n const { value } = this.state;\n\n return (\n <StyledPopover\n anchorEl={anchorEl}\n elevation={2}\n open={open}\n onClose={this.handleSave}\n annotationType={type}\n style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n transitionDuration={{ enter: 225, exit: 195 }}\n anchorOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left',\n }}\n >\n <Wrapper annotationType={type}>\n <TextField\n id=\"annotation-editor\"\n style={{\n padding: '2px 5px',\n width: '95%',\n }}\n autoFocus\n multiline\n rows={1}\n maxRows={4}\n value={value}\n onChange={this.onValueChange}\n InputProps={{ disableUnderline: true }}\n />\n <Holder>\n <Button onClick={onDelete}>\n Delete\n </Button>\n <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n {type === 'negative' ? 'Green' : 'Pink'}\n </Button>\n <Button onClick={this.handleSave}>\n Save\n </Button>\n </Holder>\n </Wrapper>\n </StyledPopover>\n );\n }\n}\n\nexport default FreeformEditor;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/extended-text-entry",
|
|
3
3
|
"repository": "pie-framework/pie-elements",
|
|
4
|
-
"version": "15.2.
|
|
4
|
+
"version": "15.2.2-beta.2",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"@mui/icons-material": "^7.3.4",
|
|
15
15
|
"@mui/material": "^7.3.4",
|
|
16
16
|
"@pie-framework/pie-player-events": "^0.1.0",
|
|
17
|
-
"@pie-lib/config-ui": "13.0.
|
|
18
|
-
"@pie-lib/editable-html-tip-tap": "2.
|
|
17
|
+
"@pie-lib/config-ui": "13.1.0-beta.6",
|
|
18
|
+
"@pie-lib/editable-html-tip-tap": "2.2.0-beta.6",
|
|
19
19
|
"@pie-lib/math-rendering": "5.1.0",
|
|
20
|
-
"@pie-lib/render-ui": "
|
|
20
|
+
"@pie-lib/render-ui": "6.1.3",
|
|
21
21
|
"classnames": "^2.2.6",
|
|
22
22
|
"debug": "^4.1.1",
|
|
23
23
|
"lodash.throttle": "^4.1.1",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"react": "18.3.1",
|
|
26
26
|
"react-dom": "18.3.1"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "fcf6139719821e97ab40cb60e9a953fe427d86a4",
|
|
29
29
|
"scripts": {
|
|
30
30
|
"postpublish": "../../scripts/postpublish"
|
|
31
31
|
},
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
# PIE-927 — math prompt repro harness (archived)
|
|
2
|
-
|
|
3
|
-
Reported as **DNAFORM-2099**: `extended-text-entry` prompts showed their raw latex source
|
|
4
|
-
(`P\left(x\right)=-2x^{3}...`) instead of typeset math.
|
|
5
|
-
|
|
6
|
-
This file archives the throwaway demo harness built to reproduce it. The demo itself was reverted to
|
|
7
|
-
its plain single-item form once the fix landed — everything needed to rebuild the harness is below.
|
|
8
|
-
|
|
9
|
-
## Cause and fix
|
|
10
|
-
|
|
11
|
-
The prompt container was located by a **shared DOM id**. With several items of the same element on
|
|
12
|
-
one page, every item resolved that id to the *first* match, so an item would request math
|
|
13
|
-
typesetting against another item's node — leaving its own prompt untypeset.
|
|
14
|
-
|
|
15
|
-
Fixed in two halves:
|
|
16
|
-
|
|
17
|
-
| Repo | Change |
|
|
18
|
-
| --- | --- |
|
|
19
|
-
| `pie-lib` | `fix(render-ui)!: scope PreviewPrompt to its own node instead of a shared id` — breaking, shipped in `@pie-lib/render-ui@7.0.0` |
|
|
20
|
-
| `pie-elements` | `fix: read the prompt container by class, not by the id pie-lib removed` |
|
|
21
|
-
|
|
22
|
-
## Why the harness needed several items
|
|
23
|
-
|
|
24
|
-
**A single item on a page typesets fine.** The id collision cannot happen with one item, so a
|
|
25
|
-
one-item demo shows nothing. Any future repro must mount **more than one** item of the same element.
|
|
26
|
-
|
|
27
|
-
The harness mounted 5 items × 6 expressions = **30 tagged prompt expressions**, each prefixed with a
|
|
28
|
-
unique tag (`[3.E2]`) so a mis-rendered one could be named exactly. Two extra tags per item —
|
|
29
|
-
`[n.T1]` in teacher instructions, `[n.F1]` in feedback — need `role=instructor` (with `mode=view` or
|
|
30
|
-
`evaluate`) and `mode=evaluate` respectively to appear at all.
|
|
31
|
-
|
|
32
|
-
## Expression shapes covered
|
|
33
|
-
|
|
34
|
-
The two forms below both appeared in the reported items and both must render. `E1`'s wrapper holds no
|
|
35
|
-
delimiters and braces its exponents; `E2`'s holds the delimiters and leaves exponents unbraced.
|
|
36
|
-
|
|
37
|
-
| Tag | Shape |
|
|
38
|
-
| --- | --- |
|
|
39
|
-
| `E1` | wrapper without delimiters, braced exponents — `P\left(x\right)=-2x^{3}-4x^{2}+18x+36` |
|
|
40
|
-
| `E2` | wrapper with delimiters, unbraced exponents — `P\left(x\right)=-2x^3-4x^2+18x+36` |
|
|
41
|
-
| `E3` | fraction and radical — `x=\frac{-b\pm\sqrt{b^{2}-4ac}}{2a}` |
|
|
42
|
-
| `E4` | radical, no delimiters — `\sqrt[3]{27x^{6}}=3x^{2}` |
|
|
43
|
-
| `E5` | series with limits — `\sum_{n=1}^{\infty}\frac{1}{n^{2}}=\frac{\pi^{2}}{6}` |
|
|
44
|
-
| `E6` | MathML pasted raw, no `data-latex` wrapper (exercises the other code path) |
|
|
45
|
-
| `T1` | teacher instructions (needs `role=instructor`) |
|
|
46
|
-
| `F1` | feedback (needs `mode=evaluate`) |
|
|
47
|
-
|
|
48
|
-
Two wrapper builders drove `E1`–`E5`:
|
|
49
|
-
|
|
50
|
-
```js
|
|
51
|
-
// no delimiters inside the wrapper: renderMath() adds them itself, via fixMathElements()
|
|
52
|
-
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
53
|
-
|
|
54
|
-
// already delimited - the form that shipped in the item that failed to render
|
|
55
|
-
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Rebuilding it
|
|
59
|
-
|
|
60
|
-
Run with `yarn pie-install` / the usual demo flow from `packages/extended-text-entry`. Restore these
|
|
61
|
-
four files, then remember that `ITEM_COUNT` drives `config.js` and `session.js` **but not**
|
|
62
|
-
`index.html`, which hardcodes its elements — raising the count means adding matching markup there.
|
|
63
|
-
|
|
64
|
-
### `generate.js`
|
|
65
|
-
|
|
66
|
-
```js
|
|
67
|
-
const LATEX = {
|
|
68
|
-
polyBraced: 'P\\left(x\\right)=-2x^{3}-4x^{2}+18x+36',
|
|
69
|
-
polyPlain: 'P\\left(x\\right)=-2x^3-4x^2+18x+36',
|
|
70
|
-
quadratic: 'x=\\frac{-b\\pm\\sqrt{b^{2}-4ac}}{2a}',
|
|
71
|
-
radical: '\\sqrt[3]{27x^{6}}=3x^{2}',
|
|
72
|
-
series: '\\sum_{n=1}^{\\infty}\\frac{1}{n^{2}}=\\frac{\\pi^{2}}{6}',
|
|
73
|
-
inequality: '-3\\le x\\le 2',
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
const MATHML =
|
|
77
|
-
'<math xmlns="http://www.w3.org/1998/Math/MathML">' +
|
|
78
|
-
'<mfrac><mrow><mn>3</mn><mi>x</mi></mrow><mn>4</mn></mfrac></math>';
|
|
79
|
-
|
|
80
|
-
const bare = (latex) => `<span data-latex="" data-raw="${latex}">${latex}</span>`;
|
|
81
|
-
const delimited = (latex) => `<span data-latex="" data-raw="${latex}">\\(${latex}\\)</span>`;
|
|
82
|
-
const tag = (label) => `<strong style="color:#b00020;font-family:ui-monospace,Menlo,monospace">[${label}]</strong>`;
|
|
83
|
-
const line = (label, note, markup) => `<div>${tag(label)} ${note}: ${markup}</div>`;
|
|
84
|
-
|
|
85
|
-
const prompt = (item) =>
|
|
86
|
-
[
|
|
87
|
-
`<p>Item ${item}. Every expression below must show as typeset math — ` +
|
|
88
|
-
'if any shows its raw latex source instead, report it by its tag.</p>',
|
|
89
|
-
line(`${item}.E1`, 'wrapper without delimiters, braced exponents', bare(LATEX.polyBraced)),
|
|
90
|
-
line(`${item}.E2`, 'wrapper with delimiters, unbraced exponents', delimited(LATEX.polyPlain)),
|
|
91
|
-
line(`${item}.E3`, 'fraction and radical', delimited(LATEX.quadratic)),
|
|
92
|
-
line(`${item}.E4`, 'radical, no delimiters', bare(LATEX.radical)),
|
|
93
|
-
line(`${item}.E5`, 'series with limits', delimited(LATEX.series)),
|
|
94
|
-
line(`${item}.E6`, 'mathml, no data-latex wrapper', MATHML),
|
|
95
|
-
].join('');
|
|
96
|
-
|
|
97
|
-
exports.model = (id, element) => ({
|
|
98
|
-
id,
|
|
99
|
-
element,
|
|
100
|
-
customKeys: ['\\square'],
|
|
101
|
-
feedback: {
|
|
102
|
-
type: 'custom',
|
|
103
|
-
default: 'this is default feedback',
|
|
104
|
-
custom: line(`${id}.F1`, 'feedback', delimited(LATEX.inequality)),
|
|
105
|
-
},
|
|
106
|
-
feedbackEnabled: true,
|
|
107
|
-
prompt: prompt(id),
|
|
108
|
-
promptEnabled: true,
|
|
109
|
-
teacherInstructions: line(`${id}.T1`, 'teacher instructions', delimited(LATEX.polyPlain)),
|
|
110
|
-
teacherInstructionsEnabled: true,
|
|
111
|
-
mathInput: true,
|
|
112
|
-
playersToolbarPosition: 'bottom',
|
|
113
|
-
toolbarEditorPosition: 'bottom',
|
|
114
|
-
spellCheckEnabled: true,
|
|
115
|
-
rubricEnabled: false,
|
|
116
|
-
annotationsEnabled: false,
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
exports.ITEM_COUNT = 5;
|
|
120
|
-
exports.PROMPT_EXPRESSIONS_PER_ITEM = 6;
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
### `config.js`
|
|
124
|
-
|
|
125
|
-
```js
|
|
126
|
-
const { model, ITEM_COUNT } = require('./generate');
|
|
127
|
-
|
|
128
|
-
const ids = Array.from({ length: ITEM_COUNT }, (_, i) => `${i + 1}`);
|
|
129
|
-
|
|
130
|
-
module.exports = {
|
|
131
|
-
elements: {
|
|
132
|
-
'extended-text-entry': '../..',
|
|
133
|
-
},
|
|
134
|
-
models: ids.map((id) => model(id, 'extended-text-entry')),
|
|
135
|
-
};
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### `session.js`
|
|
139
|
-
|
|
140
|
-
One session per model — the player needs a session whose `id` matches each model's `id`, so this must
|
|
141
|
-
stay the same length as `config.js`.
|
|
142
|
-
|
|
143
|
-
```js
|
|
144
|
-
const { ITEM_COUNT } = require('./generate');
|
|
145
|
-
|
|
146
|
-
module.exports = Array.from({ length: ITEM_COUNT }, (_, i) => ({
|
|
147
|
-
id: `${i + 1}`,
|
|
148
|
-
element: 'extended-text-entry',
|
|
149
|
-
}));
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
### `index.html`
|
|
153
|
-
|
|
154
|
-
Five `<extended-text-entry>` elements with `pie-id="1"`…`"5"`, each wrapped in a labelled box:
|
|
155
|
-
|
|
156
|
-
```html
|
|
157
|
-
<div class="body">
|
|
158
|
-
<div class="math-demo-item">
|
|
159
|
-
<h5>item 1 — 1.E1–1.E6</h5>
|
|
160
|
-
<extended-text-entry pie-id="1"></extended-text-entry>
|
|
161
|
-
</div>
|
|
162
|
-
<!-- repeat for pie-id 2..5 -->
|
|
163
|
-
</div>
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
## Regression check
|
|
167
|
-
|
|
168
|
-
Nothing here is covered by the Jest suite — it needs a real browser to observe typesetting. Rebuild
|
|
169
|
-
this harness and eyeball all 30 tags after any change to prompt rendering or to the math-rendering
|
|
170
|
-
libs (`@pie-lib/render-ui`, `@pie-lib/math-rendering`, `@pie-lib/math-rendering-accessible`).
|
package/module/configure.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_dll_react as e,_dll_prop_types as t,_dll_mui__material as n,_dll_mui__material_styles as i,_dll_react_dom_client as a}from"../../../@pie-lib/shared-module@6.0.0/module/index.js";import{_dll_pie_lib__config_ui as s}from"../../../@pie-lib/config-module@5.0.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@8.0.0/module/index.js";var l={};Object.defineProperty(l,"__esModule",{value:!0});class r extends CustomEvent{constructor(e,t=!1){super(r.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}r.TYPE="model.updated";var d=l.ModelUpdatedEvent=r;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}c.TYPE="delete.image";var p=l.DeleteImageEvent=c;class u extends CustomEvent{constructor(e){super(u.TYPE,{bubbles:!0,detail:e}),this.handler=e}}u.TYPE="insert.image";var h=l.InsertImageEvent=u;class g extends CustomEvent{constructor(e,t){super(g.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}g.TYPE="delete.sound";var b=l.DeleteSoundEvent=g;class m extends CustomEvent{constructor(e){super(m.TYPE,{bubbles:!0,detail:e}),this.handler=e}}m.TYPE="insert.sound";var _=l.InsertSoundEvent=m;const E=e,f=t,{Typography:C}=n,{styled:I}=i,{FeedbackSelector:v}=s,{InputContainer:S}=s,{settings:x}=s,{layout:y}=s,k=o,{ALL_PLUGINS:P}=o;function w(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}const{Panel:M,toggle:T,numberFields:A,dropdown:D}=x,R={type:"default",default:"Your answer has been submitted"},q=I(C)(({theme:e})=>({paddingBottom:e.spacing(1)})),Y=I(S)(({theme:e})=>({paddingTop:e.spacing(1),marginTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),O=I("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class j extends E.Component{static __initStatic(){this.propTypes={onModelChanged:f.func.isRequired,onConfigurationChanged:f.func,model:f.object.isRequired,configuration:f.object.isRequired,imageSupport:f.object.isRequired,uploadSoundSupport:f.object.isRequired}}constructor(e){super(e),j.prototype.__init.call(this),j.prototype.__init2.call(this),j.prototype.__init3.call(this),this.state={setDimensions:!0}}__init(){this.onPromptChange=e=>{const{onModelChanged:t,model:n}=this.props;t({...n,prompt:e})}}__init2(){this.changeFeedback=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,feedback:e})}}__init3(){this.changeTeacherInstructions=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,teacherInstructions:e})}}render(){const{model:e,configuration:t,imageSupport:n,onConfigurationChanged:i,onModelChanged:a,uploadSoundSupport:s}=this.props,{annotations:o={},contentDimensions:l={},dimensions:r={},equationEditor:d={},feedback:c={},playerSpellCheck:p={},prompt:u={},settingsPanelDisabled:h,spanishInput:g={},specialInput:b={},spellCheck:m={},studentInstructions:_={},teacherInstructions:f={},mathInput:C={},maxImageWidth:I={},maxImageHeight:S={},multiple:x={},withRubric:j={},mathMlOptions:H={},baseInputConfiguration:F={}}=t||{},{errors:G={},extraCSSRules:W,feedbackEnabled:L,promptEnabled:z,spellCheckEnabled:N,teacherInstructionsEnabled:B,toolbarEditorPosition:U}=e||{},{prompt:J,teacherInstructions:K}=G,Q=I&&I.prompt,V=S&&S.prompt,X={position:"top"===U?"top":"bottom"},Z={mathInput:C.settings&&T(C.label),equationEditor:d.enabled&&e.mathInput&&D(d.label,["non-negative-integers","integers","decimals","fractions","Grade 1 - 2","Grade 3 - 5","Grade 6 - 7","Grade 8 - HS","geometry","advanced-algebra","statistics","item-authoring"]),spanishInput:g.settings&&T(g.label),specialInput:b.settings&&T(b.label),dimensions:r.settings&&A(r.label,{width:{label:"Width (px)",suffix:"px",min:100,max:1200},height:{label:"Height (px)",suffix:"px",min:100,max:500}}),"multiple.enabled":x.settings&&T(x.label,!0),promptEnabled:u.settings&&T(u.label),feedbackEnabled:c.settings&&T(c.label),annotationsEnabled:o.settings&&T(o.label),spellCheckEnabled:m.settings&&T(m.label),playerSpellCheckDisabled:p.settings&&T(p.label)},$={teacherInstructionsEnabled:f.settings&&T(f.label),studentInstructionsEnabled:_.settings&&T(_.label),rubricEnabled:w([j,"optionalAccess",e=>e.settings])&&T(w([j,"optionalAccess",e=>e.label]))},ee=e=>Object.assign({...F},e||{});return E.createElement(y.ConfigLayout,{extraCSSRules:W,dimensions:l,hideSettings:h,settings:E.createElement(M,{model:e,configuration:t,onChangeModel:e=>a(e),onChangeConfiguration:e=>i(e),groups:{Settings:Z,Properties:$}})},B&&E.createElement(Y,{label:f.label},E.createElement(k,{className:"prompt",markup:e.teacherInstructions||"",onChange:this.changeTeacherInstructions,imageSupport:n,nonEmpty:!1,error:K,toolbarOpts:X,spellCheck:N,maxImageWidth:I&&I.teacherInstructions||Q,maxImageHeight:S&&S.teacherInstructions||V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([f,"optionalAccess",e=>e.inputConfiguration]))}),K&&E.createElement(O,null,K)),z&&E.createElement(Y,{label:u.label},E.createElement(k,{activePlugins:P,className:"prompt",markup:e.prompt||"",onChange:this.onPromptChange,imageSupport:n,nonEmpty:!1,error:J,toolbarOpts:X,spellCheck:N,maxImageWidth:Q,maxImageHeight:V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:H,pluginProps:ee(w([u,"optionalAccess",e=>e.inputConfiguration]))}),J&&E.createElement(O,null,J)),L&&E.createElement(E.Fragment,null,E.createElement(q,{variant:"h6"},"Feedback"),E.createElement(v,{label:"When submitted, show",feedback:e.feedback||R,onChange:this.changeFeedback,toolbarOpts:X})))}}j.__initStatic();var H={annotationsEnabled:!1,dimensions:{height:100,width:500},equationEditor:"Grade 8 - HS",feedbackEnabled:!1,mathInput:!1,playerSpellCheckDisabled:!0,predefinedAnnotations:[{label:"good",text:"good",type:"positive"},{label:"★",text:"★",type:"positive"},{label:":-)",text:":-)",type:"positive"},{label:"creative",text:"creative",type:"positive"},{label:"run-on",text:"run-on",type:"negative"},{label:"frag",text:"fragment",type:"negative"},{label:"tran",text:"transition",type:"negative"},{label:"supp",text:"support needed",type:"negative"},{label:"punc",text:"punctuation",type:"negative"},{label:"agr",text:"agreement wrong",type:"negative"},{label:"unclear",text:"unclear",type:"negative"},{label:"cut",text:"cut",type:"negative"},{label:"sp",text:"spelling",type:"negative"},{label:"cap",text:"capitalization",type:"negative"},{label:"inf",text:"informal",type:"negative"},{label:"awk",text:"awkward",type:"negative"}],prompt:"",promptEnabled:!0,rationale:"",rationaleEnabled:!0,spanishInput:!1,specialInput:!1,spellCheckEnabled:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},F={annotations:{settings:!1,label:"Annotations"},baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},h3:{disabled:!0},blockquote:{disabled:!0},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},dimensions:{settings:!0,label:"Text-Entry Display Size"},spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},playerSpellCheck:{label:"Disable Student Spellcheck",settings:!0,enabled:!0},equationEditor:{settings:!1,label:"Equation Editor",enabled:!0},feedback:{settings:!0,label:"Feedback"},mathInput:{settings:!0,label:"Student response can include math notation",enabled:!1},settingsPanelDisabled:!1,spanishInput:{settings:!0,label:"Students can insert Spanish",enabled:!1},specialInput:{settings:!0,label:"Students can insert Special Characters",enabled:!1},multiple:{settings:!1,label:"Multiple Parts",enabled:!1},studentInstructions:{settings:!1,label:"Student Instructions"},prompt:{settings:!0,label:"Prompt",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,prompt:300},maxImageHeight:{teacherInstructions:300,prompt:300},withRubric:{settings:!1,label:"Add Rubric"},mathMlOptions:{mmlOutput:!1,mmlEditing:!1}};const G=e,{createRoot:W}=a;function L(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}class z extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={},t)=>{const n={...H,...e};return L([t,"optionalAccess",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&!n.rubricEnabled&&(n.rubricEnabled=!0),n}}constructor(){super(),this._root=null,this._configuration=F,L([this,"access",e=>e._configuration,"access",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1),this._model=z.createDefaultModel({},this._configuration)}set model(e){this._model=z.createDefaultModel(e,this._configuration),this.render()}set configuration(e){this._configuration={...F,...e};const{withRubric:t={}}=e||{};L([t,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1,this._model.rubricEnabled||(this._model.rubricEnabled=!0)),this.render()}onModelChanged(e){this._model=e,this.render(),this.dispatchEvent(new d(this._model,!1))}onConfigurationChanged(e){this._configuration={...F,...e},this._model&&this.onModelChanged(this._model),this.render()}insertImage(e){this.dispatchEvent(new h(e))}onDeleteImage(e,t){this.dispatchEvent(new p(e,t))}insertSound(e){this.dispatchEvent(new _(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}render(){if(this._model){const e=G.createElement(j,{model:this._model,configuration:this._configuration,onModelChanged:this.onModelChanged.bind(this),onConfigurationChanged:this.onConfigurationChanged.bind(this),imageSupport:{add:this.insertImage.bind(this),delete:this.onDeleteImage.bind(this)},uploadSoundSupport:{add:this.insertSound.bind(this),delete:this.onDeleteSound.bind(this)}});this._root||(this._root=W(this)),this._root.render(e)}}connectedCallback(){this.render()}disconnectedCallback(){this._root&&(this._root.unmount(),this._root=null)}}z.__initStatic();export{z as default};
|
package/module/controller.js
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Get the feedback from a {FeedbackConfig}
|
|
3
|
-
*
|
|
4
|
-
* @param {FeedbackConfig} feedback
|
|
5
|
-
* @param {string} fallback
|
|
6
|
-
*/
|
|
7
|
-
const getFeedback = (feedback, fallback) =>
|
|
8
|
-
new Promise((resolve) => {
|
|
9
|
-
if (!feedback || feedback.type === 'none') {
|
|
10
|
-
resolve(undefined);
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
feedback = feedback || {};
|
|
14
|
-
const out = feedback[feedback.type] || fallback;
|
|
15
|
-
resolve(out);
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
var defaults = {
|
|
19
|
-
annotationsEnabled: false,
|
|
20
|
-
dimensions: { height: 100, width: 500 },
|
|
21
|
-
equationEditor: 'Grade 8 - HS',
|
|
22
|
-
feedbackEnabled: false,
|
|
23
|
-
mathInput: false,
|
|
24
|
-
playerSpellCheckDisabled: true,
|
|
25
|
-
predefinedAnnotations: [
|
|
26
|
-
{ label: 'good', text: 'good', type: 'positive' },
|
|
27
|
-
{ label: '★', text: '★', type: 'positive' },
|
|
28
|
-
{ label: ':-)', text: ':-)', type: 'positive' },
|
|
29
|
-
{ label: 'creative', text: 'creative', type: 'positive' },
|
|
30
|
-
{ label: 'run-on', text: 'run-on', type: 'negative' },
|
|
31
|
-
{ label: 'frag', text: 'fragment', type: 'negative' },
|
|
32
|
-
{ label: 'tran', text: 'transition', type: 'negative' },
|
|
33
|
-
{ label: 'supp', text: 'support needed', type: 'negative' },
|
|
34
|
-
{ label: 'punc', text: 'punctuation', type: 'negative' },
|
|
35
|
-
{ label: 'agr', text: 'agreement wrong', type: 'negative' },
|
|
36
|
-
{ label: 'unclear', text: 'unclear', type: 'negative' },
|
|
37
|
-
{ label: 'cut', text: 'cut', type: 'negative' },
|
|
38
|
-
{ label: 'sp', text: 'spelling', type: 'negative' },
|
|
39
|
-
{ label: 'cap', text: 'capitalization', type: 'negative' },
|
|
40
|
-
{ label: 'inf', text: 'informal', type: 'negative' },
|
|
41
|
-
{ label: 'awk', text: 'awkward', type: 'negative' },
|
|
42
|
-
],
|
|
43
|
-
prompt: '',
|
|
44
|
-
promptEnabled: true,
|
|
45
|
-
rationale: '',
|
|
46
|
-
rationaleEnabled: true,
|
|
47
|
-
studentInstructionsEnabled: true,
|
|
48
|
-
teacherInstructions: '',
|
|
49
|
-
teacherInstructionsEnabled: true,
|
|
50
|
-
toolbarEditorPosition: 'bottom',
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
async function createDefaultModel(model = {}) {
|
|
54
|
-
|
|
55
|
-
return { ...defaults, ...model };
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const normalize = (question) => ({ ...defaults, ...question });
|
|
59
|
-
|
|
60
|
-
async function model(question, session, env) {
|
|
61
|
-
const normalizedQuestion = normalize(question);
|
|
62
|
-
|
|
63
|
-
const fb =
|
|
64
|
-
env.mode === 'evaluate' && normalizedQuestion.feedbackEnabled
|
|
65
|
-
? getFeedback(normalizedQuestion.feedback, 'Your answer has been submitted')
|
|
66
|
-
: Promise.resolve(undefined);
|
|
67
|
-
|
|
68
|
-
let teacherInstructions = null;
|
|
69
|
-
if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
|
|
70
|
-
teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
|
|
71
|
-
} else {
|
|
72
|
-
teacherInstructions = null;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
let equationEditor = normalizedQuestion.equationEditor || 'miscellaneous';
|
|
76
|
-
|
|
77
|
-
switch (normalizedQuestion.equationEditor) {
|
|
78
|
-
case 'Grade 1 - 2':
|
|
79
|
-
equationEditor = 1;
|
|
80
|
-
break;
|
|
81
|
-
case 'Grade 3 - 5':
|
|
82
|
-
equationEditor = 3;
|
|
83
|
-
break;
|
|
84
|
-
case 'Grade 6 - 7':
|
|
85
|
-
equationEditor = 6;
|
|
86
|
-
break;
|
|
87
|
-
case 'Grade 8 - HS':
|
|
88
|
-
equationEditor = 8;
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const annotatorMode = normalizedQuestion.annotationsEnabled && (env.role === 'instructor' || env.mode === 'evaluate');
|
|
93
|
-
|
|
94
|
-
return fb.then((feedback) => ({
|
|
95
|
-
prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
|
|
96
|
-
dimensions: normalizedQuestion.dimensions,
|
|
97
|
-
customKeys: normalizedQuestion.customKeys || [],
|
|
98
|
-
id: normalizedQuestion.id,
|
|
99
|
-
disabled: env.mode !== 'gather',
|
|
100
|
-
feedback,
|
|
101
|
-
teacherInstructions,
|
|
102
|
-
language: normalizedQuestion.language,
|
|
103
|
-
mathInput: normalizedQuestion.mathInput,
|
|
104
|
-
spanishInput: normalizedQuestion.spanishInput,
|
|
105
|
-
specialInput: normalizedQuestion.specialInput,
|
|
106
|
-
equationEditor,
|
|
107
|
-
spellCheckEnabled: !normalizedQuestion.playerSpellCheckDisabled,
|
|
108
|
-
playersToolbarPosition: normalizedQuestion.playersToolbarPosition || 'bottom',
|
|
109
|
-
annotatorMode,
|
|
110
|
-
disabledAnnotator: normalizedQuestion.annotationsEnabled ? env.role !== 'instructor' : true,
|
|
111
|
-
predefinedAnnotations: normalizedQuestion.annotationsEnabled ? normalizedQuestion.predefinedAnnotations : [],
|
|
112
|
-
extraCSSRules: normalizedQuestion.extraCSSRules,
|
|
113
|
-
}));
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
async function outcome(/*question, session, env*/) {
|
|
117
|
-
return {
|
|
118
|
-
score: 0,
|
|
119
|
-
completed: 'n/a',
|
|
120
|
-
note: 'Requires manual scoring',
|
|
121
|
-
};
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
// remove all html tags except img, iframe and source tag for audio
|
|
125
|
-
const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
|
|
126
|
-
|
|
127
|
-
const validate = (model = {}, config = {}) => {
|
|
128
|
-
const errors = {};
|
|
129
|
-
|
|
130
|
-
['teacherInstructions', 'prompt'].forEach((field) => {
|
|
131
|
-
if (config[field]?.required && !getContent(model[field])) {
|
|
132
|
-
errors[field] = 'This field is required.';
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
|
|
136
|
-
return errors;
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
export { createDefaultModel, model, normalize, outcome, validate };
|
package/module/demo.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import Configure from './configure.js';
|
|
2
|
-
import Element from './element.js';
|
|
3
|
-
import * as controller from './controller.js';
|
|
4
|
-
|
|
5
|
-
var generate = {};
|
|
6
|
-
|
|
7
|
-
generate.model = (id, element) => ({
|
|
8
|
-
id,
|
|
9
|
-
element,
|
|
10
|
-
customKeys: ['\\square'],
|
|
11
|
-
feedback: { type: 'default', default: 'this is default feedback' },
|
|
12
|
-
prompt: 'This is the question prompt',
|
|
13
|
-
promptEnabled: true,
|
|
14
|
-
mathInput: true,
|
|
15
|
-
playersToolbarPosition: 'bottom',
|
|
16
|
-
toolbarEditorPosition: 'bottom',
|
|
17
|
-
spellCheckEnabled: true,
|
|
18
|
-
rubricEnabled: false,
|
|
19
|
-
annotationsEnabled: false,
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
const { model } = generate;
|
|
23
|
-
var config = {
|
|
24
|
-
elements: {
|
|
25
|
-
'extended-text-entry': '../..',
|
|
26
|
-
},
|
|
27
|
-
models: [model('1', 'extended-text-entry')],
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
//Note: demo-el is a custom element loaded in the markup.
|
|
31
|
-
customElements.whenDefined("demo-el").then(() => {
|
|
32
|
-
config.models.forEach((m) => {
|
|
33
|
-
const de = document.createElement("demo-el");
|
|
34
|
-
document.body.appendChild(de);
|
|
35
|
-
de.def = { tagName: m.element, Element, Configure, controller };
|
|
36
|
-
de.model = m;
|
|
37
|
-
});
|
|
38
|
-
});
|