Up StyleProps

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<ComponentProperties> {
    * @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;

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<string, string | string[]>;
+
 const parserHtml = ParserHtml();
 
+export const getLastStyleValue = (value: string | string[]) => {
+  return isArray(value) ? value[value.length - 1] : value;
+};
+
 export default class StyleableModel<T extends ObjectHash = any> extends Model<T> {
   /**
    * Forward style string to `parseStyle` to be parse to an object
@@ -30,7 +36,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * 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;

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';

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<string, string>;
-
 export type OptionsUpdate = {
   partial?: boolean;
   noTarget?: boolean;
@@ -152,7 +151,7 @@ export default class Property<T extends Record<string, any> = 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<T extends Record<string, any> = 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) };

src/style_manager/model/PropertyComposite.ts

@@ -1,7 +1,8 @@
-import { isString, isUndefined, keys } from 'underscore';
+import { isArray, isString, isUndefined, keys } from 'underscore';
-import Property, { OptionsStyle, OptionsUpdate, PropertyProps, StyleProps } from './Property';
+import { StyleProps, getLastStyleValue } from '../../domain_abstract/model/StyleableModel';
-import Properties from './Properties';
 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<T extends Record<string, any> = 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<T extends Record<string, any> = PropertyC
     return allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== '');
   }
 
-  __splitValue(value: string, sep: string | RegExp) {
+  __splitValue(value: string | string[], sep: string | RegExp) {
-    return value
+    return getLastStyleValue(value)
       .split(sep)
       .map(value => value.trim())
       .filter(Boolean);
@@ -300,7 +303,7 @@ export default class PropertyComposite<T extends Record<string, any> = 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());

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 => {

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<PropertyStackProps>
     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<PropertyStackProps>
     if (this.get('detached')) return '';
     const style = this.getStyleFromLayers();
 
-    return style[this.getName()];
+    return getLastStyleValue(style[this.getName()]);
   }
 
   /**

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';
 

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);