From 7b2140d7f9bd877503c12ba4e604822b1e4cf0b7 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 4 Oct 2015 11:45:54 -0700 Subject: [PATCH 1/5] Implement caching in the JS version --- src/Layout.js | 26 +++++++++++++++++++++++++- src/transpile.js | 2 +- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/Layout.js b/src/Layout.js index 0e98bdc6..1682c089 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -385,7 +385,7 @@ var computeLayout = (function() { return -getPosition(node, trailing[axis]); } - function layoutNode(node, parentMaxWidth, /*css_direction_t*/parentDirection) { + function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) { var/*css_direction_t*/ direction = resolveDirection(node, parentDirection); var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction); @@ -1068,8 +1068,32 @@ var computeLayout = (function() { child.nextAbsoluteChild = null; } } + + function layoutNode(node, parentMaxWidth, parentDirection) { + if (!node.lastLayout || + node.lastLayout.requestedHeight !== node.layout.height || + node.lastLayout.requestedWidth !== node.layout.width || + node.lastLayout.parentMaxWidth !== parentMaxWidth) { + + if (!node.lastLayout) + node.lastLayout = {}; + + node.lastLayout.requestedWidth = node.layout.width; + node.lastLayout.requestedHeight = node.layout.height; + node.lastLayout.parentMaxWidth = parentMaxWidth; + + layoutNodeImpl(node, parentMaxWidth, parentDirection); + + for (var key in node.layout) + node.lastLayout[key] = node.layout[key]; + } else { + for (var key in node.layout) + node.layout[key] = node.lastLayout[key]; + } + } return { + layoutNodeImpl: layoutNodeImpl, computeLayout: layoutNode, fillNodes: fillNodes }; diff --git a/src/transpile.js b/src/transpile.js index 627db33a..1021df40 100644 --- a/src/transpile.js +++ b/src/transpile.js @@ -8,7 +8,7 @@ */ var layoutTestUtils = require('./Layout-test-utils.js'); -var computeLayout = require('./Layout.js').computeLayout; +var computeLayout = require('./Layout.js').layoutNodeImpl; var fs = require('fs'); var JavaTranspiler = require('./JavaTranspiler.js'); var CSharpTranspiler = require('./CSharpTranspiler.js'); From 221510cfcf7c7fc1d0e62bd900291612edbe5b1c Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 4 Oct 2015 14:11:07 -0700 Subject: [PATCH 2/5] Fix nits --- src/Layout.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Layout.js b/src/Layout.js index d5431c66..99552e6b 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1128,9 +1128,10 @@ var computeLayout = (function() { node.lastLayout.requestedHeight !== node.layout.height || node.lastLayout.requestedWidth !== node.layout.width || node.lastLayout.parentMaxWidth !== parentMaxWidth) { - - if (!node.lastLayout) + + if (!node.lastLayout) { node.lastLayout = {}; + } node.lastLayout.requestedWidth = node.layout.width; node.lastLayout.requestedHeight = node.layout.height; @@ -1138,11 +1139,13 @@ var computeLayout = (function() { layoutNodeImpl(node, parentMaxWidth, parentDirection); - for (var key in node.layout) + for (var key in node.layout) { node.lastLayout[key] = node.layout[key]; + } } else { - for (var key in node.layout) + for (var key in node.layout) { node.layout[key] = node.lastLayout[key]; + } } } From e9d880a105c7b47866c1faa12aa3ffe0b2c60a59 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 4 Oct 2015 14:11:55 -0700 Subject: [PATCH 3/5] Add isDirty support --- src/Layout.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/Layout.js b/src/Layout.js index 99552e6b..308eaace 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -63,7 +63,7 @@ var computeLayout = (function() { // properties. For the JavaScript version this function adds these properties // if they don't already exist. function fillNodes(node) { - if (!node.layout) { + if (!node.layout || node.isDirty) { node.layout = { width: undefined, height: undefined, @@ -1124,7 +1124,8 @@ var computeLayout = (function() { } function layoutNode(node, parentMaxWidth, parentDirection) { - if (!node.lastLayout || + if (node.isDirty || + !node.lastLayout || node.lastLayout.requestedHeight !== node.layout.height || node.lastLayout.requestedWidth !== node.layout.width || node.lastLayout.parentMaxWidth !== parentMaxWidth) { @@ -1136,12 +1137,24 @@ var computeLayout = (function() { node.lastLayout.requestedWidth = node.layout.width; node.lastLayout.requestedHeight = node.layout.height; node.lastLayout.parentMaxWidth = parentMaxWidth; - + + // Reset child layouts + node.children.forEach(function(child) { + child.layout.width = undefined; + child.layout.height = undefined; + child.layout.top = 0; + child.layout.left = 0; + child.layout.bottom = 0; + child.layout.right = 0; + }); + layoutNodeImpl(node, parentMaxWidth, parentDirection); for (var key in node.layout) { node.lastLayout[key] = node.layout[key]; } + + node.isDirty = false; } else { for (var key in node.layout) { node.layout[key] = node.lastLayout[key]; From 57d41f3e353e4b149449b058b978571fc3350079 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 4 Oct 2015 14:19:02 -0700 Subject: [PATCH 4/5] Add a shouldUpdate property to nodes whose layout changed --- src/Layout.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Layout.js b/src/Layout.js index 308eaace..bea16fb0 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1160,6 +1160,8 @@ var computeLayout = (function() { node.layout[key] = node.lastLayout[key]; } } + + node.shouldUpdate = true; } return { From e510c72111ce4a1d1def68f4c01629b5e7482761 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 4 Oct 2015 14:36:44 -0700 Subject: [PATCH 5/5] Update based on feedback --- src/Layout.js | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/Layout.js b/src/Layout.js index bea16fb0..63165624 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -1124,12 +1124,23 @@ var computeLayout = (function() { } function layoutNode(node, parentMaxWidth, parentDirection) { - if (node.isDirty || - !node.lastLayout || - node.lastLayout.requestedHeight !== node.layout.height || - node.lastLayout.requestedWidth !== node.layout.width || - node.lastLayout.parentMaxWidth !== parentMaxWidth) { - + node.shouldUpdate = true; + + var direction = node.style.direction || CSS_DIRECTION_LTR; + var skipLayout = + !node.isDirty && + node.lastLayout && + node.lastLayout.requestedHeight === node.layout.height && + node.lastLayout.requestedWidth === node.layout.width && + node.lastLayout.parentMaxWidth === parentMaxWidth && + node.lastLayout.direction === direction; + + if (skipLayout) { + node.layout.width = node.lastLayout.width; + node.layout.height = node.lastLayout.height; + node.layout.top = node.lastLayout.top; + node.layout.left = node.lastLayout.left; + } else { if (!node.lastLayout) { node.lastLayout = {}; } @@ -1137,6 +1148,7 @@ var computeLayout = (function() { node.lastLayout.requestedWidth = node.layout.width; node.lastLayout.requestedHeight = node.layout.height; node.lastLayout.parentMaxWidth = parentMaxWidth; + node.lastLayout.direction = direction; // Reset child layouts node.children.forEach(function(child) { @@ -1144,24 +1156,15 @@ var computeLayout = (function() { child.layout.height = undefined; child.layout.top = 0; child.layout.left = 0; - child.layout.bottom = 0; - child.layout.right = 0; }); layoutNodeImpl(node, parentMaxWidth, parentDirection); - for (var key in node.layout) { - node.lastLayout[key] = node.layout[key]; - } - - node.isDirty = false; - } else { - for (var key in node.layout) { - node.layout[key] = node.lastLayout[key]; - } + node.lastLayout.width = node.layout.width; + node.lastLayout.height = node.layout.height; + node.lastLayout.top = node.layout.top; + node.lastLayout.left = node.layout.left; } - - node.shouldUpdate = true; } return {