Fixed custom colors not working in multiple windows

Developer-Mike · Developer-Mike · commit e5bffe066f49 · 2024-03-11T16:47:09.000+01:00
diff --git a/src/canvas-extensions/collapsible-groups-canvas-extension.ts b/src/canvas-extensions/collapsible-groups-canvas-extension.ts
@@ -12,7 +12,7 @@ export default class CollapsibleGroupsCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('collapsibleGroupsFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('collapsibleGroupsFeatureEnabled')) return
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.CanvasChanged,
diff --git a/src/canvas-extensions/color-palette-canvas-extension.ts b/src/canvas-extensions/color-palette-canvas-extension.ts
@@ -1,3 +1,4 @@
+import { WorkspaceWindow } from "obsidian"
 import { Canvas } from "src/@types/Canvas"
 import { CanvasEvent } from "src/events/events"
 import AdvancedCanvasPlugin from "src/main"
@@ -12,11 +13,18 @@ export default class ColorPaletteCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      'advanced-canvas:window-open',
+      () => this.updateCustomColorModStyleClasses()
+    ))
+
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       'css-change',
       () => this.updateCustomColorModStyleClasses()
     ))
 
+    this.updateCustomColorModStyleClasses()
+
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.PopupMenuCreated,
       (canvas: Canvas) => this.patchColorSelection(canvas)
@@ -26,19 +34,22 @@ export default class ColorPaletteCanvasExtension {
   }
 
   private updateCustomColorModStyleClasses() {
-    document.getElementById(CUSTOM_COLORS_MOD_STYLES_ID)?.remove()
-
-    const customColorModStyle = document.createElement('style')
-    customColorModStyle.id = CUSTOM_COLORS_MOD_STYLES_ID
-    document.body.appendChild(customColorModStyle)
-
-    for (const colorId of this.getCustomColors()) {
-      // Add mod-canvas-color-<colorId> style to the css
-      customColorModStyle.innerHTML += `
-        .mod-canvas-color-${colorId} {
-          --canvas-color: var(--canvas-color-${colorId});
-        }
-      `
+    const customCss = this.getCustomColors().map((colorId) => `
+      .mod-canvas-color-${colorId} {
+        --canvas-color: var(--canvas-color-${colorId});
+      }
+    `).join('')
+
+    for (const win of this.plugin.windowsManager.windows) {
+      const doc = win.document
+      
+      doc.getElementById(CUSTOM_COLORS_MOD_STYLES_ID)?.remove()
+
+      const customColorModStyle = doc.createElement('style')
+      customColorModStyle.id = CUSTOM_COLORS_MOD_STYLES_ID
+      doc.head.appendChild(customColorModStyle)
+
+      customColorModStyle.textContent = customCss
     }
   }
 
@@ -58,8 +69,6 @@ export default class ColorPaletteCanvasExtension {
       const submenu = canvas.menu.menuEl.querySelector('.canvas-submenu')
       if (!submenu) return
 
-      this.updateCustomColorModStyleClasses()
-
       const currentNodeColor = canvas.getSelectionData().nodes.map(node => node.color).last()
       for (const colorId of this.getCustomColors()) {
         const customColorMenuItem = this.createColorMenuItem(canvas, colorId)
diff --git a/src/canvas-extensions/commands-canvas-extension.ts b/src/canvas-extensions/commands-canvas-extension.ts
@@ -17,7 +17,7 @@ export default class CommandsCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('commandsFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('commandsFeatureEnabled')) return
 
     this.plugin.addCommand({
       id: 'create-text-node',
@@ -74,7 +74,7 @@ export default class CommandsCanvasExtension {
     if (!sourceNode) return
     const sourceNodeData = sourceNode.getData()
 
-    const nodeMargin = this.plugin.settingsManager.getSetting('cloneNodeMargin')
+    const nodeMargin = this.plugin.settings.getSetting('cloneNodeMargin')
     const offset = { 
       x: (sourceNode.width + nodeMargin) * (cloneDirection === 'left' ? -1 : (cloneDirection === 'right' ? 1 : 0)),
       y: (sourceNode.height + nodeMargin) * (cloneDirection === 'up' ? -1 : (cloneDirection === 'down' ? 1 : 0))
@@ -97,15 +97,15 @@ export default class CommandsCanvasExtension {
       shape: sourceNodeData.shape 
     })
 
-    if (this.plugin.settingsManager.getSetting('zoomToClonedNode'))
+    if (this.plugin.settings.getSetting('zoomToClonedNode'))
       canvas.zoomToBbox(clonedNode.getBBox())
   }
 
   private expandNode(canvas: Canvas, expandDirection: Direction) {
     const node = canvas.selection.values().next().value
     if (!node) return
 
-    const expandNodeStepSize = this.plugin.settingsManager.getSetting('expandNodeStepSize')
+    const expandNodeStepSize = this.plugin.settings.getSetting('expandNodeStepSize')
     const expand = {
       x: expandDirection === 'left' ? -1 : (expandDirection === 'right' ? 1 : 0),
       y: expandDirection === 'up' ? -1 : (expandDirection === 'down' ? 1 : 0)
diff --git a/src/canvas-extensions/edge-data-tagger-canvas-extension.ts b/src/canvas-extensions/edge-data-tagger-canvas-extension.ts
@@ -24,7 +24,7 @@ export default class EdgeDataTaggerCanvasExtension {
         const edgeData = edge?.getData()
         if (!edgeData) return
 
-        for (const dataKey of getExposedEdgeData(this.plugin.settingsManager)) {
+        for (const dataKey of getExposedEdgeData(this.plugin.settings)) {
           const dataValue = edgeData[dataKey]
           
           if (!dataValue) delete edge.path.display.dataset[dataKey]
diff --git a/src/canvas-extensions/edges-style-canvas-extension.ts b/src/canvas-extensions/edges-style-canvas-extension.ts
@@ -53,7 +53,7 @@ export default class EdgesStyleCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('edgesStylingFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('edgesStylingFeatureEnabled')) return
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.PopupMenuCreated,
@@ -176,7 +176,7 @@ export default class EdgesStyleCanvasExtension {
         y: (fromPos.y + toPos.y) / 2 
       }
     } else if (pathRouteType === 'a-star') {
-      if (canvas.isDragging && !this.plugin.settingsManager.getSetting('edgeStylePathfinderPathLiveUpdate')) return
+      if (canvas.isDragging && !this.plugin.settings.getSetting('edgeStylePathfinderPathLiveUpdate')) return
       
       const nodeBBoxes = [...canvas.nodes.values()]
         .filter(node => {
@@ -188,11 +188,11 @@ export default class EdgesStyleCanvasExtension {
           return !isGroup && !isOpenPortal
         }).map(node => node.getBBox())
 
-      const gridResolution = this.plugin.settingsManager.getSetting('edgeStylePathfinderGridResolution')
+      const gridResolution = this.plugin.settings.getSetting('edgeStylePathfinderGridResolution')
       const pathArray = AStarHelper.aStar(fromPos, edge.from.side, toPos, edge.to.side, nodeBBoxes, gridResolution)
       if (!pathArray) return // No path found - use default path
 
-      const roundedPath = this.plugin.settingsManager.getSetting('edgeStylePathfinderPathRounded')
+      const roundedPath = this.plugin.settings.getSetting('edgeStylePathfinderPathRounded')
       const svgPath = SvgPathHelper.pathArrayToSvgPath(pathArray, roundedPath)
 
       newPath = svgPath
diff --git a/src/canvas-extensions/encapsulate-canvas-extension.ts b/src/canvas-extensions/encapsulate-canvas-extension.ts
@@ -12,7 +12,7 @@ export default class EncapsulateCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('canvasEncapsulationEnabled')) return
+    if (!this.plugin.settings.getSetting('canvasEncapsulationEnabled')) return
 
     /* Add command to encapsulate selection */
     this.plugin.addCommand({
diff --git a/src/canvas-extensions/interaction-tagger-canvas-extension.ts b/src/canvas-extensions/interaction-tagger-canvas-extension.ts
@@ -18,7 +18,7 @@ export default class InteractionTaggerCanvasExtension {
         const interactionEl = canvas.nodeInteractionLayer.interactionEl
         if (!interactionEl) return
     
-        for (const dataKey of getExposedNodeData(this.plugin.settingsManager)) {
+        for (const dataKey of getExposedNodeData(this.plugin.settings)) {
           const datasetKey = TARGET_NODE_DATASET_PREFIX + dataKey.toString().charAt(0).toUpperCase() + dataKey.toString().slice(1)
     
           const dataValue = node?.getData()[dataKey]
diff --git a/src/canvas-extensions/node-data-tagger-canvas-extension.ts b/src/canvas-extensions/node-data-tagger-canvas-extension.ts
@@ -27,7 +27,7 @@ export default class NodeDataTaggerCanvasExtension {
         const nodeData = node?.getData()
         if (!nodeData) return
 
-        for (const dataKey of getExposedNodeData(this.plugin.settingsManager)) {
+        for (const dataKey of getExposedNodeData(this.plugin.settings)) {
           const dataValue = nodeData[dataKey]
           
           if (!dataValue) delete node.nodeEl.dataset[dataKey]
diff --git a/src/canvas-extensions/portals-canvas-extension.ts b/src/canvas-extensions/portals-canvas-extension.ts
@@ -13,7 +13,7 @@ export default class PortalsCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('portalsFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('portalsFeatureEnabled')) return
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.PopupMenuCreated,
@@ -286,7 +286,7 @@ export default class PortalsCanvasExtension {
       if (portalNodeData.type !== 'file') continue
 
       // Reset portal size
-      if (this.plugin.settingsManager.getSetting('maintainClosedPortalSize')) {
+      if (this.plugin.settings.getSetting('maintainClosedPortalSize')) {
         portalNodeData.width = portalNodeData.closedPortalWidth ?? portalNodeData.width
         portalNodeData.height = portalNodeData.closedPortalHeight ?? portalNodeData.height
       }
@@ -336,7 +336,7 @@ export default class PortalsCanvasExtension {
           })))
 
           delete originNodeData.edgesToNodeFromPortal![portalId]
-        } else if (this.plugin.settingsManager.getSetting('showEdgesIntoDisabledPortals')) {
+        } else if (this.plugin.settings.getSetting('showEdgesIntoDisabledPortals')) {
           // If portal is closed, add alternative edges directly to portal
           // But don't delete the edges
 
diff --git a/src/canvas-extensions/presentation-canvas-extension.ts b/src/canvas-extensions/presentation-canvas-extension.ts
@@ -17,7 +17,7 @@ export default class PresentationCanvasExtension {
   constructor(plugin: any) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('presentationFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('presentationFeatureEnabled')) return
 
     this.plugin.addCommand({
 			id: 'create-new-slide',
@@ -124,7 +124,7 @@ export default class PresentationCanvasExtension {
   }
 
   private getSlideSize(): Size {
-    const slideSizeString = this.plugin.settingsManager.getSetting('defaultSlideSize')
+    const slideSizeString = this.plugin.settings.getSetting('defaultSlideSize')
     const slideSizeArray = slideSizeString.split('x').map((value: string) => parseInt(value))
     return { width: slideSizeArray[0], height: slideSizeArray[1] }
   }
@@ -146,11 +146,11 @@ export default class PresentationCanvasExtension {
   }
 
   private async animateNodeTransition(canvas: Canvas, fromNode: CanvasNode|undefined, toNode: CanvasNode) {
-    const useCustomZoomFunction = this.plugin.settingsManager.getSetting('zoomToSlideWithoutPadding')
-    const animationDurationMs = this.plugin.settingsManager.getSetting('slideTransitionAnimationDuration') * 1000
+    const useCustomZoomFunction = this.plugin.settings.getSetting('zoomToSlideWithoutPadding')
+    const animationDurationMs = this.plugin.settings.getSetting('slideTransitionAnimationDuration') * 1000
     
     if (animationDurationMs > 0 && fromNode) {
-      const animationIntensity = this.plugin.settingsManager.getSetting('slideTransitionAnimationIntensity')
+      const animationIntensity = this.plugin.settings.getSetting('slideTransitionAnimationIntensity')
 
       const currentNodeBBoxEnlarged = BBoxHelper.scaleBBox(fromNode.getBBox(), animationIntensity)
       if (useCustomZoomFunction) CanvasHelper.zoomToBBox(canvas, currentNodeBBoxEnlarged)
@@ -193,7 +193,7 @@ export default class PresentationCanvasExtension {
     canvas.setReadonly(true)
 
     // Register event handler for keyboard navigation
-    if (this.plugin.settingsManager.getSetting('useArrowKeysToChangeSlides')) {
+    if (this.plugin.settings.getSetting('useArrowKeysToChangeSlides')) {
       canvas.wrapperEl.onkeydown = (e: any) => {
         if (e.key === 'ArrowRight') this.nextNode(canvas)
         else if (e.key === 'ArrowLeft') this.previousNode(canvas)
diff --git a/src/canvas-extensions/readonly-canvas-extension.ts b/src/canvas-extensions/readonly-canvas-extension.ts
@@ -11,7 +11,7 @@ export default class ReadonlyCanvasExtension {
     this.plugin = plugin
     const that = this
 
-    if (!this.plugin.settingsManager.getSetting('betterReadonlyEnabled')) return
+    if (!this.plugin.settings.getSetting('betterReadonlyEnabled')) return
 
     /* Popup listener */
     this.plugin.registerEvent(this.plugin.app.workspace.on(
@@ -37,12 +37,12 @@ export default class ReadonlyCanvasExtension {
 
         if (!canvas.readonly) return
 
-        if (that.plugin.settingsManager.getSetting('disableZoom')) {
+        if (that.plugin.settings.getSetting('disableZoom')) {
           canvas.zoom = canvas.lockedZoom ?? canvas.zoom
           canvas.tZoom = canvas.lockedZoom ?? canvas.tZoom
         }
 
-        if (that.plugin.settingsManager.getSetting('disablePan')) {
+        if (that.plugin.settings.getSetting('disablePan')) {
           canvas.x = canvas.lockedX ?? canvas.x
           canvas.tx = canvas.lockedX ?? canvas.tx
           canvas.y = canvas.lockedY ?? canvas.y
@@ -113,22 +113,22 @@ export default class ReadonlyCanvasExtension {
     const toggle = CanvasHelper.createQuickSettingsButton({
       ...menuOption,
       callback: () => (async () => {
-        const newValue = !this.plugin.settingsManager.getSetting(settingKey)
-        await this.plugin.settingsManager.setSetting({ [settingKey]: newValue })
+        const newValue = !this.plugin.settings.getSetting(settingKey)
+        await this.plugin.settings.setSetting({ [settingKey]: newValue })
 
-        toggle.dataset.toggled = this.plugin.settingsManager.getSetting(settingKey).toString()
+        toggle.dataset.toggled = this.plugin.settings.getSetting(settingKey).toString()
         menuOption.callback?.call(this)
       })()
     })
     toggle.classList.add('show-while-readonly')
 
-    toggle.dataset.toggled = this.plugin.settingsManager.getSetting(settingKey).toString()
+    toggle.dataset.toggled = this.plugin.settings.getSetting(settingKey).toString()
 
     return toggle
   }
 
   private updatePopupMenu(canvas: Canvas) {
-    const hidden = canvas.readonly && this.plugin.settingsManager.getSetting('disableNodePopup')
+    const hidden = canvas.readonly && this.plugin.settings.getSetting('disableNodePopup')
     canvas.menu.menuEl.style.visibility = hidden ? 'hidden' : 'visible'
   }
 
diff --git a/src/canvas-extensions/shapes-canvas-extension.ts b/src/canvas-extensions/shapes-canvas-extension.ts
@@ -62,7 +62,7 @@ export default class ShapesCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('shapesFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('shapesFeatureEnabled')) return
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.PopupMenuCreated,
diff --git a/src/canvas-extensions/stickers-canvas-extension.ts b/src/canvas-extensions/stickers-canvas-extension.ts
@@ -11,7 +11,7 @@ export default class StickersCanvasExtension {
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    if (!this.plugin.settingsManager.getSetting('stickersFeatureEnabled')) return
+    if (!this.plugin.settings.getSetting('stickersFeatureEnabled')) return
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.PopupMenuCreated,
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
-import { ItemView, Plugin } from 'obsidian'
-import AdvancedCanvasSettingsManager from './settings'
+import { ItemView, Plugin, WorkspaceWindow } from 'obsidian'
+import SettingsManager from './settings'
 import ShapesCanvasExtension from './canvas-extensions/shapes-canvas-extension'
 import { Canvas, CanvasView } from './@types/Canvas'
 import CanvasEventEmitter from './events/canvas-event-emitter'
@@ -19,6 +19,7 @@ import DebugHelper from './utils/debug-helper'
 import DefaultNodeSizeCanvasExtension from './canvas-extensions/default-node-size-canvas-extension'
 import ColorPaletteCanvasExtension from './canvas-extensions/color-palette-canvas-extension'
 import CollapsibleGroupsCanvasExtension from './canvas-extensions/collapsible-groups-canvas-extension'
+import WindowsManager from './windows-manager'
 
 const CANVAS_EXTENSIONS: any[] = [
   NodeDataTaggerCanvasExtension,
@@ -39,17 +40,21 @@ const CANVAS_EXTENSIONS: any[] = [
 ]
 
 export default class AdvancedCanvasPlugin extends Plugin {
-  settingsManager: AdvancedCanvasSettingsManager
+  settings: SettingsManager
+  windowsManager: WindowsManager
+  debugHelper: DebugHelper
+
   canvasEventEmitter: CanvasEventEmitter
   canvasExtensions: any[]
-  debugHelper: DebugHelper
 
 	async onload() {
     IconsHelper.addIcons()
     
-    this.settingsManager = new AdvancedCanvasSettingsManager(this)
-    await this.settingsManager.loadSettings()
-    this.settingsManager.addSettingsTab()
+    this.settings = new SettingsManager(this)
+    await this.settings.loadSettings()
+    this.settings.addSettingsTab()
+
+    this.windowsManager = new WindowsManager(this)
 
     this.canvasEventEmitter = new CanvasEventEmitter(this)
     this.canvasExtensions = CANVAS_EXTENSIONS.map((Extension) => new Extension(this))
diff --git a/src/windows-manager.ts b/src/windows-manager.ts
