From c5225a62231ccb4d07fdd28453d3d55f5b7c43c5 Mon Sep 17 00:00:00 2001
From: kaso <kasongoyo@gmail.com>
Date: Tue, 16 Jul 2019 10:50:45 +0300
Subject: [PATCH] Fix #3910 Text annotations - wrong text align in preview
 (#3954)

fix #3910
---
 web/client/components/style/StyleCanvas.jsx   | 20 +++++++++++++++----
 .../style/__tests__/StyleCanvas-test.jsx      |  7 +++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/client/components/style/StyleCanvas.jsx b/web/client/components/style/StyleCanvas.jsx
index ba05ab7c1a..bfe0acff3a 100644
--- a/web/client/components/style/StyleCanvas.jsx
+++ b/web/client/components/style/StyleCanvas.jsx
@@ -133,10 +133,22 @@ class StyleCanvas extends React.Component {
 
     }
     paintText = (ctx) => {
-        ctx.font = this.props.shapeStyle.font || '14px Arial';
-        ctx.textAlign = this.props.shapeStyle.textAlign || 'center';
-        ctx.strokeText(this.props.shapeStyle.label || "New", this.props.width / 2, this.props.height / 2);
-        ctx.fillText(this.props.shapeStyle.label || "New", this.props.width / 2, this.props.height / 2);
+        const {width, height} = this.props;
+        const {textAlign = 'center', label, font = '14px Arial'} = this.props.shapeStyle;
+        ctx.textAlign = textAlign;
+        ctx.font = font;
+        if (textAlign === 'start') {
+            ctx.strokeText(label || "New", width / 2.5, height / 2);
+            ctx.fillText(label || "New", width / 2.5, height / 2);
+            return;
+        }
+        if (textAlign === 'end') {
+            ctx.strokeText(label || "New", width / 1.5, height / 2);
+            ctx.fillText(label || "New", width / 1.5, height / 2);
+            return;
+        }
+        ctx.strokeText(label || "New", width / 2, height / 2);
+        ctx.fillText(label || "New", width / 2, height / 2);
     };
     paintPolygon = (ctx) => {
         ctx.transform(1, 0, 0, 1, -27.5, 0);
diff --git a/web/client/components/style/__tests__/StyleCanvas-test.jsx b/web/client/components/style/__tests__/StyleCanvas-test.jsx
index 4130bea003..91c8e385bc 100644
--- a/web/client/components/style/__tests__/StyleCanvas-test.jsx
+++ b/web/client/components/style/__tests__/StyleCanvas-test.jsx
@@ -69,4 +69,11 @@ describe("Test the StyleCanvas style component", () => {
         const cmp = ReactDOM.render(<StyleCanvas shapeStyle={style} geomType="Point"/>, document.getElementById("container"));
         expect(cmp).toExist();
     });
+    it('test component drawing text', () => {
+        let style = {...{width: 100, height: 100}};
+        ReactDOM.render(<StyleCanvas shapeStyle={style} geomType="Text"/>, document.getElementById("container"));
+        const container = document.getElementById('container');
+        const canvas = container.querySelector('canvas');
+        expect(canvas).toExist();
+    });
 });