#
luxiaotao1123
2024-03-05 381a583e789a5443807384e92c1961807165fd70
#
3个文件已修改
35 ■■■■■ 已修改文件
zy-asrs-flow/src/pages/map/index.jsx 17 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/pages/map/player.js 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zy-asrs-flow/src/pages/map/utils.js 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
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;