@woosh/meep-engine/editor/view/library/MeshLibraryView.js

Pure JavaScript game engine. Fully featured and production ready.

import View from "../../../src/view/View.js";
import { makeModelView } from "../../../src/view/renderModel.js";
import Vector2 from "../../../src/core/geom/Vector2.js";
import domify from "../../../src/view/DOM.js";
import LabelView from "../../../src/view/common/LabelView.js";
import List from "../../../src/core/collection/list/List.js";
import AABB2 from "../../../src/core/geom/2d/aabb/AABB2.js";
import { DragEvents } from "../../../src/engine/input/devices/events/DragEvents.js";
import { MouseEvents } from "../../../src/engine/input/devices/events/MouseEvents.js";
import { TouchEvents } from "../../../src/engine/input/devices/events/TouchEvents.js";
import { computePathBase } from "../../../src/core/path/computePathBase.js";


const ICON_SIZE = 50;

class MeshAssetView extends View {
    /**
     *
     * @param {string} url
     * @param {Promise.<AssetManager>} assetManager
     * @param {Promise.<WebGLRenderer>} renderer
     * @constructor
     */
    constructor({ url, assetManager, renderer }) {
        super();

        const $el = domify();

        $el.addClass('ui-mesh-library-asset-view');

        this.el = $el.el;

        Promise.all([assetManager, renderer])
            .then(function ([assetManager, renderer]) {
                const imagePromise = makeModelView(url, assetManager, new Vector2(ICON_SIZE, ICON_SIZE), renderer, new AABB2(0, 0, 1, 1));

                imagePromise.then(function (image) {
                    $el.append(image);
                });
            });

        const pathBase = computePathBase(url);

        const lastIndexOfDot = pathBase.lastIndexOf('.');

        let fileName;
        if (lastIndexOfDot !== -1) {
            fileName = pathBase.substring(0, lastIndexOfDot);
        } else {
            fileName = pathBase;
        }

        const vName = new LabelView(fileName);

        this.addChild(vName);

        $el.attr({ draggable: true });

        $el.on(DragEvents.DragStart, function (event) {
            console.log('dragstart', event);
            event.stopPropagation();

            event.dataTransfer.setData('text/json', JSON.stringify({
                type: "Mesh",
                url
            }));
        });

        $el.on(MouseEvents.Down, function (event) {
            event.stopPropagation();
        });

        $el.on(TouchEvents.Start, function (event) {
            event.stopPropagation();
        });

        $el.on(MouseEvents.Move, function (event) {
            event.stopPropagation();
        });

        $el.on(TouchEvents.Move, function (event) {
            event.stopPropagation();
        });
    }
}


class MeshLibraryView extends View {
    /**
     *
     * @param {MeshLibrary} library
     * @param {Promise.<AssetManager>} assetManager
     * @param {Promise.<WebGLRenderer>} renderer
     * @constructor
     */
    constructor(library, assetManager, renderer) {
        super();

        const $el = domify();

        $el.addClass('ui-mesh-library-view');

        this.el = $el.el;

        this.assets = new List();

        const self = this;

        function layout() {
            const width = self.size.x;

            const columnSpacing = 16;

            const minRowSpacing = 8;

            const rowLength = Math.floor(width / (ICON_SIZE + minRowSpacing));

            const spareRowWidth = width - ICON_SIZE * rowLength;

            const rowSpacing = spareRowWidth / Math.max(1, rowLength - 1);

            const assets = self.assets;

            const numAssets = assets.length;

            let rowIndex = 0;
            let columnIndex = 0;
            for (let i = 0; i < numAssets; i++) {
                const assetView = assets.get(i);

                assetView.position.set(rowIndex * (ICON_SIZE + rowSpacing), columnIndex * (ICON_SIZE + columnSpacing));

                rowIndex++;
                if (rowIndex >= rowLength) {
                    //start new row
                    rowIndex = 0;
                    columnIndex++;
                }
            }
        }

        function addAsset(url) {
            const assetView = new MeshAssetView({ url, assetManager, renderer });

            self.assets.add(assetView);

            self.addChild(assetView);
        }

        library.assets.forEach(addAsset);
        library.assets.on.added.add(addAsset);

        this.layout = layout;

        this.bindSignal(this.size.onChanged, layout);

        this.on.linked.add(layout);
    }
}




export default MeshLibraryView;