| | |
| | | |
| | | let zoneDrawingCleanup = null; |
| | | |
| | | export const startZoneDrawing = ({ promptText, onComplete } = {}) => { |
| | | export const startZoneDrawing = ({ promptText, onComplete, onFinish } = {}) => { |
| | | if (!mapContainer || !mapContainer.parent) { |
| | | return; |
| | | return false; |
| | | } |
| | | mapContainer?.parent?.off('mousedown'); |
| | | |
| | | if (zoneDrawingCleanup) { |
| | | zoneDrawingCleanup(); |
| | | } |
| | | |
| | | const stage = mapContainer.parent; |
| | | stage.off('mousedown'); |
| | | const draft = new PIXI.Graphics(); |
| | | draft.name = 'zone_' + generateID(); |
| | | draft.zIndex = DEVICE_Z_INDEX.ZONE; |
| | | |
| | | let drawing = false; |
| | | let startPoint = null; |
| | | const zoneColor = 0x3498db; |
| | | const originalCursor = stage.cursor; |
| | | stage.cursor = 'crosshair'; |
| | | |
| | | const drawRect = (from, to) => { |
| | | draft.clear(); |
| | | const strokeColor = themeMode === 'dark' ? 0x74b9ff : 0x2ecc71; |
| | | const strokeColor = zoneColor; |
| | | draft.lineStyle(4 / Math.abs(mapContainer.scale.x || 1), strokeColor, 0.8); |
| | | draft.beginFill(strokeColor, 0.18); |
| | | draft.drawRect( |
| | |
| | | draft.endFill(); |
| | | }; |
| | | |
| | | const addZoneLabel = (text) => { |
| | | const bounds = draft.getBounds(); |
| | | const addZoneLabel = (text, from, to) => { |
| | | const centerX = (from.x + to.x) / 2; |
| | | const centerY = (from.y + to.y) / 2; |
| | | const label = new PIXI.Text(text, { |
| | | fill: themeMode === 'dark' ? '#f1f2f6' : '#2d3436', |
| | | fontSize: 48 / Math.abs(mapContainer.scale.x || 1), |
| | | fill: themeMode === 'dark' ? '#f1f2f6' : '#535353ff', |
| | | fontSize: 20 / Math.abs(mapContainer.scale.x || 1), |
| | | fontWeight: 'bold', |
| | | fontFamily: 'Microsoft YaHei', |
| | | // fontFamily: 'Microsoft YaHei', |
| | | }); |
| | | label.anchor.set(0.5); |
| | | label.position.set(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2); |
| | | label.position.set(centerX, centerY); |
| | | draft.addChild(label); |
| | | }; |
| | | |
| | |
| | | stage.off('pointerup', handleUp); |
| | | stage.off('pointerdown', handleDown); |
| | | zoneDrawingCleanup = null; |
| | | stage.cursor = originalCursor; |
| | | if (onFinish) { |
| | | onFinish(); |
| | | } |
| | | }; |
| | | zoneDrawingCleanup = cleanupListeners; |
| | | |
| | |
| | | return; |
| | | } |
| | | |
| | | addZoneLabel(zoneName); |
| | | addZoneLabel(zoneName, startPoint, endPoint); |
| | | draft.data = { ...(draft.data || {}), type: DEVICE_TYPE.ZONE, name: zoneName }; |
| | | |
| | | if (onComplete) { |
| | |
| | | stage.on('pointerdown', handleDown); |
| | | stage.on('pointermove', handleMove); |
| | | stage.on('pointerup', handleUp); |
| | | return true; |
| | | }; |