|  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // show sprite feature from sprite click event | 
|---|
|  |  |  | export const viewFeature = (sprite, setCurSPrite) => { | 
|---|
|  |  |  | sprite.off('pointerup'); | 
|---|
|  |  |  | sprite.off('pointermove'); | 
|---|
|  |  |  | sprite.off('pointerdown'); | 
|---|
|  |  |  | sprite.off('click'); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let viewTarget; | 
|---|
|  |  |  | sprite.on("click", onClick); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function onClick(event) { | 
|---|
|  |  |  | setCurSPrite(sprite); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // sprite be movable from sprite click event | 
|---|
|  |  |  | export const beMovable = (sprite, setDidClickSprite) => { | 
|---|
|  |  |  | sprite.off('pointerup'); | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let dragTarget; | 
|---|
|  |  |  | function onDragStart(event) { | 
|---|
|  |  |  | setDidClickSprite(true); | 
|---|
|  |  |  | dragTarget = event.currentTarget; | 
|---|
|  |  |  | mapContainer.parent.off('pointermove'); | 
|---|
|  |  |  | mapContainer.parent.on('pointermove', onDragMove, dragTarget); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mapContainer.parent.off('pointerup'); | 
|---|
|  |  |  | mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); | 
|---|
|  |  |  | if (event.button === 0) { | 
|---|
|  |  |  | setDidClickSprite(true); | 
|---|
|  |  |  | dragTarget = event.currentTarget; | 
|---|
|  |  |  | mapContainer.parent.off('pointermove'); | 
|---|
|  |  |  | mapContainer.parent.on('pointermove', onDragMove, dragTarget); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mapContainer.parent.off('pointerup'); | 
|---|
|  |  |  | mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function onDragMove(event) { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | return options; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | *     // | 
|---|
|  |  |  | let sprite = mapContainer.children[0]; | 
|---|
|  |  |  | let bounds = sprite.getBounds(); | 
|---|
|  |  |  | console.log(bounds, sprite.getLocalBounds()); | 
|---|
|  |  |  | console.log(sprite.position); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | console.log('-'); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | console.log(mapContainer.scale, mapContainer.position); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | console.log('==========='); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | */ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export const adaptScreen = () => { | 
|---|
|  |  |  | if (!mapContainer || !app) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (mapContainer.children.length === 0) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | mapContainer.scale.set(1); | 
|---|
|  |  |  | mapContainer.position.set(0, 0); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let minX, maxX, minY, maxY; | 
|---|
|  |  |  | for (let sprite of mapContainer.children) { | 
|---|
|  |  |  | if (sprite?.data?.uuid) { | 
|---|
|  |  |  | let bounds = sprite.getBounds(); | 
|---|
|  |  |  | minX = minX !== undefined ? Math.min(minX, bounds.x) : bounds.x; | 
|---|
|  |  |  | minY = minY !== undefined ? Math.min(minY, bounds.y) : bounds.y; | 
|---|
|  |  |  | maxX = maxX !== undefined ? Math.max(maxX, bounds.x + bounds.width) : bounds.x + bounds.width; | 
|---|
|  |  |  | maxY = maxY !== undefined ? Math.max(maxY, bounds.y + bounds.height) : bounds.y + bounds.height; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let newScale = Math.min( | 
|---|
|  |  |  | app.renderer.width / (maxX - minX) * 0.8, | 
|---|
|  |  |  | app.renderer.height / (maxY - minY) * 0.8 | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let centerPoint = { | 
|---|
|  |  |  | x: (minX + maxX) / 2 * mapContainer.scale.x, | 
|---|
|  |  |  | y: (minY + maxY) / 2 * mapContainer.scale.y | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(mapContainer.scale).easing(TWEEDLE.Easing.Quadratic.Out) | 
|---|
|  |  |  | .to({ | 
|---|
|  |  |  | x: newScale, | 
|---|
|  |  |  | y: newScale | 
|---|
|  |  |  | }, 200).start(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(mapContainer.position).easing(TWEEDLE.Easing.Quadratic.Out) | 
|---|
|  |  |  | .to({ | 
|---|
|  |  |  | x: app.renderer.width / 2 - centerPoint.x * newScale, | 
|---|
|  |  |  | y: app.renderer.height / 2 - centerPoint.y * newScale | 
|---|
|  |  |  | }, 200).start(); | 
|---|
|  |  |  | } | 
|---|