From a97a7a41646937d098317f7d53ec643b45de0f14 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 09 十月 2024 16:25:46 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 168 insertions(+), 0 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 26c7944..8cf5173 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -1,5 +1,13 @@ 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; @@ -19,6 +27,166 @@ 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 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')) { -- Gitblit v1.9.1