@pie-element/drawing-response 12.2.2-beta.6 → 12.2.2-beta.8

package/lib/drawing-response/factory.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _drawableFreePath = _interopRequireDefault(require("./drawable-free-path"));
+var _drawableLine = _interopRequireDefault(require("./drawable-line"));
+var _drawableRectangle = _interopRequireDefault(require("./drawable-rectangle"));
+var _drawableCircle = _interopRequireDefault(require("./drawable-circle"));
+var _drawableEraser = _interopRequireDefault(require("./drawable-eraser"));
+const DRAWABLES = [_drawableFreePath.default, _drawableLine.default, _drawableRectangle.default, _drawableCircle.default, _drawableEraser.default];
+var _default = (type, props) => {
+  const T = DRAWABLES.find(D => D.TYPE === type);
+  if (T) {
+    return new T(props);
+  }
+  throw new Error(`Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`);
+};
+exports.default = _default;
+//# sourceMappingURL=factory.js.map

package/lib/drawing-response/factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.js","names":["_drawableFreePath","_interopRequireDefault","require","_drawableLine","_drawableRectangle","_drawableCircle","_drawableEraser","DRAWABLES","FreePathDrawable","LineDrawable","RectangleDrawable","CircleDrawable","EraserDrawable","_default","type","props","T","find","D","TYPE","Error","JSON","stringify","exports","default"],"sources":["../../src/drawing-response/factory.js"],"sourcesContent":["import FreePathDrawable from './drawable-free-path';\nimport LineDrawable from './drawable-line';\nimport RectangleDrawable from './drawable-rectangle';\nimport CircleDrawable from './drawable-circle';\nimport EraserDrawable from './drawable-eraser';\n\nconst DRAWABLES = [FreePathDrawable, LineDrawable, RectangleDrawable, CircleDrawable, EraserDrawable];\n\nexport default (type, props) => {\n  const T = DRAWABLES.find((D) => D.TYPE === type);\n\n  if (T) {\n    return new T(props);\n  }\n\n  throw new Error(`Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`);\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,MAAMK,SAAS,GAAG,CAACC,yBAAgB,EAAEC,qBAAY,EAAEC,0BAAiB,EAAEC,uBAAc,EAAEC,uBAAc,CAAC;AAAC,IAAAC,QAAA,GAEvFA,CAACC,IAAI,EAAEC,KAAK,KAAK;EAC9B,MAAMC,CAAC,GAAGT,SAAS,CAACU,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,KAAKL,IAAI,CAAC;EAEhD,IAAIE,CAAC,EAAE;IACL,OAAO,IAAIA,CAAC,CAACD,KAAK,CAAC;EACrB;EAEA,MAAM,IAAIK,KAAK,CAAC,iCAAiCN,IAAI,eAAeO,IAAI,CAACC,SAAS,CAACP,KAAK,CAAC,EAAE,CAAC;AAC9F,CAAC;AAAAQ,OAAA,CAAAC,OAAA,GAAAX,QAAA","ignoreList":[]}

package/lib/drawing-response/icon.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = _interopRequireDefault(require("@mdi/react"));
+var _js = require("@mdi/js");
+const IconWrapper = ({
+  path
+}) => {
+  let iconPath;
+  switch (path) {
+    case 'mdiPencil':
+      iconPath = _js.mdiPencil;
+      break;
+    case 'mdiMinus':
+      iconPath = _js.mdiMinus;
+      break;
+    case 'mdiCircle':
+      iconPath = _js.mdiCircle;
+      break;
+    case 'mdiRectangle':
+      iconPath = _js.mdiRectangle;
+      break;
+    case 'mdiFormatColorText':
+      iconPath = _js.mdiFormatColorText;
+      break;
+    case 'mdiFormatColorFill':
+      iconPath = _js.mdiFormatColorFill;
+      break;
+    case 'mdiEraser':
+      iconPath = _js.mdiEraser;
+      break;
+    default:
+      iconPath = _js.mdiCursorDefault;
+      break;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react2.default, {
+    path: iconPath,
+    size: 0.8,
+    rotate: 180,
+    horizontal: true,
+    vertical: true,
+    color: "#2B3963"
+  });
+};
+IconWrapper.propTypes = {
+  path: _propTypes.default.string.isRequired
+};
+var _default = exports.default = IconWrapper;
+//# sourceMappingURL=icon.js.map

package/lib/drawing-response/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":["_react","_interopRequireDefault","require","_propTypes","_react2","_js","IconWrapper","path","iconPath","mdiPencil","mdiMinus","mdiCircle","mdiRectangle","mdiFormatColorText","mdiFormatColorFill","mdiEraser","mdiCursorDefault","default","createElement","size","rotate","horizontal","vertical","color","propTypes","PropTypes","string","isRequired","_default","exports"],"sources":["../../src/drawing-response/icon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@mdi/react';\nimport {\n  mdiCursorDefault,\n  mdiPencil,\n  mdiMinus,\n  mdiRectangle,\n  mdiCircle,\n  mdiFormatColorText,\n  mdiFormatColorFill,\n  mdiEraser,\n} from '@mdi/js';\n\nconst IconWrapper = ({ path }) => {\n  let iconPath;\n\n  switch (path) {\n    case 'mdiPencil':\n      iconPath = mdiPencil;\n      break;\n    case 'mdiMinus':\n      iconPath = mdiMinus;\n      break;\n    case 'mdiCircle':\n      iconPath = mdiCircle;\n      break;\n    case 'mdiRectangle':\n      iconPath = mdiRectangle;\n      break;\n    case 'mdiFormatColorText':\n      iconPath = mdiFormatColorText;\n      break;\n    case 'mdiFormatColorFill':\n      iconPath = mdiFormatColorFill;\n      break;\n    case 'mdiEraser':\n      iconPath = mdiEraser;\n      break;\n    default:\n      iconPath = mdiCursorDefault;\n      break;\n  }\n\n  return <Icon path={iconPath} size={0.8} rotate={180} horizontal vertical color=\"#2B3963\" />;\n};\n\nIconWrapper.propTypes = {\n  path: PropTypes.string.isRequired,\n};\n\nexport default IconWrapper;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,GAAA,GAAAH,OAAA;AAWA,MAAMI,WAAW,GAAGA,CAAC;EAAEC;AAAK,CAAC,KAAK;EAChC,IAAIC,QAAQ;EAEZ,QAAQD,IAAI;IACV,KAAK,WAAW;MACdC,QAAQ,GAAGC,aAAS;MACpB;IACF,KAAK,UAAU;MACbD,QAAQ,GAAGE,YAAQ;MACnB;IACF,KAAK,WAAW;MACdF,QAAQ,GAAGG,aAAS;MACpB;IACF,KAAK,cAAc;MACjBH,QAAQ,GAAGI,gBAAY;MACvB;IACF,KAAK,oBAAoB;MACvBJ,QAAQ,GAAGK,sBAAkB;MAC7B;IACF,KAAK,oBAAoB;MACvBL,QAAQ,GAAGM,sBAAkB;MAC7B;IACF,KAAK,WAAW;MACdN,QAAQ,GAAGO,aAAS;MACpB;IACF;MACEP,QAAQ,GAAGQ,oBAAgB;MAC3B;EACJ;EAEA,oBAAOhB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,OAAA,CAAAa,OAAI;IAACV,IAAI,EAAEC,QAAS;IAACW,IAAI,EAAE,GAAI;IAACC,MAAM,EAAE,GAAI;IAACC,UAAU;IAACC,QAAQ;IAACC,KAAK,EAAC;EAAS,CAAE,CAAC;AAC7F,CAAC;AAEDjB,WAAW,CAACkB,SAAS,GAAG;EACtBjB,IAAI,EAAEkB,kBAAS,CAACC,MAAM,CAACC;AACzB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAEaX,WAAW","ignoreList":[]}

package/lib/drawing-response/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+var _styles = require("@mui/material/styles");
+var _container = _interopRequireDefault(require("./container"));
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background()
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const ErrorDiv = (0, _styles.styled)('div')({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background()
+});
+class DrawingResponseComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showCorrect: false,
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      errorMessage: error.message
+    };
+  }
+  render() {
+    const {
+      model: {
+        extraCSSRules,
+        disabled,
+        imageDimensions,
+        imageUrl,
+        prompt,
+        mode,
+        teacherInstructions,
+        backgroundImageEnabled,
+        language
+      },
+      session,
+      onSessionChange
+    } = this.props;
+    const {
+      hasError,
+      errorMessage
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    return hasError ? /*#__PURE__*/_react.default.createElement(ErrorDiv, null, "An error occured: ", errorMessage) : /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules
+    }, teacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      tagName: "span",
+      prompt: prompt
+    }), /*#__PURE__*/_react.default.createElement(_container.default, {
+      session: session,
+      onSessionChange: onSessionChange,
+      isEvaluateMode: isEvaluateMode,
+      imageDimensions: imageDimensions,
+      imageUrl: imageUrl,
+      backgroundImageEnabled: backgroundImageEnabled,
+      disabled: disabled,
+      language: language
+    }));
+  }
+}
+DrawingResponseComponent.propTypes = {
+  model: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired,
+  session: _propTypes.default.object.isRequired
+};
+var _default = exports.default = DrawingResponseComponent;
+//# sourceMappingURL=index.js.map

package/lib/drawing-response/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","StyledCollapsible","Collapsible","theme","marginBottom","spacing","ErrorDiv","DrawingResponseComponent","React","Component","constructor","props","state","showCorrect","hasError","getDerivedStateFromError","error","errorMessage","message","render","model","extraCSSRules","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","language","session","onSessionChange","isEvaluateMode","default","createElement","labels","hidden","visible","PreviewPrompt","tagName","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/drawing-response/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst ErrorDiv = styled('div')({\n  color: color.text(),\n  backgroundColor: color.background(),\n});\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: {\n        extraCSSRules,\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled,\n        language,\n      },\n      session,\n      onSessionChange,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <ErrorDiv>An error occured: {errorMessage}</ErrorDiv>\n    ) : (\n      <StyledUiLayout extraCSSRules={extraCSSRules}>\n        {teacherInstructions && (\n          <StyledCollapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n          language={language}\n        />\n      </StyledUiLayout>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nexport default DrawingResponseComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _lodashEs = require("lodash-es");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _drawingResponse = _interopRequireDefault(require("./drawing-response"));
+class DrawingResponse extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "sessionChanged", update => {
+      this._session.drawables = update.drawables;
+      this._session.texts = update.texts;
+      this._session.width = update.width;
+      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+      this._render();
+    });
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._render();
+  }
+  isComplete() {
+    return this._session && (!(0, _lodashEs.isEmpty)(this._session.drawables) || !(0, _lodashEs.isEmpty)(this._session.texts));
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_drawingResponse.default, {
+        model: this._model,
+        session: this._session,
+        onSessionChange: this.sessionChanged
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+      this._root = null;
+    }
+  }
+}
+exports.default = DrawingResponse;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_lodashEs","_mathRendering","_piePlayerEvents","_drawingResponse","DrawingResponse","HTMLElement","constructor","_defineProperty2","default","update","_session","drawables","texts","width","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","_root","model","m","_model","ModelSetEvent","isEmpty","session","s","connectedCallback","el","React","createElement","DrawingResponseComponent","onSessionChange","sessionChanged","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { isEmpty } from 'lodash-es';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n    this._session.width = update.width;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged,\n      });\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      this._root = null;\n    }\n  }\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAEA,IAAAK,gBAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEe,MAAMM,eAAe,SAASC,WAAW,CAAC;EACvDC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,0BAeQC,MAAM,IAAK;MAC3B,IAAI,CAACC,QAAQ,CAACC,SAAS,GAAGF,MAAM,CAACE,SAAS;MAC1C,IAAI,CAACD,QAAQ,CAACE,KAAK,GAAGH,MAAM,CAACG,KAAK;MAClC,IAAI,CAACF,QAAQ,CAACG,KAAK,GAAGJ,MAAM,CAACI,KAAK;MAElC,IAAI,CAACC,aAAa,CAAC,IAAIC,oCAAmB,CAAC,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,UAAU,CAAC,CAAC,CAAC,CAAC;MAE1F,IAAI,CAACC,OAAO,CAAC,CAAC;IAChB,CAAC;IAtBC,IAAI,CAACC,KAAK,GAAG,IAAI;EACnB;EAEA,IAAIC,KAAKA,CAACC,CAAC,EAAE;IACX,IAAI,CAACC,MAAM,GAAGD,CAAC;IAEf,IAAI,CAACR,aAAa,CAAC,IAAIU,8BAAa,CAAC,IAAI,CAACR,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAACK,MAAM,CAAC,CAAC;IACnG,IAAI,CAACJ,OAAO,CAAC,CAAC;EAChB;EAEAD,UAAUA,CAAA,EAAG;IACX,OAAO,IAAI,CAACR,QAAQ,KAAK,CAAC,IAAAe,iBAAO,EAAC,IAAI,CAACf,QAAQ,CAACC,SAAS,CAAC,IAAI,CAAC,IAAAc,iBAAO,EAAC,IAAI,CAACf,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9F;EAYA,IAAIc,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAACjB,QAAQ,GAAGiB,CAAC;IACjB,IAAI,CAACR,OAAO,CAAC,CAAC;EAChB;EAEA,IAAIO,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAAChB,QAAQ;EACtB;EAEAkB,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACT,OAAO,CAAC,CAAC;EAChB;EAEAA,OAAOA,CAAA,EAAG;IACR,IAAI,IAAI,CAACI,MAAM,IAAI,IAAI,CAACb,QAAQ,EAAE;MAChC,MAAMmB,EAAE,gBAAGC,cAAK,CAACC,aAAa,CAACC,wBAAwB,EAAE;QACvDX,KAAK,EAAE,IAAI,CAACE,MAAM;QAClBG,OAAO,EAAE,IAAI,CAAChB,QAAQ;QACtBuB,eAAe,EAAE,IAAI,CAACC;MACxB,CAAC,CAAC;MAEF,IAAI,CAAC,IAAI,CAACd,KAAK,EAAE;QACf,IAAI,CAACA,KAAK,GAAG,IAAAe,kBAAU,EAAC,IAAI,CAAC;MAC/B;MACA,IAAI,CAACf,KAAK,CAACgB,MAAM,CAACP,EAAE,CAAC;MACrBQ,cAAc,CAAC,MAAM;QACnB,IAAAC,yBAAU,EAAC,IAAI,CAAC;MAClB,CAAC,CAAC;IACJ;EACF;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACnB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACoB,OAAO,CAAC,CAAC;MACpB,IAAI,CAACpB,KAAK,GAAG,IAAI;IACnB;EACF;AACF;AAACqB,OAAA,CAAAjC,OAAA,GAAAJ,eAAA","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response",
   "repository": "pie-framework/pie-elements",
-  "version": "12.2.2-beta.6",
+  "version": "12.2.2-beta.8",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c6bbb21417c58eaf8f617143437fb3ff85ae1cb4",
+  "gitHead": "675f5eade074184bdce556c2fac16b95d2bf1c60",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },