From a8e98d400e784df056e5ffb3228d859d6fef6b0f Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期六, 19 十月 2024 16:11:07 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 74 +++++++++++++++++++++++++++++++++--- 1 files changed, 67 insertions(+), 7 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index ed0801d..b7de3e7 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -24,6 +24,7 @@ let app, mapContainer, themeMode; let selectedSprite, effectCircle, effectTicker; +let tooltip; export function getApp() { return app; @@ -223,23 +224,30 @@ } export const beInsight = (sprite, setCurSprite) => { + if (!sprite?.data?.type) { return } + sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); - sprite.on("click", onClick); - - function onClick(event) { + sprite.on("click", (event) => { setCurSprite(sprite); - } + }); + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); } export const beMovable = (sprite) => { sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); sprite.on("pointerdown", onDragStart); @@ -274,15 +282,67 @@ } export const beSettings = (sprite, setSpriteSettings) => { + if (!sprite?.data?.type) { return } + sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); - sprite.on("click", onClick); - - function onClick(event) { + sprite.on("click", (event) => { setSpriteSettings(sprite); + }); + + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); +} + +const createSpriteTooltip = (sprite) => { + const style = new PIXI.TextStyle({ + fontFamily: 'Roboto', + fontSize: 12, + fill: themeMode === 'light' ? '#000' : '#eee', + }); + const text = new PIXI.Text(`${sprite.data?.type} ${sprite.data?.no}`, style); + const background = new PIXI.Graphics(); + // shadow + background.beginFill(themeMode === 'light' ? '#000' : '#eee', 0.1); + background.drawRoundedRect(4, 4, text.width + 6, text.height + 6, 4); + background.endFill(); + // background + background.beginFill(themeMode === 'light' ? '#fff' : '#333', 1); + background.drawRoundedRect(0, 0, text.width + 8, text.height + 8, 4); + background.endFill(); + + text.x = 5; + text.y = 3; + background.addChild(text); + tooltip = new PIXI.Container(); + tooltip.addChild(background); + return tooltip; +} + +function onSpriteMouseOver(event) { + tooltip = createSpriteTooltip(this);// this => sprite + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + app.stage.addChild(tooltip); +} + +function onSpriteMouseMove(event) { + if (tooltip) { + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + } +} + +function onSpriteMouseOut() { + if (tooltip && tooltip.parent) { + tooltip.parent.removeChild(tooltip); + tooltip = null; } } -- Gitblit v1.9.1