изменения в canvas/types

34ac97d8 · Medvedev Anton · 7a6071ed · 34ac97d8 · 34ac97d8 · 34ac97d8
--- a/universo-frontend/src/canvas/types/canvas-object-connection-type.ts
+++ b/universo-frontend/src/canvas/types/canvas-object-connection-type.ts
+export CanvasObjectConnectionTypes {
+  uuid: string; //primary key
+  id: number; //ИД типа для логики
+  nomo: string; //название
+  priskribo: string //описание
+}
--- a/universo-frontend/src/canvas/types/canvas-object-connection.ts
+++ b/universo-frontend/src/canvas/types/canvas-object-connection.ts
+export CanvasObjectConnection {
+  uuid: string; //primary key
+  posedanto: string; //первый объект связи
+  ligio: string; //второй объект связи
+  tipo: string; //тип связи
+}
--- a/universo-frontend/src/canvas/types/canvas-object-type.ts
+++ b/universo-frontend/src/canvas/types/canvas-object-type.ts
+export CanvasObjectTypes {
+  uuid: string; //primary key
+  id: number; //ИД типа для логики
+  nomo: string; //название
+  priskribo: string //описание
+}
--- a/universo-frontend/src/canvas/types/canvas-object.ts
+++ b/universo-frontend/src/canvas/types/canvas-object.ts
+export CanvasObject {
+  uuid: string; //primary key
+  kanvaso: string; //холст
+  tipo: string; //тип объекта
+  pozicio: number; //позиция для сортировки
+  koordinato_x: number; //координаты по x
+  koordinato_y: number; //координаты по y
+  largxo: number; //ширина
+  longo: number; //длина
+  nomo: string; //название
+  priskribo: string //описание
+}
--- a/universo-frontend/src/canvas/types/canvas-owner.ts
+++ b/universo-frontend/src/canvas/types/canvas-owner.ts
+export CanvasOwners {
+  uuid: string; //primary key
+  kanvaso: string; //холст
+  posedanto_uzanto: string; //пользователь владелец
+}
--- a/universo-frontend/src/canvas/types/canvas.ts
+++ b/universo-frontend/src/canvas/types/canvas.ts
+export Canvases {
+  uuid: string; //primary key
+  nomo: string; //название
+  priscribo: string; //описание
+}
--- a/universo-frontend/src/canvas/types/user.ts
+++ b/universo-frontend/src/canvas/types/user.ts
+export Users {
+  id: number; //primary key
+}
--- a/universo-frontend/src/layouts/MainLayout.vue
+++ b/universo-frontend/src/layouts/MainLayout.vue
@@ -33,7 +33,7 @@ const linksList = [
    title: 'Бесконечный холст',
    caption: 'phaser',
    icon: 'school',
-    link: '/phaser',
+    link: '/endlesscanvas',
  },
  {
    title: 'Стартовая неавторизованных',

--- a/universo-frontend/src/pages/EndlessPage.vue
+++ b/universo-frontend/src/pages/EndlessPage.vue
@@ -12,195 +12,127 @@ const COLOR_LIGHT = 0x7b5e57;
 const COLOR_DARK = 0x444444;
 // Функция для генерации случайных чисел
-const Random = Phaser.Math.Between;
+const Random: (min: number, max: number) => number = Phaser.Math.Between;
 // Определение основного класса сцены
 class Demo extends Phaser.Scene {
-    // Определение переменной для вывода текста
-    private print: Phaser.GameObjects.Text;
-    // Конструктор сцены
    constructor() {
        super({
-            key: 'examples', // Уникальный ключ для этой сцены
+            key: 'examples'
        });
    }
+    preload(): void {
+        this.load.scenePlugin({
+            key: 'rexuiplugin',
+            sceneKey: 'rexUI'
+        });
+    }
-    // Метод, который вызывается при создании сцены
    create(): void {
-      this.cameras.main.setBackgroundColor('#000000');
+        const scrollablePanel = this.rexUI.add.scrollablePanel({
+          x: 400,
-      // Создание таблицы с ячейками
-        const gridTable = this.rexUI.add.gridTable({
-            x: 400,
            y: 300,
-            width: 500,
+            width: 400,
-            height: 300,
+            height: 400,
+            scrollMode: 2,  // Добавлено для активации обеих полос прокрутки
-            // Фон таблицы
+            background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_PRIMARY).setStrokeStyle(2, COLOR_DARK),
-            background: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_PRIMARY),
+            panel: {
+                child: CreatePanel(this),
-            // Параметры таблицы
-            table: {
-                cellWidth: 120,  // Ширина ячейки
-                cellHeight: 60,  // Высота ячейки
-                columns: 5,  // Количество колонок
-                // Маска для скрытия содержимого за пределами таблицы
                mask: {
-                    padding: 2,
+                    padding: 1
                },
-                 enableLayer: true, // Включение слоя
-                reuseCellContainer: true,  // Переиспользование контейнеров ячеек для оптимизации
            },
+            sliderX: {  // Добавлено для горизонтальной полосы прокрутки
-            // Параметры горизонтального слайдера
-            sliderX: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
+                hideUnscrollableSlider: true,
+                input: 'click',
            },
-            // Параметры вертикального слайдера
            sliderY: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
+                hideUnscrollableSlider: true,
+                input: 'click',
            },
-            // Заголовок таблицы
            header: this.rexUI.add.label({
+                height: 30,
                background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK),
                text: this.add.text(0, 0, 'Header'),
            }),
-            // Нижний колонтитул таблицы
-            // footer: GetFooterSizer(this),
-            // Отступы
            space: {
-                left: 20,
+                left: 10,
-                right: 20,
+                right: 10,
-                top: 20,
+                top: 10,
-                bottom: 20,
+                bottom: 10,
+                panel: 10,
-                sliderX: 10,
+                sliderX: 10,  // Добавлено пространство для горизонтальной полосы прокрутки
-                sliderY: 10,
+                sliderY: 10
-                header: 10,
-                footer: 10,
-            },
-            // Функция для создания контейнера ячейки
-            createCellContainerCallback: function (cell, cellContainer) {
-                var scene = cell.scene,
-                    width = cell.width,
-                    height = cell.height,
-                    item = cell.item,
-                    index = cell.index;
-                if (cellContainer === null) {
-                    cellContainer = scene.rexUI.add.label({
-                        width: width,
-                        height: height,
-                        background: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, COLOR_DARK),
-                        icon: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 10, 0x0),
-                        text: scene.add.text(0, 0, ''),
-                        space: {
-                            icon: 10,
-                            left: 10
-                        }
-                    });
-                    console.log(cell.index + ': create new cell-container');
-                } else {
-                    console.log(cell.index + ': reuse cell-container');
-                }
-                // Set properties from item value
-                cellContainer.setMinSize(width, height); // Size might changed in this demo
-                cellContainer.getElement('text').setText(item.id); // Set text of text object
-                cellContainer.getElement('icon').setFillStyle(item.color); // Set fill color of round rectangle object
-                cellContainer.getElement('background').setStrokeStyle(2, COLOR_DARK).setDepth(0);
-                return cellContainer;
            },
-            // Элементы, которые будут отображаться в ячейках
+             scrollerX: false,
-            // items: CreateItems(1000)
+             scrollerY: false,
        })
-            .setDraggable('header')  // Делаем заголовок таблицы перетаскиваемым
+        .setDraggable('header')
-            .layout() // Применяем макет
+        .layout();
-            AddDraggableCardsToTable(this, gridTable);
-        //.drawBounds(this.add.graphics(), 0xff0000);
+        AddResizeController(scrollablePanel);
    }
+    // update(): void {}
 }
+const CreatePanel = (scene: Phaser.Scene): Phaser.GameObjects.Container => {
+    const sizer0 = CreateVerticalPanel(scene, 12).setPosition(150, 0).layout();
-// Функция для создания элементов таблицы
+    const sizer1 = CreateVerticalPanel(scene, 8).setPosition(300, 0).layout();
-function AddDraggableCardsToTable(scene: Phaser.Scene, gridTable: any): void {
+    const sizer2 = CreateVerticalPanel(scene, 0).setPosition(450, 0).layout();
-    const sizer0 = CreatePanel(scene, 12).setPosition(250, 300).layout();
-    const sizer1 = CreatePanel(scene, 8).setPosition(400, 300).layout();
-    const sizer2 = CreatePanel(scene, 0).setPosition(550, 300).layout();
    const sizers = [sizer0, sizer1, sizer2];
-    sizers.forEach((sizer) => {
+    sizers.forEach(function(sizer) {
        sizer.setInteractive({ dropZone: true });
        SetDragable(sizer.getElement('items'));
    });
-    // Функция для создания нижнего колонтитула
+    const mainSizer = scene.rexUI.add.sizer({
-    const GetFooterSizer = (scene: Phaser.Scene): any => {
+        orientation: 'x',
-    return scene.rexUI.add.sizer()
+        space: { item: 10 }
-        .add(
+    }).add(sizer0).add(sizer1).add(sizer2);
-            CreateFooterButton(scene, 'Reset'),   // child
-            { proportion: 1 }
+    return mainSizer;
-        )
-        .add(
-            CreateFooterButton(scene, 'Exit'),    // child
-            { proportion: 1 }
-        )
-}
 }
-const CreatePanel = function (scene, itemCount) {
+const CreateVerticalPanel = (scene: Phaser.Scene, itemCount?: number): Phaser.GameObjects.Container => {
-    if (itemCount === undefined) {
+  if (itemCount === undefined) {
        itemCount = 0;
    }
-    const sizer = scene.rexUI.add.sizer({
+    let sizer = scene.rexUI.add.sizer({
-        width: 120, height: 500,
+        width: 120,
+        height: 500,
        orientation: 'y',
        space: { left: 6, right: 6, top: 6, bottom: 6, item: 6 },
    })
-        .setDepth(-1)
+    .setDepth(-1)
-        .addBackground(scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_DARK).setDepth(-1))
+    .addBackground(scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_DARK).setDepth(-1));
-        for (let i = 0; i < itemCount; i++) {
+    for (let i = 0; i < itemCount; i++) {
-    sizer.add(
+        sizer.add(
-        CreateLabel(scene, i.toString()),
+            CreateLabel(scene, i.toString()),
-        {
+            {
-            expand: true
+                expand: true
-        }
+            }
-    );
+        );
-}
+    }
    return sizer;
 }
-const CreateLabel = function (scene, text) {
+const CreateLabel = (scene: Phaser.Scene, text: string): Phaser.GameObjects.Container => {
-    const label = scene.rexUI.add.label({
+  const label = scene.rexUI.add.label({
        background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
        text: scene.add.text(0, 0, text, {
            fontSize: 18
        }),
        align: 'center',
        space: {
            left: 5,
@@ -208,37 +140,35 @@ const CreateLabel = function (scene, text) {
            top: 5,
            bottom: 5,
        },
+    });
-    })
    return label;
 }
-const SetDragable = function (items) {
+const SetDragable = (items: Phaser.GameObjects.GameObject[]): void => {
-    items.forEach(function (item) {
+  items.forEach(function(item) {
        item
            .setInteractive({ draggable: true })
-            .on('dragstart', function (pointer, dragX, dragY) {
+            .on('dragstart', function(pointer, dragX, dragY) {
                item.setData({ startX: item.x, startY: item.y });
            })
-            .on('drag', function (pointer, dragX, dragY) {
+            .on('drag', function(pointer, dragX, dragY) {
                item.setPosition(dragX, dragY);
            })
-            .on('dragend', function (pointer, dragX, dragY, dropped) {
+            .on('dragend', function(pointer, dragX, dragY, dropped) {
-                if (dropped) { // Process 'drop' event
+                if (dropped) {
                    return;
                }
                item.moveTo({
-                    x: item.getData('startX'), y: item.getData('startY'),
+                    x: item.getData('startX'),
+                    y: item.getData('startY'),
                    speed: 300
                });
            })
-            .on('drop', function (pointer, target) {
+            .on('drop', function(pointer, target) {
-                const parent = item.getParentSizer();
+                var parent = item.getParentSizer();
                parent.remove(item);
                ArrangeItems(parent);
-                // Item is placed to new position in sizer
                target.insertAtPosition(
                    pointer.x, pointer.y,
                    item,
@@ -246,65 +176,61 @@ const SetDragable = function (items) {
                        expand: true
                    }
                );
-                // Move item from start position to new position
                ArrangeItems(target);
-            })
+            });
    });
 }
-const ArrangeItems = function (panel) {
+const ArrangeItems = (panel: Phaser.GameObjects.Container): void => {
-    const items = panel.getElement('items');
+  const items = panel.getElement('items');
-    // Save current position
+    items.forEach(function(item) {
-    items.forEach(function (item) {
        item.setData({ startX: item.x, startY: item.y });
-    })
+    });
-    // Item is placed to new position in sizer
    panel.layout();
-    // Move item from start position to new position
+    items.forEach(function(item) {
-    items.forEach(function (item) {
        item.moveFrom({
-            x: item.getData('startX'), y: item.getData('startY'),
+            x: item.getData('startX'),
+            y: item.getData('startY'),
            speed: 300
-        })
+        });
-    })
+    });
 }
-// Функция для создания кнопок в нижнем колонтитуле
+const AddResizeController = (sizer: Phaser.GameObjects.Container): void => {
-const CreateFooterButton = (scene: Phaser.Scene, text: string): any => {
+  const scene = sizer.scene;
-    return scene.rexUI.add.label({
-        background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 20, COLOR_DARK),
+const bottomRighterController = scene.add.rectangle(sizer.right, sizer.bottom, 30, 30, 0x333333);
-        text: scene.add.text(0, 0, text),
-        icon: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
+bottomRighterController
-        align: 'center',
+    .setInteractive({ draggable: true })
-        space: {
+    .on('drag', function(pointer, dragX, dragY) {
-            left: 10, right: 10, top: 10, bottom: 10,
+        const topX = sizer.left,
-            icon: 10
+            topY = sizer.top;
-        }
+        const width = dragX - topX,
-    })
+            height = dragY - topY;
-        .setInteractive()
-        .on('pointerdown', function () {
+        sizer.setChildPosition(bottomRighterController, dragX, dragY);
-            console.log(`Pointer down ${text}`)
-        })
+        sizer.setMinSize(width, height).layout();
-        .on('pointerover', function () {
-            this.getElement('background').setStrokeStyle(1, 0xffffff);
+        sizer.left = topX;
-        })
+        sizer.top = topY;
-        .on('pointerout', function () {
+    });
-            this.getElement('background').setStrokeStyle();
-        })
+sizer.pin(bottomRighterController);
 }
-// Конфигурация игры
+const config: Phaser.Types.Core.GameConfig = {
-const config = {
    type: Phaser.AUTO,
-    // parent: 'phaser-example',
-    width: window.innerWidth,  // или другое значение, которое вы хотите
-    height: window.innerHeight,  // или другое значение, которое вы хотите
-    parent: 'phaser-container',
    scale: {
+        parent: 'phaser-example',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
+        width: 1280,
+        height: 720,
+        parent: 'phaser-container',
    },
-    scene: Demo,
+    backgroundColor: '#FFFFFF',
    plugins: {
        scene: [{
            key: 'rexUI',
@@ -312,21 +238,15 @@ const config = {
            mapping: 'rexUI'
        }]
    },
+    scene: Demo
 };
-// Создание новой игры с заданной конфигурацией
 export default {
  name: 'YourComponentName',
  mounted() {
-    var game = new Phaser.Game(config);
+    const game = new Phaser.Game(config);
-    game.events.once('boot', function() {
-        game.scene.scenes[0].cameras.main.setBackgroundColor('#FFFFFF');
-    });
  }
 }
 </script>
 <style>