doc(MindMap): update documentation for callback extensions (#5012)

* doc: 增加放大缩小示例

* doc: 更新示例

* doc: 增加自定义按钮逻辑示例文档

* refactor: 更新文档说明

* refactor: 更新文档

* chore: 更新 9.1.1 版本

Co-Authored-By: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -48,7 +48,7 @@
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.1.0" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.4" />
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.0" />
+    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.1" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.0" />

src/BootstrapBlazor.Server/Components/Samples/MindMaps.razor

@@ -1,6 +1,10 @@
 @page "/mind-map"
 @inject IStringLocalizer<MindMaps> Localizer
 
+<HeadContent>
+    <script src="./Components/Samples/MindMaps.razor.js"></script>
+</HeadContent>
+
 <h3>@Localizer["MindMapTitle"]</h3>
 
 <h4>@Localizer["MindMapDescription"]</h4>
@@ -11,34 +15,45 @@
     <section ignore>
         <div class="row g-3 form-inline">
             <div class="col-12 col-sm-6">
-                <Select @bind-Value="_options.Layout" ShowLabel="true" DisplayText="@Localizer["MindMapLayout"]"></Select>
+                <Select @bind-Value="_layout" ShowLabel="true" DisplayText="@Localizer["MindMapLayout"]"></Select>
             </div>
             <div class="col-12 col-sm-6">
-                <Select @bind-Value="_options.Theme" ShowLabel="true" DisplayText="@Localizer["MindMapTheme"]"></Select>
+                <Select @bind-Value="_theme" ShowLabel="true" DisplayText="@Localizer["MindMapTheme"]"></Select>
             </div>
         </div>
     </section>
-    <MindMap Options="_options" Data="@Data" OnReceive="@OnReceive" @ref="MindMap"></MindMap>
-    <div class="row g-3 mt-3">
-        <div class="col-12">
-            <Button Text="@Localizer["Sample1ButtonText"]" OnClick="Sample"></Button>
-            <Button Text="@Localizer["Sample2ButtonText"]" OnClick="Sample2"></Button>
-            <Button Text="@Localizer["ExportButtonText"]" OnClick="ExportImage"></Button>
-            <Button Text="@Localizer["ExportJsonButtonText"]" OnClick="ExportJson"></Button>
-            <Button Text="@Localizer["GetFullDataButtonText"]" OnClick="GetFullData"></Button>
-            <Button Text="@Localizer["GetDataButtonText"]" OnClick="GetData"></Button>
-            <Button Text="@Localizer["SetDataButtonText"]" OnClick="SetData"></Button>
-            <Button Text="@Localizer["ResetButtonText"]" OnClick="Reset"></Button>
-            <Button Text="@Localizer["FitButtonText"]" OnClick="Fit"></Button>
-        </div>
-        <div class="col-12">
-            <Textarea @bind-Value="@_result" rows="10"></Textarea>
+    <MindMap Layout="_layout" Theme="_theme" Data="@_data" @ref="MindMap"></MindMap>
+    <section ignore>
+        <div class="row g-3 mt-3">
+            <div class="col-12">
+                <Button Text="@Localizer["Sample1ButtonText"]" OnClick="Sample1"></Button>
+                <Button Text="@Localizer["Sample2ButtonText"]" OnClick="Sample2"></Button>
+                <Button Text="@Localizer["ExportButtonText"]" OnClick="ExportImage"></Button>
+                <Button Text="@Localizer["ExportJsonButtonText"]" OnClick="ExportJson"></Button>
+                <Button Text="@Localizer["GetFullDataButtonText"]" OnClick="GetFullData"></Button>
+                <Button Text="@Localizer["GetDataButtonText"]" OnClick="GetData"></Button>
+                <Button Text="@Localizer["SetDataButtonText"]" OnClick="SetData"></Button>
+                <Button Text="@Localizer["ResetButtonText"]" OnClick="Reset"></Button>
+                <Button Text="@Localizer["FitButtonText"]" OnClick="Fit"></Button>
+                <Button Text="@Localizer["Scale1ButtonText"]" OnClick="() => Scale(-0.1f)"></Button>
+                <Button Text="@Localizer["Scale2ButtonText"]" OnClick="() => Scale(0.1f)"></Button>
+                <Button Text="@Localizer["CustomButtonText"]" OnClick="ClickCustom"></Button>
+            </div>
+            <div class="col-12">
+                <Textarea @bind-Value="@_result" rows="10"></Textarea>
+            </div>
+            <div class="col-12">
+                <div>@((MarkupString)Localizer["MindMapExtensionDesc"].Value)</div>
+            </div>
         </div>
-    </div>
+        <Pre class="mt-3">window.BootstrapBlazor.MindMap = {
+    callbacks: {
+        clickCustom: function (args) {
+            console.log(this, args);
+        }
+    }
+}</Pre>
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
-
-<AttributeTable Title="@Localizer["OptionsText"]" Items="@GetOptionsAttributes()"></AttributeTable>
-
-<AttributeTable Title="@Localizer["NodeDataText"]" Items="@GetNodeDataAttributes()"></AttributeTable>