fix(Editor): avoid sending twice setTheme + keep theme on language change

steven.roulleau · steven.roulleau · commit 46e9dd71b029 · 2020-09-09T13:55:45.000+02:00
diff --git a/examples/dev/index.html b/examples/dev/index.html
@@ -214,7 +214,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/non-version-specific/change_language.html b/examples/non-version-specific/change_language.html
@@ -29,7 +29,6 @@
         const configuration = editorElement.editor.configuration;
         //The path to the language depend of the version of API you are using.
         configuration.recognitionParams.iink.lang = e.target.value;
-        editorElement.editor.configuration = configuration;
       });
 
       const configuration = {
diff --git a/examples/v4/customize_style.html b/examples/v4/customize_style.html
@@ -267,7 +267,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   fontsElement.addEventListener('change', (e) => {
diff --git a/examples/v4/local_storage_text.html b/examples/v4/local_storage_text.html
@@ -87,7 +87,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/rest/rest_raw_content_iink.html b/examples/v4/rest/rest_raw_content_iink.html
@@ -88,7 +88,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/rest/rest_text_iink.html b/examples/v4/rest/rest_text_iink.html
@@ -79,7 +79,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/websocket_text_iink.html b/examples/v4/websocket_text_iink.html
@@ -63,7 +63,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/websocket_text_iink_decoration.html b/examples/v4/websocket_text_iink_decoration.html
@@ -63,7 +63,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/websocket_text_iink_no_guides.html b/examples/v4/websocket_text_iink_no_guides.html
@@ -63,7 +63,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {
diff --git a/examples/v4/websocket_text_iink_search.html b/examples/v4/websocket_text_iink_search.html
@@ -133,7 +133,6 @@
     const configuration = editorElement.editor.configuration;
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
-    editorElement.editor.configuration = configuration;
   });
 
   convertElement.addEventListener('click', () => {
diff --git a/src/Editor.js b/src/Editor.js
@@ -375,12 +375,28 @@ export class Editor {
   set configuration (configuration) {
     this.loader.style.display = 'initial'
     this.error.style.display = 'none'
+
+    /**
+     * Update function call when some configuration property is updated
+     * @param {string} value
+     */
+    const update = (value) => {
+      const defaultLang = !Object.keys(Constants.Languages).includes(value)
+      const armenian = value === 'hy_AM'
+      this.theme['.text']['font-family'] = defaultLang || armenian ? Constants.Languages.default : Constants.Languages[value]
+      this.behavior = this.behaviors.getBehaviorFromConfiguration(this.behaviors, this.innerConfiguration)
+    }
+
+    const watcher = {
+      update,
+      prop: 'lang'
+    }
+
     /**
      * @private
      * @type {Configuration}
      */
-    this.innerConfiguration = DefaultConfiguration.overrideDefaultConfiguration(configuration)
-    this.setThemeForFont(this.innerConfiguration.recognitionParams.iink.lang)
+    this.innerConfiguration = DefaultConfiguration.overrideDefaultConfiguration(configuration, watcher)
     this.behavior = this.behaviors.getBehaviorFromConfiguration(this.behaviors, this.innerConfiguration)
   }
 
@@ -924,23 +940,6 @@ export class Editor {
     return launchResize(this, this.model)
   }
 
-  /**
-   * Set the theme (font family, font size and line height) depending on the language
-   * @param lang
-   */
-  setThemeForFont (lang) {
-    const defaultLang = !Object.keys(Constants.Languages).includes(lang)
-    const armenian = lang === 'hy_AM'
-    const fontFamily = defaultLang || armenian ? Constants.Languages.default : Constants.Languages[lang]
-    const lineHeight = defaultLang || armenian ? '1.2' : '1.8'
-    this.theme = {
-      '.text': {
-        'font-family': fontFamily,
-        'line-height': lineHeight
-      }
-    }
-  }
-
   /**
    * Detach event listeners from the DOM element created at editor creation.
    */
diff --git a/src/configuration/DefaultConfiguration.js b/src/configuration/DefaultConfiguration.js
@@ -119,12 +119,15 @@ const defaultConfiguration = {
   }
 }
 
+const isProxy = Symbol('isProxy')
+
 /**
  * Generate parameters
  * @param {Configuration} configuration Configuration to be used
+ * @param {Object} watcher: { update: function, prop: string} function to call when 'prop' is updated
  * @return {Configuration} Overridden configuration
  */
-export function overrideDefaultConfiguration (configuration) {
+export function overrideDefaultConfiguration (configuration, watcher) {
   const confRef = configuration
   let currentConfiguration
   if (confRef && confRef.recognitionParams.server && confRef.recognitionParams.server.useWindowLocation) {
@@ -135,7 +138,26 @@ export function overrideDefaultConfiguration (configuration) {
     currentConfiguration = merge({}, defaultConfiguration, configuration === undefined ? {} : configuration)
   }
   logger.debug('Override default configuration', currentConfiguration)
-  return currentConfiguration
+
+  const handler = {
+    get: function (target, key) {
+      // Nested objects are Proxy too
+      if (key !== isProxy && typeof target[key] === 'object' && target[key] !== null) {
+        return new Proxy(target[key], handler)
+      } else {
+        return target[key]
+      }
+    },
+    set: function (obj, prop, value) {
+      if (prop === watcher.prop) {
+        watcher.update(value)
+      }
+      obj[prop] = value
+      return true
+    }
+  }
+
+  return new Proxy(currentConfiguration, handler)
 }
 
 export default defaultConfiguration
diff --git a/src/recognizer/websocket/WsBuilder.js b/src/recognizer/websocket/WsBuilder.js
@@ -7,10 +7,7 @@ import {
   buildRestoreIInkSessionInput,
   buildNewContentPart,
   buildOpenContentPart,
-  buildConfiguration,
-  buildSetTheme,
-  buildSetPenStyle,
-  buildSetPenStyleClasses
+  buildConfiguration
 } from './iinkWsRecognizer'
 
 /**
@@ -82,9 +79,6 @@ export function buildWebSocketCallback (recognizerContext) {
               recognizerContextRef.currentPartId = message.data.partId
             }
             recognizerContextRef.initialized = true
-            NetworkWSInterface.send(recognizerContext, buildSetTheme(recognizerContext.editor.theme))
-            NetworkWSInterface.send(recognizerContext, buildSetPenStyle(recognizerContext.editor.penStyle))
-            NetworkWSInterface.send(recognizerContext, buildSetPenStyleClasses(recognizerContext.editor.penStyleClasses))
             if (recognitionContext.partChange) {
               recognitionContext.partChange.resolve([undefined, message.data])
             } else {
diff --git a/test/mocha/partial/00-configuration/DefaultConfiguration.spec.babel.js b/test/mocha/partial/00-configuration/DefaultConfiguration.spec.babel.js
@@ -5,7 +5,13 @@ import * as DefaultConfiguration from '../../../../src/configuration/DefaultConf
 
 configurations.forEach((configuration) => {
   describe(`Check configuration for API ${configuration.apiVersion} ${configuration.type} ${configuration.protocol}`, () => {
-    const currentConfiguration = DefaultConfiguration.overrideDefaultConfiguration({ recognitionParams: configuration })
+    const watcher = {
+      update: (value) => {
+        assert.equal('ja_JP', value)
+      },
+      prop: 'lang'
+    }
+    const currentConfiguration = DefaultConfiguration.overrideDefaultConfiguration({ recognitionParams: configuration }, watcher)
 
     it('type', () => {
       assert.isDefined(currentConfiguration.recognitionParams.type, 'type should be defined')
@@ -25,5 +31,9 @@ configurations.forEach((configuration) => {
     it('server', () => {
       assert.isDefined(currentConfiguration.recognitionParams.server, 'recognitionParams.server should keep its default value')
     })
+
+    it('should notify language change', () => {
+      currentConfiguration.recognitionParams.iink.lang = 'ja_JP'
+    })
   })
 })
