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

#101 Сделан вывод всех данных на доске из mock

владелец 857c756a
Развернуть все Скрыть пробелы
Построчно Рядом
universo-frontend/src/pages/ProjectsPage.vue
Просмотр файла @ 02cd453b
......@@ -54,6 +54,14 @@
>Удалить</q-item
>
<q-item clickable>Настройки</q-item>
<q-item
clickable
:to="{
name: 'endless3',
params: { uuid: project.node.uuid },
}"
>EndlessCanvas</q-item
>
</q-menu></q-btn
>
</q-item-section>
......
universo-frontend/src/pages/canvas/ActualCanvas.vue
Просмотр файла @ 02cd453b
......@@ -6,8 +6,11 @@
import 'phaser';
// import 'phaser3-rex-plugins/templates/ui/ui-plugin';
// import 'phaser3-rex-plugins/templates/ui/ui-components';
import CreateScrollablePanel from './CreateScrollablePanel';
import { useKanvasoStore } from 'src/stores/kanvaso';
import { mapActions, mapState } from 'pinia';
import { objekto } from './mock';
class Demo extends Phaser.Scene {
rexUI: any;
constructor() {
......@@ -28,9 +31,8 @@ class Demo extends Phaser.Scene {
create(): void {
this.cameras.main.setBackgroundColor('#abcdef');
const itemCountArray: number[] = [20, 5, 10, 0, 10];
//@ts-ignore
const topPanel = CreateScrollablePanel(this, itemCountArray)
const topPanel = CreateScrollablePanel(this, window.objekto)
.setPosition(400, 300)
.layout();
// .drawBounds(this.add.graphics(), 0xff0000)
......@@ -62,8 +64,63 @@ const config: Phaser.Types.Core.GameConfig = {
export default {
name: 'YourComponentName',
mounted() {
data() {
return {
wsSubscribe: null,
};
},
computed: {
...mapState(useKanvasoStore, ['getTree']),
...mapState(useKanvasoStore, {
project: 'getKanvaso',
kanvasoTree: 'getTree',
}),
// ...mapState(useCurrentUserStore, { userId: 'getUserId' }),
currentProject() {
return this.project ? this.project[0]?.node : null;
},
projectUuid() {
return this.$route?.params?.uuid || '';
},
},
watch: {
getTree(val) {
//@ts-ignore
window.objekto = val;
},
},
methods: {
...mapActions(useKanvasoStore, [
'onGetKanvasoFull',
'onEditKanvasoObjekto',
'onEditKanvaso',
'onEditKanvasoLigilo',
'onGetKanvasoObjekto',
'onKanvasoSubscribe',
]),
},
async mounted() {
await this.onGetKanvasoFull({ uuid: this.projectUuid })
.then((result) => {
if (result.data.kanvasojKanvaso.edges.length === 0) {
throw new Error(result);
}
this.onKanvasoSubscribe({
kanvasoj: [this.currentProject.objId],
}).then((data) => {
this.wsSubscribe = data;
});
})
.catch((err) => {
console.log('error get kanvaso full :>> ', err);
this.$router.replace({ name: 'projects' });
});
this.onGetKanvasoObjekto({ kanvaso_Uuid: this.projectUuid });
const game = new Phaser.Game(config);
},
beforeUnmount() {
this.wsSubscribe.unsubscribe();
},
};
</script>
universo-frontend/src/pages/canvas/CreateColumnPanel.ts
Просмотр файла @ 02cd453b
......@@ -25,7 +25,7 @@ type SceneType = {
const CreateColumnPanel = (
scene: SceneType,
title: string,
itemCount: number
cards
) => {
const panel = scene.rexUI.add
.dialog({
......@@ -35,7 +35,7 @@ const CreateColumnPanel = (
strokeColor: COLOR_DARK,
}),
title: CreateTitle(scene, title),
content: CreateItemsBox(scene, itemCount),
content: CreateItemsBox(scene, cards),
proportion: {
content: 1,
},
......
universo-frontend/src/pages/canvas/CreateColumnPanelsBox.ts
Просмотр файла @ 02cd453b
......@@ -26,10 +26,7 @@ type Sizer = {
add: (item: any, config: any) => void;
};
const CreateColumnPanelsBox = (
scene: Scene,
itemCountArray: number[]
): Sizer => {
const CreateColumnPanelsBox = (scene: Scene, item): Sizer => {
const config: SizerConfig = {
orientation: 'x',
space: {
......@@ -49,11 +46,11 @@ const CreateColumnPanelsBox = (
// 'background'
// )
for (let i = 0, cnt = itemCountArray.length; i < cnt; i++) {
for (let i = 0, cnt = item.children.length; i < cnt; i++) {
const columnPanel = CreateColumnPanel(
scene,
`Header ${i}`,
itemCountArray[i]
item.children[i].nomo.enhavo,
item.children[i],
);
columnPanelsBox.add(columnPanel, { proportion: 0, expand: true });
}
......
universo-frontend/src/pages/canvas/CreateHeader.ts
Просмотр файла @ 02cd453b
......@@ -2,9 +2,12 @@
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import CreateDropDownList from './CreateDropDownList';
import { a as mock, kanvaso, objekto } from './mock';
console.log(kanvaso);
const CreateHeader = function (
scene: Phaser.Scene
scene: Phaser.Scene,
title,
): Phaser.GameObjects.Container {
const sizer = scene.rexUI.add
.sizer({
......@@ -13,7 +16,7 @@ const CreateHeader = function (
.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'),
text: scene.add.text(0, 0, title),
});
const dropDownButton = CreateDropDownList(scene);
......
universo-frontend/src/pages/canvas/CreateItemsBox.ts
Просмотр файла @ 02cd453b
......@@ -29,7 +29,7 @@ type Sizer = {
addBackground: (item: any, key: string) => void;
};
const CreateItemsBox = (scene: SceneType, itemCount: number): Sizer => {
const CreateItemsBox = (scene: SceneType, cards): Sizer => {
const itemsBox: Sizer = scene.rexUI.add.sizer({
orientation: 'y',
space: {
......@@ -42,9 +42,8 @@ const CreateItemsBox = (scene: SceneType, itemCount: number): Sizer => {
});
itemsBox.addBackground(scene.rexUI.add.roundRectangle({}), 'background');
for (let i = 0; i < itemCount; i++) {
itemsBox.add(CreateItem(scene, i.toString()), {
for (let i = 0; i < cards.children.length; i++) {
itemsBox.add(CreateItem(scene, cards.children[i].nomo.enhavo), {
proportion: 0,
expand: true,
});
......
universo-frontend/src/pages/canvas/CreatePopupList.ts
Просмотр файла @ 02cd453b
......@@ -56,7 +56,7 @@ const CreatePopupList = function (
.then(function (data) {
console.log(data);
});
} else if (button.text === 'Rename column') {
} else if (button.text === 'Rename board') {
CreateRequestModalBoard(scene)
.setPosition(400, 300)
.layout()
......
universo-frontend/src/pages/canvas/CreateRequestModalBoard.ts
Просмотр файла @ 02cd453b
......@@ -10,15 +10,21 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
.textAreaInput({
x: 400,
y: 300,
width: 280,
width: 200, // Увеличена ширина
height: 20,
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY),
background: scene.rexUI.add.roundRectangle(
0,
0,
20,
20,
0,
COLOR_PRIMARY,
),
text: {
background: {
stroke: 'black',
// 'focus.stroke': 'red',
},
style: {
......@@ -54,44 +60,54 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
});
textArea.setDepth(2);
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' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
// const separator = scene.add.rectangle(0, 0, 280, 2, 0x000000);
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' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
const dialog = scene.rexUI.add
.dialog({
minWidth: 650,
background: scene.rexUI.add
.roundRectangle(0, 0, 100, 100, 20, 0xffffff)
.roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Редактирование объекта', {
text: scene.add.text(0, 0, 'Editing an object', {
fontSize: '24px',
color: '#000000',
}),
space: {
left: 15,
right: 15,
top: 10,
bottom: 10,
left: 20, // Увеличены отступы
right: 20,
top: 15,
bottom: 15,
},
}),
content: textArea,
actions: [
CreateModalLabel(scene, 'Отменить'),
CreateModalLabel(scene, 'Сохранить'),
],
actions: [cancelButton, saveButton],
space: {
title: 25,
content: 25,
action: 15,
left: 20,
right: 20,
top: 20,
bottom: 20,
title: 30, // Увеличены отступы
content: 30,
action: 20,
left: 25,
right: 25,
top: 25,
bottom: 25,
},
align: {
......@@ -108,7 +124,8 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
dialog.popUp(1000);
dialog.layout();
return dialog;
};
export default CreateRequestModalBoard;
universo-frontend/src/pages/canvas/CreateRequestModalColumn.ts
Просмотр файла @ 02cd453b
......@@ -10,15 +10,21 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
.textAreaInput({
x: 400,
y: 300,
width: 280,
width: 200, // Увеличена ширина
height: 20,
background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_PRIMARY),
background: scene.rexUI.add.roundRectangle(
0,
0,
20,
20,
0,
COLOR_PRIMARY,
),
text: {
background: {
stroke: 'black',
// 'focus.stroke': 'red',
},
style: {
......@@ -54,13 +60,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
});
textArea.setDepth(2);
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' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
// const separator = scene.add.rectangle(0, 0, 280, 2, 0x000000);
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' }),
space: { left: 10, right: 10, top: 10, bottom: 10 },
})
.setDepth(3);
const dialog = scene.rexUI.add
.dialog({
minWidth: 650,
background: scene.rexUI.add
.roundRectangle(0, 0, 100, 100, 20, 0xffffff)
.roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({
......@@ -69,29 +88,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
color: '#000000',
}),
space: {
left: 15,
right: 15,
top: 10,
bottom: 10,
left: 20, // Увеличены отступы
right: 20,
top: 15,
bottom: 15,
},
}),
content: textArea,
actions: [
CreateModalLabel(scene, 'Cancel'),
CreateModalLabel(scene, 'Save'),
],
actions: [cancelButton, saveButton],
space: {
title: 25,
content: 25,
action: 15,
left: 20,
right: 20,
top: 20,
bottom: 20,
title: 30, // Увеличены отступы
content: 30,
action: 20,
left: 25,
right: 25,
top: 25,
bottom: 25,
},
align: {
......@@ -108,7 +124,8 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
.on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle();
});
// dialog.popUp(1000);
dialog.layout();
return dialog;
};
export default CreateRequestModalColumn;
universo-frontend/src/pages/canvas/CreateScrollablePanel.ts
Просмотр файла @ 02cd453b
......@@ -7,6 +7,7 @@ import { DefaultDepth, DragObjectDepth } from './Const';
import CreateColumnPanelsBox from './CreateColumnPanelsBox';
import CreateHeader from './CreateHeader';
import AddResizeController from './AddResizeController';
import { TreeNode } from 'src/types/stores/kanvaso';
type Scene = {
rexUI: {
......@@ -32,7 +33,7 @@ type Sizer = {
const CreateScrollablePanel = (
scene: Scene,
itemCountArray: any[],
objekto: TreeNode,
): ScrollablePanel => {
const config: ScrollablePanelConfig = {
width: 400,
......@@ -42,7 +43,7 @@ const CreateScrollablePanel = (
strokeColor: COLOR_DARK,
}),
panel: {
child: CreateColumnPanelsBox(scene, itemCountArray),
child: CreateColumnPanelsBox(scene, objekto[0]?.children[0]),
mask: {
padding: 2,
updateMode: 'everyTick',
......@@ -70,7 +71,7 @@ const CreateScrollablePanel = (
sliderX: 10,
sliderY: 10,
},
header: CreateHeader(scene),
header: CreateHeader(scene, objekto[0].nomo.enhavo),
};
// Создаем ScrollablePanel
......
universo-frontend/src/pages/canvas/kanvaso.js 0 → 100644
Просмотр файла @ 02cd453b
export const a = {
data: {
kanvasojKanvaso: {
edges: [
{
node: {
pozicio: null,
uuid: '46fb6e9b-5cc9-497d-8ab3-03bfb421651a',
forigo: false,
publikigo: true,
objId: 31,
nomo: {
enhavo: 'Это новый проект',
},
priskribo: {
enhavo: 'Описание нового проекта',
},
tipo: null,
kategorio: {
edges: [],
},
kanvasoObjekto: {
edges: [
{
node: {
pozicio: null,
objId: 23,
uuid: '5dab0cc7-0f28-46c6-bdb6-55f45c9fad17',
forigo: false,
publikigo: true,
nomo: {
enhavo: 'T',
},
priskribo: {
enhavo: 'G',
},
tipo: {
uuid: '2853311c-944b-432f-8af9-c1a9f70897a4',
objId: 1,
nomo: {
enhavo: 'Контейнер-доска',
},
priskribo: {
enhavo: '',
},
},
kanvasojKanvasoobjektoligiloLigilo: null,
},
},
{
node: {
pozicio: null,
objId: 24,
uuid: '65839503-2d44-4f15-a2a7-8eb1c8a64acc',
forigo: false,
publikigo: true,
nomo: {
enhavo: 'Hhd',
},
priskribo: {
enhavo: 'C',
},
tipo: {
uuid: '6392c05d-0535-4962-a77a-9d10f8bf6770',
objId: 2,
nomo: {
enhavo: 'Дорожка',
},
priskribo: {
enhavo: '',
},
},
kanvasojKanvasoobjektoligiloLigilo: {
posedanto: {
objId: 23,
uuid: '5dab0cc7-0f28-46c6-bdb6-55f45c9fad17',
nomo: {
enhavo: 'T',
},
priskribo: {
enhavo: 'G',
},
tipo: {
uuid: '2853311c-944b-432f-8af9-c1a9f70897a4',
objId: 1,
nomo: {
enhavo: 'Контейнер-доска',
},
priskribo: {
enhavo: '',
},
},
},
tipo: {
uuid: 'fbd5c1d9-9d94-4f48-8566-cb3b07d9b249',
objId: 1,
nomo: {
enhavo: 'Родительско-дочерняя',
},
priskribo: {
enhavo: '',
},
},
},
},
},
{
node: {
pozicio: null,
objId: 25,
uuid: '5c5cc090-44fa-4ce0-bfef-0f0d9ba98d44',
forigo: false,
publikigo: true,
nomo: {
enhavo: 'G',
},
priskribo: {
enhavo: 'J',
},
tipo: {
uuid: '4da1a31e-38c4-449f-a2ea-9f06a84226e0',
objId: 3,
nomo: {
enhavo: 'Колонка',
},
priskribo: {
enhavo: '',
},
},
kanvasojKanvasoobjektoligiloLigilo: {
posedanto: {
objId: 24,
uuid: '65839503-2d44-4f15-a2a7-8eb1c8a64acc',
nomo: {
enhavo: 'Hhd',
},
priskribo: {
enhavo: 'C',
},
tipo: {
uuid: '6392c05d-0535-4962-a77a-9d10f8bf6770',
objId: 2,
nomo: {
enhavo: 'Дорожка',
},
priskribo: {
enhavo: '',
},
},
},
tipo: {
uuid: 'fbd5c1d9-9d94-4f48-8566-cb3b07d9b249',
objId: 1,
nomo: {
enhavo: 'Родительско-дочерняя',
},
priskribo: {
enhavo: '',
},
},
},
},
},
{
node: {
pozicio: null,
objId: 27,
uuid: 'e39c8140-0cce-4d36-9160-8e31e98fe2ed',
forigo: false,
publikigo: true,
nomo: {
enhavo: 'fgdggf',
},
priskribo: {
enhavo: 'gbfn',
},
tipo: {
uuid: 'bef69761-81cc-42ea-84a4-5514ddaf9153',
objId: 4,
nomo: {
enhavo: 'Карточка',
},
priskribo: {
enhavo: '',
},
},
kanvasojKanvasoobjektoligiloLigilo: {
posedanto: {
objId: 25,
uuid: '5c5cc090-44fa-4ce0-bfef-0f0d9ba98d44',
nomo: {
enhavo: 'G',
},
priskribo: {
enhavo: 'J',
},
tipo: {
uuid: '4da1a31e-38c4-449f-a2ea-9f06a84226e0',
objId: 3,
nomo: {
enhavo: 'Колонка',
},
priskribo: {
enhavo: '',
},
},
},
tipo: {
uuid: 'fbd5c1d9-9d94-4f48-8566-cb3b07d9b249',
objId: 1,
nomo: {
enhavo: 'Родительско-дочерняя',
},
priskribo: {
enhavo: '',
},
},
},
},
},
],
},
posedanto: {
edges: [
{
node: {
tipo: null,
uuid: 'c25859a3-6b99-4694-a53c-cf1d41ba063c',
posedantoUzanto: {
unuaNomo: {
enhavo: 'Владимир',
},
duaNomo: {
enhavo: 'Юрьевич',
},
uuid: '84da3adb-f860-4b99-9a3f-6cfa500bb21f',
sekso: 'vira',
avataro: {
bildoF: {
url: 'https://t34.universo.pro/media/fotoj/bildoj/WG5XuclQjx_f.jpg',
},
},
familinomo: {
enhavo: 'Левадный',
},
objId: 13,
},
},
},
],
},
},
},
],
},
},
};
universo-frontend/src/pages/canvas/mock.ts 0 → 100644
Просмотр файла @ 02cd453b
import {
KanvasoObjekto,
KanvasojKanvasoObjekto,
Edge,
} from './../../types/stores/kanvaso.d';
//@ts-nocheck
export const a = {
Boards: [
{
id: 1,
BoardName: 'HeaderBoard',
},
],
Columns: [
{
id: 1,
ColumnName: 'HeaderColumn',
},
],
};
export { a as kanvaso } from './kanvaso.js';
import { a as objekto } from './objekto.js';
import { TreeNode } from './../../types/stores/kanvaso.d';
function convertToTree(flatArray: TreeNode[]): TreeNode[] {
let arr = objekto.data.kanvasojKanvasoObjekto.edges;
//@ts-ignore
arr = arr.map((item) => item.node);
// Создаем копию исходного массива, чтобы не изменять его. Глубокая копия, так как в некоторых браузерах проблемы с добавлением children
const nodes = JSON.parse(JSON.stringify(arr));
// const nodes = copy(arr);
// Создаем объект для быстрого доступа к каждому узлу по его UUID.
const nodeMap: Record<string, TreeNode> = {};
// Инициализируем nodeMap и добавляем каждому узлу пустой массив children.
nodes.forEach((node) => {
node.children = [];
nodeMap[node.uuid] = node;
});
// Фильтруем узлы, чтобы сохранить только корневые узлы в результирующем массиве.
const tree: TreeNode[] = nodes.filter((node) => {
// Если у узла есть posedantoUuid, добавляем его в children его родителя.
if (node.kanvasojKanvasoobjektoligiloLigilo) {
const parent =
nodeMap[node.kanvasojKanvasoobjektoligiloLigilo.posedanto.uuid];
if (parent) {
parent.children!.push(node);
}
// Узел не является корневым, поэтому исключаем его из результирующего массива.
return false;
}
// Узел является корневым.
return true;
});
return tree;
}
//@ts-ignore
const result = convertToTree(objekto);
export { result as objekto };
universo-frontend/src/pages/canvas/objekto.js 0 → 100644
Просмотр файла @ 02cd453b
Это отличие свёрнуто
universo-frontend/src/router/routes.ts
Просмотр файла @ 02cd453b
......@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [
},
},
{
path: '/endless3',
path: '/endless3/:uuid',
name: 'endless3',
meta: { title: 'Endless' },
component: () => import('pages/canvas/ActualCanvas.vue'),
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать