ic labels

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)
         }
 

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)`
+}

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()
 }

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)
     }