Skip to content

Commit

Permalink
Change preset style setting mechanism
Browse files Browse the repository at this point in the history 
[Issue] Samsung#271
[Problem] Usage preset styles was removing element
          and replaced it with a new one. This was leading
          to loose user settings like position, background etc.
[Solution] Add new way to define preset styles.

Signed-off-by: Pawel Kaczmarczyk <p.kaczmarczy@samsung.com>
  • Loading branch information
@pkaczmarczy
pkaczmarczy committed Sep 2, 2019
1 parent 2b45836 commit 1aff2cd
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 50 deletions.
62 changes: 32 additions & 30 deletions design-editor/src/pane/design-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1187,36 +1187,38 @@ class Model {
return this._DOM.querySelector(query);
}

/**
* Return element
* @param {string} id
* @returns {{id: *, component: (*|{}|Object), attributes: boolean}}
*/
getElement(id) {
var element = findById(this._DOM, id),
component = componentPackages.getPackageByElement($(element)),
style = this._designEditor.getComputedStyle(id),
keyframe = null;
if (this._keyframeId !== null) {
keyframe = this.getKeyFrameElement(this._keyframeId, id);
if (keyframe) {
Object.keys(keyframe.style).forEach((name) => {
style[name] = keyframe.style[name];
});
}
}
return {
id: id,
component: component,
attributes: element ? [].map.call(element.attributes, attributeName => ({
name: attributeName,
value: element.attributes[attributeName]
})) : [],
// @TODO require analyze what should be style in the place, style attribute of element or computed styles
style: style,
content: (element && element.innerHTML) || ''
};
}
/**
* Return element
* @param {string} id
* @returns {{id: *, component: (*|{}|Object), attributes: boolean}}
*/
getElement(id) {
const element = findById(this._DOM, id),
component = componentPackages.getPackageByElement($(element)),
style = this._designEditor.getComputedStyle(id);
let keyframe = null;

if (this._keyframeId !== null) {
keyframe = this.getKeyFrameElement(this._keyframeId, id);
if (keyframe) {
Object.keys(keyframe.style).forEach((name) => {
style[name] = keyframe.style[name];
});
}
}
return {
id: id,
component: component,
attributes: element ? [].map.call(element.attributes, attribute => ({
name: attribute.name,
value: attribute.value
})) : [],
// @TODO require analyze what should be style in the place, style attribute of element or computed styles
style: style,
content: (element && element.innerHTML) || '',
classList: element ? [...element.classList] : []
};
}

/**
* Get clear element
Expand Down
109 changes: 91 additions & 18 deletions design-editor/src/pane/style-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,28 +58,101 @@ class StyleManager {
eventEmitter.on(EVENTS.ChangeElementStyle, this._onChangeElementStyle.bind(this));
}

/**
* Change element style callback
* @param {string} template
* @private
*/
_onChangeElementStyle(template) {
console.log('style-manager:_onChangeElementStyle');
/**
* Change element style callback
* @param {string | object} newStyleDefinition
* @private
*/
_onChangeElementStyle(newStyleDefinition) {
// eslint-disable-next-line no-console
console.log('style-manager:_onChangeElementStyle');
const id = elementSelector.getSelectedElementId(),
designEditor = appManager.getActiveDesignEditor(),
$element = designEditor && $(designEditor._getElementById(id));
let template;

var id = elementSelector.getSelectedElementId(),
designEditor = appManager.getActiveDesignEditor(),
$element = designEditor && $(designEditor._getElementById(id));
this._designEditor = designEditor;
if (designEditor.getUIInfo($element).package.name === 'listview') {
this._getModel($element.children(), 'listview');
} else {
this._getModel($element, designEditor.getUIInfo($element).package.name);
}
if (typeof newStyleDefinition === 'string') {
template = newStyleDefinition;
this._replaceStyle($element, template);
} else {
this._applyStyle($element, newStyleDefinition);
}
}

this._designEditor = designEditor;
/**
* Applies defined style for element
* @param {jQuery} $element
* @param {Object} newStyleDefinition
*/
_applyStyle($element, newStyleDefinition) {
const id = $element.attr('data-id'),
model = this._designEditor.getModel(),
element = model.getElement(id),
component = element && element.component,
currentClassList = element.classList,
newClassList = newStyleDefinition.classList || [],
newAttributes = newStyleDefinition.attributes || {},
newStyles = newStyleDefinition.style || {},
classesMap = new Map();

if (designEditor.getUIInfo($element).package.name === 'listview') {
this._getModel($element.children(), 'listview');
} else {
this._getModel($element, designEditor.getUIInfo($element).package.name);
}
currentClassList.forEach((className) => {
classesMap.set(className, true);
});

this._replaceStyle($element, template);
}
// Looking for classes that should be removed.
// To avoid removing unnecessary classes search for
// all classes used across widget available templates.
// Leave classes that aren't mentioned in any template
// or classes are defined in current preset style.
if (component && component.options && component.options.styles) {
component.options.styles.forEach(newStyleDefinition => {
// For compatibility with previous string style templates
if (typeof newStyleDefinition !== 'string' &&
newStyleDefinition.template &&
newStyleDefinition.template.classList) {
newStyleDefinition.template.classList.forEach((className) => {
classesMap.set(className, false);
});
}
});
}

newClassList.forEach((className) => {
classesMap.set(className, true);
});

const mergedClassList = [...classesMap]
.filter((element) => element[1])
.map((element) => element[0]);

// @TODO: This way all attribute updates would be pushed to history stack
// as separate events. The style setting won't be a single event to undo.
// Need to add some API to model that could process multiple attributes change
model.updateAttribute(id, 'class', mergedClassList.join(' '));

// set the rest of attributes defined in template
for (const key in newAttributes) {
if (newAttributes.hasOwnProperty(key)) {
model.updateAttribute(id, key, newAttributes[key]);
}
}

// set the styles defined in template
for (const key in newStyles) {
if (newStyles.hasOwnProperty(key)) {
model.updateStyle(id, key, newStyles[key]);
}
}

// @TODO: Some templates could have child elements defined
// @TODO: Templates should be capable of parsing content of existing elements
}

/**
* Replace style
Expand Down
24 changes: 22 additions & 2 deletions tau-component-packages/components/graph/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,31 @@
{
"icon": "./styles/time-series-chart.png",
"name": "Time series",
"template": "<div class=\"ui-graph\" data-mode=\"continuous\" data-graph=\"line\" data-color=\"#FF0000\" data-xlabel=\"Number\" data-ylabel=\"Value\" data-xinit=\"0\" data-yinit=\"0\" data-axis-x-type=\"index\" data-axis-x-max-count=\"10\" data-axis-x-unit=\"s\" data-value=\"[1,2,5]\"></div>"
"template": {
"classList": ["ui-graph"],
"attributes": {
"data-mode": "continuos",
"data-graph": "line",
"data-axis-x-type": "index",
"data-color": "#FF0000",
"data-value": "[1, 2, 5]"
},
"style": {}
}
}, {
"icon": "./styles/bar-chart.png",
"name": "Multiple series bar chart",
"template":"<div class=\"ui-graph\" data-mode=\"continuous\" data-graph=\"bar\" data-color=\"#FF0000,#00FF00\" data-xlabel=\"Number\" data-ylabel=\"Value\" data-xinit=\"0\" data-yinit=\"0\" data-axis-x-type=\"order\" data-axis-x-max-count=\"10\" data-axis-x-unit=\"s\" data-value='[{\"x\":1,\"y\":15,\"label\":\"series 1\"},{\"x\":1,\"y\":8,\"label\":\"series 2\"},{\"x\":2,\"y\":18,\"label\":\"series 1\"},{\"x\":2,\"y\":20,\"label\":\"series 2\"},{\"x\":3,\"y\":0,\"label\":\"series 1\"},{\"x\":3,\"y\":9,\"label\":\"series 2\"},{\"x\":4,\"y\":12,\"label\":\"series 1\"},{\"x\":4,\"y\":19,\"label\":\"series 2\"}]'></div>"
"template": {
"classList": ["ui-graph"],
"attributes": {
"data-graph": "bar",
"data-mode": "continuous",
"data-axis-x-type": "order",
"data-color": "#FF0000,#00FF00",
"data-value": "[{\"x\":1,\"y\":15,\"label\":\"series 1\"},{\"x\":1,\"y\":8,\"label\":\"series 2\"},{\"x\":2,\"y\":18,\"label\":\"series 1\"},{\"x\":2,\"y\":20,\"label\":\"series 2\"},{\"x\":3,\"y\":0,\"label\":\"series 1\"},{\"x\":3,\"y\":9,\"label\":\"series 2\"},{\"x\":4,\"y\":12,\"label\":\"series 1\"},{\"x\":4,\"y\":19,\"label\":\"series 2\"}]"
},
"style": {}
}
}
],
"draggable": true,
Expand Down

0 comments on commit 1aff2cd

Please sign in to comment.