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;
|
|
export function setApp(param) {
|
app = param;
|
}
|
|
export function setMapContainer(param) {
|
mapContainer = param;
|
}
|
|
export function getApp() {
|
return app;
|
}
|
|
export function getMapContainer() {
|
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 markSprite = (sprite) => {
|
sprite.alpha = 0.5;
|
}
|
|
export const unMarkSprite = (sprite) => {
|
sprite.alpha = 1;
|
}
|
|
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 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 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 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')) {
|
parentElement.style.paddingLeft = param;
|
parentElement.style.paddingRight = param;
|
}
|
}
|
