From bea4d4f2968c68f5dcbee15fa759614ef970a01f Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Mon, 21 Oct 2019 06:05:33 -0700
Subject: [PATCH] Update drawing.ts

---
 src/app/cartography/widgets/drawing.ts | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/app/cartography/widgets/drawing.ts b/src/app/cartography/widgets/drawing.ts
index 0b8808ab..a3304b12 100644
--- a/src/app/cartography/widgets/drawing.ts
+++ b/src/app/cartography/widgets/drawing.ts
@@ -12,6 +12,7 @@ import { MapDrawing } from '../models/map/map-drawing';
 import { SelectionManager } from '../managers/selection-manager';
 import { LineElement } from '../models/drawings/line-element';
 import { EllipseElement } from '../models/drawings/ellipse-element';
+import { RectElement } from '../models/drawings/rect-element';
 
 @Injectable()
 export class DrawingWidget implements Widget {
@@ -50,6 +51,38 @@ export class DrawingWidget implements Widget {
       widget.draw(drawing_body_merge);
     });
 
+    drawing_body_merge.select('.layer_label_wrapper').remove();
+    drawing_body_merge
+      .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
+      .append<SVGRectElement>('rect')
+      .attr('class', 'layer_label_wrapper')
+      .attr('width', '26')
+      .attr('height', '26')
+      .attr('x', n => n.element ? n.element.width/2 - 13 : 0)
+      .attr('y', n => n.element ? n.element.height/2 - 13 : 0)
+      .attr('fill', 'red');
+
+    drawing_body_merge.select('.layer_label').remove();
+    drawing_body_merge
+      .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
+      .append<SVGTextElement>('text')
+      .attr('class', 'layer_label')
+      .text((elem) => elem.z)
+      .attr('x', function(n) {
+        if(n.z >= 100 ) return n.element ? n.element.width/2 - 13 : 0
+        else if(n.z >= 10 ) return n.element ? n.element.width/2 - 9 : 0
+        else return n.element.width/2 - 5
+      })
+      .attr('y', n => n.element ? n.element.height/2 + 5 : 0)
+      .attr('style', () => {
+        const styles: string[] = [];
+        styles.push(`font-family: "Noto Sans"`);
+        styles.push(`font-size: 11pt`);
+        styles.push(`font-weight: bold`);
+        return styles.join('; ');
+      })
+      .attr('fill', `#ffffff`);
+
     drawing_body_merge
       .select<SVGAElement>('line.top')
       .attr('stroke', 'transparent')