diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/TileTree.vue | 8 | ||||
| -rw-r--r-- | src/layout.js | 86 |
2 files changed, 32 insertions, 62 deletions
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 68e180d..0e27c0d 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -11,7 +11,7 @@ function preprocessTol(tree){ } preprocessTol(tol); -import {staticSqrLayout, staticRectLayout, sweepToSideLayout, shiftEmpty} from '/src/layout.js'; +import {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks, shiftEmpty} from '/src/layout.js'; let LAYOUT_SYS = sweepToSideLayout; export default { @@ -40,7 +40,7 @@ export default { return tree; } initTreeRec(tree, lvl); - LAYOUT_SYS.initLayoutInfo(tree) + layoutInfoHooks.initLayoutInfo(tree) return tree; }, onResize(){ @@ -65,14 +65,14 @@ export default { tolNode: tNode, children: [], x:0, y:0, w:0, h:0, headerSz:0, })); - LAYOUT_SYS.updateLayoutInfoOnExpand(nodeList); + layoutInfoHooks.updateLayoutInfoOnExpand(nodeList); //try to layout tree if (!this.tryLayout()) nodeList[0].children = []; }, onInnerHeaderClicked(nodeList){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward nodeList[0].children = []; - LAYOUT_SYS.updateLayoutInfoOnCollapse(nodeList); + layoutInfoHooks.updateLayoutInfoOnCollapse(nodeList); this.tryLayout(); }, tryLayout(){ diff --git a/src/layout.js b/src/layout.js index 8bcb12a..982e931 100644 --- a/src/layout.js +++ b/src/layout.js @@ -1,4 +1,4 @@ -export {staticSqrLayout, staticRectLayout, sweepToSideLayout, shiftEmpty}; +export {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks, shiftEmpty}; const TILE_SPACING = 5; const HEADER_SZ = 20; @@ -8,6 +8,33 @@ const RECT_MODE = 'auto'; //'horz', 'vert', 'linear', 'auto' const SWEEP_MODE = 'left'; //'left', 'top', 'shorter', 'auto' const ALLOW_SWEEP_TO_PARENT = true; +const layoutInfoHooks = { //made common-across-layout-types for layout inter-usability + initLayoutInfo(tree){ + if (tree.children.length > 0){ + tree.children.forEach(e => this.initLayoutInfo(e)); + } + this.updateLayoutInfo(tree); + }, + updateLayoutInfoOnExpand(nodeList){ //given list of tree-nodes from expanded_child-to-parent, update layout-info + nodeList[0].children.forEach(this.updateLayoutInfo); + for (let node of nodeList){ + this.updateLayoutInfo(node); + } + }, + updateLayoutInfoOnCollapse(nodeList){ //given list of tree-nodes from child_to_collapse-to-parent, update layout-info + for (let node of nodeList){ + this.updateLayoutInfo(node); + } + }, + updateLayoutInfo(tree){ + if (tree.children.length == 0){ + tree.tileCount = 1; + } else { + tree.tileCount = tree.children.map(e => e.tileCount).reduce((x,y) => x+y); + } + } +} + const staticSqrLayout = { //lays out nodes as squares in a rectangle, with spacing genLayout(node, x, y, w, h, hideHeader){ //get number-of-columns with lowest leftover empty space @@ -62,15 +89,6 @@ const staticSqrLayout = { //lays out nodes as squares in a rectangle, with spaci empSpc: lowestEmp, postProcessData: {type: 'staticSqr'}, } - }, - initLayoutInfo(tree){ - return; - }, - updateLayoutInfoOnExpand(nodeList){ - return; - }, - updateLayoutInfoOnCollapse(nodeList){ - return; } }; const staticRectLayout = { @@ -204,30 +222,6 @@ const staticRectLayout = { empSpc: lowestEmp, postProcessData: {type: 'staticRect', rowBreaks, rowsOfCounts, childLayouts}, } - }, - initLayoutInfo(tree){ - if (tree.children.length > 0){ - tree.children.forEach(e => this.initLayoutInfo(e)); - } - this.updateLayoutInfo(tree); - }, - updateLayoutInfoOnExpand(nodeList){ //given list of tree-nodes from expanded_child-to-parent, update layout-info - nodeList[0].children.forEach(this.updateLayoutInfo); - for (let node of nodeList){ - this.updateLayoutInfo(node); - } - }, - updateLayoutInfoOnCollapse(nodeList){ //given list of tree-nodes from child_to_collapse-to-parent, update layout-info - for (let node of nodeList){ - this.updateLayoutInfo(node); - } - }, - updateLayoutInfo(tree){ - if (tree.children.length == 0){ - tree.tileCount = 1; - } else { - tree.tileCount = tree.children.map(e => e.tileCount).reduce((x,y) => x+y); - } } }; const sweepToSideLayout = { @@ -371,30 +365,6 @@ const sweepToSideLayout = { postProcessData: {type: 'sweepToSide', nonLeavesData: nonLeavesLayout.postProcessData}, }; } - }, - initLayoutInfo(tree){ - if (tree.children.length > 0){ - tree.children.forEach(e => this.initLayoutInfo(e)); - } - this.updateLayoutInfo(tree); - }, - updateLayoutInfoOnExpand(nodeList){ - nodeList[0].children.forEach(this.updateLayoutInfo); - for (let node of nodeList){ - this.updateLayoutInfo(node); - } - }, - updateLayoutInfoOnCollapse(nodeList){ - for (let node of nodeList){ - this.updateLayoutInfo(node); - } - }, - updateLayoutInfo(tree){ - if (tree.children.length == 0){ - tree.tileCount = 1; - } else { - tree.tileCount = tree.children.map(e => e.tileCount).reduce((x,y) => x+y); - } } }; |