Merge branch 'develop'

king

2022-08-02 8d66ff34fae5b048a6b7923cc75d34f13a08be9d

 src/menu/stylecontroller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button } from 'antd'
import {
  ColumnHeightOutlined,
  FontSizeOutlined,
@@ -29,6 +29,7 @@
  ArrowLeftOutlined,
  ArrowRightOutlined,
  SwapOutlined,
  EnterOutlined,
} from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
@@ -49,6 +50,7 @@

  state = {
    card: null,
    fonts: null,
    comIds: [],
    backgroundImage: '',
    options: [],
@@ -78,15 +80,31 @@
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
    }
    let fonts = null
    if (options.includes('font')) {
      fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration']
    } else if (options.includes('font1')) {
      fonts = ['fontSize', 'fontWeight', 'color']
      if (options[0] === 'font1') {
        options[0] = 'font'
      }
    } else if (options.includes('font2')) {
      fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak']
      if (options[0] === 'font2') {
        options[0] = 'font'
      }
    }

    this.setState({
      visible: true,
      fonts: fonts,
      comIds: comIds,
      card: fromJS(style).toJS(),
      options: options,
      borposition: 'outer',
      backgroundImage
    })
    window.GLOB.styling = true
  }

  onCloseDrawer = () => {
@@ -126,6 +144,7 @@
      options: [],
      backgroundImage: ''
    })
    window.GLOB.styling = false
  }

  updateStyle = (style) => {
@@ -183,10 +202,28 @@
  }

  /**
   * @description 首行缩进
   */
  changeTextIndent = (val) => {
    let value = parseFloat(val)

    if (isNaN(value) || value < 0 || value > 100) return

    this.updateStyle({textIndent: `${value}px`})
  }

  /**
   * @description 修改字体粗细
   */
  boldChange = (val) => {
    this.updateStyle({fontWeight: val})
  }

  /**
   * @description 自动换行
   */
  wordBreakChange = (val) => {
    this.updateStyle({wordBreak: val})
  }

  /**
@@ -222,6 +259,29 @@
   */
  changeBackgroundColor = (val) => {
    this.updateStyle({backgroundColor: val})
  }

  changeBackground = (val) => {
    const { comIds, card } = this.state

    let _style = { ...card }

    _style.background = val

    delete _style.backgroundColor
    delete _style.backgroundImage

    if (!val) {
      delete _style.background
    }

    this.setState({
      card: _style,
    })

    if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
      MKEmitter.emit('submitStyle', comIds, _style)
    }
  }

  /**
@@ -380,7 +440,7 @@
  }

  render () {
    const { card, options, backgroundImage, borposition } = this.state
    const { card, options, backgroundImage, borposition, fonts } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -433,13 +493,13 @@
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('font') ? <Panel header="字体" key="font">
                <Col span={12}>
              {fonts ? <Panel header="字体" key="font">
                {fonts.includes('fontSize') ? <Col span={12}>
                  <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}>
                    <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                </Col> : null}
                {fonts.includes('fontWeight') ? <Col span={12}>
                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                      <Option value="normal">normal</Option>
@@ -457,18 +517,31 @@
                      <Option value="900">900</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                </Col> : null}
                {fonts.includes('lineHeight') ? <Col span={12}>
                  <Form.Item colon={false} label={<LineHeightOutlined title="行高"/>}>
                    <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                </Col> : null}
                {fonts.includes('letterSpacing') ? <Col span={12}>
                  <Form.Item colon={false} label={<ColumnWidthOutlined title="字间距"/>}>
                    <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                </Col> : null}
                {fonts.includes('textIndent') ? <Col span={12}>
                  <Form.Item colon={false} label={<AlignRightOutlined title="首行缩进"/>}>
                    <InputNumber defaultValue={card.textIndent || 0} min={0} max={100} precision={0} onChange={this.changeTextIndent}/>
                  </Form.Item>
                </Col> : null}
                {fonts.includes('wordBreak') ? <Col span={12}>
                  <Form.Item colon={false} label={<EnterOutlined title="自动换行"/>}>
                    <Select defaultValue={card.wordBreak || 'normal'} onChange={this.wordBreakChange}>
                      <Option value="normal">normal</Option>
                      <Option value="break-all">break-all</Option>
                    </Select>
                  </Form.Item>
                </Col> : null}
                {fonts.includes('color') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<FontColorsOutlined title="字体颜色"/>}
@@ -476,8 +549,8 @@
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
                </Col> : null}
                {fonts.includes('fontStyle') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
@@ -489,8 +562,8 @@
                      <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                </Col> : null}
                {fonts.includes('textAlign') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
@@ -502,8 +575,8 @@
                      <Radio.Button value="right"><AlignRightOutlined title="右对齐"/></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                </Col> : null}
                {fonts.includes('textDecoration') ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
@@ -516,42 +589,7 @@
                      <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="上划线">O</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('font1') ? <Panel header="字体" key="font1">
                <Col span={12}>
                  <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}>
                    <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                      <Option value="normal">normal</Option>
                      <Option value="bold">bold</Option>
                      <Option value="bolder">bolder</Option>
                      <Option value="lighter">lighter</Option>
                      <Option value="100">100</Option>
                      <Option value="200">200</Option>
                      <Option value="300">300</Option>
                      <Option value="400">400</Option>
                      <Option value="500">500</Option>
                      <Option value="600">600</Option>
                      <Option value="700">700</Option>
                      <Option value="800">800</Option>
                      <Option value="900">900</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<FontColorsOutlined title="字体颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                  </Form.Item>
                </Col>
                </Col> : null}
              </Panel> : null}
              {options.includes('background') || options.includes('backgroundColor') ? <Panel header="背景" key="background">
                <Col span={24}>
@@ -563,6 +601,15 @@
                    <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
                  </Form.Item>
                </Col>
                {window.develop === true ? <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<BgColorsOutlined title="背景颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
                  </Form.Item>
                </Col> : null}
                {!options.includes('backgroundColor') ? <Col span={24}>
                  <Form.Item
                    colon={false}