feat(SVGEditor): fingerprint CSS asset

src/components/BootstrapBlazor.SVGEditor/BootstrapBlazor.SvgEditor.csproj

@@ -1,5 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
+  <PropertyGroup>
+    <Version>11.0.0-rc.2.1</Version>
+  </PropertyGroup>
+
   <PropertyGroup>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Editor SvgEditor</PackageTags>
     <Description>Bootstrap UI components extensions of Editor</Description>

src/components/BootstrapBlazor.SVGEditor/Components/SvgEditor/SvgEditor.razor.cs

@@ -11,6 +11,14 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class SvgEditor
 {
+    private const string StylePath = "_content/BootstrapBlazor.SvgEditor/svgedit.bundle.css";
+
+#if NET9_0_OR_GREATER
+    private string StyleUrl => Assets[StylePath];
+#else
+    private static string StyleUrl => StylePath;
+#endif
+
     /// <summary>
     /// 获得/设置 首次加载内容
     /// </summary>
@@ -29,7 +37,7 @@ public partial class SvgEditor
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { Interop, Preload = PreContent, Callback = nameof(GetContent) });
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { Interop, Preload = PreContent, Callback = nameof(GetContent) }, StyleUrl);
 
     /// <summary>
     /// 更新内容方法

src/components/BootstrapBlazor.SVGEditor/Components/SvgEditor/SvgEditor.razor.js

@@ -1,14 +1,14 @@
-import { addLink } from '../../../BootstrapBlazor/modules/utility.js'
+import { addLink } from '../../../BootstrapBlazor/modules/utility.js'
 import Data from '../../../BootstrapBlazor/modules/data.js'
 import Editor from "../../editor/Editor.js"
 
-export async function init(id, options) {
+export async function init(id, options, styleUrl) {
     const { preload, interop, callback } = options;
 
-    await addLink('_content/BootstrapBlazor.SvgEditor/svgedit.bundle.css');
+    await addLink(styleUrl)
 
-    /* for available options see the file `docs/tutorials/ConfigOptions.md */
-    const svgEditor = new Editor(document.getElementById(id))
+    const container = document.getElementById(id)
+    const svgEditor = new Editor(container)
     svgEditor.setConfig({
         canvasName: id,
         lang: "en",
@@ -18,31 +18,28 @@ export async function init(id, options) {
         extPath: "/_content/BootstrapBlazor.SvgEditor/editor/extensions/",
         noDefaultExtensions: false
     })
-    svgEditor.init()
+    await svgEditor.init()
     svgEditor.topPanel.showSourceEditor = async (e, forceSaving) => {
         const origSource = svgEditor.svgCanvas.getSvgString()
         await interop.invokeMethodAsync(callback, origSource);
     }
 
     if (preload != null) {
-        svgEditor.loadFromString(preload)
+        await svgEditor.loadFromString(preload)
     }
     Data.set(id, {
         svgEditor,
         interop
     })
 
-    var timer = setTimeout(() => {
-        svgEditor.zoomChanged(window, "canvas", true);
-        document.querySelector("#zoom").value = "canvas"
-        clearTimeout(timer)
-    }, 800)
+    svgEditor.zoomChanged(window, "canvas", true)
+    container.querySelector("#zoom").value = "canvas"
 }
 
-export function updateContent(id, contenet) {
+export async function update(id, content) {
     var editor = Data.get(id)
     if (editor) {
-        editor.svgEditor.loadFromString(contenet);
+        await editor.svgEditor.loadFromString(content);
     }
 }