From 587afdde1a4ee644f99bc873078a56fc3b7e576e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 3 Aug 2023 15:21:04 +0400 Subject: [PATCH] Up StyleProps --- src/dom_components/model/Component.ts | 6 +++--- src/domain_abstract/model/StyleableModel.ts | 8 +++++++- src/style_manager/index.ts | 4 ++-- src/style_manager/model/Property.ts | 7 +++---- src/style_manager/model/PropertyComposite.ts | 17 ++++++++++------- src/style_manager/model/PropertyFactory.ts | 2 +- src/style_manager/model/PropertyStack.ts | 20 ++++++++++---------- src/style_manager/view/PropertyView.ts | 3 ++- src/utils/Droppable.ts | 5 +++-- 9 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index b1962ec85..2a8b8d890 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -12,7 +12,7 @@ import { keys, } from 'underscore'; import { shallowDiff, capitalize, isEmptyObj, isObject, toLowerCase } from '../../utils/mixins'; -import StyleableModel from '../../domain_abstract/model/StyleableModel'; +import StyleableModel, { StyleProps } from '../../domain_abstract/model/StyleableModel'; import { Model } from 'backbone'; import Components from './Components'; import Selector from '../../selector_manager/model/Selector'; @@ -593,12 +593,12 @@ export default class Component extends StyleableModel { * @example * component.setStyle({ color: 'red' }); */ - setStyle(prop: ObjectStrings = {}, opts: any = {}) { + setStyle(prop: StyleProps = {}, opts: any = {}) { const { opt, em } = this; if (avoidInline(em) && !opt.temporary && !opts.inline) { const style = this.get('style') || {}; - prop = isString(prop) ? (this.parseStyle(prop) as ObjectStrings) : prop; + prop = isString(prop) ? this.parseStyle(prop) : prop; prop = { ...prop, ...style }; const state = em.get('state'); const cc = em.Css; diff --git a/src/domain_abstract/model/StyleableModel.ts b/src/domain_abstract/model/StyleableModel.ts index a56d05cb9..2641db64f 100644 --- a/src/domain_abstract/model/StyleableModel.ts +++ b/src/domain_abstract/model/StyleableModel.ts @@ -4,8 +4,14 @@ import ParserHtml from '../../parser/model/ParserHtml'; import { Model, ObjectAny, ObjectHash, ObjectStrings } from '../../common'; import Selectors from '../../selector_manager/model/Selectors'; +export type StyleProps = Record; + const parserHtml = ParserHtml(); +export const getLastStyleValue = (value: string | string[]) => { + return isArray(value) ? value[value.length - 1] : value; +}; + export default class StyleableModel extends Model { /** * Forward style string to `parseStyle` to be parse to an object @@ -30,7 +36,7 @@ export default class StyleableModel extends Model * Get style object * @return {Object} */ - getStyle(prop?: string | ObjectAny): ObjectStrings { + getStyle(prop?: string | ObjectAny): StyleProps { const style = this.get('style') || {}; const result: ObjectAny = { ...style }; return prop && isString(prop) ? result[prop] : result; diff --git a/src/style_manager/index.ts b/src/style_manager/index.ts index c74fb0aea..3e2064f3c 100644 --- a/src/style_manager/index.ts +++ b/src/style_manager/index.ts @@ -74,10 +74,10 @@ import PropertyFactory from './model/PropertyFactory'; import SectorsView from './view/SectorsView'; import { ItemManagerModule } from '../abstract/Module'; import EditorModel from '../editor/model/Editor'; -import Property, { PropertyProps, StyleProps } from './model/Property'; +import Property, { PropertyProps } from './model/Property'; import Component from '../dom_components/model/Component'; import CssRule from '../css_composer/model/CssRule'; -import StyleableModel from '../domain_abstract/model/StyleableModel'; +import StyleableModel, { StyleProps } from '../domain_abstract/model/StyleableModel'; import { CustomPropertyView } from './view/PropertyView'; import { PropertySelectProps } from './model/PropertySelect'; import { PropertyNumberProps } from './model/PropertyNumber'; diff --git a/src/style_manager/model/Property.ts b/src/style_manager/model/Property.ts index 400de690f..0b2ab0151 100644 --- a/src/style_manager/model/Property.ts +++ b/src/style_manager/model/Property.ts @@ -5,6 +5,7 @@ import EditorModel from '../../editor/model/Editor'; import { capitalize, camelCase, hasWin } from '../../utils/mixins'; import Sector from './Sector'; import PropertyComposite from './PropertyComposite'; +import { StyleProps } from '../../domain_abstract/model/StyleableModel'; /** @private */ export interface PropertyProps { @@ -71,8 +72,6 @@ export interface PropertyProps { __p?: any; } -export type StyleProps = Record; - export type OptionsUpdate = { partial?: boolean; noTarget?: boolean; @@ -152,7 +151,7 @@ export default class Property = PropertyProps> ext return this.collection?.opts?.parentProp; } - __upTargets(p: this, opts: any = {}) { + __upTargets(p: this, opts: any = {}): void { const { em } = this; const sm = em.Styles; const name = this.getName(); @@ -278,7 +277,7 @@ export default class Property = PropertyProps> ext * console.log(property.getStyle()); * // { color: 'red' }; */ - getStyle(opts: OptionsStyle = {}) { + getStyle(opts: OptionsStyle = {}): StyleProps { const name = this.getName(); const key = opts.camelCase ? camelCase(name) : name; return { [key]: this.__getFullValue(opts) }; diff --git a/src/style_manager/model/PropertyComposite.ts b/src/style_manager/model/PropertyComposite.ts index 8daaab582..64df24183 100644 --- a/src/style_manager/model/PropertyComposite.ts +++ b/src/style_manager/model/PropertyComposite.ts @@ -1,7 +1,8 @@ -import { isString, isUndefined, keys } from 'underscore'; -import Property, { OptionsStyle, OptionsUpdate, PropertyProps, StyleProps } from './Property'; -import Properties from './Properties'; +import { isArray, isString, isUndefined, keys } from 'underscore'; +import { StyleProps, getLastStyleValue } from '../../domain_abstract/model/StyleableModel'; import { camelCase } from '../../utils/mixins'; +import Properties from './Properties'; +import Property, { OptionsStyle, OptionsUpdate, PropertyProps } from './Property'; import { PropertyNumberProps } from './PropertyNumber'; import { PropertySelectProps } from './PropertySelect'; @@ -273,7 +274,9 @@ export default class PropertyComposite = PropertyC __getFullValue(opts: any = {}) { if (this.isDetached() || opts.__clear) return ''; - return this.getStyleFromProps()[this.getName()] || ''; + const result = this.getStyleFromProps()[this.getName()] || ''; + + return getLastStyleValue(result); } __getJoin() { @@ -289,8 +292,8 @@ export default class PropertyComposite = PropertyC return allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== ''); } - __splitValue(value: string, sep: string | RegExp) { - return value + __splitValue(value: string | string[], sep: string | RegExp) { + return getLastStyleValue(value) .split(sep) .map(value => value.trim()) .filter(Boolean); @@ -300,7 +303,7 @@ export default class PropertyComposite = PropertyC return this.__splitValue(style[name] || '', sep); } - __getSplitValue(value = '', { byName }: OptionByName = {}) { + __getSplitValue(value: string | string[] = '', { byName }: OptionByName = {}) { const props = this.getProperties(); const props4Nums = props.length === 4 && props.every(prop => isNumberType(prop.getType())); const values = this.__splitValue(value, this.getSplitSeparator()); diff --git a/src/style_manager/model/PropertyFactory.ts b/src/style_manager/model/PropertyFactory.ts index 07bb7a1d1..11ed8e73d 100644 --- a/src/style_manager/model/PropertyFactory.ts +++ b/src/style_manager/model/PropertyFactory.ts @@ -436,7 +436,7 @@ export default class PropertyFactory { type: 'stack', layerSeparator: ' ', fromStyle(style, { property, name }) { - const filter = style[name] || ''; + const filter = (style[name] || '') as string; const sep = property.getLayerSeparator(); return filter ? filter.split(sep).map(input => { diff --git a/src/style_manager/model/PropertyStack.ts b/src/style_manager/model/PropertyStack.ts index 9552401cb..177228ebd 100644 --- a/src/style_manager/model/PropertyStack.ts +++ b/src/style_manager/model/PropertyStack.ts @@ -1,19 +1,19 @@ -import { keys, isUndefined, isArray, isString, isNumber } from 'underscore'; +import { isArray, isNumber, isString, isUndefined, keys } from 'underscore'; +import { StyleProps, getLastStyleValue } from '../../domain_abstract/model/StyleableModel'; import { camelCase } from '../../utils/mixins'; +import Layer, { LayerProps, LayerValues } from './Layer'; +import Layers from './Layers'; +import { OptionsStyle, OptionsUpdate, default as Property, default as PropertyBase } from './Property'; import PropertyComposite, { FromStyle, FromStyleData, - isNumberType, - PropertyCompositeProps, PropValues, + PropertyCompositeProps, ToStyle, ToStyleData, + isNumberType, } from './PropertyComposite'; -import PropertyBase, { OptionsStyle, OptionsUpdate, StyleProps } from './Property'; -import Layers from './Layers'; -import Layer, { LayerProps, LayerValues } from './Layer'; import PropertyNumber from './PropertyNumber'; -import Property from './Property'; const VALUES_REG = /,(?![^\(]*\))/; const PARTS_REG = /\s(?![^(]*\))/; @@ -354,9 +354,9 @@ export default class PropertyStack extends PropertyComposite this.__upTargetsStyleProps(o || c); } - __upTargets(p: this, opts: any = {}) { + __upTargets(p: this, opts: any = {}): void { if (opts.__select) return; - return PropertyBase.prototype.__upTargets.call(this, p, opts); + return PropertyBase.prototype.__upTargets.call(this, p as any, opts); } __upTargetsStyleProps(opts = {}) { @@ -519,7 +519,7 @@ export default class PropertyStack extends PropertyComposite if (this.get('detached')) return ''; const style = this.getStyleFromLayers(); - return style[this.getName()]; + return getLastStyleValue(style[this.getName()]); } /** diff --git a/src/style_manager/view/PropertyView.ts b/src/style_manager/view/PropertyView.ts index ec6c38fe6..d3ec3de34 100644 --- a/src/style_manager/view/PropertyView.ts +++ b/src/style_manager/view/PropertyView.ts @@ -2,7 +2,8 @@ import { bindAll, isUndefined, debounce } from 'underscore'; import { View } from '../../common'; import EditorModel from '../../editor/model/Editor'; import { isObject } from '../../utils/mixins'; -import Property, { StyleProps } from '../model/Property'; +import Property from '../model/Property'; +import { StyleProps } from '../../domain_abstract/model/StyleableModel'; const clearProp = 'data-clear-style'; diff --git a/src/utils/Droppable.ts b/src/utils/Droppable.ts index 07824d28b..72ca3ff3c 100644 --- a/src/utils/Droppable.ts +++ b/src/utils/Droppable.ts @@ -1,8 +1,9 @@ import { bindAll, indexOf } from 'underscore'; import CanvasModule from '../canvas'; +import { ObjectStrings } from '../common'; import EditorModel from '../editor/model/Editor'; import { getDocumentScroll } from './dom'; -import { on, off } from './mixins'; +import { off, on } from './mixins'; // TODO move in sorter type SorterOptions = { @@ -138,7 +139,7 @@ export default class Droppable { if (!cancelled) { comp = wrapper.append(content)[0]; const canvasOffset = canvas.getOffset(); - const { top, left, position } = target.getStyle(); + const { top, left, position } = target.getStyle() as ObjectStrings; const scroll = getDocumentScroll(ev.target); const postLeft = parseInt(`${parseFloat(left) + scroll.x - canvasOffset.left}`, 10); const posTop = parseInt(`${parseFloat(top) + scroll.y - canvasOffset.top}`, 10);