From 2d78f1c6801e757e5bc747854426be89c8fcf84d Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 09 十月 2024 14:06:25 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 74 ++++++++++++++++++ zy-acs-flow/src/map/player.js | 139 ++++++++++++++++++++++++++++++++++ zy-acs-flow/src/map/MapPage.jsx | 15 +++ 3 files changed, 228 insertions(+), 0 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index e7dd074..a668653 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -77,13 +77,28 @@ case MapMode.OBSERVER_MODE: setDeviceVisible(false); player.hideGridLines(); + + player.activateMapMultiSelect((selectedSprites, resetFn) => { + console.log(selectedSprites); + }); + break case MapMode.MOVABLE_MODE: player.showGridLines(); + + player.activateMapMultiSelect((selectedSprites, resetFn) => { + Tool.spriteListBeMovable(selectedSprites, () => { + // resetFn(); + }); + }); break case MapMode.SETTINGS_MODE: player.hideGridLines(); setDeviceVisible(false); + + player.activateMapMultiSelect((selectedSprites, resetFn) => { + console.log(selectedSprites); + }); break default: break diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js index 5a1112d..2dfc06d 100644 --- a/zy-acs-flow/src/map/player.js +++ b/zy-acs-flow/src/map/player.js @@ -1,5 +1,6 @@ import * as PIXI from 'pixi.js'; import * as TWEEDLE from 'tweedle.js'; +import * as Tool from './tool'; export default class Player { @@ -27,6 +28,99 @@ bunny.rotation += 0.1 * delta; }); + } + + activateMapMultiSelect = (fn) => { + const mapMultiSelectHandle = (event) => { + console.log(123); + + if (event.button !== 0) { + return; + } + + let isSelecting = false; + if (!this.selectionBox) { + this.selectionBox = new PIXI.Graphics(); + this.app.stage.addChild(this.selectionBox); + } + + // select start pos + const startPoint = new PIXI.Point(); + this.app.renderer.events.mapPositionToPoint(startPoint, event.clientX, event.clientY); + let selectionStart = { x: startPoint.x, y: startPoint.y }; + + // avoid trigger sprite event + let hasHitSprite = false; + for (let child of this.mapContainer.children) { + if (child.data?.uuid) { + if (child.getBounds().contains(selectionStart.x, selectionStart.y)) { + hasHitSprite = true; break; + } + } + } + + if (!hasHitSprite) { + isSelecting = true; + } + + const handleMouseMove = (event) => { + if (isSelecting) { + // select end pos + const endPoint = new PIXI.Point(); + this.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY); + const selectionEnd = { x: endPoint.x, y: endPoint.y } + + const width = Math.abs(selectionEnd.x - selectionStart.x); + const height = Math.abs(selectionEnd.y - selectionStart.y); + + this.selectionBox.clear(); + this.selectionBox.lineStyle(2, 0xCCCCCC, 1); + this.selectionBox.beginFill(0xCCCCCC, 0.2); + this.selectionBox.drawRect(Math.min(selectionStart.x, selectionEnd.x), Math.min(selectionStart.y, selectionEnd.y), width, height); + this.selectionBox.endFill(); + } + } + + this.mapContainer.parent.on('mousemove', handleMouseMove); + + this.mapContainer.parent.on('mouseup', (event) => { + if (isSelecting) { + this.clearSelectedSprites(); + + // sprite show style which be selected + this.mapContainer.children.forEach(child => { + if (Tool.isSpriteInSelectionBox(child, this.selectionBox)) { + this.selectedSprites.push(child); + Tool.markSprite(child); + } + }) + isSelecting = false; + this.selectionBox.clear(); + + // complete + if (fn) { + fn(this.selectedSprites, () => { + // trigger at end of selectionBox when fn happen mouseup + this.selectedSprites = []; + }); + } + + } + + this.mapContainer.parent.off('mousemove', handleMouseMove); + }); + } + + this.mapContainer.parent.on('mousedown', mapMultiSelectHandle) + } + + clearSelectedSprites = () => { + if (this.selectedSprites && this.selectedSprites.length > 0) { + this.selectedSprites.forEach(child => { + Tool.unMarkSprite(child); + }) + } + this.selectedSprites = []; } activateMapScale = () => { @@ -87,6 +181,51 @@ this.app.view.addEventListener('mousedown', mapPanHandle); } + adaptScreen = () => { + if (!this.mapContainer || !this.app) { + return; + } + + this.mapContainer.scale.set(1); + this.mapContainer.position.set(0, 0); + if (this.mapContainer.children.length === 0) { + return; + } + + let minX, maxX, minY, maxY; + for (let sprite of this.mapContainer.children) { + if (sprite?.data?.uuid) { + let bounds = sprite.getBounds(); + minX = minX !== undefined ? Math.min(minX, bounds.x) : bounds.x; + minY = minY !== undefined ? Math.min(minY, bounds.y) : bounds.y; + maxX = maxX !== undefined ? Math.max(maxX, bounds.x + bounds.width) : bounds.x + bounds.width; + maxY = maxY !== undefined ? Math.max(maxY, bounds.y + bounds.height) : bounds.y + bounds.height; + } + } + + this.scale = Math.min( + this.app.renderer.width / (maxX - minX) * 0.8, + this.app.renderer.height / (maxY - minY) * 0.8 + ); + + let centerPoint = { + x: (minX + maxX) / 2 * this.mapContainer.scale.x, + y: (minY + maxY) / 2 * this.mapContainer.scale.y + }; + + new TWEEDLE.Tween(this.mapContainer.scale).easing(TWEEDLE.Easing.Quadratic.Out) + .to({ + x: this.scale, + y: this.scale + }, 200).start(); + + new TWEEDLE.Tween(this.mapContainer.position).easing(TWEEDLE.Easing.Quadratic.Out) + .to({ + x: this.app.renderer.width / 2 - centerPoint.x * this.scale, + y: this.app.renderer.height / 2 - centerPoint.y * this.scale + }, 200).start(); + } + showGridLines = () => { this.hideGridLines(); if (!this.gridLineContainer) { diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 63bf3cd..d8ea096 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -72,6 +72,14 @@ }; } +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'); @@ -109,6 +117,72 @@ } +export const spriteListBeMovable = (selectedSprites, resetFn) => { + 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 (resetFn) { + resetFn(); + } + } + + 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); } -- Gitblit v1.9.1