改动文件如下:
+ 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
}
]