✨ nicer filemanager and layout

src/components/Map/MapRenderer.vue

@@ -0,0 +1,52 @@
+<template>
+  <canvas
+    ref="map" style="max-width: 100%;"
+    :width="props.width"
+    :height="props.height"
+  ></canvas>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue';
+import {MapContext, MapDrawable} from './helpers';
+
+const map = ref<HTMLCanvasElement>();
+
+const props = defineProps<{
+  width: number,
+  height: number,
+  offsetX: number,
+  offsetY: number,
+  dpi: number,
+  layers: MapDrawable[]
+}>()
+
+const emit = defineEmits<{
+  mousedown: [MouseEvent]
+}>()
+
+const mapContext = computed(() => {
+  return {
+    virtualHeight: props.height,
+    virtualWidth: props.width,
+    offsetX: props.offsetX,
+    offsetY: props.offsetY,
+    scale: props.dpi,
+    dpi: props.dpi,
+  }
+})
+
+function redraw() {
+  const ctx = {
+    ctx: map.value!.getContext('2d')!,
+    ...mapContext.value,
+  };
+  for (const layer of props.layers) {
+    layer.draw(ctx);
+  }
+}
+
+watch(() => mapContext.value, redraw);
+
+watch(() => props.layers, redraw);
+onMounted(redraw);
+</script>