| | |
| | | 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); |
| | |
| | | }; |
| | | window.addEventListener('resize', handleResize); |
| | | }, []); |
| | | |
| | | // didClickSprite, stop triggers both sprite click and play's selection boxs |
| | | React.useEffect(() => { |
| | | player.updateDidClickSprite(didClickSprite); |
| | | }, [didClickSprite]) |
| | | |
| | | // resize |
| | | React.useEffect(() => { |
| | |
| | | } |
| | | 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'); |
| | |
| | | |
| | | Utils.initSprite(sprite); |
| | | mapContainer.addChild(sprite); |
| | | Utils.beMovable(sprite); |
| | | Utils.beMovable(sprite, setDidClickSprite); |
| | | }; |
| | | |
| | | return ( |
| | |
| | | |
| | | 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); |
| | |
| | | } |
| | | |
| | | mapSelect = (event) => { |
| | | let that = this; |
| | | let isSelecting = false; |
| | | |
| | | const selectionBox = new PIXI.Graphics(); |
| | |
| | | |
| | | 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); |
| | |
| | | } |
| | | } |
| | | |
| | | updateDidClickSprite = (value) => { |
| | | this.didClickSprite = value; |
| | | } |
| | | |
| | | appTicker = () => { |
| | | TWEEDLE.Group.shared.update(); |
| | | } |
| | |
| | | sprite.eventMode = 'static'; |
| | | } |
| | | |
| | | export const beMovable = (sprite) => { |
| | | export const beMovable = (sprite, setDidClickSprite) => { |
| | | sprite.off('pointerup'); |
| | | sprite.off('pointerdown'); |
| | | sprite.off('click'); |
| | |
| | | |
| | | let dragTarget; |
| | | function onDragStart(event) { |
| | | setDidClickSprite(true); |
| | | dragTarget = event.currentTarget; |
| | | mapContainer.parent.off('pointermove'); |
| | | mapContainer.parent.on('pointermove', onDragMove, dragTarget); |
| | |
| | | |
| | | function onDragEnd() { |
| | | if (dragTarget) { |
| | | setDidClickSprite(false); |
| | | this.parent.off('pointermove'); |
| | | dragTarget.alpha = 1; |
| | | dragTarget = null; |