Repository: chanind/hanzi-writer (ts)

Issue:
How to stop outline from showing
Since the librabry has no api for checking if outline is shown. I use my own variable to control it.

I initial the instance like this:
~~~~~
this.hw = HanziWriter.create('character-target-div', this.strArray[this.j], {
      width: 280,
      height: 280,
      padding: 10,
      strokeColor: '#000000',
      outlineColor: '#ec7063',
      showHintAfterMisses: 1,
      highlightColor: '#0000FF',
      charDataLoader: function (char) {
        const loadedData = require(`hanzi-writer-data/${char}`);
        return loadedData;
      },
~~~~
So by default, outline  is shown. That's good. I offer a button to switch it off like this:
~~~~
toggleOutline() {
    if (this.hw) {
      this.isOutlineHidden = !this.isOutlineHidden;
      if (this.isOutlineHidden) {
        this.hw.hideOutline()
      } else {
        this.hw.showOutline();
      }

    }
  }
~~~~
However, after loading a new character, the outline is shown again. but I'd like to keep it off, so I did it like this:
~~~~
this.hw.setCharacter(this.strArray[this.j]);
        if (this.isOutlineHidden) {
          this.hw.hideOutline();
        }
        this.hw.quiz();
~~~~

It worked but the outline showed for around half second before it's hidden again. How to avoid that?
thx.

Pull request description:
Fix reset outline on set character
This PR fixes a bug where calling `setCharacter()` would reset the character opacity and outline opacity back to their original value when the writer instance was created.

fixes #101 

Patch:
diff --git a/README.md b/README.md
index e788966e..6faf2dea 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-[![CircleCI](https://img.shields.io/circleci/project/github/chanind/hanzi-writer.svg)](https://circleci.com/gh/chanind/hanzi-writer/tree/master)
-[![Codecov](https://img.shields.io/codecov/c/github/chanind/hanzi-writer.svg)](https://codecov.io/gh/chanind/hanzi-writer)
+[![CircleCI](https://img.shields.io/circleci/project/github/chanind/hanzi-writer/master.svg)](https://circleci.com/gh/chanind/hanzi-writer/tree/master)
+[![Codecov](https://img.shields.io/codecov/c/github/chanind/hanzi-writer/master.svg)](https://codecov.io/gh/chanind/hanzi-writer)
 [![npm](https://img.shields.io/npm/v/hanzi-writer.svg)](https://www.npmjs.com/package/hanzi-writer)
 
 https://chanind.github.io/hanzi-writer
diff --git a/src/HanziWriter.js b/src/HanziWriter.js
index e119b903..d7100ab6 100644
--- a/src/HanziWriter.js
+++ b/src/HanziWriter.js
@@ -80,6 +80,7 @@ function HanziWriter(...args) {
 // ------ public API ------ //
 
 HanziWriter.prototype.showCharacter = function(options = {}) {
+  this._options.showCharacter = true;
   return this._withData(() => (
     this._renderState.run(characterActions.showCharacter(
       'main',
@@ -89,6 +90,7 @@ HanziWriter.prototype.showCharacter = function(options = {}) {
   ));
 };
 HanziWriter.prototype.hideCharacter = function(options = {}) {
+  this._options.showCharacter = false;
   return this._withData(() => (
     this._renderState.run(characterActions.hideCharacter(
       'main',
@@ -135,6 +137,7 @@ HanziWriter.prototype.loopCharacterAnimation = function(options = {}) {
 };
 
 HanziWriter.prototype.showOutline = function(options = {}) {
+  this._options.showOutline = true;
   return this._withData(() => (
     this._renderState.run(characterActions.showCharacter(
       'outline',
@@ -145,6 +148,7 @@ HanziWriter.prototype.showOutline = function(options = {}) {
 };
 
 HanziWriter.prototype.hideOutline = function(options = {}) {
+  this._options.showOutline = false;
   return this._withData(() => (
     this._renderState.run(characterActions.hideCharacter(
       'outline',
@@ -200,9 +204,10 @@ HanziWriter.prototype.setCharacter = function(char) {
     const charDataParser = new CharDataParser();
     this._character = charDataParser.generateCharacter(char, pathStrings);
     this._positioner = new Positioner(this._options);
-    this._hanziWriterRenderer = new HanziWriterRenderer(this._character, this._positioner);
+    const hanziWriterRenderer = new HanziWriterRenderer(this._character, this._positioner);
+    this._hanziWriterRenderer = hanziWriterRenderer;
     this._renderState = new RenderState(this._character, this._options, (nextState) => {
-      this._hanziWriterRenderer.render(nextState);
+      hanziWriterRenderer.render(nextState);
     });
     this._hanziWriterRenderer.mount(this._canvas, this._renderState.state);
     this._hanziWriterRenderer.render(this._renderState.state);


Test patch:
diff --git a/src/__tests__/HanziWriter-test.js b/src/__tests__/HanziWriter-test.js
index d670b272..001977cc 100644
--- a/src/__tests__/HanziWriter-test.js
+++ b/src/__tests__/HanziWriter-test.js
@@ -149,6 +149,59 @@ describe('HanziWriter', () => {
       expect(document.querySelector('#target svg g').childNodes.length).toBe(3);
       expect(document.querySelector('#target svg defs *')).not.toBe(null);
     });
+
+    it('maintains the visibility of the character from the last character rendered', async () => {
+      document.body.innerHTML = '<div id="target"></div>';
+      const writer = new HanziWriter('target', '人', {
+        charDataLoader: (char) => timeout(1).then(() => (char === '人' ? ren : yi)),
+      });
+      await writer._withDataPromise;
+
+      writer.hideOutline();
+      writer.setCharacter('一');
+      await writer._withDataPromise;
+      expect(writer._renderState.state.character.main.opacity).toBe(1);
+      expect(writer._renderState.state.character.outline.opacity).toBe(0);
+    });
+
+    it('maintains the visibility of the outline from the last character rendered', async () => {
+      document.body.innerHTML = '<div id="target"></div>';
+      const writer = new HanziWriter('target', '人', {
+        charDataLoader: (char) => timeout(1).then(() => (char === '人' ? ren : yi)),
+      });
+      await writer._withDataPromise;
+
+      writer.hideCharacter();
+      writer.setCharacter('一');
+      await writer._withDataPromise;
+      expect(writer._renderState.state.character.main.opacity).toBe(0);
+      expect(writer._renderState.state.character.outline.opacity).toBe(1);
+    });
+
+    it('maintains colors from the last character rendered', async () => {
+      document.body.innerHTML = '<div id="target"></div>';
+      const writer = new HanziWriter('target', '人', {
+        charDataLoader: (char) => timeout(1).then(() => (char === '人' ? ren : yi)),
+      });
+      await writer._withDataPromise;
+
+      writer.updateColor('strokeColor', 'rgba(30, 30, 30, 0.8)');
+      writer.updateColor('outlineColor', 'rgba(10, 20, 30, 0.1)');
+      writer.setCharacter('一');
+      await writer._withDataPromise;
+      expect(writer._renderState.state.options.strokeColor).toEqual({
+        r: 30,
+        g: 30,
+        b: 30,
+        a: 0.8,
+      });
+      expect(writer._renderState.state.options.outlineColor).toEqual({
+        r: 10,
+        g: 20,
+        b: 30,
+        a: 0.1,
+      });
+    });
   });
 
   describe('animateCharacter', () => {