admin_front/assets/css/main.css

@@ -5,7 +5,7 @@
 
 @font-face {
     font-family: 'albertus';
-    src: url('../font/Albertus\ Extra\ Bold\ Regular.ttf'
+    src: url('~/assets/font/albertus.ttf'
         );
 }
 

admin_front/helpers.ts

@@ -0,0 +1,5 @@
+export function* chunks(arr: any, n: number) {
+    for (let i = 0; i < arr.length; i += n) {
+        yield arr.slice(i, i + n);
+    }
+}

admin_front/nuxt.config.ts

@@ -3,7 +3,11 @@ import path from 'path';
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', 'nuxt-primevue'],
+  modules: [
+    'nuxt-primevue',
+    '@nuxtjs/tailwindcss', 
+    '@nuxtjs/color-mode',
+  ],
   primevue: {
     options: {
       unstyled: true

admin_front/package-lock.json

@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@nuxtjs/color-mode": "^3.4.1",
         "@nuxtjs/tailwindcss": "^6.12.0",
         "d3": "^7.9.0",
         "nuxt": "^3.11.2",
@@ -1896,6 +1897,17 @@
         "vue": "^3.3.4"
       }
     },
+    "node_modules/@nuxtjs/color-mode": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-3.4.1.tgz",
+      "integrity": "sha512-vZgJqDstxInGw3RGSWbLoCLXtU1mvh1LLeuEA/X3a++DYA4ifwSbNoiSiOyb9qZHFEwz1Xr99H71sXV4IhOaEg==",
+      "dependencies": {
+        "@nuxt/kit": "^3.11.2",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.1.0",
+        "semver": "^7.6.0"
+      }
+    },
     "node_modules/@nuxtjs/tailwindcss": {
       "version": "6.12.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.12.0.tgz",

admin_front/package.json

@@ -10,8 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.12.0",
-    "d3": "^7.9.0",
     "nuxt": "^3.11.2",
     "pathfinding": "^0.4.18",
     "vue": "^3.4.27",

admin_front/pages/plan/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
-import PF from 'pathfinding'
+import PF, { Grid } from 'pathfinding'
+import { chunks } from '~/helpers';
 
 interface SvgContext {
     array: number[][],
@@ -12,90 +13,97 @@ const config = useRuntimeConfig()
 const plan: Ref<SvgContext | {}> = useState('plan', () => ({}));
 
 const loading = ref<boolean>(false)
+
 const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
 const context: Ref<CanvasRenderingContext2D | undefined> = ref();
 
-const canvasElement2: Ref<HTMLCanvasElement | undefined> = ref();
+const grid = ref<Grid>()
-const context2: Ref<CanvasRenderingContext2D | undefined> = ref();
-
-const grid = ref<number[][]>()
 const startPoint = ref<number[]>()
 const endPoint = ref<number[]>()
 const startToEndPath = ref()
 
+const chunkSize = 2
+
 const beforeUpload = () => {
     loading.value = true
 }
 
 const onUpload = (event: FileUploadUploadEvent) => {
-    loading.value = false
     try {
         const data = JSON.parse(event.xhr.response)
         plan.value = data.response
+        newDraw()
+        loading.value = false
+    } catch (error) {
+        console.log(error)
+        loading.value = false
+    }
+}
+
+const newDraw = () => {
     startPoint.value = undefined
     endPoint.value = undefined
+    startToEndPath.value = undefined
 
     context.value = canvasElement.value?.getContext('2d') || undefined;
-        if (canvasElement.value && context.value) {
+    const lines = (plan.value as SvgContext).array
-            context.value.clearRect(0, 0, canvasElement.value.width, canvasElement.value.height);
+    lines.forEach((line, indexY) => {
-            if (!plan.value.hasOwnProperty('paths')) return
-            (plan.value).paths.forEach((path: string) => {
-                if (!context.value) return
-                context.value.fillStyle = 'rgba(255, 0, 255, 0.25)'
-                context.value.fill(new Path2D(path));
-
-                context.value.strokeStyle = 'blue'
-                context.value.stroke(new Path2D(path));
-            });
-        }
-
-        context2.value = canvasElement2.value?.getContext('2d') || undefined;
-        if (canvasElement2.value && context2.value) {
-            plan.value.array.forEach((line, indexY) => {
         line.forEach((point, indexX) => {
-                    context2.value.fillStyle = point > 0 ? 'red' : 'WHITE'
+            if (canvasElement.value && context.value) {
-                    context2.value.fillRect(indexX, indexY, 1, 1)
+                context.value.fillStyle = point > 0 ? 'red' : 'WHITE'
+                context.value.fillRect(indexX, indexY, 1, 1)
+            }
         })
     });
-        }
 
-        grid.value = new PF.Grid(plan.value.array.map(y => y.map(x => x > 0 ? 1 : 0)))
+    // const t = [...chunks(lines, chunkSize)].map(y => y.map(x => x.some(i => i > 0) > 0 ? 1 : 0))
-    } catch (error) {
+    // console.log(t)
-        console.error(error)
+
-    }
+    grid.value = new PF.Grid((plan.value as SvgContext).array.map(y => y.map(x => x > 0 ? 1 : 0)))
 }
 
 const setPoint = (event: MouseEvent) => {
     try {
-
+        if (!event.currentTarget) return
-        const bound = event.currentTarget.getBoundingClientRect()
+        const target = (<HTMLCanvasElement>event.currentTarget)
+        const bound = target.getBoundingClientRect()
 
         const targetX = event.x - bound.x
         const targetY = event.y - bound.y
 
+        const ctx = (context.value as CanvasRenderingContext2D)
+
         if (!startPoint.value) {
             startPoint.value = [targetX, targetY]
-            context2.value.fillStyle = 'rgb(0,255,0,0.75)';
+            ctx.fillStyle = 'rgb(0,255,0,0.75)';
-            context2.value.beginPath();
+            ctx.beginPath();
-            context2.value.arc(targetX, targetY, 10, 0, 2 * Math.PI);
+            ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
-            context2.value.fill();
+            ctx.fill();
         } else
             if (!endPoint.value) {
                 endPoint.value = [targetX, targetY]
-                context2.value.fillStyle = 'rgb(0,0,255,0.75)';
+                ctx.fillStyle = 'rgb(0,0,255,0.75)';
-                context2.value.beginPath();
+                ctx.beginPath();
-                context2.value.arc(targetX, targetY, 10, 0, 2 * Math.PI);
+                ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
-                context2.value.fill();
+                ctx.fill();
 
-                const finder = new PF.AStarFinder();
+                const finder = new PF.DijkstraFinder();
 
-                startToEndPath.value = finder.findPath(parseInt(startPoint.value[0]), parseInt(startPoint.value[1]), parseInt(endPoint.value[0]), parseInt(endPoint.value[1]), grid.value);
+                startToEndPath.value = finder.findPath(
-                startToEndPath.value.forEach(element => {
+                    Math.round(startPoint.value[0]),
-                    context2.value.fillRect(element[0], element[1], 1, 1)
+                    Math.round(startPoint.value[1]),
+                    Math.round(endPoint.value[0]),
+                    Math.round(endPoint.value[1]),
+                    (grid.value as Grid)
+                );
+                startToEndPath.value.forEach((element: number[]) => {
+                    ctx.fillRect(element[0], element[1], 1, 1)
                 });
+            } else {
+                newDraw()
             }
     } catch (error) {
-        console.error(err)
+        console.log(error)
     }
 }
 </script>
@@ -106,11 +114,8 @@ const setPoint = (event: MouseEvent) => {
                 :maxFileSize="10000000" @upload="onUpload" @before-upload="beforeUpload" :auto="true"
                 chooseLabel="Выберите файл" :disabled="loading" />
         </Panel>
-        <Panel v-if="plan && (<any>plan).paths" header="Отрисовка из массива значений">
+        <Panel :header="loading ? `Идет отрисовка` : `Отрисовка из массива значений`">
-            <canvas ref="canvasElement2" :width="1200" height="400" @click="setPoint"></canvas>
+            <canvas ref="canvasElement" :width="1200" height="400" @click="setPoint"></canvas>
-        </Panel>
-        <Panel v-if="plan && (<any>plan).paths" header="Парсинг изображения">
-            <canvas ref="canvasElement" :width="1200" height="400"></canvas>
         </Panel>
     </div>
 </template>

admin_front/tailwind.config.js

@@ -1,4 +1,15 @@
 const colors = require('tailwindcss/colors')
+delete colors.inherit
+delete colors.current
+delete colors.transparent
+delete colors.black
+delete colors.white
+delete colors.lightBlue
+delete colors.warmGray
+delete colors.trueGray
+delete colors.coolGray
+delete colors.blueGray
+
 const randomPrimary = Object.values(colors)[Math.floor(Math.random()*Object.values(colors).length)];
 const randomSurface = Object.values(colors)[Math.floor(Math.random()*Object.values(colors).length)];
 export default {