DPG Floorplan

bash

npm i @dpg.gg/floorplan





$3



-   [Floorplan (WIP)]()

-   [Layers (WIP)]()



$3

js

import { Floorplan, DebugLayer } from "@dpg.gg/floorplan";



const floorplan = new Floorplan(domElement, config);

floorplan.layers.register(new DebugLayer());



// Обработка слоев

floorplan.traverse(layers);





Выше описан базовый пример взаимодействия с основными слоями и компонентом.



Мы можем также производить манипуляции на основе вызова и прослушивания событий. Например для слоя Labels у нас есть событие перевода:

js

floorplan.layers.get("label").emit("translate", (value) => translations[value]["en"] || value);





которое позволит внедрить перевод или вызвать обновление при смене языка в приложени



---



$3



Обработчик слоев должен быть основан на абстракном классе Layer



Пример кода кастомного обработчика слоя:

js

import { Layer } from "@dpg.gg/floorplan";



class TilesLayer extends Layer {

	name = "tiles";

	version = "0.0.1";



    process({ data = {}, params = {} }, container = this.instance!.stage) {

        const sprite = new Sprite();

        for (let key in params) sprite[key] = params[key];

        // Логика на обработку тайлов

        return container;

    }

}





$3



Все вносимые изменения должны соответствовать стилю кода, соответствовать структуре.



Компоненты не должны быть перегружены и нужно производить адекватную декомпозицию кода



Поскольку проект написан на TS, код должен быт максимально типизирован, по возможности используем уже имеющиеся типы



$3

bash

npm i

npm run build

$3

- pixi.js
- pixi-viewport

License

DPG Floorplan

bash

npm i @dpg.gg/floorplan





$3



-   [Floorplan (WIP)]()

-   [Layers (WIP)]()



$3

js

import { Floorplan, DebugLayer } from "@dpg.gg/floorplan";



const floorplan = new Floorplan(domElement, config);

floorplan.layers.register(new DebugLayer());



// Обработка слоев

floorplan.traverse(layers);





Выше описан базовый пример взаимодействия с основными слоями и компонентом.



Мы можем также производить манипуляции на основе вызова и прослушивания событий. Например для слоя Labels у нас есть событие перевода:

js

floorplan.layers.get("label").emit("translate", (value) => translations[value]["en"] || value);





которое позволит внедрить перевод или вызвать обновление при смене языка в приложени



---



$3



Обработчик слоев должен быть основан на абстракном классе Layer



Пример кода кастомного обработчика слоя:

js

import { Layer } from "@dpg.gg/floorplan";



class TilesLayer extends Layer {

	name = "tiles";

	version = "0.0.1";



    process({ data = {}, params = {} }, container = this.instance!.stage) {

        const sprite = new Sprite();

        for (let key in params) sprite[key] = params[key];

        // Логика на обработку тайлов

        return container;

    }

}





$3



Все вносимые изменения должны соответствовать стилю кода, соответствовать структуре.



Компоненты не должны быть перегружены и нужно производить адекватную декомпозицию кода



Поскольку проект написан на TS, код должен быт максимально типизирован, по возможности используем уже имеющиеся типы



$3

bash

npm i

npm run build

$3

- pixi.js
- pixi-viewport