| | |
| | | import * as PIXI from 'pixi.js'; |
| | | import * as TWEEDLE from 'tweedle.js'; |
| | | import { |
| | | DEVICE_TYPE, |
| | | DEVICE_Z_INDEX, |
| | | } from './constants'; |
| | | |
| | | import shelf from '/map/shelf.svg'; |
| | | import charge from '/map/charge.svg'; |
| | | import direction from '/map/direction.svg'; |
| | | |
| | | let app, mapContainer; |
| | | |
| | |
| | | return mapContainer; |
| | | } |
| | | |
| | | 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 |
| | | } |
| | | } |
| | | |
| | | export const generateSprite = (deviceType) => { |
| | | 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.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.zIndex = DEVICE_Z_INDEX.CHARGE; |
| | | break; |
| | | case DEVICE_TYPE.DIRECTION: |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(direction, { resourceOptions: { scale: 5 } })); |
| | | sprite.width = 112; |
| | | sprite.height = 63; |
| | | sprite.zIndex = DEVICE_Z_INDEX.DIRECTION; |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | return sprite; |
| | | } |
| | | |
| | | export const initSprite = (sprite, type) => { |
| | | sprite.anchor.set(0.5); |
| | | sprite.cursor = 'pointer'; |
| | | sprite.eventMode = 'static'; |
| | | sprite.data = { |
| | | type: type, |
| | | uuid: generateID() |
| | | }; |
| | | } |
| | | |
| | | export const beMovable = (sprite) => { |
| | | sprite.off('pointerup'); |
| | | sprite.off('pointermove'); |
| | | sprite.off('pointerdown'); |
| | | sprite.off('click'); |
| | | |
| | | sprite.on("pointerdown", onDragStart); |
| | | |
| | | let dragTarget; |
| | | function onDragStart(event) { |
| | | if (event.button === 0) { |
| | | 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) { |
| | | if (this) { |
| | | this.parent.toLocal(event.global, null, this.position); |
| | | } |
| | | } |
| | | |
| | | function onDragEnd() { |
| | | if (dragTarget) { |
| | | this.parent.off('pointermove'); |
| | | this.parent.off('pointerup'); |
| | | dragTarget.alpha = 1; |
| | | dragTarget = null; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | export const generateID = () => { |
| | | return Date.now().toString(36) + Math.random().toString(36).substring(2); |
| | | } |
| | | |
| | | export const patchRaLayout = (param) => { |
| | | const parentElement = document.getElementById('main-content'); |
| | | if (parentElement && parentElement.classList.contains('RaLayout-content')) { |