dacha 0.15.2 → 0.16.0

package/build/contrib/systems/renderer/builders/sprite-builder/index.d.ts

@@ -0,0 +1,19 @@
+import { Sprite as PixiSprite, TilingSprite } from 'pixi.js';
+import type { Builder } from '../builder';
+import type { Actor } from '../../../../../engine/actor';
+import { CacheStore } from '../../../../../engine/data-lib';
+interface SpriteBuilderOptions {
+    imageStore: CacheStore<HTMLImageElement>;
+}
+export declare class SpriteBuilder implements Builder {
+    private imageStore;
+    private textureSourceMap;
+    private textureArrayMap;
+    constructor(options: SpriteBuilderOptions);
+    destroy(actor: Actor): void;
+    buildView(actor: Actor): PixiSprite | TilingSprite | undefined;
+    updateView(actor: Actor): void;
+    private updateTextureArray;
+    private getTextureArray;
+}
+export {};

package/build/contrib/systems/renderer/builders/sprite-builder/index.js

@@ -0,0 +1,166 @@
+import { Texture, Sprite as PixiSprite, TilingSprite, Bounds, } from 'pixi.js';
+import { BLEND_MODE_MAPPING } from '../../consts';
+import { Transform } from '../../../../components/transform';
+import { Sprite } from '../../../../components/sprite';
+import { CacheStore } from '../../../../../engine/data-lib';
+import { floatEquals } from '../utils';
+import { getTextureSource, getTextureArray } from './utils';
+export class SpriteBuilder {
+    imageStore;
+    textureSourceMap;
+    textureArrayMap;
+    constructor(options) {
+        this.imageStore = options.imageStore;
+        this.textureSourceMap = new CacheStore();
+        this.textureArrayMap = new CacheStore();
+    }
+    destroy(actor) {
+        const sprite = actor.getComponent(Sprite);
+        const textureSourceKey = sprite.renderData?.textureSourceKey;
+        const textureArrayKey = sprite.renderData?.textureArrayKey;
+        if (textureSourceKey) {
+            this.textureSourceMap.release(textureSourceKey, true);
+        }
+        if (textureArrayKey) {
+            this.textureArrayMap.release(textureArrayKey, true);
+        }
+        sprite.renderData?.view.destroy();
+        sprite.renderData = undefined;
+    }
+    buildView(actor) {
+        const sprite = actor.getComponent(Sprite);
+        if (!sprite) {
+            return undefined;
+        }
+        const { offsetX, offsetY } = actor.getComponent(Transform);
+        const options = { anchor: 0.5 };
+        const view = sprite.fit === 'stretch'
+            ? new PixiSprite(options)
+            : new TilingSprite(options);
+        sprite.renderData = { view };
+        view.__dacha = {
+            actor,
+            builderKey: Sprite.componentName,
+            viewComponent: sprite,
+            bounds: new Bounds(offsetX, offsetY, offsetX, offsetY),
+            meta: {},
+            didChange: false,
+        };
+        return view;
+    }
+    updateView(actor) {
+        const transform = actor.getComponent(Transform);
+        const sprite = actor.getComponent(Sprite);
+        if (!sprite) {
+            return undefined;
+        }
+        const view = sprite.renderData.view;
+        const meta = view.__dacha.meta;
+        view.__dacha.didChange = false;
+        if (sprite.disabled !== meta.disabled) {
+            view.visible = !sprite.disabled;
+            meta.disabled = sprite.disabled;
+            view.__dacha.didChange = true;
+        }
+        if (sprite.color !== meta.color) {
+            view.tint = sprite.color;
+            meta.color = sprite.color;
+            view.__dacha.didChange = true;
+        }
+        if (sprite.blending !== meta.blending) {
+            view.blendMode = BLEND_MODE_MAPPING[sprite.blending];
+            meta.blending = sprite.blending;
+            view.__dacha.didChange = true;
+        }
+        if (sprite.opacity !== meta.opacity) {
+            view.alpha = sprite.opacity;
+            meta.opacity = sprite.opacity;
+            view.__dacha.didChange = true;
+        }
+        const angle = transform.rotation + sprite.rotation;
+        if (angle !== meta.angle) {
+            view.angle = angle;
+            meta.angle = angle;
+            view.__dacha.didChange = true;
+        }
+        const { offsetX, offsetY } = transform;
+        if (!floatEquals(offsetX, meta.offsetX) ||
+            !floatEquals(offsetY, meta.offsetY)) {
+            view.position.set(offsetX, offsetY);
+            meta.offsetX = offsetX;
+            meta.offsetY = offsetY;
+            view.__dacha.didChange = true;
+        }
+        if (this.imageStore.has(sprite.src) &&
+            (sprite.src !== meta.src || sprite.slice !== meta.slice)) {
+            view.label = sprite.src;
+            this.updateTextureArray(sprite);
+            meta.src = sprite.src;
+            meta.slice = sprite.slice;
+            view.__dacha.didChange = true;
+        }
+        const textureArray = this.getTextureArray(sprite);
+        const texture = textureArray?.[sprite.currentFrame ?? 0];
+        view.texture = texture ?? Texture.WHITE;
+        const scaleX = (sprite.flipX ? -1 : 1) * transform.scaleX;
+        const scaleY = (sprite.flipY ? -1 : 1) * transform.scaleY;
+        if (view.texture !== meta.texture ||
+            scaleX !== meta.scaleX ||
+            scaleY !== meta.scaleY ||
+            sprite.width !== meta.width ||
+            sprite.height !== meta.height) {
+            if (sprite.fit === 'stretch') {
+                view.scale.set((sprite.width / view.texture.width) * scaleX, (sprite.height / view.texture.height) * scaleY);
+            }
+            if (sprite.fit === 'repeat') {
+                view.setSize(sprite.width, sprite.height);
+                view.scale.set(scaleX, scaleY);
+            }
+            meta.texture = view.texture;
+            meta.scaleX = scaleX;
+            meta.scaleY = scaleY;
+            meta.width = sprite.width;
+            meta.height = sprite.height;
+            view.__dacha.didChange = true;
+        }
+    }
+    updateTextureArray(sprite) {
+        const oldTextureSourceKey = sprite.renderData.textureSourceKey;
+        const oldTextureArrayKey = sprite.renderData.textureArrayKey;
+        if (oldTextureSourceKey) {
+            this.textureSourceMap.release(oldTextureSourceKey, true);
+        }
+        if (oldTextureArrayKey) {
+            this.textureArrayMap.release(oldTextureArrayKey, true);
+        }
+        sprite.renderData.textureSourceKey = sprite.src;
+        sprite.renderData.textureArrayKey = `${sprite.slice}_${sprite.renderData.textureSourceKey}`;
+        const textureSourceKey = sprite.renderData.textureSourceKey;
+        const textureArrayKey = sprite.renderData.textureArrayKey;
+        if (this.textureArrayMap.has(textureArrayKey)) {
+            this.textureArrayMap.retain(textureArrayKey);
+            this.textureSourceMap.retain(textureSourceKey);
+            return;
+        }
+        if (this.textureSourceMap.has(textureSourceKey)) {
+            const textureSource = this.textureSourceMap.get(textureSourceKey);
+            const textureArray = getTextureArray(textureSource, sprite);
+            this.textureArrayMap.add(textureArrayKey, textureArray);
+            this.textureArrayMap.retain(textureArrayKey);
+            this.textureSourceMap.retain(textureSourceKey);
+        }
+        const image = this.imageStore.get(sprite.src);
+        if (!image) {
+            return undefined;
+        }
+        const textureSource = getTextureSource(image);
+        const textureArray = getTextureArray(textureSource, sprite);
+        this.textureSourceMap.add(textureSourceKey, textureSource);
+        this.textureArrayMap.add(textureArrayKey, textureArray);
+        this.textureArrayMap.retain(textureArrayKey);
+        this.textureSourceMap.retain(textureSourceKey);
+    }
+    getTextureArray(sprite) {
+        return this.textureArrayMap.get(sprite.renderData.textureArrayKey);
+    }
+}

package/build/contrib/systems/renderer/builders/sprite-builder/utils.d.ts

@@ -0,0 +1,4 @@
+import { Texture, TextureSource } from 'pixi.js';
+import { Sprite } from '../../../../components/sprite';
+export declare const getTextureSource: (image: HTMLImageElement) => TextureSource;
+export declare const getTextureArray: (textureSource: TextureSource, sprite: Sprite) => Texture[];

package/build/contrib/systems/renderer/builders/sprite-builder/utils.js

@@ -0,0 +1,16 @@
+import { Texture, TextureSource, Rectangle } from 'pixi.js';
+export const getTextureSource = (image) => TextureSource.from({
+    resource: image,
+    scaleMode: 'nearest',
+});
+export const getTextureArray = (textureSource, sprite) => {
+    const textures = [];
+    const frameWidth = Math.max(textureSource.width / sprite.slice, 1);
+    const frameHeight = Math.max(textureSource.height, 1);
+    for (let i = 0; i < sprite.slice; i += 1) {
+        const rectangle = new Rectangle(i * frameWidth, 0, frameWidth, frameHeight);
+        const texture = new Texture({ source: textureSource, frame: rectangle });
+        textures.push(texture);
+    }
+    return textures;
+};

package/build/contrib/systems/renderer/builders/utils.d.ts

@@ -0,0 +1 @@
+export declare const floatEquals: (a: number, b: number) => boolean;

package/build/contrib/systems/renderer/builders/utils.js

@@ -0,0 +1,4 @@
+const FLOAT_EPSILON = 1e-5;
+export const floatEquals = (a, b) => {
+    return Math.abs(a - b) < FLOAT_EPSILON;
+};

package/build/contrib/systems/renderer/consts.d.ts

@@ -0,0 +1,5 @@
+import { type BLEND_MODES } from 'pixi.js';
+import { type BlendingMode } from '../../components/sprite';
+import { type SortingOrder } from './types';
+export declare const BLEND_MODE_MAPPING: Record<BlendingMode, BLEND_MODES>;
+export declare const SORTING_ORDER_MAPPING: Record<SortingOrder, [number, number]>;

package/build/contrib/systems/renderer/consts.js

@@ -0,0 +1,12 @@
+export const BLEND_MODE_MAPPING = {
+    normal: 'normal',
+    addition: 'add',
+    substract: 'subtract',
+    multiply: 'multiply',
+};
+export const SORTING_ORDER_MAPPING = {
+    bottomRight: [1, 1],
+    bottomLeft: [-1, 1],
+    topLeft: [-1, -1],
+    topRight: [1, -1],
+};

package/build/contrib/systems/renderer/index.d.ts

@@ -0,0 +1,2 @@
+export { Renderer } from './renderer';
+export { RendererService } from './service';

package/build/contrib/systems/renderer/index.js

@@ -0,0 +1,2 @@
+export { Renderer } from './renderer';
+export { RendererService } from './service';

package/build/contrib/systems/renderer/renderer.d.ts

@@ -0,0 +1,31 @@
+import { WorldSystem, type WorldSystemOptions } from '../../../engine/system';
+import { type Scene } from '../../../engine/scene';
+export declare class Renderer extends WorldSystem {
+    private actorQuery?;
+    private viewEntries?;
+    private deletedActors;
+    private window;
+    private application;
+    private worldContainer;
+    private imageStore;
+    private builders;
+    private sortFn;
+    private templateCollection;
+    private backgroundColor;
+    private cameraService;
+    constructor(options: WorldSystemOptions);
+    onWorldLoad(): Promise<void>;
+    onWorldDestroy(): void;
+    onSceneLoad(scene: Scene): Promise<void>;
+    onSceneEnter(scene: Scene): void;
+    onSceneExit(): void;
+    onSceneDestroy(scene: Scene): void;
+    private handleActorAdd;
+    private handleActorRemove;
+    private updateCamera;
+    private updateViews;
+    private updateBounds;
+    private sortViews;
+    private clearDeletedEntries;
+    update(): void;
+}

package/build/contrib/systems/renderer/renderer.js

@@ -0,0 +1,249 @@
+import { Application, Container, Color, Assets, } from 'pixi.js';
+import { AddActor, RemoveActor, } from '../../../engine/events';
+import { WorldSystem } from '../../../engine/system';
+import { ActorQuery } from '../../../engine/actor';
+import { Transform } from '../../components/transform';
+import { Sprite } from '../../components/sprite';
+import { Shape } from '../../components/shape';
+import { PixiView } from '../../components/pixi-view';
+import { BitmapText } from '../../components/bitmap-text';
+import { Camera } from '../../components/camera';
+import { CameraService } from '../camera-system';
+import { CacheStore } from '../../../engine/data-lib';
+import { getWindowNode } from '../../utils/get-window-node';
+import { RendererService } from './service';
+import { composeSort, createSortByLayer, sortByYAxis, sortByXAxis, } from './sort';
+import { parseSortingLayers } from './sort/utils';
+import { loadImage, getAllImageSources, getAllFontSources } from './utils';
+import { SpriteBuilder, ShapeBuilder, PixiViewBuilder, BitmapTextBuilder, } from './builders';
+import { SORTING_ORDER_MAPPING } from './consts';
+export class Renderer extends WorldSystem {
+    actorQuery;
+    viewEntries;
+    deletedActors;
+    window;
+    application;
+    worldContainer;
+    imageStore;
+    builders;
+    sortFn;
+    templateCollection;
+    backgroundColor;
+    cameraService;
+    constructor(options) {
+        super();
+        const { globalOptions, windowNodeId, backgroundColor, templateCollection, world, } = options;
+        this.templateCollection = templateCollection;
+        this.backgroundColor = new Color(backgroundColor);
+        this.window = getWindowNode(windowNodeId);
+        const sorting = globalOptions.sorting;
+        const sortingOrder = SORTING_ORDER_MAPPING[sorting?.order ?? 'bottomRight'];
+        this.sortFn = composeSort([
+            createSortByLayer(parseSortingLayers(sorting?.layers)),
+            sortByYAxis(sortingOrder[1]),
+            sortByXAxis(sortingOrder[0]),
+        ]);
+        this.application = new Application();
+        this.worldContainer = new Container({ sortableChildren: true });
+        this.imageStore = new CacheStore();
+        this.builders = new Map();
+        this.builders.set(Sprite.componentName, new SpriteBuilder({ imageStore: this.imageStore }));
+        this.builders.set(Shape.componentName, new ShapeBuilder());
+        this.builders.set(PixiView.componentName, new PixiViewBuilder());
+        this.builders.set(BitmapText.componentName, new BitmapTextBuilder());
+        this.cameraService = world.getService(CameraService);
+        this.deletedActors = new Set();
+        world.addService(new RendererService({
+            application: this.application,
+            getViewEntries: () => this.viewEntries,
+            sortFn: this.sortFn,
+        }));
+    }
+    async onWorldLoad() {
+        await this.application.init({
+            autoStart: false,
+            resizeTo: this.window,
+            width: this.window.clientWidth,
+            height: this.window.clientHeight,
+            backgroundColor: this.backgroundColor.toHex(),
+            backgroundAlpha: this.backgroundColor.alpha,
+            resolution: window.devicePixelRatio,
+            autoDensity: true,
+        });
+        this.window.appendChild(this.application.canvas);
+        this.application.stage.addChild(this.worldContainer);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        window.__PIXI_DEVTOOLS__ = {
+            app: this.application,
+        };
+    }
+    onWorldDestroy() {
+        this.window.removeChild(this.application.canvas);
+        this.application.destroy();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        window.__PIXI_DEVTOOLS__ = undefined;
+    }
+    async onSceneLoad(scene) {
+        const allImageSources = [
+            ...getAllImageSources(this.templateCollection.getAll()),
+            ...getAllImageSources(scene.children),
+        ];
+        const uniqueImageSources = [...new Set(allImageSources)];
+        const images = await Promise.all(uniqueImageSources.map((src) => {
+            return !this.imageStore.has(src) ? loadImage(src) : undefined;
+        }));
+        uniqueImageSources.forEach((src, index) => {
+            if (images[index]) {
+                this.imageStore.add(src, images[index]);
+            }
+        });
+        allImageSources.forEach((src) => this.imageStore.retain(src));
+        const allFontSources = [
+            ...getAllFontSources(this.templateCollection.getAll()),
+            ...getAllFontSources(scene.children),
+        ];
+        const uniqueFontSources = [...new Set(allFontSources)];
+        await Assets.load(uniqueFontSources);
+    }
+    onSceneEnter(scene) {
+        this.actorQuery = new ActorQuery({
+            scene,
+            filter: (actor) => Boolean(actor.getComponent(Transform) &&
+                (actor.getComponent(Sprite) ||
+                    actor.getComponent(Shape) ||
+                    actor.getComponent(PixiView) ||
+                    actor.getComponent(BitmapText))),
+        });
+        this.viewEntries = [];
+        for (const actor of this.actorQuery.getActors()) {
+            this.builders.forEach((builder) => {
+                const view = builder.buildView(actor);
+                if (view) {
+                    this.viewEntries?.push(view);
+                    this.worldContainer.addChild(view);
+                }
+            });
+        }
+        this.actorQuery.addEventListener(AddActor, this.handleActorAdd);
+        this.actorQuery.addEventListener(RemoveActor, this.handleActorRemove);
+    }
+    onSceneExit() {
+        this.actorQuery?.removeEventListener(AddActor, this.handleActorAdd);
+        this.actorQuery?.removeEventListener(RemoveActor, this.handleActorRemove);
+        this.worldContainer.removeChildren();
+        this.application.renderer.clear();
+        this.viewEntries?.forEach((entry) => {
+            this.builders.get(entry.__dacha.builderKey).destroy(entry.__dacha.actor);
+        });
+        this.viewEntries = undefined;
+        this.actorQuery?.destroy();
+        this.actorQuery = undefined;
+    }
+    onSceneDestroy(scene) {
+        const allSources = [
+            ...getAllImageSources(this.templateCollection.getAll()),
+            ...getAllImageSources(scene.children),
+        ];
+        allSources.forEach((src) => this.imageStore.release(src));
+        this.imageStore.cleanReleased();
+    }
+    handleActorAdd = (event) => {
+        const { actor } = event;
+        const sprite = actor.getComponent(Sprite);
+        if (sprite) {
+            const { src } = sprite;
+            if (this.imageStore.has(src)) {
+                this.imageStore.retain(src);
+            }
+            else {
+                void loadImage(src).then((image) => {
+                    if (image) {
+                        this.imageStore.add(src, image);
+                        this.imageStore.retain(src);
+                    }
+                });
+            }
+        }
+        const text = actor.getComponent(BitmapText);
+        if (text) {
+            Assets.load(text.font);
+        }
+        this.builders.forEach((builder) => {
+            const view = builder.buildView(actor);
+            if (view) {
+                this.viewEntries?.push(view);
+                this.worldContainer.addChild(view);
+            }
+        });
+        this.deletedActors.delete(actor);
+    };
+    handleActorRemove = (event) => {
+        const { actor } = event;
+        const sprite = actor.getComponent(Sprite);
+        if (sprite) {
+            this.imageStore.release(sprite.src);
+        }
+        this.deletedActors.add(actor);
+    };
+    updateCamera() {
+        const currentCamera = this.cameraService.getCurrentCamera();
+        const transform = currentCamera?.getComponent(Transform);
+        const camera = currentCamera?.getComponent(Camera);
+        const offsetX = transform?.offsetX ?? 0;
+        const offsetY = transform?.offsetY ?? 0;
+        const zoom = camera?.zoom ?? 1;
+        this.worldContainer.scale.set(zoom);
+        this.worldContainer.position.set(this.application.renderer.width / 2, this.application.renderer.height / 2);
+        this.worldContainer.pivot.set(offsetX, offsetY);
+    }
+    updateViews() {
+        this.viewEntries?.forEach((view) => {
+            this.builders
+                .get(view.__dacha.builderKey)
+                .updateView(view.__dacha.actor);
+        });
+    }
+    updateBounds() {
+        this.viewEntries?.forEach((view) => {
+            if (!view.__dacha.didChange) {
+                return;
+            }
+            const bounds = view.getLocalBounds();
+            view.__dacha.bounds.set(bounds.minX, bounds.minY, bounds.maxX, bounds.maxY);
+            view.updateLocalTransform();
+            view.__dacha.bounds.applyMatrix(view.localTransform);
+        });
+    }
+    sortViews() {
+        this.viewEntries?.sort(this.sortFn);
+        this.viewEntries?.forEach((view, index) => {
+            view.zIndex = index;
+        });
+    }
+    clearDeletedEntries() {
+        if (this.deletedActors.size === 0) {
+            return;
+        }
+        this.worldContainer.removeChildren();
+        this.viewEntries = this.viewEntries?.filter((entry) => {
+            if (!this.deletedActors.has(entry.__dacha.actor)) {
+                this.worldContainer.addChild(entry);
+                return true;
+            }
+            this.builders.get(entry.__dacha.builderKey).destroy(entry.__dacha.actor);
+            return false;
+        });
+        this.deletedActors.clear();
+    }
+    update() {
+        this.clearDeletedEntries();
+        this.updateCamera();
+        this.updateViews();
+        this.updateBounds();
+        this.sortViews();
+        this.application.renderer.render({ container: this.application.stage });
+    }
+}
+Renderer.systemName = 'Renderer';

package/build/contrib/systems/renderer/service/index.d.ts

@@ -0,0 +1,20 @@
+import { type ViewContainer, type Application } from 'pixi.js';
+import { type Actor } from '../../../../engine/actor';
+import { type SortFn } from '../sort';
+import { type Bounds } from '../types';
+interface RendererServiceOptions {
+    application: Application;
+    getViewEntries: () => ViewContainer[] | undefined;
+    sortFn: SortFn;
+}
+export declare class RendererService {
+    private application;
+    private getViewEntries;
+    private sortFn;
+    constructor({ application, getViewEntries, sortFn }: RendererServiceOptions);
+    getRenderingContext(): Application;
+    intersectsWithPoint(x: number, y: number): Actor[];
+    intersectsWithRectangle(minX: number, minY: number, maxX: number, maxY: number): Actor[];
+    getBounds(actor: Actor): Bounds;
+}
+export {};

package/build/contrib/systems/renderer/service/index.js

@@ -0,0 +1,70 @@
+import { Sprite } from '../../../components/sprite';
+import { Shape } from '../../../components/shape';
+import { PixiView } from '../../../components/pixi-view';
+import { BitmapText } from '../../../components/bitmap-text';
+import { Transform } from '../../../components/transform';
+const VIEW_COMPONENTS = [Sprite, Shape, PixiView, BitmapText];
+export class RendererService {
+    application;
+    getViewEntries;
+    sortFn;
+    constructor({ application, getViewEntries, sortFn }) {
+        this.application = application;
+        this.getViewEntries = getViewEntries;
+        this.sortFn = sortFn;
+    }
+    getRenderingContext() {
+        return this.application;
+    }
+    intersectsWithPoint(x, y) {
+        const intersects = new Set();
+        this.getViewEntries()?.forEach((entry) => {
+            const { minX, minY, maxX, maxY } = entry.__dacha.bounds;
+            if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+                intersects.add(entry);
+            }
+        });
+        // TODO: Find more efficient way to return intersected objects in right order
+        // according to posititon and sorting layer
+        return Array.from(intersects)
+            .sort(this.sortFn)
+            .reverse()
+            .map((entry) => entry.__dacha.actor);
+    }
+    intersectsWithRectangle(minX, minY, maxX, maxY) {
+        const actors = new Set();
+        this.getViewEntries()?.forEach((entry) => {
+            const { x, y } = entry.position;
+            if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+                actors.add(entry.__dacha.actor);
+            }
+        });
+        return Array.from(actors);
+    }
+    getBounds(actor) {
+        const transform = actor.getComponent(Transform);
+        let minX = transform.offsetX;
+        let minY = transform.offsetY;
+        let maxX = transform.offsetX;
+        let maxY = transform.offsetY;
+        VIEW_COMPONENTS.forEach((ViewComponent) => {
+            const viewComponent = actor.getComponent(ViewComponent);
+            const bounds = viewComponent?.renderData?.view.__dacha.bounds;
+            if (!bounds) {
+                return;
+            }
+            minX = Math.min(minX, bounds?.minX);
+            minY = Math.min(minY, bounds?.minY);
+            maxX = Math.max(maxX, bounds?.maxX);
+            maxY = Math.max(maxY, bounds?.maxY);
+        });
+        return {
+            minX,
+            minY,
+            maxX,
+            maxY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+}

package/build/contrib/systems/{sprite-renderer → renderer}/sort/index.d.ts

@@ -2,7 +2,5 @@ import { SortFn } from './types';
 export { createSortByLayer } from './sort-by-layer';
 export { sortByXAxis } from './sort-by-x-axis';
 export { sortByYAxis } from './sort-by-y-axis';
-export { sortByZAxis } from './sort-by-z-axis';
-export { sortByFit } from './sort-by-fit';
-export declare const composeSort: (sortFns: Array<SortFn>) => SortFn;
+export declare const composeSort: (sortFns: SortFn[]) => SortFn;
 export type { SortFn };

package/build/contrib/systems/{sprite-renderer → renderer}/sort/index.js

@@ -1,12 +1,10 @@
 export { createSortByLayer } from './sort-by-layer';
 export { sortByXAxis } from './sort-by-x-axis';
 export { sortByYAxis } from './sort-by-y-axis';
-export { sortByZAxis } from './sort-by-z-axis';
-export { sortByFit } from './sort-by-fit';
 export const composeSort = (sortFns) => (a, b) => {
     let result = 0;
-    for (let i = 0; i < sortFns.length; i += 1) {
-        result = sortFns[i](a, b);
+    for (const sortFn of sortFns) {
+        result = sortFn(a, b);
         if (result !== 0) {
             return result;
         }

package/build/contrib/systems/renderer/sort/sort-by-layer.d.ts

@@ -0,0 +1,2 @@
+import type { SortFn } from './types';
+export declare const createSortByLayer: (sortingLayers: string[]) => SortFn;

package/build/contrib/systems/renderer/sort/sort-by-layer.js

@@ -0,0 +1,13 @@
+export const createSortByLayer = (sortingLayers) => {
+    const sortingLayer = sortingLayers.reduce((storage, layer, index) => {
+        storage[layer] = index;
+        return storage;
+    }, {});
+    return (a, b) => {
+        const aComponent = a.__dacha.viewComponent;
+        const bComponent = b.__dacha.viewComponent;
+        const aSortingLayerOrder = sortingLayer[aComponent.sortingLayer];
+        const bSortingLayerOrder = sortingLayer[bComponent.sortingLayer];
+        return aSortingLayerOrder - bSortingLayerOrder;
+    };
+};

package/build/contrib/systems/renderer/sort/sort-by-x-axis.d.ts

@@ -0,0 +1,2 @@
+import type { SortFn } from './types';
+export declare const sortByXAxis: (direction?: number) => SortFn;