#

luxiaotao1123

2024-03-05 6acd06009a8d830f3af2b16220d3ed52810ccf62

#

 zy-asrs-flow/src/pages/map/index.jsx

@@ -93,13 +93,13 @@
        }
        if (mapEditModel) {
            player.showGridlines();
            player.activateMapEvent(Utils.MapEvent.SELECTION_BOX, Utils.MapEvent.PAN);
            player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
            mapContainer.children.forEach(child => {
                Utils.beMovable(child, setDidClickSprite);
            })
        } else {
            player.hideGridlines();
            player.activateMapEvent(null, Utils.MapEvent.PAN);
            player.activateMapEvent(null);
            mapContainer.children.forEach(child => {
                child.off('pointerup');
                child.off('pointerdown');

 zy-asrs-flow/src/pages/map/player.js

@@ -5,8 +5,9 @@
export default class Player {

    constructor(dom, dark, didClickSprite) {
        // not dynamic
        this.darkModel = dark;
        this.didClickSprite = didClickSprite;   // not dynamic
        this.didClickSprite = didClickSprite;
        // init
        this.app = generatePixiApp(dark);
        dom.appendChild(this.app.view);
@@ -19,19 +20,17 @@
            event.preventDefault();
        });

        this.pan = false; // 平移

        this.activateMapEvent(null, Utils.MapEvent.PAN);
        // this.activateMapEvent(null);
        this.activateMapScale();
        this.activateMapPan();
        this.showCoordinates();
        this.appTicker();
    }

    activateMapEvent = (leftEvent, rightEvent) => {
        if (this.mapEvent) {
            this.app.view.removeEventListener('mousedown', this.mapEvent);
            this.mapContainer.parent.off('mousedown', this.mapEvent);
        }

        this.mapEvent = (event) => {
            // left
            if (event.button === 0 && leftEvent) {
@@ -46,16 +45,12 @@
            // right
            if (event.button === 2 && rightEvent) {
                switch (rightEvent) {
                    case Utils.MapEvent.PAN:
                        this.mapPan(event);
                        break
                    default:
                        break
                }
            }
        }

        this.app.view.addEventListener('mousedown', this.mapEvent)
        this.mapContainer.parent.on('mousedown', this.mapEvent)
    }

    mapSelect = (event) => {
@@ -89,9 +84,9 @@
            }
        }

        this.app.view.addEventListener('mousemove', handleMouseMove);
        this.mapContainer.parent.on('mousemove', handleMouseMove);

        this.app.view.addEventListener('mouseup', (event) => {
        this.mapContainer.parent.on('mouseup', (event) => {
            if (isSelecting) {
                if (this.selectedSprites && this.selectedSprites.length > 0) {
                    this.selectedSprites.forEach(child => {
@@ -108,31 +103,37 @@
                })
                isSelecting = false;
                selectionBox.clear();

            }

            this.app.view.removeEventListener('mousemove', handleMouseMove);
            this.mapContainer.parent.off('mousemove', handleMouseMove);
        });
    }

    mapPan = (event) => {
        this.pan = true;
        let previousPosition = { x: event.clientX, y: event.clientY };
        const mouseMoveHandler = (event) => {
            if (this.pan) {
                const dx = event.clientX - previousPosition.x;
                const dy = event.clientY - previousPosition.y;
    activateMapPan = () => {
        const mapPanHandle = (event) => {
            if (event.button === 2) {
                this.pan = true;
                let previousPosition = { x: event.clientX, y: event.clientY };
                const mouseMoveHandler = (event) => {
                    if (this.pan) {
                        const dx = event.clientX - previousPosition.x;
                        const dy = event.clientY - previousPosition.y;

                this.mapContainer.position.x += dx;
                this.mapContainer.position.y += dy;
                        this.mapContainer.position.x += dx;
                        this.mapContainer.position.y += dy;

                previousPosition = { x: event.clientX, y: event.clientY };
                        previousPosition = { x: event.clientX, y: event.clientY };
                    }
                };
                this.app.view.addEventListener('mousemove', mouseMoveHandler);
                this.app.view.addEventListener('mouseup', () => {
                    this.app.view.removeEventListener('mousemove', mouseMoveHandler);
                    this.pan = false;
                });
            }
        };
        this.app.view.addEventListener('mousemove', mouseMoveHandler);
        this.app.view.addEventListener('mouseup', () => {
            this.app.view.removeEventListener('mousemove', mouseMoveHandler);
            this.pan = false;
        });
        }
        this.app.view.addEventListener('mousedown', mapPanHandle);
    }

    activateMapScale = () => {

 zy-asrs-flow/src/pages/map/utils.js

@@ -14,7 +14,6 @@

export const MapEvent = Object.freeze({
    SELECTION_BOX: Symbol.for(0),
    PAN: Symbol.for(1),
})

export const getRealPosition = (x, y, mapContainer) => {