Коммит 3bf17a73 создал по автору TraumatiXXX's avatar TraumatiXXX
Просмотр файлов

#112 Добавлена функция создания кнопок меню

владелец cb7880aa
...@@ -24,7 +24,8 @@ import { mapActions, mapState } from 'pinia'; ...@@ -24,7 +24,8 @@ import { mapActions, mapState } from 'pinia';
// import PreloadScene from './PreloadScene'; // import PreloadScene from './PreloadScene';
// import BootScene from './BootScene'; // import BootScene from './BootScene';
import { KanvasojKanvaso, TreeNode } from '../../../types/stores/kanvaso'; import { KanvasojKanvaso, TreeNode } from '../../../types/stores/kanvaso';
import CreateToolbar from '../../toolbar/CreateToolbar'; // import CreateToolbar from '../../toolbar/CreateToolbar';
import CreateMainMenu from '../../main-menu/MainMenu';
import { watch, computed } from 'vue'; import { watch, computed } from 'vue';
import { Router } from 'vue-router'; import { Router } from 'vue-router';
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin'; import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
...@@ -36,7 +37,8 @@ declare const window: { ...@@ -36,7 +37,8 @@ declare const window: {
class EndlessCanvas extends Phaser.Scene { class EndlessCanvas extends Phaser.Scene {
rexUI: UIPlugin; rexUI: UIPlugin;
registry: Phaser.Data.DataManager; registry: Phaser.Data.DataManager;
toolbarWidth: number; // toolbarWidth: number;
mainMenuHeight: number;
store: any; store: any;
router: Router; router: Router;
objectFields: string[]; objectFields: string[];
...@@ -57,7 +59,8 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -57,7 +59,8 @@ class EndlessCanvas extends Phaser.Scene {
'parentUuid', 'parentUuid',
'hasParent', 'hasParent',
]; ];
this.toolbarWidth = 50; //this.toolbarWidth = 50;
this.mainMenuHeight = 48;
} }
preload() { preload() {
...@@ -69,6 +72,7 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -69,6 +72,7 @@ class EndlessCanvas extends Phaser.Scene {
); );
this.load.image('icon', 'phaser/stretching_icon.png'); this.load.image('icon', 'phaser/stretching_icon.png');
this.load.image('logo', 'phaser/logo_202x200.png'); this.load.image('logo', 'phaser/logo_202x200.png');
this.load.image('universo', 'phaser/universo_96x96.png');
//заполняем registry объектами холста //заполняем registry объектами холста
this.store.getMap.forEach((element) => { this.store.getMap.forEach((element) => {
this.registry.set(element.uuid, element); this.registry.set(element.uuid, element);
...@@ -104,8 +108,23 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -104,8 +108,23 @@ class EndlessCanvas extends Phaser.Scene {
create(): void { create(): void {
const scene = this; const scene = this;
const buttonArray = [
{
image: 'logo',
callback: function () {
scene.router.push('/projects');
}
},
{
image: 'universo',
callback: function () { }
},
];
//@ts-ignore
//const toolbar = CreateToolbar(scene, scene.router);
//@ts-ignore //@ts-ignore
const toolbar = CreateToolbar(scene, scene.router); const arr = CreateMainMenu(scene, buttonArray);
// const back = this.add // const back = this.add
// .text(0, 0, '<<', { // .text(0, 0, '<<', {
// fontSize: '24px', // fontSize: '24px',
...@@ -125,7 +144,8 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -125,7 +144,8 @@ class EndlessCanvas extends Phaser.Scene {
let parentWidth = parent.offsetWidth; let parentWidth = parent.offsetWidth;
let parentHeight = parent.offsetHeight; let parentHeight = parent.offsetHeight;
const numberOfPanels = scene.store.getTree.length; const numberOfPanels = scene.store.getTree.length;
let panelWidth = parentWidth - scene.toolbarWidth; //let panelWidth = parentWidth - scene.toolbarWidth;
let panelWidth = parentWidth - scene.mainMenuHeight;
let panelHeight = parentHeight / numberOfPanels; let panelHeight = parentHeight / numberOfPanels;
let topPanelsArr = CreateMoreScrollablePanels( let topPanelsArr = CreateMoreScrollablePanels(
...@@ -138,7 +158,8 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -138,7 +158,8 @@ class EndlessCanvas extends Phaser.Scene {
for (let i = 0; i < topPanelsArr.length; i++) { for (let i = 0; i < topPanelsArr.length; i++) {
topPanelsArr[i] topPanelsArr[i]
.setPosition( .setPosition(
parentWidth / 2 + scene.toolbarWidth / 2, // parentWidth / 2 + scene.toolbarWidth / 2,
parentWidth / 2 + scene.mainMenuHeight / 2,
panelHeight / 2 + i * panelHeight, panelHeight / 2 + i * panelHeight,
) )
.layout(); .layout();
......
import { EndlessCanvas } from 'src/types/kanban_types';
function CreateMainMenu(scene: EndlessCanvas, buttonArray) {
let mainMenuHeight = scene.mainMenuHeight; // Ширина главного меню
const arr = [];
buttonArray.forEach((element, index) => {
const button = scene.add.image(0, 0, element.image).setDepth(1010);
button.setScale(mainMenuHeight / button.height);
button.setPosition(
button.displayWidth / 2 + index * mainMenuHeight + index * 10 + 5,
button.displayHeight / 2 + 5,
);
button.setInteractive({ cursor: 'pointer' });
button.on('pointerdown', element.callback);
arr.push(button);
});
return arr;
}
export default CreateMainMenu;
...@@ -7,6 +7,7 @@ interface UIPluginExt extends UIPlugin {} ...@@ -7,6 +7,7 @@ interface UIPluginExt extends UIPlugin {}
interface EndlessCanvas extends Phaser.Scene { interface EndlessCanvas extends Phaser.Scene {
rexUI: UIPluginExt; rexUI: UIPluginExt;
toolbarWidth?: number; toolbarWidth?: number;
mainMenuHeight?: number;
store?: Pinia; store?: Pinia;
router?: Router; router?: Router;
} }
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать