✨ nicer filemanager and layout

2024-11-09 17:10:24 +00:00
parent 08489ed67b
commit eb6abbb97d
16 changed files with 671 additions and 52 deletions
--- a/src/components/Map/MapControl.vue
+++ b/src/components/Map/MapControl.vue
@@ -0,0 +1,121 @@
+<template>
+  <Dropzone
+    v-slot="{isDragOver}"
+    class="map-control"
+    :class="{
+      'map-control--over': isDragOver
+    }"
+    @onDrop="onDrop"
+    @mousedown="onMouseDown"
+  >
+    <div ref="rendererWrapper">
+      <MapRenderer
+        ref="renderer"
+        :layers="layers"
+        :width="3840"
+        :height="2160"
+        :offsetX="offsetX"
+        :offsetY="offsetY"
+        :dpi="300"
+      />
+    </div>
+  </Dropzone>
+  <button @click="onLoad">load</button>
+</template>
+<script setup lang="ts">
+import {inject, onMounted, ref} from 'vue';
+import Dropzone from '../Dropzone/Dropzone.vue';
+import MapRenderer from './MapRenderer.vue';
+import {MountedFsSymbol} from '../../model/injectionSymbols';
+import {MapDrawable, MapImage} from './helpers';
+import {VirtualFile} from '../../model/FileSystem/types';
+
+const fs = inject(MountedFsSymbol)!;
+const layers = ref<MapDrawable[]>([])
+const renderer = ref<MapRenderer>();
+const rendererWrapper = ref<HTMLDivElement>();
+const scale = ref(1);
+const offsetX = ref(0);
+const offsetY = ref(0);
+
+async function onDrop(file: VirtualFile) {
+  const data = await fs.download(file);
+  console.log('file', file, data);
+}
+
+const mode = ref<'drag' | 'draw'>('drag');
+
+async function onLoad() {
+  const newLayers = [];
+  const map: VirtualFile = {
+    "type": "file",
+    "source": "Maps",
+    "name": "G_AbandonedMineEntrance_EscapedDragon_Night.jpg",
+    "mimeType": "image/jpeg",
+    "path": [
+        "Abandoned Mine Entrance [33x21] - $5 Rewards",
+        "Gridded",
+        "G_AbandonedMineEntrance_EscapedDragon_Night.jpg"
+    ],
+    "map": {
+        "width": 33,
+        "height": 21,
+        "valid": true,
+        "animated": false
+    }
+  }
+
+  const mapFile = await fs.download(map);
+  const mapLayer = await MapImage.fromImageFile(mapFile, {
+    gameDimensions: {w: 33, h: 21},
+  });
+  newLayers.push(mapLayer);
+  layers.value = newLayers;
+}
+
+
+const dragging = ref(false);
+
+function onMouseMove(event: MouseEvent) {
+  const mouseScale = rendererWrapper.value!.clientWidth / 3840;
+  console.log(renderer.value)
+  if (dragging.value) {
+    offsetX.value += event.movementX / mouseScale;
+    offsetY.value += event.movementY / mouseScale;
+  }
+}
+
+function onMouseUp(event: MouseEvent) {
+  console.log('mouse up', event);
+  dragging.value = false;
+  window.removeEventListener('mousemove', onMouseMove);
+  window.removeEventListener('mouseup', onMouseUp);
+}
+
+function onMouseDown(event: MouseEvent) {
+  console.log('mouse down', event);
+  dragging.value = true;
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+
+onMounted(() => {
+  onLoad();
+});
+
+</script>
+<style lang="css">
+.map-control {
+  display: inline-block;
+  border: 1px solid black;
+  background: white;
+  position: relative;
+}
+.map-control--over:before {
+  content: 'Drop here';
+  position: absolute;
+  inset: 10px;
+  border: 3px solid black;
+}
+
+</style>