Коммит fbe94f87 создал по автору Anton Medvedev's avatar Anton Medvedev
Просмотр файлов

Merge branch 'main' into 'main' 

#100 Холст растянут на весь экран страницы проекта

See merge request teknokomo/universo-monorepo!43
владельцы 0825a53e a65029d1
Скрыть пробелы
Построчно Рядом
universo-frontend/src/pages/canvas/ActualCanvas.vue
Просмотр файла @ fbe94f87
<template>
<div id="phaser-container"></div>
<div id="phaser-container" style="min-height: 100vh"></div>
</template>
<script lang="ts">
......@@ -10,7 +10,8 @@ import CreateScrollablePanel from './CreateScrollablePanel';
import { useKanvasoStore } from 'src/stores/kanvaso';
import { mapActions, mapState } from 'pinia';
import { objekto } from './mock';
// import PreloadScene1 from './PreloadScene1';
import PreloadScene from './PreloadScene';
import BootScene from './BootScene';
import { KanvasojKanvaso, TreeNode } from 'src/types/stores/kanvaso';
declare const window: {
......@@ -37,6 +38,7 @@ class EndlessCanvas extends Phaser.Scene {
create(): void {
this.cameras.main.setBackgroundColor('#abcdef');
if (window.objekto) {
const topPanel = CreateScrollablePanel(this, window.objekto)
.setPosition(400, 300)
......@@ -49,8 +51,8 @@ class EndlessCanvas extends Phaser.Scene {
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
parent: 'phaser-container',
width: 1280,
height: 720,
width: window.innerWidth - 205,
height: window.innerHeight,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
......@@ -129,6 +131,12 @@ export default {
this.$router.replace({ name: 'projects' });
});
await this.onGetKanvasoObjekto({ kanvaso_Uuid: this.projectUuid });
const resizeHandler = () => {
game.scale.resize(window.innerWidth, window.innerHeight);
};
window.addEventListener('resize', resizeHandler);
const game = new Phaser.Game(config);
},
beforeUnmount() {
......
universo-frontend/src/pages/canvas/BootScene.ts 0 → 100644
Просмотр файла @ fbe94f87
class BootScene extends Phaser.Scene {
constructor() {
super({ key: 'BootScene' });
}
create() {
// Установка фонового цвета для сцены
this.cameras.main.setBackgroundColor('#abcdef');
// Создание текста для отображения процента загрузки
let loadingText = this.make.text({
x: this.cameras.main.width / 2,
y: this.cameras.main.height / 2 - 20,
text: 'Loading...',
style: {
font: '20px Arial',
color: '#ffffff',
},
});
loadingText.setOrigin(0.5, 0.5);
// Переход к следующей сцене
this.scene.start('PreloadScene');
}
}
export default BootScene;
universo-frontend/src/pages/canvas/CreateDropDownList.ts
Просмотр файла @ fbe94f87
......@@ -8,7 +8,7 @@ import CreatePopupList from './CreatePopupList';
const CreateDropDownList = function (
scene: Phaser.Scene,
): Phaser.GameObjects.Text {
const options = ['Add column', 'Rename board'];
const options = ['Добавить столбец', 'Переименовать доску'];
const maxTextSize = GetMaxTextObjectSize(scene, options);
const label = scene.rexUI.add
.label({
......@@ -37,7 +37,7 @@ const CreateDropDownList = function (
const menuY = label.bottom;
menu = CreatePopupList(scene, menuX, menuY, options, function (button) {
console.log('Click', button.text); // Добавленный console.log
if (button.text === 'Добавить колонку') {
if (button.text === 'Добавить столбец') {
// Ваш код для добавления новой колонки
} else if (button.text === 'Переименовать доску') {
// Ваш код для переименования доски
......
universo-frontend/src/pages/canvas/CreatePopupList.ts
Просмотр файла @ fbe94f87
......@@ -42,7 +42,7 @@ const CreatePopupList = function (
});
menu.on('button.click', function (button) {
if (button.text === 'Add column') {
if (button.text === 'Добавить столбец') {
CreateRequestModalColumn(scene)
.setPosition(400, 300)
.layout()
......@@ -56,7 +56,7 @@ const CreatePopupList = function (
.then(function (data) {
console.log(data);
});
} else if (button.text === 'Rename board') {
} else if (button.text === 'Переименовать доску') {
CreateRequestModalBoard(scene)
.setPosition(400, 300)
.layout()
......
universo-frontend/src/pages/canvas/CreateRequestModalBoard.ts
Просмотр файла @ fbe94f87
......@@ -63,7 +63,7 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
const cancelButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_DARK),
text: scene.add.text(0, 0, 'Cancel', { fontSize: '24px' }),
text: scene.add.text(0, 0, 'Отменить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
......@@ -71,7 +71,7 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
const saveButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
text: scene.add.text(0, 0, 'Save', { fontSize: '24px' }),
text: scene.add.text(0, 0, 'Сохранить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
......@@ -83,7 +83,7 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Editing an object', {
text: scene.add.text(0, 0, 'Редактирование объекта', {
fontSize: '24px',
color: '#000000',
}),
......
universo-frontend/src/pages/canvas/CreateRequestModalColumn.ts
Просмотр файла @ fbe94f87
......@@ -63,7 +63,7 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
const cancelButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_DARK),
text: scene.add.text(0, 0, 'Cancel', { fontSize: '24px' }),
text: scene.add.text(0, 0, 'Отменить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
......@@ -71,7 +71,7 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
const saveButton = scene.rexUI.add
.label({
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
text: scene.add.text(0, 0, 'Save', { fontSize: '24px' }),
text: scene.add.text(0, 0, 'Сохранить', { fontSize: '24px' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
......@@ -83,7 +83,7 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Editing an object', {
text: scene.add.text(0, 0, 'Редактирование объекта', {
fontSize: '24px',
color: '#000000',
}),
......
universo-frontend/src/pages/canvas/CreateScrollablePanel.ts
Просмотр файла @ fbe94f87
......@@ -77,64 +77,62 @@ const CreateScrollablePanel = (
header: CreateHeader(scene, objekto ? objekto[0]?.nomo?.enhavo : ''),
};
const config2: ScrollablePanelConfig = {
// width: 400,
// height: 400,
adaptThumbSizeMode: true,
// const config2: ScrollablePanelConfig = {
// // width: 400,
// // height: 400,
panel: {
child: CreateColumnPanelsBox(
scene,
objekto ? objekto[0]?.children[0] : {},
),
mask: {
// padding: 2,
updateMode: 'everyTick',
},
},
sliderX: {
track: { width: 20, radius: 10, color: COLOR_DARK },
thumb: { radius: 13, color: COLOR_LIGHT },
hideUnscrollableSlider: true,
input: 'click',
},
sliderY: {
track: { width: 20, radius: 10, color: COLOR_DARK },
thumb: { radius: 13, color: COLOR_LIGHT },
hideUnscrollableSlider: true,
input: 'click',
},
scrollerX: true,
scrollerY: true,
space: {
// left: 10,
// right: 10,
// top: 10,
// bottom: 10,
sliderX: 10,
sliderY: 10,
},
header: CreateHeader(scene, objekto ? objekto[0]?.nomo?.enhavo : ''),
};
// panel: {
// child: CreateColumnPanelsBox(
// scene,
// objekto ? objekto[0]?.children[0] : {},
// ),
// mask: {
// // padding: 2,
// updateMode: 'everyTick',
// },
// },
// sliderX: {
// track: { width: 20, radius: 10, color: COLOR_DARK },
// thumb: { radius: 13, color: COLOR_LIGHT },
// hideUnscrollableSlider: true,
// input: 'click',
// },
// sliderY: {
// track: { width: 20, radius: 10, color: COLOR_DARK },
// thumb: { radius: 13, color: COLOR_LIGHT },
// hideUnscrollableSlider: true,
// input: 'click',
// },
// scrollerX: true,
// scrollerY: true,
// space: {
// // left: 10,
// // right: 10,
// // top: 10,
// // bottom: 10,
// sliderX: 10,
// sliderY: 10,
// },
// header: CreateHeader(scene, objekto ? objekto[0]?.nomo?.enhavo : ''),
// };
// Создаем ScrollablePanel
const scrollablePanel = scene.rexUI.add.scrollablePanel(config);
const scrollablePanel2 = scene.rexUI.add.scrollablePanel(config2);
// const scrollablePanel2 = scene.rexUI.add.scrollablePanel(config2);
// Устанавливаем возможность перетаскивания
scrollablePanel.setDraggable('header');
scrollablePanel2.setDraggable('header');
// scrollablePanel2.setDraggable('header');
// Вызываем метод layout для обновления компоновки
scrollablePanel.layout();
scrollablePanel2.layout();
// scrollablePanel2.layout();
// Добавляем контроллер для изменения размера
AddResizeController(scrollablePanel);
AddResizeController(scrollablePanel2);
// AddResizeController(scrollablePanel2);
scrollablePanel.add(scrollablePanel2);
console.log('scrollablePanel :>> ', scrollablePanel);
// scrollablePanel.add(scrollablePanel2);
return scrollablePanel;
};
......
universo-frontend/src/pages/canvas/PreloadScene.ts
Просмотр файла @ fbe94f87
......@@ -3,58 +3,12 @@ class PreloadScene extends Phaser.Scene {
super({ key: 'PreloadScene' });
}
preload() {
// Загрузка фонового изображения для экрана загрузки
this.load.image('background', 'images/background.png');
// Загрузка других ресурсов игры
// this.load.image('anotherImage', 'images/anotherImage.png');
// ... другие ресурсы
// Создание текста для отображения процента загрузки
let loadingText = this.make.text({
x: this.cameras.main.width / 2,
y: this.cameras.main.height / 2 - 20,
text: 'Loading...',
style: {
font: '20px Arial',
color: '#ffffff',
},
});
loadingText.setOrigin(0.5, 0.5);
// Создание прогресс-бара
let progressBar = this.add.graphics();
// Обновление прогресс-бара по мере загрузки файлов
this.load.on('progress', (value) => {
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(
this.cameras.main.width / 4,
this.cameras.main.height / 2,
(this.cameras.main.width / 2) * value,
20,
);
});
// Удаление прогресс-бара и текста загрузки после завершения загрузки
this.load.on('complete', () => {
progressBar.destroy();
loadingText.destroy();
});
}
preload() {}
create() {
this.cameras.main.setBackgroundColor('#abcdef');
// Добавление фонового изображения на экран загрузки
this.add.image(
this.cameras.main.width / 2,
this.cameras.main.height / 2,
'background',
);
// Переход к следующей сцене после завершения загрузки
this.scene.start('examples');
this.scene.start('endless-canvas');
}
}
export default PreloadScene;
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать