| | |
| | | <div v-show="showMapToolPanel" :style="mapToolBarStyle()"> |
| | | <div :style="mapToolRowStyle()"> |
| | | <button type="button" @click="toggleStationDirection" :style="mapToolButtonStyle(showStationDirection)">{{ showStationDirection ? '隐藏站点方向' : '显示站点方向' }}</button> |
| | | <button type="button" @click="resetMapView" :style="mapToolButtonStyle(false)">重置视图</button> |
| | | <button type="button" @click="rotateMap" :style="mapToolButtonStyle(false)">旋转</button> |
| | | <button type="button" @click="toggleMirror" :style="mapToolButtonStyle(mapMirrorX)">{{ mapMirrorX ? '取消镜像' : '镜像' }}</button> |
| | | </div> |
| | |
| | | }, |
| | | shelfTooltipMinScale: 0.4, |
| | | containerResizeObserver: null, |
| | | resizeDebounceTimer: null, |
| | | timer: null, |
| | | adjustLabelTimer: null, |
| | | isSwitchingFloor: false, |
| | |
| | | this.loadStationColorConfig(); |
| | | this.loadLocList(); |
| | | this.connectWs(); |
| | | |
| | | |
| | | setTimeout(() => { |
| | | this.getMap(this.currentLev); |
| | | }, 1000); |
| | |
| | | |
| | | if (this.hoverRaf) { cancelAnimationFrame(this.hoverRaf); this.hoverRaf = null; } |
| | | if (this.shelfCullRaf) { cancelAnimationFrame(this.shelfCullRaf); this.shelfCullRaf = null; } |
| | | if (this.resizeDebounceTimer) { clearTimeout(this.resizeDebounceTimer); this.resizeDebounceTimer = null; } |
| | | if (window.gsap && this.pixiApp && this.pixiApp.stage) { window.gsap.killTweensOf(this.pixiApp.stage.position); } |
| | | if (this.pixiApp) { this.pixiApp.destroy(true, { children: true }); } |
| | | if (this.containerResizeObserver) { this.containerResizeObserver.disconnect(); this.containerResizeObserver = null; } |
| | | window.removeEventListener('resize', this.resizeToContainer); |
| | | window.removeEventListener('resize', this.scheduleResizeToContainer); |
| | | if (this.wsReconnectTimer) { clearTimeout(this.wsReconnectTimer); this.wsReconnectTimer = null; } |
| | | if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) { try { this.ws.close(); } catch (e) {} } |
| | | }, |
| | |
| | | this.pixiApp.view.style.height = '100%'; |
| | | this.pixiApp.view.style.display = 'block'; |
| | | this.resizeToContainer(); |
| | | window.addEventListener('resize', this.resizeToContainer); |
| | | window.addEventListener('resize', this.scheduleResizeToContainer); |
| | | this.graphicsCrnTrack = this.createTrackTexture(25, 25, 10); |
| | | this.graphicsRgvTrack = this.createTrackTexture(25, 25, 10); |
| | | this.objectsContainer = new PIXI.Container(); |
| | |
| | | startContainerResizeObserve() { |
| | | if (typeof ResizeObserver === 'undefined' || !this.$el) { return; } |
| | | this.containerResizeObserver = new ResizeObserver(() => { |
| | | this.resizeToContainer(); |
| | | this.scheduleResizeToContainer(); |
| | | }); |
| | | this.containerResizeObserver.observe(this.$el); |
| | | }, |
| | | scheduleResizeToContainer() { |
| | | if (this.resizeDebounceTimer) { |
| | | clearTimeout(this.resizeDebounceTimer); |
| | | } |
| | | this.resizeDebounceTimer = setTimeout(() => { |
| | | this.resizeDebounceTimer = null; |
| | | this.resizeToContainer(); |
| | | }, 80); |
| | | }, |
| | | getViewportSize() { |
| | | if (!this.pixiApp || !this.pixiApp.renderer) { return { width: 0, height: 0 }; } |
| | |
| | | this.applyMapTransform(true); |
| | | this.saveMapTransformConfig(); |
| | | }, |
| | | resetMapView() { |
| | | this.fitStageToContent(); |
| | | this.scheduleAdjustLabels(); |
| | | this.scheduleShelfChunkCulling(); |
| | | }, |
| | | toggleStationDirection() { |
| | | this.showStationDirection = !this.showStationDirection; |
| | | this.applyStationDirectionVisibility(); |
| | |
| | | } |
| | | } |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |