🚨 cleanup

src/modules/controls/ControlApp.vue

@@ -14,7 +14,6 @@
       <input type="number" v-model="imageWidth" />
       <label>Screen Diameter</label>
       <input type="number" v-model="screenDiameterInch" />
-      <div>DPI: {{ screenDPI }}</div>
       <label>Flip <input type="checkbox" v-model="flipped"></label>
       <label>Position (X/Y)</label>
       <input type="range" min="0" max="100" v-model="positionX" />
@@ -54,7 +53,7 @@ watch(() => screenDiameterInch.value, (value) => {
     })
 });
 
-watch(() => [positionX.value, positionY.value, flipped.value], (value) => {
+watch(() => [positionX.value, positionY.value, flipped.value], () => {
     sender?.sendMessage({
       type: 'changePosition',
       x: positionX.value,
@@ -79,6 +78,9 @@ function openMapWindow() {
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 function onStreamImage() {
+  if (!openedFile.value?.path) {
+    return;
+  }
   const image = new Image()
   image.onload = async () => {
     const canvas = document.createElement('canvas');

src/modules/controls/OldApp.vue

@@ -1,132 +0,0 @@
-
-<template>
-  <div>
-    <fieldset>
-      <legend>Image settings</legend>
-      <label>Width</label>
-      <input type="number" v-model="imageWidth" />
-      <label>Screen Diameter</label>
-      <input type="number" v-model="screenDiameterInch" />
-      <div>DPI: {{ screenDPI }}</div>
-      <div style="max-width: 32px; height: 32px; overflow: hidden;">
-        <google-cast-launcher style="max-width: 2rem" ></google-cast-launcher>
-      </div>
-    </fieldset>
-    <FileManager @openFile="openFile" />
-  </div>
-</template>
-<script setup lang="ts">
-import FileManager from '../../components/FileManager/FileManager.vue';
-import type { FileWithMeta } from '../../model/FileManager';
-import {ref, computed, inject, watch} from 'vue';
-import {CastTypeSymbol, CastReceiverSymbol, CastSenderSymbol} from '../../model/injectionSymbols';
-
-const openedFile = ref<FileWithMeta>()
-const castType = inject(CastTypeSymbol);
-const receiver = inject(CastReceiverSymbol);
-const sender = inject(CastSenderSymbol);
-const canvas = ref<HTMLCanvasElement>();
-
-const imageWidth = ref(20);
-const screenDiameterInch = ref(65);
-
-const screenDPI = computed(() => {
-  const diaPx = Math.sqrt(window.screen.width**2 + window.screen.height ** 2);
-  return diaPx / screenDiameterInch.value;
-})
-
-watch(() => imageWidth.value, (value) => {
-  if (sender) {
-    sender.sendMessage({
-      type: 'imageWidth',
-      imageWidth: value
-    })
-  }
-});
-
-function openFile(file: FileWithMeta) {
-  console.log('open file', file)
-  openedFile.value = file
-  imageWidth.value = file.width ?? 20;
-  if (sender) {
-    sender.sendMessage({
-      type: 'loadMap',
-      file
-    })
-
-    const img = new Image();
-    
-    img.onload = () => {
-      canvas.value!.width = img.naturalWidth;
-      canvas.value!.height = img.naturalHeight;
-      const ctx = canvas.value!.getContext('2d')!;
-      ctx.drawImage(img, 0, 0);
-      const msgs = [];
-      const chunkWidth = 32;
-      const chunkHeight = 32;
-
-      for (let x = 0; x< 1920; x += chunkWidth) {
-        for (let y = 0; y < 1080; y += chunkHeight) {
-          const data = ctx.getImageData(x, y, chunkWidth, chunkHeight);
-          const msg = {
-            type: 'imageData',
-            imageData: {
-              data: [...data.data],
-              width: data.width,
-              height: data.height,
-              x,
-              y,
-            },
-          };
-          msgs.push(msg);
-          sender.sendMessage(msg);
-        }
-      }
-      ctx.clearRect(0, 0, img.naturalWidth, img.naturalHeight);
-      for (const msg of msgs) {
-        loadImageData(msg);
-      }
-    };
-    img.src = file.path;
-  }
-}
-
-function loadImageData(detail) {
-  const imageData = new ImageData(
-    new Uint8ClampedArray(detail.imageData.data),
-    detail.imageData.width,
-    detail.imageData.height
-  )
-  const ctx = canvas.value!.getContext('2d')!;
-  ctx.putImageData(imageData, detail.imageData.x, detail.imageData.y);
-}
-
-if (receiver) {
-  receiver.addEventListener('message', ({detail}) => {
-      if (detail.type === 'loadMap') {
-        openFile(detail.file);
-      }
-      if (detail.type === 'imageWidth') {
-        imageWidth.value = detail.imageWidth;
-      }
-      if (detail.type === 'imageData') {
-        loadImageData(detail);
-      }
-  });
-}
-
-</script>
-<style>
-.aside {
-  position: fixed;
-  overflow: auto;
-  width: 300px;
-  height: 100vh;
-  overflow: auto;
-  right:0;
-  background: rgba(0,0,0,0.8);
-  border-left: #555 2px solid;
-  backdrop-filter: blur(5px);
-}
-
-</style>

src/modules/map/MapScene.vue

@@ -22,7 +22,6 @@ import { computed, defineProps, inject, ref, watch } from 'vue';
 import {ReceiverSymbol} from '../../model/injectionSymbols';
 
 const video = ref<HTMLVideoElement>();
-const image = ref<HTMLImageElement>();
 const canvas = ref<HTMLCanvasElement>();
 
 const props = defineProps<{
@@ -37,12 +36,7 @@ const isImage = computed(() => props.src?.endsWith('.png') || props.src?.endsWit
 const isVideo = computed(() => props.src?.endsWith('.mp4') || props.src?.endsWith('.webm'));
 
 const mediaDimensions = ref({width: 0, height: 0});
-const virtualMediaDimensions = ref({width: 0, height: 0});
 
-const windowSize = {
-  width: window.innerWidth,
-  height: window.innerHeight,
-};
 
 watch(() => props.src, (src) => {
   if (isImage.value) {
@@ -113,14 +107,6 @@ const dynamicStyle = computed(() => {
 });
 
 
-function onImageLoaded(event: Event) {
-  console.log('image loaded', event.target);
-  mediaDimensions.value = {
-    width: image.value!.naturalWidth,
-    height: image.value!.naturalHeight,
-  };
-}
-
 function onVideoLoaded(event: Event) {
   console.log('video loaded', event.target);
   mediaDimensions.value = {
@@ -129,12 +115,6 @@ function onVideoLoaded(event: Event) {
   };
 }
 
-function updateImageSize() {
-  if (image.value) {
-    image.value.width = props.width;
-  }
-}
-
 </script>
 <style>
 .map-scene {