attempt to add components display

src/data/layers/Factory.vue

@@ -1,5 +1,22 @@
 <template>
-    <div ref="element" style="factory" />
+    <div>
+        <div>Info on components</div>
+        <div class="componentDisp">
+            <div class="componentSelect">
+                <div class="i">
+                    <h2>Components!</h2>
+                </div>
+            </div>
+            <div
+                ref="element"
+                class="factoryDisp"
+                @click="e => $emit('click', e)"
+                @mousemove="e => $emit('mouseMove', e)"
+                @mouseenter="e => $emit('mouseEnter', e)"
+                @mouseleave="e => $emit('mouseLeave', e)"
+            />
+        </div>
+    </div>
 </template>
 <script setup lang="ts">
 import type { Application } from "@pixi/app";
@@ -10,6 +27,13 @@ const element = shallowRef<HTMLElement | null>(null);
 const props = defineProps<{
     application: Application;
 }>();
+
+defineEmits<{
+    (e: "mouseMove", i: MouseEvent): void;
+    (e: "mouseEnter", i: MouseEvent): void;
+    (e: "mouseLeave", i: MouseEvent): void;
+    (e: "click", i: MouseEvent): void;
+}>();
 onMounted(() => {
     if (element.value !== null) {
         element.value?.append(props.application.view);
@@ -19,8 +43,17 @@ onMounted(() => {
 });
 </script>
 <style scoped>
-.factory {
-    width: 100%;
-    height: 100%;
+.componentDisp {
+    display: flex;
+    border: 2px solid grey;
+    align-items: stretch;
+}
+.componentSelect {
+    flex-grow: 1;
+    border: 2px solid green;
+}
+.factoryDisp {
+    flex-grow: 1;
+    border: 2px solid green;
 }
 </style>

src/data/layers/factory.tsx

@@ -44,7 +44,7 @@ function roundDownTo(num: number, multiple: number) {
     return Math.floor(num / multiple) * multiple;
 }
 function getRelativeCoords(e: MouseEvent) {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const rect = (e.target as HTMLElement).getBoundingClientRect();
     return {
         x: e.clientX - rect.left,
         y: e.clientY - rect.top
@@ -125,9 +125,9 @@ const factory = createLayer(id, () => {
                 body: () => (
                     <Factory
                         application={app}
-                        onMousemove={onMouseMove}
-                        onMouseenter={onMouseEnter}
-                        onMouseleave={onMouseLeave}
+                        onMouseMove={onMouseMove}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
                         onClick={onClick}
                     />
                 )