Build the node graph frontend with placeholder graph info (#581)

* Build the node graph frontend

* Graph pan and zoom

* Graph's dot grid now pans/zooms also

* Interactive horisontal to vertical curves

* Data types and zooming on wires

* Icon definitions code beautification

* Add a visibility toggle

Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/components/widgets/labels/IconLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
+	<LayoutRow :class="['icon-label', iconSize, iconStyle]">
 		<component :is="icon" />
 	</LayoutRow>
 </template>
@@ -23,13 +23,19 @@
 		width: 24px;
 		height: 24px;
 	}
+
+	&.node-style {
+		border-radius: 2px;
+		background: var(--color-node-background);
+		fill: var(--color-node-icon);
+	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName, icons } from "@/utilities/icons";
+import { IconName, IconStyle, icons, iconComponents } from "@/utilities/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
@@ -37,16 +43,20 @@ export default defineComponent({
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
 		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		style: { type: String as PropType<IconStyle>, default: "" },
 	},
-	data() {
-		return {
-			icons,
-		};
+	computed: {
+		iconSize(): string {
+			return `size-${icons[this.icon].size}`;
+		},
+		iconStyle(): string {
+			if (!this.style) return "";
+			return `${this.style}-style`;
+		},
 	},
 	components: {
 		LayoutRow,
-		// Import the components of all the icons
-		...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
+		...iconComponents,
 	},
 });
 </script>