[轉] Davinci-二次開發：新增輔助圖形-邊框/裝飾

原文地址: https://blog.csdn.net/qq_43651437/article/details/105796023

 

0.  $ cnpm install @jiaminghi/data-view-react

1. webapp\app\containers\Display\components\Setting\Form\constants.ts

import slide from 'assets/json/slideSettings/slide.json'
import chart from 'assets/json/slideSettings/chart.json'
import rectangle from 'assets/json/slideSettings/rectangle.json'
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 decoration3 from 'assets/json/slideSettings/decoration3.json'
import BorderBox from 'assets/json/slideSettings/borderBox.json'

export enum SecondaryGraphTypes {
  Rectangle = 20,
  Label = 21,
  Video = 22,
  Timer = 23,
  Decoration = 24,
  BorderBox = 25
}

export enum GraphTypes {
  Slide,
  Chart,
  Secondary
}

export const slideSettings = {
  [GraphTypes.Slide]: slide,
  [GraphTypes.Chart]: chart,
  [SecondaryGraphTypes.Rectangle]: rectangle,
  [SecondaryGraphTypes.Label]: label,
  [SecondaryGraphTypes.Video]: video,
  [SecondaryGraphTypes.Timer]: timer,
  [SecondaryGraphTypes.Decoration]: decoration3,
   [SecondaryGraphTypes.BorderBox]: BorderBox
}

2. webapp/app/containers/Display/components/Layer/Content/SecondaryGraph/DevBorderBox.tsx

import { LayerContext } from '../../util'
import React, { useContext, useState, useEffect } from 'react'
import moment from 'moment'
import { useLabelStyle } from './hooks'
import * as datav from '@jiaminghi/data-view-react'

 const DevBorderBox: React.FC = () => {
     //獲取參數
    const { layer: { params } } = useContext(LayerContext)
    const { color, titleContent ,dev_type,titleWidth} = params
    if(dev_type == "BorderBox1"){
        return <datav.BorderBox1 />
    }
    if(dev_type == "BorderBox2"){
        return <datav.BorderBox2 />
    }
   
    if(dev_type == "BorderBox3"){
        return <datav.BorderBox3 />
    }
    if(dev_type == "BorderBox4"){
        return <datav.BorderBox4 />
    }
    if(dev_type == "BorderBox4(reverse)"){
        return <datav.BorderBox4  reverse={true}/>
    }
    if(dev_type == "BorderBox5"){
    return <datav.BorderBox5 />
    }
    if(dev_type == "BorderBox5(reverse)"){
        return <datav.BorderBox5  reverse={true}/>
    }
    if(dev_type == "BorderBox6"){
        return <datav.BorderBox6 />
    }
    if(dev_type == "BorderBox7"){
        return <datav.BorderBox7 />
    }
    if(dev_type == "BorderBox8"){
        return <datav.BorderBox8 />
    }
    if(dev_type == "BorderBox9"){
        return <datav.BorderBox9 />
    }
    if(dev_type == "BorderBox10"){
        return <datav.BorderBox10 />
    }
    if(dev_type == "BorderBox11"){
    return <datav.BorderBox11  title={titleContent} titleWidth={titleWidth} />
    }
    if(dev_type == "BorderBox12"){
        return <datav.BorderBox12 />
    }
    if(dev_type == "BorderBox13"){
        return <datav.BorderBox13 />
    }
}
export default DevBorderBox

webapp/app/containers/Display/components/Layer/Content/SecondaryGraph/DevDecoration.tsx

import { LayerContext } from '../../util'
import React, { useContext, useState, useEffect } from 'react'
import moment from 'moment'
import { useLabelStyle } from './hooks'
import * as datav from '@jiaminghi/data-view-react'

 const DevDecoration: React.FC = () => {
     //獲取參數
    const { layer: { params } } = useContext(LayerContext)
    const { color, dev_type } = params
    const labelStyle = useLabelStyle(params)
    if(dev_type == "Decoration1"){
        return <datav.Decoration1 />
    }
    if(dev_type == "Decoration2"){
        return <datav.Decoration2 />
    }
    if(dev_type == "Decoration2(reverse)"){
        return <datav.Decoration2 style={labelStyle} reverse={true}/>
    }
    if(dev_type == "Decoration3"){
        return <datav.Decoration3 />
    }
    if(dev_type == "Decoration4"){
        return <datav.Decoration4 />
    }
    if(dev_type == "Decoration4(reverse)"){
        return <datav.Decoration4  reverse={true}/>
    }
    if(dev_type == "Decoration5"){
    return <datav.Decoration5 style={labelStyle} >{params.contentText}</datav.Decoration5>
    }
    if(dev_type == "Decoration6"){
        return <datav.Decoration6 />
    }
    if(dev_type == "Decoration7"){
        return <datav.Decoration7 style={labelStyle} >{params.contentText}</datav.Decoration7>
    }
    if(dev_type == "Decoration8"){
        return <datav.Decoration8 />
    }
    if(dev_type == "Decoration8(reverse)"){
        return <datav.Decoration8  reverse={true}/>
    }
    if(dev_type == "Decoration9"){
        return <datav.Decoration9 style={labelStyle}  >{params.contentText}</datav.Decoration9>
    }
    if(dev_type == "Decoration10"){
        return <datav.Decoration10 />
    }
    if(dev_type == "Decoration11"){
        return <datav.Decoration11 style={labelStyle}>{params.contentText}</datav.Decoration11>
    }
}
export default DevDecoration

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

export { default as Rectangle } from './Rectangle'
export { default as Label } from './Label'
export { default as Video } from './Video'
export { default as Timer } from './Timer'
export { default as DevDecoration } from './DevDecoration'
export { default as DevBorderBox } from './DevBorderBox'

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

import React, { useContext } from 'react'
import { LayerContext } from './util'
import { GraphTypes, SecondaryGraphTypes } from '../Setting'

import { Chart, Rectangle, Label, Video, Timer,DevDecoration,DevBorderBox } from './Content'

const LayerCore: React.FC = (props) => {
  const { layer, operationInfo } = useContext(LayerContext)
  const { type, subType } = layer
  if (type === GraphTypes.Chart) {
    return <Chart />
  }
  if (type === GraphTypes.Secondary) {
    switch (subType) {
      case SecondaryGraphTypes.Rectangle:
        return <Rectangle />
      case SecondaryGraphTypes.Label:
        return <Label />
      case SecondaryGraphTypes.Video:
        return <Video />
      case SecondaryGraphTypes.Timer:
        return <Timer />
      case SecondaryGraphTypes.Decoration:
        return <DevDecoration />
      case SecondaryGraphTypes.BorderBox:
        return <DevBorderBox />
    }
  }
  return <div></div>
}

export default LayerCore

5. webapp\app\containers\Display\components\Toolbar\Chart.tsx

import React, { useContext, useCallback, useMemo } from 'react'

import { Button, Icon, Dropdown, Menu } from 'antd'
const ButtonGroup = Button.Group
import IconFont from 'components/IconFont'

import { DisplayToolbarContext } from './util'
import { GraphTypes, SecondaryGraphTypes } from '../constants'
import { ClickParam } from 'antd/lib/menu'

const SecondaryGraphIcons = [
  {
    name: '矩形',
    icon: 'icon-rounded-rect',
    type: SecondaryGraphTypes.Rectangle
  },
  {
    name: '標籤',
    icon: 'icon-rect-text',
    type: SecondaryGraphTypes.Label
  },
  {
    name: '視頻',
    icon: 'icon-video',
    type: SecondaryGraphTypes.Video
  },
  {
    name: '裝飾',
    icon: 'icon-rounded-rect',
    type: SecondaryGraphTypes.Decoration
  },{
    name: '邊框',
    icon: 'icon-rounded-rect',
    type: SecondaryGraphTypes.BorderBox
  }
]

interface IChartProps {
  onAdd: (type: GraphTypes, subType?: SecondaryGraphTypes) => void
}

const Chart: React.FC<IChartProps> = (props) => {
  const { size, comment } = useContext(DisplayToolbarContext)
  const { onAdd } = props

  const addChart = useCallback(() => {
    onAdd(GraphTypes.Chart)
  }, [onAdd])

  //輔助圖形裏面的item點擊事件
  const addSecondary = useCallback(
    (param: ClickParam) => {
      onAdd(GraphTypes.Secondary, +param.key as SecondaryGraphTypes)
    },
    [onAdd]
  )
//添加輔助圖形裏面的圖形
  const overlay = (
    <Menu onClick={addSecondary}>
      {SecondaryGraphIcons.map(({ name, icon, type }) => (
        <Menu.Item key={type}>
          <IconFont type={icon} />{name}
        </Menu.Item>
      ))}
    </Menu>
  )

  return (
    <ButtonGroup size={size}>
      <Button type="ghost" onClick={addChart}>
        <Icon type="bar-chart" />
        {comment && '圖表'}
      </Button>
      <Dropdown overlay={overlay} placement="bottomRight" trigger={['click']}>
        <Button type="ghost">
          <Icon type="appstore" />
          {comment && '輔助圖形'}
        </Button>
      </Dropdown>
    </ButtonGroup>
  )
}
export default Chart

6. webapp\app\assets\json\slideSettings\decoration3.json

{
    "name": "Decoration3",
    "title": "裝飾3",
    "params": [{
      "name": "size",
      "title": "裝飾尺寸",
      "items": [{
        "name": "width",
        "title": "寬度（像素）",
        "component": "inputnumber",
        "default": 200
      }, {
        "name": "height",
        "title": "高度（像素）",
        "component": "inputnumber",
        "default": 120
      }]
    }, {
      "name": "position",
      "title": "矩形位置",
      "items": [{
        "name": "positionX",
        "title": "x軸位置（像素）",
        "component": "inputnumber",
        "labelCol": 15,
        "wrapperCol": 8
      }, {
        "name": "positionY",
        "title": "y軸位置（像素）",
        "component": "inputnumber",
        "labelCol": 15,
        "wrapperCol": 8
      }]
    },{
        "name": "colors",
        "title": "顏色",
        "items": [{
          "name": "color",
          "title": "裝飾顏色",
          "component": "colorPicker",
          "default": [0,0,0],
          "labelCol": 10
        }]
    }, {
      "name": "dev_type",
      "title": "裝飾",
      "items": [{
        "name": "dev_type",
        "title": "裝飾樣式",
        "component": "select",
        "values": [{
          "name": "第一種",
          "value": "Decoration1"
        }, {
          "name": "第二種",
          "value": "Decoration2"
        }, {
          "name": "第二種(反轉)",
          "value": "Decoration2(reverse)"
        }, {
          "name": "第三種",
          "value": "Decoration3"
        },{
          "name": "第四種",
          "value": "Decoration4"
        }, {
          "name": "第四種(反轉)",
          "value": "Decoration4(reverse)"
        }, {
          "name": "第五種",
          "value": "Decoration5"
        }, {
          "name": "第六種",
          "value": "Decoration6"
        }, {
          "name": "第七種",
          "value": "Decoration7"
        }, {
          "name": "第八種",
          "value": "Decoration8"
        }, {
          "name": "第八種(反轉)",
          "value": "Decoration8(reverse)"
        }
        , {
          "name": "第九種",
          "value": "Decoration9"
        }
        , {
          "name": "第十種",
          "value": "Decoration10"
        }
        , {
          "name": "第十一種",
          "value": "Decoration11"
        }],
        "default": "Decoration6"
      }]
        }, {
          "name": "content",
          "title": "文本",
          "items": [{
            "name": "contentText",
            "tip": "輸入文本",
            "title": "文本內容",
            "component": "input",
            "default": "",
            "wrapperCol": 24
          }]
        }, {
          "name": "font",
          "title": "文字",
          "items": [{
            "name": "fontFamily",
            "title": "字體",
            "component": "select",
            "values": [{
              "name": "默認",
              "value": ""
            }, {
              "name": "微軟雅黑",
              "value": "Microsoft Yahei"
            }, {
              "name": "宋體",
              "value": "SimSun"
            }, {
              "name": "黑體",
              "value": "Heiti"
            }, {
              "name": "華文細黑",
              "value": "STXihei"
            }, {
              "name": "Verdana",
              "value": "Verdana"
            }, {
              "name": "Arial",
              "value": "Arial"
            }, {
              "name": "Times New Roman",
              "value": "Times New Roman"
            }, {
              "name": "Times",
              "value": "Times"
            }, {
              "name": "MS Sans Serif",
              "value": "MS Sans Serif"
            }],
            "default": "",
            "wrapperCol": 24
          }, {
            "name": "fontColor",
            "title": "字體顏色",
            "component": "colorPicker",
            "default": [0,0,0],
            "labelCol": 10,
            "wrapperCol": 14
          }, {
            "name": "fontSize",
            "title": "字體大小",
            "component": "inputnumber",
            "default": 40,
            "placeholder": "像素",
            "labelCol": 10,
            "wrapperCol": 14
          },{
            "name": "fontWeight",
            "title": "字體粗細",
            "component": "select",
            "values": [{
              "name": "normal",
              "value": "normal"
            }, {
              "name": "bold",
              "value": "bold"
            }, {
              "name": "bolder",
              "value": "bolder"
            }, {
              "name": "lighter",
              "value": "lighter"
            }, {
              "name": "100",
              "value": "100"
            }, {
              "name": "200",
              "value": "200"
            }, {
              "name": "300",
              "value": "300"
            }, {
              "name": "400",
              "value": "400"
            }, {
              "name": "500",
              "value": "500"
            }, {
              "name": "600",
              "value": "600"
            }, {
              "name": "700",
              "value": "700"
            }, {
              "name": "800",
              "value": "800"
            }, {
              "name": "900",
              "value": "900"
            }],
            "default": "normal",
            "labelCol": 10,
            "wrapperCol": 14
          }, {
            "name": "textStyle",
            "title": "樣式",
            "component": "checkboxGroup",
            "values": [{
              "label": "斜體",
              "value": "italic"
            }, {
              "label": "下劃線",
              "value": "underline"
            }],
            "default": [],
            "labelCol": 10,
            "wrapperCol": 14
          }
        ]
    }]
  }

 webapp\app\assets\json\slideSettings\borderBox.json

{
    "name": "BorderBox3",
    "title": "bord邊框2",
    "params": [{
      "name": "size",
      "title": "邊框尺寸",
      "items": [{
        "name": "width",
        "title": "寬度（像素）",
        "component": "inputnumber",
        "default": 200
      }, {
        "name": "height",
        "title": "高度（像素）",
        "component": "inputnumber",
        "default": 120
      }]
    }, {
      "name": "position",
      "title": "矩形位置",
      "items": [{
        "name": "positionX",
        "title": "x軸位置（像素）",
        "component": "inputnumber",
        "labelCol": 15,
        "wrapperCol": 8
      }, {
        "name": "positionY",
        "title": "y軸位置（像素）",
        "component": "inputnumber",
        "labelCol": 15,
        "wrapperCol": 8
      }]
    },{
        "name": "colors",
        "title": "顏色",
        "items": [{
          "name": "color",
          "title": "邊框顏色",
          "component": "colorPicker",
          "default": [0,0,0],
          "labelCol": 10
        }]
    }, {
      "name": "dev_type",
      "title": "邊框",
      "items": [{
        "name": "dev_type",
        "title": "邊框樣式",
        "component": "select",
        "values": [{
          "name": "第一種",
          "value": "BorderBox1"
        }, {
          "name": "第二種",
          "value": "BorderBox2"
        },  {
          "name": "第三種",
          "value": "BorderBox3"
        },{
          "name": "第四種",
          "value": "BorderBox4"
        }, {
          "name": "第四種(反轉)",
          "value": "BorderBox4(reverse)"
        }, {
          "name": "第五種",
          "value": "BorderBox5"
        },  {
          "name": "第五種(反轉)",
          "value": "BorderBox5(reverse)"
        },{
          "name": "第六種",
          "value": "BorderBox6"
        }, {
          "name": "第七種",
          "value": "BorderBox7"
        }, {
          "name": "第八種",
          "value": "BorderBox8"
        }, {
          "name": "第九種",
          "value": "BorderBox9"
        }
        , {
          "name": "第十種",
          "value": "BorderBox10"
        }
        , {
          "name": "第十一種",
          "value": "BorderBox11"
        }, {
          "name": "第十二種",
          "value": "BorderBox12"
        }, {
          "name": "第十三種",
          "value": "BorderBox13"
        }],
        "default": "BorderBox6"
      }]
        },{
      "name": "title",
      "title": "標題",
      "items": [{
        "name": "titleContent",
        "title": "標題文字",
        "tip": "輸入文本",
        "component": "input",
        "default": "",
        "wrapperCol": 24
      },{
        "name": "titleWidth",
        "title": "標題寬度",
        "component": "inputnumber",
        "labelCol": 15,
        "wrapperCol": 8
      }]
  }]
  }
  

7. webapp\app\containers\Display\components\types.ts   ILayerParams接口下 添加屬性字段 color、dev_type

color: string[]
dev_type:String