diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Tile.vue | 6 | ||||
| -rw-r--r-- | src/components/TileImg.vue | 3 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 15 | ||||
| -rw-r--r-- | src/lib.ts | 2 |
4 files changed, 19 insertions, 7 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index f0b506e..3485f53 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -62,7 +62,8 @@ export default defineComponent({ height: '100%', backgroundColor: this.nonLeafBgColor, borderRadius: this.options.borderRadius + 'px', - boxShadow: this.nonLeafHighlight ? this.options.shadowHighlight : this.options.shadowNormal, + boxShadow: this.nonLeafHighlight ? this.options.shadowHighlight : + (this.layoutNode.searchResult ? this.options.shadowSearchResult : this.options.shadowNormal), }; if (this.layoutNode.sepSweptArea != null){ let r = this.options.borderRadius + 'px'; @@ -92,7 +93,8 @@ export default defineComponent({ let commonStyles = { position: 'absolute', backgroundColor: this.nonLeafBgColor, - boxShadow: this.nonLeafHighlight ? this.options.shadowHighlight : this.options.shadowNormal, + boxShadow: this.nonLeafHighlight ? this.options.shadowHighlight : + (this.layoutNode.searchResult ? this.options.shadowSearchResult : this.options.shadowNormal), transitionDuration: this.options.transitionDuration + 'ms', transitionProperty: 'left, top, width, height', transitionTimingFunction: 'ease-out', diff --git a/src/components/TileImg.vue b/src/components/TileImg.vue index 1d83b37..1eb056a 100644 --- a/src/components/TileImg.vue +++ b/src/components/TileImg.vue @@ -35,7 +35,8 @@ export default defineComponent({ flexDirection: 'column', // Other borderRadius: this.options.borderRadius + 'px', - boxShadow: this.highlight ? this.options.shadowHighlight : this.options.shadowNormal, + boxShadow: this.highlight ? this.options.shadowHighlight : + (this.layoutNode.searchResult ? this.options.shadowSearchResult : this.options.shadowNormal), }; }, headerStyles(): Record<string,string> { diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 4ede92f..7aa405e 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -53,6 +53,7 @@ const defaultComponentOptions = { borderRadius: 5, //px shadowNormal: '0 0 2px black', shadowHighlight: '0 0 1px 2px greenyellow', + shadowSearchResult: '0 0 1px 2px orange', // For leaf and separated-parent components imgTilePadding: 4, //px imgTileFontSz: 15, //px @@ -92,6 +93,7 @@ export default defineComponent({ infoModalNode: null as TolNode | null, // Hides/unhides info modal, and provides the node to display searchOpen: false, settingsOpen: false, + lastSearchResult: null as LayoutNode | null, // Options layoutOptions: {...defaultLayoutOptions}, componentOptions: {...defaultComponentOptions}, @@ -252,6 +254,9 @@ export default defineComponent({ }, onSearchNode(tolNode: TolNode){ this.searchOpen = false; + if (this.lastSearchResult != null){ + this.lastSearchResult.searchResult = false; + } this.expandToTolNode(tolNode); }, // @@ -273,6 +278,8 @@ export default defineComponent({ // Check if searched node is shown let layoutNode = this.layoutMap.get(tolNode.name); if (layoutNode != null && !layoutNode.hidden){ + layoutNode.searchResult = true; + this.lastSearchResult = layoutNode; return; } // Get nearest in-layout-tree ancestor @@ -284,11 +291,11 @@ export default defineComponent({ // If hidden, expand ancestor in parent-bar if (layoutNode.hidden){ // Get ancestor in parent-bar - while (!this.sepdParents.includes(layoutNode)){ - ancestor = ancestor.parent; - layoutNode = this.layoutMap.get(ancestor.name); + while (!this.sepdParents!.includes(layoutNode)){ + ancestor = ancestor.parent!; + layoutNode = this.layoutMap.get(ancestor.name)!; } - this.onSepdParentClicked(layoutNode); + this.onSepdParentClicked(layoutNode!); setTimeout(() => this.expandToTolNode(tolNode), 300); return; } @@ -29,6 +29,7 @@ export class LayoutNode { showHeader: boolean; sepSweptArea: SepSweptArea | null; hidden: boolean; + searchResult: boolean; // Used for layout heuristics and info display dCount: number; // Number of descendant leaf nodes depth: number; // Number of ancestor nodes @@ -43,6 +44,7 @@ export class LayoutNode { this.showHeader = false; this.sepSweptArea = null; this.hidden = false; + this.searchResult = false; this.dCount = children.length == 0 ? 1 : arraySum(children.map(n => n.dCount)); this.depth = 0; this.empSpc = 0; |