From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 09 十二月 2022 15:53:32 +0800
Subject: [PATCH] 2022-12-09
---
src/menu/stylecombcontrolbutton/index.jsx | 171 +++++++++++++++++++++++++++-----------------------------
1 files changed, 82 insertions(+), 89 deletions(-)
diff --git a/src/menu/stylecombcontrolbutton/index.jsx b/src/menu/stylecombcontrolbutton/index.jsx
index 3beaaf4..e83fd2d 100644
--- a/src/menu/stylecombcontrolbutton/index.jsx
+++ b/src/menu/stylecombcontrolbutton/index.jsx
@@ -1,6 +1,5 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { fromJS } from 'immutable'
import { Button } from 'antd'
import { FontColorsOutlined } from '@ant-design/icons'
@@ -18,6 +17,10 @@
type: '',
components: []
}
+
+ type = null
+
+ components = {}
componentDidMount () {
sessionStorage.setItem('style-control', 'false')
@@ -37,96 +40,76 @@
}
submitCombineStyle = (style) => {
- const { components, parent } = this.state
-
- let keys = components.map(item => item.uuid)
-
- MKEmitter.emit('submitComponentStyle', parent.uuid, keys, style)
-
- setTimeout(() => {
- keys.forEach(key => {
- document.getElementById(key).classList.add('selected-control-element')
- })
- }, 100)
- }
-
- clickComponent = (card, _p, _type) => {
- const { menu } = this.props
- const { parent, type } = this.state
- let components = fromJS(this.state.components).toJS()
-
- if (!parent) {
- let _parent = null
-
- if (_type === 'propcard') {
- _parent = _p
- MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background', 'shadow'])
- } else if (_type === 'cardcell') {
- _parent = _p
- MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background', 'font'])
- } else {
- let getParents = (box) => {
- box.components.forEach(item => {
- if (item.type === 'tabs') {
- item.subtabs.forEach(tab => {
- if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
- _parent = tab
- } else {
- getParents(tab)
- }
- })
- } else if (item.type === 'group') {
- if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
- _parent = item
- }
- }
- })
- }
-
- if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
- _parent = menu
- } else {
- getParents(menu)
- }
-
- MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background'])
- }
-
- document.getElementById(card.uuid).classList.add('selected-control-element')
-
- sessionStorage.setItem('style-control', (_type ? _type : 'component'))
-
- this.setState({
- type: _type ? _type : 'component',
- parent: _parent,
- components: [card]
+ if (this.type === 'component') {
+ Object.keys(this.components).forEach((key, i) => {
+ setTimeout(() => {
+ this.components[key](style)
+ }, i * 10)
})
} else {
- if (components.findIndex(cell => cell.uuid === card.uuid) > -1) {
- components = components.filter(cell => cell.uuid !== card.uuid)
- document.getElementById(card.uuid).classList.remove('selected-control-element')
- } else if (type !== 'propcard' && parent.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
- components.push(card)
- document.getElementById(card.uuid).classList.add('selected-control-element')
- } else if (type === 'propcard' && parent.subcards.findIndex(cell => cell.uuid === card.uuid) > -1) {
- components.push(card)
- document.getElementById(card.uuid).classList.add('selected-control-element')
- }
-
- if (components.length === 0) {
- MKEmitter.emit('closeCombineStyle')
- sessionStorage.setItem('style-control', 'true')
- }
-
- this.setState({
- components: components,
- parent: components.length ? parent : null
+ Object.keys(this.components).forEach((key, i) => {
+ setTimeout(() => {
+ MKEmitter.emit('submitComponentStyle', key, this.components[key], style)
+ }, i * 10)
})
}
}
+ clickComponent = (id, pid, callback) => {
+ if (!this.type) {
+ if (pid) {
+ this.type = 'cardcell'
+ } else {
+ this.type = 'component'
+ }
+ } else if ((this.type === 'cardcell' && !pid) || (this.type === 'component' && pid)) {
+ return
+ }
+
+ let plus = true
+ if (this.type === 'cardcell') {
+ if (this.components[pid]) {
+ if (this.components[pid].includes(id)) {
+ this.components[pid] = this.components[pid].filter(item => item !== id)
+ if (this.components[pid].length === 0) {
+ delete this.components[pid]
+ }
+ plus = false
+ } else {
+ this.components[pid].push(id)
+ }
+ } else {
+ this.components[pid] = [id]
+ }
+ } else {
+ if (this.components[id]) {
+ delete this.components[id]
+ plus = false
+ } else {
+ this.components[id] = callback
+ }
+ }
+
+ if (plus) {
+ document.getElementById(id).classList.add('selected-control-element')
+ MKEmitter.emit('switchMultiStyle', 'open', this.type)
+ } else {
+ document.getElementById(id).classList.remove('selected-control-element')
+ }
+
+ let length = Object.keys(this.components).length
+
+ if (length === 0) {
+ MKEmitter.emit('switchMultiStyle', 'close')
+ sessionStorage.setItem('style-control', 'true')
+ this.type = null
+ } else {
+ sessionStorage.setItem('style-control', this.type)
+ }
+ }
+
triggerStyleChange = () => {
- const { label, components } = this.state
+ const { label } = this.state
if (label === '鎵归噺璋冩暣') {
document.body.className = 'style-control'
@@ -136,13 +119,23 @@
document.body.className = ''
sessionStorage.setItem('style-control', 'false')
- components.forEach(item => {
- document.getElementById(item.uuid).classList.remove('selected-control-element')
- })
+ if (this.type === 'cardcell') {
+ Object.keys(this.components).forEach(key => {
+ this.components[key].forEach(id => {
+ document.getElementById(id).classList.remove('selected-control-element')
+ })
+ })
+ } else {
+ Object.keys(this.components).forEach(key => {
+ document.getElementById(key).classList.remove('selected-control-element')
+ })
+ }
- MKEmitter.emit('closeCombineStyle')
+ MKEmitter.emit('switchMultiStyle', 'close')
+ this.components = {}
+ this.type = null
- this.setState({label: '鎵归噺璋冩暣', parent: null, components: []})
+ this.setState({label: '鎵归噺璋冩暣'})
}
}
--
Gitblit v1.8.0