diff options
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 32 | ||||
| -rw-r--r-- | src/lib.ts | 8 |
3 files changed, 27 insertions, 19 deletions
diff --git a/src/App.vue b/src/App.vue index 7df0803..234896d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,14 +8,13 @@ export default defineComponent({ return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, - tileTreeOffset: 5, // For space between tile-tree and display boundary // For window-resize-handler throttling resizeThrottled: false, resizeDelay: 50, //ms } }, computed: { - styles(){ + styles(): Record<string,string> { return { position: 'absolute', left: '0', @@ -51,8 +50,7 @@ export default defineComponent({ <template> <div :style="styles"> - <tile-tree :pos="[tileTreeOffset, tileTreeOffset]" - :dims="[width - tileTreeOffset*2, height - tileTreeOffset*2]"/> + <tile-tree :pos="[0, 0]" :dims="[width, height]"/> </div> </template> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 3b74ddf..5a5f251 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -32,6 +32,7 @@ const defaultLayoutOptions: LayoutOptions = { }; const defaultOtherOptions = { transitionDuration: 300, //ms + tileAreaOffset: 5, //px (space between root tile and display boundary) }; // Component holds a tree structure representing a subtree of 'tol' to be rendered @@ -50,13 +51,17 @@ export default defineComponent({ otherOptions: {...defaultOtherOptions}, } }, - watch: { - dims(newDims){ - tryLayout(this.activeRoot, [0,0], newDims, this.layoutOptions, true); - }, - }, computed: { - styles(){ + tileAreaPos(){ + return [this.otherOptions.tileAreaOffset, this.otherOptions.tileAreaOffset] as [number, number]; + }, + tileAreaDims(){ + return [ + this.dims[0] - this.otherOptions.tileAreaOffset * 2, + this.dims[1] - this.otherOptions.tileAreaOffset * 2 + ] as [number, number]; + }, + styles(): Record<string,string> { return { position: 'absolute', left: this.pos[0] + 'px', @@ -67,9 +72,14 @@ export default defineComponent({ }; }, }, + watch: { + dims(newDims){ + tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); + }, + }, methods: { onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){ - let success = tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, false, + let success = tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'expand', node: layoutNode}); if (!success){ // Trigger failure animation @@ -79,7 +89,7 @@ export default defineComponent({ } }, onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){ - let success = tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, false, + let success = tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'collapse', node: layoutNode}); if (!success){ // Trigger failure animation @@ -95,7 +105,7 @@ export default defineComponent({ } LayoutNode.hideUpward(layoutNode); this.activeRoot = layoutNode; - tryLayout(layoutNode, [0,0], this.dims, this.layoutOptions, true, + tryLayout(layoutNode, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode}); }, onInnerHeaderDblClicked(layoutNode: LayoutNode){ @@ -105,11 +115,11 @@ export default defineComponent({ } LayoutNode.hideUpward(layoutNode); this.activeRoot = layoutNode; - tryLayout(layoutNode, [0,0], this.dims, this.layoutOptions, true); + tryLayout(layoutNode, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); }, }, created(){ - tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, true); + tryLayout(this.activeRoot, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true); }, components: { Tile, @@ -93,8 +93,8 @@ export class LayoutNode { // Assigns render-relevant data to this single node assignLayoutData(pos=[0,0] as [number,number], dims=[0,0] as [number,number], {showHeader=false, sepSweptArea=null as SepSweptArea|null, empSpc=0} = {}){ - this.pos = pos; - this.dims = dims; + this.pos = [...pos]; + this.dims = [...dims]; this.showHeader = showHeader; this.sepSweptArea = sepSweptArea; this.empSpc = empSpc; @@ -183,8 +183,8 @@ export function tryLayout(layoutTree: LayoutNode, pos: [number,number], dims: [n } if (success){ // Center in layout area - tempTree.pos[0] = (dims[0] - tempTree.dims[0]) / 2; - tempTree.pos[1] = (dims[1] - tempTree.dims[1]) / 2; + tempTree.pos[0] += (dims[0] - tempTree.dims[0]) / 2; + tempTree.pos[1] += (dims[1] - tempTree.dims[1]) / 2; // Apply to active LayoutNode tree tempTree.copyTreeForRender(layoutTree); } |