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

Merge branch 'main' into 'main' 

#25 Для доски добавлено модальное окно

See merge request teknokomo/universo-monorepo!22
владельцы e01bee79 14d05b02
Развернуть все Скрыть пробелы
Построчно Рядом
universo-frontend/package-lock.json
Просмотр файла @ b69ee706
......@@ -4543,9 +4543,9 @@
}
},
"node_modules/phaser3-rex-plugins": {
"version": "1.60.4",
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.60.4.tgz",
"integrity": "sha512-EzcwHnjmGgnFTZxTeyTTZDqTXdOevxujttpZjgzJGJXfGKKPK1vBtRP2P52DcEaAyKWdn5srbP53yOir+zE98g==",
"version": "1.60.5",
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.60.5.tgz",
"integrity": "sha512-4H01cj2HdN9aUlSlsFncENOV1nk+LZEdMJJ5fDch4cJqNwE0xFpetBdCJ+0H9I3hK1rvHxw58QABmmT5aiHl+g==",
"dependencies": {
"eventemitter3": "^3.1.2",
"handlebars": "^4.7.7",
......
universo-frontend/package.json
Просмотр файла @ b69ee706
......@@ -27,7 +27,7 @@
"graphql": "^15.8.0",
"graphql-tag": "^2.12.6",
"phaser": "^3.60.0",
"phaser3-rex-plugins": "^1.60.4",
"phaser3-rex-plugins": "^1.60.5",
"pinia": "^2.1.6",
"quasar": "^2.6.0",
"vue": "^3.0.0",
......
universo-frontend/src/layouts/MainLayout.vue
Просмотр файла @ b69ee706
......@@ -91,6 +91,7 @@ const linksList = [
},
];
export default defineComponent({
name: 'MainLayout',
......
universo-frontend/src/pages/EndlessPage.vue
Просмотр файла @ b69ee706
......@@ -31,58 +31,53 @@ class Demo extends Phaser.Scene {
}
create(): void {
const scrollablePanel = this.rexUI.add.scrollablePanel({
x: 400,
y: 300,
width: 400,
height: 400,
scrollMode: 2, // Добавлено для активации обеих полос прокрутки
background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_PRIMARY).setStrokeStyle(2, COLOR_DARK),
panel: {
child: CreatePanel(this),
mask: {
padding: 1
},
},
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'),
}),
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
panel: 10,
sliderX: 10, // Добавлено пространство для горизонтальной полосы прокрутки
sliderY: 10
const scrollablePanel = this.rexUI.add.scrollablePanel({
x: 400,
y: 300,
width: 400,
height: 400,
scrollMode: 2,
background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_PRIMARY).setStrokeStyle(1, COLOR_DARK),
panel: {
child: CreatePanel(this),
mask: {
padding: 1
},
scrollerX: false,
scrollerY: false,
},
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: CreateHeader(this),
space: {
left: 10,
right: 10,
top: 10,
bottom: 10,
panel: 10,
sliderX: 10,
sliderY: 10
},
scrollerX: false,
scrollerY: false,
})
.setDraggable('header')
.setDraggable('header') // Draggable-header
.layout();
AddResizeController(scrollablePanel);
const options = ['A', 'BB', 'CCC', 'DDDD'];
const dropDownList = CreateDropDownList(this, scrollablePanel.width - -150, 125, options);
dropDownList.layout();
this.add.text(0, 580, 'Drag-drop any item to any sizer');
scrollablePanel.add(dropDownList);
}
......@@ -138,6 +133,8 @@ const CreateLabel = (scene: Phaser.Scene, text: string): Phaser.GameObjects.Cont
background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
text: scene.add.text(0, 0, text, {
fontSize: 18
}),
align: 'center',
space: {
......@@ -226,12 +223,36 @@ bottomRighterController
sizer.pin(bottomRighterController);
}
const CreateDropDownList = (scene: Phaser.Scene, x: number, y: number, options: string[]): Phaser.GameObjects.Container => {
const CreateHeader = function (scene: Phaser.Scene): Phaser.GameObjects.Container {
const sizer = scene.rexUI.add.sizer({
orientation: 'x'
})
.addBackground(scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK))
const headerLabel = scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Header'),
})
const dropDownButton = CreateDropDownList(scene)
sizer
.add(
headerLabel,
{ proportion: 1, expand: true }
)
.add(
dropDownButton,
{ proportion: 0, expand: true }
)
return sizer;
}
const CreateDropDownList = function (scene: Phaser.Scene): Phaser.GameObjects.Text {
const options = ['Добавить колонку', 'Переименовать доску'];
const maxTextSize = GetMaxTextObjectSize(scene, options);
const label = scene.rexUI.add.label({
x: x, y: y,
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY).setAlpha(0),
icon: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 10, COLOR_LIGHT),
text: CreateTextObject(scene, '...').setFixedSize(maxTextSize.width, maxTextSize.height),
space: {
left: 10,
......@@ -245,11 +266,16 @@ const CreateDropDownList = (scene: Phaser.Scene, x: number, y: number, options:
let menu: Phaser.GameObjects.Container | undefined;
scene.rexUI.add.click(label).on('click', () => {
if (!menu) {
if (!menu || !menu.scene) {
const menuX = label.getElement('text').getTopLeft().x;
const menuY = label.bottom;
menu = CreatePopupList(scene, menuX, menuY, options, (button: Phaser.GameObjects.Container) => {
label.setData('value', button.text);
menu = CreatePopupList(scene, menuX, menuY, options, function (button) {
console.log('Click', button.text); // Добавленный console.log
if (button.text === 'Добавить колонку') {
// Ваш код для добавления новой колонки
} else if (button.text === 'Переименовать доску') {
// Ваш код для переименования доски
}
menu?.collapse();
menu = undefined;
});
......@@ -262,7 +288,261 @@ const CreateDropDownList = (scene: Phaser.Scene, x: number, y: number, options:
return label;
};
const CreatePopupList = (scene: Phaser.Scene, x: number, y: number, options: string[], onClick: (button: Phaser.GameObjects.Container) => void): Phaser.GameObjects.Container => {
const CreateModalLabel = (scene: Phaser.Scene, text: string): Phaser.GameObjects.Container => {
const normalBackground = scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, 0xffffff, 0.0);
normalBackground.setStrokeStyle(2, 0x000000); // Чёрная обводка
const hoverBackground = scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, 0xffffff, 0.0);
hoverBackground.setStrokeStyle(2, 0x000000); // Чёрная обводка
const label = scene.rexUI.add.label({
background: normalBackground,
text: scene.add.text(0, 0, text, {
fontSize: 18,
color: '#000000' // Чёрный текст
}),
align: 'center',
space: {
left: 5,
right: 5,
top: 5,
bottom: 5,
},
})
.on('button.over', function (button, groupName, index, pointer, event) {
button.getElement('background').destroy();
button.setElement('background', hoverBackground);
})
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').destroy();
button.setElement('background', normalBackground);
});
return label;
}
const CreateModalBoard = (scene: Phaser.Scene): any => {
const content = '1';
const textArea = scene.rexUI.add.textAreaInput({
x: 400,
y: 300,
width: 280,
height: 20,
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY),
text: {
background: {
stroke: 'black',
// 'focus.stroke': 'red',
},
style: {
fontSize: 20,
backgroundBottomY: 1,
backgroundHeight: 20,
'cursor.color': 'black',
'cursor.backgroundColor': 'white',
color: '#000000'
},
},
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
text: 10,
header: 0,
footer: 0,
},
mouseWheelScroller: {
focus: false,
speed: 0.1,
},
content: content,
})
.layout()
.on('textchange', function (text: string) {
console.log(`Content: '${text}'`);
});
textArea.setDepth(2);
const separator = scene.add.rectangle(0, 0, 280, 2, 0x000000);
const dialog = scene.rexUI.add.dialog({
background: scene.rexUI.add.roundRectangle(0, 0, 100, 100, 20, 0xffffff).setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Редактирование объекта', {
fontSize: '24px',
color: '#000000'
}),
space: {
left: 15,
right: 15,
top: 10,
bottom: 10
}
}),
content: textArea,
actions: [
CreateModalLabel(scene, 'Отменить'),
CreateModalLabel(scene, 'Сохранить')
],
space: {
title: 25,
content: 25,
action: 15,
left: 20,
right: 20,
top: 20,
bottom: 20,
},
align: {
actions: 'right',
},
expand: {
content: false,
}
})
.on('button.over', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle(1, 0xffffff);
})
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
return dialog;
}
const CreateModalColumn = (scene: Phaser.Scene): any => {
const content = '1';
const textArea = scene.rexUI.add.textAreaInput({
x: 400,
y: 300,
width: 280,
height: 20,
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY),
text: {
background: {
stroke: 'black',
// 'focus.stroke': 'red',
},
style: {
fontSize: 20,
backgroundBottomY: 1,
backgroundHeight: 20,
'cursor.color': 'black',
'cursor.backgroundColor': 'white',
color: '#000000'
},
},
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
text: 10,
header: 0,
footer: 0,
},
mouseWheelScroller: {
focus: false,
speed: 0.1,
},
content: content,
})
.layout()
.on('textchange', function (text: string) {
console.log(`Content: '${text}'`);
});
textArea.setDepth(2);
const separator = scene.add.rectangle(0, 0, 280, 2, 0x000000);
const dialog = scene.rexUI.add.dialog({
background: scene.rexUI.add.roundRectangle(0, 0, 100, 100, 20, 0xffffff).setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Редактирование объекта', {
fontSize: '24px',
color: '#000000'
}),
space: {
left: 15,
right: 15,
top: 10,
bottom: 10
}
}),
content: textArea,
actions: [
CreateModalLabel(scene, 'Отменить'),
CreateModalLabel(scene, 'Сохранить')
],
space: {
title: 25,
content: 25,
action: 15,
left: 20,
right: 20,
top: 20,
bottom: 20,
},
align: {
actions: 'right',
},
expand: {
content: false,
}
})
.on('button.over', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle(1, 0xffffff);
})
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
return dialog;
}
const CreatePopupList = function (scene: Phaser.Scene, x: number, y: number, options: string[], onClick: (button: Phaser.GameObjects.Text) => void): Phaser.GameObjects.Container {
const items = options.map(option => ({ label: option }));
const menu = scene.rexUI.add.menu({
x: x,
......@@ -292,12 +572,43 @@ const CreatePopupList = (scene: Phaser.Scene, x: number, y: number, options: str
}
});
menu.on('button.click', onClick);
menu.on('button.click', function(button) {
if (button.text === 'Добавить колонку') {
CreateModalColumn(scene)
.setPosition(400, 300)
.layout()
.modalPromise({
manaulClose: true,
duration: {
in: 500,
out: 500
}
})
.then(function (data) {
console.log(data);
});
} else if (button.text === 'Переименовать доску') {
CreateModalBoard(scene)
.setPosition(400, 300)
.layout()
.modalPromise({
manaulClose: true,
duration: {
in: 500,
out: 500
}
})
.then(function (data) {
console.log(data);
});
}
menu.collapse();
})
return menu;
};
const GetMaxTextObjectSize = (scene: Phaser.Scene, contentArray: string[]): { width: number, height: number } => {
const GetMaxTextObjectSize = function (scene: Phaser.Scene, contentArray: string[]): { width: number, height: number } {
const textObject = CreateTextObject(scene, '');
let width = 0, height = 0;
for (const content of contentArray) {
......@@ -309,7 +620,7 @@ const GetMaxTextObjectSize = (scene: Phaser.Scene, contentArray: string[]): { wi
return { width, height };
};
const CreateTextObject = (scene: Phaser.Scene, text: string): Phaser.GameObjects.Text => {
const CreateTextObject = function (scene: Phaser.Scene, text: string): Phaser.GameObjects.Text {
return scene.add.text(0, 0, text, {
fontSize: '20px'
});
......
universo-frontend/src/pages/PhaserTest.vue удалено 100644 → 0
Просмотр файла @ e01bee79
Это отличие свёрнуто
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать