|  |  |  | 
|---|
|  |  |  | DEVICE_SELECTED_EFFECT_COLOR, | 
|---|
|  |  |  | POINT_ROUTE_DIRECTION, | 
|---|
|  |  |  | DEVICE_SPRITE_TINT_DARK, | 
|---|
|  |  |  | ANIMATE_DURING_TIME, | 
|---|
|  |  |  | } from './constants'; | 
|---|
|  |  |  | import { getRouteList } from './http'; | 
|---|
|  |  |  | import PointRoute from "./PointRoute"; | 
|---|
|  |  |  | 
|---|
|  |  |  | if (texture) { | 
|---|
|  |  |  | sprite = new PIXI.Sprite(PIXI.Texture.from(texture, { resourceOptions: { scale: 1 } })); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | sprite.width = 300; | 
|---|
|  |  |  | sprite.height = 500; | 
|---|
|  |  |  | sprite.width = 750; | 
|---|
|  |  |  | sprite.height = 1300; | 
|---|
|  |  |  | sprite.zIndex = DEVICE_Z_INDEX.AGV; | 
|---|
|  |  |  | break | 
|---|
|  |  |  | case DEVICE_TYPE.POINT: | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function onSpriteMouseOver(event) { | 
|---|
|  |  |  | if (tooltip) { | 
|---|
|  |  |  | app.stage.removeChild(tooltip); | 
|---|
|  |  |  | app?.stage.removeChild(tooltip); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | tooltip = createSpriteTooltip(this);// this => sprite | 
|---|
|  |  |  | tooltip.x = event.data.global.x + 10; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function onSpriteMouseOut() { | 
|---|
|  |  |  | if (tooltip && tooltip.parent) { | 
|---|
|  |  |  | tooltip.parent.removeChild(tooltip); | 
|---|
|  |  |  | tooltip.parent?.removeChild(tooltip); | 
|---|
|  |  |  | tooltip = null; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | effectTicker = null; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (effectCircle) { | 
|---|
|  |  |  | mapContainer.removeChild(effectCircle); | 
|---|
|  |  |  | mapContainer?.removeChild(effectCircle); | 
|---|
|  |  |  | effectCircle = null; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | selectedSprite = null; | 
|---|
|  |  |  | 
|---|
|  |  |  | export const rotationParseNum = (num) => { | 
|---|
|  |  |  | return num * (Math.PI / 180); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const animateRotation = (sprite, targetRotation, rotationOffset = 0) => { | 
|---|
|  |  |  | if (!mapContainer || !sprite) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // origin | 
|---|
|  |  |  | let currentRotation = sprite.rotation + rotationOffset; | 
|---|
|  |  |  | // target | 
|---|
|  |  |  | targetRotation += rotationOffset; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // diff | 
|---|
|  |  |  | let rotationDifference = targetRotation - currentRotation; | 
|---|
|  |  |  | if (rotationDifference === 0) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // destination | 
|---|
|  |  |  | const endRotation = sprite.rotation + rotationDifference; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(sprite) | 
|---|
|  |  |  | .to({ rotation: endRotation }, ANIMATE_DURING_TIME) | 
|---|
|  |  |  | .easing(TWEEDLE.Easing.Linear.None) | 
|---|
|  |  |  | .onUpdate(() => { | 
|---|
|  |  |  | // agv | 
|---|
|  |  |  | if (sprite.updateTextRotation) { | 
|---|
|  |  |  | sprite.updateTextRotation(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .start(); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export const incrementSpriteNo = (str, incrementValue) => { | 
|---|
|  |  |  | const match = str.match(/(\D*)(\d+)/); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const agvRotationOffsetDegrees = 0; | 
|---|
|  |  |  | const agvRotationOffsetDegrees = 90; | 
|---|
|  |  |  | const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const showAgvSprite = (curZone, agvVo, setCurSprite) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | if (!code) { return; } | 
|---|
|  |  |  | const codeSprite = querySprite(DEVICE_TYPE.POINT, code); | 
|---|
|  |  |  | if (!codeSprite) { return; } | 
|---|
|  |  |  | let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); | 
|---|
|  |  |  | const targetRotation = rotationParseNum(direction); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const targetRotation = rotationParseNum(direction); | 
|---|
|  |  |  | const backpackCount = backpack?.filter(item => item.loaded === true).length || 0; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); | 
|---|
|  |  |  | if (!agvSprite) { | 
|---|
|  |  |  | const agvStatusMode = getAgvStatusMode(backpackCount, battery); | 
|---|
|  |  |  | const agvTexture = generateAgvSpriteTexture(agvStatusMode); | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // agvNo sprite | 
|---|
|  |  |  | const agvText = new PIXI.Text(agvNo.toString(), { | 
|---|
|  |  |  | fontSize: 60, | 
|---|
|  |  |  | fontSize: 50, | 
|---|
|  |  |  | fill: 0x000000, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | agvText.anchor.set(0.5, 0.5); | 
|---|
|  |  |  | agvText.position.set(0, 0); | 
|---|
|  |  |  | agvText.position.set(0, 5); | 
|---|
|  |  |  | agvSprite.addChild(agvText); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | agvSprite.updateTextRotation = () => { | 
|---|
|  |  |  | if (agvText && agvSprite) { | 
|---|
|  |  |  | agvText.rotation = -agvSprite.rotation; | 
|---|
|  |  |  | 
|---|
|  |  |  | agvSprite.data.battery = battery; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | animateRotation(agvSprite, targetRotation, agvRotationOffset); | 
|---|
|  |  |  | animateRotation(agvSprite, targetRotation + agvRotationOffset, agvRotationOffset); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(agvSprite.position) | 
|---|
|  |  |  | .to({ | 
|---|
|  |  |  | x: codeSprite.position.x, | 
|---|
|  |  |  | y: codeSprite.position.y | 
|---|
|  |  |  | }, 1000) | 
|---|
|  |  |  | }, ANIMATE_DURING_TIME) | 
|---|
|  |  |  | .easing(TWEEDLE.Easing.Linear.None) | 
|---|
|  |  |  | .start(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const animateRotation = (sprite, targetRotation, agvRotationOffset) => { | 
|---|
|  |  |  | let currentRotation = sprite.rotation + agvRotationOffset; | 
|---|
|  |  |  | targetRotation += agvRotationOffset; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let rotationDifference = targetRotation - currentRotation; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const endRotation = sprite.rotation + rotationDifference; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(sprite) | 
|---|
|  |  |  | .to({ rotation: endRotation }, 1000) | 
|---|
|  |  |  | .easing(TWEEDLE.Easing.Linear.None) | 
|---|
|  |  |  | .onUpdate(() => { | 
|---|
|  |  |  | if (sprite.updateTextRotation) { | 
|---|
|  |  |  | sprite.updateTextRotation(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .start(); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const drawerAgvPath = (curZone, agvVo) => { | 
|---|
|  |  |  | if (!mapContainer) { | 
|---|
|  |  |  | 
|---|
|  |  |  | agvPath.name = agvPathName; | 
|---|
|  |  |  | agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer.scale.x)), 0x2f68ac, 0.8); | 
|---|
|  |  |  | agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE; | 
|---|
|  |  |  | agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; | 
|---|
|  |  |  | // agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let firstNode = true; | 
|---|
|  |  |  | for (let i = Math.max(0, dynamicRoute.indexOf(curCode)); i < dynamicRoute.length; i++) { | 
|---|