@pie-element/drawing-response 11.0.0-beta.1 → 11.0.0-next.42

package/configure/package.json

@@ -12,9 +12,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.0-next.5",
-    "@pie-lib/editable-html-tip-tap": "1.1.0-next.5",
-    "debug": "^3.1.0",
+    "@pie-lib/config-ui": "12.1.1-next.0",
+    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
+    "debug": "^4.1.1",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "18.2.0",

package/module/configure.js

@@ -0,0 +1 @@
+import{_dll_react_dom as e,_dll_prop_types as t,_dll_mui__material_styles as i,_dll_mui__material as n,_dll_react as a,_dll_lodash as o,_dll_debug as s}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__config_ui as l}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as r}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";var d={};Object.defineProperty(d,"__esModule",{value:!0});class h extends CustomEvent{constructor(e,t=!1){super(h.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}h.TYPE="model.updated";var c=d.ModelUpdatedEvent=h;class p extends CustomEvent{constructor(e,t){super(p.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}p.TYPE="delete.image";var g=d.DeleteImageEvent=p;class u extends CustomEvent{constructor(e){super(u.TYPE,{bubbles:!0,detail:e}),this.handler=e}}u.TYPE="insert.image";var m=d.InsertImageEvent=u;class _ extends CustomEvent{constructor(e,t){super(_.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}_.TYPE="delete.sound";var b=d.DeleteSoundEvent=_;class f extends CustomEvent{constructor(e){super(f.TYPE,{bubbles:!0,detail:e}),this.handler=e}}f.TYPE="insert.sound";var E,C=d.InsertSoundEvent=f,I=e;E=I.createRoot,I.hydrateRoot;const v=a,D=t,{styled:x}=i,{Button:y}=n,S=x(y)({marginLeft:8}),R=({label:e,onClick:t,disabled:i})=>v.createElement(S,{onClick:t,disabled:i,size:"small",variant:"contained"},e);R.propTypes={disabled:D.bool,label:D.string,onClick:D.func},R.defaultProps={className:"",disabled:!1,label:"Add",onClick:()=>{}};const w=a,{Component:k}=a,A=t,{styled:P}=i,U=e=>e.type.match(/image.*/),T=P("div")(({theme:e})=>({marginTop:e.spacing(1)})),M=P("div")(({active:e})=>({border:e?"1px solid #0032C2":"1px solid #E0E1E6",borderRadius:"5px"})),z=P("div")({alignItems:"center",display:"flex",flexDirection:"column",justifyContent:"center"}),O=P("div")({minHeight:350}),H=P("img")({alignItems:"center",display:"flex",justifyContent:"center"}),L=P("div")({position:"relative",width:"fit-content"}),W=P("div")({borderBottom:"1px solid #727272",borderRight:"1px solid #727272",bottom:"-10px",cursor:"se-resize",height:"10px",position:"absolute",right:"-10px",width:"10px"}),Y=P("input")({display:"none"}),j=P("div")({backgroundColor:"#ECEDF1",borderBottom:"1px solid #E0E1E6",borderTopLeftRadius:"5px",borderTopRightRadius:"5px",display:"flex",padding:"12px 8px"});class F extends k{static __initStatic(){this.propTypes={imageDimensions:A.object}}static __initStatic2(){this.defaultProps={}}constructor(e){super(e),F.prototype.__init.call(this),F.prototype.__init2.call(this),F.prototype.__init3.call(this),F.prototype.__init4.call(this),F.prototype.__init5.call(this),F.prototype.__init6.call(this),F.prototype.__init7.call(this),F.prototype.__init8.call(this),F.prototype.__init9.call(this),F.prototype.__init10.call(this),F.prototype.__init11.call(this),F.prototype.__init12.call(this),F.prototype.__init13.call(this),F.prototype.__init14.call(this),this.state={maxImageWidth:"100%",maxImageHeight:"auto",dragEnabled:!0,dropzoneActive:!1},this.fakeImageHandler={cancel:()=>{},done:(e,t)=>this.props.onImageUpload(t),fileChosen:()=>{},progress:()=>{}}}componentDidMount(){if(this.imageSection){const e=this.imageSection.getBoundingClientRect(),{height:t,width:i}=e;this.setState({maxImageWidth:i,maxImageHeight:t})}}__init(){this.handleFileRead=e=>{const{onImageUpload:t,insertImage:i}=this.props,n=new FileReader;n.onloadend=()=>t(n.result),n.readAsDataURL(e),i&&i({...this.fakeImageHandler,getChosenFile:()=>e,isPasted:!0})}}__init2(){this.handleUploadImage=e=>{e.preventDefault();const t=e.target.files[0];this.handleFileRead(t)}}__init3(){this.makeDropzoneActive=()=>this.setState({dropzoneActive:!0})}__init4(){this.makeDropzoneInactive=()=>this.setState({dropzoneActive:!1})}__init5(){this.handleOnDrop=e=>{e.preventDefault();const{items:t,files:i}=e.dataTransfer;if(t&&"file"===t[0].kind){const e=t[0].getAsFile();U(e)&&this.handleFileRead(e)}else U(i[0])&&this.handleFileRead(i[0]);this.makeDropzoneInactive()}}__init6(){this.handleOnDragOver=e=>{e.preventDefault();const{dropzoneActive:t}=this.state;t||this.makeDropzoneActive()}}__init7(){this.handleOnDragExit=e=>{e.preventDefault(),this.makeDropzoneInactive()}}__init8(){this.handleEnableDrag=()=>this.setState({dragEnabled:!0})}__init9(){this.handleDisableDrag=()=>this.setState({dragEnabled:!1})}__init10(){this.handleInputClick=()=>{const{insertImage:e}=this.props;e&&e(this.fakeImageHandler)}}__init11(){this.handleOnImageLoad=({target:{offsetHeight:e,offsetWidth:t,naturalHeight:i,naturalWidth:n}})=>{const{onUpdateImageDimension:a,imageDimensions:o}=this.props,s=this.resize,l={height:o&&o.height||e||i,width:o&&o.width||t||n},r=n/i;l.width!==l.height*r&&(l.width=l.height*r),this.setState({dimensions:l}),a(l),s.addEventListener("mousedown",this.initialiseResize,!1)}}__init12(){this.initialiseResize=()=>{window.addEventListener("mousemove",this.startResizing,!1),window.addEventListener("mouseup",this.stopResizing,!1)}}__init13(){this.stopResizing=()=>{const{onUpdateImageDimension:e}=this.props,{dimensions:t}=this.state;this.handleEnableDrag(),e(t),window.removeEventListener("mousemove",this.startResizing,!1),window.removeEventListener("mouseup",this.stopResizing,!1)}}__init14(){this.startResizing=e=>{const t=this.image,{maxImageWidth:i,maxImageHeight:n,dimensions:a}=this.state,o=e.target.getBoundingClientRect(),s=e.clientX-o.left,l=e.clientY-o.top,r=a.width/a.height;s<=i+5&&s/r<=n+5&&s>150&&l>150&&t&&(t.style.width=`${s}px`,t.style.height=s/r+"px",this.setState({dimensions:{width:s,height:s/r}})),this.handleDisableDrag()}}renderUploadControl(e){return w.createElement("div",null,w.createElement(R,{label:e,onClick:this.handleInputClick}),w.createElement(Y,{accept:"image/*",onChange:this.handleUploadImage,ref:e=>{this.input=e},type:"file"}))}render(){const{imageUrl:e,imageDimensions:t}=this.props,{dropzoneActive:i,dragEnabled:n,maxImageHeight:a,maxImageWidth:o}=this.state;return w.createElement(T,null,w.createElement(M,{active:i,...n?{onDragExit:this.handleOnDragExit,onDragLeave:this.handleOnDragExit,onDragOver:this.handleOnDragOver,onDrop:this.handleOnDrop}:{}},w.createElement(j,null,this.renderUploadControl(e?"Replace Image":"Upload Image")),w.createElement(O,{ref:e=>{this.imageSection=e}},e?w.createElement(L,null,w.createElement(H,{height:"auto",onLoad:this.handleOnImageLoad,ref:e=>{this.image=e},src:e,style:{width:t&&t.width?t.width:void 0,maxWidth:o,maxHeight:a},alt:""}),w.createElement(W,{ref:e=>{this.resize=e}})):w.createElement(O,{as:z},w.createElement("label",null,"Drag and drop or upload image from computer"),w.createElement("br",null),this.renderUploadControl("Upload Image")))))}}F.__initStatic(),F.__initStatic2(),F.propTypes={imageUrl:A.string.isRequired,onImageUpload:A.func.isRequired,onUpdateImageDimension:A.func.isRequired,insertImage:A.func};const q=a,B=t,{Typography:N}=n,{styled:X}=i,{cloneDeep:$}=o,{settings:G}=l,{layout:J}=l,{InputContainer:K}=l,Q=r;function V(e){let t,i=e[0],n=1;for(;n<e.length;){const a=e[n],o=e[n+1];if(n+=2,("optionalAccess"===a||"optionalCall"===a)&&null==i)return;"access"===a||"optionalAccess"===a?(t=i,i=o(i)):"call"!==a&&"optionalCall"!==a||(i=o((...e)=>i.call(t,...e)),t=void 0)}return i}const{Panel:Z,toggle:ee,dropdown:te}=G,ie=X(K)(({theme:e})=>({paddingTop:e.spacing(1),marginTop:e.spacing(2),marginBottom:e.spacing(1),width:"100%"})),ne=X("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class ae extends q.Component{constructor(...e){super(...e),ae.prototype.__init.call(this),ae.prototype.__init2.call(this),ae.prototype.__init3.call(this),ae.prototype.__init4.call(this)}__init(){this.onPromptChanged=e=>{const{model:t,onModelChanged:i}=this.props;i({...$(t),prompt:e})}}__init2(){this.onTeacherInstructionsChanged=e=>{const{model:t,onModelChanged:i}=this.props;i({...t,teacherInstructions:e})}}__init3(){this.onUpdateImageDimension=e=>{const{model:t,onModelChanged:i}=this.props;i({...t,imageDimensions:e})}}__init4(){this.onImageUpload=e=>{const{model:t,onModelChanged:i}=this.props;i({...t,imageUrl:e})}}render(){const{configuration:e,imageSupport:t,model:i,onConfigurationChanged:n,onModelChanged:a,uploadSoundSupport:o}=this.props,{baseInputConfiguration:s={},backgroundImage:l={},contentDimensions:r={},maxImageWidth:d={},maxImageHeight:h={},prompt:c={},settingsPanelDisabled:p,spellCheck:g={},teacherInstructions:u={},withRubric:m={},language:_={},languageChoices:b={},mathMlOptions:f={}}=e||{},{backgroundImageEnabled:E,errors:C={},extraCSSRules:I,promptEnabled:v,spellCheckEnabled:D,teacherInstructionsEnabled:x,toolbarEditorPosition:y}=i||{},{prompt:S,teacherInstructions:R}=C,w=d&&d.prompt,k=h&&h.prompt,A={position:"top"===y?"top":"bottom"},P={backgroundImageEnabled:l.settings&&ee(l.label),promptEnabled:c.settings&&ee(c.label),"language.enabled":_.settings&&ee(_.label,!0),language:_.settings&&_.enabled&&te(b.label,b.options)},U={teacherInstructionsEnabled:u.settings&&ee(u.label),spellCheckEnabled:g.settings&&ee(g.label),rubricEnabled:V([m,"optionalAccess",e=>e.settings])&&ee(V([m,"optionalAccess",e=>e.label]))},T=(e={})=>({...s,...e});return q.createElement(J.ConfigLayout,{extraCSSRules:I,dimensions:r,hideSettings:p,settings:q.createElement(Z,{model:i,onChangeModel:a,configuration:e,onChangeConfiguration:n,groups:{Settings:P,Properties:U}})},x&&q.createElement(ie,{label:u.label},q.createElement(Q,{markup:i.teacherInstructions||"",onChange:this.onTeacherInstructionsChanged,imageSupport:t,nonEmpty:!1,error:R,toolbarOpts:A,pluginProps:T(V([u,"optionalAccess",e=>e.inputConfiguration])),spellCheck:D,maxImageWidth:d&&d.teacherInstructions||w,maxImageHeight:h&&h.teacherInstructions||k,uploadSoundSupport:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:f}),R&&q.createElement(ne,null,R)),v&&q.createElement(ie,{label:"Item Stem"},q.createElement(Q,{markup:i.prompt,onChange:this.onPromptChanged,error:S,toolbarOpts:A,spellCheck:D,pluginProps:T(V([c,"optionalAccess",e=>e.inputConfiguration])),imageSupport:t,maxImageWidth:w,maxImageHeight:k,uploadSoundSupport:o,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:f}),S&&q.createElement(ne,null,S)),E&&q.createElement(q.Fragment,null,q.createElement(N,{variant:"h6"},"Define Background Image"),q.createElement(F,{imageUrl:i.imageUrl,onUpdateImageDimension:this.onUpdateImageDimension,onImageUpload:this.onImageUpload,imageDimensions:i.imageDimensions,insertImage:t&&t.add})))}}ae.propTypes={configuration:B.object,model:B.object.isRequired,imageSupport:B.shape({add:B.func,delete:B.func}),uploadSoundSupport:B.shape({add:B.func,delete:B.func}),onModelChanged:B.func.isRequired,onConfigurationChanged:B.func.isRequired};var oe={backgroundImageEnabled:!0,imageDimensions:{height:0,width:0},imageUrl:"",prompt:"",promptEnabled:!0,spellCheckEnabled:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},se={baseInputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1},textAlign:{disabled:!0},showParagraphs:{disabled:!1},separateParagraphs:{disabled:!0}},spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},backgroundImage:{settings:!0,label:"Background Image"},prompt:{settings:!0,label:"Prompt",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},settingsPanelDisabled:!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},language:{settings:!1,label:"Specify Language",enabled:!1},languageChoices:{label:"Language Choices",options:[]}};const le=a;function re(e){let t,i=e[0],n=1;for(;n<e.length;){const a=e[n],o=e[n+1];if(n+=2,("optionalAccess"===a||"optionalCall"===a)&&null==i)return;"access"===a||"optionalAccess"===a?(t=i,i=o(i)):"call"!==a&&"optionalCall"!==a||(i=o((...e)=>i.call(t,...e)),t=void 0)}return i}const de=s("hotspot:configure");class he extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={},t)=>{const i={...oe,...e};return re([t,"optionalAccess",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&!i.rubricEnabled&&(i.rubricEnabled=!0),i}}constructor(){super(),he.prototype.__init.call(this),he.prototype.__init2.call(this),he.prototype.__init3.call(this),he.prototype.__init4.call(this),this._root=null,this._configuration=se,re([this,"access",e=>e._configuration,"access",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1),this._model=he.createDefaultModel({},this._configuration),this.onModelChanged=this.onModelChanged.bind(this)}set model(e){this._model=he.createDefaultModel(e,this._configuration),this._render()}set configuration(e){const t={...se,...e};this._configuration=t;const{withRubric:i={}}=e||{};re([i,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1,this._model.rubricEnabled||(this._model.rubricEnabled=!0)),re([t,"optionalAccess",e=>e.language,"optionalAccess",e=>e.enabled])?re([t,"optionalAccess",e=>e.languageChoices,"optionalAccess",e=>e.options,"optionalAccess",e=>e.length])&&(this._model.language=re([t,"optionalAccess",e=>e.languageChoices,"access",e=>e.options,"access",e=>e[0],"access",e=>e.value])):t.language.settings&&this._model.language?(this._configuration.language.enabled=!0,this._configuration.languageChoices.options&&this._configuration.languageChoices.options.length||(this._configuration.languageChoices.options=[]),this._configuration.languageChoices.options.find(e=>e.value===this._model.language)||this._configuration.languageChoices.options.push({value:this._model.language,label:this._model.language})):delete this._model.language,this._render()}dispatchModelUpdated(e){const t=!!e;this.dispatchEvent(new c(this._model,t))}__init(){this.onModelChanged=(e,t)=>{this._model=e,this.dispatchModelUpdated(t),this._render()}}__init2(){this.onConfigurationChanged=e=>{this._configuration=e,this._render()}}__init3(){this.insertImage=e=>{this.dispatchEvent(new m(e))}}__init4(){this.onDeleteImage=(e,t)=>{this.dispatchEvent(new g(e,t))}}insertSound(e){this.dispatchEvent(new C(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}_render(){de("_render");let e=le.createElement(ae,{model:this._model,configuration:this._configuration,onModelChanged:this.onModelChanged,onConfigurationChanged:this.onConfigurationChanged,imageSupport:{add:this.insertImage,delete:this.onDeleteImage},uploadSoundSupport:{add:this.insertSound.bind(this),delete:this.onDeleteSound.bind(this)}});this._root||(this._root=E(this)),this._root.render(e)}disconnectedCallback(){this._root&&this._root.unmount()}}he.__initStatic();export{he as default};

package/module/controller.js

@@ -0,0 +1,77 @@
+var defaults = {
+  backgroundImageEnabled: true,
+  imageDimensions: { height: 0, width: 0 },
+  imageUrl: '',
+  prompt: '',
+  promptEnabled: true,
+  spellCheckEnabled: true,
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+};
+
+const normalize = (question) => ({ ...defaults, ...question });
+
+function model(question, session, env) {
+  const normalizedQuestion = normalize(question);
+  const { extraCSSRules, imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;
+
+  return new Promise((resolve) => {
+    const out = {
+      disabled: env.mode !== 'gather',
+      mode: env.mode,
+      imageDimensions,
+      imageUrl,
+      prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled,
+      language,
+      extraCSSRules,
+    };
+
+    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+        ? normalizedQuestion.teacherInstructions
+        : null;
+    } else {
+      out.teacherInstructions = null;
+    }
+
+    resolve(out);
+  });
+}
+
+const createDefaultModel = (model = {}) =>
+  new Promise((resolve) => {
+    resolve({
+      ...defaults,
+      ...model,
+    });
+  });
+
+function outcome(/*config, session*/) {
+  return new Promise((resolve) => {
+    resolve({
+      score: 0,
+      completed: 'n/a',
+      note: 'Requires manual scoring',
+    });
+  });
+}
+
+// remove all html tags except img, iframe and source tag for audio
+const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
+
+const validate = (model = {}, config = {}) => {
+  const errors = {};
+
+  ['teacherInstructions', 'prompt'].forEach((field) => {
+    if (config[field]?.required && !getContent(model[field])) {
+      errors[field] = 'This field is required.';
+    }
+  });
+
+  return errors;
+};
+
+export { createDefaultModel, model, normalize, outcome, validate };

package/module/demo.js

@@ -0,0 +1,39 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  prompt: 'This is the question prompt',
+  promptEnabled: true,
+  backgroundImageEnabled: true,
+  toolbarEditorPosition: 'bottom',
+  imageUrl: '',
+  imageDimensions: {
+    height: 0,
+    width: 0,
+  },
+  rubricEnabled: false,
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'drawing-response': '../..',
+  },
+  models: [model('1', 'drawing-response')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });