From ec750be56e61069bb20d7e1fb380d1aff009292d Mon Sep 17 00:00:00 2001 From: David Polak Date: Wed, 2 Jan 2019 17:14:46 +0100 Subject: [PATCH 01/24] Add flex as a display property --- src/style_manager/model/PropertyFactory.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index e3d690fd0..4f307c58b 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -407,6 +407,7 @@ module.exports = () => ({ { value: 'block' }, { value: 'inline' }, { value: 'inline-block' }, + { value: 'flex' }, { value: 'none' } ]; break; From dc687acdaa683d425283dbac451039ccd1675255 Mon Sep 17 00:00:00 2001 From: David Polak Date: Wed, 2 Jan 2019 18:42:06 +0100 Subject: [PATCH 02/24] Add flex-direction to PropertyFactory --- src/style_manager/model/PropertyFactory.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 4f307c58b..351df1165 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -72,6 +72,7 @@ module.exports = () => ({ obj.type = 'radio'; break; case 'display': + case 'flex-direction': case 'font-family': case 'font-weight': case 'border-style': @@ -166,6 +167,9 @@ module.exports = () => ({ case 'display': obj.defaults = 'block'; break; + case 'flex-direction': + obj.defaults = 'row'; + break; case 'position': obj.defaults = 'static'; break; @@ -411,6 +415,14 @@ module.exports = () => ({ { value: 'none' } ]; break; + case 'flex-direction': + obj.list = [ + { value: 'row' }, + { value: 'row-reverse' }, + { value: 'column' }, + { value: 'column-reverse' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From 0342a8ce6113b19b40e9afc4875071818bd4c832 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 13:36:46 +0100 Subject: [PATCH 03/24] Add dynamic styleable dependencies Starting with flex-direction. --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 13 ++++++++++++ src/style_manager/view/PropertyView.js | 24 ++++++++++++++++++++++ 3 files changed, 38 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 9c86d7418..caf576e8e 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -216,6 +216,7 @@ module.exports = { buildProps: [ 'float', 'display', + 'flex-direction', 'position', 'top', 'right', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 351df1165..1e2a21d05 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -274,6 +274,19 @@ module.exports = () => ({ break; } + /* + * Add styleable dependency on other properties. Allows properties to be + * dynamically hidden or shown based on values of other properties. + * + * Property will be styleable if all of the properties (keys) in the + * requires object have any of the values specified in the array. + */ + switch (prop) { + case 'flex-direction': + obj.requires = { display: ['flex'] }; + break; + } + // Units switch (prop) { case 'top': diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 017996224..b242af896 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -70,6 +70,15 @@ module.exports = Backbone.View.extend({ em && em.on(`update:component:style:${this.property}`, this.targetUpdated); //em && em.on(`styleable:change:${this.property}`, this.targetUpdated); + + // Listening to changes of properties in this.requires, so that styleable + // changes based on other properties are propagated + const requires = model.get('requires'); + requires && + Object.keys(requires).forEach(property => { + em && em.on(`component:styleUpdate:${property}`, this.targetUpdated); + }); + this.listenTo( this.propTarget, 'update styleManager:update', @@ -406,6 +415,8 @@ module.exports = Backbone.View.extend({ const toRequire = model.get('toRequire'); const unstylable = trg.get('unstylable'); const stylableReq = trg.get('stylable-require'); + const requires = model.get('requires'); + const sectors = this.sector ? this.sector.collection : null; let stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property @@ -427,6 +438,19 @@ module.exports = Backbone.View.extend({ (stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0)); } + // Check if the property is available based on other property's values + if (sectors && requires) { + const properties = Object.keys(requires); + sectors.each(sector => { + sector.get('properties').each(model => { + if (properties.includes(model.id)) { + const values = requires[model.id]; + stylable = stylable && values.includes(model.get('value')); + } + }); + }); + } + return stylable; }, From 66e124bf5e1d784c3c96651c2c54a2a2e436798c Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 13:45:10 +0100 Subject: [PATCH 04/24] Add flex-wrap --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index caf576e8e..68e07a2b6 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -217,6 +217,7 @@ module.exports = { 'float', 'display', 'flex-direction', + 'flex-wrap', 'position', 'top', 'right', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 1e2a21d05..5d8374b47 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -73,6 +73,7 @@ module.exports = () => ({ break; case 'display': case 'flex-direction': + case 'flex-wrap': case 'font-family': case 'font-weight': case 'border-style': @@ -170,6 +171,9 @@ module.exports = () => ({ case 'flex-direction': obj.defaults = 'row'; break; + case 'flex-wrap': + obj.defaults = 'nowrap'; + break; case 'position': obj.defaults = 'static'; break; @@ -283,6 +287,7 @@ module.exports = () => ({ */ switch (prop) { case 'flex-direction': + case 'flex-wrap': obj.requires = { display: ['flex'] }; break; } @@ -436,6 +441,13 @@ module.exports = () => ({ { value: 'column-reverse' } ]; break; + case 'flex-wrap': + obj.list = [ + { value: 'nowrap' }, + { value: 'wrap' }, + { value: 'wrap-reverse' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From d23b95e963e9053ceec4f479211988f90e4b469d Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 13:48:54 +0100 Subject: [PATCH 05/24] Add justify-content --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 68e07a2b6..2599cbfe0 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -218,6 +218,7 @@ module.exports = { 'display', 'flex-direction', 'flex-wrap', + 'justify-content', 'position', 'top', 'right', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 5d8374b47..f05e4d995 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -74,6 +74,7 @@ module.exports = () => ({ case 'display': case 'flex-direction': case 'flex-wrap': + case 'justify-content': case 'font-family': case 'font-weight': case 'border-style': @@ -174,6 +175,9 @@ module.exports = () => ({ case 'flex-wrap': obj.defaults = 'nowrap'; break; + case 'justify-content': + obj.defaults = 'flex-start'; + break; case 'position': obj.defaults = 'static'; break; @@ -288,6 +292,7 @@ module.exports = () => ({ switch (prop) { case 'flex-direction': case 'flex-wrap': + case 'justify-content': obj.requires = { display: ['flex'] }; break; } @@ -448,6 +453,16 @@ module.exports = () => ({ { value: 'wrap-reverse' } ]; break; + case 'justify-content': + obj.list = [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'space-between' }, + { value: 'space-around' }, + { value: 'space-evenly' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From b6f895fde6f6b7cf400d5173fff50902668342e4 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 13:52:13 +0100 Subject: [PATCH 06/24] Add align-items --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 2599cbfe0..3dc9f056e 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -219,6 +219,7 @@ module.exports = { 'flex-direction', 'flex-wrap', 'justify-content', + 'align-items', 'position', 'top', 'right', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index f05e4d995..73a41ddd6 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -75,6 +75,7 @@ module.exports = () => ({ case 'flex-direction': case 'flex-wrap': case 'justify-content': + case 'align-items': case 'font-family': case 'font-weight': case 'border-style': @@ -178,6 +179,9 @@ module.exports = () => ({ case 'justify-content': obj.defaults = 'flex-start'; break; + case 'align-items': + obj.defaults = 'stretch'; + break; case 'position': obj.defaults = 'static'; break; @@ -293,6 +297,7 @@ module.exports = () => ({ case 'flex-direction': case 'flex-wrap': case 'justify-content': + case 'align-items': obj.requires = { display: ['flex'] }; break; } @@ -463,6 +468,15 @@ module.exports = () => ({ { value: 'space-evenly' } ]; break; + case 'align-items': + obj.list = [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'baseline' }, + { value: 'stretch' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From d77b5f19de4ba635a5bec43aed9845dbd0073dc0 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 14:03:28 +0100 Subject: [PATCH 07/24] Add align-content --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 3dc9f056e..645349c52 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -220,6 +220,7 @@ module.exports = { 'flex-wrap', 'justify-content', 'align-items', + 'align-content', 'position', 'top', 'right', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 73a41ddd6..a159562b8 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -76,6 +76,7 @@ module.exports = () => ({ case 'flex-wrap': case 'justify-content': case 'align-items': + case 'align-content': case 'font-family': case 'font-weight': case 'border-style': @@ -182,6 +183,9 @@ module.exports = () => ({ case 'align-items': obj.defaults = 'stretch'; break; + case 'align-content': + obj.defaults = 'stretch'; + break; case 'position': obj.defaults = 'static'; break; @@ -298,6 +302,7 @@ module.exports = () => ({ case 'flex-wrap': case 'justify-content': case 'align-items': + case 'align-content': obj.requires = { display: ['flex'] }; break; } @@ -477,6 +482,16 @@ module.exports = () => ({ { value: 'stretch' } ]; break; + case 'align-content': + obj.list = [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'space-between' }, + { value: 'space-around' }, + { value: 'stretch' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From c47b7d7ee11f5a0d6704b07f6a7a56981b6d04d7 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 14:05:16 +0100 Subject: [PATCH 08/24] Move flex options to a separate Sector --- src/editor/config/config.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 645349c52..62a3d3ce3 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -216,11 +216,6 @@ module.exports = { buildProps: [ 'float', 'display', - 'flex-direction', - 'flex-wrap', - 'justify-content', - 'align-items', - 'align-content', 'position', 'top', 'right', @@ -228,6 +223,17 @@ module.exports = { 'bottom' ] }, + { + name: 'Flex', + open: false, + buildProps: [ + 'flex-direction', + 'flex-wrap', + 'justify-content', + 'align-items', + 'align-content' + ] + }, { name: 'Dimension', open: false, From b0bab01337248c2f042306bda1e0871dae3f8428 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 18:17:01 +0100 Subject: [PATCH 09/24] Add dynamic styleable dependencies for parent --- src/style_manager/view/PropertyView.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index b242af896..70c4dfb04 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -416,6 +416,7 @@ module.exports = Backbone.View.extend({ const unstylable = trg.get('unstylable'); const stylableReq = trg.get('stylable-require'); const requires = model.get('requires'); + const requiresParent = model.get('requiresParent'); const sectors = this.sector ? this.sector.collection : null; let stylable = trg.get('stylable'); @@ -451,6 +452,24 @@ module.exports = Backbone.View.extend({ }); } + // Check if the property is available based on parent's property values + if (requiresParent) { + if ( + trg.view && + trg.view.$el && + trg.view.$el[0] && + trg.view.$el[0].parentNode + ) { + const styles = window.getComputedStyle(trg.view.$el[0].parentNode); + Object.entries(requiresParent).forEach(([property, values]) => { + stylable = + stylable && styles[property] && values.includes(styles[property]); + }); + } else { + stylable = false; + } + } + return stylable; }, From 76493c631caee730d63991fe25b4ac603323c013 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 18:17:25 +0100 Subject: [PATCH 10/24] Add order and flex-grow --- src/editor/config/config.js | 4 +++- src/style_manager/model/PropertyFactory.js | 8 ++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 62a3d3ce3..320d4ac92 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -231,7 +231,9 @@ module.exports = { 'flex-wrap', 'justify-content', 'align-items', - 'align-content' + 'align-content', + 'order', + 'flex-grow' ] }, { diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index a159562b8..b2876d82f 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -133,6 +133,8 @@ module.exports = () => ({ case 'transform-scale-x': case 'transform-scale-y': case 'transform-scale-z': + case 'order': + case 'flex-grow': obj.type = 'integer'; break; case 'margin': @@ -212,6 +214,8 @@ module.exports = () => ({ case 'transform-rotate-x': case 'transform-rotate-y': case 'transform-rotate-z': + case 'order': + case 'flex-grow': obj.defaults = 0; break; case 'border-top-left-radius': @@ -305,6 +309,10 @@ module.exports = () => ({ case 'align-content': obj.requires = { display: ['flex'] }; break; + case 'order': + case 'flex-grow': + obj.requiresParent = { display: ['flex'] }; + break; } // Units From eb40152143157e7ee162f647c47616e0b1bc3508 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 18:19:21 +0100 Subject: [PATCH 11/24] Add flex-shrink --- src/editor/config/config.js | 3 ++- src/style_manager/model/PropertyFactory.js | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 320d4ac92..4f5821107 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -233,7 +233,8 @@ module.exports = { 'align-items', 'align-content', 'order', - 'flex-grow' + 'flex-grow', + 'flex-shrink' ] }, { diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index b2876d82f..9b11f0e88 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -135,6 +135,7 @@ module.exports = () => ({ case 'transform-scale-z': case 'order': case 'flex-grow': + case 'flex-shrink': obj.type = 'integer'; break; case 'margin': @@ -227,6 +228,7 @@ module.exports = () => ({ case 'transform-scale-x': case 'transform-scale-y': case 'transform-scale-z': + case 'flex-shrink': obj.defaults = 1; break; case 'box-shadow-blur': @@ -311,6 +313,7 @@ module.exports = () => ({ break; case 'order': case 'flex-grow': + case 'flex-shrink': obj.requiresParent = { display: ['flex'] }; break; } From 171aeba55252e788959c23d3ef9e8ef01a6ca954 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 19:25:30 +0100 Subject: [PATCH 12/24] Add align-self --- src/editor/config/config.js | 3 ++- src/style_manager/model/PropertyFactory.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 4f5821107..aa2751546 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -234,7 +234,8 @@ module.exports = { 'align-content', 'order', 'flex-grow', - 'flex-shrink' + 'flex-shrink', + 'align-self' ] }, { diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 9b11f0e88..8f9314db8 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -77,6 +77,7 @@ module.exports = () => ({ case 'justify-content': case 'align-items': case 'align-content': + case 'align-self': case 'font-family': case 'font-weight': case 'border-style': @@ -189,6 +190,9 @@ module.exports = () => ({ case 'align-content': obj.defaults = 'stretch'; break; + case 'align-self': + obj.defaults = 'auto'; + break; case 'position': obj.defaults = 'static'; break; @@ -314,6 +318,7 @@ module.exports = () => ({ case 'order': case 'flex-grow': case 'flex-shrink': + case 'align-self': obj.requiresParent = { display: ['flex'] }; break; } @@ -503,6 +508,16 @@ module.exports = () => ({ { value: 'stretch' } ]; break; + case 'align-self': + obj.list = [ + { value: 'auto' }, + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'baseline' }, + { value: 'stretch' } + ]; + break; case 'position': obj.list = [ { value: 'static' }, From 0bafab5be9b9f86c3bf844b8bde353cef31d0a50 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 19:28:22 +0100 Subject: [PATCH 13/24] Add Flex sector to index.html --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 805835a1f..70fd4615c 100755 --- a/index.html +++ b/index.html @@ -91,6 +91,10 @@ name: 'General', open: false, buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'] + },{ + name: 'Flex', + open: false, + buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-grow', 'flex-shrink', 'align-self'] },{ name: 'Dimension', open: false, From 0e677746041fce3d28662aa6bd1db2bd787c2960 Mon Sep 17 00:00:00 2001 From: David Polak Date: Fri, 4 Jan 2019 20:10:00 +0100 Subject: [PATCH 14/24] Add tests for new flexbox properties --- test/specs/style_manager/model/Models.js | 110 +++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 9dd0cdb3f..b4ec6ce86 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -60,6 +60,7 @@ module.exports = { { value: 'block' }, { value: 'inline' }, { value: 'inline-block' }, + { value: 'flex' }, { value: 'none' } ] }); @@ -369,12 +370,121 @@ module.exports = { { value: 'block' }, { value: 'inline' }, { value: 'inline-block' }, + { value: 'flex' }, { value: 'none' } ] } ]); }); + test('Build flex-direction', () => { + expect(obj.build('flex-direction')).toEqual([ + { + property: 'flex-direction', + type: 'select', + defaults: 'row', + list: [ + { value: 'row' }, + { value: 'row-reverse' }, + { value: 'column' }, + { value: 'column-reverse' } + ], + requires: { display: ['flex'] } + } + ]); + }); + + test('Build flex-wrap', () => { + expect(obj.build('flex-wrap')).toEqual([ + { + property: 'flex-wrap', + type: 'select', + defaults: 'nowrap', + list: [ + { value: 'nowrap' }, + { value: 'wrap' }, + { value: 'wrap-reverse' } + ], + requires: { display: ['flex'] } + } + ]); + }); + + test('Build justify-content', () => { + expect(obj.build('justify-content')).toEqual([ + { + property: 'justify-content', + type: 'select', + defaults: 'flex-start', + list: [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'space-between' }, + { value: 'space-around' }, + { value: 'space-evenly' } + ], + requires: { display: ['flex'] } + } + ]); + }); + + test('Build align-items', () => { + expect(obj.build('align-items')).toEqual([ + { + property: 'align-items', + type: 'select', + defaults: 'stretch', + list: [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'baseline' }, + { value: 'stretch' } + ], + requires: { display: ['flex'] } + } + ]); + }); + + test('Build align-content', () => { + expect(obj.build('align-content')).toEqual([ + { + property: 'align-content', + type: 'select', + defaults: 'stretch', + list: [ + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'space-between' }, + { value: 'space-around' }, + { value: 'stretch' } + ], + requires: { display: ['flex'] } + } + ]); + }); + + test('Build align-self', () => { + expect(obj.build('align-self')).toEqual([ + { + property: 'align-self', + type: 'select', + defaults: 'auto', + list: [ + { value: 'auto' }, + { value: 'flex-start' }, + { value: 'flex-end' }, + { value: 'center' }, + { value: 'baseline' }, + { value: 'stretch' } + ], + requiresParent: { display: ['flex'] } + } + ]); + }); + test('Build position', () => { expect(obj.build('position')).toEqual([ { From 044ff861ced6b82f9d05aca6c7e78430a4e53726 Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 7 Jan 2019 15:04:21 +0100 Subject: [PATCH 15/24] Add default value for requries and requiresParent to model Porperty --- src/style_manager/model/Property.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index a62fe0677..b1903bf41 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -26,7 +26,19 @@ const Property = require('backbone').Model.extend( // Use case: // you can add all SVG CSS properties with toRequire as true // and then require them on SVG Components - toRequire: 0 + toRequire: 0, + + // Specifies dependency on other properties of the selected object. + // Property is shown only when all conditions are matched. + // + // example: { display: ['flex', 'block'], position: ['absolute'] }; + // in this case the property is only shown when display is + // of value 'flex' or 'block' AND position is 'absolute' + requires: null, + + // Specifies dependency on properties of the parent of the selected object. + // Property is shown only when all conditions are matched. + requiresParent: null }, initialize(props = {}, opts = {}) { From 1441470505c6b13d4cefd1b86bdf56180a6e00af Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 7 Jan 2019 15:14:24 +0100 Subject: [PATCH 16/24] Replace Array.includes with _.includes --- src/style_manager/view/PropertyView.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 70c4dfb04..9249a13f3 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -1,6 +1,7 @@ import Backbone from 'backbone'; import { bindAll, isArray, isUndefined, debounce } from 'underscore'; import { camelCase } from 'utils/mixins'; +import { includes } from 'underscore'; const clearProp = 'data-clear-style'; @@ -444,9 +445,9 @@ module.exports = Backbone.View.extend({ const properties = Object.keys(requires); sectors.each(sector => { sector.get('properties').each(model => { - if (properties.includes(model.id)) { + if (includes(properties, model.id)) { const values = requires[model.id]; - stylable = stylable && values.includes(model.get('value')); + stylable = stylable && includes(values, model.get('value')); } }); }); @@ -463,7 +464,7 @@ module.exports = Backbone.View.extend({ const styles = window.getComputedStyle(trg.view.$el[0].parentNode); Object.entries(requiresParent).forEach(([property, values]) => { stylable = - stylable && styles[property] && values.includes(styles[property]); + stylable && styles[property] && includes(values, styles[property]); }); } else { stylable = false; From b2ad7af0a3abb489aeda0b378ab72f56a0ae0659 Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 7 Jan 2019 15:18:15 +0100 Subject: [PATCH 17/24] Replace Object.entries with _.each --- src/style_manager/view/PropertyView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 9249a13f3..dd825f210 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -1,7 +1,7 @@ import Backbone from 'backbone'; import { bindAll, isArray, isUndefined, debounce } from 'underscore'; import { camelCase } from 'utils/mixins'; -import { includes } from 'underscore'; +import { includes, each } from 'underscore'; const clearProp = 'data-clear-style'; @@ -462,7 +462,7 @@ module.exports = Backbone.View.extend({ trg.view.$el[0].parentNode ) { const styles = window.getComputedStyle(trg.view.$el[0].parentNode); - Object.entries(requiresParent).forEach(([property, values]) => { + each(requiresParent, (values, property) => { stylable = stylable && styles[property] && includes(values, styles[property]); }); From c3b5f8f174c248d0dca195c4dd9d565a26e83d16 Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 7 Jan 2019 16:19:25 +0100 Subject: [PATCH 18/24] Add flex-basis --- src/editor/config/config.js | 1 + src/style_manager/model/PropertyFactory.js | 8 ++++++++ test/specs/style_manager/model/Models.js | 13 +++++++++++++ 3 files changed, 22 insertions(+) diff --git a/src/editor/config/config.js b/src/editor/config/config.js index aa2751546..c49da707f 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -233,6 +233,7 @@ module.exports = { 'align-items', 'align-content', 'order', + 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self' diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 8f9314db8..854c338ef 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -40,6 +40,7 @@ module.exports = () => ({ case 'height': case 'max-height': case 'min-height': + case 'flex-basis': obj.fixedValues = ['initial', 'inherit', 'auto']; break; case 'font-size': @@ -137,6 +138,7 @@ module.exports = () => ({ case 'order': case 'flex-grow': case 'flex-shrink': + case 'flex-basis': obj.type = 'integer'; break; case 'margin': @@ -246,6 +248,7 @@ module.exports = () => ({ case 'height': case 'background-size': case 'cursor': + case 'flex-basis': obj.defaults = 'auto'; break; case 'font-family': @@ -316,6 +319,7 @@ module.exports = () => ({ obj.requires = { display: ['flex'] }; break; case 'order': + case 'flex-basis': case 'flex-grow': case 'flex-shrink': case 'align-self': @@ -347,6 +351,9 @@ module.exports = () => ({ case 'width': obj.units = ['px', '%', 'vw']; break; + case 'flex-basis': + obj.units = ['px', '%', 'vw', 'vh']; + break; case 'text-shadow-v': case 'text-shadow-h': case 'text-shadow-blur': @@ -405,6 +412,7 @@ module.exports = () => ({ case 'box-shadow-blur': case 'transition-duration': case 'perspective': + case 'flex-basis': obj.min = 0; break; } diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index b4ec6ce86..9b82f584f 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -541,6 +541,19 @@ module.exports = { expect(obj.build('max-width')).toEqual([res]); }); + test('Build flex-basis', () => { + var res = { + type: 'integer', + units: ['px', '%', 'vw', 'vh'], + defaults: 'auto', + fixedValues: ['initial', 'inherit', 'auto'], + requiresParent: { display: ['flex'] }, + min: 0 + }; + res.property = 'flex-basis'; + expect(obj.build('flex-basis')).toEqual([res]); + }); + test('Build height family', () => { var res = { type: 'integer', From 5862b9bd0fc4f9fc31971d0484ea9713234610db Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 7 Jan 2019 18:31:42 +0100 Subject: [PATCH 19/24] Fix incorrect target for requiresParent --- src/style_manager/view/PropertyView.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index dd825f210..0f828809b 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -419,6 +419,7 @@ module.exports = Backbone.View.extend({ const requires = model.get('requires'); const requiresParent = model.get('requiresParent'); const sectors = this.sector ? this.sector.collection : null; + const selected = this.em ? this.em.getSelected() : null; let stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property @@ -456,12 +457,13 @@ module.exports = Backbone.View.extend({ // Check if the property is available based on parent's property values if (requiresParent) { if ( - trg.view && - trg.view.$el && - trg.view.$el[0] && - trg.view.$el[0].parentNode + selected && + selected.view && + selected.view.$el && + selected.view.$el[0] && + selected.view.$el[0].parentNode ) { - const styles = window.getComputedStyle(trg.view.$el[0].parentNode); + const styles = window.getComputedStyle(selected.view.$el[0].parentNode); each(requiresParent, (values, property) => { stylable = stylable && styles[property] && includes(values, styles[property]); From 68da08ad7073304841733422f39ef1f8ed6965cf Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 21 Jan 2019 11:18:13 +0100 Subject: [PATCH 20/24] Beautify parent selection for requiresParent --- src/style_manager/view/PropertyView.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 0f828809b..68037c87e 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -456,14 +456,10 @@ module.exports = Backbone.View.extend({ // Check if the property is available based on parent's property values if (requiresParent) { - if ( - selected && - selected.view && - selected.view.$el && - selected.view.$el[0] && - selected.view.$el[0].parentNode - ) { - const styles = window.getComputedStyle(selected.view.$el[0].parentNode); + const parent = selected && selected.parent(); + const parentEl = parent && parent.getEl(); + if (parentEl) { + const styles = window.getComputedStyle(parentEl); each(requiresParent, (values, property) => { stylable = stylable && styles[property] && includes(values, styles[property]); From 20a2b055557cc9708c84ff4aa302ab3cbe558191 Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 21 Jan 2019 11:23:09 +0100 Subject: [PATCH 21/24] Add flex properties to documentation --- docs/modules/Style-manager.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index 32fb41ff6..29fdbaf4a 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -13,7 +13,7 @@ Coming soon Here you can find all the available built-in properties that you can use inside Style Manager via `buildProps`: -`float`, `position`, `text-align`, `display`, `font-family`, `font-weight`, `border`, `border-style`, `border-color`, `border-width`, `box-shadow`, `background-repeat`, `background-position`, `background-attachment`, `background-size`, `transition`, `transition-duration`, `transition-property`, `transition-timing-function`, `top`, `right`, `bottom`, `left`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `width`, `heigth`, `min-width`, `min-heigth`, `max-width`, `max-heigth`, `font-size`, `letter-spacing`, `line-height`, `text-shadow`, `border-radius`, `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`, `perspective`, `transform`, `transform-rotate-x`, `transform-rotate-y`, `transform-rotate-z`, `transform-scale-x`, `transform-scale-y`, `transform-scale-z`, `color`, `background-color`, `background`, `background-image`, `cursor` +`float`, `position`, `text-align`, `display`, `font-family`, `font-weight`, `border`, `border-style`, `border-color`, `border-width`, `box-shadow`, `background-repeat`, `background-position`, `background-attachment`, `background-size`, `transition`, `transition-duration`, `transition-property`, `transition-timing-function`, `top`, `right`, `bottom`, `left`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`, `font-size`, `letter-spacing`, `line-height`, `text-shadow`, `border-radius`, `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`, `perspective`, `transform`, `transform-rotate-x`, `transform-rotate-y`, `transform-rotate-z`, `transform-scale-x`, `transform-scale-y`, `transform-scale-z`, `color`, `background-color`, `background`, `background-image`, `cursor`, `flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-content`, `order`, `flex-basis`, `flex-grow`, `flex-shrink`, `align-self` Example usage: ```js From c9e17b2c112c1a13733f21d1a3ba7a48396228dc Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 21 Jan 2019 11:40:27 +0100 Subject: [PATCH 22/24] Add properties overflow-x and overflow-y --- docs/modules/Style-manager.md | 1 + src/style_manager/model/PropertyFactory.js | 6 +++++ test/specs/style_manager/model/Models.js | 30 ++++++++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index 32fb41ff6..9cb9ce7aa 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -14,6 +14,7 @@ Coming soon Here you can find all the available built-in properties that you can use inside Style Manager via `buildProps`: `float`, `position`, `text-align`, `display`, `font-family`, `font-weight`, `border`, `border-style`, `border-color`, `border-width`, `box-shadow`, `background-repeat`, `background-position`, `background-attachment`, `background-size`, `transition`, `transition-duration`, `transition-property`, `transition-timing-function`, `top`, `right`, `bottom`, `left`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `width`, `heigth`, `min-width`, `min-heigth`, `max-width`, `max-heigth`, `font-size`, `letter-spacing`, `line-height`, `text-shadow`, `border-radius`, `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`, `perspective`, `transform`, `transform-rotate-x`, `transform-rotate-y`, `transform-rotate-z`, `transform-scale-x`, `transform-scale-y`, `transform-scale-z`, `color`, `background-color`, `background`, `background-image`, `cursor` +`overflow`, `overflow-x`, `overflow-y` Example usage: ```js diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index e3d690fd0..095c2b2eb 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -84,6 +84,8 @@ module.exports = () => ({ case 'transition-timing-function': case 'cursor': case 'overflow': + case 'overflow-x': + case 'overflow-y': obj.type = 'select'; break; case 'top': @@ -266,6 +268,8 @@ module.exports = () => ({ obj.defaults = 'ease'; break; case 'overflow': + case 'overflow-x': + case 'overflow-y': obj.defaults = 'visible'; break; } @@ -552,6 +556,8 @@ module.exports = () => ({ ]; break; case 'overflow': + case 'overflow-x': + case 'overflow-y': obj.list = [ { value: 'visible' }, { value: 'hidden' }, diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 9dd0cdb3f..7ce0fad23 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -1032,6 +1032,36 @@ module.exports = { }; expect(obj.build('overflow')).toEqual([res]); }); + + test('Build overflow-x', () => { + var res = { + type: 'select', + property: 'overflow-x', + defaults: 'visible', + list: [ + { value: 'visible' }, + { value: 'hidden' }, + { value: 'scroll' }, + { value: 'auto' } + ] + }; + expect(obj.build('overflow-x')).toEqual([res]); + }); + + test('Build overflow-y', () => { + var res = { + type: 'select', + property: 'overflow-y', + defaults: 'visible', + list: [ + { value: 'visible' }, + { value: 'hidden' }, + { value: 'scroll' }, + { value: 'auto' } + ] + }; + expect(obj.build('overflow-y')).toEqual([res]); + }); }); } }; From 362e102f2da0c86e0f6db9ea9070e5c109e97563 Mon Sep 17 00:00:00 2001 From: David Polak Date: Mon, 21 Jan 2019 12:12:42 +0100 Subject: [PATCH 23/24] Add flex-basis to default index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 70fd4615c..ff5544915 100755 --- a/index.html +++ b/index.html @@ -94,7 +94,7 @@ },{ name: 'Flex', open: false, - buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-grow', 'flex-shrink', 'align-self'] + buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self'] },{ name: 'Dimension', open: false, From 6a823ddd8ac6f2c3887dea0de9818a316d225995 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Mon, 21 Jan 2019 14:44:02 -0200 Subject: [PATCH 24/24] limit width resize to Canvas width --- src/commands/view/SelectComponent.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 2df42f887..28adeae84 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -350,7 +350,7 @@ module.exports = { * @private */ initResize(elem) { - const em = this.em; + const { em, canvas } = this; const editor = em ? em.get('Editor') : ''; const config = em ? em.get('Config') : ''; const pfx = config.stylePrefix || ''; @@ -444,7 +444,13 @@ module.exports = { const style = modelToStyle.getStyle(); if (!onlyHeight) { - style[keyWidth] = autoWidth ? 'auto' : `${rect.w}${unitWidth}`; + const padding = 10; + const frameOffset = canvas.getCanvasView().getFrameOffset(); + const width = + rect.w < frameOffset.width - padding + ? rect.w + : frameOffset.width - padding; + style[keyWidth] = autoWidth ? 'auto' : `${width}${unitWidth}`; } if (!onlyWidth) {