Fixed default node style attributes got applied to all node types. Renamed StyleableAttribute and style setting to style attribute

Author: Developer-Mike

README.md

@@ -195,14 +195,14 @@ Set the pathfinding method of the edges (arrows) to default, straight, squared o
 </details>
 
 ## Custom Styles
-Custom styles for nodes and edges can easily be added.
+Custom style attributes for nodes and edges can easily be added.
 
 1. Add a popup menu option
    - Open the `<VAULT-PATH>/.obsidian/plugins/obsidian-advanced-canvas/data.json` file
-   - If you want to add an option to node popup menu, search for `customNodeStyleSettings` property, otherwise search for `customEdgeStyleSettings` property. (Create it if it doesn't exist yet)
+   - If you want to add an option to node popup menu, search for `customNodeStyleAttributes` property, otherwise search for `customEdgeStyleAttributes` property. (Create it if it doesn't exist yet)
    - Add the custom popup menu option (Remove the comments!)
    ```json
-    "customNodeStyleSettings": [
+    "customNodeStyleAttributes": [
         {
             "datasetKey": "exampleStyleAttribute", // Must be unique and written in camelCase
             "label": "Example Style Attribute",

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

@@ -5,19 +5,19 @@ import * as SvgPathHelper from "src/utils/svg-path-helper"
 import { CanvasEvent } from "src/core/events"
 import * as BBoxHelper from "src/utils/bbox-helper"
 import CanvasExtension from "../../core/canvas-extension"
-import { DEFAULT_EDGE_STYLE_SETTINGS, StylableAttribute } from "./style-config"
+import { BUILTIN_EDGE_STYLE_ATTRIBUTES, StyleAttribute } from "./style-config"
 import SettingsManager from "src/settings"
 
 export default class EdgeStylesExtension extends CanvasExtension {
-  allEdgeStyles: StylableAttribute[]
+  allEdgeStyleAttributes: StyleAttribute[]
 
   isEnabled() { return 'edgesStylingFeatureEnabled' as const }
 
   init() {
-    this.allEdgeStyles = [...DEFAULT_EDGE_STYLE_SETTINGS, ...this.plugin.settings.getSetting('customEdgeStyleSettings')]
+    this.allEdgeStyleAttributes = [...BUILTIN_EDGE_STYLE_ATTRIBUTES, ...this.plugin.settings.getSetting('customEdgeStyleAttributes')]
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       SettingsManager.SETTINGS_CHANGED_EVENT,
-      () => this.allEdgeStyles = [...DEFAULT_EDGE_STYLE_SETTINGS, ...this.plugin.settings.getSetting('customEdgeStyleSettings')]
+      () => this.allEdgeStyleAttributes = [...BUILTIN_EDGE_STYLE_ATTRIBUTES, ...this.plugin.settings.getSetting('customEdgeStyleAttributes')]
     ))
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
@@ -65,13 +65,13 @@ export default class EdgeStylesExtension extends CanvasExtension {
       return
 
     CanvasHelper.createStyleDropdownMenu(
-      canvas, this.allEdgeStyles,
+      canvas, this.allEdgeStyleAttributes,
       selectedEdges[0].getData().styleAttributes ?? {},
       (attribute, value) => this.setStyleAttributeForSelection(canvas, attribute, value)
     )
   }
 
-  private setStyleAttributeForSelection(canvas: Canvas, attribute: StylableAttribute, value: string | null): void {
+  private setStyleAttributeForSelection(canvas: Canvas, attribute: StyleAttribute, value: string | null): void {
     const selectedEdges = [...canvas.selection].filter((item: any) => item.path !== undefined) as CanvasEdge[]
 
     for (const edge of selectedEdges) {

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

@@ -2,19 +2,19 @@ import { Canvas } from "src/@types/Canvas"
 import * as CanvasHelper from "src/utils/canvas-helper"
 import { CanvasEvent } from "src/core/events"
 import CanvasExtension from "../../core/canvas-extension"
-import { DEFAULT_NODE_STYLE_SETTINGS, StylableAttribute } from "./style-config"
+import { BUILTIN_NODE_STYLE_ATTRIBUTES, StyleAttribute } from "./style-config"
 import SettingsManager from "src/settings"
 
 export default class NodeStylesExtension extends CanvasExtension {
-  allNodeStyles: StylableAttribute[]
+  allNodeStyles: StyleAttribute[]
 
   isEnabled() { return 'nodeStylingFeatureEnabled' as const }
 
   init() {
-    this.allNodeStyles = [...DEFAULT_NODE_STYLE_SETTINGS, ...this.plugin.settings.getSetting('customNodeStyleSettings')]
+    this.allNodeStyles = [...BUILTIN_NODE_STYLE_ATTRIBUTES, ...this.plugin.settings.getSetting('customNodeStyleAttributes')]
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       SettingsManager.SETTINGS_CHANGED_EVENT,
-      () => this.allNodeStyles = [...DEFAULT_NODE_STYLE_SETTINGS, ...this.plugin.settings.getSetting('customNodeStyleSettings')]
+      () => this.allNodeStyles = [...BUILTIN_NODE_STYLE_ATTRIBUTES, ...this.plugin.settings.getSetting('customNodeStyleAttributes')]
     ))
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
@@ -38,7 +38,7 @@ export default class NodeStylesExtension extends CanvasExtension {
     )
   }
 
-  private setStyleAttributeForSelection(canvas: Canvas, attribute: StylableAttribute, value: string | null): void {
+  private setStyleAttributeForSelection(canvas: Canvas, attribute: StyleAttribute, value: string | null): void {
     const selectionNodeData = canvas.getSelectionData().nodes
     for (const nodeData of selectionNodeData) {
       const node = canvas.nodes.get(nodeData.id)

src/canvas-extensions/advanced-styles/style-config.ts

@@ -1,19 +1,19 @@
 import { CanvasNodeType } from "src/@types/Canvas"
 
-export interface StylableAttributeOption {
+export interface StyleAttributeOption {
   icon: string
   label: string
   value: string | null // The element with the null value is the default
 }
 
-export interface StylableAttribute {
+export interface StyleAttribute {
   datasetKey: string
   label: string
   nodeTypes?: CanvasNodeType[]
-  options: StylableAttributeOption[]
+  options: StyleAttributeOption[]
 }
 
-export const DEFAULT_NODE_STYLE_SETTINGS = [
+export const BUILTIN_NODE_STYLE_ATTRIBUTES = [
   {
     datasetKey: 'textAlign',
     label: 'Text Alignment',
@@ -109,9 +109,9 @@ export const DEFAULT_NODE_STYLE_SETTINGS = [
       }
     ]
   }
-] as StylableAttribute[]
+] as StyleAttribute[]
 
-export const DEFAULT_EDGE_STYLE_SETTINGS = [
+export const BUILTIN_EDGE_STYLE_ATTRIBUTES = [
   {
     datasetKey: 'path',
     label: 'Path Style',
@@ -210,4 +210,4 @@ export const DEFAULT_EDGE_STYLE_SETTINGS = [
       }
     ]
   }
-] as StylableAttribute[]
+] as StyleAttribute[]

src/canvas-extensions/better-default-settings-canvas-extension.ts

@@ -79,12 +79,13 @@ export default class BetterDefaultSettingsCanvasExtension  extends CanvasExtensi
 
   private applyDefaultNodeStyles(_canvas: Canvas, node: CanvasNode) {
     const nodeData = node.getData()
+    if (nodeData.type !== 'text') return
 
     node.setData({
       ...nodeData,
       styleAttributes: {
         ...nodeData.styleAttributes,
-        ...this.plugin.settings.getSetting('defaultNodeStyleSettings')
+        ...this.plugin.settings.getSetting('defaultTextNodeStyleAttributes')
       }
     })
   }
@@ -96,7 +97,7 @@ export default class BetterDefaultSettingsCanvasExtension  extends CanvasExtensi
       ...edgeData,
       styleAttributes: {
         ...edgeData.styleAttributes,
-        ...this.plugin.settings.getSetting('defaultEdgeStyleSettings')
+        ...this.plugin.settings.getSetting('defaultEdgeStyleAttributes')
       }
     })
   }

src/settings.ts

@@ -1,6 +1,6 @@
 import { Notice, PluginSettingTab, Setting } from "obsidian"
 import AdvancedCanvasPlugin from "./main"
-import { DEFAULT_EDGE_STYLE_SETTINGS as BUILTIN_EDGE_STYLE_SETTINGS, DEFAULT_NODE_STYLE_SETTINGS as BUILTIN_NODE_STYLE_SETTINGS, StylableAttribute } from "./canvas-extensions/advanced-styles/style-config"
+import { BUILTIN_EDGE_STYLE_ATTRIBUTES, BUILTIN_NODE_STYLE_ATTRIBUTES, StyleAttribute } from "./canvas-extensions/advanced-styles/style-config"
 
 const NODE_TYPES_ON_DOUBLE_CLICK = {
   'text': 'Text',
@@ -17,12 +17,12 @@ export interface AdvancedCanvasPluginSettings {
   performanceOptimizationEnabled: boolean
 
   nodeStylingFeatureEnabled: boolean
-  customNodeStyleSettings: StylableAttribute[]
-  defaultNodeStyleSettings: { [key: string]: string }
+  customNodeStyleAttributes: StyleAttribute[]
+  defaultTextNodeStyleAttributes: { [key: string]: string }
 
   edgesStylingFeatureEnabled: boolean
-  customEdgeStyleSettings: StylableAttribute[]
-  defaultEdgeStyleSettings: { [key: string]: string }
+  customEdgeStyleAttributes: StyleAttribute[]
+  defaultEdgeStyleAttributes: { [key: string]: string }
   edgeStyleDirectRotateArrow: boolean
   edgeStylePathfinderGridResolution: number
   edgeStylePathfinderPathLiveUpdate: boolean
@@ -68,12 +68,12 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
   performanceOptimizationEnabled: false,
 
   nodeStylingFeatureEnabled: true,
-  customNodeStyleSettings: [],
-  defaultNodeStyleSettings: {},
+  customNodeStyleAttributes: [],
+  defaultTextNodeStyleAttributes: {},
 
   edgesStylingFeatureEnabled: true,
-  customEdgeStyleSettings: [],
-  defaultEdgeStyleSettings: {},
+  customEdgeStyleAttributes: [],
+  defaultEdgeStyleAttributes: {},
   edgeStyleDirectRotateArrow: false,
   edgeStylePathfinderGridResolution: 10,
   edgeStylePathfinderPathLiveUpdate: true,
@@ -231,7 +231,9 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
           .onClick(() => window.open("https://github.com/Developer-Mike/obsidian-advanced-canvas/blob/main/README.md#custom-styles"))
       )
 
-    this.createDefaultStylesSection(containerEl, 'Default node styles', 'defaultNodeStyleSettings', [ ...BUILTIN_NODE_STYLE_SETTINGS, ...this.settingsManager.getSetting('customNodeStyleSettings') ])
+    const allNodeStyleAttributes = [ ...BUILTIN_NODE_STYLE_ATTRIBUTES, ...this.settingsManager.getSetting('customNodeStyleAttributes') ]
+      .filter((setting) => setting.nodeTypes === undefined || setting.nodeTypes?.includes('text'))
+    this.createDefaultStylesSection(containerEl, 'Default text node style attributes', 'defaultTextNodeStyleAttributes', allNodeStyleAttributes)
 
     this.createFeatureHeading(
       containerEl,
@@ -249,7 +251,7 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
           .onClick(() => window.open("https://github.com/Developer-Mike/obsidian-advanced-canvas/blob/main/README.md#custom-styles"))
       )
 
-    this.createDefaultStylesSection(containerEl, 'Default edge styles', 'defaultEdgeStyleSettings', [ ...BUILTIN_EDGE_STYLE_SETTINGS, ...this.settingsManager.getSetting('customEdgeStyleSettings') ])
+    this.createDefaultStylesSection(containerEl, 'Default edge style attributes', 'defaultEdgeStyleAttributes', [ ...BUILTIN_EDGE_STYLE_ATTRIBUTES, ...this.settingsManager.getSetting('customEdgeStyleAttributes') ])
 
     new Setting(containerEl)
       .setName("Rotate arrow if pathfinding method is \"Direct\"")
@@ -484,7 +486,7 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
       )
   }
 
-  private createDefaultStylesSection(containerEl: HTMLElement, label: string, settingsKey: keyof AdvancedCanvasPluginSettings, allStylableAttributes: StylableAttribute[]) {
+  private createDefaultStylesSection(containerEl: HTMLElement, label: string, settingsKey: keyof AdvancedCanvasPluginSettings, allStylableAttributes: StyleAttribute[]) {
     const defaultNodeStylesEl = document.createElement('details')
     defaultNodeStylesEl.classList.add('setting-item')
 

src/utils/canvas-helper.ts

@@ -1,6 +1,6 @@
 import { addIcon, setIcon, setTooltip } from "obsidian"
 import { BBox, Canvas, CanvasNode, CanvasNodeData, Position, Size } from "src/@types/Canvas"
-import { StylableAttribute } from "src/canvas-extensions/advanced-styles/style-config"
+import { StyleAttribute } from "src/canvas-extensions/advanced-styles/style-config"
 import AdvancedCanvasPlugin from "src/main"
 import * as BBoxHelper from "src/utils/bbox-helper"
 
@@ -160,7 +160,7 @@ export function zoomToBBox(canvas: Canvas, bbox: BBox) {
   canvas.tZoom = Math.log2(scaleFactor)
 }
 
-export function createStyleDropdownMenu(canvas: Canvas, stylableAttributes: StylableAttribute[], currentStyleAttributes: { [key: string]: string | null }, setStyleAttribute: (attribute: StylableAttribute, value: string | null) => void) {
+export function createStyleDropdownMenu(canvas: Canvas, stylableAttributes: StyleAttribute[], currentStyleAttributes: { [key: string]: string | null }, setStyleAttribute: (attribute: StyleAttribute, value: string | null) => void) {
   const STYLE_MENU_ID = 'style-menu'
   const STYLE_MENU_DROPDOWN_ID = 'style-menu-dropdown'
   const STYLE_MENU_DROPDOWN_SUBMENU_ID = 'style-menu-dropdown-submenu'