ReadOnly (StefH#6)

* .

* readonly

* v

* ci

* ignore

Author: StefH

.github/workflows/ci.yml

@@ -1,7 +1,6 @@
-name: DeployToGitHubPages
+name: CI
 env:
   PUBLISH_DIR: examples/jsMind.WASM.App/bin/Release/net5.0/publish/wwwroot
-  PUBLISH_XXX: src/CoronaDashboard/bin/Release/net5.0/publish/wwwroot
 
 on:
   push:

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: DeployToGitHubPages
+name: 'Build and Deploy to GitHubPages'
 env:
   PUBLISH_DIR: examples/jsMind.WASM.App/bin/Release/net5.0/publish/wwwroot
 

.gitignore

@@ -353,5 +353,5 @@ MigrationBackup/
 # Custom
 /docs-temp
 
-#src/jsMind.Blazor/wwwroot/*.js
-#src/jsMind.Blazor/wwwroot/*.css
+src/jsMind.Blazor/wwwroot/*.js
+src/jsMind.Blazor/wwwroot/*.css

examples/jsMind.WASM.App/Pages/Index.razor

@@ -2,7 +2,7 @@
 
 <h1>jsMind Demo</h1>
 
-<pre>SelectedNodeId = @_selectedNodeId</pre>
+<pre>SelectedNodeId  = @_selectedNodeId</pre>
 <pre>SelectedNodeIds = @string.Join(",", _selectedNodeIds)</pre>
 
 <div>
@@ -19,6 +19,8 @@
     <button class="btn btn-primary oi oi-collapse-down" @onclick="CollapseTree"></button>
     <button class="btn btn-primary oi oi-check" @onclick="SelectTreeNode"></button>
     <button class="btn btn-primary oi oi-action-undo" @onclick="ClearSelect"></button>
+    <button class="btn btn-primary oi oi-envelope-open" @onclick="MindMapClickable"></button>
+    <button class="btn btn-primary oi oi-envelope-closed" @onclick="MindMapNotClickable"></button>
 </div>
 <hr />
 <div>
@@ -237,6 +239,16 @@
         await _myTreeNodeContainer.ClearSelect();
     }
 
+    async Task MindMapClickable()
+    {
+        await _myTreeNodeContainer.SetReadonly(false);
+    }
+
+    async Task MindMapNotClickable()
+    {
+        await _myTreeNodeContainer.SetReadonly(true);
+    }
+
     async Task CollapseTree()
     {
         await _myTreeNodeContainer.Collapse();

examples/jsMind.WASM.App/wwwroot/index.html

@@ -15,6 +15,7 @@
 
     <link type="text/css" rel="stylesheet" href="_content/jsMind.Blazor/jsmind.min.css" />
 
+    <!-- testing ... -->
     <script type="text/javascript" src="_content/jsMind.Blazor/jsmind.min.js"></script>
     <script type="text/javascript" src="_content/jsMind.Blazor/jsmind-interop.min.js"></script>
 </head>

src/jsMind.Blazor/Components/MindMapContainer.Interop.cs

@@ -92,6 +92,23 @@ public ValueTask Collapse()
             return Runtime.InvokeVoidAsync("MindMap.collapse", _containerId);
         }
 
+        public async ValueTask SetReadonly(bool @readonly)
+        {
+            Options.Readonly = @readonly;
+
+            await Runtime.InvokeVoidAsync("MindMap.setReadOnly", _containerId, @readonly);
+
+            if (@readonly)
+            {
+                await SetEditable(false);
+            }
+        }
+
+        public bool IsReadonly()
+        {
+            return Options.Readonly;
+        }
+
         private ValueTask DisposeMindMap()
         {
             return Runtime.InvokeVoidAsync("MindMap.destroy", _containerId);

src/jsMind.Blazor/Components/MindMapContainer.cs

@@ -42,6 +42,12 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.OpenElement(0, "div");
             builder.AddAttribute(1, "id", _containerId);
             builder.AddMultipleAttributes(2, AdditionalAttributes);
+
+            if (true)
+            {
+                builder.AddAttribute(3, "pointer-events", "none");
+            }
+
             builder.CloseElement();
         }
 

src/jsMind.Blazor/Models/MindMapOptions.cs

@@ -6,6 +6,8 @@ public class MindMapOptions
     {
         public bool Editable { get; set; }
 
+        public bool Readonly { get; set; }
+
         public bool MultiSelect { get; set; }
 
         public string Theme { get; set; } = MindMapThemes.Primary;

src/jsMind.Blazor/Scripts/jsmind-interop.js

@@ -24,6 +24,11 @@ MindMap.show = function (dotnetReference, containerId, mindMapOptions, mindMapDa
     }
 
     const mm = window.jsMind.show(options, mind);
+
+    // ReadOnly
+    setReadOnly(mm, mindMapOptions.readOnly);
+
+    // MultiSelect
     mm["multiSelect"] = mindMapOptions.multiSelect;
 
     const eventHandler = function (type, data) {
@@ -52,14 +57,18 @@ MindMap.show = function (dotnetReference, containerId, mindMapOptions, mindMapDa
         mm.selectedNodes = [];
 
         const mousedownHandleMultiSelect = function (e) {
+            if (!mm.options.default_event_handle.enable_mousedown_handle) {
+                return;
+            }
+
             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);
 
-                var selectedNodeId;
+                let selectedNodeId;
 
                 // Check if already selected
                 const index = mm.selectedNodes.indexOf(id);
@@ -175,6 +184,10 @@ MindMap.isEditable = function (containerId) {
     return instances[containerId].get_editable();
 }
 
+MindMap.setReadOnly = function (containerId, isReadOnly) {
+    return setReadOnly(instances[containerId], isReadOnly);
+}
+
 updateSelectedClass = function (node, set) {
     if (set && !(/\s*selected\b/i).test(node._data.view.element.className)) {
         node._data.view.element.className += " selected";
@@ -194,4 +207,12 @@ mapNode = function (node) {
         data: node.data,
         parentId: node.parentId
     };
+}
+
+setReadOnly = function (mm, isReadOnly) {
+    mm.options.default_event_handle = {
+        enable_mousedown_handle: !isReadOnly,
+        enable_click_handle: !isReadOnly,
+        enable_dblclick_handle: !isReadOnly
+    };
 }