Fixed issue 308 - custom css node and edge styles cant change default value in settings regression

Author: Developer-Mike

src/canvas-extensions/advanced-styles/edge-styles.ts

@@ -8,6 +8,10 @@ import EdgePathfindingDirect from "./edge-pathfinding-methods/pathfinding-direct
 import EdgePathfindingSquare from "./edge-pathfinding-methods/pathfinding-square"
 import { BUILTIN_EDGE_STYLE_ATTRIBUTES, StyleAttribute, styleAttributeValidator } from "./style-config"
 import CssStylesConfigManager from "src/managers/css-styles-config-manager"
+import AdvancedCanvasPlugin from "src/main"
+
+export const GET_EDGE_CSS_STYLES_MANAGER = (plugin: AdvancedCanvasPlugin) =>
+  new CssStylesConfigManager(plugin, 'advanced-canvas-edge-style', styleAttributeValidator)
 
 const EDGE_PATHFINDING_METHODS: { [key: string]: typeof EdgePathfindingMethod } = {
   'direct': EdgePathfindingDirect,
@@ -22,7 +26,7 @@ export default class EdgeStylesExtension extends CanvasExtension {
   isEnabled() { return 'edgesStylingFeatureEnabled' as const }
 
   init() {
-    this.cssStylesManager = new CssStylesConfigManager(this.plugin, 'advanced-canvas-edge-style', styleAttributeValidator)
+    this.cssStylesManager = GET_EDGE_CSS_STYLES_MANAGER(this.plugin)
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       'advanced-canvas:popup-menu-created',
@@ -43,7 +47,7 @@ export default class EdgeStylesExtension extends CanvasExtension {
       'advanced-canvas:node-added',
       (canvas: Canvas, node: CanvasNode) => {
         if (canvas.dirty.size > 1 && !canvas.isPasting) return // Skip if multiple nodes are added at once (e.g. on initial load)
-        
+
         this.updateAllEdgesInArea(canvas, node.getBBox())
       }
     ))
@@ -106,7 +110,7 @@ export default class EdgeStylesExtension extends CanvasExtension {
         }
       })
     }
-    
+
     canvas.pushHistory(canvas.getData())
   }
 
@@ -133,7 +137,7 @@ export default class EdgeStylesExtension extends CanvasExtension {
     }
 
     const edgeData = edge.getData()
-    
+
     // Reset path to default
     if (!edge.bezier) return
     edge.center = undefined
@@ -144,20 +148,20 @@ export default class EdgeStylesExtension extends CanvasExtension {
     if (pathfindingMethod && pathfindingMethod in EDGE_PATHFINDING_METHODS) {
       const fromNodeBBox = edge.from.node.getBBox()
       const fromBBoxSidePos = BBoxHelper.getCenterOfBBoxSide(fromNodeBBox, edge.from.side)
-      const fromPos = edge.from.end === 'none' ? 
+      const fromPos = edge.from.end === 'none' ?
         fromBBoxSidePos :
         edge.bezier.from
-      
+
       const toNodeBBox = edge.to.node.getBBox()
       const toBBoxSidePos = BBoxHelper.getCenterOfBBoxSide(toNodeBBox, edge.to.side)
-      const toPos = edge.to.end === 'none' ? 
+      const toPos = edge.to.end === 'none' ?
         toBBoxSidePos :
         edge.bezier.to
 
       const path = new (EDGE_PATHFINDING_METHODS[pathfindingMethod] as any)(
-        this.plugin, 
-        canvas, 
-        fromNodeBBox, fromPos, fromBBoxSidePos, edge.from.side, 
+        this.plugin,
+        canvas,
+        fromNodeBBox, fromPos, fromBBoxSidePos, edge.from.side,
         toNodeBBox, toPos, toBBoxSidePos, edge.to.side
       ).getPath()
       if (!path) return
@@ -195,4 +199,4 @@ export default class EdgeStylesExtension extends CanvasExtension {
     else // Default triangle
       return `0,0 6.5,10.4 -6.5,10.4`
   }
-}
+}

src/canvas-extensions/advanced-styles/node-styles.ts

@@ -3,14 +3,18 @@ import CanvasHelper from "src/utils/canvas-helper"
 import CanvasExtension from "../canvas-extension"
 import { BUILTIN_NODE_STYLE_ATTRIBUTES, StyleAttribute, styleAttributeValidator } from "./style-config"
 import CssStylesConfigManager from "src/managers/css-styles-config-manager"
+import AdvancedCanvasPlugin from "src/main"
+
+export const GET_NODE_CSS_STYLES_MANAGER = (plugin: AdvancedCanvasPlugin) =>
+  new CssStylesConfigManager(plugin, 'advanced-canvas-node-style', styleAttributeValidator)
 
 export default class NodeStylesExtension extends CanvasExtension {
   cssStylesManager: CssStylesConfigManager<StyleAttribute>
 
   isEnabled() { return 'nodeStylingFeatureEnabled' as const }
 
   init() {
-    this.cssStylesManager = new CssStylesConfigManager(this.plugin, 'advanced-canvas-node-style', styleAttributeValidator)
+    this.cssStylesManager = GET_NODE_CSS_STYLES_MANAGER(this.plugin)
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       'advanced-canvas:popup-menu-created',
@@ -51,7 +55,7 @@ export default class NodeStylesExtension extends CanvasExtension {
         }
       })
     }
-    
+
     canvas.pushHistory(canvas.getData())
   }
-}
+}

src/settings.ts

@@ -1,8 +1,11 @@
 import { Notice, PluginSettingTab, Setting as SettingEl, TextComponent } from "obsidian"
 import { BooleanSetting, ButtonSetting, DimensionSetting, DropdownSetting, NumberSetting, Setting, SettingsHeading, StyleAttributesSetting, TextSetting } from "./@types/Settings"
+import { GET_EDGE_CSS_STYLES_MANAGER } from "./canvas-extensions/advanced-styles/edge-styles"
+import { GET_NODE_CSS_STYLES_MANAGER } from "./canvas-extensions/advanced-styles/node-styles"
 import { BUILTIN_EDGE_STYLE_ATTRIBUTES, BUILTIN_NODE_STYLE_ATTRIBUTES, StyleAttribute } from "./canvas-extensions/advanced-styles/style-config"
 import { VARIABLE_BREAKPOINT_CSS_VAR } from "./canvas-extensions/variable-breakpoint-canvas-extension"
 import AdvancedCanvasPlugin from "./main"
+import CssStylesConfigManager from "./managers/css-styles-config-manager"
 
 const README_URL = 'https://github.com/Developer-Mike/obsidian-advanced-canvas?tab=readme-ov-file'
 
@@ -376,8 +379,11 @@ export const SETTINGS = {
         label: 'Default text node style attributes',
         type: 'styles',
         getParameters(settingsManager) {
-          return [ ...BUILTIN_NODE_STYLE_ATTRIBUTES, ...settingsManager.getSetting('customNodeStyleAttributes') ]
-            .filter((setting) => setting.nodeTypes === undefined || setting.nodeTypes?.includes('text'))
+          return [
+            ...BUILTIN_NODE_STYLE_ATTRIBUTES, /* BUILTINS */
+            ...settingsManager.nodeCssStylesManager.getStyles(), /* CUSTOM CSS STYLES */
+            ...settingsManager.getSetting('customNodeStyleAttributes') /* LEGACY CUSTOM STYLES */
+          ].filter((setting) => setting.nodeTypes === undefined || setting.nodeTypes?.includes('text'))
         }
       } as StyleAttributesSetting
     }
@@ -418,7 +424,11 @@ export const SETTINGS = {
         label: 'Default edge style attributes',
         type: 'styles',
         getParameters(settingsManager) {
-          return [ ...BUILTIN_EDGE_STYLE_ATTRIBUTES, ...settingsManager.getSetting('customEdgeStyleAttributes') ]
+          return [
+            ...BUILTIN_EDGE_STYLE_ATTRIBUTES, /* BUILTINS */
+            ...settingsManager.edgeCssStylesManager.getStyles(), /* CUSTOM CSS STYLES */
+            ...settingsManager.getSetting('customEdgeStyleAttributes') /* LEGACY CUSTOM STYLES */
+          ]
         }
       } as StyleAttributesSetting,
       edgeStyleUpdateWhileDragging: {
@@ -642,8 +652,14 @@ export default class SettingsManager {
   private settings: AdvancedCanvasPluginSettingsValues
   private settingsTab: AdvancedCanvasPluginSettingTab
 
+  nodeCssStylesManager: CssStylesConfigManager<StyleAttribute>
+  edgeCssStylesManager: CssStylesConfigManager<StyleAttribute>
+
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
+
+    this.nodeCssStylesManager = GET_NODE_CSS_STYLES_MANAGER(plugin)
+    this.edgeCssStylesManager = GET_EDGE_CSS_STYLES_MANAGER(plugin)
   }
 
   async loadSettings() {