Merge branch 'main' into 'main'

#25 Создана базовая структура функционала доски See merge request teknokomo/universo-monorepo!26

Merge branch 'main' into 'main'
#25 Создана базовая структура функционала доски See merge request teknokomo/universo-monorepo!26
20113876 · Anton Medvedev · 86a803c1 · a8f2759b · 20113876 · 20113876
--- a/universo-frontend/src/pages/canvas/ActualCanvas.vue
+++ b/universo-frontend/src/pages/canvas/ActualCanvas.vue
+<template>
+  <div id="phaser-container"></div>
+</template>
+
+<script lang="ts">
+import 'phaser';
+import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
+import CreateScrollablePanel from './CreateScrollablePanel';
+
+class Demo extends Phaser.Scene {
+  rexUI: any;
+    constructor() {
+        super({
+            key: 'examples'
+        });
+    }
+
+    preload(): void {
+        this.load.scenePlugin({
+            key: 'rexuiplugin',
+
+            sceneKey: 'rexUI'
+        });
+    }
+
+    create(): void {
+        const itemCountArray: number[] = [20, 5, 10, 0, 10];
+        const topPanel = CreateScrollablePanel(this, itemCountArray)
+            .setPosition(400, 300)
+            .layout();
+        // .drawBounds(this.add.graphics(), 0xff0000)
+    }
+
+}
+
+const config: Phaser.Types.Core.GameConfig = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 1280,
+    height: 720,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        scene: [{
+            key: 'rexUI',
+            plugin: UIPlugin,
+            mapping: 'rexUI'
+        }]
+    }
+};
+
+new Phaser.Game(config)
+</script>
+
--- a/universo-frontend/src/pages/canvas/AddDragDropColumnPanelBehavior.ts
+++ b/universo-frontend/src/pages/canvas/AddDragDropColumnPanelBehavior.ts
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+
+type PanelType = {
+    x: number;
+    y: number;
+    layout: () => void;
+    on: (event: string, callback: Function) => void;
+    setData: (data: any) => void;
+    getData: (key: string) => any;
+    moveFrom: (config: { x: number; y: number; speed: number }) => void;
+};
+
+type PanelsBoxType = {
+    getElement: (element: string) => PanelType[];
+    remove: (panel: PanelType) => void;
+    insertAtPosition: (x: number, y: number, panel: PanelType, config: any) => void;
+    getTopmostSizer: () => { layout: () => void };
+};
+
+const AddDragDropColumnPanelBehavior = (panelsBox: PanelsBoxType) => {
+    const panels = panelsBox.getElement('items');
+    for (let i = 0, cnt = panels.length; i < cnt; i++) {
+        const panel = panels[i];
+        panel
+            .on('sizer.dragstart', function () {
+                panelsBox.remove(panel);
+                panel.layout();
+            })
+            .on('sizer.dragend', function (pointer: any, dragX: number, dragY: number, dropped: boolean) {
+                panelsBox.insertAtPosition(pointer.x, pointer.y, panel, { expand: true });
+                ArrangePanels(panelsBox);
+            });
+    }
+};
+
+const ArrangePanels = (panelsBox: PanelsBoxType) => {
+    const panels = panelsBox.getElement('items');
+
+    for (let i = 0, cnt = panels.length; i < cnt; i++) {
+        const panel = panels[i];
+        panel.setData({ startX: panel.x, startY: panel.y });
+    }
+
+    panelsBox.getTopmostSizer().layout();
+
+    for (let i = 0, cnt = panels.length; i < cnt; i++) {
+        const panel = panels[i];
+        const fromX = panel.getData('startX');
+        const fromY = panel.getData('startY');
+        if (panel.x !== fromX || panel.y !== fromY) {
+            panel.moveFrom({ x: fromX, y: fromY, speed: 300 });
+        }
+    }
+};
+
+export default AddDragDropColumnPanelBehavior;
--- a/universo-frontend/src/pages/canvas/AddDragDropItemBehavior.ts
+++ b/universo-frontend/src/pages/canvas/AddDragDropItemBehavior.ts
+type ItemsBoxType = {
+  getElement: (name: string) => any[];
+  getParentSizer: () => ItemsBoxType;
+  getChildIndex: (item: any) => number;
+  remove: (item: any) => void;
+  insert: (index: number, item: any, options: { expand: boolean }) => void;
+  getTopmostSizer: () => ItemsBoxType;
+};
+
+type ItemType = {
+  on: (event: string, callback: Function) => ItemType;
+  setData: (data: any) => ItemType;
+  getData: (key: string) => any;
+  x: number;
+  y: number;
+  moveFrom: (options: { x: number, y: number, speed: number }) => void;
+};
+
+const AddDragDropItemBehavior = (itemsBox: ItemsBoxType): void => {
+  AddDropZone(itemsBox);
+
+  const items: ItemType[] = itemsBox.getElement('items');
+  for (let item of items) {
+      item
+          .on('sizer.dragstart', function () {
+              const previousItemsBox = item.getParentSizer();
+              item.setData({
+                  itemsBox: previousItemsBox,
+                  index: previousItemsBox.getChildIndex(item)
+              });
+              previousItemsBox.remove(item);
+          })
+          .on('sizer.dragend', function (pointer: any, dragX: number, dragY: number, dropped: boolean) {
+              if (dropped) {
+                  return;
+              }
+
+              const previousItemsBox = item.getData('itemsBox');
+              previousItemsBox.insert(item.getData('index'), item, { expand: true });
+              ArrangeItems(previousItemsBox);
+          })
+          .on('sizer.drop', function (pointer: any, dropZone: any) {
+              const currentItemsBox = dropZone.getData('itemsBox');
+              const previousItemsBox = item.getData('itemsBox');
+
+              currentItemsBox.insertAtPosition(
+                  pointer.x, pointer.y,
+                  item,
+                  { expand: true }
+              );
+
+              ArrangeItems(previousItemsBox, currentItemsBox);
+          });
+  }
+}
+
+const AddDropZone = (itemsBox: ItemsBoxType): void => {
+  const background = itemsBox.getElement('background')[0];
+  background.setInteractive({ dropZone: true });
+  background.setData('itemsBox', itemsBox);
+}
+
+const ArrangeItems = (itemsBox0: ItemsBoxType, itemsBox1?: ItemsBoxType): void => {
+  const items: ItemType[] = [];
+  items.push(...itemsBox0.getElement('items'));
+  if (itemsBox1 && (itemsBox0 !== itemsBox1)) {
+      items.push(...itemsBox1.getElement('items'));
+  }
+
+  for (let item of items) {
+      item.setData({ startX: item.x, startY: item.y });
+  }
+
+  itemsBox0.getTopmostSizer().layout();
+
+  for (let item of items) {
+      const fromX = item.getData('startX');
+      const fromY = item.getData('startY');
+      if ((item.x !== fromX) || (item.y !== fromY)) {
+          item.moveFrom({ x: fromX, y: fromY, speed: 300 });
+      }
+  }
+}
+
+export default AddDragDropItemBehavior;
--- a/universo-frontend/src/pages/canvas/Const.ts
+++ b/universo-frontend/src/pages/canvas/Const.ts
+// Color
+export const COLOR_LIGHT = 0x7b5e57;
+export const COLOR_PRIMARY = 0x4e342e;
+export const COLOR_DARK = 0x260e04;
+
+// Depth
+export const DragObjectDepth = 1;
+export const DefaultDepth = 0;
--- a/universo-frontend/src/pages/canvas/CreateColumnPanel.ts
+++ b/universo-frontend/src/pages/canvas/CreateColumnPanel.ts
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+import { DefaultDepth, DragObjectDepth } from './Const';
+import CreateItemsBox from './CreateItemsBox';
+
+type DialogFunction = (config: any) => any; 
+type RoundRectangleFunction = (config: any) => any;
+type LabelFunction = (config: any) => any;
+type TextFunction = (x: number, y: number, text: string, style: any) => any;
+
+type SceneType = {
+    rexUI: {
+        add: {
+            dialog: DialogFunction,
+            roundRectangle: RoundRectangleFunction,
+            label: LabelFunction
+        }
+    },
+    add: {
+        text: TextFunction
+    }
+}
+
+const CreateColumnPanel = (scene: SceneType, title: string, itemCount: number) => {
+    const panel = scene.rexUI.add.dialog({
+        width: 120,
+        space: { left: 10, right: 10, top: 10, bottom: 10 },
+        background: scene.rexUI.add.roundRectangle({
+            strokeColor: COLOR_DARK,
+        }),
+        title: CreateTitle(scene, title),
+        content: CreateItemsBox(scene, itemCount),
+        proportion: {
+            content: 1
+        }
+    })
+    .setOrigin(0, 0);
+
+    SetDraggable(panel);
+
+    return panel;
+};
+
+const CreateTitle = (scene: SceneType, text: string) => {
+    return scene.rexUI.add.label({
+        background: scene.rexUI.add.roundRectangle({
+            color: COLOR_LIGHT
+        }),
+        text: scene.add.text(0, 0, text, {
+            fontSize: 18
+        }),
+        align: 'left',
+        space: {
+            left: 5, right: 5, top: 5, bottom: 5,
+        },
+    });
+};
+
+const SetDraggable = (panel: any) => {
+    panel
+        .setDraggable({
+            sensor: 'title',
+            target: panel
+        })
+        .on('sizer.dragstart', OnPanelDragStart, panel)
+        .on('sizer.dragend', OnPanelDragEnd, panel);
+};
+
+const OnPanelDragStart = function(this: any) {
+    this.setDepth(DragObjectDepth);
+    this.getElement('background').setStrokeStyle(3, 0xff0000);
+};
+
+const OnPanelDragEnd = function(this: any) {
+    this.setDepth(DefaultDepth);
+    this.getElement('background').setStrokeStyle(2, COLOR_DARK);
+};
+
+export default CreateColumnPanel;
--- a/universo-frontend/src/pages/canvas/CreateColumnPanelsBox.ts
+++ b/universo-frontend/src/pages/canvas/CreateColumnPanelsBox.ts
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+import CreateColumnPanel from './CreateColumnPanel';
+import AddDragDropColumnPanelBehavior from './AddDragDropColumnPanelBehavior';
+
+type Scene = {
+  rexUI: {
+      add: {
+          sizer: (config: SizerConfig) => Sizer
+      }
+  }
+};
+
+type SizerConfig = {
+  orientation: string;
+  space: {
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+  };
+};
+
+type Sizer = {
+  add: (item: any, config: any) => void;
+};
+
+const CreateColumnPanelsBox = (scene: Scene, itemCountArray: number[]): Sizer => {
+  const config: SizerConfig = {
+      orientation: 'x',
+      space: {
+          left: 10, right: 10, top: 10, bottom: 10
+      },
+  };
+
+  const columnPanelsBox: Sizer = scene.rexUI.add.sizer(config);
+  // .addBackground(
+  //     scene.rexUI.add.roundRectangle({
+  //         strokeColor: COLOR_PRIMARY,
+  //         strokeWidth: 3,
+  //     }),
+  //     'background'
+  // )
+
+  for (let i = 0, cnt = itemCountArray.length; i < cnt; i++) {
+      const columnPanel = CreateColumnPanel(scene, `Header ${i}`, itemCountArray[i]);
+      columnPanelsBox.add(
+          columnPanel,
+          { proportion: 0, expand: true }
+      );
+  }
+
+  AddDragDropColumnPanelBehavior(columnPanelsBox); // Убедитесь, что функция AddDragDropColumnPanelBehavior определена где-то в вашем коде
+
+  return columnPanelsBox;
+}
+
+export default CreateColumnPanelsBox;
--- a/universo-frontend/src/pages/canvas/CreateItem.ts
+++ b/universo-frontend/src/pages/canvas/CreateItem.ts
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+import { DefaultDepth, DragObjectDepth } from './Const';
+
+type SceneType = {
+    rexUI: {
+        add: {
+            label: (config: LabelConfig) => Label,
+            roundRectangle: (config: RoundRectangleConfig) => any
+        }
+    },
+    add: {
+        text: (x: number, y: number, text: string, style: TextStyle) => any
+    }
+};
+
+type LabelConfig = {
+    background: any;
+    text: any;
+    align: string;
+    space: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+};
+
+type RoundRectangleConfig = {
+    radius: number;
+    color: string;
+};
+
+type TextStyle = {
+    fontSize: number;
+};
+
+type Label = {
+    setDraggable: (config: any) => Label;
+    on: (event: string, callback: Function, context: any) => Label;
+    setDepth: (depth: number) => void;
+    getElement: (element: string) => any;
+};
+
+const CreateItem = (scene: SceneType, text: string): Label => {
+    const item: Label = scene.rexUI.add.label({
+        background: scene.rexUI.add.roundRectangle({
+            radius: 10,
+            color: COLOR_PRIMARY
+        }),
+        text: scene.add.text(0, 0, text, {
+            fontSize: 18
+        }),
+        align: 'center',
+        space: {
+            left: 5, right: 5, top: 5, bottom: 5,
+        },
+    });
+
+    SetDraggable(item);
+
+    return item;
+};
+
+const SetDraggable = (item: Label) => {
+    item
+        .setDraggable({
+            sensor: item,
+            target: item
+        })
+        .on('sizer.dragstart', OnItemDragStart, item)
+        .on('sizer.dragend', OnItemDragEnd, item);
+};
+
+const OnItemDragStart = function(this: Label) {
+    this.setDepth(DragObjectDepth);
+    this.getElement('background').setStrokeStyle(3, 0xff0000);
+};
+
+const OnItemDragEnd = function(this: Label) {
+    this.setDepth(DefaultDepth);
+    this.getElement('background').setStrokeStyle();
+};
+
+export default CreateItem;
--- a/universo-frontend/src/pages/canvas/CreateItemsBox.ts
+++ b/universo-frontend/src/pages/canvas/CreateItemsBox.ts
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+import CreateItem from './CreateItem';
+import AddDragDropItemBehavior from './AddDragDropItemBehavior';
+
+type SceneType = {
+    rexUI: {
+        add: {
+            sizer: (config: SizerConfig) => Sizer,
+            roundRectangle: (config: any) => any
+        }
+    }
+};
+
+type SizerConfig = {
+    orientation: string;
+    space: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        item?: number;
+    };
+};
+
+type Sizer = {
+    add: (item: any, config: any) => void;
+    addBackground: (item: any, key: string) => void;
+};
+
+const CreateItemsBox = (scene: SceneType, itemCount: number): Sizer => {
+    const itemsBox: Sizer = scene.rexUI.add.sizer({
+        orientation: 'y',
+        space: {
+            left: 5, right: 5, top: 5, bottom: 5,
+            item: 5
+        },
+    });
+
+    itemsBox.addBackground(
+        scene.rexUI.add.roundRectangle({}),
+        'background'
+    );
+
+    for (let i = 0; i < itemCount; i++) {
+        itemsBox.add(
+            CreateItem(scene, i.toString()),
+            { proportion: 0, expand: true }
+        );
+    }
+
+    AddDragDropItemBehavior(itemsBox);
+
+    return itemsBox;
+};
+
+export default CreateItemsBox;
--- a/universo-frontend/src/pages/canvas/CreateScrollablePanel.ts
+++ b/universo-frontend/src/pages/canvas/CreateScrollablePanel.ts
+// import 'phaser';
+// import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
+import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
+import { DefaultDepth, DragObjectDepth } from './Const';
+import CreateColumnPanelsBox from './CreateColumnPanelsBox';
+
+type Scene = {
+  rexUI: {
+      add: {
+          sizer: (config: SizerConfig) => Sizer
+      }
+  }
+};
+
+type SizerConfig = {
+  orientation: string;
+  space: {
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+  };
+};
+
+type Sizer = {
+  add: (item: any, config: any) => void;
+};
+
+const CreateScrollablePanel = (scene: Scene, itemCountArray: any[]): ScrollablePanel => {
+  const config: ScrollablePanelConfig = {
+      width: 400,
+      height: 400,
+      background: scene.rexUI.add.roundRectangle({
+          radius: 10,
+          strokeColor: COLOR_DARK
+      }),
+      panel: {
+          child: CreateColumnPanelsBox(scene, itemCountArray),
+          mask: {
+              padding: 2,
+              updateMode: 'everyTick'
+          },
+      },
+      sliderX: {
+          track: { width: 20, radius: 10, color: COLOR_DARK },
+          thumb: { radius: 13, color: COLOR_LIGHT }
+      },
+      sliderY: {
+          track: { width: 20, radius: 10, color: COLOR_DARK },
+          thumb: { radius: 13, color: COLOR_LIGHT }
+      },
+      scrollerX: false,
+      scrollerY: false,
+      space: {
+          left: 10, right: 10, top: 10, bottom: 10,
+          sliderX: 10, sliderY: 10
+      },
+  };
+
+  return scene.rexUI.add.scrollablePanel(config);
+}
+
+export default CreateScrollablePanel;
--- a/universo-frontend/src/router/routes.ts
+++ b/universo-frontend/src/router/routes.ts
@@ -17,6 +17,7 @@ const routes: RouteRecordRaw[] = [
    children: [
      // { path: '', component: () => import('pages/IndexPage.vue') },
      { path: '//privacypolicy', component: () => import('pages/PrivacyPolicy.vue'),meta: { requiresAuth: false }, },
+      { path: '/actualcanvas', component: () => import('pages/canvas/ActualCanvas.vue') },
      { path: '/endlesscanvas', component: () => import('pages/EndlessPage.vue'),meta: { requiresAuth: true }, },
      { path: '/user', component: () => import('pages/UserProfile.vue'),meta: { requiresAuth: true }, },