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

Merge branch 'main' into 'main' 

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

See merge request teknokomo/universo-monorepo!40
владельцы c7a01c67 02cd453b
Развернуть все Скрыть пробелы
Построчно Рядом
universo-frontend/src/pages/ProjectsPage.vue
Просмотр файла @ d1264cdb
...@@ -54,6 +54,14 @@ ...@@ -54,6 +54,14 @@
>Удалить</q-item >Удалить</q-item
> >
<q-item clickable>Настройки</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-menu></q-btn
> >
</q-item-section> </q-item-section>
......
universo-frontend/src/pages/canvas/ActualCanvas.vue
Просмотр файла @ d1264cdb
...@@ -6,8 +6,11 @@ ...@@ -6,8 +6,11 @@
import 'phaser'; import 'phaser';
// import 'phaser3-rex-plugins/templates/ui/ui-plugin'; // import 'phaser3-rex-plugins/templates/ui/ui-plugin';
// import 'phaser3-rex-plugins/templates/ui/ui-components'; // import 'phaser3-rex-plugins/templates/ui/ui-components';
import CreateScrollablePanel from './CreateScrollablePanel'; import CreateScrollablePanel from './CreateScrollablePanel';
import { useKanvasoStore } from 'src/stores/kanvaso';
import { mapActions, mapState } from 'pinia';
import { objekto } from './mock';
class Demo extends Phaser.Scene { class Demo extends Phaser.Scene {
rexUI: any; rexUI: any;
constructor() { constructor() {
...@@ -28,9 +31,8 @@ class Demo extends Phaser.Scene { ...@@ -28,9 +31,8 @@ class Demo extends Phaser.Scene {
create(): void { create(): void {
this.cameras.main.setBackgroundColor('#abcdef'); this.cameras.main.setBackgroundColor('#abcdef');
const itemCountArray: number[] = [20, 5, 10, 0, 10];
//@ts-ignore //@ts-ignore
const topPanel = CreateScrollablePanel(this, itemCountArray) const topPanel = CreateScrollablePanel(this, window.objekto)
.setPosition(400, 300) .setPosition(400, 300)
.layout(); .layout();
// .drawBounds(this.add.graphics(), 0xff0000) // .drawBounds(this.add.graphics(), 0xff0000)
...@@ -62,8 +64,63 @@ const config: Phaser.Types.Core.GameConfig = { ...@@ -62,8 +64,63 @@ const config: Phaser.Types.Core.GameConfig = {
export default { export default {
name: 'YourComponentName', 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); const game = new Phaser.Game(config);
}, },
beforeUnmount() {
this.wsSubscribe.unsubscribe();
},
}; };
</script> </script>
universo-frontend/src/pages/canvas/CreateColumnPanel.ts
Просмотр файла @ d1264cdb
...@@ -25,7 +25,7 @@ type SceneType = { ...@@ -25,7 +25,7 @@ type SceneType = {
const CreateColumnPanel = ( const CreateColumnPanel = (
scene: SceneType, scene: SceneType,
title: string, title: string,
itemCount: number cards
) => { ) => {
const panel = scene.rexUI.add const panel = scene.rexUI.add
.dialog({ .dialog({
...@@ -35,7 +35,7 @@ const CreateColumnPanel = ( ...@@ -35,7 +35,7 @@ const CreateColumnPanel = (
strokeColor: COLOR_DARK, strokeColor: COLOR_DARK,
}), }),
title: CreateTitle(scene, title), title: CreateTitle(scene, title),
content: CreateItemsBox(scene, itemCount), content: CreateItemsBox(scene, cards),
proportion: { proportion: {
content: 1, content: 1,
}, },
......
universo-frontend/src/pages/canvas/CreateColumnPanelsBox.ts
Просмотр файла @ d1264cdb
...@@ -26,10 +26,7 @@ type Sizer = { ...@@ -26,10 +26,7 @@ type Sizer = {
add: (item: any, config: any) => void; add: (item: any, config: any) => void;
}; };
const CreateColumnPanelsBox = ( const CreateColumnPanelsBox = (scene: Scene, item): Sizer => {
scene: Scene,
itemCountArray: number[]
): Sizer => {
const config: SizerConfig = { const config: SizerConfig = {
orientation: 'x', orientation: 'x',
space: { space: {
...@@ -49,11 +46,11 @@ const CreateColumnPanelsBox = ( ...@@ -49,11 +46,11 @@ const CreateColumnPanelsBox = (
// 'background' // '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( const columnPanel = CreateColumnPanel(
scene, scene,
`Header ${i}`, item.children[i].nomo.enhavo,
itemCountArray[i] item.children[i],
); );
columnPanelsBox.add(columnPanel, { proportion: 0, expand: true }); columnPanelsBox.add(columnPanel, { proportion: 0, expand: true });
} }
......
universo-frontend/src/pages/canvas/CreateHeader.ts
Просмотр файла @ d1264cdb
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const'; import { COLOR_LIGHT, COLOR_PRIMARY, COLOR_DARK } from './Const';
import CreateDropDownList from './CreateDropDownList'; import CreateDropDownList from './CreateDropDownList';
import { a as mock, kanvaso, objekto } from './mock';
console.log(kanvaso);
const CreateHeader = function ( const CreateHeader = function (
scene: Phaser.Scene scene: Phaser.Scene,
title,
): Phaser.GameObjects.Container { ): Phaser.GameObjects.Container {
const sizer = scene.rexUI.add const sizer = scene.rexUI.add
.sizer({ .sizer({
...@@ -13,7 +16,7 @@ const CreateHeader = function ( ...@@ -13,7 +16,7 @@ const CreateHeader = function (
.addBackground(scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK)); .addBackground(scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK));
const headerLabel = scene.rexUI.add.label({ const headerLabel = scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Header'), text: scene.add.text(0, 0, title),
}); });
const dropDownButton = CreateDropDownList(scene); const dropDownButton = CreateDropDownList(scene);
......
universo-frontend/src/pages/canvas/CreateItemsBox.ts
Просмотр файла @ d1264cdb
...@@ -29,7 +29,7 @@ type Sizer = { ...@@ -29,7 +29,7 @@ type Sizer = {
addBackground: (item: any, key: string) => void; 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({ const itemsBox: Sizer = scene.rexUI.add.sizer({
orientation: 'y', orientation: 'y',
space: { space: {
...@@ -42,9 +42,8 @@ const CreateItemsBox = (scene: SceneType, itemCount: number): Sizer => { ...@@ -42,9 +42,8 @@ const CreateItemsBox = (scene: SceneType, itemCount: number): Sizer => {
}); });
itemsBox.addBackground(scene.rexUI.add.roundRectangle({}), 'background'); itemsBox.addBackground(scene.rexUI.add.roundRectangle({}), 'background');
for (let i = 0; i < cards.children.length; i++) {
for (let i = 0; i < itemCount; i++) { itemsBox.add(CreateItem(scene, cards.children[i].nomo.enhavo), {
itemsBox.add(CreateItem(scene, i.toString()), {
proportion: 0, proportion: 0,
expand: true, expand: true,
}); });
......
universo-frontend/src/pages/canvas/CreatePopupList.ts
Просмотр файла @ d1264cdb
...@@ -56,7 +56,7 @@ const CreatePopupList = function ( ...@@ -56,7 +56,7 @@ const CreatePopupList = function (
.then(function (data) { .then(function (data) {
console.log(data); console.log(data);
}); });
} else if (button.text === 'Rename column') { } else if (button.text === 'Rename board') {
CreateRequestModalBoard(scene) CreateRequestModalBoard(scene)
.setPosition(400, 300) .setPosition(400, 300)
.layout() .layout()
......
universo-frontend/src/pages/canvas/CreateRequestModalBoard.ts
Просмотр файла @ d1264cdb
...@@ -10,15 +10,21 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => { ...@@ -10,15 +10,21 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
.textAreaInput({ .textAreaInput({
x: 400, x: 400,
y: 300, y: 300,
width: 280, width: 200, // Увеличена ширина
height: 20, 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: { text: {
background: { background: {
stroke: 'black', stroke: 'black',
// 'focus.stroke': 'red',
}, },
style: { style: {
...@@ -54,44 +60,54 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => { ...@@ -54,44 +60,54 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
}); });
textArea.setDepth(2); 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 const dialog = scene.rexUI.add
.dialog({ .dialog({
minWidth: 650,
background: scene.rexUI.add background: scene.rexUI.add
.roundRectangle(0, 0, 100, 100, 20, 0xffffff) .roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.setStrokeStyle(2, 0x000000), .setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({ title: scene.rexUI.add.label({
text: scene.add.text(0, 0, 'Редактирование объекта', { text: scene.add.text(0, 0, 'Editing an object', {
fontSize: '24px', fontSize: '24px',
color: '#000000', color: '#000000',
}), }),
space: { space: {
left: 15, left: 20, // Увеличены отступы
right: 15, right: 20,
top: 10, top: 15,
bottom: 10, bottom: 15,
}, },
}), }),
content: textArea, content: textArea,
actions: [ actions: [cancelButton, saveButton],
CreateModalLabel(scene, 'Отменить'),
CreateModalLabel(scene, 'Сохранить'),
],
space: { space: {
title: 25, title: 30, // Увеличены отступы
content: 25, content: 30,
action: 15, action: 20,
left: 20, left: 25,
right: 20, right: 25,
top: 20, top: 25,
bottom: 20, bottom: 25,
}, },
align: { align: {
...@@ -108,7 +124,8 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => { ...@@ -108,7 +124,8 @@ const CreateRequestModalBoard = (scene: Phaser.Scene): any => {
.on('button.out', function (button, groupName, index, pointer, event) { .on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle(); button.getElement('background').setStrokeStyle();
}); });
dialog.popUp(1000); dialog.layout();
return dialog; return dialog;
}; };
export default CreateRequestModalBoard; export default CreateRequestModalBoard;
universo-frontend/src/pages/canvas/CreateRequestModalColumn.ts
Просмотр файла @ d1264cdb
...@@ -10,15 +10,21 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => { ...@@ -10,15 +10,21 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
.textAreaInput({ .textAreaInput({
x: 400, x: 400,
y: 300, y: 300,
width: 280, width: 200, // Увеличена ширина
height: 20, 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: { text: {
background: { background: {
stroke: 'black', stroke: 'black',
// 'focus.stroke': 'red',
}, },
style: { style: {
...@@ -54,13 +60,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => { ...@@ -54,13 +60,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
}); });
textArea.setDepth(2); 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 const dialog = scene.rexUI.add
.dialog({ .dialog({
minWidth: 650,
background: scene.rexUI.add background: scene.rexUI.add
.roundRectangle(0, 0, 100, 100, 20, 0xffffff) .roundRectangle(0, 0, 1020, 100, 20, 0xffffff) // Увеличена ширина
.setStrokeStyle(2, 0x000000), .setStrokeStyle(2, 0x000000),
title: scene.rexUI.add.label({ title: scene.rexUI.add.label({
...@@ -69,29 +88,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => { ...@@ -69,29 +88,26 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
color: '#000000', color: '#000000',
}), }),
space: { space: {
left: 15, left: 20, // Увеличены отступы
right: 15, right: 20,
top: 10, top: 15,
bottom: 10, bottom: 15,
}, },
}), }),
content: textArea, content: textArea,
actions: [ actions: [cancelButton, saveButton],
CreateModalLabel(scene, 'Cancel'),
CreateModalLabel(scene, 'Save'),
],
space: { space: {
title: 25, title: 30, // Увеличены отступы
content: 25, content: 30,
action: 15, action: 20,
left: 20, left: 25,
right: 20, right: 25,
top: 20, top: 25,
bottom: 20, bottom: 25,
}, },
align: { align: {
...@@ -108,7 +124,8 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => { ...@@ -108,7 +124,8 @@ const CreateRequestModalColumn = (scene: Phaser.Scene): any => {
.on('button.out', function (button, groupName, index, pointer, event) { .on('button.out', function (button, groupName, index, pointer, event) {
button.getElement('background').setStrokeStyle(); button.getElement('background').setStrokeStyle();
}); });
// dialog.popUp(1000); dialog.layout();
return dialog; return dialog;
}; };
export default CreateRequestModalColumn; export default CreateRequestModalColumn;
universo-frontend/src/pages/canvas/CreateScrollablePanel.ts
Просмотр файла @ d1264cdb
...@@ -7,6 +7,7 @@ import { DefaultDepth, DragObjectDepth } from './Const'; ...@@ -7,6 +7,7 @@ import { DefaultDepth, DragObjectDepth } from './Const';
import CreateColumnPanelsBox from './CreateColumnPanelsBox'; import CreateColumnPanelsBox from './CreateColumnPanelsBox';
import CreateHeader from './CreateHeader'; import CreateHeader from './CreateHeader';
import AddResizeController from './AddResizeController'; import AddResizeController from './AddResizeController';
import { TreeNode } from 'src/types/stores/kanvaso';
type Scene = { type Scene = {
rexUI: { rexUI: {
...@@ -32,7 +33,7 @@ type Sizer = { ...@@ -32,7 +33,7 @@ type Sizer = {
const CreateScrollablePanel = ( const CreateScrollablePanel = (
scene: Scene, scene: Scene,
itemCountArray: any[], objekto: TreeNode,
): ScrollablePanel => { ): ScrollablePanel => {
const config: ScrollablePanelConfig = { const config: ScrollablePanelConfig = {
width: 400, width: 400,
...@@ -42,7 +43,7 @@ const CreateScrollablePanel = ( ...@@ -42,7 +43,7 @@ const CreateScrollablePanel = (
strokeColor: COLOR_DARK, strokeColor: COLOR_DARK,
}), }),
panel: { panel: {
child: CreateColumnPanelsBox(scene, itemCountArray), child: CreateColumnPanelsBox(scene, objekto[0]?.children[0]),
mask: { mask: {
padding: 2, padding: 2,
updateMode: 'everyTick', updateMode: 'everyTick',
...@@ -70,7 +71,7 @@ const CreateScrollablePanel = ( ...@@ -70,7 +71,7 @@ const CreateScrollablePanel = (
sliderX: 10, sliderX: 10,
sliderY: 10, sliderY: 10,
}, },
header: CreateHeader(scene), header: CreateHeader(scene, objekto[0].nomo.enhavo),
}; };
// Создаем ScrollablePanel // Создаем ScrollablePanel
......
universo-frontend/src/pages/canvas/kanvaso.js 0 → 100644
Просмотр файла @ d1264cdb
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
Просмотр файла @ d1264cdb
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
Просмотр файла @ d1264cdb
Это отличие свёрнуто
universo-frontend/src/router/routes.ts
Просмотр файла @ d1264cdb
...@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [
}, },
}, },
{ {
path: '/endless3', path: '/endless3/:uuid',
name: 'endless3', name: 'endless3',
meta: { title: 'Endless' }, meta: { title: 'Endless' },
component: () => import('pages/canvas/ActualCanvas.vue'), component: () => import('pages/canvas/ActualCanvas.vue'),
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать