implement save and load for a basic string in Creator, see #170

client/creator/model/views/SpeechViewComponent.js

@@ -2,8 +2,32 @@ import Component from '../Component.js';
 import ViewComponent from './ViewComponent.js';
 
 export default class SpeechViewComponent extends ViewComponent {
-  constructor( name, modelComponents, controlFunctionString, options ) {
+
+  /**
+   * @param name - Name for the component
+   * @param modelComponents - list of model components that this view depends on.
+   * @param controlFunctionString - The function that will be called to update the view.
+   * @param basicSpeechString - A basic string to speak, when a control function is not used.
+   * @param options
+   */
+  constructor( name, modelComponents, controlFunctionString, basicSpeechString, options ) {
     super( name, modelComponents, controlFunctionString, options );
+
+    this.basicSpeechString = basicSpeechString || '';
+  }
+
+  save() {
+    return {
+      ...super.save(),
+      basicSpeechString: this.basicSpeechString
+    };
+  }
+
+  static getStateSchema() {
+    return {
+      ...ViewComponent.getStateSchema(),
+      basicSpeechString: ''
+    };
   }
 
   /**
@@ -15,6 +39,7 @@ export default class SpeechViewComponent extends ViewComponent {
       stateObject.name,
       dependencies,
       stateObject.controlFunctionString,
+      stateObject.basicSpeechString,
       {
         lazyLink: stateObject.lazyLink,
         referenceComponentNames: stateObject.referenceComponentNames

client/creator/react/CreateSpeechViewForm.js

@@ -20,20 +20,37 @@ const SPEECH_FUNCTIONS = [
 
 export default function CreateSpeechViewForm( props ) {
 
+  const getFormData = providedData => {
+    props.getGeneralFormData( providedData );
+    props.getSpeechFormData( providedData );
+  };
+
   const [ formData, handleChange ] = useEditableForm(
     props.activeEdit,
     props.isFormValid,
     componentData => {
       const invalidReasons = [];
+
+      const controlFunctionLength = componentData.controlFunctionString.length;
+      const basicSpeechLength = componentData.basicSpeechString.length;
+
       if ( componentData.modelComponentNames.length === 0 ) {
         invalidReasons.push( 'No model components selected.' );
       }
-      if ( componentData.controlFunctionString.length === 0 ) {
-        invalidReasons.push( 'Control function has no content.' );
+      if ( controlFunctionLength === 0 && basicSpeechLength === 0 ) {
+        invalidReasons.push( 'Must have a control function or basic speech string.' );
+      }
+      if ( controlFunctionLength > 0 ) {
+
+        // If there is a control function, it must include the speak() call somewhere to produce speech.
+        // Note that a speak() in comments will still pass this check.
+        if ( !componentData.controlFunctionString.includes( 'speak(' ) ) {
+          invalidReasons.push( 'Control function must include a speak() call to produce speech.' );
+        }
       }
       return invalidReasons;
     },
-    props.getGeneralFormData,
+    getFormData,
     SpeechViewComponent
   );
 
@@ -48,10 +65,9 @@ export default function CreateSpeechViewForm( props ) {
           placeholder={'Enter a string to speak.'}
           id={'basic-string'}
           label={'Basic Speech'}
-
-          // value={formData.controlFunctionString}
+          value={formData.basicSpeechString}
           onChange={event => {
-            // handleChange( { controlFunctionString: event.target.value } );
+            handleChange( { basicSpeechString: event.target.value } );
           }}
         />
         <p>To make the string change or speak model component values, use the control function instead.</p>

client/creator/react/CreateViewComponentForm.js

@@ -87,13 +87,15 @@ export default function CreateViewComponentForm( props ) {
   // refs to form data
   const generalDataRef = useRef( {} );
   const soundsDataRef = useRef( {} );
+  const speechDataRef = useRef( {} );
   const imagesDataRef = useRef( {} );
   const shapesDataRef = useRef( {} );
   const backgroundDataRef = useRef( {} );
 
   // to be called every change so that we can use data to create components
   const getDataForGeneral = data => {generalDataRef.current = data;};
   const getDataForSounds = data => {soundsDataRef.current = data;};
+  const getDataForSpeech = data => {speechDataRef.current = data;};
   const getDataForImages = data => {imagesDataRef.current = data;};
   const getDataForShapes = data => {shapesDataRef.current = data;};
   const getDataForBackground = data => {backgroundDataRef.current = data;};
@@ -176,6 +178,7 @@ export default function CreateViewComponentForm( props ) {
       }
       else if ( selectedTab === 'speech' ) {
         editingComponent.lazyLink = lazyLink;
+        editingComponent.basicSpeechString = speechDataRef.current.basicSpeechString;
       }
       else if ( selectedTab === 'images' ) {
         editingComponent.imageFileName = imagesDataRef.current.imageFileName;
@@ -210,7 +213,9 @@ export default function CreateViewComponentForm( props ) {
         activeProgram.viewContainer.addSoundView( newComponent );
       }
       else if ( selectedTab === 'speech' ) {
-        newComponent = new SpeechViewComponent( componentName, selectedModelComponents, controlFunctionString, {
+        const basicSpeechString = speechDataRef.current.basicSpeechString;
+        debugger;
+        newComponent = new SpeechViewComponent( componentName, selectedModelComponents, controlFunctionString, basicSpeechString, {
           lazyLink: lazyLink
         } );
         activeProgram.viewContainer.addSpeechView( newComponent );
@@ -350,6 +355,7 @@ export default function CreateViewComponentForm( props ) {
           <CreateSpeechViewForm
             allModelComponents={usableModelComponents}
             isFormValid={getSpeechFormInvalidReasons}
+            getSpeechFormData={getDataForSpeech}
             getGeneralFormData={getDataForGeneral}
             activeEdit={activeEdit}
           >