From fec7d7cc91c14ba0c875f47463739e7d6aad72e2 Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Wed, 31 Jul 2019 20:03:27 +0300
Subject: [PATCH] ic labels

---
 src/modules/core/components/Canvas.tsx                |  8 +++++---
 src/modules/simulationRenderer/data/textSettings.ts   |  5 +++++
 src/modules/simulationRenderer/helpers/renderGate.ts  | 11 +++++++++++
 .../simulationRenderer/helpers/renderSimulation.ts    |  3 +++
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/simulationRenderer/data/textSettings.ts

diff --git a/src/modules/core/components/Canvas.tsx b/src/modules/core/components/Canvas.tsx
index c9d07e9..cc76773 100644
--- a/src/modules/core/components/Canvas.tsx
+++ b/src/modules/core/components/Canvas.tsx
@@ -3,9 +3,6 @@ import FluidCanvas from './FluidCanvas'
 import loop from 'mainloop.js'
 import { renderSimulation } from '../../simulationRenderer/helpers/renderSimulation'
 import { getRendererSafely } from '../../logic-gates/helpers/getRendererSafely'
-import { Subscription } from 'rxjs'
-import { rendererSubject } from '../subjects/rendererSubject'
-import { filter } from 'rxjs/operators'
 
 class Canvas extends Component {
     private canvasRef: RefObject<HTMLCanvasElement> = createRef()
@@ -24,6 +21,11 @@ class Canvas extends Component {
     public componentDidMount() {
         if (this.canvasRef.current) {
             this.renderingContext = this.canvasRef.current.getContext('2d')
+
+            if (this.renderingContext) {
+                this.renderingContext.textAlign = 'center'
+            }
+
             getRendererSafely().updateWheelListener(this.canvasRef)
         }
 
diff --git a/src/modules/simulationRenderer/data/textSettings.ts b/src/modules/simulationRenderer/data/textSettings.ts
new file mode 100644
index 0000000..89f74ea
--- /dev/null
+++ b/src/modules/simulationRenderer/data/textSettings.ts
@@ -0,0 +1,5 @@
+export const textSettings = {
+    font: '30px Roboto',
+    offset: 30,
+    fill: `rgba(256,256,256,0.75)`
+}
diff --git a/src/modules/simulationRenderer/helpers/renderGate.ts b/src/modules/simulationRenderer/helpers/renderGate.ts
index 811b541..aa91ead 100644
--- a/src/modules/simulationRenderer/helpers/renderGate.ts
+++ b/src/modules/simulationRenderer/helpers/renderGate.ts
@@ -7,6 +7,7 @@ import { roundImage } from '../../../common/canvas/helpers/drawRoundedImage'
 import { ImageStore } from '../stores/imageStore'
 import { gatesInSelection } from './gatesInSelection'
 import { idIsSelected } from './idIsSelected'
+import { textSettings } from '../data/textSettings'
 
 export const renderGate = (
     ctx: CanvasRenderingContext2D,
@@ -58,5 +59,15 @@ export const renderGate = (
     }
 
     ctx.stroke()
+
+    if (gate.template.tags.includes('integrated')) {
+        ctx.fillStyle = textSettings.fill
+        ctx.fillText(
+            gate.template.metadata.name,
+            relativeTransform.center[0],
+            relativeTransform.maxY + textSettings.offset
+        )
+    }
+
     ctx.restore()
 }
diff --git a/src/modules/simulationRenderer/helpers/renderSimulation.ts b/src/modules/simulationRenderer/helpers/renderSimulation.ts
index 379e570..e67fd57 100644
--- a/src/modules/simulationRenderer/helpers/renderSimulation.ts
+++ b/src/modules/simulationRenderer/helpers/renderSimulation.ts
@@ -6,6 +6,7 @@ import { renderClickedPins } from './renderClickedPins'
 import { renderWires } from './renderWires'
 import { renderSelectedArea } from './renderSelectedArea'
 import { currentContext } from '../subjects'
+import { textSettings } from '../data/textSettings'
 
 export const renderSimulation = (
     ctx: CanvasRenderingContext2D,
@@ -27,6 +28,8 @@ export const renderSimulation = (
         renderWires(ctx, renderer, wire)
     }
 
+    ctx.font = textSettings.font
+    ctx.textAlign = 'center'
     for (const gate of renderer.simulation.gates) {
         renderGate(ctx, renderer, gate)
     }