✨ new maps

src/components/ScreenManager/RemoteScreen.vue

@@ -21,6 +21,8 @@
     <canvas
       ref="canvas"
       style="max-width: 100%;"
+      :width="imageSink?.resolution?.width / 4"
+      :height="imageSink?.resolution?.height / 4"
       :style="{
         // transform: `scale(${scale / 100}) translate(${(x)}%, ${(y)}%)`,
       }"
@@ -34,6 +36,7 @@ import {MountedFsSymbol} from '../../model/injectionSymbols';
 import {VirtualFile} from '../../model/FileSystem/types';
 import {useLoading} from '../../helpers/withLoading';
 import {useMouseDragging} from '../../helpers/mouseDragging';
+import {MapLayerDrawable} from '../Map/object';
 
 const props = defineProps<{
   screen: RemoteDevice;
@@ -63,6 +66,12 @@ watch(() => [x.value, y.value, scale.value], () => {
   });
 })
 
+watch(() => imageSink.value?.display, ()=> {
+  if (imageSink.value?.display) {
+    imageSink.value?.display.connectTarget(canvas.value!);
+  }
+});
+
 
 async function drawImage(blob: Blob) {
   if (blob.type.startsWith('image/')) {
@@ -91,14 +100,20 @@ async function drawImage(blob: Blob) {
   }
 }
 
-async function loadFile(meta: VirtualFile, file: Blob) {
-  await withLoading(async () => {
-    await Promise.all([
-      imageSink.value?.transferFile(meta, file),
-      drawImage(file),
-    ])
-    await imageSink.value?.show(meta);
-  })
+async function loadFile(meta: VirtualFile, file: File) {
+  if (imageSink.value?.display) {
+    const map = new MapLayerDrawable(file, meta.map?.width);
+    await map.preloadFile();
+    imageSink.value.display.mapLayer = map
+    console.log(imageSink.value?.display);
+  }
+  // await withLoading(async () => {
+  //   await Promise.all([
+  //     imageSink.value?.transferFile(meta, file),
+  //     drawImage(file),
+  //   ])
+  //   await imageSink.value?.show(meta);
+  // })
 }
 
 async function onDrop(event: DragEvent) {