#

luxiaotao1123

2024-03-05 381a583e789a5443807384e92c1961807165fd70

#

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

@@ -57,10 +57,11 @@
    const [mapContainer, setMapContainer] = React.useState(null);
    const [mapEditModel, setMapEditModel] = React.useState(false);
    const [deviceSettingModel, setDeviceSettingModel] = React.useState(false);
    const [didClickSprite, setDidClickSprite] = React.useState(false);

    // init func
    React.useEffect(() => {
        player = new Player(mapRef.current, styles.dark);
        player = new Player(mapRef.current, styles.dark, didClickSprite);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
@@ -74,6 +75,11 @@
        };
        window.addEventListener('resize', handleResize);
    }, []);

    // didClickSprite, stop triggers both sprite click and play's selection boxs
    React.useEffect(() => {
        player.updateDidClickSprite(didClickSprite);
    }, [didClickSprite])

    // resize
    React.useEffect(() => {
@@ -92,12 +98,13 @@
        }
        if (mapEditModel) {
            player.showGridlines();
            mapContainer.children.forEach(child => {
                Utils.beMovable(child);
            })
            player.activateMapEvent(Utils.MapEvent.SELECTION_BOX, Utils.MapEvent.PAN);
            mapContainer.children.forEach(child => {
                Utils.beMovable(child, setDidClickSprite);
            })
        } else {
            player.hideGridlines();
            player.activateMapEvent(null, Utils.MapEvent.PAN);
            mapContainer.children.forEach(child => {
                child.off('pointerup');
                child.off('pointerdown');
@@ -126,7 +133,7 @@

        Utils.initSprite(sprite);
        mapContainer.addChild(sprite);
        Utils.beMovable(sprite);
        Utils.beMovable(sprite, setDidClickSprite);
    };

    return (

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

@@ -4,8 +4,9 @@

export default class Player {

    constructor(dom, dark) {
    constructor(dom, dark, didClickSprite) {
        this.darkModel = dark;
        this.didClickSprite = didClickSprite;
        // init
        this.app = generatePixiApp(dark);
        dom.appendChild(this.app.view);
@@ -58,7 +59,6 @@
    }

    mapSelect = (event) => {
        let that = this;
        let isSelecting = false;

        const selectionBox = new PIXI.Graphics();
@@ -71,11 +71,11 @@

        isSelecting = true;

        function handleMouseMove(event) {
            if (isSelecting) {
        const handleMouseMove = (event) => {
            if (isSelecting && !this.didClickSprite) {
                // end
                const endPoint = new PIXI.Point();
                that.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY);
                this.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY);
                const selectionEnd = { x: endPoint.x, y: endPoint.y }

                const width = Math.abs(selectionEnd.x - selectionStart.x);
@@ -205,6 +205,10 @@
        }
    }

    updateDidClickSprite = (value) => {
        this.didClickSprite = value;
    }

    appTicker = () => {
        TWEEDLE.Group.shared.update();
    }

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

@@ -31,7 +31,7 @@
    sprite.eventMode = 'static';
}

export const beMovable = (sprite) => {
export const beMovable = (sprite, setDidClickSprite) => {
    sprite.off('pointerup');
    sprite.off('pointerdown');
    sprite.off('click');
@@ -40,6 +40,7 @@

    let dragTarget;
    function onDragStart(event) {
        setDidClickSprite(true);
        dragTarget = event.currentTarget;
        mapContainer.parent.off('pointermove');
        mapContainer.parent.on('pointermove', onDragMove, dragTarget);
@@ -56,6 +57,7 @@

    function onDragEnd() {
        if (dragTarget) {
            setDidClickSprite(false);
            this.parent.off('pointermove');
            dragTarget.alpha = 1;
            dragTarget = null;