    import { VideoMetaData, ViewEventType, Zondy } from '../base'
    import { GeometryType } from '../base/enum'
    import fbMouseEventType from '../base/enum/FabricMouseEventType'
    import { GeometryEngine, LineString, Point, Polygon } from '../base/geometry'
    import { VideoMapLayer } from '../document/layer'
    import { defaultValue, defined, Log, VideoPixelCoordTransforms } from '../util'
    import BaseView from '../view/BaseView'
    import { adjustChildSizeToParent } from './Utils'

    /**
     * @event VideoMapView#地图视图加载完毕事件
     * @property {Object} event 事件对象
     * @example <caption><h7>视频地图视图加载完毕事件</h7></caption>
     * view.on('loaded', (event) => {
     *   console.log("视频地图加载完成事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标点击事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'click'] 事件类型
     * @property {Object} [event.absolutePointer] 鼠标在视图的绝对位置
     * @property {Object} [event.pointer] 鼠标在视图的像素位置
     * @property {Object} [event.target] 视图上被点击到的几何图形
     * @property {Boolean} [event.isClick = false] 是否是点击事件
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标点击事件</h7></caption>
     * view.on('click', (event) => {
     *   console.log("点击事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标按下事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'mouse-down'] 事件类型
     * @property {Object} [event.absolutePointer] 鼠标在视图的绝对位置
     * @property {Object} [event.pointer] 鼠标在视图的像素位置
     * @property {Object} [event.target] 视图上被点击到的几何图形
     * @property {Boolean} [event.isClick = false] 是否是点击事件
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标按下事件</h7></caption>
     * view.on('mouse-down', (event) => {
     *   console.log("按下事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标抬起事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'mouse-up'] 事件类型
     * @property {Object} [event.absolutePointer] 鼠标在视图的绝对位置
     * @property {Object} [event.pointer] 鼠标在视图的像素位置
     * @property {Object} [event.target] 视图上被点击到的几何图形
     * @property {Boolean} [event.isClick = false] 是否是点击事件
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标抬起事件</h7></caption>
     * view.on('mouse-up', (event) => {
     *   console.log("抬起事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标双击事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'double-click'] 事件类型
     * @property {Object} [event.absolutePointer] 鼠标在视图的绝对位置
     * @property {Object} [event.pointer] 鼠标在视图的像素位置
     * @property {Object} [event.target] 视图上被点击到的几何图形
     * @property {Boolean} [event.isClick = false] 是否是点击事件
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标双击事件</h7></caption>
     * view.on('double-click', (event) => {
     *   console.log("双击事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标移动事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'mouse-move'] 事件类型
     * @property {Object} [event.absolutePointer] 鼠标在视图的绝对位置
     * @property {Object} [event.pointer] 鼠标在视图的像素位置
     * @property {Object} [event.target] 视图上的几何图形
     * @property {Boolean} [event.isClick = false] 是否是点击事件
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标移动事件</h7></caption>
     * view.on('mouse-move', (event) => {
     *   console.log("移动事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标移出事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'mouse-out'] 事件类型
     * @property {Object} [event.target] 视图上的几何图形
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标移出事件</h7></caption>
     * view.on('mouse-out', (event) => {
     *   console.log("移出事件:", event)
     * })
     */

    /**
     * @event VideoMapView#鼠标移入事件
     * @property {Object} event 事件对象
     * @property {ViewEventType} [event.type = 'mouse-over'] 事件类型
     * @property {Object} [event.target] 视图上的几何图形
     * @property {Object} [event.e] 鼠标原事件对象
     * @example <caption><h7>鼠标移入事件</h7></caption>
     * view.on('mouse-over', (event) => {
     *   console.log("移入事件:", event)
     * })
     */

    /**
     * 视频地图视图类 <br/>
     * 支持MP4,HLS,RTMP视频格式。
     * @moduleEX ViewModule
     * @extends Event
     * @fires VideoMapView#地图视图加载完毕事件
     * @fires VideoMapView#鼠标点击事件
     * @fires VideoMapView#鼠标双击事件
     * @fires VideoMapView#鼠标按下事件
     * @fires VideoMapView#鼠标抬起事件
     * @fires VideoMapView#鼠标移动事件
     * @fires VideoMapView#鼠标移出事件
     * @fires VideoMapView#鼠标移入事件
     * @param {Object} options 构造参数
     * @param {Map}  [options.map = '']  图层管理器
     * @param {String} [options.viewId = ''] 图层容器ID
     *
     * @summary <h5>支持如下方法：</h5>
     * <a href='#useInteriorHTMLVideoElement'>[1、初始化视频地图视图]</a><br/>
     * <a href='#pixelCoordToGeoCoord'>[2、像素坐标转地理坐标]</a><br/>
     * <a href='#geoCoordToPixelCoord'>[3、地理坐标转像素坐标]</a><br/>
     *
     * @example <caption><h7>创建视频地图视图示例</h7></caption>
     * // ES5引入方式
     * const { Map, VideoMapView } = Zondy
     * // ES6引入方式
     * import { Map, VideoMapView } from "@mapgis/webclient-common"
     * // 新建一个map容器
     * const videoMap = new Map()
     * videoMapView = new VideoMapView({
     *   viewId: 'videoMapView-container',
     *   map: videoMap
     * })
     * // 传入视频标定数据
     * videoMapView.init(data)
     */
    class VideoMapView extends BaseView {
      constructor(options) {
        super(options)
        options = defaultValue(options, {})
        if (!defined(window.fabric)) {
          Log.error('The fabric library is lost.')
          return
        }

        if (typeof this._viewId === 'string') {
          this._videoMapViewContainer = document.getElementById(this._viewId)
        } else {
          this._videoMapViewContainer = this._viewId
        }

        this._videoPixelCoordTransforms = null
        this._videoMetaData = null

        this._fabricCanvas = null

        this.graphics = new Proxy(this.graphics, {
          get: (obj, prop) => {
            // 对graphic的添加做监听
            if (prop === 'add') {
              return (item) => {
                this._drawGraphic(item)
                // 监听geometry
                item.geometry = new Proxy(item.geometry, {
                  set: (geoObj, geoProp, geoValue) => {
                    geoObj[geoProp] = geoValue
                    // 对geometry的coordinates的修改做监听
                    if (geoProp === 'coordinates') {
                      this._updateGraphic(item)
                    }
                    return true
                  }
                  // get: (geoObj, geoProp) => {
                  //   if (geoProp === 'insertPoint') {
                  //     this._updateGraphic(item)
                  //   } else if (geoProp === 'setPoint') {
                  //     this._updateGraphic(item)
                  //   } else if (geoProp === 'removePoint') {
                  //     this._updateGraphic(item)
                  //   }
                  //   return geoObj[geoProp]
                  // }
                })
                return obj[prop](item)
              }
            }
            // 对graphic的删除做监听
            else if (prop === 'remove') {
              return (item) => {
                this._deleteGraphic(item)
                return obj[prop](item)
              }
            }
            return obj[prop]
          }
        })
        this._points = new Map()
        this._lines = new Map()
        this._polygons = new Map()
        this._texts = new Map()
        this._tempFabrics = []

        this._videoPixelScale = 0

        this._fabricContainer = null
        this._videoMapLayer = null
      }

      /**
       * 像素坐标与地理坐标转换对象
       * @readonly
       * @member {VideoPixelCoordTransforms} VideoMapView.prototype.videoPixelCoordTransforms
       */
      get videoPixelCoordTransforms() {
        return this._videoPixelCoordTransforms
      }

      /**
       * 初始化视频地图视图<br/>
       * 支持播放MP4，HLS，RTMP格式视频，支持传入HTMLVideoElement标签，支持传入videojs实例化对象。HLS与RTMP视频流播放时会有延迟。
       * @function VideoMapView.prototype.init
       * @param {VideoMetaData} videoMetaData 视频元数据<br/>
       * 视频标定数据使用的地图数据与运行时的地图数据要保持一致。如：标定数据是基于天地图的影像数据得到的，则运行时也需要使用天地图的影像数据。<br/>
       * 参考示例：<br/>
       * <a href='#useInteriorHTMLVideoElement'>[1、由视频地图内部自己创建HTMLVideoElement示例]</a><br/>
       *
       * 支持传入外部的video播放器<br/>
       * 1. 传入的视频播放器的宽高需要和传给VideoMapView的div容器的宽高保存一致，否则会出现草图编辑区域与视频区域无法重合的问题。<br/>
       *
       * 2. 视频可进行同比例的缩放，不可拉伸变形。如400\*300的视频可以等比例缩放为200\*150，不可拉伸为300\*300。<br/>
       *
       * 3. 参考示例：<br/>
       * 外部video播放器播放MP4格式视频,传HTMLVideoElement。<br/>
       * <a href='#playMP4'>[2、传入HTMLVideoElement,视频为MP4格式]</a><br/>
       * 外部video播放器播放HLS格式视频流，传HTMLVideoElement。<br/>
       * <a href='#playHLS'>[3、传入HTMLVideoElement,视频为HLS格式]</a><br/>
       * 外部video播放器播放RTMP格式视频流，传入videojs对象。<br/>
       * <a href='#playRTMP'>[4、传入videojs对象,视频为RTMP格式]</a><br/>
       *
       * @example <caption><h7 id = useInteriorHTMLVideoElement>1. 由视频地图内部自己创建videoHTML示例</h7></caption>
       * // ES5引入方式
       * const { Map, VideoMapView } = Zondy
       * // ES6引入方式
       * import { Map, VideoMapView } from "@mapgis/webclient-common"
       * // 新建一个map容器
       * const videoMap = new Map()
       * videoMapView = new VideoMapView({
       *   viewId: 'videoMapView-container',
       *   map: videoMap
       * })
       *
       * videoMapView.init(mockData)
       *
       * @example <caption><h7 id = playMP4>2. 传入HTMLVideoElement,视频为MP4格式</h7></caption>
       * const videodom = document.getElementById('videolayer')
       * videodom.play()
       * // 使用HTMLVideoElement替换视频源
       * mockData.videoSource = videodom
       * videoMapView.init(mockData)
       *
       * @example <caption><h7 id = playHLS>3. 传入HTMLVideoElement,视频为HLS格式</h7></caption>
       * const videodom = document.getElementById('videolayer')
       * const player = videojs(videodom)
       * player.play()
       * // 使用HTMLVideoElement替换视频源
       * mockData.videoSource = player.el().querySelector('video')
       *
       * videoMapView.init(mockData)
       *
       * @example <caption><h7 id = playRTMP>4. 传入videojs对象,视频为RTMP格式</h7></caption>
       * const videodom = document.getElementById('videolayer')
       * const player = videojs(videodom)
       * player.play()
       * // 使用videojs对象替换视频源
       * mockData.videoSource = player
       * videoMapView.init(mockData)
       */
      init(videoMetaData) {
        const param = defaultValue(videoMetaData, {})

        if (!this._videoPixelCoordTransforms) {
          this._videoPixelCoordTransforms = new VideoPixelCoordTransforms()
        }
        this._videoMetaData = new VideoMetaData(param)

        this._videoPixelCoordTransforms.init(
          this._videoMetaData.videoRegistrationParam
        )

        const url = this._videoMetaData.videoSource.videoUrl
        const source = url || this._videoMetaData.videoSource
        const videoLayer = new VideoMapLayer({
          source,
          container: this._videoMapViewContainer
        })
        this._map.add(videoLayer)
      }

      /**
       * 像素坐标转地理坐标，传入视频地图视图上的像素坐标
       * @function VideoMapView.prototype.pixelCoordToGeoCoord
       * @param {Point} pixelCoord 像素坐标,单位为像素值
       * @returns {Point} 地理坐标,经纬度表示
       * @example <caption><h7 id = pixelCoordToGeoCoord>像素坐标转地理坐标示例</h7></caption>
       * // ES5引入方式
       * const { Point } = Zondy.Geometry
       * // ES6引入方式
       * import { Point } from "@mapgis/webclient-common"
       * const geoCoord = videoMapView.pixelCoordToGeoCoord(new Point({ coordinates: [0, 0] }))
       */
      pixelCoordToGeoCoord(pixelCoord) {
        const pixel = new Point({
          coordinates: [
            pixelCoord.coordinates[0] / this._videoPixelScale,
            pixelCoord.coordinates[1] / this._videoPixelScale
          ]
        })
        const geoCoord = this._videoPixelCoordTransforms.pixelCoordToGeoCoord(pixel)
        return geoCoord
      }

      /**
       * 地理坐标转像素坐标，得到的像素坐标会受视频缩放影响
       * @function VideoMapView.prototype.geoCoordToPixelCoord
       * @param {Point} geoCoord 地理坐标,经纬度表示
       * @returns {Point} 像素坐标,单位为像素值
       * @example <caption><h7 id = geoCoordToPixelCoord>地理坐标转像素坐标示例</h7></caption>
       * // ES5引入方式
       * const { Point } = Zondy.Geometry
       * // ES6引入方式
       * import { Point } from "@mapgis/webclient-common"
       * const pixelCoord = videoMapView.geoCoordToPixelCoord(new Point({ coordinates: [longitude, latitude] }))
       */
      geoCoordToPixelCoord(geoCoord) {
        const pixelCoord =
          this._videoPixelCoordTransforms.geoCoordToPixelCoord(geoCoord)
        const pixelCoordPoint = new Point({
          coordinates: [
            pixelCoord.coordinates[0] * this._videoPixelScale,
            pixelCoord.coordinates[1] * this._videoPixelScale
          ]
        })
        return pixelCoordPoint
      }

      _bindMouseEventToVideoMapViewContainer() {}

      _modifyVideoMapViewPosition() {}

      /**
       * 控制绘制层是否响应鼠标事件
       * @private
       * @param {String} value
       */
      _enabledMouseEvent(value) {
        if (typeof value === 'string') {
          this._fabricContainer.style.pointerEvents = value
        }
      }

      setWidth(value) {
        this._videoMapViewContainer.style.width = `${value}px`
        const videoWidth = this._videoMapLayer.width
        const videoHeight = this._videoMapLayer.height
        const { width, height, left, top, scale } = adjustChildSizeToParent(
          videoWidth,
          videoHeight,
          this._videoMapViewContainer
        )
        this._videoPixelScale = scale

        this._fabricContainer.style.top = `${top}px`
        this._fabricContainer.style.left = `${left}px`
        this._fabricContainer.style.width = `${width}px`
        this._fabricContainer.style.height = `${height}px`
      }

      setHeight(value) {
        this._videoMapViewContainer.style.height = `${value}px`
        const videoWidth = this._videoMapLayer.width
        const videoHeight = this._videoMapLayer.height
        const { width, height, left, top, scale } = adjustChildSizeToParent(
          videoWidth,
          videoHeight,
          this._videoMapViewContainer
        )
        this._videoPixelScale = scale

        this._fabricContainer.style.top = `${top}px`
        this._fabricContainer.style.left = `${left}px`
        this._fabricContainer.style.width = `${width}px`
        this._fabricContainer.style.height = `${height}px`
      }

      /**
       * @description 添加图层
       * @param {VideoMapLayer} videoMapLayer
       * @private
       */
      _addLayer(videoMapLayer) {
        this._videoMapLayer = videoMapLayer
        // 内部创建时videoHtml才有
        const videoHtml = videoMapLayer.videoHtml
        const videoWidth = videoMapLayer.width
        const videoHeight = videoMapLayer.height
        // 针对传入的video位置还需要考虑
        const { width, height, left, top, scale } = adjustChildSizeToParent(
          videoWidth,
          videoHeight,
          this._videoMapViewContainer
        )
        this._videoPixelScale = scale
        // console.log(this._videoPixelScale)

        if (videoHtml) {
          videoHtml.style.left = `${left}px`
          videoHtml.style.top = `${top}px`
          videoHtml.style.width = `${width}px`
          videoHtml.style.height = `${height}px`
        }

        if (!this._fabricCanvas) {
          this._fabricContainer = document.createElement('div')
          this._fabricContainer.id = 'fabricContainer'
          this._fabricContainer.style.position = 'absolute'
          this._fabricContainer.style.top = `${top}px`
          this._fabricContainer.style.left = `${left}px`
          this._fabricContainer.style.width = `${width}px`
          this._fabricContainer.style.height = `${height}px`
          this._videoMapViewContainer.appendChild(this._fabricContainer)

          this._fabricContainer.style.pointerEvents = 'none'

          const canvas = document.createElement('canvas')
          canvas.id = 'fabricCanvas'
          canvas.style.width = '100%'
          canvas.style.height = '100%'
          this._fabricContainer.appendChild(canvas)
          this._fabricCanvas = new fabric.Canvas(canvas.id)
          this._fabricCanvas.setWidth(width)
          this._fabricCanvas.setHeight(height)

          this._initViewEvent()
        }
      }

      _addPixelCoords(geometry) {
        if (!geometry._pixelCoords) {
          if (geometry.coordinates[0] instanceof Array) {
            const _pixelCoords = []
            this._traversalCoordinates(geometry.coordinates, _pixelCoords)
            geometry._pixelCoords = _pixelCoords
          } else {
            const point = new Point({
              coordinates: [geometry.coordinates[0], geometry.coordinates[1]]
            })
            const _pixelCoord = this.geoCoordToPixelCoord(point)
            geometry._pixelCoords = {
              x: _pixelCoord.coordinates[0],
              y: _pixelCoord.coordinates[1]
            }
          }
        }
      }

      _traversalCoordinates(coordinates, pixelCoords) {
        if (coordinates[0] instanceof Array) {
          coordinates.forEach((coord) => {
            this._traversalCoordinates(coord, pixelCoords)
          })
        } else {
          const point = new Point({
            coordinates: [coordinates[0], coordinates[1]]
          })
          const pixelCoord = this.geoCoordToPixelCoord(point)
          pixelCoords.push({
            x: pixelCoord.coordinates[0],
            y: pixelCoord.coordinates[1]
          })
        }
      }

      /**
       * 绘制一个graphic
       * @private
       * @param {Feature} graphic
       */
      _drawGraphic(graphic) {
        this._addPixelCoords(graphic.geometry)
        if (graphic.geometry.type === GeometryType.point) {
          const symbol = graphic.symbol
          const radius = symbol.size
          const color = symbol.color.toCssRGBString()
          const geometry = graphic.geometry
          const pointGraphic = new fabric.Circle({
            left: geometry._pixelCoords.x - radius,
            top: geometry._pixelCoords.y - radius,
            radius,
            fill: color,
            stroke: symbol.outline.color.toCssRGBString(),
            strokeWidth: symbol.outline.width,
            opacity: symbol.color.opacity,
            selectable: false
          })
          this._fabricCanvas.add(pointGraphic)
          this._points.set(graphic.id, pointGraphic)
        } else if (graphic.geometry.type === GeometryType.lineString) {
          const symbol = graphic.symbol
          const width = symbol.width
          const color = symbol.color.toCssRGBString()
          const geometry = graphic.geometry
          const lineGraphic = new fabric.Polyline(geometry._pixelCoords, {
            fill: 'transparent',
            // opacity: symbol.color.opacity,
            stroke: color,
            strokeWidth: width,
            selectable: false
          })
          this._fabricCanvas.add(lineGraphic)
          this._lines.set(graphic.id, lineGraphic)
        } else if (graphic.geometry.type === GeometryType.polygon) {
          const symbol = graphic.symbol
          const color = symbol.color.toCssRGBString()
          const strokeWidth = symbol.outline.width
          const geometry = graphic.geometry
          const left = geometry._pixelCoords[0].x
          const top = geometry._pixelCoords[0].y
          const points = geometry._pixelCoords.map((value) => ({
            x: value.x - left,
            y: value.y - top
          }))
          const polygonGraphic = new fabric.Polygon(
            [
              { x: 0, y: 0 },
              { x: 0, y: 0 },
              { x: 0, y: 0 }
            ],
            {
              left,
              top,
              fill: color,
              strokeWidth,
              stroke: symbol.outline.color.toCssRGBString(),
              opacity: symbol.color.opacity,
              cornerColor: 'blue',
              objectCaching: false,
              selectable: false
            }
          )
          this._fabricCanvas.add(polygonGraphic)
          polygonGraphic.set({ points })
          this._fabricCanvas.renderAll()
          this._polygons.set(graphic.id, polygonGraphic)
        }
      }

      _updateGraphic(graphic) {
        this._addPixelCoords(graphic.geometry)
        if (graphic.geometry.type === GeometryType.lineString) {
          this._fabricCanvas.remove(this._lines.get(graphic.id))
          this._lines.delete(graphic.id)

          const symbol = graphic.symbol
          const width = symbol.width
          const color = symbol.color.toCssRGBString()
          /** @type {LineString} */
          const geometry = graphic.geometry
          if (geometry._pixelCoords.length < 2) {
            return
          }
          const lineGraphic = new fabric.Polyline(geometry._pixelCoords, {
            fill: 'transparent',
            stroke: color,
            strokeWidth: width,
            selectable: false
          })

          this._tempFabrics.forEach((geo) => {
            this._fabricCanvas.remove(geo)
          })
          this._tempFabrics = []

          if (graphic.isShowSegmentLength) {
            for (let i = 1; i < geometry.coordinates.length; i++) {
              const line = new LineString({
                coordinates: [geometry.coordinates[i - 1], geometry.coordinates[i]]
              })

              const length = GeometryEngine.geodesicLength(line)

              const text = `${length.toFixed(2)}m`
              const textStyle = graphic._textStyle
              const textColor = textStyle.color.toCssRGBString()
              const textpos = {
                x:
                  (geometry._pixelCoords[i].x + geometry._pixelCoords[i - 1].x) / 2,
                y: (geometry._pixelCoords[i].y + geometry._pixelCoords[i - 1].y) / 2
              }
              const textbox = new fabric.Textbox(text, {
                left: textpos.x,
                top: textpos.y,
                fill: textColor,
                width: 50,
                fontSize: textStyle.font.size,
                selectable: false
              })
              this._tempFabrics.push(textbox)
              this._fabricCanvas.add(textbox)
            }
          }
          this._fabricCanvas.add(lineGraphic)
          this._lines.set(graphic.id, lineGraphic)
        } else if (graphic.geometry.type === GeometryType.polygon) {
          const polygonGraphic = this._polygons.get(graphic.id)
          if (polygonGraphic) {
            /** @type {Polygon} */
            const geometry = graphic.geometry
            const left = geometry._pixelCoords[0].x
            const top = geometry._pixelCoords[0].y
            const points = geometry._pixelCoords.map((value) => ({
              x: value.x - left,
              y: value.y - top
            }))
            polygonGraphic.set({ points })
            this._fabricCanvas.renderAll()
            if (geometry._pixelCoords.length < 4) {
              return
            }

            this._tempFabrics.forEach((geo) => {
              this._fabricCanvas.remove(geo)
            })
            this._tempFabrics = []

            if (graphic.isShowArea) {
              const center = geometry._pixelCoords.map((value) => [
                value.x,
                value.y
              ])
              const centerGeo = new Polygon({
                coordinates: [center]
              })

              const area = GeometryEngine.planarArea(centerGeo)
              const text = `${area.toFixed(2)}㎡`
              const textStyle = graphic._textStyle
              const textColor = textStyle.color.toCssRGBString()
              const textbox = new fabric.Textbox(text, {
                left: centerGeo.centroid.coordinates[0] - 15,
                top: centerGeo.centroid.coordinates[1] - 7.5,
                fill: textColor,
                width: 50,
                fontSize: textStyle.font.size,
                selectable: false
              })
              this._tempFabrics.push(textbox)
              this._fabricCanvas.add(textbox)
              this._fabricCanvas.bringToFront(textbox)
              this._fabricCanvas.renderAll()
            }
            // console.log(geometry.calculateArea())
          }
          // this._fabricCanvas.remove(this._polygons.get(graphic.id))
          // this._polygons.delete(graphic.id)

          // /** @type {SimpleFillSymbol} */
          // const symbol = graphic.symbol
          // const color = symbol.color.toCssRGBString()
          // const strokeWidth = symbol.outline.width
          // const geometry = graphic.geometry
          // const left = geometry._pixelCoords[0].x
          // const top = geometry._pixelCoords[0].y
          // const points = geometry._pixelCoords.map(value => ({ x: value.x - left, y: value.y - top }))
          // console.log(points)
          // const polygonGraphic = new fabric.Polygon(points, {
          //   left: left,
          //   top: top,
          //   fill: color,
          //   strokeWidth: strokeWidth,
          //   stroke: symbol.outline.color.toCssRGBString(),
          //   cornerColor: 'blue',
          //   objectCaching: false
          // })
          // this._fabricCanvas.add(polygonGraphic);
          // this._polygons.set(graphic.id, polygonGraphic)
        }
      }

      /**
       * @private
       * @param {Geometry} graphic
       */
      _deleteGraphic(graphic) {
        let geometry
        if (this._points.has(graphic.id)) {
          geometry = this._points.get(graphic.id)
        } else if (this._lines.has(graphic.id)) {
          geometry = this._lines.get(graphic.id)
        } else if (this._polygons.has(graphic.id)) {
          geometry = this._polygons.get(graphic.id)
        }

        this._tempFabrics.forEach((geo) => {
          this._fabricCanvas.remove(geo)
        })
        this._tempFabrics = []

        if (geometry) {
          this._fabricCanvas.remove(geometry)
        }
      }

      /**
       * 初始化视频地图事件
       * @private
       */
      _initViewEvent() {
        if (!this._fabricCanvas) {
          return
        }
        // 视频地图加载完毕事件
        this.fire(ViewEventType.loaded, {})

        // 注册点击事件
        this._fabricCanvas.on(fbMouseEventType.mouseUp, (options) => {
          if (options.isClick) {
            options.type = ViewEventType.click
            this.fire(ViewEventType.click, options)
          }
        })

        // 注册鼠标抬起事件
        this._fabricCanvas.on(fbMouseEventType.mouseUp, (options) => {
          options.type = ViewEventType.mouseUp
          this.fire(ViewEventType.mouseUp, options)
        })

        // 注册鼠标按下事件
        this._fabricCanvas.on(fbMouseEventType.mouseDown, (options) => {
          options.type = ViewEventType.mouseDown
          this.fire(ViewEventType.mouseDown, options)
        })

        // 注册鼠标移动事件
        this._fabricCanvas.on(fbMouseEventType.mouseMove, (options) => {
          options.type = ViewEventType.mouseMove
          this.fire(ViewEventType.mouseMove, options)
        })

        // 注册双击事件
        this._fabricCanvas.on(fbMouseEventType.doubleClick, (options) => {
          options.type = ViewEventType.doubleClick
          this.fire(ViewEventType.doubleClick, options)
        })

        // 注册鼠标移出事件
        this._fabricCanvas.on(fbMouseEventType.mouseout, (options) => {
          options.type = ViewEventType.mouseOut
          this.fire(ViewEventType.mouseOut, options)
        })

        // 注册鼠标移入事件
        this._fabricCanvas.on(fbMouseEventType.mouseover, (options) => {
          options.type = ViewEventType.mouseOver
          this.fire(ViewEventType.mouseOver, options)
        })

        // 注册鼠标右键按下事件

        // 注册zoom变化事件
        // this._fabricCanvas.on(fbMouseEventType.zoom, (options) => {
        //   this.fire(ViewEventType.zoom, options)
        // })

        // 注册地图移动事件

        // 注册地图大小变化事件
      }
    }
    export default VideoMapView
    Zondy.VideoMapView = VideoMapView