| | |
| | | import * as PIXI from 'pixi.js'; |
| | | import * as TWEEDLE from 'tweedle.js'; |
| | | import { |
| | | MAP_DEFAULT_ROTATION, |
| | | DEVICE_TYPE, |
| | | DEVICE_Z_INDEX, |
| | | AGV_STATUS_MODE, |
| | | DEVICE_SPRITE_TINT, |
| | | DEVICE_SPRITE_TINT_DARK, |
| | | DEVICE_SELECTED_EFFECT_PADDING, |
| | | DEVICE_SELECTED_EFFECT_COLOR, |
| | | POINT_ROUTE_DIRECTION, |
| | | DEVICE_SPRITE_TINT_DARK, |
| | | ANIMATE_DURING_TIME, |
| | | } from './constants'; |
| | | import { getRouteList } from './http'; |
| | |
| | | export function setThemeMode(param) { |
| | | themeMode = param; |
| | | if (mapContainer) { |
| | | // mapContainer.children.forEach(child => { |
| | | // const deviceType = child.data?.type; |
| | | // if (deviceType) { |
| | | // if (themeMode === 'dark') { |
| | | // const tint = DEVICE_SPRITE_TINT_DARK[deviceType] |
| | | // if (tint) { |
| | | // child.tint = tint; |
| | | // } |
| | | // } else { |
| | | // DEVICE_SPRITE_TINT[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT[deviceType]); |
| | | // } |
| | | // } |
| | | // }) |
| | | mapContainer.children.forEach(child => { |
| | | const deviceType = child.data?.type; |
| | | if (deviceType) { |
| | | if (themeMode === 'dark') { |
| | | DEVICE_SPRITE_TINT_DARK[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT_DARK[deviceType]); |
| | | } else { |
| | | DEVICE_SPRITE_TINT[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT[deviceType]); |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | |
| | | export const getRealPosition = (x, y) => { |
| | | const rect = app.view.getBoundingClientRect(); |
| | | return { |
| | | mapX: (x - rect.left) / mapContainer.scale.x - mapContainer.x / mapContainer.scale.x, |
| | | mapY: (y - rect.top) / mapContainer.scale.y - mapContainer.y / mapContainer.scale.y |
| | | } |
| | | const globalPoint = new PIXI.Point(); |
| | | app.renderer.plugins.interaction.mapPositionToPoint(globalPoint, x, y); |
| | | const mapPoint = mapContainer.toLocal(globalPoint); |
| | | return { mapX: mapPoint.x, mapY: mapPoint.y }; |
| | | } |
| | | |
| | | export const generateSprite = (deviceType, texture) => { |
| | |
| | | effectCircle.position.set(selectedSprite.x, selectedSprite.y); |
| | | }; |
| | | |
| | | export const showRoutes = (curZone, setShowRoutes) => { |
| | | setShowRoutes(true); |
| | | getRouteList(curZone, (routeList) => { |
| | | routeList.forEach(route => { |
| | | const startPoint = querySprite(DEVICE_TYPE.POINT, route.startCodeStr); |
| | | const endPoint = querySprite(DEVICE_TYPE.POINT, route.endCodeStr); |
| | | const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]); |
| | | pointRoute.setPoint(startPoint, endPoint); |
| | | pointRoute.clear(); |
| | | pointRoute.lineStyle(Math.max(7, 2 * (1 / mapContainer.scale.x)), themeMode === 'light' ? '#ced6e0' : '#535c68'); |
| | | pointRoute.moveTo(startPoint.position.x, startPoint.position.y); |
| | | pointRoute.lineTo(endPoint.position.x, endPoint.position.y); |
| | | pointRoute.alpha = 1; |
| | | mapContainer.addChild(pointRoute); |
| | | }) |
| | | }) |
| | | export const showRoutes = (curZone, setShowRoutes, setLoading) => { |
| | | setLoading(true); |
| | | getRouteList( |
| | | curZone, |
| | | (routeList) => { |
| | | routeList.forEach(route => { |
| | | const startPoint = querySprite(DEVICE_TYPE.POINT, route.startCodeStr); |
| | | const endPoint = querySprite(DEVICE_TYPE.POINT, route.endCodeStr); |
| | | const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]); |
| | | pointRoute.setPoint(startPoint, endPoint); |
| | | pointRoute.clear(); |
| | | pointRoute.lineStyle(Math.max(7, 2 * (1 / mapContainer.scale.x)), themeMode === 'light' ? '#ced6e0' : '#535c68'); |
| | | pointRoute.moveTo(startPoint.position.x, startPoint.position.y); |
| | | pointRoute.lineTo(endPoint.position.x, endPoint.position.y); |
| | | pointRoute.alpha = 1; |
| | | mapContainer.addChild(pointRoute); |
| | | }) |
| | | setLoading(false); |
| | | setShowRoutes(true); |
| | | }, |
| | | () => { |
| | | setLoading(false); |
| | | }, |
| | | ) |
| | | }; |
| | | |
| | | export const hideRoutes = (curZone, setShowRoutes) => { |
| | |
| | | } |
| | | } |
| | | |
| | | const agvRotationOffsetDegrees = 0; |
| | | const agvRotationOffsetDegrees = 90; |
| | | const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees); |
| | | |
| | | const showAgvSprite = (curZone, agvVo, setCurSprite) => { |
| | | const { agvNo, code, direction, battery, backpack } = agvVo; |
| | | const { agvNo, code, direction, battery, backpack, error } = agvVo; |
| | | if (!code) { return; } |
| | | const codeSprite = querySprite(DEVICE_TYPE.POINT, code); |
| | | if (!codeSprite) { return; } |
| | |
| | | agvSprite.position.set(codeSprite.position.x, codeSprite.position.y); |
| | | agvSprite.rotation = targetRotation + agvRotationOffset; |
| | | mapContainer.addChild(agvSprite); |
| | | beInsight(agvSprite, setCurSprite); |
| | | |
| | | // agvNo sprite |
| | | const agvText = new PIXI.Text(agvNo.toString(), { |
| | |
| | | fill: 0x000000, |
| | | }); |
| | | agvText.anchor.set(0.5, 0.5); |
| | | agvText.position.set(0, 5); |
| | | agvText.position.set(0, 8); |
| | | agvSprite.addChild(agvText); |
| | | |
| | | agvSprite.updateTextRotation = () => { |
| | | if (agvText && agvSprite) { |
| | | agvText.rotation = -agvSprite.rotation; |
| | | agvText.rotation = -agvSprite.rotation - rotationParseNum(MAP_DEFAULT_ROTATION); |
| | | } |
| | | }; |
| | | agvSprite.updateTextRotation(); |
| | |
| | | agvSprite.data.battery = battery; |
| | | } |
| | | |
| | | animateRotation(agvSprite, targetRotation, agvRotationOffset); |
| | | animateRotation(agvSprite, targetRotation + agvRotationOffset, agvRotationOffset); |
| | | } |
| | | |
| | | if (error) { |
| | | agvSprite.tint = 0xff3f34; |
| | | } else { |
| | | agvSprite.tint = themeMode === 'dark' |
| | | ? DEVICE_SPRITE_TINT_DARK[DEVICE_TYPE.AGV] |
| | | : DEVICE_SPRITE_TINT[DEVICE_TYPE.AGV]; |
| | | } |
| | | |
| | | beInsight(agvSprite, setCurSprite); |
| | | |
| | | new TWEEDLE.Tween(agvSprite.position) |
| | | .to({ |
| | |
| | | } |
| | | agvPath = new PIXI.Graphics(); |
| | | agvPath.name = agvPathName; |
| | | agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer.scale.x)), 0x2f68ac, 0.8); |
| | | agvPath.lineStyle( |
| | | Math.max(200, 4 * (1 / mapContainer?.scale.x || 1)), |
| | | themeMode === 'dark' ? 0x40739e : 0x2f68ac, |
| | | 0.8, |
| | | ); |
| | | agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE; |
| | | // agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; |
| | | |