#

Junjie

2 天以前 9cc134c211a4e4c32fc1e7171bb5c43cf3c6a5b9

 src/main/webapp/components/MapCanvas.js

@@ -1,7 +1,7 @@
Vue.component('map-canvas', {
  template: `
    <div style="width: 100%; height: 100%; position: relative;">
      <div ref="pixiView"></div>
      <div ref="pixiView" style="position: absolute; inset: 0;"></div>
      <div v-show="shelfTooltip.visible"
           :style="shelfTooltipStyle()">
        {{ shelfTooltip.text }}
@@ -80,6 +80,7 @@
        item: null
      },
      shelfTooltipMinScale: 0.4,
      containerResizeObserver: null,
      timer: null,
      adjustLabelTimer: null,
      isSwitchingFloor: false
@@ -88,6 +89,7 @@
    mounted() {
    this.currentLev = this.lev || 1;
    this.createMap();
    this.startContainerResizeObserve();
    this.loadMapTransformConfig();
    this.loadLocList();
    this.connectWs();
@@ -108,6 +110,7 @@

    if (this.hoverRaf) { cancelAnimationFrame(this.hoverRaf); this.hoverRaf = null; }
    if (this.pixiApp) { this.pixiApp.destroy(true, { children: true }); }
    if (this.containerResizeObserver) { this.containerResizeObserver.disconnect(); this.containerResizeObserver = null; }
    window.removeEventListener('resize', this.resizeToContainer);
    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) {} }
@@ -277,11 +280,33 @@
      });
      //*******************FPS*******************
    },
    startContainerResizeObserve() {
      if (typeof ResizeObserver === 'undefined' || !this.$el) { return; }
      this.containerResizeObserver = new ResizeObserver(() => {
        this.resizeToContainer();
      });
      this.containerResizeObserver.observe(this.$el);
    },
    getViewportSize() {
      if (!this.pixiApp || !this.pixiApp.renderer) { return { width: 0, height: 0 }; }
      const screen = this.pixiApp.renderer.screen;
      if (screen && screen.width > 0 && screen.height > 0) {
        return { width: screen.width, height: screen.height };
      }
      const rect = this.pixiApp.view ? this.pixiApp.view.getBoundingClientRect() : null;
      return { width: rect ? rect.width : 0, height: rect ? rect.height : 0 };
    },
    resizeToContainer() {
      const w = this.$el.clientWidth || 0;
      const h = this.$el.clientHeight || 0;
      if (w > 0 && h > 0 && this.pixiApp) {
        const vw = this.pixiApp.renderer && this.pixiApp.renderer.screen ? this.pixiApp.renderer.screen.width : 0;
        const vh = this.pixiApp.renderer && this.pixiApp.renderer.screen ? this.pixiApp.renderer.screen.height : 0;
        if (vw === w && vh === h) { return; }
        this.pixiApp.renderer.resize(w, h);
        if (this.mapContentSize && this.mapContentSize.width > 0 && this.mapContentSize.height > 0) {
          this.applyMapTransform(true);
        }
      }
    },
    getMap() {
@@ -1642,8 +1667,9 @@
    adjustLabelScale() {
      const s = this.pixiApp && this.pixiApp.stage ? Math.abs(this.pixiApp.stage.scale.x || 1) : 1;
      const minPx = 14;
      const vw = this.pixiApp.view.width;
      const vh = this.pixiApp.view.height;
      const viewport = this.getViewportSize();
      const vw = viewport.width;
      const vh = viewport.height;
      const margin = 50;
      const mirrorSign = this.mapMirrorX ? -1 : 1;
      const inverseRotation = -((this.mapRotation % 360) * Math.PI / 180);
@@ -1821,8 +1847,9 @@
      const contentW = size.width || 0;
      const contentH = size.height || 0;
      if (contentW <= 0 || contentH <= 0) { return; }
      const vw = this.pixiApp.view.width;
      const vh = this.pixiApp.view.height;
      const viewport = this.getViewportSize();
      const vw = viewport.width;
      const vh = viewport.height;
      let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
      if (!isFinite(scale) || scale <= 0) { scale = 1; }
      const baseW = this.mapContentSize.width || contentW;
@@ -1856,7 +1883,6 @@
    }
  }
});