| | |
| | | let app = null; |
| | | let mapContainer = null; |
| | | let notify = null; |
| | | let effectTick, effectHalfCircle, effectRectangle; |
| | | let selectedSprite, effectTick, effectHalfCircle, effectRectangle; |
| | | |
| | | export function syncApp(param) { |
| | | app = param; |
| | |
| | | type: type, |
| | | uuid: generateID() |
| | | }; |
| | | } |
| | | |
| | | export const querySprite = (type, no) => { |
| | | if (!mapContainer) { |
| | | return; |
| | | } |
| | | for (const sprite of mapContainer.children) { |
| | | if (sprite.data?.type === type && sprite.data?.no === no) { |
| | | return sprite; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // show sprite feature from sprite click event |
| | |
| | | mapContainer.addChild(effectRectangle); |
| | | mapContainer.addChild(effectHalfCircle); |
| | | |
| | | selectedSprite = sprite; |
| | | |
| | | let phase = 0; |
| | | effectTick = (delta) => { |
| | | phase += delta / 10; |
| | |
| | | }; |
| | | |
| | | app.ticker.add(effectTick); |
| | | } |
| | | |
| | | 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 removeSelectedEffect = () => { |
| | |
| | | mapContainer.removeChild(effectRectangle); |
| | | effectRectangle = null; |
| | | } |
| | | selectedSprite = null; |
| | | } |
| | | |
| | | export const copySprite = (sprite) => { |
| | |
| | | await Http.doPostPromise('api/map/list', { floor: curFloor }, (res) => { |
| | | const mapItemList = eval(res.data); |
| | | mapItemList.forEach(item => { |
| | | const sprite = generateSprite(item.type); |
| | | if (sprite) { |
| | | initSprite(sprite, item.type); |
| | | // data |
| | | sprite.data.uuid = item.uuid; |
| | | sprite.data.no = item.no; |
| | | if (!( |
| | | item.type === SENSOR_TYPE.SHUTTLE |
| | | || item.type === SENSOR_TYPE.AGV |
| | | )) { |
| | | const sprite = generateSprite(item.type); |
| | | if (sprite) { |
| | | initSprite(sprite, item.type); |
| | | // data |
| | | sprite.data.uuid = item.uuid; |
| | | sprite.data.no = item.no; |
| | | |
| | | // dynamical data |
| | | Object.assign(sprite.data, item.property); |
| | | // dynamical data |
| | | Object.assign(sprite.data, item.property); |
| | | |
| | | showSheflType(sprite); |
| | | // graph |
| | | sprite.position.set(item.positionX, item.positionY); |
| | | sprite.scale.set(item.scaleX, item.scaleY); |
| | | sprite.rotation = rotationParseNum(item.rotation); |
| | | showSheflType(sprite); |
| | | // graph |
| | | sprite.position.set(item.positionX, item.positionY); |
| | | sprite.scale.set(item.scaleX, item.scaleY); |
| | | sprite.rotation = rotationParseNum(item.rotation); |
| | | |
| | | mapContainer.addChild(sprite); |
| | | mapContainer.addChild(sprite); |
| | | } |
| | | } |
| | | }) |
| | | |
| | |
| | | |
| | | export const generateLocNo = (row, bay, lev) => { |
| | | return row + '-' + bay + '-' + lev; |
| | | } |
| | | |
| | | export const updateMapStatusInRealTime = (data, curFloorGetter, setCurSPrite) => { |
| | | const curFloor = curFloorGetter(); |
| | | if (isNullOfUndefined(curFloor)) { return; } |
| | | const mapVo = JSON.parse(data); |
| | | // shuttleVo |
| | | for (const shuttleVo of mapVo.shuttleVos) { |
| | | // path |
| | | drawPreTravelPath(shuttleVo.preTravelPath, shuttleVo.shuttleNo, curFloor); |
| | | // shuttle |
| | | showShuttle(shuttleVo.shuttleNo, shuttleVo.curLocNo, curFloor, setCurSPrite); |
| | | } |
| | | } |
| | | |
| | | export const drawPreTravelPath = (path, shuttleNo, curFloor) => { |
| | | if (!mapContainer) { |
| | | return; |
| | | } |
| | | const pathLineName = 'preTravelPath-' + shuttleNo; |
| | | let pathLine = mapContainer.getChildByName(pathLineName); |
| | | if (pathLine) mapContainer.removeChild(pathLine); |
| | | |
| | | pathLine = new PIXI.Graphics(); |
| | | pathLine.name = pathLineName; |
| | | pathLine.lineStyle(3 * (1 / mapContainer.scale.x), 0x3498db, 1); |
| | | pathLine.zIndex = 9999; |
| | | let firstNode = true; |
| | | for (let i = 0; i < path.length; i++) { |
| | | const { row, bay, lev } = parseLocNo(path[i]); |
| | | if (Number(lev) !== curFloor) { continue } |
| | | const shelf = querySprite(SENSOR_TYPE.SHELF, row + '-' + bay); |
| | | |
| | | if (!shelf) { continue }; |
| | | let position = shelf.position; |
| | | let x = position.x; |
| | | let y = position.y; |
| | | if (firstNode) { |
| | | pathLine.moveTo(x, y); |
| | | firstNode = false; |
| | | } else { |
| | | pathLine.lineTo(x, y); |
| | | } |
| | | } |
| | | mapContainer.addChild(pathLine); |
| | | } |
| | | |
| | | export const showShuttle = (shuttleNo, curLocNo, curFloor, setCurSPrite) => { |
| | | if (!curLocNo) { return } |
| | | const { row, bay, lev } = parseLocNo(curLocNo); |
| | | if (Number(lev) !== curFloor) { return } |
| | | |
| | | let shuttle = querySprite(SENSOR_TYPE.SHUTTLE, shuttleNo); |
| | | if (!shuttle) { |
| | | shuttle = generateSprite(SENSOR_TYPE.SHUTTLE); |
| | | initSprite(shuttle, SENSOR_TYPE.SHUTTLE); |
| | | shuttle.data.no = shuttleNo; |
| | | mapContainer.addChild(shuttle); |
| | | viewFeature(shuttle, setCurSPrite); |
| | | } |
| | | |
| | | const shelf = querySprite(SENSOR_TYPE.SHELF, row + '-' + bay); |
| | | if (!shelf) { return } |
| | | |
| | | new TWEEDLE.Tween(shuttle?.position).easing(TWEEDLE.Easing.Linear.None).to({ |
| | | x: shelf.position.x, |
| | | y: shelf.position.y |
| | | }, 1000).onUpdate(() => { |
| | | updateEffect(shuttle); |
| | | }).start(); |
| | | } |