| | |
| | | |
| | | import shelf from '/map/shelf.svg'; |
| | | import charge from '/map/charge.svg'; |
| | | import station from '/map/station.svg'; |
| | | import direction from '/map/direction.svg'; |
| | | |
| | | let app, mapContainer; |
| | | let app, mapContainer, themeMode; |
| | | let selectedSprite, effectTick, effectHalfCircle, effectRectangle; |
| | | |
| | | export function getApp() { |
| | | return app; |
| | | } |
| | | |
| | | export function setApp(param) { |
| | | app = param; |
| | | } |
| | | |
| | | export function getMapContainer() { |
| | | return mapContainer; |
| | | } |
| | | |
| | | export function setMapContainer(param) { |
| | | mapContainer = param; |
| | | } |
| | | |
| | | export function getApp() { |
| | | return app; |
| | | export function getThemeMode() { |
| | | return themeMode; |
| | | } |
| | | |
| | | export function getMapContainer() { |
| | | return mapContainer; |
| | | export function setThemeMode(param) { |
| | | themeMode = param; |
| | | } |
| | | |
| | | |
| | | export const getRealPosition = (x, y) => { |
| | | const rect = app.view.getBoundingClientRect(); |
| | |
| | | let sprite; |
| | | switch (deviceType) { |
| | | case DEVICE_TYPE.SHELF: |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(shelf, { resourceOptions: { scale: 5 } })); |
| | | sprite.width = 50; |
| | | sprite.height = 50; |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(shelf, { resourceOptions: { scale: 1 } })); |
| | | // sprite.width = 50; |
| | | // sprite.height = 50; |
| | | sprite.zIndex = DEVICE_Z_INDEX.SHELF; |
| | | break; |
| | | case DEVICE_TYPE.CHARGE: |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(charge, { resourceOptions: { scale: 1 } })); |
| | | sprite.width = 60; |
| | | sprite.height = 60; |
| | | // sprite.width = 60; |
| | | // sprite.height = 60; |
| | | sprite.zIndex = DEVICE_Z_INDEX.CHARGE; |
| | | break; |
| | | case DEVICE_TYPE.STATION: |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(station, { resourceOptions: { scale: 1 } })); |
| | | // sprite.width = 112; |
| | | // sprite.height = 63; |
| | | sprite.zIndex = DEVICE_Z_INDEX.STATION; |
| | | break; |
| | | case DEVICE_TYPE.DIRECTION: |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(direction, { resourceOptions: { scale: 5 } })); |
| | | sprite.width = 112; |
| | | sprite.height = 63; |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(direction, { resourceOptions: { scale: 1 } })); |
| | | // sprite.width = 112; |
| | | // sprite.height = 63; |
| | | sprite.zIndex = DEVICE_Z_INDEX.DIRECTION; |
| | | break; |
| | | default: |
| | |
| | | type: type, |
| | | uuid: generateID() |
| | | }; |
| | | } |
| | | |
| | | export const markSprite = (sprite) => { |
| | | sprite.alpha = 0.5; |
| | | } |
| | | |
| | | export const unMarkSprite = (sprite) => { |
| | | sprite.alpha = 1; |
| | | } |
| | | |
| | | export const beMovable = (sprite) => { |
| | |
| | | |
| | | } |
| | | |
| | | export const spriteListBeMovable = (selectedSprites, endFn) => { |
| | | if (selectedSprites && selectedSprites.length > 0) { |
| | | let batchMove = false; |
| | | let batchMoveStartPos = null; |
| | | |
| | | const batchMoving = (event) => { |
| | | const scale = mapContainer.scale.x; |
| | | if (batchMove && batchMoveStartPos) { |
| | | // offset move val |
| | | var mouseMovement = { |
| | | x: (event.global.x - batchMoveStartPos.x) / scale, |
| | | y: (event.global.y - batchMoveStartPos.y) / scale |
| | | }; |
| | | for (let sprite of selectedSprites) { |
| | | sprite.position.x = sprite.batchMoveStartPos.x + mouseMovement.x; |
| | | sprite.position.y = sprite.batchMoveStartPos.y + mouseMovement.y; |
| | | } |
| | | } |
| | | } |
| | | |
| | | const batchMoveEnd = (event) => { |
| | | batchMove = false; |
| | | batchMoveStartPos = null; |
| | | selectedSprites.forEach(child => { |
| | | unMarkSprite(child); |
| | | }) |
| | | selectedSprites = []; |
| | | mapContainer.parent.off('mousedown'); |
| | | mapContainer.parent.off('mousemove'); |
| | | mapContainer.parent.off('mouseup'); |
| | | |
| | | if (endFn) { |
| | | endFn(); |
| | | } |
| | | } |
| | | |
| | | const batchMoveStart = (event) => { |
| | | batchMoveStartPos = { x: event.data.global.clone().x, y: event.data.global.clone().y }; |
| | | selectedSprites.forEach(child => { |
| | | child.batchMoveStartPos = { x: child.position.x, y: child.position.y }; |
| | | }) |
| | | |
| | | batchMove = true; |
| | | mapContainer.parent.off('mousemove'); |
| | | mapContainer.parent.on('mousemove', batchMoving); |
| | | |
| | | mapContainer.parent.off('mouseup'); |
| | | mapContainer.parent.on('mouseup', batchMoveEnd); |
| | | } |
| | | |
| | | mapContainer.parent.off('mousedown') |
| | | mapContainer.parent.on('mousedown', batchMoveStart); |
| | | } |
| | | } |
| | | |
| | | export const isSpriteInSelectionBox = (sprite, selectionBox) => { |
| | | const spriteBounds = sprite.getBounds(); |
| | | const boxBounds = selectionBox.getBounds(); |
| | | |
| | | return spriteBounds.x + spriteBounds.width > boxBounds.x |
| | | && spriteBounds.x < boxBounds.x + boxBounds.width |
| | | && spriteBounds.y + spriteBounds.height > boxBounds.y |
| | | && spriteBounds.y < boxBounds.y + boxBounds.height; |
| | | } |
| | | |
| | | export const beSettings = (sprite, setSpriteSettings) => { |
| | | sprite.off('pointerup'); |
| | | sprite.off('pointermove'); |
| | | sprite.off('pointerdown'); |
| | | sprite.off('click'); |
| | | |
| | | sprite.on("click", onClick); |
| | | |
| | | function onClick(event) { |
| | | setSpriteSettings(sprite); |
| | | } |
| | | } |
| | | |
| | | export const clearMapData = () => { |
| | | if (!mapContainer) { |
| | | return; |
| | | } |
| | | let childList = []; |
| | | mapContainer.children.forEach(child => { |
| | | if (child.data?.uuid) { |
| | | childList.push(child); |
| | | } |
| | | }) |
| | | if (childList.length > 0) { |
| | | childList.forEach(child => { |
| | | mapContainer.removeChild(child); |
| | | child.destroy({ children: true, texture: false, baseTexture: false }); |
| | | }) |
| | | childList.forEach((child, index) => { |
| | | childList[index] = null; |
| | | }); |
| | | childList = []; |
| | | } |
| | | } |
| | | |
| | | |
| | | export const showSelectedEffect = (sprite) => { |
| | | if (!sprite?.texture || !sprite?.texture?.valid) { |
| | | return; |
| | | } |
| | | const { width, height } = sprite; |
| | | const scale = sprite.scale.x; |
| | | const sideLen = (Math.max(width, height) + 10) * scale; |
| | | const color = themeMode === 'light' ? 0x273c75 : 0xffffff; |
| | | |
| | | effectHalfCircle = new PIXI.Graphics(); |
| | | effectHalfCircle.beginFill(color); |
| | | effectHalfCircle.lineStyle(2 * scale, color); |
| | | effectHalfCircle.arc(0, 0, sideLen, 0, Math.PI); |
| | | effectHalfCircle.endFill(); |
| | | effectHalfCircle.position.set(sprite.x, sprite.y); |
| | | effectHalfCircle.scale.set(1 / scale); |
| | | effectHalfCircle.zIndex = 9999; |
| | | |
| | | effectRectangle = new PIXI.Graphics(); |
| | | effectRectangle.lineStyle(5 * scale, color, 1); |
| | | effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16 * scale); |
| | | effectRectangle.endFill(); |
| | | effectRectangle.mask = effectHalfCircle; |
| | | effectRectangle.zIndex = 9999; |
| | | |
| | | const scaledWidth = sideLen * (1 / scale); |
| | | const scaledHeight = sideLen * (1 / scale); |
| | | |
| | | effectRectangle.scale.set(1 / scale); |
| | | effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); |
| | | |
| | | mapContainer.addChild(effectRectangle); |
| | | mapContainer.addChild(effectHalfCircle); |
| | | |
| | | selectedSprite = sprite; |
| | | |
| | | let phase = 0; |
| | | effectTick = (delta) => { |
| | | phase += delta / 10; |
| | | phase %= (Math.PI * 2); |
| | | if (effectHalfCircle) { |
| | | effectHalfCircle.rotation = phase; |
| | | } |
| | | }; |
| | | |
| | | app.ticker.add(effectTick); |
| | | } |
| | | |
| | | export const removeSelectedEffect = () => { |
| | | if (effectTick) { |
| | | app.ticker.remove(effectTick); |
| | | } |
| | | if (effectHalfCircle) { |
| | | mapContainer.removeChild(effectHalfCircle); |
| | | effectHalfCircle = null; |
| | | } |
| | | if (effectRectangle) { |
| | | mapContainer.removeChild(effectRectangle); |
| | | effectRectangle = null; |
| | | } |
| | | selectedSprite = null; |
| | | } |
| | | |
| | | export const updateEffect = (sprite) => { |
| | | if (!sprite || sprite !== selectedSprite || !effectRectangle || !effectHalfCircle) { |
| | | return |
| | | } |
| | | const { width, height } = sprite; |
| | | const scale = sprite?.scale.x; |
| | | const sideLen = (Math.max(width, height) + 10) * scale; |
| | | const scaledWidth = sideLen * (1 / scale); |
| | | const scaledHeight = sideLen * (1 / scale); |
| | | |
| | | effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); |
| | | |
| | | effectHalfCircle.position.set(sprite.x, sprite.y); |
| | | } |
| | | |
| | | export const generateID = () => { |
| | | return Date.now().toString(36) + Math.random().toString(36).substring(2); |
| | | } |