multi-select

StefH · StefH · commit 005ca8763fc2 · 2020-05-10T22:19:32.000+02:00
diff --git a/examples/jsMind.Server.App/Pages/Index.razor b/examples/jsMind.Server.App/Pages/Index.razor
@@ -39,6 +39,7 @@ SelectedNodeId = @_selectedNodeId
     readonly MindMapOptions _options = new MindMapOptions
     {
         Editable = false,
+        MultiSelect = true,
         Theme = MindMapThemes.Primary
     };
 
@@ -49,7 +50,7 @@ SelectedNodeId = @_selectedNodeId
             Id = "root",
             Topic = "-Root-",
             Children = new List<MindMapTreeNode>
-            {
+    {
                 new MindMapTreeNode
                 {
                     Id = "sub1.0",
@@ -60,7 +61,7 @@ SelectedNodeId = @_selectedNodeId
                     Id = "sub1.1",
                     Topic = "sub1.1-right",
                     Children = new List<MindMapTreeNode>
-                    {
+            {
                         new MindMapTreeNode
                         {
                             Id = "sub1.1a",
@@ -86,7 +87,7 @@ SelectedNodeId = @_selectedNodeId
     readonly MindMapArrayData _arrayData1 = new MindMapArrayData
     {
         Nodes = new List<MindMapArrayNode>
-        {
+{
             new MindMapArrayNode
             {
                 IsRoot = true,
@@ -146,6 +147,14 @@ SelectedNodeId = @_selectedNodeId
 
     async Task OnShowTree(EventArgs args)
     {
+        var found = await _myTreeNodeContainer.GetNode("root");
+        var selected = new List<MindMapTreeNode>
+        {
+            _treeData.RootNode,
+            _treeData.RootNode.Children.Last()
+        };
+        await _myTreeNodeContainer.SelectNodes(selected);
+
         await _myTreeNodeContainer.Expand();
     }
 
@@ -168,7 +177,7 @@ SelectedNodeId = @_selectedNodeId
         {
             Id = "newTreeId",
             Topic = "new Tree node",
-            Data = new Dictionary<string, string> { { "background-color", "lightblue" } }
+            Data = new Dictionary<string, string> { { "background-color", "lightblue" }, { "class", "selected" } }
         };
 
         await _myTreeNodeContainer.SetEditable(true);
diff --git a/examples/jsMind.WASM.App/wwwroot/manifest.json b/examples/jsMind.WASM.App/wwwroot/manifest.json
@@ -4,12 +4,5 @@
   "start_url": "./",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#03173d",
-  "icons": [
-    {
-      "src": "icon-512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ]
+  "theme_color": "#03173d"
 }
diff --git a/jsMind.Blazor - Solution.sln.DotSettings b/jsMind.Blazor - Solution.sln.DotSettings
@@ -4,6 +4,7 @@
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Greensea/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Heyenrath/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=isroot/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/UserDictionary/Words/=jmnode/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=jsmind/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=mindmap/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=nodeid/@EntryIndexedValue">True</s:Boolean>
diff --git a/src/jsMind.Blazor/Components/MindMapContainer.Interop.cs b/src/jsMind.Blazor/Components/MindMapContainer.Interop.cs
@@ -1,4 +1,5 @@
-﻿using System.Threading.Tasks;
+﻿using System.Collections.Generic;
+using System.Threading.Tasks;
 using Microsoft.JSInterop;
 
 namespace JsMind.Blazor.Components
@@ -31,6 +32,17 @@ public ValueTask SelectNode(T node)
             return Runtime.InvokeVoidAsync("MindMap.selectNode", _containerId, node.Id);
         }
 
+        public ValueTask SelectNodes(List<T> nodes)
+        {
+            SelectedNodes = nodes;
+            return Runtime.InvokeVoidAsync("MindMap.selectNodes", _containerId, nodes);
+        }
+
+        public ValueTask<T> GetNode(string id)
+        {
+            return Runtime.InvokeAsync<T>("MindMap.getNode", _containerId, id);
+        }
+
         public ValueTask ClearSelect()
         {
             return Runtime.InvokeVoidAsync("MindMap.clearSelect", _containerId);
diff --git a/src/jsMind.Blazor/Components/MindMapContainer.cs b/src/jsMind.Blazor/Components/MindMapContainer.cs
@@ -54,6 +54,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         protected abstract object MindMapData { get; }
 
+        public List<T> SelectedNodes = new List<T>();
+
         public void Dispose()
         {
             try
diff --git a/src/jsMind.Blazor/Models/MindMapOptions.cs b/src/jsMind.Blazor/Models/MindMapOptions.cs
@@ -6,6 +6,8 @@ public class MindMapOptions
     {
         public bool Editable { get; set; }
 
+        public bool MultiSelect { get; set; }
+
         public string Theme { get; set; } = MindMapThemes.Primary;
     }
 }
diff --git a/src/jsMind.Blazor/Scripts/jsmind-interop.js b/src/jsMind.Blazor/Scripts/jsmind-interop.js
@@ -14,7 +14,7 @@ MindMap.show = function (dotnetReference, containerId, mindMapOptions, mindMapDa
             "version": "1.0"
         },
         "format": mindMapData.format,
-        "data": mindMapData.data,
+        "data": mindMapData.data
     };
 
     const options = {
@@ -23,8 +23,8 @@ MindMap.show = function (dotnetReference, containerId, mindMapOptions, mindMapDa
         theme: mindMapOptions.theme
     }
 
-    // Keep a reference to the javascript MindMap object
-    instances[containerId] = window.jsMind.show(options, mind);
+    const mm = window.jsMind.show(options, mind);;
+    mm["multiSelect"] = mindMapOptions.multiSelect;
 
     // Call a callback to indicate that the MindMap is shown
     dotnetReference.invokeMethodAsync("OnShowCallback", { evt: "done", node: "", data: [] });
@@ -50,11 +50,50 @@ MindMap.show = function (dotnetReference, containerId, mindMapOptions, mindMapDa
         }
     }
 
-    instances[containerId].add_event_listener(eventHandler);
-};
+    // Custom
+    if (mindMapOptions.multiSelect) {
+        mm.selectedNodes = [];
+
+        const mousedown_handle = function (e) {
+            e.preventDefault();
+
+            const element = e.target || event.srcElement;
+            const id = this.view.get_binded_nodeid(element);
+            if (id && element.tagName.toLowerCase() === "jmnode") {
+                const node = mm.get_node(id);
+
+                // If already selected: remove from selected list and remove class
+                if (mm.selectedNodes.includes(id)) {
+                    node._data.view.element.className = node._data.view.element.className.replace(/\s*selected\b/g, "");
+
+                    mm.selectedNodes.pop(id);
+                } else {
+                    node._data.view.element.className += " selected";
+
+                    mm.selectedNodes.push(id);
+                }
+
+                //instances[containerId].select_clear();
+
+                //mm.selectedNodes.forEach(selectedId => {
+                //    const selectedNode = instances[containerId].get_node(selectedId);
+                //    selectedNode._data.view.element.className += " selected";
+                //});
+            }
+        }
+
+        mm.view.add_event(mm, "mousedown", mousedown_handle);
+    }
+
+    mm.add_event_listener(eventHandler);
+
+    // Keep a reference to the javascript MindMap object
+    instances[containerId] = mm;
+}
 
 MindMap.destroy = function (containerId) {
     instances[containerId] = null;
+    delete instances[containerId];
 }
 
 MindMap.addNode = function (containerId, id, parentId, topic, data) {
@@ -89,6 +128,26 @@ MindMap.selectNode = function (containerId, id) {
     instances[containerId].select_node(id);
 }
 
+MindMap.selectNodes = function (containerId, nodes) {
+    if (instances[containerId].multiSelect) {
+        instances[containerId].selectedNodes = [];
+
+        //instances[containerId].select_clear();
+
+        nodes.forEach(node => {
+            const foundNode = instances[containerId].get_node(node.id);
+            foundNode._data.view.element.className += " selected";
+            //instances[containerId].clear_node_custom_style(foundNode);
+
+            instances[containerId].selectedNodes.push(node.id);
+        });
+    }
+}
+
+MindMap.getNode = function (containerId, id) {
+    return mapNode(instances[containerId].get_node(id));
+}
+
 MindMap.clearSelect = function (containerId) {
     instances[containerId].select_clear();
 }
@@ -107,4 +166,16 @@ MindMap.enableEdit = function (containerId) {
 
 MindMap.isEditable = function (containerId) {
     return instances[containerId].get_editable();
+}
+
+mapNode = function (node) {
+    // Skip children property (TypeError: Converting circular structure to JSON)
+    return {
+        id: node.id,
+        topic: node.topic,
+        expanded: node.expanded,
+        direction: node.direction,
+        data: node.data,
+        parentId: node.parentId
+    };
 }
diff --git a/src/jsMind.Blazor/Utils/JsonUtils.cs b/src/jsMind.Blazor/Utils/JsonUtils.cs
@@ -1,19 +1,136 @@
-﻿//using System;
-//using System.Collections.Generic;
-//using System.Text;
-//using System.Text.Json;
-
-//namespace JsMind.Blazor.Utils
-//{
-//    internal static class JsonUtils
-//    {
-//        IDictionary<string, string> ConvertToDictionary(JsonElement element)
-//        {
-//            var dictionary = new Dictionary<string,string>();
-
-//            element.loo
-
-//            return dictionary;
-//        }
-//    }
-//}
+﻿/*
+ * // tslint:disable-next-line: no-reference
+///<reference path="../../assets/js/jsmind.d.ts" />
+import { Component, OnInit, Inject, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
+import { WindowRef } from '../windowref';
+import { AuthService } from '../auth.service';
+import { GraphService } from '../graph.service';
+import { jsMind } from '../../assets/js/jsmind';
+
+import mindmap_cloud from '../../assets/data/mindmap-cloud.json';
+
+@Component({
+  selector: 'app-mindmap',
+  templateUrl: './mindmap.component.html',
+  styleUrls: ['./mindmap.component.scss'],
+  providers: [ WindowRef, AuthService, GraphService ],
+})
+export class MindmapComponent implements OnInit {
+  @ViewChild('jsmind_container') container: ElementRef;
+
+  private jm: jsMind;
+  private selectedSkills: string[] = [];
+
+  @Output() loaded = new EventEmitter<any>();
+
+  constructor(
+    private winRef: WindowRef) { }
+
+  ngOnInit(): void {
+    this.init_jsMind();
+    this.load_mind();
+    this.register_event();
+
+    this.loaded.emit();
+  }
+
+  public get SelectedSkills(): string[] {
+    return this.selectedSkills;
+  }
+
+  private init_jsMind() {
+    const options = {
+        editable: true,
+        container: 'jsmind_container',
+        theme: 'mstack'
+    };
+
+    const jsMindType: any = this.winRef.nativeWindow.jsMind;
+    this.jm = new jsMindType(options);
+    this.jm.init();
+  }
+
+  public load_mind(subset?: string) {
+    // when the #mindmap-mapname anchor has been set, load that map when no other was specified
+    if (! subset && window.location.hash) {
+        const hash = window.location.hash.substr(1);
+        if (hash.startsWith('mindmap-')) {
+            subset = hash;
+        }
+    }
+
+    // defaults back to the "cloud" mindmap when none is set
+    subset = subset || 'mindmap-cloud';
+
+    switch (subset) {
+      case 'mindmap-cloud': this.jm.show(mindmap_cloud); break;
+      case 'mindmap-development': this.jm.show(mindmap_development); break;
+      case 'mindmap-marktgebieden': this.jm.show(mindmap_marktgebieden); break;
+      case 'mindmap-projectaanpak': this.jm.show(mindmap_projectaanpak); break;
+      case 'mindmap-softskills': this.jm.show(mindmap_softskills); break;
+      case 'mindmap-vakgebied': this.jm.show(mindmap_vakgebied); break;
+    }
+  }
+
+  private register_event() {
+    this.jm.add_event_listener(async (type, data) => {
+        if (type === 6) {
+            await this.toggleSkill(data.node);
+            this.updateCSS();
+        }
+    });
+  }
+
+  public clearSelection() {
+    this.selectedSkills = [];
+    this.updateCSS();
+  }
+
+  public addSkill(skill) {
+    if (!this.selectedSkills.includes(skill)) {
+        this.selectedSkills.push(skill);
+    }
+    this.updateCSS();
+  }
+
+  private removeSkill(skill) {
+    if (this.selectedSkills.includes(skill)) {
+        const index = this.selectedSkills.indexOf(skill);
+        this.selectedSkills.splice(index, 1);
+    }
+    this.updateCSS();
+  }
+
+  public toggleSkill(skill) {
+    if (this.selectedSkills.includes(skill)) {
+        this.removeSkill(skill);
+    } else {
+        this.addSkill(skill);
+    }
+  }
+
+  private updateCSS() {
+    const skills = this.selectedSkills;
+    const skillsSheetElement: any = document.getElementById('skills-sheet');
+
+    skillsSheetElement.innerHTML = '';
+
+    const skillsSheet = skillsSheetElement.sheet;
+
+    while (skillsSheet.cssRules.length > 0) {
+        skillsSheet.deleteRule(0);
+    }
+
+    for (let i = 0; i < skills.length; i++) {
+        const skill = skills[i];
+
+        let styles0 = 'jmnodes jmnode[nodeid="' + skill + '"], jmnodes jmnode[nodeid="' + skill + '"].selected {';
+        styles0 += 'background-color: #2fa0d6;';
+        styles0 += '}';
+
+        console.log('adding style ' + i + ' : ' + styles0);
+        skillsSheet.insertRule(styles0, i);
+    }
+}
+}
+*/
diff --git a/src/jsMind.Blazor/jsMind.Blazor.csproj b/src/jsMind.Blazor/jsMind.Blazor.csproj

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)`
`54`	`54`
`55`	`55`	`protected abstract object MindMapData { get; }`
`56`	`56`
	`57`	`+ public List<T> SelectedNodes = new List<T>();`
	`58`	`+`
`57`	`59`	`public void Dispose()`
`58`	`60`	`{`
`59`	`61`	`try`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@ public class MindMapOptions`
`6`	`6`	`{`
`7`	`7`	`public bool Editable { get; set; }`
`8`	`8`
	`9`	`+ public bool MultiSelect { get; set; }`
	`10`	`+`
`9`	`11`	`public string Theme { get; set; } = MindMapThemes.Primary;`
`10`	`12`	`}`
`11`	`13`	`}`