Davinci display 增加全屏组件

改动文件如下:

+ app/assets/json/slideSettings/fullScreen.json

{
  "name": "fullScreen",
  "title": "全屏按钮",
  "params": [{
    "name": "size",
    "title": "矩形尺寸",
    "items": [{
      "name": "width",
      "title": "宽度(像素)",
      "component": "inputnumber",
      "default": 0
    }, {
      "name": "height",
      "title": "高度(像素)",
      "component": "inputnumber",
      "default": 30
    }]
  }, {
    "name": "position",
    "title": "位置",
    "items": [{
      "name": "positionX",
      "title": "x轴位置(像素)",
      "component": "inputnumber",
      "labelCol": 150,
      "wrapperCol": 8
    }, {
      "name": "positionY",
      "title": "y轴位置(像素)",
      "component": "inputnumber",
      "labelCol": 15,
      "wrapperCol": 8
    }]
  }]
}

+ app/containers/Display/components/Layer/Content/SecondaryGraph/FullScreen.tsx

/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

import React, { useContext } from 'react'
import { Icon } from 'antd'
const styles = require('app/containers/Dashboard/Dashboard.less')

import { LayerContext } from '../../util'

const FullScreen: React.FC = () => {

  const fullScreen = () => {
    if(!!document.fullscreen) {
      if(document.exitFullScreen) {
        document.exitFullScreen();
      } else if(document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
      } else if(document.msExitFullscreen) {
          document.msExitFullscreen();
      }
    } else {
      document.querySelector('body').requestFullscreen()
    }
    
  }

  return (
    <Icon type="fullscreen" onClick={fullScreen} className={styles.fullScreen} style={{fontSize: '30px', color: 'rgba(0,0,0,.2)'}} />
  )
}

export default FullScreen

... app/containers/Display/components/Layer/Content/SecondaryGraph/index.ts

export { default as Label } from './Label'
export { default as Video } from './Video'
export { default as Timer } from './Timer'
+ export { default as FullScreen } from './FullScreen'

... app/containers/Display/components/Layer/LayerCore.tsx

 import { LayerContext } from './util'
 import { GraphTypes, SecondaryGraphTypes } from '../Setting'
 
-import { Chart, Rectangle, Label, Video, Timer } from './Content'
+import { Chart, Rectangle, Label, Video, Timer, FullScreen } from './Content'
 
 const LayerCore: React.FC = (props) => {
   const { layer, operationInfo } = useContext(LayerContext)
        return <Video />
      case SecondaryGraphTypes.Timer:
        return <Timer />
+      case SecondaryGraphTypes.FullScreen:
+        return <FullScreen />
    }
  }
  return <div>123</div>

... app/containers/Display/components/Setting/Form/constants.ts

 import label from 'assets/json/slideSettings/label.json'
 import video from 'assets/json/slideSettings/video.json'
 import timer from 'assets/json/slideSettings/timer.json'
+import fullScreen from 'assets/json/slideSettings/fullScreen.json'
 
 export enum SecondaryGraphTypes {
   Rectangle = 20,
   Label = 21,
   Video = 22,
-  Timer = 23
+  Timer = 23,
+  FullScreen = 24,
 }
 
 export enum GraphTypes {
   [SecondaryGraphTypes.Rectangle]: rectangle,
   [SecondaryGraphTypes.Label]: label,
   [SecondaryGraphTypes.Video]: video,
-  [SecondaryGraphTypes.Timer]: timer
+  [SecondaryGraphTypes.Timer]: timer,
+  [SecondaryGraphTypes.FullScreen]: fullScreen
 }

... app/containers/Display/components/Toolbar/Chart.tsx

    name: '时间器',
    icon: 'icon-clock',
    type: SecondaryGraphTypes.Timer
+  },
+  {
+    name: '全屏按钮',
+    icon: 'icon-clock',
+    type: SecondaryGraphTypes.FullScreen
  }
]

猜你喜欢

转载自blog.csdn.net/byc233518/article/details/106249145
今日推荐