add auto-highlighting of selected/updated code

src/presentation/Scripts/ScriptsTree/SelectableTree/INodeSelectedEvent.ts

@@ -0,0 +1,6 @@
+import { INode } from './Node/INode';
+
+export interface INodeSelectedEvent {
+    isSelected: boolean;
+    node: INode;
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts

@@ -0,0 +1,73 @@
+// Two ways of typing other libraries: https://stackoverflow.com/a/53070501
+
+declare module 'liquor-tree' {
+    import { PluginObject } from 'vue';
+    import { VueClass } from 'vue-class-component/lib/declarations';
+
+    // https://github.com/amsik/liquor-tree/blob/master/src/lib/Tree.js
+    export interface ILiquorTree {
+        readonly model: ReadonlyArray<ILiquorTreeExistingNode>;
+        filter(query: string): void;
+        clearFilter(): void;
+        setModel(nodes: ReadonlyArray<ILiquorTreeNewNode>): void;
+    }
+    interface ICustomLiquorTreeData {
+        type: number;
+        documentationUrls: ReadonlyArray<string>;
+        isReversible: boolean;
+    }
+    // https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+    export interface ILiquorTreeNodeState {
+        checked: boolean;
+    }
+
+    export interface ILiquorTreeNode {
+        id: string;
+        data: ICustomLiquorTreeData;
+        children: ReadonlyArray<ILiquorTreeNode> | undefined;
+    }
+    /**
+     * Returned from Node tree view events.
+     * See constructor in https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+     */
+    export interface ILiquorTreeExistingNode extends ILiquorTreeNode {
+        data: ILiquorTreeNodeData;
+        states: ILiquorTreeNodeState | undefined;
+        children: ReadonlyArray<ILiquorTreeExistingNode> | undefined;
+    }
+
+    /**
+     * Sent to liquor tree to define of new nodes.
+     * https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
+     */
+    export interface ILiquorTreeNewNode extends ILiquorTreeNode {
+        text: string;
+        state: ILiquorTreeNodeState | undefined;
+        children: ReadonlyArray<ILiquorTreeNewNode> | undefined;
+    }
+
+    // https://amsik.github.io/liquor-tree/#Component-Options
+    export interface ILiquorTreeOptions {
+        multiple: boolean;
+        checkbox: boolean;
+        checkOnSelect: boolean;
+        autoCheckChildren: boolean;
+        parentSelect: boolean;
+        keyboardNavigation: boolean;
+        filter: ILiquorTreeFilter;
+        deletion(node: ILiquorTreeNode): boolean;
+    }
+
+    interface ILiquorTreeNodeData extends ICustomLiquorTreeData {
+        text: string;
+    }
+
+    // https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
+    export interface ILiquorTreeFilter {
+        emptyText: string;
+        matcher(query: string, node: ILiquorTreeExistingNode): boolean;
+    }
+
+    const LiquorTree: PluginObject<any> & VueClass<any>;
+    export default LiquorTree;
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTreeOptions.ts

@@ -0,0 +1,16 @@
+import { ILiquorTreeOptions, ILiquorTreeFilter, ILiquorTreeNode } from 'liquor-tree';
+
+export class LiquorTreeOptions implements ILiquorTreeOptions {
+    public multiple = true;
+    public checkbox = true;
+    public checkOnSelect = true;
+    /*  For checkbox mode only. Children will have the same checked state as their parent.
+        This is false as it's handled manually to be able to batch select for performance + highlighting */
+    public autoCheckChildren = false;
+    public parentSelect = false;
+    public keyboardNavigation = true;
+    constructor(public filter: ILiquorTreeFilter) { }
+    public deletion(node: ILiquorTreeNode): boolean {
+        return false; // no op
+    }
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodePredicateFilter.ts

@@ -0,0 +1,17 @@
+import { ILiquorTreeFilter, ILiquorTreeExistingNode } from 'liquor-tree';
+import { convertExistingToNode } from './NodeTranslator';
+import { INode } from '../Node/INode';
+
+export type FilterPredicate = (node: INode) => boolean;
+
+export class NodePredicateFilter implements ILiquorTreeFilter {
+    public emptyText: string = '🕵️Hmm.. Can not see one 🧐';
+    constructor(private readonly filterPredicate: FilterPredicate) {
+        if (!filterPredicate) {
+            throw new Error('filterPredicate is undefined');
+        }
+    }
+    public matcher(query: string, node: ILiquorTreeExistingNode): boolean {
+        return this.filterPredicate(convertExistingToNode(node));
+    }
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeStateUpdater.ts

@@ -0,0 +1,66 @@
+import { ILiquorTreeExistingNode, ILiquorTreeNewNode, ILiquorTreeNodeState, ILiquorTreeNode } from 'liquor-tree';
+import { NodeType } from './../Node/INode';
+
+export function updateNodesCheckedState(
+    oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
+    selectedNodeIds: ReadonlyArray<string>): ReadonlyArray<ILiquorTreeNewNode> {
+    const result = new Array<ILiquorTreeNewNode>();
+    for (const oldNode of oldNodes) {
+        const newState = oldNode.states;
+        newState.checked = getNewCheckedState(oldNode, selectedNodeIds);
+        const newNode: ILiquorTreeNewNode = {
+            id: oldNode.id,
+            text: oldNode.data.text,
+            data: {
+                type: oldNode.data.type,
+                documentationUrls: oldNode.data.documentationUrls,
+                isReversible: oldNode.data.isReversible,
+            },
+            children: !oldNode.children ? [] : updateNodesCheckedState(oldNode.children, selectedNodeIds),
+            state: newState,
+        };
+        result.push(newNode);
+    }
+    return result;
+}
+
+export function getNewCheckedState(
+    oldNode: ILiquorTreeNode,
+    selectedNodeIds: ReadonlyArray<string>): boolean {
+    switch (oldNode.data.type) {
+        case NodeType.Script:
+            return selectedNodeIds.some((id) => id === oldNode.id);
+        case NodeType.Category:
+            return parseAllSubScriptIds(oldNode).every((id) => selectedNodeIds.includes(id));
+        default:
+            throw new Error('Unknown node type');
+    }
+}
+
+function parseAllSubScriptIds(categoryNode: ILiquorTreeNode): ReadonlyArray<string> {
+    if (categoryNode.data.type !== NodeType.Category) {
+        throw new Error('Not a category node');
+    }
+    if (!categoryNode.children) {
+        return [];
+    }
+    const ids = new Array<string>();
+    for (const child of categoryNode.children) {
+        addNodeIds(child, ids);
+    }
+    return ids;
+}
+
+function addNodeIds(node: ILiquorTreeNode, ids: string[]) {
+    switch (node.data.type) {
+        case NodeType.Script:
+            ids.push(node.id);
+            break;
+        case NodeType.Category:
+            const subCategoryIds = parseAllSubScriptIds(node);
+            ids.push(...subCategoryIds);
+            break;
+        default:
+            throw new Error('Unknown node type');
+    }
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/NodeTranslator.ts

@@ -1,5 +1,5 @@
 import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
-import { INode } from './INode';
+import { INode } from './../Node/INode';
 
 // Functions to translate INode to LiqourTree models and vice versa for anti-corruption
 
@@ -7,6 +7,7 @@ export function convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode):
     if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
     return {
         id: liquorTreeNode.id,
+        type: liquorTreeNode.data.type,
         text: liquorTreeNode.data.text,
         // selected: liquorTreeNode.states && liquorTreeNode.states.checked,
         children: convertChildren(liquorTreeNode.children, convertExistingToNode),
@@ -27,6 +28,7 @@ export function toNewLiquorTreeNode(node: INode): ILiquorTreeNewNode {
         data: {
             documentationUrls: node.documentationUrls,
             isReversible: node.isReversible,
+            type: node.type,
         },
     };
 }

src/presentation/Scripts/ScriptsTree/SelectableTree/Node/INode.ts

@@ -1,7 +1,13 @@
+export enum NodeType {
+    Script,
+    Category,
+}
+
 export interface INode {
     readonly id: string;
     readonly text: string;
     readonly isReversible: boolean;
     readonly documentationUrls: ReadonlyArray<string>;
     readonly children?: ReadonlyArray<INode>;
+    readonly type: NodeType;
 }

src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue

@@ -19,16 +19,19 @@
 <script lang="ts">
     import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
     import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree, ILiquorTreeOptions } from 'liquor-tree';
-    import Node from './Node.vue';
-    import { INode } from './INode';
-    import { convertExistingToNode, toNewLiquorTreeNode } from './NodeTranslator';
-    export type FilterPredicate = (node: INode) => boolean;
+    import Node from './Node/Node.vue';
+    import { INode, NodeType } from './Node/INode';
+    import { convertExistingToNode, toNewLiquorTreeNode } from './LiquorTree/NodeTranslator';
+    import { INodeSelectedEvent } from './/INodeSelectedEvent';
+    import { updateNodesCheckedState, getNewCheckedState } from './LiquorTree/NodeStateUpdater';
+    import { LiquorTreeOptions } from './LiquorTree/LiquorTreeOptions';
+    import { FilterPredicate, NodePredicateFilter } from './LiquorTree/NodePredicateFilter';
 
     /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
     @Component({
         components: {
-        LiquorTree,
-        Node,
+            LiquorTree,
+            Node,
         },
     })
     export default class SelectableTree extends Vue {
@@ -38,7 +41,7 @@
         @Prop() public initialNodes?: ReadonlyArray<INode>;
 
         public initialLiquourTreeNodes?: ILiquorTreeNewNode[] = null;
-        public liquorTreeOptions = this.getDefaults();
+        public liquorTreeOptions = new LiquorTreeOptions(new NodePredicateFilter((node) => this.filterPredicate(node)));
         public convertExistingToNode = convertExistingToNode;
 
         public mounted() {
@@ -46,7 +49,7 @@
                 const initialNodes = this.initialNodes.map((node) => toNewLiquorTreeNode(node));
                 if (this.selectedNodeIds) {
                     recurseDown(initialNodes,
-                        (node) => node.state.checked = this.selectedNodeIds.includes(node.id));
+                        (node) => node.state.checked = getNewCheckedState(node, this.selectedNodeIds));
                 }
                 this.initialLiquourTreeNodes = initialNodes;
             } else {
@@ -58,7 +61,11 @@
         }
 
         public nodeSelected(node: ILiquorTreeExistingNode) {
-            this.$emit('nodeSelected', convertExistingToNode(node));
+            const event: INodeSelectedEvent = {
+                node: convertExistingToNode(node),
+                isSelected: node.states.checked,
+            };
+            this.$emit('nodeSelected', event);
             return;
         }
 
@@ -73,11 +80,11 @@
         }
 
         @Watch('selectedNodeIds')
-        public setSelectedStatus(selectedNodeIds: ReadonlyArray<string>) {
+        public setSelectedStatusAsync(selectedNodeIds: ReadonlyArray<string>) {
             if (!selectedNodeIds) {
                 throw new Error('Selected nodes are undefined');
             }
-            const newNodes = updateCheckedState(this.getLiquorTreeApi().model, selectedNodeIds);
+            const newNodes = updateNodesCheckedState(this.getLiquorTreeApi().model, selectedNodeIds);
             this.getLiquorTreeApi().setModel(newNodes);
             /*  Alternative:
                     this.getLiquorTreeApi().recurseDown((node) => {
@@ -98,27 +105,6 @@
             }
             return (this.$refs.treeElement as any).tree;
         }
-
-        private getDefaults(): ILiquorTreeOptions {
-            return {
-                multiple: true,
-                checkbox: true,
-                checkOnSelect: true,
-                autoCheckChildren: true,
-                parentSelect: false,
-                keyboardNavigation: true,
-                deletion: (node) => !node.children || node.children.length === 0,
-                filter: {
-                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
-                        if (!this.filterPredicate) {
-                            throw new Error('Cannot filter as predicate is null');
-                        }
-                        return this.filterPredicate(convertExistingToNode(node));
-                    },
-                    emptyText: '🕵️Hmm.. Can not see one 🧐',
-                },
-            };
-        }
     }
 
     function recurseDown(
@@ -131,27 +117,4 @@
             }
         }
     }
-
-    function updateCheckedState(
-        oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
-        selectedNodeIds: ReadonlyArray<string>): ReadonlyArray<ILiquorTreeNewNode> {
-        const result = new Array<ILiquorTreeNewNode>();
-        for (const oldNode of oldNodes) {
-            const newState = oldNode.states;
-            newState.checked = selectedNodeIds.some((id) => id === oldNode.id);
-            const newNode: ILiquorTreeNewNode = {
-                id: oldNode.id,
-                text: oldNode.data.text,
-                data: {
-                    documentationUrls: oldNode.data.documentationUrls,
-                    isReversible: oldNode.data.isReversible,
-                },
-                children: oldNode.children == null ? [] :
-                        updateCheckedState(oldNode.children, selectedNodeIds),
-                state: newState,
-            };
-            result.push(newNode);
-        }
-        return result;
-    }
 </script>