@pie-element/drawing-response 8.5.1-next.7 → 8.5.1

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/configure/CHANGELOG.md +11 -0
  3. package/configure/package.json +2 -2
  4. package/lib/drawing-response/container.js +13 -1
  5. package/lib/drawing-response/container.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/drawing-response/__tests__/container.test.jsx +5 -0
  8. package/src/drawing-response/container.jsx +17 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.5.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@8.5.0...@pie-element/drawing-response@8.5.1) (2025-04-10)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-lib/pie-toolbox PD-4765, PD-4947 ([56312ea](https://github.com/pie-framework/pie-elements/commit/56312ea13151cc7e5d026a112fb7d86d320e4799))
12
+ * **drawing-responnse:** detach undo controls from scrollable canvas area PD-4949 ([ecd9174](https://github.com/pie-framework/pie-elements/commit/ecd9174d89201e072c6e3a9cad41fee51857a8cc))
13
+ * **drawing-responnse:** detach undo controls from scrollable canvas area PD-4949 ([f4c148d](https://github.com/pie-framework/pie-elements/commit/f4c148ddc5297bf416a156699c8bc9a24fefde56))
14
+ * **drawing-responnse:** detach undo controls from scrollable canvas area PD-4949 ([236ce48](https://github.com/pie-framework/pie-elements/commit/236ce486483c276427545c79a592b328a2795706))
15
+ * **drawing-response:** move overflow:scroll to stage container to restore canvas interaction PD-4949 ([438b45c](https://github.com/pie-framework/pie-elements/commit/438b45c16fcc44b7183af1c293ad58948ff5c0d5))
16
+ * **drawing-response:** use ResizeObserver to correctly set canvas dimensions when switching from build to item preview PD-4955 ([baaabf6](https://github.com/pie-framework/pie-elements/commit/baaabf6abbee7736292b044bc3244051b0696499))
17
+
18
+
19
+
20
+
21
+
6
22
  # [8.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@8.4.0...@pie-element/drawing-response@8.5.0) (2025-04-01)
7
23
 
8
24
 
package/configure/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.4.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@8.4.0...@pie-element/drawing-response-configure@8.4.1) (2025-04-10)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-lib/pie-toolbox PD-4765, PD-4947 ([56312ea](https://github.com/pie-framework/pie-elements/commit/56312ea13151cc7e5d026a112fb7d86d320e4799))
12
+
13
+
14
+
15
+
16
+
6
17
  # [8.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@8.3.0...@pie-element/drawing-response-configure@8.4.0) (2025-04-01)
7
18
 
8
19
 
package/configure/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/drawing-response-configure",
3
3
  "private": true,
4
- "version": "8.4.0",
4
+ "version": "8.4.1",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -9,7 +9,7 @@
9
9
  "dependencies": {
10
10
  "@material-ui/core": "^3.9.2",
11
11
  "@pie-framework/pie-configure-events": "^1.3.0",
12
- "@pie-lib/pie-toolbox": "2.13.0",
12
+ "@pie-lib/pie-toolbox": "2.14.0",
13
13
  "classnames": "^2.2.6",
14
14
  "debug": "^3.1.0",
15
15
  "lodash": "^4.17.15",
package/lib/drawing-response/container.js CHANGED
@@ -210,7 +210,18 @@ var Container = /*#__PURE__*/function (_Component) {
210
210
  });
211
211
  }
212
212
  });
213
+ }); // Use ResizeObserver to detect when the drawable container becomes visible
214
+ // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.
215
+ // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.
216
+
217
+ this.resizeObserver = new ResizeObserver(function () {
218
+ _this3.setDimensions();
213
219
  });
220
+
221
+ if (this.drawable) {
222
+ this.resizeObserver.observe(this.drawable);
223
+ }
224
+
214
225
  var target = document.getElementById('question-container');
215
226
 
216
227
  if (target) {
@@ -223,11 +234,12 @@ var Container = /*#__PURE__*/function (_Component) {
223
234
  }, {
224
235
  key: "componentWillUnmount",
225
236
  value: function componentWillUnmount() {
226
- var _this$observer;
237
+ var _this$observer, _this$resizeObserver;
227
238
 
228
239
  var TextEntry = this.state.TextEntry;
229
240
  TextEntry.removeEventListeners();
230
241
  (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
242
+ (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
231
243
  }
232
244
  }, {
233
245
  key: "handleMakeToolActive",
package/lib/drawing-response/container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","translator","Translator","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","language","translatedROGVAIV","t","lng","setState","setTranslatedState","checkExist","setInterval","drawable","getBoundingClientRect","effectiveWidth","session","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","overflow","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\nconst { translator } = Translator;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n value: c,\n label: c,\n}));\n\nexport class Container extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func.isRequired,\n imageDimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n backgroundImageEnabled: PropTypes.bool.isRequired,\n language: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n const TextEntry = new DrawableText();\n\n this.state = {\n scale: 1,\n drawableDimensions: {\n height: 0,\n width: 0,\n },\n toolActive: TOOLS[0],\n fillColor: 'white',\n fillColorList: [\n { value: 'transparent', label: 'no fill' },\n { value: 'lightblue', label: 'light blue' },\n { value: 'lightyellow', label: 'light yellow' },\n ...ROGVAIV,\n ],\n outlineColor: 'black',\n outlineColorList: ROGVAIV,\n paintColor: 'red',\n paintColorList: ROGVAIV,\n TextEntry,\n };\n }\n\n setTranslatedState(language) {\n const translatedROGVAIV = ROGVAIV.map((c) => ({\n value: c.value,\n label: translator.t(`drawingResponse.${c.label}`, { lng: language }),\n }));\n\n this.setState({\n fillColorList: [\n { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }), },\n { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }), },\n { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }), },\n ...translatedROGVAIV,\n ],\n paintColor: translator.t('drawingResponse.red', { lng: language }),\n outlineColorList: translatedROGVAIV,\n paintColorList: translatedROGVAIV,\n });\n }\n\n UNSAFE_componentWillReceiveProps(props) {\n const { language } = props;\n this.setTranslatedState(language);\n }\n\n setDimensions() {\n const checkExist = setInterval(() => {\n try {\n const { height, width } = this.drawable.getBoundingClientRect();\n const effectiveWidth = this.props.session.width || width;\n if (height !== 0 && width !== 0) {\n this.setState({\n drawableDimensions: {\n height,\n width: effectiveWidth,\n },\n });\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('setDimensions Error: ', e);\n } finally {\n clearInterval(checkExist);\n }\n }, 100);\n }\n\n componentDidMount() {\n const { language } = this.props;\n this.setTranslatedState(language);\n\n this.setDimensions();\n\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n const { TextEntry } = this.state;\n\n TextEntry.removeEventListeners();\n this.observer?.disconnect();\n }\n\n handleMakeToolActive(tool) {\n const { TextEntry } = this.state;\n const { type } = tool;\n const { language } = this.props;\n\n if (type !== 'Text') {\n this.setState({\n toolActive: tool,\n });\n } else {\n TextEntry.addNewTextEntry(language);\n // Force update\n this.setState({\n updatedAt: new Date(),\n });\n }\n }\n\n checkIfToolIsDisabled = (type) => {\n if (this.props.disabled) return true;\n\n const { toolActive } = this.state;\n // Text will never be disabled since on each \"Text Entry\" click a new text is added\n if (type === 'Text') {\n return false;\n }\n return type === toolActive.type;\n };\n\n handleColorChange(type, color) {\n const cType = `${type}Color`;\n this.setState({\n [cType]: color,\n });\n }\n\n render() {\n const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =\n this.props;\n const {\n drawableDimensions,\n toolActive,\n fillColor,\n fillColorList,\n outlineColor,\n outlineColorList,\n paintColor,\n paintColorList,\n TextEntry,\n } = this.state;\n\n const heightToUse = drawableDimensions.height * this.state.scale;\n\n return (\n <div className={classes.base}>\n {!disabled && (\n <DrawablePalette\n fillColor={fillColor}\n fillList={fillColorList}\n outlineColor={outlineColor}\n outlineList={outlineColorList}\n paintColor={paintColor}\n paintList={paintColorList}\n onFillColorChange={(color) => this.handleColorChange('fill', color)}\n onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n language={language}\n />\n )}\n\n <div className={classes.box}>\n <div className={classes.toolbar}>\n {TOOLS.map((tool) => {\n const { type, label, icon } = tool;\n\n return (\n <Button\n title={label}\n key={type}\n disabled={this.checkIfToolIsDisabled(type)}\n onClick={() => this.handleMakeToolActive(tool)}\n label={<Icon path={icon}/>}\n />\n );\n })}\n </div>\n\n <div\n ref={(drawable) => {\n this.drawable = drawable;\n }}\n className={classes.drawableHeight}\n style={{ height: heightToUse, maxHeight: heightToUse, overflow: 'scroll' }}\n >\n <DrawableMain\n scale={this.state.scale}\n session={session}\n disabled={disabled}\n onSessionChange={onSessionChange}\n fillColor={fillColor}\n outlineColor={outlineColor}\n paintColor={paintColor}\n imageUrl={imageUrl}\n drawableDimensions={drawableDimensions}\n imageDimensions={imageDimensions}\n toolActive={toolActive}\n TextEntry={TextEntry}\n backgroundImageEnabled={backgroundImageEnabled}\n language={language}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n base: {\n marginTop: theme.spacing.unit * 2,\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px',\n marginTop: theme.spacing.unit * 2,\n backgroundColor: '#ECEDF1',\n },\n drawableHeight: {\n minHeight: 350,\n backgroundColor: '#fff',\n },\n toolbar: {\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n padding: '12px 8px 4px',\n boxSizing: 'border-box',\n maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n '& button': {\n marginBottom: theme.spacing.unit,\n },\n },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
1
+ {"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","translator","Translator","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","language","translatedROGVAIV","t","lng","setState","setTranslatedState","checkExist","setInterval","drawable","getBoundingClientRect","effectiveWidth","session","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","resizeObserver","ResizeObserver","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","overflow","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\nconst { translator } = Translator;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n value: c,\n label: c,\n}));\n\nexport class Container extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func.isRequired,\n imageDimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n backgroundImageEnabled: PropTypes.bool.isRequired,\n language: PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n const TextEntry = new DrawableText();\n\n this.state = {\n scale: 1,\n drawableDimensions: {\n height: 0,\n width: 0,\n },\n toolActive: TOOLS[0],\n fillColor: 'white',\n fillColorList: [\n { value: 'transparent', label: 'no fill' },\n { value: 'lightblue', label: 'light blue' },\n { value: 'lightyellow', label: 'light yellow' },\n ...ROGVAIV,\n ],\n outlineColor: 'black',\n outlineColorList: ROGVAIV,\n paintColor: 'red',\n paintColorList: ROGVAIV,\n TextEntry,\n };\n }\n\n setTranslatedState(language) {\n const translatedROGVAIV = ROGVAIV.map((c) => ({\n value: c.value,\n label: translator.t(`drawingResponse.${c.label}`, { lng: language }),\n }));\n\n this.setState({\n fillColorList: [\n { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }) },\n { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }) },\n { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }) },\n ...translatedROGVAIV,\n ],\n paintColor: translator.t('drawingResponse.red', { lng: language }),\n outlineColorList: translatedROGVAIV,\n paintColorList: translatedROGVAIV,\n });\n }\n\n UNSAFE_componentWillReceiveProps(props) {\n const { language } = props;\n this.setTranslatedState(language);\n }\n\n setDimensions() {\n const checkExist = setInterval(() => {\n try {\n const { height, width } = this.drawable.getBoundingClientRect();\n const effectiveWidth = this.props.session.width || width;\n\n if (height !== 0 && width !== 0) {\n this.setState({\n drawableDimensions: {\n height,\n width: effectiveWidth,\n },\n });\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('setDimensions Error: ', e);\n } finally {\n clearInterval(checkExist);\n }\n }, 100);\n }\n\n componentDidMount() {\n const { language } = this.props;\n this.setTranslatedState(language);\n\n this.setDimensions();\n\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n // Use ResizeObserver to detect when the drawable container becomes visible\n // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.\n // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.\n this.resizeObserver = new ResizeObserver(() => {\n this.setDimensions();\n });\n\n if (this.drawable) {\n this.resizeObserver.observe(this.drawable);\n }\n\n const target = document.getElementById('question-container');\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n const { TextEntry } = this.state;\n\n TextEntry.removeEventListeners();\n this.observer?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n handleMakeToolActive(tool) {\n const { TextEntry } = this.state;\n const { type } = tool;\n const { language } = this.props;\n\n if (type !== 'Text') {\n this.setState({\n toolActive: tool,\n });\n } else {\n TextEntry.addNewTextEntry(language);\n // Force update\n this.setState({\n updatedAt: new Date(),\n });\n }\n }\n\n checkIfToolIsDisabled = (type) => {\n if (this.props.disabled) return true;\n\n const { toolActive } = this.state;\n // Text will never be disabled since on each \"Text Entry\" click a new text is added\n if (type === 'Text') {\n return false;\n }\n return type === toolActive.type;\n };\n\n handleColorChange(type, color) {\n const cType = `${type}Color`;\n this.setState({\n [cType]: color,\n });\n }\n\n render() {\n const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =\n this.props;\n const {\n drawableDimensions,\n toolActive,\n fillColor,\n fillColorList,\n outlineColor,\n outlineColorList,\n paintColor,\n paintColorList,\n TextEntry,\n } = this.state;\n\n const heightToUse = drawableDimensions.height * this.state.scale;\n\n return (\n <div className={classes.base}>\n {!disabled && (\n <DrawablePalette\n fillColor={fillColor}\n fillList={fillColorList}\n outlineColor={outlineColor}\n outlineList={outlineColorList}\n paintColor={paintColor}\n paintList={paintColorList}\n onFillColorChange={(color) => this.handleColorChange('fill', color)}\n onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n language={language}\n />\n )}\n\n <div className={classes.box}>\n <div className={classes.toolbar}>\n {TOOLS.map((tool) => {\n const { type, label, icon } = tool;\n\n return (\n <Button\n title={label}\n key={type}\n disabled={this.checkIfToolIsDisabled(type)}\n onClick={() => this.handleMakeToolActive(tool)}\n label={<Icon path={icon} />}\n />\n );\n })}\n </div>\n\n <div\n ref={(drawable) => {\n this.drawable = drawable;\n }}\n className={classes.drawableHeight}\n style={{ height: heightToUse, maxHeight: heightToUse, overflow: 'scroll' }}\n >\n <DrawableMain\n scale={this.state.scale}\n session={session}\n disabled={disabled}\n onSessionChange={onSessionChange}\n fillColor={fillColor}\n outlineColor={outlineColor}\n paintColor={paintColor}\n imageUrl={imageUrl}\n drawableDimensions={drawableDimensions}\n imageDimensions={imageDimensions}\n toolActive={toolActive}\n TextEntry={TextEntry}\n backgroundImageEnabled={backgroundImageEnabled}\n language={language}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n base: {\n marginTop: theme.spacing.unit * 2,\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px',\n marginTop: theme.spacing.unit * 2,\n backgroundColor: '#ECEDF1',\n },\n drawableHeight: {\n minHeight: 350,\n backgroundColor: '#fff',\n },\n toolbar: {\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n padding: '12px 8px 4px',\n boxSizing: 'border-box',\n maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n '& button': {\n marginBottom: theme.spacing.unit,\n },\n },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/drawing-response",
3
- "version": "8.5.1-next.7+80cf88468",
3
+ "version": "8.5.1",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -11,7 +11,7 @@
11
11
  "@mdi/js": "^3.6.95",
12
12
  "@mdi/react": "^1.1.1",
13
13
  "@pie-framework/pie-player-events": "^0.1.0",
14
- "@pie-lib/pie-toolbox": "2.13.0",
14
+ "@pie-lib/pie-toolbox": "2.14.0",
15
15
  "classnames": "^2.2.6",
16
16
  "enzyme-to-json": "^3.3.5",
17
17
  "konva": "^3.4.1",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "author": "pie framework developers",
25
25
  "license": "ISC",
26
- "gitHead": "80cf884681427b6c2edeef7c9a7ba49d464e8a22",
26
+ "gitHead": "633997096a13a6c7d10ab8bc98d721e5337fa194",
27
27
  "scripts": {
28
28
  "postpublish": "../../scripts/postpublish"
29
29
  },
package/src/drawing-response/__tests__/container.test.jsx CHANGED
@@ -7,6 +7,11 @@ global.MutationObserver = class {
7
7
  observe(element, initObject) {}
8
8
  };
9
9
 
10
+ global.ResizeObserver = class {
11
+ observe() {}
12
+ disconnect() {}
13
+ };
14
+
10
15
  import { Container } from '../container';
11
16
 
12
17
  beforeEach(() => {
package/src/drawing-response/container.jsx CHANGED
@@ -64,9 +64,9 @@ export class Container extends Component {
64
64
 
65
65
  this.setState({
66
66
  fillColorList: [
67
- { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }), },
68
- { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }), },
69
- { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }), },
67
+ { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }) },
68
+ { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }) },
69
+ { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }) },
70
70
  ...translatedROGVAIV,
71
71
  ],
72
72
  paintColor: translator.t('drawingResponse.red', { lng: language }),
@@ -85,6 +85,7 @@ export class Container extends Component {
85
85
  try {
86
86
  const { height, width } = this.drawable.getBoundingClientRect();
87
87
  const effectiveWidth = this.props.session.width || width;
88
+
88
89
  if (height !== 0 && width !== 0) {
89
90
  this.setState({
90
91
  drawableDimensions: {
@@ -129,6 +130,17 @@ export class Container extends Component {
129
130
  });
130
131
  });
131
132
 
133
+ // Use ResizeObserver to detect when the drawable container becomes visible
134
+ // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.
135
+ // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.
136
+ this.resizeObserver = new ResizeObserver(() => {
137
+ this.setDimensions();
138
+ });
139
+
140
+ if (this.drawable) {
141
+ this.resizeObserver.observe(this.drawable);
142
+ }
143
+
132
144
  const target = document.getElementById('question-container');
133
145
  if (target) {
134
146
  this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
@@ -140,6 +152,7 @@ export class Container extends Component {
140
152
 
141
153
  TextEntry.removeEventListeners();
142
154
  this.observer?.disconnect();
155
+ this.resizeObserver?.disconnect();
143
156
  }
144
157
 
145
158
  handleMakeToolActive(tool) {
@@ -223,7 +236,7 @@ export class Container extends Component {
223
236
  key={type}
224
237
  disabled={this.checkIfToolIsDisabled(type)}
225
238
  onClick={() => this.handleMakeToolActive(tool)}
226
- label={<Icon path={icon}/>}
239
+ label={<Icon path={icon} />}
227
240
  />
228
241
  );
229
242
  })}