Merge pull request #284 from xyz-tools/feature/undeprecate-dnd

Undeprecate dnd and move to dom-utils

Author: remcoder

demo/index.html

@@ -36,8 +36,8 @@
 
         <div class="p-1" v-if="model">
           <!-- <div>{{layerCount + ' layers'}} / {{fileSize}}</div> -->
-          <div><a :href="model?.original">{{model?.name ?? fileName}}</a> <br>
-            <span class="is-size-8">by {{model?.designer}}</span></div>
+          <div><a :href="model?.original">{{model?.name}}</a> <br>
+            <span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span></div>
 
           <div class="license is-size-8">{{model?.license}}</div>
         </div>
@@ -243,9 +243,8 @@ <h1 class="text-center m-3 mb-5">GCode Preview
     <div class="absolute left bottom m-3 has-text-grey slide-in-up">Drop a gcode file to preview it</div>
     <div class="wrapper">
       <canvas class="preview" :class="{ 'dragging': settings.dragging }" 
-        @dragover.prevent="dragOver"
-        @dragleave.prevent="dragLeave"
-        @drop.prevent="drop"></canvas>
+        @update.prevent="update"
+        ></canvas>
     </div>
   </div>
   <script type="importmap">

demo/js/app.js

@@ -2,7 +2,7 @@ import { createApp, ref, watch, onMounted, watchEffect } from 'vue';
 import { presets } from './presets.js';
 import * as GCodePreview from 'gcode-preview';
 import { defaultSettings } from './default-settings.js';
-import { debounce, humanFileSize, readFile } from './utils.js';
+import { debounce, humanFileSize } from './utils.js';
 
 const defaultPreset = 'benchy';
 const preferDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
@@ -20,7 +20,6 @@ export const app = (window.app = createApp({
     const thumbnail = ref(null);
     const layerCount = ref(0);
     const fileSize = ref(0);
-    const fileName = ref('');
     const model = ref(null);
     const dragging = ref(false);
     const settings = ref(Object.assign({}, defaultSettings));
@@ -36,19 +35,12 @@ export const app = (window.app = createApp({
 
     const removeColor = () => settings.value.colors.pop();
 
-    const dragOver = (event) => {
-      event.dataTransfer.dropEffect = 'copy';
-      dragging.value = true;
-    };
-
-    const dragLeave = () => (dragging.value = false);
-
-    const drop = (event) => {
-      dragging.value = false;
-      const file = event.dataTransfer.files[0];
-      fileName.value = file.name;
-      model.value = null;
-      loadDroppedFile(file);
+    const update = async (evt) => {
+      model.value = {
+        name: evt.detail.filename
+      };
+      applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
+      updateUI();
     };
 
     // Update UI with current preview settings
@@ -105,6 +97,8 @@ export const app = (window.app = createApp({
 
       Object.assign(settings.value, currentSettings);
       preview.endLayer = countLayers;
+
+      applyDevMode(enableDevMode.value);
     };
 
     const loadGCodeFromServer = async (filename) => {
@@ -137,34 +131,27 @@ export const app = (window.app = createApp({
             preview.render();
             return;
           }
-          await preview.renderAnimated(preview.job.paths.length / 60);
+          await preview.renderAnimated();
         } else {
           preview.render();
         }
       });
     };
 
-    const loadDroppedFile = async (file) => {
-      fileSize.value = humanFileSize(file.size);
-      const content = await readFile(file);
-      applyDevMode(enableDevMode.value); // HACK
-      startLoadingProgressive(content);
-      applyDevMode(enableDevMode.value);
-      updateUI();
-    };
-
     const selectPreset = async (presetName) => {
       const canvas = document.querySelector('canvas.preview');
       const preset = presets[presetName];
-      fileName.value = preset.file.split('/').pop();
       model.value = preset.model;
       const options = Object.assign(
         {
           canvas,
           backgroundColor: initialBackgroundColor
         },
         defaultSettings,
-        preset
+        preset,
+        {
+          droppable: true
+        }
       );
 
       // reset previous state
@@ -182,7 +169,7 @@ export const app = (window.app = createApp({
       observer = new ResizeObserver(() => preview.resize());
       observer.observe(canvas);
 
-      applyDevMode(enableDevMode.value);
+      applyDevMode(enableDevMode.value); // HACK: force dev mode to update UI
 
       await loadGCodeFromServer(preset.file);
       applyDevMode(enableDevMode.value);
@@ -245,21 +232,18 @@ export const app = (window.app = createApp({
       thumbnail,
       layerCount,
       fileSize,
-      fileName,
       model,
       dragging,
       settings,
       enableDevMode,
       selectTab,
       addColor,
       removeColor,
-      dragOver,
-      dragLeave,
-      drop,
+      // drop,
+      update,
       resetUI: updateUI,
       loadGCodeFromServer,
       startLoadingProgressive,
-      loadDroppedFile,
       selectPreset
     };
   }

demo/js/utils.js

@@ -19,13 +19,3 @@ export function humanFileSize(size) {
   var i = Math.floor(Math.log(size) / Math.log(1024));
   return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
 }
-
-export function readFile(file) {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      resolve(e.target.result);
-    };
-    reader.readAsText(file);
-  });
-}