update read me

Dockerfile

@@ -11,4 +11,4 @@ COPY . .
 EXPOSE 8080
 
 RUN npm run build
-CMD [ "npm", "run", "start" ]
+CMD ["npm", "run", "build"]

README.md

@@ -2,7 +2,52 @@
 
 The online platform for Nest algorithm.
 
-## Setup
+![screen of working](./samples/web_screen.png)
+
+## How to use?
+
+#### [Visit Nest2D](https://nest2d.online/)
+
+# What is Nest Problem?
+
+Given a square piece of material and some letters to be laser-cut:
+
+We want to pack all the letters into the square, using as little material as possible. If a single square is not enough,
+we also want to minimize the number of squares used.
+
+In the CNC world this is called "nesting", and software that does this is typically targeted at industrial customers and very expensive. for more detail , please go to [SVGNest](https://github.com/Jack000/SVGnest)
+
+## Current development status
+
+Curretly, the projest in refactoring stage. The project originaly based on Nest4J fork. I aleardy migarte the nesting algorithm to the Rust library by [JeroenGar](https://github.com/JeroenGar).
+
+I want to make change in the project quickly. So I decide to remove the Java backend and use the Nuxt for both backend and frontend. In case your interested in the java backend source code, you can find it [Release 0.5.4 last release with java backend](https://github.com/VovaStelmashchuk/nest2d/releases/tag/0.5.4)
+
+## The repository based on few github project, I keep the original history of commits.
+
+Also, i have some plane to modify the project. The project will be support DXF file. The SVG format available only for
+the preview. The project will be migrate to Kotlin fully or majority.
+
+Fill free to create issues or pull requests. The main goal of the project is mainly free and open source solution for
+nesting problem. I try to find the way to compensate the price of cloud server. **You Star of the project can help to
+apply to some open source program.**
+
+### Big Thanks to [JeroenGar](https://github.com/JeroenGar)
+
+He is the author of [jagua-rs](https://github.com/JeroenGar/jagua-rs). I use his project as the core service for the
+service. Without his project, I can't make this project.
+
+I use slightly modified version of his project. Can be found [here](https://github.com/VovaStelmashchuk/jagua-rs)
+
+### Credits:
+
+- [SVGNest](https://github.com/Jack000/SVGnest)
+- [DXFReader](https://github.com/wholder/DXFReader)
+- [NEST4J fork](https://github.com/micycle1/Nest4J/tree/master)
+- [Dexus](https://github.com/Dexus)
+- [Deepnest](https://github.com/deepnest-next)
+
+## Development setup
 
 Make sure to install dependencies:
 
@@ -35,3 +80,9 @@ Locally preview production build:
 # npm
 npm run preview
 ```
+
+### Referenced Paper
+
+- [López-Camacho _et al._ 2013](http://www.cs.stir.ac.uk/~goc/papers/EffectiveHueristic2DAOR2013.pdf)
+- [Kendall 2000](http://www.graham-kendall.com/papers/k2001.pdf)
+- [E.K. Burke _et al._ 2006](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.440.379&rep=rep1&type=pdf)

components/DxfUpload.vue

@@ -1,9 +1,16 @@
 <template>
-  <div>
+  <div
+    class="relative"
+    @dragover.prevent="onDragOver"
+    @dragenter.prevent="onDragEnter"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop"
+  >
     <div>
       <label
         for="dxfFiles"
-        class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-black"
+        class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 hover:border-gray-400 transition duration-300 ease-in-out"
+        :class="{ 'border-blue-500 bg-blue-50': isDragOver }"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +40,8 @@
         class="hidden"
       />
     </div>
-    <div class="mt-4" v-if="dxfFiles">
+
+    <div class="mt-4" v-if="dxfFiles.length > 0">
       <ul class="space-y-2">
         <li
           v-for="file in dxfFiles"
@@ -50,17 +58,49 @@
 <script>
 export default {
   name: "DxfUpload",
+  props: {
+    extensions: {
+      type: Array,
+      default: () => [".dxf"],
+    },
+  },
   data() {
     return {
       dxfFiles: [],
+      isDragOver: false,
     };
   },
   methods: {
     onDXFChange(event) {
       const addedFiles = Array.from(event.target.files);
-      this.dxfFiles = [...this.dxfFiles, ...addedFiles];
+      this.addFiles(addedFiles);
+    },
+
+    onDragOver() {
+      this.isDragOver = true;
+    },
+    onDragEnter() {
+      this.isDragOver = true;
+    },
+    onDragLeave() {
+      this.isDragOver = false;
+    },
+    onDrop(event) {
+      this.isDragOver = false;
+      const droppedFiles = Array.from(event.dataTransfer.files);
+      this.addFiles(droppedFiles);
+    },
+
+    addFiles(newFiles) {
+      let combined = [...this.dxfFiles, ...newFiles];
+      combined = combined.filter((file) => {
+        return this.extensions.includes(file.name.slice(-4).toLowerCase());
+      });
+      this.dxfFiles = combined;
       this.$emit("files", this.dxfFiles);
     },
   },
 };
 </script>
+
+<style scoped></style>

pages/index.vue

@@ -23,13 +23,6 @@
       </button>
     </form>
 
-    <div
-      v-if="message"
-      class="mt-6 p-4 bg-green-50 border border-green-400 text-green-800 rounded-lg"
-    >
-      {{ message }}
-    </div>
-
     <div
       v-if="error"
       class="mt-6 p-4 bg-red-50 border border-red-400 text-red-800 rounded-lg"
@@ -49,7 +42,6 @@ export default {
   data() {
     return {
       dxfFiles: [],
-      message: "",
       error: "",
     };
   },
@@ -60,7 +52,6 @@ export default {
     },
     async handleSubmit() {
       try {
-        this.message = "";
         this.error = "";
 
         if (this.dxfFiles.length === 0) {
@@ -70,7 +61,7 @@ export default {
         const formData = new FormData();
         this.dxfFiles.forEach((file) => formData.append("dxf", file));
 
-        const response = await fetch("/api/upload", {
+        const response = await fetch("/api/nest", {
           method: "POST",
           body: formData,
         });
@@ -81,7 +72,7 @@ export default {
         }
 
         const data = await response.json();
-        this.message = data.message;
+        this.error = data.message;
       } catch (err) {
         this.error = err.message;
       }

server/api/nest.post.js

@@ -0,0 +1,24 @@
+import { defineEventHandler, createError, readMultipartFormData } from "h3";
+import { connectDB } from "~~/server/db/mongo";
+import { getDxfArray } from "~~/server/utils/multipart";
+
+export default defineEventHandler(async (event) => {
+  try {
+    const fields = await readMultipartFormData(event);
+    const dxfFileFields = fields.filter((field) => field.name === "dxf");
+    const dxfStrings = getDxfArray(dxfFileFields);
+
+    const db = await connectDB();
+    await db.collection("nesting").insertOne({
+      dxf: dxfStrings,
+      uploadedAt: new Date(),
+    });
+
+    return {
+      message: "Nest start",
+    };
+  } catch (err) {
+    console.error(err);
+    throw createError({ statusCode: 500, message: err.message });
+  }
+});

server/api/upload.js

@@ -1,5 +1,7 @@
 import { defineEventHandler, createError, readMultipartFormData } from "h3";
 import { connectDB } from "~~/server/db/mongo";
+import { getDxfArray } from "~~/server/utils/multipart";
+
 import standardSlugify from "standard-slugify";
 
 export default defineEventHandler(async (event) => {
@@ -24,6 +26,7 @@ export default defineEventHandler(async (event) => {
       projectName: projectName,
       image: imageBuffer,
       dxf: dxfStrings,
+      uploadedAt: new Date(),
     });
 
     const projectFromDb = await db
@@ -64,22 +67,3 @@ function getImageBuffer(field) {
 
   return imageBuffer;
 }
-
-function getDxfArray(fields) {
-  return fields.map((field) => {
-    const dxfBuffer = field.data;
-    if (!dxfBuffer) {
-      throw createError({
-        statusCode: 400,
-        message: "DXF file is required.",
-      });
-    }
-
-    const dxfString = dxfBuffer.toString();
-
-    return {
-      filename: field.filename,
-      data: dxfString,
-    };
-  });
-}

server/utils/multipart.js

@@ -0,0 +1,18 @@
+export function getDxfArray(fields) {
+  return fields.map((field) => {
+    const dxfBuffer = field.data;
+    if (!dxfBuffer) {
+      throw createError({
+        statusCode: 400,
+        message: "DXF file is required.",
+      });
+    }
+
+    const dxfString = dxfBuffer.toString();
+
+    return {
+      filename: field.filename,
+      data: dxfString,
+    };
+  });
+}