Davinci display 增加全屏组件javascript又是再见?-

改动文件如下:

+ 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  *  *      https://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   } ]