| | |
| | | |
| | | export default class Player { |
| | | |
| | | constructor(dom, dark, didClickSprite) { |
| | | constructor(dom, dark) { |
| | | // not dynamic |
| | | this.darkModel = dark; |
| | | this.didClickSprite = didClickSprite; |
| | | // init |
| | | this.app = generatePixiApp(dark); |
| | | dom.appendChild(this.app.view); |
| | |
| | | if (this.mapEvent) { |
| | | this.mapContainer.parent.off('mousedown'); |
| | | this.mapEvent = null; |
| | | if (this.selectedSprites && this.selectedSprites.length > 0) { |
| | | this.selectedSprites.forEach(child => { |
| | | Utils.unMarkSprite(child); |
| | | }) |
| | | } |
| | | // if (this.selectedSprites && this.selectedSprites.length > 0) { |
| | | // this.selectedSprites.forEach(child => { |
| | | // Utils.unMarkSprite(child); |
| | | // }) |
| | | // } |
| | | } |
| | | this.mapEvent = (event) => { |
| | | if (eventType && event.button === 0) { |
| | |
| | | this.app.renderer.events.mapPositionToPoint(startPoint, event.clientX, event.clientY); |
| | | let selectionStart = { x: startPoint.x, y: startPoint.y }; |
| | | |
| | | isSelecting = true; |
| | | // avoid trigger sprite event |
| | | let hasHitSprite = false; |
| | | for (let child of this.mapContainer.children) { |
| | | if (child.data?.uuid) { |
| | | if (child.getBounds().contains(selectionStart.x, selectionStart.y)) { |
| | | hasHitSprite = true; break; |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (!hasHitSprite) { |
| | | isSelecting = true; |
| | | } |
| | | |
| | | const handleMouseMove = (event) => { |
| | | if (isSelecting && !this.didClickSprite) { |
| | | if (isSelecting) { |
| | | // select end pos |
| | | const endPoint = new PIXI.Point(); |
| | | this.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY); |
| | |
| | | |
| | | this.mapContainer.parent.on('mouseup', (event) => { |
| | | if (isSelecting) { |
| | | // sprite show style which be selected |
| | | if (this.selectedSprites && this.selectedSprites.length > 0) { |
| | | this.selectedSprites.forEach(child => { |
| | | Utils.unMarkSprite(child); |
| | | }) |
| | | } |
| | | this.selectedSprites = []; |
| | | this.clearSelectedSprites(); |
| | | |
| | | // sprite show style which be selected |
| | | this.mapContainer.children.forEach(child => { |
| | | if (Utils.isSpriteInSelectionBox(child, this.selectionBox)) { |
| | | this.selectedSprites.push(child); |
| | |
| | | |
| | | // after selectbox complete |
| | | if (fn) { |
| | | fn(this.selectedSprites, this.scale, () => { |
| | | fn(this.selectedSprites, () => { |
| | | // trigger at end of selectionBox when fn happen mouseup |
| | | this.selectedSprites = []; |
| | | this.activateMapEvent(Utils.MapEvent.SELECTION_BOX, fn); |
| | | }); |
| | | } |
| | | |
| | | // sprites batch move |
| | | // Utils.spriteListBeMovable(this.selectedSprites, this.scale, () => { |
| | | // this.activateMapEvent(Utils.MapEvent.SELECTION_BOX, fn); |
| | | // }); |
| | | |
| | | } |
| | | |
| | | this.mapContainer.parent.off('mousemove', handleMouseMove); |
| | | }); |
| | | } |
| | | |
| | | clearSelectedSprites = () => { |
| | | if (this.selectedSprites && this.selectedSprites.length > 0) { |
| | | this.selectedSprites.forEach(child => { |
| | | Utils.unMarkSprite(child); |
| | | }) |
| | | } |
| | | this.selectedSprites = []; |
| | | } |
| | | |
| | | activateMapPan = () => { |
| | |
| | | }, 200).start(); |
| | | } |
| | | |
| | | updateDidClickSprite = (value) => { |
| | | this.didClickSprite = value; |
| | | } |
| | | |
| | | getStartedTicker = () => { |
| | | this.app.ticker.add((delta) => { |
| | | TWEEDLE.Group.shared.update(); |
| | |
| | | |
| | | function generatePixiContainer(name) { |
| | | const mapContainer = new PIXI.Container(); |
| | | mapContainer.sortableChildren = true; |
| | | mapContainer.name = name; |
| | | mapContainer.data = {}; |
| | | return mapContainer; |