Fix #3910 Text annotations - wrong text align in preview (#3954)

fix #3910
geosolutions-it · Jul 16, 2019 · c5225a6 · c5225a6
1 parent 7486013
commit c5225a6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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();
+    });
 });