updates, better layout, communication fixes, getting ready for search

openfantasymap · Jun 28, 2022 · a7652fb · a7652fb
1 parent 5bcdeb8
commit a7652fb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/modules/map-canvas.js b/modules/map-canvas.js
@@ -15,13 +15,9 @@ class MapDialog extends FormApplication {
                 //window['ofmmapcanvas'].options = await $.getJSON('https://vectors.fantasymaps.org/options/?key=' + LICENSE);
                 window['ofmmapcanvas'].apiLoaded = true;  // We assume.
             }
-
-
             MapDialog.initMap();
         });
 
-        Hooks.on('mapCanvasToggleLabels', this.toggleLabels);
-        MapDialog.labelsOn = true;
     }
 
     static get defaultOptions() {
@@ -52,6 +48,8 @@ class MapDialog extends FormApplication {
         MapDialog.lonElem = document.querySelector('#mapCanvasLon');
         MapDialog.latElem = document.querySelector('#mapCanvasLat');
         MapDialog.timeElem = document.querySelector('#mapCanvasTime');
+        MapDialog.updateBtn = document.querySelector('#updateBtn');
+        MapDialog.generateBtn = document.querySelector('#generateBtn');
         MapDialog.viewport = {};
         MapDialog.viewportData = document.querySelector('#mapData');
 
@@ -80,6 +78,9 @@ class MapDialog extends FormApplication {
             MapDialog.lonElem.value = lng;
             MapDialog.viewport = {zoom: MapDialog.mapPortal.getZoom(), bounds: MapDialog.mapPortal.getBounds()};
             MapDialog.viewportData.value = JSON.stringify(MapDialog.viewport);
+            console.log(MapDialog.generateBtn);
+            $(MapDialog.generateBtn).val("Generate Scene (with"+(MapDialog.zoomLevelElem.value > 18.5?" ":"out ")+"walls)");
+            $(MapDialog.updateBtn).val("Update Scene (with"+(MapDialog.zoomLevelElem.value > 18.5?" ":"out ")+"walls)");
         });
     }
 
@@ -100,9 +101,6 @@ class MapDialog extends FormApplication {
                 return;
             }
 
-            // For each place, get the icon, name and location.
-            const bounds = new google.maps.LatLngBounds();
-
             places.forEach((place) => {
                 if (!place.geometry || !place.geometry.location) {
                     console.log("Returned place contains no geometry");
@@ -127,9 +125,6 @@ class MapDialog extends FormApplication {
 
     }
 
-    toggleLabels() {
-
-    }
 
     getData(options = {}) {
         return super.getData().object;
@@ -229,19 +224,23 @@ class MapCanvas extends Application {
 
     async updateScene(generateNewScene = false) {
         const LICENSE = game.settings.get("ofm-map-canvas", "LICENSE");
+        const RENDER_MODE = game.settings.get("ofm-map-canvas", "RENDER_MODE");
         const WORLD_TO_LOAD = game.settings.get("ofm-map-canvas", "WORLD_TO_LOAD");
         let WIDTH = game.settings.get("ofm-map-canvas", "WIDTH");
         let HEIGHT = game.settings.get("ofm-map-canvas", "HEIGHT");
 
         console.log('getting walls and lights for...')
         const doc = document.querySelector('#mapData').value;
+        console.log(doc);
         const jdoc = JSON.parse(doc);
-        console.log(jdoc)
+        console.log(jdoc);
 
         const DEFAULT_SCENE = game.settings.get("ofm-map-canvas", "DEFAULT_SCENE");
         const sceneName = (generateNewScene) ? DEFAULT_SCENE+"_"+new Date().getTime() : DEFAULT_SCENE;
         let scene = game.scenes.find(s => s.name.startsWith(sceneName));
 
+
+
         if(!scene) {
             // Create our scene if we don't have it.
             await Scene.create({name: sceneName }).then(s => {
@@ -278,7 +277,7 @@ class MapCanvas extends Application {
             await FilePicker.createDirectory('data', 'ofm-map-canvas');
         } catch(ex){ }
 
-        const url = 'https://vectors.fantasymaps.org/render/' + WORLD_TO_LOAD + '.jpeg?width='+WIDTH+'&height='+HEIGHT+'&bbox=[' + bbox.join(',') + ']&zoom=' + jdoc.zoom + '&key='+LICENSE;
+        const url = 'https://vectors.fantasymaps.org/render/' + WORLD_TO_LOAD + '.jpeg?width='+WIDTH+'&height='+HEIGHT+'&bbox=[' + bbox.join(',') + ']&zoom=' + jdoc.zoom + '&key='+LICENSE + "&mode=" + RENDER_MODE;
         console.log(url)
         const data = await fetch(url);
         console.log(data)
@@ -363,7 +362,6 @@ class MapCanvas extends Application {
             filePicker: false,
         });
 
-        console.log(window['ofmmapcanvas'].options);
         await game.settings.register('ofm-map-canvas', 'WORLD_TO_LOAD', {
             name: 'Fantasy Map to load',
             hint: 'Fantasy map to load',
@@ -378,6 +376,21 @@ class MapCanvas extends Application {
             type: String
         });
 
+
+        await game.settings.register('ofm-map-canvas', 'RENDER_MODE', {
+            name: 'Render Mode to use (work in progress)',
+            hint: 'Render Mode to use: Default is aerial for OSM and Drawn for anything else. ',
+            scope: 'world',
+            config: true,
+            default: 'default',
+            choices: {
+                default: "Default",
+                photo: "Aerial Photo",
+                draw: "Drawn Render",
+            },
+            type: String
+        });
+
         await game.settings.register('ofm-map-canvas', 'WIDTH', {
             name: 'Width of the scene',
             hint: 'Width of the scene to use',

diff --git a/templates/map-canvas.html b/templates/map-canvas.html
@@ -21,6 +21,9 @@
         justify-content: center;
         height: 768px;
         width: 1024px;
+
+        top: 57px;
+        position: absolute;
     }
 
     #mapCanvasZoomLevel {
@@ -39,17 +42,21 @@
         display: inline-block;
         height: 25px;
         vertical-align: center;
+        line-height: 26px;
+        padding-left: 6px;
+        padding-right: 2px;
     }
 </style>
 
 <form id="mapPortalForm">
     <div id="mapCanvasContainer">
         <div id="inputHolder" style="display: flex">
-            <input type="button" onClick="updateScene()" value="Update Scene">
-            <input type="button" onClick="generateScene()" value="Generate Scene">
+            <!--<input type="button" id="updateBtn" onClick="updateScene()" value="Update Scene">-->
+            <input type="button" id="generateBtn" onClick="generateScene()" value="Generate Scene">
             <input type="hidden" id="mapData" value="">
             <span class="spacer" style="flex: 1 1 10px"></span>
             <!--<input type="button" onClick="toggleLabels()" value="Labels">-->
+            <!--<span class="label">Search:</span><input type="text" id="mapCanvasTime" value="" placeholder="search" style="align-self: flex-end" onkeyup="onKeyUp()">-->
             <span class="label">Time:</span><input type="text" id="mapCanvasTime" value="" placeholder="t" style="align-self: flex-end" disabled>
             <span class="label">Z:</span><input type="text" id="mapCanvasZoomLevel" value="" placeholder="z" style="align-self: flex-end" disabled>
             <span class="label">X:</span><input type="text" id="mapCanvasLon" value="" placeholder="x" style="align-self: flex-end" disabled>
@@ -69,5 +76,9 @@
    function toggleLabels() {
        Hooks.call('mapCanvasToggleLabels');
    }
+
+   function onKeyUp(){
+       Hooks.call('onKeyUp');
+   }
 </script>